/* ============================================================================
   Crystal Crown Media: shared site layer
   ----------------------------------------------------------------------------
   Sits on top of scrollcraft.css (the engine floor). This file owns the brand
   tokens, the chrome every page shares (bar, crown index, drawer, foot), and
   the small vocabulary the slate uses everywhere (one-sheet labels, buttons,
   shortlist toggles, trailer facades). Page-specific composition lives in each
   page's own <style>, never here.
   ========================================================================== */

:root {
  /* six roles */
  --sc-canvas:     #0A0710;   /* off-black with the crown's violet in it   */
  --sc-surface:    #151022;
  --sc-ink:        #F1EEF6;
  --sc-ink-soft:   #ADA5BD;   /* tinted, never flat grey                   */
  --sc-accent:     #4A0080;   /* the brand purple, used as a region        */
  --sc-accent-ink: #FFFFFF;

  /* the crown's material */
  --silver:        #DCD8E4;
  --silver-soft:   #9F98AE;
  --purple:        #4A0080;
  --purple-lift:   #5E12A0;
  --purple-deep:   #230640;

  --sc-font-display: "Cinzel", "Trajan Pro", "Times New Roman", serif;
  --sc-font-text:    "Raleway", "Helvetica Neue", Arial, sans-serif;
  --sc-font-mono:    "Raleway", "Helvetica Neue", Arial, sans-serif;

  --sc-shadow-color: 272 60% 3%;
  --sc-edge: inset 0 1px 0 color-mix(in oklab, var(--silver) 16%, transparent);

  /* one radius for the whole site: cut crystal, not pill */
  --r: 2px;
  --sc-r-sm: 2px; --sc-r-md: 2px; --sc-r-lg: 2px;

  --bar-h: 76px;
  --tracking-caps: 0.16em;
}
@media (max-width: 860px) { :root { --bar-h: 62px; } }

/* Raleway's default figures are old-style; a slate reads in lining figures. */
body { font-variant-numeric: lining-nums; font-weight: 450; line-height: 1.66; letter-spacing: 0.004em; }

/* Cinzel is an all-capitals face: tracking goes OUT, not in, as it grows. */
.sc-display { font-weight: 500; letter-spacing: 0.02em; line-height: 1.02; }
.sc-display--xl { letter-spacing: 0.01em; }

/* Focus must clear 3:1 on the violet-black ground. The brand purple does not,
   so the ring is the crown's silver. */
