/* ============================================================
   Kaweka Studio — landing page stylesheet
   Built from DESIGN-DIRECTION.md, concept D "Marked Up, Out Loud",
   revision 4 (single-page holding site).

   TYPE SCALE — minor third (1.2) on a 16px base.
   SPACING — 4px base unit, restrained ladder of multiples.
     Every margin, padding and gap resolves to a token.

   The site is one page, so this sheet carries only what that page
   uses: the ruled document register, two offer cards and the intake
   form. The retired figure/ticker/pricing components are in git
   history, not here.
   ============================================================ */

/* self-hosted: same three variable-font files Google Fonts was already
   serving (one file per family covers every weight in use), just same-origin
   instead of a render-blocking third-party CSS + font fetch */
@font-face{font-family:'Archivo';font-style:normal;font-weight:400 600;font-display:swap;src:url('/fonts/archivo.woff2') format('woff2')}
@font-face{font-family:'Roboto Mono';font-style:normal;font-weight:400 500;font-display:swap;src:url('/fonts/roboto-mono.woff2') format('woff2')}
@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:400 700;font-display:swap;src:url('/fonts/roboto-slab.woff2') format('woff2')}

:root{
  /* brand palette */
  --paper:#EDF1EE; --ink:#0A2422; --ink-2:#061D1B; --ink-soft:#3D5854;
  --teal:#0E9E8C; --teal-br:#2ADCC0; --teal-ink:#0B6F64; --gold:#D9A441;
  --rule:rgba(10,36,34,.16);
  /* muted ink that still clears WCAG AA on Paper (5.07:1) */
  --ink-faint:#506B66;

  /* type scale — 16px base, ratio 1.2 */
  --f-1:11.1px;   /* mono micro-labels */
  --f-2:13.3px;   /* small copy, captions */
  --f-3:16px;     /* body */
  --f-4:19.2px;   /* lede, row headings */
  --f-5:23px;     /* annotation */
  --f-6:27.6px;   /* section lead-in */
  --f-7:33.2px;   /* h2 floor, h1 mobile floor */
  --f-8:39.8px;
  --f-9:47.8px;
  --f-10:57.3px;  /* h2 ceiling */
  --f-11:68.8px;
  --f-12:82.6px;  /* h1 ceiling */

  /* spacing — 4px base */
  --s-1:4px;   --s-2:8px;   --s-3:12px;  --s-4:16px;  --s-5:20px;
  --s-6:24px;  --s-7:32px;  --s-8:40px;  --s-9:48px;  --s-10:64px;
  --s-11:80px; --s-12:96px; --s-13:112px;

  /* families */
  --slab:'Roboto Slab',Georgia,serif; --body:'Archivo',system-ui,sans-serif; --mono:'Roboto Mono',ui-monospace,monospace;

  --pad:clamp(var(--s-5),4.5vw,var(--s-10)); --maxw:1320px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; color:var(--ink); font-family:var(--body); font-size:var(--f-3); line-height:1.55;
  background-color:var(--paper);
  background-image:linear-gradient(rgba(10,36,34,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(10,36,34,.045) 1px,transparent 1px);
  background-size:28px 28px;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
p{margin:0}
h1,h2,h3{font-family:var(--slab);margin:0;font-weight:700;letter-spacing:-.025em;line-height:1.04}
.mono{font-family:var(--mono);font-size:var(--f-1);letter-spacing:.14em;text-transform:uppercase}
a{color:inherit}
img,svg{max-width:100%}
:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
[id]{scroll-margin-top:var(--s-8)}

/* ---------- SKIP LINK ---------- */
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--paper);padding:var(--s-3) var(--s-5);z-index:100;font-family:var(--mono);font-size:var(--f-2);text-decoration:none}
.skip:focus{left:var(--pad);top:var(--s-3)}

