*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
:root{
  color-scheme:dark;
  --bg:#15140f;--panel:#0e0d0a;--border:#2e2b28;
  --text:#ebe6dc;--muted:#7a7368;--surface:#1c1a16;--surface2:#23211c;
  --accent:#e8c547;--mirror:#cfd6dc;--green:#4caf7d;--red:#e05c5c;--earth:#c98a4b;
  --ff-h:'Syne',sans-serif;--ff-m:'DM Mono',monospace;
  --glass:rgba(12,10,8,.78);
  --manifest-bg:#070503;
  --scan:rgba(0,0,0,.045);
  --card-inner:rgba(10,8,5,.5);
  --hero-fade:rgba(21,20,15,.82);
  --hero-fade-mid:rgba(21,20,15,.6);
  --hero-fade-end:rgba(21,20,15,0);
}
body.day{
  color-scheme:light;
  --bg:#ece9e1;--panel:#dad6cc;--border:#a8a294;
  --text:#0a0908;--muted:#3c3a34;--surface:#dcd7ca;--surface2:#cac4b8;
  --accent:#6b4ea3;
  --mirror:#1e7a45;
  --red:#9e2b2b;   /* deepened for contrast on the light surface, as --mirror is */
  --earth:#8a5a22; /* same treatment — and it must stay clear of --mirror's day green */
  --glass:rgba(236,233,225,.86);--manifest-bg:#f2eee5;--scan:rgba(0,0,0,.04);
  --card-inner:rgba(236,233,225,.5);
  --hero-fade:rgba(236,233,225,.86);
  --hero-fade-mid:rgba(236,233,225,.6);
  --hero-fade-end:rgba(236,233,225,0);
}
html,body{background:var(--bg);color:var(--text);font-family:var(--ff-m);font-size:14px;line-height:1.6;forced-color-adjust:none}
body{min-height:100vh;overflow-x:hidden}

/* Global scanline overlay */
body::before{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:9998;
  background:repeating-linear-gradient(0deg,transparent,transparent 2px,var(--scan) 2px,var(--scan) 3px);
}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}

/* Day/Night toggle */
#theme-toggle{
  position:fixed;bottom:14px;right:14px;z-index:9001;
  width:36px;height:36px;border-radius:8px;
  background:var(--glass);border:1px solid var(--border);
  color:var(--accent);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  transition:all .2s;
}
#theme-toggle:hover{border-color:var(--accent);transform:translateY(-1px)}
#theme-toggle svg{width:18px;height:18px;display:block}
#theme-toggle .sun{display:none}
#theme-toggle .moon{display:block}
body.day #theme-toggle .sun{display:block}
body.day #theme-toggle .moon{display:none}

/* Status badge bottom-left */
#sys-state{
  position:fixed;bottom:14px;left:14px;z-index:9000;
  font-family:var(--ff-m);font-size:9px;letter-spacing:.18em;
  color:rgba(232,197,71,.55);text-transform:uppercase;
  background:var(--card-inner);border:1px solid var(--border);
  padding:5px 10px;border-radius:4px;backdrop-filter:blur(6px);
  display:flex;align-items:center;gap:8px;
}
#sys-state .dot{
  width:7px;height:7px;border-radius:50%;background:currentColor;
  box-shadow:0 0 8px currentColor;
}

/* ── HEADER ── */
header{
  position:fixed;top:0;left:0;right:0;z-index:50;
  background:var(--glass);border-bottom:1px solid var(--border);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
.nav{
  max-width:1280px;margin:0 auto;display:flex;align-items:center;gap:16px;
  padding:13px 28px;
}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand svg{width:26px;height:22px;color:var(--accent);filter:drop-shadow(0 1px 6px rgba(232,197,71,.4))}
.brand-name{
  font-family:var(--ff-h);font-weight:800;font-size:15px;
  letter-spacing:.22em;color:var(--accent);line-height:1;
}
.brand-sub{
  font-family:var(--ff-m);font-size:9px;letter-spacing:.22em;
  color:rgba(232,197,71,.4);line-height:1;margin-top:3px;text-transform:uppercase;
}
.brand-stack{display:flex;flex-direction:column}
.nav-spacer{flex:1}
.nav-links{display:flex;gap:4px;align-items:center}
.nav-link{
  font-family:var(--ff-m);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);padding:7px 12px;border:1px solid transparent;border-radius:5px;
  transition:all .14s;
}
.nav-link:hover{color:var(--accent);border-color:var(--border);text-decoration:none}
.nav-link.cta{
  border-color:var(--accent);color:var(--accent);background:rgba(232,197,71,.05);
}
.nav-link.cta:hover{background:rgba(232,197,71,.13);text-decoration:none}
.nav-link.pe{border-color:rgba(207,214,220,.3);color:var(--mirror)}
.nav-link.pe:hover{border-color:var(--mirror);background:rgba(207,214,220,.09);text-decoration:none}
body.day .nav-link.pe{border-color:rgba(30,122,69,.4)}
body.day .nav-link.pe:hover{background:rgba(30,122,69,.08)}
/* Tools — the builder and the generator carry their mark only on wide screens.
   The name stays in the DOM for screen readers and in the title attribute for
   the hover tooltip, and the menu shows it again where there is room. */
