/* ============== T2ELVE / portfolio ============== */
:root{
  --cream:#f4f1ea;
  --cream-2:#ebe6da;
  --ink:#0c0c0b;
  --ink-2:#1a1a17;
  --muted:#6b6760;
  --rule:rgba(12,12,11,.14);
  --accent: oklch(0.62 0.12 60);   /* warm tobacco */
  --serif:"Instrument Serif", "Times New Roman", serif;
  --sans:"Archivo", system-ui, sans-serif;
  --mono:"JetBrains Mono", ui-monospace, monospace;
}
*{box-sizing:border-box;margin:0;padding:0;}
html,body{background:var(--cream);color:var(--ink);}
html{scroll-behavior:auto;}
body{
  font-family:var(--sans);
  font-weight:500;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;   /* "clip" (not "hidden") so position:sticky descendants still work */
  cursor:none;
}
@media (pointer:coarse){ body{cursor:auto;} .cursor,.cursor-dot{display:none;} }

a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
em,.italic{font-family:var(--serif);font-style:italic;font-weight:400;}
.underline{position:relative;}
.underline::after{content:"";position:absolute;left:0;right:0;bottom:-.06em;height:1px;background:currentColor;}

/* ============== preloader ============== */
.preloader{
  position:fixed;inset:0;z-index:200;background:var(--ink);
  display:block;overflow:hidden;
  color:var(--cream);
}
.pre-bg{
  position:absolute;inset:0;
  background:
    radial-gradient(40% 50% at 50% 40%, oklch(0.6 0.16 60 / .12), transparent 70%),
    radial-gradient(60% 60% at 50% 60%, oklch(0.5 0.16 240 / .08), transparent 70%);
  filter:blur(20px);
}
.pre-grid{
  position:absolute;inset:0;
  display:grid;grid-template-columns:repeat(12,1fr);grid-template-rows:repeat(8,1fr);
  pointer-events:none;
}
.pre-grid .pg-cell{border-right:1px solid rgba(244,241,234,.04);border-bottom:1px solid rgba(244,241,234,.04);opacity:0;}

.pre-corners{position:absolute;inset:0;pointer-events:none;}
.pc{
  position:absolute;font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:rgba(244,241,234,.6);
  opacity:0;transform:translateY(6px);
}
.pc.tl{top:24px;left:24px;}
.pc.tr{top:24px;right:24px;}
.pc.bl{bottom:24px;left:24px;}
.pc.br{bottom:24px;right:24px;}

.pre-stage{
  position:relative;height:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:36px;
}
.pre-cycle{
  position:absolute;top:30%;left:50%;transform:translate(-50%,-50%);
  font-family:var(--mono);font-size:11px;letter-spacing:.32em;color:rgba(244,241,234,.55);
  width:320px;text-align:center;line-height:1.6;
}
.pre-cycle .pc-w{display:inline-block;will-change:transform,filter,opacity;}
.pre-logo{
  font-family:var(--sans);font-weight:900;
  font-size:clamp(60px,9vw,160px);letter-spacing:-.05em;line-height:.85;
  display:flex;color:var(--cream);
  text-transform:lowercase;
}
.pl-ch{
  display:inline-block;
  font-variant-ligatures:none;
  will-change:transform,filter,opacity;
}
.pl-dot{color:var(--accent);}

.pre-bar{width:min(420px,60vw);height:1px;background:rgba(244,241,234,.14);overflow:hidden;position:relative;}
.pre-bar-fill{height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--cream));}

.pre-meta{
  width:min(420px,60vw);
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:rgba(244,241,234,.85);
}
.pm-l{text-align:left;}
.pm-c{text-align:center;color:rgba(244,241,234,.55);}
.pm-r{text-align:right;color:var(--accent);}

.pre-shutter{
  position:absolute;left:0;right:0;height:50%;background:var(--ink);z-index:5;
  transform:scaleY(0);transform-origin:center;
  pointer-events:none;
}
.pre-shutter-top{top:0;transform-origin:top;}
.pre-shutter-bot{bottom:0;transform-origin:bottom;}

/* ============== cursor ============== */
.cursor{position:fixed;top:0;left:0;width:36px;height:36px;border:1px solid var(--ink);border-radius:50%;
  transform:translate(-50%,-50%);pointer-events:none;z-index:500;
  transition:width .35s,height .35s,background .35s,border-color .35s, color .35s;
  mix-blend-mode:difference;border-color:#fff;color:#fff;
  display:flex;align-items:center;justify-content:center;
}
.cursor-dot{position:fixed;top:0;left:0;width:5px;height:5px;background:#fff;border-radius:50%;
  transform:translate(-50%,-50%);pointer-events:none;z-index:501;mix-blend-mode:difference;}
.cursor.is-hover{width:72px;height:72px;background:rgba(255,255,255,.06);}
.cursor.is-open{
  width:120px;height:120px;background:#f4f1ea;border-color:#f4f1ea;
  color:#0c0c0b;mix-blend-mode:normal;
}
.cursor.is-close{
  width:120px;height:120px;background:oklch(0.62 0.18 25);border-color:oklch(0.62 0.18 25);
  color:#f4f1ea;mix-blend-mode:normal;
}
.cursor.is-drag{
  width:120px;height:120px;background:transparent;border-color:#f4f1ea;color:#f4f1ea;mix-blend-mode:normal;
}
.cursor.is-link{
  width:130px;height:130px;
  background:var(--accent);border-color:var(--accent);
  color:#f4f1ea;mix-blend-mode:normal;
  backdrop-filter:blur(2px);
}
.cursor.is-link .cursor-label{
  opacity:1;
  font-family:var(--sans);font-weight:900;
  font-size:18px;letter-spacing:0;
  text-transform:uppercase;
  filter:blur(1.6px);
  transform:translateY(0);
  text-align:center;line-height:1;
}
.cursor.is-link .cursor-dot{display:none;}
.cursor-label{
  font-family:var(--mono);font-size:10px;letter-spacing:.18em;
  opacity:0;transition:opacity .25s;
  pointer-events:none;
}
.cursor.is-open .cursor-label,
.cursor.is-close .cursor-label,
.cursor.is-drag .cursor-label{opacity:1;}
.cursor.is-open .cursor-dot,
.cursor.is-close .cursor-dot{display:none;}

/* ============== nav ============== */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:grid;grid-template-columns:auto 1fr auto;align-items:baseline;
  padding:22px 32px;gap:24px;
  font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--ink);
  mix-blend-mode:difference;color:#f4f1ea;
}
.nav-mark{
  display:flex;align-items:baseline;gap:10px;cursor:none;
  text-decoration:none;color:inherit;
  font-family:var(--mono);font-size:11px;letter-spacing:.06em;
  white-space:nowrap;line-height:1;
}
.nav-links{align-items:baseline;line-height:1;}
.nav-time{align-items:baseline;line-height:1;}
.nm-mono{
  font-family:var(--sans);font-weight:900;letter-spacing:-.04em;
  font-size:18px;text-transform:lowercase;
  display:inline-flex;align-items:baseline;
  line-height:1;
}
.nm-mono .nm-ch{
  display:inline-block;
  transform-origin:50% 80%;
  transition:transform .35s cubic-bezier(.7,0,.2,1), color .35s;
  will-change:transform;
}
.nm-mono .nm-two{color:var(--accent);}
.nm-mono .nm-dot{color:var(--accent);}
.nav-mark:hover .nm-ch{animation:nmJitter .8s ease-in-out;}
.nav-mark:hover .nm-ch:nth-child(1){animation-delay:0ms;}
.nav-mark:hover .nm-ch:nth-child(2){animation-delay:40ms;}
.nav-mark:hover .nm-ch:nth-child(3){animation-delay:80ms;}
.nav-mark:hover .nm-ch:nth-child(4){animation-delay:120ms;}
.nav-mark:hover .nm-ch:nth-child(5){animation-delay:160ms;}
.nav-mark:hover .nm-ch:nth-child(6){animation-delay:200ms;}
.nav-mark:hover .nm-ch:nth-child(7){animation-delay:240ms;}
@keyframes nmJitter{
  0%   { transform:translateY(0)    skewX(0deg)  scale(1); }
  30%  { transform:translateY(-120%) skewX(-12deg) scale(1.05); }
  31%  { transform:translateY(120%)  skewX(12deg)  scale(.95); }
  100% { transform:translateY(0)    skewX(0deg)  scale(1); }
}
.nm-badge{
  display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;border-radius:50%;
  border:1px solid currentColor;
  font-family:var(--mono);font-size:9px;letter-spacing:.04em;font-weight:700;
  position:relative;
  transition:transform .4s cubic-bezier(.7,0,.2,1);
}
.nm-badge::before{
  content:"";position:absolute;inset:-1px;border-radius:50%;
  border:1px solid var(--accent);opacity:0;transform:scale(.6);
  transition:opacity .4s, transform .4s cubic-bezier(.7,0,.2,1);
}
.nav-mark:hover .nm-badge{transform:rotate(360deg) scale(1.12);}
.nav-mark:hover .nm-badge::before{opacity:1;transform:scale(1.4);}
.nm-tag{opacity:.7;white-space:nowrap;}
@media (max-width:1100px){ .nm-tag{display:none;} }
@media (max-width:560px){ .nav-time{display:none;} }
.nav-links{display:flex;gap:28px;justify-content:center;}
.nav-links a{position:relative;}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .4s cubic-bezier(.7,0,.2,1);}
.nav-links a:hover::after{transform:scaleX(1);}
.nav-time{display:flex;gap:10px;align-items:center;justify-content:flex-end;}
.nav-dot{width:5px;height:5px;border-radius:50%;background:currentColor;}

/* ============== HERO ============== */
.hero{
  position:relative;min-height:100vh;padding:120px 32px 40px;
  display:flex;flex-direction:column;justify-content:space-between;
  overflow:hidden;
}
.hero-grid{position:absolute;inset:0;display:grid;grid-template-columns:repeat(6,1fr);pointer-events:none;}
.hero-grid span{border-right:1px solid var(--rule);height:100%;}
.hero-grid span:last-child{border-right:0;}

