/* Emergnt Media — shared foundation.
   Two monochrome themes, one typeface. Values come straight from the
   Claude Design handoff (design-handoff/claude-design). */

:root{
  --font:"Manrope", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --m:clamp(18px, 3vw, 40px);              /* edge margin */
  --W1:clamp(92px, 8.5vw, 128px);          /* logo width in the header */
  --logo-r:.33873;                         /* 482 / 1423 */
  --hdr-h:calc(var(--m) + var(--W1) * var(--logo-r) + 36px);
  --ctrl-t:calc(var(--m) + var(--W1) * .21714 - 8px); /* aligns Index / toggle with the wordmark */
  --small:12px;
  --body:19px;
  --ease:cubic-bezier(.65,0,.35,1);
  --ease-out:cubic-bezier(.33,1,.68,1);
  --theme-t:.6s ease-in-out;
}
:root,[data-theme="dark"]{
  --bg:#000000; --logo:#FFFFFF; --fg:#EDEDEA; --sm:#7A7A76; --rule:#262626; --ph:#141414; --track:#2E2E2C;
}
[data-theme="light"]{
  --bg:#FFFFFF; --logo:#000000; --fg:#111110; --sm:#6B6B66; --rule:#E4E4E1; --ph:#EDEDEA; --track:#D6D6D2;
}
@media (max-width:639px){ :root{ --small:11px; --body:17px; } }

