/* Toy City Lagos. Quiet pages on Cloud White, large type, wide margins, one yellow highlight. The city supplies the colour. */
:root{
  --cloud:#FAF8F3;--ink:#15161A;--yellow:#FFC81E;--blue:#2F9BE8;--teal:#22B59A;--red:#E0452F;--navy:#0B1230;
  --mid:#6B6D76;--dim:#9698A2;--line:#E4E1D8;--panel:#FFFFFF;--panel-dark:#26282F;
  --display:'Sora',system-ui,-apple-system,'Segoe UI',sans-serif;--body:'DM Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --soft:#86868B;--tile:#F1EEE6;--gutter:clamp(20px,5vw,56px);--max:1120px;--wide:1480px;--radius:32px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--cloud);color:var(--ink);font-family:var(--body);font-size:18px;line-height:1.55;-webkit-font-smoothing:antialiased}
img,video{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:var(--cloud);padding:10px 16px;z-index:100}
.skip:focus{left:12px;top:12px}

/* type */
h1,h2,h3,h4{font-family:var(--display);font-weight:600;margin:0;text-wrap:balance}
h1{font-size:clamp(46px,8.6vw,124px);letter-spacing:-.045em;line-height:1.04}
h2{font-size:clamp(34px,5.6vw,76px);letter-spacing:-.035em;line-height:1.08}
h3{font-size:clamp(21px,2.2vw,26px);letter-spacing:-.015em;line-height:1.2}
p{margin:0;max-width:60ch}
.eyebrow{font-size:13px;letter-spacing:.1em;text-transform:uppercase;font-weight:500;color:var(--mid)}
.lead{font-size:clamp(20px,2.1vw,26px);color:var(--mid);line-height:1.4;letter-spacing:-.01em}
:is(h1,h2):has(.hl){color:var(--soft)}
.hl{color:var(--ink)}
.dark :is(h1,h2):has(.hl){color:#6E7079}
.dark .hl{color:var(--cloud)}
.yellow :is(h1,h2):has(.hl){color:rgba(21,22,26,.5)}
.muted{color:var(--mid)}
.small{font-size:15px}

/* nav */
.nav{position:sticky;top:0;z-index:50;background:rgba(250,248,243,.82);backdrop-filter:saturate(160%) blur(18px);-webkit-backdrop-filter:saturate(160%) blur(18px);border-bottom:1px solid rgba(21,22,26,.06)}
.nav-in{max-width:var(--wide);margin:0 auto;padding:6px var(--gutter);display:flex;align-items:center;gap:24px;min-height:52px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--display);font-weight:600;font-size:17px;letter-spacing:-.02em;white-space:nowrap}
#menu{margin-left:auto;display:flex;align-items:center;gap:clamp(14px,2.2vw,30px);font-size:14px;letter-spacing:-.005em}
#menu a{text-decoration:none;color:var(--mid);padding:6px 0;white-space:nowrap}
#menu a:hover,#menu a[aria-current=page]{color:var(--ink)}
#menu .pill{background:var(--ink);color:var(--cloud);padding:6px 14px;border-radius:99px;font-size:13px}
#menu .pill:hover{color:var(--yellow)}
.burger{display:none;margin-left:auto;background:none;border:0;width:44px;height:44px;cursor:pointer;position:relative}
.burger i{position:absolute;left:11px;right:11px;height:2px;background:var(--ink);border-radius:2px;transition:transform .25s}
.burger i:first-child{top:18px}.burger i:last-child{top:25px}
.burger[aria-expanded=true] i:first-child{transform:translateY(3.5px) rotate(45deg)}
.burger[aria-expanded=true] i:last-child{transform:translateY(-3.5px) rotate(-45deg)}
@media(max-width:980px){
  .burger{display:block}
  #menu{display:none;position:absolute;left:0;right:0;top:100%;background:var(--cloud);flex-direction:column;align-items:flex-start;gap:0;padding:8px var(--gutter) 24px;border-bottom:1px solid var(--line)}
  #menu.open{display:flex}
  #menu a{font-family:var(--display);font-size:24px;letter-spacing:-.02em;color:var(--ink);padding:12px 0;width:100%;border-bottom:1px solid var(--line)}
  #menu .pill{width:auto;margin-top:16px;font-size:16px;font-family:var(--body);border:0;padding:12px 22px}
}

/* layout */
.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--gutter)}
section{padding-block:clamp(72px,11vw,168px)}
section.tight{padding-block:clamp(40px,6vw,80px)}
.stack{display:flex;flex-direction:column;gap:clamp(20px,3vw,32px)}
.stack-lg{display:flex;flex-direction:column;gap:clamp(36px,6vw,72px)}
.center{text-align:center;align-items:center}
.center p{margin-inline:auto}
.dark{background:var(--ink);color:var(--cloud)}
.dark .lead,.dark .muted,.dark .eyebrow{color:var(--dim)}
.yellow{background:var(--yellow)}
.yellow .lead,.yellow .eyebrow{color:var(--ink)}
.grid{display:grid;gap:clamp(16px,2.4vw,28px)}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:900px){.g3,.g4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.g2,.g3,.g4{grid-template-columns:1fr}}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(28px,5vw,72px);align-items:center}
.split.rev>:first-child{order:2}
@media(max-width:860px){.split{grid-template-columns:1fr}.split.rev>:first-child{order:0}}

/* media */
.shot{border-radius:var(--radius);overflow:hidden;background:var(--line);aspect-ratio:16/9}
.shot img,.shot video{width:100%;height:100%;object-fit:cover}
.shot.tall{aspect-ratio:4/5}
.shot.square{aspect-ratio:1}
.figure{display:flex;flex-direction:column;gap:14px}
.figure figcaption,.cap{font-size:15px;color:var(--mid)}
.dark .cap{color:var(--dim)}
figure{margin:0}

