/* ==========================================================================
   PixelPH V6 — "Nightfall" design system
   Serious Roleplay · Philippines
   --------------------------------------------------------------------------
   Single stylesheet for every public page. The staff dashboard (/admin.html)
   intentionally still loads pixelph-v3-fixed.css and is not affected by this
   file. Every class name referenced by existing JavaScript is preserved.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root{
  /* Core palette — cold base, warm sodium atmosphere, mint as brand light */
  --ink:#05070a;
  --ink-2:#0a0f13;
  --ink-3:#0e1519;
  --slate:#1a2328;
  --mint:#00d7c2;
  --sodium:#e8a24a;
  --bone:#eef2f1;

  /* Derived */
  --mint-2:#86ffe9;
  --mint-3:#33ead5;
  --mint-dim:rgba(0,215,194,.14);
  --sodium-dim:rgba(232,162,74,.12);
  --muted:#8a9aa0;
  --muted-2:#63747a;
  --line:rgba(180,225,215,.11);
  --line-2:rgba(180,225,215,.2);
  --line-3:rgba(180,225,215,.32);

  /* Legacy aliases kept so V5 markup and injected HTML keep rendering */
  --mint2:var(--mint-2);
  --mint3:var(--mint-3);
  --panel:var(--ink-2);
  --panel2:var(--ink-3);
  --line2:var(--line-2);
  --white:var(--bone);
  --text:var(--bone);
  --accent:var(--mint);
  --danger:#ff6b78;
  --warn:var(--sodium);
  --ok:#68f0be;

  /* Type */
  --sans:"Archivo","Archivo Fallback",system-ui,-apple-system,"Segoe UI",sans-serif;
  --serif:"Literata","Literata Fallback",Georgia,"Times New Roman",serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;

  --t-display-xl:clamp(3rem,8.4vw,8rem);
  --t-display-l:clamp(2.45rem,5.6vw,4.9rem);
  --t-display-m:clamp(1.95rem,3.6vw,3.1rem);
  --t-display-s:clamp(1.5rem,2.4vw,2.1rem);
  --t-title:clamp(1.18rem,1.5vw,1.42rem);
  --t-body:1.0625rem;
  --t-small:.8125rem;
  --t-label:.6875rem;

  /* Space + rhythm */
  --gutter:clamp(20px,4vw,40px);
  --shell:1240px;
  --rail:clamp(14px,3.4vw,52px);
  --chapter-pad:clamp(72px,11vh,148px);
  --radius:3px;
  --radius-lg:5px;

  --ease:cubic-bezier(.22,.8,.26,1);
}

@font-face{font-family:"Archivo Fallback";src:local("Helvetica Neue"),local("Arial");size-adjust:98%;ascent-override:92%}
@font-face{font-family:"Literata Fallback";src:local("Georgia"),local("Times New Roman");size-adjust:97%}

