/* ============================================================
   Guillaume Helleu — micro-graphics design system
   Pure monospace hairline. Black & white + sparing red.
   Typeface: "MinimalMono" (caps display) + IBM Plex Mono (workhorse)
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@300;400;500&display=swap');
@font-face{font-family:"Minimal";src:url("../fonts/Minimal-Light.otf") format("opentype");font-weight:300;font-display:swap}
@font-face{font-family:"Minimal";src:url("../fonts/Minimal-Book.otf") format("opentype");font-weight:400;font-display:swap}
@font-face{font-family:"Minimal";src:url("../fonts/Minimal-Black.otf") format("opentype");font-weight:900;font-display:swap}
@font-face{font-family:"Minimal";src:url("../fonts/Minimal-LightItalic.otf") format("opentype");font-weight:300;font-style:italic;font-display:swap}
@font-face{font-family:"MinimalMono";src:url("../fonts/Minimal-MonoLight.otf") format("opentype");font-weight:400;font-display:swap}

:root{
  --bg:#F1F0EB; --panel:#EAE9E2; --ink:#100F0C; --dim:#8B887E; --dimmer:#B7B4AA;
  --line:#CFCCC2; --hair:#DDDAD0; --accent:#E23016;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
  --disp:"MinimalMono","IBM Plex Mono",monospace;
}
html[data-theme="night"]{
  --bg:#0A0A08; --panel:#151410; --ink:#EAE8DF; --dim:#6F6C62; --dimmer:#403E37;
  --line:#242320; --hair:#1A1916; --accent:#FF3C22;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--mono);font-weight:400;font-size:13px;line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:geometricPrecision;overflow-x:hidden;
  transition:background-color .4s ease,color .4s ease}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible{outline:1px solid var(--accent);outline-offset:3px}
::selection{background:var(--accent);color:#fff}
.mono{font-family:var(--mono)}
.up{text-transform:uppercase;letter-spacing:.18em}
.ac{color:var(--accent)}
.dim{color:var(--dim)}
@keyframes rise{to{opacity:1;transform:none}}
@keyframes blink{50%{opacity:0}}
.rise{opacity:0;transform:translateY(9px);animation:rise .8s cubic-bezier(.2,.7,.2,1) forwards}
.d1{animation-delay:.05s}.d2{animation-delay:.14s}.d3{animation-delay:.24s}.d4{animation-delay:.34s}
@media(prefers-reduced-motion:reduce){*{animation:none!important}.rise{opacity:1;transform:none}}

/* ---------- top bar ---------- */
.top{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;justify-content:space-between;align-items:center;
  gap:16px;padding:11px 20px;background:var(--bg);border-bottom:1px solid var(--line);
  font-size:10px;letter-spacing:.16em;text-transform:uppercase}
.top .ident{color:var(--dim);white-space:nowrap}
.top .ident b{color:var(--ink);font-weight:400}
.top .nav{display:flex;align-items:center;gap:20px}
.top .nav a{color:var(--dim);transition:color .18s;position:relative}
.top .nav a:hover{color:var(--ink)}
.top .nav a[data-on]{color:var(--ink)}
.top .nav a[data-on]::before{content:"";position:absolute;left:-9px;top:50%;transform:translateY(-50%);width:4px;height:4px;background:var(--accent)}
.top .tog{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);
  background:transparent;border:1px solid var(--line);padding:5px 9px 4px;cursor:pointer;display:flex;align-items:center;gap:7px;transition:.18s}
.top .tog:hover{color:var(--ink);border-color:var(--dim)}
.top .tog .sw{width:9px;height:9px;border-radius:50%;border:1px solid var(--ink);background:linear-gradient(90deg,var(--ink) 50%,transparent 50%)}
@media(max-width:640px){.top .nav a:nth-child(n+2):not([data-on]){display:none}.top .ident{font-size:9px}}

/* ---------- layout ---------- */
main{padding:0 clamp(20px,4vw,60px)}
.wrap{max-width:1080px;margin:0 auto}
.band{max-width:1280px;margin:0 auto;border-top:1px solid var(--line);padding:clamp(40px,5vw,64px) 0}
.band-head{display:flex;justify-content:space-between;align-items:baseline;font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--dim);margin-bottom:26px}
.band-head .ix{color:var(--accent)}

/* ============================================================
   HERO — centred floating composition (ref: OKOK / product label)
   ============================================================ */
