/* ============================================================================
   Hermoso developer docs — stylesheet
   ----------------------------------------------------------------------------
   WHY THIS IS NOT A LINK TO THE MARKETING BUNDLE. The site's stylesheet is
   CONTENT-FINGERPRINTED (site.v17.<sha8>.css) precisely so that editing it
   changes its URL — which means any filename hard-coded here breaks on the
   next restyle, and a restyle was in flight when these docs were written.
   So the design TOKENS below are a copy of that bundle's `:root`, tracking
   site/assets/site.v19.<sha8>.css on the `marketing-site` branch — named without
   the fingerprint on purpose: the line above says a hard-coded filename breaks on
   the next restyle, and then one was hard-coded here and broke on 2026-08-06
   ("v19 GOLDEN HOUR, re-tempered to PORCELAIN", 2026-08-06).
   Fonts are NOT re-shipped: the @font-face rules point at the site's own
   self-hosted /assets/fonts/*.woff2, which resolves because these pages are
   served from the same origin at /docs.
   If the site's palette moves, update the block below to match.

   ══ WHY THIS FILE IS THE ONE THAT GOES STALE, AND HOW IT JUST DID ═══════════
   Every other page on the site loads its generation bundle PLUS v19 appended
   after it, so one file re-skins all 430 of them at once. These 16 /docs pages
   load ONLY this stylesheet — they are the single page family v19 cannot
   reach — so a palette that shipped everywhere else left them on the previous
   ramp. That is exactly what happened on 2026-08-06: the site went porcelain
   and /docs stayed on the v15 "Daylight Atelier" parchment (--bg #faf7f6),
   which is the "old faded paper" complaint the porcelain pass existed to fix.
   A re-skin is not shipped until this block moves too.

   ══ THIS IS A MAPPING, NOT A COPY-PASTE — TWO TOKENS MEAN SOMETHING ELSE HERE
   v19 declares the same NAMES as v13/v15/v17 but two of them carry a different
   job in this file, and pasting v19's values verbatim breaks both:

     · --cream IS STILL LIGHT HERE, deliberately. v19 INVERTS it to #1d1e1c
       because in the marketing bundles --cream means "the ink on a filled
       accent control" and that control is filled with the FLAME (#fa5d00),
       where white measures 3.17:1 and Ink Black 5.28:1. This file's only
       filled accent control is `.tnav .cta`, whose fill is --coral-deep
       (#a33d00) on a 14.7px pill — a much darker fill, where the ratios run
       the other way. --cream also inks `.skip` on --text. Both need a LIGHT
       ink, so --cream keeps its light value and v19's inversion is refused
       by name rather than silently.

     · --coral IS A FILL, NOT TEXT — that split is new here and is why the two
       old text usages moved. v19 measures the flame at 3.01:1 on cream: right
       for a fill or a stroke, wrong for a 16px link. So links now take
       --coral-text and focus rings --coral-line, matching v19's own vocabulary
       instead of overloading one token at two different jobs.

   The site is LIGHT-ONLY by design — `prefers-color-scheme` appears nowhere in
   site/, there is no data-theme attribute and no dark class. These pages match
   that rather than introducing a dark mode the rest of the site cannot honour.

   CSP: the site sends `default-src 'self'; font-src 'self' …`, so everything
   here is same-origin. No CDN, no external font host, no inline script.
   ========================================================================== */

@font-face{ font-family:'Fraunces'; font-style:normal; font-weight:400 600; font-display:swap;
  src:url('/assets/fonts/fraunces-latin.woff2') format('woff2'); }
@font-face{ font-family:'Hanken Grotesk'; font-style:normal; font-weight:400 700; font-display:swap;
  src:url('/assets/fonts/hanken-latin.woff2') format('woff2'); }
@font-face{ font-family:'Fraunces Fallback'; src:local('Georgia');
  ascent-override:97.8%; descent-override:25.5%; line-gap-override:0%; size-adjust:107%; }