/* ---------- HEADER : a ruled band, not a floating bar. Not sticky —
   the whole site is one screen-and-a-bit, so there is nothing to
   navigate back to and nothing to keep in view. ---------- */
header{border-bottom:1px solid var(--ink);background:var(--paper)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:var(--s-6);height:66px}
.brand{display:flex;align-items:center;text-decoration:none}
.brand .wordmark{height:22px;width:auto;display:block}
.nav-note{color:var(--teal-ink)}
@media (max-width:420px){
  .nav-note{display:none}
  /* the slug wraps to two lines here, so the divider would dangle */
  .slug span:not(:last-child)::after{display:none}
  .slug{gap:var(--s-1) var(--s-4)}
}

/* ---------- BUTTONS AND LINKS ---------- */
.btn{display:inline-flex;align-items:center;gap:var(--s-2);font-family:var(--body);font-weight:600;font-size:var(--f-3);letter-spacing:0;
  padding:var(--s-3) var(--s-6);border:1.5px solid var(--ink);background:var(--teal-ink);color:#fff;text-decoration:none;border-radius:0;
  transition:background .18s,transform .18s,box-shadow .18s;box-shadow:4px 4px 0 var(--ink);cursor:pointer}
.btn:hover{background:var(--ink);transform:translate(-1px,-1px);box-shadow:6px 6px 0 var(--ink)}
.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.btn:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.btn.lg{padding:var(--s-5) var(--s-8);font-size:var(--f-4);box-shadow:6px 6px 0 var(--ink)}
.btn.lg:hover{box-shadow:9px 9px 0 var(--ink)}
@media (prefers-reduced-motion:reduce){.btn{transition:none}}

.textlink{font-weight:600;color:var(--ink);text-decoration:none;border-bottom:2px solid var(--teal);padding-bottom:2px;transition:border-color .18s,color .18s}
.textlink:hover{color:var(--teal-ink);border-bottom-color:var(--gold)}
.textlink:active{color:var(--teal-ink)}

/* a plain link inline in body copy, not a component of its own */
main p a{color:inherit;border-bottom:1.5px solid var(--teal);padding-bottom:1px;text-decoration:none;transition:color .18s,border-color .18s}
main p a:hover{color:var(--teal-ink);border-bottom-color:var(--gold)}
main p a:focus-visible{outline:2px solid var(--teal);outline-offset:2px}

/* ---------- HERO ---------- */
.hero{padding:clamp(var(--s-8),5vw,var(--s-11)) 0 clamp(var(--s-8),4.5vw,var(--s-10))}
.slug{color:var(--teal-ink);display:flex;gap:var(--s-4);flex-wrap:wrap;align-items:center;margin-bottom:clamp(var(--s-4),2vw,var(--s-6))}
.slug span:not(:last-child)::after{content:"";display:inline-block;width:16px;height:1px;background:currentColor;margin-left:var(--s-4);vertical-align:middle;opacity:.55}
h1{font-size:clamp(var(--f-7),6vw,var(--f-12));max-width:12.5em}
/* gold marks the problem — the one decorative-looking mark on the page,
   and it sits under the word that names what the work is for */
h1 em{font-style:normal;background-image:linear-gradient(var(--gold),var(--gold));
  background-size:100% .085em;background-repeat:no-repeat;background-position:0 94%}
.hero-band{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(var(--s-6),4vw,var(--s-10));
  align-items:start;margin-top:clamp(var(--s-6),3.5vw,var(--s-9));border-top:1.5px solid var(--ink);padding-top:clamp(var(--s-6),3vw,var(--s-8))}
.lede{font-size:clamp(var(--f-3),1.3vw,var(--f-4));color:var(--ink-soft);max-width:52ch}
.cta-row{display:flex;flex-wrap:wrap;gap:var(--s-6);align-items:center;margin-top:clamp(var(--s-6),3vw,var(--s-8))}

