/* withoutadrenaline.com — core styles */
/* withoutadrenaline.com — core styles
   Duality of fire and water. Dark canvas, warm and cool currents. */

:root{
  --bg:#050506;
  --bg-2:#0a0a0e;
  --panel:#0c0c11;

  --ink:#ece9e3;
  --ink-soft:#bcb8b0;
  --muted:#7e7a73;
  --line:rgba(255,255,255,.08);

  --fire-red:#c4422f;
  --fire-orange:#ff6a1a;
  --fire-gold:#ffb627;
  --fire-bright:#ffd24a;

  --water-deep:#0b2e6b;
  --water:#1e6fd9;
  --water-light:#4fc3f7;
  --water-bright:#8fe4ff;

  --gold:#c9a24b;

  --grad-fire:linear-gradient(135deg,#c4422f 0%,#ff6a1a 45%,#ffb627 100%);
  --grad-water:linear-gradient(135deg,#0b2e6b 0%,#1e6fd9 50%,#8fe4ff 100%);
  --grad-duo:linear-gradient(100deg,#ff6a1a 0%,#ffb627 28%,#ece9e3 50%,#4fc3f7 72%,#1e6fd9 100%);

  --col:780px;
  --nav-h:74px;
  --ease:cubic-bezier(.16,.84,.36,1);

  --serif:"Spectral",Georgia,serif;
  --title:"Outfit",sans-serif;
  --display:"Bebas Neue",sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--serif);
  font-size:19px;
  line-height:1.85;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  min-height:auto;
}

/* ambient field: warm current on the left, cool on the right, breathing slowly */
body::before{
  content:"";
  position:fixed;inset:0;z-index:-3;pointer-events:none;
  background:
    radial-gradient(60% 80% at 8% 12%,rgba(196,66,47,.14),transparent 60%),
    radial-gradient(55% 75% at 94% 88%,rgba(30,111,217,.16),transparent 62%),
    radial-gradient(40% 50% at 50% 50%,rgba(255,182,39,.04),transparent 70%);
  animation:drift 24s var(--ease) infinite alternate;
}
@keyframes drift{from{transform:scale(1)}to{transform:scale(1.12) translateY(-2%)}}

/* grain */
body::after{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* the persistent mark — always present, never in the way */
.watermark{
  position:fixed;z-index:-1;top:50%;left:50%;
  width:min(64vmin,760px);height:min(64vmin,760px);
  transform:translate(-50%,-50%);
  background:url("/assets/img/logo.png") center/contain no-repeat;
  opacity:.05;pointer-events:none;
  filter:saturate(.9);
  mix-blend-mode:screen;
}

::selection{background:rgba(255,182,39,.22);color:#fff}
::-webkit-scrollbar{width:11px}
::-webkit-scrollbar-track{background:#070708}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#c4422f,#1e6fd9);border-radius:20px;border:2px solid #070708}

a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

/* ---------- reading progress ---------- */
.progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:120;
  background:var(--grad-duo);box-shadow:0 0 14px rgba(255,160,40,.5)}

/* ---------- top bar ---------- */
.bar{
  position:fixed;top:0;left:0;right:0;height:var(--nav-h);z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 clamp(18px,4vw,48px);
  background:rgba(5,5,6,.55);
  backdrop-filter:blur(16px) saturate(120%);
  -webkit-backdrop-filter:blur(16px) saturate(120%);
  border-bottom:1px solid var(--line);
  transition:background .4s;
}
.brand{display:flex;align-items:center;gap:12px;letter-spacing:.02em}
.brand .mk{width:34px;height:34px;border-radius:50%;
  background:url("/assets/img/mark.png") center/cover;
  box-shadow:0 0 0 1px rgba(255,255,255,.12),0 4px 18px rgba(0,0,0,.6);
  flex:none}
.brand b{font-family:var(--title);font-weight:600;font-size:16px;color:var(--ink)}
.brand b span{color:var(--fire-gold)}
.brand small{display:block;font-family:var(--title);font-weight:300;font-size:10.5px;
  letter-spacing:.34em;text-transform:uppercase;color:var(--muted);margin-top:-2px}

.bar-mid{font-family:var(--title);font-weight:300;font-size:12px;letter-spacing:.32em;
  text-transform:uppercase;color:var(--ink-soft);display:flex;align-items:center;gap:12px}
.bar-mid em{font-style:normal;font-family:var(--display);font-size:20px;
  background:var(--grad-duo);-webkit-background-clip:text;background-clip:text;color:transparent}

.menu-btn{
  display:flex;align-items:center;gap:11px;cursor:pointer;
  font-family:var(--title);font-weight:500;font-size:12px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--ink);
  background:none;border:1px solid var(--line);border-radius:40px;
  padding:11px 18px;transition:.35s var(--ease);
}
.menu-btn:hover{border-color:var(--fire-gold);color:#fff;box-shadow:0 0 24px rgba(255,182,39,.15)}
.menu-btn .ic{width:18px;height:12px;position:relative;display:inline-block}
.menu-btn .ic i{position:absolute;left:0;width:100%;height:2px;border-radius:2px;
  background:var(--grad-duo);transition:.35s var(--ease)}
.menu-btn .ic i:nth-child(1){top:0}
.menu-btn .ic i:nth-child(2){top:5px}
.menu-btn .ic i:nth-child(3){top:10px}

/* ---------- chapter overlay ---------- */
.overlay{
  position:fixed;inset:0;z-index:200;
  background:rgba(4,4,6,.86);backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
  opacity:0;visibility:hidden;transition:.5s var(--ease);
  display:flex;flex-direction:column;
}
.overlay.open{opacity:1;visibility:visible}
.overlay-head{display:flex;align-items:center;justify-content:space-between;
  padding:0 clamp(18px,4vw,48px);height:var(--nav-h);flex:none;
  border-bottom:1px solid var(--line)}
.overlay-head h3{font-family:var(--title);font-weight:300;letter-spacing:.4em;
  text-transform:uppercase;font-size:13px;color:var(--ink-soft)}
.x{cursor:pointer;width:40px;height:40px;border:1px solid var(--line);border-radius:50%;
  position:relative;transition:.35s var(--ease);background:none}
.x:hover{border-color:var(--water-light);transform:rotate(90deg)}
.x::before,.x::after{content:"";position:absolute;top:50%;left:50%;width:16px;height:2px;
  background:var(--ink);transform:translate(-50%,-50%) rotate(45deg)}
.x::after{transform:translate(-50%,-50%) rotate(-45deg)}

.chapters{
  flex:1;overflow-y:auto;padding:clamp(24px,5vh,60px) clamp(18px,5vw,80px);
  display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:6px;align-content:start;max-width:1280px;margin:0 auto;width:100%;
}
.chapters a{
  display:flex;align-items:baseline;gap:18px;padding:16px 20px;border-radius:12px;
  border:1px solid transparent;transition:.3s var(--ease);position:relative;
  opacity:0;transform:translateY(14px);
}
.overlay.open .chapters a{opacity:1;transform:none}
.chapters a .no{font-family:var(--display);font-size:26px;line-height:1;color:var(--muted);
  min-width:42px;transition:.3s}
.chapters a .nm{font-family:var(--title);font-weight:500;font-size:19px;letter-spacing:.01em}
.chapters a:hover{background:rgba(255,255,255,.03);border-color:var(--line)}
.chapters a:hover .no{background:var(--grad-duo);-webkit-background-clip:text;
  background-clip:text;color:transparent}
.chapters a.active{border-color:rgba(255,182,39,.4)}
.chapters a.active .no{background:var(--grad-fire);-webkit-background-clip:text;
  background-clip:text;color:transparent}
.chapters a.active .nm{color:#fff}

/* ---------- page shell ---------- */
main{padding-top:var(--nav-h);position:relative;z-index:1}
.wrap{max-width:var(--col);margin:0 auto;padding:0 24px}

/* ---------- chapter hero (the title frame) ---------- */
.hero{
  text-align:center;padding:clamp(70px,12vh,140px) 24px clamp(40px,6vh,70px);
  position:relative;
}
.hero .kicker{font-family:var(--title);font-weight:300;font-size:12px;letter-spacing:.5em;
  text-transform:uppercase;color:var(--muted);margin-bottom:26px}
.hero .num{font-family:var(--display);font-size:clamp(32px,12vw,50px);line-height:.82;
  letter-spacing:.02em;background:var(--grad-duo);-webkit-background-clip:text;
  background-clip:text;color:transparent;filter:drop-shadow(0 6px 40px rgba(255,120,30,.18))}

/* the framed title block — editable text drops inside */
.titleframe{
  display:inline-block;position:relative;margin:22px auto 0;padding:22px 44px;
}
.titleframe h1{font-family:var(--title);font-weight:600;font-size:clamp(30px,5.4vw,58px);
  line-height:1.04;letter-spacing:-.01em;color:var(--ink)}
.titleframe::before,.titleframe::after{
  content:"";position:absolute;width:34px;height:34px;opacity:.9}
.titleframe::before{top:0;left:0;border-top:2px solid var(--fire-gold);
  border-left:2px solid var(--fire-orange)}
.titleframe::after{bottom:0;right:0;border-bottom:2px solid var(--water);
  border-right:2px solid var(--water-light)}

.seam{height:2px;width:min(320px,70%);margin:34px auto 0;border-radius:2px;
  background:var(--grad-duo);position:relative;overflow:hidden}
.seam::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.85),transparent);
  transform:translateX(-100%);animation:sweep 4.5s var(--ease) infinite}
@keyframes sweep{0%,30%{transform:translateX(-120%)}70%,100%{transform:translateX(120%)}}

/* ---------- the prose body (editable content zone) ---------- */
.content{margin:clamp(24px,4vh,48px) auto;padding:0 22px;max-width:var(--col);position:relative}
.content::before{
  content:"";position:absolute;left:0;top:26px;bottom:26px;width:2px;border-radius:2px;
  background:var(--grad-duo);opacity:.5;
}
.content p{text-align:center;margin:0 0 1.5em;color:var(--ink-soft)}
.content p:last-child{margin-bottom:0}
.content p.lead{color:var(--ink);font-size:1.14em}
.content .em{color:var(--ink);font-weight:500}
.content .accent{background:var(--grad-fire);-webkit-background-clip:text;
  background-clip:text;color:transparent;font-weight:500}
.content .cool{background:var(--grad-water);-webkit-background-clip:text;
  background-clip:text;color:transparent;font-weight:500}
.content hr{border:0;height:1px;width:64%;margin:2.2em auto;
  background:linear-gradient(90deg,transparent,var(--line),transparent)}
.content .pull{font-family:var(--title);font-weight:300;font-size:1.5em;line-height:1.4;
  color:#fff;margin:1.4em auto;max-width:24ch}

/* reveal on scroll — content is always visible; JS only adds the entrance */
.reveal{opacity:1}
.reveal.in{animation:rise .9s var(--ease) both}
@keyframes rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}

/* ---------- bottom page transition ---------- */
.pager{max-width:1080px;margin:0 auto clamp(60px,10vh,120px);padding:0 24px;
  display:grid;grid-template-columns:1fr 1fr;gap:20px}
.pager.solo{grid-template-columns:1fr;max-width:560px}
.pjump{
  position:relative;display:block;padding:36px 34px;border-radius:18px;overflow:hidden;
  border:1px solid var(--line);background:var(--panel);
  transition:.45s var(--ease);isolation:isolate;
}
.pjump .lab{font-family:var(--title);font-weight:300;font-size:11px;letter-spacing:.4em;
  text-transform:uppercase;color:var(--muted)}
.pjump .ttl{font-family:var(--title);font-weight:600;font-size:clamp(22px,3vw,32px);
  margin-top:10px;display:flex;align-items:center;gap:14px;line-height:1.1}
.pjump .ar{transition:.45s var(--ease)}
.pjump::before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:.5s var(--ease)}
.pjump.next{text-align:right}
.pjump.next .ttl{justify-content:flex-end}
.pjump.next::before{background:radial-gradient(120% 140% at 100% 0%,rgba(255,106,26,.22),transparent 60%)}
.pjump.prev::before{background:radial-gradient(120% 140% at 0% 100%,rgba(30,111,217,.22),transparent 60%)}
.pjump:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.2);
  box-shadow:0 24px 60px rgba(0,0,0,.55)}