:root{
  /* the porcelain ramp — v19 exact. The transform that produced it was HOLD L · C x 0.55 · h -> 48 deg in
     OKLCh, which is why every ratio below survives it: holding lightness makes contrast a pure function of
     luminance, so de-yellowing the neutrals structurally cannot move a ratio. 48 deg is the flame's own
     hue (41 deg) heavily desaturated, so these read as porcelain — a tint of the brand — not as beige. */
  --bg:#fdf8f6; --bg-2:#faf1ec; --surface:#ffffff; --surface-2:#fcf6f3; --surface-3:#f5ebe6;
  /* v19's hairlines are OPAQUE where this file's were alpha-composited. Same painted result on these
     surfaces, and --line-2 gets materially stronger: it is a control's own edge (the sidebar rule, the
     code chip, a card border) and WCAG 1.4.11 asks 3:1 of one. rgba(26,23,21,.17) measured 1.3:1. */
  --line:#e9dfda; --line-2:#8e8784; --hair:#f2e9e4;
  --text:#1d1e1c; --muted:#4f4d49; --faint:#6e6b67;
  /* --coral is a FILL and a STROKE only (3.01:1 on the canvas — the 3:1 floor for a UI object, under the
     4.5 a 16px link needs). Text takes --coral-text, rings take --coral-line. See the header note. */
  --coral:#fa5d00; --coral-text:#b84400; --coral-line:#d24e00;
  --coral-solid:#fa5d00; --coral-deep:#a33d00; --coral-press:#8a3300;
  /* LIGHT, deliberately — v19 inverts this one and this file must not. See the header note. */
  --cream:#fff6f2;
  --display:'Fraunces','Fraunces Fallback',Georgia,'Times New Roman',serif;
  --body:'Hanken Grotesk',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --mono:ui-monospace,'SF Mono',SFMono-Regular,Menlo,Consolas,'Liberation Mono',monospace;
  --r-sm:10px; --r:14px; --pill:999px;
  /* warm STONE, not the old sepia rgba(60,45,25) — a tea stain under every card was half of what read as
     "faded paper". v19 exact; the alphas are its alphas, so elevation strength is unchanged. */
  --el-1:0 1px 2px rgba(123,101,92,.08), 0 6px 16px -8px rgba(123,101,92,.14);
  --side:264px;
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; scroll-padding-top:84px; background:var(--bg); }
body{ font-family:var(--body); background:var(--bg); color:var(--text); line-height:1.62;
  font-size:16px; -webkit-font-smoothing:antialiased; overflow-x:hidden; }

/* ── skip link + focus. Keyboard users must always be able to see where they are. ───────────────────────── */
.skip{ position:absolute; left:-9999px; top:0; z-index:99; background:var(--text); color:var(--cream);
  padding:.7rem 1.1rem; border-radius:0 0 var(--r-sm) 0; text-decoration:none; }
.skip:focus{ left:0; }
a:focus-visible,button:focus-visible{ outline:3px solid var(--coral-line); outline-offset:2px; border-radius:3px; }

/* ── top bar ────────────────────────────────────────────────────────────────────────────────────────────── */
.top{ position:sticky; top:0; z-index:20; display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding:.85rem clamp(1rem,4vw,2rem); background:rgba(253,248,246,.92);
  backdrop-filter:saturate(1.4) blur(10px); border-bottom:1px solid var(--line); }
.brand{ display:flex; align-items:baseline; gap:.5rem; text-decoration:none; color:var(--text); }
.brand .wm{ font-family:var(--display); font-size:1.35rem; font-weight:600; letter-spacing:-.02em; }
.brand .dv{ font-size:.72rem; text-transform:uppercase; letter-spacing:.14em; color:var(--muted);
  border-left:1px solid var(--line-2); padding-left:.55rem; }