.nav-link.tool{display:inline-flex;align-items:center;gap:8px;padding:7px 10px}
.nav-link.tool .tool-ico{height:15px;width:auto;display:block;flex:none}
.nav-link.tool .tool-name{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* Hamburger — hidden until the bar runs out of room (see the 980px block) */
.nav-toggle{
  display:none;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  width:38px;height:32px;padding:0;
  background:transparent;border:1px solid var(--border);border-radius:5px;
  color:var(--accent);cursor:pointer;transition:all .14s;
}
.nav-toggle:hover{border-color:var(--accent)}
.nav-toggle span{
  display:block;width:16px;height:1.5px;background:currentColor;
  transition:transform .18s,opacity .18s;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}

/* Mobile: the whole bar folds into a panel under the header. It used to just
   hide, leaving the sections unreachable on a phone. */
@media(max-width:980px){
  .nav-toggle{display:flex}
  .nav-links{
    display:none;position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:6px;
    padding:14px 22px 20px;
    /* Thinner than the header's --glass on purpose: at .78 the tint hid
       the blur, and the point of the panel is the page going soft under it. */
    background:rgba(12,10,8,.58);border-bottom:1px solid var(--border);
    backdrop-filter:blur(30px) saturate(150%);
    -webkit-backdrop-filter:blur(30px) saturate(150%);
  }
  body.day .nav-links{background:rgba(236,233,225,.7)}
  .nav-links.open{display:flex}
  .nav-link{font-size:11px;padding:12px 14px;border-color:var(--border)}
  .nav-link.tool{padding:12px 14px}
  .nav-link.tool .tool-name{
    position:static;width:auto;height:auto;margin:0;
    overflow:visible;clip:auto;white-space:normal;
  }
  .nav-link.cta{text-align:center}
}

/* The second tool sits beside the builder, tinted the way its section is. */
.nav-link.sa{border-color:rgba(201,138,75,.34);color:var(--earth)}
.nav-link.sa:hover{border-color:var(--earth);background:rgba(201,138,75,.11);text-decoration:none}
.status-dot{
  width:7px;height:7px;border-radius:50%;background:var(--green);
  box-shadow:0 0 8px rgba(76,175,125,.7);
  animation:pulse 2s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.45}}

/* ── HERO ── */
.hero{
  position:relative;max-width:1280px;margin:0 auto;
  padding:120px 28px 60px;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:48px;
  align-items:center;min-height:calc(100vh - 60px);
}
.hero-tag{
  font-family:var(--ff-m);font-size:10px;letter-spacing:.24em;
  color:rgba(232,197,71,.6);text-transform:uppercase;
  display:flex;align-items:center;gap:10px;margin-bottom:22px;
}
.hero-tag::before{
  content:'';width:24px;height:1px;background:rgba(232,197,71,.5);
}
.hero-headline{
  display:flex;align-items:flex-start;gap:22px;margin-bottom:6px;
}
.hero-logo-bg{
  flex:0 0 auto;width:clamp(70px,8vw,108px);height:auto;
  filter:drop-shadow(0 4px 24px rgba(232,197,71,.32));
}
.hero-logo-bg path,.hero-logo-bg circle{fill:var(--accent);stroke:var(--accent)}
.hero h1{
  font-family:var(--ff-h);font-weight:800;
  font-size:clamp(40px,5.4vw,82px);line-height:.9;letter-spacing:-.015em;
  color:var(--accent);
  text-shadow:0 0 50px rgba(232,197,71,.16);
}
.hero h1 .line2{color:var(--text);display:block;font-weight:700}
.hero-divider{
  width:100%;height:1px;margin:26px 0;
  background:linear-gradient(90deg,rgba(232,197,71,.36),rgba(232,197,71,.02));
}
.hero-desc{
  font-family:var(--ff-m);font-size:14px;line-height:1.8;color:var(--text);max-width:520px;
}
.hero-desc strong{color:var(--accent);font-weight:500}
.hero-actions{display:flex;gap:8px;margin-top:28px;flex-wrap:wrap}
/* ── The tools' marks, in a line under the hero ──
   One per project that has a logotype, each linking to that project's own
   site. The mark keeps its project tint; the label only takes it on hover, so
   the row reads as a set rather than as four competing colours. */
