/* AUTO-COPIED from threedoors-wiki/marketing/brand/design-system. Do not edit here — edit the wiki source and re-run _build-assets.py. */

/* ============================================================
   ThreeDoors — components.css
   Primitives. Tokens only. Transition hooks are present on
   state-bearing properties; no entrance/exit animations.
   ============================================================ */

/* ------------------------------------------------------------
   Skip link — accessibility primitive (sits above all chrome).
   Visually hidden until focused, then surfaces over the topbar.
   ------------------------------------------------------------ */
.skip-link {
  position: absolute;
  top: -48px;
  left: var(--space-2);
  z-index: 100;
  padding: 10px 14px;
  background: var(--color-critical);
  color: var(--color-critical-ink);
  font-family: var(--font-sans);
  font-size: var(--t-caption);
  font-weight: var(--w-semibold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  text-decoration: none;
  border-radius: var(--radius);
  transition: top var(--motion-fast) var(--ease-out-slow);
}
.skip-link:focus,
.skip-link:focus-visible {
  top: var(--space-2);
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

/* ------------------------------------------------------------
   Section / shell
   ------------------------------------------------------------ */
.section { padding: var(--space-7) var(--space-4); }
.section--tight { padding: var(--space-5) var(--space-4); }
.section--roomy { padding: var(--space-8) var(--space-4); }

/* Feature band — the canon's "hero blocks" usage of Cipher Teal.
   Full-bleed teal background with cream typography. Use sparingly:
   one or two per page, never adjacent. Composes with .section. */
.section--feature {
  background: var(--color-accent-block);
  color: var(--color-door-cream);
}
.section--feature h1,
.section--feature h2,
.section--feature h3,
.section--feature h4 {
  color: var(--color-door-cream);
}
.section--feature p { color: rgba(241, 231, 210, 0.88); }
.section--feature .lead { color: rgba(241, 231, 210, 0.82); }
.section--feature .eyebrow { color: rgba(241, 231, 210, 0.78); }
.section--feature .aside { color: rgba(241, 231, 210, 0.62); }
.section--feature .btn--secondary {
  --_fg:     var(--color-door-cream);
  --_border: rgba(241, 231, 210, 0.55);
}
.section--feature .btn--secondary:hover {
  --_bg: rgba(241, 231, 210, 0.10);
}
.section--feature .btn--ghost { --_fg: var(--color-door-cream); }

.shell {
  max-width: var(--shell-max);
  margin-inline: auto;
}

.stack > * + * { margin-top: var(--space-3); }
.stack-lg > * + * { margin-top: var(--space-5); }
.stack-sm > * + * { margin-top: var(--space-2); }

/* ------------------------------------------------------------
   Eyebrow — Inter 600, uppercase, 14px, tracked 0.06em
   ------------------------------------------------------------ */
.eyebrow {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: var(--t-caption);
  font-weight: var(--w-semibold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--color-text-muted);
  line-height: 1;
}
.eyebrow--accent   { color: var(--color-accent); }
.eyebrow--critical { color: var(--color-critical-fg); }

/* ------------------------------------------------------------
   Display / lead utilities
   ------------------------------------------------------------ */
.display {
  font-family: var(--font-serif);
  font-optical-sizing: auto;
  font-size: var(--t-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  font-weight: var(--w-regular);                 /* soft display */
  color: var(--color-text);
  text-wrap: balance;
}
.display--bold { font-weight: var(--w-semibold); }

.lead {
  font-size: var(--t-body-lg);
  line-height: var(--lh-body-lg);
  color: var(--color-text-muted);
  max-width: var(--measure);
  text-wrap: pretty;
}

/* ------------------------------------------------------------
   Bracket aside — [the host's wink]
   Inter italic, 0.85× scale, soft colour. Brackets via pseudo.
   ------------------------------------------------------------ */
.aside {
  font-family: var(--font-sans);
  font-style: italic;
  font-size: 0.85em;
  color: var(--color-text-soft);
  font-weight: var(--w-regular);
}
.aside::before { content: "["; margin-right: 0.05em; }
.aside::after  { content: "]"; margin-left: 0.05em; }

/* ------------------------------------------------------------
   Pull-quote — Fraunces italic at H3, left rule in Crimson, max 40ch
   ------------------------------------------------------------ */
.pullquote {
  font-family: var(--font-serif);
  font-optical-sizing: auto;
  font-style: italic;
  font-weight: var(--w-regular);
  font-size: var(--t-h3);
  line-height: var(--lh-h3);
  letter-spacing: var(--ls-h3);
  color: var(--color-text);
  max-width: var(--measure-narrow);
  margin: 0;
  padding-left: var(--space-3);
  border-left: 2px solid var(--color-critical);
  text-wrap: balance;
}
.pullquote cite {
  display: block;
  margin-top: var(--space-2);
  font-family: var(--font-sans);
  font-style: normal;
  font-size: var(--t-caption);
  font-weight: var(--w-medium);
  letter-spacing: var(--ls-caption);
  color: var(--color-text-muted);
}

/* ------------------------------------------------------------
   Artefact text — Special Elite, capped at 13px.
   In-fiction use only: stamped marks, FRINGE serials, dossier copy.
   ------------------------------------------------------------ */
.artefact {
  font-family: var(--font-artefact);
  font-size: min(var(--t-artefact-max), 13px);
  line-height: 1.4;
  letter-spacing: 0.02em;
  color: var(--color-text-soft);
}
.artefact--stamp {
  display: inline-block;
  padding: 4px 8px;
  border: 1px solid var(--color-critical);
  color: var(--color-critical-fg);
  text-transform: uppercase;
  letter-spacing: 0.14em;
}
.artefact--serial { color: var(--color-text-soft); }

/* ------------------------------------------------------------
   Buttons
   Primary   — solid crimson, cream label. The CTA.
   Secondary — teal outline, teal label.
   Ghost     — borderless, current colour.
   ------------------------------------------------------------ */
.btn {
  --_bg:     transparent;
  --_fg:     var(--color-text);
  --_border: transparent;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);

  padding: 12px 20px;
  min-height: 44px;
  border-radius: var(--radius);
  border: 1px solid var(--_border);
  background: var(--_bg);
  color: var(--_fg);

  font-family: var(--font-sans);
  font-size: var(--t-body);
  font-weight: var(--w-semibold);                 /* buttons = Inter 600 */
  letter-spacing: 0.01em;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  user-select: none;

  transition-property: background-color, border-color, color, opacity;
  transition-duration: var(--motion-fast);
  transition-timing-function: var(--ease-out-slow);
}

.btn--primary {
  --_bg:     var(--color-critical);
  --_fg:     var(--color-critical-ink);
  --_border: var(--color-critical);
}
.btn--primary:hover {
  --_bg:     var(--color-critical-hover);
  --_border: var(--color-critical-hover);
}

.btn--secondary {
  --_bg:     transparent;
  --_fg:     var(--color-accent);
  --_border: var(--color-accent);
}
.btn--secondary:hover {
  --_bg: color-mix(in oklab, var(--color-accent) 14%, transparent);
}

.btn--ghost {
  --_bg:     transparent;
  --_fg:     var(--color-text);
  --_border: transparent;
  padding-inline: 8px;
}
.btn--ghost:hover {
  text-decoration: underline;
  text-underline-offset: 0.3em;
}

.btn[disabled],
.btn.is-disabled {
  opacity: 0.42;
  cursor: not-allowed;
  pointer-events: none;
}

.btn .icon { width: 18px; height: 18px; flex: none; }

/* ------------------------------------------------------------
   Inputs
   States: default, hover, focus, error
   ------------------------------------------------------------ */
.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.field__label {
  font-family: var(--font-sans);
  font-size: var(--t-caption);
  font-weight: var(--w-medium);
  color: var(--color-text-muted);
  letter-spacing: var(--ls-caption);
}

.input {
  display: block;
  width: 100%;
  padding: 12px 14px;
  min-height: 44px;

  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);

  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: 1.3;

  transition-property: border-color, background-color, color, box-shadow;
  transition-duration: var(--motion-fast);
  transition-timing-function: var(--ease-out-slow);
}
.input::placeholder { color: var(--color-text-soft); }
.input:hover { border-color: var(--color-border-strong); }

.input:focus,
.input:focus-visible {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--color-accent) 35%, transparent);
}