.hero3{min-height:94vh;display:flex;align-items:center;justify-content:center;padding:100px 22px 56px;text-align:center}
.cluster{width:100%;max-width:540px;display:flex;flex-direction:column;align-items:center;gap:clamp(20px,3.4vw,36px)}
.marks5{display:flex;justify-content:center;gap:clamp(20px,2.6vw,30px);color:var(--ink)}
.marks5 svg{width:23px;height:23px;display:block;stroke:currentColor;fill:none;stroke-width:1;vector-effect:non-scaling-stroke}
.namemark{font-size:14px;letter-spacing:.5em;padding-left:.5em;text-transform:uppercase;color:var(--ink)}
.identblock{display:flex;flex-direction:column;gap:9px;width:100%}
.line-just{display:flex;justify-content:space-between;align-items:baseline;width:100%;
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.line-just .mid{color:var(--ink);letter-spacing:.14em}
.line-sub{font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);line-height:1.7}
.tagline3{font-family:var(--mono);font-size:clamp(19px,2.9vw,35px);font-weight:300;line-height:1.42;letter-spacing:.005em;color:var(--ink)}
.tagline3 span{display:block;white-space:nowrap}
.tagline3 a{font-weight:500;color:var(--ink);border-bottom:1.5px solid var(--accent);padding-bottom:1px;transition:.16s}
.tagline3 a:hover{background:var(--accent);color:var(--bg)}
.colophon{display:flex;flex-direction:column;gap:7px;font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);line-height:1.7}
.colophon .row{display:flex;justify-content:center;gap:7px 18px;flex-wrap:wrap;align-items:center}
.colophon b{color:var(--ink);font-weight:500}
.colophon .cap{color:var(--accent)}
.colophon .gl{width:9px;height:9px;color:var(--dim);vertical-align:middle}
.scrollcue3{margin-top:2px;font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:var(--dimmer);display:flex;gap:7px;align-items:center}
.scrollcue3 .ar{animation:bob 1.7s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(3px)}}
@media(max-width:560px){.line-just{flex-direction:column;gap:6px}}

/* ---------- hero (centered spec-sheet) ---------- */
.hero{min-height:92vh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;gap:22px;padding:96px 0 40px;position:relative}
.hero .mark{width:44px;height:44px;color:var(--ink)}
.hero .mark svg{width:100%;height:100%;display:block}
.hero .eyebrow{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--dim);max-width:46ch;line-height:2}
.hero .eyebrow b{color:var(--ink);font-weight:400}
.tagline{font-family:var(--disp);font-size:clamp(22px,3.5vw,38px);font-weight:400;line-height:1.28;letter-spacing:.02em;color:var(--ink)}
.tagline .l2,.tagline .l3,.tagline .l4{display:block}
.tagline a{border-bottom:1px solid var(--accent);transition:.18s;padding-bottom:1px}
.tagline a:hover{background:var(--accent);color:var(--bg)}
.specrow{display:flex;gap:22px;flex-wrap:wrap;justify-content:center;font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--dim);border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:9px 0;margin-top:4px;width:min(640px,90%)}
.specrow span b{color:var(--ink);font-weight:400}
.scrollcue{margin-top:6px;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);display:flex;align-items:center;gap:7px}
.scrollcue .ar{animation:bob 1.6s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(3px)}}

/* ---------- notice / bio ---------- */
.notice{max-width:660px;margin:0 auto}
.notice .tags{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-bottom:26px}
.notice .tags .t{font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);
  border:1px solid var(--line);padding:5px 9px}
.notice .tags .t b{color:var(--ink);font-weight:400}
.bio p{font-size:13px;line-height:1.85;margin-bottom:15px;color:var(--ink)}
.bio a{border-bottom:1px solid var(--accent);transition:.18s}
.bio a:hover{background:var(--accent);color:var(--bg)}
.bio em{font-style:italic;color:var(--dim)}

/* ---------- ledger ---------- */
.filters{display:flex;flex-direction:column;gap:9px;margin-bottom:18px}
.filterline{display:flex;flex-wrap:wrap;gap:5px;align-items:center}
.filterline .lab{font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--dimmer);margin-right:6px;width:52px}
.chip{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;padding:5px 10px 4px;
  border:1px solid var(--line);background:transparent;color:var(--dim);cursor:pointer;transition:.15s;white-space:nowrap}
.chip:hover{color:var(--ink);border-color:var(--dim)}
.chip[data-on]{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.chip .n{opacity:.5;margin-left:4px}

.ledger{border-top:1px solid var(--ink)}
.lgrid{grid-template-columns:46px 108px 1fr 232px 96px 32px}
.lhead{display:grid;gap:16px;padding:9px 12px;font-size:9px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--dimmer);border-bottom:1px solid var(--line)}
.lhead .c-date,.lrow2 .c-date{text-align:right}
.lhead .c-chev{text-align:right}
.lentry{border-bottom:1px solid var(--hair)}
.lrow2{display:grid;gap:16px;padding:10px 12px;align-items:baseline;width:100%;text-align:left;
  background:transparent;border:none;cursor:pointer;font-family:var(--mono);color:var(--ink);transition:background .12s}
