/* Dhriti Yog — design tokens.
   Every colour, space, duration and easing value in the project comes from
   here. No hard-coded hex below this block; tools/check.mjs enforces it.
   Contrast for every pairing is computed by `node tools/check.mjs contrast`. */
:root {
  --ink: #10171A;
  --ink-2: #222E33;
  --paper: #F2EFE9;
  --paper-2: #E7E2D8;
  --brass: #C08A3E;
  --brass-deep: #7D5620;
  --slate: #4E5E66;
  --mist: #9DAAB0;

  --display: "Inter Tight", system-ui, -apple-system, sans-serif;
  --body: "Inter", system-ui, -apple-system, sans-serif;
  --serif: "Source Serif 4", Georgia, serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;

  --step--1: clamp(0.83rem, 0.8rem + 0.15vw, 0.9rem);
  --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.09rem);
  --step-1: clamp(1.2rem, 1.12rem + 0.4vw, 1.45rem);
  --step-2: clamp(1.44rem, 1.3rem + 0.7vw, 1.94rem);
  --step-3: clamp(1.73rem, 1.5rem + 1.15vw, 2.59rem);
  --step-4: clamp(2.07rem, 1.72rem + 1.77vw, 3.45rem);
  --step-5: clamp(2.49rem, 1.94rem + 2.72vw, 4.6rem);

  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-s: 1rem;
  --space-m: 1.5rem;
  --space-l: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: clamp(5rem, 9vw, 9rem);

  --gutter: clamp(1rem, 4vw, 3rem);
  --measure: 62ch;
  --max: 1200px;

  --radius: 3px;
  --radius-lg: 8px;

  --dur-micro: 180ms;
  --dur-reveal: 560ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--step-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ------------------------------------------------------------------ *
 * Fonts — self-hosted Latin subsets (SIL OFL, see OFL.txt)
 * ------------------------------------------------------------------ */
@font-face { font-family: "Inter Tight"; src: url("/assets/fonts/inter-tight-subset.woff2") format("woff2");
  font-weight: 400 800; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/assets/fonts/inter-subset.woff2") format("woff2");
  font-weight: 300 700; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url("/assets/fonts/source-serif-subset.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/assets/fonts/plex-mono-subset.woff2") format("woff2");
  font-weight: 500 600; font-display: swap; }

/* ------------------------------------------------------------------ *
 * Layout
 * ------------------------------------------------------------------ */
.shell { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--space-2xl); }
.panel { background: var(--paper-2); }
.panel--dark { background: var(--ink); color: var(--paper); }
.panel--dark .lede,
.panel--dark .footer-line,
.panel--dark .footer-note { color: var(--mist); }

/* ------------------------------------------------------------------ *
 * Type
 * ------------------------------------------------------------------ */
h1, h2, h3 { font-family: var(--display); font-weight: 800; letter-spacing: -0.02em;
  line-height: 1.04; margin: 0 0 var(--space-s);
  /* balance breaks headings sensibly without  , which at phone widths
     turns a phrase into one unbreakable token and forces page scroll. */
  text-wrap: balance; overflow-wrap: break-word; }
h1 { font-size: var(--step-5); }
h2 { font-size: var(--step-4); }
h3 { font-size: var(--step-2); letter-spacing: -0.01em; }
p { margin: 0 0 var(--space-s); max-width: var(--measure); }

.eyebrow, .label { font-family: var(--mono); font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--brass-deep);
  margin: 0 0 var(--space-xs); }
.panel--dark .eyebrow,
.panel--dark .label { color: var(--brass); }
.lede { font-size: var(--step-1); color: var(--slate); max-width: 46ch; }
.quote { font-family: var(--serif); font-style: italic; font-size: var(--step-2);
  color: var(--ink); max-width: 36ch; }
.panel--dark .quote { color: var(--paper); }

/* ------------------------------------------------------------------ *
 * The stripe — a brass rule under every heading. It draws itself when
 * scrolled into view where the browser supports scroll-driven animation,
 * and is simply static everywhere else.
 * ------------------------------------------------------------------ */
.stripe { display: block; width: 46px; height: 2px; background: var(--brass-deep);
  margin: 0 0 var(--space-m); transform-origin: left center; }
.panel--dark .stripe { background: var(--brass); }
.stripe--hero { width: 104px; height: 3px; }
.stripe--sub { width: 28px; }

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .js .stripe { animation: stripe-draw linear both; animation-timeline: view();
      animation-range: entry 10% entry 60%; }
  }
}
@keyframes stripe-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ------------------------------------------------------------------ *
 * Buttons and links
 * ------------------------------------------------------------------ */
