/* ============================================================
   MOTHERFORM STUDIO — design system · V4 "The Correction"
   Bone paper, warm greige, near-black ink. No accent colour.
   Ink is what is SAID (headlines, body, captions, the typed line).
   Emboss is what is MADE (wordmark, section marks). Emboss never
   carries information that isn't duplicated in ink.
   Relief is raised, light from the top-left, everywhere.
   One orchestrated motion moment: the hero. Nothing else moves.
   Source: letterpress/motherform-v4-the-correction-PRD.md
   ============================================================ */

@font-face{font-family:'Martian Mono';src:url('fonts/martian-mono-latin-400-normal.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Giaza';src:url('fonts/Giaza.otf') format('opentype');font-weight:400;font-display:swap}
@font-face{font-family:'Hello Paris';src:url('fonts/HelloParisSans-Regular.ttf') format('truetype');font-weight:400;font-display:swap}

:root{
  /* palette — six values, locked */
  --paper:#EDEAE3;
  --paper-deep:#DCD6CA;
  --ink:#16130F;
  --ink-ghost:rgba(22,19,15,.35);
  --relief-light:rgba(255,255,255,.95);
  --relief-dark:rgba(122,112,96,.32);

  /* quieter ink comes from opacity, never a new hex */
  --ink-2:rgba(22,19,15,.72);
  --ink-3:rgba(22,19,15,.52);
  --hair:rgba(22,19,15,.14);
  --hair-2:rgba(22,19,15,.28);

  --ground:var(--paper);

  /* type — three roles */
  --mono:'Martian Mono','Geist Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;   /* the typed line */
  --display:'Fraunces',Georgia,'Times New Roman',serif;                                  /* emboss and very large display only */
  --sans:'Archivo','Inter','Helvetica Neue',Arial,sans-serif;                            /* everything said */
  --wordmark:'Giaza','Fraunces',Georgia,serif;                                           /* the lockup only */
  --wordmark-sans:'Hello Paris','Archivo',sans-serif;

  /* spacing */
  --s1:8px;--s2:16px;--s3:24px;--s4:40px;--s5:64px;--s6:104px;--s7:168px;
  --gutter:clamp(20px,4vw,56px);
  --corner:64px; /* room the fixed corner labels need at the bottom */

  --ease:cubic-bezier(.22,1,.36,1);
}

/* ---------- reset & ground ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
html,body{overflow-x:hidden}
body{
  background:var(--ground);color:var(--ink);
  font-family:var(--sans);font-weight:400;font-size:1rem;line-height:1.6;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  min-height:100svh;
}
img,svg,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
::selection{background:var(--ink);color:var(--paper)}
html{caret-color:var(--ink);scrollbar-color:var(--hair-2) var(--paper)}
:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

.skip{position:absolute;top:-100px;left:var(--gutter);z-index:200;background:var(--ink);color:var(--paper);
  font-family:var(--sans);font-weight:500;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;padding:.9em 1.2em}
.skip:focus{top:12px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* ---------- the paper ---------- */
/* fractal noise, multiply, tuned by eye against the board. A single 320px tile,
   rasterised once, so the filter costs nothing after first paint. */
.grain{position:fixed;inset:0;z-index:149;pointer-events:none;opacity:.09;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.78' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:320px}
@media(max-width:640px){.grain{background-size:200px;opacity:.08}}

/* the one light source — warm cream, radial, behind the hero only */
.light{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(70% 55% at 22% 18%,rgba(255,249,236,.75),rgba(255,249,236,0) 70%)}

/* ---------- typography · ink ---------- */
/* headline: bold grotesk, uppercase, tight — off the Evergreen reference */
h1,h2,.hl{font-family:var(--sans);font-weight:700;text-transform:uppercase;letter-spacing:.035em;line-height:1.04;text-wrap:balance;color:var(--ink)}
h1{font-size:clamp(1.9rem,3.6vw,3rem)}
h2{font-size:clamp(1.45rem,2.6vw,2.2rem)}
h3{font-family:var(--sans);font-weight:600;font-size:1.05rem;line-height:1.3;letter-spacing:.01em;color:var(--ink)}
p{color:var(--ink-2);max-width:60ch}
p+p{margin-top:1.2em}
strong{font-weight:600;color:var(--ink)}
em{font-style:italic}

/* the display voice: Fraunces, thin, very large, ink. Used for a line, never a paragraph. */
.display{font-family:var(--display);font-weight:300;font-optical-sizing:auto;font-variation-settings:"opsz" 144;
  font-size:clamp(2rem,5vw,4.6rem);line-height:1.08;letter-spacing:-.015em;color:var(--ink);text-wrap:balance;max-width:16em}
.display em{font-style:italic;font-weight:300}

/* caption block: small caps, justified, last line centred — the reference's signature move.
   All-caps lives here and in the corner labels, nowhere else. */
.cap{font-family:var(--sans);font-weight:500;font-size:.72rem;line-height:1.55;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink);text-align:justify;text-align-last:center;max-width:36ch;hyphens:none}
.cap a{border-bottom:1px solid var(--hair-2)}
.cap a:hover{border-color:var(--ink)}

/* label: the caption voice, one line, left */
.lbl{font-family:var(--sans);font-weight:500;font-size:.68rem;line-height:1;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3)}