.field.is-error .input,
.input.is-error { border-color: var(--color-critical); }
.field.is-error .input:focus,
.input.is-error:focus {
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--color-critical) 35%, transparent);
}

.field__hint {
  font-family: var(--font-sans);
  font-size: var(--t-caption-xs);
  color: var(--color-text-muted);
  letter-spacing: var(--ls-caption-xs);
}
/* Error state — hint stays in muted text (legible at 12px) and gets a
   touch more weight. The field border + focus ring carry the colour
   signal; the hint copy carries the message. */
.field.is-error .field__hint {
  color: var(--color-text);
  font-weight: var(--w-medium);
}

/* ------------------------------------------------------------
   Card
   ------------------------------------------------------------ */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-4);
  transition-property: background-color, border-color;
  transition-duration: var(--motion-fast);
  transition-timing-function: var(--ease-out-slow);
}
.card:hover { background: var(--color-surface-raise); }

.card__eyebrow { margin-bottom: var(--space-2); }
.card__title {
  font-family: var(--font-serif);
  font-optical-sizing: auto;
  font-weight: var(--w-semibold);
  font-size: var(--t-h4);
  line-height: var(--lh-h4);
  letter-spacing: var(--ls-h4);
  color: var(--color-text);
  margin: 0 0 var(--space-2);
}
.card__body {
  color: var(--color-text-body);
  font-size: var(--t-body);
  line-height: var(--lh-body);
}

