/* ============================================================================
   senti — foundations for the static asksenti.com build.

   A flattened port of the senti design system's global CSS entry point
   (_ds/senti-design-system-19bfae83…/styles.css and the ten token sheets it
   imports). Same values, same order, one file instead of eleven, so the site
   is a plain static bundle with no design-app runtime behind it.

   The .senti-lift / .senti-ghost / .senti-btn rules at the bottom are new:
   they replace the design app's style-hover="…" attribute, which is inert in
   a real browser.
   ========================================================================= */


/* --- FONTS ---------------------------------------------------------------
   Three families, three jobs. No fourth family, ever. All three are exact
   Google Fonts matches to the source-of-truth pages. @font-face rules are
   served remotely; no binaries ship in-repo. Must stay first in this file. */
@import url("https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;1,9..144,300;1,9..144,400&family=Hanken+Grotesk:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap");


/* --- COLOR ---------------------------------------------------------------
   Surfaces are the tunnel's progression, accents carry meaning, data gets the
   palette. Law 1: color appears only where data does. Law 2: three accents,
   three meanings, never decoration. */
:root {
  /* surfaces — dark to light, the five acts */
  --surface-tunnel-black:#0A0C0F;   /* act 1 · the tunnel */
  --surface-tunnel-dark:#14171C;    /* act 2 · the pile */
  --surface-tunnel-panel:#1B1F25;   /* cards on tunnel-dark */
  --surface-tunnel-slate:#2E333B;   /* act 3 · the turn */
  --surface-dawn:#DCD3C2;           /* act 4 gradient start */
  --surface-paper:#F5F1E8;          /* the shared ground both registers meet on */
  --surface-paper-deep:#EBE5D8;     /* recessed panels, receipt print offset */
  --surface-card:#FDFBF5;           /* raised cards on paper */
  --surface-white:#FFFFFF;          /* answer cards, screenshot frames */
  --surface-ink-plate:#1C1E22;      /* one dark plate per document page */

  /* text on paper */
  --text-ink:#1C1E22;
  --text-ink-soft:#565A61;
  --text-ink-faint:#8F8A7E;

  /* text on dark — four-step ramp */
  --text-ondark-1:#EDEAE2;          /* headlines */
  --text-ondark-2:#C9CBD1;          /* body */
  --text-ondark-3:#8E929B;          /* secondary */
  --text-ondark-4:#6C7079;          /* faint / meta */

  /* lines */
  --line-structural:#1C1E22;        /* 1.5px — frames that mean something */
  --line-hairline:#E0D9C9;          /* 1px on paper */
  --line-hairline-inner:#EFEADD;    /* 1px inside white cards */
  --line-hairline-dark:#262B33;     /* 1px on tunnel-dark */
  --line-hairline-slate:#3A404A;    /* 1px on slate */
  --line-hairline-inkplate:#33363C; /* 1px on the ink plate */

  /* accents — each is a surface pair */
  --accent-candle-on-dark:#E9B44C;  /* light, guidance, arrival */
  --accent-candle-on-light:#D99A2B; /* graphics and large type only — never body copy */
  --accent-candle-soft:rgba(233,180,76,.14);
  --accent-redline:#BF4E0E;         /* annotation, review, the engineer's mark. Paper only. */
  --accent-validated-on-dark:#2E8B6A;
  --accent-validated-on-light:#1E6B4A;

  /* data palette — figures, charts and bar fills ONLY */
  --data-blue:#1D4ED8;
  --data-gold:#D9A227;
  --data-green:#1E6B4A;

  /* the tunnel light (atmosphere, act 1 only) */
  --glow-aura:radial-gradient(circle,var(--accent-candle-soft) 0%,rgba(233,180,76,.05) 34%,transparent 62%);
  --glow-point-shadow:0 0 22px 4px rgba(233,180,76,.65);
  --beam-gradient:linear-gradient(to bottom,rgba(233,180,76,.22),rgba(233,180,76,.05) 70%,transparent);
}


/* --- TYPOGRAPHY ---------------------------------------------------------- */
:root {
  --font-serif:'Fraunces',Georgia,serif;
  --font-sans:'Hanken Grotesk',-apple-system,BlinkMacSystemFont,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,monospace;

  --type-display-tunnel:clamp(38px,5.6vw,66px);
  --leading-display-tunnel:1.16;
  --weight-display-tunnel:300;
  --type-display-dossier:clamp(44px,5.4vw,80px);
  --leading-display-dossier:1.04;
  --track-display-dossier:-0.012em;
  --type-section:clamp(34px,3.6vw,52px);
  --leading-section:1.06;
  --track-section:-0.005em;
  --type-claim:clamp(26px,2.8vw,37px);
  --leading-claim:1.14;
  --type-quote:25px;
  --leading-quote:1.32;

  --type-lede:18.5px;
  --type-body:16px;
  --type-body-doc:16.5px;
  --type-small:14.5px;
  --type-smaller:13.5px;
  --leading-body:1.65;

  --type-mono-xs:10px;
  --type-mono-sm:10.5px;
  --type-mono:11px;
  --type-mono-md:11.5px;
  --type-mono-lg:12px;
  --type-mono-btn:12.5px;
  --track-mono-tight:.10em;
  --track-mono:.14em;
  --track-mono-wide:.16em;
  --track-mono-widest:.22em;

  --type-wordmark-nav:23px;
  --track-wordmark:-0.03em;
  --weight-wordmark:700;
  --type-wordmark-giant:clamp(120px,22vw,300px);
  --leading-wordmark-giant:.78;
  --track-wordmark-giant:-0.055em;
}