.button { display: inline-block; font-family: var(--body); font-weight: 600;
  font-size: var(--step--1); letter-spacing: 0.04em; text-transform: uppercase;
  padding: 0.85em 1.6em; border: 1px solid currentColor; border-radius: var(--radius);
  text-decoration: none; color: var(--ink); background: transparent;
  transition: background var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out); }
.button:hover { background: var(--ink); color: var(--paper); }
.panel--dark .button { color: var(--paper); }
.panel--dark .button:hover { background: var(--paper); color: var(--ink); }
.button--brass,
.panel--dark .button--brass { background: var(--brass); border-color: var(--brass); color: var(--ink); }
.button--brass:hover,
.panel--dark .button--brass:hover { background: var(--brass-deep); border-color: var(--brass-deep); color: var(--paper); }

a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.panel--dark a { color: var(--paper); }

:focus-visible { outline: 3px solid var(--brass-deep); outline-offset: 3px; }
.panel--dark :focus-visible { outline-color: var(--brass); }

.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: var(--gutter); top: var(--space-xs); z-index: 200;
  background: var(--ink); color: var(--paper); padding: var(--space-xs) var(--space-s); }

img { max-width: 100%; height: auto; }

/* ------------------------------------------------------------------ *
 * Header
 * ------------------------------------------------------------------ */
.header-bar { display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-m); padding-block: var(--space-s); }
.wordmark { display: inline-flex; align-items: center; gap: var(--space-2xs);
  font-family: var(--display); font-weight: 800; letter-spacing: 0.14em;
  font-size: var(--step--1); text-decoration: none; white-space: nowrap; }
.wordmark-rule { display: inline-block; width: 20px; height: 2px; background: var(--brass-deep); }
.nav ul { display: flex; flex-wrap: wrap; gap: var(--space-m); list-style: none; margin: 0; padding: 0; }
.nav a { font-size: var(--step--1); text-decoration: none; padding-block: var(--space-2xs); }
.nav a:hover { text-decoration: underline; }
.nav a[aria-current="page"] { color: var(--brass-deep); font-weight: 600; }
.nav-toggle { display: none; font-family: var(--mono); font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; background: transparent;
  border: 1px solid var(--slate); border-radius: var(--radius); color: var(--ink);
  padding: 0.55em 0.9em; cursor: pointer; }

@media (max-width: 820px) {
  .nav { flex-basis: 100%; }
  .nav ul { flex-direction: column; gap: var(--space-xs); padding-block: var(--space-s); }

  /* The collapse is scoped to .js. Without it the toggle would be the only
     way to reach the nav and nothing would be listening to it, leaving the
     whole menu dead on a phone with JavaScript off. */
  .js .nav-toggle { display: inline-block; }
  .js .nav { display: none; }
  .js .nav-open .nav { display: block; }
}

/* ------------------------------------------------------------------ *
 * CTA and footer
 * ------------------------------------------------------------------ */
.cta { padding-block: var(--space-xl); }
.cta-title { font-size: var(--step-3); }
.cta-line { max-width: 44ch; color: var(--mist); }

.site-footer { padding-block: var(--space-xl) var(--space-l); }
.footer-grid { display: grid; gap: var(--space-l);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.footer-mark { font-family: var(--display); font-weight: 800; letter-spacing: 0.14em;
  font-size: var(--step-1); margin: 0 0 var(--space-2xs); }
.footer-line, .footer-note { font-size: var(--step--1); }
.footer-nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2xs); }
.footer-nav a { font-size: var(--step--1); }

/* ------------------------------------------------------------------ *
 * Reduced motion
 * ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important; scroll-behavior: auto !important;
  }
}

/* ------------------------------------------------------------------ *
 * Scroll reveals — scoped to .js so that with scripts off nothing is
 * ever invisible. tools/check.mjs nojs enforces the scoping.
 * ------------------------------------------------------------------ */
.js .reveal { opacity: 0; transform: translateY(14px);
  transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out); }
.js .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; }
}

.site-header { position: sticky; top: 0; z-index: 100; background: var(--paper);
  transition: transform var(--dur-micro) var(--ease-out); }
.header-hidden .site-header { transform: translateY(-100%); }

/* ------------------------------------------------------------------ *
 * Content components
 * ------------------------------------------------------------------ */
.hero { padding-block: var(--space-2xl) var(--space-xl); }
.hero h1 { max-width: 16ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-s); max-width: none; }

.proof-list { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-m);
  list-style: none; margin: 0 0 var(--space-l); padding: 0; }