.hero-tools{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin-top:30px;padding-top:20px;max-width:520px;
  border-top:1px solid var(--border);
}
.hero-tools-k{
  font-family:var(--ff-m);font-size:9px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--muted);margin-right:4px;
}
.hero-tool{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--ff-m);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);
  padding:7px 12px;border:1px solid var(--border);border-radius:6px;
  transition:color .16s,border-color .16s,background .16s;
}
.hero-tool:hover{
  color:var(--proj);border-color:var(--proj);
  background:var(--card-inner);text-decoration:none;
}
.tool-mark{flex:none;height:19px;width:auto;color:var(--proj)}
@media(max-width:560px){
  .hero-tools{gap:8px}
  .hero-tool{flex:1 1 auto;justify-content:center}
}
.pe-intro{
  margin-top:26px;max-width:560px;padding:14px 16px;
  border:1px solid var(--border);border-left:2px solid var(--mirror);border-radius:0 6px 6px 0;
  background:var(--card-inner);
}
.pe-intro-key{
  display:block;font-family:var(--ff-m);font-size:9px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--mirror);margin-bottom:7px;
}
.pe-intro p{font-family:var(--ff-m);font-size:12px;line-height:1.7;color:var(--muted);margin-bottom:9px}
.pe-intro a{
  font-family:var(--ff-m);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--mirror);text-decoration:none;border-bottom:1px solid transparent;transition:border-color .18s;
}
.pe-intro a:hover{border-color:var(--mirror);text-decoration:none}
.btn{
  font-family:var(--ff-h);font-weight:700;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  padding:13px 22px;border-radius:7px;border:1px solid var(--border);
  background:transparent;color:var(--text);cursor:pointer;
  transition:all .15s;display:inline-flex;align-items:center;gap:8px;
}
.btn:hover{border-color:var(--accent);color:var(--accent);text-decoration:none}
.btn.primary{
  background:var(--accent);color:#15140f;border-color:var(--accent);
  box-shadow:0 2px 18px rgba(232,197,71,.22);
}
.btn.primary:hover{background:#f0d060;color:#15140f}

/* Hero gallery — soboof's own imagery */
.hero-gallery{
  position:relative;display:grid;
  grid-template-columns:1.1fr .9fr;
  grid-template-rows:1.05fr .95fr;
  gap:10px;aspect-ratio:1/1.04;
}
.hg-tile{
  position:relative;overflow:hidden;
  background:#0a0807;border:1px solid var(--border);border-radius:6px;
  box-shadow:0 18px 50px rgba(0,0,0,.55), 0 0 0 1px rgba(232,197,71,.06);
}
.hg-tile img{width:100%;height:100%;object-fit:cover;display:block;filter:contrast(1.04) saturate(1.04)}
.hg-tile{background:#0a0807 url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' preserveAspectRatio='xMidYMid slice'%3E%3Cdefs%3E%3Cpattern id='t' width='40' height='34.64' patternUnits='userSpaceOnUse'%3E%3Cpolygon points='20,0 40,34.64 0,34.64' fill='none' stroke='%23e8c547' stroke-opacity='.18' stroke-width='.6'/%3E%3Cpolygon points='0,0 40,0 20,34.64' fill='none' stroke='%23e8c547' stroke-opacity='.1' stroke-width='.6'/%3E%3C/pattern%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23241f17'/%3E%3Cstop offset='1' stop-color='%230a0807'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='200' height='200' fill='url(%23g)'/%3E%3Crect width='200' height='200' fill='url(%23t)'/%3E%3Cg transform='translate(100,108)' stroke='%23e8c547' fill='none' stroke-width='1' stroke-linejoin='round'%3E%3Cpolygon points='-44,-22 44,-22 0,52' opacity='.95'/%3E%3Cpolygon points='-44,-22 0,-62 44,-22' opacity='.7'/%3E%3Cpolygon points='-44,-22 0,52 -34,6' opacity='.55'/%3E%3Cpolygon points='44,-22 0,52 34,6' opacity='.55'/%3E%3Cpolygon points='0,-62 -44,-22 -16,-42' fill='%23e8c547' fill-opacity='.18' stroke='none'/%3E%3Cpolygon points='0,-62 44,-22 16,-42' fill='%23e8c547' fill-opacity='.1' stroke='none'/%3E%3Cpolygon points='-44,-22 0,52 -22,12' fill='%23cfd6dc' fill-opacity='.08' stroke='none'/%3E%3C/g%3E%3C/svg%3E") center/cover no-repeat}
.prod-img,.chap-media{background:#0a0807 url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' preserveAspectRatio='xMidYMid slice'%3E%3Cdefs%3E%3Cpattern id='t' width='32' height='27.71' patternUnits='userSpaceOnUse'%3E%3Cpolygon points='16,0 32,27.71 0,27.71' fill='none' stroke='%23e8c547' stroke-opacity='.16' stroke-width='.5'/%3E%3Cpolygon points='0,0 32,0 16,27.71' fill='none' stroke='%23e8c547' stroke-opacity='.08' stroke-width='.5'/%3E%3C/pattern%3E%3CradialGradient id='g' cx='.5' cy='.45' r='.7'%3E%3Cstop offset='0' stop-color='%231a1612'/%3E%3Cstop offset='1' stop-color='%23070503'/%3E%3C/radialGradient%3E%3C/defs%3E%3Crect width='200' height='200' fill='url(%23g)'/%3E%3Crect width='200' height='200' fill='url(%23t)'/%3E%3Cg transform='translate(100,108)' stroke='%23e8c547' fill='none' stroke-width='.9' stroke-linejoin='round'%3E%3Cpolygon points='-38,-18 38,-18 0,46' opacity='.9'/%3E%3Cpolygon points='-38,-18 0,-54 38,-18' opacity='.65'/%3E%3Cpolygon points='-38,-18 0,46 -28,6' opacity='.5'/%3E%3Cpolygon points='38,-18 0,46 28,6' opacity='.5'/%3E%3Cpolygon points='0,-54 -38,-18 -14,-36' fill='%23e8c547' fill-opacity='.16' stroke='none'/%3E%3Cpolygon points='0,-54 38,-18 14,-36' fill='%23e8c547' fill-opacity='.08' stroke='none'/%3E%3C/g%3E%3C/svg%3E") center/cover no-repeat}
.prod-img .ph,.chap-media .ph,.hg-tile .ph{
  position:absolute;left:50%;bottom:10px;transform:translateX(-50%);
  font-family:var(--ff-m);font-size:8px;letter-spacing:.22em;
  color:rgba(232,197,71,.45);text-transform:uppercase;
  background:rgba(7,5,3,.55);padding:3px 8px;border-radius:3px;
  border:1px solid rgba(232,197,71,.18);white-space:nowrap;z-index:2;
  pointer-events:none;
}
.hg-tile::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.08) 2px,rgba(0,0,0,.08) 3px);
}
.hg-tile .tag{
  position:absolute;left:10px;top:10px;
  font-family:var(--ff-m);font-size:8px;letter-spacing:.2em;
  color:rgba(232,197,71,.85);text-transform:uppercase;
  background:rgba(7,5,3,.7);border:1px solid rgba(232,197,71,.3);
  padding:4px 7px;border-radius:3px;backdrop-filter:blur(4px);
}
.hg-1{grid-column:1;grid-row:1 / span 2}
.hg-2{grid-column:2;grid-row:1}
.hg-3{grid-column:2;grid-row:2}
.hg-corner{
  position:absolute;width:14px;height:14px;border-color:rgba(232,197,71,.55);z-index:3;
}
.hg-corner.tl{top:-3px;left:-3px;border-top:1px solid;border-left:1px solid}
.hg-corner.tr{top:-3px;right:-3px;border-top:1px solid;border-right:1px solid}
.hg-corner.bl{bottom:-3px;left:-3px;border-bottom:1px solid;border-left:1px solid}
.hg-corner.br{bottom:-3px;right:-3px;border-bottom:1px solid;border-right:1px solid}