:focus-visible { outline: 2px solid var(--silver); outline-offset: 3px; border-radius: var(--r); }
::selection { background: var(--purple); color: #fff; }

/* ------------------------------------------------------------- utilities -- */
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.skip {
  position: fixed; left: var(--sc-4); top: var(--sc-3); z-index: 100;
  padding: var(--sc-2) var(--sc-4); background: var(--silver); color: var(--sc-canvas);
  font-weight: 600; text-decoration: none; transform: translateY(-160%);
}
.skip:focus-visible { transform: none; }

.caps {
  font-family: var(--sc-font-text);
  font-size: var(--sc-t-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

/* --------------------------------------------------------------- buttons -- */
.btn {
  --btn-bg: var(--purple);
  --btn-ink: #fff;
  --btn-edge: color-mix(in oklab, var(--silver) 62%, transparent);
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6em;
  min-height: 48px; padding: 0 1.35em;
  background: var(--btn-bg); color: var(--btn-ink);
  border: 1px solid var(--btn-edge); border-radius: var(--r);
  box-shadow: var(--sc-edge), var(--sc-e1);
  font-family: var(--sc-font-text); font-size: 0.8rem; font-weight: 700;
  letter-spacing: var(--tracking-caps); text-transform: uppercase; text-decoration: none;
  white-space: nowrap; cursor: pointer;
  transition: background-color 160ms var(--sc-ease-out), border-color 160ms var(--sc-ease-out),
              transform 120ms var(--sc-ease-out);
}
.btn:active { transform: translateY(1px) scale(0.985); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { --btn-bg: var(--purple-lift); --btn-edge: var(--silver); }
}
.btn--ghost { --btn-bg: transparent; --btn-edge: color-mix(in oklab, var(--silver) 48%, transparent); box-shadow: none; }
@media (hover: hover) and (pointer: fine) {
  .btn--ghost:hover { --btn-bg: color-mix(in oklab, var(--silver) 10%, transparent); }
}
.btn--sm { min-height: 40px; padding: 0 1.05em; font-size: 0.72rem; }

.link-arrow {
  display: inline-flex; align-items: baseline; gap: 0.5em;
  color: var(--sc-ink); font-weight: 600; text-decoration: underline;
  text-decoration-color: color-mix(in oklab, var(--silver) 40%, transparent);
  text-underline-offset: 0.3em;
  transition: text-decoration-color 160ms var(--sc-ease-out);
}
.link-arrow::after { content: "\2192"; transition: transform 160ms var(--sc-ease-out); }
@media (hover: hover) and (pointer: fine) {
  .link-arrow:hover { text-decoration-color: var(--silver); }
  .link-arrow:hover::after { transform: translateX(3px); }
}

/* ------------------------------------------------------------------ bar -- */
.site-bar {
  position: fixed; inset: 0 0 auto 0; z-index: var(--sc-z-chrome);
  height: var(--bar-h);
  display: flex; align-items: center; justify-content: space-between; gap: var(--sc-5);
  padding-inline: var(--sc-gutter);
  background: linear-gradient(to bottom,
    color-mix(in oklab, var(--sc-canvas) 86%, transparent) 0%,
    color-mix(in oklab, var(--sc-canvas) 52%, transparent) 55%,
    transparent 100%);
  transition: background-color 240ms var(--sc-ease-out), box-shadow 240ms var(--sc-ease-out);
}
.site-bar.is-scrolled {
  background: var(--sc-canvas);
  box-shadow: 0 1px 0 var(--sc-hairline);
}
.brand { display: flex; align-items: center; gap: var(--sc-4); min-width: 0; }
.wordmark {
  font-family: var(--sc-font-display); font-weight: 600; font-size: 0.92rem;
  letter-spacing: 0.14em; line-height: 1.1; text-decoration: none; color: var(--sc-ink);
  white-space: nowrap;
}
.wordmark small { display: block; font-size: 0.62em; letter-spacing: 0.34em; color: var(--sc-ink-soft); font-weight: 500; }

.site-nav { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2.2rem); }
.site-nav a:not(.btn) {
  color: var(--sc-ink-soft); text-decoration: none;
  font-size: 0.78rem; font-weight: 600; letter-spacing: var(--tracking-caps); text-transform: uppercase;
  padding-block: 0.6em;
  transition: color 160ms var(--sc-ease-out);
}
.site-nav a[aria-current="page"] { color: var(--sc-ink); box-shadow: inset 0 -1px 0 var(--silver); }
@media (hover: hover) and (pointer: fine) { .site-nav a:not(.btn):hover { color: var(--sc-ink); } }

.menu-btn {
  display: none; align-items: center; gap: 0.55em;
  min-height: 44px; padding: 0 0.9em; margin-right: -0.9em;
  background: none; border: 0; color: var(--sc-ink); cursor: pointer;
  font-size: 0.74rem; font-weight: 700; letter-spacing: var(--tracking-caps); text-transform: uppercase;
}
.menu-btn__icon { width: 18px; height: 10px; position: relative; }
.menu-btn__icon::before, .menu-btn__icon::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor;
}
.menu-btn__icon::before { top: 0; }
.menu-btn__icon::after { bottom: 0; }

@media (max-width: 860px) {
  .site-nav { display: none; }
  .menu-btn { display: inline-flex; }
  .wordmark { font-size: 0.78rem; }
}

/* --------------------------------------------------------- crown index --
   The studio mark is the slate's index: its five principal crystals are the
   five titles. site.js inlines crown-parts.svg into [data-crown]; until then
   (or without JS) the plain mark stands in. */
.crown-nav { position: relative; display: block; width: 84px; flex: none; color: var(--silver-soft); }
.crown-nav > img, .crown-nav > svg { width: 100%; height: auto; overflow: visible; }
.crown-nav .crown-rest { color: color-mix(in oklab, var(--silver) 58%, transparent); }
.crown-nav .crystal { color: var(--silver); cursor: pointer; }
.crown-nav .crystal-fill { fill: transparent; transition: fill 240ms var(--sc-ease-out); }
.crown-nav .crystal.is-lit .crystal-fill { fill: var(--purple); }
.crown-nav .crystal.is-lit { color: #fff; }
.crown-nav .crystal:focus { outline: none; }
.crown-nav .crystal:focus-visible .crystal-fill { fill: color-mix(in oklab, var(--silver) 30%, transparent); }
@media (hover: hover) and (pointer: fine) {
  .crown-nav .crystal:hover { color: #fff; }
  .crown-nav .crystal:hover .crystal-fill { fill: color-mix(in oklab, var(--silver) 22%, transparent); }
  .crown-nav .crystal.is-lit:hover .crystal-fill { fill: var(--purple-lift); }
}
.crown-tip {
  position: absolute; left: 0; top: calc(100% + 10px); z-index: 2;
  padding: 0.5em 0.8em; white-space: nowrap;
  background: var(--sc-surface); color: var(--sc-ink);
  border: 1px solid var(--sc-hairline-strong); border-radius: var(--r);
  box-shadow: var(--sc-e2);
  font-size: 0.74rem; font-weight: 600; letter-spacing: 0.04em;
  opacity: 0; transform: translateY(-4px); pointer-events: none;
  transition: opacity 160ms var(--sc-ease-out), transform 160ms var(--sc-ease-out);
}
.crown-tip.is-on { opacity: 1; transform: none; }
.crown-tip em { font-style: normal; color: var(--sc-ink-soft); font-weight: 500; margin-left: 0.5em; }
@media (max-width: 860px) {
  .crown-nav { width: 64px; }
  .crown-nav .crystal { pointer-events: none; }
}

/* ---------------------------------------------------------------- drawer -- */
.drawer {
  position: fixed; inset: 0; z-index: 90;
  display: grid; grid-template-rows: auto 1fr auto;
  padding: 0 var(--sc-gutter) calc(var(--sc-6) + env(safe-area-inset-bottom));
  background: var(--sc-canvas);
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity 240ms var(--sc-ease-out), transform 240ms var(--sc-ease-out), visibility 0s linear 240ms;
}
.drawer.is-open { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.drawer__head { height: var(--bar-h); display: flex; align-items: center; justify-content: space-between; }
.drawer__list { list-style: none; margin: 0; padding: var(--sc-5) 0 0; display: grid; align-content: start; gap: var(--sc-1); overflow-y: auto; }
.drawer__list a {
  display: flex; align-items: center; gap: var(--sc-3); min-height: 48px;
  color: var(--sc-ink); text-decoration: none;
  font-family: var(--sc-font-display); font-size: 1.15rem; letter-spacing: 0.04em;
}
.drawer__group { margin-top: var(--sc-5); color: var(--sc-ink-soft); }
.drawer__list .drawer__title { font-family: var(--sc-font-text); font-size: 1rem; font-weight: 500; letter-spacing: 0; }
.drawer__list [aria-current="page"] { color: #fff; text-decoration: underline; text-underline-offset: 0.3em; }

/* a small crystal glyph, used in lists and toggles; fills when shortlisted */
.gem { width: 12px; height: 20px; flex: none; color: var(--silver); overflow: visible; }
.gem polygon { fill: transparent; stroke: currentColor; stroke-width: 1.4; stroke-linejoin: round; transition: fill 200ms var(--sc-ease-out); }
.is-lit > .gem polygon, [aria-pressed="true"] > .gem polygon { fill: var(--purple); stroke: #fff; }

/* ----------------------------------------------------------- one-sheet --
   The label schema every title uses. Same fields, same order, everywhere:
   that is what makes five pages a collection. */
.sheet { display: grid; grid-template-columns: max-content 1fr; column-gap: var(--sc-6); row-gap: 0; margin: 0; }
.sheet > dt, .sheet > dd { padding-block: 0.85rem; border-top: 1px solid var(--sc-hairline); margin: 0; }
.sheet > dt {
  color: var(--sc-ink-soft); font-size: var(--sc-t-xs); font-weight: 700;
  letter-spacing: var(--tracking-caps); text-transform: uppercase; padding-top: 1.05rem;
}
.sheet > dd { color: var(--sc-ink); }
@media (max-width: 520px) {
  .sheet { grid-template-columns: 1fr; }
  .sheet > dd { border-top: 0; padding-top: 0; }
}

/* -------------------------------------------------------- shortlist ui -- */
.shortlist-toggle {
  display: inline-flex; align-items: center; gap: 0.7em;
  min-height: 48px; padding: 0 1.2em;
  background: transparent; color: var(--sc-ink);
  border: 1px solid color-mix(in oklab, var(--silver) 48%, transparent); border-radius: var(--r);
  font-size: 0.8rem; font-weight: 700; letter-spacing: var(--tracking-caps); text-transform: uppercase;
  cursor: pointer; white-space: nowrap;
  transition: background-color 160ms var(--sc-ease-out), border-color 160ms var(--sc-ease-out), transform 120ms var(--sc-ease-out);
}
.shortlist-toggle:active { transform: translateY(1px) scale(0.985); }
.shortlist-toggle[aria-pressed="true"] { background: color-mix(in oklab, var(--purple) 55%, transparent); border-color: var(--silver); }
@media (hover: hover) and (pointer: fine) {
  .shortlist-toggle:hover { border-color: var(--silver); }
}
.shortlist-toggle .when-on { display: none; }
.shortlist-toggle[aria-pressed="true"] .when-on { display: inline; }
.shortlist-toggle[aria-pressed="true"] .when-off { display: none; }

.toast {
  position: fixed; left: 50%; bottom: calc(var(--sc-5) + env(safe-area-inset-bottom)); z-index: 95;
  translate: -50% 0;
  padding: 0.8em 1.2em; border-radius: var(--r);
  background: var(--sc-surface); color: var(--sc-ink);
  border: 1px solid var(--sc-hairline-strong); box-shadow: var(--sc-e3);
  font-size: 0.86rem; font-weight: 600;
  opacity: 0; transform: translateY(8px); pointer-events: none;
  transition: opacity 200ms var(--sc-ease-out), transform 200ms var(--sc-ease-out);
}
.toast.is-on { opacity: 1; transform: none; }
.toast a { color: inherit; margin-left: 0.6em; }

/* ------------------------------------------------ trailer facade (YT) --
   Nothing loads from YouTube until the visitor asks. The poster is theirs,
   the iframe is youtube-nocookie, and sound only ever starts on a click. */
.facade {
  position: relative; display: block; width: 100%; aspect-ratio: 16 / 9;
  background: #000 center / cover no-repeat; border: 0; padding: 0; cursor: pointer;
  border-radius: var(--r); overflow: clip; box-shadow: var(--sc-e3);
  color: #fff;
}
.facade > img { width: 100%; height: 100%; object-fit: cover; opacity: 0.86; transition: opacity 240ms var(--sc-ease-out), transform 600ms var(--sc-ease-out); }
.facade__play {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  display: inline-flex; align-items: center; gap: 0.8em;
  padding: 0.9em 1.3em 0.9em 1.05em;
  background: color-mix(in oklab, var(--sc-canvas) 78%, transparent);
  border: 1px solid color-mix(in oklab, var(--silver) 60%, transparent); border-radius: var(--r);
  font-size: 0.8rem; font-weight: 700; letter-spacing: var(--tracking-caps); text-transform: uppercase;
  transition: background-color 160ms var(--sc-ease-out);
}
.facade__play::before {
  content: ""; width: 0; height: 0;
  border-left: 12px solid currentColor; border-top: 7px solid transparent; border-bottom: 7px solid transparent;
}
@media (hover: hover) and (pointer: fine) {
  .facade:hover > img { opacity: 1; transform: scale(1.015); }
  .facade:hover .facade__play { background: var(--purple); }
}
.facade iframe, .facade video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ------------------------------------------------------------------ foot -- */
.site-foot {
  display: grid; gap: var(--sc-6);
  grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr));
  padding: var(--sc-8) var(--sc-gutter) calc(var(--sc-6) + env(safe-area-inset-bottom));
  color: var(--sc-ink-soft); font-size: 0.9rem;
  border-top: 1px solid var(--sc-hairline);
}
.site-foot h2 { margin: 0 0 var(--sc-3); color: var(--sc-ink); }
.site-foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
.site-foot a { color: var(--sc-ink-soft); text-decoration: none; transition: color 160ms var(--sc-ease-out); }
.site-foot a:hover { color: var(--sc-ink); }
.site-foot__mark { display: grid; gap: var(--sc-4); align-content: start; }
.site-foot__mark img { width: 120px; opacity: 0.9; }
.site-foot__legal { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sc-3); padding-top: var(--sc-5); border-top: 1px solid var(--sc-hairline); font-size: 0.8rem; }
@media (max-width: 860px) {
  .site-foot { grid-template-columns: 1fr 1fr; }
  .site-foot__mark { grid-column: 1 / -1; }
}

/* ---------------------------------------------------------- page intro --
   Flow pages (studio, investors, contact) start below the bar. */
.page-top { padding-top: calc(var(--bar-h) + var(--sc-9)); }
@media (max-width: 860px) { .page-top { padding-top: calc(var(--bar-h) + var(--sc-7)); } }

/* ------------------------------------------------------- reduced motion -- */
@media (prefers-reduced-motion: reduce) {
  .drawer, .toast, .crown-tip { transition-duration: 1ms; transform: none; }
}

/* compact foot, for pages whose close holds the last screen */
.foot-mini {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1.6rem;
  font-size: 0.8rem; color: var(--sc-ink-soft);
}
.foot-mini a { display: inline-flex; align-items: center; min-height: 44px; color: var(--sc-ink-soft); text-decoration: none; transition: color 160ms var(--sc-ease-out); }
.foot-mini a:hover { color: var(--sc-ink); }
.foot-mini__social { display: inline-flex; gap: 1rem; }

/* ---------------------------------------------------------- crown picker --
   The mark at display size. Crystals are toggles; lit = shortlisted. */
.crown-picker { position: relative; width: 100%; color: var(--silver); }
.crown-picker > img, .crown-picker > svg { width: 100%; height: auto; overflow: visible; }
.crown-picker .crown-rest { color: color-mix(in oklab, var(--silver) 55%, transparent); }
.crown-picker .crystal { color: var(--silver); }
.crown-picker .crystal-fill { fill: transparent; transition: fill 240ms var(--sc-ease-out); }
.crown-picker .crystal.is-hot { color: #fff; }
.crown-picker .crystal.is-hot .crystal-fill { fill: color-mix(in oklab, var(--silver) 16%, transparent); }
.crown-picker .crystal.is-lit { color: #fff; }
.crown-picker .crystal.is-lit .crystal-fill { fill: var(--purple); }
.crown-picker .crystal.is-lit.is-hot .crystal-fill { fill: var(--purple-lift); }
.crown-picker__hits { position: absolute; inset: 0; }
.crown-picker__hit {
  position: absolute; margin: 0; padding: 0; border: 0; background: transparent; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.crown-picker__hit:focus-visible { outline: none; }
.crown-picker__caption {
  margin: var(--sc-4) 0 0; min-height: 1.6em; text-align: center;
  color: var(--sc-ink-soft); font-size: 0.86rem; font-weight: 600; letter-spacing: 0.04em;
}

/* The mark is traced as filled hairline outlines. At bar size those fall
   below a pixel, so small crowns get a same-colour stroke to hold weight. */
.crown-nav svg :is(path, polygon:not([id^="shape-"])) { stroke: currentColor; stroke-width: 20; stroke-linejoin: round; }
.crown-nav svg .crystal-fill { stroke: none; }

/* ----------------------------------------------------- crown as a link --
   Client note (2026-10): the bar crown is one link to Studio. Its crystals
   still light purple for shortlisted titles; they are no longer links. */
a.crown-nav { color: var(--silver-soft); text-decoration: none; border-radius: var(--r); }
a.crown-nav .crystal { cursor: inherit; }
@media (hover: hover) and (pointer: fine) {
  a.crown-nav:hover .crown-rest, a.crown-nav:hover .crystal { color: #fff; }
}
a.crown-nav:focus-visible { outline-offset: 6px; }

/* ---------------------------------------------------------- social icons --
   Brand glyphs at one optical size; the whole 44px cell is the target. */
.social { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.25rem; }
.social a {
  display: inline-grid; place-items: center; width: 44px; height: 44px;
  color: var(--sc-ink-soft); border-radius: var(--r);
  transition: color 160ms var(--sc-ease-out), background-color 160ms var(--sc-ease-out);
}
.social__icon { width: 20px; height: 20px; fill: currentColor; }
@media (hover: hover) and (pointer: fine) {
  .social a:hover { color: var(--sc-ink); background: color-mix(in oklab, var(--sc-ink) 8%, transparent); }
}
.social--foot { margin-top: var(--sc-3); margin-left: -12px; }
.foot-mini .social { gap: 0.1rem; margin-inline: -10px; }
/* the foot's list rule (display:grid) must not stack the icon row */
.site-foot .social { display: flex; }
/* the bar crown is a link now: hold a 44px target on phones */
@media (max-width: 860px) {
  a.crown-nav { padding-block: 4px; margin-block: -4px; min-height: 44px; display: flex; align-items: center; }
}

/* --------------------------------------------------------- the wordmark --
   Client note (2026-10): the bar uses their actual logo artwork, not type.
   White on dark grounds; their black version on the light/gold title pages. */
.wordmark { display: inline-flex; align-items: center; line-height: 0; min-height: 44px; }
.wordmark__img { display: block; height: 38px; width: auto; max-width: none; }
.wordmark__img--black { display: none; }
body[data-ground="light"] .wordmark__img--white { display: none; }
body[data-ground="light"] .wordmark__img--black { display: block; }
.site-foot__mark img { width: 150px; height: auto; }
@media (max-width: 860px) { .wordmark__img { height: 30px; } }

/* ------------------------------------------------------------ NDA gate --
   Client request (2026-10-29): a simple shared password before the NDA.
   The dialog opens from any "Sign the NDA" link; nda.html shows the same
   form inline until it is entered. */
.nda-locked .nda-doc, .nda-locked .nda-sign { display: none !important; }
.gate {
  width: min(30rem, calc(100vw - 2 * var(--sc-gutter))); max-height: calc(100svh - 2rem);
  margin: auto; padding: 0; border: 1px solid var(--sc-hairline-strong); border-radius: var(--r);
  background: var(--sc-surface); color: var(--sc-ink); box-shadow: var(--sc-e3);
}
.gate::backdrop { background: rgb(6 4 10 / 0.72); }
.gate[open] { animation: gate-in 220ms var(--sc-ease-out); }
@keyframes gate-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .gate[open] { animation: none; } }
.gate__form { display: grid; gap: var(--sc-3); padding: clamp(1.5rem, 4vw, 2.25rem); }
.gate__eyebrow { margin: 0; color: var(--sc-ink-soft); }
.gate__title { margin: 0 0 var(--sc-1); font-size: var(--sc-t-xl); line-height: 1.1; }
.gate__lede { margin: 0 0 var(--sc-3); color: var(--sc-ink-soft); max-width: 40ch; }
.gate__label { color: var(--sc-ink-soft); }
.gate__input {
  min-height: 48px; width: 100%; padding: 0 0.9rem;
  background: color-mix(in oklab, var(--sc-canvas) 70%, transparent); color: var(--sc-ink);
  border: 1px solid color-mix(in oklab, var(--silver) 45%, transparent); border-radius: var(--r);
  font-size: 1rem; letter-spacing: 0.04em;
}
.gate__input:focus-visible { outline: 2px solid var(--silver); outline-offset: 2px; }
.gate__input[aria-invalid="true"] { border-color: #F4A0AC; }
.gate__err { margin: 0; color: #F4A0AC; font-weight: 600; font-size: 0.9rem; }
.gate__row { display: flex; flex-wrap: wrap; gap: var(--sc-3); margin-top: var(--sc-2); }
.gate__help { margin: var(--sc-2) 0 0; color: var(--sc-ink-soft); font-size: 0.86rem; }
.gate__help a { color: var(--sc-ink); }
.gate-page { padding: 0 var(--sc-gutter) var(--sc-9); }
.gate-page .gate__form {
  max-width: 30rem; margin: 0 auto; background: var(--sc-surface);
  border: 1px solid var(--sc-hairline-strong); border-radius: var(--r); box-shadow: var(--sc-e2);
}