.pjump:hover::before{opacity:1}
.pjump.next:hover .ar{transform:translateX(8px)}
.pjump.prev:hover .ar{transform:translateX(-8px)}
.pjump .ar svg{width:30px;height:30px}
.pjump.next .ar svg path{stroke:url(#fireg)}
.pjump.prev .ar svg path{stroke:url(#waterg)}

/* ---------- index / gateway ---------- */
.gate{min-height:auto;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;padding:60px 24px;position:relative}
.gate canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;opacity:.55}
.gate .core{position:relative;z-index:2;max-width:780px}
.gate .orb{width:min(40vmin,300px);height:min(40vmin,300px);margin:0 auto 30px;
  border-radius:50%;background:url("/assets/img/logo.png") center/contain no-repeat;
  filter:drop-shadow(0 0 60px rgba(255,120,30,.25)) drop-shadow(0 0 90px rgba(30,111,217,.2));
  animation:float 7s var(--ease) infinite alternate}
@keyframes float{from{transform:translateY(-6px) rotate(-1deg)}to{transform:translateY(10px) rotate(1deg)}}
.gate h1{font-family:var(--display);font-size:clamp(23px,10vw,40px);line-height:.9;
  letter-spacing:.01em;margin-bottom:8px}
.gate h1 .a{background:var(--grad-fire);-webkit-background-clip:text;background-clip:text;color:transparent}
.gate h1 .b{background:var(--grad-water);-webkit-background-clip:text;background-clip:text;color:transparent}
.gate .dom{font-family:var(--title);font-weight:300;letter-spacing:.46em;text-transform:uppercase;
  font-size:clamp(11px,1.6vw,15px);color:var(--ink-soft);margin-bottom:30px}
.gate .tag{font-family:var(--serif);font-size:clamp(18px,2.4vw,23px);color:var(--ink-soft);
  max-width:30ch;margin:0 auto 42px;line-height:1.6}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:12px;cursor:pointer;
  font-family:var(--title);font-weight:500;font-size:13px;letter-spacing:.22em;
  text-transform:uppercase;color:#0a0a0a;background:var(--grad-duo);
  padding:16px 34px;border-radius:44px;border:0;transition:.4s var(--ease);
  box-shadow:0 10px 40px rgba(255,140,40,.18)}
.btn:hover{transform:translateY(-3px);box-shadow:0 16px 50px rgba(255,140,40,.32)}
.btn.ghost{background:none;color:var(--ink);border:1px solid var(--line)}
.btn.ghost:hover{border-color:var(--fire-gold);color:#fff;box-shadow:none}

/* ---------- shop ---------- */
.shop{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;
  max-width:1120px;margin:0 auto clamp(60px,9vh,110px);padding:0 24px;align-items:stretch}
.card{
  position:relative;display:flex;flex-direction:column;border-radius:22px;overflow:hidden;
  border:1px solid var(--line);background:var(--panel);padding:38px 32px;
  transition:.45s var(--ease)}
.card::before{content:"";position:absolute;top:0;left:0;right:0;height:4px}
.card.l1::before{background:var(--grad-water)}
.card.l2::before{background:var(--grad-fire)}
.card.l3::before{background:linear-gradient(90deg,#555,#888)}
.card:hover{transform:translateY(-8px);border-color:rgba(255,255,255,.18);
  box-shadow:0 30px 70px rgba(0,0,0,.6)}
.card .lvl{font-family:var(--title);font-weight:300;letter-spacing:.34em;text-transform:uppercase;
  font-size:12px;color:var(--muted)}
.card h3{font-family:var(--title);font-weight:600;font-size:26px;margin:6px 0 18px;color:#fff}
.card .price{font-family:var(--display);font-size:62px;line-height:1;color:#fff}
.card.l1 .price{background:var(--grad-water);-webkit-background-clip:text;background-clip:text;color:transparent}
.card.l2 .price{background:var(--grad-fire);-webkit-background-clip:text;background-clip:text;color:transparent}
.card .price small{font-family:var(--title);font-size:15px;font-weight:300;letter-spacing:.04em}
.card ul{list-style:none;margin:24px 0 30px;display:flex;flex-direction:column;gap:13px;flex:1}
.card li{font-family:var(--serif);font-size:16px;color:var(--ink-soft);line-height:1.5;
  display:flex;gap:12px;align-items:flex-start;text-align:left}
.card li::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;margin-top:9px}
.card.l1 li::before{background:var(--water-light)}
.card.l2 li::before{background:var(--fire-gold)}
.card.l3 li::before{background:#888}
.card.featured{border-color:rgba(255,182,39,.34)}
.ribbon{position:absolute;top:18px;right:-34px;transform:rotate(45deg);
  background:var(--grad-fire);color:#1a0d04;font-family:var(--title);font-weight:600;
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;padding:6px 40px}
.card.soon{opacity:.72}
.card.soon .price{color:var(--muted)}

/* ---------- support tiers ---------- */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:760px;
  margin:0 auto 40px;padding:0 24px}
.tier{border:1px solid var(--line);border-radius:16px;padding:28px 22px;text-align:center;
  background:var(--panel);transition:.4s var(--ease)}
.tier:hover{transform:translateY(-5px);border-color:rgba(255,182,39,.3)}
.tier .amt{font-family:var(--display);font-size:46px;
  background:var(--grad-duo);-webkit-background-clip:text;background-clip:text;color:transparent}
.tier .d{font-family:var(--title);font-weight:300;letter-spacing:.2em;text-transform:uppercase;
  font-size:11px;color:var(--muted);margin-top:6px}
.contactbox{max-width:560px;margin:0 auto clamp(60px,9vh,110px);text-align:center;
  border:1px solid var(--line);border-radius:18px;padding:42px 30px;background:var(--panel)}
.contactbox .mail{font-family:var(--title);font-weight:500;font-size:clamp(20px,3.5vw,30px);
  background:var(--grad-duo);-webkit-background-clip:text;background-clip:text;color:transparent;
  word-break:break-all}

/* ---------- footer (brand on every page) ---------- */
footer{border-top:1px solid var(--line);padding:54px 24px 40px;text-align:center;
  background:rgba(0,0,0,.4)}
footer .fmark{width:46px;height:46px;border-radius:50%;margin:0 auto 16px;
  background:url("/assets/img/mark.png") center/cover;box-shadow:0 0 0 1px rgba(255,255,255,.12)}
footer .fbrand{font-family:var(--title);font-weight:600;font-size:18px;color:var(--ink)}
footer .fbrand span{color:var(--fire-gold)}
footer .flinks{margin:18px 0;display:flex;flex-wrap:wrap;justify-content:center;
  align-items:center;gap:6px 4px}
footer .flinks a{font-family:var(--title);font-size:13px;letter-spacing:.06em;color:var(--muted);
  margin:0 12px;transition:.3s;word-break:break-word}
footer .flinks a:hover{color:var(--ink)}
footer small{display:block;font-family:var(--title);font-weight:300;font-size:11.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-top:18px}

/* ---------- responsive ---------- */
@media(max-width:880px){
  body{font-size:18px}
  .shop,.tiers{grid-template-columns:1fr}
  .card.l2{order:-1}
  .bar-mid{display:none}
}
@media(max-width:560px){
  .brand small{display:none}
  .brand b{font-size:15px}
  .menu-btn span:not(.ic){display:none}
  .menu-btn .ic{display:inline-block}
  .menu-btn{padding:11px 13px}
  .titleframe{padding:18px 26px}
  .content{padding:26px 18px}
  .bar{padding:0 16px}
  .overlay-head{padding:0 16px}
  .overlay-head h3{font-size:10px;letter-spacing:.22em;white-space:nowrap;
    overflow:hidden;text-overflow:ellipsis}
  .chapters{grid-template-columns:1fr;padding:24px 16px;gap:2px}
  .chapters a{padding:14px 12px;gap:14px}
  .chapters a .no{min-width:34px;font-size:22px}
  .chapters a .nm{font-size:17px}
}

/* Mobile stability Desktop visual system stays unchanged. On phones we keep the fire/water look,
   but remove the effects that most often break or slow mobile browsers. */
@media(max-width:560px){
  html,body{max-width:100%;overflow-x:hidden}

  .bar{
    background:rgba(5,5,6,.88);
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }

  .overlay{
    background:rgba(4,4,6,.96);
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }

  .gate{
    min-height:auto;
    padding:44px 18px 52px;
  }

  .gate canvas{display:none}

  .watermark{
    width:76vmin;
    height:76vmin;
    opacity:.035;
    mix-blend-mode:normal;
    filter:none;
  }

  .gate .orb{
    width:min(46vmin,190px);
    height:min(46vmin,190px);
    filter:drop-shadow(0 0 34px rgba(255,120,30,.22));
  }

  .gate h1,
  .titleframe h1,
  .pjump .ttl,
  .card h3,
  .contactbox .mail{
    overflow-wrap:anywhere;
  }

  .shop,
  .tiers,
  .pager,
  .wrap,
  .hero{
    min-width:0;
  }

  .btn{max-width:100%;justify-content:center;text-align:center}
  .card{min-width:0}
}

@supports (height:100svh){
  @media(max-width:560px){
    .gate{min-height:auto}
  }
}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}

/* ---------- final mobile guard: cache-busted package ---------- */
@media(max-width:700px){
  .gate canvas{display:none!important}
}
@media(max-width:560px){
  html,body{max-width:100%!important;overflow-x:hidden!important}
  .menu-btn span:not(.ic){display:none!important}
  .menu-btn .ic{display:inline-block!important;visibility:visible!important;opacity:1!important}
  .bar{background:rgba(5,5,6,.88)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
  .overlay{background:rgba(4,4,6,.96)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
  .chapters{grid-template-columns:1fr!important;padding:24px 16px!important;gap:2px!important}
  .chapters a{padding:14px 12px!important;gap:14px!important}
  .watermark{width:76vmin!important;height:76vmin!important;opacity:.035!important;mix-blend-mode:normal!important;filter:none!important}
  .gate .orb{width:min(46vmin,190px)!important;height:min(46vmin,190px)!important;filter:drop-shadow(0 0 34px rgba(255,120,30,.22))!important}
}
@supports (height:100svh){
  @media(max-width:560px){
    .gate{min-height:auto!important}
  }
}

/* ---------- public signals: professional identification frame ---------- */
.guardband{max-width:1080px;margin:0 auto clamp(60px,10vh,120px);padding:0 24px}
.gb-inner{position:relative;overflow:hidden;border-radius:22px;border:1px solid rgba(255,255,255,.11);
  background:
    linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.018)),
    radial-gradient(100% 140% at 0% 0%,rgba(196,66,47,.10),transparent 58%),
    radial-gradient(100% 140% at 100% 100%,rgba(30,111,217,.10),transparent 58%),
    var(--panel);
  padding:clamp(34px,5vw,58px) clamp(22px,4vw,52px);text-align:center}
.gb-inner::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:min(320px,62%);height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.42),transparent)}
.gb-eyebrow{font-family:var(--title);font-weight:400;font-size:11px;letter-spacing:.42em;
  text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.gb-title{font-family:var(--display);font-size:clamp(31px,5.2vw,52px);line-height:.96;letter-spacing:.01em;
  color:var(--ink);margin-bottom:14px}
.gb-sub{font-family:var(--serif);font-size:clamp(16px,1.9vw,18px);color:var(--ink-soft);
  max-width:56ch;margin:0 auto 28px;line-height:1.65}
.gb-tags{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 11px;margin-bottom:22px}
.gb-tag{display:inline-flex;align-items:center;justify-content:center;font-family:var(--title);font-weight:400;font-size:clamp(11px,1.35vw,13px);letter-spacing:.08em;
  text-transform:uppercase;padding:11px 17px;border-radius:999px;border:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.82);
  background:rgba(255,255,255,.025);transition:border-color .25s var(--ease),background .25s var(--ease),color .25s var(--ease);white-space:nowrap}
.gb-tag:hover{border-color:rgba(255,255,255,.26);background:rgba(255,255,255,.05);color:#fff}
.gb-tag.fire{border-color:rgba(255,182,39,.24)}
.gb-tag.duo{border-color:rgba(255,255,255,.18)}
.gb-tag.water{border-color:rgba(79,195,247,.24)}
.gb-foot{font-family:var(--title);font-weight:300;font-size:11px;letter-spacing:.18em;line-height:1.7;
  text-transform:uppercase;color:var(--muted);max-width:68ch;margin:0 auto}

/* ---------- shop trust strip (quiet, no pressure) ---------- */
.shoptrust{max-width:1120px;margin:-6px auto clamp(50px,8vh,90px);padding:0 24px;text-align:center;
  font-family:var(--title);font-weight:300;font-size:12px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--muted)}

@media(max-width:560px){
  .gb-tags{gap:9px}
  .gb-tag{font-size:12px;padding:11px 16px;letter-spacing:.02em}
  .shoptrust{font-size:11px;letter-spacing:.14em}
}

/* ---------- pager: keep back (left, <-) and forward (right, ->) on ONE row, incl. phones ---------- */
.pager:not(.solo){grid-template-columns:1fr 1fr}      /* never stack the two-tile pager */
@media(max-width:560px){
  .pager:not(.solo){gap:12px}
  .pjump{padding:18px 16px;border-radius:14px}
  .pjump .lab{font-size:9px;letter-spacing:.26em}
  .pjump .ttl{font-size:clamp(15px,4.4vw,19px);margin-top:7px;gap:8px;overflow-wrap:anywhere}
  .pjump .ar svg{width:20px;height:20px}
  .pjump.prev .ttl{justify-content:flex-start}        /* back hugs the left */
  .pjump.next .ttl{justify-content:flex-end}          /* forward hugs the right */
}

/* ---------- women narrative polish ---------- */
.content strong{color:#fff;font-weight:600}
.content p.pull{max-width:28ch}
@media(max-width:560px){
  .content p{text-align:center}
  .content .pull{font-size:1.22em;line-height:1.45}
}

/* ---------- prose rhythm repair: narrative paragraphs, not line-by-line manifesto ---------- */
.content p{max-width:64ch;margin-left:auto;margin-right:auto;line-height:1.72}
.content p.lead{max-width:58ch}
.content p.pull{max-width:30ch}
@media(max-width:560px){
  .content p{max-width:100%;line-height:1.68}
}

/* ============================================================
   WOMEN NARRATIVE — TYPOGRAPHIC HIERARCHY 
   epigraph  >  key frame  >  pull  >  inline emphasis
   ============================================================ */

/* threshold epigraph — the screenshot-ready opener */
.epigraph{
  max-width:30ch;
  margin:clamp(28px,6vh,58px) auto clamp(4px,2vh,16px);
  padding:clamp(24px,3.2vw,38px) 18px clamp(28px,3.6vw,42px);
  text-align:center;position:relative}
.epigraph::before,.epigraph::after{
  content:"";position:absolute;left:50%;transform:translateX(-50%);
  width:56px;height:2px;border-radius:2px;opacity:.85}
.epigraph::before{top:0;background:var(--grad-fire)}
.epigraph::after{bottom:0;background:var(--grad-water)}
.epigraph > span{
  display:block;font-family:var(--title);font-weight:300;
  font-size:clamp(20px,3.1vw,30px);line-height:1.34;color:var(--ink);
  letter-spacing:.004em;margin:.18em 0}
.epigraph > span:first-child{
  font-weight:600;font-size:clamp(27px,4.3vw,44px);
  color:#fff;margin-bottom:.2em}
.epigraph .gold{display:inline;color:var(--gold);font-weight:inherit}

/* framed key-line — reserved for the single structural turn */
.content p.key{
  font-family:var(--title);font-weight:500;
  font-size:clamp(20px,2.6vw,30px);line-height:1.34;color:#fff;
  max-width:24ch;margin:2em auto;padding:.9em 1.15em;
  border:1px solid rgba(201,162,75,.45);border-radius:14px;
  background:linear-gradient(180deg,rgba(201,162,75,.07),rgba(201,162,75,.015));
  box-shadow:0 0 40px rgba(201,162,75,.09),inset 0 0 0 1px rgba(255,255,255,.02)}

/* gold inline emphasis available to body prose */
.content .gold{color:var(--gold);font-weight:500}

@media(max-width:560px){
  .epigraph{max-width:22ch}
  .epigraph > span{font-size:clamp(18px,5.6vw,24px)}
  .epigraph > span:first-child{font-size:clamp(24px,7.6vw,34px)}
  .content p.key{font-size:clamp(18px,5vw,23px);max-width:100%;padding:.85em .95em}
}

@media(max-width:780px){
  .pager{flex-direction:column}
  .pjump.next{order:-1}
}

.flogo{display:block;width:min(320px,60vw);height:auto;margin:0 auto 22px;opacity:.75;transition:opacity .4s}
.flogo:hover{opacity:1}

.glow-read{transition:opacity 0.5s ease}
@media(max-width:780px){.glow-read{opacity:0.55}.glow-read.reading{opacity:1}}

:root{
  --bg:#050506; --bg-2:#0a0a0e;
  --ink:#ece9e3; --ink-soft:#bcb8b0; --muted:#7e7a73; --faint:#56524b;
  --line:rgba(255,255,255,.08);

  --fire:#df5836; --fire-deep:#c4422f; --fire-orange:#ff6a1a; --fire-gold:#ffb627;
  --aqua:#56b7f2; --water:#1e6fd9; --water-deep:#0b2e6b; --water-bright:#8fe4ff;
  --gold:#c9a24b;

  --grad-fire:linear-gradient(180deg,#ffb627 0%,#ff6a1a 42%,#c4422f 100%);
  --grad-water:linear-gradient(180deg,#8fe4ff 0%,#4fc3f7 40%,#1e6fd9 100%);

  --serif:"Spectral",Georgia,serif;
  --ui:"Outfit",system-ui,sans-serif;
  --display:"Bebas Neue",sans-serif;
  --ease:cubic-bezier(.16,.84,.36,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip}
body{background:var(--bg);color:var(--ink);font-family:var(--serif);font-weight:300;
  line-height:1.7;text-align:center;-webkit-font-smoothing:antialiased;overflow-x:clip}

@keyframes breathe{0%,100%{transform:scale(1);opacity:.42}50%{transform:scale(1.14);opacity:.62}}
@keyframes grain{0%{transform:translate(0,0)}100%{transform:translate(-8%,6%)}}

main{position:relative;z-index:1}
.wrap{max-width:1040px;margin:0 auto;padding:0 26px}

section{padding:clamp(50px,8vh,100px) 0;position:relative}
.kicker{font-family:var(--ui);font-weight:300;font-size:11px;letter-spacing:.62em;
  text-transform:uppercase;color:var(--faint);margin-bottom:30px}

.lead{font-family:var(--serif);font-size:clamp(18px,2.3vw,23px);color:var(--ink-soft);
  line-height:1.66;max-width:26ch;margin:0 auto}
.lead.wide{max-width:36ch}
.soft{color:var(--muted);font-size:clamp(16px,1.9vw,19px);max-width:42ch;margin:16px auto 0;line-height:1.6}
.big{font-family:var(--ui);font-weight:300;font-size:clamp(26px,4.4vw,56px);line-height:1.16;
  max-width:18ch;margin:0 auto}
.huge{font-family:var(--display);font-size:clamp(35px,16vw,66px);line-height:.86;letter-spacing:.01em}
.disp{font-family:var(--display);font-size:clamp(20px,9vw,39px);line-height:.92;letter-spacing:.02em}

.f{color:var(--fire);font-style:normal}
.w{color:var(--aqua);font-style:normal}
.g{color:var(--gold);font-style:normal}
.f-grad{background:var(--grad-fire);-webkit-background-clip:text;background-clip:text;color:transparent}
.w-grad{background:var(--grad-water);-webkit-background-clip:text;background-clip:text;color:transparent}
.rule{width:1px;height:64px;margin:0 auto;background:linear-gradient(180deg,transparent,var(--gold),transparent);opacity:.5}

/* HERO */
.hero{min-height:auto;display:flex;flex-direction:column;justify-content:flex-start;padding-top:16px}
.hero .word{font-family:var(--display);font-size:clamp(55px,26vw,90px);line-height:.82;
  letter-spacing:.02em;text-shadow:0 0 80px rgba(255,106,26,.25)}
.hero .nie{font-family:var(--ui);font-weight:200;font-size:clamp(28px,5vw,64px);
  letter-spacing:.02em;margin-top:6px;color:var(--ink)}
.scar{width:min(360px,70vw);height:1px;margin:36px auto 0;position:relative}
.scar::before,.scar::after{content:"";position:absolute;top:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--fire),transparent)}
.scar::before{left:0;width:44%}.scar::after{right:0;width:44%}
.hero .sub{font-family:var(--serif);font-style:italic;font-size:clamp(17px,2.2vw,22px);
  color:var(--ink-soft);margin-top:28px}
/* negation stack */
.negs p{font-family:var(--ui);font-weight:200;font-size:clamp(20px,3vw,38px);line-height:1.24;
  color:var(--ink-soft)}
.negs .strike{color:var(--faint)}
.cost{font-family:var(--ui);font-weight:300;font-size:clamp(20px,3vw,40px);
  line-height:1.3;color:var(--fire);max-width:20ch;margin:0 auto;text-shadow:0 0 30px rgba(196,66,47,.3)}

/* regression triple */
.regress{display:flex;flex-direction:column;gap:6px;align-items:center}
.regress .r{font-family:var(--ui);font-weight:200;font-size:clamp(22px,3.4vw,44px);line-height:1.1}
.regress .r:nth-child(1){opacity:1}
.regress .r:nth-child(2){opacity:.82}
.regress .r:nth-child(3){opacity:.64}

/* diagram duo: reflex vs mind */
.duo{display:grid;grid-template-columns:1fr 1px 1fr;gap:0;max-width:880px;margin:54px auto 0;align-items:stretch}
.seam{background:linear-gradient(180deg,transparent,var(--gold) 18%,var(--gold) 82%,transparent);opacity:.5;position:relative}
.seam::after{content:"";position:absolute;top:50%;left:50%;width:9px;height:9px;border-radius:50%;
  background:var(--gold);transform:translate(-50%,-50%);box-shadow:0 0 22px 4px rgba(201,162,75,.55)}
.cell{padding:40px 26px;position:relative}
.cell .top{font-family:var(--serif);font-style:italic;font-size:clamp(15px,1.9vw,19px);color:var(--muted)}
.cell .verb{font-family:var(--display);font-size:clamp(40px,7vw,72px);line-height:.95;letter-spacing:.03em;margin:6px 0 22px}
.cell svg{width:100%;max-width:240px;height:auto}
.cell .cap{font-family:var(--ui);font-weight:300;font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--faint);margin-top:18px}

/* energy fork */
.fork{max-width:760px;margin:50px auto 0}
.fork svg{width:100%;height:auto}

/* natural state — water word stack */
.state{display:flex;flex-direction:column;gap:clamp(6px,1.6vh,16px);align-items:center}
.state .pre{font-family:var(--ui);font-weight:200;font-size:clamp(15px,2vw,20px);
  color:var(--faint);letter-spacing:.04em}
.state .v{font-family:var(--display);font-size:clamp(22px,9vw,34px);line-height:.92;letter-spacing:.03em;
  color:#7fcdf7;text-shadow:0 0 26px rgba(79,195,247,.3)}

/* decision */
.decision .d{font-family:var(--display);letter-spacing:.03em;line-height:.96;color:var(--gold)}
.decision 
.decision 

/* agency */
.own{display:flex;flex-direction:column;gap:4px;align-items:center;margin-top:8px}
.own b{font-family:var(--ui);font-weight:300;font-size:clamp(22px,3.4vw,42px);color:var(--ink)}
.tysmall{font-family:var(--display);font-size:clamp(30px,12vw,50px);line-height:.85;color:var(--ink);
  text-shadow:0 0 60px rgba(236,233,227,.14)}

/* diminishing */
.dim{display:flex;flex-direction:column;gap:8px;align-items:center}
.dim .l{font-family:var(--ui);font-weight:200;line-height:1.18;color:var(--ink-soft)}
.dim .l:nth-child(1){font-size:clamp(22px,3.4vw,42px)}
.dim .l:nth-child(2){font-size:clamp(20px,3vw,37px);opacity:.86}
.dim .l:nth-child(3){font-size:clamp(18px,2.7vw,33px);opacity:.72}
.dim .l:nth-child(4){font-size:clamp(17px,2.4vw,29px);opacity:.58}

/* choice split (callback to index) */
.split{display:grid;grid-template-columns:1fr 1px 1fr;gap:0;max-width:900px;margin:48px auto 0;align-items:stretch}
.col{position:relative;padding:60px 28px;overflow:hidden}
.col .auraf{position:absolute;inset:0;background:radial-gradient(120% 100% at 50% 120%,rgba(255,106,26,.3),rgba(196,66,47,.1) 46%,transparent 72%)}
.col .auraw{position:absolute;inset:0;background:radial-gradient(120% 100% at 50% -20%,rgba(143,228,255,.28),rgba(30,111,217,.1) 46%,transparent 72%)}
.col .ch{position:relative;z-index:1;font-family:var(--ui);font-weight:300;
  font-size:clamp(21px,3vw,34px);line-height:1.18}
.col .tag{position:relative;z-index:1;font-family:var(--ui);font-weight:300;font-size:11px;
  letter-spacing:.3em;text-transform:uppercase;color:var(--faint);margin-bottom:16px}

/* brand + cta */
.sign{font-family:var(--display);font-size:clamp(23px,11vw,42px);line-height:.92;letter-spacing:.04em;margin:10px 0 4px}
.sign .wo{color:var(--aqua)}.sign .ad{color:var(--fire)}
.enter{display:inline-block;margin-top:40px;padding:17px 42px;font-family:var(--ui);font-weight:300;
  font-size:13px;letter-spacing:.32em;text-transform:uppercase;color:var(--ink);text-decoration:none;
  border:1px solid var(--line);border-radius:2px;
  transition:border-color .5s var(--ease),color .5s var(--ease),letter-spacing .5s var(--ease)}
.enter:hover{border-color:var(--gold);color:var(--gold);letter-spacing:.4em}
.footmark{margin-top:58px;font-family:var(--ui);font-size:10.5px;letter-spacing:.4em;
  text-transform:uppercase;color:var(--faint)}

@media (max-width:720px){
  .duo,.split{grid-template-columns:1fr}
  .seam{height:1px;width:70%;margin:6px auto;background:linear-gradient(90deg,transparent,var(--gold),transparent)}
  .seam::after{display:none}
  .col{padding:42px 18px}
  .hero .word{font-size:clamp(48px,34vw,66px)}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.photo{position:relative;width:min(440px,86vw);margin:18px auto 0;background:transparent;-webkit-mask:radial-gradient(125% 125% at 50% 50%,#000 70%,transparent 100%);mask:radial-gradient(125% 125% at 50% 50%,#000 70%,transparent 100%);filter:drop-shadow(0 0 55px rgba(196,66,47,.2)) drop-shadow(0 0 55px rgba(30,111,217,.2))}
.photo img{display:block;width:100%;height:auto}

@media(max-width:780px){
  .pager.duo,
  .pager:not(.solo){
    grid-template-columns:1fr!important;
  }
  .pager .pjump.next{
    order:1!important;
  }
  .pager .pjump.prev{
    order:2!important;
  }
}

/* ---------- Differences graphic opener ---------- */
.opener-main{
  padding:0;
  margin:0;
}
.opener-stage-wrap{
  width:100vw;
  max-width:none;
  margin:0 0 clamp(42px,7vh,78px);
  padding:0;
  position:relative;
  left:50%;
  right:50%;
  margin-left:-50vw;
  margin-right:-50vw;
}
.opener-stage{
  position:relative;
  width:100vw;
  aspect-ratio: 1792 / 1024;
  min-height:auto;
  height:auto;
  overflow:hidden;
  border-radius:0;
  background:
    linear-gradient(180deg,rgba(0,0,0,.04),rgba(0,0,0,.08)),
    url("/assets/img/differences-opener-main-thomas-v19.png") center top / 100% 100% no-repeat,
    #050506;
  box-shadow:none;
}
.opener-stage::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(42% 52% at 0% 10%,rgba(196,66,47,.14),transparent 68%),
    radial-gradient(42% 52% at 100% 90%,rgba(30,111,217,.14),transparent 68%),
    linear-gradient(180deg,rgba(5,5,6,.08) 0%,rgba(5,5,6,0) 18%,rgba(5,5,6,0) 82%,rgba(5,5,6,.14) 100%);
  mix-blend-mode:screen;
}
@media(max-width:700px){
  .opener-stage{
    aspect-ratio: 1024 / 1792;
    background:
      linear-gradient(180deg,rgba(0,0,0,.04),rgba(0,0,0,.08)),
      url("/assets/img/differences-opener-mobile-thomas-v19.png") center top / 100% 100% no-repeat,
      #050506;
  }
}

HERO_SOURCE_MARKER{
  min-height:calc(100vh - var(--nav-h));
  display:flex!important;
  flex-direction:column;
  justify-content:center;
  text-align:center;
  padding-top:clamp(92px,12vh,150px)!important;
  padding-bottom:clamp(54px,8vh,90px)!important;
}
.hero.hero-source .source-title{
  font-family:var(--display);
  font-size:clamp(86px,21vw,240px)!important;
  line-height:.82!important;
  letter-spacing:.03em;
  background:var(--grad-duo);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  margin:0 auto!important;
}
.hero.hero-source .scar{margin-top:24px!important}
.hero.hero-source .source-copy{
  font-family:var(--ui);
  font-weight:300;
  font-size:clamp(26px,4.2vw,56px)!important;
  line-height:1.16!important;
  max-width:18ch!important;
  margin:30px auto 0!important;
}
.dualities{max-width:540px;margin:48px auto 0;display:flex;flex-direction:column;gap:10px;align-items:center}
.dual{width:100%;display:grid;grid-template-columns:minmax(0,1fr) 18px minmax(0,1fr);align-items:center;column-gap:16px;font-family:var(--ui);font-weight:200;font-size:clamp(18px,2.3vw,24px);line-height:1.3}
.dual .a{color:var(--aqua);text-align:right;justify-self:end;min-width:0;white-space:nowrap}
.dual .sep{color:var(--gold);opacity:.55;font-size:14px;width:18px;min-width:18px;display:block;text-align:center;justify-self:center;line-height:1}
.dual .b{color:var(--fire);text-align:left;justify-self:start;min-width:0;white-space:nowrap}
@media (max-width:640px){
  .hero.hero-source .source-title{font-size:clamp(72px,24vw,122px)!important}
  .hero.hero-source .source-copy{font-size:clamp(22px,6vw,34px)!important;max-width:13ch!important}
  .dualities{max-width:94vw;gap:8px}
  .dual{column-gap:12px;font-size:clamp(17px,4.8vw,21px)}
  .dual .a,.dual .b{min-width:0}
}

.source-kicker-top{
  margin-bottom:14px!important;
  font-size:clamp(13px,2vw,16px)!important;
  letter-spacing:.46em!important;
  color:rgba(201,162,75,.92)!important;
  text-shadow:0 0 18px rgba(201,162,75,.18)!important;
}
.source-kicker-main{
  margin-bottom:38px!important;
  font-size:clamp(15px,2.2vw,19px)!important;
  letter-spacing:.52em!important;
  font-weight:400!important;
  color:rgba(232,232,232,.82)!important;
  text-shadow:0 0 16px rgba(255,255,255,.12)!important;
}
@media(max-width:640px){
  .source-kicker-top{
    margin-bottom:12px!important;
    font-size:13px!important;
    letter-spacing:.34em!important;
  }
  .source-kicker-main{
    margin-bottom:34px!important;
    font-size:14px!important;
    letter-spacing:.30em!important;
    font-weight:400!important;
    color:rgba(232,232,232,.86)!important;
  }
}

.photo.photo-author{
  width:min(64vmin,760px)!important;
  max-width:760px!important;
  margin:10px auto 10px!important;
  -webkit-mask:none!important;
  mask:none!important;
  background:transparent!important;
  filter:drop-shadow(0 0 26px rgba(196,66,47,.14)) drop-shadow(0 0 26px rgba(30,111,217,.14))!important;
  pointer-events:none!important;
  user-select:none!important;
  transform:translateX(-1.8%)!important;
}
.photo.photo-author img{
  width:100%;height:auto;display:block;pointer-events:none!important;user-select:none!important;-webkit-user-drag:none;
}
@media (max-width:680px){
  .photo.photo-author{width:min(94vw,640px)!important;max-width:640px!important;transform:translateX(-2.2%)!important}
}

.photo.photo-scene{
  width:min(440px,86vw)!important;
  margin:18px auto 0!important;
  -webkit-mask:none!important;
  mask:none!important;
  background:transparent!important;
  filter:drop-shadow(0 0 40px rgba(196,66,47,.18)) drop-shadow(0 0 40px rgba(30,111,217,.18))!important;
  pointer-events:none!important;
  user-select:none!important;
}
.photo.photo-scene img{display:block;width:100%;height:auto;pointer-events:none!important;user-select:none!important;-webkit-user-drag:none}

.photo.photo-scene{
  width:min(440px,86vw)!important;
  margin:18px auto 0!important;
  -webkit-mask:none!important;
  mask:none!important;
  background:transparent!important;
  filter:drop-shadow(0 0 40px rgba(196,66,47,.18)) drop-shadow(0 0 40px rgba(30,111,217,.18))!important;
  pointer-events:none!important;
  user-select:none!important;
}
.photo.photo-scene img{display:block;width:100%;height:auto;pointer-events:none!important;user-select:none!important;-webkit-user-drag:none}

.photo.photo-author-support{
  width:min(64vmin,760px)!important;
  max-width:760px!important;
  margin:10px auto 10px!important;
  -webkit-mask:none!important;
  mask:none!important;
  background:transparent!important;
  filter:drop-shadow(0 0 26px rgba(196,66,47,.14)) drop-shadow(0 0 26px rgba(30,111,217,.14))!important;
  pointer-events:none!important;
  user-select:none!important;
  transform:translateX(-1.8%)!important;
}
.photo.photo-author-support img{
  width:100%;height:auto;display:block;pointer-events:none!important;user-select:none!important;-webkit-user-drag:none;
}
.hero .photo-author-support + .word{
  margin-top:0!important;
}
main > section.wrap:last-of-type{
  padding-bottom:clamp(72px,10vh,118px)!important;
}
@media (max-width:680px){
  .photo.photo-author-support{
    width:min(94vw,640px)!important;
    max-width:640px!important;
    transform:translateX(-2.2%)!important;
  }
  main > section.wrap:last-of-type{
    padding-bottom:clamp(68px,9vh,104px)!important;
  }
}

.pager,
.pager.duo,
.pager:not(.solo),
.pager.solo{
  width:100%!important;
  max-width:1080px!important;
  margin:0 auto clamp(60px,10vh,120px)!important;
  padding:0 clamp(22px,4vw,48px)!important;
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:20px!important;
}
.pager.solo{
  grid-template-columns:1fr!important;
  max-width:640px!important;
}
.pjump{
  position:relative!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  min-height:150px!important;
  width:100%!important;
  padding:34px 34px!important;
  border-radius:22px!important;
  overflow:hidden!important;
  white-space:normal!important;
}
.pjump.prev{
  align-items:flex-start!important;
  text-align:left!important;
}
.pjump.next{
  align-items:flex-end!important;
  text-align:right!important;
}
.pjump .lab{
  display:block!important;
  max-width:100%!important;
  font-size:11px!important;
  line-height:1.2!important;
  letter-spacing:.38em!important;
  overflow-wrap:anywhere!important;
}
.pjump .ttl{
  display:block!important;
  max-width:min(100%,18ch)!important;
  margin-top:14px!important;
  font-size:clamp(24px,3vw,34px)!important;
  line-height:1.08!important;
  overflow-wrap:break-word!important;
  word-break:normal!important;
  hyphens:auto!important;
}
.pjump.prev .ttl,
.pjump.prev .lab{
  text-align:left!important;
}
.pjump.next .ttl,
.pjump.next .lab{
  text-align:right!important;
}

@media(max-width:720px){
  .pager,
  .pager.duo,
  .pager:not(.solo),
  .pager.solo{
    display:flex!important;
    flex-direction:column!important;
    max-width:100%!important;
    margin:0 auto clamp(52px,8vh,88px)!important;
    padding:0 clamp(18px,5vw,26px)!important;
    gap:22px!important;
  }
  .pager .pjump.next{
    order:-1!important;
  }
  .pager .pjump.prev{
    order:0!important;
  }
  .pjump{
    min-height:138px!important;
    padding:28px 28px!important;
    border-radius:22px!important;
  }
  .pjump .lab{
    font-size:10px!important;
    letter-spacing:.42em!important;
  }
  .pjump .ttl{
    max-width:min(100%,16ch)!important;
    margin-top:16px!important;
    font-size:clamp(28px,8vw,38px)!important;
    line-height:1.05!important;
  }
  .pjump.next{
    align-items:flex-end!important;
    text-align:right!important;
  }
  .pjump.prev{
    align-items:flex-start!important;
    text-align:left!important;
  }
}

@media(max-width:380px){
  .pager,
  .pager.duo,
  .pager:not(.solo),
  .pager.solo{
    padding:0 16px!important;
    gap:18px!important;
  }
  .pjump{
    min-height:126px!important;
    padding:24px 22px!important;
  }
  .pjump .lab{
    font-size:9px!important;
    letter-spacing:.34em!important;
  }
  .pjump .ttl{
    font-size:clamp(25px,8vw,34px)!important;
  }
}

/* History opener */
.history-graphic-main{
  padding:0;
  margin:0;
}
.history-stage-wrap{
  width:100vw;
  max-width:none;
  margin:0 0 clamp(42px,7vh,78px);
  padding:0;
  position:relative;
  left:50%;
  right:50%;
  margin-left:-50vw;
  margin-right:-50vw;
}
.history-stage{
  position:relative;
  width:100vw;
  aspect-ratio: 1792 / 1024;
  min-height:auto;
  height:auto;
  overflow:hidden;
  border-radius:0;
  background:
    linear-gradient(180deg,rgba(0,0,0,.04),rgba(0,0,0,.08)),
    url("/assets/img/history-opener-main.png") center top / 100% 100% no-repeat,
    #050506;
  box-shadow:none;
}
.history-stage::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(42% 52% at 0% 10%,rgba(196,66,47,.14),transparent 68%),
    radial-gradient(42% 52% at 100% 90%,rgba(30,111,217,.14),transparent 68%),
    linear-gradient(180deg,rgba(5,5,6,.08) 0%,rgba(5,5,6,0) 18%,rgba(5,5,6,0) 82%,rgba(5,5,6,.14) 100%);
  mix-blend-mode:screen;
}
@media(max-width:700px){
  .history-stage{
    aspect-ratio: 1024 / 1792;
    background:
      linear-gradient(180deg,rgba(0,0,0,.04),rgba(0,0,0,.08)),
      url("/assets/img/history-opener-mobile.png") center top / 100% 100% no-repeat,
      #050506;
  }
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Skip link for accessibility */
.skip-link {
  position: absolute;
  top: -100%;
  left: 16px;
  z-index: 10000;
  padding: 8px 16px;
  background: var(--fire-orange);
  color: var(--bg);
  font-family: var(--title);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  border-radius: 0 0 4px 4px;
  transition: top .15s ease;
}
.skip-link:focus {
  top: 0;
}

/* Visually hidden (accessible H1 for visual pages) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Hell title H1 wrapper for mens-hell index */
.hell-title {
  display: contents;
}

/* ---------- modern image formats (AVIF/WebP with PNG fallback) ---------- */
@supports (background-image: image-set(url("/assets/img/logo.avif") type("image/avif"))){
  .watermark{background-image:image-set(url("/assets/img/logo.avif") type("image/avif"),url("/assets/img/logo.webp") type("image/webp"),url("/assets/img/logo.png") type("image/png"))}
  .brand .mk,footer .fmark{background-image:image-set(url("/assets/img/mark.avif") type("image/avif"),url("/assets/img/mark.webp") type("image/webp"),url("/assets/img/mark.png") type("image/png"))}
  .gate .orb{background-image:image-set(url("/assets/img/logo.avif") type("image/avif"),url("/assets/img/logo.webp") type("image/webp"),url("/assets/img/logo.png") type("image/png"))}
  .opener-stage{background:
    linear-gradient(180deg,rgba(0,0,0,.04),rgba(0,0,0,.08)),
    url("/assets/img/differences-opener-main-thomas-v19.png") center top / 100% 100% no-repeat,
    #050506}
  .history-stage{background:
    linear-gradient(180deg,rgba(0,0,0,.04),rgba(0,0,0,.08)),
    image-set(url("/assets/img/history-opener-main.avif") type("image/avif"),url("/assets/img/history-opener-main.webp") type("image/webp"),url("/assets/img/history-opener-main.png") type("image/png")) center top / 100% 100% no-repeat,
    #050506}
  @media(max-width:700px){
    .opener-stage{background:
      linear-gradient(180deg,rgba(0,0,0,.04),rgba(0,0,0,.08)),
      url("/assets/img/differences-opener-mobile-thomas-v19.png") center top / 100% 100% no-repeat,
      #050506}
    .history-stage{background:
      linear-gradient(180deg,rgba(0,0,0,.04),rgba(0,0,0,.08)),
      image-set(url("/assets/img/history-opener-mobile.avif") type("image/avif"),url("/assets/img/history-opener-mobile.webp") type("image/webp"),url("/assets/img/history-opener-mobile.png") type("image/png")) center top / 100% 100% no-repeat,
      #050506}
  }
}

/* ---------- cross-document view transitions ---------- */
@view-transition{navigation:auto}
.bar{view-transition-name:site-bar}
.progress{view-transition-name:site-progress}
footer{view-transition-name:site-footer}
::view-transition-old(root){animation:vt-out .34s var(--ease) both}
::view-transition-new(root){animation:vt-in .5s var(--ease) both}
@keyframes vt-out{to{opacity:0;transform:translateY(-14px)}}
@keyframes vt-in{from{opacity:0;transform:translateY(18px)}}
@media (prefers-reduced-motion: reduce){
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}


/* ---------- the paper (interactive One Exercise) ---------- */
.paper{
  margin:clamp(30px,5vh,56px) auto;max-width:640px;position:relative;
  border:1px solid var(--line);border-radius:14px;
  background:linear-gradient(180deg,rgba(12,12,17,.9),rgba(8,8,11,.94));
  box-shadow:0 24px 80px rgba(0,0,0,.5);
  overflow:hidden;
}
.paper::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:var(--grad-duo);opacity:.7}
.paper-head{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--line)}
.paper-head h4{
  font-family:var(--title);font-weight:500;font-size:11.5px;letter-spacing:.22em;
  text-transform:uppercase;padding:16px 18px 14px;text-align:center;line-height:1.5;
}
.paper-head h4.ph-fire{color:var(--fire-gold)}
.paper-head h4.ph-water{color:var(--water-light);border-left:1px solid var(--line)}
.paper-cols{display:grid;grid-template-columns:1fr 1fr;min-height:260px}
.paper-col{padding:16px 16px 18px;display:flex;flex-direction:column;gap:4px}
.paper-col.pc-water{border-left:1px solid var(--line)}
.paper-col ul{list-style:none;display:flex;flex-direction:column;gap:2px;margin:0 0 8px}
.paper-col li{
  font-family:var(--serif);font-style:italic;font-size:16.5px;color:var(--ink-soft);
  display:flex;align-items:center;gap:8px;padding:5px 8px;border-radius:8px;
  border-bottom:1px dashed rgba(255,255,255,.07);
  animation:ink .6s var(--ease) both;
}
@keyframes ink{from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:none}}
.paper-col.pc-fire li{border-left:2px solid rgba(255,106,26,.35)}
.paper-col.pc-water li{border-left:2px solid rgba(79,195,247,.35)}
.paper-col li span{flex:1;word-break:break-word}
.paper-col li .del{cursor:pointer;border:0;background:none;color:var(--muted);
  font-size:15px;line-height:1;padding:2px 5px;opacity:0;transition:.25s}
.paper-col li:hover .del{opacity:1}
.paper-col li .del:hover{color:var(--fire-orange)}
.paper-col input{
  width:100%;margin-top:auto;
  font-family:var(--serif);font-style:italic;font-size:16px;color:var(--ink);
  background:none;border:0;border-bottom:1px solid var(--line);
  padding:9px 8px;outline:none;transition:border-color .3s;
}
.paper-col input::placeholder{color:var(--muted);opacity:.75}
.paper-col.pc-fire input:focus{border-color:var(--fire-gold)}
.paper-col.pc-water input:focus{border-color:var(--water-light)}
.paper-foot{
  border-top:1px solid var(--line);padding:14px 18px;text-align:center;
  font-family:var(--title);font-weight:300;font-size:12px;letter-spacing:.14em;
  color:var(--muted);min-height:44px;display:flex;align-items:center;justify-content:center;
  transition:color .5s;
}
.paper-foot.lit{color:var(--ink-soft)}
.paper-foot .pf-n{font-family:var(--display);font-size:17px;letter-spacing:.06em;margin:0 6px}
.paper-foot .pf-fire{color:var(--fire-gold)}
.paper-foot .pf-water{color:var(--water-light)}
@media(max-width:560px){
  .paper-head h4{font-size:10px;padding:13px 10px 11px;letter-spacing:.14em}
  .paper-col{padding:12px 10px 14px}
  .paper-col li{font-size:15px}
}

/* ---------- the cut — one line in the second person, end of chapter ---------- */
.cut{
  max-width:var(--col);margin:clamp(72px,12vh,130px) auto clamp(56px,9vh,96px);
  padding:0 24px;text-align:center;
}
.cut::before{
  content:"◆";display:block;
  font-size:14px;line-height:1;color:var(--gold);opacity:.55;
  margin:0 auto 34px;
}
.cut p{
  font-family:var(--serif);font-style:italic;
  font-size:1.3em;line-height:1.85;letter-spacing:.01em;color:var(--ink);
}

/* ---------- the paper returns (read-only, end of the narrative) ---------- */
.paper-return-sec{display:none}
.paper-return-sec.has-ink{display:block}
.paper--return .paper-col{min-height:120px;padding-bottom:22px}
.paper-return-lead{
  text-align:center;font-family:var(--serif);font-style:italic;
  font-size:1.1em;color:var(--ink);margin:0 auto 26px;max-width:var(--col);padding:0 24px;
}

/* ---------- pass it on (selection share) ---------- */
.passit{
  position:absolute;z-index:150;transform:translate(-50%,-115%);
  font-family:var(--title);font-weight:500;font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink);white-space:nowrap;
  background:rgba(10,10,14,.92);backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(201,162,75,.45);border-radius:40px;
  padding:11px 20px;cursor:pointer;
  box-shadow:0 10px 40px rgba(0,0,0,.55);
  opacity:0;animation:passit-in .35s var(--ease) forwards;
}
@keyframes passit-in{to{opacity:1}}
.passit:hover{border-color:var(--fire-gold);box-shadow:0 0 26px rgba(255,182,39,.2)}
.passit.done{color:var(--fire-gold);border-color:var(--fire-gold);cursor:default}
@media(max-width:700px){.passit{font-size:10.5px;padding:10px 16px;letter-spacing:.1em}}

/* ---------- openery wtopione w płótno: krawędzie rozpuszczone, żywioły wychodzą poza ramę ---------- */
.opener-stage::after,
.history-stage::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg,#050506 0%,rgba(5,5,6,0) clamp(26px,7vw,120px)),
    linear-gradient(270deg,#050506 0%,rgba(5,5,6,0) clamp(26px,7vw,120px)),
    linear-gradient(180deg,#050506 0%,rgba(5,5,6,0) clamp(22px,6vh,90px)),
    linear-gradient(0deg,#050506 0%,rgba(5,5,6,0) clamp(30px,8vh,120px)),
    radial-gradient(140% 140% at 50% 50%,transparent 62%,rgba(5,5,6,.55) 100%);
}
.opener-stage-wrap{overflow:visible}
.opener-stage-wrap::before{
  content:"";
  position:absolute;
  left:0;right:0;
  top:calc(clamp(60px,9vh,140px) * -1);
  bottom:calc(clamp(60px,9vh,140px) * -1);
  pointer-events:none;
  z-index:0;
  background:
    radial-gradient(34% 30% at 12% 0%,rgba(196,66,47,.10),transparent 70%),
    radial-gradient(30% 26% at 88% 0%,rgba(30,111,217,.09),transparent 70%),
    radial-gradient(34% 30% at 14% 100%,rgba(255,106,26,.07),transparent 70%),
    radial-gradient(30% 26% at 86% 100%,rgba(79,195,247,.08),transparent 70%);
}
.opener-stage,.history-stage{position:relative;z-index:1}
@media (prefers-reduced-motion: no-preference){
  .opener-stage::after,.history-stage::after{transition:opacity .6s var(--ease)}
}


/* ---------- v12 fixes: author graphic + mobile navigation button ---------- */
.brand{min-width:0}
.brand b{white-space:nowrap}
.menu-btn{position:relative;z-index:210;flex:0 0 auto;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.menu-btn .menu-label{display:inline-block}
.menu-btn .ic{flex:0 0 auto}
@media(max-width:560px){
  .menu-btn{width:44px;height:44px;min-width:44px;padding:0!important;justify-content:center;border-radius:50%}
  .menu-btn .menu-label{display:none!important}
  .menu-btn .ic{display:inline-block!important;width:18px!important;height:12px!important;position:relative!important}
  .menu-btn .ic i{display:block!important;position:absolute!important;left:0!important;width:100%!important;height:2px!important;border-radius:2px!important;background:var(--grad-duo)!important}
  .menu-btn .ic i:nth-child(1){top:0!important}
  .menu-btn .ic i:nth-child(2){top:5px!important}
  .menu-btn .ic i:nth-child(3){top:10px!important}
  .brand{gap:9px;max-width:calc(100vw - 88px);overflow:hidden}
  .brand b{font-size:14px!important;max-width:calc(100vw - 140px);overflow:hidden;text-overflow:ellipsis}
}
/* ---------- v13 fix: Men’s Hell graphic is blended into the page canvas ---------- */
.photo.photo-scene{
  background:transparent!important;
  mix-blend-mode:screen!important;
  isolation:auto!important;
}
.photo.photo-scene picture,
.photo.photo-scene img{
  background:transparent!important;
}


/* ---------- v15 fix: Men’s Hell scene uses real transparent PNG, no canvas blending ---------- */
.photo.photo-scene{
  background:transparent!important;
  mix-blend-mode:normal!important;
  isolation:isolate!important;
}
.photo.photo-scene img{
  background:transparent!important;
}

/* ---------- v29: entry marks use the exact Author graphic class/size; mobile nav remains hardened ---------- */
.overlay{pointer-events:none!important}
.overlay.open{pointer-events:auto!important}
html.nav-open,
body.nav-open{overflow:hidden!important}

@media(max-width:560px){
  .bar{z-index:300!important}
  .overlay{z-index:1200!important}
  .overlay.open{visibility:visible!important;opacity:1!important}
  .menu-btn{position:relative!important;z-index:1!important;pointer-events:auto!important}
}

/* ---------- v33: clean Author mark size lock ----------
   One Exercise, Family, Adrenaline and Author use the same hero mark size.
   This is the final rule and there are no later smaller locks after it. */
.hero .photo.photo-author{
  width:min(64vmin,760px)!important;
  max-width:760px!important;
  margin:8px auto 8px!important;
  transform:translateX(-1.8%)!important;
  -webkit-mask:none!important;
  mask:none!important;
  background:transparent!important;
  filter:drop-shadow(0 0 34px rgba(196,66,47,.16)) drop-shadow(0 0 34px rgba(30,111,217,.16))!important;
  pointer-events:none!important;
  user-select:none!important;
}
.hero .photo.photo-author img{
  display:block!important;
  width:100%!important;
  height:auto!important;
  max-width:none!important;
  pointer-events:none!important;
  user-select:none!important;
  -webkit-user-drag:none!important;
  image-rendering:auto!important;
}
@media(max-width:680px){
  .hero .photo.photo-author{
    width:min(94vw,640px)!important;
    max-width:640px!important;
    margin:4px auto 4px!important;
    transform:translateX(-2.2%)!important;
  }
}


/* ═══════════════════════════════════════════
   v41 ENHANCEMENT LAYER
   Appended on top of proven v40 base.
   Only additions. No layout overrides.
   ═══════════════════════════════════════════ */

/* --- Scrollbar: desktop only --- */
@media(max-width:780px){
  ::-webkit-scrollbar{width:0!important;display:none!important}
}

/* --- The Cut: cinematic closing --- */
.cut::before{
  content:"◆"!important;display:block!important;
  font-size:11px!important;line-height:1!important;
  color:var(--gold)!important;opacity:.7!important;
  margin:0 auto 30px!important;
  text-shadow:0 0 20px rgba(201,162,75,.4)!important;
  animation:cut-breathe 5s ease-in-out infinite alternate!important;
}
@keyframes cut-breathe{
  0%{opacity:.45;text-shadow:0 0 14px rgba(201,162,75,.25)}
  100%{opacity:.85;text-shadow:0 0 28px rgba(201,162,75,.55)}
}
.cut p{
  font-size:clamp(1.25em,2.6vw,1.55em)!important;
  line-height:1.75!important;letter-spacing:.015em!important;
  text-shadow:0 0 40px rgba(236,233,227,.08)!important;
  max-width:32ch!important;margin:0 auto!important;
}
.cut::after{
  content:""!important;display:block!important;
  width:min(260px,55%)!important;height:1px!important;
  margin:32px auto 0!important;
  background:linear-gradient(90deg,transparent,rgba(201,162,75,.35),transparent)!important;
}

/* --- Rule: pulsing gold dot --- */
.rule{position:relative!important}
.rule::after{
  content:""!important;position:absolute!important;
  top:50%!important;left:50%!important;
  width:5px!important;height:5px!important;border-radius:50%!important;
  background:var(--gold)!important;transform:translate(-50%,-50%)!important;
  box-shadow:0 0 14px 3px rgba(201,162,75,.4)!important;
  animation:rule-pulse 4s ease-in-out infinite!important;
}
@keyframes rule-pulse{
  0%,100%{opacity:.5}
  50%{opacity:1}
}

/* --- Footer: fire-gold-water line --- */
footer::before{
  content:""!important;display:block!important;
  width:min(480px,70%)!important;height:1px!important;
  margin:0 auto!important;
  background:linear-gradient(90deg,
    transparent,rgba(196,66,47,.4) 20%,
    rgba(201,162,75,.55) 50%,
    rgba(30,111,217,.4) 80%,transparent)!important;
}
footer .flogo{
  transition:opacity .6s,filter .6s!important;
}
footer .flogo:hover{
  opacity:.9!important;filter:drop-shadow(0 0 20px rgba(201,162,75,.15))!important;
}

/* --- Bar: subtle gradient line under --- */
.bar::after{
  content:""!important;position:absolute!important;
  bottom:-1px!important;left:0!important;right:0!important;height:1px!important;
  background:linear-gradient(90deg,
    transparent 5%,rgba(196,66,47,.12) 20%,
    rgba(201,162,75,.18) 50%,
    rgba(30,111,217,.12) 80%,transparent 95%)!important;
  pointer-events:none!important;
}

/* --- Pager: hover lift --- */
.pjump{transition:.5s var(--ease)!important}
.pjump:hover{
  transform:translateY(-5px)!important;
  border-color:rgba(255,255,255,.16)!important;
  box-shadow:0 20px 60px rgba(0,0,0,.55),0 0 1px rgba(255,255,255,.08)!important;
}

/* --- Paper: hover polish --- */
.paper{transition:box-shadow .5s,border-color .5s!important}
.paper:hover{
  border-color:rgba(255,255,255,.12)!important;
  box-shadow:0 32px 100px rgba(0,0,0,.6),0 0 40px rgba(201,162,75,.04)!important;
}

/* --- Key sentence: hover glow --- */
.content p.key{transition:box-shadow .5s,border-color .5s!important}
.content p.key:hover{
  border-color:rgba(201,162,75,.55)!important;
  box-shadow:0 0 60px rgba(201,162,75,.12),0 0 100px rgba(201,162,75,.06)!important;
}

/* --- Brand mark: hover glow --- */
.brand .mk{transition:box-shadow .4s!important}
.brand:hover .mk{
  box-shadow:0 0 0 1px rgba(201,162,75,.3),0 4px 18px rgba(0,0,0,.6),0 0 20px rgba(201,162,75,.1)!important;
}

/* --- Pass it on: premium feel --- */
.passit{
  border:1px solid rgba(201,162,75,.5)!important;
  box-shadow:0 12px 44px rgba(0,0,0,.6),0 0 1px rgba(201,162,75,.2)!important;
  transition:all .35s!important;
}
.passit:hover{
  border-color:var(--gold)!important;
  box-shadow:0 14px 50px rgba(0,0,0,.6),0 0 30px rgba(201,162,75,.18)!important;
}

/* --- Selection: golden --- */
::selection{background:rgba(201,162,75,.25)!important;color:#fff!important}

/* --- Progress bar: thinner, refined --- */
.progress{height:2px!important;
  box-shadow:0 0 10px rgba(255,160,40,.4),0 0 24px rgba(255,160,40,.2)!important}

/* --- Nav: visited chapter dot --- */
.chapters a.ch-read::after{
  content:""!important;position:absolute!important;
  right:14px!important;top:50%!important;
  width:4px!important;height:4px!important;border-radius:50%!important;
  background:rgba(201,162,75,.45)!important;transform:translateY(-50%)!important;
}
.chapters a.active{
  box-shadow:0 0 30px rgba(255,182,39,.06)!important;
}

/* --- Watermark: breathing --- */
.watermark{animation:wm-breathe 16s ease-in-out infinite alternate!important}
@keyframes wm-breathe{
  0%{opacity:.04;transform:translate(-50%,-50%) scale(1)}
  100%{opacity:.065;transform:translate(-50%,-50%) scale(1.04)}
}

/* --- Desktop scrollbar: refined --- */
@media(min-width:781px){
  ::-webkit-scrollbar{width:8px}
  ::-webkit-scrollbar-track{background:#040405}
  ::-webkit-scrollbar-thumb{
    background:linear-gradient(180deg,rgba(196,66,47,.6),rgba(201,162,75,.5),rgba(30,111,217,.6));
    border-radius:20px;border:2px solid #040405;
  }
}

/* --- Desktop: paragraph reading lamp --- */
@media(min-width:781px){
  .content p{transition:color .6s ease!important}
  .content p.v41-focus{color:var(--ink)!important}
}

/* --- Reduced motion: kill new animations --- */
@media(prefers-reduced-motion:reduce){
  .cut::before,.rule::after,.watermark{animation:none!important}
}


/* ---------- the mirror (Recognition – brother vs rival) ---------- */
.mirror{
  margin:clamp(30px,5vh,56px) auto;max-width:640px;position:relative;
  border:1px solid var(--line);border-radius:14px;
  background:linear-gradient(180deg,rgba(12,12,17,.9),rgba(8,8,11,.94));
  box-shadow:0 24px 80px rgba(0,0,0,.5);
  overflow:hidden;
}
.mirror::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:var(--grad-duo);opacity:.7}
.mirror-head{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--line)}
.mirror-head h4{
  font-family:var(--title);font-weight:500;font-size:11.5px;letter-spacing:.22em;
  text-transform:uppercase;padding:16px 18px 14px;text-align:center;line-height:1.5;
}
.mirror-head h4.mh-fire{color:var(--fire-gold)}
.mirror-head h4.mh-muted{color:var(--muted);border-left:1px solid var(--line)}
.mirror-cols{display:grid;grid-template-columns:1fr 1fr}
.mirror-col{padding:18px 18px 22px;display:flex;flex-direction:column;gap:6px}
.mirror-col.mc-rival{border-left:1px solid var(--line)}
.mirror-col p{
  font-family:var(--serif);font-style:italic;font-size:15.5px;line-height:1.7;
  color:var(--ink-soft);padding:6px 8px;border-radius:6px;
  border-bottom:1px dashed rgba(255,255,255,.05);margin:0;
}
.mirror-col.mc-brother p{border-left:2px solid rgba(255,106,26,.3)}
.mirror-col.mc-rival p{border-left:2px solid rgba(126,122,115,.3)}
.mirror-foot{
  border-top:1px solid var(--line);padding:14px 18px;text-align:center;
  font-family:var(--title);font-weight:300;font-size:12px;letter-spacing:.14em;
  color:var(--muted);
}
@media(max-width:560px){
  .mirror-head h4{font-size:10px;padding:13px 10px 11px;letter-spacing:.14em}
  .mirror-col{padding:12px 10px 14px}
  .mirror-col p{font-size:14px}
}

/* ---------- nav layers (two-tier navigation) ---------- */
.nav-divide{
  display:flex;align-items:center;gap:14px;
  margin:20px 0 16px;padding:0;
}
.nav-divide::before,.nav-divide::after{
  content:"";flex:1;height:1px;
  background:var(--grad-duo);opacity:.3;
}
.nav-divide span{
  font-size:9px;color:var(--gold);opacity:.55;line-height:1;
  letter-spacing:.2em;
}
.nav-divide-close{
  margin:16px 0 12px;height:1px;
  background:var(--line);
}

/* ═══════════════════════════════════════════════════════════════
   v45 — TWO DISTINCT NARRATIVE ZONES
   Center / Men's Hell
   ═══════════════════════════════════════════════════════════════ */

/* Persistent section identity */
.brand > span:last-child{display:flex;flex-direction:column;justify-content:center;min-width:0}
.brand .brand-section{
  display:block;margin-top:-1px;font-family:var(--title);font-weight:400;
  font-size:9px;line-height:1.15;letter-spacing:.28em;text-transform:uppercase;
  color:var(--gold);white-space:nowrap;
}
.hell-section .brand .brand-section{color:var(--fire-orange)}

.bar-mid{gap:10px;max-width:min(46vw,620px);white-space:nowrap;overflow:hidden}
.bar-mid .section-mark{
  font-family:var(--title);font-weight:500;font-size:10px;letter-spacing:.28em;
  text-transform:uppercase;color:var(--gold);flex:none;
}
.hell-section .bar-mid .section-mark{color:var(--fire-orange)}
.bar-mid .section-sep{color:rgba(255,255,255,.22);font-size:13px;flex:none}
.bar-mid em{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.center-section .menu-btn{border-color:rgba(201,162,75,.18)}
.hell-section .menu-btn{border-color:rgba(223,88,54,.28);background:rgba(70,12,10,.08)}
.hell-section .menu-btn:hover{border-color:var(--fire-orange);box-shadow:0 0 30px rgba(223,88,54,.16)}

/* Men's Hell is another wing of the same building, not another brand. */
.hell-section::before{
  background:
    radial-gradient(52% 72% at 4% 10%,rgba(125,24,20,.24),transparent 62%),
    radial-gradient(48% 68% at 96% 88%,rgba(12,42,96,.22),transparent 64%),
    radial-gradient(46% 54% at 50% 44%,rgba(0,0,0,.22),transparent 72%);
}
.hell-section .bar{background:rgba(4,3,4,.72)}
.hell-section .bar::after{
  background:linear-gradient(90deg,transparent 3%,rgba(196,66,47,.32) 24%,rgba(112,34,30,.18) 50%,rgba(30,111,217,.22) 78%,transparent 97%)!important;
}
.hell-section .overlay{
  background:
    radial-gradient(85% 90% at 0% 0%,rgba(96,18,17,.18),transparent 58%),
    radial-gradient(85% 90% at 100% 100%,rgba(10,37,84,.17),transparent 60%),
    rgba(3,3,5,.95);
}
.hell-section .watermark{opacity:.025!important;filter:saturate(.55) contrast(1.08)}

/* Local navigation: each zone only exposes its own architecture. */
.chapters .nav-divide,.chapters .nav-divide-close{grid-column:1/-1}
.nav-divide{margin:22px 0 12px}
.nav-divide span{
  font-family:var(--title);font-weight:500;font-size:9px;letter-spacing:.34em;
  text-transform:uppercase;color:var(--gold);opacity:.82;white-space:nowrap;
}
.hell-section .nav-divide span{color:var(--fire-orange)}

.chapters a.section-portal,
.chapters a.section-return{
  grid-column:1/-1;min-height:74px;align-items:center;border-color:rgba(255,255,255,.11);
  background:linear-gradient(100deg,rgba(196,66,47,.09),rgba(201,162,75,.045) 48%,rgba(30,111,217,.08));
}
.chapters a.section-portal .no,
.chapters a.section-return .no{font-size:31px;color:var(--gold)}
.chapters a.section-portal .nm,
.chapters a.section-return .nm{font-size:clamp(20px,2.2vw,27px);letter-spacing:.035em;color:#fff}
.chapters a.section-portal:hover,
.chapters a.section-return:hover{
  border-color:rgba(201,162,75,.45);background:linear-gradient(100deg,rgba(196,66,47,.15),rgba(201,162,75,.075) 48%,rgba(30,111,217,.13));
  box-shadow:0 18px 54px rgba(0,0,0,.28);
}
.hell-section .chapters a.section-return{
  background:linear-gradient(100deg,rgba(201,162,75,.055),rgba(255,255,255,.018));
  border-color:rgba(201,162,75,.22);
}

/* The Men's Hell gateway now contains the complete local table of contents. */
.hell-section .opening.gate{
  padding-bottom:clamp(64px,10vh,118px);border-bottom:1px solid rgba(255,255,255,.055);
}
.hell-section .hell-title .hell,
.hell-section .hell-title .men{
  display:block;font-family:var(--display);font-style:normal;text-transform:uppercase;
  font-size:clamp(70px,14vw,154px);line-height:.76;letter-spacing:.015em;
}
.hell-section .hell-title .hell{
  margin-top:clamp(18px,4vh,42px);
  background:var(--grad-fire);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.hell-section .hell-title .men{
  background:var(--grad-water);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.hell-section .gate .epigraph{
  max-width:36ch;margin-top:clamp(38px,7vh,72px);font-family:var(--serif);
  font-size:clamp(18px,2.3vw,23px);line-height:1.7;color:var(--ink);
}
.hell-section .gate .gate-soft{
  max-width:38ch;margin:22px auto 0;font-family:var(--serif);font-size:clamp(16px,1.8vw,19px);
  line-height:1.7;color:var(--ink-soft);
}

.hell-directory{
  max-width:1120px!important;padding-top:clamp(72px,11vh,132px)!important;
  padding-bottom:clamp(70px,11vh,132px)!important;
}
.hell-directory-head{text-align:center;margin:0 auto clamp(34px,6vh,62px);max-width:680px}
.hell-directory-eyebrow{
  font-family:var(--title);font-size:10px;line-height:1.2;font-weight:500;
  letter-spacing:.42em;text-transform:uppercase;color:var(--fire-orange);margin-bottom:14px;
}
.hell-directory-head h2{
  font-family:var(--display);font-size:clamp(52px,8vw,92px);line-height:.9;
  text-transform:uppercase;letter-spacing:.02em;color:var(--ink);
}
.hell-directory-head > p:last-child{
  margin-top:18px;font-family:var(--title);font-size:12px;line-height:1.6;
  letter-spacing:.2em;text-transform:uppercase;color:var(--muted);
}
.hell-chapter-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.hell-chapter-card{
  position:relative;display:grid;grid-template-columns:62px minmax(0,1fr) 30px;
  align-items:center;gap:18px;min-height:92px;padding:21px 24px;
  border:1px solid rgba(255,255,255,.085);border-radius:15px;
  background:linear-gradient(110deg,rgba(255,255,255,.028),rgba(255,255,255,.012));
  overflow:hidden;transition:transform .4s var(--ease),border-color .4s var(--ease),background .4s var(--ease),box-shadow .4s var(--ease);
}
.hell-chapter-card::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
  background:linear-gradient(180deg,var(--fire-red),var(--gold),var(--water));opacity:.56;
}
.hell-chapter-no{
  font-family:var(--display);font-size:30px;line-height:1;color:var(--fire-orange);
  text-align:center;border-right:1px solid rgba(255,255,255,.07);padding-right:18px;
}
.hell-chapter-title{
  font-family:var(--title);font-weight:500;font-size:clamp(18px,2vw,23px);
  line-height:1.18;color:var(--ink);
}
.hell-chapter-arrow{
  font-family:var(--title);font-size:20px;color:var(--muted);text-align:right;transition:transform .4s var(--ease),color .4s var(--ease);
}
.hell-chapter-card:hover{
  transform:translateY(-4px);border-color:rgba(223,88,54,.34);
  background:linear-gradient(110deg,rgba(196,66,47,.075),rgba(255,255,255,.018) 54%,rgba(30,111,217,.055));
  box-shadow:0 24px 70px rgba(0,0,0,.4);
}
.hell-chapter-card:hover .hell-chapter-arrow{transform:translateX(5px);color:var(--gold)}

/* Crossing cards mark a real change of section, not an ordinary next page. */
.pjump.section-crossing{border-color:rgba(201,162,75,.28)}
.pjump.section-crossing::after{
  content:"Section change";position:absolute;top:14px;right:16px;
  font-family:var(--title);font-size:8px;line-height:1;letter-spacing:.22em;
  text-transform:uppercase;color:rgba(201,162,75,.62);
}
.pjump.section-crossing.enter-hell{
  background:linear-gradient(105deg,rgba(105,21,18,.17),rgba(12,12,17,.92) 55%,rgba(11,35,78,.14));
}
.pjump.section-crossing.return-center{
  background:linear-gradient(105deg,rgba(201,162,75,.075),rgba(12,12,17,.94));
}

@media(max-width:880px){
  .brand .brand-section{display:block!important}
}
@media(max-width:700px){
  .hell-chapter-grid{grid-template-columns:1fr}
  .hell-directory{padding-left:16px!important;padding-right:16px!important}
}
@media(max-width:560px){
  .brand{max-width:calc(100vw - 76px)!important;align-items:center}
  .brand > span:last-child{max-width:calc(100vw - 124px)}
  .brand b{line-height:1.05}
  .brand .brand-section{
    display:block!important;font-size:7.5px!important;line-height:1.1!important;
    letter-spacing:.22em!important;margin-top:2px!important;
  }
  .chapters .nav-divide{margin:16px 0 10px}
  .chapters a.section-portal,.chapters a.section-return{min-height:64px;padding:14px 14px!important}
  .chapters a.section-portal .nm,.chapters a.section-return .nm{font-size:19px}
  .hell-section .hell-title .hell,.hell-section .hell-title .men{font-size:clamp(62px,25vw,108px)}
  .hell-section .gate .epigraph{max-width:28ch;padding-left:10px;padding-right:10px}
  .hell-chapter-card{grid-template-columns:48px minmax(0,1fr) 22px;gap:13px;min-height:78px;padding:17px 16px}
  .hell-chapter-no{font-size:25px;padding-right:12px}
  .hell-chapter-title{font-size:18px}
  .pjump.section-crossing::after{display:none}
}


/* ═══════════════════════════════════════════════════════════════
   v46 — CENTER / MEN'S HELL SYNERGY
   Structural clarity from v45 + restrained atmospheric cues.
   Fire gains weight inside Men's Hell without erasing water.
   ═══════════════════════════════════════════════════════════════ */

/* Center gateway: unmistakable entrance, still part of one brand. */
.center-section .chapters a.section-portal{
  border-color:rgba(196,66,47,.34)!important;
  background:linear-gradient(108deg,
    rgba(196,66,47,.14),rgba(255,106,26,.075) 27%,
    rgba(201,162,75,.055) 54%,rgba(30,111,217,.09))!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.018),0 12px 40px rgba(0,0,0,.16);
}
.center-section .chapters a.section-portal .no{
  color:var(--fire-orange)!important;
  text-shadow:0 0 18px rgba(223,88,54,.26);
}
.center-section .chapters a.section-portal .nm{color:var(--fire-gold)!important}
.center-section .chapters a.section-portal:hover{
  border-color:rgba(255,106,26,.58)!important;
  background:linear-gradient(108deg,
    rgba(196,66,47,.21),rgba(255,106,26,.11) 30%,
    rgba(201,162,75,.075) 56%,rgba(30,111,217,.13))!important;
  box-shadow:0 20px 62px rgba(0,0,0,.34),0 0 32px rgba(196,66,47,.12)!important;
}

/* Return to Center: a calm water cue, not another fire gate. */
.hell-section .chapters a.section-return{
  border-color:rgba(79,195,247,.24)!important;
  background:linear-gradient(105deg,rgba(30,111,217,.09),rgba(255,255,255,.018) 58%,rgba(201,162,75,.035))!important;
}
.hell-section .chapters a.section-return .no,
.hell-section .chapters a.section-return .nm{color:var(--water-light)!important}
.hell-section .chapters a.section-return:hover{
  border-color:rgba(79,195,247,.46)!important;
  background:linear-gradient(105deg,rgba(30,111,217,.15),rgba(255,255,255,.025) 58%,rgba(201,162,75,.05))!important;
  box-shadow:0 18px 54px rgba(0,0,0,.3),0 0 28px rgba(30,111,217,.1)!important;
}

/* Persistent sensory shift in Men's Hell — fire-forward, never fire-only. */
.hell-section .progress{
  background:linear-gradient(90deg,
    var(--fire-red) 0%,var(--fire-orange) 42%,var(--fire-gold) 66%,
    var(--water-light) 84%,var(--water) 100%)!important;
  box-shadow:0 0 11px rgba(196,66,47,.42),0 0 24px rgba(30,111,217,.12)!important;
}
.hell-section .bar{
  background:rgba(12,4,5,.76)!important;
  border-bottom-color:rgba(196,66,47,.09)!important;
}
.hell-section .bar::after{
  background:linear-gradient(90deg,
    transparent 3%,rgba(196,66,47,.38) 23%,rgba(255,106,26,.22) 47%,
    rgba(201,162,75,.13) 65%,rgba(30,111,217,.24) 82%,transparent 97%)!important;
}
.hell-section .watermark{
  opacity:.03!important;
  filter:saturate(.68) contrast(1.08) brightness(1.02)!important;
}

/* Local navigation: warmer focus, retained blue endpoint. */
.hell-section .chapters a:not(.section-return):hover{
  background:linear-gradient(105deg,rgba(196,66,47,.055),rgba(255,255,255,.018) 62%,rgba(30,111,217,.025))!important;
  border-color:rgba(196,66,47,.17)!important;
}
.hell-section .chapters a:not(.section-return):hover .no{
  background:linear-gradient(180deg,var(--fire-gold),var(--fire-orange) 68%,var(--water-light))!important;
  -webkit-background-clip:text!important;background-clip:text!important;color:transparent!important;
}
.hell-section .chapters a.active:not(.section-return){
  border-color:rgba(196,66,47,.42)!important;
  box-shadow:0 0 28px rgba(196,66,47,.07)!important;
}
.hell-section .chapters a.active:not(.section-return) .no{
  background:linear-gradient(180deg,var(--fire-gold),var(--fire-orange) 72%,var(--water-light))!important;
  -webkit-background-clip:text!important;background-clip:text!important;color:transparent!important;
}
.hell-section .chapters a.ch-read::after{
  background:linear-gradient(180deg,var(--fire-orange),var(--water-light))!important;
  opacity:.72;
}

/* Prose details carry the zone without repainting the whole site red. */
.hell-section .content::before{
  background:linear-gradient(180deg,
    var(--fire-red),var(--fire-orange) 48%,var(--fire-gold) 69%,var(--water) 100%)!important;
  opacity:.48!important;
}
.hell-section .cut::before{
  color:var(--fire-orange)!important;
  text-shadow:0 0 22px rgba(196,66,47,.48)!important;
}
.hell-section .cut::after{
  background:linear-gradient(90deg,transparent,rgba(196,66,47,.34),rgba(201,162,75,.2),rgba(30,111,217,.16),transparent)!important;
}
.hell-section .rule::after{
  background:linear-gradient(135deg,var(--fire-orange),var(--gold),var(--water-light))!important;
  box-shadow:0 0 14px 3px rgba(196,66,47,.32),0 0 18px rgba(30,111,217,.12)!important;
}
.hell-section footer::before{
  background:linear-gradient(90deg,
    transparent,rgba(196,66,47,.48) 23%,rgba(255,106,26,.42) 43%,
    rgba(201,162,75,.35) 61%,rgba(30,111,217,.3) 82%,transparent)!important;
}

/* Ordinary chapter pagers gain heat; actual section crossings remain dominant. */
.hell-section .pjump.next:not(.section-crossing)::before{
  background:radial-gradient(120% 140% at 100% 0%,rgba(196,66,47,.29),transparent 60%)!important;
}
.hell-section .pjump.prev:not(.section-crossing)::before{
  background:radial-gradient(120% 140% at 0% 100%,rgba(125,24,20,.18),rgba(30,111,217,.08) 38%,transparent 66%)!important;
}

/* Gateway directory: slightly stronger threshold, unchanged dual identity. */
.hell-section .hell-chapter-card{
  border-color:rgba(255,255,255,.095);
  background:linear-gradient(110deg,rgba(196,66,47,.038),rgba(255,255,255,.018) 52%,rgba(30,111,217,.026));
}
.hell-section .hell-chapter-card:hover{
  border-color:rgba(223,88,54,.42)!important;
  background:linear-gradient(110deg,rgba(196,66,47,.105),rgba(201,162,75,.035) 52%,rgba(30,111,217,.07))!important;
  box-shadow:0 24px 70px rgba(0,0,0,.42),0 0 26px rgba(196,66,47,.08)!important;
}

@media(min-width:781px){
  .hell-section::-webkit-scrollbar-thumb{
    background:linear-gradient(180deg,
      rgba(255,182,39,.58),rgba(255,106,26,.55) 42%,
      rgba(196,66,47,.58) 68%,rgba(30,111,217,.48))!important;
    border-radius:20px!important;border:2px solid #040405!important;
  }
}
@media(max-width:560px){
  .hell-section .bar{background:rgba(12,4,5,.94)!important}
  .center-section .chapters a.section-portal{box-shadow:none}
}

/* ═══════════════════════════════════════════════════════════════
   v47 — BASIC / ADVANCED / PROJECT
   Persistent level switch, parallel reading paths and a shared third space.
   ═══════════════════════════════════════════════════════════════ */

/* Persistent level switch — always centered, independent of the brand and menu. */
.level-switch{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  z-index:3;display:grid;grid-template-columns:1fr 1px 1fr;align-items:center;
  width:clamp(238px,25vw,330px);height:42px;padding:3px;
  border:1px solid rgba(255,255,255,.105);border-radius:999px;
  background:rgba(7,7,10,.66);box-shadow:0 12px 34px rgba(0,0,0,.28),inset 0 0 0 1px rgba(255,255,255,.012);
  overflow:hidden;
}
.level-axis{width:1px;height:20px;background:linear-gradient(180deg,transparent,rgba(255,255,255,.18),transparent)}
.level-tab{
  position:relative;isolation:isolate;height:34px;border:0;border-radius:999px;
  background:transparent;color:rgba(236,233,227,.58);cursor:pointer;
  font-family:var(--title);font-size:10px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;
  transition:color .35s var(--ease),background .35s var(--ease),box-shadow .35s var(--ease),transform .35s var(--ease);
}
.level-tab > span:last-child{position:relative;z-index:2}
.level-tab .level-glow{position:absolute;inset:0;border-radius:inherit;opacity:0;transition:opacity .35s var(--ease);z-index:1}
.level-basic .level-glow{background:linear-gradient(100deg,rgba(11,46,107,.72),rgba(30,111,217,.48),rgba(79,195,247,.22))}
.level-advanced .level-glow{background:linear-gradient(100deg,rgba(196,66,47,.25),rgba(255,106,26,.52),rgba(255,182,39,.23))}
.level-tab:hover{color:#fff}
.level-basic:hover{background:rgba(30,111,217,.09)}
.level-advanced:hover{background:rgba(196,66,47,.085)}
.level-tab.current-zone .level-glow,
html.nav-open .level-tab.is-selected .level-glow{opacity:1}
.level-basic.current-zone,
html.nav-open .level-basic.is-selected{color:#dff7ff;box-shadow:inset 0 0 0 1px rgba(79,195,247,.25),0 0 25px rgba(30,111,217,.13)}
.level-advanced.current-zone,
html.nav-open .level-advanced.is-selected{color:#fff2df;box-shadow:inset 0 0 0 1px rgba(255,106,26,.24),0 0 25px rgba(196,66,47,.13)}
:is(.project-section,.movement-section) .level-switch{border-color:rgba(201,162,75,.22);box-shadow:0 12px 34px rgba(0,0,0,.3),0 0 28px rgba(201,162,75,.035)}
:is(.project-section,.movement-section) .level-tab.current-zone{box-shadow:none}

.brand-section{white-space:nowrap;max-width:32vw;overflow:hidden;text-overflow:ellipsis}
.brand-section .zone-word{font-weight:500}
.basic-section .brand-section .zone-word{color:var(--water-light)}
.advanced-section .brand-section .zone-word{color:var(--fire-orange)}
:is(.project-section,.movement-section) .brand-section .zone-word{color:var(--gold)}
.brand-section .context-sep{color:rgba(255,255,255,.2)}
.brand-section .context-title{color:var(--muted)}

/* The overlay begins below the bar so BASIC / ADVANCED never disappears. */
.overlay{top:var(--nav-h)!important;z-index:90!important;height:calc(100dvh - var(--nav-h));background:rgba(4,4,7,.94)!important;backdrop-filter:blur(22px)!important;-webkit-backdrop-filter:blur(22px)!important}
.overlay-shell{height:100%;display:flex;flex-direction:column;min-height:0}
.overlay-head{height:62px!important;padding:0 clamp(18px,4vw,48px)!important;background:rgba(5,5,7,.58);flex:none}
.overlay-title{display:flex;align-items:baseline;gap:14px;min-width:0}
.overlay-title > span{font-family:var(--title);font-size:8px;letter-spacing:.28em;text-transform:uppercase;color:var(--muted)}
.overlay-title h3{margin:0!important;font-family:var(--display)!important;font-size:24px!important;font-weight:400!important;letter-spacing:.08em!important;color:var(--ink)!important;white-space:nowrap}
.overlay-body{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(270px,330px);gap:0;max-width:1440px;width:100%;margin:0 auto;overflow:hidden}
.nav-panel{display:none;min-width:0;min-height:0;overflow-y:auto;padding:clamp(24px,4vh,46px) clamp(18px,4vw,60px) 42px}
.nav-panel.active{display:block}
.nav-panel-intro{max-width:760px;margin:0 auto 20px;padding:0 2px 18px;border-bottom:1px solid rgba(255,255,255,.07)}
.nav-panel-intro span{display:block;font-family:var(--title);font-size:9px;font-weight:600;letter-spacing:.28em;text-transform:uppercase;margin-bottom:4px}
.nav-panel-intro p{font-family:var(--serif);font-size:16px;line-height:1.45;color:var(--muted)}
.basic-intro span{color:var(--water-light)}
.advanced-intro span{color:var(--fire-orange)}
.nav-panel .chapters{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));align-content:start;gap:5px;max-width:980px;width:100%;margin:0 auto;padding:0!important;overflow:visible!important;flex:none!important}
.nav-panel .chapters a{min-height:62px;padding:14px 17px}
.basic-panel .chapters a:hover{border-color:rgba(79,195,247,.2)!important;background:linear-gradient(100deg,rgba(30,111,217,.075),rgba(255,255,255,.016))!important}
.basic-panel .chapters a:hover .no,
.basic-panel .chapters a.active .no{background:var(--grad-water)!important;-webkit-background-clip:text!important;background-clip:text!important;color:transparent!important}
.basic-panel .chapters a.active{border-color:rgba(79,195,247,.34)!important;box-shadow:0 0 30px rgba(30,111,217,.07)!important}
.advanced-panel .chapters a:hover{border-color:rgba(255,106,26,.2)!important;background:linear-gradient(100deg,rgba(196,66,47,.075),rgba(255,255,255,.016),rgba(30,111,217,.02))!important}
.advanced-panel .chapters a:hover .no,
.advanced-panel .chapters a.active .no{background:linear-gradient(180deg,var(--fire-gold),var(--fire-orange) 68%,var(--water-light))!important;-webkit-background-clip:text!important;background-clip:text!important;color:transparent!important}
.advanced-panel .chapters a.active{border-color:rgba(255,106,26,.34)!important;box-shadow:0 0 30px rgba(196,66,47,.07)!important}

/* Shared third category — visible from both reading levels. */
.project-dock{position:relative;min-height:0;overflow-y:auto;padding:clamp(26px,4vh,46px) 24px 34px;border-left:1px solid rgba(255,255,255,.075);background:linear-gradient(180deg,rgba(201,162,75,.042),rgba(8,8,11,.72) 34%,rgba(30,111,217,.025));box-shadow:-24px 0 60px rgba(0,0,0,.15)}
.project-dock::before{content:"";position:absolute;left:-1px;top:0;width:1px;height:100%;background:linear-gradient(180deg,transparent,rgba(201,162,75,.46) 20%,rgba(255,106,26,.18) 51%,rgba(79,195,247,.23) 80%,transparent)}
.project-dock-head{margin-bottom:22px}
.project-dock-head > span{font-family:var(--title);font-size:8px;font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:var(--gold)}
.project-dock-head h3{font-family:var(--display);font-size:clamp(31px,3.2vw,45px);font-weight:400;line-height:.95;letter-spacing:.02em;margin:8px 0 10px;color:var(--ink)}
.project-dock-head p{font-family:var(--serif);font-size:14px;line-height:1.45;color:var(--muted)}
.project-dock-links{display:grid;gap:10px}
.project-link{position:relative;display:grid;grid-template-columns:30px minmax(0,1fr) 18px;align-items:center;gap:12px;padding:17px 15px;border:1px solid rgba(255,255,255,.085);border-radius:13px;background:rgba(255,255,255,.018);transition:.35s var(--ease)}
.project-link-no{font-family:var(--display);font-size:19px;color:var(--gold)}
.project-link b{display:block;font-family:var(--title);font-size:16px;font-weight:600;color:var(--ink)}
.project-link small{display:block;margin-top:2px;font-family:var(--serif);font-size:11.5px;line-height:1.35;color:var(--muted)}
.project-link i,.remains-link i{font-style:normal;color:var(--muted);transition:.35s var(--ease)}
.support-link:hover{border-color:rgba(255,106,26,.3);background:linear-gradient(105deg,rgba(196,66,47,.09),rgba(255,255,255,.018))}
.project-link-main:hover{border-color:rgba(79,195,247,.28);background:linear-gradient(105deg,rgba(201,162,75,.065),rgba(30,111,217,.06))}
.project-link:hover i,.remains-link:hover i{transform:translateX(4px);color:var(--gold)}
.project-link.active{border-color:rgba(201,162,75,.45);box-shadow:0 0 34px rgba(201,162,75,.075)}
.remains-link{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:2px 14px;margin-top:17px;padding:16px 2px 10px;border-top:1px solid rgba(255,255,255,.075)}
.remains-link > span{grid-column:1/-1;font-family:var(--title);font-size:8px;letter-spacing:.25em;text-transform:uppercase;color:var(--muted)}
.remains-link b{font-family:var(--title);font-size:14px;font-weight:500;color:var(--ink-soft)}
.remains-link.active b{color:var(--gold)}

/* BASIC: water-forward. It remains part of the fire/water brand, but its climate is calmer. */
.basic-section::before{background:radial-gradient(67% 88% at 8% 15%,rgba(11,46,107,.23),transparent 61%),radial-gradient(60% 78% at 94% 83%,rgba(30,111,217,.19),transparent 64%),radial-gradient(38% 48% at 52% 46%,rgba(79,195,247,.055),transparent 70%),radial-gradient(42% 58% at 8% 92%,rgba(196,66,47,.045),transparent 72%)!important}
.basic-section .progress{background:linear-gradient(90deg,var(--water-deep),var(--water) 42%,var(--water-light) 75%,var(--gold) 91%,var(--fire-orange))!important;box-shadow:0 0 13px rgba(30,111,217,.42),0 0 25px rgba(79,195,247,.12)!important}
.basic-section .bar{background:rgba(4,8,15,.76)!important;border-bottom-color:rgba(79,195,247,.075)!important}
.basic-section .bar::after{background:linear-gradient(90deg,transparent 4%,rgba(11,46,107,.2) 16%,rgba(30,111,217,.35) 41%,rgba(79,195,247,.2) 68%,rgba(201,162,75,.11) 84%,transparent 97%)!important}
.basic-section .watermark{opacity:.04!important;filter:saturate(.76) hue-rotate(3deg) contrast(1.03)!important}
.basic-section .content::before{background:linear-gradient(180deg,var(--water-deep),var(--water) 42%,var(--water-light) 72%,var(--gold) 91%,var(--fire-orange))!important;opacity:.46!important}
.basic-section .rule::after{background:linear-gradient(135deg,var(--water),var(--water-light),var(--gold))!important;box-shadow:0 0 14px 3px rgba(30,111,217,.28),0 0 18px rgba(201,162,75,.08)!important}
.basic-section footer::before{background:linear-gradient(90deg,transparent,rgba(11,46,107,.34) 18%,rgba(30,111,217,.48) 42%,rgba(79,195,247,.38) 65%,rgba(201,162,75,.22) 82%,transparent)!important}
.basic-section .menu-btn{border-color:rgba(79,195,247,.18)!important;background:rgba(11,46,107,.065)!important}
.basic-section .menu-btn:hover{border-color:var(--water-light)!important;box-shadow:0 0 26px rgba(30,111,217,.12)!important}

/* ADVANCED keeps the v46 fire-forward layer; aliases make the hierarchy explicit. */
.advanced-section .brand-section .zone-word{text-shadow:0 0 18px rgba(255,106,26,.17)}
.advanced-section .level-switch{border-color:rgba(255,106,26,.14)}

/* PROJECT: a balanced, gold-led third climate rather than a diluted Basic page. */
:is(.project-section,.movement-section)::before{background:radial-gradient(54% 76% at 50% 15%,rgba(201,162,75,.115),transparent 63%),radial-gradient(46% 70% at 4% 88%,rgba(196,66,47,.08),transparent 65%),radial-gradient(48% 72% at 96% 84%,rgba(30,111,217,.09),transparent 66%)!important}
:is(.project-section,.movement-section) .progress{background:linear-gradient(90deg,var(--fire-red),var(--fire-gold) 34%,var(--gold) 52%,var(--water-light) 72%,var(--water))!important;box-shadow:0 0 12px rgba(201,162,75,.35)!important}
:is(.project-section,.movement-section) .bar{background:rgba(11,9,7,.8)!important;border-bottom-color:rgba(201,162,75,.11)!important}
:is(.project-section,.movement-section) .bar::after{background:linear-gradient(90deg,transparent,rgba(196,66,47,.16) 20%,rgba(201,162,75,.42) 50%,rgba(30,111,217,.17) 80%,transparent)!important}
:is(.project-section,.movement-section) .content::before{background:linear-gradient(180deg,var(--fire-orange),var(--gold) 46%,var(--water-light) 100%)!important;opacity:.43!important}
:is(.project-section,.movement-section) .menu-btn{border-color:rgba(201,162,75,.22)!important;background:rgba(201,162,75,.045)!important}
:is(.project-section,.movement-section) .menu-btn:hover{border-color:var(--gold)!important;box-shadow:0 0 26px rgba(201,162,75,.12)!important}
:is(.project-section,.movement-section) .watermark{opacity:.044!important;filter:saturate(.78) contrast(1.03)!important}

/* Both paths visibly converge on the third category. */
.pjump.section-crossing.enter-project{border-color:rgba(201,162,75,.33)!important;background:linear-gradient(105deg,rgba(30,111,217,.08),rgba(201,162,75,.085) 52%,rgba(196,66,47,.08))!important}
.pjump.section-crossing.enter-project::after{content:"Shared destination"!important}
.pjump.open-basic{background:linear-gradient(105deg,rgba(11,46,107,.12),rgba(30,111,217,.07),rgba(201,162,75,.035))!important}
.pager.trio{grid-template-columns:repeat(3,minmax(0,1fr))!important}
.shared-entry .from-basic::before{background:radial-gradient(120% 140% at 0% 100%,rgba(30,111,217,.24),transparent 65%)!important}
.shared-entry .from-advanced::before{background:radial-gradient(120% 140% at 0% 100%,rgba(196,66,47,.22),transparent 65%)!important}

@media(min-width:781px){
  .basic-section::-webkit-scrollbar-thumb{background:linear-gradient(180deg,rgba(79,195,247,.6),rgba(30,111,217,.58) 54%,rgba(201,162,75,.38))!important;border-radius:20px!important;border:2px solid #040405!important}
  :is(.project-section,.movement-section)::-webkit-scrollbar-thumb{background:linear-gradient(180deg,rgba(255,106,26,.45),rgba(201,162,75,.58),rgba(30,111,217,.44))!important;border-radius:20px!important;border:2px solid #040405!important}
}

@media(max-width:980px){
  .brand-section{max-width:23vw}
  .level-switch{width:clamp(224px,31vw,280px)}
  .overlay-body{grid-template-columns:minmax(0,1fr) 280px}
  .nav-panel .chapters{grid-template-columns:1fr}
}

@media(max-width:700px){
  .bar{padding:0 12px!important}
  .brand{max-width:none!important;overflow:visible!important}
  .brand > span:last-child{display:none!important}
  .brand .mk{width:31px!important;height:31px!important}
  .level-switch{width:min(58vw,230px);height:40px;padding:3px}
  .level-tab{height:32px;font-size:8.5px;letter-spacing:.17em}
  .menu-btn{padding:10px 12px!important;min-width:43px;justify-content:center}
  .overlay{top:var(--nav-h)!important;z-index:290!important;height:calc(100dvh - var(--nav-h))}
  .overlay-head{height:54px!important;padding:0 14px!important}
  .overlay-title > span{display:none}
  .overlay-title h3{font-size:21px!important}
  .overlay-body{display:flex;flex-direction:column;overflow-y:auto}
  .project-dock{order:-1;overflow:visible;flex:none;padding:20px 14px 18px;border-left:0;border-bottom:1px solid rgba(255,255,255,.075);box-shadow:0 18px 42px rgba(0,0,0,.16);background:linear-gradient(100deg,rgba(196,66,47,.045),rgba(201,162,75,.055),rgba(30,111,217,.045))}
  .project-dock::before{left:0;right:0;top:auto;bottom:-1px;width:100%;height:1px;background:linear-gradient(90deg,transparent,rgba(196,66,47,.28),rgba(201,162,75,.45),rgba(30,111,217,.3),transparent)}
  .project-dock-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:12px}
  .project-dock-head > span{font-size:7px}
  .project-dock-head h3{font-size:24px;margin:0}
  .project-dock-head p{display:none}
  .project-dock-links{grid-template-columns:1fr 1fr;gap:8px}
  .project-link{grid-template-columns:24px minmax(0,1fr);gap:8px;padding:13px 10px}
  .project-link i{display:none}
  .project-link-no{font-size:16px}
  .project-link b{font-size:13px}
  .project-link small{display:none}
  .remains-link{margin-top:10px;padding:10px 2px 0}
  .nav-panel{overflow:visible;flex:none;padding:18px 14px 34px}
  .nav-panel-intro{margin-bottom:12px;padding-bottom:12px}
  .nav-panel-intro p{font-size:14px}
  .nav-panel .chapters{grid-template-columns:1fr!important}
  .nav-panel .chapters a{min-height:54px;padding:12px 11px!important}
  .pager.trio{grid-template-columns:1fr!important}
}

@media(max-width:380px){
  .level-switch{width:184px}
  .level-tab{font-size:8px;letter-spacing:.13em}
  .brand .mk{width:29px!important;height:29px!important}
  .menu-btn{min-width:40px;padding:10px!important}
}

/* v47 interaction correction: while browsing the other panel, only the selected side glows. */
html.nav-open .level-tab.current-zone:not(.is-selected) .level-glow{opacity:0!important}
html.nav-open .level-tab.current-zone:not(.is-selected){color:rgba(236,233,227,.48)!important;box-shadow:none!important;background:transparent!important}
.project-link,.remains-link{opacity:1!important;transform:none!important}

/* ═══════════════════════════════════════════════════════════════
   v48 — TWIN DIRECTORIES + INTEGRATED CHAPTER CLOSINGS
   BASIC and ADVANCED are two complete, switchable menus.
   Closing reflections belong to their chapter instead of becoming
   detached, near-full-screen afterwords.
   ═══════════════════════════════════════════════════════════════ */

/* Only the selected side of the switch glows while navigation is open.
   When the panel closes, the page's actual reading level is visible again. */
html.nav-open .level-tab.current-zone:not(.is-selected){
  color:rgba(236,233,227,.46)!important;
  background:transparent!important;
  box-shadow:none!important;
}
html.nav-open .level-tab.current-zone:not(.is-selected) .level-glow{opacity:0!important}
html.nav-open .level-tab.is-selected .level-glow{opacity:1!important}

/* The shared destination is first in both menus; the active directory follows it. */
.overlay-body{
  display:flex!important;
  flex-direction:column!important;
  gap:0!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  max-width:none!important;
  background:transparent!important;
  transition:background .5s var(--ease),box-shadow .5s var(--ease)!important;
}
.nav-panel{
  width:100%!important;
  flex:none!important;
  overflow:visible!important;
  padding:clamp(30px,4.6vh,58px) clamp(18px,5vw,72px) clamp(46px,7vh,86px)!important;
}
.nav-panel .chapters{max-width:1080px!important}

/* The entire menu changes climate when the centered switch changes panel. */
#nav-overlay[data-active-panel="basic"]{
  background:
    radial-gradient(82% 86% at 8% 16%,rgba(11,46,107,.34),transparent 64%),
    radial-gradient(66% 82% at 94% 76%,rgba(30,111,217,.22),transparent 67%),
    rgba(3,8,16,.965)!important;
}
#nav-overlay[data-active-panel="advanced"]{
  background:
    radial-gradient(82% 88% at 8% 18%,rgba(125,24,20,.28),transparent 64%),
    radial-gradient(66% 82% at 94% 76%,rgba(196,66,47,.20),transparent 68%),
    radial-gradient(42% 58% at 84% 94%,rgba(30,111,217,.055),transparent 72%),
    rgba(12,4,5,.965)!important;
}
#nav-overlay[data-active-panel="basic"] .overlay-head{
  border-bottom-color:rgba(79,195,247,.12)!important;
  background:linear-gradient(90deg,rgba(4,12,25,.92),rgba(4,8,15,.74))!important;
}
#nav-overlay[data-active-panel="advanced"] .overlay-head{
  border-bottom-color:rgba(255,106,26,.12)!important;
  background:linear-gradient(90deg,rgba(22,6,6,.92),rgba(8,5,7,.76))!important;
}
#nav-overlay[data-active-panel="basic"] .overlay-title h3{color:#dff7ff!important;text-shadow:0 0 24px rgba(30,111,217,.20)!important}
#nav-overlay[data-active-panel="advanced"] .overlay-title h3{color:#fff1df!important;text-shadow:0 0 24px rgba(196,66,47,.22)!important}

/* Shared third space: same architecture in both menus, subtly reflecting the selected path. */
.project-dock{
  order:-1!important;
  position:relative!important;
  width:100%!important;
  min-height:0!important;
  overflow:visible!important;
  flex:none!important;
  display:grid!important;
  grid-template-columns:minmax(210px,.72fr) minmax(420px,1.55fr) minmax(190px,.62fr)!important;
  align-items:center!important;
  gap:clamp(20px,3vw,44px)!important;
  padding:clamp(22px,3.2vh,38px) clamp(22px,5vw,72px)!important;
  border-left:0!important;
  border-bottom:1px solid rgba(255,255,255,.075)!important;
  box-shadow:0 22px 55px rgba(0,0,0,.18)!important;
  transition:background .5s var(--ease),border-color .5s var(--ease)!important;
}
.project-dock::before{
  left:0!important;right:0!important;top:auto!important;bottom:-1px!important;
  width:100%!important;height:1px!important;
}
#nav-overlay[data-active-panel="basic"] .project-dock{
  background:linear-gradient(105deg,rgba(11,46,107,.18),rgba(201,162,75,.045) 50%,rgba(30,111,217,.10))!important;
  border-bottom-color:rgba(79,195,247,.10)!important;
}
#nav-overlay[data-active-panel="basic"] .project-dock::before{
  background:linear-gradient(90deg,transparent,rgba(30,111,217,.52),rgba(79,195,247,.31),rgba(201,162,75,.34),transparent)!important;
}
#nav-overlay[data-active-panel="advanced"] .project-dock{
  background:linear-gradient(105deg,rgba(125,24,20,.16),rgba(201,162,75,.052) 50%,rgba(196,66,47,.09))!important;
  border-bottom-color:rgba(255,106,26,.10)!important;
}
#nav-overlay[data-active-panel="advanced"] .project-dock::before{
  background:linear-gradient(90deg,transparent,rgba(196,66,47,.52),rgba(255,106,26,.35),rgba(201,162,75,.34),rgba(30,111,217,.16),transparent)!important;
}
.project-dock-head{margin:0!important;text-align:left!important}
.project-dock-head h3{font-size:clamp(30px,3vw,46px)!important}
.project-dock-links{grid-template-columns:1fr 1fr!important;gap:10px!important}
.remains-link{margin:0!important;padding:14px 2px 10px!important;align-self:stretch!important}

/* Twin directories share one grid and one hierarchy; only their elements change. */
#nav-overlay[data-active-panel="basic"] .basic-panel{
  background:
    linear-gradient(180deg,rgba(30,111,217,.035),transparent 24%),
    radial-gradient(55% 70% at 0% 45%,rgba(11,46,107,.13),transparent 70%)!important;
}
#nav-overlay[data-active-panel="advanced"] .advanced-panel{
  background:
    linear-gradient(180deg,rgba(196,66,47,.035),transparent 24%),
    radial-gradient(55% 70% at 0% 45%,rgba(125,24,20,.13),transparent 70%)!important;
}
.basic-panel .chapters .no{
  background:var(--grad-water)!important;
  -webkit-background-clip:text!important;background-clip:text!important;color:transparent!important;
  opacity:.74!important;
}
.advanced-panel .chapters .no{opacity:.78!important}
.basic-panel .chapters a{border-color:rgba(79,195,247,.055)!important}
.advanced-panel .chapters a{border-color:rgba(255,106,26,.055)!important}

/* The final line is now a chapter closing, not a separate screen. */
.pre-close{
  padding-bottom:clamp(24px,3.5vh,44px)!important;
}
.cut.chapter-close{
  position:relative!important;
  max-width:var(--col)!important;
  margin:0 auto clamp(38px,5.5vh,64px)!important;
  padding:clamp(30px,4vh,46px) 24px 0!important;
  text-align:center!important;
  border-top:1px solid rgba(201,162,75,.18)!important;
}
.cut.chapter-close::before{
  content:"◆"!important;
  position:absolute!important;
  left:50%!important;top:0!important;
  display:block!important;
  width:28px!important;
  margin:0!important;
  transform:translate(-50%,-52%)!important;
  background:var(--bg)!important;
  font-size:9px!important;line-height:1!important;
  color:var(--gold)!important;opacity:.76!important;
  text-shadow:0 0 16px rgba(201,162,75,.34)!important;
  animation:none!important;
}
.cut.chapter-close p{
  max-width:38ch!important;
  margin:0 auto!important;
  font-size:clamp(1.05rem,1.65vw,1.23rem)!important;
  line-height:1.65!important;
  letter-spacing:.006em!important;
  color:var(--ink-soft)!important;
  text-shadow:none!important;
}
.cut.chapter-close::after{display:none!important;content:none!important}
.basic-section .cut.chapter-close{border-top-color:rgba(79,195,247,.20)!important}
.basic-section .cut.chapter-close::before{
  color:var(--water-light)!important;
  text-shadow:0 0 16px rgba(30,111,217,.42)!important;
}
.advanced-section .cut.chapter-close{border-top-color:rgba(255,106,26,.20)!important}
.advanced-section .cut.chapter-close::before{
  color:var(--fire-orange)!important;
  text-shadow:0 0 16px rgba(196,66,47,.42)!important;
}
:is(.project-section,.movement-section) .cut.chapter-close{border-top-color:rgba(201,162,75,.22)!important}

/* Keep the next chapter close to the actual ending. */
.cut.chapter-close + *{margin-top:0!important}

@media(max-width:900px){
  .project-dock{
    grid-template-columns:minmax(180px,.65fr) minmax(360px,1.4fr)!important;
  }
  .remains-link{grid-column:1/-1!important;max-width:420px!important;width:100%!important;margin:0 auto!important}
}

@media(max-width:700px){
  .overlay-body{display:flex!important;overflow-y:auto!important}
  .project-dock{
    order:-1!important;
    display:block!important;
    padding:20px 14px 18px!important;
  }
  .project-dock-head{display:flex!important;align-items:baseline!important;justify-content:space-between!important;gap:12px!important;margin-bottom:12px!important}
  .project-dock-head h3{font-size:24px!important}
  .project-dock-links{grid-template-columns:1fr 1fr!important}
  .remains-link{max-width:none!important;margin-top:10px!important;padding-top:10px!important}
  .nav-panel{padding:24px 14px 42px!important}
  .cut.chapter-close{
    margin:0 auto clamp(32px,5vh,48px)!important;
    padding:clamp(25px,3.5vh,34px) 22px 0!important;
  }
  .cut.chapter-close p{
    max-width:34ch!important;
    font-size:clamp(1rem,4.8vw,1.14rem)!important;
    line-height:1.58!important;
  }
  .pre-close{padding-bottom:clamp(18px,3vh,30px)!important}
}


/* V49 — prose hierarchy and reading rhythm */
.content p{ text-wrap:pretty; }
.content p + p{ margin-top:.15em; }
.content p em{ color:var(--ink); }
@media (max-width:680px){
  .content p{ line-height:1.64; }
  .content p + p{ margin-top:.08em; }
}

/* V50 — two reflective endings and context-aware third-space journey */
.project-dock{
  grid-template-columns:minmax(210px,.68fr) minmax(620px,2fr)!important;
}
.project-dock-flow{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:10px!important;
}
.project-link.remains-link{
  position:relative!important;
  display:grid!important;
  grid-template-columns:30px minmax(0,1fr) 18px!important;
  align-items:center!important;
  gap:12px!important;
  margin:0!important;
  padding:17px 15px!important;
  border:1px solid rgba(255,255,255,.085)!important;
  border-radius:13px!important;
  background:rgba(255,255,255,.018)!important;
}
.project-link.remains-link > span{grid-column:auto!important;font-family:inherit!important;font-size:inherit!important;letter-spacing:normal!important;text-transform:none!important;color:inherit!important}
.project-link.remains-link b{display:block!important;font-family:var(--title)!important;font-size:16px!important;font-weight:600!important;color:var(--ink)!important}
.project-link.remains-link small{display:block!important;margin-top:2px!important;font-family:var(--serif)!important;font-size:11.5px!important;line-height:1.35!important;color:var(--muted)!important}
.project-link.remains-link.active{border-color:rgba(201,162,75,.45)!important;box-shadow:0 0 34px rgba(201,162,75,.075)!important}
#nav-overlay[data-active-panel="basic"] .project-link.remains-link:hover{border-color:rgba(79,195,247,.30)!important;background:linear-gradient(105deg,rgba(11,46,107,.11),rgba(30,111,217,.05))!important}
#nav-overlay[data-active-panel="advanced"] .project-link.remains-link:hover{border-color:rgba(255,106,26,.30)!important;background:linear-gradient(105deg,rgba(125,24,20,.11),rgba(196,66,47,.055))!important}

.remains-page .remains-path{
  margin:0 0 14px;
  font-family:var(--title);
  font-size:clamp(10px,1.1vw,13px);
  font-weight:600;
  letter-spacing:.38em;
  text-transform:uppercase;
}
.remains-basic-page .remains-path{color:var(--water-light);text-shadow:0 0 22px rgba(30,111,217,.25)}
.remains-advanced-page .remains-path{color:var(--fire-orange);text-shadow:0 0 22px rgba(196,66,47,.25)}
.remains-page article .content{max-width:760px}
.remains-page article .content p{max-width:58ch}
.remains-page article .content .lead{font-size:clamp(1.25rem,2.25vw,1.75rem);line-height:1.48}
.remains-page .remains-close p{max-width:46ch!important;font-size:clamp(1.12rem,1.85vw,1.38rem)!important;line-height:1.58!important}
.remains-basic-page .remains-close{border-top-color:rgba(79,195,247,.28)!important}
.remains-advanced-page .remains-close{border-top-color:rgba(255,106,26,.28)!important}

@media(max-width:980px){
  .project-dock{grid-template-columns:1fr!important;gap:16px!important}
  .project-dock-head{display:flex!important;align-items:baseline!important;justify-content:space-between!important;gap:16px!important}
  .project-dock-flow{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}
@media(max-width:700px){
  .project-dock-flow{grid-template-columns:1fr 1fr!important}
  .project-link.remains-link{grid-column:1/-1!important}
  .remains-page .remains-path{margin-bottom:10px;font-size:9px;letter-spacing:.3em}
  .remains-page article .content p{max-width:none}
}
@media(max-width:390px){
  .project-dock-flow{grid-template-columns:1fr!important}
  .project-link.remains-link{grid-column:auto!important}
}


/* ---------- v51: Love opener ---------- */
.love-page .hero-love .word{max-width:7ch}
.love-page .hero-love .sub{margin-top:14px;color:var(--gold);letter-spacing:.08em}
.love-page .love-list{margin-top:34px}
.love-page .love-list p{margin:.18em 0;font-family:var(--title);font-size:clamp(1.15rem,2.2vw,1.55rem);letter-spacing:.035em;color:var(--ink-soft)}
.love-page .love-list p:last-child{color:var(--fire);font-size:clamp(1.28rem,2.55vw,1.78rem)}
.love-page .love-address .content + .content{margin-top:clamp(34px,6vw,58px)}
.love-page .love-answer{color:var(--muted)}
.love-page .love-close p{max-width:42ch!important}
@media(max-width:700px){
  .love-page .hero-love .word{font-size:clamp(52px,25vw,78px)!important}
  .love-page .hero-love .sub{font-size:clamp(18px,5.5vw,25px)!important}
}


/* ═══════════════════════════════════════════
   V52 — LOVE + QUIETER READING SYSTEM
   Stronger prose hierarchy, fewer decorative signals.
   ═══════════════════════════════════════════ */

/* The reading surface is clearer and less fragile on mobile displays. */
body{
  font-weight:400!important;
  font-size:19px;
  line-height:1.66!important;
}

/* The side stripe competed with centered text and suggested a template quote. */
.content{
  max-width:720px!important;
  padding-left:8px!important;
  padding-right:8px!important;
}
.content::before{
  display:none!important;
  content:none!important;
}

/* Three reading roles: narrative, compact reflection, final beat. */
.content p{
  color:#cbc7bf;
  font-weight:400;
  text-wrap:pretty;
  margin-bottom:1.34em;
}
.content p.prose{
  max-width:52ch!important;
  margin-left:auto!important;
  margin-right:auto!important;
  text-align:left!important;
  line-height:1.64!important;
}
.content p.compact{
  max-width:39ch!important;
  margin-left:auto!important;
  margin-right:auto!important;
  text-align:center!important;
  line-height:1.58!important;
}
.content p.beat{
  max-width:30ch!important;
  margin-left:auto!important;
  margin-right:auto!important;
  text-align:center!important;
  font-family:var(--title)!important;
  font-weight:400!important;
  font-size:1.04em;
  line-height:1.42!important;
  letter-spacing:.006em;
  color:var(--ink-soft);
}
.content p.lead{
  color:var(--ink)!important;
  font-weight:400!important;
}

/* A connector, not an animated ornament. */
.rule{
  width:1px!important;
  height:46px!important;
  margin:0 auto!important;
  opacity:.34!important;
  background:linear-gradient(180deg,transparent,rgba(201,162,75,.72),transparent)!important;
}
.rule::after{
  display:none!important;
  content:none!important;
  animation:none!important;
  box-shadow:none!important;
}
.basic-section .rule{
  background:linear-gradient(180deg,transparent,rgba(79,195,247,.66) 48%,rgba(201,162,75,.34) 72%,transparent)!important;
}
.advanced-section .rule{
  background:linear-gradient(180deg,transparent,rgba(255,106,26,.66) 48%,rgba(201,162,75,.34) 72%,transparent)!important;
}
:is(.project-section,.movement-section) .rule{
  background:linear-gradient(180deg,transparent,rgba(201,162,75,.70),transparent)!important;
}

/* LOVE is one direct word; the typography no longer explains the title twice. */
.love-page .hero-love .word{
  max-width:none!important;
  font-size:clamp(72px,24vw,124px)!important;
  line-height:.84!important;
  letter-spacing:.025em!important;
}
.love-page .love-list p{
  font-family:var(--title)!important;
  font-weight:400!important;
  text-align:center!important;
  max-width:24ch!important;
}
.love-page .love-answer{
  color:var(--muted)!important;
}

@media(max-width:700px){
  body{
    font-size:17.75px!important;
    line-height:1.61!important;
  }
  .content{
    padding-left:2px!important;
    padding-right:2px!important;
  }
  .content p{
    margin-bottom:1.25em;
  }
  .content p.prose{
    max-width:100%!important;
    line-height:1.59!important;
  }
  .content p.compact{
    max-width:32ch!important;
    line-height:1.54!important;
  }
  .content p.beat{
    max-width:27ch!important;
    font-size:1.02em;
    line-height:1.38!important;
  }
  .rule{height:38px!important;opacity:.31!important}
  .love-page .hero-love .word{
    font-size:clamp(68px,29vw,102px)!important;
  }
}


/* ═══════════════════════════════════════════════════════════════
   v54 — SITE CREED
   A single-line principle beneath the Basic / Advanced switch.
   It uses the existing navigation height and does not thicken the bar.
   ═══════════════════════════════════════════════════════════════ */
.site-creed{
  position:absolute;
  left:50%;
  bottom:2px;
  transform:translateX(-50%);
  z-index:4;
  width:max-content;
  max-width:calc(100vw - 24px);
  overflow:hidden;
  white-space:nowrap;
  pointer-events:none;
  text-align:center;
  font-family:var(--title);
  font-size:clamp(10.5px,1.02vw,12.5px);
  font-weight:400;
  line-height:1;
  letter-spacing:.01em;
  color:rgba(236,233,227,.74);
  text-shadow:0 1px 10px rgba(0,0,0,.72);
}
.basic-section .site-creed{
  color:rgba(223,247,255,.76);
}
.advanced-section .site-creed{
  color:rgba(255,242,223,.76);
}
:is(.project-section,.movement-section) .site-creed{
  color:rgba(236,233,227,.76);
}
@media(max-width:700px){
  .site-creed{
    bottom:2px;
    max-width:calc(100vw - 14px);
    font-size:clamp(11.5px,3.2vw,12.5px);
    letter-spacing:0;
  }
}
@media(max-width:340px){
  .site-creed{
    font-size:11.5px;
    letter-spacing:-.005em;
  }
}

/* ═══════════════════════════════════════════════════════════════
   v55 — FIRE / WATER CREED NAVIGATION
   The Basic / Advanced switch and site creed form one brand module.
   Basic and Advanced still open the full navigation; Project is direct.
   ═══════════════════════════════════════════════════════════════ */

/* The two-way switch: one dark body, blue left edge, red right edge. */
.level-switch{
  width:clamp(360px,34vw,500px)!important;
  height:48px!important;
  padding:3px!important;
  grid-template-columns:1fr 1px 1fr!important;
  border:2px solid transparent!important;
  border-radius:999px!important;
  background:
    linear-gradient(180deg,rgba(8,12,18,.97),rgba(4,6,10,.98)) padding-box,
    linear-gradient(90deg,
      #168cff 0%,#208ff8 39%,
      #68425f 49%,#9e394a 54%,
      #ff293d 66%,#ff3346 100%) border-box!important;
  box-shadow:
    0 15px 44px rgba(0,0,0,.48),
    -8px 0 28px rgba(24,140,255,.10),
    8px 0 28px rgba(255,41,61,.10),
    inset 0 0 0 1px rgba(255,255,255,.018)!important;
  overflow:visible!important;
}

.level-switch::after{
  content:"";
  position:absolute;
  inset:5px;
  border-radius:inherit;
  pointer-events:none;
  background:
    radial-gradient(75% 130% at 0% 50%,rgba(22,140,255,.055),transparent 64%),
    radial-gradient(75% 130% at 100% 50%,rgba(255,41,61,.055),transparent 64%);
  z-index:0;
}

.level-axis{
  position:relative!important;
  z-index:4!important;
  width:1px!important;
  height:30px!important;
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.50) 48%,transparent)!important;
  box-shadow:
    0 0 7px rgba(255,255,255,.40),
    -2px 0 10px rgba(54,145,255,.30),
    2px 0 10px rgba(255,55,76,.30)!important;
}

.level-tab{
  z-index:2!important;
  height:38px!important;
  padding:0 16px!important;
  border-radius:999px!important;
  color:rgba(248,247,244,.93)!important;
  font-family:var(--title)!important;
  font-size:clamp(10px,.80vw,12px)!important;
  font-weight:600!important;
  letter-spacing:.39em!important;
  text-indent:.39em!important;
  text-shadow:0 1px 10px rgba(0,0,0,.86)!important;
  box-shadow:none!important;
}

.level-tab .level-glow{
  inset:1px!important;
  opacity:0!important;
  border-radius:999px!important;
  transition:opacity .35s var(--ease)!important;
}
.level-basic .level-glow{
  background:linear-gradient(100deg,rgba(20,124,229,.13),rgba(35,115,208,.035),transparent 84%)!important;
}
.level-advanced .level-glow{
  background:linear-gradient(100deg,transparent 16%,rgba(190,39,52,.035),rgba(234,48,64,.13))!important;
}
.level-tab.current-zone .level-glow,
html.nav-open .level-tab.is-selected .level-glow{
  opacity:1!important;
}
.level-basic.current-zone,
html.nav-open .level-basic.is-selected{
  color:#f7fbff!important;
  text-shadow:0 0 13px rgba(60,159,255,.24),0 1px 10px rgba(0,0,0,.9)!important;
  box-shadow:none!important;
}
.level-advanced.current-zone,
html.nav-open .level-advanced.is-selected{
  color:#fff8f7!important;
  text-shadow:0 0 13px rgba(255,68,86,.22),0 1px 10px rgba(0,0,0,.9)!important;
  box-shadow:none!important;
}
.level-tab:hover{
  color:#fff!important;
  transform:none!important;
}
.level-basic:hover{background:rgba(22,140,255,.035)!important}
.level-advanced:hover{background:rgba(255,41,61,.035)!important}

/* The creed is no longer a note. It carries the logo's two currents. */
.site-creed{
  bottom:1px!important;
  max-width:calc(100vw - 20px)!important;
  font-family:var(--display)!important;
  font-size:clamp(13px,1.12vw,16px)!important;
  font-weight:400!important;
  line-height:1!important;
  letter-spacing:.115em!important;
  text-indent:.115em!important;
  text-transform:uppercase!important;
  color:transparent!important;
  background:linear-gradient(90deg,
    #238dff 0%,#347ff1 25%,#7160ba 48%,
    #b64876 68%,#ff3b50 100%)!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
  text-shadow:none!important;
  filter:drop-shadow(0 0 7px rgba(61,124,232,.11)) drop-shadow(0 0 7px rgba(255,59,80,.08));
}
.basic-section .site-creed,
.advanced-section .site-creed,
:is(.project-section,.movement-section) .site-creed{color:transparent!important}

/* Project is the third, independent destination from the reference layout. */
.project-direct{
  position:relative;
  z-index:5;
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:42px;
  padding:0 2px 0 20px;
  border-left:1px solid rgba(255,255,255,.13);
  font-family:var(--title);
  font-size:11px;
  font-weight:400;
  line-height:1;
  letter-spacing:.31em;
  text-transform:uppercase;
  color:rgba(244,242,238,.80);
  transition:color .3s var(--ease),text-shadow .3s var(--ease),border-color .3s var(--ease);
}
.project-direct::before{
  content:"";
  position:absolute;
  left:-1px;
  top:7px;
  bottom:7px;
  width:1px;
  background:linear-gradient(180deg,transparent,rgba(92,126,164,.30),rgba(255,255,255,.26),rgba(193,54,69,.24),transparent);
  box-shadow:0 0 10px rgba(255,255,255,.10);
}
.project-direct:hover,
.project-direct[aria-current="page"]{
  color:#fff;
  border-left-color:rgba(255,255,255,.20);
  text-shadow:-2px 0 11px rgba(38,132,255,.18),2px 0 11px rgba(255,50,69,.16);
}
:is(.project-section,.movement-section) .project-direct{
  color:#fff;
  text-shadow:-2px 0 11px rgba(38,132,255,.16),2px 0 11px rgba(255,50,69,.14);
}

/* The tabs themselves are now the navigation trigger, so the old menu control is not needed. */
.menu-btn{display:none!important}

@media(max-width:980px){
  .level-switch{width:clamp(300px,42vw,410px)!important}
  .project-direct{font-size:10px;letter-spacing:.25em;padding-left:16px}
}

@media(max-width:700px){
  .bar{
    padding:0 10px!important;
    gap:8px!important;
  }
  .brand{
    flex:0 0 28px!important;
    width:28px!important;
  }
  .brand .mk{
    width:27px!important;
    height:27px!important;
  }
  .level-switch{
    width:min(68vw,250px)!important;
    height:44px!important;
    padding:2px!important;
  }
  .level-tab{
    height:36px!important;
    padding:0 8px!important;
    font-size:9px!important;
    letter-spacing:.29em!important;
    text-indent:.29em!important;
  }
  .level-axis{height:27px!important}
  .project-direct{
    height:38px;
    min-width:64px;
    padding-left:11px;
    font-size:8.5px;
    letter-spacing:.19em;
  }
  .site-creed{
    bottom:1px!important;
    max-width:calc(100vw - 8px)!important;
    font-size:clamp(11.5px,3.36vw,13.5px)!important;
    letter-spacing:.055em!important;
    text-indent:.055em!important;
  }
}

@media(max-width:390px){
  .brand{display:none!important}
  .bar{padding:0 8px!important;gap:6px!important}
  .level-switch{
    left:8px!important;
    transform:translateY(-50%)!important;
    width:calc(100vw - 82px)!important;
  }
  .project-direct{
    margin-left:auto;
    min-width:68px;
    padding-left:9px;
    font-size:8.25px;
    letter-spacing:.15em;
  }
  .site-creed{
    font-size:11.5px!important;
    letter-spacing:.025em!important;
    text-indent:.025em!important;
  }
}

/* v55.1 — align the switch and creed as two separate lines without increasing the bar. */
.level-switch{top:calc(50% - 6px)!important}
@media(max-width:700px){
  .level-tab{
    font-size:10.5px!important;
    letter-spacing:.30em!important;
    text-indent:.30em!important;
  }
  .project-direct{
    font-size:9.5px!important;
    letter-spacing:.17em!important;
  }
  .site-creed{
    font-size:14.5px!important;
    letter-spacing:.035em!important;
    text-indent:.035em!important;
  }
}
@media(max-width:340px){
  .level-tab{font-size:10px!important;letter-spacing:.25em!important;text-indent:.25em!important}
  .project-direct{font-size:9px!important;letter-spacing:.13em!important}
  .site-creed{font-size:13.5px!important;letter-spacing:.02em!important;text-indent:.02em!important}
}

/* v55.2 — collision guard across compact tablet widths. */
@media(max-width:900px){
  .brand{flex:0 0 30px!important;width:30px!important;overflow:visible!important}
  .brand > span:last-child{display:none!important}
  .brand .mk{width:29px!important;height:29px!important}
}
@media(max-width:430px){
  .brand{display:none!important}
  .level-switch{
    left:8px!important;
    transform:translateY(-50%)!important;
    width:calc(100vw - 86px)!important;
  }
  .project-direct{margin-left:auto!important}
}


/* v56 — mobile navigation parity with desktop.
   Keep the left brand context visible on phones and shrink the switch instead of deleting context. */
@media(max-width:700px){
  .bar{padding:0 8px!important;gap:6px!important}
  .brand{
    display:flex!important;position:relative!important;z-index:6!important;
    flex:0 0 108px!important;width:108px!important;min-width:108px!important;
    gap:7px!important;overflow:hidden!important
  }
  .brand > span:last-child{display:block!important;min-width:0!important;overflow:hidden!important}
  .brand .mk{width:24px!important;height:24px!important;box-shadow:0 0 0 1px rgba(255,255,255,.10),0 3px 14px rgba(0,0,0,.52)!important}
  .brand b{
    display:block!important;font-size:9.6px!important;line-height:1.02!important;
    white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important
  }
  .brand small{
    display:flex!important;align-items:center!important;gap:4px!important;
    min-width:0!important;margin-top:1px!important;
    font-size:6.1px!important;line-height:1.04!important;letter-spacing:.16em!important;
    white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important
  }
  .brand small .zone-word,.brand small .context-sep{flex:0 0 auto!important}
  .brand small .context-title{display:block!important;min-width:0!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}

  .level-switch{
    width:calc(100vw - 176px)!important;max-width:228px!important;min-width:182px!important;
    height:44px!important;padding:2px!important;top:calc(50% - 6px)!important
  }
  .level-tab{
    height:36px!important;padding:0 6px!important;
    font-size:8.4px!important;letter-spacing:.18em!important;text-indent:.18em!important
  }
  .level-axis{height:27px!important}
  .project-direct{
    flex:0 0 54px!important;min-width:54px!important;height:38px!important;
    padding:0 0 0 10px!important;font-size:8.6px!important;letter-spacing:.16em!important
  }
  .site-creed{
    max-width:calc(100vw - 14px)!important;
    font-size:12.6px!important;letter-spacing:.028em!important;text-indent:.028em!important
  }
}

@media(max-width:430px){
  .bar{padding:0 7px!important;gap:5px!important}
  .brand{
    display:flex!important;flex:0 0 98px!important;width:98px!important;min-width:98px!important;
    gap:6px!important
  }
  .brand .mk{width:22px!important;height:22px!important}
  .brand b{font-size:8.8px!important}
  .brand small{font-size:5.6px!important;letter-spacing:.14em!important}
  .level-switch{
    left:50%!important;transform:translate(-50%,-50%)!important;
    width:calc(100vw - 160px)!important;max-width:210px!important;min-width:164px!important
  }
  .level-tab{font-size:7.35px!important;letter-spacing:.14em!important;text-indent:.14em!important;padding:0 4px!important}
  .project-direct{flex:0 0 48px!important;min-width:48px!important;font-size:7.8px!important;letter-spacing:.13em!important;padding-left:8px!important}
  .site-creed{font-size:11.8px!important;letter-spacing:.02em!important;text-indent:.02em!important}
}

@media(max-width:360px){
  .brand{flex:0 0 90px!important;width:90px!important;min-width:90px!important}
  .brand b{font-size:8.2px!important}
  .brand small{font-size:5.2px!important;letter-spacing:.12em!important}
  .level-switch{width:calc(100vw - 150px)!important;min-width:154px!important}
  .level-tab{font-size:6.9px!important;letter-spacing:.11em!important;text-indent:.11em!important}
  .project-direct{flex:0 0 44px!important;min-width:44px!important;font-size:7.2px!important;letter-spacing:.11em!important;padding-left:7px!important}
  .site-creed{font-size:11.2px!important}
}

/* v57 — mobile header balance.
   Preserve the full left context, restore a readable mark, and move the level switch right into the available space. */
@media(max-width:430px){
  .bar{
    --mobile-brand-w:127px;
    --mobile-project-w:44px;
    padding:0 7px!important;
    gap:4px!important;
  }
  .brand{
    display:flex!important;
    position:relative!important;
    z-index:7!important;
    flex:0 0 var(--mobile-brand-w)!important;
    width:var(--mobile-brand-w)!important;
    min-width:var(--mobile-brand-w)!important;
    gap:6px!important;
    overflow:visible!important;
  }
  .brand .mk{
    width:26px!important;
    height:26px!important;
    flex:0 0 26px!important;
  }
  .brand > span:last-child{
    display:block!important;
    min-width:0!important;
    overflow:visible!important;
  }
  .brand b{
    display:block!important;
    font-size:8.9px!important;
    line-height:1.02!important;
    white-space:nowrap!important;
    overflow:visible!important;
    text-overflow:clip!important;
  }
  .brand small{
    display:flex!important;
    align-items:center!important;
    gap:4px!important;
    min-width:0!important;
    margin-top:2px!important;
    font-size:5.8px!important;
    line-height:1!important;
    letter-spacing:.14em!important;
    white-space:nowrap!important;
    overflow:visible!important;
    text-overflow:clip!important;
  }
  .brand small .zone-word,
  .brand small .context-sep,
  .brand small .context-title{
    display:inline!important;
    flex:0 0 auto!important;
    min-width:0!important;
    overflow:visible!important;
    text-overflow:clip!important;
    white-space:nowrap!important;
  }
  .level-switch{
    left:calc(7px + var(--mobile-brand-w) + 4px)!important;
    right:auto!important;
    transform:translateY(-50%)!important;
    width:calc(100vw - 14px - var(--mobile-brand-w) - var(--mobile-project-w) - 8px)!important;
    min-width:0!important;
    max-width:none!important;
  }
  .level-tab{
    font-size:7.25px!important;
    letter-spacing:.13em!important;
    text-indent:.13em!important;
    padding:0 3px!important;
  }
  .project-direct{
    flex:0 0 var(--mobile-project-w)!important;
    width:var(--mobile-project-w)!important;
    min-width:var(--mobile-project-w)!important;
    margin-left:auto!important;
    padding-left:7px!important;
    font-size:7.4px!important;
    letter-spacing:.11em!important;
  }
}

@media(max-width:370px){
  .bar{
    --mobile-brand-w:123px;
    --mobile-project-w:42px;
  }
  .brand .mk{width:25px!important;height:25px!important;flex-basis:25px!important}
  .brand b{font-size:8.55px!important}
  .brand small{font-size:5.55px!important;letter-spacing:.12em!important}
  .level-tab{font-size:7px!important;letter-spacing:.105em!important;text-indent:.105em!important}
  .project-direct{font-size:7.05px!important;letter-spacing:.09em!important;padding-left:6px!important}
}

/* v57.1 — final mobile proportions after visual review. */
@media(max-width:430px){
  .bar{--mobile-brand-w:132px;--mobile-project-w:44px}
  .brand{gap:5px!important}
  .brand .mk{width:29px!important;height:29px!important;flex:0 0 29px!important}
  .brand b{font-size:8.85px!important}
}
@media(max-width:370px){
  .bar{--mobile-brand-w:130px;--mobile-project-w:42px}
  .brand .mk{width:28px!important;height:28px!important;flex:0 0 28px!important}
  .brand b{font-size:8.45px!important}
}


/* ═══════════════════════════════════════════════════════════════
   v58 — MOBILE NAVIGATION PARITY, FINAL STRUCTURE
   Desktop remains unchanged. On phones the brand keeps only the
   current path label (Basic / Advanced / Project), the capsule stays
   compact, Project remains visible, and the creed is centered under
   the capsule on every reading path.
   ═══════════════════════════════════════════════════════════════ */
@media(max-width:700px){
  .bar{
    display:grid!important;
    grid-template-columns:130px minmax(0,1fr) 46px!important;
    column-gap:4px!important;
    align-items:center!important;
    justify-content:stretch!important;
    padding:0 7px!important;
  }

  .brand{
    grid-column:1!important;
    display:flex!important;
    position:relative!important;
    z-index:7!important;
    width:auto!important;
    min-width:0!important;
    max-width:none!important;
    flex:none!important;
    gap:5px!important;
    overflow:visible!important;
  }
  .brand .mk{
    width:29px!important;
    height:29px!important;
    flex:0 0 29px!important;
  }
  .brand > span:last-child{
    display:block!important;
    min-width:0!important;
    overflow:visible!important;
  }
  .brand b{
    display:block!important;
    font-size:8.65px!important;
    line-height:1.02!important;
    white-space:nowrap!important;
    overflow:visible!important;
    text-overflow:clip!important;
  }
  .brand small{
    display:block!important;
    margin-top:2px!important;
    font-size:6.4px!important;
    line-height:1!important;
    letter-spacing:.20em!important;
    white-space:nowrap!important;
    overflow:visible!important;
  }
  /* On mobile only the reading path remains under the domain. */
  .brand small .context-sep,
  .brand small .context-title{
    display:none!important;
  }
  .brand small .zone-word{
    display:block!important;
    white-space:nowrap!important;
  }

  .level-switch{
    grid-column:2!important;
    position:relative!important;
    left:auto!important;
    right:auto!important;
    top:-6px!important;
    transform:none!important;
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    height:44px!important;
    padding:2px!important;
    margin:0!important;
  }
  .level-tab{
    height:36px!important;
    padding:0 4px!important;
    font-size:7.6px!important;
    letter-spacing:.15em!important;
    text-indent:.15em!important;
  }
  .level-axis{height:27px!important}

  .project-direct{
    grid-column:3!important;
    position:relative!important;
    z-index:6!important;
    display:inline-flex!important;
    width:46px!important;
    min-width:46px!important;
    max-width:46px!important;
    height:38px!important;
    margin:0!important;
    padding:0 0 0 8px!important;
    font-size:7.75px!important;
    letter-spacing:.12em!important;
    white-space:nowrap!important;
    overflow:visible!important;
  }

  /* Capsule center = viewport center shifted by the left/right column difference. */
  .site-creed{
    display:block!important;
    visibility:visible!important;
    opacity:1!important;
    left:calc(50% + 42px)!important;
    right:auto!important;
    bottom:1px!important;
    transform:translateX(-50%)!important;
    width:max-content!important;
    max-width:calc(100vw - 12px)!important;
    overflow:visible!important;
    white-space:nowrap!important;
    font-size:12.2px!important;
    letter-spacing:.022em!important;
    text-indent:.022em!important;
  }
}

@media(max-width:370px){
  .bar{
    grid-template-columns:122px minmax(0,1fr) 42px!important;
    column-gap:4px!important;
    padding:0 6px!important;
  }
  .brand .mk{width:28px!important;height:28px!important;flex-basis:28px!important}
  .brand b{font-size:8.25px!important}
  .brand small{font-size:6.1px!important;letter-spacing:.18em!important}
  .level-tab{
    font-size:7.0px!important;
    letter-spacing:.11em!important;
    text-indent:.11em!important;
    padding:0 2px!important;
  }
  .project-direct{
    width:42px!important;min-width:42px!important;max-width:42px!important;
    padding-left:6px!important;font-size:7.1px!important;letter-spacing:.09em!important;
  }
  .site-creed{
    left:calc(50% + 40px)!important;
    font-size:11.4px!important;
    letter-spacing:.012em!important;
    text-indent:.012em!important;
  }
}

@media(max-width:330px){
  .bar{grid-template-columns:114px minmax(0,1fr) 40px!important;padding:0 5px!important;column-gap:3px!important}
  .brand .mk{width:26px!important;height:26px!important;flex-basis:26px!important}
  .brand b{font-size:7.8px!important}
  .brand small{font-size:5.8px!important;letter-spacing:.15em!important}
  .level-tab{font-size:6.45px!important;letter-spacing:.075em!important;text-indent:.075em!important}
  .project-direct{width:40px!important;min-width:40px!important;max-width:40px!important;font-size:6.65px!important;padding-left:5px!important}
  .site-creed{left:calc(50% + 37px)!important;font-size:10.7px!important}
}

/* v59 — final mobile brand text offset.
   Move only the domain/path text 2 mm left; keep the logo and navigation unchanged. */
@media(max-width:700px){
  .brand > span:last-child{
    position:relative!important;
    left:-2mm!important;
  }
}


/* v60 — final mobile brand / capsule balance.
   Slightly narrow the capsule, enlarge the logo a touch,
   and vertically center the domain block to the logo. */
@media(max-width:700px){
  .brand{
    align-items:center!important;
    gap:6px!important;
  }
  .brand .mk{
    width:31px!important;
    height:31px!important;
    flex:0 0 31px!important;
  }
  .brand > span:last-child{
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
    position:relative!important;
    left:-2mm!important;
    top:0!important;
    min-height:31px!important;
  }
  .brand b{
    font-size:8.7px!important;
    line-height:1!important;
    margin:0!important;
  }
  .brand small{
    margin-top:1px!important;
    line-height:1!important;
  }

  .level-switch{
    width:calc(100% - 8px)!important;
    margin-left:8px!important;
  }
}

@media(max-width:370px){
  .brand .mk{
    width:30px!important;
    height:30px!important;
    flex:0 0 30px!important;
  }
  .brand > span:last-child{
    min-height:30px!important;
  }
  .brand b{font-size:8.55px!important}
  .level-switch{
    width:calc(100% - 6px)!important;
    margin-left:6px!important;
  }
}


/* ═══════════════════════════════════════════════════════════════
   v61 — MOBILE NAVIGATION: FINAL LEFT CONTEXT / CAPSULE / PROJECT
   English labels remain intact. The mobile brand shows only the
   current reading path below the domain; page-topic text is hidden.
   ═══════════════════════════════════════════════════════════════ */
@media(max-width:700px){
  .bar{
    display:grid!important;
    grid-template-columns:130px minmax(0,1fr) 46px!important;
    column-gap:4px!important;
    align-items:center!important;
    padding:0 7px!important;
  }

  .brand{
    grid-column:1!important;
    display:flex!important;
    align-items:center!important;
    gap:6px!important;
    min-width:0!important;
    overflow:visible!important;
  }
  .brand .mk{
    width:31px!important;
    height:31px!important;
    flex:0 0 31px!important;
  }
  .brand > span:last-child{
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    position:relative!important;
    left:-2mm!important;
    top:0!important;
    width:calc(100% - 31px - 6px)!important;
    min-width:0!important;
    min-height:31px!important;
    overflow:visible!important;
    text-align:center!important;
  }
  .brand b{
    display:block!important;
    width:100%!important;
    margin:0!important;
    font-size:8.7px!important;
    line-height:1!important;
    text-align:center!important;
    white-space:nowrap!important;
    overflow:visible!important;
    text-overflow:clip!important;
  }
  .brand small{
    display:block!important;
    width:100%!important;
    margin-top:2px!important;
    font-size:6.35px!important;
    line-height:1!important;
    letter-spacing:.18em!important;
    text-align:center!important;
    white-space:nowrap!important;
    overflow:visible!important;
  }
  .brand small .context-sep,
  .brand small .context-title{
    display:none!important;
  }
  .brand small .zone-word{
    display:block!important;
    width:100%!important;
    text-align:center!important;
    white-space:nowrap!important;
  }

  .level-switch{
    grid-column:2!important;
    position:relative!important;
    left:auto!important;
    right:auto!important;
    top:-6px!important;
    transform:none!important;
    width:calc(100% - 6px)!important;
    min-width:0!important;
    max-width:none!important;
    height:44px!important;
    margin:0 3px!important;
    padding:2px!important;
    grid-template-columns:minmax(0,1fr) 1px minmax(0,1fr)!important;
  }
  .level-tab{
    width:100%!important;
    min-width:0!important;
    height:36px!important;
    padding:0 3px!important;
    font-size:7.45px!important;
    letter-spacing:.14em!important;
    text-indent:.14em!important;
    text-align:center!important;
  }
  .level-axis{height:27px!important}

  .project-direct{
    grid-column:3!important;
    position:relative!important;
    z-index:7!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:46px!important;
    min-width:46px!important;
    max-width:46px!important;
    height:38px!important;
    margin:0!important;
    padding:0 0 0 7px!important;
    font-size:7.6px!important;
    letter-spacing:.11em!important;
    white-space:nowrap!important;
    overflow:visible!important;
  }

  /* Center the sentence under the capsule, not under the viewport. */
  .site-creed{
    display:block!important;
    visibility:visible!important;
    opacity:1!important;
    left:calc(50% + 42px)!important;
    right:auto!important;
    bottom:1px!important;
    transform:translateX(-50%)!important;
    width:max-content!important;
    max-width:calc(100vw - 12px)!important;
    overflow:visible!important;
    white-space:nowrap!important;
    font-size:12.1px!important;
    letter-spacing:.02em!important;
    text-indent:.02em!important;
  }
}

@media(max-width:370px){
  .bar{
    grid-template-columns:122px minmax(0,1fr) 42px!important;
    padding:0 6px!important;
    column-gap:4px!important;
  }
  .brand .mk{width:30px!important;height:30px!important;flex:0 0 30px!important}
  .brand > span:last-child{
    width:calc(100% - 30px - 6px)!important;
    min-height:30px!important;
  }
  .brand b{font-size:8.45px!important}
  .brand small{font-size:6.05px!important;letter-spacing:.16em!important}
  .level-switch{width:calc(100% - 4px)!important;margin:0 2px!important}
  .level-tab{font-size:6.9px!important;letter-spacing:.10em!important;text-indent:.10em!important;padding:0 2px!important}
  .project-direct{
    width:42px!important;min-width:42px!important;max-width:42px!important;
    padding-left:6px!important;font-size:7.0px!important;letter-spacing:.085em!important;
  }
  .site-creed{
    left:calc(50% + 40px)!important;
    font-size:11.35px!important;
    letter-spacing:.01em!important;
    text-indent:.01em!important;
  }
}

/* v61.1 — keep the full creed visible in one line on phones. */
@media(max-width:700px){
  .site-creed{
    font-size:9.2px!important;
    letter-spacing:.015em!important;
    text-indent:.015em!important;
  }
}
@media(max-width:370px){
  .site-creed{
    font-size:8.75px!important;
    letter-spacing:.005em!important;
    text-indent:.005em!important;
  }
}


/* v62 — mobile micro-alignment pass.
   Lift the logo slightly, center the domain block on the logo axis,
   and push the capsule a bit to the right without changing desktop. */
@media(max-width:700px){
  .brand .mk{
    transform:translateY(-2px)!important;
  }
  .brand > span:last-child{
    top:-1px!important;
    left:calc(-2mm - 1px)!important;
    justify-content:center!important;
  }
  .brand b{
    position:relative!important;
    top:-1px!important;
  }
  .brand small{
    position:relative!important;
    top:0!important;
    margin-top:1px!important;
  }
  .level-switch{
    width:calc(100% - 12px)!important;
    margin:0 0 0 12px!important;
  }
}
@media(max-width:370px){
  .brand .mk{transform:translateY(-1px)!important}
  .brand > span:last-child{left:calc(-2mm - 1px)!important;top:-1px!important}
  .level-switch{
    width:calc(100% - 10px)!important;
    margin:0 0 0 10px!important;
  }
}


/* v63 — mobile brand axis correction.
   The circle becomes the visual anchor. The domain begins on the
   horizontal centre line of the circle; the path label stays below it. */
@media(max-width:700px){
  .brand{
    align-items:center!important;
    gap:7px!important;
  }
  .brand .mk{
    width:35px!important;
    height:35px!important;
    flex:0 0 35px!important;
    transform:none!important;
  }
  .brand > span:last-child{
    display:flex!important;
    flex-direction:column!important;
    justify-content:flex-start!important;
    width:calc(100% - 35px - 7px)!important;
    min-height:0!important;
    height:auto!important;
    left:calc(-2mm - 1px)!important;
    top:auto!important;
    transform:translateY(4px)!important;
  }
  .brand b{
    position:relative!important;
    top:0!important;
    margin:0!important;
    line-height:1!important;
  }
  .brand small{
    position:relative!important;
    top:0!important;
    margin-top:2px!important;
    line-height:1!important;
  }
}

@media(max-width:370px){
  .brand .mk{
    width:34px!important;
    height:34px!important;
    flex:0 0 34px!important;
  }
  .brand > span:last-child{
    width:calc(100% - 34px - 7px)!important;
    transform:translateY(4px)!important;
  }
}

/* v64 — surgical 1 mm gap between the mobile logo and domain block. */
@media(max-width:700px){
  .brand > span:last-child{
    left:calc(-7px + 1mm)!important;
  }
}


/* v65 — creed spans the full capsule width on mobile and reverses the capsule colours.
   The sentence should read as the counter-current to the blue/red switch. */
@media(max-width:700px){
  .site-creed{
    left:calc(50% + 42px)!important;
    width:calc(100vw - 204px)!important;
    max-width:calc(100vw - 204px)!important;
    min-width:0!important;
    text-align:center!important;
    white-space:nowrap!important;
    overflow:visible!important;
    background:linear-gradient(90deg,#ff4d57 0%,#ff6d74 18%,#d086d7 48%,#7094ff 78%,#18a0ff 100%)!important;
    -webkit-background-clip:text!important;
    background-clip:text!important;
    color:transparent!important;
  }
}
@media(max-width:370px){
  .site-creed{
    left:calc(50% + 40px)!important;
    width:calc(100vw - 194px)!important;
    max-width:calc(100vw - 194px)!important;
  }
}


/* v65 — site creed spans the capsule width and carries the inverse color current. */
.site-creed{
  width:clamp(360px,34vw,500px)!important;
  max-width:clamp(360px,34vw,500px)!important;
  text-align:center!important;
  background:linear-gradient(90deg,
    #ff3b50 0%,
    #cf5f97 24%,
    #8366c6 48%,
    #4f78dc 72%,
    #238dff 100%)!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
}

@media(max-width:980px){
  .site-creed{
    width:clamp(300px,42vw,410px)!important;
    max-width:clamp(300px,42vw,410px)!important;
  }
}

@media(max-width:700px){
  .site-creed{
    width:calc(100% - 12px)!important;
    max-width:calc(100% - 12px)!important;
    text-align:center!important;
    left:calc(50% + 42px)!important;
  }
}

@media(max-width:370px){
  .site-creed{
    width:calc(100% - 10px)!important;
    max-width:calc(100% - 10px)!important;
    left:calc(50% + 40px)!important;
  }
}


/* v67 — approved mobile navigation final lift.
   Move only the complete left brand module 1 mm upward on phones. */
@media (max-width: 700px) {
  .bar .brand {
    transform: translateY(-1mm) !important;
  }
}


/* v68 — enlarge the mobile creed so it visually spans the full capsule width. */
@media (max-width: 700px) {
  .site-creed {
    width: calc(100% - 2px) !important;
    max-width: calc(100% - 2px) !important;
    font-size: 13.9px !important;
    letter-spacing: .012em !important;
    text-indent: .012em !important;
  }
}

@media (max-width: 370px) {
  .site-creed {
    width: calc(100% - 2px) !important;
    max-width: calc(100% - 2px) !important;
    font-size: 13.2px !important;
    letter-spacing: .01em !important;
    text-indent: .01em !important;
  }
}


/* ═══════════════════════════════════════════════════════════════
   V73 — SITEWIDE PRECISION READING SYSTEM
   The first four pages established the reading language: one axis,
   one semantic unit at a time, short centered measure, and clear pauses.
   Every later narrative page now uses that same language.
   ═══════════════════════════════════════════════════════════════ */
.precision-reading-page .content p.precision-block{
  max-width:39ch!important;
  margin-left:auto!important;
  margin-right:auto!important;
  text-align:center!important;
  line-height:1.58!important;
  text-wrap:pretty;
}
.precision-reading-page .content p.precision-block + p.precision-block{
  margin-top:.08em;
}
/* Defensive fallback: no legacy prose block may silently restore the article layout. */
.precision-reading-page .content p.prose{
  max-width:39ch!important;
  margin-left:auto!important;
  margin-right:auto!important;
  text-align:center!important;
  line-height:1.58!important;
}
@media(max-width:700px){
  .precision-reading-page .content p.precision-block,
  .precision-reading-page .content p.prose{
    max-width:32ch!important;
    line-height:1.54!important;
  }
}


.support-capsule-link{display:block;width:min(100%,760px);margin:18px auto 10px;text-decoration:none;border:0}.support-capsule-link img{display:block;width:100%;height:auto;border-radius:999px;transition:transform .18s ease,filter .18s ease,box-shadow .18s ease}.support-capsule-link:hover img,.support-capsule-link:focus-visible img{transform:translateY(-1px) scale(1.01);filter:brightness(1.06)}.support-capsule-link:focus-visible{outline:none}.support-capsule-link:focus-visible img{box-shadow:0 0 0 2px rgba(201,162,75,.5),0 0 30px rgba(201,162,75,.25)}


/* ═══════════════════════════════════════════════════════════════
   V82 — VISUALIZATION: MAN + MANHOOD OPENING SEQUENCE
   Two new opening chapters now precede Matter. The first returns a
   man to Earth through a guided visualization; the second uses the
   supplied X/Y fire-water emblem as its own title image.
   ═══════════════════════════════════════════════════════════════ */
.visualization-page .visualization-hero .word{
  max-width:10.8ch;
  margin-left:auto;
  margin-right:auto;
  font-size:clamp(48px,13vw,92px)!important;
  line-height:.88!important;
  text-wrap:balance;
}
.hero-subtitle{
  max-width:34ch;
  margin:22px auto 0;
  font-family:var(--serif);
  font-size:clamp(18px,2.5vw,24px);
  line-height:1.5;
  color:var(--ink-soft);
  text-wrap:balance;
}
.photo.photo-manhood{
  width:min(72vmin,790px)!important;
  max-width:790px!important;
  margin:4px auto 8px!important;
  background:transparent!important;
  filter:drop-shadow(0 0 35px rgba(255,78,16,.16)) drop-shadow(0 0 35px rgba(0,139,255,.18))!important;
  pointer-events:none!important;
  user-select:none!important;
}
.photo.photo-manhood picture,
.photo.photo-manhood img{
  display:block;
  width:100%;
  height:auto;
  pointer-events:none!important;
  user-select:none!important;
  -webkit-user-drag:none!important;
}
.manhood-page .manhood-hero .word{
  margin-top:6px;
  font-size:clamp(64px,22vw,106px)!important;
  text-shadow:0 0 70px rgba(255,106,26,.2),0 0 70px rgba(30,111,217,.16)!important;
}
.manifest-quote{
  max-width:36ch;
  margin:1.65em auto;
  padding:24px 24px 22px;
  border-left:1px solid rgba(255,106,26,.44);
  border-right:1px solid rgba(79,195,247,.38);
  background:linear-gradient(100deg,rgba(196,66,47,.045),rgba(255,255,255,.018),rgba(30,111,217,.05));
  border-radius:16px;
}
.manifest-quote p{
  margin:0 0 1em!important;
  max-width:none!important;
  color:var(--ink)!important;
  font-family:var(--serif);
  font-size:clamp(18px,2.25vw,23px);
  line-height:1.52!important;
}
.manifest-quote p:last-child{margin-bottom:0!important}
.command-list li::marker{color:var(--gold)}
.visualization-reset{padding-top:clamp(72px,11vh,130px);padding-bottom:clamp(72px,11vh,130px)}
.visualization-reset .content::before{display:none}
.visualization-end,
.welcome-back,
.welcome-earth{
  margin-left:auto!important;
  margin-right:auto!important;
  text-align:center!important;
  text-wrap:balance;
}
.visualization-end{
  max-width:34ch;
  font-family:var(--title);
  font-size:clamp(18px,3vw,28px)!important;
  letter-spacing:.1em;
  color:var(--muted)!important;
}
.welcome-back{
  max-width:13ch;
  margin-top:1.6em!important;
  font-family:var(--display);
  font-size:clamp(58px,15vw,106px)!important;
  line-height:.86!important;
  background:var(--grad-duo);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent!important;
}
.welcome-earth{
  max-width:18ch;
  margin-top:1.2em!important;
  font-family:var(--title);
  font-size:clamp(20px,3.3vw,32px)!important;
  letter-spacing:.16em;
  color:var(--ink)!important;
}
.author-close p{max-width:27ch;margin:0 auto}
.manhood-answer{
  font-size:clamp(30px,5vw,48px)!important;
  color:var(--gold)!important;
}
.evil-heading{
  font-family:var(--display)!important;
  font-size:clamp(52px,11vw,88px)!important;
  line-height:.88!important;
  background:var(--grad-fire);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent!important;
}
.absolute-statement{font-size:clamp(23px,3.7vw,38px)!important}
.absolute-title{
  font-family:var(--display)!important;
  font-size:clamp(56px,13vw,104px)!important;
  line-height:.88!important;
  background:var(--grad-duo);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent!important;
}
.manhood-close p{
  max-width:22ch;
  margin:0 auto;
  font-size:clamp(22px,3.3vw,34px);
  line-height:1.45;
}
@media(max-width:700px){
  .visualization-page .visualization-hero .word{font-size:clamp(46px,16vw,72px)!important}
  .photo.photo-manhood{width:min(96vw,680px)!important;margin-top:0!important}
  .manifest-quote{padding:20px 17px}
  .welcome-back{font-size:clamp(52px,20vw,82px)!important}
}

/* v82 — centered semantic lists used by the new opening texts and legacy Basic pages. */
.statement-list{
  list-style:none;
  max-width:39ch;
  margin:1.25em auto 0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:.72em;
  text-align:center;
  color:var(--ink-soft);
  font-family:var(--serif);
  font-size:clamp(17px,2.15vw,22px);
  line-height:1.5;
}
.statement-list li{position:relative;padding:0 1.2em}
.statement-list li::before{
  content:"—";
  position:absolute;
  left:0;
  color:var(--gold);
  opacity:.8;
}
.command-list li{text-transform:none}
@media(max-width:700px){
  .statement-list{max-width:32ch;font-size:clamp(17px,4.8vw,20px)}
}


/* ═══════════════════════════════════════════════════════════════
   V84 — TRANSLATION RESILIENCE
   Browser translation replaces text nodes and may inject nested <font>
   wrappers. This layer lets translated copy grow without breaking the
   navigation, chapter transitions, reading rhythm or mobile geometry.
   ═══════════════════════════════════════════════════════════════ */

/* Every flexible child must be allowed to become narrower than its content. */
:where(.bar,.brand,.brand>span,.overlay,.overlay-shell,.overlay-head,.overlay-title,
.overlay-body,.nav-panel,.chapters,.chapters a,.chapters .nm,.project-dock,
.project-dock-head,.project-dock-links,.project-link,.project-link>span,
.hero,.titleframe,.content,.content p,.content li,.pager,.pjump,.pjump .ttl,
.card,.tier,.contactbox,footer,.flinks,.paper,.paper-head,
.paper-cols,.paper-col,.dual,.dual .a,.dual .b,.gb-inner,.gb-copy,.gb-tags,
.statement-list,.manifest-quote){min-inline-size:0}

/* Translation engines commonly wrap text in font elements. Their wrappers
   must inherit the typography instead of becoming new layout objects. */
html.wa-translated font,
html.translated-ltr font,
html.translated-rtl font{
  font:inherit!important;
  color:inherit;
  line-height:inherit!important;
  letter-spacing:inherit!important;
  text-transform:inherit!important;
  vertical-align:inherit!important;
}

/* Safe wrapping for every translated textual surface. */
html.wa-translated :where(h1,h2,h3,h4,p,li,a,button,small,b,strong,em,.nm,.ttl,.lab),
html.translated-ltr :where(h1,h2,h3,h4,p,li,a,button,small,b,strong,em,.nm,.ttl,.lab),
html.translated-rtl :where(h1,h2,h3,h4,p,li,a,button,small,b,strong,em,.nm,.ttl,.lab){
  overflow-wrap:break-word;
  word-break:normal;
}

/* The translated language can be materially longer than English. Increase
   measure before shrinking type, preserving the deliberate line rhythm. */
html.wa-translated{--col:880px}
html.wa-translated .content{
  width:min(100%,880px)!important;
  max-width:calc(100vw - 28px)!important;
}
html.wa-translated .content p,
html.wa-translated .precision-reading-page .content p.precision-block,
html.wa-translated .precision-reading-page .content p.prose{
  max-width:min(47ch,100%)!important;
  text-wrap:pretty;
}
html.wa-translated .content p.compact{max-width:min(47ch,100%)!important}
html.wa-translated .content p.beat{max-width:min(36ch,100%)!important}
html.wa-translated .content p.pull{max-width:min(34ch,100%)!important}
html.wa-translated .lead.wide{max-width:min(44ch,100%)!important}
html.wa-translated .cut p,
html.wa-translated .cut.chapter-close p,
html.wa-translated .manifest-quote,
html.wa-translated .manifest-quote p,
html.wa-translated .statement-list{max-width:min(48ch,100%)!important}

/* Titles and symbolic statements may wrap, but never escape their frame. */
html.wa-translated :where(.titleframe h1,.hero .word,.hero .source-title,
.project-dock-head h3,.overlay-title h3,.absolute-title,.evil-heading,
.welcome-back,.welcome-earth,.visualization-end){
  max-inline-size:100%!important;
  overflow-wrap:break-word!important;
  word-break:normal!important;
}
html.wa-translated .titleframe{max-width:min(100%,960px)}
html.wa-translated .overlay-title h3{white-space:normal!important;line-height:1.05!important}

/* Navigation: labels and descriptions grow vertically instead of colliding. */
html.wa-translated .overlay-head{height:auto!important;min-height:62px;padding-block:10px!important}
html.wa-translated .nav-panel .chapters a{
  height:auto!important;
  min-height:62px!important;
  align-items:center!important;
}
html.wa-translated .chapters a .nm{line-height:1.22!important}
html.wa-translated .project-dock{
  grid-template-columns:minmax(180px,.62fr) minmax(0,2fr)!important;
}
html.wa-translated .project-dock-flow{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  align-items:stretch!important;
}
html.wa-translated .project-link{
  height:auto!important;
  min-height:76px!important;
  align-items:center!important;
}
html.wa-translated .project-link b{line-height:1.18!important}
html.wa-translated .project-link small{line-height:1.32!important}

/* Bottom transitions: translated titles can use any number of lines. */
html.wa-translated .pager{grid-template-columns:repeat(2,minmax(0,1fr))!important}
html.wa-translated .pjump{
  height:auto!important;
  min-height:150px!important;
  padding-block:30px!important;
}
html.wa-translated .pjump .lab{
  white-space:normal!important;
  line-height:1.35!important;
}
html.wa-translated .pjump .ttl{
  display:flex!important;
  flex-wrap:wrap!important;
  line-height:1.14!important;
  overflow-wrap:break-word!important;
}
html.wa-translated .pjump .ar{flex:0 0 auto}

/* Components that previously relied on English being short. */
html.wa-translated .gb-tag{white-space:normal!important;min-height:38px;text-align:center}
html.wa-translated .dual .a,
html.wa-translated .dual .b{white-space:normal!important;line-height:1.28}
html.wa-translated .btn{white-space:normal;text-align:center;line-height:1.3;height:auto}
html.wa-translated footer .flinks a{overflow-wrap:break-word}
html.wa-translated .paper-head h4{overflow-wrap:break-word}

/* Compact and tablet translation layout. */
@media(max-width:980px){
  html.wa-translated .project-dock{
    grid-template-columns:1fr!important;
    gap:14px!important;
    align-items:start!important;
  }
  html.wa-translated .project-dock-head{text-align:center!important}
  html.wa-translated .project-dock-flow{width:100%!important}
}

@media(max-width:700px){
  html.wa-translated{--col:100%}
  html.wa-translated body{font-size:17px!important;line-height:1.62!important}
  html.wa-translated .content{max-width:calc(100vw - 20px)!important}
  html.wa-translated .content p,
  html.wa-translated .content p.compact,
  html.wa-translated .precision-reading-page .content p.precision-block,
  html.wa-translated .precision-reading-page .content p.prose{
    max-width:min(37ch,100%)!important;
    line-height:1.56!important;
  }
  html.wa-translated .content p.beat{max-width:min(33ch,100%)!important}
  html.wa-translated .project-dock-head{
    display:block!important;
    text-align:center!important;
  }
  html.wa-translated .project-dock-flow{
    grid-template-columns:1fr!important;
  }
  html.wa-translated .project-link{
    grid-template-columns:26px minmax(0,1fr) 18px!important;
    min-height:62px!important;
  }
  html.wa-translated .project-link small{display:block!important}
  html.wa-translated .project-link i{display:block!important}
  html.wa-translated .pager,
  html.wa-translated .pager:not(.solo),
  html.wa-translated .pager.trio{
    grid-template-columns:1fr!important;
  }
  html.wa-translated .pjump{min-height:126px!important}
  html.wa-translated .dual{
    grid-template-columns:1fr!important;
    gap:10px!important;
  }
  html.wa-translated .dual .a,
  html.wa-translated .dual .b{
    justify-self:center!important;
    text-align:center!important;
  }
  html.wa-translated .dual .sep{display:none!important}
}

/* Browsers that expose their own translated-ltr / translated-rtl class receive
   the same resilient state even before JavaScript detects the injected DOM. */
html.translated-ltr,
html.translated-rtl{--col:880px}

/* V84.1 — the fixed, non-translated creed may extend a few pixels beyond the
   capsule measure; do not clip its final letter at desktop widths. */
.site-creed{overflow:visible!important}


/* ═══════════════════════════════════════════════════════════════
   V87 — CONNECTION OPENER
   The new first chapter shares Manhood's X/Y fire-water emblem,
   while its typography is tuned for a short, declarative opening.
   ═══════════════════════════════════════════════════════════════ */
.connection-page .connection-hero .word{
  max-width:10ch;
  margin:8px auto 0;
  font-size:clamp(60px,19vw,102px)!important;
  line-height:.88!important;
  text-wrap:balance;
  text-shadow:0 0 70px rgba(255,106,26,.18),0 0 70px rgba(30,111,217,.16)!important;
}
.connection-page .connection-question{
  max-width:27ch!important;
  font-size:clamp(22px,3.2vw,31px)!important;
  line-height:1.58!important;
  text-wrap:balance;
}
.connection-page .connection-answer{
  max-width:26ch!important;
  font-size:clamp(24px,3.6vw,36px)!important;
  line-height:1.42!important;
  background:var(--grad-duo);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent!important;
}
.connection-page .connection-list{
  max-width:22ch;
  gap:.9em;
  font-size:clamp(20px,2.7vw,28px);
}
.connection-page .connection-civilization{
  max-width:20ch!important;
  font-size:clamp(25px,3.8vw,39px)!important;
  line-height:1.35!important;
}
.connection-close p{
  max-width:25ch;
  margin:0 auto;
  font-size:clamp(23px,3.5vw,36px);
  line-height:1.48;
  text-wrap:balance;
}
@media(max-width:700px){
  .connection-page .connection-hero .word{font-size:clamp(52px,18vw,76px)!important}
  .connection-page .connection-question{font-size:clamp(20px,6vw,27px)!important;line-height:1.5!important}
  .connection-page .connection-answer{font-size:clamp(23px,7vw,31px)!important}
  .connection-page .connection-civilization{font-size:clamp(24px,7.5vw,34px)!important}
}


/* v88 — Sex opener: standard mark, disciplined emphasis, translation-safe rhythm */
.sex-page .sex-hero .word{
  letter-spacing:.075em;
}
.sex-page .sex-verdict{
  color:rgba(244,248,255,.96);
  text-wrap:balance;
}
.sex-page .sex-close span{
  display:inline-block;
  margin-top:.08em;
  font-family:var(--display);
  font-size:clamp(42px,7vw,82px);
  letter-spacing:.08em;
  text-transform:uppercase;
}
@media (max-width:680px){
  .sex-page .sex-hero .word{font-size:clamp(68px,24vw,104px)!important}
  .sex-page .sex-close span{font-size:clamp(42px,16vw,68px)}
}


/* ═══════════════════════════════════════════════════════════════
   v98 — STANDALONE GOLDEN GATEWAY
   Gateway is a separate entrance. Basic / Advanced keep their
   original two-zone interface without a third tab or lock state.
   ═══════════════════════════════════════════════════════════════ */
.gateway-section::before{
  background:radial-gradient(70% 88% at 50% 8%,rgba(201,162,75,.19),transparent 62%),radial-gradient(48% 70% at 8% 58%,rgba(30,111,217,.10),transparent 68%),radial-gradient(48% 70% at 92% 58%,rgba(196,66,47,.09),transparent 68%)!important
}
.gateway-section .progress{background:linear-gradient(90deg,#8a651d,#c9a24b 48%,#ffe09a 78%,#c9a24b)!important;box-shadow:0 0 15px rgba(201,162,75,.48),0 0 30px rgba(255,224,154,.10)!important}
.gateway-section .bar{background:rgba(12,10,6,.82)!important;border-bottom-color:rgba(201,162,75,.13)!important}
.gateway-section .bar::after{background:linear-gradient(90deg,transparent 5%,rgba(30,111,217,.12) 18%,rgba(201,162,75,.48) 50%,rgba(196,66,47,.12) 82%,transparent 96%)!important}
.gateway-section .brand-section .zone-word{color:#f1cf77!important;text-shadow:0 0 18px rgba(201,162,75,.18)}
.gateway-section .content::before{background:linear-gradient(180deg,#7d5c1b,#c9a24b 45%,#ffe09a 70%,#c9a24b)!important;opacity:.48!important}
.gateway-section .rule::after{background:linear-gradient(135deg,#8f681d,#c9a24b,#ffe29b)!important;box-shadow:0 0 16px 3px rgba(201,162,75,.25)!important}
.gateway-section footer::before{background:linear-gradient(90deg,transparent,rgba(30,111,217,.18),rgba(201,162,75,.50),rgba(196,66,47,.18),transparent)!important}
.gateway-section .cut.chapter-close{border-top-color:rgba(201,162,75,.24)!important}
.gateway-switch-shell{position:absolute;left:50%;top:calc(50% - 6px);transform:translate(-50%,-50%);width:clamp(260px,28vw,390px);height:48px;padding:3px;border:2px solid transparent;border-radius:999px;background:linear-gradient(180deg,rgba(12,10,6,.97),rgba(5,5,4,.99)) padding-box,linear-gradient(90deg,#80601d,#c9a24b 45%,#ffe09a 70%,#c9a24b) border-box;box-shadow:0 15px 44px rgba(0,0,0,.48),0 0 34px rgba(201,162,75,.11);z-index:5}
.gateway-switch{position:relative;width:100%;height:38px;border:0;border-radius:999px;background:transparent;color:#fff0bd;font-family:var(--title);font-size:clamp(10px,.82vw,12px);font-weight:600;letter-spacing:.39em;text-indent:.39em;text-transform:uppercase;cursor:pointer;text-shadow:0 0 16px rgba(201,162,75,.25)}
.gateway-switch .level-glow{position:absolute;inset:1px;border-radius:999px;background:linear-gradient(100deg,rgba(108,75,15,.35),rgba(201,162,75,.34),rgba(255,221,137,.12));opacity:1}
.gateway-switch span:last-child{position:relative;z-index:2}
#nav-overlay[data-active-panel="gateway"]{background:radial-gradient(80% 90% at 50% 0%,rgba(201,162,75,.13),transparent 62%),rgba(5,5,6,.96)!important}
#nav-overlay[data-active-panel="gateway"] .overlay-head{border-bottom-color:rgba(201,162,75,.16)!important}
#nav-overlay[data-active-panel="gateway"] .overlay-title h3{color:#fff0bd!important;text-shadow:0 0 26px rgba(201,162,75,.22)!important}
.gateway-intro span{color:#e3c979}
.gateway-panel .chapters{grid-template-columns:repeat(3,minmax(0,1fr))!important;max-width:1080px!important}
.gateway-panel .chapters a{border-color:rgba(201,162,75,.08)!important;background:linear-gradient(110deg,rgba(201,162,75,.025),rgba(255,255,255,.012))!important}
.gateway-panel .chapters a:hover,.gateway-panel .chapters a.active{border-color:rgba(227,201,121,.34)!important;background:linear-gradient(105deg,rgba(111,78,18,.17),rgba(201,162,75,.07))!important;box-shadow:0 0 34px rgba(201,162,75,.09)!important}
.gateway-panel .chapters a:hover .no,.gateway-panel .chapters a.active .no{background:linear-gradient(180deg,#fff0b7,#c9a24b)!important;-webkit-background-clip:text!important;background-clip:text!important;color:transparent!important}
.gateway-opening{padding-top:52px!important;padding-bottom:70px!important}
.gateway-opening-inner{max-width:920px;margin:0 auto;padding:48px 42px;border:1px solid rgba(227,201,121,.22);border-radius:28px;background:radial-gradient(75% 120% at 50% 0%,rgba(201,162,75,.13),transparent 65%),rgba(9,8,5,.72);box-shadow:0 26px 80px rgba(0,0,0,.42),0 0 48px rgba(201,162,75,.08);text-align:center}
.gateway-opening-kicker{display:block;margin-bottom:13px;color:#c9a24b;font-family:var(--title);font-size:10px;letter-spacing:.25em;text-transform:uppercase}
.gateway-opening h2{margin:0;color:#fff1be;font-family:var(--display);font-size:clamp(46px,7vw,84px);font-weight:400;line-height:.92;letter-spacing:.035em;text-transform:uppercase;text-shadow:0 0 38px rgba(201,162,75,.16)}
.gateway-opening p{margin:22px auto 30px;max-width:34ch;color:rgba(241,236,222,.72);font-family:var(--serif);font-size:clamp(17px,2vw,21px)}
.gateway-opening-actions{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.gateway-enter{display:flex;min-height:116px;flex-direction:column;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.08);border-radius:18px;background:rgba(255,255,255,.025);transition:transform .35s var(--ease),border-color .35s var(--ease),box-shadow .35s var(--ease),background .35s var(--ease)}
.gateway-enter span{font-family:var(--title);font-size:15px;font-weight:600;letter-spacing:.25em;text-transform:uppercase}
.gateway-enter small{margin-top:8px;color:rgba(235,232,225,.49);font-size:10px;letter-spacing:.12em;text-transform:uppercase}
.gateway-enter-basic{color:#90c7ff;border-color:rgba(30,140,255,.18)}
.gateway-enter-advanced{color:#ff8c70;border-color:rgba(255,72,56,.18)}
.gateway-enter:hover{transform:translateY(-3px);background:rgba(255,255,255,.045)}
.gateway-enter-basic:hover{border-color:rgba(50,153,255,.45);box-shadow:0 0 34px rgba(30,140,255,.12)}
.gateway-enter-advanced:hover{border-color:rgba(255,89,56,.45);box-shadow:0 0 34px rgba(255,72,56,.11)}
.gateway-index-hero{padding-bottom:42px!important;text-align:center}
.gateway-index-mark{display:flex;width:148px;height:148px;margin:0 auto 30px;align-items:center;justify-content:center;border:1px solid rgba(227,201,121,.26);border-radius:50%;background:radial-gradient(circle,rgba(201,162,75,.14),rgba(201,162,75,.025) 58%,transparent 70%);box-shadow:0 0 65px rgba(201,162,75,.12),inset 0 0 30px rgba(201,162,75,.08)}
.gateway-index-mark span{color:#ffe29b;font-family:var(--display);font-size:31px;letter-spacing:.08em;text-shadow:0 0 22px rgba(201,162,75,.25)}
.gateway-index-page .gateway-index-hero .word{max-width:none!important;color:#fff0bd!important;font-size:clamp(72px,14vw,138px)!important;text-shadow:0 0 70px rgba(201,162,75,.18)!important}
.gateway-index-intro{margin:28px auto 0;max-width:22ch;color:rgba(239,234,219,.75);font-family:var(--serif);font-size:clamp(20px,2.8vw,29px);line-height:1.55}
.gateway-index-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;max-width:1120px!important;padding-top:20px!important;padding-bottom:32px!important}
.gateway-index-card{display:flex;min-height:220px;flex-direction:column;align-items:flex-start;justify-content:flex-end;padding:28px;border:1px solid rgba(227,201,121,.13);border-radius:22px;background:radial-gradient(110% 100% at 50% 0%,rgba(201,162,75,.08),transparent 64%),rgba(255,255,255,.018);box-shadow:0 18px 54px rgba(0,0,0,.28);transition:transform .38s var(--ease),border-color .38s var(--ease),box-shadow .38s var(--ease)}
.gateway-index-card:hover{transform:translateY(-5px);border-color:rgba(227,201,121,.38);box-shadow:0 25px 70px rgba(0,0,0,.38),0 0 35px rgba(201,162,75,.08)}
.gateway-index-no{margin-bottom:auto;color:#c9a24b;font-family:var(--display);font-size:30px;letter-spacing:.08em}
.gateway-index-card strong{color:#fff0bd;font-family:var(--title);font-size:clamp(16px,1.8vw,22px);letter-spacing:.08em;text-transform:uppercase}
.gateway-index-card small{margin-top:10px;color:rgba(239,234,219,.52);font-size:12px;letter-spacing:.08em}
.gateway-index-enter{padding-top:8px!important;padding-bottom:86px!important;text-align:center}
.gateway-begin{display:inline-flex;min-width:min(410px,90vw);min-height:92px;flex-direction:column;align-items:center;justify-content:center;border:1px solid rgba(227,201,121,.32);border-radius:999px;background:linear-gradient(100deg,rgba(102,73,18,.15),rgba(201,162,75,.10),rgba(255,226,155,.04));box-shadow:0 0 42px rgba(201,162,75,.08);transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease)}
.gateway-begin:hover{transform:translateY(-3px);border-color:rgba(255,226,155,.55);box-shadow:0 0 58px rgba(201,162,75,.15)}
.gateway-begin span{color:#fff0bd;font-family:var(--title);font-size:15px;font-weight:600;letter-spacing:.28em;text-transform:uppercase}
.gateway-begin small{margin-top:7px;color:rgba(239,234,219,.47);font-size:10px;letter-spacing:.16em;text-transform:uppercase}
@media(max-width:700px){
  .gateway-switch-shell{left:50%!important;width:min(55vw,214px)!important;height:44px!important;padding:2px!important}
  .gateway-switch{height:36px!important;font-size:9px!important;letter-spacing:.25em!important;text-indent:.25em!important}
  .gateway-panel .chapters{grid-template-columns:1fr!important}
  .gateway-index-grid{grid-template-columns:1fr;gap:12px;padding-left:18px!important;padding-right:18px!important}
  .gateway-index-card{min-height:154px;padding:22px}
  .gateway-opening-actions{grid-template-columns:1fr}
  .gateway-opening-inner{padding:36px 18px;border-radius:22px}
}
@media(max-width:390px){
  .gateway-switch-shell{left:8px!important;transform:translateY(-50%)!important;width:calc(100vw - 82px)!important}
  .gateway-index-mark{width:118px;height:118px}.gateway-index-mark span{font-size:25px}
}


/* v98.1 — exact Gateway mobile containment. */
@media(max-width:700px){
  .gateway-section .photo.photo-manhood{width:calc(100vw - 52px)!important;max-width:680px!important}
  .gateway-section .site-creed{left:50%!important;transform:translateX(-50%)!important;width:calc(100vw - 16px)!important;max-width:calc(100vw - 16px)!important;overflow:hidden!important;white-space:nowrap!important}
  .gateway-switch-shell{left:50%!important;transform:translate(-50%,-50%)!important;width:calc(100vw - 176px)!important;max-width:228px!important;min-width:182px!important}
}
@media(max-width:430px){
  .gateway-switch-shell{width:calc(100vw - 160px)!important;max-width:210px!important;min-width:164px!important}
}
@media(max-width:360px){
  .gateway-switch-shell{width:calc(100vw - 150px)!important;min-width:154px!important}
  .gateway-switch{font-size:8px!important;letter-spacing:.18em!important;text-indent:.18em!important}
}

/* v98.2 — Gateway capsule occupies the same mobile header column as Basic / Advanced. */
@media(max-width:700px){
  .gateway-switch-shell{
    grid-column:2!important;
    position:relative!important;
    left:auto!important;
    right:auto!important;
    top:-6px!important;
    transform:none!important;
    width:calc(100% - 6px)!important;
    min-width:0!important;
    max-width:none!important;
    height:44px!important;
    margin:0 3px!important;
    padding:2px!important;
  }
  .gateway-switch{width:100%!important;min-width:0!important}
}


/* v99 — Gateway mobile and index refinements. */
.gateway-switch-shell{width:clamp(220px,24vw,340px)!important}
.gateway-index-grid{justify-content:center!important}
.gateway-index-card{align-items:center!important;justify-content:center!important;text-align:center!important;padding:32px!important}
.gateway-index-no{margin:0 0 18px!important;color:#c9a24b;font-family:var(--display);font-size:34px!important;letter-spacing:.08em;text-align:center!important}
.gateway-index-card strong{text-align:center!important}
.gateway-index-card small{max-width:20ch;text-align:center!important}
@media(max-width:700px){
  .gateway-section .bar{grid-template-columns:126px minmax(0,1fr) 44px!important;column-gap:4px!important;padding:0 7px!important}
  .gateway-switch-shell{grid-column:2!important;position:relative!important;left:auto!important;right:auto!important;top:-6px!important;transform:none!important;justify-self:center!important;width:min(100%,178px)!important;min-width:0!important;max-width:178px!important;height:42px!important;margin:0 auto!important;padding:2px!important}
  .gateway-switch{width:100%!important;height:34px!important;font-size:8.6px!important;letter-spacing:.21em!important;text-indent:.21em!important}
  .gateway-section .project-direct{width:44px!important;min-width:44px!important;max-width:44px!important;padding-left:6px!important}
  .gateway-index-grid{grid-template-columns:1fr!important;gap:12px!important;padding-left:18px!important;padding-right:18px!important}
  .gateway-index-card{min-height:160px!important;padding:24px 20px!important}
  .gateway-index-no{font-size:32px!important;margin-bottom:16px!important}
}
@media(max-width:390px){
  .gateway-section .bar{grid-template-columns:120px minmax(0,1fr) 40px!important;padding:0 6px!important}
  .gateway-switch-shell{width:min(100%,168px)!important;max-width:168px!important}
  .gateway-switch{font-size:8px!important;letter-spacing:.18em!important;text-indent:.18em!important}
  .gateway-section .project-direct{width:40px!important;min-width:40px!important;max-width:40px!important;font-size:7px!important;padding-left:5px!important}
}


/* v100 — Gateway mobile compaction and tile balance. */
.gateway-index-hero{padding-top:14px!important;padding-bottom:28px!important}
.gateway-index-intro{margin:22px auto 0!important;max-width:21ch!important}
.gateway-index-grid{gap:18px!important;max-width:1040px!important}
.gateway-index-card{min-height:228px!important;border-radius:24px!important;padding:34px 30px!important}
.gateway-index-card strong{display:block;margin:0 auto!important;max-width:18ch!important;line-height:1.22!important}
.gateway-index-card small{display:block;margin:12px auto 0!important;line-height:1.55!important}
.gateway-begin{min-height:88px!important}
@media(max-width:700px){
  .gateway-section .bar{grid-template-columns:118px minmax(0,1fr) 40px!important;column-gap:3px!important;padding:0 6px!important}
  .gateway-section .brand{gap:5px!important}
  .gateway-section .brand .mk{width:29px!important;height:29px!important;flex:0 0 29px!important}
  .gateway-section .brand b{font-size:8.35px!important}
  .gateway-section .brand small{font-size:5.9px!important;letter-spacing:.16em!important}
  .gateway-switch-shell{top:-4px!important;width:min(100%,166px)!important;max-width:166px!important;height:40px!important;padding:2px!important}
  .gateway-switch{height:32px!important;font-size:8px!important;letter-spacing:.18em!important;text-indent:.18em!important}
  .gateway-section .project-direct{width:40px!important;min-width:40px!important;max-width:40px!important;height:36px!important;padding-left:5px!important;font-size:7px!important;letter-spacing:.10em!important}
  .gateway-index-hero{padding-top:6px!important;padding-bottom:18px!important}
  .gateway-index-intro{margin-top:18px!important;max-width:20ch!important;font-size:clamp(18px,4.2vw,25px)!important;line-height:1.45!important}
  .gateway-index-grid{gap:14px!important;padding-top:14px!important;padding-bottom:28px!important;padding-left:16px!important;padding-right:16px!important}
  .gateway-index-card{min-height:168px!important;padding:24px 22px!important;border-radius:22px!important}
  .gateway-index-no{font-size:30px!important;margin-bottom:14px!important}
  .gateway-index-card strong{font-size:clamp(15px,5vw,20px)!important;line-height:1.18!important}
  .gateway-index-card small{margin-top:10px!important;font-size:12px!important;line-height:1.5!important}
  .gateway-index-enter{padding-top:0!important;padding-bottom:72px!important}
  .gateway-begin{min-height:84px!important}
}
@media(max-width:390px){
  .gateway-section .bar{grid-template-columns:112px minmax(0,1fr) 38px!important;padding:0 5px!important}
  .gateway-section .brand .mk{width:28px!important;height:28px!important;flex-basis:28px!important}
  .gateway-section .brand b{font-size:8px!important}
  .gateway-section .brand small{font-size:5.5px!important;letter-spacing:.14em!important}
  .gateway-switch-shell{width:min(100%,156px)!important;max-width:156px!important;height:38px!important}
  .gateway-switch{height:30px!important;font-size:7.5px!important;letter-spacing:.15em!important;text-indent:.15em!important}
  .gateway-section .project-direct{width:38px!important;min-width:38px!important;max-width:38px!important;font-size:6.6px!important;padding-left:4px!important}
  .gateway-index-grid{padding-left:14px!important;padding-right:14px!important}
  .gateway-index-card{min-height:160px!important;padding:22px 18px!important}
}
@media(max-width:360px){
  .gateway-section .bar{grid-template-columns:108px minmax(0,1fr) 36px!important}
  .gateway-switch-shell{width:min(100%,148px)!important;max-width:148px!important}
  .gateway-section .project-direct{width:36px!important;min-width:36px!important;max-width:36px!important;font-size:6.2px!important}
}


/* v101 — Gateway editorial pass.
   Less glow, fewer soft AI-style surfaces, stronger editorial geometry. */
.gateway-section::before{
  background:
    linear-gradient(180deg,rgba(201,162,75,.055),transparent 24%),
    radial-gradient(55% 70% at 12% 58%,rgba(30,111,217,.055),transparent 72%),
    radial-gradient(55% 70% at 88% 58%,rgba(196,66,47,.05),transparent 72%)!important;
}
.gateway-section .watermark{opacity:.032!important;filter:saturate(.72)!important}
.gateway-section .bar{background:rgba(8,7,5,.94)!important}
.gateway-section .bar::after{opacity:.45!important}
.gateway-switch-shell{
  width:clamp(210px,22vw,310px)!important;
  height:40px!important;
  padding:2px!important;
  border:1px solid rgba(210,177,91,.72)!important;
  border-radius:999px!important;
  background:rgba(12,10,6,.94)!important;
  box-shadow:0 8px 24px rgba(0,0,0,.34)!important;
}
.gateway-switch{
  height:34px!important;
  color:#ead28d!important;
  font-size:10px!important;
  letter-spacing:.25em!important;
  text-indent:.25em!important;
  text-shadow:none!important;
}
.gateway-switch .level-glow{opacity:0!important}

.gateway-index-hero{padding-top:10px!important;padding-bottom:26px!important}
.gateway-index-page .gateway-index-hero .word{
  color:#ead9a5!important;
  font-family:var(--serif)!important;
  font-size:clamp(58px,9.5vw,98px)!important;
  font-weight:400!important;
  line-height:.95!important;
  letter-spacing:.035em!important;
  text-transform:none!important;
  text-shadow:none!important;
}
.gateway-index-page .gateway-index-hero .scar{
  width:min(260px,48vw)!important;
  height:1px!important;
  margin-top:28px!important;
  background:linear-gradient(90deg,transparent,#a78337 25%,#d2b35f 50%,#a78337 75%,transparent)!important;
  box-shadow:none!important;
}
.gateway-index-intro{
  margin:22px auto 0!important;
  max-width:28ch!important;
  color:rgba(239,234,219,.68)!important;
  font-size:clamp(18px,2.1vw,24px)!important;
  line-height:1.48!important;
}
.gateway-index-grid{gap:18px!important;max-width:1020px!important;padding-top:24px!important;padding-bottom:34px!important}
.gateway-index-card{
  position:relative!important;
  min-height:214px!important;
  padding:34px 28px 30px!important;
  border:1px solid rgba(205,174,91,.28)!important;
  border-radius:5px!important;
  background:rgba(11,10,8,.48)!important;
  box-shadow:0 14px 36px rgba(0,0,0,.22)!important;
  overflow:hidden!important;
}
.gateway-index-card::before{
  content:"";
  position:absolute;
  top:0;left:18%;right:18%;height:1px;
  background:linear-gradient(90deg,transparent,#c6a455,transparent);
  opacity:.7;
}
.gateway-index-card::after{
  content:"→";
  position:absolute;
  right:18px;bottom:13px;
  color:rgba(210,179,95,.48);
  font-family:var(--serif);
  font-size:18px;
  transition:transform .25s ease,color .25s ease;
}
.gateway-index-card:hover{
  transform:translateY(-2px)!important;
  border-color:rgba(220,190,105,.55)!important;
  background:rgba(15,13,9,.62)!important;
  box-shadow:0 18px 42px rgba(0,0,0,.28)!important;
}
.gateway-index-card:hover::after{transform:translateX(3px);color:#d7ba6a}
.gateway-index-no{
  margin:0 0 20px!important;
  color:#c6a455!important;
  font-family:var(--serif)!important;
  font-size:28px!important;
  font-weight:400!important;
  line-height:1!important;
  letter-spacing:.02em!important;
}
.gateway-index-card strong{
  max-width:20ch!important;
  color:#f0e1ae!important;
  font-size:clamp(15px,1.7vw,20px)!important;
  font-weight:600!important;
  line-height:1.24!important;
  letter-spacing:.055em!important;
}
.gateway-index-card small{
  margin-top:13px!important;
  max-width:24ch!important;
  color:rgba(239,234,219,.58)!important;
  font-family:var(--serif)!important;
  font-size:14px!important;
  line-height:1.45!important;
  letter-spacing:0!important;
}
.gateway-index-enter{padding-top:4px!important;padding-bottom:80px!important}
.gateway-begin{
  position:relative!important;
  min-width:min(340px,88vw)!important;
  min-height:72px!important;
  padding:14px 62px 14px 34px!important;
  border:1px solid rgba(210,177,91,.48)!important;
  border-radius:4px!important;
  background:rgba(11,10,8,.62)!important;
  box-shadow:none!important;
}
.gateway-begin::after{
  content:"→";
  position:absolute;
  right:28px;top:50%;
  transform:translateY(-50%);
  color:#cdb061;
  font-family:var(--serif);
  font-size:24px;
}
.gateway-begin:hover{
  transform:translateY(-2px)!important;
  border-color:rgba(229,202,125,.72)!important;
  background:rgba(17,14,9,.76)!important;
  box-shadow:none!important;
}
.gateway-begin span{font-size:13px!important;letter-spacing:.18em!important;text-indent:.18em!important}
.gateway-begin small{
  margin-top:5px!important;
  font-family:var(--serif)!important;
  font-size:11px!important;
  letter-spacing:.04em!important;
  text-transform:none!important;
}

.gateway-opening-inner{
  max-width:900px!important;
  padding:46px 38px!important;
  border:1px solid rgba(210,177,91,.34)!important;
  border-radius:5px!important;
  background:rgba(11,10,8,.72)!important;
  box-shadow:0 18px 48px rgba(0,0,0,.28)!important;
}
.gateway-opening-kicker{color:#b99a4f!important;letter-spacing:.17em!important}
.gateway-opening h2{
  color:#ead9a5!important;
  font-family:var(--serif)!important;
  font-size:clamp(44px,6vw,72px)!important;
  font-weight:400!important;
  line-height:1!important;
  letter-spacing:.02em!important;
  text-transform:none!important;
  text-shadow:none!important;
}
.gateway-opening p{max-width:38ch!important;color:rgba(239,234,219,.66)!important}
.gateway-opening-actions{gap:12px!important}
.gateway-enter{
  min-height:104px!important;
  border-radius:4px!important;
  background:rgba(255,255,255,.015)!important;
  box-shadow:none!important;
}
.gateway-enter:hover{transform:translateY(-2px)!important;background:rgba(255,255,255,.028)!important}
.gateway-enter-basic:hover,.gateway-enter-advanced:hover{box-shadow:none!important}
.gateway-enter span{letter-spacing:.18em!important}

@media(max-width:700px){
  .gateway-section .bar{grid-template-columns:116px minmax(0,1fr) 38px!important;column-gap:3px!important;padding:0 5px!important}
  .gateway-section .brand{gap:5px!important}
  .gateway-section .brand .mk{width:28px!important;height:28px!important;flex:0 0 28px!important}
  .gateway-section .brand b{font-size:8.05px!important}
  .gateway-section .brand small{font-size:5.55px!important;letter-spacing:.14em!important}
  .gateway-switch-shell{
    top:-4px!important;
    width:min(100%,154px)!important;
    max-width:154px!important;
    height:36px!important;
    padding:1px!important;
  }
  .gateway-switch{height:32px!important;font-size:7.5px!important;letter-spacing:.15em!important;text-indent:.15em!important}
  .gateway-section .project-direct{width:38px!important;min-width:38px!important;max-width:38px!important;height:34px!important;padding-left:4px!important;font-size:6.5px!important;letter-spacing:.08em!important}
  .gateway-index-hero{padding-top:2px!important;padding-bottom:18px!important}
  .gateway-index-page .gateway-index-hero .word{font-size:clamp(52px,15vw,76px)!important}
  .gateway-index-page .gateway-index-hero .scar{margin-top:22px!important;width:min(210px,54vw)!important}
  .gateway-index-intro{margin-top:18px!important;max-width:24ch!important;font-size:clamp(17px,4.1vw,22px)!important;line-height:1.45!important}
  .gateway-index-grid{gap:12px!important;padding:18px 15px 30px!important}
  .gateway-index-card{min-height:152px!important;padding:25px 22px 24px!important;border-radius:4px!important}
  .gateway-index-no{font-size:25px!important;margin-bottom:14px!important}
  .gateway-index-card strong{font-size:clamp(15px,4.7vw,19px)!important}
  .gateway-index-card small{font-size:13px!important;margin-top:10px!important}
  .gateway-index-card::after{right:14px;bottom:10px;font-size:16px}
  .gateway-index-enter{padding-bottom:68px!important}
  .gateway-begin{min-width:min(320px,88vw)!important;min-height:66px!important;padding:12px 54px 12px 28px!important}
  .gateway-begin::after{right:22px;font-size:21px}
  .gateway-opening{padding-top:42px!important;padding-bottom:62px!important}
  .gateway-opening-inner{padding:34px 20px!important;border-radius:4px!important}
  .gateway-opening h2{font-size:clamp(38px,11vw,56px)!important}
  .gateway-opening-actions{grid-template-columns:1fr!important}
  .gateway-enter{min-height:94px!important;border-radius:4px!important}
}
@media(max-width:390px){
  .gateway-section .bar{grid-template-columns:110px minmax(0,1fr) 36px!important;padding:0 4px!important}
  .gateway-switch-shell{width:min(100%,146px)!important;max-width:146px!important}
  .gateway-switch{font-size:7.1px!important;letter-spacing:.13em!important;text-indent:.13em!important}
  .gateway-section .project-direct{width:36px!important;min-width:36px!important;max-width:36px!important;font-size:6.1px!important}
}


/* v102 — original Basic / Advanced capsule inside Gateway navigation. */
.gateway-path-switch{
  position:relative!important;
  left:auto!important;
  top:auto!important;
  transform:none!important;
  grid-column:2!important;
  justify-self:center!important;
  width:min(100%,500px)!important;
  height:48px!important;
  margin:14px auto 0!important;
  padding:3px!important;
  z-index:2!important;
}
.gateway-path-switch .level-tab{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:100%!important;
  text-decoration:none!important;
}
.gateway-path-switch .level-basic{color:#dff7ff!important}
.gateway-path-switch .level-advanced{color:#fff2df!important}
.gateway-path-switch .level-basic .level-glow,
.gateway-path-switch .level-advanced .level-glow{opacity:.72!important}
.gateway-path-switch .level-basic:hover .level-glow,
.gateway-path-switch .level-advanced:hover .level-glow{opacity:1!important}
.gateway-path-switch .level-basic:hover{text-shadow:0 0 13px rgba(60,159,255,.32),0 1px 10px rgba(0,0,0,.9)!important}
.gateway-path-switch .level-advanced:hover{text-shadow:0 0 13px rgba(255,68,86,.30),0 1px 10px rgba(0,0,0,.9)!important}
@media(max-width:980px){
  .gateway-path-switch{grid-column:1!important;width:min(100%,500px)!important;margin:0 auto!important}
}
@media(max-width:700px){
  .gateway-path-switch{
    display:grid!important;
    position:relative!important;
    left:auto!important;
    top:auto!important;
    transform:none!important;
    width:min(100%,430px)!important;
    max-width:430px!important;
    min-width:0!important;
    height:46px!important;
    margin:14px auto 0!important;
    padding:3px!important;
  }
  .gateway-path-switch .level-tab{height:36px!important;font-size:8.7px!important;letter-spacing:.22em!important;text-indent:.22em!important}
  .gateway-path-switch .level-axis{height:28px!important}
}
@media(max-width:390px){
  .gateway-path-switch{width:100%!important;height:44px!important}
  .gateway-path-switch .level-tab{height:34px!important;font-size:8.1px!important;letter-spacing:.18em!important;text-indent:.18em!important}
  .gateway-path-switch .level-axis{height:26px!important}
}


/* v103 — reciprocal Gateway navigation from Basic and Advanced. */
.gateway-return-switch{
  position:relative!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:min(100%,500px)!important;
  min-height:48px!important;
  margin:14px auto 0!important;
  padding:3px 24px!important;
  border:2px solid transparent!important;
  border-radius:999px!important;
  overflow:hidden!important;
  background:linear-gradient(180deg,rgba(12,10,6,.97),rgba(5,5,4,.99)) padding-box,
             linear-gradient(90deg,#80601d,#c9a24b 45%,#ffe09a 70%,#c9a24b) border-box!important;
  box-shadow:0 15px 44px rgba(0,0,0,.42),0 0 30px rgba(201,162,75,.10)!important;
  color:#fff0bd!important;
  font-family:var(--title)!important;
  font-size:10px!important;
  font-weight:600!important;
  letter-spacing:.34em!important;
  text-indent:.34em!important;
  text-transform:uppercase!important;
  text-decoration:none!important;
  isolation:isolate!important;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease)!important;
}
.gateway-return-switch .gateway-return-glow{
  position:absolute!important;
  inset:2px!important;
  z-index:-1!important;
  border-radius:999px!important;
  background:linear-gradient(100deg,rgba(108,75,15,.30),rgba(201,162,75,.28),rgba(255,221,137,.10))!important;
  opacity:.78!important;
  transition:opacity .35s var(--ease)!important;
}
.gateway-return-switch:hover{
  transform:translateY(-2px)!important;
  box-shadow:0 18px 48px rgba(0,0,0,.46),0 0 38px rgba(201,162,75,.16)!important;
}
.gateway-return-switch:hover .gateway-return-glow{opacity:1!important}
@media(max-width:980px){
  .gateway-return-switch{width:min(100%,500px)!important;margin:14px auto 0!important}
}
@media(max-width:700px){
  .gateway-return-switch{
    width:min(100%,430px)!important;
    min-height:46px!important;
    margin:14px auto 0!important;
    padding:3px 18px!important;
    font-size:8.7px!important;
    letter-spacing:.24em!important;
    text-indent:.24em!important;
  }
}
@media(max-width:390px){
  .gateway-return-switch{
    width:100%!important;
    min-height:44px!important;
    font-size:8.1px!important;
    letter-spacing:.20em!important;
    text-indent:.20em!important;
  }
}


/* v104 — four-entry Gateway with Vanity. */
.gateway-panel .chapters{grid-template-columns:repeat(4,minmax(0,1fr))!important;max-width:1180px!important}
.gateway-index-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;max-width:920px!important}
@media(max-width:980px){
  .gateway-panel .chapters{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:700px){
  .gateway-panel .chapters{grid-template-columns:1fr!important}
  .gateway-index-grid{grid-template-columns:1fr!important}
}


/* v105 — five-entry Gateway ending with The Gate. */
.gateway-panel .chapters{grid-template-columns:repeat(5,minmax(0,1fr))!important;max-width:1240px!important}
.gateway-index-final{grid-column:1/-1!important;width:calc(50% - 9px)!important;justify-self:center!important}
@media(max-width:1100px){
  .gateway-panel .chapters{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}
@media(max-width:980px){
  .gateway-panel .chapters{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:700px){
  .gateway-panel .chapters{grid-template-columns:1fr!important}
  .gateway-index-final{grid-column:auto!important;width:100%!important}
}


/* v109 — strengthened Gateway reading system.
   Connection established the language: thesis, question, precise field,
   deliberate pause and a real closing statement. Every Gateway chapter
   now uses that same hierarchy without changing its wording. */
.gateway-strengthened-page .gateway-chapter-hero{padding-bottom:clamp(42px,7vh,76px)!important}
.gateway-strengthened-page:not(.connection-page) .gateway-chapter-hero .word{
  max-width:12ch!important;margin:8px auto 0!important;
  font-size:clamp(58px,13vw,98px)!important;line-height:.9!important;
  text-wrap:balance!important
}
.gateway-strengthened-page .gateway-article{position:relative}
.gateway-strengthened-page .gateway-reading-section{position:relative}
.gateway-strengthened-page .gateway-reading-content{
  max-width:760px!important;margin:clamp(34px,5.5vh,64px) auto!important
}
.gateway-strengthened-page .gateway-section-lead{
  max-width:31ch!important;color:#eee8da!important;
  font-size:clamp(22px,3vw,32px)!important;line-height:1.46!important;
  text-wrap:balance!important
}
.gateway-strengthened-page .gateway-thesis{
  max-width:29ch!important;color:#f0e3b8!important;
  font-family:var(--serif)!important;font-size:clamp(26px,3.8vw,42px)!important;
  line-height:1.3!important;text-wrap:balance!important
}
.gateway-strengthened-page .gateway-counter-thesis{color:#e5e0d5!important}
.gateway-strengthened-page .gateway-question{
  max-width:31ch!important;color:#eee7d7!important;
  font-size:clamp(22px,3.25vw,35px)!important;line-height:1.46!important;
  text-wrap:balance!important
}
.gateway-strengthened-page .gateway-emphasis{
  max-width:34ch!important;color:#f2eee5!important;
  font-size:clamp(20px,2.55vw,28px)!important;line-height:1.48!important;
  text-wrap:balance!important
}
.gateway-strengthened-page .gateway-verdict{
  max-width:31ch!important;margin:1.8em auto!important;padding:20px 8px!important;
  border-top:1px solid rgba(205,174,91,.34)!important;
  border-bottom:1px solid rgba(205,174,91,.34)!important;
  color:#ead28d!important;font-family:var(--title)!important;
  font-size:clamp(20px,2.8vw,30px)!important;font-weight:500!important;
  line-height:1.38!important;letter-spacing:.025em!important;text-wrap:balance!important
}
.gateway-strengthened-page .gateway-address{
  max-width:24ch!important;color:#d7b75d!important;font-family:var(--title)!important;
  font-size:clamp(24px,3vw,34px)!important;letter-spacing:.12em!important;text-transform:uppercase!important
}
.gateway-strengthened-page .gateway-invitation{color:#ead28d!important;font-size:clamp(19px,2.3vw,25px)!important}
.gateway-strengthened-page .gateway-final-axiom{
  max-width:31ch!important;margin:2.15em auto 0!important;padding:22px 18px!important;
  border:1px solid rgba(205,174,91,.28)!important;border-radius:18px!important;
  background:linear-gradient(180deg,rgba(201,162,75,.1),rgba(201,162,75,.03))!important;
  box-shadow:0 0 0 1px rgba(255,255,255,.025) inset,0 18px 50px rgba(0,0,0,.2)!important;
  color:#f2dd96!important;font-family:var(--serif)!important;
  font-size:clamp(24px,3.35vw,38px)!important;font-weight:500!important;
  line-height:1.42!important;letter-spacing:.01em!important;text-wrap:balance!important
}
.gateway-strengthened-page .gateway-word-stack{
  max-width:26ch!important;color:#ede6d5!important;font-family:var(--title)!important;
  font-size:clamp(18px,2.4vw,26px)!important;line-height:1.65!important;letter-spacing:.025em!important
}
.gateway-word-field{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:12px 28px;width:min(100%,700px);margin:30px auto 34px;padding:22px 0;
  border-top:1px solid rgba(205,174,91,.22);border-bottom:1px solid rgba(205,174,91,.22)
}
.gateway-word-field--three{grid-template-columns:repeat(3,minmax(0,1fr))}
.gateway-word-field--two{grid-template-columns:repeat(2,minmax(0,1fr));max-width:520px}
.gateway-word-field--dense{grid-template-columns:repeat(auto-fit,minmax(128px,1fr))}
.gateway-word-field .gateway-word-item{
  max-width:none!important;margin:0!important;padding:3px 8px!important;
  color:#d9d4ca!important;font-family:var(--title)!important;font-size:clamp(15px,1.75vw,20px)!important;
  font-weight:500!important;line-height:1.35!important;letter-spacing:.02em!important;text-align:center!important
}
.gateway-word-field--gold .gateway-word-item{color:#e5c977!important}
.gateway-strengthened-page .gateway-reading-rule{height:58px!important;opacity:.42!important}
.gateway-strengthened-page .gateway-chapter-close{
  margin-top:clamp(34px,6vh,70px)!important;border-top-color:rgba(205,174,91,.32)!important;
  background:linear-gradient(180deg,rgba(201,162,75,.025),transparent 55%)!important
}
.gateway-strengthened-page .gateway-chapter-close .gateway-close-line{
  max-width:31ch!important;margin:0 auto .7em!important;color:#eee3c3!important;
  font-family:var(--serif)!important;font-size:clamp(23px,3.5vw,36px)!important;
  line-height:1.45!important;text-wrap:balance!important
}
.gateway-strengthened-page .gateway-chapter-close .gateway-close-line:last-child{margin-bottom:0!important}

/* The final choice uses the original Basic / Advanced navigation capsule,
   enlarged only enough to act as the threshold itself. */
.gateway-opening .gateway-final-path-switch{
  position:relative!important;left:auto!important;right:auto!important;top:auto!important;
  transform:none!important;display:grid!important;grid-template-columns:1fr 1px 1fr!important;
  width:min(100%,680px)!important;max-width:680px!important;min-width:0!important;
  height:66px!important;margin:34px auto 0!important;padding:4px!important;overflow:visible!important
}
.gateway-opening .gateway-final-path-switch .gateway-final-path{
  display:flex!important;align-items:center!important;justify-content:center!important;
  width:100%!important;height:54px!important;padding:0 20px!important;
  font-size:clamp(11px,1.05vw,14px)!important;letter-spacing:.34em!important;text-indent:.34em!important;
  text-decoration:none!important
}
.gateway-opening .gateway-final-path-switch .level-glow{opacity:.72!important}
.gateway-opening .gateway-final-path-switch .level-basic{color:#e7f6ff!important}
.gateway-opening .gateway-final-path-switch .level-advanced{color:#fff0ed!important}
.gateway-opening .gateway-final-path-switch .gateway-final-path:hover .level-glow{opacity:1!important}
.gateway-opening .gateway-final-path-switch .level-axis{height:40px!important}

@media(max-width:700px){
  .gateway-strengthened-page .gateway-chapter-hero{padding-bottom:38px!important}
  .gateway-strengthened-page:not(.connection-page) .gateway-chapter-hero .word{font-size:clamp(48px,16vw,74px)!important}
  .gateway-strengthened-page .gateway-reading-content{margin:30px auto 42px!important}
  .gateway-strengthened-page .gateway-section-lead{font-size:clamp(20px,6vw,27px)!important;line-height:1.45!important}
  .gateway-strengthened-page .gateway-thesis{font-size:clamp(24px,7.3vw,34px)!important}
  .gateway-strengthened-page .gateway-question{font-size:clamp(21px,6.4vw,29px)!important}
  .gateway-strengthened-page .gateway-emphasis{font-size:clamp(19px,5.4vw,24px)!important}
  .gateway-strengthened-page .gateway-verdict{font-size:clamp(19px,5.7vw,25px)!important;padding:17px 5px!important}
  .gateway-strengthened-page .gateway-final-axiom{font-size:clamp(22px,6.7vw,30px)!important;margin-top:1.7em!important;padding:18px 14px!important;border-radius:15px!important}
  .gateway-word-field{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 12px;margin:24px auto 28px;padding:18px 0}
  .gateway-word-field--three{grid-template-columns:repeat(3,minmax(0,1fr))}
  .gateway-word-field .gateway-word-item{font-size:clamp(14px,4vw,17px)!important;padding:3px!important}
  .gateway-strengthened-page .gateway-reading-rule{height:44px!important}
  .gateway-opening .gateway-final-path-switch{
    width:100%!important;max-width:100%!important;height:56px!important;margin-top:28px!important;padding:3px!important
  }
  .gateway-opening .gateway-final-path-switch .gateway-final-path{
    height:46px!important;padding:0 8px!important;font-size:9.4px!important;
    letter-spacing:.23em!important;text-indent:.23em!important
  }
  .gateway-opening .gateway-final-path-switch .level-axis{height:34px!important}
}
@media(max-width:390px){
  .gateway-word-field--three{grid-template-columns:1fr!important}
  .gateway-word-field--dense{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gateway-opening .gateway-final-path-switch .gateway-final-path{
    font-size:8.7px!important;letter-spacing:.18em!important;text-indent:.18em!important
  }
}


/* v110 — site-wide semantic editorial system.
   Meaning determines structure: thesis, question, verdict, pause, list,
   reflection and close. Basic, Advanced and third-space pages share one
   grammar while retaining different temperatures and page-specific modes. */
.editorial-page{
  --editorial-accent:#8fd8ff;
  --editorial-accent-strong:#4fc3f7;
  --editorial-accent-rgb:79,195,247;
  --editorial-warm:#d8b760;
  --editorial-line:rgba(143,216,255,.20);
  --editorial-muted:rgba(230,234,238,.56)
}
.editorial-page.editorial-advanced{
  --editorial-accent:#ff9179;
  --editorial-accent-strong:#ff654b;
  --editorial-accent-rgb:255,101,75;
  --editorial-line:rgba(255,112,84,.21)
}
.editorial-page.editorial-neutral{
  --editorial-accent:#e0c474;
  --editorial-accent-strong:#c9a24b;
  --editorial-accent-rgb:201,162,75;
  --editorial-line:rgba(224,196,116,.20)
}
.editorial-page .editorial-hero{padding-bottom:clamp(42px,7vh,80px)!important}
.editorial-page .editorial-article{position:relative}
.editorial-page .editorial-section{
  position:relative!important;
  padding-top:clamp(34px,5vh,62px)!important;
  padding-bottom:clamp(42px,6.5vh,78px)!important
}
.editorial-page .editorial-section::before{
  content:attr(data-editorial-label);
  position:absolute;top:clamp(28px,4.5vh,54px);left:max(20px,calc(50% - 500px));
  color:var(--editorial-accent);font-family:var(--title);font-size:9px;font-weight:600;
  line-height:1;letter-spacing:.28em;text-transform:uppercase;opacity:.58
}
.editorial-page .editorial-section::after{
  content:"";position:absolute;top:clamp(48px,6vh,68px);left:max(20px,calc(50% - 500px));
  width:30px;height:1px;background:var(--editorial-line)
}
.editorial-page .editorial-content{
  max-width:760px!important;margin:clamp(26px,4.5vh,52px) auto!important
}
.editorial-page .editorial-content > p,
.editorial-page .editorial-section > p{
  max-width:38ch;margin-left:auto!important;margin-right:auto!important
}
.editorial-page .editorial-body{
  color:rgba(236,233,227,.84)!important;font-size:clamp(18px,1.65vw,21px)!important;
  line-height:1.86!important
}
.editorial-page .editorial-lead{
  max-width:31ch!important;color:#eeeae1!important;font-family:var(--serif)!important;
  font-size:clamp(22px,2.8vw,31px)!important;line-height:1.5!important;text-wrap:balance!important
}
.editorial-page .editorial-thesis{
  max-width:29ch!important;color:#f1ede4!important;font-family:var(--serif)!important;
  font-size:clamp(25px,3.25vw,38px)!important;line-height:1.34!important;text-wrap:balance!important
}
.editorial-page .editorial-question{
  max-width:31ch!important;color:#f2eee6!important;font-family:var(--serif)!important;
  font-size:clamp(23px,3vw,35px)!important;line-height:1.43!important;text-wrap:balance!important
}
.editorial-page .editorial-question::first-line{color:var(--editorial-accent)}
.editorial-page .editorial-question-inline{
  color:rgba(240,238,231,.93)!important;font-size:clamp(19px,2vw,24px)!important;
  line-height:1.65!important
}
.editorial-page .editorial-verdict{
  max-width:31ch!important;margin-top:1.75em!important;margin-bottom:1.75em!important;
  padding:19px 7px!important;border-top:1px solid var(--editorial-line)!important;
  border-bottom:1px solid var(--editorial-line)!important;color:var(--editorial-accent)!important;
  font-family:var(--title)!important;font-size:clamp(20px,2.55vw,29px)!important;
  font-weight:500!important;line-height:1.4!important;letter-spacing:.025em!important;text-wrap:balance!important
}
.editorial-page .editorial-beat{
  max-width:26ch!important;color:var(--editorial-warm)!important;font-family:var(--title)!important;
  font-size:clamp(18px,2.2vw,25px)!important;font-weight:500!important;line-height:1.5!important;
  letter-spacing:.035em!important;text-wrap:balance!important
}
.editorial-page .editorial-emphasis{
  max-width:34ch!important;color:#eee9df!important;font-size:clamp(20px,2.25vw,27px)!important;
  line-height:1.55!important;text-wrap:balance!important
}
.editorial-page .editorial-address{
  max-width:24ch!important;color:var(--editorial-accent)!important;font-family:var(--title)!important;
  font-size:clamp(23px,2.8vw,34px)!important;font-weight:600!important;line-height:1.25!important;
  letter-spacing:.14em!important;text-transform:uppercase!important
}
.editorial-page .editorial-stack{
  max-width:28ch!important;color:#e9e5dc!important;font-family:var(--title)!important;
  font-size:clamp(18px,2.15vw,25px)!important;line-height:1.72!important;letter-spacing:.022em!important
}
.editorial-page .editorial-rule{height:54px!important;opacity:.38!important}
.editorial-page .editorial-rule::after{
  background:linear-gradient(135deg,rgba(var(--editorial-accent-rgb),.62),var(--editorial-warm))!important;
  box-shadow:0 0 16px 2px rgba(var(--editorial-accent-rgb),.16)!important
}
.editorial-page .editorial-list{
  width:min(100%,720px);margin:28px auto 32px!important;padding:0!important
}
.editorial-page .editorial-list-linear{
  display:grid!important;gap:12px!important;list-style:none!important
}
.editorial-page .editorial-list-linear .editorial-list-item{
  position:relative;padding:10px 12px 10px 28px!important;border-left:1px solid var(--editorial-line);
  color:rgba(238,235,228,.88)!important;font-size:clamp(17px,1.65vw,20px)!important;line-height:1.55!important
}
.editorial-page .editorial-list-linear .editorial-list-item::before{
  content:"";position:absolute;left:-3px;top:1.1em;width:5px;height:5px;border-radius:50%;background:var(--editorial-accent)
}
.editorial-page .editorial-word-field{
  display:grid!important;grid-template-columns:repeat(auto-fit,minmax(145px,1fr))!important;
  gap:12px 24px!important;padding:22px 0!important;border-top:1px solid var(--editorial-line)!important;
  border-bottom:1px solid var(--editorial-line)!important;list-style:none!important
}
.editorial-page .editorial-word-field-three{grid-template-columns:repeat(3,minmax(0,1fr))!important}
.editorial-page .editorial-word-field-dense{grid-template-columns:repeat(auto-fit,minmax(120px,1fr))!important}
.editorial-page .editorial-word-field .editorial-list-item{
  display:flex;align-items:center;justify-content:center;min-height:48px;padding:4px 8px!important;
  color:#dedad2!important;font-family:var(--title)!important;font-size:clamp(15px,1.55vw,19px)!important;
  font-weight:500!important;line-height:1.35!important;text-align:center!important
}
.editorial-page .editorial-section-interrogation{
  background:linear-gradient(180deg,rgba(var(--editorial-accent-rgb),.018),transparent 72%)
}
.editorial-page .editorial-chapter-close{
  margin-top:clamp(34px,6vh,70px)!important;border-top-color:var(--editorial-line)!important;
  background:linear-gradient(180deg,rgba(var(--editorial-accent-rgb),.035),transparent 58%)!important
}
.editorial-page .editorial-close-line,
.editorial-page .editorial-chapter-close p{
  max-width:31ch!important;margin-left:auto!important;margin-right:auto!important;
  color:#eee9df!important;font-family:var(--serif)!important;font-size:clamp(24px,3.45vw,38px)!important;
  line-height:1.43!important;text-wrap:balance!important
}

/* Guided and exercise pages expose deliberate steps instead of generic chapter numbering. */
.editorial-page.editorial-guided .editorial-section::before,
.editorial-page.editorial-exercise .editorial-section::before{opacity:.78}
.editorial-page.editorial-guided .editorial-section,
.editorial-page.editorial-exercise .editorial-section{padding-top:clamp(46px,7vh,84px)!important}
.editorial-page.editorial-guided .editorial-section::after,
.editorial-page.editorial-exercise .editorial-section::after{width:48px}

/* Long chapters stay readable without turning every paragraph into a spectacle. */
.editorial-page.editorial-longform .editorial-section{padding-bottom:clamp(34px,5vh,62px)!important}
.editorial-page.editorial-longform .editorial-content{max-width:740px!important}
.editorial-page.editorial-longform .editorial-body{font-size:clamp(18px,1.5vw,20px)!important}

/* Personal voices remove the architectural numbering and narrow the room. */
.editorial-page.editorial-personal .editorial-section::before,
.editorial-page.editorial-personal .editorial-section::after{display:none!important}
.editorial-page.editorial-personal .editorial-content{max-width:690px!important}
.editorial-page.editorial-personal .editorial-section{padding-top:clamp(26px,4vh,48px)!important}
.editorial-page.editorial-letter .editorial-section-final{border-top:1px solid var(--editorial-line)}

/* Reflection pages are aftermaths, not another attack. */
.editorial-page.editorial-reflection{
  --editorial-accent:#dcc477;--editorial-accent-strong:#c9a24b;
  --editorial-accent-rgb:201,162,75;--editorial-line:rgba(220,196,119,.20)
}
.editorial-page.editorial-reflection .editorial-section{padding-top:clamp(40px,6vh,72px)!important}
.editorial-page.editorial-reflection .editorial-body{color:rgba(235,231,220,.80)!important}

/* Project and Support retain functional controls while their ideas receive hierarchy. */
.editorial-page.editorial-hybrid .editorial-section::before,
.editorial-page.editorial-hybrid .editorial-section::after{display:none!important}
.editorial-page.editorial-hybrid .editorial-section{padding-top:clamp(30px,4.5vh,54px)!important}
.editorial-page.editorial-hybrid .editorial-content{max-width:760px!important}
.editorial-page.editorial-hybrid .support-capsule-link,
.editorial-page.editorial-hybrid .support-options,
.editorial-page.editorial-hybrid form{position:relative;z-index:2}

/* Advanced finale receives an unmistakable last movement. */
.editorial-page.editorial-finale .editorial-section-final{padding-bottom:clamp(68px,10vh,120px)!important}
.editorial-page.editorial-finale .editorial-section-final .editorial-emphasis,
.editorial-page.editorial-finale .editorial-section-final .editorial-beat{
  font-size:clamp(24px,3.2vw,39px)!important;color:var(--editorial-accent)!important
}
.editorial-page.editorial-finale .editorial-chapter-close p{font-size:clamp(30px,4.3vw,50px)!important}

/* The visual Differences opener keeps its artwork and gains the same closing grammar. */
.editorial-page.editorial-visual-opener .editorial-section::before,
.editorial-page.editorial-visual-opener .editorial-section::after{display:none!important}

/* Men's Hell remains a directory but speaks the same visual language. */
.editorial-directory .editorial-directory-section{position:relative}
.editorial-directory .editorial-directory-head{max-width:760px;margin-left:auto;margin-right:auto}
.editorial-directory .editorial-directory-card{
  border-radius:8px!important;border-color:rgba(255,105,76,.10)!important;
  background:linear-gradient(105deg,rgba(255,89,56,.018),rgba(255,255,255,.006))!important
}
.editorial-directory .editorial-directory-card:hover{border-color:rgba(255,105,76,.34)!important}

@media(max-width:900px){
  .editorial-page .editorial-section::before,
  .editorial-page .editorial-section::after{left:22px}
  .editorial-page .editorial-section{padding-left:18px!important;padding-right:18px!important}
}
@media(max-width:700px){
  .editorial-page .editorial-hero{padding-bottom:36px!important}
  .editorial-page .editorial-section{
    padding-top:44px!important;padding-bottom:52px!important;padding-left:18px!important;padding-right:18px!important
  }
  .editorial-page .editorial-section::before{top:22px;left:18px;font-size:8px;letter-spacing:.22em}
  .editorial-page .editorial-section::after{top:39px;left:18px;width:24px}
  .editorial-page .editorial-content{margin:24px auto 34px!important}
  .editorial-page .editorial-body{font-size:18px!important;line-height:1.78!important}
  .editorial-page .editorial-lead{font-size:clamp(21px,6vw,27px)!important}
  .editorial-page .editorial-thesis{font-size:clamp(24px,7vw,33px)!important}
  .editorial-page .editorial-question{font-size:clamp(22px,6.5vw,30px)!important}
  .editorial-page .editorial-question-inline{font-size:clamp(18px,5vw,22px)!important}
  .editorial-page .editorial-verdict{font-size:clamp(19px,5.6vw,25px)!important;padding:16px 4px!important}
  .editorial-page .editorial-beat{font-size:clamp(18px,5.2vw,23px)!important}
  .editorial-page .editorial-emphasis{font-size:clamp(19px,5.4vw,24px)!important}
  .editorial-page .editorial-address{font-size:clamp(22px,6.5vw,29px)!important}
  .editorial-page .editorial-rule{height:42px!important}
  .editorial-page .editorial-word-field{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px 10px!important;padding:17px 0!important}
  .editorial-page .editorial-word-field-three{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .editorial-page .editorial-word-field .editorial-list-item{font-size:14px!important;padding:3px!important}
  .editorial-page .editorial-close-line,
  .editorial-page .editorial-chapter-close p{font-size:clamp(23px,7vw,32px)!important}
}
@media(max-width:390px){
  .editorial-page .editorial-word-field-three{grid-template-columns:1fr!important}
  .editorial-page .editorial-word-field-dense{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}


/* v111 — mobile section labels are structural, not reading content.
   Keep deliberate step numbers only in guided and exercise experiences. */
@media(max-width:700px){
  .editorial-page:not(.editorial-guided):not(.editorial-exercise) .editorial-section::before,
  .editorial-page:not(.editorial-guided):not(.editorial-exercise) .editorial-section::after{
    display:none!important;
  }
  .editorial-page:not(.editorial-guided):not(.editorial-exercise) .editorial-section{
    padding-top:30px!important;
  }
  .editorial-page.editorial-guided .editorial-section,
  .editorial-page.editorial-exercise .editorial-section{
    padding-top:50px!important;
  }
}


/* v112 — six-entry Gateway with The Mechanism.
   This chapter uses the same semantic editorial grammar as Connection,
   with a more architectural contrast system for takeover, preparation,
   conversion and the cultural pyramid. */
.gateway-panel .chapters{grid-template-columns:repeat(6,minmax(0,1fr))!important;max-width:1320px!important}
.gateway-index-final{grid-column:auto!important;width:auto!important;justify-self:stretch!important}
.gateway-index-mechanism{border-color:rgba(227,201,121,.24)!important}
@media(max-width:1180px){.gateway-panel .chapters{grid-template-columns:repeat(3,minmax(0,1fr))!important}}
@media(max-width:980px){.gateway-panel .chapters{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(max-width:700px){.gateway-panel .chapters{grid-template-columns:1fr!important}}

.mechanism-page{--mechanism-gold:#e0bd63;--mechanism-ink:#eee8dc;--mechanism-line:rgba(218,185,94,.26)}
.mechanism-page .mechanism-hero .word{max-width:14ch!important;font-size:clamp(54px,11vw,94px)!important}
.mechanism-subtitle{
  max-width:34ch;margin:18px auto 0;color:rgba(226,195,111,.82);
  font-family:var(--title);font-size:clamp(12px,1.4vw,17px);font-weight:500;
  letter-spacing:.25em;text-align:center;text-transform:uppercase;text-wrap:balance
}
.mechanism-page .mechanism-reading-content{max-width:790px!important}
.mechanism-page .mechanism-opening-question{max-width:27ch!important}
.mechanism-page .mechanism-danger-field{max-width:430px!important;border-color:rgba(196,66,47,.22)!important}
.mechanism-page .mechanism-danger-field .gateway-word-item{color:#d9c7c1!important}
.mechanism-page .mechanism-desire-field .gateway-word-item{font-family:var(--serif)!important;font-size:clamp(17px,2vw,23px)!important}
.mechanism-page .mechanism-love-verdict{max-width:19ch!important;font-size:clamp(24px,3.2vw,38px)!important}
.mechanism-page .mechanism-belongs-verdict{max-width:22ch!important;margin-top:1.4em!important}
.mechanism-contrast-grid{
  display:grid;gap:12px;width:min(100%,760px);margin:32px auto 36px
}
.mechanism-contrast-pair{
  display:grid;grid-template-columns:1fr 1fr;gap:1px;overflow:hidden;
  border:1px solid rgba(218,185,94,.16);border-radius:10px;background:rgba(218,185,94,.12)
}
.mechanism-contrast-pair p{
  max-width:none!important;margin:0!important;padding:24px 26px!important;
  font-family:var(--serif)!important;font-size:clamp(17px,1.75vw,21px)!important;
  line-height:1.55!important;text-align:left!important
}
.mechanism-contrast-first{background:rgba(255,255,255,.015);color:rgba(231,227,219,.66)!important}
.mechanism-contrast-second{background:rgba(201,162,75,.055);color:#ead69a!important}
.mechanism-page .mechanism-act-pyramid .mechanism-contrast-second,
.mechanism-page .mechanism-act-cost .mechanism-contrast-second{color:#e9d28b!important}
.mechanism-page .mechanism-chapter-close{background:radial-gradient(60% 100% at 50% 0%,rgba(201,162,75,.08),transparent 72%)!important}
.mechanism-page .mechanism-close-first{color:rgba(237,231,219,.76)!important;font-size:clamp(24px,3vw,34px)!important}
.mechanism-page .mechanism-close-final{color:#ead28d!important;font-size:clamp(32px,5vw,58px)!important;line-height:1.15!important}
@media(max-width:700px){
  .mechanism-page .mechanism-hero .word{font-size:clamp(46px,13.2vw,67px)!important}
  .mechanism-subtitle{margin-top:13px;font-size:10px;letter-spacing:.19em}
  .mechanism-contrast-pair{grid-template-columns:1fr;border-radius:8px}
  .mechanism-contrast-pair p{padding:19px 18px!important;font-size:17px!important;text-align:center!important}
  .mechanism-page .mechanism-desire-field{grid-template-columns:1fr!important}
}


/* v114 — Gateway mobile header parity, centered creed, cleaner The Gate axiom, and cache-busted X/Y asset. */
@media(max-width:700px){
  .gateway-section .bar{
    display:grid!important;
    grid-template-columns:auto minmax(0,1fr) auto!important;
    align-items:center!important;
    column-gap:6px!important;
    padding:0 10px!important;
  }
  .gateway-section .brand{
    gap:8px!important;
    flex:0 0 auto!important;
    max-width:none!important;
    overflow:visible!important;
  }
  .gateway-section .brand > span:last-child{
    display:block!important;
    max-width:none!important;
  }
  .gateway-section .brand .mk{
    width:31px!important;
    height:31px!important;
    flex:0 0 31px!important;
  }
  .gateway-section .brand b{
    font-size:15px!important;
    line-height:1.03!important;
  }
  .gateway-section .brand small{
    display:block!important;
    font-size:7.5px!important;
    line-height:1.1!important;
    letter-spacing:.22em!important;
    margin-top:2px!important;
  }
  .gateway-switch-shell{
    grid-column:2!important;
    position:relative!important;
    left:auto!important;
    right:auto!important;
    top:-2px!important;
    transform:none!important;
    justify-self:center!important;
    width:min(58vw,230px)!important;
    max-width:230px!important;
    min-width:0!important;
    height:40px!important;
    margin:0 auto!important;
    padding:3px!important;
  }
  .gateway-switch{
    width:100%!important;
    height:32px!important;
    font-size:8.5px!important;
    letter-spacing:.17em!important;
    text-indent:.17em!important;
  }
  .gateway-section .project-direct{
    width:auto!important;
    min-width:44px!important;
    max-width:none!important;
    height:42px!important;
    padding:0 2px 0 12px!important;
    font-size:9px!important;
    letter-spacing:.18em!important;
  }
  .gateway-section .site-creed{
    left:50%!important;
    right:auto!important;
    bottom:2px!important;
    transform:translateX(-50%)!important;
    width:max-content!important;
    max-width:calc(100vw - 24px)!important;
    overflow:hidden!important;
    white-space:nowrap!important;
    text-align:center!important;
  }
}
@media(max-width:390px){
  .gateway-section .bar{padding:0 8px!important;column-gap:5px!important}
  .gateway-section .brand{gap:7px!important}
  .gateway-section .brand .mk{width:30px!important;height:30px!important;flex-basis:30px!important}
  .gateway-section .brand b{font-size:14px!important}
  .gateway-section .brand small{font-size:7px!important;letter-spacing:.2em!important}
  .gateway-switch-shell{width:min(56vw,210px)!important;max-width:210px!important;height:38px!important;padding:2px!important}
  .gateway-switch{height:32px!important;font-size:8px!important;letter-spacing:.15em!important;text-indent:.15em!important}
  .gateway-section .project-direct{min-width:40px!important;height:40px!important;padding-left:10px!important;font-size:8px!important;letter-spacing:.14em!important}
  .gateway-section .site-creed{max-width:calc(100vw - 18px)!important}
}
@media(max-width:360px){
  .gateway-section .brand .mk{width:28px!important;height:28px!important;flex-basis:28px!important}
  .gateway-section .brand b{font-size:13px!important}
  .gateway-section .brand small{font-size:6.6px!important}
  .gateway-switch-shell{width:min(54vw,196px)!important;max-width:196px!important;height:36px!important}
  .gateway-switch{height:30px!important;font-size:7.5px!important}
  .gateway-section .project-direct{min-width:38px!important;height:38px!important;font-size:7.3px!important;padding-left:8px!important}
}

.gateway-strengthened-page .gateway-final-axiom{
  max-width:27ch!important;
  margin:1.25em auto 0!important;
  padding:14px 0 0!important;
  border:0!important;
  border-top:1px solid rgba(205,174,91,.30)!important;
  border-radius:0!important;
  background:none!important;
  box-shadow:none!important;
  color:#f0ddb0!important;
  font-family:var(--serif)!important;
  font-size:clamp(22px,3.05vw,34px)!important;
  font-weight:400!important;
  line-height:1.42!important;
  letter-spacing:0!important;
  text-wrap:balance!important;
}
@media(max-width:700px){
  .gateway-strengthened-page .gateway-final-axiom{
    max-width:24ch!important;
    margin-top:1.05em!important;
    padding-top:12px!important;
    font-size:clamp(21px,6.15vw,28px)!important;
  }
}


/* v115 — final mobile precision polish.
   Gateway uses the same mobile brand geometry and creed axis as Basic / Advanced. */
@media(max-width:700px){
  .gateway-section .bar{
    display:grid!important;
    grid-template-columns:130px minmax(0,1fr) 46px!important;
    column-gap:4px!important;
    align-items:center!important;
    padding:0 7px!important;
  }
  .gateway-section .brand{
    grid-column:1!important;
    display:flex!important;
    align-items:center!important;
    gap:7px!important;
    min-width:0!important;
    max-width:none!important;
    overflow:visible!important;
  }
  .gateway-section .brand .mk{
    width:35px!important;
    height:35px!important;
    flex:0 0 35px!important;
    transform:none!important;
  }
  .gateway-section .brand > span:last-child{
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:flex-start!important;
    position:relative!important;
    left:calc(-7px + 1mm)!important;
    top:auto!important;
    transform:translateY(4px)!important;
    width:calc(100% - 35px - 7px)!important;
    min-width:0!important;
    min-height:0!important;
    height:auto!important;
    overflow:visible!important;
    text-align:center!important;
  }
  .gateway-section .brand b{
    display:block!important;
    position:relative!important;
    top:0!important;
    width:100%!important;
    margin:0!important;
    font-size:8.7px!important;
    line-height:1!important;
    text-align:center!important;
    white-space:nowrap!important;
    overflow:visible!important;
    text-overflow:clip!important;
  }
  .gateway-section .brand small{
    display:block!important;
    position:relative!important;
    top:0!important;
    width:100%!important;
    margin-top:2px!important;
    font-size:6.35px!important;
    line-height:1!important;
    letter-spacing:.18em!important;
    text-align:center!important;
    white-space:nowrap!important;
    overflow:visible!important;
  }
  .gateway-section .brand small .context-sep,
  .gateway-section .brand small .context-title{display:none!important}
  .gateway-section .brand small .zone-word{
    display:block!important;
    width:100%!important;
    text-align:center!important;
    white-space:nowrap!important;
  }
  .gateway-switch-shell{
    grid-column:2!important;
    position:relative!important;
    left:auto!important;
    right:auto!important;
    top:-6px!important;
    transform:none!important;
    justify-self:stretch!important;
    width:calc(100% - 12px)!important;
    min-width:0!important;
    max-width:none!important;
    height:44px!important;
    margin:0 0 0 12px!important;
    padding:2px!important;
  }
  .gateway-switch{
    width:100%!important;
    min-width:0!important;
    height:36px!important;
    padding:0 3px!important;
    font-size:8.4px!important;
    letter-spacing:.18em!important;
    text-indent:.18em!important;
    text-align:center!important;
  }
  .gateway-section .project-direct{
    grid-column:3!important;
    position:relative!important;
    z-index:7!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:46px!important;
    min-width:46px!important;
    max-width:46px!important;
    height:38px!important;
    margin:0!important;
    padding:0 0 0 7px!important;
    font-size:7.6px!important;
    letter-spacing:.11em!important;
    white-space:nowrap!important;
    overflow:visible!important;
  }
  .gateway-section .site-creed{
    display:block!important;
    visibility:visible!important;
    opacity:1!important;
    left:calc(50% + 42px)!important;
    right:auto!important;
    bottom:1px!important;
    transform:translateX(-50%)!important;
    width:calc(100vw - 204px)!important;
    max-width:calc(100vw - 204px)!important;
    min-width:0!important;
    overflow:visible!important;
    white-space:nowrap!important;
    text-align:center!important;
    font-size:9.2px!important;
    letter-spacing:.015em!important;
    text-indent:.015em!important;
    background:linear-gradient(90deg,#ff4d57 0%,#ff6d74 18%,#d086d7 48%,#7094ff 78%,#18a0ff 100%)!important;
    -webkit-background-clip:text!important;
    background-clip:text!important;
    color:transparent!important;
  }
}
@media(max-width:370px){
  .gateway-section .bar{
    grid-template-columns:122px minmax(0,1fr) 42px!important;
    padding:0 6px!important;
    column-gap:4px!important;
  }
  .gateway-section .brand .mk{width:34px!important;height:34px!important;flex:0 0 34px!important}
  .gateway-section .brand > span:last-child{width:calc(100% - 34px - 7px)!important;transform:translateY(4px)!important}
  .gateway-section .brand b{font-size:8.55px!important}
  .gateway-section .brand small{font-size:6.05px!important;letter-spacing:.16em!important}
  .gateway-switch-shell{width:calc(100% - 10px)!important;margin:0 0 0 10px!important}
  .gateway-switch{font-size:7.9px!important;letter-spacing:.15em!important;text-indent:.15em!important}
  .gateway-section .project-direct{
    width:42px!important;min-width:42px!important;max-width:42px!important;
    padding-left:6px!important;font-size:7px!important;letter-spacing:.085em!important;
  }
  .gateway-section .site-creed{
    left:calc(50% + 40px)!important;
    width:calc(100vw - 194px)!important;
    max-width:calc(100vw - 194px)!important;
    font-size:8.75px!important;
    letter-spacing:.005em!important;
    text-indent:.005em!important;
  }
}

/* The final axiom is typography, not a card. */
.gateway-strengthened-page .gateway-final-axiom{
  position:relative!important;
  max-width:31ch!important;
  margin:1.45em auto .15em!important;
  padding:28px 8px 0!important;
  border:0!important;
  border-radius:0!important;
  background:none!important;
  box-shadow:none!important;
  color:#e9d7a5!important;
  font-family:var(--serif)!important;
  font-size:clamp(22px,2.8vw,32px)!important;
  font-weight:400!important;
  line-height:1.46!important;
  letter-spacing:0!important;
  text-wrap:balance!important;
}
.gateway-strengthened-page .gateway-final-axiom::before{
  content:"";
  position:absolute;
  top:0;
  left:50%;
  width:74px;
  height:1px;
  transform:translateX(-50%);
  background:linear-gradient(90deg,transparent,rgba(222,190,101,.72),transparent);
}
.gateway-strengthened-page .gateway-final-axiom-close{
  display:block;
  margin-top:.48em;
  color:#f1d77f;
  font-family:var(--title);
  font-size:.86em;
  font-weight:500;
  line-height:1.2;
  letter-spacing:.045em;
}
@media(max-width:700px){
  .gateway-strengthened-page .gateway-final-axiom{
    max-width:26ch!important;
    margin-top:1.15em!important;
    padding:22px 4px 0!important;
    font-size:clamp(20px,5.9vw,26px)!important;
    line-height:1.48!important;
  }
  .gateway-strengthened-page .gateway-final-axiom::before{width:60px}
  .gateway-strengthened-page .gateway-final-axiom-close{margin-top:.42em;font-size:.9em}
}

/* Guarantee that the X/Y artwork can never reveal a rectangular image plane. */
.photo.photo-manhood{
  background:transparent!important;
  -webkit-mask:none!important;
  mask:none!important;
  overflow:visible!important;
  isolation:isolate!important;
}
.photo.photo-manhood picture,
.photo.photo-manhood img{
  background:transparent!important;
  -webkit-mask:none!important;
  mask:none!important;
}
.photo.photo-manhood img{
  clip-path:circle(45% at 50% 50%)!important;
}


/* v116 — Women’s Love and Architecture enter before the former Gateway opener. */
@media(min-width:1000px){
  .gateway-panel .chapters{grid-template-columns:repeat(4,minmax(0,1fr))!important;max-width:1180px!important}
}
@media(min-width:701px) and (max-width:999px){
  .gateway-panel .chapters{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
.gateway-index-opening{border-color:rgba(226,196,111,.48)!important;background:linear-gradient(180deg,rgba(201,162,75,.07),rgba(11,10,8,.50))!important}
.gateway-index-opening::before{left:9%!important;right:9%!important;opacity:1!important}
.womens-love-page .womens-love-hero .word{max-width:11ch!important}
.architecture-page .architecture-hero .word{max-width:12ch!important}
.womens-love-page .womens-love-not-field{grid-template-columns:repeat(3,minmax(0,1fr));max-width:820px!important}
.womens-love-page .womens-love-not-field .gateway-word-item{font-family:var(--serif)!important;font-size:clamp(16px,1.65vw,21px)!important;line-height:1.55!important}
.womens-love-page .womens-love-listen{margin-top:1.65em!important}
.womens-love-page .womens-love-fear-field{max-width:560px!important}
.womens-love-question-stack{margin:2.2em auto 0;max-width:760px}
.womens-love-question-stack .gateway-question{margin:1.1em auto!important;padding-bottom:1.1em;border-bottom:1px solid rgba(205,174,91,.16)!important}
.womens-love-question-stack .gateway-question:last-child{border-bottom:0!important}
.womens-love-page .womens-love-core{font-size:clamp(24px,3.4vw,38px)!important}
.womens-love-page .womens-love-how-much{margin-top:2.1em!important}
.womens-love-close{background:radial-gradient(60% 100% at 50% 0%,rgba(201,162,75,.08),transparent 72%)!important}
.womens-love-close .womens-love-ideology{color:rgba(238,231,217,.68)!important}
.womens-love-close .womens-love-reality{color:#ead28d!important;font-size:clamp(32px,5vw,58px)!important;line-height:1.15!important}
.architecture-page .architecture-reading-content{max-width:800px!important}
.architecture-contrast-grid{display:grid;gap:13px;width:min(100%,780px);margin:34px auto}
.architecture-contrast-pair{display:grid;grid-template-columns:1fr 1fr;border:1px solid rgba(205,174,91,.20);border-radius:6px;overflow:hidden;background:rgba(255,255,255,.012)}
.architecture-contrast-pair p{max-width:none!important;margin:0!important;padding:22px 24px!important;font-size:clamp(17px,2vw,23px)!important;line-height:1.5!important}
.architecture-contrast-first{color:rgba(231,227,219,.67)!important;background:rgba(255,255,255,.01)}
.architecture-contrast-second{color:#ead69a!important;background:rgba(201,162,75,.045)}
.architecture-balance-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;width:min(100%,760px);margin:32px auto}
.architecture-balance-side{padding:28px 26px;border:1px solid rgba(205,174,91,.22);border-radius:6px;background:rgba(255,255,255,.012)}
.architecture-balance-side span{display:block;margin-bottom:20px;color:#ead28d;font-family:var(--title);font-size:clamp(19px,2.5vw,28px);letter-spacing:.04em}
.architecture-balance-side p{max-width:none!important;margin:.55em 0!important;font-family:var(--serif)!important;font-size:clamp(18px,2vw,23px)!important;text-align:left!important}
.architecture-balance-him{border-color:rgba(196,66,47,.20);background:rgba(196,66,47,.025)}
.architecture-balance-him span{color:#d9c6bd}
.architecture-page .architecture-judgment-field .gateway-word-item,
.architecture-page .architecture-gone-field .gateway-word-item{color:#dbcfc8!important}
.architecture-page .architecture-for-woman{font-size:clamp(26px,3.8vw,42px)!important}
.architecture-close{background:radial-gradient(60% 100% at 50% 0%,rgba(201,162,75,.075),transparent 72%)!important}
.architecture-close .architecture-close-first{color:rgba(238,231,219,.72)!important}
.architecture-close .architecture-close-final{max-width:24ch!important;color:#ead28d!important;font-size:clamp(30px,4.7vw,54px)!important;line-height:1.18!important}
@media(max-width:700px){
  .womens-love-page .womens-love-not-field{grid-template-columns:1fr!important}
  .womens-love-question-stack{margin-top:1.65em}
  .womens-love-question-stack .gateway-question{margin:.8em auto!important;padding-bottom:.8em}
  .architecture-contrast-pair{grid-template-columns:1fr;border-radius:5px}
  .architecture-contrast-pair p{padding:19px 18px!important;font-size:17px!important;text-align:center!important}
  .architecture-balance-grid{grid-template-columns:1fr}
  .architecture-balance-side{padding:22px 20px}
  .architecture-balance-side p{text-align:center!important}
}


/* v117 — Women’s Love: love as the moral name of male obligation. */
.womens-love-page .womens-love-act-name .gateway-reading-content{
  max-width:820px!important;
}
.womens-love-page .womens-love-name-lead{
  max-width:25ch!important;
}
.womens-love-page .womens-love-obligation-field{
  grid-template-columns:repeat(3,minmax(0,1fr));
  max-width:820px!important;
  margin-top:34px!important;
}
.womens-love-page .womens-love-obligation-field .gateway-word-item{
  font-family:var(--serif)!important;
  font-size:clamp(16px,1.65vw,21px)!important;
  line-height:1.45!important;
}
.womens-love-page .womens-love-subordination{
  max-width:34ch!important;
  margin-top:2.25em!important;
  margin-bottom:2.1em!important;
}
.womens-love-page .womens-love-resistance{
  max-width:34ch!important;
  margin-top:0!important;
}
.womens-love-page .womens-love-moral-field{
  max-width:720px!important;
  margin-top:30px!important;
  border-bottom-color:rgba(205,174,91,.30)!important;
}
.womens-love-page .womens-love-moral-field .gateway-word-item{
  color:#ead9a5!important;
  font-size:clamp(16px,1.75vw,21px)!important;
}
@media(max-width:700px){
  .womens-love-page .womens-love-obligation-field{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:10px 12px!important;
    margin-top:26px!important;
  }
  .womens-love-page .womens-love-obligation-field .gateway-word-item{
    font-size:clamp(15px,4.2vw,18px)!important;
  }
  .womens-love-page .womens-love-subordination{
    margin-top:1.75em!important;
    margin-bottom:1.65em!important;
  }
  .womens-love-page .womens-love-moral-field{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    margin-top:24px!important;
  }
}
@media(max-width:390px){
  .womens-love-page .womens-love-obligation-field,
  .womens-love-page .womens-love-moral-field{
    grid-template-columns:1fr!important;
  }
}


/* v118.3 — Gateway creed uses the exact final Basic / Advanced mobile values.
   No Gateway-specific scaling: this is a direct copy of the working rule. */
@media(max-width:700px){
  .gateway-section .site-creed{
    left:calc(50% + 42px)!important;
    width:calc(100% - 2px)!important;
    max-width:calc(100% - 2px)!important;
    font-size:13.9px!important;
    letter-spacing:.012em!important;
    text-indent:.012em!important;
    line-height:1!important;
  }
}
@media(max-width:370px){
  .gateway-section .site-creed{
    left:calc(50% + 40px)!important;
    width:calc(100% - 2px)!important;
    max-width:calc(100% - 2px)!important;
    font-size:13.2px!important;
    letter-spacing:.01em!important;
    text-indent:.01em!important;
  }
}


/* v121 — Men’s Love opens the nine-entry Gateway. */
@media(min-width:1000px){
  .gateway-panel .chapters{grid-template-columns:repeat(3,minmax(0,1fr))!important;max-width:1080px!important}
}
.gateway-index-card{
  display:grid!important;
  grid-template-rows:32px 58px 46px!important;
  row-gap:8px!important;
  align-content:center!important;
  justify-items:center!important;
}
.gateway-index-card .gateway-index-no,
.gateway-index-card strong,
.gateway-index-card small{margin:0!important;align-self:center!important}
.gateway-index-card .gateway-index-no{height:32px!important;line-height:32px!important}
.gateway-index-card strong{display:flex!important;min-height:58px!important;align-items:center!important;justify-content:center!important}
.gateway-index-card small{display:flex!important;min-height:46px!important;align-items:flex-start!important;justify-content:center!important}
.gateway-index-final{grid-column:1/-1!important;width:calc(50% - 9px)!important;justify-self:center!important}
.mens-love-page .mens-love-hero .word{max-width:11ch!important}
.mens-love-page .mens-love-gift-field{max-width:600px!important}
.mens-love-page .mens-love-central-question{max-width:31ch!important;font-size:clamp(24px,3.3vw,39px)!important;line-height:1.42!important}
.mens-love-page .mens-love-demand-field{max-width:820px!important}
.mens-love-page .mens-love-demand-field .gateway-word-item{color:#ead28d!important}
.mens-love-page .mens-love-stop-field{max-width:540px!important}
.mens-love-page .mens-love-stop-field .gateway-word-item{font-size:clamp(23px,3vw,34px)!important}
.mens-love-page .mens-love-cost-field{max-width:850px!important}
.mens-love-page .mens-love-remember{margin-top:2em!important}
.mens-love-page .mens-love-memory-field{max-width:900px!important}
.mens-love-choice{display:grid;grid-template-columns:1fr 1fr;gap:14px;width:min(100%,600px);margin:34px auto 0}
.mens-love-choice p{max-width:none!important;margin:0!important;padding:26px 20px!important;border:1px solid rgba(205,174,91,.20);border-radius:5px;background:rgba(255,255,255,.012);font-family:var(--title)!important;font-size:clamp(22px,3vw,34px)!important;letter-spacing:.04em!important;text-align:center!important}
.mens-love-choice p:first-child{color:rgba(236,229,216,.62)!important}
.mens-love-choice p:last-child{border-color:rgba(215,181,88,.42);color:#ead28d!important;background:rgba(201,162,75,.045)}
.mens-love-page .mens-love-price-field{max-width:940px!important}
.mens-love-page .mens-love-long-question{max-width:34ch!important}
.mens-love-page .mens-love-not-woman{font-size:clamp(27px,4vw,46px)!important}
.mens-love-page .mens-love-in-man{margin-top:1.6em!important;font-size:clamp(29px,4.4vw,52px)!important}
.mens-love-page .mens-love-boundless{margin-top:1.8em!important;font-size:clamp(30px,4.7vw,54px)!important}
.mens-love-page .mens-love-definition{font-size:clamp(28px,4.1vw,48px)!important}
.mens-love-close{padding-left:24px!important;padding-right:24px!important;background:radial-gradient(60% 100% at 50% 0%,rgba(201,162,75,.085),transparent 72%)!important}
.mens-love-close .gateway-close-line{max-width:31ch!important;color:#ead28d!important;font-size:clamp(24px,3.4vw,40px)!important;line-height:1.38!important}
@media(max-width:700px){
  .gateway-index-card{grid-template-rows:26px 48px 42px!important;row-gap:6px!important;min-height:170px!important}
  .gateway-index-card .gateway-index-no{height:26px!important;line-height:26px!important}
  .gateway-index-card strong{min-height:48px!important}
  .gateway-index-card small{min-height:42px!important}
  .gateway-index-final{grid-column:auto!important;width:100%!important}
  .mens-love-choice{grid-template-columns:1fr;gap:10px;margin-top:26px}
  .mens-love-choice p{padding:20px 16px!important}
  .mens-love-page .mens-love-central-question{font-size:clamp(22px,6.8vw,29px)!important}
  .mens-love-close .gateway-close-line{max-width:25ch!important;font-size:clamp(22px,6.3vw,30px)!important}
}

/* v121 precision — five-part fields remain one deliberate row on desktop. */
@media(min-width:701px){
  .mens-love-page .mens-love-cost-field,
  .mens-love-page .mens-love-memory-field{grid-template-columns:repeat(5,minmax(0,1fr))!important}
}

/* v121a mobile polish — last item in five-part Mens Love fields centers on its own final row. */
@media(max-width:700px){
  .mens-love-page .mens-love-cost-field .mens-love-center-tail,
  .mens-love-page .mens-love-memory-field .mens-love-center-tail{
    grid-column:1 / -1!important;
    justify-self:center!important;
    width:max-content!important;
    max-width:100%!important;
    text-align:center!important;
  }
}


/* v122 — Death: Gateway chapter three. Uses the existing Gateway reading system. */
.death-page .death-hero .word{max-width:8ch!important}
.death-page .death-accusation-field{max-width:860px!important}
.death-page .death-biology-accusation{font-size:clamp(28px,4.2vw,50px)!important}
.death-stat-pair{display:grid;grid-template-columns:1fr 1fr;gap:14px;width:min(100%,820px);margin:34px auto}
.death-stat{display:flex;flex-direction:column;justify-content:center;min-height:150px;padding:28px;border:1px solid rgba(205,174,91,.24);background:rgba(201,162,75,.025);text-align:center}
.death-stat strong{color:#ead28d;font-family:var(--serif);font-size:clamp(31px,5vw,58px);font-weight:400;line-height:1.05}
.death-stat span{margin-top:12px;color:#d7d1c5;font-family:var(--title);font-size:clamp(15px,1.7vw,20px);font-weight:500;line-height:1.45}
.death-page .death-nature-field{max-width:920px!important}
.death-page .death-nature-created{font-size:clamp(30px,4.6vw,54px)!important}
.death-page .death-duty{font-size:clamp(25px,3.7vw,43px)!important}
.death-page .death-provision-field,.death-page .death-service-field{max-width:900px!important}
.death-page .death-function-field{max-width:760px!important}
.death-page .death-not-killing{font-size:clamp(29px,4.5vw,52px)!important}
.death-industry-lines{display:grid;gap:14px;width:min(100%,830px);margin:0 auto 34px}
.death-industry-lines p{margin:0;padding:18px 22px;border-left:1px solid rgba(205,174,91,.36);color:#e9e2d5;font-family:var(--serif);font-size:clamp(20px,2.8vw,31px);line-height:1.45}
.death-page .death-loss-field{max-width:850px!important}
.death-page .death-where-goodness{font-size:clamp(31px,4.8vw,56px)!important}
.death-question-stack{display:grid;gap:0;width:min(100%,860px);margin:30px auto 0;border-top:1px solid rgba(205,174,91,.2)}
.death-question-stack .gateway-question{max-width:none!important;margin:0!important;padding:20px 12px!important;border-bottom:1px solid rgba(205,174,91,.16)!important}
.death-question-stack--large{width:min(100%,720px);margin-bottom:30px}
.death-question-stack--large .gateway-question{font-size:clamp(24px,3.5vw,40px)!important;color:#ead28d!important}
.death-chain{display:grid;grid-template-columns:1.15fr .85fr;gap:28px;width:min(100%,920px);margin:0 auto}
.death-chain>div{padding:30px;border:1px solid rgba(205,174,91,.18);background:rgba(255,255,255,.012)}
.death-chain p{margin:0 0 15px;color:#dcd6ca;font-family:var(--title);font-size:clamp(17px,2vw,23px);font-weight:500;line-height:1.45}
.death-chain p:last-child{margin-bottom:0}
.death-chain .death-chain-result{display:flex;flex-direction:column;justify-content:center;border-color:rgba(215,181,88,.34);background:rgba(201,162,75,.035)}
.death-chain .death-chain-love{margin-top:18px!important;color:#ead28d!important;font-family:var(--serif)!important;font-size:clamp(26px,3.7vw,42px)!important;font-weight:400!important}
.death-role-pairs{display:grid;gap:18px;width:min(100%,940px);margin:36px auto 0}
.death-role-pairs>div{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid rgba(205,174,91,.18)}
.death-role-pairs p{display:flex;align-items:center;min-height:125px;margin:0;padding:25px;color:#ded8cd;font-family:var(--serif);font-size:clamp(18px,2.25vw,27px);line-height:1.48;text-align:center}
.death-role-pairs p+ p{border-left:1px solid rgba(205,174,91,.18);color:#ead28d;background:rgba(201,162,75,.025)}
.death-page .death-core-questions{max-width:720px!important}
.death-page .death-core-questions .gateway-word-item{color:#ead28d!important;font-family:var(--serif)!important;font-size:clamp(22px,3vw,35px)!important}
.death-page .death-reversal-question{max-width:30ch!important;font-size:clamp(27px,4vw,48px)!important}
.death-reversal-list,.death-even-when{display:grid;gap:0;width:min(100%,900px);margin:34px auto;border-top:1px solid rgba(205,174,91,.22)}
.death-reversal-list p,.death-even-when p{margin:0;padding:19px 18px;border-bottom:1px solid rgba(205,174,91,.16);color:#ddd7cb;font-family:var(--title);font-size:clamp(16px,1.9vw,22px);font-weight:500;line-height:1.5;text-align:center}
.death-page .death-made-field{max-width:920px!important}
.death-close{padding-left:24px!important;padding-right:24px!important;background:radial-gradient(60% 100% at 50% 0%,rgba(201,162,75,.085),transparent 72%)!important}
.death-close .gateway-close-line{max-width:30ch!important;font-size:clamp(26px,3.8vw,45px)!important}
.death-close .death-close-cultural{color:#ead28d!important}
@media(max-width:700px){
  .death-stat-pair{grid-template-columns:1fr;gap:10px;margin:26px auto}
  .death-stat{min-height:125px;padding:22px 18px}
  .death-page .death-accusation-field{grid-template-columns:1fr!important}
  .death-page .death-provision-field .death-center-tail,
  .death-page .death-service-field .death-center-tail{grid-column:1/-1!important;justify-self:center!important;width:max-content!important;max-width:100%!important}
  .death-industry-lines p{padding:15px 16px}
  .death-chain{grid-template-columns:1fr;gap:12px}
  .death-chain>div{padding:23px 18px}
  .death-role-pairs>div{grid-template-columns:1fr}
  .death-role-pairs p{min-height:0;padding:20px 16px}
  .death-role-pairs p+p{border-left:0;border-top:1px solid rgba(205,174,91,.18)}
  .death-question-stack .gateway-question{padding:17px 6px!important}
  .death-reversal-list p,.death-even-when p{padding:17px 7px}
}


/* v138 new Basic: numbered source lists */
.wa-basic-numbered{max-width:760px;margin:1.35rem auto 0;padding:0 0 0 2.15rem;text-align:left;font-family:"Spectral",Georgia,serif;font-size:clamp(17px,2.15vw,20px);line-height:1.72;color:var(--ink-soft)}
.wa-basic-numbered li{margin:.92rem 0;padding-left:.55rem}
.wa-basic-numbered li::marker{color:var(--gold);font-family:"Outfit",Arial,sans-serif;font-weight:600}
.basic-foundation-page .gateway-reading-section + .gateway-reading-section{padding-top:0}
.basic-foundation-page .gateway-reading-content>p.precision-block{max-width:760px;margin-left:auto;margin-right:auto}
@media (max-width:680px){.wa-basic-numbered{padding-left:1.65rem;font-size:clamp(16px,4.55vw,19px)}}


/* === v145 BASIC INDIVIDUAL EDITORIAL CONSTRUCTIONS === */
.basic-individual-design .basic-custom-section{isolation:isolate}
.basic-individual-design .basic-custom-section .editorial-content{position:relative}
.basic-individual-design .basic-custom-section[data-editorial-label]::before{letter-spacing:.16em}
.basic-individual-design .editorial-rule{opacity:.28!important}

/* I — For a Woman: standard editorial axis; no hand-placed prose columns */
.basic-design-for-a-woman .faw-axis{max-width:34ch!important}
.basic-design-for-a-woman .faw-attention{max-width:36ch!important;margin-top:2.15em!important;margin-bottom:2.15em!important}
.basic-design-for-a-woman .faw-father{max-width:33ch!important}
.basic-design-for-a-woman .faw-cultural{margin-top:2em!important}
.basic-design-for-a-woman .faw-center-list{max-width:30ch!important;margin-top:2em!important;margin-bottom:2.4em!important}
.basic-design-for-a-woman .faw-manhood{max-width:25ch!important}

/* II — Harm: pressure and causal chain */
.basic-design-harm .harm-freedom{max-width:29ch!important}
.basic-design-harm .harm-chain-image{max-width:46ch!important;padding-left:22px!important;border-left:1px solid var(--editorial-line)}
.basic-design-harm .harm-pressure{width:min(100%,520px);margin:26px auto 0;padding:24px 18px;border-top:1px solid var(--editorial-line);border-bottom:1px solid var(--editorial-line);background:radial-gradient(circle at 50% 50%,rgba(var(--editorial-accent-rgb),.035),transparent 72%)}
.basic-design-harm .harm-pressure p{margin:0!important;max-width:none!important;text-align:center!important}
.basic-design-harm .harm-direction{max-width:32ch!important}
.basic-design-harm .harm-causal-chain{max-width:920px!important;font-size:clamp(20px,2.75vw,34px)!important;letter-spacing:.01em!important;line-height:1.55!important}

/* III — Nature: point-zero scene and question/answer */
.basic-design-nature .nature-zero::before{color:var(--editorial-warm)!important}
.basic-design-nature .nature-zero-head{display:flex;align-items:baseline;justify-content:center;gap:22px;flex-wrap:wrap;margin-bottom:2.2em}
.basic-design-nature .nature-zero-head p{margin:0!important}
.basic-design-nature .nature-zero-head .editorial-beat{font-size:clamp(16px,1.6vw,20px)!important;opacity:.7}
.basic-design-nature .nature-scene{max-width:34ch!important;padding:28px 30px!important;border:1px solid rgba(var(--editorial-accent-rgb),.15);background:rgba(var(--editorial-accent-rgb),.018)}
.basic-design-nature .nature-motion{max-width:690px;margin:auto}
.basic-design-nature .nature-motion p:nth-child(2){margin-top:.65em!important;color:rgba(236,240,243,.66)!important}
.basic-design-nature .nature-qa{max-width:760px;margin:auto}
.basic-design-nature .nature-answer{width:min(100%,340px);margin:22px auto 32px!important;text-align:center!important}
.basic-design-nature .nature-second-question{margin-top:1.8em!important}
.basic-design-nature .nature-memory{max-width:38ch!important;padding:30px 0!important}

/* IV — Judaism: ethical premise and visible contract */
.basic-design-judaism .judaism-opening{max-width:24ch!important;color:rgba(239,242,244,.92)!important}
.basic-design-judaism .judaism-ethics .editorial-emphasis{max-width:40ch!important;margin-top:2em!important}
.basic-design-judaism .judaism-visible{padding:22px 26px!important;border-left:2px solid var(--editorial-accent);background:linear-gradient(90deg,rgba(var(--editorial-accent-rgb),.045),transparent)}
.basic-design-judaism .judaism-contract{max-width:28ch!important;margin-top:2em!important}
.basic-design-judaism .judaism-comparison{display:grid;grid-template-columns:1.35fr .65fr;gap:30px;align-items:center}
.basic-design-judaism .judaism-comparison p{margin:0!important;max-width:none!important}

/* V — Obligations: legal architecture */
.basic-design-obligations .obligation-law{position:relative;max-width:820px;margin:auto;padding:34px 30px 26px;border:1px solid rgba(var(--editorial-accent-rgb),.16);background:linear-gradient(180deg,rgba(var(--editorial-accent-rgb),.028),transparent)}
.basic-design-obligations .obligation-kicker{display:block;margin-bottom:18px;font:600 10px/1 var(--title);letter-spacing:.32em;color:var(--editorial-accent)}
.basic-design-obligations .obligation-law p{margin:0!important;max-width:none!important}
.basic-design-obligations .obligation-rights{display:grid;grid-template-columns:.72fr 1.28fr;gap:1px;max-width:900px;margin:auto;background:var(--editorial-line)}
.basic-design-obligations .obligation-rights p{margin:0!important;max-width:none!important;padding:28px!important;background:#090d11}
.basic-design-obligations .obligations-turn{text-align:center!important;margin-bottom:1.45em!important}
.basic-design-obligations .obligations-system{font-size:clamp(30px,4.5vw,56px)!important;max-width:16ch!important;margin-top:1.2em!important}

/* VI — For God: source -> question -> expansion */
.basic-design-for-god .forgod-quote{margin:0 auto;max-width:820px;padding:30px 34px;border-left:2px solid var(--editorial-warm);background:rgba(216,183,96,.025)}
.basic-design-for-god .forgod-quote p{margin:0!important;max-width:none!important}
.basic-design-for-god .forgod-question{max-width:31ch!important;font-size:clamp(27px,3.8vw,46px)!important}
.basic-design-for-god .forgod-frame{display:grid;grid-template-columns:.35fr .65fr;gap:24px;align-items:start;max-width:820px;margin:auto}
.basic-design-for-god .forgod-frame p{margin:0!important;max-width:none!important}
.basic-design-for-god .forgod-expansion{margin-top:44px;text-align:center}
.basic-design-for-god .forgod-expansion .editorial-emphasis{margin-top:1.25em!important}

/* VII — Japan: visible/hidden and Omote/Ura */
.basic-design-japan .japan-visible-hidden{display:grid;grid-template-columns:.75fr 1.25fr;gap:1px;max-width:900px;margin:auto;background:var(--editorial-line)}
.basic-design-japan .japan-visible-hidden p{margin:0!important;max-width:none!important;padding:30px!important;background:#090d11}
.basic-design-japan .japan-omote-ura{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:760px;margin:auto}
.basic-design-japan .japan-omote-ura>div{padding:26px;border:1px solid rgba(var(--editorial-accent-rgb),.13)}
.basic-design-japan .japan-omote-ura span,.basic-design-japan .japan-surface-under::before{display:block;margin-bottom:14px;font:600 10px/1 var(--title);letter-spacing:.28em;color:var(--editorial-accent)}
.basic-design-japan .japan-omote-ura p{margin:0!important;max-width:none!important}
.basic-design-japan .japan-principle{margin-top:28px!important;text-align:center!important}
.basic-design-japan .japan-surface-under{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:center}
.basic-design-japan .japan-surface-under p{margin:0!important;max-width:none!important}
.basic-design-japan .japan-surface-under .under{padding-left:28px;border-left:1px solid var(--editorial-line)}
.basic-design-japan .japan-methods{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:30px}
.basic-design-japan .japan-methods p{margin:0!important;max-width:none!important;padding:18px;border-top:1px solid var(--editorial-line)}
.basic-design-japan .japan-knowing{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:760px;margin:auto}
.basic-design-japan .japan-knowing p{margin:0!important;max-width:none!important;padding:22px;border:1px solid rgba(var(--editorial-accent-rgb),.12)}
.basic-design-japan .japan-cost{margin-top:38px!important}
.basic-design-japan .japan-final-question{margin-top:2em!important;max-width:26ch!important}

/* VIII — China: facade -> underneath -> mask -> effect */
.basic-design-china .china-facade{font-size:clamp(34px,5.4vw,64px)!important;max-width:18ch!important}
.basic-design-china .china-obediences{max-width:28ch!important;padding:18px 22px!important;border-left:1px solid var(--editorial-line)}
.basic-design-china .china-surface-under{margin-top:34px;padding:26px 28px;border-top:1px solid var(--editorial-line);border-bottom:1px solid var(--editorial-line)}
.basic-design-china .china-surface-under p{margin:0!important;max-width:none!important}
.basic-design-china .china-compare{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:820px;margin:auto}
.basic-design-china .china-compare>div{padding:26px;border:1px solid rgba(var(--editorial-accent-rgb),.12)}
.basic-design-china .china-compare span{display:block;margin-bottom:14px;font:600 10px/1 var(--title);letter-spacing:.28em;color:var(--editorial-accent)}
.basic-design-china .china-compare p{margin:0!important;max-width:none!important}
.basic-design-china .china-effect{font-size:clamp(26px,3.7vw,44px)!important;margin-top:1.4em!important}

/* IX — Others: implementations across civilizations */
.basic-design-others .others-three{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;max-width:760px;margin:30px auto 34px}
.basic-design-others .others-three>div{height:6px;background:linear-gradient(90deg,var(--editorial-accent),rgba(var(--editorial-accent-rgb),.12));position:relative}
.basic-design-others .others-three>div::after{content:attr(data-method);position:absolute;top:13px;left:0;font:600 9px/1 var(--title);letter-spacing:.2em;color:rgba(230,234,238,.45)}
.basic-design-others .others-world-field{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;max-width:720px;margin:auto}
.basic-design-others .others-place{margin:0!important;max-width:none!important;padding:18px 14px!important;text-align:center!important;border:1px solid rgba(var(--editorial-accent-rgb),.11);font-size:clamp(17px,1.7vw,21px)!important;color:rgba(236,239,242,.72)!important}
.basic-design-others .others-pattern{max-width:33ch!important;margin-top:1.7em!important;line-height:1.7!important}
.basic-design-others .others-conclusion{font-size:clamp(34px,5vw,58px)!important;max-width:18ch!important}

/* X — Wars: indictment -> one goal -> kinship */
.basic-design-wars .wars-opening{max-width:32ch!important;font-size:clamp(28px,4.2vw,50px)!important}
.basic-design-wars .wars-indictment{margin-top:1.7em!important;max-width:35ch!important}
.basic-design-wars .wars-goal{text-align:center!important;font-size:clamp(30px,4.5vw,56px)!important;margin:1.4em auto!important}
.basic-design-wars .wars-kinship{max-width:740px;margin:auto;padding:28px 30px;border:1px solid rgba(var(--editorial-accent-rgb),.13)}
.basic-design-wars .wars-kinship p{margin-left:auto!important;margin-right:auto!important}
.basic-design-wars .wars-strangers{margin-top:2.2em!important}
.basic-design-wars .wars-hate{font-size:clamp(30px,4.3vw,52px)!important;max-width:22ch!important}

/* XI — Questions: five isolated prompts */
.basic-design-questions .questions-opening{text-align:center!important;max-width:none!important;margin-bottom:36px!important}
.basic-design-questions .questions-card{display:grid;grid-template-columns:54px minmax(0,1fr);gap:22px;align-items:start;max-width:900px;margin:0 auto;padding:30px 0;border-top:1px solid var(--editorial-line)}
.basic-design-questions .questions-card:last-child{border-bottom:1px solid var(--editorial-line)}
.basic-design-questions .questions-card p{margin:0!important;max-width:none!important;text-align:left!important}
.basic-design-questions .questions-no{display:grid;place-items:center;width:42px;height:42px;border:1px solid rgba(var(--editorial-accent-rgb),.28);font:600 11px/1 var(--title);letter-spacing:.12em;color:var(--editorial-accent)}
.basic-design-questions .questions-synthesis{max-width:42ch!important;line-height:1.65!important}

/* XII — Value: biological opposite -> distance -> internal value */
.basic-design-value .value-biological-pair{max-width:760px;margin:30px auto 0;padding:28px;border-top:1px solid var(--editorial-line);border-bottom:1px solid var(--editorial-line)}
.basic-design-value .value-biological-pair span{display:block;margin-bottom:14px;font:600 10px/1 var(--title);letter-spacing:.26em;color:var(--editorial-accent)}
.basic-design-value .value-biological-pair p{margin:0!important;max-width:none!important}
.basic-design-value .value-evolution{font-size:clamp(27px,4vw,48px)!important;max-width:29ch!important}
.basic-design-value .value-distance{display:grid;grid-template-columns:auto minmax(120px,1fr) auto;align-items:center;gap:18px;max-width:680px;margin:0 auto 36px}
.basic-design-value .value-pole span{font:600 10px/1 var(--title);letter-spacing:.22em;color:var(--editorial-accent)}
.basic-design-value .value-line{height:1px;background:linear-gradient(90deg,var(--editorial-accent),rgba(var(--editorial-accent-rgb),.12))}
.basic-design-value .value-taken{font-size:clamp(27px,3.8vw,45px)!important}
.basic-design-value .value-core{font-size:clamp(34px,5vw,60px)!important;max-width:24ch!important}
.basic-design-value .value-earth{max-width:52ch!important;color:rgba(236,231,220,.68)!important}

/* XIII — Purpose: manifesto -> symmetry -> principle */
.basic-design-purpose .purpose-stair{max-width:700px;margin:34px auto 0;padding-left:26px;border-left:1px solid var(--editorial-line)}
.basic-design-purpose .purpose-stair p{margin-left:0!important;max-width:none!important}
.basic-design-purpose .purpose-stair p:nth-child(2){margin-left:8%!important}
.basic-design-purpose .purpose-stair p:nth-child(3){margin-left:16%!important}
.basic-design-purpose .purpose-sex-pair{display:grid;grid-template-columns:.72fr 1.28fr;gap:34px;align-items:center}
.basic-design-purpose .purpose-sex-pair p{margin:0 0 1em!important;max-width:none!important}
.basic-design-purpose .purpose-sex-pair>div:first-child{padding-right:26px;border-right:1px solid var(--editorial-line)}
.basic-design-purpose .purpose-respect{font-size:clamp(30px,4.5vw,54px)!important;max-width:25ch!important}

/* XIV — Actions: minimal path */
.basic-design-actions .actions-path{display:grid;grid-template-columns:1fr auto 1fr;gap:24px;align-items:center;max-width:900px;margin:auto}
.basic-design-actions .actions-path>div:not(.actions-arrow){padding:28px;border:1px solid rgba(var(--editorial-accent-rgb),.13)}
.basic-design-actions .actions-path span{display:block;margin-bottom:15px;font:600 9px/1 var(--title);letter-spacing:.26em;color:var(--editorial-accent)}
.basic-design-actions .actions-path p{margin:0!important;max-width:none!important}
.basic-design-actions .actions-arrow{color:var(--editorial-accent);font-size:30px;opacity:.6}
.basic-design-actions .actions-definition{max-width:37ch!important}
.basic-design-actions .actions-not{margin-top:1.8em!important;max-width:30ch!important}

/* XV — Author: provenance -> evidence -> refusal */
.basic-design-author .author-name{font-size:clamp(38px,6vw,72px)!important;max-width:none!important;text-align:left!important}
.basic-design-author .author-facts{display:grid;grid-template-columns:.9fr 1fr 1fr;gap:1px;margin-top:30px;background:var(--editorial-line)}
.basic-design-author .author-facts p{margin:0!important;max-width:none!important;padding:22px!important;background:#090d11}
.basic-design-author .author-evidence{display:grid;grid-template-columns:.7fr 1.3fr;gap:28px;align-items:center;margin-top:34px}
.basic-design-author .author-evidence p{margin:0!important;max-width:none!important}
.basic-design-author .author-refusal{font-size:clamp(30px,4.5vw,54px)!important;max-width:27ch!important}
.basic-design-author .author-wheel{max-width:38ch!important;margin-top:2em!important}
.basic-design-author .author-greeting{background:radial-gradient(55% 100% at 50% 0%,rgba(var(--editorial-accent-rgb),.045),transparent 72%)!important}
.basic-design-author .author-greeting p{max-width:34ch!important}

@media(max-width:760px){
 .basic-design-judaism .judaism-comparison,.basic-design-for-god .forgod-frame,.basic-design-japan .japan-visible-hidden,
 .basic-design-japan .japan-surface-under,.basic-design-japan .japan-methods,.basic-design-japan .japan-knowing,
 .basic-design-china .china-compare,.basic-design-purpose .purpose-sex-pair,.basic-design-author .author-evidence{grid-template-columns:1fr}
 .basic-design-others .others-world-field{grid-template-columns:1fr}
 .basic-design-obligations .obligation-rights{grid-template-columns:1fr}
 .basic-design-japan .japan-surface-under .under,.basic-design-purpose .purpose-sex-pair>div:first-child{padding-left:0;padding-right:0;border-left:0;border-right:0;border-top:1px solid var(--editorial-line);padding-top:24px}
 .basic-design-others .others-three{grid-template-columns:1fr;gap:22px}
 .basic-design-questions .questions-card{grid-template-columns:38px minmax(0,1fr);gap:14px;padding:24px 0}
 .basic-design-questions .questions-no{width:34px;height:34px}
 .basic-design-actions .actions-path{grid-template-columns:1fr}
 .basic-design-actions .actions-arrow{transform:rotate(90deg);justify-self:center}
 .basic-design-author .author-facts{grid-template-columns:1fr}
 .basic-design-author .author-name{text-align:center!important}
}


/* v145 decorative labels rendered from attributes so prose remains untouched */
.basic-design-japan .japan-omote-ura>div::before{content:attr(data-layer);display:block;margin-bottom:14px;font:600 10px/1 var(--title);letter-spacing:.28em;color:var(--editorial-accent)}
.basic-design-china .china-compare>div::before{content:attr(data-country);display:block;margin-bottom:14px;font:600 10px/1 var(--title);letter-spacing:.28em;color:var(--editorial-accent)}
.basic-design-questions .questions-no::before{content:attr(data-question)}
.basic-design-actions .actions-begin::before,.basic-design-actions .actions-extend::before{display:block;margin-bottom:15px;font:600 9px/1 var(--title);letter-spacing:.26em;color:var(--editorial-accent)}
.basic-design-actions .actions-begin::before{content:"BEGIN"}
.basic-design-actions .actions-extend::before{content:"EXTEND"}
.basic-design-actions .actions-arrow::before{content:"→"}
.basic-design-value .value-pole::before{font:600 10px/1 var(--title);letter-spacing:.22em;color:var(--editorial-accent)}
.basic-design-value .value-pole-nature::before{content:"NATURE"}
.basic-design-value .value-pole-culture::before{content:"CULTURE"}

/* Long evidence pages use deliberately different evidence rhythms. */
.basic-design-obligations .obligations-dossier{counter-reset:obligation;display:grid;grid-template-columns:1fr 1fr;gap:0 28px;max-width:980px;margin:auto!important}
.basic-design-obligations .obligations-dossier .obligations-file-item{counter-increment:obligation;padding:20px 12px 20px 34px!important;border-left:1px solid var(--editorial-line);border-bottom:1px solid rgba(var(--editorial-accent-rgb),.08)}
.basic-design-obligations .obligations-dossier .obligations-file-item::before{content:counter(obligation,decimal-leading-zero);top:1.7em;left:8px;width:auto;height:auto;background:none!important;border-radius:0;font:600 8px/1 var(--title);letter-spacing:.1em;color:var(--editorial-accent)}
.basic-design-japan .japan-evidence-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px 26px;max-width:980px;margin:auto!important}
.basic-design-japan .japan-evidence-item{padding:22px 18px 22px 24px!important;border-left:1px solid var(--editorial-line);background:linear-gradient(90deg,rgba(var(--editorial-accent-rgb),.018),transparent)}
.basic-design-china .china-evidence-stack{max-width:900px;margin:auto!important}
.basic-design-china .china-evidence-item{padding:24px 18px 24px 30px!important;border-left:1px solid var(--editorial-line);border-bottom:1px solid rgba(var(--editorial-accent-rgb),.08)}
.basic-design-china .china-evidence-item:nth-child(even){margin-left:8%!important}
.basic-design-others .others-country{max-width:940px;margin:0 auto;padding:28px 0;border-top:1px solid rgba(var(--editorial-accent-rgb),.10)}
.basic-design-others .others-country:first-child{border-top:0}
.basic-design-others .others-country-name{margin:0 0 18px!important;max-width:none!important;text-align:left!important;font-size:clamp(24px,3vw,36px)!important}
.basic-design-others .others-country-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 24px;margin:0!important}
.basic-design-others .others-evidence-item{padding:17px 12px 17px 24px!important;border-left:1px solid var(--editorial-line)}
.basic-design-others .others-country.europe .others-country-list{grid-template-columns:repeat(3,minmax(0,1fr))}
.basic-design-others .others-country.russia .others-country-list{grid-template-columns:1fr}
.basic-design-others .others-summary{max-width:52ch!important;margin-bottom:1.8em!important}

@media(max-width:760px){
 .basic-design-obligations .obligations-dossier,.basic-design-japan .japan-evidence-grid,.basic-design-others .others-country-list,.basic-design-others .others-country.europe .others-country-list{grid-template-columns:1fr}
 .basic-design-china .china-evidence-item:nth-child(even){margin-left:0!important}
}


/* v146 — root opener: The Site */
.site-opener-v146{
  --editorial-accent:#d9b85f;
  --editorial-accent-strong:#f0cf78;
  --editorial-accent-rgb:217,184,95;
  --editorial-warm:#d8cbc0;
  --editorial-line:rgba(217,184,95,.18)
}
.site-opener-v146 .site-opener-hero .word{width:max-content!important;max-width:min(9ch,calc(100vw - 48px))!important;margin:8px auto 0!important;align-self:center!important;text-align:center!important}
.site-opener-v146 .site-opener-hero{padding-bottom:clamp(28px,4.2vh,49px)!important}
.site-opener-v146 .site-opener-article{padding-top:clamp(7px,1.4vh,20px)}
.site-opener-v146 .editorial-section::before,
.site-opener-v146 .editorial-section::after{display:none!important}
.site-opener-v146 .editorial-section{padding-top:clamp(34px,5.5vh,70px)!important;padding-bottom:clamp(46px,7vh,86px)!important}
.site-opener-v146 .site-opening{padding-top:clamp(15px,2.8vh,32px)!important}
.site-opener-v146 .site-opening-address{max-width:31ch!important;font-size:clamp(29px,4vw,48px)!important;line-height:1.31!important}
.site-opener-v146 .site-opening-principle{margin-top:2.35em!important;max-width:30ch!important;color:rgba(238,234,224,.82)!important}
.site-opener-v146 .site-transmission-content{max-width:900px!important}
.site-opener-v146 .site-transfer-pair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,5vw,72px);align-items:center;max-width:880px;margin:0 auto;padding:clamp(24px,4vh,44px) 0;border-top:1px solid var(--editorial-line)}
.site-opener-v146 .site-transfer-pair:first-child{border-top:0}
.site-opener-v146 .site-transfer-pair p{margin:0!important;max-width:none!important}
.site-opener-v146 .site-transfer-pair .editorial-body{text-align:right!important;color:rgba(236,233,227,.66)!important}
.site-opener-v146 .site-transfer-pair .editorial-beat{text-align:left!important;color:#eee7da!important}
.site-opener-v146 .site-resource-line{max-width:35ch!important;margin-top:2.2em!important;padding:24px 0!important;border-top:1px solid var(--editorial-line);border-bottom:1px solid var(--editorial-line)}
.site-opener-v146 .site-pain-chain{max-width:680px;margin:0 auto 34px}
.site-opener-v146 .site-pain-chain p{margin-left:auto!important;margin-right:auto!important}
.site-opener-v146 .site-pain-chain .editorial-body{margin-top:1.55em!important;color:rgba(236,233,227,.66)!important}
.site-opener-v146 .site-pain-chain .editorial-beat{margin-top:.55em!important}
.site-opener-v146 .site-freedom-line{margin-top:2.2em!important;color:#f4efe6!important}
.site-opener-v146 .site-instead{max-width:34ch!important;margin-top:1.9em!important;padding-left:24px!important;border-left:1px solid var(--editorial-line)}
.site-opener-v146 .site-question-stack{width:min(100%,760px);margin:42px auto 0;border-top:1px solid var(--editorial-line)}
.site-opener-v146 .site-question-stack .editorial-question{max-width:none!important;margin:0!important;padding:24px 8px!important;border-bottom:1px solid var(--editorial-line);font-size:clamp(22px,2.65vw,32px)!important;text-align:left!important}
.site-opener-v146 .site-question-stack .editorial-question::first-line{color:inherit!important}
.site-opener-v146 .site-origin-question{max-width:32ch!important}
.site-opener-v146 .site-in-name .editorial-content{max-width:850px!important}
.site-opener-v146 .site-in-name-line{max-width:28ch!important;text-align:center!important;margin-bottom:1.8em!important;font-size:clamp(25px,3.35vw,40px)!important;letter-spacing:.065em!important;line-height:1.35!important}
.site-opener-v146 .site-command-line{max-width:34ch!important}
.site-opener-v146 .site-genesis-line{max-width:28ch!important;font-size:clamp(32px,4.6vw,56px)!important;line-height:1.25!important}
.site-opener-v146 .site-effort-line{margin-top:2.7em!important;max-width:37ch!important}
.site-opener-v146 .site-cost-close{width:min(100% - 36px,880px);margin:clamp(20px,4vh,48px) auto clamp(86px,12vh,150px);padding:clamp(42px,7vh,74px) clamp(20px,4vw,46px);border-top:1px solid rgba(217,184,95,.28);border-bottom:1px solid rgba(217,184,95,.14);background:radial-gradient(circle at 50% 0,rgba(217,184,95,.055),transparent 68%)}
.site-opener-v146 .site-cost-close p{margin:0 auto!important;max-width:34ch;color:#eee9df;font-family:var(--title);font-size:clamp(25px,3.5vw,42px);font-weight:500;line-height:1.55;letter-spacing:.025em;text-align:center;text-wrap:balance}
.site-opener-v146 .site-cost-close p+p{margin-top:.82em!important}
.site-opener-v146 .site-cost-close p:nth-child(3){color:var(--editorial-accent-strong)}
.site-opener-v146 .site-cost-close p:last-child{font-size:clamp(27px,3.9vw,46px);color:#f3eee4}
@media(max-width:720px){
  .site-opener-v146 .site-opener-hero .word{font-size:clamp(48px,15vw,76px)!important}
  .site-opener-v146 .site-opening-address{font-size:clamp(27px,8vw,38px)!important}
  .site-opener-v146 .site-transfer-pair{grid-template-columns:1fr;gap:10px;padding:26px 0}
  .site-opener-v146 .site-transfer-pair .editorial-body,
  .site-opener-v146 .site-transfer-pair .editorial-beat{text-align:left!important}
  .site-opener-v146 .site-transfer-pair .editorial-beat{padding-left:18px!important;border-left:1px solid var(--editorial-line)}
  .site-opener-v146 .site-question-stack{margin-top:30px}
  .site-opener-v146 .site-question-stack .editorial-question{padding:20px 0!important}
  .site-opener-v146 .site-in-name-line{letter-spacing:.045em!important}
  .site-opener-v146 .site-cost-close{width:calc(100% - 28px);padding-left:8px;padding-right:8px}
}

/* v150 — Foundation: keep the long Brotherhood title centered on one line on phones. */
@media(max-width:720px){
  .brotherhood-page .editorial-hero .word{
    font-size:clamp(38px,13vw,54px)!important;
    white-space:nowrap;
  }
}


/* v151 — Movement beside Project */
.header-direct-nav{display:flex;align-items:center;justify-content:flex-end;gap:0;flex:0 0 auto;position:relative;z-index:7}
.header-direct-nav .movement-direct,
.header-direct-nav .project-direct{position:relative;z-index:5;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;height:42px;padding:0 2px 0 18px;border-left:1px solid rgba(255,255,255,.13);font-family:var(--title);font-size:10px;font-weight:400;line-height:1;letter-spacing:.24em;text-transform:uppercase;color:rgba(244,242,238,.80);transition:color .3s var(--ease),text-shadow .3s var(--ease),border-color .3s var(--ease)}
.header-direct-nav .movement-direct::before,
.header-direct-nav .project-direct::before{content:"";position:absolute;left:-1px;top:7px;bottom:7px;width:1px;background:linear-gradient(180deg,transparent,rgba(92,126,164,.30),rgba(255,255,255,.26),rgba(193,54,69,.24),transparent);box-shadow:0 0 10px rgba(255,255,255,.10)}
.header-direct-nav .movement-direct:hover,
.header-direct-nav .project-direct:hover,
.header-direct-nav .movement-direct[aria-current="page"],
.header-direct-nav .project-direct[aria-current="page"]{color:#fff;border-left-color:rgba(255,255,255,.20);text-shadow:-2px 0 11px rgba(38,132,255,.18),2px 0 11px rgba(255,50,69,.16)}
.movement-page .header-direct-nav .project-direct{color:rgba(244,242,238,.80)!important;text-shadow:none!important}
.movement-page .header-direct-nav .movement-direct{color:#fff!important;border-left-color:rgba(255,255,255,.20)!important;text-shadow:-2px 0 11px rgba(38,132,255,.18),2px 0 11px rgba(255,50,69,.16)!important}
.movement-page .hero .word{max-width:10ch}
.movement-page .photo{width:min(420px,78vw)}
@media(max-width:980px){.header-direct-nav .movement-direct,.header-direct-nav .project-direct{font-size:9px;letter-spacing:.18em;padding-left:14px}}
@media(max-width:700px){.header-direct-nav{grid-column:3!important;justify-self:end!important;display:flex!important;align-items:center!important}.header-direct-nav .movement-direct{display:none!important}.header-direct-nav .project-direct{width:46px!important;min-width:46px!important;max-width:46px!important;height:38px!important;margin:0!important;padding:0 0 0 7px!important;font-size:7.6px!important;letter-spacing:.11em!important;white-space:nowrap!important;overflow:visible!important}}
@media(max-width:370px){.header-direct-nav .project-direct{width:42px!important;min-width:42px!important;max-width:42px!important;padding-left:6px!important;font-size:7px!important;letter-spacing:.085em!important}}


/* v152 — Movement and Project are sibling top-level outcomes. */
.movement-section .brand-section .zone-word,
.project-section .brand-section .zone-word{color:var(--gold)}
.movement-section .level-switch,
.project-section .level-switch{border-color:rgba(201,162,75,.22);box-shadow:0 12px 34px rgba(0,0,0,.3),0 0 28px rgba(201,162,75,.035)}
.header-direct-nav .movement-direct,
.header-direct-nav .project-direct{min-width:88px;padding-left:16px;padding-right:10px}
.project-dock-flow .movement-link,
.project-dock-flow .project-link-main{border-color:rgba(201,162,75,.18)}
.project-dock-flow .movement-link .project-link-no,
.project-dock-flow .project-link-main .project-link-no{font-size:16px;letter-spacing:.03em}

@media(max-width:700px){
  .bar{grid-template-columns:122px minmax(0,1fr) 50px!important}
  .header-direct-nav{
    grid-column:3!important;justify-self:end!important;display:flex!important;flex-direction:column!important;
    align-items:stretch!important;justify-content:center!important;width:50px!important;height:42px!important;gap:0!important
  }
  .header-direct-nav .movement-direct,
  .header-direct-nav .project-direct{
    display:flex!important;width:50px!important;min-width:50px!important;max-width:50px!important;height:20px!important;
    margin:0!important;padding:0 1px!important;border-left:1px solid rgba(255,255,255,.13)!important;
    font-size:6.3px!important;letter-spacing:.045em!important;line-height:1!important;white-space:nowrap!important;overflow:hidden!important
  }
  .header-direct-nav .movement-direct::before,
  .header-direct-nav .project-direct::before{top:2px!important;bottom:2px!important}
  .header-direct-nav .movement-direct{border-bottom:1px solid rgba(255,255,255,.07)!important}
  .level-switch{min-width:0!important}
}
@media(max-width:370px){
  .bar{grid-template-columns:114px minmax(0,1fr) 48px!important}
  .header-direct-nav{width:48px!important}
  .header-direct-nav .movement-direct,
  .header-direct-nav .project-direct{width:48px!important;min-width:48px!important;max-width:48px!important;font-size:6.0px!important;letter-spacing:.025em!important}
}

/* v153 — Movement is a three-text path: A Blow → #boxer → Men’s Movement. */
.movement-index-page .movement-index-hero{padding-bottom:clamp(30px,5vh,54px)!important}
.movement-index-page .movement-directory{max-width:920px!important;padding-top:clamp(34px,6vh,70px)!important;padding-bottom:clamp(82px,12vh,138px)!important}
.movement-index-page .movement-directory-head{margin-bottom:clamp(28px,5vh,48px)!important}
.movement-index-page .movement-directory-head .hell-directory-eyebrow{color:var(--gold)!important}
.movement-index-page .movement-directory-head h2{font-size:clamp(46px,7vw,78px)!important}
.movement-index-page .movement-text-grid{grid-template-columns:1fr!important;max-width:820px;margin:0 auto;gap:14px}
.movement-index-page .movement-text-grid .hell-chapter-card{min-height:104px;border-color:rgba(201,162,75,.13)!important;background:linear-gradient(110deg,rgba(201,162,75,.025),rgba(255,255,255,.009))!important}
.movement-index-page .movement-text-grid .hell-chapter-card:hover{border-color:rgba(201,162,75,.38)!important;background:linear-gradient(110deg,rgba(201,162,75,.065),rgba(255,255,255,.014) 56%,rgba(30,111,217,.035))!important}
.movement-index-page .movement-text-grid .hell-chapter-card::before{background:linear-gradient(180deg,var(--water),var(--gold),var(--fire-red))!important;opacity:.50!important}
.movement-index-page .movement-text-grid .hell-chapter-no{color:var(--gold)!important}
.movement-reading-page .editorial-hero .word{max-width:14ch}
.movement-reading-page .editorial-content{max-width:760px!important}
@media(max-width:700px){
  .movement-index-page .movement-directory{padding-top:28px!important;padding-bottom:86px!important}
  .movement-index-page .movement-directory-head h2{font-size:clamp(42px,13vw,62px)!important}
  .movement-index-page .movement-text-grid .hell-chapter-card{min-height:82px!important}
  .movement-reading-page .editorial-hero .word{font-size:clamp(46px,14vw,72px)!important}
}



/* v154 — XY graphics centered, enlarged, and cleaned for The Site + Movement. */
.site-opener-v146 .site-opener-hero,
.movement-page .editorial-hero{
  align-items:center!important;
  text-align:center!important;
}
.site-opener-v146 .site-opener-hero .word,
.movement-page .editorial-hero .word{
  margin-left:auto!important;
  margin-right:auto!important;
  text-align:center!important;
}
.site-opener-v146 .site-opener-hero .photo.photo-manhood,
.movement-page .photo.photo-movement{
  width:min(calc(100vw - 28px),640px)!important;
  max-width:640px!important;
  margin:0 auto 12px!important;
  align-self:center!important;
  background:transparent!important;
  -webkit-mask:none!important;
  mask:none!important;
  overflow:visible!important;
  isolation:isolate!important;
  filter:drop-shadow(0 0 38px rgba(255,78,16,.18)) drop-shadow(0 0 38px rgba(0,139,255,.20))!important;
}
.site-opener-v146 .site-opener-hero .photo.photo-manhood picture,
.site-opener-v146 .site-opener-hero .photo.photo-manhood img,
.movement-page .photo.photo-movement img{
  display:block!important;
  width:100%!important;
  height:auto!important;
  margin:0 auto!important;
  background:transparent!important;
  -webkit-mask:none!important;
  mask:none!important;
  pointer-events:none!important;
  user-select:none!important;
  -webkit-user-drag:none!important;
}
.site-opener-v146 .site-opener-hero .photo.photo-manhood img,
.movement-page .photo.photo-movement img{
  clip-path:circle(45% at 50% 50%)!important;
}
.movement-page .hero .word{width:max-content!important;max-width:min(12ch,calc(100vw - 44px))!important;align-self:center!important}
@media(max-width:700px){
  .site-opener-v146 .site-opener-hero .photo.photo-manhood,
  .movement-page .photo.photo-movement{
    width:calc(100vw - 28px)!important;
    max-width:calc(100vw - 28px)!important;
  }
}


/* v155 — sitewide responsive precision pass.
   Fixes real centering/overflow defects without changing the editorial design. */

/* The header context is useful on wide screens, but it collides with the centered
   level switch on tablet / compact desktop widths. Keep the zone, hide the long title. */
@media (min-width:701px) and (max-width:1180px){
  .brand-section .context-sep,
  .brand-section .context-title{display:none!important}
}

/* The 701–760 seam was one of the few widths where the switch physically touched
   Movement / Project. Give it a few pixels of real air. */
@media (min-width:701px) and (max-width:760px){
  .level-switch{width:280px!important}
}
@media (min-width:901px) and (max-width:980px){
  .level-switch{width:390px!important}
}

/* Keep the creed visible instead of painting part of its transparent text outside
   its gradient box / viewport. Desktop remains centered under the switch. */
@media (min-width:701px){
  .site-creed{
    left:50%!important;
    width:min(500px,calc(100vw - 40px))!important;
    max-width:min(500px,calc(100vw - 40px))!important;
    transform:translateX(-50%)!important;
  }
}
@media (max-width:700px){
  .site-creed{
    left:calc(50% + 40px)!important;
    width:calc(100vw - 80px)!important;
    max-width:calc(100vw - 80px)!important;
    transform:translateX(-50%)!important;
    font-size:clamp(8.75px,2.55vw,10.5px)!important;
    letter-spacing:.01em!important;
    text-indent:.01em!important;
  }
}

/* Wide hero artwork used viewport widths inside a padded .wrap. Once the artwork
   became wider than the wrap content box, auto margins no longer centered it.
   These mobile dimensions preserve the large artwork while centering it geometrically. */
@media (max-width:700px){
  .site-opener-v146 .site-opener-hero .photo.photo-manhood,
  .movement-page .photo.photo-movement,
  .hero .photo.photo-author,
  .hero .photo.photo-author-support{
    width:calc(100% + 32px)!important;
    max-width:none!important;
    margin-left:-16px!important;
    margin-right:-16px!important;
  }
  .advanced-section .hero .photo.photo-scene{
    width:calc(100% + 8px)!important;
    max-width:none!important;
    margin-left:-4px!important;
    margin-right:-4px!important;
  }
}

/* Long single-word display titles cannot wrap naturally. Scale only those titles,
   leaving short titles at the original, stronger size. */
@media (max-width:700px){
  .editorial-hero .word.hero-title-long{
    font-size:clamp(42px,14vw,58px)!important;
    max-width:100%!important;
  }
  .movement-index-page .editorial-hero .word{
    font-size:clamp(46px,14vw,58px)!important;
    max-width:100%!important;
  }
}
@media (max-width:340px){
  :is(.basic-section,.advanced-section) .editorial-hero .word:not(.hero-title-long){
    font-size:clamp(48px,18vw,58px)!important;
  }
  .editorial-hero .word.hero-title-long{font-size:42px!important}
}

/* v155.1 — final optical/geometry corrections from validation. */
.hero .photo.photo-author,
.hero .photo.photo-author-support{transform:none!important}
@media(max-width:340px){
  .hell-directory-head h2{font-size:50px!important}
}


/* v156 — primary statement before The Site.
   Editorial typography only: no card, no badge, no UI-panel treatment. */
.site-opener-v146 .site-primary-statement{
  width:min(100%,980px);
  margin:clamp(32px,5.6vh,64px) auto clamp(42px,6.6vh,78px);
  padding:0 0 clamp(34px,5vh,56px);
  display:grid;
  grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(38px,6.5vw,92px);
  align-items:end;
  position:relative;
  text-align:left;
}
.site-opener-v146 .site-primary-statement::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:1px;
  background:linear-gradient(90deg,rgba(196,66,47,.52),rgba(217,184,95,.24) 42%,rgba(79,195,247,.46));
  opacity:.78;
}
.site-opener-v146 .site-primary-question{
  margin:0!important;
  max-width:13.2ch;
  color:#f4f0e9;
  font-family:var(--title);
  font-size:clamp(42px,5.25vw,72px);
  font-weight:500;
  line-height:.98;
  letter-spacing:-.04em;
  text-wrap:balance;
}
.site-opener-v146 .site-primary-answer{
  margin:0 0 .18em!important;
  max-width:37ch;
  color:rgba(236,233,227,.69);
  font-family:var(--serif);
  font-size:clamp(20px,2.05vw,27px);
  font-weight:400;
  line-height:1.48;
  letter-spacing:-.012em;
}
.site-opener-v146 .site-primary-answer span{
  color:#f1ece4;
}
.site-opener-v146 .site-primary-statement + .photo.photo-manhood{
  margin-top:0!important;
}

@media(max-width:760px){
  .site-opener-v146 .site-primary-statement{
    width:100%;
    margin:clamp(28px,4vh,42px) auto clamp(34px,5vh,48px);
    padding-bottom:clamp(28px,4vh,38px);
    grid-template-columns:1fr;
    gap:22px;
  }
  .site-opener-v146 .site-primary-question{
    max-width:12.4ch;
    font-size:clamp(40px,12.4vw,58px);
    line-height:1;
    letter-spacing:-.035em;
  }
  .site-opener-v146 .site-primary-answer{
    max-width:31ch;
    margin-left:auto!important;
    font-size:clamp(18px,5.2vw,22px);
    line-height:1.52;
  }
}
@media(max-width:390px){
  .site-opener-v146 .site-primary-statement{
    margin-top:24px;
  }
  .site-opener-v146 .site-primary-question{
    font-size:clamp(37px,11.7vw,46px);
  }
  .site-opener-v146 .site-primary-answer{
    font-size:18px;
  }
}