.hero-top{display:flex;justify-content:space-between;align-items:flex-start;font-family:var(--mono);font-size:11px;letter-spacing:.06em;}
.hero-tag{display:flex;align-items:center;gap:10px;padding:8px 12px;border:1px solid var(--rule);border-radius:99px;background:rgba(255,255,255,.4);backdrop-filter:blur(8px);}
.hero-tag .dot{width:6px;height:6px;border-radius:50%;background:#3aa66f;box-shadow:0 0 0 4px rgba(58,166,111,.18);}
.hero-coord{text-align:right;line-height:1.5;color:var(--muted);}

.hero-title{
  font-family:var(--sans);font-weight:900;
  font-size:clamp(56px, 13.5vw, 220px);
  line-height:.88;letter-spacing:-.04em;
  text-transform:lowercase;
  margin:auto 0;
}
.hero-title .line{display:block;overflow:hidden;}
.hero-title .word{display:inline-block;}
.hero-title .italic{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.02em;}
.hero-title .word.cycle{
  position:relative;display:inline-block;vertical-align:baseline;
  overflow:hidden;line-height:.88;
}
.cyc-current{display:inline-block;will-change:transform,filter,opacity;}

.hero-bottom{display:grid;grid-template-columns:1.5fr auto;gap:60px;align-items:flex-end;}
.hero-lede{font-family:var(--serif);font-size:clamp(18px,1.8vw,26px);line-height:1.35;max-width:60ch;color:var(--ink);}
.hero-scroll{display:flex;flex-direction:column;align-items:center;gap:10px;font-family:var(--mono);font-size:10px;letter-spacing:.2em;animation:bob 2.4s ease-in-out infinite;}
@keyframes bob{0%,100%{transform:translateY(0);}50%{transform:translateY(8px);}}

/* ============== MANIFESTO ============== */
.manifesto{
  padding:200px 32px 220px;position:relative;
  background:var(--cream);
}
.mani-meta{display:flex;gap:18px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--muted);margin-bottom:80px;}
.mani-text{
  font-family:var(--sans);font-weight:500;
  font-size:clamp(34px,5.6vw,92px);line-height:1.04;letter-spacing:-.02em;
  text-wrap:pretty;max-width:24ch;
}
.mani-text .mw{display:inline-block;opacity:.18;transition:opacity .6s cubic-bezier(.5,0,.2,1), filter .6s cubic-bezier(.5,0,.2,1); filter:blur(6px);}
.mani-text .mw.in{opacity:1;filter:blur(0);}
.mani-text .italic{font-family:var(--serif);font-style:italic;font-weight:400;}
.mani-text .underline::after{background:var(--ink);}
.mani-foot{display:flex;justify-content:space-between;margin-top:80px;font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--muted);border-top:1px solid var(--rule);padding-top:22px;}

/* ============== HORIZONTAL SCROLL ============== */
.hwrap{
  position:relative;
  background:var(--ink);color:var(--cream);
  height: 600vh; /* long enough so the pinned track scrolls horizontally */
}
.hsticky{position:sticky;top:0;height:100vh;overflow:hidden;}
.htrack{display:flex;height:100%;will-change:transform;}
.hpanel{
  flex:0 0 auto;width:80vw;max-width:1200px;height:100%;
  display:flex;flex-direction:column;justify-content:center;
  padding:120px 80px;position:relative;
}
.hpanel-intro,.hpanel-outro{width:90vw;padding:120px 100px;}
.hpanel-intro{justify-content:center;}
.hp-meta,.ho-meta{display:flex;gap:18px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:rgba(244,241,234,.55);margin-bottom:30px;}
.hp-title,.hpanel-outro h3{
  font-family:var(--sans);font-weight:900;
  font-size:clamp(56px,8vw,140px);line-height:.9;letter-spacing:-.03em;text-transform:lowercase;
}
.hp-title em,.hpanel-outro h3 em{font-family:var(--serif);font-style:italic;font-weight:400;}
.hp-sub,.hpanel-outro p{margin-top:28px;font-family:var(--serif);font-size:22px;line-height:1.4;color:rgba(244,241,234,.7);max-width:42ch;}

.card{
  width:75vw;max-width:1100px;
  display:grid;grid-template-columns:1.3fr 1fr;gap:48px;
  padding:80px 60px;
}
.card-img{
  position:relative;border-radius:4px;overflow:hidden;
  aspect-ratio: 4/5;
  display:flex;align-items:center;justify-content:center;
}
.card-img::before{
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(45deg, rgba(255,255,255,.04) 0 2px, transparent 2px 14px);
  pointer-events:none;
}
.ph-shape{width:46%;aspect-ratio:1/1;}
.ph-circle{border-radius:50%;}
.ph-bar{width:14%;height:60%;}
.ph-square{transform:rotate(0);}
.ph-ring{border:2px solid currentColor;background:none!important;border-radius:50%;}
.ph-arch{height:60%;width:40%;border-top-left-radius:999px;border-top-right-radius:999px;}
.ph-tri{width:0;height:0;background:none!important;border-left:90px solid transparent;border-right:90px solid transparent;border-bottom:160px solid var(--cream);}
.ph-label{position:absolute;left:18px;bottom:14px;font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:rgba(244,241,234,.7);}

.card-meta{display:flex;flex-direction:column;justify-content:center;gap:18px;}
.card-num{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:rgba(244,241,234,.5);}
.card-meta h4{font-family:var(--sans);font-weight:800;font-size:clamp(32px,3.4vw,52px);line-height:1;letter-spacing:-.02em;}
.card-meta p{font-family:var(--serif);font-size:20px;line-height:1.4;color:rgba(244,241,234,.78);max-width:36ch;}
.card-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px;}
.card-tags span{font-family:var(--mono);font-size:10px;letter-spacing:.1em;padding:6px 10px;border:1px solid rgba(244,241,234,.25);border-radius:99px;color:rgba(244,241,234,.75);}

/* ============== TWELVE / DEBLUR ============== */
.twelve{
  position:relative;background:var(--ink);color:var(--cream);
  height:320vh;
}
.tw-sticky{position:sticky;top:0;height:100vh;overflow:hidden;}
.tw-stage{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center;}
.tw-noise{
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse at 30% 30%, rgba(244,241,234,.07), transparent 60%),
    radial-gradient(ellipse at 70% 80%, rgba(216,201,165,.05), transparent 60%);
  pointer-events:none;
}
.tw-twelve{
  font-family:var(--sans);font-weight:900;
  font-size:60vw;
  line-height:.78;letter-spacing:-.06em;
  color:var(--cream);
  transform:scale(.16);
  filter:blur(96px);
  will-change:transform,filter;
}
.tw-twelve .tw-dot{display:inline-block;margin-left:-.05em;}

.tw-cap{position:absolute;font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:rgba(244,241,234,.55);display:flex;gap:10px;}
.tw-cap.top-left{top:32px;left:32px;}
.tw-cap.top-right{top:32px;right:32px;}
.tw-cap.bot-left{bottom:60px;left:32px;}
.tw-cap.bot-right{bottom:60px;right:32px;}

.tw-ticker{position:absolute;bottom:18px;left:0;right:0;display:flex;gap:18px;white-space:nowrap;font-family:var(--serif);font-style:italic;font-size:14px;color:rgba(244,241,234,.4);will-change:transform;}
.tw-ticker span{flex:0 0 auto;}

/* ============== INDEX ============== */
.index{padding:200px 32px 120px;background:var(--cream);}
.ix-head{display:flex;justify-content:space-between;font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--muted);border-bottom:1px solid var(--rule);padding-bottom:18px;margin-bottom:8px;}
.ix-head>div{display:flex;gap:18px;}
.ix-list{list-style:none;}
.ix-list li{
  display:grid;grid-template-columns:80px 1fr 200px 80px;align-items:center;
  padding:28px 0;border-bottom:1px solid var(--rule);
  font-family:var(--sans);font-weight:500;
  position:relative;cursor:none;
  transition:background .4s, padding .5s cubic-bezier(.7,0,.2,1);
}
.ix-list li:hover{padding-left:24px;}
.ix-n{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--muted);}
.ix-t{font-size:clamp(26px,3.4vw,52px);font-weight:800;letter-spacing:-.02em;line-height:1;transition:transform .5s cubic-bezier(.7,0,.2,1), filter .5s;}
.ix-list li:hover .ix-t{transform:translateX(8px);font-style:italic;font-family:var(--serif);font-weight:400;}
.ix-c{font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--muted);text-align:right;}
.ix-y{font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--muted);text-align:right;}

/* ============== CONTACT ============== */
.contact{background:var(--ink);color:var(--cream);padding:160px 32px 0;position:relative;overflow:hidden;}
.contact::before{
  content:"";position:absolute;left:0;right:0;top:0;height:0;background:var(--cream);
  transform-origin:top;z-index:0;
}
.ct-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:80px;align-items:start;padding-bottom:140px;border-bottom:1px solid rgba(244,241,234,.12);position:relative;z-index:1;}
.ct-h .ct-line{display:block;overflow:hidden;line-height:.95;}
.ct-h .ct-line > span{display:inline-block;transform:translateY(110%);will-change:transform;}
.ct-h.in .ct-line > span{transform:translateY(0);transition:transform 1s cubic-bezier(.7,0,.2,1);}
.ct-h.in .ct-line:nth-child(2) > span{transition-delay:.08s;}
.ct-mail{position:relative;}
.ct-mail::before{
  content:"";position:absolute;left:0;right:0;bottom:0;height:100%;background:var(--accent);
  transform:scaleX(0);transform-origin:left;transition:transform 1s cubic-bezier(.7,0,.2,1);
  z-index:-1;
}
.contact.in .ct-mail::before{transform:scaleX(1);transition-delay:.6s;}
.ct-block{opacity:0;transform:translateY(20px);filter:blur(10px);transition:opacity .8s, transform .8s cubic-bezier(.7,0,.2,1), filter .8s;}
.contact.in .ct-block{opacity:1;transform:translateY(0);filter:blur(0);}
.contact.in .ct-block:nth-child(1){transition-delay:.4s;}
.contact.in .ct-block:nth-child(2){transition-delay:.5s;}
.contact.in .ct-block:nth-child(3){transition-delay:.6s;}
.ct-meta{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:rgba(244,241,234,.55);}
.ct-h{font-family:var(--sans);font-weight:900;font-size:clamp(46px,7vw,120px);line-height:.9;letter-spacing:-.03em;margin-top:24px;text-transform:lowercase;}
.ct-h em{font-family:var(--serif);font-style:italic;font-weight:400;}
.ct-mail{display:inline-block;margin-top:48px;font-family:var(--serif);font-size:clamp(28px,4vw,60px);font-style:italic;border-bottom:1px solid rgba(244,241,234,.4);padding-bottom:6px;}
.ct-note{margin-top:30px;font-family:var(--serif);font-size:20px;color:rgba(244,241,234,.65);max-width:36ch;}
.ct-right{display:flex;flex-direction:column;gap:36px;padding-top:60px;}
.ct-block{display:flex;flex-direction:column;gap:10px;font-family:var(--mono);font-size:13px;line-height:1.6;letter-spacing:.04em;color:rgba(244,241,234,.78);}
.ct-block .ct-k{font-size:10px;letter-spacing:.18em;color:rgba(244,241,234,.45);}
.ct-block a{display:block;}