/* meta: tiny data, tabular */
.meta{font-family:var(--sans);font-weight:400;font-size:.74rem;letter-spacing:.03em;color:var(--ink-3);font-variant-numeric:tabular-nums}

/* the typed voice, off the hero: mono, ink */
.mono{font-family:var(--mono);font-size:.92rem;letter-spacing:-.01em;color:var(--ink)}

/* ---------- typography · emboss ---------- */
/* Small and mid-size relief: fill = the ground, all relief from the shadow pair.
   Highlight upper-left, shadow lower-right. This order is fixed everywhere. */
.emboss{
  color:var(--ground);
  text-shadow:
    -1px -1px 1px var(--relief-light),
     1px  1px 2px var(--relief-dark);
}
/* section mark: the section's word, pressed. Decorative — the ink label beside it says the same thing. */
.mark{
  font-family:var(--display);font-weight:300;font-variation-settings:"opsz" 144;
  font-size:clamp(3.4rem,8vw,7.5rem);line-height:.95;letter-spacing:-.02em;
  color:var(--ground);
  text-shadow:
    -.022em -.022em .016em var(--relief-light),
     .028em  .028em .04em var(--relief-dark),
     .06em .08em .12em rgba(122,112,96,.14);
  display:block;user-select:none;white-space:nowrap;
}
.mark.em{font-style:italic}

/* line art pressed blind — the wiring diagrams and the hero cord */
.pressed-lines{filter:drop-shadow(-1px -1px 1px var(--relief-light)) drop-shadow(1px 1px 2px var(--relief-dark))}
.pressed-lines path,.pressed-lines circle,.pressed-lines ellipse{stroke:var(--ground);fill:none}
/* the light in the wire: v4.js clones every path of a [data-glow] group into two layers, a soft blurred
   one and a crisp core, and runs a short silver dash along each. The only motion outside the hero. */
.glow path{fill:none;stroke:#FFFFFF;stroke-linecap:round;stroke-dasharray:70 1000;stroke-dashoffset:1070;
  animation:wire-light var(--wire-dur,9s) linear infinite;animation-delay:var(--d,0s)}
.glow.soft path{stroke-width:7;opacity:.55;filter:blur(2.4px)}
.glow.core path{stroke-width:1.6;opacity:.95}
@keyframes wire-light{to{stroke-dashoffset:0}}
@media(prefers-reduced-motion:reduce){.glow{display:none}}

/* ---------- the wordmark ----------
   The approved lockup (2a): Giaza 'mother' over Hello Paris 'form'.
   Large: SVG filter #press (defined in the page) — genuine surface relief. Once per page.
   Small: the corner label, in ink. */