.margin-note{border-left:1.5px solid var(--ink);padding:2px 0 2px var(--s-6)}
.margin-note .mono{color:var(--teal-ink);display:block;margin-bottom:var(--s-3)}
.margin-note p{font-size:var(--f-2);color:var(--ink-soft);line-height:1.6;max-width:36ch}
.margin-note p + p{margin-top:var(--s-4)}

/* ---------- OFFERS : two cards, at Ben's request (30 August 2026). The
   deliberate exception to "ruled, not boxed", carried over from the old
   contact panel — bordered, hard Ink offset shadow, dark mono tab hanging
   off the top-left — so it reads as this document rather than as a
   soft rounded SaaS card. ---------- */
h2{font-size:clamp(var(--f-7),4.4vw,var(--f-10))}
.offers{padding:0 0 clamp(var(--s-9),5vw,var(--s-11))}
/* the cards hang off a hairline the way the intake panel does, so they
   sit in the ruled document rather than floating loose on the paper */
.offers-inner{border-top:1.5px solid var(--ink);padding-top:clamp(var(--s-9),5vw,var(--s-11))}
.offer-cards{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(var(--s-8),4vw,var(--s-10));max-width:1040px}
.offer-card{position:relative;background:var(--paper);border:1.5px solid var(--ink);
  box-shadow:6px 6px 0 rgba(10,36,34,.1);
  padding:clamp(var(--s-8),4.5vw,var(--s-9)) clamp(var(--s-6),3vw,var(--s-8)) clamp(var(--s-7),3.5vw,var(--s-8))}
.card-tab{position:absolute;top:0;left:var(--s-6);transform:translateY(-100%);
  background:var(--ink);color:var(--paper);padding:var(--s-2) var(--s-4);
  border:1.5px solid var(--ink);border-bottom:0}
.offer-card h2{font-size:clamp(var(--f-5),2.4vw,var(--f-6));letter-spacing:-.025em;line-height:1.12;max-width:15ch}
/* both titles reserve two lines so the descriptions start on the same
   baseline across the pair */
@media (min-width:721px){.offer-card h2{min-height:2.24em}}
.offer-card p{margin-top:clamp(var(--s-5),2.5vw,var(--s-6));color:var(--ink-soft);font-size:var(--f-3);line-height:1.65}

/* ---------- FORM ---------- */
.formsec{padding:0 0 clamp(var(--s-10),7vw,var(--s-12))}
.form-head{border-top:1.5px solid var(--ink);padding-top:clamp(var(--s-9),5vw,var(--s-11));
  margin-bottom:clamp(var(--s-7),4vw,var(--s-9))}
.form-head h2{max-width:16ch}
.form-head .lede{margin-top:clamp(var(--s-4),2vw,var(--s-6));max-width:64ch}
.form-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(var(--s-7),5vw,var(--s-11));align-items:start}
.form-panel{position:relative;background:var(--paper);border:1.5px solid var(--ink);
  box-shadow:6px 6px 0 rgba(10,36,34,.1);
  padding:clamp(var(--s-8),5vw,var(--s-10)) clamp(var(--s-6),4vw,var(--s-8)) clamp(var(--s-7),4vw,var(--s-8))}
.form-tab{position:absolute;top:0;left:var(--s-6);transform:translateY(-100%);
  background:var(--ink);color:var(--paper);padding:var(--s-2) var(--s-4);
  border:1.5px solid var(--ink);border-bottom:0}
.field{margin-bottom:clamp(var(--s-6),3vw,var(--s-7))}
.field label{display:block;color:var(--teal-ink);margin-bottom:var(--s-3)}
.field label .opt{color:var(--ink-soft);text-transform:none;letter-spacing:0;font-family:var(--body);font-size:var(--f-2)}
.field input,.field textarea{
  width:100%;border:1.5px solid var(--rule);background:#fff;
  font-family:var(--body);font-size:var(--f-3);color:var(--ink);padding:var(--s-3) var(--s-4);line-height:1.5;
  transition:border-color .18s;resize:vertical
}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-faint);opacity:1}
.field input:focus,.field textarea:focus{outline:0;border-color:var(--teal)}
.field input:focus-visible,.field textarea:focus-visible{outline:2px solid var(--teal);outline-offset:2px;border-color:var(--teal)}
.field textarea{min-height:110px}
.form-foot{margin-top:var(--s-2)}
.reassure{margin-top:var(--s-4);color:var(--ink-soft);font-size:var(--f-2);max-width:46ch;line-height:1.6}

