/* =============================================================================
 * static.css — the pages that are only WORDS: /contact/, /shipping/, /terms/,
 * /privacy/ and /404.html (Track B).
 *
 * ADDITIVE ONLY. It loads after home.css and never redefines one of its rules:
 * every value below is built from home.css's own tokens (--ink-*, --line, --fog*,
 * --chalk*, --sand, --ga-red, --cond, --mono, --sans, --measure, --gut, --ease),
 * so a change to the design language still lands here, and this file can be
 * dropped without touching a single v4 page.
 *
 * The furniture these pages reuse unchanged: .wrap .sec .sec-head .mono .eyebrow
 * .btn .btn--solid .form .field .reach .panel-quiet .two.
 * =========================================================================== */

/* ---------- long-form document (terms, privacy, the FAQ) ------------------
   One column, one measure. A legal page is read, not scanned, so it gets a
   real measure (~74ch) and a hairline before every section instead of a card
   grid — the same rules the rest of the site draws with. */
.doc{max-width:74ch;counter-reset:doc-sec}
.doc-lede{color:var(--fog-2);font-size:clamp(16px,1.5vw,18.5px);line-height:1.6;max-width:60ch}
.doc-meta{margin-top:18px;color:var(--fog);font-size:13.5px;line-height:1.6}
.doc-meta a{color:var(--chalk-dim)}

/* the quiet DRAFT eyebrow — an owner-facing flag, not a banner */
.flag-draft{display:inline-flex;align-items:center;gap:10px;border:1px solid rgba(214,201,174,.34);
  background:rgba(214,201,174,.07);color:var(--sand);
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  padding:7px 12px;margin-bottom:18px}
.flag-draft::before{content:"";width:6px;height:6px;background:var(--ga-red);flex:0 0 auto}

.doc-sec{counter-increment:doc-sec;border-top:1px solid var(--line);padding-top:clamp(22px,3vw,30px);
  margin-top:clamp(30px,4vw,44px)}
.doc-sec:first-of-type{margin-top:clamp(26px,3.4vw,36px)}
.doc-sec>h2{position:relative;font-size:clamp(22px,2.6vw,29px);text-transform:uppercase;letter-spacing:.012em;
  color:var(--chalk);padding-left:52px}
/* the section number is DECORATION: a CSS counter, so it is never part of the
   heading text a screen reader, a crawler or the compliance scan reads. */
.doc-sec>h2::before{content:counter(doc-sec,decimal-leading-zero);position:absolute;left:0;top:.18em;
  font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--sand);font-weight:400}
.doc-sec>*+*{margin-top:13px}
.doc-sec p,.doc-sec li{color:var(--fog-2);font-size:15.4px;line-height:1.68}
.doc-sec strong{color:var(--chalk-dim);font-weight:500}
.doc-sec a{color:var(--chalk)}
.doc-sec ul{padding-left:20px;display:grid;gap:8px;margin:0}
.doc-sec li{margin:0}
.doc-sec li::marker{color:var(--fog)}
/* a pulled-out line the owner's copy already fixes word for word */
.doc-quote{border-left:2px solid var(--ga-red);padding:2px 0 2px 16px;color:var(--chalk-dim);font-size:15.4px;
  line-height:1.66}

/* ---------- the shipping & payment FAQ ----------------------------------- */
.faq{display:grid;gap:0;max-width:74ch}
.faq-i{border-top:1px solid var(--line);padding:clamp(20px,2.6vw,26px) 0}
.faq-i:last-child{border-bottom:1px solid var(--line)}
.faq-i h2{font-size:clamp(21px,2.4vw,26px);text-transform:uppercase;color:var(--chalk);letter-spacing:.012em}
.faq-i p{margin-top:10px;color:var(--fog-2);font-size:15.4px;line-height:1.68;max-width:62ch}
.faq-note{margin-top:clamp(26px,3.4vw,34px);border:1px solid var(--line);background:var(--ink-050);
  padding:clamp(18px,2.4vw,24px);max-width:74ch}
.faq-note .mono{color:var(--sand);display:block;margin-bottom:8px}
.faq-note p{color:var(--fog-2);font-size:15.4px;line-height:1.68}

/* ---------- contact ------------------------------------------------------- */
.contact-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(28px,5vw,72px);align-items:start}
.contact-aside p{color:var(--fog-2);max-width:44ch;margin-top:14px;font-size:15.2px;line-height:1.66}
.contact-aside .reach{margin-top:22px}
.contact-form-head{color:var(--fog);font-size:14.6px;max-width:48ch;margin-bottom:2px}
.field-hint{font-family:var(--sans);font-size:12.5px;letter-spacing:0;text-transform:none;color:#79838a}
.field-opt{color:#79838a}

/* the honeypot: off-screen for eyes AND for assistive tech, never display:none —
   a field that is not rendered at all is a field a bot's parser still fills, and
   `display:none` is the first thing a scripted filler learns to skip. */
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

.ts-host{min-height:0}
.ts-host:empty{display:none}
.ts-skip{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#79838a;
  border:1px dashed var(--line);padding:10px 12px}

.form-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
/* Send is blocked until the security check passes. Dimmed in place — the label,
   the padding and the position are untouched, so nothing on the page moves when
   Cloudflare answers. The hover state has to be pinned too, or a blocked button
   still lights up under the cursor and reads as clickable. */
.form-actions .btn[disabled]{opacity:.5;cursor:default}
.form-actions .btn--solid[disabled]:hover{background:var(--chalk);color:var(--ink-000);border-color:var(--chalk)}
.form-status{font-size:14.6px;line-height:1.6;max-width:52ch}
.form-status:empty{display:none}
.form-status[data-tone="bad"]{color:#f3b8ba}
.form-status[data-tone="busy"]{color:var(--fog);font-family:var(--mono);font-size:12px;letter-spacing:.14em;
  text-transform:uppercase}
/* the sent state REPLACES the form: a form still on screen under a success line
   invites a second identical note. */
.sent{border:1px solid var(--line);background:linear-gradient(180deg,#14181b,#0e1113);
  padding:clamp(22px,3vw,30px);display:grid;gap:12px;justify-items:start;position:relative;max-width:560px}
.sent::before{content:"";position:absolute;inset:-1px auto auto -1px;width:96px;height:2px;background:var(--ga-red)}
.sent h2{font-size:clamp(24px,3vw,32px);text-transform:uppercase}
.sent p{color:var(--fog-2);font-size:15.2px;line-height:1.66;max-width:46ch}

/* ---------- 404 ----------------------------------------------------------- */
.gone{min-height:min(62vh,560px);display:flex;align-items:center}
.gone-in{padding-block:clamp(48px,8vw,96px);display:grid;gap:16px;justify-items:start;max-width:60ch}
.gone h1{font-size:clamp(40px,7.4vw,86px);text-transform:uppercase;line-height:.92;letter-spacing:-.004em}
.gone p{color:var(--fog-2);font-size:clamp(16px,1.6vw,19px);line-height:1.55;max-width:40ch}
.gone .cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}

/* ---------- responsive ---------------------------------------------------- */
@media (max-width:1080px){
  .contact-grid{grid-template-columns:1fr}
}
@media (max-width:620px){
  .doc-sec>h2{padding-left:0}
  .doc-sec>h2::before{position:static;display:block;margin-bottom:8px}
  .faq-i h2,.doc-sec>h2{font-size:20px}
  .gone h1{font-size:38px}
  .form-actions .btn{width:100%}
}