/* The Ripple of Resonance on the hub. Written by vision_page.py from the artifact page: edit the source and rerun. */
@font-face { font-family: "Cinzel"; src: url("/assets/fonts/cinzel-var.woff2") format("woff2"); font-weight: 400 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Nunito Sans"; src: url("/assets/fonts/nunito-sans-var.woff2") format("woff2"); font-weight: 200 1000; font-style: normal; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("/assets/vision/fonts/cormorant-garamond-600-italic.woff2") format("woff2"); font-weight: 600; font-style: italic; font-display: swap; }
@font-face { font-family: "Merriweather"; src: url("/assets/vision/fonts/merriweather-600-italic.woff2") format("woff2"); font-weight: 600; font-style: italic; font-display: swap; }
html, body { margin: 0; }
.yt__frame { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; }
/* Layout: a dawn-lit journey down one gold thread, from one beacon (1.44 km) to 1,000 Cities of Light (144,000). */
:root{
  --bg:#fffaf0;
  --band:#eef6fc;
  --card:rgba(255,252,244,.92);
  --glass:rgba(255,250,238,.84);
  --ink:#1b2332;
  --body:#3b4559;
  --soft:#68718a;
  --gold:#9a5600;
  --honey:#e3a53a;
  --line:rgba(196,146,52,.34);
  --glow:rgba(255,194,84,.45);
  --shadow:0 18px 50px rgba(168,95,0,.13);
  --btn-ink:#2b1800;
  --row-city:rgba(255,214,110,.18);
  --globe-ocean-1:#eaf5fc; --globe-ocean-2:#a6cde8;
  --globe-land:#f6ecd7; --globe-land-edge:rgba(160,110,30,.38);
  --globe-grat:rgba(255,255,255,.6);
  --globe-lit:#ffe6a1; --globe-edge:#e9a520;
  --globe-halo:rgba(255,204,104,.6);
  --globe-label:#4d2e05; --globe-label-bg:rgba(255,250,238,.9);
  --f-display:'Cormorant Garamond','Cormorant',Georgia,'Times New Roman',serif;
  --f-body:'Nunito Sans','Segoe UI',system-ui,-apple-system,sans-serif;
  --f-num:'Cinzel','Trajan Pro',Georgia,serif;
  --f-cap:'Merriweather',Georgia,serif;
  --radius:22px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0e1420; --band:#121c2d; --card:rgba(22,30,46,.9); --glass:rgba(14,20,32,.8);
    --ink:#f7ecd2; --body:#e0d1ae; --soft:#b3a587; --gold:#f0c46a; --honey:#e2b65a;
    --line:rgba(219,173,79,.28); --glow:rgba(219,173,79,.3); --shadow:0 18px 50px rgba(0,0,0,.42); --btn-ink:#2b1800;
    --row-city:rgba(240,196,106,.1);
    --globe-ocean-1:#2c4d74; --globe-ocean-2:#101f36; --globe-land:#3b4659; --globe-land-edge:rgba(240,196,106,.32);
    --globe-grat:rgba(255,255,255,.08); --globe-lit:#ffdc93; --globe-edge:#f3c056; --globe-halo:rgba(240,196,106,.5);
    --globe-label:#fff2c8; --globe-label-bg:rgba(14,20,32,.82);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0e1420; --band:#121c2d; --card:rgba(22,30,46,.9); --glass:rgba(14,20,32,.8);
  --ink:#f7ecd2; --body:#e0d1ae; --soft:#b3a587; --gold:#f0c46a; --honey:#e2b65a;
  --line:rgba(219,173,79,.28); --glow:rgba(219,173,79,.3); --shadow:0 18px 50px rgba(0,0,0,.42); --btn-ink:#2b1800;
  --row-city:rgba(240,196,106,.1);
  --globe-ocean-1:#2c4d74; --globe-ocean-2:#101f36; --globe-land:#3b4659; --globe-land-edge:rgba(240,196,106,.32);
  --globe-grat:rgba(255,255,255,.08); --globe-lit:#ffdc93; --globe-edge:#f3c056; --globe-halo:rgba(240,196,106,.5);
  --globe-label:#fff2c8; --globe-label-bg:rgba(14,20,32,.82);
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html:not(.motion-on){scroll-behavior:auto}}
body{background:var(--bg);color:var(--body);font:400 1.06rem/1.7 var(--f-body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
[hidden]{display:none!important}
a{color:inherit}
h1,h2,h3{font-family:var(--f-display);color:var(--ink);font-weight:600;line-height:1.08;text-wrap:balance;margin:0}
h1 em,h2 em{font-style:italic;color:var(--gold)}
h2{font-size:clamp(2.1rem,4.6vw,3.4rem)}
h3{font-size:clamp(1.5rem,2.6vw,1.9rem)}
p{margin:0}
:focus-visible{outline:3px solid var(--honey);outline-offset:3px;border-radius:6px}

.wrap{width:100%;max-width:1180px;margin-inline:auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.narrow{max-width:760px}
.section{padding-block:clamp(64px,9vw,120px)}
.band{background:var(--band)}
.eyebrow{font:800 .74rem/1.2 var(--f-body);letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:14px}
.eyebrow::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:10px;vertical-align:2px;background:radial-gradient(circle at 35% 30%,#fff3c4,#e9a83a);box-shadow:0 0 8px rgba(233,168,58,.85)}
.lede{font-size:clamp(1.12rem,1.6vw,1.28rem);color:var(--body)}
.stack{display:grid;gap:18px}
.num{font-family:var(--f-num);font-weight:700;letter-spacing:.04em;font-variant-numeric:tabular-nums lining-nums}
.d144{color:var(--gold);font-weight:800}
.motes{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:-1}

/* Signature caption (brand book v1.3, chapter 07) */
.sigcap{position:relative;isolation:isolate;text-align:center;line-height:1.25;font-size:clamp(18px,2.9vw,32px)}
.sigcap::before{content:"";position:absolute;inset:-70% -16%;z-index:-1;filter:blur(5px);background:radial-gradient(ellipse at 50% 52%,rgba(255,196,60,.7) 0%,rgba(255,180,40,.42) 36%,rgba(255,170,30,0) 70%)}
.sigcap .l1{display:block;font:700 1em var(--f-num);letter-spacing:.16em;text-transform:uppercase;color:#FFF2B4;text-shadow:.07em 0 0 #5A3606,-.07em 0 0 #5A3606,0 .07em 0 #5A3606,0 -.07em 0 #5A3606,.05em .05em 0 #5A3606,-.05em .05em 0 #5A3606,.05em -.05em 0 #5A3606,-.05em -.05em 0 #5A3606,0 0 .15em rgba(90,54,6,.9),0 .12em .18em rgba(70,35,0,.55),0 0 .35em rgba(255,214,100,.95),0 0 .9em rgba(255,186,50,.9),0 0 1.8em rgba(255,160,30,.7)}
.sigcap .l2{display:block;margin-top:.2em;font:italic 600 .88em var(--f-cap);color:#fff;text-shadow:.07em 0 0 #6E4508,-.07em 0 0 #6E4508,0 .07em 0 #6E4508,0 -.07em 0 #6E4508,.05em .05em 0 #6E4508,-.05em .05em 0 #6E4508,.05em -.05em 0 #6E4508,-.05em -.05em 0 #6E4508,0 0 .15em rgba(110,69,8,.85),0 .12em .18em rgba(70,35,0,.5),0 0 .4em rgba(255,214,100,.9),0 0 1.1em rgba(255,180,40,.7)}

/* Buttons */
.btns{display:flex;flex-wrap:wrap;gap:12px}
.btn{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:12px 22px;border-radius:999px;font:800 .95rem/1.2 var(--f-body);letter-spacing:.02em;text-decoration:none;border:1px solid transparent;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease}
.btn--gold{background:linear-gradient(180deg,#ffd77a,#e9a83a);color:var(--btn-ink);box-shadow:0 10px 28px rgba(233,168,58,.38),inset 0 1px 0 rgba(255,255,255,.6)}
.btn--ghost{background:var(--glass);color:var(--ink);border-color:var(--line);backdrop-filter:blur(8px)}
.btn:hover{transform:translateY(-1px)}
@media (prefers-reduced-motion: reduce){html:not(.motion-on) .btn{transition:none}html:not(.motion-on) .btn:hover{transform:none}}

/* Hero */
.hero{position:relative;min-height:clamp(600px,66vw,860px);display:flex;align-items:flex-end;overflow:hidden;isolation:isolate}
.hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%;z-index:-3}
.hero::after{content:"";position:absolute;inset:auto 0 0 0;height:46%;z-index:-2;background:linear-gradient(180deg,rgba(0,0,0,0),var(--bg) 92%)}
.hero__inner{padding-block:clamp(120px,16vw,200px) clamp(36px,5vw,64px)}
.hero__plaque{max-width:600px;margin-left:auto;display:grid;gap:18px;padding:clamp(22px,3.4vw,38px);border-radius:28px;background:var(--glass);border:1px solid var(--line);box-shadow:var(--shadow);backdrop-filter:blur(12px) saturate(1.2)}
.hero h1{font-size:clamp(2.7rem,6.4vw,4.9rem);font-weight:600;letter-spacing:-.01em}
.hero .sigcap{margin-block:10px 4px}

/* Vision */
.vstory{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(28px,5vw,72px);align-items:center}
.film{margin:0;width:100%;max-width:400px;justify-self:center}
.film__frame{position:relative;border-radius:220px 220px 28px 28px;overflow:hidden;aspect-ratio:3/4;background:#0b1020;box-shadow:0 0 0 1px var(--line),0 0 0 9px var(--glass),0 0 0 10px var(--line),0 26px 70px rgba(168,95,0,.24),0 0 110px var(--glow)}
.film__frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.film figcaption{margin-top:20px;text-align:center;font:700 .76rem/1.5 var(--f-body);letter-spacing:.16em;text-transform:uppercase;color:var(--soft)}
.island{position:relative;margin:clamp(44px,6vw,80px) 0 0;isolation:isolate}
.island img{width:100%;height:auto;aspect-ratio:16/8;object-fit:cover;border-radius:var(--radius);box-shadow:var(--shadow)}
.quote{position:relative;z-index:1;max-width:820px;margin:clamp(-110px,-8vw,-48px) clamp(14px,4vw,48px) 0 auto;padding:clamp(22px,3vw,36px);border-radius:var(--radius);background:var(--glass);border:1px solid var(--line);box-shadow:var(--shadow);backdrop-filter:blur(12px) saturate(1.2)}
.quote blockquote{margin:0;font:italic 500 clamp(1.2rem,1.9vw,1.5rem)/1.45 var(--f-display);color:var(--ink)}
.quote__by{margin-top:14px;font:700 .76rem/1.3 var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:var(--soft)}
.after-quote{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);margin-top:clamp(32px,5vw,56px);align-items:start}
.every{font:italic 600 clamp(1.6rem,3vw,2.3rem)/1.25 var(--f-display);color:var(--ink)}
.porch{padding:clamp(20px,3vw,30px);border-radius:var(--radius);background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow);display:grid;gap:12px}
.porch q{font:italic 600 1.2rem/1.45 var(--f-display);color:var(--ink);quotes:"\201C" "\201D"}
.yt{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);border-radius:var(--radius);overflow:hidden;background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow);text-decoration:none;color:inherit;margin-top:clamp(40px,6vw,72px)}
.yt__thumb{position:relative;overflow:hidden;display:block}
.yt__thumb img{width:100%;height:100%;aspect-ratio:16/9;object-fit:cover;transition:transform .6s ease}
.yt__play{position:absolute;right:clamp(14px,2.4vw,26px);bottom:clamp(14px,2.4vw,26px);width:72px;height:72px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 35% 30%,#fff6d0,#ffd36b 50%,#e9a83a);box-shadow:0 0 0 8px rgba(255,250,238,.4),0 0 44px rgba(255,190,70,.95);transition:transform .3s ease}
.yt__play::after{content:"";margin-left:6px;border-left:20px solid #3a2200;border-top:12px solid transparent;border-bottom:12px solid transparent}
.yt__body{display:grid;gap:12px;align-content:center;padding:clamp(22px,3vw,40px)}
.yt__title{font:600 clamp(1.5rem,2.4vw,2rem)/1.12 var(--f-display);color:var(--ink);text-wrap:balance}
.yt__go{font:800 .92rem var(--f-body);color:var(--gold)}
.yt:hover .yt__play{transform:scale(1.06)}
.yt:hover .yt__thumb img{transform:scale(1.02)}
@media (prefers-reduced-motion: reduce){html:not(.motion-on) .yt__thumb img,html:not(.motion-on) .yt__play{transition:none}}

/* One beacon */
.figure-wide{position:relative;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);margin-block:clamp(28px,4vw,44px)}
.figure-wide img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
.figure-wide .sigcap{position:absolute;left:50%;bottom:7%;transform:translateX(-50%);width:max-content;max-width:90%}
.rings{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(24px,4vw,56px);align-items:center;margin-top:28px}
.rings svg{width:100%;height:auto;max-width:440px;margin-inline:auto;display:block}
.rings ol{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.rings li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 14px;align-items:start;padding:16px 18px;border-radius:16px;background:var(--card);border:1px solid var(--line)}
.rings li .k{grid-row:span 2;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font:700 .95rem var(--f-num);color:var(--btn-ink);background:radial-gradient(circle at 35% 30%,#fff3c4,#e9a83a)}
.rings li h3{font-size:1.25rem}
.rings li h3 small{font:700 .78rem var(--f-body);letter-spacing:.06em;color:var(--soft);margin-left:6px}
.rings li.field{background:linear-gradient(135deg,var(--card),var(--row-city));border-color:rgba(233,168,58,.6);box-shadow:0 0 30px var(--glow)}

/* Together + scale */
.together{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,64px);align-items:start}
.aside{padding:22px 24px;border-radius:18px;background:var(--card);border:1px solid var(--line)}
.aside h3{font-size:1.3rem;margin-bottom:8px}
.aside p{font-size:.98rem}
.scale-card{border-radius:var(--radius);background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow);padding:clamp(18px,2.6vw,28px);display:grid;gap:14px;min-width:0}
.scale-card__title{font:800 .74rem/1.2 var(--f-body);letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.scale-scroll{overflow-x:auto}
.scale{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.scale th{font:800 .68rem/1.3 var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:var(--soft);padding:0 8px 10px;text-align:right}
.scale th:first-child{text-align:left}
.scale td{padding:10px 8px;border-top:1px solid var(--line);color:var(--ink);text-align:right;vertical-align:middle}
.scale td:first-child{text-align:left;font:700 1rem var(--f-num);white-space:nowrap}
.scale td:nth-child(2),.scale td:nth-child(3):not(.whole){white-space:nowrap}
.scale tr.city td{background:var(--row-city)}
.scale td.whole{font:italic 600 1.08rem/1.25 var(--f-display);color:var(--gold)}
.scale-note{font-size:.95rem;color:var(--soft)}
.spoiler{border-radius:16px;border:1px dashed var(--line);background:var(--bg);padding:12px 16px}
.spoiler summary{cursor:pointer;font:800 .9rem/1.5 var(--f-body);color:var(--gold)}
.spoiler .fine{display:grid;gap:10px;margin-top:12px;font-size:.94rem}
.spoiler .fine b{color:var(--ink)}

/* Globe */
.globe-sec{background:radial-gradient(120% 80% at 50% 0%,var(--band),var(--bg) 70%)}
.globe{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(22px,4vw,48px);align-items:center;margin-top:clamp(28px,4vw,44px)}
.globe__stage{position:relative;width:100%;max-width:640px;margin-inline:auto;aspect-ratio:1/1}
.globe__lens{position:absolute;inset:0;border-radius:50%;overflow:hidden;isolation:isolate;background:radial-gradient(circle at 50% 45%,var(--band),var(--bg) 72%);box-shadow:0 0 0 1px var(--line),0 0 0 8px var(--glass),0 0 70px var(--glow)}
.globe__stage canvas{position:absolute;inset:0;width:100%;height:100%;cursor:crosshair;touch-action:pan-y}
.globe__fallback{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.globe__home{position:absolute;right:0;bottom:0;font:800 .8rem var(--f-body);padding:8px 14px;border-radius:999px;background:var(--glass);border:1px solid var(--line);color:var(--ink);cursor:pointer}
.panel{display:grid;gap:18px;padding:clamp(20px,3vw,32px);border-radius:var(--radius);background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow);min-width:0}
.panel__phase{font:800 .72rem/1.2 var(--f-body);letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
.panel__n{font-size:clamp(2.6rem,6vw,3.8rem);line-height:1;color:var(--ink);min-height:1em}
.panel__nlabel{font-size:.9rem;color:var(--soft);font-weight:700;margin-top:4px}
.panel__name{font:italic 600 1.55rem/1.2 var(--f-display);color:var(--ink)}
.readouts{display:grid;grid-template-columns:minmax(5.2em,max-content) minmax(0,1fr);gap:10px 14px;margin:0;align-items:baseline}
.readouts div{display:contents}
.readouts dt{font:800 .72rem/1.4 var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:var(--soft)}
.readouts dd{margin:0;color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums;min-width:0}
.readouts dd.pic{font-weight:600;color:var(--body);min-height:3.4em}
.slider{display:grid;gap:6px}
.slider label{font:800 .72rem/1.4 var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:var(--soft)}
input[type=range]{width:100%;accent-color:#e9a83a;height:28px}
.chips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.chip{font:700 .82rem/1 var(--f-num);letter-spacing:.06em;padding:10px 12px;border-radius:999px;border:1px solid var(--line);background:var(--bg);color:var(--ink);cursor:pointer;font-variant-numeric:tabular-nums}
.chip[aria-pressed="true"]{background:linear-gradient(180deg,#ffd77a,#e9a83a);color:var(--btn-ink);border-color:transparent}
.globe__note{margin-top:22px;text-align:center;font-size:.9rem;color:var(--soft)}

/* Path of milestones */
.phase{display:grid;gap:6px;margin-block:clamp(36px,5vw,56px) 26px}
.phase__q{font:italic 500 1.4rem/1.3 var(--f-display);color:var(--soft)}
.thread{position:relative;display:grid;gap:clamp(22px,3vw,34px);padding-left:clamp(34px,5vw,64px)}
.thread::before{content:"";position:absolute;left:clamp(12px,2vw,24px);top:10px;bottom:10px;width:3px;border-radius:3px;background:linear-gradient(180deg,#ffe39a,#e9a83a 60%,#ffe39a);box-shadow:0 0 14px var(--glow)}
.mile{position:relative;display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);border-radius:var(--radius);background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow)}
.mile::before{content:"";position:absolute;left:calc(-1 * clamp(34px,5vw,64px) + clamp(12px,2vw,24px) - var(--orb)/2 + 1.5px);top:34px;width:var(--orb);height:var(--orb);border-radius:50%;background:radial-gradient(circle at 35% 30%,#fffbe6,#ffd66a 45%,#e9a83a);box-shadow:0 0 0 4px var(--bg),0 0 18px rgba(255,196,80,.85)}
.mile__media{overflow:hidden;border-radius:var(--radius) 0 0 var(--radius)}
.mile:nth-child(even) .mile__media{border-radius:0 var(--radius) var(--radius) 0}
.mile img{width:100%;height:100%;min-height:260px;max-height:420px;object-fit:cover}
.mile img.portrait{object-position:50% 22%}
.mile__body{display:grid;gap:12px;align-content:center;padding:clamp(20px,3vw,34px)}
.mile__n{font-size:clamp(2rem,4vw,2.8rem);line-height:1;color:var(--gold)}
.mile__sub{font:italic 500 1.15rem/1.35 var(--f-display);color:var(--soft)}
.mile__stats{display:flex;flex-wrap:wrap;gap:8px 22px;font-size:.92rem;color:var(--soft)}
.mile__stats b{color:var(--ink);font-variant-numeric:tabular-nums}
.mile__pic{font-weight:700;color:var(--ink)}
.mile:nth-child(even){grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}
.mile:nth-child(even) .mile__media{order:2}

/* Heaven on Earth */
.heaven{position:relative;isolation:isolate;overflow:hidden;padding-block:clamp(200px,28vw,360px) clamp(56px,8vw,96px)}
.heaven__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%;z-index:-2}
.heaven::after{content:"";position:absolute;inset:38% 0 0 0;z-index:-1;background:linear-gradient(180deg,rgba(0,0,0,0),var(--bg) 70%)}
.heaven__plaque{max-width:820px;display:grid;gap:16px;padding:clamp(22px,3.4vw,40px);border-radius:28px;background:var(--glass);border:1px solid var(--line);box-shadow:var(--shadow);backdrop-filter:blur(12px) saturate(1.2)}
.heaven__plaque h2{font-size:clamp(2.4rem,5.4vw,4rem)}
.heaven__plaque h2 .num{display:block;font-size:.62em;color:var(--gold);letter-spacing:.06em;margin-bottom:6px}

/* Ways: Cities of Light + one light at a time */
.ways{display:grid;align-items:start;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(18px,3vw,28px);margin-top:clamp(28px,4vw,40px)}
.way{padding:clamp(20px,3vw,34px);border-radius:var(--radius);background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow);display:grid;gap:16px;align-content:start;min-width:0}
.way h3{font-size:clamp(1.6rem,2.6vw,2.1rem)}
.city-svg{width:100%;max-width:300px;height:auto;margin-inline:auto;display:block}
.struct{list-style:none;margin:0;padding:0;display:grid}
.struct li{display:grid;grid-template-columns:minmax(0,11em) minmax(0,1fr);gap:2px 16px;padding:11px 0;border-top:1px solid var(--line);align-items:baseline}
.struct b{font:700 .92rem/1.4 var(--f-num);color:var(--ink);letter-spacing:.03em}
.struct span{font-size:.95rem}
.struct li.big b{color:var(--gold)}
.chain{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px}
.chain li{padding:9px 6px;border-radius:12px;border:1px solid var(--line);background:color-mix(in srgb,var(--card) calc(100% - var(--a)),#ffd66a var(--a));text-align:center}
.chain li small{display:block;font:800 .6rem/1.3 var(--f-body);letter-spacing:.12em;text-transform:uppercase;color:var(--soft)}
.chain li b{display:block;font:700 .92rem/1.4 var(--f-num);color:var(--ink);font-variant-numeric:tabular-nums}
.chain li.pass{outline:2px solid #e9a83a;outline-offset:2px}
.chain li.pass small{color:var(--gold)}
.ways-img{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);margin:clamp(18px,3vw,28px) 0 0}
.ways-img img{width:100%;height:auto;aspect-ratio:21/8;object-fit:cover}

/* How */
.how{list-style:none;margin:32px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;counter-reset:how}
.how li{counter-increment:how;display:grid;gap:8px;align-content:start;padding:22px;border-radius:18px;background:var(--card);border:1px solid var(--line)}
.how li::before{content:counter(how);width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font:700 1rem var(--f-num);color:var(--btn-ink);background:radial-gradient(circle at 35% 30%,#fff3c4,#e9a83a);box-shadow:0 0 16px var(--glow)}
.how h3{font-size:1.45rem}
.how p{font-size:.98rem}

/* Begin */
.begin{position:relative;text-align:center;overflow:hidden;isolation:isolate}
.halo{position:absolute;left:50%;top:clamp(40px,6vw,80px);width:min(560px,86vw);aspect-ratio:1;transform:translateX(-50%);z-index:-1;border-radius:50%;border:2px solid rgba(233,168,58,.55);box-shadow:0 0 60px rgba(255,200,90,.45),inset 0 0 60px rgba(255,200,90,.35);background:radial-gradient(circle,rgba(255,236,170,.55),rgba(255,214,120,.12) 48%,transparent 70%);animation:breathe 8s ease-in-out infinite}
@keyframes breathe{50%{transform:translateX(-50%) scale(1.04);box-shadow:0 0 90px rgba(255,200,90,.6),inset 0 0 70px rgba(255,200,90,.45)}}
@media (prefers-reduced-motion: reduce){html:not(.motion-on) .halo{animation:none}}
.begin .sigcap{margin:clamp(70px,10vw,130px) auto 30px;font-size:clamp(20px,3.4vw,38px);width:max-content;max-width:100%}
.begin .stack{max-width:680px;margin-inline:auto}
.begin .btns{justify-content:center;margin-top:10px}
.love{font:italic 600 clamp(1.5rem,2.6vw,2rem)/1.3 var(--f-display);color:var(--ink);margin-top:18px}
.sign{font:600 1.4rem var(--f-display);color:var(--gold)}
.motion{justify-self:start;display:inline-flex;align-items:center;gap:9px;min-height:40px;padding:9px 15px;border-radius:999px;background:var(--glass);border:1px solid var(--line);font:800 .78rem/1 var(--f-body);letter-spacing:.04em;color:var(--ink);cursor:pointer}
.motion__dot{width:11px;height:11px;border-radius:50%;border:1.5px solid var(--gold)}
.motion[aria-pressed="true"] .motion__dot{border-color:transparent;background:radial-gradient(circle at 35% 30%,#fff3c4,#e9a83a);box-shadow:0 0 9px rgba(233,168,58,.95)}
/* v3 additions */
.hero__words{display:grid;gap:12px;font-size:clamp(1.02rem,1.4vw,1.14rem)}
.hero__q{font:italic 600 clamp(1.35rem,2.2vw,1.65rem)/1.3 var(--f-display);color:var(--gold)}
.welcome{padding-block:clamp(40px,6vw,76px) 0;text-align:center}
.welcome__inner{display:grid;gap:20px;max-width:880px}
.welcome__lead{font-size:clamp(1.08rem,1.6vw,1.25rem);max-width:680px;margin-inline:auto;text-wrap:pretty}
.welcome__big{font:italic 600 clamp(1.8rem,3.6vw,2.8rem)/1.2 var(--f-display);color:var(--ink);text-wrap:balance}
.heaven__seen{font:italic 600 clamp(1.3rem,2.2vw,1.65rem)/1.35 var(--f-display);color:var(--ink)}
.sign-photo{width:150px;height:150px;border-radius:50%;object-fit:cover;margin:12px auto 0;box-shadow:0 0 0 3px #f2c25a,0 0 0 10px var(--glass),0 0 54px rgba(255,190,70,.65)}
.ripple-line{margin:clamp(40px,5vw,60px) auto 0;max-width:820px;text-align:center;font:italic 600 clamp(1.6rem,3.2vw,2.4rem)/1.25 var(--f-display);color:var(--ink);text-wrap:balance}
.ways__all{margin:14px auto 0;max-width:640px;text-align:center;color:var(--soft)}
.way__lines{display:grid;gap:6px;font:italic 500 1.22rem/1.4 var(--f-display);color:var(--ink)}
.way__note{font-size:.95rem;color:var(--soft)}
.values{margin-top:clamp(36px,5vw,56px);padding:clamp(22px,3vw,40px);border-radius:var(--radius);background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow);display:grid;gap:24px}
.values__head{display:grid;gap:6px}
.values__head h3{font-size:clamp(1.9rem,3.2vw,2.5rem)}
.values__head p:last-child{color:var(--soft)}
.values__grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:12px}
@media (max-width:1000px){.values__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.struct--row{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin-top:clamp(18px,3vw,28px)}
.struct--row li{grid-template-columns:minmax(0,1fr);gap:6px;align-content:start;align-items:start;padding:16px;border:1px solid var(--line);border-radius:16px;background:var(--card)}
.struct--row li.big{background:linear-gradient(135deg,var(--card),var(--row-city));border-color:rgba(233,168,58,.6)}
@media (max-width:900px){.struct--row{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:600px){.struct--row{grid-template-columns:repeat(2,minmax(0,1fr))}}
.values__grid li{position:relative;display:grid;gap:4px;align-content:start;padding:16px 14px;border-radius:14px;border:1px solid var(--line);background:var(--bg)}
.values__grid .vn{position:absolute;top:12px;right:14px;font:700 .74rem var(--f-num);color:var(--soft)}
.values__grid h4,.values__four h4{margin:6px 0 0;font:600 1.25rem/1.2 var(--f-display);color:var(--ink)}
.values__grid p{font-size:.86rem;line-height:1.45}
.v-icon{width:32px;height:32px;fill:none;stroke:var(--gold);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.values__four{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:20px 28px;align-items:center;padding-top:22px;border-top:1px solid var(--line)}
.values__four h4{margin:0 0 6px;font-size:1.5rem}
.channels{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;text-align:center}
.channels li{display:grid;gap:4px;justify-items:center}
.channels .orb{width:60px;height:60px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 35% 30%,#fffbe6,#ffe29a 55%,#f0b84a);box-shadow:0 0 20px var(--glow)}
.channels .orb .v-icon{stroke:#5a3606}
.channels strong{font:600 1.15rem var(--f-display);color:var(--ink)}
.channels em{font-size:.9rem;color:var(--soft)}
.values__sum{grid-column:1/-1;text-align:center;font:italic 600 1.3rem var(--f-display);color:var(--ink)}
.values__sum .num{color:var(--gold);font-style:normal}
@media (max-width:600px){.values__four{grid-template-columns:minmax(0,1fr)}.channels{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:16px}}
.foot{padding-block:28px 40px;text-align:center;font:700 .78rem var(--f-body);letter-spacing:.2em;text-transform:uppercase;color:var(--soft)}

/* Page options: language and light/dark, top right of the hero */
html.i18n-wait .hero,html.i18n-wait main,html.i18n-wait .foot{visibility:hidden}
.prefs{position:absolute;z-index:6;top:calc(14px + env(safe-area-inset-top,0px));right:max(14px,env(safe-area-inset-right,0px));display:flex;align-items:center;gap:4px;padding:4px;border-radius:999px;background:var(--glass);border:1px solid var(--line);box-shadow:0 8px 26px rgba(90,54,6,.16);-webkit-backdrop-filter:blur(12px) saturate(1.2);backdrop-filter:blur(12px) saturate(1.2);font:800 .86rem/1 var(--f-body);color:var(--ink)}
.prefs button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.prefs svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.prefs__lang{position:relative}
.prefs__btn{display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:0 12px 0 10px;border-radius:999px}
.prefs__icon{color:var(--gold)}
.prefs .prefs__chev{width:14px;height:14px;transition:transform .2s ease}
.prefs__btn[aria-expanded="true"] .prefs__chev{transform:rotate(180deg)}
.prefs__btn:hover,.prefs__theme button:hover,.prefs__menu button:hover{background:rgba(233,168,58,.16)}
.prefs__menu{position:absolute;top:calc(100% + 10px);right:-4px;min-width:200px;margin:0;padding:6px;list-style:none;display:grid;gap:2px;border-radius:18px;background:var(--bg);border:1px solid var(--line);box-shadow:var(--shadow);animation:prefs-in .18s ease-out}
@keyframes prefs-in{from{opacity:0;transform:translateY(-4px)}}
.prefs__menu button{width:100%;min-height:44px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 14px;border-radius:12px;text-align:left;font-weight:700;font-size:.95rem}
.prefs__menu small{font:800 .64rem/1 var(--f-body);letter-spacing:.14em;color:var(--soft)}
.prefs__menu button[aria-current="true"]{background:linear-gradient(180deg,#ffd77a,#e9a83a);color:var(--btn-ink)}
.prefs__menu button[aria-current="true"] small{color:inherit}
.prefs__theme{display:flex;gap:2px;padding-left:4px;border-left:1px solid var(--line)}
.prefs__theme button{width:40px;height:40px;display:grid;place-items:center;border-radius:50%}
.prefs__theme button[aria-pressed="true"]{background:linear-gradient(180deg,#ffd77a,#e9a83a);color:var(--btn-ink);box-shadow:0 0 14px var(--glow)}
@media (prefers-reduced-motion: reduce){html:not(.motion-on) .prefs__menu{animation:none}html:not(.motion-on) .prefs .prefs__chev{transition:none}}
@media (max-width:600px){.prefs{top:calc(10px + env(safe-area-inset-top,0px));right:max(10px,env(safe-area-inset-right,0px))}}

/* Longer words in German, French and Spanish */
.values__grid h4,.values__grid p,.struct b,.struct span,.chain small,.channels strong{hyphens:auto;overflow-wrap:break-word;min-width:0}
html[lang="de"] .values__grid h4,html[lang="fr"] .values__grid h4,html[lang="es"] .values__grid h4{font-size:1.14rem}
@media (max-width:600px){h1,h2,h3{hyphens:auto}}

/* Hindi: Devanagari faces after the Latin ones (numbers stay in the brand faces), room for the matras, no letter-spacing (it breaks the headline) */
html[lang="hi"]{--f-display:'Cormorant Garamond','Tiro Devanagari Hindi','Nirmala UI','Kohinoor Devanagari','Noto Serif Devanagari',serif;--f-body:'Nunito Sans','Mukta','Nirmala UI','Kohinoor Devanagari','Noto Sans Devanagari',sans-serif;--f-num:'Cinzel','Tiro Devanagari Hindi','Nirmala UI',serif;--f-cap:'Merriweather','Tiro Devanagari Hindi','Nirmala UI',serif}
html[lang="hi"] *{letter-spacing:normal!important}
html[lang="hi"] body{line-height:1.85}
html[lang="hi"] h1,html[lang="hi"] h2,html[lang="hi"] h3,html[lang="hi"] h4,html[lang="hi"] .yt__title{line-height:1.38}
html[lang="hi"] .hero__q,html[lang="hi"] .welcome__big,html[lang="hi"] .every,html[lang="hi"] .ripple-line,html[lang="hi"] .heaven__seen,html[lang="hi"] .love,html[lang="hi"] .quote blockquote,html[lang="hi"] .porch q,html[lang="hi"] .way__lines,html[lang="hi"] .mile__sub,html[lang="hi"] .phase__q,html[lang="hi"] .panel__name,html[lang="hi"] .scale td.whole,html[lang="hi"] .values__sum{line-height:1.55}
html[lang="hi"] .eyebrow,html[lang="hi"] .scale-card__title,html[lang="hi"] .panel__phase,html[lang="hi"] .film figcaption,html[lang="hi"] .quote__by,html[lang="hi"] .foot{font-size:.86rem;line-height:1.5}
html[lang="hi"] .readouts dt,html[lang="hi"] .slider label,html[lang="hi"] .scale th,html[lang="hi"] .chain li small{font-size:.8rem;line-height:1.5}
html[lang="hi"] .sigcap .l1{font-size:.92em;line-height:1.45}

@media (max-width:900px){
  .hero__plaque{margin-left:0}
  .vstory,.after-quote,.together,.rings,.globe,.ways{grid-template-columns:minmax(0,1fr)}
  .quote{position:relative;inset:auto;max-width:none;margin:-48px 14px 0}
  .island{overflow:visible;box-shadow:none}
  .island img{border-radius:var(--radius);box-shadow:var(--shadow)}
  .island::after{display:none}
  .yt{grid-template-columns:minmax(0,1fr)}
  .how{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .mile,.mile:nth-child(even){grid-template-columns:minmax(0,1fr)}
  .mile:nth-child(even) .mile__media{order:0}
  .mile__media,.mile:nth-child(even) .mile__media{border-radius:var(--radius) var(--radius) 0 0}
  .mile img{aspect-ratio:3/2;min-height:0;height:auto}
}
@media (max-width:600px){
  body{font-size:1rem}
  .how{grid-template-columns:minmax(0,1fr)}
  .hero{min-height:0}
  .hero__inner{padding-top:min(62vw,340px)}
  .hero__img{height:min(80vw,440px);object-position:50% 30%}
  .hero::after{inset:min(36vw,200px) 0 auto 0;height:min(44vw,240px)}
  .rings li{padding:14px}
  .figure-wide .sigcap{font-size:16px}
  .struct li{grid-template-columns:minmax(0,1fr)}
  .scale td,.scale th{padding-inline:5px}
  .scale td:first-child{font-size:.9rem}
  .scale td.whole{font-size:.98rem}
  .ways-img img{aspect-ratio:3/2}
  .island img{aspect-ratio:4/3}
  .yt__play{width:58px;height:58px}
}