/* 42 Drawn in Light · The imprint. One page for the whole site: every design's footer leads here.
   The door page's dark room and its type (Cormorant, plain warm white, no glow), and nothing
   else: the two companies, their addresses, the inbox, and the way back. */

:root {
  --ink: #f5f0e6;
  --serif: 'Cormorant', Garamond, Georgia, serif;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; background: #000; color: #fff; }
body { font-family: var(--serif); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
h1, p { margin: 0; }
img { display: block; }

.imprint {
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  padding: clamp(40px, 8svh, 120px) 16px;
}

.mark { display: block; border-radius: 2px; }
.mark img { height: clamp(28px, 4.2svh, 56px); width: auto; opacity: .82; transition: opacity .3s ease; }
.mark:is(:hover, :focus-visible) img { opacity: 1; }

.title {
  margin-top: clamp(14px, 2.6svh, 36px);
  font: italic 500 clamp(42px, min(3.6vw, 6.6svh), 96px)/1 var(--serif);
  letter-spacing: -.01em; color: var(--ink);
}

/* the facts: set plainly, upright, one size */
.facts {
  margin-top: clamp(22px, 4svh, 60px);
  font: normal 500 clamp(19px, min(1.3vw, 2.6svh), 32px)/1.5 var(--serif);
  font-variant-numeric: lining-nums;               /* Cormorant's own figures hang below the line */
  color: rgba(245, 240, 230, .86);
}
.facts p + p { margin-top: 1.1em; }
.facts .who { font-style: italic; color: var(--ink); }
.facts .who + p { margin-top: .25em; }            /* each company's name sits on its address */
.facts p + .who, .facts .reach { margin-top: 1.6em; }
.facts a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em; text-decoration-color: rgba(245, 240, 230, .4); transition: text-decoration-color .3s ease, color .3s ease; }
.facts a:is(:hover, :focus-visible) { color: #fff; text-decoration-color: currentColor; }

.back {
  margin-top: clamp(28px, 5svh, 72px);
  font: italic 500 clamp(18px, min(1.15vw, 2.3svh), 28px)/1.2 var(--serif);
  color: rgba(245, 240, 230, .62); text-decoration: none; transition: color .3s ease;
}
.back::before { content: '\2190\00a0'; }
.back:is(:hover, :focus-visible) { color: #fff; }

:is(.mark, .facts a, .back):focus-visible { outline: 2px solid currentColor; outline-offset: .3em; }
:is(.mark, .facts a, .back):focus:not(:focus-visible) { outline: none; }