/* ── MANIFEST STRIP ── */
.manifest-wrap{max-width:1280px;margin:0 auto;padding:8px 28px 24px}
.manifest{
  position:relative;background:var(--manifest-bg);
  border:1px solid rgba(232,197,71,.4);border-radius:3px;
  padding:22px 26px;overflow:hidden;
  box-shadow:0 0 0 1px rgba(232,197,71,.06),0 0 40px rgba(232,197,71,.04),0 12px 36px rgba(0,0,0,.5);
  display:grid;grid-template-columns:auto 1fr auto;gap:30px;align-items:center;
}
.manifest::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.12) 2px,rgba(0,0,0,.12) 3px);
}
.manifest::after{
  content:'';position:absolute;top:0;left:8%;right:8%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(232,197,71,.7),transparent);
}
.eq-corner{position:absolute;width:12px;height:12px;border-color:rgba(232,197,71,.5);z-index:1}
.eq-corner.tl{top:6px;left:6px;border-top:1px solid;border-left:1px solid}
.eq-corner.tr{top:6px;right:6px;border-top:1px solid;border-right:1px solid}
.eq-corner.bl{bottom:6px;left:6px;border-bottom:1px solid;border-left:1px solid}
.eq-corner.br{bottom:6px;right:6px;border-bottom:1px solid;border-right:1px solid}
.manifest-head{position:relative;z-index:1}
.manifest-id{
  font-family:var(--ff-m);font-size:9px;letter-spacing:.22em;
  color:rgba(232,197,71,.45);text-transform:uppercase;line-height:1.3;
}
.manifest-id b{color:var(--accent);font-weight:600}
.manifest-eqs{
  display:grid;grid-template-columns:repeat(3,1fr);gap:22px;position:relative;z-index:1;
}
.manifest-eq{display:flex;flex-direction:column;gap:5px;border-left:1px solid rgba(232,197,71,.15);padding-left:18px}
.manifest-eq:first-child{border-left:none;padding-left:0}
.manifest-eq-k{
  font-family:var(--ff-m);font-size:8px;letter-spacing:.2em;
  color:rgba(232,197,71,.4);text-transform:uppercase;
}
.manifest-eq-v{
  font-family:var(--ff-m);font-weight:500;font-size:18px;letter-spacing:.05em;
  color:var(--accent);text-shadow:0 0 14px rgba(232,197,71,.25);line-height:1.1;
}
.manifest-eq-v.label{font-family:var(--ff-h);font-size:14px;font-weight:600;letter-spacing:.18em}
.manifest-foot{
  font-family:var(--ff-m);font-size:9px;letter-spacing:.16em;
  color:rgba(232,197,71,.35);text-transform:uppercase;position:relative;z-index:1;
  text-align:right;line-height:1.4;
}