*,*::before,*::after{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:92px;
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body,body.v2-body{
  margin:0;
  background:var(--ink);
  color:var(--bone);
  font-family:var(--sans);
  font-size:var(--t-body);
  font-weight:400;
  line-height:1.6;
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* Global atmospheric film grain. Fixed, cheap, dropped on small screens. */
body.v2-body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:9999;
  pointer-events:none;
  opacity:.02;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

img,video,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.hidden{display:none!important}
[hidden]{display:none!important}

::selection{background:rgba(0,215,194,.26);color:#fff}

:where(a,button,input,textarea,select,summary,[tabindex]):focus-visible{
  outline:2px solid var(--mint);
  outline-offset:3px;
  border-radius:2px;
}

/* --------------------------------------------------------------------------
   2. TYPE
   -------------------------------------------------------------------------- */
h1,h2,h3,h4,h5{
  font-family:var(--sans);
  font-weight:800;
  letter-spacing:-.035em;
  line-height:1.02;
  margin:0;
  text-wrap:balance;
}
h3,h4,h5{letter-spacing:-.018em;line-height:1.18}

.t-display{
  font-size:var(--t-display-xl);
  font-weight:900;
  letter-spacing:-.05em;
  line-height:.9;
  text-transform:uppercase;
}
.t-headline{font-size:var(--t-display-l);font-weight:850;letter-spacing:-.042em;line-height:.98}
.t-section{font-size:var(--t-display-m);font-weight:800;letter-spacing:-.035em;line-height:1.04}
.t-sub{font-size:var(--t-display-s);font-weight:750;letter-spacing:-.028em;line-height:1.12}

/* Reading text — serif, the "published document" voice */
.prose,.lead,.t-lead{
  font-family:var(--serif);
  font-weight:380;
  color:#b3c0c2;
  line-height:1.78;
  max-width:64ch;
  font-size:1.0625rem;
}
.t-lead{font-size:clamp(1.0625rem,1.35vw,1.28rem);color:#c2cfd0;max-width:60ch}
.prose p{margin:0 0 1.1em}
.prose p:last-child{margin-bottom:0}
.prose strong{color:var(--bone);font-weight:650}

/* Small structural label. Used only where it names something (districts,
   data fields), never as a decorative eyebrow above every heading. */
.plate-label,.section-kicker,.eyebrow{
  display:inline-block;
  font-family:var(--sans);
  font-size:var(--t-label);
  font-weight:750;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--mint-2);
}

/* A short serif lead-in that replaces the caps eyebrow in most sections */
.lead-in{
  font-family:var(--serif);
  font-style:italic;
  font-weight:400;
  font-size:clamp(.95rem,1.1vw,1.05rem);
  color:var(--muted);
  margin:0 0 .9rem;
  letter-spacing:.005em;
}

.num{
  font-family:var(--sans);
  font-variant-numeric:tabular-nums;
  font-weight:850;
  letter-spacing:-.04em;
}

.accent{color:var(--mint)}
.inline-code{
  font-family:var(--mono);
  font-size:.88em;
  color:#b6fff2;
  background:rgba(0,215,194,.07);
  border:1px solid var(--line);
  padding:.15em .45em;
  border-radius:3px;
}

/* --------------------------------------------------------------------------
   3. LAYOUT
   -------------------------------------------------------------------------- */
.shell,.v2-wrap{
  width:min(var(--shell),100% - (var(--gutter) * 2));
  margin-inline:auto;
}
.shell-wide{width:min(1560px,100% - (var(--gutter) * 2));margin-inline:auto}

/* The rail: a thin vertical curb line that runs down the left of content
   blocks and ties the whole site together. */
.rail{position:relative;padding-left:var(--rail)}
.rail::before{
  content:"";
  position:absolute;
  left:0;
  top:.35em;
  bottom:.2em;
  width:1px;
  background:linear-gradient(180deg,var(--mint),rgba(0,215,194,.12) 42%,transparent);
}
.rail-quiet::before{background:linear-gradient(180deg,var(--line-3),transparent 70%)}

.band{position:relative;padding:var(--chapter-pad) 0}
.band-tight{padding:clamp(48px,7vh,88px) 0}
.band-hair{border-top:1px solid var(--line)}

/* Legacy section shells kept working */
.v2-section{position:relative;padding:var(--chapter-pad) 0}
.page-shell{min-height:100vh;padding-top:0;background:var(--ink)}
.page-section{padding:clamp(52px,8vh,104px) 0}

.stack-xs>*+*{margin-top:.6rem}
.stack-s>*+*{margin-top:1rem}
.stack-m>*+*{margin-top:1.75rem}
.stack-l>*+*{margin-top:2.75rem}

/* --------------------------------------------------------------------------
   4. MEDIA FRAMES
   Layered backgrounds: the real file sits on top of a composed atmospheric
   plate. If the file is absent the plate shows and nothing looks broken.
   -------------------------------------------------------------------------- */
.ph-frame{
  --ph-tone:0,215,194;
  --ph-tone-2:20,40,60;
  position:relative;
  overflow:hidden;
  background-color:#080d11;
  /* An empty plate is a composed night scene, not a grey box: a light source
     top-left, a ground haze bottom-right, and a graded sky between them. */
  background-image:
    radial-gradient(85% 62% at 24% 6%,rgba(var(--ph-tone),.34),transparent 62%),
    radial-gradient(70% 48% at 84% 96%,rgba(var(--ph-tone),.14),transparent 66%),
    radial-gradient(120% 90% at 88% 88%,rgba(var(--ph-tone-2),.85),transparent 70%),
    linear-gradient(163deg,#121d23 0%,#0b1317 38%,#070b0f 68%,#04060a 100%);
  isolation:isolate;
}
/* Structural texture: a horizon line, a low skyline silhouette, a light
   shaft and a fine scanline. All CSS, no requests, sized to the frame. */
.ph-frame::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background-image:
    /* light shaft from the top-left source */
    linear-gradient(108deg,transparent 0 18%,rgba(var(--ph-tone),.1) 30%,transparent 46%),
    /* horizon */
    linear-gradient(180deg,transparent 0 67.2%,rgba(var(--ph-tone),.42) 67.2% 67.5%,transparent 67.5%),
    /* glow sitting on the horizon */
    radial-gradient(75% 22% at 40% 68%,rgba(var(--ph-tone),.24),transparent 70%),
    /* ground */
    linear-gradient(180deg,transparent 0 67.4%,rgba(3,5,8,.72) 67.4%,rgba(3,5,8,.94) 100%),
    /* scanline + vertical ticks */
    repeating-linear-gradient(180deg,rgba(255,255,255,.03) 0 1px,transparent 1px 4px),
    repeating-linear-gradient(90deg,rgba(255,255,255,.022) 0 1px,transparent 1px 76px);
}

.ph-frame>img,
.ph-frame>video,
.ph-frame>picture{
  position:relative;
  z-index:1;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}
.ph-frame.media-missing>img,
.ph-frame.media-missing>video{display:none}

/* Vignette + legibility scrim, applied above the media */
.ph-frame::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:
    radial-gradient(130% 100% at 50% 42%,transparent 34%,rgba(4,6,10,.62) 100%),
    linear-gradient(180deg,rgba(4,6,10,.34) 0%,transparent 30%,transparent 58%,rgba(4,6,10,.78) 100%);
}
.ph-frame.scrim-soft::after{
  background:linear-gradient(180deg,rgba(4,6,10,.18),transparent 45%,rgba(4,6,10,.5));
}
.ph-frame.scrim-none::after{display:none}

/* Skyline silhouette. Sits at z-index 0, behind the media at z-index 1, so
   it is visible only while the real file is absent. Original geometry,
   drawn with a clip-path so it costs no request. */
.ph-frame .plate-skyline{
  display:block;
  position:absolute;
  z-index:0;
  left:-2%;
  right:-2%;
  bottom:31.5%;
  height:clamp(38px,14%,120px);
  background:linear-gradient(180deg,rgba(6,11,14,.9),rgba(4,7,10,1));
  clip-path:polygon(
    0% 62%,4% 62%,4% 38%,7% 38%,7% 70%,11% 70%,11% 24%,13.5% 24%,13.5% 78%,
    18% 78%,18% 44%,22% 44%,22% 66%,25% 66%,25% 14%,28% 14%,28% 82%,
    33% 82%,33% 50%,37% 50%,37% 30%,40% 30%,40% 72%,46% 72%,46% 42%,
    51% 42%,51% 20%,55% 20%,55% 76%,61% 76%,61% 40%,65% 40%,65% 68%,
    72% 68%,72% 28%,76% 28%,76% 74%,82% 74%,82% 48%,87% 48%,87% 66%,
    92% 66%,92% 34%,96% 34%,96% 64%,100% 64%,100% 100%,0% 100%);
  opacity:.85;
  pointer-events:none;
}
.ph-frame .plate-skyline::after{
  content:"";
  position:absolute;
  inset:auto 0 0;
  height:100%;
  background:linear-gradient(180deg,rgba(var(--ph-tone),.1),transparent 55%);
}

/* Aspect helpers */
.ar-cine{aspect-ratio:21/9}
.ar-wide{aspect-ratio:16/9}
.ar-photo{aspect-ratio:4/3}
.ar-portrait{aspect-ratio:3/4}
.ar-tall{aspect-ratio:2/3}
.ar-square{aspect-ratio:1}

/* Atmospheric tones so each chapter is lit differently */
.tone-mint{--ph-tone:0,215,194;--ph-tone-2:8,30,44}
.tone-sodium{--ph-tone:232,162,74;--ph-tone-2:38,22,10}
.tone-cold{--ph-tone:128,176,255;--ph-tone-2:10,20,44}
.tone-ember{--ph-tone:226,94,84;--ph-tone-2:34,12,14}
.tone-deep{--ph-tone:54,92,88;--ph-tone-2:6,12,16}

/* One motion device, reused everywhere: a masked reveal from the bottom.
   Everything that HIDES content is scoped to html.js, which is set by an
   inline flag in <head>. Without scripting the page renders fully visible;
   the animation is an enhancement, never a prerequisite for reading. */
.js .reveal{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .9s var(--ease),transform .9s var(--ease);
}
.js .reveal.visible{opacity:1;transform:none}
.js .reveal-mask>*{
  clip-path:inset(100% 0 0 0);
  transition:clip-path 1.15s var(--ease);
}
.js .reveal-mask.visible>*{clip-path:inset(0 0 0 0)}

/* Owner-only helper: add ?media=debug to any URL to see which file each
   frame expects. Never visible to visitors. */
body.media-debug .ph-frame[data-media]::after{
  content:attr(data-media);
  display:grid;
  place-items:center;
  padding:10px;
  font-family:var(--mono);
  font-size:11px;
  line-height:1.5;
  color:#8ff5e4;
  text-align:center;
  background:rgba(0,10,12,.72);
  border:1px dashed rgba(0,215,194,.5);
  white-space:pre-wrap;
}

/* --------------------------------------------------------------------------
   5. BUTTONS
   -------------------------------------------------------------------------- */
.btn,.primary-btn,.ghost-btn,.danger-btn,.quiet-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  font-family:var(--sans);
  font-size:.8125rem;
  font-weight:750;
  letter-spacing:.055em;
  text-transform:uppercase;
  padding:15px 26px;
  border:1px solid transparent;
  border-radius:var(--radius);
  cursor:pointer;
  transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease),box-shadow .25s var(--ease);
}
.primary-btn{
  background:var(--mint);
  color:#02100e;
  border-color:var(--mint);
  box-shadow:0 0 0 0 rgba(0,215,194,.4);
}
.primary-btn:hover{background:#5cf4e0;box-shadow:0 10px 40px -12px rgba(0,215,194,.55)}
.ghost-btn{
  background:transparent;
  color:var(--bone);
  border-color:var(--line-2);
}
.ghost-btn:hover{border-color:var(--mint);color:var(--mint-2);background:rgba(0,215,194,.04)}
.quiet-btn{background:transparent;color:var(--muted);border-color:transparent;padding-inline:0}
.quiet-btn:hover{color:var(--mint-2)}
.danger-btn{background:rgba(255,107,120,.1);color:#ffbdc4;border-color:rgba(255,107,120,.34)}
.danger-btn:hover{background:rgba(255,107,120,.16)}
.primary-btn[disabled],.ghost-btn[disabled],.btn[disabled]{
  opacity:.42;cursor:not-allowed;box-shadow:none;
}
.primary-btn[disabled]:hover{background:var(--mint)}

.btn-row,.hero-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

/* Text link with an underline that grows — used in prose, not buttons */
.link-u{
  color:var(--mint-2);
  border-bottom:1px solid rgba(0,215,194,.34);
  padding-bottom:1px;
  transition:border-color .2s,color .2s;
}
.link-u:hover{border-bottom-color:var(--mint);color:#c2fff4}

.live-dot{
  display:inline-block;
  width:6px;height:6px;
  border-radius:50%;
  background:var(--mint);
  box-shadow:0 0 0 3px rgba(0,215,194,.12),0 0 14px rgba(0,215,194,.8);
  flex:0 0 auto;
}

/* --------------------------------------------------------------------------
   6. NAVIGATION
   -------------------------------------------------------------------------- */
.v2-nav{
  position:fixed;
  inset:0 0 auto;
  z-index:60;
  background:linear-gradient(180deg,rgba(5,7,10,.78),rgba(5,7,10,.22) 62%,transparent);
  transition:background .4s var(--ease),border-color .4s var(--ease),box-shadow .4s var(--ease);
  border-bottom:1px solid transparent;
}
.v2-nav.nav-scrolled{
  background:rgba(5,7,10,.86);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border-bottom-color:var(--line);
  box-shadow:0 18px 50px -26px rgba(0,0,0,.9);
}
.nav-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  height:82px;
  transition:height .4s var(--ease);
}
.nav-scrolled .nav-inner{height:68px}

.brand{
  display:flex;
  align-items:center;
  gap:11px;
  font-family:var(--sans);
  font-size:1.12rem;
  font-weight:850;
  letter-spacing:-.045em;
  color:#fff;
  flex:0 0 auto;
}
.brand img{width:32px;height:32px;object-fit:contain}
.brand span span{color:var(--mint)}

.nav-links{display:flex;align-items:center;gap:4px}
.nav-links a{
  position:relative;
  padding:9px 13px;
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:#9dacb0;
  transition:color .22s;
}
.nav-links a:hover{color:var(--bone)}
.nav-links a::after{
  content:"";
  position:absolute;
  left:13px;right:13px;bottom:2px;
  height:1px;
  background:var(--mint);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .3s var(--ease);
}
.nav-links a:hover::after{transform:scaleX(1)}
.nav-links a.active{color:#fff}
.nav-links a.active::after{transform:scaleX(1)}

.nav-links .nav-cta,
.nav-links .nav-apply{
  margin-left:12px;
  padding:11px 18px;
  border:1px solid var(--line-2);
  border-radius:var(--radius);
  color:var(--bone);
  background:transparent;
}
.nav-links .nav-cta::after,.nav-links .nav-apply::after{display:none}
.nav-links .nav-cta:hover{border-color:var(--mint);color:var(--mint-2)}
.nav-links .nav-apply{
  background:var(--mint);
  border-color:var(--mint);
  color:#02100e;
}
.nav-links .nav-apply:hover{background:#5cf4e0;color:#02100e}

.nav-toggle{
  display:none;
  width:42px;height:42px;
  align-items:center;
  justify-content:center;
  background:transparent;
  border:1px solid var(--line);
  border-radius:var(--radius);
  color:var(--bone);
  font-size:16px;
  cursor:pointer;
}
.nav-toggle:hover{border-color:var(--line-3)}

/* Mobile panel — full-height overlay sheet. Toggled by .hidden from script.js */
.mobile-nav{
  position:fixed;
  inset:0;
  z-index:59;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:2px;
  padding:96px var(--gutter) 40px;
  background:
    radial-gradient(120% 70% at 78% 6%,rgba(0,215,194,.09),transparent 56%),
    rgba(4,6,9,.98);
  overflow-y:auto;
  overscroll-behavior:contain;
}
.mobile-nav a{
  display:flex;
  align-items:baseline;
  gap:14px;
  padding:15px 2px;
  border-bottom:1px solid var(--line);
  font-family:var(--sans);
  font-size:1.4rem;
  font-weight:800;
  letter-spacing:-.03em;
  color:#dbe6e6;
}
.mobile-nav a:last-child{border-bottom:0}
.mobile-nav a::before{
  content:counter(mnav,decimal-leading-zero);
  font-size:.62rem;
  font-weight:700;
  letter-spacing:.14em;
  color:var(--muted-2);
  font-variant-numeric:tabular-nums;
}
.mobile-nav{counter-reset:mnav}
.mobile-nav a{counter-increment:mnav}
.mobile-nav a.active{color:var(--mint)}
.mobile-nav:not(.hidden){animation:sheetIn .32s var(--ease) both}
@keyframes sheetIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
body.nav-open{overflow:hidden}

#pixelphScrollProgress{
  position:fixed;
  z-index:100;
  left:0;top:0;
  height:2px;width:0;
  background:linear-gradient(90deg,var(--mint),var(--mint-2));
  box-shadow:0 0 12px rgba(0,215,194,.5);
  pointer-events:none;
}

/* Skip link */
.skip-link{
  position:absolute;
  left:-9999px;
  top:0;
  z-index:200;
  padding:12px 18px;
  background:var(--mint);
  color:#02100e;
  font-weight:800;
  font-size:.8rem;
}
.skip-link:focus{left:10px;top:10px}

/* --------------------------------------------------------------------------
   7. FOOTER
   -------------------------------------------------------------------------- */
.v2-footer{
  border-top:1px solid var(--line);
  background:#030406;
  padding:clamp(48px,7vh,84px) 0 32px;
}
.v2-footer .v2-wrap{display:block}
.footer-top{
  display:grid;
  grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));
  gap:40px 32px;
  padding-bottom:44px;
  border-bottom:1px solid var(--line);
}
.footer-brand .brand{font-size:1.3rem;margin-bottom:16px}
.footer-brand p{
  font-family:var(--serif);
  font-size:.9rem;
  line-height:1.7;
  color:var(--muted);
  max-width:34ch;
  margin:0 0 18px;
}
.footer-col h3{
  font-size:var(--t-label);
  font-weight:750;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted-2);
  margin-bottom:16px;
}
.footer-col a{
  display:block;
  padding:6px 0;
  font-size:.85rem;
  color:#9aa9ad;
  transition:color .2s;
}
.footer-col a:hover{color:var(--mint-2)}
.footer-links{display:flex;flex-wrap:wrap;gap:18px}
.footer-links a{font-size:.85rem;color:#9aa9ad}
.footer-links a:hover{color:var(--mint-2)}
.footer-bottom{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding-top:26px;
  font-size:.75rem;
  color:var(--muted-2);
}
.footer-addr{font-family:var(--mono);font-size:.72rem;letter-spacing:.02em}

/* --------------------------------------------------------------------------
   8. DATA PLATE — hairline-separated label/value pairs.
   Replaces middle-dot meta strings.
   -------------------------------------------------------------------------- */
.plate{
  display:flex;
  flex-wrap:wrap;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.plate>div,
.hero-meta>span{
  flex:1 1 150px;
  min-width:0;
  padding:16px 20px 16px 0;
  border-right:1px solid var(--line);
}
.plate>div:last-child,.hero-meta>span:last-child{border-right:0}
.plate>div:not(:first-child),.hero-meta>span:not(:first-child){padding-left:20px}
.plate dt,.plate .p-k{
  display:block;
  font-size:.6rem;
  font-weight:750;
  letter-spacing:.17em;
  text-transform:uppercase;
  color:var(--muted-2);
  margin-bottom:7px;
}
.plate dd,.plate .p-v{
  margin:0;
  font-size:.86rem;
  font-weight:600;
  color:#cfdad9;
  letter-spacing:-.005em;
}
.plate .p-v .live-dot{margin-right:7px}

/* Legacy .hero-meta reflowed into the same plate language */
.hero-meta{
  display:flex;
  flex-wrap:wrap;
  border-top:1px solid var(--line);
  font-size:.78rem;
  color:#a2b0b3;
  margin:0;
}
.hero-meta i{color:var(--mint);margin-right:8px;font-size:.9em}

/* --------------------------------------------------------------------------
   9. PAGE HEADERS (inner pages)
   -------------------------------------------------------------------------- */
.page-hero{
  position:relative;
  padding:calc(82px + clamp(56px,10vh,120px)) 0 clamp(44px,7vh,80px);
  border-bottom:1px solid var(--line);
  overflow:hidden;
}
.page-hero-bg{
  position:absolute;
  inset:0;
  z-index:0;
}
.page-hero-bg::after{
  background:linear-gradient(180deg,rgba(4,6,10,.72),rgba(4,6,10,.86) 62%,var(--ink) 100%),
             radial-gradient(90% 70% at 18% 30%,transparent,rgba(4,6,10,.6));
}
.page-hero>.v2-wrap,.page-hero>.shell{position:relative;z-index:1}
.page-hero h1{
  font-size:var(--t-display-l);
  font-weight:900;
  letter-spacing:-.048em;
  line-height:.94;
  text-transform:uppercase;
  margin:0 0 22px;
  max-width:20ch;
}
.page-hero p{
  font-family:var(--serif);
  font-weight:380;
  font-size:clamp(1rem,1.2vw,1.16rem);
  line-height:1.78;
  color:#b5c2c4;
  max-width:58ch;
  margin:0;
}
.page-head-meta{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:26px;
}
.page-head-meta span,
.membership-hero-meta span,
.reputation-hero-meta span{
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:9px 14px;
  border:1px solid var(--line);
  border-radius:99px;
  background:rgba(10,15,19,.6);
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.04em;
  color:#a5b3b6;
}
.page-head-meta i,.membership-hero-meta i,.reputation-hero-meta i{color:var(--mint)}

/* --------------------------------------------------------------------------
   10. SHARED PANELS / NOTICES
   -------------------------------------------------------------------------- */
.panel{
  border:1px solid var(--line);
  background:linear-gradient(158deg,var(--ink-3),var(--ink-2) 60%,#070b0e);
  border-radius:var(--radius-lg);
  padding:clamp(24px,3.4vw,38px);
}
.panel-quiet{background:rgba(10,15,19,.5)}

.notice{
  display:flex;
  gap:16px;
  align-items:flex-start;
  padding:20px 22px;
  border:1px solid var(--line-2);
  border-left:2px solid var(--mint);
  border-radius:0 var(--radius-lg) var(--radius-lg) 0;
  background:linear-gradient(90deg,rgba(0,215,194,.05),rgba(10,15,19,.5) 70%);
  font-family:var(--serif);
  font-size:.95rem;
  line-height:1.7;
  color:#bccac8;
}
.notice>i{color:var(--mint);margin-top:.3em;flex:0 0 auto}
.notice strong{color:var(--bone);font-family:var(--sans);font-weight:700}
.notice p{margin:6px 0 0}
.notice p:first-child{margin-top:0}
.notice.warn{
  border-left-color:var(--sodium);
  border-color:rgba(232,162,74,.26);
  background:linear-gradient(90deg,rgba(232,162,74,.07),rgba(16,12,6,.5) 70%);
  color:#dfcda6;
}
.notice.warn>i{color:var(--sodium)}
.notice.warn strong{color:#f6e6c6}
.notice.danger{
  border-left-color:var(--danger);
  border-color:rgba(255,107,120,.26);
  background:linear-gradient(90deg,rgba(255,107,120,.07),rgba(16,8,9,.5) 70%);
  color:#e9b3b8;
}
.notice.danger>i{color:var(--danger)}

.legal-note{
  font-family:var(--serif);
  font-size:.82rem;
  line-height:1.7;
  color:var(--muted-2);
}
.empty-state{
  padding:56px 24px;
  text-align:center;
  font-family:var(--serif);
  color:var(--muted);
}
.loading{opacity:.6;pointer-events:none}
.review-muted{color:var(--muted);font-size:.82rem;margin:0;font-family:var(--serif)}

/* --------------------------------------------------------------------------
   11. RESPONSIVE FOUNDATION
   -------------------------------------------------------------------------- */
@media (max-width:1000px){
  .nav-links{display:none}
  .nav-toggle{display:inline-flex}
  .nav-inner,.nav-scrolled .nav-inner{height:68px}
  .v2-nav{background:rgba(5,7,10,.9);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
  .footer-top{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .footer-brand{grid-column:1/-1}
}
@media (max-width:700px){
  body.v2-body::before{display:none}
  :root{--chapter-pad:clamp(56px,8vh,88px)}
  .page-hero{padding-top:calc(68px + 44px)}
  .page-hero h1{max-width:none}
  .footer-top{grid-template-columns:minmax(0,1fr);gap:30px}
  .plate>div,.hero-meta>span{
    flex:1 1 100%;
    border-right:0;
    border-bottom:1px solid var(--line);
    padding-left:0!important;
  }
  .plate>div:last-child,.hero-meta>span:last-child{border-bottom:0}
  .btn-row .primary-btn,.btn-row .ghost-btn,
  .hero-actions .primary-btn,.hero-actions .ghost-btn{width:100%}
}

@media (prefers-reduced-motion:reduce){
  .js .reveal,.js .reveal-mask>*{
    opacity:1!important;
    transform:none!important;
    clip-path:none!important;
    transition:none!important;
  }
  .status-pill:not(.offline) .live-dot{animation:none}
  #pixelphScrollProgress{display:none}
  .mobile-nav:not(.hidden){animation:none}
  *,*::before,*::after{animation-duration:.001s!important;animation-iteration-count:1!important}
}
@media (hover:none){
  .nav-links a::after{display:none}
}

/* ==========================================================================
   12. HOMEPAGE — HERO TITLE CARD
   The one place, with the pull-quote plate, where centring is allowed.
   ========================================================================== */
.v2-hero{
  position:relative;
  min-height:100svh;
  display:flex;
  align-items:flex-end;
  padding:132px 0 0;
  overflow:hidden;
  isolation:isolate;
  background:#04060a;
}
.hero-media{
  position:absolute;
  inset:0;
  z-index:0;
}
.hero-media video,.hero-media img{
  width:100%;height:100%;
  object-fit:cover;
  object-position:50% 45%;
}
/* Cinematic grade over the footage: cool shadow, sodium highlight, vignette,
   and a hard fade into the next section. */
.hero-media::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  background:
    radial-gradient(78% 62% at 74% 28%,rgba(232,162,74,.1),transparent 60%),
    radial-gradient(70% 60% at 12% 70%,rgba(0,215,194,.09),transparent 62%),
    radial-gradient(140% 110% at 50% 40%,transparent 30%,rgba(4,6,10,.7) 100%),
    linear-gradient(180deg,rgba(4,6,10,.72) 0%,rgba(4,6,10,.3) 26%,rgba(4,6,10,.5) 56%,rgba(4,6,10,.94) 86%,var(--ink) 100%);
}
.hero-scan{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  opacity:.5;
  background:repeating-linear-gradient(180deg,rgba(255,255,255,.018) 0 1px,transparent 1px 3px);
}

.hero-content{
  position:relative;
  z-index:3;
  width:min(var(--shell),100% - (var(--gutter) * 2));
  margin-inline:auto;
  padding-bottom:clamp(40px,7vh,84px);
}
.hero-mark{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:clamp(22px,4vh,44px);
}
.hero-logo{
  height:clamp(34px,4.4vw,50px);
  width:auto;
  object-fit:contain;
  object-position:left center;
  filter:drop-shadow(0 6px 26px rgba(0,215,194,.14));
}
.hero-mark-rule{
  flex:1 1 auto;
  height:1px;
  background:linear-gradient(90deg,var(--line-3),transparent);
  max-width:280px;
}
.hero-mark .eyebrow{
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-size:.62rem;
  letter-spacing:.22em;
  color:#9fd8d0;
  white-space:nowrap;
}

.v2-hero h1{
  font-size:var(--t-display-xl);
  font-weight:900;
  letter-spacing:-.055em;
  line-height:.87;
  text-transform:uppercase;
  margin:0;
  max-width:16ch;
  color:#fff;
  text-shadow:0 24px 80px rgba(0,0,0,.55);
}
/* Second line set in the serif, at display scale, to break the wall of
   grotesque and read like a film title card. */
.v2-hero h1 em{
  display:block;
  font-family:var(--serif);
  font-style:italic;
  font-weight:300;
  font-size:.62em;
  letter-spacing:-.02em;
  line-height:1.02;
  text-transform:none;
  color:#c8fff4;
  margin-top:.06em;
}
.hero-lead{
  font-family:var(--serif);
  font-weight:380;
  font-size:clamp(1rem,1.3vw,1.22rem);
  line-height:1.75;
  color:#bdcacb;
  max-width:52ch;
  margin:clamp(20px,3vh,32px) 0 0;
}
.hero-lower{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,auto);
  align-items:end;
  gap:clamp(24px,4vw,56px);
  margin-top:clamp(28px,4.5vh,46px);
}
.hero-cta-col{display:flex;flex-direction:column;gap:18px;min-width:0}
.v2-hero .hero-meta{margin-top:clamp(26px,4vh,40px)}

.scroll-mark{
  position:absolute;
  right:max(var(--gutter),20px);
  bottom:34px;
  z-index:4;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  font-size:.58rem;
  font-weight:700;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--muted-2);
  writing-mode:vertical-rl;
  transition:opacity .4s var(--ease),transform .4s var(--ease);
}
.scroll-mark span{
  display:block;
  width:1px;height:52px;
  background:linear-gradient(180deg,var(--mint),transparent);
  writing-mode:horizontal-tb;
}
.scroll-mark.is-hidden{opacity:0;transform:translateY(10px)}

/* ==========================================================================
   13. MANIFESTO BAND — three principles as display type, no cards
   ========================================================================== */
.manifesto{
  border-bottom:1px solid var(--line);
  background:var(--ink);
  padding:clamp(54px,8vh,96px) 0;
}
.manifesto-list{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0;
  border-top:1px solid var(--line);
}
.manifesto-list>div{
  padding:clamp(26px,3.4vw,40px) clamp(20px,2.6vw,34px) clamp(26px,3.4vw,40px) 0;
  border-right:1px solid var(--line);
}
.manifesto-list>div:last-child{border-right:0}
.manifesto-list>div:not(:first-child){padding-left:clamp(20px,2.6vw,34px)}
.manifesto-list b{
  display:block;
  font-family:var(--sans);
  font-size:clamp(1.4rem,2.3vw,2.1rem);
  font-weight:850;
  letter-spacing:-.04em;
  line-height:1.04;
  color:#fff;
  margin-bottom:12px;
}
.manifesto-list b i{
  font-family:var(--serif);
  font-style:italic;
  font-weight:300;
  letter-spacing:-.018em;
}
.manifesto-list p{
  font-family:var(--serif);
  font-size:.92rem;
  line-height:1.72;
  color:var(--muted);
  margin:0;
  max-width:34ch;
}

/* ==========================================================================
   14. SPLIT SECTION — sticky type column beside a tall plate
   ========================================================================== */
.split{
  display:grid;
  grid-template-columns:minmax(0,1.14fr) minmax(0,.86fr);
  gap:clamp(32px,5vw,84px);
  align-items:start;
}
.split-flip{grid-template-columns:minmax(0,.82fr) minmax(0,1fr)}
.split-flip>.split-copy{order:2}
.split-flip>.split-media{order:1}
.split-copy{position:sticky;top:118px}
.split-copy h2{font-size:var(--t-display-m);margin-bottom:22px}
.split-media{position:relative}
.split-media .ph-frame{border-radius:var(--radius-lg)}

/* Numbered editorial list — used where content genuinely is a sequence */
.seq{margin:36px 0 0;padding:0;list-style:none;counter-reset:seq}
.seq>li{
  counter-increment:seq;
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:0 22px;
  padding:24px 0;
  border-top:1px solid var(--line);
}
.seq>li:last-child{border-bottom:1px solid var(--line)}
.seq>li::before{
  content:counter(seq,decimal-leading-zero);
  grid-row:1/span 2;
  font-family:var(--sans);
  font-size:.72rem;
  font-weight:750;
  letter-spacing:.1em;
  color:var(--mint);
  font-variant-numeric:tabular-nums;
  padding-top:.5em;
}
.seq h3{
  font-size:var(--t-title);
  font-weight:800;
  color:#fff;
  margin:0 0 8px;
}
.seq p{
  font-family:var(--serif);
  font-size:.94rem;
  line-height:1.74;
  color:var(--muted);
  margin:0;
  max-width:52ch;
}

/* Unnumbered fact rows — for content that is not a sequence */
.facts{margin:32px 0 0;padding:0;list-style:none}
.facts>li{
  display:grid;
  grid-template-columns:minmax(0,.3fr) minmax(0,1fr);
  gap:8px 32px;
  padding:20px 0;
  border-top:1px solid var(--line);
}
.facts>li:last-child{border-bottom:1px solid var(--line)}
.facts b{
  font-family:var(--sans);
  font-size:.82rem;
  font-weight:750;
  letter-spacing:.02em;
  color:#dce7e6;
}
.facts span{
  font-family:var(--serif);
  font-size:.92rem;
  line-height:1.72;
  color:var(--muted);
}

/* ==========================================================================
   15. CHAPTERS — the five city districts, alternating sides, each lit
   differently. This is the spine of the homepage.
   ========================================================================== */
.chapters{background:var(--ink);counter-reset:chap}
.chapter{
  position:relative;
  counter-increment:chap;
  display:grid;
  grid-template-columns:minmax(0,1.06fr) minmax(0,1fr);
  align-items:stretch;
  border-bottom:1px solid var(--line);
  min-height:min(78vh,760px);
}
.chapter:nth-child(even) .chapter-media{order:2}
.chapter:nth-child(even) .chapter-copy{order:1}
.chapter-media{position:relative;overflow:hidden;min-height:340px}
.chapter-media .ph-frame{position:absolute;inset:0}
.chapter-copy{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:clamp(44px,6vw,92px) clamp(28px,5vw,84px);
  background:linear-gradient(180deg,rgba(10,15,19,.34),transparent 60%);
}
/* District plate: the only place a caps label is used, because here it
   actually names a place. */
.chapter-plate{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:clamp(18px,3vh,30px);
}
.chapter-plate::before{
  content:counter(chap,decimal-leading-zero);
  font-family:var(--sans);
  font-size:.7rem;
  font-weight:800;
  letter-spacing:.12em;
  color:#04100e;
  background:var(--mint);
  padding:5px 8px;
  border-radius:2px;
  font-variant-numeric:tabular-nums;
}
.chapter-plate span{
  font-size:.66rem;
  font-weight:750;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:#9fb0b2;
}
.chapter-plate i{
  flex:1 1 auto;
  height:1px;
  background:linear-gradient(90deg,var(--line-2),transparent);
  max-width:120px;
}
.chapter-copy h2{
  font-size:clamp(1.9rem,3.4vw,3.05rem);
  font-weight:850;
  letter-spacing:-.042em;
  line-height:1.02;
  color:#fff;
  margin:0 0 20px;
  max-width:22ch;
}
.chapter-copy .prose{max-width:54ch;color:#b0bdbf}
.chapter-notes{
  margin:clamp(24px,3.6vh,36px) 0 0;
  padding:0;
  list-style:none;
  display:grid;
  gap:0;
}
.chapter-notes li{
  display:flex;
  align-items:baseline;
  gap:12px;
  padding:13px 0;
  border-top:1px solid var(--line);
  font-size:.86rem;
  color:#b9c5c6;
}
.chapter-notes li:last-child{border-bottom:1px solid var(--line)}
.chapter-notes li::before{
  content:"";
  flex:0 0 auto;
  width:5px;height:5px;
  margin-top:.45em;
  border-radius:50%;
  background:var(--mint);
  opacity:.7;
}
/* Sodium-lit chapters swap the marker colour so the light reads as warm */
.chapter.lit-sodium .chapter-plate::before{background:var(--sodium);color:#170d02}
.chapter.lit-sodium .chapter-notes li::before{background:var(--sodium)}
.chapter.lit-cold .chapter-plate::before{background:#9dc0ff;color:#04101f}
.chapter.lit-cold .chapter-notes li::before{background:#9dc0ff}
.chapter.lit-ember .chapter-plate::before{background:#e8766b;color:#1a0605}
.chapter.lit-ember .chapter-notes li::before{background:#e8766b}

/* ==========================================================================
   16. PULL-QUOTE PLATE — full-bleed image, one centred line, three facts
   ========================================================================== */
.quote-plate{
  position:relative;
  display:grid;
  place-items:center;
  min-height:min(74vh,660px);
  padding:clamp(64px,10vh,120px) 0;
  overflow:hidden;
  text-align:center;
  border-bottom:1px solid var(--line);
}
.quote-plate>.ph-frame{position:absolute;inset:0;z-index:0}
.quote-inner{position:relative;z-index:1;width:min(880px,100% - (var(--gutter) * 2))}
.quote-plate blockquote{
  margin:0;
  font-family:var(--serif);
  font-style:italic;
  font-weight:300;
  font-size:clamp(1.7rem,4.4vw,3.5rem);
  line-height:1.12;
  letter-spacing:-.028em;
  color:#fff;
  text-wrap:balance;
  text-shadow:0 18px 60px rgba(0,0,0,.5);
}
.quote-plate cite{
  display:block;
  margin-top:24px;
  font-family:var(--sans);
  font-style:normal;
  font-size:.66rem;
  font-weight:700;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:#8fa4a6;
}
.quote-stats{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:0;
  margin-top:clamp(36px,5vh,56px);
  border-top:1px solid var(--line-2);
  border-bottom:1px solid var(--line-2);
}
.quote-stats>div{
  flex:1 1 160px;
  padding:22px 20px;
  border-right:1px solid var(--line-2);
}
.quote-stats>div:last-child{border-right:0}
.quote-stats strong{
  display:block;
  font-family:var(--sans);
  font-size:clamp(1.6rem,3vw,2.3rem);
  font-weight:850;
  letter-spacing:-.04em;
  color:#fff;
  font-variant-numeric:tabular-nums;
}
.quote-stats span{
  display:block;
  margin-top:8px;
  font-size:.6rem;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted-2);
}

/* ==========================================================================
   17. FILM STRIP — a cinematic video band
   ========================================================================== */
.film-strip{
  position:relative;
  overflow:hidden;
  border-bottom:1px solid var(--line);
}
.film-strip .ph-frame{aspect-ratio:32/9;min-height:260px}
.film-caption{
  position:absolute;
  z-index:3;
  left:0;right:0;bottom:0;
  padding:clamp(24px,4vw,48px);
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  justify-content:space-between;
  gap:18px;
}
.film-caption h2{
  font-size:clamp(1.4rem,2.6vw,2.4rem);
  font-weight:850;
  letter-spacing:-.04em;
  color:#fff;
  margin:0;
  max-width:24ch;
}
.film-caption p{
  font-family:var(--serif);
  font-size:.9rem;
  line-height:1.7;
  color:#b2bfc1;
  margin:8px 0 0;
  max-width:46ch;
}

/* ==========================================================================
   18. GALLERY RAIL — horizontal scroll-snap of tall character plates
   ========================================================================== */
.rail-scroll{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:minmax(240px,clamp(240px,24vw,320px));
  gap:14px;
  overflow-x:auto;
  overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  padding:4px var(--gutter) 22px;
  margin-inline:calc(var(--gutter) * -1);
  scrollbar-width:thin;
  scrollbar-color:var(--line-3) transparent;
}
.rail-scroll::-webkit-scrollbar{height:3px}
.rail-scroll::-webkit-scrollbar-thumb{background:var(--line-3);border-radius:9px}
.rail-item{
  scroll-snap-align:start;
  position:relative;
  border-radius:var(--radius-lg);
  overflow:hidden;
}
.rail-item .ph-frame{aspect-ratio:3/4.1}
.rail-cap{
  position:absolute;
  z-index:3;
  inset:auto 0 0;
  padding:20px 18px;
}
.rail-cap b{
  display:block;
  font-family:var(--sans);
  font-size:1.02rem;
  font-weight:800;
  letter-spacing:-.026em;
  color:#fff;
}
.rail-cap span{
  display:block;
  margin-top:5px;
  font-family:var(--serif);
  font-size:.82rem;
  line-height:1.55;
  color:#a9b7b8;
}
.rail-hint{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:4px;
  font-size:.62rem;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted-2);
}
.rail-hint i{height:1px;flex:1 1 auto;background:var(--line);max-width:180px}

/* ==========================================================================
   19. CITY STATUS BAND — dispatch readout, not a rounded card
   ========================================================================== */
.status-band{
  position:relative;
  overflow:hidden;
  border-bottom:1px solid var(--line);
  padding:clamp(64px,10vh,112px) 0;
}
.status-band>.ph-frame{position:absolute;inset:0;z-index:0}
.status-band::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    radial-gradient(60% 90% at 88% 0%,rgba(0,215,194,.14),transparent 62%),
    linear-gradient(100deg,transparent 0%,transparent 44%,rgba(4,6,10,.58) 68%,rgba(4,6,10,.76) 100%);
}
.status-grid{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,auto);
  gap:clamp(30px,5vw,70px);
  align-items:end;
}
.status-readout{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:28px;
}
/* .live-stats sits between .status-readout and its two stat <div>s only to
   group them in the markup — display:contents removes it from layout, but
   a bare ">div" selector still only matches *its own* DOM children, so the
   card styling below is written to match both nesting levels explicitly. */
.status-readout>div,
.live-stats>div{
  flex:1 1 150px;
  padding:20px 22px;
  border-radius:var(--radius-lg);
  border:1px solid var(--line-2);
  background:rgba(5,9,12,.6);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.live-stats{display:contents}
.live-stats div{display:block}
.live-stats strong,.status-readout strong{
  display:block;
  font-family:var(--sans);
  font-size:clamp(2.1rem,4vw,3.2rem);
  font-weight:850;
  letter-spacing:-.05em;
  line-height:1;
  color:#fff;
  font-variant-numeric:tabular-nums;
}
.live-stats span,.status-readout span{
  display:block;
  margin-top:10px;
  font-size:.6rem;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted-2);
}
.status-pill{
  display:inline-flex;
  align-items:center;
  gap:9px;
  margin-top:22px;
  padding:9px 15px;
  border:1px solid rgba(0,215,194,.3);
  border-radius:99px;
  background:rgba(0,215,194,.08);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  color:#9deee2;
  font-size:.64rem;
  font-weight:750;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.status-pill:not(.offline) .live-dot{animation:statusPillPulse 2.2s ease-in-out infinite}
@keyframes statusPillPulse{
  0%,100%{box-shadow:0 0 0 3px rgba(0,215,194,.12),0 0 14px rgba(0,215,194,.8)}
  50%{box-shadow:0 0 0 5px rgba(0,215,194,.05),0 0 20px rgba(0,215,194,1)}
}
.status-pill.offline{
  border-color:rgba(255,107,120,.3);
  background:rgba(255,107,120,.08);
  color:#ff9ba4;
}

/* ==========================================================================
   20. RECRUITMENT CTA
   ========================================================================== */
.recruit{
  position:relative;
  overflow:hidden;
  display:grid;
  place-items:center;
  min-height:min(78vh,700px);
  padding:clamp(72px,11vh,140px) 0;
}
.recruit>.ph-frame{position:absolute;inset:0;z-index:0}
.recruit-inner{
  position:relative;
  z-index:1;
  width:min(var(--shell),100% - (var(--gutter) * 2));
}
.recruit h2{
  font-size:clamp(2.3rem,6.2vw,5rem);
  font-weight:900;
  letter-spacing:-.05em;
  line-height:.93;
  text-transform:uppercase;
  color:#fff;
  margin:0 0 24px;
  max-width:18ch;
}
.recruit .prose{max-width:52ch;font-size:1.06rem;color:#c0cdce}
.recruit .btn-row{margin-top:clamp(28px,4vh,44px)}
.recruit-steps{
  display:flex;
  flex-wrap:wrap;
  margin-top:clamp(40px,6vh,68px);
  border-top:1px solid var(--line-2);
  counter-reset:rstep;
}
.recruit-steps>div{
  flex:1 1 200px;
  counter-increment:rstep;
  padding:24px 26px 24px 0;
  border-right:1px solid var(--line-2);
}
.recruit-steps>div:last-child{border-right:0}
.recruit-steps>div:not(:first-child){padding-left:26px}
.recruit-steps>div::before{
  content:counter(rstep,decimal-leading-zero);
  display:block;
  font-size:.66rem;
  font-weight:750;
  letter-spacing:.14em;
  color:var(--mint);
  margin-bottom:12px;
  font-variant-numeric:tabular-nums;
}
.recruit-steps b{
  display:block;
  font-size:.95rem;
  font-weight:800;
  letter-spacing:-.02em;
  color:#fff;
  margin-bottom:7px;
}
.recruit-steps p{
  font-family:var(--serif);
  font-size:.86rem;
  line-height:1.68;
  color:var(--muted);
  margin:0;
  max-width:32ch;
}

/* ==========================================================================
   21. HOMEPAGE RESPONSIVE
   ========================================================================== */
@media (max-width:1000px){
  .split,.split-flip{grid-template-columns:minmax(0,1fr)}
  .split-copy{position:static;order:1!important}
  .split-media{order:2!important}
  .chapter{grid-template-columns:minmax(0,1fr);min-height:0}
  .chapter .chapter-media,.chapter:nth-child(even) .chapter-media{order:1!important}
  .chapter .chapter-copy,.chapter:nth-child(even) .chapter-copy{order:2!important}
  .chapter-media{min-height:0}
  .chapter-media .ph-frame{position:relative;inset:auto;aspect-ratio:16/10}
  .chapter-copy{padding:clamp(32px,7vw,48px) var(--gutter)}
  .manifesto-list{grid-template-columns:minmax(0,1fr)}
  .manifesto-list>div{
    border-right:0;
    border-bottom:1px solid var(--line);
    padding-left:0!important;
    padding-right:0;
  }
  .manifesto-list>div:last-child{border-bottom:0}
  .status-grid{grid-template-columns:minmax(0,1fr)}
  .hero-lower{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:700px){
  .v2-hero{min-height:auto;padding:112px 0 0}
  .v2-hero h1{max-width:none;letter-spacing:-.045em}
  .scroll-mark{display:none}
  .quote-stats>div,.recruit-steps>div{
    flex:1 1 100%;
    border-right:0;
    border-bottom:1px solid var(--line-2);
    padding-left:0!important;
    padding-right:0;
  }
  .quote-stats>div:last-child,.recruit-steps>div:last-child{border-bottom:0}
  .status-readout>div,.live-stats>div{flex:1 1 100%}
  .film-strip .ph-frame{aspect-ratio:4/5;min-height:0}
  .film-caption{position:static;padding:26px var(--gutter) 34px;background:var(--ink)}
  .quote-plate{min-height:0}
  .recruit{min-height:0}
}

/* ==========================================================================
   22. OPENING COUNTDOWN
   Presented as a city departure board. Timing logic is untouched:
   opening-countdown.js sets display:block on #cityOpeningCountdown and
   display:flex on #cityOpenMessage, so both must behave under those values.
   ========================================================================== */
.city-countdown{
  position:relative;
  width:min(620px,100%);
  border:1px solid var(--line-2);
  border-left:2px solid var(--mint);
  border-radius:0 var(--radius-lg) var(--radius-lg) 0;
  background:linear-gradient(120deg,rgba(6,14,16,.9),rgba(4,8,10,.7));
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  overflow:hidden;
}
.countdown-inner{padding:20px 22px 18px}
.countdown-head{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:16px;
  font-size:.6rem;
  font-weight:750;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:#9fd8d0;
}
.countdown-head i{flex:1 1 auto;height:1px;background:var(--line);max-width:90px}
.countdown-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--line);
}
.countdown-unit{
  padding:14px 12px 12px 0;
  border-right:1px solid var(--line);
}
.countdown-unit:last-child{border-right:0}
.countdown-unit:not(:first-child){padding-left:12px}
.countdown-grid strong{
  display:block;
  font-family:var(--sans);
  font-size:clamp(1.9rem,4.4vw,2.7rem);
  font-weight:850;
  line-height:1;
  letter-spacing:-.05em;
  color:#fff;
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
}
.countdown-grid span{
  display:block;
  margin-top:9px;
  font-size:.55rem;
  font-weight:750;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted-2);
}
.countdown-foot{
  margin-top:15px;
  padding-top:14px;
  border-top:1px solid var(--line);
}
.countdown-date{
  display:flex;
  align-items:center;
  gap:9px;
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:#c0cecf;
  flex-wrap:wrap;
}
.countdown-date i{color:var(--mint)}
.countdown-subline{
  margin-top:8px;
  font-family:var(--serif);
  font-size:.82rem;
  line-height:1.6;
  color:var(--muted);
}

.city-open-message{
  /* JS sets display:flex when the city opens */
  align-items:center;
  gap:15px;
  width:min(620px,100%);
  padding:18px 20px;
  border:1px solid rgba(0,215,194,.34);
  border-left:2px solid var(--mint);
  border-radius:0 var(--radius-lg) var(--radius-lg) 0;
  background:linear-gradient(120deg,rgba(4,24,21,.92),rgba(4,10,11,.85));
}
.city-open-message>div{display:flex;flex-direction:column;gap:5px}
.city-open-message strong{
  font-size:.78rem;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#b6ffee;
}
.city-open-message div span{
  font-family:var(--serif);
  font-size:.84rem;
  line-height:1.55;
  color:#8fa8a4;
}
.countdown-connect-locked{
  opacity:.42;
  pointer-events:none;
  filter:saturate(.4);
}

@media (max-width:560px){
  .countdown-grid{grid-template-columns:repeat(2,1fr)}
  .countdown-unit{border-bottom:1px solid var(--line)}
  .countdown-unit:nth-child(2){border-right:0}
  .countdown-unit:nth-child(3),.countdown-unit:nth-child(4){border-bottom:0}
  .countdown-unit:nth-child(3){padding-left:0}
}

/* ==========================================================================
   23. FORMS + WHITELIST APPLICATION
   whitelist.js requires .char-count to stay inside the same .field parent
   as its textarea, and toggles .hidden on #whitelistForm.
   ========================================================================== */
.form-shell{
  display:grid;
  grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);
  gap:clamp(24px,3.4vw,48px);
  align-items:start;
}
.side-card{position:sticky;top:104px}

/* --------------------------------------------------------------------------
   Application states.

   The two-column layout exists to put the guidance beside the form. Once the
   form is hidden -- approved, pending, a final rejection, or signed out --
   there is no form to sit beside, so the second column collapses to a small
   box and leaves a large void. In those states the section becomes a single
   centred column, the "before you apply" guidance is withdrawn because it no
   longer applies, and the account card drops to a slim strip underneath.
   -------------------------------------------------------------------------- */
.form-shell[data-form="closed"]{
  grid-template-columns:minmax(0,1fr);
  max-width:780px;
  margin-inline:auto;
  gap:22px;
}
.form-shell[data-form="closed"] .side-card{
  position:static;
  order:2;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px 20px;
  padding:18px clamp(18px,2.4vw,26px);
}
.form-shell[data-form="closed"] .side-card .icon{margin:0;font-size:1.05rem}
.form-shell[data-form="closed"] .side-card h2{
  margin:0;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted-2);
}
.form-shell[data-form="closed"] .side-card p{margin:0;font-size:.86rem;flex:1 1 180px}
.form-shell[data-form="closed"] .side-card #authArea{margin:0}
.form-shell[data-form="closed"] .apply-brief{display:none}
.form-shell[data-form="closed"] .form-column{order:1}

/* The status box carries the whole state when the form is gone, so it is
   given the weight of a section rather than the weight of a notice. */
.form-shell[data-form="closed"] .status-box{
  padding:clamp(28px,4vw,44px) clamp(24px,3.4vw,40px);
  border-left-width:2px;
}
/* The status sentence comes from whitelist.js and runs to about 65
   characters, so it is sized to settle on two lines rather than being blown
   up to display size and breaking into four short ones. */
.form-shell[data-form="closed"] .status-box h3{
  font-size:clamp(1.3rem,2.3vw,1.66rem);
  line-height:1.26;
  letter-spacing:-.018em;
  margin:16px 0 0;
  max-width:34ch;
}
.form-shell[data-form="closed"] .status-box p{
  font-size:.98rem;
  max-width:56ch;
  margin-top:14px;
}

/* State-specific next steps */
.next-panel{
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:linear-gradient(170deg,var(--ink-3),var(--ink-2) 60%,#070b0e);
  padding:clamp(24px,3.4vw,36px) clamp(22px,3vw,34px);
}
.next-panel[hidden]{display:none}
.next-panel h3{
  margin:0 0 22px;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--mint);
}
.next-steps{
  counter-reset:nextstep;
  list-style:none;
  margin:0;
  padding:0;
}
.next-steps li{
  counter-increment:nextstep;
  position:relative;
  padding:0 0 18px 46px;
  margin-bottom:18px;
  border-bottom:1px solid var(--line);
  font-family:var(--serif);
  font-size:.95rem;
  line-height:1.72;
  color:var(--muted);
}
.next-steps li:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
.next-steps li::before{
  content:counter(nextstep,decimal-leading-zero);
  position:absolute;
  left:0;
  top:.28em;
  font-family:var(--mono);
  font-size:.68rem;
  letter-spacing:.1em;
  color:var(--muted-2);
}
.next-steps li b{color:var(--bone);font-weight:700}
.next-actions{margin-top:26px}

@media (max-width:720px){
  .form-shell[data-form="closed"] .side-card{
    flex-direction:column;
    align-items:stretch;
  }
  /* flex-grow on the paragraph is what balances the desktop strip; stacked,
     it would stretch and push the sign-out button to the bottom of a gap. */
  .form-shell[data-form="closed"] .side-card p{flex:0 0 auto}
  .form-shell[data-form="closed"] .side-card #authArea,
  .form-shell[data-form="closed"] .side-card .ghost-btn{width:100%}
  .next-steps li{padding-left:0;padding-top:26px}
  .next-steps li::before{top:0}
}

.form-card{
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:linear-gradient(170deg,var(--ink-3),var(--ink-2) 55%,#070b0e);
  padding:clamp(24px,3vw,38px);
}
.form-legend{
  display:flex;
  align-items:baseline;
  gap:14px;
  padding-bottom:18px;
  margin-bottom:28px;
  border-bottom:1px solid var(--line);
}
.form-legend b{
  font-family:var(--sans);
  font-size:.66rem;
  font-weight:750;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--mint);
}
.form-legend span{
  font-family:var(--serif);
  font-size:.85rem;
  color:var(--muted);
}

.field{margin-bottom:26px;position:relative}
.field label{
  display:block;
  font-family:var(--sans);
  font-size:.86rem;
  font-weight:650;
  letter-spacing:-.008em;
  line-height:1.5;
  color:#dde8e7;
  margin-bottom:10px;
}
.field small{
  display:block;
  font-family:var(--serif);
  font-size:.8rem;
  line-height:1.6;
  color:var(--muted-2);
  margin-top:8px;
}
.field input,.field textarea,.field select,.admin-search input{
  width:100%;
  padding:14px 16px;
  border:1px solid var(--slate);
  border-radius:var(--radius);
  background:rgba(4,7,9,.85);
  color:var(--bone);
  font-family:var(--serif);
  font-size:1rem;
  line-height:1.7;
  outline:none;
  transition:border-color .22s,box-shadow .22s,background .22s;
}
.field input{font-family:var(--sans);font-size:.95rem}
.field textarea{min-height:168px;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:#546367}
.field input:focus,.field textarea:focus,.field select:focus{
  border-color:rgba(0,215,194,.5);
  background:rgba(4,9,11,.95);
  box-shadow:0 0 0 3px rgba(0,215,194,.07);
}
.field-check label{
  display:flex;
  align-items:flex-start;
  gap:12px;
  font-family:var(--serif);
  font-weight:400;
  font-size:.9rem;
  line-height:1.7;
  color:#c1cecd;
  cursor:pointer;
}
.field-check input[type=checkbox]{
  width:18px;
  height:18px;
  flex:0 0 auto;
  margin-top:.2em;
  accent-color:var(--mint);
}
.form-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px}
.char-count{
  font-family:var(--mono);
  font-size:.66rem;
  letter-spacing:.04em;
  color:var(--muted-2);
  text-align:right;
  margin-top:7px;
  min-height:1em;
}

.status-box{
  padding:24px 26px;
  border:1px solid var(--line);
  border-left:2px solid var(--slate);
  border-radius:0 var(--radius-lg) var(--radius-lg) 0;
  background:linear-gradient(100deg,rgba(10,15,19,.8),rgba(7,11,14,.5));
  font-family:var(--serif);
  color:#b8c5c4;
  line-height:1.7;
}
.status-box h3{
  font-family:var(--sans);
  font-size:1.22rem;
  font-weight:800;
  letter-spacing:-.028em;
  color:#fff;
}
.status-box p{margin:8px 0 0;color:var(--muted)}
.status-box.pending{border-left-color:var(--sodium)}
.status-box.approved{border-left-color:var(--mint)}
.status-box.rejected{border-left-color:var(--danger)}
.status-box.revoked{border-left-color:#e08b4a}
.badge{
  display:inline-flex;
  align-items:center;
  padding:7px 11px;
  border:1px solid var(--line-2);
  border-radius:99px;
  background:rgba(0,215,194,.06);
  font-family:var(--sans);
  font-size:.6rem;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#9df6e9;
}
.status-box.pending .badge{background:rgba(232,162,74,.08);border-color:rgba(232,162,74,.3);color:#f2cf94}
.status-box.rejected .badge{background:rgba(255,107,120,.08);border-color:rgba(255,107,120,.3);color:#ffb0b7}

/* Application checklist in the aside */
.side-card{
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:linear-gradient(170deg,var(--ink-3),var(--ink-2) 60%,#070b0e);
  padding:clamp(22px,2.6vw,30px);
}
.side-card h2{font-size:1.24rem;font-weight:800;margin:0 0 12px}
.side-card h3{
  font-size:.66rem;
  font-weight:750;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted-2);
  margin:28px 0 14px;
}
.side-card p{font-family:var(--serif);font-size:.9rem;line-height:1.72;color:var(--muted);margin:0}
.side-card ul{margin:0 0 20px;padding:0;list-style:none}
.side-card li{
  display:flex;
  gap:11px;
  padding:11px 0;
  border-top:1px solid var(--line);
  font-family:var(--serif);
  font-size:.88rem;
  line-height:1.6;
  color:#b4c1c1;
}
.side-card li::before{
  content:"";
  flex:0 0 auto;
  width:5px;height:5px;
  margin-top:.55em;
  border-radius:50%;
  background:var(--mint);
  opacity:.65;
}
.side-card .icon{font-size:1.3rem;color:var(--mint);margin-bottom:16px}
.side-card hr{border:0;border-top:1px solid var(--line);margin:26px 0}
.side-card .primary-btn,.side-card .ghost-btn{width:100%}

/* ==========================================================================
   24. GENERIC CONTENT CARDS (about page, legacy markup)
   ========================================================================== */
.content-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0;
  border-top:1px solid var(--line);
}
.content-card{
  padding:clamp(28px,3.2vw,42px) clamp(24px,3vw,40px) clamp(28px,3.2vw,42px) 0;
  border-bottom:1px solid var(--line);
  border-right:1px solid var(--line);
}
.content-card:nth-child(even){border-right:0;padding-left:clamp(24px,3vw,40px)}
.content-card h2,.content-card h3{
  font-size:var(--t-title);
  font-weight:800;
  color:#fff;
  margin:0 0 14px;
}
.content-card p,.content-card li{
  font-family:var(--serif);
  font-size:.95rem;
  line-height:1.78;
  color:var(--muted);
}
.content-card p{margin:0 0 .9em;max-width:52ch}
.content-card p:last-child{margin-bottom:0}
.content-card ul{margin:16px 0 0;padding-left:20px}
.content-card .icon{font-size:1.24rem;color:var(--mint);margin-bottom:18px}

/* Numbered process steps (join page) */
.steps{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0;
  counter-reset:step;
  border-top:1px solid var(--line-2);
}
.step{
  counter-increment:step;
  padding:clamp(28px,3.4vw,40px) clamp(22px,2.8vw,34px) clamp(28px,3.4vw,40px) 0;
  border-right:1px solid var(--line);
}
.step:last-child{border-right:0}
.step:not(:first-child){padding-left:clamp(22px,2.8vw,34px)}
.step::before{
  content:counter(step,decimal-leading-zero);
  display:block;
  font-family:var(--sans);
  font-size:.68rem;
  font-weight:750;
  letter-spacing:.14em;
  color:var(--mint);
  margin-bottom:18px;
  font-variant-numeric:tabular-nums;
}
.step h3{font-size:var(--t-title);font-weight:800;color:#fff;margin:0 0 12px}
.step p{
  font-family:var(--serif);
  font-size:.92rem;
  line-height:1.74;
  color:var(--muted);
  margin:0 0 20px;
  max-width:34ch;
}

/* Section head used across inner pages */
.sec-head{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.7fr);
  gap:clamp(24px,4vw,64px);
  align-items:end;
  margin-bottom:clamp(28px,4vh,48px);
}
.sec-head h2{font-size:var(--t-display-m)}
.sec-head>p{
  font-family:var(--serif);
  font-size:.98rem;
  line-height:1.78;
  color:var(--muted);
  margin:0;
  max-width:46ch;
}

@media (max-width:900px){
  .form-shell{grid-template-columns:minmax(0,1fr)}
  .side-card{position:static}
  .form-row{grid-template-columns:minmax(0,1fr)}
  .content-grid{grid-template-columns:minmax(0,1fr)}
  .content-card,.content-card:nth-child(even){
    border-right:0;
    padding-left:0;
    padding-right:0;
  }
  .steps{grid-template-columns:minmax(0,1fr)}
  .step,.step:not(:first-child){
    border-right:0;
    border-bottom:1px solid var(--line);
    padding-left:0;
    padding-right:0;
  }
  .step:last-child{border-bottom:0}
  .sec-head{grid-template-columns:minmax(0,1fr);gap:18px}
  .facts>li{grid-template-columns:minmax(0,1fr);gap:6px}
}

/* ==========================================================================
   25. CITY CODE / RULEBOOK
   Set like a published handbook: serif body, clear hierarchy, a sticky
   index, and no accordions. Rule text is unchanged from V5.13.
   Search contract preserved: #ruleSearch toggles [hidden] on
   .rule-search-item and .rules-category.
   ========================================================================== */
.rules-layout{
  display:grid;
  grid-template-columns:minmax(0,232px) minmax(0,1fr);
  gap:clamp(28px,4.4vw,72px);
  align-items:start;
}
.rules-sidebar,.rules-content{min-width:0}
.rules-sidebar{position:sticky;top:96px;z-index:5}

.rules-category-nav{display:flex;flex-direction:column;gap:0}
.rules-category-nav::before{
  content:"Contents";
  display:block;
  font-family:var(--sans);
  font-size:.6rem;
  font-weight:750;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--muted-2);
  padding:0 0 14px;
  border-bottom:1px solid var(--line);
  margin-bottom:6px;
}
.rules-category-nav a{
  display:flex;
  align-items:baseline;
  gap:11px;
  padding:10px 12px 10px 13px;
  border-left:1px solid var(--line);
  font-family:var(--sans);
  font-size:.83rem;
  font-weight:600;
  line-height:1.45;
  color:#93a2a3;
  transition:color .2s,border-color .2s,background .2s;
  counter-increment:toc;
}
.rules-category-nav{counter-reset:toc}
.rules-category-nav a::before{
  content:counter(toc,decimal-leading-zero);
  font-size:.6rem;
  font-weight:700;
  letter-spacing:.08em;
  color:var(--muted-2);
  font-variant-numeric:tabular-nums;
  flex:0 0 auto;
}
.rules-category-nav a:hover{
  color:#dffdf5;
  border-left-color:var(--mint);
  background:linear-gradient(90deg,rgba(0,215,194,.05),transparent);
}
.rules-category-nav a.is-current{
  color:#fff;
  border-left-color:var(--mint);
  background:linear-gradient(90deg,rgba(0,215,194,.08),transparent);
}
.rules-category-nav a.is-current::before{color:var(--mint)}

.rules-search-wrap{
  position:sticky;
  top:82px;
  z-index:6;
  padding:14px 0 18px;
  background:linear-gradient(180deg,var(--ink) 68%,rgba(5,7,10,.86) 88%,transparent);
}
.rules-search-field{position:relative;display:flex;align-items:center}
.rules-search-field>i{
  position:absolute;
  left:16px;
  color:var(--muted-2);
  font-size:.85rem;
  pointer-events:none;
}
.rules-search{
  width:100%;
  min-height:54px;
  padding:0 52px 0 42px;
  border:1px solid var(--slate);
  border-radius:var(--radius);
  background:rgba(8,12,15,.92);
  color:var(--bone);
  font-family:var(--sans);
  font-size:.95rem;
  outline:none;
  -webkit-user-select:text;
  user-select:text;
  caret-color:var(--mint);
  transition:border-color .22s,box-shadow .22s;
}
.rules-search::placeholder{color:#54636a}
.rules-search::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.rules-search:focus{
  border-color:rgba(0,215,194,.5);
  box-shadow:0 0 0 3px rgba(0,215,194,.07);
}
.rules-search-clear{
  position:absolute;
  right:8px;
  width:38px;height:38px;
  display:none;
  align-items:center;
  justify-content:center;
  background:transparent;
  border:0;
  border-radius:var(--radius);
  color:var(--muted);
  font-size:1rem;
  cursor:pointer;
}
.rules-search-clear:hover{color:var(--bone);background:rgba(255,255,255,.04)}
.rules-search-wrap.has-query .rules-search-clear{display:inline-flex}
.rules-search-count{
  margin-top:11px;
  font-family:var(--mono);
  font-size:.68rem;
  letter-spacing:.04em;
  color:var(--muted-2);
  min-height:1em;
}
.rules-search-count b{color:var(--mint-2);font-weight:600}
.rules-no-results{
  display:none;
  padding:44px 0;
  border-top:1px solid var(--line);
  font-family:var(--serif);
  font-size:1rem;
  line-height:1.75;
  color:var(--muted);
}
.rules-no-results strong{
  display:block;
  font-family:var(--sans);
  font-size:1.15rem;
  font-weight:800;
  color:#fff;
  margin-bottom:8px;
}
.rules-search-wrap.no-results ~ .rules-body .rules-no-results,
.rules-content.no-results .rules-no-results{display:block}

.rules-reading-guide{
  display:flex;
  flex-wrap:wrap;
  gap:0;
  margin:0 0 clamp(40px,6vh,68px);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  font-family:var(--serif);
  font-size:.86rem;
  color:var(--muted);
}
.rules-reading-guide>span{
  flex:1 1 190px;
  padding:15px 20px 15px 0;
  border-right:1px solid var(--line);
}
.rules-reading-guide>span:last-child{border-right:0}
.rules-reading-guide>span:not(:first-child){padding-left:20px}

.rules-category{
  scroll-margin-top:150px;
  margin-bottom:clamp(56px,9vh,104px);
}
.rules-category>h2{
  font-size:clamp(1.7rem,3vw,2.5rem);
  font-weight:850;
  letter-spacing:-.038em;
  line-height:1.04;
  color:#fff;
  margin:0 0 10px;
}
.rules-category-desc{
  font-family:var(--serif);
  font-size:.96rem;
  line-height:1.76;
  color:var(--muted);
  max-width:56ch;
  margin:0 0 clamp(18px,3vh,30px);
  padding-bottom:clamp(14px,2vh,22px);
  border-bottom:1px solid var(--line-2);
}

.rule-entry{padding:clamp(26px,3.4vh,36px) 0;border-bottom:1px solid var(--line)}
.rule-entry:last-of-type{border-bottom:1px solid var(--line-2)}
.rule-entry-title{
  font-family:var(--sans);
  font-size:1.06rem;
  font-weight:800;
  letter-spacing:-.018em;
  line-height:1.34;
  color:#c8f4e6;
  margin:0 0 16px;
  max-width:44ch;
}
.rule-entry>p,
.rule-entry-body,
.rule-entry-body p,
.full-rulebook .rule-detail-body p{
  font-family:var(--serif);
  font-weight:380;
  font-size:1rem;
  line-height:1.82;
  color:#aebbba;
  max-width:72ch;
}
.rule-entry>p{margin:0 0 1em}
.rule-entry>p:last-child{margin-bottom:0}
.rule-entry-body>p{margin:0 0 1em}
.rule-entry-body>p:last-child{margin-bottom:0}
.rule-entry-body .rule-list,
.full-rulebook .rule-list{
  margin:1em 0;
  padding-left:24px;
  max-width:70ch;
}
.rule-entry-body .rule-list li,
.full-rulebook .rule-list li{
  font-family:var(--serif);
  font-size:1rem;
  line-height:1.78;
  color:#aebbba;
  margin:.5em 0;
  padding-left:4px;
}
.rule-entry-body .rule-list li::marker,
.full-rulebook .rule-list li::marker{color:rgba(0,215,194,.6)}

/* Examples and asides read as marginalia, not as boxes */
.rule-example,.full-rulebook .rule-example{
  margin:1.2em 0;
  padding:2px 0 2px 20px;
  border-left:2px solid rgba(0,215,194,.4);
  border-radius:0;
  background:none;
  font-family:var(--serif);
  font-size:.95rem;
  font-style:italic;
  line-height:1.76;
  color:#a4b6b3;
  max-width:66ch;
}
.rule-note-line{
  margin-top:1.6em!important;
  padding-top:16px;
  border-top:1px solid var(--line);
  font-family:var(--serif);
  font-size:.9rem;
  line-height:1.72;
  color:var(--muted-2);
  max-width:68ch;
}

/* The philosophy opener gets the one piece of weight in the document */
.philosophy-card{
  padding:clamp(26px,3.4vw,40px) clamp(26px,3.4vw,40px) clamp(26px,3.4vw,40px) clamp(24px,3vw,34px);
  border:1px solid var(--line-2);
  border-left:2px solid var(--mint);
  border-radius:0 var(--radius-lg) var(--radius-lg) 0;
  background:linear-gradient(100deg,rgba(0,215,194,.05),rgba(10,15,19,.5) 64%);
  margin-bottom:clamp(20px,3vh,32px);
}
.philosophy-card h3{
  font-family:var(--sans);
  font-size:1.28rem;
  font-weight:850;
  letter-spacing:-.028em;
  color:#fff;
  margin:0 0 16px;
}
.philosophy-card p{
  font-family:var(--serif);
  font-size:1.04rem;
  line-height:1.78;
  color:#c3d1cf;
  margin:0 0 .85em;
  max-width:62ch;
}
.philosophy-card p:last-child{margin-bottom:0}

/* Keybinds — a real table, two columns, mono keys */
.keybind-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 clamp(24px,4vw,56px);
  margin:1.4em 0;
  border-top:1px solid var(--line-2);
}
.keybind-row{
  display:grid;
  grid-template-columns:112px minmax(0,1fr);
  align-items:center;
  gap:16px;
  padding:11px 0;
  border-bottom:1px solid var(--line);
}
.keybind-row kbd{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:30px;
  padding:5px 10px;
  border:1px solid var(--slate);
  border-bottom-width:2px;
  border-radius:4px;
  background:linear-gradient(180deg,#101a1d,#080d10);
  color:#d6f7ee;
  font-family:var(--mono);
  font-size:.7rem;
  font-weight:600;
  letter-spacing:.03em;
  white-space:nowrap;
}
.keybind-row span{
  font-family:var(--sans);
  font-size:.86rem;
  color:#b6c4c0;
}

/* Preserve V5.7.1 behaviour: rule text is not selectable, so clicking it
   does not produce a text caret. The search input stays selectable. */
.rules-page .page-hero,
.rules-page .rules-content,
.rules-page .rules-sidebar,
.rules-page .rule-entry,
.rules-page .rule-entry-body,
.rules-page .rule-list,
.rules-page .philosophy-card,
.rules-page .notice,
.rules-page .keybind-grid,
.rules-page .content-card,
.rules-page .code-index{
  -webkit-user-select:none;
  user-select:none;
  caret-color:transparent;
}
.rules-page a,.rules-page button{-webkit-user-select:none;user-select:none}
.rule-search-item[hidden],.rules-category[hidden]{display:none!important}

/* Back-to-top pill on long documents */
.to-top{
  position:fixed;
  right:max(var(--gutter),18px);
  bottom:24px;
  z-index:40;
  width:44px;height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--line-2);
  border-radius:50%;
  background:rgba(7,11,14,.9);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  color:#b9c6c6;
  cursor:pointer;
  opacity:0;
  transform:translateY(10px);
  pointer-events:none;
  transition:opacity .3s var(--ease),transform .3s var(--ease),border-color .2s,color .2s;
}
.to-top.is-visible{opacity:1;transform:none;pointer-events:auto}
.to-top:hover{border-color:var(--mint);color:var(--mint-2)}

/* Rules overview page — the City Code index */
.code-index{margin:0;padding:0;list-style:none;border-top:1px solid var(--line-2)}
.code-index>li{border-bottom:1px solid var(--line)}
.code-index a{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:baseline;
  gap:8px 24px;
  padding:clamp(20px,2.6vh,28px) 6px;
  transition:background .25s var(--ease),padding-left .25s var(--ease);
}
.code-index a:hover{background:linear-gradient(90deg,rgba(0,215,194,.05),transparent 70%);padding-left:14px}
.code-index .ci-n{
  font-family:var(--sans);
  font-size:.66rem;
  font-weight:750;
  letter-spacing:.12em;
  color:var(--mint);
  font-variant-numeric:tabular-nums;
  padding-top:.35em;
}
.code-index h3{
  font-family:var(--sans);
  font-size:clamp(1.12rem,1.8vw,1.45rem);
  font-weight:800;
  letter-spacing:-.028em;
  color:#fff;
  margin:0 0 8px;
}
.code-index p{
  font-family:var(--serif);
  font-size:.92rem;
  line-height:1.72;
  color:var(--muted);
  margin:0;
  max-width:62ch;
}
.code-index .ci-go{
  align-self:center;
  font-size:.85rem;
  color:var(--muted-2);
  transition:color .2s,transform .25s var(--ease);
}
.code-index a:hover .ci-go{color:var(--mint);transform:translateX(3px)}

@media (max-width:1000px){
  .rules-layout{grid-template-columns:minmax(0,1fr);gap:0}
  .rules-sidebar{
    position:sticky;
    top:68px;
    margin:0 calc(var(--gutter) * -1);
    padding:0;
    background:rgba(5,7,10,.96);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    border-bottom:1px solid var(--line);
  }
  .rules-category-nav{
    flex-direction:row;
    overflow-x:auto;
    overscroll-behavior-x:contain;
    scrollbar-width:none;
    padding:0 var(--gutter);
    counter-reset:toc;
  }
  .rules-category-nav::-webkit-scrollbar{display:none}
  .rules-category-nav::before{display:none}
  .rules-category-nav a{
    flex:0 0 auto;
    border-left:0;
    border-bottom:2px solid transparent;
    padding:14px 2px;
    margin-right:22px;
    white-space:nowrap;
    background:none!important;
  }
  .rules-category-nav a::before{display:none}
  .rules-category-nav a.is-current{border-bottom-color:var(--mint)}
  .rules-search-wrap{top:120px}
  .rules-category{scroll-margin-top:196px}
  .keybind-grid{grid-template-columns:minmax(0,1fr)}
  .rules-reading-guide>span{
    flex:1 1 100%;
    border-right:0;
    border-bottom:1px solid var(--line);
    padding-left:0!important;
  }
  .rules-reading-guide>span:last-child{border-bottom:0}
}
@media (max-width:560px){
  .keybind-row{grid-template-columns:98px minmax(0,1fr);gap:12px}
  .code-index a{grid-template-columns:auto minmax(0,1fr);gap:6px 16px}
  .code-index .ci-go{display:none}
}

/* ==========================================================================
   26. MEMBERSHIP
   Products, prices, priority weights and capacity are unchanged.
   membership.js toggles .signed-out / .inactive / .active on
   #membershipStatus and writes into #membershipStatusTitle/Copy.
   ========================================================================== */
.membership-shell{overflow-x:clip}

.membership-status-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:26px;
  padding:24px 26px;
  border:1px solid var(--line);
  border-left:2px solid var(--slate);
  border-radius:0 var(--radius-lg) var(--radius-lg) 0;
  background:linear-gradient(100deg,rgba(10,15,19,.78),rgba(7,11,14,.45));
  margin-bottom:clamp(44px,7vh,76px);
}
.membership-status-card h2{
  font-size:1.28rem;
  font-weight:800;
  letter-spacing:-.028em;
  color:#fff;
  margin:0 0 8px;
}
.membership-status-card p{
  font-family:var(--serif);
  font-size:.92rem;
  line-height:1.7;
  color:var(--muted);
  margin:0;
  max-width:56ch;
}
.membership-status-card.active{border-left-color:var(--mint)}
.membership-status-card.inactive{border-left-color:var(--sodium)}
.membership-status-card .ghost-btn{flex:0 0 auto}

.membership-section-head{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.68fr);
  gap:clamp(24px,4vw,64px);
  align-items:end;
  margin:clamp(48px,7vh,80px) 0 clamp(24px,3.5vh,38px);
}
.membership-section-head h2{font-size:var(--t-display-m);margin:0}
.membership-section-head>p{
  font-family:var(--serif);
  font-size:.98rem;
  line-height:1.78;
  color:var(--muted);
  margin:0;
  max-width:46ch;
}

.membership-grid{display:grid;gap:18px}
.priority-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.supporter-grid,.showroom-grid{grid-template-columns:repeat(2,minmax(0,1fr))}

.membership-card{
  position:relative;
  display:flex;
  flex-direction:column;
  padding:clamp(26px,3vw,36px);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:linear-gradient(165deg,var(--ink-3),var(--ink-2) 52%,#06090c);
  overflow:hidden;
}
.membership-card::before{
  content:"";
  position:absolute;
  inset:0 0 auto;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--line-3) 30%,transparent);
}
.membership-card.featured{
  border-color:rgba(0,215,194,.28);
  background:
    radial-gradient(80% 60% at 84% 0%,rgba(0,215,194,.09),transparent 62%),
    linear-gradient(165deg,var(--ink-3),var(--ink-2) 52%,#06090c);
}
.membership-card.featured::before{background:linear-gradient(90deg,transparent,var(--mint) 42%,transparent)}
.membership-ribbon{
  position:absolute;
  top:0;right:0;
  padding:7px 13px;
  background:var(--mint);
  color:#02100e;
  font-family:var(--sans);
  font-size:.58rem;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
  border-radius:0 0 0 var(--radius);
}
.membership-card-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  color:var(--mint-2);
}
.membership-card-top i{font-size:1.2rem;opacity:.75}
.membership-type{
  font-family:var(--sans);
  font-size:.6rem;
  font-weight:750;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:#8fb4b2;
}
.membership-card h3{
  font-size:clamp(1.6rem,2.4vw,2.05rem);
  font-weight:850;
  letter-spacing:-.038em;
  color:#fff;
  margin:22px 0 12px;
}
.membership-price-tag{
  display:flex;
  align-items:baseline;
  gap:9px;
  padding-bottom:20px;
  margin-bottom:20px;
  border-bottom:1px solid var(--line);
}
.membership-price-tag b{
  font-family:var(--sans);
  font-size:clamp(1.6rem,2.6vw,2.1rem);
  font-weight:850;
  letter-spacing:-.045em;
  color:#fff;
  font-variant-numeric:tabular-nums;
}
.membership-price-tag span{
  font-family:var(--sans);
  font-size:.7rem;
  font-weight:650;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--muted-2);
}
.membership-lead,.membership-card>p{
  font-family:var(--serif);
  font-size:.96rem;
  line-height:1.76;
  color:#adbabb;
  margin:0 0 22px;
  max-width:46ch;
}
.membership-card ul{
  margin:0 0 26px;
  padding:0;
  list-style:none;
  border-top:1px solid var(--line);
}
.membership-card li{
  display:flex;
  gap:12px;
  padding:12px 0;
  border-bottom:1px solid var(--line);
  font-family:var(--sans);
  font-size:.84rem;
  line-height:1.6;
  color:#a9b7b8;
}
.membership-card li::before{
  content:"";
  flex:0 0 auto;
  width:5px;height:5px;
  margin-top:.55em;
  border-radius:50%;
  background:var(--mint);
  opacity:.6;
}
.membership-card li:last-child{border-bottom:0}
.membership-card li strong{color:#e2eceb;font-weight:700}
.membership-card ul:has(+ .membership-card-footer){flex:1 1 auto}
.membership-card-footer{
  margin-top:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding-top:20px;
  border-top:1px solid var(--line);
}
.membership-price{
  font-family:var(--sans);
  font-size:.74rem;
  font-weight:650;
  letter-spacing:.04em;
  color:var(--muted);
}

/* Capacity readout */
.queue-capacity{
  display:flex;
  flex-wrap:wrap;
  margin:22px 0 clamp(52px,8vh,86px);
  border-top:1px solid var(--line-2);
  border-bottom:1px solid var(--line-2);
}
.queue-capacity>div{
  flex:1 1 140px;
  padding:24px 22px 24px 0;
  border-right:1px solid var(--line-2);
}
.queue-capacity>div:last-child{border-right:0}
.queue-capacity>div:not(:first-child){padding-left:22px}
.queue-capacity span{
  display:block;
  font-family:var(--sans);
  font-size:clamp(1.8rem,3.2vw,2.5rem);
  font-weight:850;
  letter-spacing:-.05em;
  line-height:1;
  color:#fff;
  font-variant-numeric:tabular-nums;
}
.queue-capacity small{
  display:block;
  margin-top:10px;
  font-size:.6rem;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted-2);
}
.queue-capacity .queue-total span{color:var(--mint)}