/* --- SPACING ------------------------------------------------------------- */
:root {
  --space-1:5px;  --space-2:8px;   --space-3:10px;  --space-4:14px;
  --space-5:18px; --space-6:22px;  --space-7:26px;  --space-8:34px;
  --space-9:44px; --space-10:56px; --space-11:76px; --space-12:96px;
  --space-13:130px;

  --measure-tunnel:1040px;
  --measure-doc:1280px;
  --gutter-tunnel:32px;
  --gutter-doc:36px;
  --rail-width:216px;
  --rail-gap:56px;
  --rail-offset-top:92px;

  --section-pad-tunnel:130px;
  --section-pad-doc-top:76px;
  --section-pad-doc-bottom:84px;
  --section-pad-hero:80px;
  --plate-pad:96px;

  --pad-card:22px;
  --pad-receipt:24px 20px;
  --pad-cell:19px 22px;
  --pad-method-cell:24px 28px;
  --pad-button:16px 26px;
  --pad-button-sm:9px 16px;

  --gap-grid:22px;
  --gap-gallery:26px;
  --gap-note:28px;
  --gap-claim:52px;
  --gap-answer:64px;

  --measure-display:19ch;
  --measure-lede:50ch;
  --measure-intro:58ch;
  --measure-body:66ch;
}


/* --- SHAPE --------------------------------------------------------------- */
:root {
  --radius-chip:5px;
  --radius-button:6px;
  --radius-card:10px;
  --radius-media:14px;
  --radius-track:4px;
  --border-width-structural:1.5px;
  --border-width-hairline:1px;
  --border-structural:1.5px solid var(--line-structural);
  --border-hairline:1px solid var(--line-hairline);
  --border-hairline-inner:1px solid var(--line-hairline-inner);
  --border-dashed:1px dashed var(--line-hairline);
  --border-rcpt:3px solid var(--accent-validated-on-light);
  --border-redline:2px solid var(--accent-redline);
}


/* --- ELEVATION ----------------------------------------------------------- */
:root {
  --shadow-print-offset:8px 8px 0 var(--surface-paper-deep);
  --shadow-daylight:0 24px 60px -24px rgba(28,30,34,.22);
  --shadow-gallery:0 18px 44px -22px rgba(28,30,34,.18);
  --shadow-hover-lift:0 30px 60px -24px rgba(28,30,34,.28);
  --sun-halo:0 0 0 14px rgba(233,180,76,.15),0 0 0 30px rgba(233,180,76,.06);
}


/* --- MOTION --------------------------------------------------------------
   Atmosphere, never signage. Nothing pulses, blinks, or begs.
   Law: every animation has a complete prefers-reduced-motion stillness override. */
:root {
  --ease:ease;
  --ease-inout:ease-in-out;
  --dur-color:.15s;                 /* button + link colour transitions */
  --dur-lift:.35s;                  /* gallery hover */
  --dur-reveal:.8s;
  --reveal-rise:18px;
  --reveal-threshold:.18;           /* IntersectionObserver, once per element */
  --dur-waver:11s;                  /* aura opacity */
  --dur-drift:17s;                  /* aura position + scale */
  --dur-flicker:7s;                 /* the point */
  --hover-lift-transform:scale(1.025) translateY(-4px);
}
@keyframes senti-waver{0%{opacity:.82}28%{opacity:.98}46%{opacity:.88}71%{opacity:1}100%{opacity:.85}}
@keyframes senti-drift-air{0%{transform:translate(-50%,-50%) scale(1)}38%{transform:translate(-50.6%,-49.6%) scale(1.035)}72%{transform:translate(-49.5%,-50.3%) scale(.985)}100%{transform:translate(-50%,-50%) scale(1.02)}}
@keyframes senti-flicker{0%,100%{filter:brightness(1)}23%{filter:brightness(1.14)}41%{filter:brightness(.94)}58%{filter:brightness(1.07)}79%{filter:brightness(.98)}}
@keyframes senti-cue-drift{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}