/* Feature card — teal block at card scale. For highlight items in a grid. */
.card--feature {
  background: var(--color-accent-block);
  border-color: transparent;
  color: var(--color-door-cream);
}
.card--feature:hover {
  background: color-mix(in oklab, var(--color-cipher-teal) 88%, var(--color-cipher-ink));
}
.card--feature .card__title { color: var(--color-door-cream); }
.card--feature .card__body  { color: rgba(241, 231, 210, 0.88); }
.card--feature .eyebrow,
.card--feature .eyebrow--accent { color: rgba(241, 231, 210, 0.78); }

/* ------------------------------------------------------------
   Divider — cat-claws motif flanked by hairlines.
   Markup:
     <div class="divider">
       <span></span>
       <svg class="divider__mark" aria-hidden="true">
         <use href="motif.svg#motif-sm"/>
       </svg>
       <span></span>
     </div>
   ------------------------------------------------------------ */
.divider {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-5) 0;
  color: var(--color-text-muted);
}
.divider > span { height: 1px; background: var(--color-border); }
.divider__mark {
  width: 24px; height: 30px;
  color: var(--color-text-muted);
  display: block;
}
.divider--accent   .divider__mark { color: var(--color-accent); }
.divider--critical .divider__mark { color: var(--color-critical); }

/* Opt-in reveal — one-shot fade of the whole mark when it enters view.
   Stays inside the locked motion principles: slow-out cubic-bezier,
   --motion-slow duration, opacity only, single element per viewport.
   Pair with an IntersectionObserver that toggles `.is-revealed`. */
.divider--reveal .divider__mark {
  opacity: 0;
  transition-property: opacity;
  transition-duration: var(--motion-slow);
  transition-timing-function: var(--ease-out-slow);
}
.divider--reveal.is-revealed .divider__mark { opacity: 1; }

/* Subtle hairline accompaniment — fades alongside the mark, slightly behind. */
.divider--reveal > span {
  opacity: 0;
  transition-property: opacity;
  transition-duration: var(--motion-slow);
  transition-timing-function: var(--ease-out-slow);
  transition-delay: 80ms;
}
.divider--reveal.is-revealed > span { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .divider--reveal .divider__mark,
  .divider--reveal > span {
    opacity: 1 !important;
    transition: none !important;
  }
}

/* ------------------------------------------------------------
   Motif sizing utilities
   ------------------------------------------------------------ */
.motif {
  display: inline-block;
  color: currentColor;
  vertical-align: middle;
}
.motif--xs { width: 16px; height: 20px; }
.motif--sm { width: 24px; height: 30px; }
.motif--md { width: 40px; height: 50px; }
.motif--lg { width: 80px; height: 100px; }
.monogram  { width: 120px; height: 30px; }

/* ------------------------------------------------------------
   Icon
   ------------------------------------------------------------ */
.icon {
  width: 24px;
  height: 24px;
  display: inline-block;
  color: currentColor;
  vertical-align: middle;
  flex: none;
}
.icon--sm { width: 18px; height: 18px; }
.icon--lg { width: 32px; height: 32px; }