/* ==========================================================================
   Leon & Vera parent design system. Tokens are the Claude Design project's,
   copied verbatim. Fonts are self-hosted from /fonts/ - the published privacy
   policy promises no third-party requests and the site's own CSP enforces
   font-src 'self', so a CDN reference would be blocked as well as wrong.
   One committed light mode. No dark mode, no theme toggle.
   ========================================================================== */
@font-face{font-family:"Instrument Serif";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/instrument-serif-400.woff2) format("woff2")}
@font-face{font-family:"Instrument Serif";font-style:italic;font-weight:400;font-display:swap;src:url(/fonts/instrument-serif-400-italic.woff2) format("woff2")}
@font-face{font-family:"Public Sans";font-style:normal;font-weight:300 800;font-display:swap;src:url(/fonts/public-sans-var.woff2) format("woff2")}
@font-face{font-family:"Public Sans";font-style:italic;font-weight:300 800;font-display:swap;src:url(/fonts/public-sans-var-italic.woff2) format("woff2")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/jetbrains-mono-400.woff2) format("woff2")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/jetbrains-mono-500.woff2) format("woff2")}

:root{
  color-scheme:light;
  --lv-white:#FFFFFF; --lv-paper:#F6F7F5; --lv-stone:#ECEEEA; --lv-stone-deep:#E2E5DE;
  --lv-line:#DCDFD8; --lv-line-strong:#C3C8BE; --lv-muted:#6A7066; --lv-ink:#1C1F1A;
  --lv-graphite:#2A2E27; --lv-graphite-deep:#191C17;
  --lv-olive-050:#EFF1E6; --lv-olive-200:#D7DCC8; --lv-olive-500:#5C6B3F;
  --lv-olive-700:#3E4A2C; --lv-olive-900:#232B18;

  --surface-page:var(--lv-paper); --surface-card:var(--lv-white);
  --surface-sunken:var(--lv-stone); --surface-plate-deep:var(--lv-graphite-deep);
  --text-body:var(--lv-ink); --text-muted:var(--lv-muted); --text-accent:var(--lv-olive-700);
  --text-on-plate:#F2F3EF; --text-on-plate-muted:#A7AC9F; --text-on-accent:var(--lv-white);
  --text-link:var(--lv-olive-700); --text-link-hover:var(--lv-olive-900);
  /* Text on a veiled photograph. The plate's muted grey measures 3.33:1 over the
     hero image and fails; the veil carries its own lifted muted value at 4.99:1. */
  --text-on-veil:#F2F3EF; --text-on-veil-muted:#CDD1C6;
  --border-hairline:var(--lv-line); --border-control:var(--lv-line-strong);
  --border-strong:var(--lv-graphite); --border-on-plate:#3C4139;
  --action-accent:var(--lv-olive-700); --action-accent-hover:var(--lv-olive-900);
  --focus-ring:var(--lv-olive-700); --focus-ring-on-plate:var(--lv-olive-200);
  --status-ready-text:var(--lv-olive-700); --status-ready-bg:var(--lv-olive-050); --status-ready-border:var(--lv-olive-200);

  --font-display:"Instrument Serif",Georgia,"Times New Roman",serif;
  --font-sans:"Public Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --type-display-1:400 clamp(44px,6.2vw,86px)/1.02 var(--font-display);
  --type-display-3:400 clamp(28px,2.9vw,42px)/1.1 var(--font-display);
  --type-lede:400 clamp(19px,1.5vw,23px)/1.5 var(--font-sans);
  --type-h3:650 17px/1.35 var(--font-sans);
  --type-body:400 16px/1.6 var(--font-sans);
  --type-body-sm:400 14px/1.55 var(--font-sans);
  --type-ui:500 14px/1.35 var(--font-sans);
  --type-ui-sm:500 13px/1.3 var(--font-sans);
  --type-eyebrow:600 11.5px/1.2 var(--font-sans); --tracking-eyebrow:.1em;
  --type-mono:400 13px/1.4 var(--font-mono); --type-mono-sm:400 11.5px/1.35 var(--font-mono);
  --measure-prose:66ch;

  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px;
  --space-6:24px; --space-8:32px; --space-10:40px; --space-12:48px;
  --space-16:64px; --space-20:80px; --space-24:96px; --space-32:128px;
  --density-control-h:40px; --density-card-p:var(--space-6);
  --layout-max:1200px; --layout-gutter:clamp(20px,5vw,64px);
  --radius-0:0; --radius-1:2px; --radius-2:4px; --radius-pill:999px;
  --accent-bar-w:3px;
  --dur-1:120ms; --ease-standard:cubic-bezier(.2,0,0,1);
  --transition-control:color var(--dur-1) var(--ease-standard),background-color var(--dur-1) var(--ease-standard),border-color var(--dur-1) var(--ease-standard);

  /* the measured hero ramp, as a token: sestala.com uses the same device and
     the two have to stay separable. A line overrides --hero-veil-tint only. */
  --hero-veil-frame:25,28,23;   /* graphite-deep */
  --hero-veil-tint:35,43,24;    /* olive-900 */
  --hero-veil:linear-gradient(to top,rgba(var(--hero-veil-frame),.30),rgba(var(--hero-veil-frame),.10)),
              linear-gradient(to top,rgba(var(--hero-veil-tint),.94) 0%,rgba(var(--hero-veil-tint),.80) 25%,rgba(var(--hero-veil-tint),.67) 50%,rgba(var(--hero-veil-tint),.55) 75%,rgba(var(--hero-veil-tint),.46) 100%);
  --hero-min-h:clamp(34rem,88vh,52rem);
}
@media (prefers-reduced-motion:reduce){
  :root{--dur-1:0ms}
  *,*::before,*::after{transition-duration:.001ms!important;animation-duration:.001ms!important;scroll-behavior:auto!important}
}

