/* sessionLAND page: sessionLAND's room inside the Night Lunch frame.
   Values from brand/sessionland-page.html (approved 2026-10-09). */
body.sl{
  --black:#171714; --graphite:#22221f; --line:#3a3a35;
  --white:#F7F4EE; --dim:#aaa69c;
  --sage:#6F8B6B; --amber:#B88731; --terra:#A14F3E;
  --golden:#D49A3A;
  --app:'Hanken Grotesk','Helvetica Neue',Arial,sans-serif;
  background:var(--black);color:var(--paper);color-scheme:dark;
}
body.sl::after{opacity:.05;mix-blend-mode:screen}
body.sl .wrap{max-width:84rem}
body.sl .announce{background:var(--black);color:var(--paper);border-bottom:1px solid #2a2a26}
body.sl .hero{background-color:#1b1b18;min-height:clamp(600px,90vh,920px)}
body.sl .hero::before{background:linear-gradient(180deg,rgba(23,23,20,.5) 0%,rgba(23,23,20,0) 26%,rgba(23,23,20,0) 40%,rgba(23,23,20,.82) 100%)}
body.sl .btn-foam{background:var(--paper);color:var(--black)}
body.sl .btn-line{border-color:var(--paper);color:var(--paper)}
body.sl .site-foot{margin-top:0}

/* sessionLAND marks: the four bars light one by one */
.sl-lock{display:inline-flex;align-items:center;gap:.42em;font-weight:700;font-stretch:118%;letter-spacing:-0.02em;line-height:1;white-space:nowrap}
.sl-lock .bars{width:1em;height:1em;flex:none}
.bars{display:inline-flex;flex-direction:column;justify-content:space-between;padding:.14em .1em}
.bars i{display:block;height:13%;border-radius:99px;background:var(--line)}
.bars i:nth-child(1){--c:var(--pacific)}.bars i:nth-child(2){--c:var(--sage)}.bars i:nth-child(3){--c:var(--amber)}.bars i:nth-child(4){--c:var(--terra)}
.bars i.on,.bars.all i{background:var(--c)}

/* hero */
.sl-hero-body{margin-top:auto;width:100%;max-width:96rem;margin-inline:auto;padding:0 var(--gutter) clamp(28px,4vw,48px);display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:28px;align-items:end}
@media (max-width:900px){.sl-hero-body{grid-template-columns:1fr}}
body.sl .hero .sl-lock{font-size:clamp(1.3rem,1rem + 1vw,1.8rem)}
body.sl .hero h1{margin-top:18px;font-size:clamp(3.3rem,2rem + 6vw,7.6rem);line-height:.9}
body.sl .hero .sub{margin-top:18px;line-height:1.42}
.spec{justify-self:end;width:100%;max-width:24rem;background:rgba(241,237,228,.12);border:1px solid rgba(241,237,228,.5);border-radius:10px;padding:14px 16px 12px;font-size:.8rem;line-height:1.35}
.spec .row{display:grid;grid-template-columns:5.4rem 1fr;gap:10px;padding:5px 0;border-bottom:1px solid rgba(241,237,228,.4)}
.spec .row span:last-child{font-weight:600}
.spec .ref{display:flex;justify-content:space-between;align-items:baseline;padding-top:8px}
.spec .ref b{font-size:1.7rem;font-weight:700;font-stretch:104%;line-height:1}
.spec .film-btn{background:none;border:1px solid rgba(241,237,228,.6);color:var(--paper);padding:5px 11px;font-size:.68rem}
@media (max-width:900px){.spec{justify-self:start}}

/* one night */
.night{padding-block:clamp(72px,10vw,140px) clamp(40px,6vw,80px)}
.night-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,5vw,72px);align-items:end;margin-bottom:clamp(40px,6vw,80px)}
.night-head h2{font-size:clamp(2.4rem,1.6rem + 3.4vw,4.6rem)}
.night-head p{color:var(--dim);max-width:30rem;font-size:1.08rem}
@media (max-width:760px){.night-head{grid-template-columns:1fr}}
.moment{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(24px,5vw,72px);align-items:center;padding-block:clamp(36px,5vw,64px);border-top:1px solid var(--line)}
.moment:nth-of-type(even) .copy{order:2}
@media (max-width:860px){.moment{grid-template-columns:1fr}.moment:nth-of-type(even) .copy{order:0}}
.time{display:flex;align-items:center;gap:14px}
.time b{font-weight:800;font-stretch:118%;font-size:clamp(1.6rem,1.2rem + 1.4vw,2.4rem);letter-spacing:-0.02em;line-height:1;font-variant-numeric:tabular-nums}
.time .bars{width:34px;height:34px}
.moment h3{margin-top:18px;font-size:clamp(2rem,1.4rem + 2.2vw,3.3rem)}
.moment p{margin-top:12px;color:#d6d1c5;max-width:30rem;font-size:1.06rem}
.moment .media{margin:0;border-radius:12px;overflow:hidden;position:relative;background:var(--graphite)}
.moment .media img{width:100%;aspect-ratio:4/3;object-fit:cover}
.moment .media figcaption{position:absolute;left:14px;bottom:12px;font-size:.7rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;text-shadow:0 1px 8px rgba(0,0,0,.6)}

/* the app vignette: files becoming tracks (Hanken, faithful to the app) */
.appwin{border-radius:12px;background:#1d1d1b;box-shadow:0 30px 70px -28px rgba(0,0,0,.8),0 0 0 1px #34342f;font-family:var(--app);font-size:13px;color:#ece9e2;overflow:hidden}
.appwin .tb{display:grid;grid-template-columns:auto 1fr auto;align-items:center;padding:11px 14px;border-bottom:1px solid #2e2e2a}
.appwin .dots{display:flex;gap:6px}.appwin .dots i{width:10px;height:10px;border-radius:50%;background:#4a4a45}
.appwin .tb .sl-lock{justify-self:center;font-family:var(--sans);font-size:14px}
.appwin .tb .sl-lock .bars{width:14px;height:14px}
.appwin .replay{background:none;border:1px solid #45453f;color:#bdb9ae;border-radius:6px;padding:3px 8px;font:500 11px var(--app);cursor:pointer}
.appwin .steps{display:flex;justify-content:center;gap:18px;padding:10px;border-bottom:1px solid #2e2e2a;font-size:12px;color:#8c897f}
.appwin .steps span.on{color:#ece9e2;font-weight:600}
.appwin .steps span.done{color:#86ad8a}
.rows{padding:6px 14px 12px}
.r{display:grid;grid-template-columns:4px minmax(0,1fr) 18px minmax(0,1.15fr) 4.6rem;gap:12px;align-items:center;padding:9px 0;border-bottom:1px solid #2a2a27}
.r:last-child{border:0}
.r .tag{width:4px;height:28px;border-radius:2px;background:var(--c)}
.r .nm{position:relative;height:30px}
.r .nm span{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.r .nm .raw{opacity:0;color:#8c897f;font-variant-numeric:tabular-nums}
.r .nm .clean b{font-weight:600;font-size:13px}
.r .nm .clean small{font-size:11px;color:#8c897f}
.r .arr{color:#6c6a62;text-align:center}
.r .route{border:1px solid #34342f;background:#232321;border-radius:6px;padding:6px 9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.r .why{font-size:10.5px;color:#8c897f;white-space:nowrap;text-align:right}
@media (max-width:520px){.r{grid-template-columns:4px minmax(0,1fr) minmax(0,1fr)}.r .arr,.r .why{display:none}}
.appwin.play .r .raw{animation:rawOut 2.6s var(--ease) both;animation-delay:calc(var(--i) * 90ms)}
.appwin.play .r .clean{animation:cleanIn 2.6s var(--ease) both;animation-delay:calc(var(--i) * 90ms)}
.appwin.play .r .tag{animation:tagIn 2.6s var(--ease) both;animation-delay:calc(var(--i) * 90ms)}
.appwin.play .r .route,.appwin.play .r .why{animation:routeIn 2.6s var(--ease) both;animation-delay:calc(var(--i) * 90ms)}
@keyframes rawOut{0%,45%{opacity:1;transform:none}62%,100%{opacity:0;transform:translateY(-6px)}}
@keyframes cleanIn{0%,50%{opacity:0;transform:translateY(6px)}70%,100%{opacity:1;transform:none}}
@keyframes tagIn{0%,52%{background:#3a3a35;transform:scaleY(.4)}72%,100%{background:var(--c);transform:none}}
@keyframes routeIn{0%,60%{opacity:0}82%,100%{opacity:1}}

/* delivery report */
.report{border-radius:12px;background:var(--paper);color:var(--ink);padding:20px 22px;box-shadow:0 30px 70px -28px rgba(0,0,0,.8)}
.report .rh{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding-bottom:10px;border-bottom:2px solid var(--ink)}
.report .rh b{font-weight:800;font-stretch:112%;font-size:1.05rem}
.report .rh span{font-size:.8rem;color:var(--ink-soft)}
.report .line{display:grid;grid-template-columns:1fr auto auto;gap:14px;align-items:center;padding:9px 0;border-bottom:1px dashed #bdb7aa;font-size:.92rem;font-variant-numeric:tabular-nums}
.report .ok{display:inline-flex;align-items:center;gap:6px;font-weight:700;color:#4d6b4f}
.report .ok::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--sage)}
.report .meta{color:var(--ink-soft);font-size:.82rem}
.report .foot{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;padding-top:12px;font-size:.8rem;color:var(--ink-soft)}

/* the last moment */
.tacos{margin:0;position:relative;border-radius:12px;overflow:hidden}
.tacos img{width:100%;aspect-ratio:4/3;object-fit:cover;filter:saturate(1.05)}
.tacos::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(23,23,20,0) 40%,rgba(23,23,20,.75))}
.tacos span{position:absolute;left:20px;bottom:16px;z-index:1;font-family:var(--display);font-size:clamp(2rem,1.4rem + 2vw,3rem);line-height:1}

/* who */
.who{background:var(--white);color:var(--ink);padding-block:clamp(72px,10vw,130px)}
.who h2{font-size:clamp(2.2rem,1.5rem + 3vw,4rem);max-width:16ch}
.who-list{margin-top:clamp(32px,5vw,56px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(24px,5vw,72px)}
@media (max-width:760px){.who-list{grid-template-columns:1fr}}
.who-list div{padding:20px 0;border-top:1.5px solid var(--ink);display:grid;grid-template-columns:minmax(0,13rem) 1fr;gap:16px;align-items:baseline}
@media (max-width:520px){.who-list div{grid-template-columns:1fr;gap:4px}}
.who-list b{font-weight:800;font-stretch:112%;font-size:1.05rem}
.who-list span{color:var(--ink-soft)}

/* order up: the beta board */
.order{padding-block:clamp(72px,10vw,130px)}
.board{border-radius:10px;background:#100f0d;box-shadow:inset 0 0 0 1px var(--line);padding:clamp(24px,4vw,52px);display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(28px,5vw,64px)}
@media (max-width:860px){.board{grid-template-columns:1fr}}
.board h2{font-size:clamp(2.3rem,1.5rem + 3vw,4rem);color:var(--golden)}
.board .top{display:flex;align-items:baseline;gap:12px;margin-top:22px;padding-bottom:14px;border-bottom:2px solid var(--golden)}
.board .top .sl-lock{font-size:1.5rem}
.board .top .sl-lock .bars{width:1.1em;height:1.1em}
.board .dots{flex:1;border-bottom:2px dotted rgba(241,237,228,.4);transform:translateY(-6px)}
.board .price{font-family:var(--display);font-size:2.2rem;color:var(--golden);line-height:1}
.board ul{list-style:none;margin:16px 0 0;padding:0}
.board li{padding:10px 0;border-bottom:1px dashed rgba(241,237,228,.25);display:grid;grid-template-columns:8.5rem 1fr;gap:12px}
.board li b{font-weight:800;font-stretch:72%;font-size:1.1rem;letter-spacing:.02em;text-transform:uppercase}
.board li span{color:#d6d1c5}
.board .side{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:6px}
.board-p{margin-top:16px;color:#d6d1c5;max-width:30rem;font-size:1.06rem}
.board-req{margin-top:12px;color:var(--dim);font-size:.92rem}
.board .side p{color:#d6d1c5}
.board .soon{font-size:.9rem;color:var(--dim)}
.board .soon b{font-weight:700;font-stretch:118%;color:var(--paper)}

@media (prefers-reduced-motion: reduce){
  .appwin.play .r .raw,.appwin.play .r .clean,.appwin.play .r .tag,.appwin.play .r .route,.appwin.play .r .why{animation:none}
}

/* opening room (no film; the film is home-only) */
.sl-room{background:var(--black)}
.sl-open{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(24px,5vw,72px);align-items:center}
@media (max-width:860px){.sl-open{grid-template-columns:1fr}}
.sl-open .sl-lock{display:flex;font-size:clamp(1.3rem,1rem + 1vw,1.8rem);margin-bottom:18px}
.sl-open h1{font-size:clamp(3rem,2rem + 5vw,6.6rem)}
.sl-open-art{margin:0;border-radius:12px;overflow:hidden}
.sl-open-art img{width:100%;aspect-ratio:4/3;object-fit:cover}
.sl-open .crumb{color:var(--paper)}