/* ============================================================
   Meridian Special District · main site redesign
   "The city at night, from afar" · living-city edition · v1
   Self-contained — does not depend on styles.css
   ============================================================ */

@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/cormorant-garamond-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/cormorant-garamond-latin-700-normal.woff2') format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:500;font-display:swap;src:url('fonts/cormorant-garamond-latin-500-italic.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/inter-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/inter-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/inter-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2')}

:root{
  --night:#05080F;
  --night-2:#0A1322;
  --night-3:#0E1830;
  --paper:#F3ECDB;
  --paper-2:#EDE3CC;
  --ink:#20242E;
  --text:#E9EDF6;
  --text-dim:rgba(233,237,246,.72);
  --text-faint:rgba(233,237,246,.6);
  --gold:#C6A24E;
  --gold-hi:#EAC98A;
  --gold-glow:rgba(234,201,138,.45);
  --teal:#7FD8C8;
  --coral:#E8896B;
  --line:rgba(198,162,78,.22);
  --line-strong:rgba(198,162,78,.45);
  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --maxw:1180px;
  --gutter:clamp(20px,4vw,44px);
}

/* ---- Chinese page: CJK font stacks + spacing tuned for hanzi ---- */
body.zh{
  --serif:'Cormorant Garamond','Noto Serif SC','Songti SC',Georgia,serif;
  --sans:'Inter','Noto Sans SC','PingFang SC',system-ui,sans-serif;
}
body.zh .kicker{letter-spacing:.18em}
body.zh .eyebrow{letter-spacing:.2em}
body.zh h2{letter-spacing:.01em}
body.zh .boot-word{letter-spacing:.42em;padding-left:.42em}
body.zh .hero h1{font-size:clamp(2.4rem,6vw,4.4rem)}
body.zh .hero-tech li{letter-spacing:.14em}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--night);color:var(--text);
  font-family:var(--sans);font-size:16.5px;line-height:1.68;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:var(--gold-hi)}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:4px}
.skip-link{position:absolute;left:-999px;top:0;background:var(--gold);color:var(--night);padding:.6em 1.1em;z-index:99;font-weight:600}
.skip-link:focus{left:14px;top:14px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}

