/* ================================================================================================
   FERROW — ferrow.ai        site/kit.css · the public site's one stylesheet · zero external requests
   ================================================================================================

   WHY ONE FILE. The app surfaces (web/index.html, src/ui/app.html) each carry their palette inline
   because each is a single page. The site is four pages, and four inline copies of a palette is four
   chances to drift. So the site declares the kit ONCE, here, and every page links it. There is no
   second place to change a colour, which is the only way a four-page site keeps one face.

   AUTHORITY: ~/ruzylo/brain/brain/brand/ferrow-brandkit.html (FROZEN, "Daylight"). Every value below
   is a kit hex under the same local name the two app surfaces already use — a person who set Ferrow
   up in their terminal should recognise this site in the first half second, and that recognition is
   made of exact hexes, not of a similar mood. test/site-kit.test.mjs fails if any of it drifts, and
   it scans EVERY file in site/ for stray hexes, not just this token block.

   DESIGN: THE FIELD LEDGER, CONTINUED — NOT RE-DESIGNED. One furrow line running the page, work
   struck across it as chords, no cards, no boxes, hairline rules, one accent that means something,
   and the 10px tracked monospace label as the single repeated gesture. A marketing site is still a
   ledger: each claim is a row, and each row has to be true.

   MOTION. The furrow draws itself once, in 900ms, and then stops. Chords extend on hover by 14px.
   That is the entire motion system. Anything that moves while you are trying to read is a thing the
   page is doing to you rather than for you, and this product's whole argument is about who is in
   control. @media (prefers-reduced-motion:reduce) removes even those two.
   ================================================================================================ */

/* ---- light: the kit's Daylight palette, verbatim ------------------------------------------------
     --ground    #F5FAFF  KIT Mist   recessed ground, the page
     --plate     #FFFFFF  KIT Paper  the reading surface
     --rule      #DCEBFA  KIT line   hairline (the kit's Structure spec: "Hairline 1px #DCEBFA")
     --hairline  #C2DDF5  KIT line-2 the furrow line at rest, and the ghost of an un-drawn chord
     --ink       #0A1A33  KIT Ink    17.38:1 on Paper
     --ink-soft  #3E5573  KIT Ink-2  7.63:1 — body copy at reading length
     --ink-faint #64748F  KIT Haze   4.73:1 on Paper, 4.51:1 on Mist. Legal on Paper and Mist ONLY
     --light     #3EA0FF  KIT Signal fill/decoration only, never information
     --working   #0B5FCC  KIT Furrow 5.96:1 — links, buttons, the worked line, coloured body text
     --halt      #B3261E  KIT Halt   6.54:1 — stopped, failed, refused, removed, reverted
     --verified  #1F7A5C  KIT Verified 5.25:1 — passed, shipped, reconciled. The only green.

   There is no warm value and no fifth blue. A new value is a commission and must arrive with its
   ratio already computed — the kit's own standing order. */
:root{
  --ground:#F5FAFF; --plate:#FFFFFF; --rule:#DCEBFA; --hairline:#C2DDF5;
  --ink:#0A1A33; --ink-soft:#3E5573; --ink-faint:#64748F;
  --light:#3EA0FF; --working:#0B5FCC; --halt:#B3261E; --verified:#1F7A5C;
  --field:rgba(11,95,204,.05);
  --display:'Avenir Next',Avenir,Futura,'Century Gothic','Segoe UI',system-ui,sans-serif;
  --ui:-apple-system,BlinkMacSystemFont,'SF Pro Text','Helvetica Neue',Inter,'Segoe UI',system-ui,sans-serif;
  --ledger:'SF Mono',SFMono-Regular,'IBM Plex Mono',Menlo,Consolas,'Liberation Mono',monospace;
  --measure:74ch;
  --ease:cubic-bezier(.2,.7,.3,1);
}

