/* Lagrangian hub — Space Course Unlimited */
:root{
  --bg:#060a19; --bg2:#0a1026; --panel:#0d1431; --panel2:#111a3d;
  --line:rgba(217,184,120,.38); --line-soft:rgba(217,184,120,.18);
  --gold:#d9b878; --gold2:#f3dca8; --cyan:#5fd4ff; --cyan-dim:rgba(95,212,255,.45);
  --text:#ebe6dc; --muted:#a9afc4; --violet:#a875ff;
  --display:'Cinzel', 'Trajan Pro', Georgia, serif;
  --serif:'Cormorant Garamond', Georgia, serif;
  --sans:'Montserrat', system-ui, -apple-system, sans-serif;
  --r:12px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:var(--serif);font-size:19px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.wrap{max-width:1720px;margin:0 auto;padding:0 clamp(12px,1.2vw,24px)}
.caps{font-family:var(--sans);text-transform:uppercase;letter-spacing:.16em;font-size:12px;font-weight:600}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:4px}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;padding:13px 26px;border-radius:999px;font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;transition:.2s;white-space:nowrap}
.btn-cyan{border:1.5px solid var(--cyan);color:#eaf8ff;background:rgba(10,30,60,.55);box-shadow:0 0 18px rgba(95,212,255,.35),inset 0 0 12px rgba(95,212,255,.15)}
.btn-cyan:hover{box-shadow:0 0 30px rgba(95,212,255,.6),inset 0 0 16px rgba(95,212,255,.25);transform:translateY(-1px)}
.btn-gold{border:1.5px solid var(--gold);color:var(--gold2);background:rgba(20,16,6,.35)}
.btn-gold:hover{background:rgba(217,184,120,.14)}
.btn-sm{padding:9px 18px;font-size:11.5px}
.chev::after{content:"›";font-size:1.4em;line-height:0;margin-left:2px}

/* ---------- header ---------- */
header.site{position:sticky;top:0;z-index:50;background:rgba(6,10,25,.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--line-soft)}
.nav{display:flex;align-items:center;gap:28px;height:76px}
.brand{display:flex;align-items:center;gap:12px;flex-shrink:0}
.brand svg{width:64px;height:40px}
.brand small{display:block;font-family:var(--sans);font-size:9.5px;letter-spacing:.2em;color:var(--text);font-weight:500}
.brand b{display:block;font-family:var(--display);font-weight:600;font-size:27px;letter-spacing:.04em;line-height:1;background:linear-gradient(180deg,var(--gold2),var(--gold) 70%);-webkit-background-clip:text;background-clip:text;color:transparent}
.brand b sup{font-size:10px;vertical-align:top}
.divider{width:1px;height:38px;background:var(--line-soft)}
.links{display:flex;gap:34px;margin-left:auto;font-size:19px}
.links a{opacity:.9;transition:.15s;position:relative}
.links a:hover,.links a[aria-current=page]{color:var(--gold2);opacity:1}
.links a[aria-current=page]::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1px;background:var(--gold)}
.menu-btn{display:none;margin-left:auto;width:42px;height:42px;border:1px solid var(--line);border-radius:10px;place-items:center}
.menu-btn span,.menu-btn span::before,.menu-btn span::after{display:block;width:18px;height:1.5px;background:var(--gold2);position:relative;content:""}
.menu-btn span::before{position:absolute;top:-6px}.menu-btn span::after{position:absolute;top:6px}
@media(max-width:1180px){
  .divider{display:none}
  .links{display:none;position:absolute;top:76px;left:0;right:0;flex-direction:column;gap:0;background:rgba(6,10,25,.98);border-bottom:1px solid var(--line-soft);padding:8px 24px 18px}
  .links.open{display:flex}
  .links a{padding:12px 0;border-bottom:1px solid rgba(255,255,255,.06)}
  .links a[aria-current=page]::after{display:none}
  .menu-btn{display:grid}
  .nav .join{display:none}
  .links .join-m{display:block;color:var(--gold2)}
}
@media(min-width:1181px){.links .join-m{display:none}}
@media(max-width:480px){.brand svg{width:46px}.brand b{font-size:21px}.brand small{font-size:8px;letter-spacing:.14em}}

