/* =========================================================
   Home (#/) · Foundation · ported from directions/3-indigo-field
   ========================================================= */

/* ---------- hero on the indigo field (continues the header band) ---------- */
.home-band{margin-top:-1px}
.hero{position:relative;padding-bottom:40px}
.frame{position:relative;border-radius:var(--r-l);overflow:hidden;height:clamp(500px,64vh,588px);background:var(--band-deep);box-shadow:0 0 0 1px var(--band-line);margin:0}
.frame>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 40%}
.frame::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(8,14,40,.66) 0%,rgba(8,14,40,.28) 34%,rgba(8,14,40,0) 52%),linear-gradient(0deg,rgba(8,14,40,.42) 0%,rgba(8,14,40,0) 26%)}
.hcopy{position:absolute;z-index:1;left:48px;top:44px;right:48px}
.hero h1{color:#f5f0e5}
.hero .when{margin-top:26px;font:500 14px/1.5 var(--sans);color:rgba(245,240,229,.82)}
.hero .when b{font-weight:650;color:#f5f0e5}
.frame figcaption{position:absolute;z-index:1;left:50px;bottom:22px;font:500 12px/1.4 var(--sans);color:rgba(245,240,229,.74);max-width:44ch}
.frame figcaption i{font:italic 500 13px/1 var(--serif);color:#f5f0e5}
.under{display:grid;grid-template-columns:minmax(0,1fr) 440px;gap:48px;padding-top:30px}
.under .copy{max-width:46ch;color:var(--on-band-2);font-size:16px;line-height:1.6}
.under .acts{display:flex;align-items:center;gap:26px;margin-top:22px}
.under .tlink{color:var(--on-band)}
.rest-slot{position:relative;z-index:3;margin-top:-176px;margin-right:32px;align-self:start}
.rest-slot.settled .rest{animation:none}

/* ---------- Your Saturday: the stamped sheet ---------- */
.home .hsec{padding:96px 0 0}
.sat{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:56px;align-items:start}
.sat-l{position:sticky;top:24px}
.sat-l .cut{color:var(--ink);margin-bottom:18px}
.sat-l p.lede{color:var(--ink-2);margin-top:12px;max-width:36ch;font-size:15px;line-height:1.55}
.sat-l p.key{font-size:14px;color:var(--ink-3);padding-top:12px;border-top:1px solid var(--rule);margin-top:20px}
.sat-l .credit{margin-top:28px}
.daysheet{background:var(--card);border-radius:var(--r-l);box-shadow:var(--sh-raised);padding:28px 32px 18px}
.sh-top{display:flex;align-items:end;justify-content:space-between;gap:16px;padding-bottom:14px}
.sh-top .who{font:500 13px/1.4 var(--sans);color:var(--ink-2)}
.sh-top .who b{color:var(--ink);font-weight:650}
.sh-top .date{text-align:right;font:500 13px/1.4 var(--sans);color:var(--ink-3)}
.sh-top .date b{display:block;font:700 20px/1.1 var(--serif);color:var(--ink);letter-spacing:-.01em}
.daysheet>.cut{color:var(--ink);--at:96px}
.daysheet .srow{--row-bg:var(--card)}
.daysheet .srow.is-clash{--row-bg:color-mix(in srgb,var(--changed) 7%,var(--card))}
.maybes-h{display:flex;justify-content:space-between;align-items:baseline;padding:18px 0 4px;font:600 12px/1 var(--sans);color:var(--ink-3);letter-spacing:.04em}
.sheet-empty{font:400 14px/1.5 var(--sans);color:var(--ink-2);padding:16px 0 6px;max-width:56ch}
.pass{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:20px;align-items:center;padding:18px 0 18px;margin-top:12px;border-top:1.5px solid var(--ink)}
.pass b{display:block;font:700 20px/1.15 var(--serif);letter-spacing:-.01em}
.pass span{font:500 13px/1.35 var(--sans);color:var(--ink-2)}
.pass .held{grid-column:2/-1}
.sheet-more{color:var(--ink-2);margin:2px 0 4px}

/* ---------- Across the park ---------- */
.park{display:grid;grid-template-columns:1.35fr 1fr 1fr;grid-template-areas:"main main griot" "lane family griot" "makers film griot";gap:20px}
.stage{position:relative;border-radius:var(--r-m);background:var(--card);box-shadow:var(--sh-card);padding:22px 22px 18px;display:flex;flex-direction:column;min-height:236px;overflow:hidden}
.stage a{text-decoration:none}
@media (hover:hover){.stage h3 a:hover,.then a:hover{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1.5px}}
.stage .nm{display:flex;justify-content:space-between;align-items:center;gap:12px;font:650 13px/1.2 var(--sans);color:var(--ink-2)}
.stage .nm span{font-weight:500;color:var(--ink-3)}
.stage .big{margin-top:auto;padding-top:28px}
.stage .big .t-time{font-size:28px;line-height:1;letter-spacing:-.02em;display:block;margin-bottom:8px;color:var(--ink-2)}
.stage .big .on-now{display:inline-flex;align-items:center;gap:7px;margin-bottom:10px;font:700 13px/1 var(--sans);color:var(--ok)}
.stage .big .on-now::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.stage .big h3{font:800 36px/1 var(--serif);font-variation-settings:"opsz" 60;letter-spacing:-.025em}
.stage .foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px;padding-top:12px;border-top:1px solid var(--rule);font:500 13px/1.35 var(--sans);color:var(--ink-2)}
.stage .foot .cell{margin:-6px -4px -6px 0}
.s-main{grid-area:main;background:var(--band);color:var(--on-band)}
.s-main .nm,.s-main .foot{color:var(--on-band-2)}
.s-main .nm span{color:var(--on-band-2)}
.s-main .foot{border-color:var(--band-line)}
.s-main .big h3{font-size:58px;max-width:11ch}
.s-main .big .t-time{color:var(--on-band-2)}
.s-main .stamp{--stamp-blend:normal;mix-blend-mode:normal;color:#e9a07f}
.s-main .ring{border-color:rgba(245,240,229,.3)!important;color:var(--on-band-2)!important}
.s-main .split2{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:32px;align-items:end;margin-top:auto}
.then{font:500 14px/1.35 var(--sans);color:var(--on-band-2)}
.then h4{font:600 12px/1.2 var(--sans);letter-spacing:.04em;color:var(--on-band-2);margin-bottom:8px}
.then li{display:grid;grid-template-columns:52px 1fr;gap:10px;padding:9px 0;border-top:1px solid var(--band-line)}
.then li a{font-weight:600;color:var(--on-band)}
.then .tn{font-size:15px;color:var(--on-band)}
.s-lane{grid-area:lane}.s-family{grid-area:family}.s-film{grid-area:film}.s-makers{grid-area:makers}
.s-img{padding:0;min-height:0;background:var(--band-deep)}
.s-img>img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.s-griot{grid-area:griot;min-height:520px}
.s-griot>img{object-position:50% 60%}
.s-lane,.s-family,.s-makers,.s-film{background:var(--cotton-2);box-shadow:inset 0 0 0 1px var(--rule)}
.s-img .lab{position:absolute;left:16px;right:16px;bottom:16px;z-index:1;background:var(--card);color:var(--ink);border-radius:10px;box-shadow:var(--sh-rest);padding:14px 16px 12px}
.s-img .lab .nm{color:var(--ink-2)}
.s-img .lab .nm span{font:600 13px/1 var(--serif);font-variant-numeric:tabular-nums lining-nums;letter-spacing:0;color:var(--ink-2)}
.s-img .lab h3{font:700 22px/1.15 var(--serif);letter-spacing:-.015em;margin-top:6px}
.s-img .lab .foot{margin-top:10px;padding-top:10px}

/* ---------- Community tickets band (indigo) ---------- */
.community{margin-top:112px;padding:88px 0 96px}
.cm{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px;align-items:center}
.cm-photo{position:relative}
.cm-photo .frame{height:auto;aspect-ratio:4/5;max-height:640px}
.cm-photo .frame>img{object-position:50% 50%}
.cm-photo .frame::after{background:linear-gradient(0deg,rgba(8,14,40,.4),rgba(8,14,40,0) 30%)}
.cm-photo figcaption{left:22px;bottom:18px}
.pc{position:absolute;right:-48px;bottom:56px;width:340px;background:var(--card);color:var(--ink);border-radius:var(--r-m);box-shadow:var(--sh-rest);padding:18px 20px 18px;z-index:2}
.pc label{display:block;font:600 13px/1.2 var(--sans);color:var(--ink-2);margin-bottom:6px}
.pc .inrow{display:flex;gap:8px}
.pc input{flex:1;min-width:0;height:40px;border:0;border-radius:8px;background:var(--cotton);color:var(--ink);padding:0 12px;font:600 15px/1 var(--sans);text-transform:uppercase;letter-spacing:.02em;box-shadow:inset 0 0 0 1.5px var(--rule-2)}
.pc input::placeholder{color:var(--ink-3);opacity:1}
.pc input:focus{outline:none;box-shadow:inset 0 0 0 1.5px var(--in-500),0 0 0 3px color-mix(in srgb,var(--in-500) 25%,transparent)}
.pc.bad input{box-shadow:inset 0 0 0 1.5px var(--err)}
.pc .msg{font:500 12.5px/1.4 var(--sans);color:var(--ink-3);margin-top:8px;min-height:2.8em}
.pc.ok .msg{color:var(--ok)}
.pc.bad .msg{color:var(--err)}
.cm-copy .cut{color:var(--on-band);margin-bottom:22px;opacity:.5}
.cm-copy .h-disp{font-size:56px;max-width:12ch}
.cm-copy p{color:var(--on-band-2);font-size:16px;max-width:46ch;margin-top:18px}
.prices{margin-top:34px;border-top:1px solid var(--band-line)}
.prices div{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:baseline;padding:13px 0;border-bottom:1px solid var(--band-line);font:500 14px/1.35 var(--sans);color:var(--on-band-2)}
.prices b{font-weight:650;color:var(--on-band)}
.prices .t-time{font-size:24px;color:var(--on-band);letter-spacing:-.01em}
.prices .faint-band{color:var(--on-band-2)}
.cm-link{color:var(--on-band);margin-top:22px}
.community + *{margin-top:0}

@media (max-width:600px){.hero .frame::after{background:linear-gradient(180deg,rgba(10,16,48,.55),transparent 60%)}.hero .when{text-shadow:0 1px 8px rgba(6,10,32,.8)}}
@media (max-width:1100px){
  .under{grid-template-columns:minmax(0,1fr) 380px;gap:28px}
  .sat{grid-template-columns:1fr;gap:32px}
  .sat-l{position:static}
  .sat-l .credit{max-width:520px}
  .cm{grid-template-columns:minmax(0,1fr);gap:72px}
  .cm-photo{max-width:560px}
}
@media (max-width:760px){
  .hero{padding-bottom:32px}
  .frame{height:470px;border-radius:14px}
  .frame>img{object-position:68% 40%}
  .frame::after{background:linear-gradient(180deg,rgba(8,14,40,.72) 0%,rgba(8,14,40,.3) 34%,rgba(8,14,40,0) 55%)}
  .hcopy{left:20px;top:22px;right:20px}
  .hero h1{font-size:46px}
  .hero .when{margin-top:16px;font-size:13px}
  .frame figcaption{display:none}
  .under{grid-template-columns:1fr;gap:0;padding-top:0}
  .rest-slot{order:-1;margin:-120px 10px 0}
  .rest .ip{display:none}
  .under .copy{margin-top:26px;font-size:15px}
  .under .acts{flex-wrap:wrap;gap:18px}
  .home .hsec{padding-top:64px}
  .daysheet{padding:18px 14px 8px;border-radius:14px;margin:0 -4px}
  .sh-top .date b{font-size:17px}
  .pass{grid-template-columns:minmax(0,1fr) auto;gap:12px 14px}
  .pass .btn,.pass .held{grid-column:1/-1}
  .pass .btn{width:100%}
  .pass .price{font-size:32px}
  .park{grid-template-columns:1fr;grid-template-areas:"main" "griot" "lane" "family" "makers" "film";gap:14px}
  .s-main .split2{grid-template-columns:1fr;gap:20px}
  .s-main .big h3{font-size:42px}
  .stage{min-height:200px}
  .s-griot{min-height:440px}
  .community{margin-top:72px;padding:56px 0 64px}
  .cm{gap:40px}
  .pc{position:relative;right:auto;bottom:auto;width:auto;margin:-80px 12px 0}
  .cm-copy .h-disp{font-size:40px}
}