/* ---- OS dark: the kit's ink treatment -----------------------------------------------------------
   Ferrow has no dark BRAND — the brand is Daylight. What it has is a prescribed treatment for when
   the OPERATING SYSTEM is dark: the ground becomes Ink, the mark and text invert to Paper white, and
   the chords become Sky. Same eleven tokens, same eleven hexes as web/index.html and src/ui/app.html
   — the site is the third member of that parity set, not a fourth interpretation of it.

     --ground   #0A1A33  KIT Ink.
     --plate    #0F2445  derived, Ink +1 lightness step. White 15.46:1, Sky 8.27:1 — both AAA.
     --rule     #1D3050  KIT — the kit's own on-ink border. Hairline, never text.
     --hairline #2B4468  derived, one step above rule. Decorative rule — 1.76:1 is its whole job.
     --ink      #FFFFFF  KIT Paper. 17.38:1 on Ink.
     --ink-soft #A9C2DE  KIT — the kit's on-ink secondary text. 9.48:1.
     --ink-faint #7C97B8 derived between soft and rule. 5.77:1 — AA, 10px tracked mono only.
     --light    #7FC4FF  KIT Sky. 9.30:1 — the kit prescribes Sky as THE on-ink chord/accent.
     --working  #3EA0FF  KIT Signal. 6.35:1 — links and the worked line.
     --halt     #EB8E89  KIT Halt, lightness only (L 41%->73%). 7.25:1 on Ink.
     --verified #30BB8D  KIT Verified, lightness only (L 30%->46%). 7.13:1 on Ink.

   TWO WAYS IN, ONE ANSWER. The system's preference is honoured with no toggle on the page, exactly
   as the app surfaces do — a setting is a thing to get wrong and the system already knows. The
   :root[data-theme] pair exists only so a host shell that has already resolved a theme can state it;
   nothing in this site writes that attribute. */
@media (prefers-color-scheme:dark){
  :root{
    --ground:#0A1A33; --plate:#0F2445; --rule:#1D3050; --hairline:#2B4468;
    --ink:#FFFFFF; --ink-soft:#A9C2DE; --ink-faint:#7C97B8;
    --light:#7FC4FF; --working:#3EA0FF; --halt:#EB8E89; --verified:#30BB8D;
    --field:rgba(127,196,255,.10);
  }
}
:root[data-theme="dark"]{
  --ground:#0A1A33; --plate:#0F2445; --rule:#1D3050; --hairline:#2B4468;
  --ink:#FFFFFF; --ink-soft:#A9C2DE; --ink-faint:#7C97B8;
  --light:#7FC4FF; --working:#3EA0FF; --halt:#EB8E89; --verified:#30BB8D;
  --field:rgba(127,196,255,.10);
}
:root[data-theme="light"]{
  --ground:#F5FAFF; --plate:#FFFFFF; --rule:#DCEBFA; --hairline:#C2DDF5;
  --ink:#0A1A33; --ink-soft:#3E5573; --ink-faint:#64748F;
  --light:#3EA0FF; --working:#0B5FCC; --halt:#B3261E; --verified:#1F7A5C;
  --field:rgba(11,95,204,.05);
}

/* ---- ground ------------------------------------------------------------------------------------ */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ground);color:var(--ink);font-family:var(--ui);
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
a{color:var(--working);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
:focus-visible{outline:2px solid var(--light);outline-offset:3px;border-radius:2px}
img,svg{max-width:100%}

/* The one repeated typographic gesture, unchanged from the app surfaces. */
.label{
  font-family:var(--ledger);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-faint);font-weight:500;
}
.label.on{color:var(--working)}
.label.ok{color:var(--verified)}
.label.no{color:var(--halt)}

/* Skip link: the first tab stop on every page. Off-screen until it is focused. */
.skip{position:absolute;left:-9999px;top:0}
.skip:focus{left:8px;top:8px;z-index:9;background:var(--plate);padding:8px 12px;border:1px solid var(--rule)}

/* ---- the furrow: one line running the page ------------------------------------------------------
   Fixed to the left gutter, behind everything, drawn once. It is the same gesture the app puts down
   its rail, at the scale a reading page can carry. Below 900px the gutter does not exist, so neither
   does the line — it is not squeezed into a margin it cannot hold. */
#furrow{position:fixed;left:0;top:0;width:96px;height:100vh;pointer-events:none;z-index:0}
#furrow path{fill:none;stroke:var(--hairline);stroke-width:1.25}
#furrow path.worked{stroke:var(--working);stroke-width:1.6;stroke-dasharray:1 1;stroke-dashoffset:1;
  animation:draw .9s var(--ease) .15s forwards}
@keyframes draw{to{stroke-dashoffset:0}}