.proof-list li { margin: 0; }
.proof-figure { display: block; max-width: var(--max); }
.proof-figure img { display: block; width: 100%; border-radius: var(--radius); }

.cards-3 { display: grid; gap: var(--space-m);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.card { background: var(--paper-2); border-radius: var(--radius); padding: var(--space-m); }
.card h3 { font-size: var(--step-1); }
.card h3 a { text-decoration: none; }
.card h3 a:hover { text-decoration: underline; }
.card p { margin-bottom: 0; }
.panel .card { background: var(--paper); }

.split { display: grid; gap: var(--space-l); align-items: start;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }
.split-figure { display: block; }
.split-figure img { display: block; width: 100%; border-radius: var(--radius); }

.figure { margin: 0; }
.figure figcaption { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--slate); margin-top: var(--space-2xs); }
.panel--dark .figure figcaption { color: var(--mist); }

/* --slate is for light surfaces only: on --ink it computes to about 2.4:1.
   Default to the light-surface colour and switch inside a dark panel. */
.note { font-size: var(--step--1); color: var(--slate); max-width: 52ch; }
.panel--dark .note { color: var(--mist); }

.table { width: 100%; border-collapse: collapse; margin: 0 0 var(--space-m); text-align: left; }
.table th, .table td { padding: var(--space-xs) 0; border-bottom: 1px solid var(--paper-2);
  vertical-align: top; font-weight: 400; }
.table th { padding-right: var(--space-m); font-weight: 600; width: 46%; }
.table tr:last-child th, .table tr:last-child td { border-bottom: 0; }
.panel--dark .table th, .panel--dark .table td { border-bottom-color: var(--ink-2); }

blockquote.quote { margin: 0 0 var(--space-m); }
blockquote.quote p { margin: 0; max-width: none; }

.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.record { list-style: none; margin: 0 0 var(--space-m); padding: 0; max-width: var(--measure); }
.record li { position: relative; padding-left: var(--space-m); margin-bottom: var(--space-xs); }
.record li::before { content: ""; position: absolute; left: 0; top: 0.65em;
  width: 10px; height: 2px; background: var(--brass-deep); }
.panel--dark .record li::before { background: var(--brass); }

.record--numbered { counter-reset: rec; }
.record--numbered li { padding-left: var(--space-l); }
.record--numbered li::before { counter-increment: rec; content: counter(rec, decimal-leading-zero);
  position: static; width: auto; height: auto; background: none;
  position: absolute; left: 0; top: 0;
  font-family: var(--mono); font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.08em; color: var(--brass-deep); }
.panel--dark .record--numbered li::before { color: var(--brass); }

/* ------------------------------------------------------------------ *
 * Form
 * ------------------------------------------------------------------ */
.form { max-width: 34rem; }
.field { margin-bottom: var(--space-m); }
.field label { display: block; font-weight: 600; font-size: var(--step--1);
  margin-bottom: var(--space-2xs); }
.field-opt { font-weight: 400; color: var(--slate); }
.field input, .field select, .field textarea {
  width: 100%; font: inherit; font-size: var(--step-0); color: var(--ink);
  background: var(--paper); border: 1px solid var(--slate);
  border-radius: var(--radius); padding: 0.7em 0.8em; }
.field textarea { resize: vertical; min-height: 7em; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  border-color: var(--brass-deep); }
.field [aria-invalid="true"] { border-color: var(--brass-deep); border-width: 2px; }
.field-error { font-size: var(--step--1); font-weight: 600; color: var(--brass-deep);
  margin: var(--space-2xs) 0 0; }
.form-status { margin-top: var(--space-s); font-size: var(--step--1); color: var(--slate); min-height: 1.5em; }

/* Visually hidden rather than display:none — some bots skip fields they can
   tell are not rendered, and this one needs to look fillable. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.contact-aside .note { margin-bottom: var(--space-s); }

/* ------------------------------------------------------------------ *
 * Long-form prose (privacy)
 * ------------------------------------------------------------------ */
.prose h2 { font-size: var(--step-2); margin-top: var(--space-l); }
.prose h2:first-child { margin-top: 0; }
.prose .stripe { margin-bottom: var(--space-s); }

/* Static preview only — see tools/export-static.mjs */
.form-preview-note { background: var(--paper-2); border-left: 3px solid var(--brass-deep);
  padding: var(--space-s); margin-bottom: var(--space-l); font-size: var(--step--1); }
/* Dim the controls, not the notice that explains why they are dimmed. */
.form--preview .field, .form--preview button { opacity: 0.6; }
.form--preview input, .form--preview select, .form--preview textarea { pointer-events: none; }