/* ---------- Boot sequence: the gates open ---------- */
.boot{
  position:fixed;inset:0;z-index:90;cursor:pointer;overflow:hidden;
  /* pure-CSS failsafe: if scripting ever fails, the overlay hides itself */
  animation:bootFailsafe .6s ease 6s forwards;
}
@keyframes bootFailsafe{to{opacity:0;visibility:hidden}}
.boot.out{pointer-events:none}
.boot-half{
  position:absolute;top:0;bottom:0;width:50.6%;
  background:linear-gradient(180deg,#05080F 0%,#0A1322 100%);
  transition:transform 1.1s cubic-bezier(.72,0,.22,1);
  will-change:transform;
}
.bh-l{left:0}
.bh-r{right:0}
.boot.ignite .bh-l{transform:translateX(-103%)}
.boot.ignite .bh-r{transform:translateX(103%)}
.boot-seam{
  position:absolute;left:50%;top:0;bottom:0;width:2px;margin-left:-1px;
  background:linear-gradient(180deg,transparent 0%,#EAC98A 18%,#EAC98A 82%,transparent 100%);
  box-shadow:0 0 26px 5px rgba(234,201,138,.55);
  transform:scaleY(0);transform-origin:center;
}
.boot.stamp .boot-seam{animation:seamDraw .6s cubic-bezier(.3,.8,.3,1) forwards}
@keyframes seamDraw{to{transform:scaleY(1)}}
.boot.ignite .boot-seam{animation:seamFlare .55s ease-out forwards}
@keyframes seamFlare{
  0%{opacity:1;transform:scaleY(1);box-shadow:0 0 70px 26px rgba(234,201,138,.95)}
  100%{opacity:0;transform:scaleY(1);box-shadow:0 0 140px 80px rgba(234,201,138,0)}
}
.boot-center{
  position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:16px;
  opacity:0;transition:opacity .35s ease;padding:0 24px;text-align:center;
}
.boot.stamp .boot-center{opacity:1}
.boot.ignite .boot-center{opacity:0;transform:scale(1.06);transition:opacity .4s ease,transform .4s ease}
.boot-seal{position:relative;display:grid;place-items:center}
.boot-seal img{width:92px;height:92px;filter:drop-shadow(0 0 28px rgba(234,201,138,.55))}
.boot.stamp .boot-seal img{animation:stampIn .62s cubic-bezier(.2,1.35,.4,1) .18s backwards}
@keyframes stampIn{
  0%{transform:scale(2.2);opacity:0;filter:drop-shadow(0 0 0 rgba(234,201,138,0))}
  55%{transform:scale(.93);opacity:1}
  100%{transform:scale(1);filter:drop-shadow(0 0 28px rgba(234,201,138,.55))}
}
.boot-ring{
  position:absolute;width:120px;height:120px;border:1.5px solid rgba(234,201,138,.75);
  border-radius:50%;opacity:0;pointer-events:none;
}
.boot.stamp .boot-ring{animation:ringOut 1.15s ease-out .5s}
.boot.stamp .boot-ring.r2{animation:ringOut 1.15s ease-out .78s}
@keyframes ringOut{0%{opacity:.9;transform:scale(.55)}100%{opacity:0;transform:scale(2.7)}}
.boot-word{
  margin:0;font-family:var(--serif);font-weight:600;font-size:clamp(1.15rem,2.6vw,1.7rem);
  color:var(--text);letter-spacing:.34em;text-transform:uppercase;padding-left:.34em;
}
.boot.stamp .boot-word{animation:wordSpread 1s cubic-bezier(.25,.7,.3,1) .35s backwards}
@keyframes wordSpread{0%{opacity:0;letter-spacing:.06em}100%{opacity:1;letter-spacing:.34em}}
body.zh .boot.stamp .boot-word{animation:wordSpreadZh 1s cubic-bezier(.25,.7,.3,1) .35s backwards}
@keyframes wordSpreadZh{0%{opacity:0;letter-spacing:.1em}100%{opacity:1;letter-spacing:.42em}}
.boot-tag{
  margin:0;font-family:var(--serif);font-style:italic;font-size:clamp(.95rem,1.8vw,1.15rem);
  color:var(--gold-hi);opacity:0;
}
.boot.stamp .boot-tag{animation:tagIn .7s ease .95s forwards}
@keyframes tagIn{to{opacity:.92}}
/* hero content holds until the gates open, then rises in sequence */
body.booting .hero-inner>*{opacity:0;transform:translateY(26px)}
body.lit .hero-inner>*{opacity:1;transform:none;transition:opacity .85s ease,transform .85s ease}
body.lit .hero-inner>.kicker{transition-delay:.05s}
body.lit .hero-inner>h1{transition-delay:.16s}
body.lit .hero-inner>.hero-lede{transition-delay:.3s}
body.lit .hero-inner>.cta-row{transition-delay:.44s}
body.lit .hero-inner>.hero-tech{transition-delay:.56s}
body.lit .hero-inner>.hero-posture{transition-delay:.68s}
@media (prefers-reduced-motion:reduce){.boot{display:none}}

/* ---------- Reveal ---------- */
.rv{opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .8s ease}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}

/* ---------- Scroll progress ---------- */
.progress{position:fixed;top:0;left:0;height:2px;width:0;background:linear-gradient(90deg,var(--gold),var(--gold-hi));z-index:80}

/* ---------- Header ---------- */
.mast{
  position:fixed;inset:0 0 auto 0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:14px var(--gutter);
  transition:background .35s ease,box-shadow .35s ease;
}
.mast.scrolled{background:rgba(5,8,15,.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 1px 0 var(--line)}
.mast-brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.mast-brand img{width:40px;height:40px}
.mast-brand b{font-family:var(--serif);font-weight:700;font-size:1.12rem;color:var(--text);letter-spacing:.02em;display:block;line-height:1.15}
.mast-brand small{font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-hi)}
.mast-nav{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.mast-nav a{color:var(--text-dim);text-decoration:none;font-size:.85rem;font-weight:500;letter-spacing:.04em}
.mast-nav a:hover{color:var(--gold-hi)}
.mast-nav a.lang{border:1px solid var(--line-strong);border-radius:999px;padding:.4em 1em;color:var(--text)}
.mast-nav a.lang:hover{border-color:var(--gold-hi)}
@media (max-width:900px){.mast-nav a:not(.lang){display:none}}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:100vh;display:grid;align-items:end;overflow:hidden;background:var(--night)}
.hero-bg{position:absolute;inset:0;background:url('msd-hero-sovereign-hub-imagegen-v90.webp') center 30%/cover no-repeat;transform:scale(1.03)}
@media (max-width:820px){.hero-bg{background-image:url('msd-hero-sovereign-hub-1100.webp')}}
@media (prefers-reduced-motion:no-preference){
  .hero-bg{animation:hDrift 34s ease-in-out infinite alternate}
  @keyframes hDrift{from{transform:scale(1.03) translate(0,0)}to{transform:scale(1.085) translate(-8px,-14px)}}
}
.hero-veil{position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(5,8,15,.62) 0%,rgba(5,8,15,.1) 38%,rgba(5,8,15,.55) 74%,rgba(5,8,15,.94) 100%)}
canvas.motes{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.hero-inner{position:relative;z-index:2;width:100%;max-width:var(--maxw);margin:0 auto;padding:150px var(--gutter) 96px}
.kicker{font-size:.74rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold-hi);font-weight:600;margin:0 0 18px}
.hero h1{
  font-family:var(--serif);font-weight:700;margin:0 0 20px;
  font-size:clamp(2.7rem,6.6vw,5rem);line-height:1.03;letter-spacing:.002em;max-width:11.5em;
  text-shadow:0 2px 40px rgba(5,8,15,.6);
}
.hero h1 em{font-style:italic;font-weight:500;color:var(--gold-hi);text-shadow:0 0 34px var(--gold-glow)}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  @media (prefers-reduced-motion:no-preference){
    .hero h1 em{
      background:linear-gradient(105deg,var(--gold-hi) 0%,#FFF6DC 24%,var(--gold-hi) 46%,#D3A855 72%,var(--gold-hi) 100%);
      background-size:230% 100%;
      -webkit-background-clip:text;background-clip:text;
      -webkit-text-fill-color:transparent;color:transparent;
      animation:inkLight 7s ease-in-out infinite;
    }
    @keyframes inkLight{0%,100%{background-position:0% 0}50%{background-position:100% 0}}
  }
}
.hero-lede{max-width:38em;font-size:1.08rem;line-height:1.72;color:var(--text-dim);margin:0 0 30px}
.cta-row{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:34px}
.btn{display:inline-block;text-decoration:none;font-weight:600;font-size:.9rem;letter-spacing:.04em;border-radius:999px;padding:.85em 1.7em;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.btn:hover{transform:translateY(-2px)}
.btn-gold{background:linear-gradient(135deg,var(--gold-hi),var(--gold));color:var(--night);box-shadow:0 10px 30px rgba(198,162,78,.3)}
.btn-ghost{color:var(--text);border:1.5px solid rgba(233,237,246,.4)}
.btn-ghost:hover{border-color:var(--gold-hi);color:var(--gold-hi)}
.hero-posture{font-size:.73rem;color:var(--text-faint);max-width:52em;margin:0}
.hero-tech{display:flex;gap:8px 10px;flex-wrap:wrap;list-style:none;margin:0 0 22px;padding:0}
.hero-tech li{
  font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-dim);border:1px solid rgba(233,237,246,.22);border-radius:999px;padding:.4em 1em;
}
.scroll-cue{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:2;color:var(--gold-hi);font-size:1.1rem;opacity:.8}
@media (prefers-reduced-motion:no-preference){
  .scroll-cue{animation:cue 2.4s ease-in-out infinite}
  @keyframes cue{0%,100%{transform:translate(-50%,0);opacity:.75}50%{transform:translate(-50%,9px);opacity:1}}
}