.marquee{overflow:hidden;border-bottom:1px solid rgba(244,241,234,.12);}
.mq-track{display:flex;gap:36px;padding:30px 0;white-space:nowrap;font-family:var(--sans);font-weight:900;font-size:clamp(48px,8vw,140px);letter-spacing:-.02em;text-transform:uppercase;will-change:transform;}
.mq-dot{font-size:.5em;align-self:center;color:var(--accent);}

.footer{display:flex;justify-content:space-between;padding:30px 0 40px;font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:rgba(244,241,234,.5);}

/* ============== SCROLL PROGRESS BAR ============== */
.scroll-progress{
  position:fixed;top:0;left:0;height:2px;width:0;
  background:linear-gradient(90deg, transparent, var(--ink) 30%, var(--ink) 70%, transparent);
  z-index:99;pointer-events:none;
  mix-blend-mode:difference;filter:invert(1);
}

/* ============== SECTION INDICATOR ============== */
.sect-indicator{
  position:fixed;right:24px;top:50%;transform:translateY(-50%);
  z-index:90;display:flex;flex-direction:column;gap:6px;
  mix-blend-mode:difference;color:#f4f1ea;
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  opacity:0;pointer-events:none;transition:opacity .6s ease;
}
.sect-indicator.show{opacity:1;}
.sect-row{display:flex;align-items:center;gap:10px;justify-content:flex-end;opacity:.32;transition:opacity .5s, transform .5s cubic-bezier(.7,0,.2,1);}
.sect-row .sect-n{font-weight:700;}
.sect-row .sect-l{position:relative;padding-right:18px;}
.sect-row .sect-l::after{content:"";position:absolute;right:0;top:50%;width:10px;height:1px;background:currentColor;}
.sect-row.active{opacity:1;transform:translateX(-6px);}
.sect-row.active .sect-l::after{width:24px;}

/* ============== HERO PARALLAX EXTRAS ============== */
.hero-watermark{
  position:absolute;left:50%;top:55%;transform:translate(-50%,-50%);
  font-family:var(--sans);font-weight:900;font-size:78vw;line-height:.8;letter-spacing:-.06em;
  color:transparent;
  -webkit-text-stroke:1px rgba(12,12,11,.08);
  pointer-events:none;z-index:0;
  will-change:transform;
}
.hero-orb{
  position:absolute;border-radius:50%;
  filter:blur(60px);opacity:.55;pointer-events:none;z-index:0;
  will-change:transform;
}
.hero-orb-a{width:420px;height:420px;top:-8%;right:-6%;background:oklch(0.78 0.06 60);opacity:.42;}
.hero-orb-b{width:320px;height:320px;bottom:-10%;left:-4%;background:oklch(0.74 0.05 240);opacity:.28;}
.hero-aster{display:none;}
.hero-stamp{
  position:absolute;right:7%;top:24%;
  width:220px;height:220px;
  pointer-events:none;z-index:0;
  will-change:transform;
  color:var(--ink);
}
.hs-svg{width:100%;height:100%;overflow:visible;}
.hs-rotate{transform-origin:100px 100px;animation:hsSpin 22s linear infinite;}
@keyframes hsSpin{to{transform:rotate(360deg);}}
.hs-text{font-family:var(--mono);font-size:11px;letter-spacing:.32em;fill:var(--ink);text-transform:uppercase;}
.hs-ring{fill:none;stroke:var(--ink);stroke-width:1;stroke-dasharray:2 4;opacity:.4;}
.hs-center{
  font-family:var(--sans);font-weight:900;font-size:46px;letter-spacing:-.04em;
  fill:var(--ink);text-anchor:middle;
}
@media (max-width:900px){ .hero-stamp{width:140px;height:140px;right:4%;top:18%;} }
.hero > *:not(.hero-grid):not(.hero-watermark):not(.hero-orb):not(.hero-stamp){position:relative;z-index:1;}

/* ============== CARDS — open affordance ============== */
.card{cursor:none;}
.card-cta{
  position:absolute;right:18px;top:14px;
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;
  padding:6px 10px;border:1px solid rgba(244,241,234,.32);border-radius:99px;
  color:rgba(244,241,234,.85);backdrop-filter:blur(6px);background:rgba(0,0,0,.18);
}
.card-img{transition:transform .6s cubic-bezier(.7,0,.2,1);}
.card:hover .card-img{transform:translateY(-6px);}
.ph-shape{will-change:transform;transition:transform .8s cubic-bezier(.5,0,.2,1);}

