/* Hallmark · macrostructure: Manifesto · brutalist · stark · green signal */
@import url("tokens.css");

*{box-sizing:border-box;margin:0;padding:0}
html,body{overflow-x:clip}
html{scroll-behavior:smooth}
body{
  background:var(--color-paper);color:var(--color-ink);
  font-family:var(--font-body);font-size:var(--text-base);line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--color-accent);text-decoration:none}
a:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
:focus-visible{outline:3px solid var(--color-focus);outline-offset:2px}
::selection{background:var(--color-signal);color:var(--color-ink)}
h1,h2,h3{font-family:var(--font-display);font-weight:800;line-height:.98;letter-spacing:-0.02em;text-transform:uppercase;overflow-wrap:anywhere;min-width:0}
.wrap{width:min(1180px,92vw);margin-inline:auto}
.mono{font-family:var(--font-mono)}

.btn{display:inline-flex;align-items:center;gap:.5ch;font-family:var(--font-mono);font-weight:500;font-size:var(--text-sm);
  text-transform:uppercase;letter-spacing:.04em;padding:.7rem 1.2rem;border:var(--border);background:var(--color-paper);color:var(--color-ink);cursor:pointer;
  box-shadow:var(--shadow);transition:transform var(--dur-micro) var(--ease-out),box-shadow var(--dur-micro) var(--ease-out),background var(--dur-micro) var(--ease-out)}
.btn:hover{transform:translate(-2px,-2px);box-shadow:10px 10px 0 var(--color-ink);text-decoration:none}
.btn:active{transform:translate(4px,4px);box-shadow:2px 2px 0 var(--color-ink)}
.btn.solid{background:var(--color-signal);box-shadow:var(--shadow)}
.btn.solid:hover{box-shadow:10px 10px 0 var(--color-ink)}

/* ===== N7 · brutal slab nav ===== */
.slab{border-bottom:var(--border);background:var(--color-paper);position:sticky;top:0;z-index:30}
.slab .row{display:flex;align-items:stretch;justify-content:space-between}
.slab .brand{font-family:var(--font-display);font-weight:800;text-transform:uppercase;font-size:var(--text-md);letter-spacing:-0.02em;
  display:flex;align-items:center;gap:.5ch;padding:var(--sp-4) 0}
.slab .brand .sq{width:16px;height:16px;background:var(--color-signal);border:2px solid var(--color-ink)}
.slab nav{display:flex}
.slab nav a{display:flex;align-items:center;padding:var(--sp-4) var(--sp-5);border-left:var(--border);font-family:var(--font-mono);font-size:var(--text-sm);text-transform:uppercase;color:var(--color-ink)}
.slab nav a:hover{background:var(--color-signal);text-decoration:none}
@media(max-width:640px){.slab nav a.hideable{display:none}}

/* ===== manifesto hero ===== */
.hero{padding-block:var(--sp-16) var(--sp-12);border-bottom:var(--border)}
.hero .tagline{font-family:var(--font-mono);font-size:var(--text-sm);text-transform:uppercase;letter-spacing:.14em;color:var(--color-ink-soft);display:inline-block;border:2px solid var(--color-ink);padding:.3rem .7rem;background:var(--color-signal)}
.hero h1{font-size:var(--text-display);margin:var(--sp-6) 0 0;max-width:16ch}
.hero h1 mark{background:var(--color-signal);color:var(--color-ink);padding:0 .1em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.hero .sub{font-family:var(--font-body);font-size:var(--text-md);max-width:56ch;margin-top:var(--sp-6);color:var(--color-ink-soft);text-transform:none}
.hero .actions{display:flex;flex-wrap:wrap;gap:var(--sp-4);margin-top:var(--sp-8)}

/* ===== principles (numbered manifesto) ===== */
.principles{border-bottom:var(--border)}
.principles .lead{padding:var(--sp-8) 0 var(--sp-4);font-family:var(--font-mono);font-size:var(--text-sm);text-transform:uppercase;letter-spacing:.12em;color:var(--color-ink-soft)}
.pr{display:grid;grid-template-columns:auto 1fr;gap:var(--sp-6);align-items:start;padding-block:var(--sp-8);border-top:var(--border)}
.pr .n{font-family:var(--font-display);font-weight:800;font-size:clamp(2.5rem,7vw,4.5rem);line-height:.85;color:var(--color-paper);-webkit-text-stroke:2px var(--color-ink);text-stroke:2px var(--color-ink)}
.pr .txt h2{font-size:var(--text-xl)}
.pr .txt p{margin-top:var(--sp-3);max-width:60ch;color:var(--color-ink-soft);text-transform:none;font-size:var(--text-md)}
@media(max-width:600px){.pr{grid-template-columns:1fr;gap:var(--sp-3)}}

/* ===== works ===== */
.works{padding-block:var(--sp-16);border-bottom:var(--border)}
.works .head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:var(--sp-4);margin-bottom:var(--sp-8)}
.works .head h2{font-size:var(--text-2xl)}
.works .head .note{font-family:var(--font-mono);font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.1em;color:var(--color-ink-soft)}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;border:var(--border)}
@media(max-width:720px){.grid{grid-template-columns:1fr}}
.w{padding:var(--sp-6);border-right:var(--border);border-bottom:var(--border);display:flex;flex-direction:column;gap:var(--sp-3);background:var(--color-paper);
  transition:background var(--dur-micro) var(--ease-out)}
.grid .w:nth-child(2n){border-right:none}
.w:hover{background:var(--color-paper-2)}
.w .top{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-3)}
.w h3{font-size:var(--text-lg)}
.w .state{font-family:var(--font-mono);font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.06em;border:2px solid var(--color-ink);padding:.15rem .5rem;white-space:nowrap}
.w .state.live{background:var(--color-signal)}
.w p{color:var(--color-ink-soft);text-transform:none;flex:1}
.w .links{display:flex;gap:var(--sp-4);font-family:var(--font-mono);font-size:var(--text-xs);text-transform:uppercase}
/* keep the bottom edge clean when rows are uneven */
@media(min-width:721px){.grid .w:nth-last-child(-n+2):nth-child(odd):last-child{border-right:none}}

/* ===== Ft5 · statement footer ===== */
.statement{padding-block:var(--sp-20)}
.statement h2{font-size:clamp(2.4rem,7vw,5rem);max-width:18ch;line-height:.98}
.statement h2 a{color:var(--color-ink);text-decoration:none;border-bottom:6px solid var(--color-signal)}
.statement h2 a:hover{background:var(--color-signal)}
.statement .row{display:flex;flex-wrap:wrap;gap:var(--sp-4) var(--sp-8);margin-top:var(--sp-10);font-family:var(--font-mono);font-size:var(--text-sm);text-transform:uppercase;align-items:center}
.statement .row .sp{flex:1}
.statement .row a{color:var(--color-ink)}
.foot-base{border-top:var(--border);padding-block:var(--sp-4);font-family:var(--font-mono);font-size:var(--text-xs);text-transform:uppercase;color:var(--color-ink-soft);display:flex;flex-wrap:wrap;gap:var(--sp-4);justify-content:space-between}

/* reveal */
.reveal{opacity:0;transform:translateY(12px);transition:opacity var(--dur-long) var(--ease-out),transform var(--dur-long) var(--ease-out)}
.reveal.in{opacity:1;transform:none}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  *{transition-duration:1ms!important;animation-duration:1ms!important}
}