/* ---------- Sections ---------- */
section{padding:clamp(90px,11vw,150px) 0;position:relative}
.eyebrow{font-size:.73rem;letter-spacing:.26em;text-transform:uppercase;color:var(--gold);font-weight:600;margin:0 0 14px}
h2{font-family:var(--serif);font-weight:700;font-size:clamp(2rem,4.2vw,3.1rem);line-height:1.1;margin:0 0 18px;max-width:18em}
.lede{max-width:44em;color:var(--text-dim);margin:0 0 54px;font-size:1.02rem}
.hairline{height:1px;background:linear-gradient(90deg,transparent,var(--line-strong),transparent);border:0;margin:0}

/* ---------- Creed (the concept) ---------- */
#creed{background:var(--night);padding-bottom:clamp(70px,9vw,120px)}
.creed-wrap{text-align:center;max-width:900px}
#creed .eyebrow{margin-bottom:18px}
.creed-line{max-width:none;margin:0 auto 26px;font-size:clamp(2.1rem,4.6vw,3.4rem)}
.creed-line em{font-style:italic;color:var(--gold-hi);text-shadow:0 0 30px var(--gold-glow)}
.creed-body{max-width:44em;margin:0 auto 22px;color:var(--text-dim);font-size:1.04rem;line-height:1.75}
.creed-motto{font-family:var(--serif);font-style:italic;font-size:clamp(1.2rem,2.2vw,1.5rem);color:var(--gold-hi);margin:0 auto clamp(40px,5vw,56px)}
.creed-pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2.4vw,24px);text-align:left}
@media (max-width:860px){.creed-pillars{grid-template-columns:1fr}}
.pillar{border-top:2px solid var(--gold);padding:16px 6px 0;background:linear-gradient(180deg,rgba(198,162,78,.06),transparent 70%)}
.pillar b{display:block;font-family:var(--mono);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-hi);margin-bottom:8px;font-weight:500}
.pillar p{margin:0;font-size:.88rem;color:var(--text-dim);line-height:1.62}