.lrow2:hover{background:var(--panel)}
.lrow2 .c-ref{font-size:10px;color:var(--accent);white-space:nowrap}
.lrow2 .c-type{font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);white-space:nowrap}
.lrow2 .c-title{font-size:12.5px;line-height:1.4}
.lrow2 .c-struct{font-size:10.5px;color:var(--dim);letter-spacing:.01em;line-height:1.4}
.lrow2 .c-date{font-size:10px;color:var(--dim);white-space:nowrap}
.lrow2 .c-chev{text-align:right;color:var(--dim);font-size:13px;line-height:1}
.lentry.open .lrow2{background:var(--panel)}
.lentry.open .c-chev{color:var(--accent)}
.lrow2.static{cursor:default}
.lrow2.static:hover{background:transparent}
.c-chev a{color:var(--ink);border-bottom:1px solid var(--accent);padding-bottom:1px}
.c-chev a:hover{background:var(--accent);color:var(--bg)}
.ldesc{display:grid;grid-template-columns:46px 1fr;gap:16px;padding:0 12px 18px;animation:fadein .25s ease}
@keyframes fadein{from{opacity:0}to{opacity:1}}
.ldesc .d-body{grid-column:2;max-width:82ch;font-size:11.5px;line-height:1.75;color:var(--ink);opacity:.82}
.ldesc .d-meta{grid-column:2;margin-top:10px;font-size:9px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--dimmer);display:flex;gap:8px 18px;flex-wrap:wrap;align-items:center}
.ldesc .d-meta b{color:var(--dim);font-weight:400}
.ldesc .d-meta a{color:var(--ink);border-bottom:1px solid var(--accent);padding-bottom:1px}
.ldesc .d-meta a:hover{background:var(--accent);color:var(--bg)}
.ledger-foot{display:flex;justify-content:space-between;align-items:baseline;padding:12px 12px 0;
  font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.ledger-foot .reset{background:transparent;border:none;color:var(--dim);cursor:pointer;font-family:var(--mono);
  font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;border-bottom:1px solid var(--line)}
.ledger-foot .reset:hover{color:var(--ink)}
@media(max-width:1000px){
  .lgrid{grid-template-columns:44px 104px 1fr 96px 30px}
  .c-struct{display:none}
}
@media(max-width:680px){
  .lgrid{grid-template-columns:38px 1fr 72px 28px}
  .c-type{display:none}
  .ldesc{grid-template-columns:1fr;padding:0 12px 16px}
  .ldesc .d-body,.ldesc .d-meta{grid-column:1}
}

/* ---------- section (index) pages ---------- */
.pagehead{max-width:1280px;margin:0 auto;padding:120px 0 6px}
.pagehead .crumb{display:flex;justify-content:space-between;font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--dim);border-top:1px solid var(--line);padding-top:12px}
.pagehead .crumb .r{color:var(--accent)}
.pagehead h1{font-family:var(--disp);font-weight:300;font-size:clamp(56px,13vw,150px);line-height:.86;
  letter-spacing:.01em;margin:22px 0 14px;text-transform:uppercase}
.pagehead .lead{font-size:12px;letter-spacing:.02em;color:var(--dim);max-width:60ch;line-height:1.8}
.cards{max-width:1280px;margin:0 auto;padding:30px 0 40px;border:none}
.cardset{border:1px solid var(--line)}
.card{display:grid;grid-template-columns:88px 1fr 168px;gap:26px;padding:28px 24px;border-bottom:1px solid var(--line);transition:background .15s;position:relative}
.card:last-child{border-bottom:none}
.card:hover{background:var(--panel)}
.card .cref{font-size:11px;color:var(--accent)}
.card .cbody{max-width:72ch}
.card .cbody h3{font-family:var(--mono);font-weight:500;font-size:17px;letter-spacing:.03em;text-transform:uppercase;margin-bottom:8px}
.card .cbody .csub{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--dim);margin-bottom:13px}
.card .cbody p{font-size:12.5px;line-height:1.75}
.card .cmeta{font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);text-align:right;line-height:1.9}
.card .cmeta .go{display:inline-block;margin-top:12px;color:var(--ink);border-bottom:1px solid var(--accent)}
.card .cmeta .go:hover{background:var(--accent);color:var(--bg)}
.card .cmeta .go::after{content:"";position:absolute;inset:0}
.card:hover .cmeta .go{background:var(--accent);color:var(--bg)}
.card .cmeta .off{color:var(--dimmer);display:inline-block;margin-top:12px}
@media(max-width:720px){.card{grid-template-columns:1fr;gap:12px}.card .cmeta{text-align:left}}

/* ---------- footer ---------- */
.foot{max-width:720px;margin:0 auto;padding:50px 20px 60px;text-align:center;border-top:1px solid var(--line)}
.foot .stamp{font-size:11px;letter-spacing:.14em;text-transform:uppercase;line-height:2.1;color:var(--ink)}
.foot .stamp .pill{border:1px solid var(--ink);border-radius:20px;padding:2px 12px;white-space:nowrap}
.foot .mk{margin:16px auto;width:26px;height:26px;color:var(--ink)}
.foot .cred{font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin-top:14px;line-height:1.9}
.foot .cred a:hover{color:var(--ink)}