/* ── SECTION SCAFFOLD ── */
section{max-width:1280px;margin:0 auto;padding:80px 28px;position:relative}
.sec-head{
  display:flex;align-items:flex-end;justify-content:space-between;
  margin-bottom:40px;gap:24px;flex-wrap:wrap;
}
.sec-num{
  font-family:var(--ff-m);font-size:10px;letter-spacing:.22em;
  color:rgba(232,197,71,.5);text-transform:uppercase;
  display:flex;align-items:center;gap:10px;margin-bottom:10px;
}
.sec-num::before{content:'';width:24px;height:1px;background:rgba(232,197,71,.5)}
.sec-title{
  font-family:var(--ff-h);font-weight:700;font-size:clamp(34px,5vw,56px);
  line-height:1;letter-spacing:-.01em;color:var(--text);
}
.sec-title .accent{color:var(--accent)}
.sec-title .mirror{color:var(--mirror)}
/* A project's own mark, enlarged and set behind its heading — the treatment
   the owl already gets behind the hero headline. It sits under the type and
   takes no clicks, so it stays decoration; `currentColor` inside the file
   takes the section tint and follows the theme. */
.sec-id{position:relative}
.sec-id > *{position:relative;z-index:1}
.sec-mark{
  position:absolute;z-index:0;left:0;top:50%;transform:translateY(-46%);
  height:clamp(96px,12vw,158px);width:auto;
  color:var(--proj);opacity:.14;pointer-events:none;
}
/* The light background swallows a faint mark, so give it a little more. */
body.day .sec-mark{opacity:.18}
/* What the section used to call its title, now under the name it belongs to. */
.sec-role{
  font-family:var(--ff-m);font-size:13px;line-height:1.6;
  color:var(--muted);margin-top:13px;
}
.sec-sub{
  font-family:var(--ff-m);font-size:13px;line-height:1.7;color:var(--muted);max-width:420px;
}

/* ── WORK GRID ── */
.work-grid{
  display:grid;grid-template-columns:repeat(12,1fr);gap:14px;
}
.prod{
  position:relative;background:var(--surface);border:1px solid var(--border);border-radius:8px;
  padding:14px;display:flex;flex-direction:column;gap:10px;
  transition:all .2s;text-decoration:none;color:var(--text);overflow:hidden;
}
.prod:hover{
  border-color:rgba(232,197,71,.55);text-decoration:none;transform:translateY(-2px);
  box-shadow:0 16px 40px rgba(0,0,0,.5),0 0 0 1px rgba(232,197,71,.18);
}
.prod.big{grid-column:span 6}
.prod.std{grid-column:span 3}
.prod.wide{grid-column:span 6}
@media(max-width:1000px){
  .prod.big,.prod.wide{grid-column:span 6}
  .prod.std{grid-column:span 6}
}
@media(max-width:640px){
  .prod.big,.prod.std,.prod.wide{grid-column:span 12}
}
.prod-img{
  position:relative;width:100%;aspect-ratio:1/1;
  background:#0a0807;border:1px solid var(--border);border-radius:5px;overflow:hidden;
}
.prod.big .prod-img{aspect-ratio:4/3.4}
.prod.wide .prod-img{aspect-ratio:16/10}
.prod-img img,.chap-media img,.hg-tile img{transition:transform .6s cubic-bezier(.2,.6,.2,1);filter:contrast(1.04)}
.prod-img img{width:100%;height:100%;object-fit:cover;display:block}
.prod-img img[data-failed],.chap-media img[data-failed],.hg-tile img[data-failed]{display:none}
.prod:hover .prod-img img{transform:scale(1.04)}
.prod-img::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.08) 2px,rgba(0,0,0,.08) 3px);
}
.prod-id{
  position:absolute;left:8px;top:8px;z-index:2;
  font-family:var(--ff-m);font-size:8px;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(232,197,71,.85);background:rgba(7,5,3,.7);
  border:1px solid rgba(232,197,71,.3);padding:3px 7px;border-radius:3px;
  backdrop-filter:blur(4px);
}
.prod-edition{
  position:absolute;right:8px;top:8px;z-index:2;
  font-family:var(--ff-m);font-size:8px;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(207,214,220,.9);background:rgba(7,5,3,.7);
  border:1px solid rgba(207,214,220,.3);padding:3px 7px;border-radius:3px;
  backdrop-filter:blur(4px);
}
.prod-edition.sale{color:#f6b34a;border-color:rgba(246,179,74,.5)}
.prod-tags{
  font-family:var(--ff-m);font-size:9px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);
}
.prod-name{
  font-family:var(--ff-h);font-weight:700;font-size:19px;line-height:1.1;
  letter-spacing:-.005em;color:var(--text);
}
.prod.big .prod-name{font-size:30px}
.prod.wide .prod-name{font-size:24px}
.prod-row{
  display:flex;align-items:center;justify-content:flex-end;gap:12px;margin-top:auto;
  padding-top:8px;border-top:1px solid var(--border);
}
.prod-meta{font-family:var(--ff-m);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.prod-arrow{
  font-family:var(--ff-m);font-size:14px;color:var(--accent);
  display:inline-flex;align-items:center;gap:4px;
}
.prod:hover .prod-arrow{transform:translateX(2px)}

/* ── CHAPTERS (Concept / Process / Materials / Functionality) ── */
.chapters{display:flex;flex-direction:column;gap:18px}
.chap{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:32px;
  background:var(--surface);border:1px solid var(--border);border-radius:10px;
  padding:28px;align-items:center;position:relative;overflow:hidden;
}
.chap.flip{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}
.chap.flip .chap-media{order:2}
.chap.flip .chap-body{order:1}
.chap-media{
  position:relative;border-radius:6px;overflow:hidden;
  background:#0a0807;border:1px solid var(--border);
  aspect-ratio:4/3;
}
.chap-media img{width:100%;height:100%;object-fit:cover;display:block;filter:contrast(1.04)}
.chap-media::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.08) 2px,rgba(0,0,0,.08) 3px);
}
.chap-id{
  position:absolute;left:10px;top:10px;z-index:2;
  font-family:var(--ff-m);font-size:9px;letter-spacing:.22em;
  color:rgba(232,197,71,.85);text-transform:uppercase;
  background:rgba(7,5,3,.7);border:1px solid rgba(232,197,71,.3);
  padding:4px 8px;border-radius:3px;backdrop-filter:blur(4px);
}
.chap-num{
  font-family:var(--ff-m);font-size:10px;letter-spacing:.22em;
  color:rgba(232,197,71,.55);text-transform:uppercase;margin-bottom:10px;
}
.chap-title{
  font-family:var(--ff-h);font-weight:700;font-size:30px;line-height:1.05;
  color:var(--text);letter-spacing:-.005em;margin-bottom:8px;
}
.chap-title .accent{color:var(--accent)}
.chap-kicker{
  font-family:var(--ff-h);font-weight:400;font-size:15px;line-height:1.4;
  color:var(--mirror);font-style:italic;letter-spacing:.01em;margin-bottom:14px;
}
.chap-body p{font-family:var(--ff-m);font-size:13px;line-height:1.75;color:var(--text);margin-bottom:10px}
.chap-body p strong{color:var(--accent);font-weight:500}
.chap-body p em{color:var(--mirror);font-style:normal}
@media(max-width:820px){
  .chap,.chap.flip{grid-template-columns:1fr;padding:20px}
  .chap.flip .chap-media,.chap.flip .chap-body{order:initial}
}