*,*::before,*::after{box-sizing:border-box}
html{background:var(--bg);-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--font);font-weight:400;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip}
.theme-ready, .theme-ready body{transition:background-color var(--theme-t), color var(--theme-t)}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;margin:0;padding:0;cursor:pointer}
img{display:block;max-width:100%}
::selection{background:var(--fg);color:var(--bg)}
:focus{outline:none}
:focus-visible{outline:1px solid var(--fg);outline-offset:6px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.small{font-size:var(--small);line-height:16px;letter-spacing:.01em}
.sm{color:var(--sm)}
.tnum{font-variant-numeric:tabular-nums}

/* ---------- logo: wordmark + eight-petal bloom ---------- */
.logo{position:relative;display:block;aspect-ratio:1423/482}
.logo svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.logo .petal{fill:var(--logo)}
.theme-ready .logo .petal{transition:fill var(--theme-t)}
.logo .wm{position:absolute;left:0;top:28.2158%;width:100%;height:71.7842%}
.logo .wm img{position:absolute;inset:0;width:100%;height:100%}
.wm-white{opacity:1} .wm-black{opacity:0}
[data-theme="light"] .wm-white{opacity:0}
[data-theme="light"] .wm-black{opacity:1}
.theme-ready .wm img{transition:opacity var(--theme-t)}

/* ---------- theme toggle ---------- */
.toggle{font-size:12px;line-height:16px;letter-spacing:.01em;color:var(--sm);transition:color .3s ease}
.toggle:hover,.toggle:focus-visible{color:var(--fg)}

/* ---------- inner-page header ---------- */
.hdr{position:fixed;top:0;left:0;right:0;height:var(--hdr-h);z-index:10;pointer-events:none}
.hdr__fade{position:absolute;inset:0}
.hdr__fade--dark{background:linear-gradient(to bottom,#000 55%,rgba(0,0,0,0))}
.hdr__fade--light{background:linear-gradient(to bottom,#fff 55%,rgba(255,255,255,0));opacity:0}
[data-theme="light"] .hdr__fade--dark{opacity:0}
[data-theme="light"] .hdr__fade--light{opacity:1}
.theme-ready .hdr__fade{transition:opacity var(--theme-t)}
.hdr__index,.hdr .toggle{position:absolute;top:var(--ctrl-t);font-size:12px;line-height:16px;letter-spacing:.01em;pointer-events:auto}
.hdr__index{left:var(--m);color:var(--fg)}
/* back arrow (replaces the old "Index" label) — 44px tap area, nudges left on hover */
.hdr__back{font-size:18px;padding:14px;margin:-14px;transition:transform .4s var(--ease)}
.hdr__back:hover,.hdr__back:focus-visible{transform:translateX(-4px)}
/* two-line discipline descriptions ("A | B" in the data) */
.dl{display:block}
.dl .seg{white-space:nowrap}
.hdr .toggle{right:var(--m)}
.hdr .logo{position:absolute;top:var(--m);left:50%;width:var(--W1);transform:translateX(-50%);pointer-events:auto}

/* ---------- inner-page arrival / departure ---------- */
.js .arrive{animation:arrive .9s var(--ease-out) both}
.js .arrive-ui{animation:arrive-ui .9s var(--ease-out) both}
@keyframes arrive{from{opacity:0;transform:translateY(24px)}}
@keyframes arrive-ui{from{opacity:0}}
.is-leaving [data-out]{opacity:0 !important;transition:opacity .45s linear !important}

/* ---------- footer line ---------- */
.foot{border-top:1px solid var(--rule);padding:var(--m) var(--m) calc(var(--m) + env(safe-area-inset-bottom));
  display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;column-gap:16px}
.foot__mid{color:var(--fg);white-space:nowrap}
.foot__time{justify-self:end;display:flex;gap:8px}
.foot__time time{color:var(--fg);font-variant-numeric:tabular-nums}
.theme-ready .foot{transition:border-color var(--theme-t)}

/* underline link (hairline that draws in on hover) */
.uline{position:relative;display:inline-block;padding-bottom:5px}
.uline::before,.uline::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px}
.uline::before{background:var(--rule)}
.uline::after{background:var(--fg);transform:scaleX(0);transform-origin:left center;transition:transform .5s var(--ease)}
.uline:hover::after,.uline:focus-visible::after{transform:scaleX(1)}

@media (prefers-reduced-motion:reduce){
  .js .arrive,.js .arrive-ui{animation:none}
  *,*::before,*::after{transition-duration:.01ms !important}
}

/* ==========================================================================
   No clipped text, anywhere.
   Reveal masks and letter-roll boxes clip with overflow:hidden. Their line
   boxes are tighter than the font's real glyph area, so ascenders and
   descenders got cut. Every mask gets 0.24em of room above and below,
   cancelled by negative margins so layout doesn't move. Letter-roll
   duplicates sit 0.5em further away (and the roll travels to match) so the
   hidden copy never shows inside the larger box. `html` raises specificity
   over the page stylesheets.
   ========================================================================== */
html :is(.menu__w, .founder__mask, .wopen__mask, .row__mask, .ct-h__mask, .ct-sub__mask,
  .ps-open__mask, .cs-tmask, .cs-h2mask, .cs-mx__mask, .cs-brief__mask, .cs-step__mask){
  padding-top:.24em;padding-bottom:.24em;margin-top:-.24em;margin-bottom:-.24em}
html .row__mask--ind{margin-top:calc(10px - .24em)}

html :is(.menu .l, .row__l, .cs-l, .ct-submit .l){padding:.24em 0;margin:-.24em 0}
html :is(.row__l > span, .cs-l__in){padding-bottom:0}
html :is(.menu .l > span > span, .row__l > span > span, .cs-l__dup, .ct-submit .l > span > span){top:calc(100% + .5em)}
html :is(.menu a.is-hover .l > span, .row__a.is-hover .row__l > span,
  .cs-pn__a:hover .cs-l__in, .cs-pn__a:focus-visible .cs-l__in, .cs-mrow.is-hover .cs-l__in,
  .ct-submit.is-hover:not(:disabled) .l > span){transform:translateY(calc(-100% - .5em))}
/* Mask padding is in em, so each mask takes its heading's font size (the
   headings use absolute sizes, so they're unaffected). */
html .founder__mask{font-size:clamp(32px, 4vw, 56px)}
html .wopen__mask{font-size:clamp(64px, 12vw, 200px)}
html .row__mask{font-size:var(--name)}
html .row__mask--ind{font-size:15px;margin-top:calc(10px - .24em)}
html .ct-h__mask{font-size:var(--head-fs)}
html .ct-sub__mask{font-size:var(--sub-fs)}
html .ps-open__mask{font-size:var(--big-fs)}
html .cs-tmask{font-size:clamp(52px, 9vw, 150px)}
html .cs-h2mask{font-size:var(--cs-h2)}
html .cs-mx__mask{font-size:var(--mfs)}
html .cs-brief__mask{font-size:clamp(44px, 7vw, 120px)}
html .cs-step__mask{font-size:clamp(22px, 2.4vw, 34px)}
@media (max-width:759px){ html .row__mask--ind{font-size:14px} }