/* Plaid Squirrel — Direction D, "The Instrument".
   Derived from the incumbent Oct 2025 identity (see DESIGN.md) and the
   NULLPUNKT reference in the taste library: newsprint field, one hairline of
   colour, mono technical registers, and the spec-table-as-CTA.
   Text-heavy sections use the label/body grid from the Column reference. */

:root{
  --paper:#e4e1d8;
  --paper-2:#dbd7cc;
  --ink:#141210;
  --ink-soft:#3a352e;
  --muted:#625d52;   /* 5.01:1 on --paper. #6f6a5e measured 4.12 and failed AA. */
  --red:#74182b;
  --red-deep:#640516;
  --hair:#c3bdad;

  --mono:ui-monospace,"SFMono-Regular","Menlo","Consolas",monospace;
  --cond:"HelveticaNeue-CondensedBlack","Haettenschweiler","Impact","Arial Narrow",
         system-ui,sans-serif;
  --geo:"Futura","Century Gothic","Avenir Next",system-ui,sans-serif;
  --body:"Avenir Next",system-ui,-apple-system,"Segoe UI",sans-serif;

  --gut:clamp(1.25rem,4vw,3rem);
  --wrap:76rem;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--body);font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;position:relative;overflow-x:hidden;
}
/* paper grain, drawn not photographed */
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:99;opacity:.5;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/><feColorMatrix type='saturate' values='0'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='0.22'/></svg>");
  mix-blend-mode:multiply;
}

img,svg{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--red);outline-offset:3px}

.wrap{max-width:var(--wrap);margin:0 auto;padding-left:var(--gut);padding-right:var(--gut)}
.mono{font-family:var(--mono);font-size:.72rem;letter-spacing:.11em;text-transform:uppercase}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--paper);
      padding:.8rem 1.2rem;z-index:200;font-family:var(--mono);font-size:.8rem}
.skip:focus{left:.5rem;top:.5rem}

/* ---------- registers ---------- */
.reg{display:flex;justify-content:space-between;align-items:center;gap:1rem;
     padding-top:1.9rem;flex-wrap:wrap;position:relative;z-index:4}
.reg .wm{display:flex;align-items:center;gap:.65rem;text-decoration:none;
         font-family:var(--geo);font-weight:300;font-size:1rem;letter-spacing:.24em;
         text-transform:uppercase;min-height:44px}
.reg .wm img{width:28px;height:28px}
.reg nav{display:flex;gap:1.6rem;flex-wrap:wrap}
.reg nav a{font-family:var(--mono);font-size:.72rem;letter-spacing:.11em;
           text-transform:uppercase;text-decoration:none;color:var(--ink);
           display:inline-flex;align-items:center;min-height:44px;
           border-bottom:1px solid transparent}
.reg nav a:hover{border-color:var(--red);color:var(--red)}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;padding-bottom:4rem}
.hero .wrap{position:relative;z-index:3}
/* The fold must say what this business is. Without the kicker and standfirst the
   page reads as a trades company: the mark, the cloth and the photographs all
   point at the audience's world rather than at the service. */
.kicker{margin:2.6rem 0 .5rem;color:var(--red);position:relative;z-index:3}
h1{
  font-family:var(--cond);font-weight:900;text-transform:uppercase;
  font-size:clamp(3rem,10.5vw,9rem);line-height:.82;letter-spacing:-.015em;
  margin:0;max-width:10ch;position:relative;z-index:3;
}
.standfirst{
  font-family:var(--geo);font-weight:300;
  font-size:clamp(1.15rem,2.1vw,1.5rem);line-height:1.34;
  max-width:34ch;margin:0 0 1.4rem;color:var(--ink);position:relative;z-index:3;
}
.spec-cap{margin:0 0 .55rem;color:var(--muted)}
/* the stamp is anchored to the rule, overlapping it, rather than floating in space */
.rule-row{display:flex;align-items:center;gap:1.6rem;margin:1.5rem 0 .9rem;
          position:relative;z-index:3}
.accent{height:3px;background:var(--red);flex:1 1 auto;max-width:32rem}
.stamp{flex:0 0 clamp(7rem,11vw,10.5rem);margin-block:calc(-1 * clamp(3rem,5vw,4.6rem));
       opacity:.7;transform:rotate(-13deg);pointer-events:none}