/* ---- shell ------------------------------------------------------------------------------------- */
.wrap{position:relative;z-index:1;max-width:1140px;margin:0 auto;padding:0 clamp(20px,5vw,64px)}

/* ---- nav --------------------------------------------------------------------------------------- */
.nav{display:flex;align-items:baseline;gap:clamp(18px,4vw,40px);flex-wrap:wrap;
  padding:26px 0 22px;border-bottom:1px solid var(--rule)}
.mark{display:flex;align-items:center;gap:11px;margin-right:auto}
.mark svg{width:30px;height:30px;display:block;overflow:visible;flex:0 0 auto}
/* the wordmark is the kit's own lockup spec: display face, 600, -.03em, sentence case. */
.wordmark{font-family:var(--display);font-size:23px;letter-spacing:-.03em;font-weight:600;line-height:1;padding-top:2px;color:var(--ink)}
.nav a.navlink{color:var(--ink-soft);font-size:15px}
.nav a.navlink:hover{color:var(--ink);text-decoration:none}
.nav a.navlink[aria-current="page"]{color:var(--ink)}
.nav a.navlink[aria-current="page"]::before{content:'';display:inline-block;width:12px;height:1px;
  background:var(--working);vertical-align:middle;margin-right:8px;transform:rotate(-7deg)}

/* ---- the reading plate -------------------------------------------------------------------------- */
main{display:block;padding-bottom:20px}
.head{padding:clamp(48px,9vw,104px) 0 clamp(30px,5vw,52px);max-width:26ch}
h1{font-family:var(--display);font-size:clamp(40px,7.2vw,76px);line-height:1.0;margin:14px 0 0;
  font-weight:600;letter-spacing:-.038em;color:var(--ink)}
.head .sub{color:var(--ink-soft);margin-top:20px;max-width:56ch;font-size:clamp(17px,2vw,20px);line-height:1.5}
.head{max-width:none}

/* A section is a row of the ledger: a rule above it, a label in the margin, the work beside it. */
.section{border-top:1px solid var(--rule);padding:clamp(28px,4.5vw,44px) 0;
  display:grid;grid-template-columns:minmax(120px,196px) minmax(0,1fr);gap:clamp(16px,4vw,44px)}
.section>.label{padding-top:6px}
.section .body{min-width:0;max-width:var(--measure)}
h2{font-family:var(--display);font-weight:600;font-size:clamp(25px,3.4vw,34px);line-height:1.12;
  letter-spacing:-.028em;margin:0 0 14px;color:var(--ink)}
h3{font-family:var(--display);font-weight:600;font-size:20px;line-height:1.2;letter-spacing:-.02em;
  margin:0 0 6px;color:var(--ink)}
p{margin:0 0 15px;color:var(--ink-soft);max-width:68ch}
p.lead{color:var(--ink);font-size:18px}
p:last-child{margin-bottom:0}
strong{color:var(--ink);font-weight:600}

/* ---- chords: a claim struck across the line ------------------------------------------------------
   No cards. A claim is a row with a hairline above it and a chord in the gutter that extends when you
   reach for it. The chord is the only thing on this page that moves in response to a pointer. */
.chords{list-style:none;margin:0;padding:0}
.chords li{position:relative;border-top:1px solid var(--rule);padding:18px 0 16px}
.chords li:first-child{border-top:0;padding-top:2px}
.chords li::before{content:'';position:absolute;left:-26px;top:27px;width:0;height:1px;
  background:var(--working);transform:rotate(-7deg);transition:width .18s var(--ease)}
.chords li:hover::before,.chords li:focus-within::before{width:16px}
.chords li:first-child::before{top:11px}
.chords p{margin:0}

/* ---- editions: two columns that stay two facts on a phone ---------------------------------------- */
.editions{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:clamp(20px,4vw,48px);
  max-width:var(--measure)}
.edition{min-width:0}
.edition h3{margin-bottom:2px}
.edition .price{font-family:var(--display);font-size:34px;font-weight:600;letter-spacing:-.03em;
  color:var(--ink);margin:14px 0 2px;line-height:1.1}
.edition .per{color:var(--ink-faint);font-size:15px}
.edition dl{margin:20px 0 0;padding:0}
.edition dt{margin-top:14px;padding-top:12px;border-top:1px solid var(--rule)}
.edition dd{margin:4px 0 0;color:var(--ink-soft)}