*,*::before,*::after{box-sizing:border-box}
html{background:var(--surface-page);scroll-behavior:smooth}
body{margin:0;background:var(--surface-page);color:var(--text-body);font:var(--type-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,p,dl,dd,dt,figure{margin:0}
img,svg{display:block;max-width:100%}
p{text-wrap:pretty}
a{color:var(--text-link);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px;transition:var(--transition-control)}
a:hover{color:var(--text-link-hover);text-decoration-thickness:2px}
a:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px;border-radius:var(--radius-1)}
::selection{background:var(--lv-olive-200);color:var(--lv-olive-900)}
hr{border:0;border-top:1px solid var(--border-hairline);margin:0}
.eyebrow{font:var(--type-eyebrow);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--text-muted)}
.mono{font:var(--type-mono);font-variant-numeric:tabular-nums}
.wrap{max-width:var(--layout-max);margin:0 auto;padding:0 var(--layout-gutter)}
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* wordmark: the name set in Instrument Serif, ampersand italic olive */
.wordmark{display:inline-flex;align-items:baseline;gap:.22em;font:400 var(--wm,32px)/1 var(--font-display);letter-spacing:-.005em;color:var(--text-body);white-space:nowrap;text-decoration:none}
.wordmark:hover{color:var(--text-body);text-decoration:none}
.wordmark .amp{font-style:italic;color:var(--text-accent)}
.wordmark--plate{color:var(--text-on-plate)}
.wordmark--plate .amp{color:var(--lv-olive-200)}

.btn{display:inline-flex;flex:none;align-items:center;justify-content:center;gap:var(--space-2);min-height:var(--density-control-h);padding:6px var(--space-4);border:1px solid transparent;border-radius:var(--radius-1);font:var(--type-ui);text-decoration:none;cursor:pointer;transition:var(--transition-control);text-wrap:balance}
.btn:hover{text-decoration:none}
.btn--lg{min-height:48px;padding:10px var(--space-6);font-size:15px}
.btn--sm{min-height:28px;padding:2px var(--space-3);font:var(--type-ui-sm)}
.btn--accent{background:var(--action-accent);color:var(--text-on-accent)}
.btn--accent:hover{background:var(--action-accent-hover);color:var(--text-on-accent)}
.btn--outline{background:transparent;color:var(--text-body);border-color:var(--border-control)}
.btn--outline:hover{background:var(--surface-sunken);border-color:var(--border-strong);color:var(--text-body)}
.btn--veil{color:var(--text-on-veil);border-color:rgba(242,243,239,.42);background:rgba(var(--hero-veil-frame),.28)}
.btn--veil:hover{color:var(--text-on-veil);background:rgba(var(--hero-veil-frame),.52);border-color:var(--lv-olive-200)}

.badge{display:inline-flex;align-items:center;gap:6px;padding:2px 10px 2px 8px;border:1px solid var(--status-ready-border);border-radius:var(--radius-pill);background:var(--status-ready-bg);color:var(--status-ready-text);font:var(--type-ui-sm);white-space:nowrap}
.badge i{width:6px;height:6px;border-radius:var(--radius-pill);background:currentColor;flex:none}

.endorse{display:inline-flex;flex-direction:column;gap:6px;color:var(--text-muted)}
.endorse b{width:28px;height:var(--accent-bar-w);background:var(--action-accent)}
.endorse span{font:var(--type-eyebrow);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;font-weight:600}

