@font-face{font-family:'Jost';font-style:normal;font-weight:400;font-display:swap;src:url("fonts/jost-400.woff2") format('woff2')}
  @font-face{font-family:'Jost';font-style:normal;font-weight:500;font-display:swap;src:url("fonts/jost-500.woff2") format('woff2')}
  @font-face{font-family:'Jost';font-style:normal;font-weight:600;font-display:swap;src:url("fonts/jost-600.woff2") format('woff2')}
  @font-face{font-family:'Inter';font-style:normal;font-weight:800;font-display:swap;src:url("fonts/inter-800.woff2") format('woff2')}
  @font-face{font-family:'Playfair Display';font-style:normal;font-weight:400;font-display:swap;src:url("fonts/playfair-400.woff2") format('woff2')}
  @font-face{font-family:'Playfair Display';font-style:italic;font-weight:400;font-display:swap;src:url("fonts/playfair-400-italic.woff2") format('woff2')}
  /* LOSERPALOOZA — Goddess Rhea's live game night. The game is losing. */
  :root{
    --void:#0a0708; --panel:#130d0e; --panel-2:#1a1012;
    --blood:#c1121d; --blood-2:#7d0c13; --ember:#e94b3b;
    --bone:#ece3d4; --dim:#93887a; --faint:#5b544a; --gold:#c9a24b;
    --rule:rgba(236,227,212,0.13); --rule-2:rgba(236,227,212,0.06);
    --disp:'Inter','Helvetica Neue','Arial',sans-serif;
    --serif:'Playfair Display','Didot','Bodoni 72','Hoefler Text',Georgia,serif;
    --ui:'Jost','Futura','Avenir Next','Century Gothic',ui-sans-serif,system-ui,sans-serif;
    --mono:'SF Mono','SFMono-Regular','Roboto Mono',ui-monospace,monospace;
    --wrap:1160px;
    color-scheme:dark;
  }
  *{ box-sizing:border-box; }
  html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
  body{ margin:0; background:var(--void); color:var(--bone); font-family:var(--ui); font-size:18px; line-height:1.6; overflow-x:hidden; -webkit-font-smoothing:antialiased; }
  a{ color:inherit; text-decoration:none; } p{ margin:0 0 1.1em; } img{ display:block; }
  .wrap{ max-width:var(--wrap); margin:0 auto; padding:0 clamp(22px,5vw,56px); }
  .grain{ position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.5;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='150' height='150'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='150' height='150' filter='url(%23n)' opacity='0.05'/></svg>"); }
  main{ position:relative; z-index:2; }

  .kick{ font-family:var(--ui); font-size:10.5px; font-weight:600; letter-spacing:.4em; text-transform:uppercase; color:var(--dim); }
  .kick .live{ color:var(--ember); }
  h2{ font-family:var(--disp); font-weight:800; font-size:clamp(2rem,5.5vw,4rem); line-height:.98; letter-spacing:-.01em; text-transform:uppercase; margin:0 0 .4em; }
  h2 em{ font-family:var(--serif); font-weight:400; font-style:italic; text-transform:none; color:var(--ember); letter-spacing:0; }
  .say{ font-family:var(--serif); font-style:italic; font-size:clamp(1.4rem,3.6vw,2.4rem); line-height:1.2; color:var(--bone); }
  .say b{ color:var(--ember); font-weight:400; }
  .lede{ font-size:clamp(1.05rem,1.7vw,1.24rem); color:var(--dim); max-width:56ch; }

  .btn{ display:inline-flex; align-items:center; gap:11px; font-family:var(--ui); font-weight:600; font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; padding:16px 26px; cursor:pointer; border:1px solid var(--blood); color:var(--bone); background:var(--blood); position:relative; overflow:hidden; transition:background .3s,color .3s; }
  .btn:hover{ background:var(--ember); border-color:var(--ember); }
  .btn.ghost{ background:transparent; border-color:var(--rule); color:var(--bone); }
  .btn.ghost:hover{ border-color:var(--bone); background:transparent; color:#fff; }
  .btn .arw{ transition:transform .3s; } .btn:hover .arw{ transform:translateX(4px); }

  .top{ position:absolute; top:0; left:0; right:0; z-index:6; }
  .top .row{ max-width:var(--wrap); margin:0 auto; padding:20px clamp(22px,5vw,56px); display:flex; align-items:center; justify-content:space-between; }
  .top .host{ font-family:var(--ui); font-size:9.5px; letter-spacing:.28em; text-transform:uppercase; color:var(--dim); }
  .top .host b{ color:var(--bone); font-weight:600; }
  .top .tbtn{ font-family:var(--ui); font-size:9.5px; letter-spacing:.24em; text-transform:uppercase; border:1px solid var(--blood); color:var(--bone); padding:9px 15px; background:var(--blood); }
  .top .tbtn:hover{ background:var(--ember); border-color:var(--ember); }

  /* HERO */
  .hero{ position:relative; min-height:100svh; overflow:hidden; text-align:center; }
  .hero-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 40%; z-index:0; }
  .hveil{ position:absolute; inset:0; z-index:1; pointer-events:none;
    background:
      linear-gradient(180deg, rgba(7,4,5,.84) 0%, rgba(7,4,5,.32) 20%, transparent 40%, transparent 55%, rgba(7,4,5,.5) 78%, rgba(7,4,5,.93) 100%),
      radial-gradient(120% 80% at 50% 122%, rgba(193,18,29,.14), transparent 55%); }
  .hero .frame{ position:relative; z-index:3; min-height:100svh; display:flex; flex-direction:column; justify-content:space-between; padding:78px clamp(22px,5vw,56px) clamp(28px,5vh,52px); }
  .htop, .hbot{ width:100%; }
  .hero .eyebrow{ font-family:var(--ui); font-size:10.5px; font-weight:600; letter-spacing:.42em; text-transform:uppercase; color:var(--bone); margin-bottom:24px; display:inline-flex; align-items:center; gap:10px; }
  .hero .eyebrow .dot{ width:7px; height:7px; border-radius:50%; background:var(--ember); box-shadow:0 0 0 0 rgba(233,75,59,.6); animation:pulse 2s infinite; }
  @keyframes pulse{ 0%{ box-shadow:0 0 0 0 rgba(233,75,59,.55);} 70%{ box-shadow:0 0 0 9px rgba(233,75,59,0);} 100%{ box-shadow:0 0 0 0 rgba(233,75,59,0);} }
  .mark{ font-family:var(--disp); font-weight:800; text-transform:uppercase; font-size:clamp(2.5rem,9.5vw,7rem); line-height:.9; letter-spacing:-.02em; margin:0; color:var(--bone); text-shadow:0 0 44px rgba(7,4,5,.7), 0 0 90px rgba(193,18,29,.35); }
  .hero .tag{ margin:20px 0 0; }
  .hero .tag .say{ color:var(--bone); }

  .count{ display:flex; justify-content:center; gap:clamp(14px,4vw,44px); margin:8px 0 26px; }
  .cbox{ min-width:64px; }
  .cbox .num{ font-family:var(--serif); font-weight:400; font-size:clamp(2.6rem,8vw,5rem); line-height:1; font-variant-numeric:tabular-nums; color:var(--bone); }
  .cbox .lab{ font-family:var(--ui); font-size:9px; font-weight:600; letter-spacing:.24em; text-transform:uppercase; color:var(--dim); margin-top:10px; }
  .when{ font-family:var(--ui); font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--dim); margin-bottom:26px; }
  .when b{ color:var(--ember); font-weight:600; }
  .when .seg{ white-space:nowrap; }
  .hero .cta{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; }

  .ticker{ border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); overflow:hidden; padding:16px 0; background:var(--panel); }
  .ticker .track{ display:inline-flex; white-space:nowrap; animation:tick 26s linear infinite; }
  .ticker span{ font-family:var(--disp); font-weight:800; text-transform:uppercase; font-size:1.4rem; letter-spacing:.02em; padding:0 22px; color:var(--faint); }
  .ticker i{ color:var(--blood); font-style:normal; padding:0 6px; }
  @keyframes tick{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }

  section.mv{ padding:clamp(60px,9vw,116px) 0; border-bottom:1px solid var(--rule-2); }
  .measure{ max-width:60ch; }
  .orn{ display:flex; align-items:center; gap:12px; } .orn span{ height:1px; width:46px; background:var(--blood); } .orn i{ width:6px; height:6px; background:var(--blood); transform:rotate(45deg); }

  /* full-bleed image bands */
  .iband{ position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; text-align:center; }
  .iband > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; z-index:0; }
  .iband .iveil{ position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(0deg, rgba(7,4,5,.74), transparent 42%, transparent 56%, rgba(7,4,5,.62)); }
  .iband .ion{ position:relative; z-index:2; width:100%; max-width:var(--wrap); padding:0 clamp(22px,5vw,56px); }
  .iband .bkick{ font-family:var(--ui); font-size:9.5px; font-weight:600; letter-spacing:.36em; text-transform:uppercase; color:var(--ember); margin-bottom:14px; }
  .iband .bline{ font-family:var(--serif); font-style:italic; font-size:clamp(1.4rem,3.6vw,2.6rem); line-height:1.15; color:var(--bone); margin:0; }
  .iband .bline b{ color:var(--ember); font-weight:400; }
  /* real photographs, graded into the oxblood world */
  .iband.graded > img{ filter:saturate(.6) brightness(.52) contrast(1.14) sepia(.34); object-position:center 46%; }
  .iband.graded .iveil{ background:
      linear-gradient(0deg, rgba(7,4,5,.9), rgba(7,4,5,.28) 46%, rgba(7,4,5,.24) 60%, rgba(7,4,5,.8)),
      radial-gradient(120% 92% at 50% 46%, transparent 22%, rgba(7,4,5,.6) 100%),
      linear-gradient(0deg, rgba(125,12,19,.4), rgba(125,12,19,.12) 60%, transparent); }

  /* THE HOST — a framed portrait reveal */
  .host-b{ display:grid; grid-template-columns:1fr; gap:clamp(28px,5vw,58px); align-items:center; }
  @media(min-width:800px){ .host-b{ grid-template-columns:auto 1fr; } }
  .host-b .pf{ position:relative; width:min(330px,74vw); justify-self:center; }
  .host-b .pf::before{ content:""; position:absolute; inset:-11px; border:1px solid var(--rule); z-index:0; }
  .host-b .pf .pframe{ position:relative; z-index:1; padding:9px; border:1px solid var(--gold); background:var(--void); }
  .host-b .pf .pframe img{ width:100%; height:auto; display:block; filter:contrast(1.07) brightness(.88) saturate(.92) sepia(.13); }
  .host-b .pf .pv{ position:absolute; inset:9px; z-index:2; pointer-events:none;
    background:radial-gradient(76% 82% at 50% 40%, transparent 44%, rgba(90,10,15,.52) 100%), linear-gradient(0deg, rgba(125,12,19,.26), transparent 48%); }
  .host-b .pf .pcap{ font-family:var(--ui); font-size:9px; font-weight:600; letter-spacing:.28em; text-transform:uppercase; color:var(--dim); text-align:center; margin:15px 0 0; }

  .games{ display:grid; grid-template-columns:1fr; gap:1px; background:var(--rule); border:1px solid var(--rule); margin-top:44px; }
  @media(min-width:820px){ .games{ grid-template-columns:repeat(3,1fr); } }
  .game{ background:var(--panel); padding:34px 28px 38px; transition:background .35s; }
  .game:hover{ background:var(--panel-2); }
  .game .gn{ font-family:var(--ui); font-size:9px; font-weight:600; letter-spacing:.24em; text-transform:uppercase; color:var(--blood); }
  .game h3{ font-family:var(--disp); font-weight:800; text-transform:uppercase; font-size:1.6rem; letter-spacing:-.01em; margin:16px 0 12px; }
  .game p{ margin:0; color:var(--dim); font-size:1.02rem; }

  .ways{ display:grid; grid-template-columns:1fr; gap:1px; background:var(--rule); border:1px solid var(--rule); margin-top:44px; }
  @media(min-width:760px){ .ways{ grid-template-columns:1fr 1fr; } }
  .way{ background:var(--panel); padding:38px 32px 40px; }
  .way.sand{ background:linear-gradient(180deg,rgba(193,18,29,.12),var(--panel)); }
  .way .wn{ font-family:var(--ui); font-size:9px; font-weight:600; letter-spacing:.24em; text-transform:uppercase; color:var(--dim); }
  .way h3{ font-family:var(--disp); font-weight:800; text-transform:uppercase; font-size:2rem; margin:14px 0 12px; }
  .way.sand h3{ color:var(--ember); }
  .way p{ color:var(--dim); margin:0 0 22px; }

  .crown{ text-align:center; }
  .crown .glyph{ font-family:var(--serif); font-size:3rem; color:var(--gold); margin-bottom:8px; }
  .quote{ margin-top:40px; }

  .rules{ display:flex; flex-wrap:wrap; gap:10px 26px; margin-top:30px; font-family:var(--ui); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--dim); }
  .rules span{ position:relative; padding-left:16px; }
  .rules span::before{ content:""; position:absolute; left:0; top:.4em; width:5px; height:5px; background:var(--blood); transform:rotate(45deg); }

  footer{ padding:44px 0 60px; text-align:center; }
  footer .fm{ font-family:var(--disp); font-weight:800; text-transform:uppercase; letter-spacing:.02em; font-size:1.3rem; }
  footer p{ font-family:var(--ui); font-size:9px; letter-spacing:.24em; text-transform:uppercase; color:var(--faint); margin:12px 0 0; }

  html.js .rv{ opacity:0; transform:translateY(20px); transition:opacity 1s cubic-bezier(.2,.7,.2,1),transform 1s cubic-bezier(.2,.7,.2,1); }
  html.js .rv.in{ opacity:1; transform:none; }
  @media(prefers-reduced-motion:reduce){ html.js .rv{ opacity:1; transform:none; transition:none;} .ticker .track,.hero .eyebrow .dot{ animation:none;} html{ scroll-behavior:auto; } }

  /* ==========================================================================
     PHONES — added 2026-09-03. Everything in this section is phone-only, so the
     desktop layout above is untouched. Three real defects, measured:
       1. the top row's label and seat button met with a 0px gap at <=400px
       2. the phone crop shows a narrow slice of a 2.33:1 image, so the bright
          robe sat exactly where the date and buttons are, at 2.37:1 contrast
       3. at 320px the hero content was 595px inside a 596px frame
     ========================================================================== */
  @media (max-width:520px){
    /* 1. hold the label and the button on one line, with air between them.
       The diamond and Her name stay; only the words "Hosted by" step aside. */
    .top .row{ padding:12px clamp(18px,5vw,56px); gap:14px; }
    .top .host{ white-space:nowrap; }
    .top .host .hpre{ display:none; }
    .top .tbtn{ white-space:nowrap; min-height:44px; display:inline-flex; align-items:center; }

    /* 2. the same veil, weighted for the tall crop, so the lower copy reads */
    .hveil{ background:
      linear-gradient(180deg, rgba(7,4,5,.84) 0%, rgba(7,4,5,.32) 20%, transparent 42%, transparent 60%, rgba(7,4,5,.34) 70%, rgba(7,4,5,.86) 83%, rgba(7,4,5,.97) 100%),
      radial-gradient(120% 80% at 50% 122%, rgba(193,18,29,.14), transparent 55%); }
    /* and the type carries its own shadow, as .mark already does */
    .hero .tag .say, .count .num, .count .over, .hero .when{ text-shadow:0 2px 18px rgba(7,4,5,.9); }

    /* 3. harvest vertical room from the margins, not the type */
    .hero .eyebrow{ margin-bottom:16px; }
    .hero .tag{ margin-top:14px; }
    .count{ margin:2px 0 16px; }
    .hero .when{ margin-bottom:20px; }

    /* stacked buttons read as a deliberate pair instead of two odd widths */
    .hero .cta, .ctarow{ flex-direction:column; align-items:center; }
    .hero .cta .btn, .ctarow .btn{ width:100%; max-width:300px; justify-content:center; }
  }
  @media (max-width:360px){
    .hero .eyebrow{ letter-spacing:.26em; margin-bottom:12px; }
    .count{ margin:0 0 12px; }
    .hero .when{ margin-bottom:16px; }
    .game{ padding:28px 22px 30px; }
    .way{ padding:30px 24px 32px; }
  }
  /* the countdown's expired state, at a size a phone can hold */
  .count .over{ font-family:var(--serif); font-style:italic; font-weight:400;
    font-size:clamp(1.5rem,5.2vw,2.8rem); line-height:1.14; color:var(--bone); }
  /* no stuck :hover states after a tap on a touch screen */
  @media (hover:none){
    .btn:hover{ background:var(--blood); border-color:var(--blood); }
    .btn.solid:hover, .btn:hover .arw{ transform:none; }
    .btn.ghost:hover{ border-color:var(--rule); color:var(--bone); background:transparent; }
    .game:hover{ background:var(--panel); }
    .top .tbtn:hover{ background:var(--blood); border-color:var(--blood); }
    a, .btn{ -webkit-tap-highlight-color:rgba(193,18,29,.25); }
  }


  /* ==========================================================================
     THE NIGHTS — the strip. One band, edge to edge. The nights as columns cut
     by hairline rules, the day number as the page's mark, the weekday standing
     on its side beside it. Along the top runs the rail: a thin track that turns
     red up to and through the next night and stops there. On phones the rail
     turns and becomes a spine down the left, the nights hanging off it.
     ========================================================================== */
  .nights{ --gut:clamp(22px,5vw,56px); --pad:clamp(22px,2.6vw,34px); --ease:cubic-bezier(.2,.7,.2,1); }
  .nights-head{ display:grid; grid-template-columns:1fr; gap:14px 48px; align-items:end; }
  @media(min-width:900px){ .nights-head{ grid-template-columns:1fr auto; } .nights-lede{ max-width:34ch; margin:0 0 .5em; } }
  .nights-head h2{ margin-bottom:0; }
  .nights-head h2 em{ white-space:nowrap; }
  .nights-lede{ margin:0; }

  .strip{ position:relative; margin-top:clamp(36px,5vw,56px); background:var(--panel); border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); }
  /* the columns follow the count (--n, set by the script from the feed; five in the static markup), and the
     hairlines between them are borders on the nights themselves, so a shorter run never leaves an empty cell */
  .nights-track{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr; }
  @media(min-width:640px){ .nights-track{ grid-template-columns:1fr 1fr; } }
  @media(min-width:1080px){ .nights-track{ grid-template-columns:repeat(var(--n,5),1fr); } }
  @media(min-width:1720px){ .nights-track{ max-width:1720px; margin:0 auto; border-left:1px solid var(--rule); border-right:1px solid var(--rule); } }

  /* each column owns its side padding as --pl / --pr, so the pin and the lit night's inked door can find its edges */
  .night{ --pl:var(--pad); --pr:var(--pad); position:relative; display:flex; flex-direction:column; background:var(--panel); border:0 solid var(--rule); padding:30px var(--pr) 8px var(--pl); min-height:100%; transition:background .45s var(--ease); }
  @media(min-width:1080px){ .night:first-child{ --pl:var(--gut); } .night:last-child{ --pr:var(--gut); } .night + .night{ border-left-width:1px; } }
  .night:hover{ background:var(--panel-2); }

  /* the rail: a segment per night, so it needs no measuring and survives any count.
     Faint by default (the track), red for the next night and for nights already played. */
  .night::before{ content:""; position:absolute; left:0; right:0; top:-2px; height:3px; background:transparent; transform:scaleX(0); transform-origin:left center; transition:transform .9s var(--ease); }
  .night.is-next::before, .night.is-live::before{ background:linear-gradient(90deg,var(--blood-2),var(--blood) 55%,var(--ember)); }
  .night.is-played::before{ background:var(--blood-2); transition-delay:calc(var(--i,0) * .28s); }
  .night.is-next::before, .night.is-live::before{ transition-delay:calc(var(--i,0) * .28s); }
  html.js .strip.in .night::before, html:not(.js) .night::before{ transform:scaleX(1); }

  /* the pin on the rail */
  .night .pin{ position:absolute; top:-5px; left:calc(var(--pl) - 4px); width:8px; height:8px; box-sizing:border-box; background:var(--void); border:1px solid var(--faint); transform:rotate(45deg); transition:transform .45s var(--ease),background .45s,border-color .45s; z-index:2; }
  .night:hover .pin{ background:var(--ember); border-color:var(--ember); transform:rotate(45deg) scale(1.35); }
  .night.is-next .pin, .night.is-live .pin{ background:var(--ember); border-color:var(--ember); box-shadow:0 0 0 0 rgba(233,75,59,.6); animation:pulse 2.2s infinite; }
  .night.is-played .pin{ background:var(--blood-2); border-color:var(--blood-2); }

  /* the lit night */
  .night.is-next, .night.is-live{ background:linear-gradient(180deg,rgba(193,18,29,.2),rgba(193,18,29,.05) 52%,var(--panel)); outline:1px solid rgba(233,75,59,.3); outline-offset:-1px; }
  .night.is-next:hover, .night.is-live:hover{ background:linear-gradient(180deg,rgba(193,18,29,.28),rgba(193,18,29,.07) 52%,var(--panel-2)); }

  .night .nh{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:0 12px; font-family:var(--ui); font-size:9.5px; font-weight:600; letter-spacing:.3em; text-transform:uppercase; color:var(--dim); line-height:1.4; min-height:1.4em; }
  .night .tag{ color:var(--ember); text-align:right; white-space:nowrap; margin-left:auto; }
  .night .tag:empty::before{ content:"\00a0"; }
  .night.is-played .tag{ color:var(--dim); }

  /* the date: weekday on its side, the number as the mark, the month in the red italic */
  .night .nd{ display:grid; grid-template-columns:auto 1fr; column-gap:14px; align-items:end; margin:26px 0 22px; min-height:132px; }
  .night .wd{ grid-row:1 / span 2; align-self:end; writing-mode:vertical-rl; transform:rotate(180deg); font-family:var(--ui); font-size:10.5px; font-weight:600; letter-spacing:.3em; text-transform:uppercase; color:var(--dim); line-height:1; padding-top:.3em; transition:color .45s; }
  .night .dn{ grid-column:2; font-family:var(--disp); font-weight:800; font-size:clamp(5.4rem,8.6vw,8.2rem); line-height:.82; letter-spacing:-.045em; color:var(--bone); margin-left:-.04em; transition:color .45s,text-shadow .6s; }
  .night .mo{ grid-column:2; font-family:var(--serif); font-style:italic; font-size:1.3rem; line-height:1.1; color:var(--dim); margin-top:10px; transition:color .45s; }
  .night.is-next .mo, .night.is-live .mo{ color:var(--ember); }
  .night.is-next .wd, .night.is-live .wd{ color:var(--bone); }
  .night.is-next .dn, .night.is-live .dn{ text-shadow:0 0 44px rgba(193,18,29,.5); }
  .night:hover .dn{ color:#fff; text-shadow:0 0 36px rgba(233,75,59,.45); }
  .night:hover .wd{ color:var(--ember); }
  .night.is-played .dn, .night.is-played .mo, .night.is-played .wd{ color:var(--faint); text-shadow:none; }

  /* the facts */
  .night .nf{ margin:0 0 22px; font-family:var(--ui); font-size:11px; letter-spacing:.2em; text-transform:uppercase; line-height:1.5; }
  .night .nf p{ margin:0 0 7px; }
  .night .nf p:empty{ display:none; }
  .night .st, .night .pr{ color:var(--dim); }
  .night .pr span{ white-space:nowrap; }
  .night.is-next .st, .night.is-live .st{ color:var(--bone); }
  .night.is-played .nf{ color:var(--faint); }

  /* THE TWO CLOCKS: every night in both cities. The anchor city (whose evening it is) leads, its hour
     set bold in the display face; the other city stands beside it, quieter, and names its own weekday
     when its calendar day differs ("Wed 9 · 08:00 CEST"). Where a column runs narrow (five across a
     laptop, a small phone) the pair stacks and the hairline between them turns; "08:00 CEST" never breaks. */
  .night .tz2{ display:grid; grid-template-columns:1fr 1fr; column-gap:16px; margin:0 0 14px; padding:11px 0 12px; border-top:1px solid var(--rule-2); border-bottom:1px solid var(--rule-2); }
  .night .tz{ margin:0; min-width:0; display:flex; flex-direction:column; justify-content:space-between; gap:6px; }
  .night .tz + .tz{ border-left:1px solid var(--rule-2); padding-left:16px; }
  .night .tz .city{ display:block; font-family:var(--ui); font-size:8.5px; font-weight:600; letter-spacing:.3em; text-transform:uppercase; color:var(--dim); line-height:1.2; white-space:nowrap; transition:color .45s; }
  .night .tz .hm{ display:flex; flex-wrap:wrap; align-items:baseline; gap:0 6px; font-family:var(--ui); font-size:11px; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--dim); line-height:1.25; font-variant-numeric:tabular-nums; transition:color .45s; }
  .night .tz .hm .t, .night .tz .hm .wdd{ white-space:nowrap; }
  .night .tz .hm .wdd{ font-weight:600; }
  .night .tz .hm i{ font-style:normal; font-family:var(--ui); font-size:8.5px; font-weight:600; letter-spacing:.22em; color:var(--dim); margin-left:2px; }
  .night .tz.lead .hm{ font-family:var(--disp); font-weight:800; font-size:1.45rem; letter-spacing:-.02em; color:var(--bone); line-height:1; }
  .night.is-next .tz.lead .city, .night.is-live .tz.lead .city{ color:var(--ember); }
  .night.is-next .tz.lead .hm, .night.is-live .tz.lead .hm{ text-shadow:0 0 28px rgba(193,18,29,.35); }
  .night:hover .tz.lead .hm{ color:#fff; }
  .night.is-played .tz .city, .night.is-played .tz .hm, .night.is-played .tz .hm i, .night.is-played:hover .tz.lead .hm{ color:var(--faint); text-shadow:none; }
  @media(min-width:1080px), (max-width:360px){
    .night .tz2{ grid-template-columns:1fr; column-gap:0; padding:0; }
    .night .tz{ padding:10px 0 11px; gap:5px; }
    .night .tz + .tz{ border-left:0; padding-left:0; border-top:1px solid var(--rule-2); }
  }

  /* the two doors, each a row */
  .night .doors{ margin-top:auto; }
  .night .door{ display:flex; justify-content:space-between; align-items:center; gap:12px; padding:14px 0; border-top:1px solid var(--rule-2); font-family:var(--ui); font-size:.66rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--bone); transition:color .35s,background .3s; }
  .night .door.shade{ color:var(--dim); }
  .night .door .arw{ transition:transform .35s var(--ease),color .35s; color:var(--faint); }
  .night .door.seat .arw{ color:var(--blood); }
  .night .door:hover{ color:var(--ember); } .night .door.shade:hover{ color:var(--bone); }
  .night .door:hover .arw{ transform:translateX(6px); color:currentColor; }
  .night .door:focus-visible{ outline:1px solid var(--ember); outline-offset:4px; }
  /* the lit night's seat door, inked solid: the page's own .btn, bled to the column's edges */
  .night.is-next .door.seat:not(.full), .night.is-live .door.seat:not(.full){ margin:0 calc(-1 * var(--pr)) 0 calc(-1 * var(--pl)); padding:14px var(--pr) 14px var(--pl); background:var(--blood); border-top-color:var(--blood); color:var(--bone); }
  .night.is-next .door.seat:not(.full) .arw, .night.is-live .door.seat:not(.full) .arw{ color:var(--bone); }
  .night.is-next .door.seat:not(.full):hover, .night.is-live .door.seat:not(.full):hover{ background:var(--ember); border-top-color:var(--ember); color:var(--bone); }
  /* the sand is full: the seat door goes quiet, the shadows stay open */
  .night .door.full{ color:var(--dim); } .night .door.full .arw{ color:var(--faint); }
  .night .door.full:hover{ color:var(--dim); } .night .door.full:hover .arw{ transform:none; color:var(--faint); }
  /* a played night: one dim line where the doors were, no link to a past show */
  .night .gone{ margin:0; padding:14px 0; border-top:1px solid var(--rule-2); font-family:var(--ui); font-size:.66rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--faint); }

  /* PHONES: the rail turns and becomes a spine down the left; the weekday stands up */
  @media(max-width:639px){
    .strip::before{ content:""; position:absolute; left:var(--gut); top:0; bottom:0; width:1px; background:var(--rule); z-index:1; }
    .night{ --pl:calc(var(--gut) + 26px); --pr:var(--gut); padding:26px var(--pr) 6px var(--pl); }
    .night + .night{ border-top-width:1px; }
    .night::before{ left:calc(var(--gut) - 1px); right:auto; top:0; height:100%; width:3px; transform:scaleY(0); transform-origin:center top; }
    html.js .strip.in .night::before, html:not(.js) .night::before{ transform:scaleY(1); }
    .night .pin{ left:calc(var(--gut) - 4px); top:31px; }
    .night .nd{ grid-template-columns:auto 1fr; align-items:baseline; margin:16px 0 18px; min-height:0; }
    .night .wd{ grid-row:1; grid-column:1 / -1; writing-mode:horizontal-tb; transform:none; padding:0; align-self:start; margin-bottom:8px; }
    .night .dn{ grid-row:2; grid-column:1; font-size:clamp(4.6rem,20vw,5.6rem); }
    .night .mo{ grid-row:2; grid-column:2; margin:0; align-self:baseline; font-size:1.35rem; }
    .night .nf{ margin-bottom:16px; }
    .night .nf p{ margin-bottom:5px; }
    /* the inked door hangs off the spine and runs to the right edge */
    .night.is-next .door.seat:not(.full), .night.is-live .door.seat:not(.full){ margin-left:-26px; padding-left:26px; }
  }
  /* four narrow columns (small laptops, an iPad Pro on its side): the facts and the header tighten so the price line holds one line */
  @media(min-width:1080px) and (max-width:1279px){
    .night .nf{ font-size:10px; letter-spacing:.12em; }
    .night .nh{ font-size:9px; letter-spacing:.22em; }
    .night .door, .night .gone{ font-size:.62rem; letter-spacing:.14em; }
  }
  @media(min-width:640px) and (max-width:1079px){
    .night:nth-child(odd){ --pl:var(--gut); }
    .night:nth-child(even){ --pr:var(--gut); border-left-width:1px; }
    .night:nth-child(n+3){ border-top-width:1px; }
  }
  @media(hover:none){
    .night:hover{ background:var(--panel); }
    .night.is-next:hover, .night.is-live:hover{ background:linear-gradient(180deg,rgba(193,18,29,.2),rgba(193,18,29,.05) 52%,var(--panel)); }
    .night:hover .pin{ transform:rotate(45deg); }
    .night:hover .dn{ color:var(--bone); } .night:hover .wd{ color:var(--dim); } .night:hover .tz.lead .hm{ color:var(--bone); }
    .night .door:hover .arw{ transform:none; }
    .night.is-next .door.seat:not(.full):hover, .night.is-live .door.seat:not(.full):hover{ background:var(--blood); border-top-color:var(--blood); }
  }
  @media(prefers-reduced-motion:reduce){
    .night::before{ transform:none !important; transition:none; }
    .night .pin, .night.is-next .pin, .night.is-live .pin{ animation:none; box-shadow:none; }
    .night, .night .pin, .night .dn, .night .wd, .night .mo, .night .door, .night .door .arw, .night .tz .city, .night .tz .hm{ transition:none; }
  }
  /* the two words that say a night is over stay readable */
  .night .gone{ color:var(--dim); }