/* ================================================================
   SASHA ZERO · sashazero.sh
   Riposte house style: industrial spec-sheet × jester mi-parti.
   Tokens from riposte-brand RL-BRAND-001.
   ================================================================ */

/* ---------- self-hosted webfont: JetBrains Mono (OFL 1.1) ---------- */
@font-face{
  font-family:"JetBrains Mono";font-style:normal;font-display:swap;font-weight:100 800;
  src:url("/fonts/jetbrains-mono-latin.b058178d.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"JetBrains Mono";font-style:normal;font-display:swap;font-weight:100 800;
  src:url("/fonts/jetbrains-mono-latin-ext.e36841ed.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root{
  --ink:#1d1a17;
  --ink-head:#2b2723;
  --bone:#f6f1e7;
  --bone-dim:#eae4d6;
  --pink:#f0477d;
  --orange:#fe9a0d;
  --teal:#12b795;
  --pink-tx:#b81e58;     /* AA text on bone */
  --orange-tx:#9c5d00;
  --teal-tx:#0c7a63;
  --rule:2px solid var(--ink);
  --mono:"JetBrains Mono","IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--mono);background:var(--bone);color:var(--ink);line-height:1.55;font-size:16px}
::selection{background:var(--pink);color:var(--ink)}
a{color:inherit}
img,svg{display:block;max-width:100%}

/* ---------- checker + harlequin strips ---------- */
.checker{height:26px;border-top:var(--rule);border-bottom:var(--rule);
  background:repeating-conic-gradient(var(--ink) 0% 25%,var(--bone) 0% 50%) 0 0/22px 22px}
.checker.teal{background:repeating-conic-gradient(var(--teal) 0% 25%,var(--bone) 0% 50%) 0 0/22px 22px}
.harlequin{height:38px;border-top:var(--rule);border-bottom:var(--rule);
  background:repeating-conic-gradient(from 45deg,var(--pink) 0% 25%,var(--teal) 0% 50%) 0 0/34px 34px}

/* ---------- skip link ---------- */
.skiplink{position:fixed;left:0;top:-100px;z-index:200;background:var(--ink);color:var(--bone);
  border:var(--rule);padding:10px 18px;font-size:12px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;text-decoration:none}
.skiplink:focus{top:0}
main:focus{outline:none}

/* ---------- top bar ---------- */
header.topbar{position:sticky;top:0;z-index:50;display:flex;align-items:stretch;
  justify-content:space-between;background:var(--bone);border-bottom:var(--rule);
  font-size:12px;letter-spacing:.08em}
.topbar .brand{display:flex;align-items:stretch;font-weight:700;text-transform:uppercase;
  text-decoration:none;border-right:var(--rule);white-space:nowrap;color:var(--ink)}
.topbar .brand .mark{display:flex;align-items:center;padding:6px 15px;font-size:20px;letter-spacing:.02em}
.topbar .brand .mark .z{color:var(--pink-tx)}
.topbar .brand .lock{display:flex;flex-direction:column;justify-content:center;gap:3px;
  padding:6px 15px;border-left:1px dashed var(--ink)}
.topbar .brand .lab{font-size:12px;letter-spacing:.13em;line-height:1}
.topbar .brand .doc{font-size:9.5px;letter-spacing:.15em;line-height:1;font-weight:400;color:var(--pink-tx)}
.topbar .toprule{flex:1 1 auto;position:relative;min-width:26px}
.topbar .toprule::before{content:"";position:absolute;left:18px;right:18px;top:50%;
  border-top:2px dashed var(--ink);opacity:.22}
.topbar nav{display:flex;align-items:stretch}
.navlink{display:flex;align-items:center;padding:0 15px;border-left:var(--rule);text-decoration:none;
  text-transform:uppercase;font-size:12px;letter-spacing:.08em;white-space:nowrap;
  transition:background .12s,color .12s}
.navlink:nth-of-type(3n+1):hover{background:var(--pink);color:var(--ink)}
.navlink:nth-of-type(3n+2):hover{background:var(--orange);color:var(--ink)}
.navlink:nth-of-type(3n):hover{background:var(--teal);color:var(--ink)}
@media(max-width:900px){
  header.topbar{flex-wrap:wrap;position:static}
  .topbar .toprule{display:none}
  .topbar .brand{width:100%;border-right:none;border-bottom:var(--rule)}
  .topbar nav{width:100%;flex-wrap:wrap}
  .navlink{flex:1 1 33%;justify-content:center;padding:12px 10px;border-left:none;
    border-right:1px dashed var(--ink);border-bottom:1px dashed var(--ink)}
}

/* ---------- hero : the one white field ---------- */
.hero{position:relative;background:#fff;border-bottom:var(--rule);overflow:hidden}
.hero .inner{width:min(1060px,92vw);margin:0 auto;padding:64px 0 72px;
  display:grid;grid-template-columns:auto 1fr;gap:48px;align-items:center;position:relative;z-index:2}
.hero .photo{position:relative;width:min(260px,60vw)}
.hero .photo img{width:100%;aspect-ratio:1;object-fit:cover;border:var(--rule);
  background:var(--bone-dim)}
.hero .labname{font-size:12px;letter-spacing:.5em;text-transform:uppercase;opacity:.75}
.hero h1{margin-top:12px;font-size:clamp(34px,6vw,72px);font-weight:800;text-transform:uppercase;
  letter-spacing:.02em;line-height:.95}
.hero h1 .z{color:var(--pink-tx)}
.hero .sub{margin-top:22px;max-width:56ch;font-size:clamp(15px,1.6vw,18px)}
.hero .sub b{font-weight:700}
.hero .ctas{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px}
.cta{display:inline-block;padding:13px 26px;border:var(--rule);color:var(--ink);text-decoration:none;
  text-transform:uppercase;font-weight:700;letter-spacing:.12em;font-size:12px;background:transparent;transition:all .15s}
.cta:hover{background:var(--ink);color:var(--bone)}
.hero .corner{position:absolute;font-size:11px;letter-spacing:.14em;opacity:.75;text-transform:uppercase;z-index:3}
.hero .corner.tl{top:12px;left:14px}
.hero .corner.tr{top:12px;right:14px;text-align:right}
.hero .corner.bl{bottom:10px;left:14px}
.hero .corner.br{bottom:10px;right:14px;text-align:right}
@media(max-width:760px){
  .hero .inner{grid-template-columns:1fr;gap:36px;padding:56px 0 64px}
  .hero .corner{display:none}
}

/* ---------- marquee ---------- */
.marquee{overflow:hidden;white-space:nowrap;background:var(--ink);color:var(--bone);
  border-bottom:var(--rule);font-size:13px;text-transform:uppercase;letter-spacing:.18em;padding:9px 0}
.marquee .track{display:inline-block;animation:scroll 18s linear infinite}
.marquee .track span{margin:0 1.4em}
.marquee .c1{color:var(--pink)}.marquee .c2{color:var(--orange)}.marquee .c3{color:var(--teal)}
/* 6 identical reps; advance by one (1/6) so the wrap is seamless */
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-16.6667%)}}

/* ---------- sections : spec sheet ---------- */
section.sec{width:min(1060px,92vw);margin:0 auto;padding:72px 0}
.sechead{display:flex;align-items:center;gap:16px;flex-wrap:wrap;border-bottom:var(--rule);
  padding-bottom:14px;margin-bottom:34px}
.sechead .no{font-size:12px;font-weight:700;letter-spacing:.1em;background:var(--ink);color:var(--bone);padding:4px 10px}
.sechead.pinkno .no{background:var(--pink);color:var(--ink)}
.sechead.orangeno .no{background:var(--orange);color:var(--ink)}
.sechead.tealno .no{background:var(--teal);color:var(--ink)}
.sechead h2{font-size:clamp(24px,3.2vw,40px);text-transform:uppercase;letter-spacing:.03em}
.sechead .tag{margin-left:auto;font-size:11px;letter-spacing:.14em;opacity:.72;text-transform:uppercase}
p.lead{font-size:clamp(16px,2vw,19px);max-width:60ch;margin-bottom:34px}
p+p{margin-top:1em}
.dim{opacity:.65}
.hi{color:var(--pink-tx);font-weight:700}

/* profile spec table */
.cols{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:start}
@media(max-width:760px){.cols{grid-template-columns:1fr}}
.spec{border:var(--rule)}
.spec .spec-h{padding:8px 12px;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  border-bottom:var(--rule);background:var(--bone-dim);display:flex;justify-content:space-between;gap:8px}
.spec .spec-b{padding:16px 14px;font-size:14px}
.spec ul{list-style:none}
.spec li{padding:7px 0;padding-left:1.4em;border-bottom:1px dashed var(--ink)}
.spec li:last-child{border-bottom:none}
.spec li::before{content:"▸";display:inline-block;width:1.4em;margin-left:-1.4em;color:var(--pink-tx);font-weight:700}
.spec.orangehead .spec-h{background:var(--orange)}
.spec.tealhead .spec-h{background:var(--teal)}
.spec.pinkhead .spec-h{background:var(--pink)}
.kv{display:grid;grid-template-columns:auto 1fr;gap:0 18px;font-size:14px}
.kv dt{padding:7px 0;font-size:11px;letter-spacing:.14em;text-transform:uppercase;opacity:.7;border-bottom:1px dashed var(--ink)}
.kv dd{padding:7px 0;border-bottom:1px dashed var(--ink)}
.kv dt:last-of-type,.kv dd:last-of-type{border-bottom:none}

/* ---------- work grid : one card per project ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:22px}
.card{border:var(--rule);background:var(--bone);display:flex;flex-direction:column;position:relative;
  text-decoration:none;color:inherit;transition:transform .15s,box-shadow .15s}
a.card:hover,a.card:focus-visible{background:var(--bone-dim);outline:none}
.card .ch{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px 12px;
  border-bottom:var(--rule);background:var(--bone-dim);font-size:10.5px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase}
.card .ch .kind{font-weight:400;opacity:.7;letter-spacing:.1em}
.card h3{padding:16px 14px 0;font-size:20px;text-transform:uppercase;letter-spacing:.02em;line-height:1.1}
.card p{padding:10px 14px 16px;font-size:13.5px;flex:1}
.card .cf{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px 12px;
  border-top:1px dashed var(--ink);font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.card .cf .ar{font-weight:700}
.card.p1 .ch{box-shadow:inset 0 4px 0 var(--pink)}
.card.p2 .ch{box-shadow:inset 0 4px 0 var(--orange)}
.card.p3 .ch{box-shadow:inset 0 4px 0 var(--teal)}
.card .status{font-size:9.5px;letter-spacing:.12em;padding:2px 6px;border:1.5px solid var(--ink);font-weight:700}
.stamp{display:inline-block;margin-top:18px;padding:6px 12px;border:2px solid var(--orange);color:var(--orange-tx);
  font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;transform:rotate(-2deg)}

/* figures: one artefact per card, 16:9, sits under the header rule */
.card .fig{margin:0;border-bottom:var(--rule);background:var(--bone-dim);aspect-ratio:16/9;overflow:hidden}
.card .fig img,.card .fig video{width:100%;height:100%;object-fit:cover;display:block}
.card .masthead{display:block;width:100%;height:48px;border-bottom:1px dashed var(--ink);color:var(--ink)}
.card code{font-size:12.5px;background:var(--bone-dim);padding:0 4px}

/* ---------- flow (how I work) ---------- */
.flow{display:flex;align-items:stretch;margin-top:10px;flex-wrap:wrap}
.flow .step{flex:1 1 150px;border:var(--rule);padding:16px 12px;text-align:center;font-size:12px;
  letter-spacing:.06em;text-transform:uppercase;background:var(--bone);position:relative;margin-right:26px}
.flow .step:last-child{margin-right:0}
.flow .step::after{content:"→";position:absolute;right:-24px;top:50%;transform:translateY(-50%);
  font-size:20px;font-weight:700;color:var(--pink-tx)}
.flow .step:last-child::after{content:none}
.flow .step:nth-child(1){border-top:6px solid var(--pink)}
.flow .step:nth-child(2){border-top:6px solid var(--orange)}
.flow .step:nth-child(3){border-top:6px solid var(--teal)}
.flow .step:nth-child(4){border-top:6px solid var(--ink)}
.flow .step b{display:block;font-size:22px;margin-bottom:6px}
@media(max-width:640px){
  .flow{gap:22px}
  .flow .step{flex:1 1 100%;margin-right:0}
  .flow .step::after{content:"↓";right:50%;top:auto;bottom:-22px;transform:translateX(50%)}
}

/* ---------- inverted section (ink) ---------- */
.dark{background:var(--ink);color:var(--bone)}
.dark .sechead{border-bottom:2px solid var(--bone)}
.dark .sechead .no{background:var(--teal);color:var(--ink)}
.dark .card{background:var(--ink);border-color:var(--bone)}
.dark .card .ch{background:var(--ink-head);border-bottom-color:var(--bone)}
.dark .card .cf{border-top-color:var(--bone)}
.dark a.card:hover{background:var(--ink-head)}
.dark .hi{color:var(--teal)}
.dark ::selection{background:var(--bone);color:var(--ink)}
.dark .cta{color:var(--bone);border-color:var(--bone)}
.dark .cta:hover{background:var(--bone);color:var(--ink)}

/* ---------- pink section ---------- */
.esh{background:var(--pink);color:var(--ink);border-top:var(--rule);border-bottom:var(--rule)}
.esh .sechead{border-bottom:2px solid var(--ink)}
.esh .sechead .tag{opacity:1}
.esh .card{background:var(--bone)}
.esh ::selection{background:var(--ink);color:var(--bone)}

/* ---------- contact ---------- */
.contact .lead{max-width:none}
.bigmail{display:block;margin-top:26px;padding:26px 18px;border:var(--rule);text-align:center;
  text-decoration:none;font-size:clamp(15px,2.6vw,24px);font-weight:700;letter-spacing:.04em;
  transition:all .15s;background:var(--bone)}
.bigmail:hover{background:var(--ink);color:var(--bone)}
.links{display:flex;gap:14px;flex-wrap:wrap;margin-top:22px}

/* ---------- footer ---------- */
footer{display:grid;grid-template-columns:1fr 1fr;border-top:var(--rule);font-size:11px;
  letter-spacing:.1em;text-transform:uppercase}
footer .l,footer .r{padding:16px}
footer .r{text-align:right}
footer .b{grid-column:1/-1;border-top:var(--rule);background:var(--bone-dim);text-align:center;
  padding:12px 16px;letter-spacing:.14em}
footer .b a{color:var(--ink);text-decoration:none;font-weight:700;display:inline-block;padding:2px 8px;
  transition:background .12s,color .12s}
footer .b a:hover{background:var(--ink);color:var(--bone)}
@media(max-width:560px){footer{grid-template-columns:1fr}footer .r{text-align:left}}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .marquee .track{animation:none}
  .card,.cta,.bigmail{transition:none}
}