/* ---------- Lights (the idea) ---------- */
#lights{background:linear-gradient(180deg,var(--night) 0%,var(--night-2) 100%)}
.lamp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,3vw,34px);margin-bottom:clamp(40px,6vw,64px)}
@media (max-width:860px){.lamp-grid{grid-template-columns:1fr}}
.lamp-card{
  position:relative;border:1px solid var(--line);border-radius:18px;
  padding:56px 28px 30px;background:linear-gradient(180deg,rgba(234,201,138,.05),rgba(234,201,138,.012) 55%);
}
.lamp-dot{
  position:absolute;top:22px;left:28px;width:12px;height:12px;border-radius:50%;
  background:var(--gold-hi);box-shadow:0 0 18px 4px var(--gold-glow);
}
@media (prefers-reduced-motion:no-preference){
  .lamp-dot{animation:lamp 4s ease-in-out infinite}
  .lamp-card:nth-child(2) .lamp-dot{animation-delay:1.3s}
  .lamp-card:nth-child(3) .lamp-dot{animation-delay:2.6s}
  @keyframes lamp{0%,100%{box-shadow:0 0 14px 3px var(--gold-glow)}50%{box-shadow:0 0 26px 8px var(--gold-glow)}}
}
.lamp-card h3{font-family:var(--serif);font-weight:600;font-size:clamp(1.5rem,2.4vw,1.9rem);line-height:1.22;margin:0 0 12px;color:var(--text)}
.lamp-card p{margin:0 0 14px;color:var(--text-dim);font-size:.95rem}
.lamp-card small{display:block;font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;color:var(--gold);text-transform:uppercase}
.foundation{
  border:1px solid var(--line-strong);border-radius:16px;
  background:linear-gradient(180deg,rgba(198,162,78,.1),rgba(198,162,78,.03));
  padding:26px 30px;display:flex;gap:20px;align-items:center;flex-wrap:wrap;
}
.foundation svg{flex:none}
.foundation p{margin:0;font-family:var(--serif);font-size:clamp(1.15rem,2vw,1.4rem);line-height:1.4;color:var(--gold-hi)}
.foundation small{display:block;font-family:var(--sans);font-size:.8rem;color:var(--text-dim);margin-top:4px}