/* hero */
.hero{padding-block:clamp(56px,8vw,112px) clamp(20px,3vw,40px)}
.hero .stack{text-align:center;align-items:center}
.hero .lead{max-width:36ch}
.wide{max-width:var(--wide);margin:0 auto;padding-inline:clamp(12px,2.2vw,32px)}
.hero-media{margin-top:clamp(40px,6vw,80px);border-radius:clamp(24px,3vw,44px);overflow:hidden;aspect-ratio:16/9;background:var(--ink);position:relative}
.hero-media img,.hero-media video{width:100%;height:100%;object-fit:cover}
.play{position:absolute;left:24px;bottom:24px;display:flex;align-items:center;gap:12px;background:rgba(21,22,26,.72);color:var(--cloud);border:0;border-radius:99px;padding:12px 20px 12px 14px;font:inherit;font-size:16px;cursor:pointer;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.play svg{width:28px;height:28px}
.page-hero{padding-block:clamp(56px,9vw,120px) clamp(32px,5vw,64px)}
.page-hero h1{font-size:clamp(42px,7.4vw,104px);max-width:16ch}

/* buttons */
.btns{display:flex;gap:14px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--display);font-weight:600;font-size:16px;letter-spacing:-.01em;text-decoration:none;border:0;border-radius:99px;padding:14px 26px;background:var(--ink);color:var(--cloud);cursor:pointer;transition:transform .15s ease}
.btn:hover{transform:translateY(-1px)}
.btn.alt{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.dark .btn{background:var(--yellow);color:var(--ink)}
.dark .btn.alt{background:transparent;color:var(--cloud);box-shadow:inset 0 0 0 1.5px var(--cloud)}
.btn[disabled]{opacity:.4;cursor:not-allowed;transform:none}
.link{font-weight:500;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:1px}
.more{font-size:clamp(18px,1.6vw,21px);font-weight:500;text-decoration:none;color:var(--ink);white-space:nowrap}
.more::after{content:"\00a0\203A";display:inline-block;transition:transform .2s ease}
.more:hover::after{transform:translateX(4px)}
.dark .more,.tile.on-img .more{color:var(--cloud)}
.links{display:flex;gap:28px;flex-wrap:wrap;justify-content:inherit}
.center .links,.hero .links{justify-content:center}

/* blocks */
.rule{border-top:1px solid var(--ink);padding-top:22px;display:flex;flex-direction:column;gap:10px}
.dark .rule{border-color:var(--panel-dark)}
.rule p{color:var(--mid);font-size:17px}
.dark .rule p{color:var(--dim)}
.card{background:var(--panel);border-radius:var(--radius);padding:clamp(24px,3.5vw,44px);display:flex;flex-direction:column;gap:20px}
.dark .card{background:var(--panel-dark)}
.card.ink{background:var(--ink);color:var(--cloud)}
.card.ink .muted{color:var(--dim)}
.num{font-family:var(--display);font-weight:600;font-size:clamp(56px,9vw,120px);letter-spacing:-.045em;line-height:1;font-variant-numeric:tabular-nums}
.price{font-family:var(--display);font-weight:600;font-size:clamp(40px,5vw,68px);letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.ngn{font-family:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',sans-serif;font-weight:600;font-size:.82em;letter-spacing:0;margin-right:.04em}
.chip{display:inline-block;font-size:12px;letter-spacing:.07em;text-transform:uppercase;font-weight:500;border-radius:99px;padding:4px 11px;background:var(--cloud);box-shadow:inset 0 0 0 1px var(--line);white-space:nowrap}
.chip.on{background:var(--yellow);box-shadow:none}
.chip.dark-chip{background:var(--panel-dark);color:var(--cloud);box-shadow:none}
.rows{display:flex;flex-direction:column}
.row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 24px;padding:20px 0;border-top:1px solid var(--line);align-items:start}
.row .q{font-family:var(--display);font-weight:600;font-size:clamp(19px,2vw,23px);letter-spacing:-.015em;line-height:1.25}
.row .r{text-align:right;font-size:15px;display:flex;flex-direction:column;gap:6px;align-items:flex-end}
@media(max-width:640px){.row{grid-template-columns:1fr}.row .r{align-items:flex-start;text-align:left}}
.levels{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;align-items:end}
.level{display:flex;flex-direction:column;gap:12px}
.level .bar{border-radius:18px;background:var(--panel-dark)}
.level:nth-child(1) .bar{height:60px}.level:nth-child(2) .bar{height:120px}.level:nth-child(3) .bar{height:180px}.level:nth-child(4) .bar{height:240px;background:var(--yellow)}
@media(max-width:860px){.levels{grid-template-columns:1fr;align-items:stretch}.level .bar{height:10px!important}}
.timeline{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;border-top:2px solid var(--ink);padding-top:0}
.phase{padding-top:28px;position:relative;display:flex;flex-direction:column;gap:10px}
.phase::before{content:"";position:absolute;top:-9px;left:0;width:16px;height:16px;border-radius:50%;background:var(--ink)}
.phase.now::before{background:var(--yellow);box-shadow:0 0 0 2px var(--ink)}
.phase ul{margin:0;padding-left:18px;color:var(--mid);font-size:17px;display:flex;flex-direction:column;gap:6px}
@media(max-width:860px){.timeline{grid-template-columns:1fr;border-top:0;border-left:2px solid var(--ink);padding-left:24px;gap:36px}.phase{padding-top:0}.phase::before{top:6px;left:-33px}}

/* forms */
form.form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
@media(max-width:640px){form.form{grid-template-columns:1fr}}
.f{display:flex;flex-direction:column;gap:7px;min-width:0}
.f.full{grid-column:1/-1}
label{font-size:15px;font-weight:500}
input[type=text],input[type=email],input[type=tel],select,textarea{font:inherit;font-size:17px;padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:var(--cloud);color:var(--ink);width:100%}
textarea{min-height:130px;resize:vertical}
input[type=file]{font:inherit;font-size:15px;max-width:100%}
.check{display:flex;gap:12px;align-items:flex-start;font-size:16px;font-weight:400}
.check input{margin-top:4px;width:20px;height:20px;flex:none;accent-color:var(--ink)}
.flash{max-width:var(--max);margin:16px auto 0;padding:14px 20px;border-radius:16px;background:var(--ink);color:var(--cloud);font-size:16px;width:calc(100% - 2*var(--gutter))}
.flash.err{background:var(--red)}
.msg{font-size:15px;color:var(--mid)}
.msg.err{color:var(--red)}
audio{width:100%;max-width:380px}
details{border-top:1px solid var(--line);padding-top:18px}
summary{cursor:pointer;font-weight:500}
details ol{color:var(--mid);font-size:16px;padding-left:22px;display:flex;flex-direction:column;gap:10px;max-width:72ch}

/* points */
.reward{display:flex;flex-direction:column;gap:8px;padding:16px 0;border-top:1px solid var(--line)}
.reward .top{display:flex;justify-content:space-between;gap:16px;font-size:17px}
.meter{height:8px;border-radius:99px;background:var(--line);overflow:hidden}
.meter i{display:block;height:100%;background:var(--yellow);border-radius:99px}
.reward.got .meter i{background:var(--teal)}

/* tables (casting desk) */
.scroll{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:15px}
th,td{text-align:left;padding:12px 10px;border-top:1px solid var(--line);vertical-align:top}
th{font-weight:500;color:var(--mid);font-size:13px;letter-spacing:.06em;text-transform:uppercase;border-top:0}
.btn.sm{padding:9px 14px;font-size:13px}

/* footer */
.foot{background:var(--ink);color:var(--cloud);padding:clamp(48px,7vw,88px) var(--gutter) 32px}
.foot-in{max-width:var(--max);margin:0 auto;display:flex;justify-content:space-between;gap:48px;flex-wrap:wrap}
.foot-brand{display:flex;gap:16px;align-items:center}
.foot-brand div{display:flex;flex-direction:column}
.foot-brand strong{font-family:var(--display);font-weight:600;font-size:22px;letter-spacing:-.02em}
.foot-brand span{color:var(--dim);font-size:15px}
.foot-cols{display:flex;gap:clamp(32px,6vw,88px);flex-wrap:wrap}
.foot-cols div{display:flex;flex-direction:column;gap:10px;font-size:16px}
.foot-cols h4{font-family:var(--body);font-weight:500;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.foot-cols a{text-decoration:none;color:var(--cloud)}
.foot-cols a:hover{color:var(--yellow)}
.foot-cols span{color:var(--dim)}
.fine{max-width:var(--max);margin:48px auto 0;color:var(--dim);font-size:14px}

/* gentle entrance, only when motion is welcome and scripts run */
@media(prefers-reduced-motion:no-preference){
  .js .rise{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
  .js .rise.in{opacity:1;transform:none}
}

/* tiles: large rounded panels, Apple-style */
.bento{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(12px,1.6vw,20px)}
.tile{position:relative;border-radius:var(--radius);overflow:hidden;background:var(--tile);display:flex;flex-direction:column;min-height:clamp(320px,38vw,560px);color:var(--ink);text-decoration:none;isolation:isolate}
.tile>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.tile:hover>img{transform:scale(1.03)}
.tile.on-img{color:var(--cloud)}
.tile.on-img::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(11,12,16,.62) 0%,rgba(11,12,16,.18) 38%,rgba(11,12,16,0) 60%)}
.tile.low::before{background:linear-gradient(0deg,rgba(11,12,16,.7) 0%,rgba(11,12,16,.2) 40%,rgba(11,12,16,0) 62%)}
.tile.low{justify-content:flex-end}
.tile-text{padding:clamp(22px,3vw,44px);display:flex;flex-direction:column;gap:10px}
.tile-text h3{font-size:clamp(24px,3vw,44px);letter-spacing:-.03em;line-height:1.05}
.tile-text p{font-size:clamp(16px,1.4vw,19px);opacity:.86;max-width:34ch}
.tile-text .eyebrow{color:inherit;opacity:.72}
.tile.pad-img>img{position:static;z-index:0;margin-top:auto;aspect-ratio:16/10;height:auto}
.s6{grid-column:span 6}.s4{grid-column:span 4}.s3{grid-column:span 3}.s2{grid-column:span 2}
.tile.is-yellow{background:var(--yellow)}
.tile.is-ink{background:var(--ink);color:var(--cloud)}
.tile.short{min-height:clamp(260px,26vw,380px)}
@media(max-width:900px){.s4,.s2{grid-column:span 3}}
@media(max-width:640px){.bento{grid-template-columns:1fr}.s6,.s4,.s3,.s2{grid-column:auto}.tile{min-height:340px}}
.cine{position:relative;border-radius:clamp(24px,3vw,44px);overflow:hidden;aspect-ratio:16/9;isolation:isolate;display:flex;align-items:flex-start;justify-content:center;text-align:center;color:var(--cloud)}
.cine>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.cine::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(6,9,26,.78) 0%,rgba(6,9,26,.25) 42%,rgba(6,9,26,0) 60%)}
.cine .stack{padding:clamp(28px,6vw,88px) 24px;align-items:center}
@media(max-width:640px){.cine{aspect-ratio:4/5}}
.statement{font-family:var(--display);font-weight:600;font-size:clamp(28px,4.2vw,56px);letter-spacing:-.03em;line-height:1.1;color:var(--soft);max-width:22ch;text-wrap:balance}
.statement b{color:var(--ink);font-weight:600}
.dark .statement b{color:var(--cloud)}
.crafts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 clamp(20px,3vw,48px)}
.crafts div{border-top:1px solid var(--line);padding:18px 0;font-family:var(--display);font-weight:600;font-size:clamp(18px,1.8vw,24px);letter-spacing:-.02em}
@media(max-width:640px){.crafts{grid-template-columns:repeat(2,minmax(0,1fr))}}
.tiers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,1.6vw,20px)}
.tiers .card{min-height:clamp(240px,24vw,340px);justify-content:flex-start;background:var(--tile)}
.tiers .card .price{margin-top:clamp(28px,4vw,56px)}
.tiers .card.ink{background:var(--ink)}
.tiers .card p{font-size:clamp(17px,1.5vw,20px);margin-top:auto;padding-top:24px}
@media(max-width:640px){.tiers{grid-template-columns:1fr}}

