/* Trace Capital, the launch page (05-Evidence-Launch.html).

   Maura's brief, October 5: the Evidence field on one screen, "Trace
   Capital" as text top left, the copyright bottom right. No scrolling, no
   other pages. October 6 follow-up: a Contact email link to
   info@tracecap.com, subtle at Ben's request like the Privacy link on
   greenoaks.com, bottom left on the copyright's line (Hunter); it is the
   only thing to click. The font is the one homepage-src already ships and
   licenses. */

@font-face {
  font-family: 'Zalando Sans';
  font-style: normal;
  font-weight: 200 900;
  font-stretch: 75% 125%;
  font-display: swap;
  src: url('fonts/zalando-sans-latin.woff2') format('woff2');
}

:root {
  --forest: #18231f;
  --paper: #f3f0e8;
  --sage: #b7c6a7;

  /* One inset for all four sides. It follows the shorter side of the
     screen, so a landscape phone keeps a phone's margin and a large
     monitor gets Evidence's desktop gutter. */
  --inset: clamp(20px, min(3.6vw, 5.4vh), 64px);
  --inset-x: max(var(--inset), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
  --inset-top: max(var(--inset), env(safe-area-inset-top, 0px));
  --inset-bottom: max(var(--inset), env(safe-area-inset-bottom, 0px));

  --name-size: clamp(19px, calc(17.8px + 0.57vw), 32px);

  color-scheme: dark;
}
@supports (height: 1dvh) {
  :root { --inset: clamp(20px, min(3.6vw, 5.4dvh), 64px); }
}

/* Exactly one screen. The page never scrolls, bounces or pans. */
html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  background: var(--forest);
}
body {
  font-family: 'Zalando Sans', system-ui, sans-serif;
  font-synthesis: none;
  color: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
::selection { background: var(--sage); color: var(--forest); }

/* The visible screen, mobile browser bars included: 100dvh follows the
   bars as they come and go, so the field always fills what is visible
   and the copyright never sits under a toolbar. */
.stage {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

/* ---- The field ------------------------------------------------------------ */
.field { position: absolute; inset: 0; }
.field canvas { display: block; width: 100%; height: 100%; }
/* Without script the field is still there, at rest. With script the canvas
   draws it instead, so the CSS dots never flash first. */
.field::before {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(243, 240, 232, 0.15) 1.5px, transparent 1.7px);
  background-size: 31px 31px; background-position: center;
}
.js .field::before { display: none; }

/* ---- The two lines of type ------------------------------------------------
   Each line box is exactly the capital height: Zalando Sans centres its
   capitals (714 units) in its 964 / -250 ascent and descent, so
   line-height 0.714 puts the box top on the capital tops and the box bottom
   on the baseline. The inset then measures to the letters themselves, not
   to the air around them. The side margins take off each end glyph's own
   side bearing (the T at 480, the l at 450), so the T's bar and the l's
   stem sit on the inset too. The p of Capital hangs below the baseline,
   as a descender should. */
.name,
.legal,
.contact,
.social {
  position: absolute;
  margin: 0;
  font-stretch: 100%;
  line-height: 0.714;
  white-space: nowrap;
}
/* Where the browser can trim to the letters itself, it does, and avoids
   rounding the font's ascent and descent to whole pixels on the way. */
@supports (text-box: trim-both cap alphabetic) {
  .name, .legal, .contact, .social { line-height: 1; text-box: trim-both cap alphabetic; }
}

/* "Trace Capital" as plain text: the Evidence wordmark's own weight and
   tracking, without the mark. 20px on phones, 26px at 1440, 32px from
   2560. */
.name {
  top: var(--inset-top);
  left: var(--inset-x);
  margin-left: -0.024em;
  font-size: var(--name-size);
  font-weight: 480;
  letter-spacing: -0.045em;
}

/* The close's footer line from Evidence, its label style and its colour,
   set in the bottom right corner. 14px, rising to 16px on large monitors. */
.legal {
  right: var(--inset-x);
  bottom: var(--inset-bottom);
  margin-right: -0.069em;
  font-size: var(--legal-size);
  font-weight: 450;
  letter-spacing: -0.004em;
  color: rgba(243, 240, 232, 0.5);
}

/* Evidence's footer rule, the hairline the client's screenshot shows above
   the copyright: inset to inset, the same gap above the letters as on
   Evidence's third page. */
:root {
  --legal-size: clamp(14px, calc(11.4px + 0.18vw), 16px);
  --legal-gap: clamp(18px, calc(var(--inset) * 0.5 + 6px), 28px);
}
.footer-rule {
  position: absolute;
  left: var(--inset-x);
  right: var(--inset-x);
  bottom: calc(var(--inset-bottom) + 0.714 * var(--legal-size) + var(--legal-gap));
  height: 1px;
  background: rgba(243, 240, 232, 0.12);
}

/* The name is the logo's own lettering (brand-kit-src/wordmark-geometry.json:
   Zalando Sans SemiExpanded Light, Trace spaced as in brand/logo.svg), not
   typed text. The SVG's box starts at the T's left edge and the capital
   tops, so the inset measures to the letters, as before. One em is a
   thousand font units, so the height in em is the outline's own. */
.name { line-height: 0; margin-left: 0; }
@supports (text-box: trim-both cap alphabetic) { .name { line-height: 0; text-box: normal; } }
.name svg { display: block; height: 0.917em; width: auto; overflow: visible; }

/* On the field's grid. animations.js measures the field's dot grid and sets
   these: the name hangs from a dot row, the copyright and Contact stand on
   one, the hairline runs along the row above it, and the outer edges sit
   on dot columns. Without script the insets above still hold. */
.stage.on-grid .footer-rule { top: var(--rule-top); bottom: auto; left: var(--grid-left); right: var(--grid-right); }
.stage.on-grid .name { top: var(--grid-name-top); left: var(--grid-left); }
.stage.on-grid .contact { top: var(--legal-top); bottom: auto; left: var(--grid-left); }
.stage.on-grid .legal { top: var(--legal-top); bottom: auto; right: var(--grid-right); }

/* ---- Contact ---------------------------------------------------------------
   Subtle, as Ben asked, like greenoaks.com's Privacy link: the copyright's
   own label style and colour, bottom left on the copyright's line, the C on
   the name's column (its 0.05em side bearing taken off). Hover brings it to
   full paper and draws Evidence's link underline in from the left; the
   touch area is 44px tall without moving the letters. */
.contact {
  left: var(--inset-x);
  bottom: var(--inset-bottom);
  margin-left: -0.05em;
  font-size: var(--legal-size);
  font-weight: 450;
  letter-spacing: -0.004em;
  color: rgba(243, 240, 232, 0.5);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.contact::before { content: ''; position: absolute; inset: -17px -12px; }
.contact::after {
  content: ''; position: absolute; left: 0.05em; right: 0.03em; top: calc(100% + 0.32em);
  height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.contact:hover, .contact:focus-visible { color: var(--paper); }
.contact:hover::after { transform: scaleX(1); }
.contact:focus { outline: none; }
.contact:focus-visible { outline: 1px solid var(--paper); outline-offset: 8px; }

/* ---- Opening ---------------------------------------------------------------
   The field fades in (animations.js); the type follows, as Evidence's
   header did: a 10px rise and fade, one second, power3 out, starting at
   0.7s. CSS rather than script, so the type can never be left hidden. */
@media (prefers-reduced-motion: no-preference) {
  :root:not([data-motion='reduce']) [data-enter] {
    animation: enter 1s cubic-bezier(0.215, 0.61, 0.355, 1) 0.7s both;
  }
  :root:not([data-motion='reduce']) :is(.legal,.contact,.social,.footer-rule)[data-enter] { animation-delay: 0.77s; }
}
@keyframes enter {
  from { opacity: 0; transform: translateY(10px); }
}

/* ---- Blurb (October 13) -------------------------------------------------------
   Ben's one sentence, bottom left above the hairline in the quiet text style. */
.blurb {
  position: absolute;
  left: var(--inset-x);
  bottom: calc(var(--inset-bottom) + 0.714 * var(--legal-size) + var(--legal-gap) * 2.2);
  margin: 0;
  max-width: min(30ch, calc(100% - 2 * var(--inset-x)));
  font-size: clamp(16px, calc(9px + 0.6vw), 21px);
  font-weight: 350;
  line-height: 1.4;
  letter-spacing: -0.012em;
  color: rgba(243, 240, 232, 0.86);
  text-wrap: pretty;
}
.stage.on-grid .blurb { left: var(--grid-left); bottom: calc(100% - var(--rule-top) + var(--legal-gap) * 1.2); }

/* ---- Socials (October 14) ------------------------------------------------------
   LinkedIn and X as icons, on the copyright's line just before it, on every
   screen. Each icon is 0.86em square, centred on the capital height, so the
   box stays the capital height and the line keeps its alignment. Solid
   shapes read heavier than letters, so they sit a step dimmer than the
   copyright. Hover and focus bring them to full paper, like Contact. Each
   tap area is 44px tall. --legal-w is the copyright's measured width; the
   em fallback is its width in Zalando Sans. */
.social {
  display: flex;
  right: calc(var(--inset-x) + var(--legal-w, 9.95em) + 1.9em);
  bottom: var(--inset-bottom);
  font-size: var(--legal-size);
}
.social a {
  position: relative;
  display: block;
  color: rgba(243, 240, 232, 0.42);
  -webkit-tap-highlight-color: transparent;
  transition: color 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.social a + a { margin-left: 1.3em; }
.social a::before { content: ''; position: absolute; inset: -15px -9px; }
.social svg { display: block; width: 0.86em; height: 0.86em; margin: -0.073em 0; }
.social a:hover, .social a:focus-visible { color: var(--paper); }
.social a:focus { outline: none; }
.social a:focus-visible { outline: 1px solid var(--paper); outline-offset: 6px; }
.stage.on-grid .social { top: var(--legal-top); bottom: auto; right: calc(var(--grid-right) + var(--legal-w, 9.95em) + 1.9em); }

/* At 320px the line is a few pixels short of Contact, so the gaps close up. */
@media (max-width: 359px) {
  .social { right: calc(var(--inset-x) + var(--legal-w, 9.95em) + 1.15em); }
  .stage.on-grid .social { right: calc(var(--grid-right) + var(--legal-w, 9.95em) + 1.15em); }
  .social a + a { margin-left: 0.9em; }
  .social a::before { inset: -15px -6px; }
}