.tnav{ display:flex; align-items:center; gap:clamp(.6rem,2vw,1.4rem); flex-wrap:wrap; }
.tnav a{ color:var(--muted); text-decoration:none; font-size:.92rem; }
.tnav a:hover{ color:var(--text); }
/* MEASURED, not assumed: cream on --coral-solid is 3.74:1 at this size, which fails AA. --coral-deep is
   6.2:1 with the same cream. The marketing site uses the lighter fill on much larger buttons; a 14.7px
   pill needs the deeper one. */
.tnav .cta{ background:var(--coral-deep); color:var(--cream); padding:.45rem .95rem;
  border-radius:var(--pill); font-weight:600; }
.tnav .cta:hover{ background:var(--coral-press); color:var(--cream); }

/* ── shell: sidebar + main ──────────────────────────────────────────────────────────────────────────────── */
.shell{ display:grid; grid-template-columns:var(--side) minmax(0,1fr); gap:clamp(1.5rem,4vw,3.5rem);
  max-width:1240px; margin:0 auto; padding:0 clamp(1rem,4vw,2rem) 4rem; align-items:start; }
.side{ position:sticky; top:74px; max-height:calc(100vh - 90px); overflow-y:auto;
  padding:1.8rem 0 2rem; font-size:.93rem; }
.nv-sec{ margin-bottom:1.5rem; }
.nv-h{ font-size:.7rem; text-transform:uppercase; letter-spacing:.13em; color:var(--muted);
  margin-bottom:.5rem; font-weight:700; }
.side ul{ list-style:none; }
.side li a{ display:block; padding:.3rem .6rem; margin-left:-.6rem; border-radius:var(--r-sm);
  color:var(--muted); text-decoration:none; }
.side li a:hover{ background:var(--surface-2); color:var(--text); }
.side li a[aria-current="page"]{ background:var(--surface); color:var(--text); font-weight:600;
  box-shadow:var(--el-1); }
main{ padding:2rem 0 1rem; min-width:0; }

/* ── type ───────────────────────────────────────────────────────────────────────────────────────────────── */
h1{ font-family:var(--display); font-weight:600; letter-spacing:-.025em; line-height:1.08;
  font-size:clamp(2rem,4.4vw,3rem); margin-bottom:.7rem; }
h2{ font-family:var(--display); font-weight:600; letter-spacing:-.02em; line-height:1.18;
  font-size:clamp(1.4rem,2.6vw,1.85rem); margin:2.6rem 0 .8rem; }
h3{ font-size:1.06rem; font-weight:700; margin:1.6rem 0 .4rem; letter-spacing:-.01em; }
h4{ font-size:.95rem; font-weight:700; margin:1.2rem 0 .35rem; }
p,ul,ol,dl,table{ margin-bottom:1rem; }
main ul,main ol{ padding-left:1.25rem; }
main li{ margin-bottom:.35rem; }
a{ color:var(--coral-text); text-underline-offset:2px; }
a:hover{ color:var(--coral-deep); }
strong{ font-weight:700; }
.lede{ font-size:1.12rem; color:var(--muted); max-width:62ch; }
.meta{ font-size:.92rem; color:var(--muted); }
.fine{ font-size:.85rem; color:var(--muted); }
.none{ color:var(--muted); font-size:.9rem; font-style:italic; }
.crumb{ font-size:.85rem; color:var(--muted); margin-bottom:1rem; }
.crumb a{ color:var(--muted); text-decoration:none; }
.crumb a:hover{ color:var(--text); text-decoration:underline; }
.crumb i{ font-style:normal; padding:0 .45rem; }

/* ── code ───────────────────────────────────────────────────────────────────────────────────────────────── */
code{ font-family:var(--mono); font-size:.875em; background:var(--surface-3); padding:.12em .38em;
  border-radius:5px; overflow-wrap:break-word; }
/* A <code> inside a link inherits the link colour and sits on the code chip, not on the page — and --coral
   on --surface-3 measures 4.13:1, below AA. The deeper accent is 5.6:1 on that chip. This is the single
   commonest text pairing in the tool reference, so it is worth its own rule. */