.topbar{display:flex;align-items:center;gap:var(--space-6);min-height:60px;padding:var(--space-2) var(--layout-gutter);background:var(--surface-card);border-bottom:1px solid var(--border-hairline);flex-wrap:wrap}
.topbar nav{display:flex;align-items:center;gap:var(--space-5);margin-left:auto}
.topbar nav a{font:var(--type-ui);color:var(--text-muted);text-decoration:none;padding:4px 0;border-bottom:2px solid transparent}
.topbar nav a:hover{color:var(--text-body);text-decoration:none;border-bottom-color:var(--border-control)}

/* the one place in this system where text sits on a photograph */
.hero{position:relative;overflow:hidden;min-height:var(--hero-min-h);display:flex;align-items:flex-end;background:var(--lv-graphite-deep);color:var(--text-on-veil);isolation:isolate;--focus-ring:var(--focus-ring-on-plate)}
.hero__img{position:absolute;inset:0;z-index:0;background-image:url(/img/hero-desktop.jpg);background-size:cover;background-position:center 45%}
@media (min-width:641px) and (max-width:1024px){.hero__img{background-image:url(/img/hero-tablet.jpg)}}
@media (max-width:640px){.hero__img{background-image:url(/img/hero-mobile.jpg);background-position:center 60%}}
/* Deep olive over graphite-deep, bottom-heavy so the copy sits in the densest
   part. Ramp measured against the real photograph: headline 6.94:1,
   standfirst 4.99:1 on --text-on-veil-muted. */
.hero__veil{position:absolute;inset:0;z-index:1;pointer-events:none;background:var(--hero-veil)}
.hero__inner{position:relative;z-index:2;width:100%}
.hero__copy{max-width:46rem;display:flex;flex-direction:column;gap:var(--space-5)}
.hero .eyebrow{color:var(--text-on-veil-muted)}
.hero h1{font:var(--type-display-1);color:var(--text-on-veil);text-wrap:balance}
.hero__lede{max-width:40rem;font:var(--type-lede);color:var(--text-on-veil-muted)}

.stats{background:var(--surface-card);border-bottom:1px solid var(--border-hairline)}
.stats dl{max-width:var(--layout-max);margin:0 auto;padding:var(--space-6) var(--layout-gutter);display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:var(--space-6) var(--space-10)}
.stats div{display:flex;flex-direction:column;gap:4px}
.stats dd{font:var(--type-ui)}

.sec{padding:var(--space-24) 0}
.sec--tight{padding:0 0 var(--space-24)}
.sechead{display:flex;flex-direction:column;gap:var(--space-3);padding-bottom:var(--space-4);border-bottom:1px solid var(--border-hairline)}
.sechead h2{font:var(--type-display-3);text-wrap:balance}
/* section body copy is body copy, not a lede */
.sectext{font:var(--type-body);color:var(--text-body);margin-top:var(--space-6);max-width:var(--measure-prose)}
.sechead p{font:var(--type-body-sm);color:var(--text-muted);max-width:60ch}
.split{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:var(--space-16);align-items:start}


.brandcard{margin-top:var(--space-8);background:var(--surface-card);border:1px solid var(--border-hairline);
  border-top:var(--accent-bar-w) solid var(--action-accent);border-radius:0 0 var(--radius-2) var(--radius-2);
  padding:var(--space-12) var(--space-10);display:flex;flex-direction:column;gap:var(--space-6)}
.brandcard__top{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-6);flex-wrap:wrap}
.brandcard__mark{display:flex;align-items:center;gap:var(--space-6);flex-wrap:wrap}
.brandcard__lockup{height:64px;width:auto}
.brandcard__body{font:var(--type-body);color:var(--text-muted);max-width:56ch}
.brandcard__foot{display:flex;align-items:center;gap:var(--space-5);flex-wrap:wrap;border-top:1px solid var(--border-hairline);padding-top:var(--space-5)}
.brandcard__meta{display:flex;align-items:center;gap:var(--space-5);flex-wrap:wrap}
@media (max-width:720px){
  .brandcard{padding:var(--space-8) var(--space-6)}
  .brandcard__lockup{height:44px}
  /* the mark wraps rather than crowding, and the action goes full width
     instead of floating right on a row of its own */
  .brandcard__mark{gap:var(--space-4) var(--space-5)}
  .brandcard__foot{flex-direction:column;align-items:stretch;gap:var(--space-5)}
  .brandcard__foot .push{margin-left:0}
  .brandcard__foot .btn{width:100%;min-height:40px}
}