/* ── ABOUT / DOSSIER ── */
.dossier{
  display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:32px;align-items:start;
}
@media(max-width:900px){.dossier{grid-template-columns:1fr}}
.dossier-body p{margin-bottom:14px;font-size:14px;line-height:1.8;color:var(--text)}
.dossier-body p.lead{
  font-size:19px;color:var(--accent);font-family:var(--ff-h);font-weight:400;
  letter-spacing:.01em;line-height:1.45;margin-bottom:22px;
}
.dossier-meta{
  background:var(--surface);border:1px solid var(--border);border-radius:8px;
  padding:20px 22px;
}
.dossier-meta dl{display:grid;grid-template-columns:auto 1fr;gap:11px 18px}
.dossier-meta dt{
  font-family:var(--ff-m);font-size:9px;letter-spacing:.18em;
  color:var(--muted);text-transform:uppercase;align-self:center;
}
.dossier-meta dd{font-family:var(--ff-m);font-size:12px;color:var(--text)}
.dossier-meta dd.accent{color:var(--accent)}
.dossier-divider{border:none;border-top:1px solid var(--border);margin:14px -22px}
.dossier-tags{display:flex;flex-wrap:wrap;gap:5px}
.dossier-tag{
  font-family:var(--ff-m);font-size:9px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);border:1px solid var(--border);border-radius:4px;
  padding:4px 9px;background:var(--card-inner);
}

/* ── WORKSHOP / BLOG STRIP ── */
.strip{
  display:grid;grid-template-columns:repeat(2,1fr);gap:14px;
}
@media(max-width:760px){.strip{grid-template-columns:1fr}}
.strip-card{
  position:relative;background:var(--surface);border:1px solid var(--border);
  border-radius:10px;padding:24px;overflow:hidden;text-decoration:none;color:var(--text);
  display:flex;flex-direction:column;gap:10px;min-height:220px;
  transition:all .2s;
}
.strip-card:hover{
  border-color:rgba(232,197,71,.55);text-decoration:none;transform:translateY(-2px);
  box-shadow:0 16px 40px rgba(0,0,0,.5);
}
.strip-card .k{
  font-family:var(--ff-m);font-size:9px;letter-spacing:.22em;color:var(--muted);
  text-transform:uppercase;display:flex;justify-content:space-between;align-items:center;
}
.strip-card .k .live{color:var(--green);display:flex;align-items:center;gap:6px}
.strip-card .k .live::before{
  content:'';width:6px;height:6px;border-radius:50%;background:var(--green);
  box-shadow:0 0 6px rgba(76,175,125,.7);
}
.strip-card h3{
  font-family:var(--ff-h);font-weight:700;font-size:26px;line-height:1.08;
  color:var(--text);letter-spacing:-.005em;
}
.strip-card p{font-family:var(--ff-m);font-size:12.5px;color:var(--muted);line-height:1.65}
.strip-card .arrow{
  margin-top:auto;font-family:var(--ff-m);font-size:10px;letter-spacing:.18em;
  color:var(--accent);text-transform:uppercase;
}