.lockup{display:inline-flex;flex-direction:column;align-items:flex-start;line-height:1;color:var(--ground)}
.lockup .mother{font-family:var(--wordmark);font-size:var(--lockup,12rem);letter-spacing:-.107em;line-height:1.05}
.lockup .form{font-family:var(--wordmark-sans);font-size:calc(var(--lockup,12rem) * .75);letter-spacing:-.091em;line-height:.8;margin-top:-.34em;margin-left:.02em}
.lockup.press{filter:url(#press)}
@supports not (filter:url(#press)){
  .lockup.press{filter:none;text-shadow:-.012em -.012em .01em var(--relief-light),.014em .014em .03em var(--relief-dark)}
}

/* ---------- corner labels — the nav and metadata system ---------- */
/* white, in difference: ink on the paper, paper when they cross a headline. Print's corner labels, without the collision. */
.corner{position:fixed;z-index:60;font-family:var(--sans);font-weight:500;font-size:.66rem;line-height:1;letter-spacing:.2em;text-transform:uppercase;color:#fff;mix-blend-mode:difference}
.corner.tl{top:22px;left:var(--gutter)}
.corner.tr{top:22px;right:var(--gutter);color:rgba(255,255,255,.6)}
.corner.bl{bottom:22px;left:var(--gutter)}
.corner.br{bottom:22px;right:var(--gutter);color:rgba(255,255,255,.6);text-align:right}
.corner a{display:inline-block;padding:10px 0;margin:-10px 0;border-bottom:1px solid transparent}
.corner a:hover,.corner a[aria-current]{border-color:#fff}
.corner.tl a{font-weight:600;letter-spacing:.22em}
.corner ul{list-style:none;display:flex;gap:clamp(14px,2.2vw,30px)}
@media(max-width:640px){
  :root{--corner:76px}
  .corner.tr{display:none}
  .corner.br{display:none}
  .corner.bl{left:0;right:0;bottom:0;padding:16px var(--gutter) 18px;background:var(--paper);border-top:1px solid var(--hair);color:var(--ink);mix-blend-mode:normal}
  .corner.bl a:hover,.corner.bl a[aria-current]{border-color:var(--ink)}
  .corner.tl{mix-blend-mode:normal;color:var(--ink)}
  .corner.bl ul{justify-content:space-between;gap:8px}
  .corner{font-size:.62rem;letter-spacing:.14em}
}

/* ---------- layout ---------- */
.wrap{width:min(1280px,calc(100% - var(--gutter) * 2));margin-inline:auto}
main{padding-bottom:var(--corner)}
.section{position:relative;padding-block:clamp(88px,12vw,168px)}
.section.deep{--ground:var(--paper-deep);background:var(--paper-deep)}
.section.tight{padding-block:clamp(56px,8vw,104px)}

/* headline top, void, caption bottom: the page opener */
.opener{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:space-between;
  padding:clamp(88px,14vh,140px) 0 calc(var(--corner) + 24px);overflow:hidden;isolation:isolate}
.opener>.wrap{position:relative;z-index:1}
.opener .void{flex:1 1 auto;min-height:6vh}
.opener .foot{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--s4);flex-wrap:wrap}

/* the caption block with the signature overlapping it */
.captioned{position:relative;padding-top:2.8em}
.captioned .signature{position:absolute;left:32%;bottom:calc(100% - 3.5em);width:clamp(165px,18vw,240px);pointer-events:none;color:var(--ink)}
.captioned .signature:empty{display:none}
.captioned .signature img,.captioned .signature svg{width:100%;height:auto;display:block;overflow:visible}

/* two columns, headline left, prose right */
.cols{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,120px);align-items:start}
.cols.even{grid-template-columns:1fr 1fr}
.cols.narrow{grid-template-columns:minmax(0,4fr) minmax(0,6fr)}
@media(max-width:860px){.cols,.cols.even,.cols.narrow{grid-template-columns:1fr;gap:var(--s4)}}

/* the mark + label pair that opens a section */
.section-mark{display:flex;flex-direction:column;gap:14px;margin-bottom:clamp(32px,5vw,64px)}
.section-mark .lbl{margin-left:.1em}

/* ---------- rules and lists — no cards, ever ---------- */
.rule{height:1px;border:0;width:100%;background:var(--hair)}
.ledger{display:flex;flex-direction:column}
.row{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:var(--s3);padding:clamp(22px,3vw,34px) 0;border-top:1px solid var(--hair);align-items:baseline}
.row:last-child{border-bottom:1px solid var(--hair)}
.row .nm{font-family:var(--sans);font-weight:600;font-size:1.05rem;letter-spacing:.01em;line-height:1.3;color:var(--ink)}
.row p{font-size:.98rem;max-width:56ch}
.row.link{transition:background-color .3s var(--ease)}
.row.link:hover .nm{text-decoration:underline;text-underline-offset:.2em;text-decoration-thickness:1px}
@media(max-width:700px){.row{grid-template-columns:1fr;gap:8px}}

/* two-up plain grid — heads and short paragraphs, hairlines between */
.pairs{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(32px,6vw,96px)}
.pairs>div{padding:var(--s3) 0 var(--s4);border-top:1px solid var(--hair)}
.pairs h3{margin-bottom:.5em}
.pairs p{font-size:.98rem}
@media(max-width:700px){.pairs{grid-template-columns:1fr}.pairs>div{padding:var(--s3) 0}}

/* ---------- links & the button ---------- */
.link{border-bottom:1px solid var(--hair-2);padding-bottom:2px;transition:border-color .25s var(--ease)}
.link:hover,.link:focus-visible{border-color:var(--ink)}
.btn{display:inline-block;font-family:var(--sans);font-weight:500;font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink);padding:1.1em 1.6em;border:1px solid var(--ink);transition:background-color .3s var(--ease),color .3s var(--ease)}
.btn:hover,.btn:focus-visible{background:var(--ink);color:var(--paper)}

/* ---------- media: plain frames, hairline, no shadow ---------- */
.frame{position:relative;border:1px solid var(--hair);background:var(--paper-deep);overflow:hidden}
.frame img,.frame video{width:100%;height:auto;display:block}
.frame+.frame{margin-top:18px}

/* ---------- forms ---------- */
.field{display:flex;flex-direction:column;gap:10px}
.field label,.form legend{font-family:var(--sans);font-weight:500;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink)}
.input{background:transparent;border:0;border-bottom:1px solid var(--hair-2);color:var(--ink);font-family:var(--sans);font-size:1rem;line-height:1.5;padding:.7em 0;width:100%;outline:none;border-radius:0;
  transition:border-color .3s var(--ease)}
.input::placeholder{color:var(--ink-3)}
.input:focus{border-color:var(--ink)}
.input[aria-invalid=true]{border-color:var(--ink);box-shadow:0 1px 0 var(--ink)}
textarea.input{min-height:7em;resize:vertical}
.err-msg{font-family:var(--sans);font-size:.8rem;color:var(--ink)}
.choice{display:inline-flex;align-items:center;gap:.7em;cursor:pointer;color:var(--ink-2);font-family:var(--sans);font-size:.95rem}
.choice input{position:absolute;opacity:0;width:1px;height:1px}
.choice .box{width:14px;height:14px;flex:none;border:1px solid var(--hair-2);background:transparent;transition:background .2s var(--ease),border-color .2s var(--ease)}
.choice input[type=radio]+.box{border-radius:50%}
.choice input:checked+.box{background:var(--ink);border-color:var(--ink)}
.choice input:focus-visible+.box{outline:2px solid var(--ink);outline-offset:3px}
.choice:hover .box{border-color:var(--ink)}
.form{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4) var(--s4)}
.form .full{grid-column:1/-1}
.form fieldset{border:0;padding:0;margin:0;min-width:0}
.form legend{margin-bottom:14px}
.form .choices{display:flex;flex-wrap:wrap;gap:12px 24px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form .actions{grid-column:1/-1;display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;margin-top:var(--s2)}
.sent{font-family:var(--sans);font-size:1.1rem;color:var(--ink);max-width:34em}
@media(max-width:700px){.form{grid-template-columns:1fr}}

/* ---------- footer: a caption, nothing more ---------- */
.footer{position:relative;padding:var(--s5) 0 calc(var(--corner) + 16px)}
.footer .rule{margin-bottom:var(--s3)}
.footer .line{display:flex;justify-content:space-between;gap:var(--s3);flex-wrap:wrap}
.footer .line a{border-bottom:1px solid transparent}
.footer .line a:hover{border-color:var(--ink-3)}

/* ============================================================
   THE HERO — the correction
   ============================================================ */
.hero{--ground:var(--paper);background:var(--ground)}
.hero .light{z-index:0}

/* the typed lines — monospace is a mechanical requirement: the x row must land on the cells beneath it */
.typed{
  position:relative;font-family:var(--mono);font-weight:400;
  font-size:var(--type-size,clamp(1.2rem,2.35vw,2.3rem));line-height:1.5;letter-spacing:0;
  color:var(--ink);white-space:nowrap;
}
.typed .ln{position:relative;display:block;height:1.5em;white-space:nowrap}
.typed .ln i{font-style:normal;visibility:hidden}                  /* every glyph pre-laid; revealed by visibility, never by inserting text */
.typed .ln .t,.typed .ln .x{position:absolute;left:0;top:0;white-space:pre}
/* the strike: one drawn line over the sentence, its own layer, never text-decoration. Drawn left to right, a little unsteady, like a pen. */
.typed .ln .x{height:1.5em;width:0;overflow:visible;pointer-events:none;transform:rotate(-.4deg);transform-origin:0 50%}
.typed .ln .x svg{display:block;width:100%;height:100%;overflow:visible}
.typed .ln .x path{fill:none;stroke:var(--ink);stroke-width:2.4px;vector-effect:non-scaling-stroke;stroke-linecap:round;
  stroke-dasharray:1000;stroke-dashoffset:1000}
.typed .ln .x.on path{stroke-dashoffset:0;transition:stroke-dashoffset var(--strike,1s) cubic-bezier(.35,0,.15,1)}
.typed .ln .t i.dead{color:var(--ink-ghost)}                        /* struck glyphs stay legible beneath, ~35% */
.typed .cur{position:absolute;left:0;top:0;width:1ch;height:1.25em;margin-top:.125em;background:var(--ink);
  transform:translate(calc(var(--col,0) * 1ch),calc(var(--row,0) * 1.5em));
  transition:transform .22s var(--ease),opacity .3s ease-out;will-change:transform}
.typed .cur.blink{animation:blink 1.06s steps(1,end) infinite}
.typed .cur.off{opacity:0}
@keyframes blink{50%{opacity:0}}
/* mobile: line 1 must never wrap, so it gets a shorter sentence under 640px and the size fits the longest line (see v4.js) */
.typed .ln1 .wide,.typed .ln1 .narrow{display:none}
.typed .ln1 .wide{display:block}
@media(max-width:640px){
  .typed{font-size:var(--type-size,clamp(1rem,4.6vw,1.4rem))}
  .typed .ln1 .wide{display:none}
  .typed .ln1 .narrow{display:block}
}

/* no JS, and reduced motion: the final state, immediately. No line 1, no cursor, wordmark at full relief. */
.typed .ln1,.typed .cur{display:none}
.typed .ln i{visibility:visible}
.js .typed .ln1,.js .typed .cur{display:block}
.js .typed .ln i{visibility:hidden}
.js .typed .cur{display:block}
.js .typed.done .ln i{visibility:visible}
@media(prefers-reduced-motion:reduce){
  .js .typed .ln1,.js .typed .cur{display:none!important}
  .js .typed .ln i{visibility:visible!important}
  .typed .cur{animation:none}
}

/* the wordmark embosses in below the lines — relief depth 0 → full, it rises, nothing fades */
.hero .lockup{--lockup:clamp(4.4rem,9.6vw,9.4rem);margin-left:-.02em;margin-top:clamp(36px,7vh,88px)}
.hero .foot{align-items:flex-end;justify-content:flex-end}
.hero .foot .captioned{max-width:36ch}
@media(max-width:860px){.hero .foot{flex-direction:column;align-items:flex-start;gap:var(--s4)}}

/* hero composition */
.hero .top{position:relative;z-index:1}
.hero .foot{position:relative;z-index:1}