/* The fair-play contrast table — the clearest statement on the page */
.fairplay{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0;
  border-top:1px solid var(--line-2);
  margin-top:clamp(20px,3vh,30px);
}
.fairplay>div{padding:clamp(24px,3vw,34px) clamp(22px,2.8vw,32px) clamp(24px,3vw,34px) 0}
.fairplay>div:first-child{border-right:1px solid var(--line-2)}
.fairplay>div:last-child{padding-left:clamp(22px,2.8vw,32px)}
.fairplay h3{
  display:flex;
  align-items:center;
  gap:11px;
  font-family:var(--sans);
  font-size:.68rem;
  font-weight:750;
  letter-spacing:.18em;
  text-transform:uppercase;
  margin:0 0 20px;
  color:var(--mint);
}
.fairplay-no h3{color:var(--sodium)}
.fairplay ul{margin:0;padding:0;list-style:none}
.fairplay li{
  display:flex;
  gap:12px;
  padding:11px 0;
  border-top:1px solid var(--line);
  font-family:var(--serif);
  font-size:.93rem;
  line-height:1.7;
  color:#b2c0c0;
}
.fairplay li::before{
  content:"";
  flex:0 0 auto;
  width:9px;height:1px;
  margin-top:.85em;
  background:var(--mint);
}
.fairplay-no li::before{background:var(--sodium)}