.prov{margin:0 0 2.6rem;color:var(--ink-soft);position:relative;z-index:3}

/* the ladder as a spec table; last row inverted, and it is the CTA */
.spec{width:min(31rem,100%);position:relative;z-index:3}
.spec div,.spec a{
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
  border:1px solid var(--ink);border-bottom:none;padding:.9rem 1rem;
  font-family:var(--mono);font-size:.78rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink);text-decoration:none;min-height:44px;
}
.spec :last-child{border-bottom:1px solid var(--ink)}
.spec .v{color:var(--muted)}
.spec a.buy{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.spec a.buy .v{color:var(--paper);opacity:.72}
.spec a.buy:hover{background:var(--red);border-color:var(--red)}

/* the mark, filled with real cloth, bleeding off the right edge */
.subject{position:absolute;right:-11rem;top:3rem;width:min(50rem,54vw);z-index:1;
         pointer-events:none}

/* ---------- section grid (Column reference) ---------- */
.sec{border-top:1px solid var(--hair)}
.sec .wrap{padding-top:3.4rem;padding-bottom:3.4rem}
.grid{display:grid;grid-template-columns:9rem minmax(0,1fr);gap:clamp(1.5rem,4vw,3.5rem);
      align-items:start}
.grid h2{margin:.25rem 0 0;color:var(--red)}
.body{max-width:42rem}
.body p{margin:0 0 1.05rem;color:var(--ink-soft)}
.body p:last-child{margin-bottom:0}
.lede{font-size:clamp(1.15rem,2.2vw,1.45rem);line-height:1.35;color:var(--ink);
      font-family:var(--geo);font-weight:300;max-width:24ch}

/* rungs */
.rungs{display:grid;gap:0;margin:0;padding:0;list-style:none}
.rungs li{display:grid;grid-template-columns:3.2rem minmax(0,1fr);gap:1.4rem;
          padding:1.4rem 0;border-top:1px solid var(--hair)}
.rungs li:first-child{border-top:none;padding-top:0}
.rungs .n{font-family:var(--mono);font-size:.78rem;color:var(--red);letter-spacing:.08em}
.rungs h3{font-family:var(--mono);font-size:.78rem;letter-spacing:.13em;text-transform:uppercase;
          margin:0 0 .45rem}
.rungs p{margin:0;color:var(--ink-soft)}

/* §5: the ladder priced. Reuses the rung skeleton; the figure sits between the
   label and the body copy so the row survives every width without a third column. */
.fees .fig{font-family:var(--geo);font-weight:300;
           font-size:clamp(1.35rem,2.4vw,1.7rem);line-height:1.2;
           color:var(--ink);margin:0 0 .45rem}

/* what the report contains — a plain checklist, not cards */
.contents{margin:1.4rem 0 0;padding:0;list-style:none;border-top:1px solid var(--hair)}
.contents li{border-bottom:1px solid var(--hair);padding:.8rem 0;display:flex;gap:1rem;
             font-family:var(--mono);font-size:.76rem;letter-spacing:.07em;
             text-transform:uppercase;color:var(--ink-soft)}
.contents li::before{content:"—";color:var(--red)}

/* ---------- full-bleed photograph bands ---------- */
figure.band{margin:0;position:relative}
figure.band img{width:100%;height:clamp(15rem,34vw,26rem);object-fit:cover}
figure.band figcaption{font-family:var(--mono);font-size:.68rem;letter-spacing:.11em;
  text-transform:uppercase;color:var(--muted);padding:.7rem var(--gut) 0;
  max-width:var(--wrap);margin:0 auto}

/* ---------- independence ---------- */
.claim{background:var(--ink);color:var(--paper);border-top:none}
.claim .wrap{padding-top:3.6rem;padding-bottom:3.6rem}
.claim h2{color:#b98a86}
.claim q{quotes:none;display:block;font-family:var(--cond);font-weight:900;
         text-transform:uppercase;font-size:clamp(1.9rem,5.4vw,3.6rem);line-height:.92;
         letter-spacing:-.01em;margin:0 0 1.3rem;max-width:16ch}
.claim p{color:#c3bab2;max-width:40rem;margin:0}

/* ---------- about / close ---------- */
/* One column while the portrait is pending (2026-08-16). The two-column rule below
   is the intended layout and returns the moment a real photograph lands — without
   it the empty 12rem track leaves a hole beside the prose. */
.who{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(1.5rem,4vw,3rem);
     align-items:start}
/* .who{grid-template-columns:minmax(0,1fr) 12rem}  <- restore with the photograph */
/* Unused while the portrait is pending — kept as the spec for the slot, not dead code. */
.portrait{width:100%;aspect-ratio:4/5;border:1px solid var(--hair);background:var(--paper-2);
  display:grid;place-items:center;text-align:center;padding:.8rem;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted)}
.close .wrap{padding-top:3.4rem;padding-bottom:3.4rem}
.big{font-family:var(--cond);font-weight:900;text-transform:uppercase;
     font-size:clamp(2rem,6vw,4rem);line-height:.88;margin:.6rem 0 1.8rem;max-width:14ch}
.actions{display:flex;gap:1rem;flex-wrap:wrap;align-items:center}
.btn{display:inline-flex;align-items:center;min-height:44px;background:var(--ink);
     color:var(--paper);text-decoration:none;font-family:var(--mono);font-size:.78rem;
     letter-spacing:.11em;text-transform:uppercase;padding:.9rem 1.7rem}
.btn:hover{background:var(--red)}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--paper)}
button.btn{border:0;cursor:pointer;font:inherit;font-family:var(--mono);font-size:.78rem}