/* ---- facts table (spec rows) --------------------------------------------------------------------- */
.facts{margin:0;max-width:var(--measure)}
.fact{display:grid;grid-template-columns:minmax(120px,220px) minmax(0,1fr);gap:14px;
  padding:13px 0;border-top:1px solid var(--rule);align-items:baseline}
.fact:first-child{border-top:0}
.fact .v{color:var(--ink-soft);min-width:0}
.fact .v strong{color:var(--ink)}

/* ---- terminal lines ------------------------------------------------------------------------------ */
code{font-family:var(--ledger);font-size:.9em;background:var(--field);padding:1px 5px;border-radius:2px;
  color:var(--ink);overflow-wrap:break-word}
pre{font-family:var(--ledger);font-size:13.5px;line-height:1.6;margin:0 0 16px;padding:14px 16px;
  background:var(--field);border-left:1px solid var(--rule);overflow-x:auto;color:var(--ink)}
pre code{background:none;padding:0;font-size:inherit}
pre .c{color:var(--ink-faint)}
pre .o{color:var(--ink-soft)}

/* The install line: the one thing on the page shaped like a button, because it is the one thing you
   are meant to do. It is text you copy, so it is a <pre>, not a link that lies about being a command. */
.cta{margin-top:6px;max-width:var(--measure)}
.cta pre{background:var(--plate);border:1px solid var(--rule);border-left:2px solid var(--working);
  font-size:15px;padding:16px 18px}
.cta .note{color:var(--ink-faint);font-size:14px;margin:0}
/* One step of air after a block that ended in a rule. Named for what it is, so nobody reaches for
   an inline style attribute — the CSP allows those, but a stylesheet nobody can bypass is the point. */
.after{margin-top:22px}

/* ---- FAQ ------------------------------------------------------------------------------------------ */
.faq{max-width:var(--measure)}
.faq details{border-top:1px solid var(--rule);padding:0}
.faq summary{cursor:pointer;list-style:none;padding:15px 0;color:var(--ink);font-size:17px;
  display:flex;gap:12px;align-items:baseline}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:'+';font-family:var(--ledger);color:var(--ink-faint);font-size:14px;flex:0 0 12px}
.faq details[open] summary::before{content:'–'}
.faq details[open] summary{color:var(--ink);padding-bottom:6px}
.faq .a{padding:0 0 18px 24px}
.faq .a p{margin-bottom:12px}

/* ---- notice: a state, never a decoration ---------------------------------------------------------- */
.notice{border-left:2px solid var(--working);padding:12px 0 12px 16px;margin:20px 0 0;max-width:var(--measure)}
.notice.halt{border-left-color:var(--halt)}
.notice.halt .label{color:var(--halt)}
.notice.ok{border-left-color:var(--verified)}
.notice.ok .label{color:var(--verified)}
.notice p{margin:6px 0 0}

/* ---- docs prose ------------------------------------------------------------------------------------ */
.prose{max-width:70ch}
.prose h2{margin-top:36px}
.prose h2:first-child{margin-top:0}
.prose h3{margin-top:26px}
.prose ul{margin:0 0 16px;padding-left:20px;color:var(--ink-soft)}
.prose li{margin:5px 0}
.prose li strong{color:var(--ink)}

/* ---- footer ----------------------------------------------------------------------------------------- */
footer{border-top:1px solid var(--rule);margin-top:clamp(40px,7vw,88px);padding:30px 0 46px;
  display:flex;gap:clamp(18px,4vw,44px);flex-wrap:wrap;align-items:baseline}
footer nav{display:flex;gap:22px;flex-wrap:wrap}
footer a{font-size:14px;color:var(--ink-soft)}
footer a:hover{color:var(--ink)}
footer .who{margin-left:auto;color:var(--ink-faint);font-size:14px;max-width:46ch}
footer .who p{color:inherit;margin:0;font-size:inherit}

@media (max-width:900px){
  #furrow{display:none}
  .section{grid-template-columns:1fr;gap:12px}
  .section>.label{padding-top:0}
  .chords li::before{display:none}
  footer .who{margin-left:0;flex-basis:100%}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  #furrow path.worked{stroke-dashoffset:0}
}