a code{ color:var(--coral-deep); }
pre{ background:#17150f; color:#f4f1ea; padding:1rem 1.1rem; border-radius:var(--r);
  overflow-x:auto; margin-bottom:1.1rem; font-size:.86rem; line-height:1.6; }
pre code{ background:none; padding:0; color:inherit; font-size:1em; white-space:pre; }
kbd{ font-family:var(--mono); font-size:.8em; border:1px solid var(--line-2); border-bottom-width:2px;
  border-radius:5px; padding:.1em .4em; background:var(--surface); }

/* ── callouts ───────────────────────────────────────────────────────────────────────────────────────────── */
.callout{ background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--coral-solid);
  border-radius:var(--r); padding:1rem 1.15rem; margin:1.3rem 0; box-shadow:var(--el-1); }
.callout p:last-child{ margin-bottom:0; }
.note{ background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r);
  padding:.9rem 1.1rem; margin:1.2rem 0; font-size:.94rem; }
.note p:last-child{ margin-bottom:0; }
.rules li{ margin-bottom:.7rem; }

/* ── tables ─────────────────────────────────────────────────────────────────────────────────────────────── */
/* Wide content scrolls INSIDE its own container; the page body never scrolls sideways. */
.tw{ overflow-x:auto; margin-bottom:1rem; border:1px solid var(--line); border-radius:var(--r);
  background:var(--surface); }
table{ border-collapse:collapse; width:100%; font-size:.9rem; }
th,td{ text-align:left; padding:.55rem .8rem; border-bottom:1px solid var(--hair); vertical-align:top; }
th{ font-size:.74rem; text-transform:uppercase; letter-spacing:.09em; color:var(--muted);
  background:var(--surface-2); font-weight:700; white-space:nowrap; }
tbody tr:last-child td{ border-bottom:none; }
.params td:first-child{ white-space:nowrap; }
.params .ty code{ color:var(--muted); }
.req{ display:inline-block; margin-left:.45rem; font-size:.64rem; text-transform:uppercase;
  letter-spacing:.07em; color:var(--coral-deep); font-weight:700; vertical-align:middle; }

/* ── tool cards ─────────────────────────────────────────────────────────────────────────────────────────── */
.sec{ margin-top:2.4rem; }
.tool{ border-top:1px solid var(--line); padding-top:1.3rem; margin-top:1.3rem; }
.tool h3{ margin:0 0 .2rem; font-size:1.02rem; }
.tool h3 code{ background:none; padding:0; font-size:1rem; font-weight:700; }
.tool .tt{ font-size:.93rem; font-weight:600; margin-bottom:.35rem; }
.tool .td{ color:var(--muted); font-size:.93rem; max-width:74ch; }
.anchor{ margin-left:.5rem; color:var(--muted); text-decoration:none; opacity:0; font-weight:400; }
.tool:hover .anchor,.anchor:focus{ opacity:1; }
.tag{ display:inline-block; font-size:.62rem; text-transform:uppercase; letter-spacing:.08em;
  padding:.12em .45em; border-radius:var(--pill); vertical-align:middle; font-weight:700; }
.tag.ro{ background:var(--surface-3); color:var(--muted); }
.tag.de{ background:rgba(250,93,0,.10); color:var(--coral-deep); }
.tag.ga{ background:#fbf1de; color:#7a5a1c; }

/* ── toc + grids ────────────────────────────────────────────────────────────────────────────────────────── */
.toc{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:1rem 1.15rem; margin:1.4rem 0; box-shadow:var(--el-1); }
.toc h2{ font-family:var(--body); font-size:.72rem; text-transform:uppercase; letter-spacing:.13em;
  color:var(--muted); margin:0 0 .5rem; font-weight:700; }
.toc ul{ list-style:none; padding:0; columns:2; column-gap:1.6rem; }
.toc li{ break-inside:avoid; margin-bottom:.22rem; font-size:.9rem; }
.toc .n{ color:var(--muted); font-size:.8rem; }
.grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1rem; margin:1.4rem 0; }
.gcard{ display:block; background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:1.1rem 1.2rem; text-decoration:none; color:var(--text); box-shadow:var(--el-1); }
.gcard:hover{ border-color:var(--line-2); }
.gcard h3{ margin:0 0 .3rem; font-size:1rem; }
.gcard p{ color:var(--muted); font-size:.88rem; margin-bottom:.5rem; }
.gcard .n{ font-size:.76rem; text-transform:uppercase; letter-spacing:.09em; color:var(--coral-deep);
  font-weight:700; }