/* ── PROJECT SECTIONS ──
   One per project, each carrying three examples. `--proj` is set per section
   from data/projects.js and tints the rule, the section number and the CTA. */
.proj-sec{--proj:var(--accent)}
.proj-sec .sec-num{color:var(--proj)}

.proj-bar{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  flex-wrap:wrap;padding:0 0 16px;margin-bottom:22px;
  border-bottom:1px solid var(--border);
}
.proj-bar .proj-meta{display:flex;flex-wrap:wrap;gap:6px}
.proj-bar .proj-meta span{
  font-family:var(--ff-m);font-size:8.5px;letter-spacing:.16em;color:var(--muted);
  text-transform:uppercase;border:1px solid var(--border);border-radius:3px;
  padding:3px 7px;
}
.proj-bar .proj-status{
  font-family:var(--ff-m);font-size:9px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--proj);white-space:nowrap;
}

.ex-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:900px){.ex-grid{grid-template-columns:1fr}}

.ex{
  background:var(--surface);border:1px solid var(--border);
  border-top:2px solid var(--proj);border-radius:10px;overflow:hidden;
  display:flex;flex-direction:column;text-decoration:none;color:var(--text);
  transition:transform .2s,border-color .2s,box-shadow .2s;
}
a.ex:hover{
  text-decoration:none;transform:translateY(-3px);border-color:var(--proj);
  box-shadow:0 18px 44px rgba(0,0,0,.5);
}
/* Each source gets the framing it already has elsewhere on the site:
   sculpture photos crop square, print scans sit whole on paper at A4, and the
   drawn sources — PE's wireframes and SuperAdobe's course stacks — are line
   art that takes the project tint. */
.ex-media{
  aspect-ratio:1/1;background:var(--bg);overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
.ex-art .ex-media img{width:100%;height:100%;object-fit:cover;display:block;filter:contrast(1.04)}
a.ex-art:hover .ex-media img{transform:scale(1.04);transition:transform .6s cubic-bezier(.2,.6,.2,1)}

.ex-print .ex-media{aspect-ratio:1/1.414;background:#f4f2ec}
.ex-print .ex-media img{width:100%;height:100%;object-fit:contain;display:block}

.ex-wire .ex-media,.ex-earth .ex-media{color:var(--proj);padding:12px}
.ex-wire .ex-media svg,.ex-earth .ex-media svg{width:100%;height:100%;display:block}
.ex-body{padding:16px 16px 18px;display:flex;flex-direction:column;gap:6px}
.ex-title{
  font-family:var(--ff-h);font-weight:700;font-size:17px;line-height:1.15;
  letter-spacing:-.01em;
}
.ex-spec{
  font-family:var(--ff-m);font-size:9px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--proj);
}
.ex-body p{
  font-family:var(--ff-m);font-size:12px;color:var(--muted);line-height:1.6;
}
.proj-go{margin-top:22px;align-self:flex-start}

/* The accent colours are tuned for the dark surface. On the light one the same
   hues sit too close to the card behind them for 9px type, so deepen just
   these small labels rather than shifting the palette site-wide. */
body.day .proj-bar .proj-status,
body.day .ex-spec{filter:brightness(.68) saturate(1.15)}

/* ── CONTACT ── */
.contact{
  background:var(--surface);border:1px solid var(--border);border-radius:10px;
  padding:48px 36px;display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:36px;
  position:relative;overflow:hidden;
}
.contact::before{
  content:'';position:absolute;top:0;left:8%;right:8%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(232,197,71,.55),transparent);
}
@media(max-width:800px){.contact{grid-template-columns:1fr;padding:32px 22px}}
.contact h2{
  font-family:var(--ff-h);font-weight:700;font-size:38px;line-height:1;
  color:var(--text);margin-bottom:14px;letter-spacing:-.01em;
}
.contact h2 .accent{color:var(--accent)}
.contact h2 .mirror{color:var(--mirror)}
.contact p{font-size:13px;color:var(--muted);line-height:1.7;max-width:46ch}
.contact-channels{display:flex;flex-direction:column;gap:8px}
.channel{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 16px;background:var(--card-inner);border:1px solid var(--border);
  border-radius:7px;font-family:var(--ff-m);text-decoration:none;color:var(--text);
  transition:all .15s;
}
.channel:hover{border-color:var(--accent);text-decoration:none;color:var(--accent)}
.channel-key{font-size:9px;letter-spacing:.2em;color:var(--muted);text-transform:uppercase}
.channel-val{font-size:13px;letter-spacing:.02em}
.channel:hover .channel-val{color:var(--accent)}