/* ---------- Map ---------- */
#map{background:var(--night-2)}
.map-stage{position:relative;border-radius:20px;overflow:hidden;border:1px solid var(--line);box-shadow:0 30px 80px rgba(0,0,0,.55)}
.map-stage img{width:100%;height:auto;display:block}
.marker{
  position:absolute;width:34px;height:34px;margin:-17px 0 0 -17px;
  border-radius:50%;border:0;cursor:pointer;background:transparent;padding:0;
}
.marker i{
  position:absolute;inset:9px;border-radius:50%;
  background:var(--gold-hi);box-shadow:0 0 14px 3px var(--gold-glow);
  transition:transform .25s ease,box-shadow .25s ease;
}
.marker::before{
  content:"";position:absolute;inset:0;border-radius:50%;
  border:1.5px solid rgba(234,201,138,.65);
}
@media (prefers-reduced-motion:no-preference){
  .marker::before{animation:ring 2.8s ease-out infinite}
  @keyframes ring{0%{transform:scale(.55);opacity:.9}70%{transform:scale(1.25);opacity:0}100%{transform:scale(1.25);opacity:0}}
}
.marker:hover i,.marker.on i{transform:scale(1.25);box-shadow:0 0 24px 7px var(--gold-glow)}
.marker.on::before{border-color:var(--gold-hi);animation:none;transform:scale(1.18);opacity:1}
.map-panel{
  margin-top:26px;border:1px solid var(--line);border-radius:18px;
  background:linear-gradient(180deg,rgba(234,201,138,.055),rgba(234,201,138,.015));
  padding:30px 34px;display:grid;grid-template-columns:1.25fr .9fr;gap:30px;align-items:start;min-height:170px;
}
@media (max-width:820px){.map-panel{grid-template-columns:1fr}}
.map-panel .mp-kicker{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin:0 0 8px}
.map-panel h3{font-family:var(--serif);font-size:1.9rem;font-weight:700;margin:0 0 10px;color:var(--text)}
.map-panel .mp-plain{font-family:var(--serif);font-style:italic;font-size:1.22rem;line-height:1.45;color:var(--gold-hi);margin:0}
.map-panel .mp-body{margin:0 0 16px;color:var(--text-dim);font-size:.95rem}
.map-panel .mp-not{margin:0 0 18px;font-size:.85rem;color:var(--text-faint)}
.map-panel .mp-not b{color:var(--coral);font-weight:600}
.map-panel a{font-weight:600;font-size:.9rem;text-decoration:none;border-bottom:2px solid var(--gold);padding-bottom:2px;color:var(--text)}
.map-panel a:hover{color:var(--gold-hi)}
.map-note{margin:20px 4px 0;font-size:.8rem;color:var(--text-faint);text-align:center}

/* Systems-online sweep: radar ring from Compass Plaza + staggered marker wake */
.map-stage::after{
  content:"";position:absolute;left:50%;top:42%;width:40px;height:40px;margin:-20px 0 0 -20px;
  border-radius:50%;border:2px solid rgba(234,201,138,.85);opacity:0;transform:scale(.3);
  pointer-events:none;
}
@media (prefers-reduced-motion:no-preference){
  .map-stage.sweep::after{animation:mapSweep 2.3s cubic-bezier(.2,.6,.3,1) 1}
  @keyframes mapSweep{
    0%{opacity:.95;transform:scale(.3);box-shadow:0 0 34px 8px rgba(234,201,138,.5)}
    100%{opacity:0;transform:scale(34);box-shadow:0 0 60px 2px rgba(234,201,138,0)}
  }
  .marker.wake i{animation:wakePulse .95s ease-out 1}
  @keyframes wakePulse{
    0%{transform:scale(1)}
    30%{transform:scale(1.9);box-shadow:0 0 34px 12px var(--gold-glow)}
    100%{transform:scale(1)}
  }
}