/* --- SEMANTIC ------------------------------------------------------------ */
:root {
  --text-heading:var(--text-ink);
  --text-body-color:var(--text-ink);
  --text-muted:var(--text-ink-soft);
  --text-meta:var(--text-ink-faint);
  --surface-page:var(--surface-paper);
  --surface-recessed:var(--surface-paper-deep);
  --surface-raised:var(--surface-card);
  --surface-answer:var(--surface-white);
  --accent-annotation:var(--accent-redline);
  --accent-guidance:var(--accent-candle-on-light);
  --accent-verified:var(--accent-validated-on-light);
  --focus-ring:2px solid var(--accent-redline);
  --focus-ring-dark:2px solid var(--accent-candle-on-dark);
  --focus-offset:2px;
  --link-color:var(--text-ink);
  --link-hover:var(--accent-redline);
}
.senti-on-dark {
  --text-heading:var(--text-ondark-1);
  --text-body-color:var(--text-ondark-2);
  --text-muted:var(--text-ondark-3);
  --text-meta:var(--text-ondark-4);
  --accent-annotation:var(--accent-candle-on-dark);
  --accent-guidance:var(--accent-candle-on-dark);
  --accent-verified:var(--accent-validated-on-dark);
  --focus-ring:var(--focus-ring-dark);
  --link-color:var(--text-ondark-1);
  --link-hover:var(--accent-candle-on-dark);
}


/* --- BASE ---------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
body,h1,h2,h3,h4,p,figure,blockquote,ul,ol{margin:0;padding:0}
ul[class]{list-style:none}
html{scroll-behavior:smooth}
body{font-family:var(--font-sans);font-size:var(--type-body);line-height:var(--leading-body);color:var(--text-ink);background:var(--surface-paper);-webkit-font-smoothing:antialiased}
a{color:var(--link-color)}
a:hover{color:var(--link-hover)}
a:focus-visible,button:focus-visible,[tabindex]:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-offset)}
.senti-reveal{opacity:0;transform:translateY(var(--reveal-rise));transition:opacity var(--dur-reveal) var(--ease),transform var(--dur-reveal) var(--ease)}
.senti-reveal.in{opacity:1;transform:none}


/* --- RESPONSIVE ----------------------------------------------------------
   The two breakpoints the source-of-truth pages define, verbatim. Tunnel
   register collapses at 900px; document register at 1000px. These rules carry
   !important because the pages style themselves inline. A breakpoint override is
   the one place the cascade has to win against an inline grid, which is the whole
   reason these class hooks exist. Any new multi-column layout MUST take one of
   these class names, or it will not collapse. */
@media (max-width:900px){
  .senti-pile{grid-template-columns:1fr!important}
  .senti-s4-grid{grid-template-columns:1fr!important;gap:48px!important}
}
@media (max-width:1000px){
  .senti-page{grid-template-columns:1fr!important;gap:0!important}
  .senti-rail{display:none!important}
  .senti-receipt-body{grid-template-columns:1fr!important}
  .senti-claim{grid-template-columns:1fr!important;gap:22px!important}
  .senti-note{grid-template-columns:1fr!important;gap:8px!important}
  .senti-m-row,.senti-spec-row{grid-template-columns:1fr!important}
  .senti-m-no,.senti-spec-k{border-right:none!important;padding-bottom:2px!important}
  .senti-m-body{padding-top:8px!important}
  .senti-spec-v{padding-top:4px!important}
  .senti-section{padding:60px 0!important}
}


/* --- INTERACTION ---------------------------------------------------------
   New in the static build. The source pages carried these as style-hover="…",
   a design-app-only attribute that no browser reads. Same declarations, now as
   real :hover rules. The matching transition already lives inline on each
   element, so only the hover target moves here.

   These carry !important for the same reason the breakpoint block above does:
   the pages style themselves inline (so they paint immediately and stay
   copy-pasteable), and a `style` attribute beats any author selector no matter
   how specific. Without !important, every hover below that touches background,
   box-shadow or border-color silently loses to the element's own inline value.
   `border-color:…!important` does correctly beat an inline `border` shorthand. */

/* Gallery / card lift. */
.senti-lift:hover{
  transform:translateY(-4px)!important;
  box-shadow:var(--shadow-hover-lift)!important;
  border-color:var(--line-structural)!important;
}

/* Outline button on the ink plate. */
.senti-ghost:hover{background:rgba(245,241,232,.1)!important}

/* Solid ink button — colour-only hover, per the motion law. */
.senti-btn:hover{background:var(--accent-redline)!important;border-color:var(--accent-redline)!important}

/* Solid paper button on the ink plate — warms to candle. */
.senti-btn-candle:hover{background:var(--accent-candle-on-dark)!important;border-color:var(--accent-candle-on-dark)!important}

/* Outline button on paper — tints to the recessed surface. */
.senti-tint:hover{background:var(--surface-paper-deep)!important}

/* Framed card that answers to redline on hover. */
.senti-hover-redline:hover{border-color:var(--accent-redline)!important}


@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .senti-reveal{opacity:1;transform:none;transition:none}
  *,*::before,*::after{animation:none!important}
  .senti-lift:hover{transform:none!important}
}