/* ---------- hero ---------- */
.hero{position:relative;min-height:clamp(380px,23vw,560px);display:grid;place-items:center;text-align:center;overflow:hidden;border-bottom:1px solid var(--line-soft)}
.hero-bg{position:absolute;inset:0;background:url(../img/hero.jpg) center/cover no-repeat}
.hero-bg::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 34% 55% at 50% 42%,rgba(6,10,25,.35),rgba(6,10,25,0) 75%),linear-gradient(0deg,rgba(6,10,25,.35),rgba(6,10,25,0) 22%)}
.hero-in{position:relative;padding:30px 24px 40px;max-width:820px;transform:translateY(-4%)}
.hero h1{font-family:var(--display);font-weight:600;font-size:clamp(34px,4.4vw,72px);line-height:1.02;letter-spacing:.03em;text-transform:uppercase;background:linear-gradient(180deg,#fff3d6,var(--gold) 80%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 2px 3px rgba(0,0,0,.85)) drop-shadow(0 6px 24px rgba(0,0,0,.6))}
.hero .rule{width:240px;height:2px;margin:14px auto 16px;background:radial-gradient(closest-side,var(--gold2),rgba(217,184,120,0))}
.hero p{font-style:italic;font-size:clamp(19px,2vw,24px);text-shadow:0 1px 3px rgba(0,0,0,.95),0 2px 16px rgba(0,0,0,.8)}
.hero .btn{margin-top:20px}
@media(max-width:760px){.hero{min-height:520px}.hero-bg{background-position:30% center}.hero-bg::after{background:linear-gradient(0deg,rgba(6,10,25,.85),rgba(6,10,25,.45))}}

/* ---------- section headings ---------- */
section{padding:30px 0}
.ornate{display:flex;align-items:center;gap:28px;justify-content:center;margin-bottom:22px}
.ornate::before,.ornate::after{content:"";flex:1;max-width:400px;height:1px;background:linear-gradient(90deg,rgba(217,184,120,0),var(--gold))}
.ornate::after{transform:scaleX(-1)}
.ornate h2{font-family:var(--display);font-weight:500;font-size:clamp(20px,2.3vw,34px);text-transform:uppercase;letter-spacing:.24em;color:var(--gold2);text-align:center}
@media(max-width:600px){.ornate{gap:12px}.ornate h2{letter-spacing:.12em}}

/* ---------- explore cards ---------- */
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.card{position:relative;border:1px solid rgba(217,184,120,.55);box-shadow:0 0 0 1px rgba(0,0,0,.4),0 10px 30px rgba(0,0,0,.45),inset 0 0 22px rgba(217,184,120,.06);border-radius:var(--r);overflow:hidden;background:var(--panel);display:flex;flex-direction:column;transition:.25s}
.card:hover{transform:translateY(-4px);border-color:var(--gold);box-shadow:0 16px 40px rgba(0,0,0,.5),0 0 24px rgba(217,184,120,.15)}
.card img{width:100%;height:auto;aspect-ratio:362/192;object-fit:cover;object-position:center 30%}
.card .txt{position:relative;margin-top:-64px;padding:30px 18px 16px;background:linear-gradient(180deg,rgba(13,20,49,0),rgba(10,15,38,.88) 34px,var(--panel) 64px);flex:1}
.card h3{font-family:var(--display);font-weight:500;font-size:clamp(17px,1.35vw,23px);text-transform:uppercase;letter-spacing:.03em;line-height:1.15;margin-bottom:6px}
.card h3::after{content:"\00a0›";color:var(--gold2)}
.card p{font-size:16px;line-height:1.3;color:#dcd8cf}
@media(max-width:1080px){.cards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.cards{grid-template-columns:1fr}}

/* ---------- panels row ---------- */
.row2{display:grid;grid-template-columns:1.07fr 1fr;gap:16px}
@media(max-width:1000px){.row2{grid-template-columns:1fr}}
.panel{border:1px solid rgba(217,184,120,.5);box-shadow:0 10px 30px rgba(0,0,0,.4);border-radius:var(--r);background:linear-gradient(180deg,var(--panel2),var(--panel));overflow:hidden}
.journal{display:grid;grid-template-columns:190px 1fr}
.journal .pic{background:url(../img/journal.jpg) center/cover;min-height:100%;-webkit-mask-image:linear-gradient(90deg,#000 70%,transparent);mask-image:linear-gradient(90deg,#000 70%,transparent)}
.journal .body{margin-left:-24px;position:relative}
.journal .body{padding:16px 20px 16px}
.badge{display:inline-block;padding:4px 14px;border-radius:999px;background:linear-gradient(180deg,var(--gold2),var(--gold));color:#1d1606;font-family:var(--sans);font-weight:700;font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.journal .meta{display:flex;justify-content:space-between;align-items:center;gap:12px}
.journal time{font-family:var(--sans);font-size:13px;color:var(--muted)}
.journal h3{font-family:var(--serif);font-weight:600;font-size:clamp(24px,2vw,31px);line-height:1.1;margin:8px 0 6px}
.journal p{font-size:16.5px;line-height:1.45;color:#ddd9d0}
.journal .more{display:none;margin-top:10px}
.journal.open .more{display:block}
.journal .readmore{color:var(--cyan);font-size:18px}
.journal .actions{display:flex;align-items:center;gap:22px;margin-top:10px;flex-wrap:wrap}
.journal .actions .btn{margin-left:auto}
@media(max-width:620px){.journal{grid-template-columns:1fr}.journal .pic{min-height:180px}.journal .actions .btn{margin-left:0}}

.reveals{padding:14px 16px 16px;display:flex;flex-direction:column}
.reveals .head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:10px}
.reveals .head button{white-space:nowrap}
.reveals h3{font-family:var(--display);font-weight:500;font-size:clamp(19px,4.6vw,26px);white-space:nowrap;letter-spacing:.06em;color:var(--gold2)}
.reveals .head button{color:var(--cyan);font-size:18px}
.thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:auto 0}
.thumb{position:relative;border-radius:8px;overflow:hidden;border:1px solid var(--line-soft);aspect-ratio:152/148;cursor:pointer;box-shadow:0 6px 18px rgba(0,0,0,.4)}
.thumb img{width:100%;height:100%;object-fit:cover;transition:.3s}
.thumb:hover img{transform:scale(1.06)}
.thumb .like{position:absolute;right:6px;bottom:6px;background:rgba(6,10,25,.75);padding:3px 9px;border-radius:999px;font-size:12px}
@media(max-width:560px){.thumbs{grid-template-columns:repeat(2,1fr)}}

/* ---------- like button ---------- */
.like{display:inline-flex;align-items:center;gap:7px;font-family:var(--sans);font-size:14px;color:var(--text);transition:.15s}
.like svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;transition:.15s}
.like:hover{color:var(--gold2)}
.like.on{color:#ff8fb3}.like.on svg{fill:#ff8fb3;stroke:#ff8fb3}
.like.pop svg{transform:scale(1.35)}
.talk{display:inline-flex;align-items:center;gap:7px;font-family:var(--sans);font-size:14px}
.talk svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8}
.talk:hover{color:var(--gold2)}

/* ---------- guest lounge ---------- */
.lounge{display:grid;grid-template-columns:1.1fr 1fr;gap:26px;align-items:start}
.lounge .panel{padding:28px}
.lounge h3{font-family:var(--display);font-weight:500;font-size:26px;letter-spacing:.05em;color:var(--gold2);margin-bottom:6px}
.lounge p.lead{color:#d7d3ca;margin-bottom:18px}
@media(max-width:900px){.lounge{grid-template-columns:1fr}}

/* ---------- forms ---------- */
.field{display:block;margin-bottom:14px}
.field span{display:block;font-family:var(--sans);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.field input,.field textarea,.field select{width:100%;background:rgba(4,8,20,.7);border:1px solid var(--line-soft);border-radius:10px;padding:12px 14px;color:var(--text);font-family:var(--sans);font-size:15px;outline:none;transition:.15s}
.field textarea{min-height:120px;resize:vertical;line-height:1.5}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(95,212,255,.15)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:520px){.two{grid-template-columns:1fr}}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.fine{font-family:var(--sans);font-size:12px;color:var(--muted);margin-top:10px;line-height:1.5}
.inline-join{display:flex;border:1px solid var(--line);border-radius:999px;overflow:hidden}
.inline-join input{flex:1;min-width:0;background:transparent;border:0;padding:13px 18px;color:var(--text);font-family:var(--sans);font-size:15px;outline:none}
.inline-join button{padding:0 20px;color:var(--gold2);font-family:var(--sans);font-weight:600;font-size:12px;letter-spacing:.14em;text-transform:uppercase;border-left:1px solid var(--line-soft)}
.inline-join button:hover{background:rgba(217,184,120,.12)}

/* ---------- area pages ---------- */
.page-hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line-soft)}
.page-hero .bg{position:absolute;inset:0;background-size:cover;background-position:center;filter:blur(2px) saturate(1.1);transform:scale(1.04)}
.page-hero .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,10,25,.95) 0%,rgba(6,10,25,.75) 45%,rgba(6,10,25,.35) 100%)}
.page-hero .in{position:relative;padding:70px 24px 60px;max-width:1320px;margin:0 auto}
.crumb{font-family:var(--sans);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.crumb a:hover{color:var(--gold2)}
.page-hero h1{font-family:var(--display);font-weight:600;font-size:clamp(34px,5vw,60px);letter-spacing:.03em;line-height:1.05;margin:12px 0 14px;background:linear-gradient(180deg,#fff3d6,var(--gold) 85%);-webkit-background-clip:text;background-clip:text;color:transparent}
.page-hero p{max-width:640px;font-size:21px;font-style:italic;color:#e3dfd6}

.entries{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:1000px){.entries{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.entries{grid-template-columns:1fr}}
.entry{border:1px solid var(--line-soft);border-radius:var(--r);background:linear-gradient(180deg,var(--panel2),var(--panel));padding:22px 22px 18px;display:flex;flex-direction:column;transition:.2s}
.entry:hover{border-color:var(--line)}
.entry .tag{font-family:var(--sans);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.entry h3{font-family:var(--display);font-weight:500;font-size:22px;letter-spacing:.02em;line-height:1.2;margin:8px 0 10px}
.entry p{font-size:17.5px;color:#d9d6ce;flex:1}
.entry .note{margin-top:12px;padding-top:12px;border-top:1px solid rgba(255,255,255,.07);font-size:16px;font-style:italic;color:var(--muted)}
.entry .actions{display:flex;gap:20px;margin-top:14px;padding-top:12px;border-top:1px solid rgba(255,255,255,.07)}
.subhead{font-family:var(--display);font-weight:500;font-size:24px;letter-spacing:.12em;color:var(--gold2);margin:48px 0 18px}
.subhead:first-child{margin-top:0}
.rules{counter-reset:r;list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:10px 30px}
.rules li{counter-increment:r;padding-left:42px;position:relative;font-size:18px}
.rules li::before{content:counter(r);position:absolute;left:0;top:1px;width:28px;height:28px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;font-family:var(--sans);font-size:12px;color:var(--gold2)}
@media(max-width:700px){.rules{grid-template-columns:1fr}}

.suggest{margin-top:56px}
.suggest .panel{padding:30px;display:grid;grid-template-columns:1fr 1.3fr;gap:30px}
.suggest h3{font-family:var(--display);font-weight:500;font-size:26px;color:var(--gold2);letter-spacing:.04em}
.suggest p{color:#d7d3ca;margin-top:8px}
@media(max-width:860px){.suggest .panel{grid-template-columns:1fr}}
.next{display:flex;justify-content:space-between;gap:16px;margin-top:40px;flex-wrap:wrap}

/* ---------- footer ---------- */
footer.site{margin-top:40px;border-top:1px solid var(--line-soft);padding:44px 0 36px;background:linear-gradient(180deg,var(--bg),#03050e)}
.fgrid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:36px}
.fgrid h4{font-family:var(--sans);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:12px}
.fgrid>div:not(.fbook) a{display:block;color:#cfd2df;margin-bottom:6px;font-size:17px}
.fgrid>div:not(.fbook) a:hover{color:var(--gold2)}
.fbook{display:flex;gap:16px;align-items:flex-start}
.fbook p{font-size:17px;color:#cfd2df}
.fbook strong{color:var(--gold2);font-weight:600}
.legal{margin-top:30px;padding-top:20px;border-top:1px solid rgba(255,255,255,.06);font-family:var(--sans);font-size:12px;color:#8187a0;line-height:1.7}
@media(max-width:860px){.fgrid{grid-template-columns:1fr}}

/* ---------- modal / lightbox / toast ---------- */
.modal{position:fixed;inset:0;z-index:100;display:none;place-items:center;padding:18px;background:rgba(2,4,12,.78);backdrop-filter:blur(6px)}
.modal.on{display:grid}
.modal .box{position:relative;width:100%;max-width:560px;max-height:92vh;overflow:auto;border:1px solid var(--line);border-radius:16px;background:linear-gradient(180deg,var(--panel2),var(--bg2));padding:30px}
.modal h3{font-family:var(--display);font-weight:500;font-size:28px;color:var(--gold2);letter-spacing:.03em;line-height:1.15;margin-bottom:6px}
.modal .lead{color:#d7d3ca;margin-bottom:18px}
.modal .x{position:absolute;top:12px;right:16px;font-size:30px;line-height:1;color:var(--muted)}
.modal .x:hover{color:var(--text)}
.lightbox .box{max-width:980px;padding:0;overflow:hidden}
.lightbox img{width:100%;max-height:min(64vh,560px);object-fit:contain;background:#000}
.lightbox .cap{padding:18px 24px 22px;display:flex;gap:20px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap}
.lightbox .cap h3{font-size:24px;margin:0}
.lightbox .cap p{color:#d7d3ca;font-size:18px;margin-top:4px;max-width:640px}
.lightbox .nav-l,.lightbox .nav-r{position:absolute;top:34%;width:44px;height:44px;border-radius:50%;background:rgba(6,10,25,.7);border:1px solid var(--line);font-size:26px;color:var(--gold2);display:grid;place-items:center}
.lightbox .nav-l{left:12px}.lightbox .nav-r{right:12px}
.lightbox .x{z-index:2;background:rgba(6,10,25,.7);border-radius:50%;width:40px;height:40px;display:grid;place-items:center;top:12px;right:12px}
.toast{position:fixed;left:50%;bottom:22px;transform:translate(-50%,150%);opacity:0;visibility:hidden;z-index:120;max-width:92vw;padding:13px 22px;border-radius:999px;background:linear-gradient(180deg,var(--gold2),var(--gold));color:#1d1606;font-family:var(--sans);font-size:14px;font-weight:600;text-align:center;transition:.35s}
.toast.on{transform:translate(-50%,0);opacity:1;visibility:visible}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
@media(max-width:620px){.journal .body{margin-left:0}.journal .pic{-webkit-mask-image:linear-gradient(180deg,#000 70%,transparent);mask-image:linear-gradient(180deg,#000 70%,transparent)}}

/* ---------- hero video ---------- */
.hero-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 38%;opacity:0;transition:opacity 1.2s ease}
.hero-vid.ready{opacity:1}
.hero.has-vid .hero-bg{background-image:url(../img/hero-video-poster.jpg);background-position:center 38%}
.hero-shade{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 40% 62% at 50% 44%,rgba(6,10,25,.55),rgba(6,10,25,.2) 60%,rgba(6,10,25,0) 85%),linear-gradient(0deg,rgba(6,10,25,.55),rgba(6,10,25,0) 28%),linear-gradient(180deg,rgba(6,10,25,.35),rgba(6,10,25,0) 22%)}
.vid-toggle{position:absolute;right:16px;bottom:14px;z-index:3;width:38px;height:38px;border-radius:50%;background:rgba(6,10,25,.6);border:1px solid var(--line);display:grid;place-items:center;opacity:.75;transition:.2s}
.vid-toggle:hover{opacity:1}
.vid-toggle svg{width:16px;height:16px;fill:none;stroke:var(--gold2);stroke-width:2.4;stroke-linecap:round}
.vid-toggle .i-play{display:none}.vid-toggle.paused .i-play{display:block;fill:var(--gold2);stroke:none}.vid-toggle.paused .i-pause{display:none}
.hero.has-vid{min-height:clamp(420px,30vw,620px)}
.vid-toggle[hidden]{display:none}

/* ================= character profile ================= */
.ch-hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line-soft)}
.ch-backdrop{position:absolute;inset:-30px;background-size:cover;background-position:center;filter:saturate(1.15) brightness(.85)}
.ch-backdrop::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,10,25,.78) 0%,rgba(6,10,25,.25) 32%,rgba(6,10,25,.15) 68%,rgba(6,10,25,.6) 100%),linear-gradient(0deg,rgba(6,10,25,.9),rgba(6,10,25,0) 22%)}
.ch-grid{position:relative;display:grid;grid-template-columns:minmax(300px,1fr) minmax(0,1.25fr) minmax(280px,.95fr);align-items:center;gap:10px;min-height:clamp(600px,44vw,820px)}
.ch-left{padding:40px 0 36px;z-index:2}
.ch-left h1{font-family:var(--display);font-weight:600;text-transform:uppercase;font-size:clamp(46px,5.4vw,86px);line-height:.95;letter-spacing:.01em;background:linear-gradient(180deg,#fff3d6,var(--gold) 82%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 3px 10px rgba(0,0,0,.6));margin-top:8px}
.flourish{width:200px;height:2px;margin:12px 0 18px;background:linear-gradient(90deg,var(--gold2),rgba(217,184,120,0))}
.ch-badge{display:inline-flex;align-items:center;gap:10px;padding:7px 20px;border:1.5px solid var(--gold);border-radius:999px;font-family:var(--sans);font-weight:600;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold2);background:rgba(6,10,25,.55)}
.ch-badge svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.ch-tag{font-style:italic;font-size:clamp(22px,1.9vw,28px);line-height:1.25;margin:16px 0 12px;color:#f3efe6;text-shadow:0 2px 10px rgba(0,0,0,.7)}
.ch-bio{font-size:18px;line-height:1.5;color:#e4e0d7;margin-bottom:20px;text-shadow:0 1px 6px rgba(0,0,0,.7)}
.ch-quote{position:relative;margin-top:30px;padding:24px 24px 18px;border:1px solid var(--line);border-radius:16px;background:rgba(6,10,25,.62);backdrop-filter:blur(4px)}
.ch-quote .qm{position:absolute;top:-30px;left:10px;font-family:var(--display);font-size:72px;line-height:1;color:var(--gold)}
.ch-quote p{font-style:italic;font-size:clamp(21px,1.7vw,26px);line-height:1.25}
.ch-quote cite{display:block;text-align:right;margin-top:10px;font-style:normal;font-family:var(--sans);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold2)}
.ch-figure{align-self:stretch;display:flex;align-items:flex-end;justify-content:center;position:relative}
.ch-figure img{width:100%;height:100%;max-height:820px;object-fit:cover;object-position:center top;-webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent),linear-gradient(0deg,transparent,#000 10%);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent),linear-gradient(0deg,transparent,#000 10%);mask-composite:intersect}
.ch-glance{z-index:2;padding:22px 24px;border:1.5px solid var(--gold);border-radius:16px;background:linear-gradient(180deg,rgba(14,22,54,.88),rgba(8,12,32,.92));box-shadow:0 0 30px rgba(217,184,120,.18),0 18px 40px rgba(0,0,0,.5)}
.ch-glance h2{font-family:var(--display);font-weight:500;font-size:26px;letter-spacing:.06em;text-transform:uppercase;color:var(--gold2);padding-bottom:12px;margin-bottom:14px;border-bottom:1px solid var(--line-soft)}
.ch-glance ul{list-style:none;display:grid;gap:14px}
.ch-glance li{display:grid;grid-template-columns:28px 1fr;gap:12px;align-items:start;font-size:18px;line-height:1.3}
.ch-glance li b{color:var(--gold2);font-weight:600}
.ch-glance svg{width:24px;height:24px;fill:none;stroke:var(--gold2);stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round}
.ch-actions{display:flex;gap:22px;margin-top:18px;padding-top:14px;border-top:1px solid var(--line-soft)}
@media(max-width:1100px){
  .ch-grid{grid-template-columns:1fr 1fr;min-height:0}
  .ch-figure{grid-column:2;grid-row:1/3}
  .ch-left{grid-column:1;grid-row:1}
  .ch-glance{grid-column:1;grid-row:2;margin-bottom:30px}
}
@media(max-width:760px){
  .ch-grid{grid-template-columns:1fr;gap:0}
  .ch-figure{grid-column:1;grid-row:1;height:auto;margin:0 -16px}
  .ch-figure img{max-height:520px;height:520px}
  .ch-left{grid-row:2;padding-top:0;margin-top:-90px}
  .ch-glance{grid-row:3}
  .ch-backdrop::after{background:linear-gradient(0deg,rgba(6,10,25,.95) 45%,rgba(6,10,25,.3))}
}

/* character tiles */
.ctiles{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.ctile{position:relative;display:block;border:1.5px solid rgba(217,184,120,.5);border-radius:12px;overflow:hidden;background:var(--panel);transition:.2s;text-align:center;font:inherit;color:inherit;padding:0}
.ctile img{width:100%;aspect-ratio:142/96;object-fit:cover}
.ctile .nm{display:block;padding:10px 6px 12px;font-family:var(--display);font-size:clamp(14px,1.15vw,18px);letter-spacing:.04em;text-transform:uppercase;background:linear-gradient(180deg,rgba(13,20,49,0),var(--panel) 30%);margin-top:-26px;position:relative}
.ctile .rl{display:block;margin-top:-8px;padding-bottom:12px;font-family:var(--sans);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.ctile .cs{position:absolute;top:8px;left:50%;transform:translateX(-50%);white-space:nowrap;padding:3px 10px;border-radius:999px;background:rgba(6,10,25,.78);border:1px solid var(--line-soft);font-family:var(--sans);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);opacity:0;transition:.2s}
.ctile:hover{transform:translateY(-3px);border-color:var(--gold);box-shadow:0 0 22px rgba(217,184,120,.25)}
.ctile:hover .cs,.ctile:focus-visible .cs{opacity:1}
.ctile.on{border-color:var(--gold2);box-shadow:0 0 0 1px var(--gold2),0 0 26px rgba(243,220,168,.35)}
.ctile.soon img{filter:saturate(.85) brightness(.9)}
.ctiles.big .ctile img{aspect-ratio:142/110}
@media(max-width:1000px){.ctiles{grid-template-columns:repeat(3,1fr)}}
@media(max-width:520px){.ctiles{grid-template-columns:repeat(2,1fr)}.ctile .cs{opacity:1;font-size:9.5px}}

/* character gallery */
.gallery{display:grid;grid-template-columns:2.35fr 1fr 1fr;grid-template-rows:1fr 1fr;gap:14px;height:clamp(300px,25vw,440px)}
.gallery .gitem{aspect-ratio:auto;border:1.5px solid rgba(217,184,120,.55);border-radius:12px}
.gallery .gitem.big{grid-row:1/3}
@media(max-width:760px){.gallery{grid-template-columns:1fr 1fr;grid-template-rows:auto;height:auto}.gallery .gitem{aspect-ratio:217/96}.gallery .gitem.big{grid-column:1/3;grid-row:auto;aspect-ratio:432/212}}

/* character development */
.dev{padding:0 22px 22px}
.dev-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.dev .journal{grid-template-columns:210px 1fr;background:rgba(6,10,25,.35)}
.steps-wrap{border:1px solid var(--line);border-radius:10px;padding:14px 18px 18px;background:rgba(6,10,25,.35)}
.steps-h{font-family:var(--display);font-weight:500;font-size:20px;letter-spacing:.06em;text-transform:uppercase;color:var(--gold2);margin-bottom:14px}
.steps{display:flex;align-items:center;gap:8px}
.steps figure{flex:1;min-width:0}
.steps img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:8px;border:1px solid var(--line-soft)}
.steps figcaption{font-family:var(--sans);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);text-align:center;margin-top:6px}
.steps .arrow{color:var(--gold2);font-size:20px;flex:0 0 auto;margin-bottom:22px}
@media(max-width:1000px){.dev-grid{grid-template-columns:1fr}}
@media(max-width:520px){.steps .arrow{display:none}.steps{flex-wrap:wrap}.steps figure{flex:0 0 calc(50% - 4px)}}
.ch-left .crumb{text-shadow:0 1px 4px rgba(0,0,0,.9)}
@media(max-width:760px){.ch-left{margin-top:-56px}.ch-left .crumb{margin-bottom:4px}}

/* ================= characters v2: slideshow hero ================= */
.cs-hero{position:relative;overflow:hidden;background:#050816;border-bottom:1px solid var(--line-soft);--rail:clamp(150px,13vw,220px)}
.slideshow{position:relative;height:clamp(540px,min(41vw,84vh),1040px)}
.slides,.slide{position:absolute;inset:0}
.slide{opacity:0;visibility:hidden;transition:opacity .9s ease,visibility 0s linear .9s}
.slide.on{opacity:1;visibility:visible;transition:opacity .9s ease}
.slide .bd{position:absolute;inset:-50px;background-size:cover;background-position:center;filter:saturate(1.25) brightness(.78)}
.slide::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(5,8,22,.82) 0%,rgba(5,8,22,.5) 24%,rgba(5,8,22,0) 44%),linear-gradient(0deg,rgba(5,8,22,.75),rgba(5,8,22,0) 18%)}
.slide .fg{position:absolute;z-index:0;max-width:none}
.hero1 .fg{top:0;height:100%;width:auto;left:52%;transform:translateX(-50%);-webkit-mask-image:linear-gradient(90deg,transparent,#000 13%,#000 87%,transparent);mask-image:linear-gradient(90deg,transparent,#000 13%,#000 87%,transparent)}
.slide .fg.framed{top:50%;left:clamp(380px,36%,620px);transform:translateY(-50%);width:min(calc(100% - clamp(380px,36%,620px) - var(--rail) - clamp(100px,8vw,140px)),980px);height:auto;border:1.5px solid rgba(217,184,120,.7);border-radius:14px;box-shadow:0 0 40px rgba(217,184,120,.2),0 30px 60px rgba(0,0,0,.6)}
.cs-head{position:absolute;z-index:3;left:clamp(20px,5vw,96px);top:clamp(26px,4vw,60px);pointer-events:none}
.cs-head a{pointer-events:auto}
.cs-head .crumb{color:#e9e4da;text-shadow:0 1px 4px #000}
.cs-head h1{width:min-content;white-space:normal;word-spacing:100vw;font-family:var(--serif);font-style:italic;font-weight:600;text-transform:uppercase;font-size:clamp(44px,5.6vw,92px);line-height:.92;letter-spacing:.01em;margin-top:8px;padding-right:.12em;background:linear-gradient(180deg,#fff1cf,var(--gold) 85%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 3px 8px rgba(0,0,0,.75))}
.cs-head .flourish{width:clamp(140px,14vw,230px);margin:14px 0 0 30px;height:3px;border-radius:50%;background:radial-gradient(closest-side,var(--gold2),rgba(217,184,120,0))}
.slide .copy{position:absolute;z-index:2;left:clamp(20px,5vw,96px);top:52%;width:min(32vw,440px);transform:translateY(-12%)}
.hero1 .qm{display:block;font-family:var(--display);font-size:clamp(60px,5vw,90px);line-height:.6;color:var(--gold);margin-bottom:6px}
.hero1 blockquote p{font-family:var(--serif);font-style:italic;font-size:clamp(22px,2.2vw,36px);line-height:1.15;text-shadow:0 2px 10px rgba(0,0,0,.85)}
.hero1 cite{display:block;margin-top:14px;font-style:normal;font-family:var(--sans);font-weight:600;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold2)}
.slide .copy .tag{font-family:var(--sans);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
.slide .copy h2{font-family:var(--display);font-weight:500;font-size:clamp(24px,2.3vw,36px);line-height:1.1;margin:8px 0 10px;color:var(--gold2)}
.slide .copy p{font-style:italic;font-size:clamp(18px,1.5vw,22px);line-height:1.35;text-shadow:0 2px 8px rgba(0,0,0,.8)}
.slide .copy .acts{display:flex;gap:20px;margin-top:16px}
.ss-prev,.ss-next{position:absolute;z-index:4;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;border:1.5px solid var(--gold);background:rgba(5,8,22,.45);display:grid;place-items:center;transition:.2s}
.ss-prev{left:clamp(10px,1.6vw,28px)}.ss-next{right:calc(var(--rail) + clamp(30px,3vw,56px))}
.ss-prev svg,.ss-next svg{width:20px;height:20px;fill:none;stroke:var(--gold2);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.ss-prev:hover,.ss-next:hover{background:rgba(217,184,120,.18);box-shadow:0 0 18px rgba(217,184,120,.35)}
.ss-bar{position:absolute;z-index:4;bottom:16px;left:calc(50% - var(--rail)/2);transform:translateX(-50%);display:flex;align-items:center;gap:14px}
.dots{display:flex;gap:12px}
.dots button{width:14px;height:14px;border-radius:50%;border:1.5px solid #fff;opacity:.85;transition:.2s}
.dots button[aria-current=true]{background:var(--gold2);border-color:var(--gold2);box-shadow:0 0 10px rgba(243,220,168,.7)}
.ss-pause{width:26px;height:26px;display:grid;place-items:center;opacity:.75}
.ss-pause:hover{opacity:1}
.ss-pause svg{width:15px;height:15px;fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round}
.ss-pause svg+svg,.ss-pause.paused svg:first-child{display:none}
.ss-pause.paused svg+svg{display:block;fill:#fff;stroke:none}
/* character rail */
.rail{position:absolute;z-index:5;top:clamp(14px,1.8vw,26px);bottom:clamp(40px,4vw,70px);right:clamp(12px,1.6vw,30px);width:var(--rail);display:flex;flex-direction:column;gap:clamp(8px,.8vw,14px)}
.rtile{position:relative;flex:1;min-height:0;display:block;border:1.5px solid rgba(217,184,120,.7);border-radius:10px;overflow:hidden;background:var(--panel);padding:0;transition:.2s;box-shadow:0 8px 20px rgba(0,0,0,.45)}
.rtile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:left center}
.rtile::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,8,22,0) 30%,rgba(5,8,22,.8))}
.rtile .nm{position:absolute;z-index:1;right:10px;bottom:8px;max-width:62%;text-align:right;font-family:var(--serif);font-style:italic;font-weight:600;text-transform:uppercase;font-size:clamp(13px,1.05vw,18px);line-height:1.05;color:#fff;text-shadow:0 1px 4px #000}
.rtile .cs{position:absolute;z-index:1;top:6px;right:8px;font-family:var(--sans);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold2);opacity:0;transition:.2s}
.rtile:hover{border-color:var(--gold2);transform:translateX(-3px)}
.rtile:hover .cs,.rtile:focus-visible .cs{opacity:1}
.rtile.on{flex:1.7;border:2px solid var(--gold2);box-shadow:0 0 0 1px rgba(243,220,168,.4),0 0 28px rgba(243,220,168,.45);margin:0 -6px}
.rtile.on .nm{left:0;right:0;max-width:none;text-align:center;font-size:clamp(15px,1.25vw,21px);color:var(--gold2)}
.rtile.on::after{background:linear-gradient(0deg,rgba(5,8,22,.85),rgba(5,8,22,0) 50%)}
@media(max-width:900px){
  .cs-head h1{width:auto;word-spacing:normal}
  .slideshow{height:clamp(560px,150vw,660px)}
  .cs-head{top:18px;left:18px}.cs-head h1{width:min-content;white-space:normal;word-spacing:100vw;font-size:clamp(38px,11vw,56px);max-width:none}.cs-head .flourish{margin-left:0}
  .slide::after{background:linear-gradient(0deg,rgba(5,8,22,.92) 30%,rgba(5,8,22,.2) 55%,rgba(5,8,22,.55))}
  .hero1 .fg{left:50%;height:78%;top:12%}
  .slide .fg.framed{left:4%;top:150px;transform:none;width:92%}
  .slide .copy{left:18px;right:18px;width:auto;top:auto;bottom:62px;transform:none}
  .ss-next{right:12px}.ss-prev,.ss-next{top:44%;width:40px;height:40px}
  .ss-bar{left:50%}
  .rail{position:static;width:auto;flex-direction:row;overflow-x:auto;padding:12px 14px 16px;gap:10px;scroll-snap-type:x mandatory}
  .rtile{flex:0 0 150px;height:74px;scroll-snap-align:start}.rtile.on{flex:0 0 170px;margin:0}
  .rtile .cs{opacity:1}
}

/* profile band */
.cs-profile{background:linear-gradient(180deg,#f6f0e4,#efe6d4);color:#1a2040;border-bottom:1px solid var(--line)}
.cp-grid{display:grid;grid-template-columns:clamp(200px,17vw,290px) 1.35fr 1fr 1fr;gap:clamp(20px,2.4vw,40px);align-items:center;padding-top:26px;padding-bottom:26px}
.cp-portrait{width:100%;aspect-ratio:223/189;object-fit:cover;border-radius:16px;border:2px solid #c9a25a;box-shadow:0 10px 26px rgba(26,32,64,.25)}
.cp-eye{font-family:var(--sans);font-weight:600;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:#9a7330}
.cp-main h2{font-family:var(--serif);font-style:italic;font-weight:700;text-transform:uppercase;font-size:clamp(32px,2.8vw,46px);line-height:1;margin:4px 0 6px;color:#141a36}
.cp-tag{font-family:var(--serif);font-style:italic;font-size:clamp(20px,1.6vw,25px);color:#a37828;margin-bottom:10px}
.cp-bio{font-family:var(--sans);font-size:14.5px;line-height:1.55;color:#2a3050}
.cp-acts{display:flex;align-items:center;gap:20px;margin-top:14px;flex-wrap:wrap}
.cp-acts .like,.cp-acts .talk{color:#1a2040}.cp-acts .like.on{color:#d2456f}
.cp-link{font-family:var(--sans);font-weight:600;font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:#9a7330}
.cp-link:hover{color:#6e5020}
.cp-traits{list-style:none;display:grid;gap:12px;padding-left:clamp(16px,2vw,34px);border-left:1px solid #d6c4a0}
.cp-traits li{display:grid;grid-template-columns:30px 1fr;gap:10px;align-items:start;font-family:var(--sans);font-size:14px;line-height:1.35;color:#1e2446}
.cp-traits span{display:block;font-weight:700;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#9a7330}
.cp-traits svg{width:26px;height:26px;fill:none;stroke:#9a7330;stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round}
.cp-quote{padding-left:clamp(16px,2vw,34px);border-left:1px solid #d6c4a0}
.cp-quote .qm{display:block;font-family:var(--display);font-size:64px;line-height:.55;color:#b98a35}
.cp-quote p{font-family:var(--serif);font-style:italic;font-size:clamp(21px,1.8vw,28px);line-height:1.2;color:#141a36}
.cp-quote .sw{display:block;width:150px;height:2px;margin:14px 0 0 40px;border-radius:50%;background:radial-gradient(closest-side,#b98a35,rgba(185,138,53,0))}
@media(max-width:1100px){.cp-grid{grid-template-columns:220px 1fr}.cp-traits,.cp-quote{border-left:0;padding-left:0}.cp-traits{grid-column:1/2}.cp-quote{grid-column:2/3}}
@media(max-width:640px){.cp-grid{grid-template-columns:1fr}.cp-portrait{max-width:300px}.cp-traits,.cp-quote{grid-column:auto}}

/* development */
.cs-dev{padding-top:34px}
.cd-row{display:flex;align-items:center;justify-content:center;gap:clamp(18px,3vw,48px)}
.cd-journal{flex:0 0 clamp(240px,22vw,340px)}
.cd-journal img,.cd-steps img{width:100%;border-radius:12px;border:2px solid #c9a25a;box-shadow:0 0 22px rgba(217,184,120,.25)}
.cd-journal img{aspect-ratio:308/145;object-fit:cover}
.cd-div{width:1px;align-self:stretch;background:linear-gradient(180deg,rgba(217,184,120,0),var(--gold),rgba(217,184,120,0))}
.cd-steps{display:flex;align-items:center;gap:clamp(10px,1.6vw,28px)}
.cd-steps figure{width:clamp(130px,12vw,180px)}
.cd-steps img{aspect-ratio:160/138;object-fit:cover}
.cd-steps figcaption{font-family:var(--sans);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);text-align:center;margin-top:8px}
.cd-steps .arrow{font-size:30px;color:var(--gold2);margin-bottom:22px}
.cd-notes{max-width:820px;margin:30px auto 0;text-align:center;padding:24px 28px;border:1px solid var(--line-soft);border-radius:14px;background:linear-gradient(180deg,var(--panel2),var(--panel))}
.cd-notes h3{font-family:var(--serif);font-weight:600;font-size:30px;margin:10px 0 6px}
.cd-notes p{font-size:18px;color:#ddd9d0}
.cd-notes .more{display:none;margin-top:10px}.cd-notes.open .more{display:block}
.cd-notes .readmore{color:var(--cyan);font-size:18px}
.cd-notes .actions{display:flex;justify-content:center;gap:24px;margin-top:14px}
@media(max-width:900px){.cd-row{flex-direction:column}.cd-div{display:none}.cd-journal{flex:none;width:100%;max-width:420px}.cd-steps{width:100%;justify-content:center}.cd-steps figure{width:auto;flex:1}.cd-steps .arrow{font-size:20px}}

/* ---- v3: every slide is a full window into the world, edge to the character rail ---- */
.slides{right:calc(var(--rail) + clamp(20px,2.4vw,44px));overflow:hidden}
.slides::after{content:"";position:absolute;top:0;bottom:0;right:0;width:6%;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(5,8,22,0),#050816)}
.slide .fg,.hero1 .fg{inset:0;top:0;left:0;width:100%;height:100%;transform:none;object-fit:cover;object-position:center 35%;-webkit-mask-image:none;mask-image:none;border:0;border-radius:0;box-shadow:none}
.hero1 .fg{object-position:50% 20%}
.slide.on .fg{animation:kb 14s ease-out both}
@keyframes kb{from{transform:scale(1.06)}to{transform:scale(1)}}
@media(prefers-reduced-motion:reduce){.slide.on .fg{animation:none}}
.slide::after{background:linear-gradient(90deg,rgba(5,8,22,.85) 0%,rgba(5,8,22,.55) 22%,rgba(5,8,22,.1) 42%,rgba(5,8,22,0) 55%),linear-gradient(0deg,rgba(5,8,22,.7),rgba(5,8,22,0) 20%),linear-gradient(180deg,rgba(5,8,22,.35),rgba(5,8,22,0) 16%)}
.ss-next{right:calc(var(--rail) + clamp(36px,3.6vw,64px))}
.ss-bar{left:calc(50% - var(--rail)/2 - 10px)}
@media(max-width:900px){
  .slides{right:0}.slides::after{display:none}
  .hero1 .fg{object-position:48% 20%}
  .cs-head h1{font-size:clamp(34px,9.5vw,48px)}
  .slide::after{background:linear-gradient(0deg,rgba(5,8,22,.92) 26%,rgba(5,8,22,.15) 52%,rgba(5,8,22,.5))}
  .ss-next{right:12px}.ss-bar{left:50%}
}

.slide .fg{object-position:center 30%}
.slide.hero1 .fg{object-position:50% 20%}
@media(max-width:900px){.slide.hero1 .fg{object-position:48% 20%}}
/* caption card on gallery slides so text stays readable over busy art */
.slide:not(.hero1) .copy{padding:18px 22px 16px;border:1px solid var(--line-soft);border-radius:14px;background:rgba(5,8,22,.58);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 12px 30px rgba(0,0,0,.35);width:min(30vw,420px)}
@media(max-width:900px){.slide:not(.hero1) .copy{width:auto}}

/* hero sound toggle */
.snd-toggle{position:absolute;right:64px;bottom:14px;z-index:3;height:38px;padding:0 14px 0 11px;border-radius:999px;background:rgba(6,10,25,.6);border:1px solid var(--line);display:flex;align-items:center;gap:8px;opacity:.85;transition:.2s;font-family:var(--sans);font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--gold2)}
.snd-toggle:hover{opacity:1;background:rgba(217,184,120,.14)}
.snd-toggle[hidden]{display:none}
.snd-toggle svg{width:18px;height:18px;fill:none;stroke:var(--gold2);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.snd-toggle .i-on,.snd-toggle.on .i-off{display:none}.snd-toggle.on .i-on{display:block}
.snd-toggle.on{border-color:var(--gold2);box-shadow:0 0 16px rgba(243,220,168,.3)}

/* very wide screens: show each slide at its natural 2:1 shape (never cropped, never blurred),
   fading its edges into the page background */
.slide .bd{display:none!important}
.slideshow.wide .slide .fg{left:50%;right:auto;width:auto;height:100%;translate:-50% 0;object-fit:contain;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.slideshow.wide .slide.hero1 .fg{left:55%}
/* focal points so faces stay in frame when a slide is cropped */
.slide[data-focus="top"] .fg{object-position:center 15%}

/* home hero fills the whole screen below the header on desktop */
@media(min-width:761px){
  .hero{height:calc(100vh - 76px);height:calc(100svh - 76px);min-height:560px;max-height:none}
  .hero.has-vid{min-height:560px}
  .hero-vid,.hero.has-vid .hero-bg{object-position:center center;background-position:center center}
  .hero-in{transform:none}
  .hero h1{font-size:clamp(40px,min(5vw,9vh),110px)}
  .hero p{font-size:clamp(19px,min(1.6vw,3vh),32px)}
}
.scroll-cue{position:absolute;left:50%;bottom:22px;z-index:3;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:6px;font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--gold2);opacity:.85;text-shadow:0 1px 4px #000}
.scroll-cue svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;animation:cue 2s ease-in-out infinite}
@keyframes cue{50%{transform:translateY(5px)}}
@media(prefers-reduced-motion:reduce){.scroll-cue svg{animation:none}}
@media(max-width:760px){.scroll-cue{display:none}}
@media(min-width:761px){
  .hero-in{max-width:min(1400px,90vw)}
  .hero p{max-width:900px;margin:0 auto}
  .snd-toggle{height:44px;padding:0 18px 0 14px;font-size:12.5px;right:72px;bottom:18px;opacity:.95;background:rgba(6,10,25,.72)}
  .snd-toggle svg{width:20px;height:20px}
  .vid-toggle{width:44px;height:44px;bottom:18px;right:18px}
}

/* ================= characters v4: cinematic stage ================= */
.cx{position:relative;overflow:hidden;background:#050816;--rail:clamp(140px,10vw,200px);height:calc(100svh - 76px);min-height:700px;border-bottom:1px solid var(--line-soft)}
.cx-bgs,.cx-bg,.cx-shade{position:absolute;inset:0}
.cx-bg{width:100%;height:100%;object-fit:cover;object-position:center 22%;opacity:0;transition:opacity 1s ease;transform:scale(1.04)}
.cx-bg.on{opacity:1;animation:cxkb 16s ease-out both}
@keyframes cxkb{from{transform:scale(1.08)}to{transform:scale(1)}}
.cx-shade{background:radial-gradient(ellipse 60% 55% at 50% 100%,rgba(5,8,22,.92),rgba(5,8,22,0) 75%),linear-gradient(0deg,rgba(5,8,22,.9) 0%,rgba(5,8,22,.35) 34%,rgba(5,8,22,0) 55%),linear-gradient(180deg,rgba(5,8,22,.55),rgba(5,8,22,0) 26%),linear-gradient(270deg,rgba(5,8,22,.85),rgba(5,8,22,0) calc(var(--rail) + 120px))}
.cx-stage{position:absolute;inset:0;right:calc(var(--rail) + 36px);display:flex;flex-direction:column;align-items:center}
.cx-frame{position:absolute;inset:14px 0 14px 14px;border:1.5px solid rgba(95,212,255,.35);border-radius:34px;box-shadow:inset 0 0 40px rgba(95,212,255,.12),0 0 30px rgba(95,212,255,.12);pointer-events:none;-webkit-mask-image:linear-gradient(180deg,#000 40%,transparent 80%);mask-image:linear-gradient(180deg,#000 40%,transparent 80%)}
.cx-title{position:relative;z-index:2;text-align:center;margin-top:clamp(22px,4vh,56px);padding:0 20px}
.cx-title .crumb{color:#e9e4da;text-shadow:0 1px 4px #000;margin-bottom:6px}
.cx-title h1{position:relative;display:inline-flex;flex-direction:column;align-items:center;font-family:'Exo 2',var(--sans);font-style:italic;font-weight:900;text-transform:uppercase;font-size:clamp(46px,min(6vw,10vh),118px);line-height:.88;letter-spacing:.01em;color:#fff;-webkit-text-stroke:2px rgba(120,200,255,.9);text-shadow:0 0 18px rgba(95,212,255,.85),0 0 46px rgba(95,140,255,.6),0 4px 12px rgba(0,0,0,.7)}
.cx-title h1 span:last-child{margin-left:.9em}
.cx-title .swoosh{position:absolute;left:-14%;top:-18%;width:128%;height:136%;pointer-events:none;filter:drop-shadow(0 0 8px rgba(243,220,168,.7))}
.cx-quote{font-family:'Caveat',cursive;font-weight:700;font-size:clamp(24px,min(2.3vw,4vh),44px);line-height:1.15;color:#fff;max-width:20ch;margin:clamp(8px,1.6vh,18px) auto 0;transform:rotate(-4deg);text-shadow:0 2px 10px rgba(0,0,0,.95),0 0 2px #000}
.cx-quote::first-letter{color:var(--gold2)}
/* coverflow deck */
.cx-deck{position:relative;z-index:2;margin-top:auto;width:100%;height:clamp(150px,min(22vh,15vw),280px);perspective:1400px}
.cx-deck::before{content:"";position:absolute;left:8%;right:8%;bottom:-26px;height:60px;border-radius:50%;border:2px solid rgba(95,212,255,.55);box-shadow:0 0 30px rgba(95,212,255,.45),inset 0 0 30px rgba(95,212,255,.3);transform:rotateX(60deg)}
.cx-card{position:absolute;left:50%;top:0;height:100%;aspect-ratio:3/2;padding:0;border-radius:16px;overflow:hidden;border:2px solid rgba(120,200,255,.6);background:#0a1030;box-shadow:0 0 18px rgba(95,212,255,.35),0 18px 40px rgba(0,0,0,.6);transition:transform .7s cubic-bezier(.2,.8,.2,1),opacity .7s,border-color .3s,filter .7s;transform-style:preserve-3d;cursor:pointer}
.cx-card img{width:100%;height:100%;object-fit:cover;object-position:center 25%}
.cx-card.on{border-color:var(--gold2);box-shadow:0 0 0 2px rgba(243,220,168,.35),0 0 34px rgba(243,220,168,.55),0 20px 44px rgba(0,0,0,.6)}
.cx-card:not(.on){filter:brightness(.78) saturate(.9)}
.cx-card:hover{filter:none}
.cx-dots{position:relative;z-index:2;display:flex;align-items:center;gap:12px;margin-top:30px}
.cx-dots button:not(.cx-pause){width:13px;height:13px;border-radius:50%;border:1.5px solid #fff;opacity:.85}
.cx-dots button[aria-current=true]{background:#fff;box-shadow:0 0 10px rgba(255,255,255,.8)}
.cx-pause{width:24px;height:24px;display:grid;place-items:center;opacity:.7}
.cx-pause svg{width:14px;height:14px;fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round}
.cx-pause svg+svg,.cx-pause.paused svg:first-child{display:none}.cx-pause.paused svg+svg{display:block;fill:#fff;stroke:none}
.cx-cap{position:relative;z-index:2;text-align:center;padding:clamp(8px,1.6vh,18px) 20px clamp(16px,3vh,34px);max-width:820px}
.cx-c h2{display:flex;align-items:center;justify-content:center;gap:22px;font-family:var(--sans);font-weight:500;font-size:clamp(15px,1.3vw,22px);letter-spacing:.32em;text-transform:uppercase;color:#fff}
.cx-c h2::before,.cx-c h2::after{content:"";width:clamp(40px,7vw,130px);height:2px;background:linear-gradient(90deg,rgba(243,220,168,0),var(--gold2))}
.cx-c h2::after{transform:scaleX(-1)}
.cx-c p{font-family:var(--sans);font-size:clamp(14px,1vw,17px);line-height:1.5;color:#e6e3dc;margin-top:6px;text-shadow:0 1px 6px #000}
.cx-c .acts{display:flex;justify-content:center;gap:22px;margin-top:8px}
.cx-dev{display:inline-flex;align-items:center;gap:16px;margin-top:clamp(10px,1.8vh,18px);padding:12px 44px;font-family:var(--sans);font-weight:600;font-size:clamp(13px,1vw,16px);letter-spacing:.3em;text-transform:uppercase;color:var(--gold2);border:1.5px solid var(--gold);clip-path:polygon(18px 0,calc(100% - 18px) 0,100% 50%,calc(100% - 18px) 100%,18px 100%,0 50%);background:linear-gradient(180deg,rgba(40,30,10,.55),rgba(10,8,4,.75));transition:.2s}
.cx-dev:hover{background:linear-gradient(180deg,rgba(80,60,20,.65),rgba(20,14,6,.85));color:#fff}
/* rail */
.cx-rail{position:absolute;z-index:3;top:14px;bottom:14px;right:14px;width:var(--rail);display:flex;flex-direction:column;align-items:center;gap:8px;padding:8px 0;border-radius:28px;border:1.5px solid rgba(95,212,255,.35);background:rgba(5,8,22,.45);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-shadow:0 0 24px rgba(95,212,255,.15)}
.cx-up,.cx-down{flex:0 0 auto;width:40px;height:30px;display:grid;place-items:center}
.cx-up svg,.cx-down svg{width:28px;height:28px;fill:none;stroke:var(--gold2);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 6px rgba(243,220,168,.6))}
.cx-list{flex:1;min-height:0;width:100%;overflow-y:auto;scrollbar-width:none;display:flex;flex-direction:column;gap:12px;padding:6px 12px;scroll-behavior:smooth}
.cx-list::-webkit-scrollbar{display:none}
.cx-list .rtile{flex:0 0 auto;aspect-ratio:1/0.82;border-color:rgba(95,212,255,.5);border-radius:14px}
.cx-list .rtile img{object-position:center}
.cx-list .rtile::after{background:linear-gradient(0deg,rgba(5,8,22,.9),rgba(5,8,22,0) 55%)}
.cx-list .rtile .nm{left:0;right:0;max-width:none;text-align:center;font-family:var(--sans);font-style:normal;font-weight:700;letter-spacing:.06em;font-size:clamp(12px,.95vw,16px)}
.cx-list .rtile.on{margin:0;flex:0 0 auto;border-color:var(--gold2)}
.cx-list .rtile.on .nm{color:#fff}
@media(prefers-reduced-motion:reduce){.cx-bg.on{animation:none}.cx-card{transition:none}}
@media(max-width:900px){
  .cx{height:auto;min-height:0}
  .cx-bgs{height:62vw;bottom:auto}
  .cx-shade{height:62vw;bottom:auto;background:linear-gradient(0deg,#050816 0%,rgba(5,8,22,0) 45%),linear-gradient(180deg,rgba(5,8,22,.6),rgba(5,8,22,0) 30%)}
  .cx-stage{position:relative;right:0}
  .cx-frame{display:none}
  .cx-title{margin-top:16px}
  .cx-title h1{font-size:clamp(36px,11vw,60px)}
  .cx-quote{margin-top:calc(62vw - 230px);font-size:24px}
  .cx-deck{height:120px;margin-top:22px}
  .cx-rail{position:static;width:auto;flex-direction:row;border-radius:0;border:0;border-top:1px solid var(--line-soft);padding:10px}
  .cx-up,.cx-down{display:none}
  .cx-list{flex-direction:row;overflow-x:auto;overflow-y:hidden;padding:4px}
  .cx-list .rtile{flex:0 0 112px}
}
/* title sits in the open upper-right of the scene, like the concept, so faces stay clear */
@media(min-width:901px){
  .cx-title{align-self:flex-end;width:min(46%,760px);margin-right:2%}
  .cx-title h1{font-size:clamp(42px,min(4.6vw,9vh),104px)}
  .cx-quote{font-size:clamp(22px,min(1.8vw,3.4vh),38px);max-width:24ch}
  .cx-shade{background:radial-gradient(ellipse 34% 34% at 70% 22%,rgba(5,8,22,.55),rgba(5,8,22,0) 80%),radial-gradient(ellipse 60% 55% at 50% 100%,rgba(5,8,22,.92),rgba(5,8,22,0) 75%),linear-gradient(0deg,rgba(5,8,22,.85) 0%,rgba(5,8,22,.3) 32%,rgba(5,8,22,0) 52%),linear-gradient(180deg,rgba(5,8,22,.45),rgba(5,8,22,0) 20%),linear-gradient(270deg,rgba(5,8,22,.85),rgba(5,8,22,0) calc(var(--rail) + 120px))}
}
.cx-bg[src*="-1.jpg"]{object-position:35% 20%}
@media(max-width:900px){
  .cx-bgs,.cx-shade{height:96vw}
  .cx-quote{margin-top:calc(96vw - 250px);font-size:20px;max-width:26ch}
  .cx-dev{padding:12px 30px;letter-spacing:.16em;font-size:12px}
  .cx-c h2{letter-spacing:.2em;gap:12px}
  .cx-c h2::before,.cx-c h2::after{width:28px}
}

/* single fixed background (image, or video once uploaded) */
.cx-bg.on{animation:none;transform:none;object-position:center 30%}
.cx-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%;opacity:0;transition:opacity 1.2s}
.cx-vid.ready{opacity:1}

/* curved card deck */
.cx-deck{height:clamp(170px,min(27vh,16vw),330px);perspective:none;transform-style:preserve-3d}
.cx-deck-in{position:absolute;inset:0;perspective:900px;perspective-origin:50% 40%}
.cx-card{aspect-ratio:16/10;transform-origin:50% 50%;border-radius:18px;backface-visibility:hidden}
.cx-card::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(115deg,rgba(255,255,255,.18),rgba(255,255,255,0) 35%,rgba(255,255,255,0) 70%,rgba(255,255,255,.08));pointer-events:none}
.cx-card:not(.on){filter:brightness(.82)}
.cx-deck::before{left:2%;right:2%;bottom:-34px;height:90px;border-width:2.5px}
@media(max-width:900px){.cx-deck{height:130px}}
.cx-deck-in{perspective:1100px;perspective-origin:50% 10%}
.cx-deck-in{perspective:1700px;perspective-origin:50% 0%}
.cx-deck{height:clamp(150px,min(23vh,13.5vw),290px)}
.cx-dots{margin-top:40px}
/* size cards from the stage width so all five always fit */
.cx-stage{container-type:size}
.cx-deck{height:min(13.2cqw,28cqh)}
.cx-card{height:auto;width:min(21cqw,44.8cqh);aspect-ratio:16/10}
@media(max-width:900px){.cx-stage{container-type:inline-size}.cx-deck{height:34cqw}.cx-card{width:54cqw}}
.cx-deck-in{perspective:2400px}
.cx-deck{height:min(12cqw,27cqh)}
.cx-card{width:min(18.6cqw,43cqh)}
.cx-stage{overflow:hidden}
@media(max-width:900px){.cx-deck{height:34cqw}.cx-card{width:54cqw}.cx-deck-in{perspective:1200px}}
@media(min-width:901px){.cx-card{width:min(17cqw,38cqh,520px)}.cx-deck{height:min(11cqw,24cqh,330px)}}
/* curved character rail: tiles bow along an arc, tilting toward the stage */
.cx-list{perspective:900px;overflow-x:visible}
.cx-list .rtile{transition:transform .35s ease,border-color .2s,box-shadow .2s;transform-origin:100% 50%}
@media(min-width:901px){
  .cx-rail{border-radius:120px 28px 28px 120px / 50% 28px 28px 50%;padding:10px 0}
  .cx-frame{border-top-right-radius:160px 50%;border-bottom-right-radius:160px 50%}
}
/* larger caption under the cards */
.cx-cap{max-width:1040px}
.cx-c h2{font-size:clamp(20px,min(1.8vw,3.4vh),34px);letter-spacing:.28em}
.cx-c p{font-size:clamp(17px,min(1.3vw,2.4vh),24px);line-height:1.45;margin-top:10px}
.cx-c .acts{margin-top:12px}
.cx-c .acts .like,.cx-c .acts .talk{font-size:16px}
.cx-dev{font-size:clamp(14px,1.1vw,18px);padding:14px 52px}
@media(max-width:900px){.cx-c h2{font-size:18px}.cx-c p{font-size:16px}}
@media(min-width:901px){.cx-list{padding:8px 18px 8px 16px}}

/* ===== v5: match the concept ===== */
.cx-frame{display:none}
/* neon tube that bends around the stage's right edge */
.cx-neon{position:absolute;z-index:4;top:0;bottom:0;right:-46px;width:70px;height:100%;pointer-events:none;filter:drop-shadow(0 0 6px rgba(95,212,255,.9)) drop-shadow(0 0 18px rgba(168,117,255,.7))}
/* glowing floor rings */
.cx-floor{position:absolute;z-index:1;left:-10%;right:-10%;bottom:-18%;height:46%;pointer-events:none;border-radius:50%;
  background:radial-gradient(ellipse at 50% 40%,rgba(5,8,22,0) 30%,rgba(5,8,22,.6) 60%,rgba(5,8,22,0) 75%);
  box-shadow:inset 0 0 0 2px rgba(243,220,168,.28),inset 0 0 60px rgba(243,170,80,.18);transform:perspective(800px) rotateX(62deg)}
.cx-floor::before,.cx-floor::after{content:"";position:absolute;border-radius:50%;inset:10% 14%;border:2px solid rgba(243,200,120,.45);box-shadow:0 0 22px rgba(243,190,100,.45),inset 0 0 22px rgba(243,190,100,.3)}
.cx-floor::after{inset:24% 28%;border-color:rgba(95,212,255,.35);box-shadow:0 0 18px rgba(95,212,255,.35)}
/* platform ring under the cards */
.cx-deck::before{display:none}
.cx-ring{position:absolute;left:4%;right:4%;top:62%;height:60%;pointer-events:none;transform:perspective(700px) rotateX(70deg)}
.cx-ring i{position:absolute;inset:0;border-radius:50%;border:3px solid rgba(95,212,255,.85);box-shadow:0 0 18px rgba(95,212,255,.9),0 0 50px rgba(95,140,255,.6),inset 0 0 26px rgba(95,212,255,.5)}
.cx-ring i+i{inset:-18% -4%;border-width:2px;border-color:rgba(168,117,255,.55);box-shadow:0 0 26px rgba(168,117,255,.5)}
.cx-deck-in{perspective:1400px;perspective-origin:50% 30%}
.cx-card{border:2.5px solid rgba(120,200,255,.85);border-radius:20px;box-shadow:0 0 16px rgba(95,212,255,.6),0 0 40px rgba(95,140,255,.3),0 18px 36px rgba(0,0,0,.55)}
.cx-card.on{border:3px solid var(--gold2);box-shadow:0 0 18px rgba(255,200,110,.9),0 0 50px rgba(255,170,70,.45),0 22px 44px rgba(0,0,0,.6)}
.cx-card:not(.on){filter:none}
@media(min-width:901px){
  .cx-deck{height:min(11.5cqw,25cqh,340px);margin-bottom:10px}
  .cx-card{width:min(17.5cqw,38cqh,540px)}
  .cx-dots{margin-top:min(5cqw,64px)}
}
/* concept-style title: wide italic sans with a gold orbit ring */
.cx-title h1{font-family:'Exo 2',var(--sans);font-weight:800;letter-spacing:.06em;-webkit-text-stroke:0;color:#f4f8ff;
  text-shadow:0 0 6px rgba(255,255,255,.7),0 0 22px rgba(95,212,255,.9),0 0 48px rgba(95,140,255,.6)}
.cx-title h1 span:last-child{margin-left:1.3em}
.cx-title .swoosh{left:-16%;top:-10%;width:132%;height:130%}
.cx-title .swoosh path:first-child{stroke-width:7}
.cx-quote{font-weight:600;color:#fff;transform:rotate(-6deg);margin-top:clamp(14px,2.4vh,30px)}
.cx-quote::after{content:"";display:block;width:60%;height:2px;margin:10px auto 0 30%;border-radius:50%;background:radial-gradient(closest-side,var(--gold2),rgba(243,220,168,0))}
/* caption: spaced white title between gold rules, centred text */
.cx-c h2{font-weight:500;letter-spacing:.34em;color:#fff;text-shadow:0 0 10px rgba(255,255,255,.35)}
.cx-c h2::before,.cx-c h2::after{height:2px;width:clamp(60px,9vw,180px);background:linear-gradient(90deg,rgba(243,220,168,0),var(--gold2))}
.cx-dev{border:2px solid var(--gold2);box-shadow:0 0 18px rgba(243,200,120,.35);letter-spacing:.34em;color:var(--gold2)}
/* rail: tilted glass tiles with neon edges and centred caps labels */
.cx-rail{border:0;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;border-radius:0}
.cx-list{perspective:700px}
.cx-list .rtile{border:2px solid rgba(95,212,255,.75);border-radius:16px;box-shadow:0 0 14px rgba(95,212,255,.45);background:#0a1236}
.cx-list .rtile.on{border:2.5px solid #ffb648;box-shadow:0 0 16px rgba(255,182,72,.9),0 0 36px rgba(255,150,50,.45)}
.cx-list .rtile .nm{font-family:var(--sans);font-weight:700;letter-spacing:.06em;font-size:clamp(13px,1vw,18px);text-transform:uppercase;bottom:10px}
.cx-list .rtile img{object-position:center 25%}
.cx-up svg,.cx-down svg{stroke:#ffb648;filter:drop-shadow(0 0 8px rgba(255,182,72,.8))}
@media(max-width:900px){.cx-neon,.cx-floor{display:none}.cx-ring{top:55%}}

.cx-neon{right:-30px;width:60px}
.cx-ring{top:70%;height:70%}
.cx-ring i{border-width:3.5px}
@media(max-width:900px){.cx-deck{margin-top:34px}.cx-card{width:50cqw}}

/* ===== v6: seen through a curved holo screen ===== */
.cx-floor{display:none}
.cx-screen{position:absolute;z-index:3;inset:10px 0 10px 10px;pointer-events:none;border-radius:44px 120px 120px 44px / 44px 50% 50% 44px;
  box-shadow:inset 0 0 0 1.5px rgba(95,212,255,.55),inset 0 0 0 4px rgba(95,212,255,.08),inset 0 0 60px rgba(95,140,255,.35),inset 0 0 180px rgba(5,8,22,.85),0 0 24px rgba(95,212,255,.25);overflow:hidden}
.cx-screen::before{content:"";position:absolute;left:6%;right:10%;top:0;height:2px;background:linear-gradient(90deg,rgba(95,212,255,0),#9fe6ff 30%,#fff 50%,#c9a6ff 75%,rgba(168,117,255,0));box-shadow:0 0 14px #5fd4ff,0 0 30px rgba(168,117,255,.7)}
.cx-screen::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 120% 90% at 50% 45%,rgba(5,8,22,0) 55%,rgba(5,8,22,.55) 100%)}
.cx-screen .glare{position:absolute;inset:-20% -10%;background:linear-gradient(115deg,rgba(255,255,255,0) 30%,rgba(190,230,255,.07) 40%,rgba(255,255,255,0) 48%,rgba(255,255,255,0) 70%,rgba(200,170,255,.05) 78%,rgba(255,255,255,0) 86%)}
.cx-screen .scan{position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(150,210,255,.045) 0 1px,rgba(0,0,0,0) 1px 4px);mix-blend-mode:screen;animation:scan 9s linear infinite}
@keyframes scan{to{background-position:0 400px}}
/* hologram cards */
.cx-card{background:rgba(10,20,60,.5);-webkit-box-reflect:below 6px linear-gradient(transparent 62%,rgba(255,255,255,.22))}
.cx-card img{opacity:.93;filter:saturate(1.15) contrast(1.05)}
.cx-card::before{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(160,225,255,.09) 0 1px,rgba(0,0,0,0) 1px 3px),linear-gradient(180deg,rgba(95,212,255,.16),rgba(95,212,255,0) 35%,rgba(95,212,255,0) 70%,rgba(95,212,255,.22));mix-blend-mode:screen}
.cx-card::after{z-index:2;background:linear-gradient(120deg,rgba(255,255,255,.32),rgba(255,255,255,0) 26%,rgba(255,255,255,0) 72%,rgba(140,220,255,.16))}
.cx-card:not(.on){animation:holo 5s ease-in-out infinite}
.cx-card:nth-child(2n){animation-delay:-2.3s}
@keyframes holo{0%,100%{opacity:.92}48%{opacity:.86}50%{opacity:.7}52%{opacity:.88}}
.cx-card.on{-webkit-box-reflect:below 6px linear-gradient(transparent 58%,rgba(255,220,160,.28))}
@media(prefers-reduced-motion:reduce){.cx-screen .scan,.cx-card{animation:none!important}}
/* rail tiles: same hologram treatment */
.cx-list .rtile::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(160,225,255,.08) 0 1px,rgba(0,0,0,0) 1px 3px),linear-gradient(120deg,rgba(255,255,255,.22),rgba(255,255,255,0) 30%);mix-blend-mode:screen}
.cx-list .rtile .nm{z-index:2}
/* character development: glowing button standing on a holo platform */
.cx-cap{display:flex;flex-direction:column;align-items:center;padding-bottom:clamp(30px,5vh,60px)}
.cx-pad{position:absolute;left:50%;bottom:-6%;width:min(1300px,120%);height:clamp(130px,22vh,240px);translate:-50% 0;transform:perspective(600px) rotateX(64deg);pointer-events:none;z-index:-1}
.cx-pad i{position:absolute;inset:0;border-radius:50%;border:2px solid rgba(255,190,100,.55);box-shadow:0 0 18px rgba(255,170,70,.55),inset 0 0 26px rgba(255,170,70,.3)}
.cx-pad i:nth-child(2){inset:18% 20%;border-color:rgba(95,212,255,.5);box-shadow:0 0 18px rgba(95,212,255,.5),inset 0 0 18px rgba(95,212,255,.25)}
.cx-pad i:nth-child(3){inset:34% 36%;border:0;background:radial-gradient(closest-side,rgba(255,190,110,.55),rgba(255,160,60,0));box-shadow:none}
.cx-dev{position:relative;display:inline-flex;align-items:center;gap:22px;margin-top:clamp(16px,2.6vh,30px);padding:16px 64px;border:0;clip-path:none;background:none;font-family:var(--sans);font-weight:600;letter-spacing:.42em;font-size:clamp(14px,1.15vw,20px);color:#ffd48a;text-shadow:0 0 10px rgba(255,190,100,.7)}
.cx-dev::before{content:"";position:absolute;inset:0;z-index:-1;clip-path:polygon(26px 0,calc(100% - 26px) 0,100% 50%,calc(100% - 26px) 100%,26px 100%,0 50%);background:linear-gradient(180deg,#ffd48a,#b8862e);padding:2px}
.cx-dev::after{content:"";position:absolute;inset:2px;z-index:-1;clip-path:polygon(25px 0,calc(100% - 25px) 0,100% 50%,calc(100% - 25px) 100%,25px 100%,0 50%);background:linear-gradient(180deg,rgba(18,14,28,.95),rgba(8,8,20,.95))}
.cx-dev{filter:drop-shadow(0 0 12px rgba(255,180,80,.55))}
.cx-dev svg{width:22px;height:22px;fill:none;stroke:#ffd48a;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.cx-dev:hover{filter:drop-shadow(0 0 20px rgba(255,190,90,.9));color:#fff}
@media(max-width:900px){.cx-screen{border-radius:0;inset:0}.cx-pad{display:none}.cx-dev{padding:14px 40px;letter-spacing:.2em}}
/* thumbnails sit lower, closer to the caption, like the concept */
@media(min-width:901px){
  .cx-deck,.cx-dots{top:min(8vh,90px)}
  .cx-dots{position:relative;margin-top:min(3.4cqw,44px)}
  .cx-cap{top:min(5vh,56px);position:relative;padding-top:4px;padding-bottom:clamp(14px,2.4vh,30px)}
  .cx-c p{margin-top:6px}
  .cx-dev{margin-top:clamp(10px,1.6vh,20px)}
}
@media(min-width:901px){
  .cx-deck,.cx-dots{top:min(6.5vh,74px)}
  .cx-dots{margin-top:min(2.2cqw,28px)}
  .cx-cap{top:min(3vh,34px);padding-bottom:clamp(30px,4.6vh,56px)}
}
@media(min-width:901px) and (max-height:900px){.cx-deck,.cx-dots{top:min(2.4vh,22px)}.cx-cap{top:min(1.4vh,12px)}}
@media(min-width:901px) and (max-height:900px){.cx-dots{margin-top:34px}.cx-cap{top:20px;padding-bottom:22px}.cx-c p{font-size:16px}.cx-c .acts{margin-top:6px}}
@media(min-width:901px) and (min-height:901px){.cx-cap{top:min(6.5vh,74px);padding-bottom:clamp(12px,1.6vh,20px)}}
/* reset offsets: the deck, dots and caption stack from the bottom of the stage, packed tight */
@media(min-width:901px){
  .cx-deck,.cx-dots,.cx-cap{top:0!important}
  .cx-dots{margin-top:min(3cqw,40px)!important}
  .cx-cap{padding-top:2px!important;padding-bottom:clamp(18px,3vh,36px)!important}
  .cx-c h2{margin-top:0}
}

/* ===== profile band: bigger and roomier ===== */
.cs-profile{border-top:2px solid #c9a25a;border-bottom:2px solid #c9a25a;box-shadow:0 0 30px rgba(217,184,120,.25)}
.cp-grid{max-width:1640px;grid-template-columns:clamp(240px,19vw,360px) 1.4fr 1fr 1fr;gap:clamp(28px,3.4vw,64px);padding-top:clamp(40px,4.5vw,72px);padding-bottom:clamp(40px,4.5vw,72px)}
.cp-portrait{border-width:3px;border-radius:20px}
.cp-eye{font-size:13px}
.cp-main h2{font-size:clamp(40px,3.6vw,64px);margin:8px 0 10px}
.cp-tag{font-size:clamp(23px,1.9vw,32px);margin-bottom:16px}
.cp-bio{font-size:clamp(15.5px,1.05vw,18px);line-height:1.7}
.cp-acts{margin-top:20px;gap:26px}
.cp-traits{gap:18px;padding-left:clamp(24px,2.6vw,48px)}
.cp-traits li{font-size:clamp(15px,1vw,17.5px);grid-template-columns:34px 1fr}
.cp-traits span{font-size:12px;margin-bottom:2px}
.cp-traits svg{width:30px;height:30px}
.cp-quote{padding-left:clamp(24px,2.6vw,48px)}
.cp-quote .qm{font-size:84px}
.cp-quote p{font-size:clamp(24px,2.1vw,36px);line-height:1.25}
/* ===== character development: its own gold-framed panel ===== */
.cs-dev{padding-top:clamp(48px,5vw,80px)}
.cd-panel{position:relative;padding:clamp(26px,3vw,48px) clamp(20px,3vw,56px) clamp(30px,3vw,48px);border:2px solid #d9b878;border-radius:22px;
  background:radial-gradient(ellipse 80% 60% at 50% 0%,rgba(217,184,120,.10),rgba(217,184,120,0) 70%),linear-gradient(180deg,#0e1638,#080c22);
  box-shadow:0 0 0 1px rgba(0,0,0,.6),0 0 0 7px rgba(217,184,120,.10),0 0 40px rgba(217,184,120,.22),inset 0 0 40px rgba(217,184,120,.07)}
.cd-panel::before,.cd-panel::after{content:"";position:absolute;width:60px;height:60px;border:3px solid #f3dca8;pointer-events:none}
.cd-panel::before{top:-8px;left:-8px;border-right:0;border-bottom:0;border-top-left-radius:24px}
.cd-panel::after{bottom:-8px;right:-8px;border-left:0;border-top:0;border-bottom-right-radius:24px}
.cd-panel .ornate{margin-bottom:30px}
.cd-row{gap:clamp(24px,3.4vw,60px)}
.cd-journal{flex-basis:clamp(280px,25vw,420px)}
.cd-steps figure{width:clamp(150px,13vw,220px)}
.cd-steps figcaption{font-size:12.5px;margin-top:10px;color:#cfc6b3}
.cd-notes{max-width:900px;margin-top:36px;border:1px solid rgba(217,184,120,.5);background:rgba(6,10,25,.55);padding:30px 36px}
.cd-notes h3{font-size:clamp(28px,2.2vw,38px)}
.cd-notes p{font-size:clamp(17px,1.15vw,20px);line-height:1.6}
.cs-dev .suggest{margin-top:clamp(48px,5vw,80px)}
/* caption title stays on one line */
.cx-c h2{white-space:nowrap}
@media(max-width:1100px){.cp-grid{grid-template-columns:240px 1fr}}
@media(max-width:640px){.cp-grid{grid-template-columns:1fr}.cd-panel::before,.cd-panel::after{width:36px;height:36px}.cx-c h2{white-space:normal}}

.cx-snd{left:34px;right:auto;bottom:28px;z-index:6}
.cx-bg.on,.cx-vid{object-position:center center}
/* focused card: clean and sharp, no hologram effects */
.cx-card.on{filter:none!important;animation:none!important;background:#000}
.cx-card.on img{opacity:1;filter:none}
.cx-card.on::before{display:none}
.cx-card.on::after{background:linear-gradient(120deg,rgba(255,255,255,.12),rgba(255,255,255,0) 18%)}
.cx-card.on{z-index:20!important}
/* keep the screen's scanlines and vignette behind the cards, not over them */
.cx-screen{z-index:1}
.cx-deck{z-index:5}
/* lighter screen tint overall so the art reads truer */
.cx-screen .scan{opacity:.55}
.cx-screen{box-shadow:inset 0 0 0 1.5px rgba(95,212,255,.55),inset 0 0 0 4px rgba(95,212,255,.08),inset 0 0 50px rgba(95,140,255,.25),inset 0 0 140px rgba(5,8,22,.6),0 0 24px rgba(95,212,255,.25)}

/* ===== scene overlay: front card grows into a large view ===== */
.cx-card{cursor:pointer}
.cx-zoomhint{position:absolute;z-index:3;right:10px;top:10px;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:rgba(5,8,22,.6);border:1px solid rgba(243,220,168,.6);opacity:0;transform:scale(.85);transition:.25s}
.cx-zoomhint svg{width:16px;height:16px;fill:none;stroke:#f3dca8;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.cx-card.on .cx-zoomhint{opacity:.9;transform:none}
.cx-card.on:hover .cx-zoomhint{opacity:1;box-shadow:0 0 14px rgba(243,220,168,.6)}
.cx-zoom{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:clamp(14px,3vw,48px)}
.cx-zoom[hidden]{display:none}
.cz-back{position:absolute;inset:0;background:rgba(3,5,14,.82);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);opacity:0;transition:opacity .45s}
.cx-zoom.on .cz-back{opacity:1}
.cz-box{position:relative;width:min(1400px,100%);max-height:100%;display:flex;flex-direction:column;gap:0;margin:0}
.cz-img{position:relative;border-radius:22px;overflow:hidden;border:3px solid #f3dca8;box-shadow:0 0 0 1px rgba(0,0,0,.5),0 0 40px rgba(255,190,100,.45),0 0 90px rgba(95,212,255,.25),0 30px 80px rgba(0,0,0,.7);transform-origin:center center;background:#000}
.cz-img img{display:block;width:100%;max-height:min(68vh,860px);object-fit:contain;background:#000}
.cz-scan{position:absolute;inset:0;pointer-events:none;background:linear-gradient(120deg,rgba(255,255,255,.10),rgba(255,255,255,0) 20%)}
.cz-cap{text-align:center;padding:clamp(16px,2.2vh,26px) clamp(10px,4vw,90px) 0;opacity:0;transform:translateY(14px);transition:opacity .4s .25s,transform .4s .25s}
.cx-zoom.on .cz-cap{opacity:1;transform:none}
.cz-eye{font-family:var(--sans);font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:#f3dca8}
.cz-eye b{font-weight:600}
.cz-t{display:flex;align-items:center;justify-content:center;gap:20px;margin:8px 0 10px;font-family:var(--sans);font-weight:500;letter-spacing:.3em;text-transform:uppercase;font-size:clamp(20px,2vw,34px);color:#fff}
.cz-t::before,.cz-t::after{content:"";width:clamp(40px,7vw,140px);height:2px;background:linear-gradient(90deg,rgba(243,220,168,0),#f3dca8)}
.cz-t::after{transform:scaleX(-1)}
.cz-s{max-width:900px;margin:0 auto;font-family:var(--sans);font-size:clamp(16px,1.25vw,21px);line-height:1.6;color:#e6e3dc}
.cz-acts{display:flex;justify-content:center;gap:26px;margin-top:14px}
.cz-x{position:absolute;top:-6px;right:-6px;z-index:3;width:46px;height:46px;border-radius:50%;background:rgba(5,8,22,.85);border:1.5px solid #f3dca8;color:#f3dca8;font-size:28px;line-height:1;display:grid;place-items:center;box-shadow:0 0 16px rgba(243,220,168,.4)}
.cz-prev,.cz-next{position:absolute;top:calc(min(68vh,860px)/2);translate:0 -50%;z-index:3;width:52px;height:52px;border-radius:50%;background:rgba(5,8,22,.7);border:1.5px solid rgba(95,212,255,.7);display:grid;place-items:center;box-shadow:0 0 16px rgba(95,212,255,.4)}
.cz-prev{left:-26px}.cz-next{right:-26px}
.cz-prev svg,.cz-next svg{width:22px;height:22px;fill:none;stroke:#bfeaff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.cz-x:hover,.cz-prev:hover,.cz-next:hover{background:rgba(217,184,120,.2)}
@media(max-width:700px){.cz-prev{left:6px}.cz-next{right:6px}.cz-x{top:6px;right:6px}.cz-img{border-radius:14px}.cz-t{letter-spacing:.16em;gap:10px}.cz-t::before,.cz-t::after{width:24px}}
@media(max-width:700px){.cz-prev,.cz-next{top:calc((100vw - 28px) * .25);width:40px;height:40px}}

/* ===== hologram materialise / dematerialise for the scene overlay ===== */
.cz-img{transform:none!important;transition:none!important}
.cz-noise{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;mix-blend-mode:screen;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .55  0 0 0 0 .9  0 0 0 0 1  0 0 0 1.4 -.35'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.cz-sweep{position:absolute;left:0;right:0;top:-12%;height:12%;z-index:3;pointer-events:none;opacity:0;
  background:linear-gradient(180deg,rgba(95,212,255,0),rgba(170,235,255,.85) 45%,#fff 50%,rgba(170,235,255,.85) 55%,rgba(95,212,255,0));mix-blend-mode:screen;filter:blur(1px)}
.cx-zoom .cz-box::before{content:"";position:absolute;left:50%;top:calc(min(68vh,860px) + 2px);width:60%;height:28vh;translate:-50% 0;pointer-events:none;opacity:0;
  background:linear-gradient(180deg,rgba(95,212,255,.35),rgba(95,212,255,0));clip-path:polygon(0 0,100% 0,62% 100%,38% 100%);filter:blur(6px)}

/* open: a line of light, then the image fills in from the centre through static, with a colour-split glitch */
.cx-zoom.in .cz-img{animation:holoIn .95s cubic-bezier(.2,.8,.2,1) both}
.cx-zoom.in .cz-noise{animation:holoNoise .95s steps(9) both}
.cx-zoom.in .cz-sweep{animation:holoSweep .8s .2s ease-in-out both}
.cx-zoom.in .cz-box::before{animation:holoBeam 1s ease-out both}
@keyframes holoIn{
  0%{clip-path:inset(49.6% 46% 49.6% 46% round 22px);opacity:0;filter:brightness(4) saturate(0) blur(4px)}
  12%{clip-path:inset(49.6% 0 49.6% 0 round 22px);opacity:1;filter:brightness(4) saturate(0) blur(2px)}
  42%{clip-path:inset(0 0 0 0 round 22px);filter:brightness(1.9) saturate(.4) blur(1px) drop-shadow(-10px 0 rgba(255,40,140,.85)) drop-shadow(10px 0 rgba(0,225,255,.85))}
  58%{filter:brightness(1.3) saturate(.9) drop-shadow(-4px 0 rgba(255,40,140,.7)) drop-shadow(4px 0 rgba(0,225,255,.7));translate:-6px 0}
  64%{translate:5px 0;opacity:.75}
  70%{translate:-2px 0;opacity:1}
  76%{translate:0 0;filter:brightness(1.12)}
  100%{clip-path:inset(0 0 0 0 round 22px);opacity:1;filter:none;translate:0 0}}
@keyframes holoNoise{0%{opacity:0}15%{opacity:.95;background-position:0 0}40%{opacity:.75;background-position:40px -30px}65%{opacity:.35;background-position:-60px 20px}100%{opacity:0;background-position:20px 50px}}
@keyframes holoSweep{0%{top:-12%;opacity:0}10%{opacity:1}90%{opacity:1}100%{top:100%;opacity:0}}
@keyframes holoBeam{0%{opacity:0}20%{opacity:1}100%{opacity:0}}

/* caption: eyebrow, then decoding title, then text rises in */
.cz-cap{opacity:1!important;transform:none!important;transition:none!important}
.cx-zoom.in .cz-eye{animation:holoUp .5s .35s both}
.cx-zoom.in .cz-t{animation:holoUp .5s .4s both}
.cx-zoom.in .cz-s{animation:holoUp .6s .55s both}
.cx-zoom.in .cz-acts{animation:holoUp .5s .7s both}
.cx-zoom.in .cz-x,.cx-zoom.in .cz-prev,.cx-zoom.in .cz-next{animation:holoPop .45s .75s both}
@keyframes holoUp{from{opacity:0;transform:translateY(14px);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}
@keyframes holoPop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
.cz-t{font-variant-numeric:tabular-nums}

/* close: glitch, collapse to a line, then a point of light (like a hologram switching off) */
.cx-zoom.out .cz-img{animation:holoOut .55s cubic-bezier(.6,0,.8,.3) both}
.cx-zoom.out .cz-noise{animation:holoNoise .55s steps(6) reverse both}
.cx-zoom.out .cz-cap,.cx-zoom.out .cz-x,.cx-zoom.out .cz-prev,.cx-zoom.out .cz-next{animation:holoFade .25s both}
.cx-zoom.out .cz-back{opacity:0;transition:opacity .5s .1s}
@keyframes holoOut{
  0%{clip-path:inset(0 0 0 0 round 22px);filter:none}
  22%{filter:brightness(1.6) drop-shadow(-8px 0 rgba(255,40,140,.85)) drop-shadow(8px 0 rgba(0,225,255,.85));translate:6px 0}
  34%{translate:-4px 0;opacity:.7}
  62%{clip-path:inset(49.6% 0 49.6% 0 round 22px);filter:brightness(4) saturate(0);translate:0 0;opacity:1}
  85%{clip-path:inset(49.6% 49% 49.6% 49% round 22px);opacity:1}
  100%{clip-path:inset(49.6% 49.9% 49.6% 49.9% round 22px);opacity:0}}
@keyframes holoFade{to{opacity:0;filter:blur(4px)}}

/* next / previous: a quick static glitch while the scene changes */
.cx-zoom.swap .cz-img{animation:holoSwap .56s ease both}
.cx-zoom.swap .cz-noise{animation:holoNoise .56s steps(7) both}
.cx-zoom.swap .cz-s,.cx-zoom.swap .cz-acts{animation:holoSwapTxt .56s both}
@keyframes holoSwap{
  0%{filter:none}
  25%{filter:brightness(1.8) saturate(.3) drop-shadow(-10px 0 rgba(255,40,140,.85)) drop-shadow(10px 0 rgba(0,225,255,.85));translate:-10px 0;clip-path:inset(0 0 0 0 round 22px)}
  40%{opacity:.15;clip-path:inset(30% 0 40% 0 round 22px)}
  55%{opacity:.6;translate:8px 0;clip-path:inset(0 0 0 0 round 22px)}
  75%{filter:brightness(1.2) drop-shadow(-3px 0 rgba(255,40,140,.6)) drop-shadow(3px 0 rgba(0,225,255,.6));translate:0 0;opacity:1}
  100%{filter:none}}
@keyframes holoSwapTxt{0%,100%{opacity:1;filter:none}40%{opacity:0;filter:blur(4px)}}

/* the clicked card flashes as it "projects" */
.cx-card.beam{animation:cardBeam .7s ease-out}
@keyframes cardBeam{0%{box-shadow:0 0 0 0 rgba(170,235,255,.9),0 0 30px rgba(95,212,255,.8)}40%{box-shadow:0 0 0 10px rgba(170,235,255,0),0 0 80px rgba(95,212,255,.9);filter:brightness(1.5)}100%{}}

@media(prefers-reduced-motion:reduce){
  .cx-zoom.in *, .cx-zoom.out *, .cx-zoom.swap *, .cx-zoom .cz-box::before, .cx-card.beam{animation:none!important}
}

.cz-back{background:rgba(3,5,14,.93);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.cz-box{width:min(1400px,100%,calc(min(68vh,860px) * 2))}
.cz-img img{width:100%;height:auto;max-height:none;aspect-ratio:2/1;object-fit:cover}
.cx-zoom .cz-box::before{top:calc(100% - 10px);height:20vh;z-index:-1}
.cz-box{width:min(1400px,100%,calc(min(60vh,820px) * 2))}.cz-back{background:rgba(3,5,14,.95)}

/* ===== v2 scene overlay: never crop, black & white, pixelate in, colour "dialled in" ===== */
.cz-box{width:auto;max-width:100%;transition:width .3s ease}
.cz-img img{width:100%;height:auto;aspect-ratio:auto;object-fit:fill;max-height:none}
.cz-prev,.cz-next{top:auto;bottom:auto;translate:0 -50%}
.cz-box{--imgh:0px}
.cz-pix{position:absolute;inset:0;width:100%;height:100%;z-index:1;opacity:0;pointer-events:none;image-rendering:pixelated}
.cz-pix.on{opacity:1}
.cz-pix:not(.on){transition:opacity .18s}
.cx-zoom.in .cz-img{animation:holoIn2 1.65s linear both}
@keyframes holoIn2{
  0%{clip-path:inset(49.6% 46% 49.6% 46% round 22px);opacity:0;filter:grayscale(1) brightness(3)}
  7%{clip-path:inset(49.6% 0 49.6% 0 round 22px);opacity:1;filter:grayscale(1) brightness(3)}
  16%{clip-path:inset(0 0 0 0 round 22px);filter:grayscale(1) contrast(1.15) brightness(1.05)}
  44%{filter:grayscale(1) contrast(1.15)}
  /* dial: too much colour */
  54%{filter:saturate(3.2) contrast(1.2) hue-rotate(-8deg)}
  /* too little */
  66%{filter:saturate(.25) contrast(1.05)}
  /* too bright */
  78%{filter:saturate(1.1) brightness(1.85) contrast(.9)}
  /* settle, with a tiny overshoot */
  88%{filter:brightness(.92) saturate(1.05)}
  100%{clip-path:inset(0 0 0 0 round 22px);opacity:1;filter:none}}
.cx-zoom.in .cz-sweep{animation:holoSweep .8s .9s ease-in-out both}
.cx-zoom.in .cz-noise{animation:holoNoise2 1.65s steps(12) both}
@keyframes holoNoise2{0%{opacity:0}8%{opacity:.8}40%{opacity:.35;background-position:40px -30px}60%{opacity:.15;background-position:-60px 20px}100%{opacity:0;background-position:20px 50px}}
.cx-zoom.in .cz-eye{animation-delay:.9s}.cx-zoom.in .cz-t{animation-delay:.95s}
.cx-zoom.in .cz-s{animation-delay:1.1s}.cx-zoom.in .cz-acts{animation-delay:1.25s}
.cx-zoom.in .cz-x,.cx-zoom.in .cz-prev,.cx-zoom.in .cz-next{animation-delay:1.2s}
/* next / previous: drop to grey, pixelate, then dial the colour back in quickly */
.cx-zoom.swap .cz-img{animation:holoSwap2 1.1s linear both}
@keyframes holoSwap2{
  0%{filter:none}
  15%{filter:grayscale(1) brightness(1.6);translate:-8px 0}
  22%{filter:grayscale(1);translate:6px 0}
  30%{translate:0 0;filter:grayscale(1)}
  48%{filter:grayscale(1)}
  60%{filter:saturate(3) contrast(1.15)}
  72%{filter:saturate(.3)}
  84%{filter:brightness(1.7)}
  100%{filter:none}}
@media(prefers-reduced-motion:reduce){.cz-pix{display:none}}

/* colour dial with matching filter lists so every step blends smoothly */
@keyframes holoIn2{
  0%{clip-path:inset(49.6% 46% 49.6% 46% round 22px);opacity:0;filter:grayscale(1) saturate(1) contrast(1) brightness(3) hue-rotate(0deg)}
  7%{clip-path:inset(49.6% 0 49.6% 0 round 22px);opacity:1;filter:grayscale(1) saturate(1) contrast(1) brightness(3) hue-rotate(0deg)}
  16%{clip-path:inset(0 0 0 0 round 22px);filter:grayscale(1) saturate(1) contrast(1.15) brightness(1.05) hue-rotate(0deg)}
  44%{filter:grayscale(1) saturate(1) contrast(1.15) brightness(1) hue-rotate(0deg)}
  55%{filter:grayscale(0) saturate(3.4) contrast(1.2) brightness(1) hue-rotate(-10deg)}
  67%{filter:grayscale(0) saturate(0.2) contrast(1.05) brightness(1) hue-rotate(0deg)}
  79%{filter:grayscale(0) saturate(1.1) contrast(0.9) brightness(1.9) hue-rotate(0deg)}
  89%{filter:grayscale(0) saturate(1.05) contrast(1) brightness(0.9) hue-rotate(0deg)}
  100%{clip-path:inset(0 0 0 0 round 22px);opacity:1;filter:grayscale(0) saturate(1) contrast(1) brightness(1) hue-rotate(0deg)}}
@keyframes holoSwap2{
  0%{filter:grayscale(0) saturate(1) contrast(1) brightness(1) hue-rotate(0deg)}
  15%{filter:grayscale(1) saturate(1) contrast(1) brightness(1.6) hue-rotate(0deg);translate:-8px 0}
  22%{filter:grayscale(1) saturate(1) contrast(1) brightness(1) hue-rotate(0deg);translate:6px 0}
  30%{filter:grayscale(1) saturate(1) contrast(1) brightness(1) hue-rotate(0deg);translate:0 0}
  48%{filter:grayscale(1) saturate(1) contrast(1) brightness(1) hue-rotate(0deg)}
  60%{filter:grayscale(0) saturate(3) contrast(1.15) brightness(1) hue-rotate(-8deg)}
  72%{filter:grayscale(0) saturate(0.3) contrast(1) brightness(1) hue-rotate(0deg)}
  84%{filter:grayscale(0) saturate(1.1) contrast(0.95) brightness(1.7) hue-rotate(0deg)}
  100%{filter:grayscale(0) saturate(1) contrast(1) brightness(1) hue-rotate(0deg)}}
.cz-prev,.cz-next{top:calc(var(--imgh) / 2)!important}
.cz-back{background:rgba(3,5,14,.97)}

/* ===== scene viewer v3: big 16:9 screen + console panel underneath ===== */
.cz-box{display:flex;flex-direction:column;max-width:none;border-radius:22px;border:3px solid #f3dca8;overflow:visible;
  box-shadow:0 0 0 1px rgba(0,0,0,.5),0 0 40px rgba(255,190,100,.4),0 0 90px rgba(95,212,255,.22),0 30px 80px rgba(0,0,0,.7);background:#03050e}
.cz-img{border:0!important;border-radius:19px 19px 0 0!important;box-shadow:none!important;height:var(--imgh);background:radial-gradient(ellipse at center,#0b1230,#02040b 75%)}
.cz-img img{width:100%;height:100%!important;aspect-ratio:auto!important;object-fit:contain!important;background:transparent}
@keyframes holoIn2{0%{clip-path:inset(49.6% 46% 49.6% 46% round 19px 19px 0 0)}}
/* console */
.cz-cap{position:relative;text-align:left!important;padding:0!important;border-top:2px solid rgba(243,220,168,.75);border-radius:0 0 19px 19px;overflow:hidden;
  background:linear-gradient(180deg,rgba(14,24,60,.96),rgba(5,9,26,.98));display:grid;grid-template-columns:1fr auto;grid-template-rows:auto 1fr;column-gap:28px}
.cz-cap::before{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(150,210,255,.05) 0 1px,rgba(0,0,0,0) 1px 3px)}
.cz-bar{grid-column:1/3;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:9px 22px;border-bottom:1px solid rgba(95,212,255,.22);background:rgba(95,212,255,.06);
  font-family:'Share Tech Mono',ui-monospace,Menlo,monospace;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:#7fdcff}
.cz-eye{font-family:inherit!important;font-size:inherit!important;letter-spacing:inherit!important;color:inherit!important}
.cz-eye i{font-style:normal;color:rgba(127,220,255,.45);margin:0 6px}
.cz-eye b{color:#f3dca8;font-weight:400}
.cz-rec{display:flex;align-items:center;gap:8px;color:#ff8a8a}
.cz-rec i{width:9px;height:9px;border-radius:50%;background:#ff4d5e;box-shadow:0 0 8px #ff4d5e;animation:rec 1.2s steps(1) infinite}
@keyframes rec{50%{opacity:.2}}
.cz-body{padding:16px 22px 18px;min-width:0}
.cz-cap .cz-t{display:block;margin:0 0 8px;text-align:left;font-family:'Exo 2',var(--sans);font-style:italic;font-weight:800;letter-spacing:.06em;font-size:clamp(22px,2vw,34px);color:#fff;
  text-shadow:0 0 12px rgba(95,212,255,.6)}
.cz-cap .cz-t::before,.cz-cap .cz-t::after{display:none}
.cz-cap .cz-s{max-width:none;margin:0;text-align:left;font-family:'Share Tech Mono',ui-monospace,Menlo,monospace;font-size:clamp(15px,1.1vw,19px);line-height:1.6;color:#d9f3ff;letter-spacing:.02em}
.cz-s .rest{color:transparent}
.cz-s .caret{display:inline-block;width:.6em;height:1.1em;margin-left:2px;vertical-align:-.18em;background:#7fdcff;box-shadow:0 0 8px #5fd4ff;animation:caret .9s steps(1) infinite}
.cx-zoom.typing .cz-s .caret{animation:none}
.cx-zoom.typing .cz-s .rest + .caret{order:0}
@keyframes caret{50%{opacity:0}}
.cz-cap .cz-acts{align-self:end;flex-direction:column;align-items:flex-end;gap:12px;margin:0;padding:0 22px 20px}
/* caption no longer animates as a block; the console fades in with the screen */
.cx-zoom.in .cz-cap{animation:holoUp .45s .85s both}
.cx-zoom.in .cz-eye,.cx-zoom.in .cz-t,.cx-zoom.in .cz-s,.cx-zoom.in .cz-acts{animation:none}
.cx-zoom.in .cz-t{animation:holoUp .4s 1s both}
.cz-x{top:-18px!important;right:-18px!important}
.cz-prev{left:-26px!important}.cz-next{right:-26px!important}
.cx-zoom .cz-box::before{display:none}
@media(max-width:700px){
  .cz-cap{grid-template-columns:1fr}
  .cz-bar{font-size:10.5px;letter-spacing:.08em;padding:8px 12px}
  .cz-rec{display:none}
  .cz-body{padding:12px 14px 8px}
  .cz-cap .cz-acts{flex-direction:row;align-self:start;padding:0 14px 14px}
  .cz-prev{left:6px!important}.cz-next{right:6px!important}.cz-x{top:6px!important;right:6px!important}
}
.cz-bar{grid-column:1/-1}
.cz-s .caret{margin-right:-.6em}
.cx-zoom:not(.typing) .cz-s .caret{margin-right:0}
@media(max-width:700px){.cz-cap .cz-t{font-size:22px}.cz-cap .cz-s{font-size:14.5px}}

/* ===== scene viewer v4: full image with a HUD info panel over it ===== */
.cz-box{border:3px solid #f3dca8;border-radius:22px;background:#02040b;height:var(--imgh)}
.cz-img{height:100%!important;border-radius:19px!important}
@keyframes holoIn2{0%{clip-path:inset(49.6% 46% 49.6% 46% round 19px)}}
.cz-status{position:absolute;z-index:4;top:14px;left:18px;right:70px;display:flex;justify-content:space-between;align-items:center;gap:14px;pointer-events:none;
  font-family:'Share Tech Mono',ui-monospace,Menlo,monospace;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:#9fe6ff;text-shadow:0 1px 4px #000,0 0 8px rgba(95,212,255,.6)}
.cz-status .cz-eye{font:inherit!important;letter-spacing:inherit!important;color:inherit!important;padding:5px 12px;background:rgba(3,8,24,.55);border:1px solid rgba(95,212,255,.35);clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%)}
.cz-status .cz-eye i{font-style:normal;color:rgba(159,230,255,.45);margin:0 5px}
.cz-status .cz-eye b{color:#f3dca8;font-weight:400}
.cz-status .cz-rec{padding:5px 12px;background:rgba(3,8,24,.55);border:1px solid rgba(255,90,100,.4);color:#ffb0b6}
/* HUD corner brackets on the image */
.cz-corner{position:absolute;z-index:3;width:46px;height:46px;pointer-events:none;border:2px solid #7fdcff;filter:drop-shadow(0 0 6px rgba(95,212,255,.9));opacity:.85}
.cz-corner.tl{top:10px;left:10px;border-right:0;border-bottom:0;border-top-left-radius:10px}
.cz-corner.tr{top:10px;right:10px;border-left:0;border-bottom:0;border-top-right-radius:10px}
.cz-corner.bl{bottom:10px;left:10px;border-right:0;border-top:0;border-bottom-left-radius:10px}
.cz-corner.br{bottom:10px;right:10px;border-left:0;border-top:0;border-bottom-right-radius:10px}
.cx-zoom.in .cz-corner,.cx-zoom.in .cz-status{animation:hudPop .5s 1.05s both}
@keyframes hudPop{from{opacity:0;transform:scale(1.15)}to{opacity:.85;transform:none}}
/* the HUD panel */
.cz-hud{position:absolute;z-index:5;left:clamp(16px,2.4vw,36px);bottom:clamp(16px,2.4vw,36px);width:min(640px,58%);max-height:calc(100% - 90px);margin:0;padding:0;text-align:left;pointer-events:auto}
.hud-frame{--c:22px;padding:1.5px;background:linear-gradient(135deg,#f3dca8,rgba(95,212,255,.9) 35%,rgba(95,212,255,.35) 70%,#a875ff);
  clip-path:polygon(var(--c) 0,100% 0,100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,0 100%,0 var(--c));
  filter:drop-shadow(0 0 14px rgba(95,212,255,.45))}
.hud-in{position:relative;overflow:hidden;padding:16px 22px 16px 24px;
  clip-path:polygon(calc(var(--c) - 1px) 0,100% 0,100% calc(100% - var(--c) + 1px),calc(100% - var(--c) + 1px) 100%,0 100%,0 calc(var(--c) - 1px));
  background:linear-gradient(110deg,rgba(6,12,36,.9),rgba(8,16,44,.78) 60%,rgba(10,20,52,.62))}
.hud-in::before{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(150,210,255,.06) 0 1px,rgba(0,0,0,0) 1px 3px)}
.hud-in::after{content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;background:linear-gradient(180deg,#f3dca8,#5fd4ff);box-shadow:0 0 10px #5fd4ff}
.hud-top{display:flex;align-items:center;gap:14px;font-family:'Share Tech Mono',ui-monospace,Menlo,monospace;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:#7fdcff}
.hud-top b{color:#f3dca8;font-weight:400}
.hud-cl{margin-left:auto;color:rgba(159,230,255,.65)}
.hud-meter{display:flex;gap:3px}
.hud-meter i{width:5px;height:10px;background:#5fd4ff;box-shadow:0 0 6px #5fd4ff;animation:meter 1.6s ease-in-out infinite}
.hud-meter i:nth-child(2){animation-delay:.15s}.hud-meter i:nth-child(3){animation-delay:.3s}.hud-meter i:nth-child(4){animation-delay:.45s}.hud-meter i:nth-child(5){animation-delay:.6s}
@keyframes meter{0%,100%{opacity:.25;transform:scaleY(.5)}50%{opacity:1;transform:none}}
.cz-hud .cz-t{display:block;margin:8px 0 6px;text-align:left;font-family:'Exo 2',var(--sans);font-style:italic;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  font-size:clamp(22px,2.2vw,38px);line-height:1.05;color:#fff;text-shadow:0 0 14px rgba(95,212,255,.75),0 2px 6px rgba(0,0,0,.8)}
.cz-hud .cz-t::before,.cz-hud .cz-t::after{display:none}
.cz-hud .cz-s{max-width:none;margin:0;text-align:left;font-family:'Share Tech Mono',ui-monospace,Menlo,monospace;font-size:clamp(14.5px,1.05vw,18px);line-height:1.55;color:#e2f6ff;text-shadow:0 1px 3px rgba(0,0,0,.9)}
.cz-hud .cz-acts{display:flex;justify-content:flex-start;gap:24px;margin-top:12px;padding:0}
.hud-scan{position:absolute;left:0;right:0;top:-30%;height:30%;pointer-events:none;background:linear-gradient(180deg,rgba(95,212,255,0),rgba(95,212,255,.12),rgba(95,212,255,0));animation:hudScan 4.5s linear infinite}
@keyframes hudScan{to{top:110%}}
/* panel animation: on open it wipes in from the left behind a bright edge; hide/show wipes it in/out */
.cz-hud{transition:none}
.cx-zoom.in .cz-hud,.cx-zoom.hudshow .cz-hud{animation:hudIn .6s cubic-bezier(.2,.8,.2,1) both}
.cx-zoom.in .cz-hud{animation-delay:.95s}
@keyframes hudIn{
  0%{clip-path:inset(0 100% 0 0);opacity:1;filter:brightness(2.4)}
  55%{clip-path:inset(0 0 0 0);filter:brightness(1.6) drop-shadow(-6px 0 rgba(255,40,140,.7)) drop-shadow(6px 0 rgba(0,225,255,.7))}
  70%{transform:translateX(-4px)}
  80%{transform:translateX(2px)}
  100%{clip-path:inset(0 0 0 0);filter:none;transform:none}}
.cx-zoom.hud-off .cz-hud{opacity:0;visibility:hidden;pointer-events:none}
.cx-zoom.hudhide .cz-hud{visibility:visible;animation:hudOut .5s cubic-bezier(.6,0,.8,.3) both}
@keyframes hudOut{
  0%{clip-path:inset(0 0 0 0);opacity:1;filter:none}
  25%{filter:brightness(1.6) drop-shadow(-6px 0 rgba(255,40,140,.7)) drop-shadow(6px 0 rgba(0,225,255,.7));transform:translateX(5px)}
  60%{clip-path:inset(46% 0 46% 0);filter:brightness(2.5);transform:none}
  100%{clip-path:inset(49% 100% 49% 0);opacity:0}}
/* show / hide toggle */
.cz-info{position:absolute;z-index:6;right:clamp(16px,2.4vw,36px);bottom:clamp(16px,2.4vw,36px);display:flex;align-items:center;gap:9px;padding:9px 16px 9px 13px;
  font-family:'Share Tech Mono',ui-monospace,Menlo,monospace;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:#bfeaff;
  background:rgba(3,8,24,.7);border:1.5px solid rgba(95,212,255,.75);clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);
  box-shadow:inset 0 0 14px rgba(95,212,255,.25);transition:.2s}
.cz-info:hover{background:rgba(95,212,255,.18);color:#fff}
.cz-info svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.cz-info .slash{opacity:0;transition:.2s}
.cx-zoom.hud-off .cz-info .slash{opacity:1}
.cx-zoom.hud-off .cz-info{border-color:#f3dca8;color:#f3dca8}
.cx-zoom.in .cz-info{animation:hudPop .45s 1.2s both}
/* the old under-image console is gone */
.cz-cap{display:none!important}
.cz-prev,.cz-next{top:50%!important}
@media(max-width:700px){
  .cz-box{height:auto}
  .cz-img{height:var(--imgh)!important;border-radius:19px 19px 0 0!important}
  .cz-status,.cz-corner{display:none}
  .cz-hud{position:relative;left:auto;bottom:auto;width:auto;max-height:none}
  .hud-frame{--c:14px;filter:none}
  .hud-in{padding:12px 14px}
  .hud-cl{display:none}
  .cz-info{position:absolute;top:calc(var(--imgh) - 46px);bottom:auto;right:10px;font-size:10.5px;padding:7px 11px}
  .cz-prev,.cz-next{top:calc(var(--imgh) / 2)!important}
}
@media(min-width:701px){.cz-status{top:calc((100% - var(--imgh)) / 2 + 14px);top:24px}.cz-corner.tl,.cz-corner.tr{top:14px}.cz-corner.bl,.cz-corner.br{bottom:14px}}
.hud-in{background:linear-gradient(110deg,rgba(5,10,30,.92),rgba(7,14,40,.84) 60%,rgba(9,18,48,.72))}

@media(max-width:700px){
  .cx-zoom{padding:10px;align-items:center}
  .cz-box{max-height:calc(100svh - 20px);overflow-y:auto;overscroll-behavior:contain;transition:none}
  .cz-img{transition:height .35s ease}
  .cx-zoom.hud-off:not(.hudhide) .cz-hud{display:none}
  .cx-zoom.hud-off .cz-img{border-radius:19px!important}
  .cz-info{top:calc(var(--imgh) - 48px)}
}

/* ================= Creator's Journal ================= */
.jhero{position:relative;overflow:hidden;min-height:clamp(300px,24vw,420px);display:grid;place-items:center;text-align:center;border-bottom:1px solid var(--line-soft)}
.jhero-bg{position:absolute;inset:0;background:url(../img/hero.jpg) center 40%/cover no-repeat}
.jhero-bg::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 46% 70% at 50% 50%,rgba(6,10,25,.72),rgba(6,10,25,.25) 70%,rgba(6,10,25,0)),linear-gradient(0deg,var(--bg),rgba(6,10,25,0) 30%)}
.jhero-in{position:relative;padding:44px 20px 50px;max-width:900px}
.jkick{display:flex;align-items:center;justify-content:center;gap:16px;font-family:var(--sans);font-size:12px;letter-spacing:.42em;text-transform:uppercase;color:var(--gold2)}
.jkick span{width:70px;height:1px;background:linear-gradient(90deg,rgba(217,184,120,0),var(--gold))}.jkick span:last-child{transform:scaleX(-1)}
.jhero h1{position:relative;display:flex;flex-direction:column;align-items:center;margin:10px 0 6px;font-family:var(--display);font-weight:500;font-style:italic;text-transform:uppercase;letter-spacing:.16em;line-height:1.02;
  font-size:clamp(40px,5.4vw,82px);background:linear-gradient(180deg,#fff6e2,#e7cf9b 60%,#b8924e);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 3px 12px rgba(0,0,0,.7))}
.jhero h1 span:last-child{margin-left:.6em}
.jorbit{position:absolute;left:-12%;top:8%;width:124%;height:90%;pointer-events:none;filter:drop-shadow(0 0 6px rgba(243,220,168,.7))}
.jsub{font-style:italic;font-size:clamp(17px,1.5vw,22px);color:#e9e4da;text-shadow:0 2px 10px rgba(0,0,0,.85);max-width:640px;margin:8px auto 0}
.jsec{padding:20px 0}
.jorn{margin:36px 0 18px}
.jorn h2{font-size:clamp(17px,1.7vw,24px);letter-spacing:.38em}
.jeye{font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.28em;text-transform:uppercase;color:var(--gold)}
/* glowing panel used across the page */
.jpanel,.jfeat,.jcard{position:relative;border-radius:20px;border:1.5px solid rgba(95,212,255,.55);background:linear-gradient(180deg,rgba(14,24,60,.85),rgba(7,12,32,.92));
  box-shadow:0 0 0 1px rgba(0,0,0,.5),0 0 22px rgba(95,212,255,.22),inset 0 0 30px rgba(95,212,255,.06)}
/* featured */
.jfeat{display:grid;grid-template-columns:1.25fr 1fr;overflow:hidden;min-height:clamp(240px,22vw,340px)}
.jfeat[hidden]{display:none}
.jfeat-pic{position:relative;min-height:220px}
.jfeat-pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.jfeat-pic::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,12,32,0) 55%,rgba(7,12,32,.95))}
.jfeat-txt{padding:clamp(22px,3vw,44px);align-self:center}
.jfeat-txt h2{font-family:var(--serif);font-style:italic;font-weight:600;font-size:clamp(30px,3vw,48px);line-height:1.05;color:#fff;margin:8px 0 12px}
.jfeat-txt p:not(.jeye){font-family:var(--sans);font-size:clamp(15px,1.05vw,17px);line-height:1.6;color:#dde3f0}
.jread{display:inline-flex;align-items:center;gap:14px;margin-top:20px;padding:12px 40px;font-family:var(--sans);font-weight:600;font-size:13px;letter-spacing:.3em;text-transform:uppercase;color:#ffe2a6;
  border:1.5px solid #f3dca8;clip-path:polygon(16px 0,calc(100% - 16px) 0,100% 50%,calc(100% - 16px) 100%,16px 100%,0 50%);background:rgba(20,14,4,.5);transition:.2s}
.jread:hover{background:rgba(217,184,120,.2);color:#fff}
/* filter chips */
.jchips{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.jchip{display:inline-flex;align-items:center;gap:9px;padding:9px 20px;border-radius:999px;border:1.5px solid rgba(217,184,120,.55);background:rgba(10,16,40,.7);font-family:var(--serif);font-size:17px;color:#e9e4da;transition:.2s}
.jchip svg{width:17px;height:17px;fill:none;stroke:var(--gold2);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.jchip:hover{border-color:var(--gold2);color:#fff}
.jchip.on{border-color:#f3dca8;background:linear-gradient(180deg,rgba(80,60,20,.65),rgba(30,22,8,.8));color:#ffe2a6;box-shadow:0 0 14px rgba(243,220,168,.35)}
/* entry cards */
.jgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.jcard{display:grid;grid-template-columns:44% 1fr;overflow:hidden;min-height:150px;transition:.25s}
.jcard:hover{transform:translateY(-3px);border-color:#9fe6ff;box-shadow:0 0 0 1px rgba(0,0,0,.5),0 0 30px rgba(95,212,255,.4)}
.jcard-pic{position:relative;display:block}
.jcard-pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:.4s}
.jcard:hover .jcard-pic img{transform:scale(1.05)}
.jcard-pic::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,12,32,0) 60%,rgba(7,12,32,.9))}
.jcard-txt{position:relative;display:flex;flex-direction:column;padding:12px 16px 14px 12px;min-width:0}
.jtag{align-self:flex-start;padding:2px 10px;border-radius:999px;border:1px solid rgba(243,220,168,.6);font-family:var(--sans);font-size:9.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#f3dca8;margin-bottom:7px}
.jcard-txt strong{font-family:var(--serif);font-weight:600;font-size:19px;line-height:1.12;color:#fff}
.jcard-txt time{font-family:var(--sans);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:5px 0 4px}
.jsum{font-family:var(--sans);font-size:12.5px;line-height:1.45;color:#cfd5e4;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.jgo{position:absolute;right:10px;bottom:8px;color:var(--gold2);font-size:18px}
.jempty{grid-column:1/-1;text-align:center;color:var(--muted);padding:30px 10px;font-style:italic}
.jmore{text-align:center;margin-top:18px}
/* ask + Q&A */
.jqa{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(20px,3vw,48px);padding:clamp(22px,3vw,40px)}
.jqa h2,.jhow h2,.jfollow h2{font-family:var(--serif);font-style:italic;font-weight:600;font-size:clamp(28px,2.6vw,40px);color:#fff;line-height:1.1;margin:6px 0 10px}
.jqa-ask>p:not(.jeye){font-family:var(--sans);font-size:15px;line-height:1.6;color:#d7dce8;margin-bottom:16px}
.jqa-list{border-left:1px solid rgba(95,212,255,.25);padding-left:clamp(18px,2.6vw,40px)}
#jqa{margin-top:10px;display:grid;gap:10px;max-height:560px;overflow:auto;padding-right:6px}
.jq{border:1px solid rgba(95,212,255,.3);border-radius:14px;background:rgba(5,9,24,.6)}
.jq summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:34px 1fr 18px;gap:12px;align-items:start;padding:14px 16px}
.jq summary::-webkit-details-marker{display:none}
.jq summary::after{content:"+";color:var(--gold2);font-size:22px;line-height:1}
.jq[open] summary::after{content:"–"}
.qlbl{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-family:var(--sans);font-weight:700;font-size:14px;color:#061024;background:#7fdcff;box-shadow:0 0 10px rgba(95,212,255,.6)}
.qlbl.a{background:linear-gradient(180deg,#f3dca8,#c9a25a);box-shadow:0 0 10px rgba(243,220,168,.5)}
.qtxt{display:block;font-family:var(--serif);font-size:19px;line-height:1.3;color:#fff}
.qwho{display:block;margin-top:3px;font-family:var(--sans);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.ja{display:grid;grid-template-columns:34px 1fr;gap:12px;padding:0 16px 16px}
.ja p,.ja blockquote{font-family:var(--sans);font-size:15px;line-height:1.65;color:#dfe5f2;margin-bottom:8px}
/* how it works */
.jhow{display:grid;grid-template-columns:1.05fr 1fr;overflow:hidden}
.jhow-pic{min-height:300px;background:url(../img/characters/phill-bg.jpg) 30% center/cover}
.jhow-pic{-webkit-mask-image:linear-gradient(90deg,#000 60%,transparent);mask-image:linear-gradient(90deg,#000 60%,transparent)}
.jhow-txt{padding:clamp(22px,3vw,40px)}
.jhow h2{font-family:var(--sans);font-style:normal;font-weight:500;letter-spacing:.3em;text-transform:uppercase;font-size:clamp(18px,1.8vw,26px)}
.jhow-txt>p{font-family:var(--sans);font-size:15px;color:#d7dce8;margin-bottom:16px}
.jacc{border:1px solid rgba(217,184,120,.45);border-radius:12px;margin-bottom:10px;background:rgba(5,9,24,.55)}
.jacc summary{list-style:none;cursor:pointer;padding:12px 16px;font-family:var(--serif);font-size:18px;display:flex;justify-content:space-between;gap:10px}
.jacc summary::-webkit-details-marker{display:none}
.jacc summary::after{content:"⌄";color:var(--gold2)}
.jacc[open] summary::after{content:"⌃"}
.jacc div{padding:0 16px 14px;font-family:var(--sans);font-size:14.5px;color:#d7dce8}
.jacc a{color:var(--cyan)}
/* follow band */
.jfollow{display:grid;grid-template-columns:auto 1fr minmax(280px,420px);gap:clamp(16px,3vw,40px);align-items:center;padding:clamp(20px,2.6vw,34px) clamp(22px,3vw,44px);border-color:rgba(243,220,168,.65)}
.jfollow>p{font-family:var(--sans);font-size:14.5px;color:#d7dce8;padding-left:clamp(16px,2vw,30px);border-left:1px solid rgba(217,184,120,.35)}
/* reader */
.jreader{position:fixed;inset:0;z-index:150;display:grid;place-items:center;padding:clamp(10px,3vw,40px)}
.jreader[hidden]{display:none}
.jr-back{position:absolute;inset:0;background:rgba(3,5,14,.88);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);opacity:0;transition:opacity .3s}
.jr-box{position:relative;width:min(860px,100%);max-height:100%;overflow:auto;overscroll-behavior:contain;border-radius:22px;border:2px solid #f3dca8;background:linear-gradient(180deg,#0e1638,#070b20);
  box-shadow:0 0 40px rgba(243,200,120,.3),0 30px 80px rgba(0,0,0,.7);opacity:0;transform:translateY(24px) scale(.98);transition:.35s cubic-bezier(.2,.8,.2,1)}
.jreader.on .jr-back{opacity:1}.jreader.on .jr-box{opacity:1;transform:none}
.jr-img{display:block;width:100%;max-height:420px;object-fit:cover;border-bottom:1px solid rgba(243,220,168,.5)}
.jr-x{position:sticky;float:right;top:12px;margin:12px 12px -56px 0;z-index:2;width:44px;height:44px;border-radius:50%;background:rgba(5,8,22,.85);border:1.5px solid #f3dca8;color:#f3dca8;font-size:26px;line-height:1}
.jr-body{padding:clamp(20px,3.4vw,44px)}
.jr-meta{display:flex;align-items:center;gap:14px;font-family:var(--sans);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.jr-tag{padding:3px 12px;border-radius:999px;border:1px solid rgba(243,220,168,.6);color:#f3dca8;font-weight:700}
.jr-body h2{font-family:var(--serif);font-style:italic;font-weight:600;font-size:clamp(30px,3.2vw,46px);line-height:1.08;color:#fff;margin:12px 0 18px}
.jr-text p{font-family:var(--serif);font-size:clamp(19px,1.35vw,21px);line-height:1.7;color:#ece8df;margin-bottom:16px}
.jr-text h3{font-family:var(--display);font-weight:500;font-size:20px;letter-spacing:.08em;color:var(--gold2);margin:26px 0 10px}
.jr-text blockquote{margin:22px 0;padding:6px 0 6px 20px;border-left:3px solid var(--gold);font-family:var(--serif);font-style:italic;font-size:22px;color:#fff}
.jr-text a{color:var(--cyan);text-decoration:underline}
.jr-acts{display:flex;flex-wrap:wrap;gap:24px;margin-top:24px;padding-top:18px;border-top:1px solid rgba(217,184,120,.3)}
@media(max-width:1100px){.jgrid{grid-template-columns:repeat(2,1fr)}.jfollow{grid-template-columns:1fr}.jfollow>p{border-left:0;padding-left:0}}
@media(max-width:820px){.jfeat,.jqa,.jhow{grid-template-columns:1fr}.jfeat-pic::after{background:linear-gradient(0deg,rgba(7,12,32,.95),rgba(7,12,32,0) 50%)}.jqa-list{border-left:0;padding-left:0;border-top:1px solid rgba(95,212,255,.25);padding-top:20px}.jhow-pic{min-height:200px;-webkit-mask-image:linear-gradient(0deg,transparent,#000 40%);mask-image:linear-gradient(0deg,transparent,#000 40%)}}
@media(max-width:620px){.jgrid{grid-template-columns:1fr}.jcard{grid-template-columns:40% 1fr}.jchip{font-size:15px;padding:8px 14px}.jhero h1{letter-spacing:.08em}.jorn h2{letter-spacing:.2em}}
#jmore[hidden]{display:none}

/* journal hero: still image, then the looping video fades in over it */
.jhero{min-height:clamp(340px,30vw,560px)}
.jhero-bg{background-image:url(../img/journal-hero.jpg);background-position:center 55%}
.jhero-bg::after{display:none}
.jhero-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 55%;opacity:0;transition:opacity 1.2s}
.jhero-vid.ready{opacity:1}
.jhero-shade{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 44% 62% at 50% 46%,rgba(6,10,25,.6),rgba(6,10,25,.2) 70%,rgba(6,10,25,0)),linear-gradient(0deg,var(--bg),rgba(6,10,25,0) 26%)}
.jhero .jsnd{right:18px;bottom:22px;z-index:3}
.jhero{min-height:clamp(380px,36vw,700px)}
.jhero-bg{background-position:center 22%}
.jhero-vid{object-position:center 22%}
@media(max-width:760px){.jhero-bg{background-position:center 30%}}

/* featured: image fades smoothly into the text side */
.jfeat-pic::after{background:linear-gradient(90deg,rgba(9,15,40,0) 45%,rgba(9,15,40,.55) 75%,#0b1434 100%)}
.jfeat-txt{background:linear-gradient(180deg,#0e1838,#0a1230)}
@media(min-width:821px){.jfeat-txt{margin-left:-2px}}
/* read entry: full angled border */
.jread{position:relative;border:0;clip-path:none;background:none;isolation:isolate;padding:13px 44px}
.jread::before,.jread::after{content:"";position:absolute;z-index:-1;clip-path:polygon(16px 0,calc(100% - 16px) 0,100% 50%,calc(100% - 16px) 100%,16px 100%,0 50%)}
.jread::before{inset:0;background:linear-gradient(180deg,#ffe2a6,#b8862e)}
.jread::after{inset:1.5px;background:linear-gradient(180deg,#1a1408,#0c0a06)}
.jread{filter:drop-shadow(0 0 10px rgba(255,190,100,.35))}
.jread:hover{filter:drop-shadow(0 0 16px rgba(255,190,100,.65));background:none}