.membership-disclaimer,
.reputation-disclaimer,
.showroom-notice{
  display:flex;
  gap:16px;
  align-items:flex-start;
  padding:22px 24px;
  margin-top:clamp(24px,4vh,40px);
  border:1px solid var(--line);
  border-left:2px solid var(--mint);
  border-radius:0 var(--radius-lg) var(--radius-lg) 0;
  background:linear-gradient(100deg,rgba(0,215,194,.04),rgba(10,15,19,.45) 66%);
}
.membership-disclaimer>i,.showroom-notice>i{color:var(--mint);margin-top:.3em;flex:0 0 auto}
.reputation-disclaimer{
  border-left-color:var(--sodium);
  background:linear-gradient(100deg,rgba(232,162,74,.05),rgba(14,11,7,.45) 66%);
}
.reputation-disclaimer>i{color:var(--sodium);margin-top:.3em;flex:0 0 auto}
.membership-disclaimer strong,
.reputation-disclaimer strong,
.showroom-notice strong{
  display:block;
  font-family:var(--sans);
  font-size:.95rem;
  font-weight:750;
  letter-spacing:-.015em;
  color:#fff;
  margin-bottom:8px;
}
.reputation-disclaimer strong{color:#f6e6c6}
.membership-disclaimer p,
.reputation-disclaimer p,
.showroom-notice p{
  margin:0;
  font-family:var(--serif);
  font-size:.92rem;
  line-height:1.74;
  color:var(--muted);
  max-width:76ch;
}

.showroom-bridge{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:32px;
  margin-top:clamp(48px,7vh,80px);
  padding:clamp(28px,3.4vw,40px);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:
    radial-gradient(70% 100% at 92% 10%,rgba(232,162,74,.07),transparent 62%),
    linear-gradient(160deg,var(--ink-3),var(--ink-2));
}
.showroom-bridge h2{font-size:clamp(1.5rem,2.4vw,2.1rem);margin:0 0 12px;max-width:26ch}
.showroom-bridge p{
  font-family:var(--serif);
  font-size:.94rem;
  line-height:1.74;
  color:var(--muted);
  margin:0;
  max-width:58ch;
}
.showroom-bridge .primary-btn{flex:0 0 auto}

/* ==========================================================================
   27. SHOWROOM
   ========================================================================== */
.showroom-card{
  display:flex;
  flex-direction:column;
  padding:0;
  overflow:hidden;
}
.showroom-card .ph-frame{aspect-ratio:16/10}
.showroom-card-inner{padding:clamp(24px,2.8vw,32px);display:flex;flex-direction:column;flex:1 1 auto}
.showroom-card h3{margin:18px 0 12px}
.showroom-card>.showroom-card-inner>ul{flex:1 1 auto}
.showroom-card-footer{
  margin-top:auto;
  padding-top:20px;
  border-top:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.showroom-card-footer span{
  font-family:var(--serif);
  font-size:.85rem;
  line-height:1.6;
  color:var(--muted-2);
  max-width:26ch;
}
.showroom-card-footer .ghost-btn{flex:0 0 auto}

/* ==========================================================================
   28. REPUTATION — the progression arc
   ========================================================================== */
.arc{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:0;
  margin:clamp(28px,4vh,46px) 0 0;
  border-top:1px solid var(--line-2);
  counter-reset:arc;
}
.arc-stage{
  position:relative;
  counter-increment:arc;
  padding:clamp(26px,2.8vw,34px) clamp(18px,1.8vw,24px) clamp(26px,2.8vw,34px) 0;
  border-right:1px solid var(--line);
}
.arc-stage:last-child{border-right:0}
.arc-stage:not(:first-child){padding-left:clamp(18px,1.8vw,24px)}
/* A light that gets brighter along the arc — trust accumulating */
.arc-stage::before{
  content:"";
  position:absolute;
  left:0;top:-1px;
  width:100%;height:2px;
  background:var(--mint);
}
.arc-stage:nth-child(1)::before{opacity:.14}
.arc-stage:nth-child(2)::before{opacity:.3}
.arc-stage:nth-child(3)::before{opacity:.5}
.arc-stage:nth-child(4)::before{opacity:.72}
.arc-stage:nth-child(5)::before{opacity:1;box-shadow:0 0 18px rgba(0,215,194,.5)}
.arc-stage b{
  display:block;
  font-family:var(--sans);
  font-size:clamp(.95rem,1.5vw,1.18rem);
  font-weight:850;
  letter-spacing:-.02em;
  text-transform:uppercase;
  color:#fff;
  margin-bottom:12px;
}
.arc-stage p{
  font-family:var(--serif);
  font-size:.88rem;
  line-height:1.7;
  color:var(--muted);
  margin:0;
}

.reputation-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0;
  border-top:1px solid var(--line);
  counter-reset:rep;
}
.reputation-grid article{
  position:relative;
  counter-increment:rep;
  padding:clamp(28px,3.2vw,40px) clamp(24px,3vw,38px) clamp(28px,3.2vw,40px) 0;
  border-bottom:1px solid var(--line);
  border-right:1px solid var(--line);
}
.reputation-grid article:nth-child(even){border-right:0;padding-left:clamp(24px,3vw,38px)}
.reputation-grid article>i{
  display:block;
  font-size:1.2rem;
  color:var(--mint);
  margin-bottom:20px;
}
.reputation-grid article>span{
  position:absolute;
  right:clamp(24px,3vw,38px);
  top:clamp(28px,3.2vw,40px);
  font-family:var(--sans);
  font-size:.66rem;
  font-weight:750;
  letter-spacing:.12em;
  color:var(--muted-2);
  font-variant-numeric:tabular-nums;
}
.reputation-grid article:nth-child(even)>span{right:0}
.reputation-grid h3{font-size:var(--t-title);font-weight:800;color:#fff;margin:0 0 12px}
.reputation-grid p{
  font-family:var(--serif);
  font-size:.94rem;
  line-height:1.76;
  color:var(--muted);
  margin:0;
  max-width:48ch;
}

.reputation-flow{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.75fr);
  gap:clamp(32px,5vw,72px);
  align-items:center;
  margin-top:clamp(52px,8vh,90px);
}
.reputation-flow h2,.notebook-panel h2{font-size:var(--t-display-m);margin:0 0 20px}
.reputation-flow p,.notebook-panel p{
  font-family:var(--serif);
  font-size:.98rem;
  line-height:1.78;
  color:var(--muted);
  max-width:52ch;
}
.reputation-rule{
  display:flex;
  gap:15px;
  align-items:flex-start;
  margin-top:28px;
  padding:20px 22px;
  border:1px solid var(--line);
  border-left:2px solid var(--sodium);
  border-radius:0 var(--radius-lg) var(--radius-lg) 0;
  background:linear-gradient(100deg,rgba(232,162,74,.05),rgba(12,10,7,.4) 66%);
}
.reputation-rule>i{color:var(--sodium);margin-top:.3em;flex:0 0 auto}
.reputation-rule strong{
  display:block;
  font-family:var(--sans);
  font-size:.92rem;
  font-weight:750;
  color:#f6e6c6;
  margin-bottom:7px;
}
.reputation-rule p{margin:0;font-size:.9rem;line-height:1.7;color:#a99c80;max-width:none}

/* The underground ladder — rungs that brighten with risk */
.reputation-ladder{
  display:flex;
  flex-direction:column;
  gap:0;
  border-top:1px solid var(--line-2);
}
.rep-step{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:baseline;
  gap:10px 18px;
  padding:20px 0;
  border-bottom:1px solid var(--line);
}
.rep-step b{
  font-family:var(--sans);
  font-size:1.04rem;
  font-weight:800;
  letter-spacing:-.022em;
  color:#eef8f6;
}
.rep-step span{
  font-family:var(--serif);
  font-size:.84rem;
  line-height:1.55;
  color:var(--muted);
  text-align:right;
}
.reputation-ladder>i{display:none}
.rep-step:nth-child(1){border-left:2px solid rgba(0,215,194,.16);padding-left:16px}
.rep-step:nth-child(3){border-left:2px solid rgba(0,215,194,.36);padding-left:16px}
.rep-step:nth-child(5){border-left:2px solid rgba(232,162,74,.48);padding-left:16px}
.rep-step:nth-child(7){border-left:2px solid rgba(226,94,84,.7);padding-left:16px}

.notebook-panel{
  display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(28px,4.5vw,64px);
  align-items:center;
  margin-top:clamp(48px,7vh,84px);
}
.notebook-panel .ph-frame{border-radius:var(--radius-lg)}
.notebook-tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:22px}
.notebook-tags span{
  padding:8px 12px;
  border:1px solid var(--line);
  border-radius:99px;
  font-family:var(--sans);
  font-size:.66rem;
  font-weight:650;
  letter-spacing:.06em;
  color:#93aaa8;
}

/* ==========================================================================
   29. MY PIXELPH (account) — account.js writes into these hooks
   ========================================================================== */
.account-grid{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr);
  gap:18px;
}
.account-card{
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:linear-gradient(165deg,var(--ink-3),var(--ink-2) 58%,#06090c);
  padding:clamp(24px,2.8vw,32px);
}
.account-card h2,.account-card h3{
  font-size:var(--t-title);
  font-weight:800;
  color:#fff;
  margin:10px 0 12px;
}
.account-card>p{
  font-family:var(--serif);
  font-size:.92rem;
  line-height:1.72;
  color:var(--muted);
}
.account-status{
  font-family:var(--sans);
  font-size:clamp(1.7rem,3vw,2.3rem);
  font-weight:850;
  letter-spacing:-.04em;
  line-height:1.05;
  color:#fff;
  margin:10px 0 10px;
}
.account-status.approved{color:var(--mint)}
.account-status.rejected{color:var(--danger)}
.account-status.pending{color:var(--sodium)}
.account-status.revoked{color:#e08b4a}

.history-list{display:grid;gap:0;border-top:1px solid var(--line)}
.history-item{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:14px;
  padding:16px 0;
  border-bottom:1px solid var(--line);
}
.history-item strong{font-family:var(--sans);font-size:.95rem;font-weight:750;color:#e8f1f0}
.history-item small{
  font-family:var(--serif);
  font-size:.8rem;
  line-height:1.6;
  color:var(--muted-2);
}
.admin-status{
  display:inline-flex;
  align-items:center;
  padding:6px 11px;
  border:1px solid var(--line-2);
  border-radius:99px;
  font-family:var(--sans);
  font-size:.58rem;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
  white-space:nowrap;
}
.admin-status.pending{background:rgba(232,162,74,.08);border-color:rgba(232,162,74,.3);color:#f2cf94}
.admin-status.approved{background:rgba(0,215,194,.08);border-color:rgba(0,215,194,.3);color:#8df1d9}
.admin-status.rejected{background:rgba(255,107,120,.08);border-color:rgba(255,107,120,.3);color:#ffb0b7}
.admin-status.revoked{background:rgba(224,139,74,.08);border-color:rgba(224,139,74,.34);color:#ffc08a}

.membership-account-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:22px;
  margin-bottom:20px;
}
.membership-account-head h3{margin:6px 0 0}
.membership-active-list{display:grid;gap:0;border-top:1px solid var(--line)}
.membership-active-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:16px 0;
  border-bottom:1px solid var(--line);
}
.membership-active-item strong{
  display:block;
  margin-top:5px;
  font-family:var(--sans);
  font-size:1rem;
  font-weight:750;
  color:#eaf3f2;
}
.membership-active-item>span{
  font-family:var(--mono);
  font-size:.72rem;
  color:var(--muted);
  white-space:nowrap;
}
.membership-active-type{
  font-family:var(--sans);
  font-size:.58rem;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--mint-2);
}
.membership-empty{
  padding:20px 22px;
  border:1px dashed var(--line-2);
  border-radius:var(--radius-lg);
}
.membership-empty strong{font-family:var(--sans);font-size:1rem;font-weight:750;color:#e8f1f0}
.membership-empty p{
  font-family:var(--serif);
  font-size:.9rem;
  line-height:1.7;
  color:var(--muted);
  margin:7px 0 0;
}
.queue-access-summary{margin-top:18px}
.queue-pill{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 15px;
  border:1px solid var(--line-2);
  border-radius:99px;
  font-family:var(--sans);
  font-size:.74rem;
  font-weight:600;
  color:#a8b7b8;
}
.queue-pill i{color:var(--mint)}
.queue-pill.prime{border-color:rgba(0,215,194,.34);background:rgba(0,215,194,.05);color:#9ff3e4}
.queue-pill.city{border-color:rgba(0,215,194,.2);color:#bae4df}

/* ==========================================================================
   30. 404
   ========================================================================== */
.nf{
  min-height:100svh;
  display:grid;
  place-items:center;
  padding:100px var(--gutter) 60px;
  text-align:left;
}
.nf-inner{width:min(760px,100%)}
.nf-code{
  font-family:var(--sans);
  font-size:clamp(5rem,18vw,13rem);
  font-weight:900;
  letter-spacing:-.07em;
  line-height:.82;
  color:transparent;
  -webkit-text-stroke:1px rgba(0,215,194,.4);
  margin:0 0 18px;
}
.nf h1{font-size:var(--t-display-m);text-transform:uppercase;margin:0 0 18px}

/* ==========================================================================
   31. MEMBERSHIP / SHOWROOM / REPUTATION RESPONSIVE
   ========================================================================== */
@media (max-width:1000px){
  .priority-grid,.supporter-grid,.showroom-grid{grid-template-columns:minmax(0,1fr)}
  .membership-section-head{grid-template-columns:minmax(0,1fr);gap:18px}
  .arc{grid-template-columns:repeat(2,minmax(0,1fr))}
  .arc-stage{border-bottom:1px solid var(--line)}
  .arc-stage:nth-child(even){border-right:0}
  .arc-stage:nth-child(5){grid-column:1/-1}
  .reputation-flow,.notebook-panel{grid-template-columns:minmax(0,1fr)}
  .account-grid{grid-template-columns:minmax(0,1fr)}
  .showroom-bridge{flex-direction:column;align-items:flex-start}
  .fairplay{grid-template-columns:minmax(0,1fr)}
  .fairplay>div:first-child{
    border-right:0;
    border-bottom:1px solid var(--line-2);
  }
  .fairplay>div,.fairplay>div:last-child{padding-left:0;padding-right:0}
}
@media (max-width:760px){
  .reputation-grid{grid-template-columns:minmax(0,1fr)}
  .reputation-grid article,.reputation-grid article:nth-child(even){
    border-right:0;
    padding-left:0;
    padding-right:0;
  }
  .reputation-grid article>span,.reputation-grid article:nth-child(even)>span{right:0}
  .membership-status-card{flex-direction:column;align-items:flex-start}
  .membership-status-card .ghost-btn{width:100%}
  .membership-card-footer,.showroom-card-footer{flex-direction:column;align-items:stretch}
  .membership-card-footer .primary-btn,.showroom-card-footer .ghost-btn{width:100%}
  .membership-account-head{flex-direction:column;align-items:flex-start}
  .queue-capacity>div{
    flex:1 1 45%;
    border-right:0;
    border-bottom:1px solid var(--line);
    padding-left:0!important;
  }
  .rep-step{grid-template-columns:minmax(0,1fr)}
  .rep-step span{text-align:left}
  .showroom-bridge .primary-btn{width:100%}
}
@media (max-width:520px){
  .arc{grid-template-columns:minmax(0,1fr)}
  .arc-stage,.arc-stage:not(:first-child){border-right:0;padding-left:0;padding-right:0}
  .arc-stage:nth-child(5){grid-column:auto}
  .queue-capacity>div{flex:1 1 100%}
  .history-item{grid-template-columns:minmax(0,1fr);gap:10px}
}

/* ==========================================================================
   32. THE ONE ORCHESTRATED MOMENT
   A single staged entrance on the landing page, triggered by
   body.hero-ready from landing-polish.js. Nowhere else on the site
   animates without a user action.
   ========================================================================== */
.v2-hero .hero-mark,
.v2-hero h1,
.v2-hero .hero-lead,
.v2-hero .hero-lower,
.v2-hero .hero-meta{
  opacity:0;
  transform:translateY(16px);
}
body.hero-ready .v2-hero .hero-mark,
body.hero-ready .v2-hero h1,
body.hero-ready .v2-hero .hero-lead,
body.hero-ready .v2-hero .hero-lower,
body.hero-ready .v2-hero .hero-meta{
  animation:heroIn 1.05s var(--ease) both;
}
body.hero-ready .v2-hero .hero-mark{animation-delay:.05s}
body.hero-ready .v2-hero h1{animation-delay:.16s}
body.hero-ready .v2-hero .hero-lead{animation-delay:.32s}
body.hero-ready .v2-hero .hero-lower{animation-delay:.44s}
body.hero-ready .v2-hero .hero-meta{animation-delay:.56s}
@keyframes heroIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

.hero-media{transition:transform .1s linear;will-change:transform}

/* Reduced motion: show everything immediately. */
body.hero-instant .v2-hero *{animation:none!important}
@media (prefers-reduced-motion:reduce){
  .v2-hero .hero-mark,
  .v2-hero h1,
  .v2-hero .hero-lead,
  .v2-hero .hero-lower,
  .v2-hero .hero-meta{opacity:1;transform:none;animation:none!important}
  .hero-media{transform:none!important;will-change:auto}
}
/* Safety net: if the load event never fires, reveal after a beat anyway. */
@media (prefers-reduced-motion:no-preference){
  .v2-hero .hero-mark,
  .v2-hero h1,
  .v2-hero .hero-lead,
  .v2-hero .hero-lower,
  .v2-hero .hero-meta{
    animation:heroIn 1.05s var(--ease) 2.4s both;
  }
}

/* ==========================================================================
   33. PRINT — the City Code should print as a readable document
   ========================================================================== */
@media print{
  body.v2-body{background:#fff;color:#111}
  body.v2-body::before,
  .v2-nav,.mobile-nav,.to-top,#pixelphScrollProgress,
  .rules-sidebar,.rules-search-wrap,.v2-footer,.page-hero-bg,
  .ph-frame,.scroll-mark{display:none!important}
  .rules-layout{display:block}
  .rule-entry,.rules-category{break-inside:avoid}
  .rule-entry-title{color:#000}
  .rule-entry>p,.rule-entry-body,.rule-entry-body p,
  .rule-entry-body .rule-list li,.rules-category-desc{color:#222;max-width:none}
  .rules-category>h2,.philosophy-card h3{color:#000}
  .philosophy-card{background:none;border-left:2px solid #999}
  a{color:#111;text-decoration:underline}
  .rules-page *{-webkit-user-select:auto!important;user-select:auto!important}
}

/* ==========================================================================
   34. CITY GALLERY — public grid, lightbox, homepage featured preview
   ========================================================================== */
.gallery-toolbar{margin-bottom:28px}
.gallery-cats{display:flex;flex-wrap:wrap;gap:8px}
.gallery-cat{
  border:1px solid var(--line-2);
  background:var(--ink-2);
  color:var(--muted);
  font-family:var(--sans);
  font-size:.74rem;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  padding:10px 15px;
  border-radius:99px;
  cursor:pointer;
  transition:border-color .2s var(--ease),color .2s var(--ease),background .2s var(--ease);
}
.gallery-cat:hover{border-color:var(--line-3);color:var(--bone)}
.gallery-cat.active{background:var(--mint);border-color:var(--mint);color:#02110f}

.gallery-loading{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px}
.gallery-skel{aspect-ratio:4/3;border-radius:var(--radius-lg);background:linear-gradient(100deg,var(--ink-2) 30%,var(--ink-3) 50%,var(--ink-2) 70%);background-size:220% 100%;animation:gallerySkelSweep 1.6s ease-in-out infinite}
@keyframes gallerySkelSweep{0%{background-position:120% 0}100%{background-position:-20% 0}}

.gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px}
.gallery-card{
  position:relative;
  display:flex;
  flex-direction:column;
  text-align:left;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:var(--ink-2);
  overflow:hidden;
  padding:0;
  cursor:pointer;
  transition:border-color .25s var(--ease),transform .25s var(--ease),box-shadow .25s var(--ease);
}
.gallery-card:hover,.gallery-card:focus-visible{border-color:var(--line-3);transform:translateY(-3px);box-shadow:0 18px 46px rgba(0,0,0,.32)}
.gallery-card-media{aspect-ratio:4/3;overflow:hidden;background:var(--ink-3)}
.gallery-card-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s var(--ease)}
.gallery-card:hover .gallery-card-media img{transform:scale(1.06)}
.gallery-card-meta{display:flex;flex-direction:column;gap:6px;padding:14px 16px 16px}
.gallery-card-cat{font-family:var(--sans);font-size:.66rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--mint-2)}
.gallery-card-title{font-family:var(--sans);font-size:.94rem;font-weight:700;color:var(--bone);line-height:1.4}
.gallery-badge{position:absolute;top:12px;right:12px;display:inline-flex;align-items:center;gap:6px;padding:7px 10px;border-radius:99px;background:rgba(5,7,10,.72);backdrop-filter:blur(6px);border:1px solid var(--mint-dim);color:var(--mint-2);font-size:.66rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.gallery-badge i{color:var(--mint)}

.empty-state{text-align:center;padding:70px 20px;color:var(--muted)}
.empty-state i{display:block;font-size:1.8rem;color:var(--mint-dim);margin-bottom:14px}
.empty-state p{max-width:44ch;margin:0 auto;line-height:1.7}

/* -------------------------------------------------------------- lightbox */
.gallery-lightbox{
  position:fixed;
  inset:0;
  z-index:200;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:18px;
  padding:clamp(20px,5vw,60px);
  background:rgba(3,5,7,.92);
  backdrop-filter:blur(10px);
}
body.gallery-lb-open{overflow:hidden}
.gallery-lb-stage{max-width:min(1200px,92vw);max-height:70vh;display:flex}
.gallery-lb-stage img{max-width:100%;max-height:70vh;object-fit:contain;border-radius:var(--radius-lg);box-shadow:0 30px 90px rgba(0,0,0,.5)}
.gallery-lb-info{width:min(760px,92vw);text-align:center}
.gallery-lb-cat{display:inline-block;font-family:var(--sans);font-size:.66rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--mint-2);margin-bottom:8px}
.gallery-lb-info h3{margin:0 0 8px;font-size:1.15rem;color:var(--bone)}
.gallery-lb-info p{margin:0;font-family:var(--serif);color:var(--muted);line-height:1.7}
.gallery-lb-close,.gallery-lb-nav{
  position:absolute;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:46px;height:46px;
  border-radius:50%;
  border:1px solid var(--line-2);
  background:rgba(10,15,19,.7);
  color:var(--bone);
  font-size:1.05rem;
  cursor:pointer;
  transition:border-color .2s var(--ease),background .2s var(--ease);
}
.gallery-lb-close:hover,.gallery-lb-nav:hover{border-color:var(--mint);color:var(--mint-2)}
.gallery-lb-close{top:20px;right:20px}
.gallery-lb-prev{left:20px;top:50%;transform:translateY(-50%)}
.gallery-lb-next{right:20px;top:50%;transform:translateY(-50%)}

/* --------------------------------------------------- homepage preview */
.gallery-preview-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  grid-auto-rows:170px;
  gap:14px;
  margin-top:44px;
}
.gallery-preview-card{
  position:relative;
  display:block;
  border-radius:var(--radius-lg);
  overflow:hidden;
  border:1px solid var(--line);
  background:var(--ink-2);
}
.gallery-preview-card.lead{grid-column:span 2;grid-row:span 2}
.gallery-preview-card img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s var(--ease)}
.gallery-preview-card:hover img{transform:scale(1.07)}
.gallery-preview-cap{
  position:absolute;
  left:0;right:0;bottom:0;
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:16px 16px 14px;
  background:linear-gradient(0deg,rgba(3,5,7,.86),transparent 80%);
  color:var(--bone);
  font-family:var(--sans);
  font-size:.86rem;
  font-weight:700;
}
.gallery-preview-cat{font-size:.62rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--mint-2)}
.gallery-preview-cta{margin-top:32px;justify-content:center}

@media (max-width:900px){
  .gallery-preview-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:150px}
  .gallery-preview-card.lead{grid-column:span 2;grid-row:span 1}
}
@media (max-width:640px){
  .gallery-grid,.gallery-loading{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
  .gallery-lb-prev{left:8px}
  .gallery-lb-next{right:8px}
  .gallery-lb-close{top:8px;right:8px}
  .gallery-preview-grid{grid-template-columns:1fr 1fr;grid-auto-rows:130px}
}