.form-aside{border-left:1.5px solid var(--ink);padding-left:var(--s-6)}
.form-aside .mono{color:var(--teal-ink);display:block;margin-bottom:var(--s-3)}
.form-aside .mono.spaced{margin-top:var(--s-7)}
.form-aside p{color:var(--ink-soft);font-size:var(--f-3);line-height:1.65;max-width:38ch}
.form-aside a{color:var(--ink);border-bottom:1.5px solid var(--teal);text-decoration:none;transition:border-color .18s,color .18s}
.form-aside a:hover{color:var(--teal-ink);border-bottom-color:var(--gold)}
.form-aside a:focus-visible{outline:2px solid var(--teal);outline-offset:2px}

/* honeypot: a real field, visually off-canvas rather than display:none, so
   autofilling bots still find and trip it */
.hp-field{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;margin:0}

/* inline submit error: same reassurance-line register, just live and dismissible by a retry */
#formError{color:#8A5A00;font-weight:600}

/* success state swaps in for the form inside the same panel, so the ruled
   frame and Intake tab carry across rather than resetting to a generic banner */
.form-success{padding:var(--s-4) 0 var(--s-2)}
.form-success .mono{color:var(--teal-ink);display:block;margin-bottom:var(--s-3)}
.form-success h3{font-size:clamp(var(--f-5),2.2vw,var(--f-6));letter-spacing:-.02em;margin-bottom:var(--s-4)}
.form-success p{color:var(--ink-soft);font-size:var(--f-3);line-height:1.65;max-width:44ch}

/* ---------- FOOTER : one ruled line on paper. A dark footer would be a
   second loud moment, and the page is allowed exactly one. ---------- */
footer{border-top:1.5px solid var(--ink)}
.foot{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-4) var(--s-8);
  padding-top:var(--s-7);padding-bottom:var(--s-7)}
.foot-brand{display:flex;align-items:center;text-decoration:none;margin-right:auto}
.foot-brand .wordmark{height:18px;width:auto;display:block;opacity:.75}
.foot-brand:hover .wordmark{opacity:1}
.foot .mono{color:var(--ink-faint)}
.foot-mail{color:var(--ink);font-family:var(--mono);font-size:var(--f-1);letter-spacing:.08em;
  text-decoration:none;border-bottom:1.5px solid var(--teal);padding-bottom:2px;transition:border-color .18s,color .18s}
.foot-mail:hover{color:var(--teal-ink);border-bottom-color:var(--gold)}

/* ---------- RESPONSIVE : the asymmetric pairs restack, the annotation
   column converting from a left border to a top border so it still
   reads as a note rather than as body copy. ---------- */
@media (max-width:880px){
  .hero-band,.form-grid{grid-template-columns:1fr}
  .margin-note,.form-aside{border-left:0;border-top:1.5px solid var(--ink);padding:var(--s-6) 0 0}
  .margin-note p,.form-aside p{max-width:52ch}
  .foot{gap:var(--s-4) var(--s-6)}
  .foot-brand{margin-right:0;flex-basis:100%}
}
@media (max-width:720px){
  .offer-cards{grid-template-columns:1fr;max-width:520px;gap:clamp(var(--s-9),9vw,var(--s-10))}
}
@media (max-width:480px){
  .cta-row{gap:var(--s-5)}
  .cta-row .btn{width:100%;justify-content:center}
}