/* ── FOOTER ── */
footer{border-top:1px solid var(--border);margin-top:48px;background:var(--glass)}
.foot{
  max-width:1280px;margin:0 auto;padding:24px 28px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  font-family:var(--ff-m);font-size:10px;letter-spacing:.18em;
  color:var(--muted);text-transform:uppercase;flex-wrap:wrap;
}
.foot-build{display:flex;align-items:center;gap:10px}
.foot-build svg{width:14px;height:12px;opacity:.7}
.foot .nav-status{display:flex;align-items:center;gap:6px}
.foot-link{color:var(--muted);text-decoration:none;font-family:var(--ff-m);font-size:9px;letter-spacing:.18em;text-transform:uppercase;transition:opacity .15s}.foot-link:hover{opacity:.85}

/* ── RESPONSIVE ── */
@media(max-width:980px){
  .hero{grid-template-columns:1fr;gap:32px;padding:96px 22px 40px;min-height:0}
  .hero-gallery{aspect-ratio:5/4;max-width:560px}
  .manifest{grid-template-columns:1fr;gap:18px}
  .manifest-eqs{grid-template-columns:repeat(3,1fr);gap:14px}
  .manifest-eq{padding-left:12px}
  .manifest-foot{text-align:left}
  section{padding:60px 22px}
}
@media(max-width:560px){
  .hero-headline{flex-direction:column;gap:14px}
  .hero h1{font-size:clamp(34px,9vw,52px)}
  .manifest-eqs{grid-template-columns:1fr;gap:10px}
  .manifest-eq{border-left:none;border-top:1px solid rgba(232,197,71,.15);padding-left:0;padding-top:8px}
  .manifest-eq:first-child{border-top:none;padding-top:0}
  .hero-actions{flex-direction:column;align-items:stretch}
  .hero-actions .btn{width:100%;justify-content:center}
  .foot{flex-direction:column;align-items:flex-start;gap:8px}
}

/* ══════════════════════════════════════════════════════ */
/* ── 3D SCROLL SCENE (PE-style model rail system) ── */
/* ══════════════════════════════════════════════════════ */
#scene-canvas{
  position:fixed;inset:0;width:100%;height:100%;
  z-index:1;pointer-events:none;
}
#scene-state-hud{
  position:fixed;bottom:60px;left:14px;z-index:9000;pointer-events:none;
  font-family:var(--ff-m);font-size:9px;letter-spacing:.18em;
  color:rgba(232,197,71,.55);text-transform:uppercase;
  background:var(--card-inner);border:1px solid var(--border);
  padding:5px 10px;border-radius:4px;backdrop-filter:blur(6px);
  display:flex;align-items:center;gap:8px;
  transition:color .4s,border-color .4s;
}
#scene-state-hud .ssd{
  width:7px;height:7px;border-radius:50%;background:currentColor;
  box-shadow:0 0 8px currentColor;
}
/* Site content sits above the canvas */
.hero, section, footer{position:relative;z-index:2}
.hero, section{background:transparent}

/* Model rail — reserved column for the floating 3D model */
.model-rail{
  position:absolute;top:80px;bottom:60px;width:160px;
  pointer-events:none;z-index:1;
}
.model-rail::before,.model-rail::after{
  content:'';position:absolute;width:14px;height:14px;
  border-color:rgba(232,197,71,.3);
}
.model-rail::before{top:0;left:0;border-top:1px solid;border-left:1px solid}
.model-rail::after{bottom:0;right:0;border-bottom:1px solid;border-right:1px solid}
.model-rail .rail-tick{
  position:absolute;left:50%;transform:translateX(-50%);
  font-family:var(--ff-m);font-size:8px;letter-spacing:.18em;
  color:rgba(232,197,71,.4);text-transform:uppercase;
  writing-mode:vertical-rl;
}
.model-rail .rail-tick.top{top:18px}
.model-rail .rail-tick.bot{bottom:18px;transform:translateX(-50%) rotate(180deg)}
.rail-right .model-rail{right:28px}
.rail-left .model-rail{left:28px}
section.rail-right{padding-right:200px}
section.rail-left{padding-left:200px}

/* Hero rail: fills the right grid column */
.hero .model-rail{
  position:relative;inset:auto;width:100%;height:100%;
  min-height:540px;
}

body.day .model-rail::before,body.day .model-rail::after{border-color:rgba(107,78,163,.3) !important}
body.day .model-rail .rail-tick{color:rgba(107,78,163,.4) !important}

@media(max-width:980px){
  section.rail-left,section.rail-right{padding-left:22px;padding-right:22px}
  section .model-rail{
    position:relative !important;inset:auto !important;
    width:100% !important;height:340px;margin:0 0 22px !important;
  }
  .model-rail .rail-tick{writing-mode:horizontal-tb;left:14px;transform:none !important}
  .model-rail .rail-tick.top{top:10px}
  .model-rail .rail-tick.bot{bottom:10px;top:auto}
  .hero .model-rail{height:420px;min-height:0}
}
body.day .brand svg{filter:drop-shadow(0 1px 6px rgba(107,78,163,.4))}
body.day .brand-sub{color:rgba(107,78,163,.4)}