/* ============== TWELVE — AURORA + GRID ============== */
.tw-aurora{
  position:absolute;inset:-20%;
  background:
    radial-gradient(40% 50% at 30% 40%, oklch(0.55 0.16 280 / .55), transparent 60%),
    radial-gradient(35% 45% at 70% 60%, oklch(0.62 0.14 30 / .45), transparent 60%),
    radial-gradient(25% 35% at 50% 80%, oklch(0.58 0.16 200 / .35), transparent 60%);
  filter:blur(60px);
  animation:auroraDrift 22s ease-in-out infinite alternate;
  mix-blend-mode:screen;opacity:.85;
}
@keyframes auroraDrift{
  0%   { transform:translate(0,0) rotate(0deg); }
  50%  { transform:translate(3%,-2%) rotate(8deg); }
  100% { transform:translate(-2%,3%) rotate(-6deg); }
}
.tw-grid{
  position:absolute;inset:0;
  background-image:
    linear-gradient(to right, rgba(244,241,234,.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(244,241,234,.045) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(circle at center, black 40%, transparent 75%);
  -webkit-mask-image: radial-gradient(circle at center, black 40%, transparent 75%);
  pointer-events:none;
}

/* ============== INDEX — futuristic row ============== */
.ix-list li{position:relative;overflow:hidden;}
.ix-list li::before{
  content:"";position:absolute;left:0;top:0;height:100%;width:0;
  background:var(--ink);z-index:-1;
  transition:width .55s cubic-bezier(.7,0,.2,1);
}
.ix-list li:hover{color:var(--cream);}
.ix-list li:hover::before{width:100%;}
.ix-list li:hover .ix-n,.ix-list li:hover .ix-c,.ix-list li:hover .ix-y{color:rgba(244,241,234,.65);}

/* ============== PROJECT DETAIL OVERLAY ============== */
.proj{
  position:fixed;inset:0;z-index:400;
  pointer-events:none;visibility:hidden;
}
.proj.open{pointer-events:auto;visibility:visible;}
.proj-curtain{
  position:absolute;inset:0;background:var(--ink);
  clip-path:circle(0% at 50% 50%);
}
.proj.open .proj-curtain{
  /* clip-path is driven by GSAP */
}
.proj-scroll{
  position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;
  color:var(--cream);
  scrollbar-width:thin;scrollbar-color:rgba(244,241,234,.25) transparent;
}
.proj-scroll::-webkit-scrollbar{width:8px;}
.proj-scroll::-webkit-scrollbar-thumb{background:rgba(244,241,234,.2);border-radius:99px;}

.proj-bar{
  position:sticky;top:0;z-index:5;
  display:flex;justify-content:space-between;align-items:center;
  padding:22px 32px;
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  background:linear-gradient(to bottom, rgba(12,12,11,.95), rgba(12,12,11,0));
  backdrop-filter:blur(10px);
}
.proj-bar-l{display:flex;gap:18px;}
.proj-cat{color:rgba(244,241,234,.55);}
.proj-close{
  display:flex;align-items:center;gap:8px;
  font-family:inherit;font-size:11px;letter-spacing:.14em;
  background:none;border:1px solid rgba(244,241,234,.3);border-radius:99px;
  padding:8px 14px;color:inherit;cursor:none;
  transition:background .3s,border-color .3s,transform .3s;
}
.proj-close:hover{background:rgba(244,241,234,.08);border-color:rgba(244,241,234,.6);transform:scale(1.04);}

.proj-hero{padding:60px 32px 0;max-width:1400px;margin:0 auto;}
.proj-eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:rgba(244,241,234,.55);margin-bottom:30px;}
.proj-title{
  font-family:var(--sans);font-weight:900;
  font-size:clamp(56px,12vw,200px);line-height:.86;letter-spacing:-.04em;text-transform:lowercase;
}
.proj-lede{
  font-family:var(--serif);font-style:italic;font-size:clamp(22px,2.4vw,38px);line-height:1.32;
  color:rgba(244,241,234,.78);max-width:36ch;margin-top:36px;
}
.proj-cover{
  margin:80px 0 0;height:62vh;min-height:420px;border-radius:6px;overflow:hidden;
  position:relative;background:#1a1816;
  display:flex;align-items:center;justify-content:center;
}
.proj-cover::after{
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(45deg, rgba(255,255,255,.04) 0 2px, transparent 2px 14px);
}
.pc-shape{width:30%;aspect-ratio:1/1;background:var(--cream);border-radius:50%;
  filter:blur(0);transition:filter .8s;}
.pc-label{position:absolute;left:24px;bottom:20px;font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:rgba(244,241,234,.55);}

.proj-meta{
  max-width:1400px;margin:60px auto 0;padding:0 32px;
  display:grid;grid-template-columns:repeat(4,1fr);gap:24px;
  border-top:1px solid rgba(244,241,234,.16);
  border-bottom:1px solid rgba(244,241,234,.16);
  padding-top:24px;padding-bottom:24px;
  font-family:var(--mono);font-size:13px;letter-spacing:.04em;
}
.proj-meta>div{display:flex;flex-direction:column;gap:6px;}
.proj-meta span:first-child{font-size:10px;letter-spacing:.18em;color:rgba(244,241,234,.45);}

.proj-body{
  max-width:760px;margin:120px auto;padding:0 32px;
  display:flex;flex-direction:column;gap:28px;
  font-family:var(--serif);font-size:24px;line-height:1.45;color:rgba(244,241,234,.84);
}

.proj-gallery{
  max-width:1400px;margin:0 auto;padding:0 32px;
  display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:160px;gap:16px;
}
.pg-tile{border-radius:4px;position:relative;overflow:hidden;background:#1a1816;}
.pg-tile::after{
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(135deg, rgba(255,255,255,.04) 0 2px, transparent 2px 16px);
}
.pg-1{grid-column:span 4;grid-row:span 2;background:linear-gradient(135deg,#2c2a26,#1a1816);}
.pg-2{grid-column:span 2;grid-row:span 1;background:linear-gradient(135deg,#3a3530,#1f1d1b);}
.pg-3{grid-column:span 2;grid-row:span 1;background:linear-gradient(135deg,#252320,#0b0b0b);}
.pg-4{grid-column:span 3;grid-row:span 1;background:linear-gradient(135deg,#1f1d1b,#0b0b0b);}
.pg-5{grid-column:span 3;grid-row:span 1;background:linear-gradient(135deg,#2c2a26,#3a2f24);}

.proj-pal{
  max-width:1400px;margin:80px auto;padding:0 32px;
  display:grid;grid-template-columns:repeat(6,1fr);gap:0;
  border-radius:4px;overflow:hidden;
}
.proj-pal .sw{height:90px;display:flex;align-items:flex-end;padding:14px;
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;}

.proj-next{
  max-width:1400px;margin:0 auto 120px;padding:60px 32px 0;border-top:1px solid rgba(244,241,234,.16);
  display:flex;justify-content:space-between;align-items:center;
}
.pn-meta{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:rgba(244,241,234,.55);}
.pn-btn{
  display:flex;align-items:center;gap:24px;
  background:none;border:0;color:inherit;cursor:none;
  font-family:var(--sans);font-weight:900;font-size:clamp(40px,5vw,80px);
  letter-spacing:-.03em;text-transform:lowercase;
}
.pn-arrow{display:inline-block;transition:transform .5s cubic-bezier(.7,0,.2,1);}
.pn-btn:hover .pn-arrow{transform:translateX(20px);}

/* ============== PROJECT — extras: progress bar, side nav ============== */
.proj-progress{
  position:sticky;top:0;left:0;height:2px;width:0;
  background:linear-gradient(90deg, var(--accent), oklch(0.78 0.06 60));
  z-index:6;will-change:width;
  margin-bottom:-2px;
}
.proj-side{
  position:fixed;left:24px;top:50%;transform:translateY(-50%);
  z-index:8;display:flex;flex-direction:column;gap:6px;
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  opacity:0;transition:opacity .6s;
  pointer-events:none;
}
.proj.open .proj-side{opacity:1;pointer-events:auto;}
.ps-row{display:flex;align-items:center;gap:10px;color:rgba(244,241,234,.4);transition:color .4s,transform .4s cubic-bezier(.7,0,.2,1);cursor:none;}
.ps-row .ps-n{font-weight:700;}
.ps-row .ps-l{position:relative;padding-left:18px;}
.ps-row .ps-l::before{content:"";position:absolute;left:0;top:50%;width:10px;height:1px;background:currentColor;transition:width .4s;}
.ps-row.active{color:#f4f1ea;transform:translateX(6px);}
.ps-row.active .ps-l::before{width:24px;background:var(--accent);}

/* ============== PROJECT — quote ============== */
.proj-quote{
  font-family:var(--serif);font-style:italic;
  font-size:clamp(28px,3.6vw,52px);line-height:1.2;
  color:#f4f1ea;letter-spacing:-.01em;
  border-left:1px solid rgba(244,241,234,.25);
  padding-left:32px;
  text-wrap:balance;max-width:24ch;
  position:relative;
}
.pq-mark{font-family:var(--sans);font-weight:900;font-size:1.4em;color:var(--accent);line-height:0;display:inline-block;transform:translateY(.18em);}

/* ============== PROJECT — STATS ============== */
.proj-stats{max-width:1400px;margin:140px auto;padding:0 32px;}
.ps-head{display:flex;gap:18px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:rgba(244,241,234,.5);border-bottom:1px solid rgba(244,241,234,.14);padding-bottom:18px;margin-bottom:60px;}
.ps-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;}
.ps-cell{padding:30px 24px 30px 0;display:flex;flex-direction:column;gap:14px;border-right:1px solid rgba(244,241,234,.12);}
.ps-cell:last-child{border-right:0;}
.ps-num{font-family:var(--sans);font-weight:900;font-size:clamp(64px,8vw,140px);line-height:.9;letter-spacing:-.04em;}
.ps-cap{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:rgba(244,241,234,.6);max-width:18ch;}

/* ============== PROJECT — PROCESS (sticky scrollytelling) ============== */
.proj-process{height:300vh;position:relative;}
.pp-sticky{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;justify-content:center;padding:0 32px;max-width:1400px;margin:0 auto;overflow:hidden;}
.pp-head{display:flex;gap:18px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:rgba(244,241,234,.5);margin-bottom:60px;}
.pp-stage{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;min-height:420px;}
.pp-shape{
  width:100%;aspect-ratio:1/1;max-width:420px;justify-self:center;
  background:var(--cream);
  border-radius:8px;
  position:relative;overflow:hidden;
  transition:transform 1s cubic-bezier(.7,0,.2,1), border-radius 1s cubic-bezier(.7,0,.2,1), background 1s ease;
}
.pp-shape::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(45deg, rgba(12,12,11,.05) 0 2px, transparent 2px 16px);}
.pp-shape.s0{border-radius:8px;background:#cbb89a;}
.pp-shape.s1{border-radius:50%;background:#8d6a47;transform:scale(.7);}
.pp-shape.s2{border-radius:8px;background:#3a342c;transform:rotate(45deg) scale(.6);}
.pp-shape.s3{border-radius:8px;background:#f4f1ea;transform:scale(1);}
.pp-step{
  position:absolute;left:50%;width:50%;padding-left:32px;
  opacity:0;transform:translateY(40px) translateZ(0);filter:blur(20px);
  transition:opacity .6s,transform .6s cubic-bezier(.7,0,.2,1),filter .6s;
  display:flex;flex-direction:column;gap:14px;
}
.pp-step.active{opacity:1;transform:translateY(0);filter:blur(0);}
.pp-num{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--accent);}
.pp-step h4{font-family:var(--sans);font-weight:900;font-size:clamp(40px,5vw,76px);line-height:.95;letter-spacing:-.03em;text-transform:lowercase;}
.pp-step p{font-family:var(--serif);font-size:22px;line-height:1.4;color:rgba(244,241,234,.78);max-width:34ch;}

/* ============== PROJECT — body styling ============== */
.proj-body{
  display:grid;grid-template-columns:1fr;gap:40px;
}
.proj-body p:not(.proj-quote){
  font-family:var(--serif);font-size:24px;line-height:1.45;color:rgba(244,241,234,.84);
  max-width:38ch;
}
.proj-body p:nth-of-type(2){justify-self:end;text-align:left;}
.proj-body p:nth-of-type(3){justify-self:start;}

/* ============== PROJECT — marquee strip ============== */
.proj-marquee{overflow:hidden;border-top:1px solid rgba(244,241,234,.12);border-bottom:1px solid rgba(244,241,234,.12);margin:80px 0 0;}
.pm-track{display:flex;gap:36px;padding:30px 0;white-space:nowrap;font-family:var(--sans);font-weight:900;font-size:clamp(36px,5vw,80px);letter-spacing:-.02em;text-transform:uppercase;will-change:transform;}
.pm-track > span{flex:0 0 auto;color:rgba(244,241,234,.85);}
.pm-track > span:nth-child(2){color:rgba(244,241,234,.4);}
.pm-track > span:nth-child(3){color:rgba(244,241,234,.15);-webkit-text-stroke:1px rgba(244,241,234,.4);color:transparent;}

/* ============== PROJECT — split title chars ============== */
.proj-title .ch{display:inline-block;will-change:transform,opacity,filter;}

/* ============== PROJECT — body para word reveal ============== */
.proj-body p .w{display:inline-block;opacity:.18;filter:blur(8px);transition:opacity .55s, filter .55s;}
.proj-body p .w.in{opacity:1;filter:blur(0);}

/* ============== PROJECT — cover scale on scroll ============== */
.proj-cover{will-change:transform;}
.pc-shape{will-change:transform,filter;}

/* ============== PAGE TRANSITION CURTAIN ============== */
.page-curtain{
  position:fixed;inset:0;z-index:600;
  background:var(--ink);
  pointer-events:none;
  clip-path:inset(100% 0 0 0);
}

/* ============== responsive trims ============== */
@media (max-width:900px){
  .nav{grid-template-columns:1fr auto;}
  .nav-time{display:none;}
  .sect-indicator{display:none;}
  .hero-bottom{grid-template-columns:1fr;gap:30px;}
  .hero-aster{display:none;}
  .card{grid-template-columns:1fr;padding:60px 32px;width:88vw;}
  .hpanel{padding:80px 32px;width:88vw;}
  .ct-grid{grid-template-columns:1fr;gap:60px;}
  .ix-list li{grid-template-columns:60px 1fr 70px;}
  .ix-c{display:none;}
  .proj-gallery{grid-template-columns:repeat(2,1fr);}
  .pg-1,.pg-2,.pg-3,.pg-4,.pg-5{grid-column:span 2;grid-row:span 1;}
  .proj-meta{grid-template-columns:repeat(2,1fr);}
  .proj-pal{grid-template-columns:repeat(3,1fr);}
  .proj-next{flex-direction:column;align-items:flex-start;gap:24px;}
  .proj-side{display:none;}
  .ps-grid{grid-template-columns:repeat(2,1fr);}
  .ps-cell:nth-child(2){border-right:0;}
  .pp-stage{grid-template-columns:1fr;gap:30px;}
  .pp-step{position:relative;left:0;width:100%;padding-left:0;}
}

/* ============================================================
   T2ELVE — refinements (selection, nav alignment, mobile, etc.)
   ============================================================ */

/* ----- ::selection — serif + accent ----- */
::selection      { background: oklch(0.62 0.16 60); color: #f6f4ef; text-shadow: none; }
::-moz-selection { background: oklch(0.62 0.16 60); color: #f6f4ef; text-shadow: none; }
/* try forcing a different font where supported */
::selection      { font-family: var(--serif); font-style: italic; }

/* ----- header alignment fix ----- */
.nav{
  align-items:center;          /* used to be 'baseline' — caused logo to float above the row */
  padding:18px 32px;
}
.nav-mark{ align-items:center; }
.nav-links{ align-items:center; }
.nav-time{ align-items:center; }
.nm-mono{ line-height:1; }
.nm-badge{ flex:0 0 auto; }
.nav-links a.is-active::after{
  content:""; position:absolute; left:0; right:0; bottom:-4px; height:1px;
  background:currentColor; transform:scaleX(1);
}

/* ----- hero cycling word (index): lock width to widest variant ----- */
.hero-title .word.cycle{
  min-width: 6.5ch;            /* fits "repetition." in display font */
  text-align: left;
}
.hero-title .word.cycle .cyc-current{ display:inline-block; }

/* ----- touch / coarse pointer: no custom cursor, no preloader cursor:none ----- */
@media (hover:none), (pointer:coarse), (max-width:768px){
  html, body, *, *::before, *::after { cursor: auto !important; }
  a, button, .wk-row, .ix-list li, .nav-mark, .wkf-pill, .wkv, .card { cursor: pointer !important; }
  .cursor, .cursor-dot, .scroll-progress { display:none !important; }
  body { cursor: auto !important; }
}

/* ============== MOBILE — phone breakpoint ============== */
@media (max-width:700px){
  /* nav: condensed, two-row when needed */
  .nav{
    grid-template-columns:auto 1fr;
    padding:14px 18px;
    gap:14px;
    align-items:center;
  }
  .nav-mark{ gap:8px; font-size:10px; }
  .nm-mono{ font-size:15px; }
  .nm-badge{ width:18px; height:18px; font-size:8px; }
  .nm-tag, .nav-time{ display:none; }
  .nav-links{ gap:14px; font-size:10px; letter-spacing:.08em; }
  .nav-links a::after{ bottom:-3px; }

  /* hero */
  .hero{ padding:96px 20px 30px; }
  .hero-title{ font-size:clamp(48px,16vw,90px); }
  .hero-bottom{ grid-template-columns:1fr; gap:20px; }
  .hero-lede{ font-size:16px; }

  /* manifesto, twelve, index padding */
  .manifesto{ padding:80px 20px; }
  .index{ padding:120px 20px 80px; }
  .ix-head{ font-size:9px; flex-wrap:wrap; gap:8px; }
  .ix-list li{ grid-template-columns:50px 1fr 60px; gap:10px; padding:18px 0; }
  .ix-n{ font-size:11px; }
  .ix-t{ font-size:18px; }
  .ix-y{ font-size:11px; }

  /* twelve / ticker — keep horizontal scroll contained */
  .tw-sticky{ overflow:hidden; }
  .tw-twelve{ font-size:72vw; }
  .tw-cap{ font-size:9px; letter-spacing:.1em; }
  .tw-cap.top-left{ top:18px; left:18px; }
  .tw-cap.top-right{ top:18px; right:18px; }
  .tw-cap.bot-left{ bottom:36px; left:18px; }
  .tw-cap.bot-right{ bottom:36px; right:18px; }
  .tw-ticker{ font-size:12px; gap:12px; bottom:14px; }

  /* preloader */
  .preloader .pre-cycle{ font-size:10px; letter-spacing:.24em; width:80vw; }
  .preloader .pre-logo{ font-size:clamp(40px,16vw,80px); }
  .preloader .pre-meta{ font-size:9px; letter-spacing:.1em; width:80vw; }
  .preloader .pre-bar{ width:80vw; }
  .preloader .pc{ font-size:9px; }
  .preloader .pc.tl{ top:12px; left:12px; }
  .preloader .pc.tr{ top:12px; right:12px; }
  .preloader .pc.bl{ bottom:12px; left:12px; }
  .preloader .pc.br{ bottom:12px; right:12px; }
}

/* tiny phones */
@media (max-width:440px){
  .nav-links{ gap:10px; font-size:9px; }
  .nav-mark .nm-tag{ display:none; }
}

/* container guards — keep horizontal overflow contained AT THE SECTION,
   not on <html>/<body>, otherwise position:sticky breaks. */
.marquee{ overflow:hidden; }
.tw-sticky{ overflow:hidden; }
.wk-hero, .ab-hero, .ct-hero{ overflow:hidden; }

/* ============================================================
   T2ELVE — mobile hamburger nav + overlay
   ============================================================ */

/* burger button — desktop default: hidden */
.nav-burger{
  display:none;
  position:relative;
  width:36px;height:36px;
  background:transparent;border:0;padding:0;
  cursor:pointer;color:inherit;
  align-items:center;justify-content:center;
}
.nav-burger .nb-line{
  position:absolute;left:8px;right:8px;height:1.5px;background:currentColor;
  border-radius:1px;
  transition: transform .35s cubic-bezier(.7,0,.2,1), opacity .25s, top .35s cubic-bezier(.7,0,.2,1);
}
.nav-burger .nb-line:nth-child(1){ top:11px; }
.nav-burger .nb-line:nth-child(2){ top:17px; }
.nav-burger .nb-line:nth-child(3){ top:23px; }
.nav-burger.is-open .nb-line:nth-child(1){ top:17px; transform: rotate(45deg); }
.nav-burger.is-open .nb-line:nth-child(2){ opacity:0; transform: translateX(8px); }
.nav-burger.is-open .nb-line:nth-child(3){ top:17px; transform: rotate(-45deg); }

/* fullscreen overlay menu */
.nav-overlay{
  position:fixed;inset:0;z-index:150;
  pointer-events:none;
  opacity:0; visibility:hidden;
  transition: opacity .4s ease, visibility .4s;
}
.nav-overlay.is-open{ opacity:1; visibility:visible; pointer-events:auto; }
.nov-bg{
  position:absolute;inset:0;background:var(--ink);
  clip-path: inset(100% 0 0 0);
  transition: clip-path .65s cubic-bezier(.77,0,.18,1);
}
.nav-overlay.is-open .nov-bg{ clip-path: inset(0 0 0 0); }
.nov-corner{
  position:absolute;font-family:var(--mono);font-size:10px;letter-spacing:.18em;
  color:rgba(244,241,234,.55);text-transform:uppercase;
  opacity:0; transform: translateY(-6px);
  transition: opacity .4s .4s, transform .5s .4s cubic-bezier(.7,0,.2,1);
}
.nav-overlay.is-open .nov-corner{ opacity:1; transform: translateY(0); }
.nov-tl{ top:22px; left:22px; }
.nov-tr{ top:22px; right:22px; }
.nov-bl{ bottom:22px; left:22px; }
.nov-br{ bottom:22px; right:22px; }

.nov-links{
  position:absolute;inset:0;
  display:flex;flex-direction:column;justify-content:center;
  gap:6px;padding:80px 22px;
  list-style:none;
}
.nov-link{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:baseline;gap:18px;
  padding:14px 0;
  border-bottom:1px solid rgba(244,241,234,.12);
  font-family:var(--sans);font-weight:800;
  font-size:clamp(40px,12vw,72px);
  line-height:.95;letter-spacing:-.03em;
  color:rgba(244,241,234,.92);
  text-transform:lowercase;
  text-decoration:none;
  opacity:0; transform: translateY(40px);
  transition: opacity .5s ease, transform .6s cubic-bezier(.7,0,.2,1), color .25s, padding-left .35s cubic-bezier(.7,0,.2,1);
  transition-delay: calc(0.35s + var(--i, 0) * 0.06s);
}
.nav-overlay.is-open .nov-link{ opacity:1; transform: translateY(0); }
.nov-link:hover, .nov-link:focus-visible{ color:var(--accent); padding-left:10px; }
.nov-link.is-active{ color:var(--accent); }
.nov-link.is-active::before{ content:""; position:absolute; left:-22px; width:8px; height:8px; border-radius:50%; background:var(--accent); align-self:center; transform: translateY(-2px); }
.nov-n{
  font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:.18em;
  color:rgba(244,241,234,.5);text-transform:uppercase;
  align-self:center;
}
.nov-arrow{
  font-family:var(--sans);font-weight:400;font-size:24px;
  color:rgba(244,241,234,.4);
  transition: transform .35s cubic-bezier(.7,0,.2,1), color .25s;
}
.nov-link:hover .nov-arrow{ color:var(--accent); transform: translateX(8px); }

html.nav-locked, html.nav-locked body{ overflow:hidden !important; }

/* MOBILE — show burger, hide inline nav-links */
@media (max-width: 900px){
  .nav-burger{ display:inline-flex; }
  .nav-links{ display:none; }
  .nav{ grid-template-columns: 1fr auto; padding: 14px 18px; }
  .nav-time{ display:none; }
  /* shrink the wordmark so it fits */
  .nm-mono{ font-size: 16px; }
  .nm-tag{ display:none; }
  .nm-badge{ width:20px; height:20px; font-size:8px; }
  .nav-mark{ gap:8px; min-width:0; }
  .nav-mark > .nm-mono{ overflow:hidden; }
}

@media (max-width: 440px){
  .nm-mono{ font-size: 14px; }
  .nm-badge{ width:18px; height:18px; }
  .nav{ padding: 12px 14px; }
  .nov-link{ font-size:clamp(34px, 11vw, 56px); gap:12px; }
  .nov-corner{ font-size:9px; letter-spacing:.12em; }
}

/* desktop: keep burger hidden + inline nav visible (override earlier patches that
   tried to hide nav-links inside the 700px breakpoint) */
@media (min-width: 901px){
  .nav-burger{ display:none !important; }
  .nav-overlay{ display:none !important; }
}

/* ============================================================
   T2ELVE — nav reverted to mix-blend-mode (color-inverting)
   The header has no background or blur — it adapts to whatever
   section is behind it: white text on dark sections, dark text
   on cream sections. Stays always pinned (no hide-on-scroll).
   ============================================================ */
.nav{
  background: transparent !important;
  -webkit-backdrop-filter: none !important;
          backdrop-filter: none !important;
  mix-blend-mode: difference;
  color: #f4f1ea;
  border-bottom: 0 !important;
  box-shadow: none !important;
}
/* keep accent dots even under difference (they look great inverted, but we
   want them stable) — actually they DO invert nicely so leave them */

/* works-page sticky filter — same color-inverting trick */
.wk-filter{
  background: transparent !important;
  -webkit-backdrop-filter: none !important;
          backdrop-filter: none !important;
  mix-blend-mode: difference;
  color: #f4f1ea;
  border-bottom: 0;
}
/* filter pill outlines need a color that inverts well — set to cream so they
   become ink on cream and cream on ink */
.wk-filter .wkf-pill{
  border-color: rgba(244,241,234,.45);
  color: inherit;
  background: transparent;
}
.wk-filter .wkf-pill.is-active{
  /* under mix-blend-mode the dark fill inverts oddly on dark sections,
     so use a SUBTLE accent ring instead of a solid black pill */
  background: transparent;
  border-color: currentColor;
  box-shadow: inset 0 0 0 1px currentColor;
}
.wk-filter .wkf-toggle{
  border-color: rgba(244,241,234,.45);
}
.wk-filter .wkv.on{
  background: transparent;
  box-shadow: inset 0 0 0 1px currentColor;
}
.wk-filter .wkf-meta{ color: rgba(244,241,234,.6); }

/* ============================================================
   T2ELVE — late patches: mobile logo visibility + overlay close
   ============================================================ */

/* On phones the dramatic entry animation occasionally leaves the logo
   stuck at opacity:0 (GSAP from-tween initial state). Force the
   wordmark visible on mobile and let the animation be a no-op. */
@media (max-width: 900px){
  .nm-mono .nm-ch,
  .nm-badge,
  .nm-tag{
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
  }
  .nav-mark > .nm-mono{ overflow: visible; }   /* undo earlier overflow:hidden */
}

/* explicit close button inside the overlay (top-right) */
.nov-close{
  position: absolute;
  top: 14px; right: 14px;
  width: 44px; height: 44px;
  background: transparent;
  border: 1px solid rgba(244,241,234,.35);
  border-radius: 50%;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transform: scale(.85) rotate(-30deg);
  transition: opacity .4s .35s, transform .5s .35s cubic-bezier(.7,0,.2,1),
              border-color .25s, background .25s;
  z-index: 4;
}
.nov-close .nc-x{
  position: absolute;
  width: 18px; height: 1.5px; background: #f4f1ea; border-radius: 1px;
}
.nov-close .nc-x:nth-child(1){ transform: rotate(45deg); }
.nov-close .nc-x:nth-child(2){ transform: rotate(-45deg); }
.nav-overlay.is-open .nov-close{ opacity: 1; transform: scale(1) rotate(0deg); }
.nov-close:hover, .nov-close:focus-visible{
  background: rgba(244,241,234,.08);
  border-color: rgba(244,241,234,.7);
}

/* make the dim background of the overlay tappable to close — visual is
   already opaque, but we want clicks on padding areas to dismiss */
.nov-bg{ cursor: pointer; }

/* The overlay (z-index:150) covers the nav (z-index:100), so the burger
   inside the nav is unreachable while the menu is open. We hide the burger
   when open and rely on the explicit .nov-close button inside the overlay,
   positioned at exactly the same visual spot. */
.nav-burger.is-open{ opacity: 0; pointer-events: none; }
.nov-close{ top: 14px; right: 18px; }
@media (max-width: 440px){
  .nov-close{ top: 12px; right: 14px; width: 40px; height: 40px; }
  .nov-close .nc-x{ width: 16px; }
}

/* ============================================================
   T2ELVE — project overlay open state: lock background scroll
   ============================================================ */
html.proj-open, html.proj-open body{ overflow: hidden !important; }

/* ============================================================
   T2ELVE — real-image gallery (overlay)
   When the work has uploaded images, .proj-gallery switches from
   the abstract pg-tile placeholders to a clean image grid.
   ============================================================ */
/* (initial .proj-gallery.has-images definition — see consolidated block below) */
.proj-gallery.has-images{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 0 32px;
  max-width: 1600px;
  margin: 80px auto;
}
.proj-gallery.has-images .pg-img{
  position: relative;
  background-color: #1a1816;
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  border: 0;
  padding: 0;
  transition: transform .35s cubic-bezier(.7,0,.2,1);
}

/* ============================================================
   T2ELVE — cover image in the popup overlay
   When a work has a cover_image (or any image), the .proj-cover
   renders that image full-bleed instead of the abstract shape.
   ============================================================ */
.proj-cover.has-image{
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.proj-cover.has-image::after{
  background:
    linear-gradient(180deg, rgba(0,0,0,.08) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,.45) 100%),
    repeating-linear-gradient(45deg, rgba(255,255,255,.02) 0 2px, transparent 2px 14px);
}
.pc-shape.pc-hidden{ display: none !important; }
.proj-cover.has-image .pc-label{
  color: rgba(244,241,234,.92);
  text-shadow: 0 1px 6px rgba(0,0,0,.45);
}

/* ============================================================
   T2ELVE — cover image AS hero background (popup overlay)
   ============================================================ */
.proj-hero.has-cover-bg{
  position: relative;
  max-width: none;            /* full-bleed */
  padding: 96px max(32px, 6vw) 140px;
  min-height: 78vh;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
}
/* darkening so the title is always readable */
.proj-hero.has-cover-bg::before{
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg,
      rgba(8,8,7,.55) 0%,
      rgba(8,8,7,.15) 35%,
      rgba(8,8,7,.05) 55%,
      rgba(8,8,7,.65) 100%),
    radial-gradient(60% 60% at 50% 60%, rgba(0,0,0,.18), transparent 70%);
  pointer-events: none;
}
.proj-hero.has-cover-bg > *{ position: relative; z-index: 1; }
.proj-hero.has-cover-bg .proj-eyebrow{ color: rgba(244,241,234,.8); }
.proj-hero.has-cover-bg .proj-title{
  color: #f4f1ea;
  text-shadow: 0 2px 24px rgba(0,0,0,.45);
}
.proj-hero.has-cover-bg .proj-lede{
  color: rgba(244,241,234,.92);
  text-shadow: 0 1px 12px rgba(0,0,0,.45);
}
/* hide the secondary cover block when the hero already shows the image */
.proj-hero.has-cover-bg .proj-cover{ display: none; }

@media (max-width: 700px){
  .proj-hero.has-cover-bg{ padding: 96px 22px 80px; min-height: 70vh; }
}

/* ============================================================
   T2ELVE — popup process: mobile layout
   The sticky-scrub layout inside .proj-scroll (which is itself
   overflow-y:auto) is unreliable on phones — the active-step
   toggle never updated consistently. On mobile we drop the
   sticky/scrub idea entirely: all four steps stack vertically,
   readable, with a one-time entry stagger from the JS.
   ============================================================ */
@media (max-width: 900px){
  .proj-process{ height: auto !important; }
  .pp-sticky{
    position: relative !important; top: auto !important;
    height: auto !important; overflow: visible !important;
    padding: 60px 22px;
    display: block;
    max-width: 100%;
  }
  .pp-head{ margin-bottom: 28px; }
  .pp-stage{
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    min-height: 0;
  }
  .pp-shape{
    position: relative;
    width: min(48vw, 200px);
    aspect-ratio: 1/1;
    max-width: 200px;
    margin: 0 auto 28px;
    /* Mobile shape stays in the s0 variant (cream square); the morph
       animation is skipped here. */
    transform: none !important;
  }
  /* Override the desktop absolute / hidden state: every step is laid out
     in normal flow, visible, with a divider between them. JS adds an
     entry stagger on first view. */
  .pp-step{
    position: relative !important;
    left: auto !important; width: 100% !important;
    padding: 22px 0 22px 22px;
    border-top: 1px solid rgba(244,241,234,.14);
    opacity: 1;
    filter: none;
    transform: none;
    transition: none;
  }
  .pp-step:first-of-type{ border-top: 0; padding-top: 8px; }
  .pp-step.active{ /* no-op on mobile — every step is "active" */ }
  .pp-step::before{
    content: ""; position: absolute;
    left: 0; top: 26px; bottom: 22px; width: 1px;
    background: var(--accent);
  }
  .pp-step .pp-num{
    font-family: var(--mono); font-size: 11px; letter-spacing: .16em;
    color: var(--accent); margin-bottom: 8px;
  }
  .pp-step h4{ font-size: clamp(28px, 8vw, 44px); line-height: .96; }
  .pp-step p{ font-size: 16px; line-height: 1.45; max-width: 50ch; }
}
@media (max-width: 480px){
  .pp-shape{ width: 40vw; max-width: 160px; }
  .pp-step h4{ font-size: clamp(24px, 9vw, 38px); }
}

/* ============================================================
   T2ELVE — gallery polish (popup) + lightbox
   ============================================================ */

/* Override the earlier "18vw" auto-rows that came out too tall:
   each tile gets a fixed aspect ratio, the <img> covers it. */
.proj-gallery.has-images{
  grid-auto-rows: auto;
  padding: 0 32px;
}
.proj-gallery.has-images .pg-img{
  aspect-ratio: 4 / 3;
  background: #1a1816;
  background-image: none !important;   /* we render real <img> instead */
  border: 0;
  padding: 0;
  cursor: pointer;
}
.proj-gallery.has-images .pg-img img{
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
  transition: transform .9s cubic-bezier(.7,0,.2,1);
}
.proj-gallery.has-images .pg-img:hover img{ transform: scale(1.04); }
.proj-gallery.has-images .pg-img::after{
  /* keep the original gradient-on-hover treatment */
}
.proj-gallery.has-images .pg-img .pg-n{
  position: absolute; left: 18px; bottom: 14px;
  padding: 0;
}

/* The "feature" first tile stays bigger */
.proj-gallery.has-images .pg-img:nth-child(7n+1){
  grid-column: span 2; grid-row: span 2;
  aspect-ratio: auto;          /* let grid drive when spanning rows */
}
@media (max-width: 900px){
  .proj-gallery.has-images{ grid-template-columns: repeat(2, 1fr); padding: 0 22px; }
  .proj-gallery.has-images .pg-img:nth-child(7n+1){ grid-column: span 2; grid-row: span 1; aspect-ratio: 16/9; }
}
@media (max-width: 560px){
  .proj-gallery.has-images{ grid-template-columns: 1fr; padding: 0 18px; }
  .proj-gallery.has-images .pg-img:nth-child(n){ grid-column: span 1; grid-row: span 1; aspect-ratio: 4/3; }
}

/* ====== LIGHTBOX ====== */
.lb{
  position: fixed; inset: 0; z-index: 600;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .35s ease, visibility .35s;
}
.lb.is-open{ opacity: 1; visibility: visible; pointer-events: auto; }
.lb-bg{
  position: absolute; inset: 0;
  background: rgba(8,8,7,.92);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.lb-stage{
  position: absolute; inset: 6vmin;
  display: flex; align-items: center; justify-content: center;
  margin: 0;
  flex-direction: column; gap: 14px;
  pointer-events: none;
}
.lb-img{
  max-width: 100%; max-height: 100%;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 30px 80px -30px rgba(0,0,0,.6);
  transform: scale(.96);
  opacity: 0;
  transition: opacity .35s ease, transform .55s cubic-bezier(.7,0,.2,1);
}
.lb.is-open .lb-img{ opacity: 1; transform: scale(1); }
.lb-cap{
  font-family: var(--mono); font-size: 11px; letter-spacing: .16em;
  color: rgba(244,241,234,.6); text-transform: uppercase;
}
.lb-close{
  position: absolute; top: 22px; right: 22px;
  width: 44px; height: 44px; border-radius: 50%;
  background: transparent;
  border: 1px solid rgba(244,241,234,.4);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s, border-color .2s, transform .2s;
}
.lb-close:hover{ background: rgba(244,241,234,.08); border-color: rgba(244,241,234,.85); transform: scale(1.06); }
.lb-close span{
  position: absolute; width: 18px; height: 1.5px; background: #f4f1ea; border-radius: 1px;
}
.lb-close span:nth-child(1){ transform: rotate(45deg); }
.lb-close span:nth-child(2){ transform: rotate(-45deg); }
.lb-arrow{
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 52px; height: 52px; border-radius: 50%;
  background: rgba(244,241,234,.06);
  border: 1px solid rgba(244,241,234,.2);
  color: #f4f1ea;
  font-family: var(--sans); font-size: 22px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s, border-color .2s, transform .2s;
}
.lb-arrow:hover{ background: rgba(244,241,234,.16); border-color: rgba(244,241,234,.55); }
.lb-prev{ left: 22px; }
.lb-next{ right: 22px; }
.lb-prev:hover{ transform: translateY(-50%) translateX(-3px); }
.lb-next:hover{ transform: translateY(-50%) translateX(3px); }

html.lb-locked, html.lb-locked body{ overflow: hidden !important; }

@media (max-width: 700px){
  .lb-stage{ inset: 4vmin; }
  .lb-arrow{ width: 42px; height: 42px; font-size: 18px; }
  .lb-prev{ left: 10px; } .lb-next{ right: 10px; }
  .lb-close{ top: 14px; right: 14px; width: 40px; height: 40px; }
}

/* ============================================================
   T2ELVE — homepage card with featured image
   When a hpanel.card has its real cover photo set, .card-img
   gets .has-image. We add a darkening overlay so the /label
   and "OPEN ↗" CTA stay readable on any photo.
   ============================================================ */
.card-img.has-image{
  position: relative;
  background-color: #1a1816;       /* fallback while image loads */
}
.card-img.has-image::before{
  /* the original ::before is a striped texture; tone it down on photos */
  background: repeating-linear-gradient(45deg, rgba(255,255,255,.03) 0 2px, transparent 2px 18px) !important;
  opacity: .55;
}
.card-img.has-image::after{
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg,
      rgba(8,8,7,.35) 0%,
      rgba(8,8,7,.05) 40%,
      rgba(8,8,7,.05) 60%,
      rgba(8,8,7,.65) 100%);
  pointer-events: none;
  z-index: 0;
}
.card-img.has-image .ph-label,
.card-img.has-image .card-cta{
  position: relative;
  z-index: 1;
  color: rgba(244,241,234,.95) !important;
  text-shadow: 0 1px 8px rgba(0,0,0,.5);
}
.card-img.has-image .card-cta{
  border-color: rgba(244,241,234,.55) !important;
}
.hpanel.card:hover .card-img.has-image{
  filter: brightness(1.04);
}

/* ============================================================
   T2ELVE — language toggle button (HU / EN)
   Injected by app.js into the .nav between center and right.
   ============================================================ */
.lang-toggle{
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  padding: 0;
  background: transparent;
  border: 1px solid currentColor;
  border-radius: 50%;
  color: inherit;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 10px; font-weight: 700; letter-spacing: .12em;
  transition: background .2s, color .2s, transform .2s;
  margin-left: auto;
}
.lang-toggle:hover{
  background: currentColor;
  /* invert: the text becomes the page bg color, hand-tested against both
     dark and light sections via mix-blend-mode parent */
  color: var(--ink);
  transform: scale(1.05);
}
@media (max-width: 900px){
  .lang-toggle{ width: 30px; height: 30px; font-size: 9px; margin: 0 6px 0 auto; }
}

/* ============================================================
   T2ELVE — extend hero's canvas into the manifesto
   The manifesto sits directly below the hero on the homepage.
   We give it the same cream background, lock the explicit color
   so theme overrides can't break it, and overlay the same
   6-column vertical grid lines so the section reads as a
   continuation of the hero rather than a different surface.
   ============================================================ */
.hero{ background: var(--cream); }
.manifesto{
  background: var(--cream);
  position: relative;
  overflow: hidden; /* contain the orb echoes so they don't bleed into next section */
}
/* Vertical 6-column grid lines — same as the hero. */
.manifesto::before{
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, var(--rule) 1px, transparent 1px);
  background-size: calc(100% / 6) 100%;
  /* Don't draw a line at the very right edge — same as .hero-grid's last:child */
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 1px), transparent calc(100% - 1px));
          mask-image: linear-gradient(to right, #000 calc(100% - 1px), transparent calc(100% - 1px));
  z-index: 0;
}
/* Atmospheric orb echoes — mirror the hero's two coloured blobs but
   mirrored / re-positioned so the manifesto reads as a CONTINUATION
   of the hero canvas, not a flat cream slab. We use ::after for the
   warm orb (top-right) and a duplicate element technique via a
   pseudo on .mani-foot for the cool orb (bottom-left). */
.manifesto::after{
  content: "";
  position: absolute;
  /* Mirror hero-orb-a but flip side so the colour wraps across the seam */
  width: 420px; height: 420px; border-radius: 50%;
  top: -8%; left: -6%;
  background: oklch(0.78 0.06 60);
  opacity: .32;
  filter: blur(60px);
  pointer-events: none;
  z-index: 0;
  will-change: transform;
}
.manifesto > *{ position: relative; z-index: 1; }
/* Cool blue orb at the bottom-right, echoing hero-orb-b */
.manifesto .mani-foot{
  position: relative;
}
.manifesto .mani-foot::before{
  content: "";
  position: absolute;
  width: 320px; height: 320px; border-radius: 50%;
  bottom: -40%; right: -8%;
  background: oklch(0.74 0.05 240);
  opacity: .22;
  filter: blur(60px);
  pointer-events: none;
  z-index: -1;
}
@media (max-width: 900px){
  /* On mobile the section is narrower — shrink the orbs proportionally
     so they don't fight the type. */
  .manifesto::after{ width: 280px; height: 280px; }
  .manifesto .mani-foot::before{ width: 220px; height: 220px; }
}

/* ============================================================
   T2ELVE — theme picker (light / dark / auto)
   ============================================================ */
:root{
  /* light defaults already live in the original :root at the top of this
     file. We map them through theme tokens so dark mode can swap them. */
  --bg:     var(--cream);
  --bg-2:   var(--cream-2);
  --fg:     var(--ink);
  --fg-2:   var(--ink-2);
  --rule-c: var(--rule);
}

/* dark theme: explicit user pick, OR system prefers-color-scheme when auto */
html[data-theme="dark"], html[data-theme="auto"] {
  /* defaults stay light here; the @media below overrides when auto matches dark */
}
@media (prefers-color-scheme: dark){
  html[data-theme="auto"]{
    --bg:     #0c0c0b;
    --bg-2:   #18181a;
    --fg:     #f4f1ea;
    --fg-2:   #cfc8b7;
    --rule-c: rgba(244,241,234,.14);
    --cream:  #0c0c0b;
    --cream-2:#18181a;
    --ink:    #f4f1ea;
    --ink-2:  #cfc8b7;
    --rule:   rgba(244,241,234,.14);
    --muted:  #989384;
  }
}
html[data-theme="dark"]{
  --bg:     #0c0c0b;
  --bg-2:   #18181a;
  --fg:     #f4f1ea;
  --fg-2:   #cfc8b7;
  --rule-c: rgba(244,241,234,.14);
  --cream:  #0c0c0b;
  --cream-2:#18181a;
  --ink:    #f4f1ea;
  --ink-2:  #cfc8b7;
  --rule:   rgba(244,241,234,.14);
  --muted:  #989384;
}
/* the body/html bg color is var(--cream) which now flips correctly under dark */
html[data-theme="dark"] body,
html[data-theme="auto"] body{
  transition: background .4s ease, color .4s ease;
}

/* theme picker button — sits next to lang toggle */
.theme-toggle{
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  padding: 0; background: transparent;
  border: 1px solid currentColor; border-radius: 50%;
  color: inherit; cursor: pointer;
  margin-left: 6px;
  transition: background .2s, transform .2s, color .2s;
  position: relative;
}
.theme-toggle:hover{ transform: scale(1.05); }
.theme-toggle .tt-icon{
  width: 14px; height: 14px;
  border-radius: 50%;
  background: currentColor;
  position: relative;
  transition: transform .35s cubic-bezier(.7,0,.2,1), box-shadow .35s;
}
/* light → full disc */
html[data-theme="light"] .theme-toggle .tt-icon{ box-shadow: inset 0 0 0 7px transparent; }
/* dark → crescent (use box-shadow with offset) */
html[data-theme="dark"]  .theme-toggle .tt-icon{ box-shadow: inset 4px -4px 0 0 var(--bg); transform: rotate(-30deg); }
/* auto → half */
html[data-theme="auto"]  .theme-toggle .tt-icon{ box-shadow: inset -7px 0 0 0 var(--bg); }

@media (max-width: 900px){
  .theme-toggle{ width: 30px; height: 30px; margin: 0 6px; }
}

/* ============================================================
   T2ELVE — page transition curtain
   ============================================================ */
.pt-curtain{
  position: fixed; inset: 0;
  background: var(--ink, #0c0c0b);
  z-index: 999;
  pointer-events: none;
  transform-origin: top;
  clip-path: inset(100% 0 0 0);
  transition: clip-path .55s cubic-bezier(.77,0,.18,1);
}
.pt-curtain.is-on{ clip-path: inset(0 0 0 0); pointer-events: auto; }

/* ============================================================
   T2ELVE — "4 a year" public callout
   ============================================================ */
.bk-callout{
  display:flex;align-items:center;gap:24px;
  padding:28px 32px;margin:40px 0;
  border:1px solid var(--rule);border-radius:8px;
  background: linear-gradient(135deg, rgba(176,106,58,.07), transparent 60%);
}
.bk-callout-n{
  font-family:var(--sans);font-weight:900;
  font-size:clamp(56px,8vw,108px); line-height:.9; letter-spacing:-.04em;
  color:var(--accent);
  flex:0 0 auto;
}
.bk-callout-n em{
  font-family:var(--mono);font-style:normal;font-weight:500;
  font-size:14px;letter-spacing:.18em;color:var(--muted);
  margin-left:6px;text-transform:uppercase;
}
.bk-callout-body p{
  font-family:var(--serif);font-style:italic;font-size:22px;line-height:1.4;color:var(--ink);max-width:48ch;
}
.bk-callout-sub{
  font-family:var(--mono)!important;font-style:normal!important;
  font-size:11px!important;letter-spacing:.14em;color:var(--muted)!important;text-transform:uppercase;
  margin-top:10px;
}
@media (max-width: 700px){
  .bk-callout{flex-direction:column;align-items:flex-start;gap:14px;padding:22px;}
}

/* ============================================================
   T2ELVE — cookie / consent banner
   ============================================================ */
.cc-bar{
  position: fixed; left: 18px; right: 18px; bottom: 18px;
  z-index: 700;
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px;
  padding: 16px 20px;
  background: var(--ink); color: var(--cream);
  border-radius: 8px;
  box-shadow: 0 20px 60px -20px rgba(0,0,0,.6);
  font-family: var(--mono); font-size: 12px; line-height: 1.45;
  letter-spacing: .02em;
  transform: translateY(120%);
  opacity: 0;
  transition: transform .5s cubic-bezier(.7,0,.2,1), opacity .35s;
  max-width: 920px;
  margin-inline: auto;
}
.cc-bar.is-on{ transform: translateY(0); opacity: 1; }
.cc-bar-text{ flex: 1 1 auto; max-width: 60ch; }
.cc-bar strong{
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: 16px; margin-right: 6px;
}
.cc-more{
  display: inline-block; margin-left: 6px;
  color: rgba(244,241,234,.75); text-decoration: underline; text-underline-offset: 3px;
}
.cc-more:hover{ color: var(--cream); }
.cc-bar-actions{ display: flex; gap: 8px; flex: 0 0 auto; }
.cc-btn{
  padding: 9px 16px; border-radius: 99px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  cursor: pointer; transition: background .2s, color .2s, border-color .2s;
}
.cc-decline{
  background: transparent;
  border: 1px solid rgba(244,241,234,.4);
  color: var(--cream);
}
.cc-decline:hover{ border-color: var(--cream); }
.cc-accept{
  background: var(--cream); color: var(--ink); border: 1px solid var(--cream);
}
.cc-accept:hover{ background: var(--accent); color: var(--cream); border-color: var(--accent); }

@media (max-width: 700px){
  .cc-bar{ flex-direction: column; align-items: stretch; gap: 12px; left: 12px; right: 12px; bottom: 12px; padding: 14px 16px; }
  .cc-bar-actions{ justify-content: flex-end; }
}

.cookie-settings-link{
  position: fixed; bottom: 12px; left: 14px; z-index: 90;
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); opacity: .55;
  text-decoration: underline; text-underline-offset: 3px;
  transition: opacity .25s, color .25s;
}
.cookie-settings-link:hover{ opacity: 1; color: var(--ink); }
@media (max-width: 700px){
  .cookie-settings-link{ display: none; }
}

/* ============================================================
   T2ELVE — mobile performance budget
   Phones can't keep up with the desktop's blur stacks +
   mix-blend-mode redraw + parallel filter animations. Below
   900px we trade those effects for raw smoothness.
   ============================================================ */
@media (max-width: 900px){
  /* Mobile nav: drop mix-blend-mode. iOS Safari has to re-composite the
     entire viewport every scroll frame for it, which spikes the GPU
     budget — the single biggest mobile perf hit. The tone-aware
     observer (.nav.on-dark in app.js) swaps text/bg colors instead and
     keeps the nav readable on every section. */
  .nav{
    mix-blend-mode: normal !important;
    background: rgba(244, 241, 234, 0.88);
    -webkit-backdrop-filter: saturate(160%) blur(10px);
            backdrop-filter: saturate(160%) blur(10px);
    color: var(--ink) !important;
    border-bottom: 1px solid var(--rule);
  }
  .nav .nm-mono .nm-two,
  .nav .nm-mono .nm-dot{ color: var(--accent); }
  /* Lower-cost shadow + no blend; the wordmark stays accent-coloured. */
  .nm-mono .nm-two, .nm-mono .nm-dot{ color: var(--accent); }

  /* The JS now drives the .tw-twelve filter directly (capped at 56px
     on touch instead of 96px). Don't slam a static blur on top here —
     it would fight the scroll-scrub. */

  /* Backdrop-filter is GPU expensive. Strip the optional ones. */
  .hero-tag{ -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(255,255,255,.6); }
  .cursor.is-link{ -webkit-backdrop-filter: none; backdrop-filter: none; }

  /* Marquee and any decorative will-change off — they were claiming
     compositor layers permanently. */
  .marquee, .mq-track, .pm-track{ will-change: auto; }
}

/* Respect prefers-reduced-motion: kill the dramatic preloader entry and
   any blur transitions for users who asked for less motion. */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .preloader{ display: none !important; }
}

/* ============================================================
   T2ELVE — manifesto on mobile: per-word reveal but cheaper
   We keep the 24 per-word ScrollTriggers (they only toggle .in)
   but on mobile we swap the blur filter for an opacity + Y
   transform — both compositor-only, no per-frame raster cost.
   ============================================================ */
@media (max-width: 900px){
  .mani-text .mw{
    opacity: 0;
    transform: translateY(14px);
    filter: none !important;
    transition: opacity .55s cubic-bezier(.7,0,.2,1),
                transform .55s cubic-bezier(.7,0,.2,1);
    will-change: opacity, transform;
  }
  .mani-text .mw.in{
    opacity: 1; transform: translateY(0);
  }
  /* After it settles, drop the will-change to free the layer. */
  .mani-text .mw.in{ will-change: auto; }
}

/* ============================================================
   T2ELVE — .twelve static layout for mobile / reduced motion
   No 320vh sticky-zoom, no scrub — just a single 100vh section
   with the "12" centred at its final size. The captions still
   show but as static labels (no live blur readout).
   ============================================================ */
.twelve.twelve-static{ height: 100vh; }
.twelve.twelve-static .tw-sticky{ position: relative; height: 100vh; }
.twelve.twelve-static .tw-twelve{
  font-size: clamp(72px, 38vw, 220px);
  filter: blur(0px) !important;
  letter-spacing: -.06em !important;
  transform: none !important;
}
.twelve.twelve-static .tw-cap.bot-left,
.twelve.twelve-static .tw-cap.bot-right{ font-size: 9px; }

/* ============================================================
   T2ELVE — horizontal "Six pieces of twelve" → vertical stack on touch
   ============================================================ */
.hwrap.hwrap-stacked{
  height: auto !important;
  background: var(--ink); color: var(--cream);
  padding: 60px 22px;
}
.hwrap.hwrap-stacked .hsticky{
  position: relative !important; top: auto !important;
  height: auto; overflow: visible;
}
.hwrap.hwrap-stacked .htrack{
  display: flex; flex-direction: column;
  gap: 20px;
  transform: none !important;
  height: auto;
}
.hwrap.hwrap-stacked .hpanel{
  flex: 0 0 auto;
  width: 100%; max-width: none;
  height: auto; min-height: 70vh;
  filter: none !important;
  transform: none !important;
  scale: 1 !important;
}
.hwrap.hwrap-stacked .hpanel-intro,
.hwrap.hwrap-stacked .hpanel-outro{
  min-height: 0; padding: 36px 24px;
}

/* ============================================================
   T2ELVE — tone-aware nav: flips colors over dark sections
   ONLY on mobile. Desktop uses mix-blend-mode: difference which
   already inverts text against any background — adding a dark
   glass on top would fight the blend and cause flicker over
   .hwrap (6 pieces) and .twelve. So this whole block is gated
   inside the mobile media query.
   ============================================================ */
@media (max-width: 900px){
  .nav.on-dark{
    background: rgba(12, 12, 11, 0.72) !important;
    color: var(--cream) !important;
    border-bottom-color: rgba(244,241,234,.14) !important;
  }
  .nav.on-dark .nm-mono .nm-ch{ color: var(--cream); }
  .nav.on-dark .nm-mono .nm-two,
  .nav.on-dark .nm-mono .nm-dot{ color: var(--accent); }
  .nav.on-dark .nm-tag,
  .nav.on-dark .nav-time,
  .nav.on-dark .nav-time *{ color: rgba(244,241,234,.7); }
  .nav.on-dark .nav-links a,
  .nav.on-dark .nav-burger .nb-line{ color: var(--cream); background-color: currentColor; }
  .nav.on-dark .nav-burger .nb-line{ background: var(--cream); }
  /* keep the underline of the active link in the right color */
  .nav.on-dark .nav-links a.is-active::after,
  .nav.on-dark .nav-links a:hover::after{ background: var(--cream); }
  /* smooth crossfade between tones */
  .nav{ transition: background .35s ease, color .35s ease, border-color .35s ease; }
}

/* ============================================================
   T2ELVE — touch experience (now matches desktop)
   The previous "snap carousel" + "static 12" mobile overrides were
   removed at the user's request — mobile now uses the same GSAP pin
   + horizontal scrub + 320vh sticky zoom as desktop. JS lightens the
   per-frame work (no blur on cards, blur cap 56px on the 12) so iOS
   Safari can still keep 60fps.
   ============================================================ */

/* Manifesto on touch — opacity + Y only, no blur (GPU-cheap) */
@media (max-width: 900px){
  .mani-text .mw{
    opacity: 0;
    transform: translateY(14px);
    filter: none !important;
    transition: opacity .5s ease-out,
                transform .5s cubic-bezier(.7,0,.2,1);
  }
  .mani-text .mw.in{
    opacity: 1; transform: translateY(0);
  }
  .mani-text .mw.in{ will-change: auto; }
}

/* Hero word cycle — keep but drop the blur on mobile (the cycle still
   fades + slides but doesn't trigger a per-frame raster). */
@media (max-width: 900px){
  .hero-title .word.cycle .cyc-current{ will-change: transform, opacity; }
}