/* §7 form: the phone-first path. Mono caps labels, hard-edged fields on paper,
   no JS anywhere — script-src is 'none' and Netlify Forms doesn't need it. */
.intake{margin-top:2.4rem;max-width:26rem}
.form-cap{color:var(--muted);margin:0 0 .9rem}
.frow{margin:0 0 1.1rem}
.frow label{display:block;font-family:var(--mono);font-size:.72rem;letter-spacing:.11em;
  text-transform:uppercase;margin:0 0 .35rem;color:var(--ink)}
.frow .opt{color:var(--muted);text-transform:none;letter-spacing:normal}
.frow input,.frow textarea{width:100%;border:1px solid var(--ink);background:var(--paper);
  color:var(--ink);font:inherit;font-size:1rem;padding:.65rem .75rem;min-height:44px;
  border-radius:0;box-sizing:border-box}
.frow textarea{min-height:6rem;resize:vertical}
.frow input:focus,.frow textarea:focus{outline:2px solid var(--red);outline-offset:1px}
.frow ::placeholder{color:var(--muted);opacity:1}
.hp{position:absolute;left:-9999px}

footer{border-top:1px solid var(--ink)}
footer .wrap{display:flex;justify-content:space-between;gap:1.2rem;flex-wrap:wrap;
             align-items:center;padding-top:1.2rem;padding-bottom:2rem;color:var(--muted)}
footer span{display:inline-flex;align-items:center;min-height:44px}
footer a{color:var(--ink);display:inline-flex;align-items:center;min-height:44px}