/* forms, refined */
form.form{gap:22px 16px}
.f{gap:9px}
.f:has(>.btn){margin-top:10px}
label{font-size:14px;font-weight:500;letter-spacing:.005em}
input[type=text],input[type=email],input[type=tel],input[type=password],select,textarea{appearance:none;-webkit-appearance:none;min-height:56px;padding:15px 18px;border:1px solid transparent;border-radius:16px;background-color:var(--tile);transition:box-shadow .2s ease,background .2s ease}
.card input[type=text],.card input[type=email],.card input[type=tel],.card input[type=password],.card select,.card textarea{background-color:var(--cloud)}
.dark .card input,.dark .card select,.dark .card textarea{background-color:rgba(255,255,255,.07);color:var(--cloud)}
.dark .card label{color:var(--dim)}
input:hover,select:hover,textarea:hover{box-shadow:inset 0 0 0 1px var(--line)}
.dark .card input:hover,.dark .card select:hover{box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
input[type=text]:focus,input[type=email]:focus,input[type=tel]:focus,input[type=password]:focus,select:focus,textarea:focus{outline:none;box-shadow:inset 0 0 0 2px var(--ink)}
.dark .card input:focus,.dark .card select:focus,.dark .card textarea:focus{box-shadow:inset 0 0 0 2px var(--yellow)}
select{padding-right:46px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' fill='none' stroke='%239698A2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 18px center}
select option{color:#15161A}
textarea{min-height:150px;line-height:1.5}
.f .btn{min-height:56px;width:100%}
/* sign in */
.auth{min-height:calc(100vh - 60px);display:grid;place-items:center;padding-block:clamp(48px,8vw,96px)}
.auth-in{width:100%;max-width:440px;margin:0 auto;padding-inline:var(--gutter);display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px}
.auth-in h1{font-size:clamp(32px,4.4vw,44px);letter-spacing:-.03em;line-height:1.08;margin-top:14px}
.auth-in .lead{font-size:18px;max-width:32ch}
.auth-in form.form{width:100%;grid-template-columns:1fr;text-align:left;margin-top:18px;gap:14px}
.auth-in .f:has(>.btn){margin-top:2px}
.auth-in .fineprint{font-size:14px;color:var(--soft);margin-top:10px}
.auth-in .card{width:100%;text-align:left;margin-top:12px}

/* ---------- home: the city as a film ---------- */
.home .nav{position:fixed;left:0;right:0;transition:background .35s ease,border-color .35s ease}
.home:not(.past) .nav:not(:has(#menu.open)){background:transparent;border-color:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
.home:not(.past) .nav:not(:has(#menu.open)) .logo,.home:not(.past) .nav:not(:has(#menu.open)) #menu a:not(.pill){color:#fff}
.home:not(.past) .nav:not(:has(#menu.open)) #menu a:not(.pill){opacity:.82}
.home:not(.past) .nav:not(:has(#menu.open)) #menu a:not(.pill):hover{opacity:1}
.home:not(.past) .nav:not(:has(#menu.open)) #menu .pill{background:#fff;color:var(--ink)}
.home:not(.past) .nav:not(:has(#menu.open)) .burger i{background:#fff}

.scene{--p:0;padding:0;position:relative;height:100vh;height:100svh;background:#06091A;color:#fff}
.js .scene{height:340vh}
.scene-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;isolation:isolate}
.scene-pin>img,.scene-pin>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-3;transform:scale(calc(1.08 - .08*var(--p)));transform-origin:50% 62%;will-change:transform}
.scene-night{opacity:clamp(0,calc((var(--p) - .38)*3.4),1);z-index:-2!important}
.scene-pin::before{content:"";position:absolute;inset:0;z-index:-1;opacity:clamp(0,calc(1 - var(--p)*3),1);background:linear-gradient(90deg,rgba(6,9,26,.82) 0%,rgba(6,9,26,.62) 32%,rgba(6,9,26,.18) 62%,rgba(6,9,26,0) 80%),linear-gradient(180deg,rgba(6,9,26,.55) 0%,rgba(6,9,26,0) 22%,rgba(6,9,26,0) 55%,rgba(6,9,26,.6) 100%)}
.scene-pin::after{content:"";position:absolute;inset:0;z-index:-1;opacity:clamp(0,calc((var(--p) - .5)*4),1);background:radial-gradient(ellipse 70% 55% at 50% 50%,rgba(4,6,20,.86) 0%,rgba(4,6,20,.7) 45%,rgba(4,6,20,.38) 100%)}
.scene-day{filter:contrast(1.1) saturate(1.15)}
.scene-night{filter:contrast(1.08) saturate(1.1)}
.scene-cap{position:absolute;left:0;right:0;padding-inline:var(--gutter);display:flex;flex-direction:column;gap:clamp(14px,2vw,22px)}
.scene-cap .lead{color:#fff;max-width:36ch;text-shadow:0 1px 24px rgba(6,9,26,.6)}
.scene-cap .eyebrow{color:rgba(255,255,255,.8)}
.scene-a{bottom:clamp(64px,11vh,120px);max-width:var(--wide);margin-inline:auto;opacity:clamp(0,calc(1 - var(--p)*4.5),1);transform:translateY(calc(var(--p)*-90px))}
.scene-a h1{font-size:clamp(52px,10.4vw,168px);letter-spacing:-.045em;line-height:1.02;color:#fff;text-shadow:0 4px 60px rgba(6,9,26,.45)}
.scene-a .more{color:#fff;background:none;border:0;padding:0;font-family:inherit;cursor:pointer}
.scene-a .links{margin-top:6px}
.scene-b{top:50%;align-items:center;text-align:center;opacity:clamp(0,calc((var(--p) - .66)*5),1);transform:translateY(calc(-50% + (1 - var(--p))*60px));pointer-events:none}
.scene-b h2{font-size:clamp(40px,8vw,128px);letter-spacing:-.045em;line-height:1.02;color:#fff;text-shadow:0 2px 40px rgba(6,9,26,.5)}
.scene-b .lead{text-shadow:0 1px 20px rgba(6,9,26,.7)}
.scene-hint{position:absolute;right:var(--gutter);bottom:clamp(64px,11vh,120px);display:flex;flex-direction:column;align-items:center;gap:12px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.8);opacity:clamp(0,calc(1 - var(--p)*8),1)}
.scene-hint i{width:1px;height:56px;background:linear-gradient(#fff,transparent);display:block}
@media(max-width:700px){.scene-hint{display:none}}
html:not(.js) .scene-b,html:not(.js) .scene-night{display:none}
@media(prefers-reduced-motion:no-preference){.js .scene-hint i{animation:hint 2s ease-in-out infinite}}
@keyframes hint{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

.film{border:0;padding:0;background:#000;width:min(96vw,1400px);border-radius:20px;overflow:hidden}
.film::backdrop{background:rgba(6,9,26,.86);backdrop-filter:blur(8px)}
.film video{width:100%;display:block;aspect-ratio:16/9}
.film-x{position:absolute;top:12px;right:12px;background:rgba(21,22,26,.7);color:#fff;border:0;border-radius:99px;padding:8px 14px;font:inherit;font-size:14px;cursor:pointer}

.says{padding-block:clamp(96px,16vw,220px)}
.says-text{font-family:var(--display);font-weight:600;font-size:clamp(30px,5.4vw,84px);letter-spacing:-.035em;line-height:1.06;max-width:20ch;margin:0}
.says-text .w{opacity:.14;transition:opacity .25s linear}
.says-text .w.on{opacity:1}

.ticker{background:var(--yellow);overflow:hidden;padding:18px 0;white-space:nowrap}
.ticker-in{display:inline-flex;gap:0;font-family:var(--display);font-weight:600;font-size:clamp(20px,2.6vw,34px);letter-spacing:-.02em;text-transform:uppercase}
.ticker-in span{display:inline-flex;align-items:center}
.ticker-in span::after{content:"";width:.34em;height:.34em;border-radius:50%;background:var(--ink);margin:0 .9em}
@media(prefers-reduced-motion:no-preference){.ticker-in{animation:tick 38s linear infinite}}
@keyframes tick{to{transform:translateX(-50%)}}

.places{padding-block:clamp(72px,11vw,160px)}
.places-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:clamp(28px,4vw,56px)}
.rail-nav{display:flex;gap:10px;flex:none}
.rail-nav button{width:52px;height:52px;border-radius:50%;border:0;background:var(--tile);color:var(--ink);font-size:26px;line-height:1;cursor:pointer;transition:background .2s,transform .2s;padding-bottom:4px}
.rail-nav button:hover{background:var(--ink);color:var(--cloud)}
.rail-nav button:disabled{opacity:.3;cursor:default;background:var(--tile);color:var(--ink)}
.rail{display:flex;gap:clamp(12px,1.6vw,24px);overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:max(var(--gutter),calc((100vw - var(--max))/2 + var(--gutter)));padding-inline:max(var(--gutter),calc((100vw - var(--max))/2 + var(--gutter)));scrollbar-width:none;-webkit-overflow-scrolling:touch;outline-offset:-3px}
.rail::-webkit-scrollbar{display:none}
.place{flex:none;width:min(82vw,980px);aspect-ratio:16/10;border-radius:clamp(22px,2.6vw,40px);overflow:hidden;position:relative;scroll-snap-align:start;isolation:isolate;color:#fff;background:var(--ink)}
.place img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform 1.4s cubic-bezier(.2,.7,.2,1)}
.place:hover img{transform:scale(1.04)}
.place::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(6,9,26,0) 45%,rgba(6,9,26,.72) 100%)}
.place figcaption{position:absolute;left:0;right:0;bottom:0;padding:clamp(20px,3vw,44px);display:flex;align-items:flex-end;gap:clamp(14px,2vw,28px)}
.place-n{font-family:var(--display);font-weight:600;font-size:clamp(15px,1.4vw,18px);letter-spacing:.02em;opacity:.8;padding-bottom:.5em;font-variant-numeric:tabular-nums}
.place h3{font-size:clamp(28px,4.6vw,68px);letter-spacing:-.035em;line-height:1}
.place .eyebrow{color:rgba(255,255,255,.8);display:block;margin-bottom:8px}
@media(max-width:640px){.place{aspect-ratio:4/5}.rail-nav{display:none}}

.clock{padding-block:clamp(72px,11vw,160px)}
.compare{position:relative;border-radius:clamp(22px,2.6vw,40px);overflow:hidden;aspect-ratio:16/9;background:#06091A;touch-action:pan-y;user-select:none}
.compare img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.compare-top{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--x)) 0 0)}
.compare-bar{position:absolute;top:0;bottom:0;left:var(--x);width:2px;margin-left:-1px;background:#fff;box-shadow:0 0 24px rgba(0,0,0,.4)}
.compare-bar i{position:absolute;top:50%;left:50%;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;background:#fff;box-shadow:0 6px 24px rgba(0,0,0,.35);display:block}
.compare-bar i::before,.compare-bar i::after{content:"";position:absolute;top:50%;width:9px;height:9px;border:solid var(--ink);border-width:0 0 2px 2px;margin-top:-5px}
.compare-bar i::before{left:15px;transform:rotate(45deg)}
.compare-bar i::after{right:15px;transform:rotate(-135deg)}
.compare input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.compare:has(input:focus-visible){outline:3px solid var(--blue);outline-offset:4px}
.compare-tag{position:absolute;top:clamp(14px,2vw,28px);font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:500;color:#fff;background:rgba(6,9,26,.45);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);padding:7px 13px;border-radius:99px}
.compare-tag.l{left:clamp(14px,2vw,28px)}.compare-tag.r{right:clamp(14px,2vw,28px)}
@media(max-width:640px){.compare{aspect-ratio:4/5}}

.people{padding-block:clamp(88px,13vw,200px);overflow:hidden}
.people-grid{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:clamp(32px,6vw,96px);align-items:center;max-width:var(--wide)}
.people-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,1.4vw,20px)}
.person{--p:.5;border-radius:clamp(18px,2vw,32px);overflow:hidden;aspect-ratio:4/5;background:var(--tile);transform:translateY(calc((var(--p) - .5)*var(--par,0)*2px));will-change:transform}
.person:nth-child(2){margin-top:22%}
.person img{width:100%;height:100%;object-fit:cover}
@media(max-width:900px){.people-grid{grid-template-columns:1fr}}

.voice{padding-block:clamp(88px,13vw,200px)}
.voice .wrap{max-width:var(--wide)}
.voice-line{margin:0;font-family:var(--display);font-weight:600;font-size:clamp(44px,9.6vw,168px);letter-spacing:-.045em;line-height:1.02;text-wrap:balance;max-width:13ch;text-indent:-.42em;padding-left:.42em}
.voice-meta{font-size:clamp(15px,1.3vw,18px);letter-spacing:.02em;color:rgba(21,22,26,.7)}
.voice-foot{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap;margin-top:clamp(28px,5vw,72px);border-top:1.5px solid rgba(21,22,26,.2);padding-top:clamp(24px,3vw,40px)}
.voice-foot .lead{max-width:44ch}

a.cine{text-decoration:none}
.cine.low{align-items:flex-end;justify-content:flex-start;text-align:left}
.cine.low::before{background:linear-gradient(0deg,rgba(6,9,26,.82) 0%,rgba(6,9,26,.3) 46%,rgba(6,9,26,0) 68%)}
.cine.low .stack{align-items:flex-start;padding:clamp(24px,4vw,64px);gap:clamp(10px,1.4vw,18px)}
.cine.low .eyebrow,.cine.low .lead{color:rgba(255,255,255,.84)}
.cine.low .more{color:#fff}
.cine.low>img{transition:transform 1.4s cubic-bezier(.2,.7,.2,1)}
.cine.low:hover>img{transform:scale(1.03)}
@media(max-width:640px){.cine.low{aspect-ratio:4/5}}

.brandline{padding-block:clamp(72px,11vw,160px) 0}
.brandline .shot{border-radius:clamp(22px,2.6vw,40px);display:block}
.brandline .shot img{transition:transform 1.4s cubic-bezier(.2,.7,.2,1)}
.brandline .shot:hover img{transform:scale(1.03)}
.scene-a .links{gap:10px 28px}

@media(max-width:700px){.scene-pin::before{background:linear-gradient(180deg,rgba(6,9,26,.55) 0%,rgba(6,9,26,.1) 22%,rgba(6,9,26,.45) 48%,rgba(6,9,26,.88) 100%)}}

@media(max-width:900px){.crafts{grid-template-columns:repeat(2,minmax(0,1fr))}}

input[type=password]{font:inherit;font-size:17px;color:var(--ink);width:100%}
.pw{position:relative}
.pw input{padding-right:76px}
.pw-eye{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:0;font:inherit;font-size:14px;font-weight:500;color:var(--mid);padding:10px 12px;cursor:pointer;border-radius:10px}
.pw-eye:hover{color:var(--ink)}
.auth-in .fineprint a{color:var(--ink);font-weight:500;text-decoration:none;border-bottom:1px solid var(--line)}
.auth-in .fineprint a:hover{border-color:var(--ink)}
.auth-in .fineprint+.fineprint{margin-top:0}
.auth-in h1{text-wrap:balance}

/* ---------- residents, alerts, sound ---------- */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.residents{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.6vw,24px);align-items:start}
.resident{--p:.5;background:var(--tile);border-radius:clamp(22px,2.6vw,40px);overflow:hidden;display:flex;flex-direction:column;transform:translateY(calc((var(--p) - .5)*var(--par,0)*2px))}
.js .resident.rise:not(.in){transform:translateY(22px)}
.resident-img{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--line)}
.resident-img img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s cubic-bezier(.2,.7,.2,1)}
.resident:hover .resident-img img{transform:scale(1.04)}
.resident-img .chip{position:absolute;left:clamp(14px,1.6vw,24px);top:clamp(14px,1.6vw,24px)}
.resident-text{padding:clamp(20px,2.4vw,36px);display:flex;flex-direction:column;gap:10px}
.resident-text h3{font-size:clamp(26px,3vw,44px);letter-spacing:-.03em;line-height:1.05}
.resident-line{font-family:var(--display);font-weight:600;font-size:clamp(17px,1.6vw,22px);letter-spacing:-.015em;line-height:1.3;color:var(--mid);margin-top:4px}
.resident .more{margin-top:6px;font-size:17px}
@media(max-width:860px){.residents{grid-template-columns:1fr;max-width:520px}.resident{transform:none}}

.alerts{padding-block:clamp(72px,10vw,140px)}
.alerts-in{display:flex;flex-direction:column;align-items:center;text-align:center;gap:clamp(24px,3vw,40px)}
.alerts-in .stack{align-items:center}
.alerts-form{width:100%;max-width:540px;justify-content:center}
.alerts-form{display:flex;gap:10px;flex-wrap:wrap;position:relative}
.alerts-form input[type=email]{flex:1 1 220px;background-color:rgba(255,255,255,.08);color:var(--cloud);border-radius:99px;padding-inline:24px}
.alerts-form input[type=email]::placeholder{color:var(--dim)}
.alerts-form input[type=email]:focus{box-shadow:inset 0 0 0 2px var(--yellow)}
.alerts-form .btn{min-height:56px;padding-inline:30px}
.alerts-form .msg{flex-basis:100%}
.alerts-done{font-family:var(--display);font-weight:600;font-size:clamp(20px,2.2vw,28px);letter-spacing:-.02em;color:var(--yellow)}
.alerts+.foot{border-top:1px solid rgba(255,255,255,.08)}

.sound{display:inline-flex;align-items:center;gap:9px;background:none;border:0;font:inherit;font-size:15px;color:var(--mid);cursor:pointer;padding:6px 0;white-space:nowrap}
.sound:hover,.sound[aria-pressed=true]{color:var(--ink)}
.sound-bars{display:inline-flex;align-items:flex-end;gap:2px;height:14px}
.sound-bars i{width:3px;height:4px;background:currentColor;border-radius:2px;display:block}
.sound[aria-pressed=true] .sound-bars i{height:14px}
@media(prefers-reduced-motion:no-preference){
  .sound[aria-pressed=true] .sound-bars i{animation:bars .9s ease-in-out infinite alternate}
  .sound[aria-pressed=true] .sound-bars i:nth-child(2){animation-delay:-.3s}
  .sound[aria-pressed=true] .sound-bars i:nth-child(3){animation-delay:-.6s}
}
@keyframes bars{from{height:4px}to{height:14px}}
.home:not(.past) .nav:not(:has(#menu.open)) .sound{color:rgba(255,255,255,.82)}
@media(max-width:980px){#menu .sound{font-size:18px;color:var(--ink);padding:16px 0 4px}}

/* residents: drifting portraits with a name plate */
.person{position:relative;margin:0;color:#fff;isolation:isolate}
.person::after{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(180deg,rgba(6,9,26,0) 48%,rgba(6,9,26,.82) 100%);pointer-events:none}
.person figcaption{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:clamp(12px,1.5vw,22px);display:flex;flex-direction:column;gap:3px}
.person figcaption strong{font-family:var(--display);font-weight:600;font-size:clamp(17px,1.7vw,26px);letter-spacing:-.025em;line-height:1.1}
.person figcaption span{font-size:clamp(12px,.95vw,14px);line-height:1.3;color:rgba(255,255,255,.82)}
.person figcaption q{font-size:clamp(12px,1vw,15px);line-height:1.35;font-weight:500;margin-top:5px;quotes:"“" "”"}
.person .chip{position:absolute;z-index:1;left:clamp(10px,1.2vw,18px);top:clamp(10px,1.2vw,18px);text-decoration:none;color:var(--ink)}
@media(max-width:640px){.person figcaption span,.person figcaption q{display:none}.person .chip{font-size:9px;padding:3px 7px}}

.person-w{--p:.5;transform:translateY(calc((var(--p) - .5)*var(--par,0)*2px));will-change:transform;display:flex;flex-direction:column;gap:14px;min-width:0}
.person-w:nth-child(2){margin-top:22%}
.person-w .person{transform:none;margin-top:0}
.person::after{background:linear-gradient(180deg,rgba(6,9,26,0) 68%,rgba(6,9,26,.7) 100%)}
.person-note{display:flex;flex-direction:column;gap:4px;font-size:clamp(13px,1vw,15px);line-height:1.4;color:var(--mid);padding-inline:4px;max-width:none}
.person-note q{color:var(--ink);font-weight:500;quotes:"“" "”"}
@media(max-width:640px){.person-note{font-size:12px}.person-note span{display:none}}

#menu .only-m{display:none}
@media(max-width:980px){#menu .only-m{display:block}}

.confirm-bar{display:flex;gap:10px 18px;flex-wrap:wrap;align-items:center;justify-content:center;background:var(--yellow);color:var(--ink);font-size:15px;padding:10px var(--gutter);text-align:center}
.confirm-bar button{background:none;border:0;font:inherit;font-weight:500;color:var(--ink);cursor:pointer;padding:0;border-bottom:1.5px solid var(--ink)}

.acct{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,1.6vw,24px);align-items:start}
.acct .card{background:var(--tile)}
.acct .card .reward:first-of-type{border-top:0}
.acct-points .num{margin-block:4px}
.acct-out form{margin-top:6px}
@media(max-width:820px){.acct{grid-template-columns:1fr}}

.reward-do{margin-top:8px;color:var(--mid)}
.reward-form{display:flex;gap:8px;margin-top:10px}
.reward-form input[type=text]{min-height:44px;padding:10px 14px;font-size:15px;border-radius:12px;flex:1;min-width:0}
.reward-form .btn{flex:none}
.vote{display:flex;flex-direction:column;gap:14px}
.vote .check{font-size:18px}
.wall{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:0 clamp(20px,3vw,48px)}
.wall li{border-top:1px solid var(--line);padding:16px 0;font-family:var(--display);font-weight:600;font-size:clamp(18px,1.8vw,24px);letter-spacing:-.02em}

.avatar{border-radius:50%;display:block;object-fit:cover;flex:none;overflow:hidden}
#menu .pill.has-av{display:inline-flex;align-items:center;gap:8px;padding-left:5px}
#menu .pill.has-av .avatar{width:24px;height:24px}
.acct-name{display:flex;align-items:center;gap:clamp(14px,2vw,28px);flex-wrap:wrap}
.acct-name .avatar{width:clamp(64px,8vw,104px);height:clamp(64px,8vw,104px)}
.profile{background:var(--tile);gap:clamp(20px,3vw,32px)}
.avatars{border:0;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:12px}
.avatars legend{font-size:14px;font-weight:500;margin-bottom:12px;padding:0}
.avatars label{cursor:pointer;position:relative;display:block;border-radius:50%}
.avatars input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.avatars .avatar{width:72px;height:72px;box-shadow:0 0 0 3px var(--tile),0 0 0 3px var(--tile);transition:box-shadow .15s ease,transform .15s ease}
.avatars label:hover .avatar{transform:scale(1.05)}
.avatars input:checked+.avatar{box-shadow:0 0 0 3px var(--tile),0 0 0 6px var(--ink)}
.avatars input:focus-visible+.avatar{box-shadow:0 0 0 3px var(--tile),0 0 0 6px var(--blue)}
@media(max-width:640px){.avatars .avatar{width:60px;height:60px}}

/* ---------- casting desk ---------- */
.desk-top{padding-block:clamp(48px,7vw,96px) clamp(20px,3vw,36px)}
.desk-top h1{font-size:clamp(40px,6vw,84px)}
.stats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(10px,1.2vw,18px)}
.stat{background:var(--tile);border-radius:clamp(18px,2vw,28px);padding:clamp(18px,2vw,28px);display:flex;flex-direction:column;gap:6px;text-decoration:none;color:var(--ink);transition:transform .2s ease}
a.stat:hover{transform:translateY(-2px)}
.stat b{font-family:var(--display);font-weight:600;font-size:clamp(34px,4vw,56px);letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.stat span{font-size:14px;color:var(--mid);line-height:1.3}
.stat.hot{background:var(--yellow)}
.stat.hot span{color:var(--ink)}
.desk-nav{position:sticky;top:57px;z-index:20;display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;background:rgba(250,248,243,.86);backdrop-filter:saturate(160%) blur(18px);-webkit-backdrop-filter:saturate(160%) blur(18px);padding:10px 0;margin-inline:calc(var(--gutter)*-1);padding-inline:var(--gutter)}
.desk-nav::-webkit-scrollbar{display:none}
.desk-nav a{flex:none;text-decoration:none;font-size:15px;font-weight:500;color:var(--mid);padding:9px 16px;border-radius:99px;transition:background .2s,color .2s}
.desk-nav a:hover{background:var(--tile);color:var(--ink)}
.desk-sec{padding-block:clamp(40px,5vw,72px);scroll-margin-top:110px}
.desk-h{display:flex;flex-direction:column;gap:8px}
.desk-h h2{font-size:clamp(28px,3.4vw,44px)}
.panel{background:var(--panel);border-radius:clamp(22px,2.4vw,32px);padding:clamp(22px,2.8vw,40px);display:flex;flex-direction:column;gap:clamp(16px,2vw,24px);box-shadow:0 1px 0 rgba(21,22,26,.04)}
.panel h3{font-size:clamp(20px,2vw,24px)}
.panel.empty{align-items:center;text-align:center;padding-block:clamp(40px,6vw,72px);background:var(--tile);gap:6px}
.call-h{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.call-h h3{font-size:clamp(20px,2.2vw,26px)}
.panel.line{gap:0;padding-block:clamp(22px,2.6vw,36px) clamp(8px,1vw,16px)}
.line-h{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;padding-bottom:clamp(18px,2vw,26px)}
.line-q{font-family:var(--display);font-weight:600;font-size:clamp(20px,2.4vw,30px);letter-spacing:-.025em;line-height:1.2;margin-top:10px;max-width:28ch}
.line-fee{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex:none;text-align:right}
.line-fee b{font-family:var(--display);font-weight:600;font-size:clamp(22px,2.4vw,30px);letter-spacing:-.03em;line-height:1}
.line-fee span{font-size:14px;color:var(--mid)}
.entry{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) auto;gap:16px clamp(16px,2.4vw,36px);align-items:center;padding:clamp(18px,2vw,24px) 0;border-top:1px solid var(--line)}
.entry.is-chosen{background:linear-gradient(90deg,rgba(255,200,30,.16),rgba(255,200,30,0) 70%);margin-inline:calc(clamp(22px,2.8vw,40px)*-1);padding-inline:clamp(22px,2.8vw,40px);box-shadow:inset 4px 0 0 var(--yellow)}
.entry-who{display:flex;align-items:center;gap:14px;min-width:0}
.entry-who>div{display:flex;flex-direction:column;gap:3px;min-width:0}
.entry-who strong{font-family:var(--display);font-weight:600;font-size:18px;letter-spacing:-.015em}
.entry-who span{font-size:14px;color:var(--mid);overflow-wrap:anywhere;line-height:1.4}
.entry-who a,.list-row a{color:inherit;text-decoration:none;border-bottom:1px solid var(--line)}
.entry-who a:hover,.list-row a:hover{color:var(--ink);border-color:var(--ink)}
.entry-audio{display:flex;flex-direction:column;gap:8px;min-width:0}
.entry-audio audio{width:100%;max-width:none;height:44px}
.entry-audio span{font-size:13px;color:var(--mid);overflow-wrap:anywhere}
.entry-act{display:flex;flex-direction:column;align-items:flex-end;gap:12px}
.entry-act form,.list-row form{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:flex-end}
.entry-note{font-size:13px;color:var(--mid)}
.textbtn{background:none;border:0;padding:0;font:inherit;font-size:14px;font-weight:500;color:var(--mid);cursor:pointer;border-bottom:1px solid var(--line)}
.textbtn:hover{color:var(--ink);border-color:var(--ink)}
.chip.ok{background:var(--teal);color:#fff;box-shadow:none}
.desk-2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(12px,1.6vw,24px);align-items:start}
form.form.one{grid-template-columns:1fr;gap:18px}
form.panel.form{display:flex}
.pair{display:grid;grid-template-columns:minmax(0,.5fr) minmax(0,1fr);gap:14px}
.panel input[type=text],.panel select,.panel textarea{background-color:var(--tile)}
.list{display:flex;flex-direction:column}
.list-row{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:18px 0;border-top:1px solid var(--line)}
.list-row:first-child{border-top:0;padding-top:0}
.list-row>div:first-child{display:flex;flex-direction:column;gap:4px;min-width:0}
.list-row.entry-who,.list-row>.entry-who{flex-direction:row}
.list-row strong{font-weight:500;font-size:17px;line-height:1.35}
.list-row span:not(.chip){font-size:14px;color:var(--mid);line-height:1.4}
.areas{display:flex;flex-direction:column;gap:12px;border-top:1px solid var(--line);padding-top:20px}
.areas>div{display:flex;flex-wrap:wrap;gap:8px}
.enqs{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:clamp(12px,1.6vw,24px)}
.enq{gap:12px}
.enq-h{display:flex;justify-content:space-between;align-items:center;font-size:14px}
.enq strong{font-family:var(--display);font-weight:600;font-size:19px;letter-spacing:-.015em}
.enq p{color:var(--mid);font-size:16px;max-width:none}
.enq .more{font-size:16px;margin-top:4px}
@media(max-width:1000px){.stats{grid-template-columns:repeat(3,minmax(0,1fr))}.entry{grid-template-columns:1fr}.entry-act{align-items:flex-start}.entry-act form{justify-content:flex-start}.desk-2{grid-template-columns:1fr}}
@media(max-width:560px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}.line-h{flex-direction:column}.line-fee{align-items:flex-start;text-align:left}.pair{grid-template-columns:1fr}}
.desk-top .stack-lg,.desk-sec .stack-lg{gap:clamp(20px,2.6vw,32px)}
.desk-top .stack{gap:14px}
.desk-sec .stack-lg>.stack{gap:14px;margin-top:8px}
@media(min-width:1001px){.entry{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) 260px}}
@media(max-width:560px){.stats>:last-child{grid-column:1/-1}}
.list-row>div.entry-who:first-child{flex-direction:row;align-items:center;gap:14px}
.panel>form:not(.form){align-self:flex-start}
.panel .reward:first-of-type{border-top:0;padding-top:0}

/* episode player (YouTube) */
.yt{position:relative;display:block;width:100%;height:100%;padding:0;border:0;background:var(--ink);cursor:pointer}
.yt img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1),opacity .3s}
.yt:hover img{transform:scale(1.03);opacity:.9}
.yt-play{position:absolute;left:50%;top:50%;width:clamp(64px,7vw,92px);aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);background:var(--yellow);box-shadow:0 12px 40px rgba(0,0,0,.35);transition:transform .25s ease}
.yt:hover .yt-play{transform:translate(-50%,-50%) scale(1.07)}
.yt-play::after{content:"";position:absolute;left:53%;top:50%;transform:translate(-50%,-50%);border-style:solid;border-width:.85em 0 .85em 1.4em;border-color:transparent transparent transparent var(--ink);font-size:clamp(13px,1.4vw,18px)}
.yt:focus-visible{outline:3px solid var(--yellow);outline-offset:4px}
.yt-frame{width:100%;height:100%;border:0;display:block;background:#000}

/* notifications: dismissable, and they clear themselves */
.flash[data-auto]{display:flex;align-items:center;justify-content:space-between;gap:16px;overflow:hidden;transition:opacity .45s ease,transform .45s ease,max-height .45s ease .1s,margin .45s ease .1s,padding .45s ease .1s;max-height:240px}
.flash.gone{opacity:0;transform:translateY(-6px);max-height:0;margin-top:0;padding-top:0;padding-bottom:0}
.flash-x{flex:none;width:32px;height:32px;border:0;border-radius:50%;background:rgba(255,255,255,.14);color:inherit;font-size:20px;line-height:1;cursor:pointer;display:grid;place-items:center}
.flash-x:hover{background:rgba(255,255,255,.26)}
@media(prefers-reduced-motion:reduce){.flash[data-auto]{transition:none}}