.alltools{ list-style:none; padding:0; columns:2; column-gap:2rem; font-size:.88rem; }
.alltools li{ break-inside:avoid; margin-bottom:.3rem; }
.alltools span{ color:var(--muted); }
.alltools a{ text-decoration:none; }
.alltools a:hover code{ background:var(--surface-2); }

/* ── connectors ─────────────────────────────────────────────────────────────────────────────────────────── */
.conn{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:1.1rem 1.25rem; margin-bottom:1rem; box-shadow:var(--el-1); }
.conn h3{ margin:0 0 .35rem; }
.conn .td{ color:var(--muted); font-size:.94rem; max-width:72ch; }
.caps{ display:flex; flex-wrap:wrap; gap:.35rem; margin:.6rem 0 .2rem; }
.caps span{ font-size:.74rem; background:var(--surface-3); color:var(--muted); padding:.16em .55em;
  border-radius:var(--pill); }
.kv{ display:grid; grid-template-columns:max-content minmax(0,1fr); gap:.2rem .9rem; margin:.8rem 0 0;
  font-size:.88rem; }
.kv dt{ color:var(--muted); text-transform:uppercase; font-size:.68rem; letter-spacing:.09em;
  padding-top:.28em; font-weight:700; }
.kv dd{ color:var(--muted); }
.gate{ margin-top:.85rem; padding:.75rem .95rem; background:var(--bg-2); border:1px solid var(--line);
  border-radius:var(--r-sm); font-size:.9rem; }
.gate p:last-child{ margin-bottom:0; }

/* ── footer ─────────────────────────────────────────────────────────────────────────────────────────────── */
.foot{ border-top:1px solid var(--line); padding:2rem clamp(1rem,4vw,2rem) 3rem; background:var(--bg-2); }
.foot p{ max-width:80ch; margin:0 auto .6rem; font-size:.9rem; color:var(--muted); }
.foot p:first-child{ text-align:center; }
/* --coral is documented AA on WHITE (4.87:1); on the footer's --bg-2 wash it drops to 4.24 and fails.
   Measured — the deeper accent is 5.8:1 there. */
.foot a{ color:var(--coral-deep); }

/* ── responsive. The sidebar becomes a horizontal rail; nothing ever scrolls the page sideways. ──────────── */
@media (max-width:900px){
  .shell{ grid-template-columns:minmax(0,1fr); gap:0; }
  .side{ position:static; max-height:none; overflow:visible; padding:1.2rem 0 .5rem;
    border-bottom:1px solid var(--line); }
  .nv-sec{ margin-bottom:.9rem; }
  .side ul{ display:flex; flex-wrap:wrap; gap:.25rem .1rem; }
  .side li a{ margin-left:0; padding:.25rem .55rem; }
  .toc ul,.alltools{ columns:1; }
}
@media (max-width:520px){
  body{ font-size:15.5px; }
  .brand .dv{ display:none; }
  .tnav a:not(.cta){ display:none; }
  .kv{ grid-template-columns:minmax(0,1fr); gap:0 0; }
  .kv dt{ padding-top:.6em; }
}

/* ── motion. Nothing here animates layout, but honour the preference for the sticky/blur chrome too. ─────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .top{ backdrop-filter:none; background:var(--bg); }
}

@media print{
  .top,.side,.foot,.toc{ display:none; }
  .shell{ display:block; }
  pre{ background:none; color:#000; border:1px solid #999; }
}