/* District directory — the whole ecosystem, always visible */
.directory{
  margin-top:26px;display:grid;grid-template-columns:repeat(auto-fit,minmax(146px,1fr));gap:12px;
}
.dir-label{
  grid-column:1/-1;padding:0 2px 2px;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);
}
.directory a{
  text-decoration:none;
  border:1px solid var(--line);border-radius:12px;padding:12px 16px;
  background:rgba(234,201,138,.035);
  transition:border-color .25s ease,background .25s ease,transform .25s ease;
}
.directory a:hover{border-color:var(--gold-hi);background:rgba(234,201,138,.09);transform:translateY(-2px)}
.directory a b{display:block;font-family:var(--serif);font-size:1.04rem;font-weight:600;color:var(--text);line-height:1.2;margin-bottom:2px;white-space:nowrap}
.directory a span{font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-faint)}
.directory a:hover span{color:var(--gold-hi)}

/* ---------- Technology ---------- */
#tech{background:linear-gradient(180deg,var(--night-2) 0%,var(--night) 55%)}
.tech-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.6vw,26px)}
@media (max-width:1000px){.tech-grid{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.tech-grid{grid-template-columns:1fr}}
.tech-card{
  border:1px solid var(--line);border-radius:16px;padding:24px 26px;
  background:linear-gradient(180deg,rgba(234,201,138,.045),rgba(234,201,138,.012));
  transition:border-color .3s ease,transform .3s ease;
}
.tech-card:hover{border-color:var(--line-strong);transform:translateY(-3px)}
.tc-story{font-family:var(--serif);font-style:italic;font-size:1.22rem;color:var(--gold-hi);margin:0 0 12px;line-height:1.35}
.tc-chip{
  display:inline-block;font-family:var(--mono);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--teal);border:1px solid rgba(127,216,200,.35);border-radius:999px;padding:.4em 1em;margin:0 0 14px;
}
.tech-card p:last-child{margin:0;font-size:.9rem;color:var(--text-dim);line-height:1.65}
.tech-note{margin:clamp(28px,4vw,40px) 0 0;font-size:.82rem;color:var(--text-faint);max-width:52em}

/* ---------- Future city / doors ---------- */
#future{background:linear-gradient(180deg,var(--night) 0%,var(--night-3) 100%)}
#future h2{max-width:24em}
.door-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.6vw,26px)}
@media (max-width:900px){.door-grid{grid-template-columns:1fr}}
.door{
  display:flex;flex-direction:column;gap:10px;text-decoration:none;color:var(--text);
  border:1px solid var(--line-strong);border-radius:18px;padding:28px 28px 24px;
  background:linear-gradient(170deg,rgba(234,201,138,.08),rgba(234,201,138,.02));
  transition:transform .28s ease,border-color .28s ease,box-shadow .28s ease;
}
.door:hover{transform:translateY(-5px);border-color:var(--gold-hi);box-shadow:0 22px 50px rgba(198,162,78,.18)}
.door small{font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.door h3{font-family:var(--serif);font-size:1.6rem;font-weight:700;margin:2px 0 0;color:var(--text)}
.door p{margin:0;font-size:.9rem;color:var(--text-dim);line-height:1.6;flex:1}
.door .go{font-weight:600;font-size:.88rem;color:var(--gold-hi)}

/* ---------- One day ---------- */
#day{background:linear-gradient(180deg,var(--night-2) 0%,var(--night) 100%)}
.timeline{position:relative;margin:0;padding:0;list-style:none}
.timeline::before{
  content:"";position:absolute;left:86px;top:8px;bottom:8px;width:1px;
  background:linear-gradient(180deg,transparent,var(--line-strong) 12%,var(--line-strong) 88%,transparent);
}
@media (max-width:700px){.timeline::before{left:20px}}
.moment{position:relative;display:grid;grid-template-columns:64px 44px 1fr;gap:0 18px;padding:34px 0;align-items:start}
@media (max-width:700px){.moment{grid-template-columns:0 40px 1fr}}
.moment time{font-family:var(--mono);font-size:.82rem;letter-spacing:.06em;color:var(--gold);padding-top:10px;text-align:right}
@media (max-width:700px){.moment time{display:none}}
.moment .node{
  width:13px;height:13px;border-radius:50%;background:var(--gold-hi);
  box-shadow:0 0 16px 4px var(--gold-glow);margin:12px auto 0;
}
.moment h3{font-family:var(--serif);font-weight:600;font-size:clamp(1.4rem,2.6vw,1.85rem);line-height:1.3;margin:0 0 8px;color:var(--text);max-width:24em}
.moment p{margin:0;font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-faint)}
.moment p b{color:var(--gold);font-weight:500}