.principles{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--space-10);margin-top:var(--space-8)}
.principle{display:flex;flex-direction:column;gap:var(--space-3)}
/* the 3px olive bar is the system's one sanctioned decorative device */
.principle i{width:28px;height:var(--accent-bar-w);background:var(--action-accent);flex:none}
.principle h3{font:400 clamp(22px,1.8vw,26px)/1.2 var(--font-display);text-wrap:balance}
.principle p{font:var(--type-body);color:var(--text-muted)}

.contactline{display:flex;align-items:center;gap:var(--space-5);margin-top:var(--space-10);flex-wrap:wrap}
/* A portrait takes no veil - a duotoned face reads as stock. This is the only
   photograph outside the hero, so it needs the frame and nothing else. */
.portrait{width:96px;flex:none;aspect-ratio:4/5;border-radius:var(--radius-2);margin:0;overflow:hidden;background:var(--lv-graphite)}
.portrait>img{width:100%;height:100%;object-fit:cover}
.who{display:flex;flex-direction:column;gap:2px}
.who .name{font:var(--type-h3)}
.who .role{font:var(--type-ui-sm);color:var(--text-muted)}
.who a{font:var(--type-mono);display:inline-flex;align-items:center;gap:6px;margin-top:8px}
.facts{display:grid;grid-template-columns:minmax(150px,max-content) 1fr;margin:0}
.facts>div{display:contents}
.facts dt{padding:var(--space-3) var(--space-4) var(--space-3) 0;border-top:1px solid var(--border-hairline);font:var(--type-ui-sm);color:var(--text-muted)}
.facts dd{padding:var(--space-3) 0;border-top:1px solid var(--border-hairline);font:var(--type-body-sm);margin:0}

footer{background:var(--surface-plate-deep);color:var(--text-on-plate);padding:var(--space-10) 0;--focus-ring:var(--focus-ring-on-plate)}
footer a{color:var(--lv-olive-200)}
.foot__row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-6);flex-wrap:wrap}
.foot__nav{display:flex;gap:var(--space-5);font:var(--type-ui-sm);flex-wrap:wrap}
.foot__meta{font:var(--type-mono-sm);color:var(--text-on-plate-muted)}

@media (max-width:900px){
  .split{grid-template-columns:1fr;gap:var(--space-10)}
  .hero{--hero-min-h:clamp(30rem,80vh,44rem)}
}
@media (max-width:720px){
  /* the nav carries margin-left:auto, so hiding it drops the button back
     against the wordmark - the button has to take that job over */
  .topbar nav{display:none}
  .topbar>.btn{margin-left:auto}
  .wordmark{--wm:27px}
  .sec{padding:var(--space-16) 0}
  .sec--tight{padding:0 0 var(--space-16)}
  .hero{--hero-min-h:clamp(26rem,78vh,38rem)}
}

/* ---------- legal pages ---------- */
.legal{padding:var(--space-12) 0 var(--space-20)}
.legal .wrap>*+*{margin-top:var(--space-6)}
.legal h1{font:var(--type-display-3);margin-bottom:var(--space-2)}
.legal h2{font:var(--type-h3);margin-top:var(--space-10)}
.legal p{font:var(--type-body);color:var(--text-muted);max-width:var(--measure-prose)}
.legal h1+p{font:var(--type-body);color:var(--text-body)}
.legal .facts{max-width:var(--measure-prose)}
.legal .facts dd{font:var(--type-body-sm)}
.back{display:inline-flex;align-items:center;gap:6px;font:var(--type-ui-sm);text-decoration:none}
.back:hover{text-decoration:underline}

/* ---------- utilities that replace inline style attributes ----------
   Every style="" is gone so the CSP can drop style-src 'unsafe-inline'. */
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--surface-card);color:var(--text-body);
  padding:10px 16px;border:1px solid var(--border-strong);border-radius:var(--radius-1);font:var(--type-ui);text-decoration:none}
.skip:focus{left:var(--layout-gutter);top:8px}
.hero__pad{padding-top:var(--space-20);padding-bottom:var(--space-16)}
.hero__cta{display:flex;gap:var(--space-3);flex-wrap:wrap;margin-top:var(--space-2)}
.meta{font:var(--type-mono-sm);color:var(--text-muted)}
.linkout{font:var(--type-ui-sm);display:inline-flex;align-items:center;gap:4px}
.push{margin-left:auto}
.rule-lead{margin-top:var(--space-16)}
.foot__row .wordmark{--wm:24px}
.legal__back{padding-bottom:var(--space-6)}

/* ---------- 404 ---------- */
.notfound{padding:var(--space-24) 0 var(--space-32)}
.notfound h1{font:var(--type-display-3);margin-top:var(--space-3);text-wrap:balance}
.notfound__body{font:var(--type-body);color:var(--text-muted);max-width:52ch;margin:var(--space-5) 0 var(--space-8)}