/* ---------- narrow ---------- */
@media (max-width:900px){
  .subject{position:static;width:min(24rem,72%);margin:2.5rem 0 -1rem auto;right:auto}
  .grid{grid-template-columns:1fr;gap:.9rem}
  .who{grid-template-columns:1fr}
  .portrait{width:min(12rem,50%)}
  /* the stamp must not overhang into the provenance line at narrow widths */
  .stamp{flex-basis:5.5rem;margin-block:-1.1rem}
  .prov{margin-top:2.1rem}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---------- the verdict strip ----------------------------------------------
   Four designs failed the same test: you had to read a paragraph before you
   knew what this business was. Three pitches with plain answers identify it in
   about two seconds. It deliberately does NOT reuse the spec table's look —
   that table is "what it costs you", this is "what I actually think", and two
   registers that look identical would flatten both. Rules above only, the
   verdict leading each row in display type (see the reversal note below), and
   crimson reserved for the answers that cost him money. */
.strip{width:min(32rem,100%);position:relative;z-index:3;margin:0 0 2.4rem}
/* 32rem, not 38: the stamp overhangs the rule above and at 38rem the first
   verdict ran underneath it — measured 86x51px of overlap, with SKIP IT sitting
   behind the stamp. Narrowing is the fix that costs nothing; pushing the strip
   down instead shoved the 'and three more' link below the fold, which defeats
   the whole point of the strip. */
.strip-cap{margin:0 0 .2rem;color:var(--muted)}
/* Reversed 2026-08-17 (James): the verdict leads the row in display type and
   the pitch follows, smaller and softer. At the old hierarchy — pitch at up to
   1.28rem, verdict at .74rem mono far right — the answer was small enough to
   miss, and a pitch without its verdict reads as a service menu. min-width on
   .vc ranges the pitches; "Worth it." is the widest word. */
.vrow{display:flex;align-items:baseline;gap:1.2rem;
      padding:.85rem 0;border-top:1px solid var(--hair);text-decoration:none;
      color:var(--ink);min-height:44px}
.vrow:hover .vp{border-bottom:1px solid var(--ink)}
.vc{font-family:var(--geo);font-weight:400;font-size:clamp(1rem,1.7vw,1.28rem);
    line-height:1.25;white-space:nowrap;flex:none;min-width:5.2em}
.vp{font-family:var(--geo);font-weight:300;font-size:1rem;line-height:1.4;
    color:var(--ink-soft);max-width:28ch}
.vc.no{color:var(--red)}
.vc.yes{color:var(--ink)}
.vmore{display:inline-flex;align-items:center;min-height:44px;margin-top:.4rem;
       border-top:1px solid var(--hair);width:100%;
       font-family:var(--mono);font-size:.72rem;letter-spacing:.11em;text-transform:uppercase;
       color:var(--red);text-decoration:none;padding-top:.7rem}
.vmore:hover{text-decoration:underline}

/* ---------- /straight-answers/ ---------------------------------------------
   G's content at the altitude James put it: a page one level down that expands
   on what to do and what is involved. G's own visual system does not come with
   it — one site, one system, and that system is this one. */
/* Mirrors the landing strip's reversal (James, 2026-08-17): the verdict leads
   in the same display type at the same size, a ranged left rail of answers,
   with the pitch and reasoning following. Two surfaces, one treatment. */
.answers .v{display:grid;grid-template-columns:clamp(6.5rem,13vw,9rem) minmax(0,1fr);
  gap:clamp(1rem,3vw,2.5rem);align-items:baseline;
  padding:clamp(1.1rem,2.4vh,1.7rem) 0;border-top:1px solid var(--hair)}
.answers .v:last-of-type{border-bottom:1px solid var(--hair)}
.answers .pitch{margin:0;font-family:var(--geo);font-weight:300;
  font-size:clamp(1rem,1.6vw,1.15rem);line-height:1.3;max-width:32ch}
.answers .why{margin:.55rem 0 0;color:var(--ink-soft);font-size:.98rem;
  max-width:46ch;line-height:1.6}
.answers .call{font-family:var(--geo);font-weight:400;
  font-size:clamp(1rem,1.7vw,1.28rem);line-height:1.25;white-space:nowrap}
.answers .call.no{color:var(--red)}
.answers .call.yes{color:var(--ink)}
.answers .call.it{color:var(--muted)}
.answers .after{margin:clamp(1.6rem,4vh,2.6rem) 0 0;max-width:44rem;color:var(--ink-soft)}
.answers .after strong{color:var(--ink);font-weight:400}
.backlink{display:inline-flex;align-items:center;min-height:44px;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--red);text-decoration:none}
.backlink:hover{text-decoration:underline}

@media (max-width:820px){
  .strip{width:100%}
  .vrow{flex-direction:column;align-items:flex-start;gap:.15rem}
  .answers .v{grid-template-columns:1fr;gap:.3rem}
}

/* Inner pages are delivering content, not making a first impression. At the
   landing page's display size "Here is what I tell people for free." ran four
   lines and pushed the actual list most of a screen down — the thing the page
   exists for was below the fold on its own page. */
.hero.sub h1{font-size:clamp(2rem,4.6vw,3.6rem);line-height:.94;max-width:18ch}
.hero.sub .standfirst{margin-bottom:0}