/* ---------- Story bridge ---------- */
#story{background:var(--night-3)}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2.4vw,26px);margin:0 0 40px}
@media (max-width:820px){.gallery{grid-template-columns:1fr}}
.gallery figure{margin:0;border-radius:14px;overflow:hidden;border:1px solid var(--line);position:relative}
.gallery img{width:100%;aspect-ratio:16/9;object-fit:cover;transition:transform .5s ease}
.gallery figure:hover img{transform:scale(1.045)}
.gallery figcaption{
  position:absolute;inset:auto 0 0 0;padding:34px 16px 12px;
  background:linear-gradient(180deg,transparent,rgba(5,8,15,.88));
  font-size:.78rem;color:var(--text-dim);letter-spacing:.04em;
}
.story-cta{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.story-cta small{color:var(--text-faint);font-size:.8rem;max-width:34em}

/* ---------- Boundaries (paper band) ---------- */
#boundaries{background:var(--paper);color:var(--ink)}
#boundaries h2{color:#1D2433}
#boundaries .eyebrow{color:#8A5D15}
#boundaries .lede{color:#565B66}
.bound-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,3vw,32px)}
@media (max-width:820px){.bound-grid{grid-template-columns:1fr}}
.bound{background:#FFFDF6;border:1px solid rgba(29,36,51,.1);border-radius:16px;padding:28px 30px;box-shadow:0 12px 34px rgba(29,36,51,.08)}
.bound small{display:block;font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;font-weight:600;margin-bottom:8px}
.bound.is small{color:#1E6A5F}
.bound.not small{color:#9C4A2B}
.bound h3{font-family:var(--serif);font-size:1.5rem;font-weight:700;margin:0 0 14px;color:#1D2433}
.bound ul{margin:0;padding:0;list-style:none}
.bound li{position:relative;padding:7px 0 7px 24px;font-size:.93rem;color:#3C414D;line-height:1.6}
.bound li::before{content:"";position:absolute;left:2px;top:15px;width:8px;height:8px;transform:rotate(45deg)}
.bound.is li::before{background:#2E8A7C}
.bound.not li::before{background:#C96F47}
details.fold{margin-top:clamp(22px,3vw,32px);border:1px solid rgba(29,36,51,.14);border-radius:14px;background:rgba(198,162,78,.06)}
details.fold summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 22px;font-weight:600;color:#1D2433}
details.fold summary::-webkit-details-marker{display:none}
details.fold summary::after{content:"+";font-family:var(--serif);font-size:1.5rem;line-height:1;color:#A2701E;flex:none}
details.fold[open] summary::after{content:"\2212"}
details.fold .fold-body{padding:2px 22px 20px;color:#3C414D}
.phase-row{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media (max-width:860px){.phase-row{grid-template-columns:1fr 1fr}}
.phase-row article{background:#FFFDF6;border:1px solid rgba(29,36,51,.1);border-radius:12px;padding:16px 18px}
.phase-row small{font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;color:#8A5D15;text-transform:uppercase}
.phase-row h4{font-family:var(--serif);font-size:1.12rem;margin:.35em 0 .35em;color:#1D2433}
.phase-row p{margin:0;font-size:.82rem;line-height:1.55;color:#565B66}

/* ---------- Precedents strip ---------- */
#precedents{background:var(--paper-2);color:var(--ink);padding:clamp(60px,7vw,90px) 0}
#precedents .eyebrow{color:#8A5D15}
#precedents h2{color:#1D2433;font-size:clamp(1.6rem,3vw,2.2rem);margin-bottom:34px}
.prec-row{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media (max-width:960px){.prec-row{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.prec-row{grid-template-columns:1fr}}
.prec{border-left:2px solid var(--gold);padding:4px 0 4px 18px}
.prec b{display:block;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:#8A5D15;margin-bottom:6px;font-weight:600}
.prec p{margin:0;font-size:.9rem;line-height:1.55;color:#3C414D}

/* ---------- Review ---------- */
#review{background:var(--night)}
.doctrine{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:0 0 44px}
@media (max-width:820px){.doctrine{grid-template-columns:1fr}}
.doctrine article{border:1px solid var(--line);border-radius:14px;padding:22px 24px;background:rgba(234,201,138,.035)}
.doctrine small{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.doctrine strong{display:block;font-family:var(--serif);font-size:1.28rem;font-weight:600;color:var(--text);margin:.4em 0 .3em}
.doctrine p{margin:0;font-size:.86rem;color:var(--text-dim)}
#review details.fold{border-color:var(--line);background:rgba(234,201,138,.04)}
#review details.fold summary{color:var(--text)}
#review details.fold summary::after{color:var(--gold-hi)}
#review details.fold .fold-body{color:var(--text-dim)}
#review .fold-body ul{margin:0;padding-left:20px}
#review .fold-body li{padding:5px 0;font-size:.92rem}
#review .fold-body p{font-size:.92rem}
.review-cta{margin-top:40px;display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.review-cta small{color:var(--text-faint);max-width:30em;font-size:.8rem}

/* ---------- Footer ---------- */
.site-footer{background:#03060C;border-top:1px solid var(--line);padding:64px 0 40px;font-size:.86rem;color:var(--text-dim)}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:36px;margin-bottom:38px}
@media (max-width:860px){.foot-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.foot-grid{grid-template-columns:1fr}}
.site-footer h4{font-family:var(--serif);color:var(--text);font-size:1.2rem;margin:0 0 10px;font-weight:600}
.site-footer p{margin:0 0 10px;line-height:1.65}
.site-footer small.note{color:var(--text-faint);line-height:1.6;display:block}
.site-footer ul{list-style:none;margin:0;padding:0}
.site-footer li{margin-bottom:8px}
.site-footer a{color:var(--gold-hi);text-decoration:none}
.site-footer a:hover{text-decoration:underline}
.foot-base{border-top:1px solid rgba(198,162,78,.14);padding-top:22px;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:.74rem;color:var(--text-faint)}

/* v3 · architecture figure in review section */
.arch-fig{margin:0 0 44px;border-radius:18px;overflow:hidden;border:1px solid var(--line)}
.arch-fig img{width:100%;height:auto}
.arch-fig figcaption{padding:12px 18px;font-size:.78rem;color:var(--text-faint);letter-spacing:.04em;background:rgba(234,201,138,.03)}

/* v3 · district panel practical line */
.map-panel .mp-moment{
  margin:0 0 14px;padding:10px 14px;border-left:2px solid var(--teal);
  background:rgba(127,216,200,.05);border-radius:0 10px 10px 0;
  font-size:.88rem;color:var(--text-dim);
}

/* v11 · the film */
.film-stage{
  position:relative;max-width:1040px;margin:6px 0 22px;
  border-radius:14px;overflow:hidden;background:#05080f;
  border:1px solid var(--line-strong);box-shadow:0 30px 80px rgba(0,0,0,.5);
}
.film-stage video{display:block;width:100%;height:auto;aspect-ratio:16/9;background:#05080f}
.film-note{margin:0;color:var(--text-dim);font-size:.92rem;display:flex;align-items:center;gap:.2em;flex-wrap:wrap}
.film-note .film-lang{
  border:1px solid var(--line-strong);border-radius:999px;padding:.32em .95em;margin-left:.4em;
  color:var(--text);text-decoration:none;white-space:nowrap;font-size:.85rem;letter-spacing:.04em;
  transition:border-color .2s ease,color .2s ease;
}
.film-note .film-lang:hover{border-color:var(--gold-hi);color:var(--gold-hi)}