/**
 * Comedy Republic — homepage sections (front page only; loads after design-base.css).
 *
 * PORTED from docs/design/canvas/Main.dc.html (its <style> block), value for value, between the
 * PORT-BEGIN / PORT-END markers: the home half of tests/visual/port-css.py --split — promoted strip,
 * night-by-night (date strip, rail, day card, hero, book bar, show rows, dark panel, all future dates,
 * calendar, legend), New here, Most booked (stack on phones, three-column grid from 900px), Citizens,
 * Bar & food (rail; six-column grid from 1100px), states view. Re-port:
 *   python3 tests/visual/port-css.py docs/design/canvas/Main.dc.html --split home --write assets/css/design-home.css
 * Same scoping as design-base.css (.crd prefix). Theme additions are after PORT-END, marked.
 */

/* ==== PORT-BEGIN docs/design/canvas/Main.dc.html --split home ==== */
.crd .cr-promo:focus-visible,.crd .cr-new__panel :focus-visible,.crd .cr-hero :focus-visible{outline-color:var(--gold);box-shadow:0 0 0 3px var(--ink-dk)}

/* Promoted slot */
.crd .cr-promo{position:relative;isolation:isolate;display:block;overflow:hidden;background:var(--ink-dk);color:var(--cream);text-decoration:none}
.crd .cr-promo::before,.crd .cr-promo::after{content:'';position:absolute;left:0;right:0;height:10px;background:radial-gradient(circle,#FFE8A8 0 1.7px,rgba(255,188,41,.5) 2.4px,rgba(255,188,41,0) 4.6px) 0 50%/18px 10px repeat-x;animation:cr-bulbs 1.4s steps(1,end) infinite}
.crd .cr-promo::before{top:3px}
.crd .cr-promo::after{bottom:3px;animation-delay:-.7s}
@keyframes cr-bulbs{0%{background-position:0 50%}50%{background-position:9px 50%}100%{background-position:0 50%}}
.crd .cr-promo__inner{display:flex;align-items:center;gap:18px;min-height:86px;padding:18px 0}
.crd .cr-promo__tag{flex:none;padding:5px 8px;border:1px solid rgba(255,188,41,.55);border-radius:4px;font-weight:900;font-size:10px;line-height:1;letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
.crd .cr-promo__text{display:flex;flex-direction:column;gap:4px;min-width:0}
.crd .cr-promo__kicker{display:none;font-weight:900;font-size:9px;line-height:1;letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
.crd .cr-promo__title{font-family:'futura-pt-bold','Futura',sans-serif;font-weight:800;text-transform:uppercase;font-size:20px;line-height:1.05;letter-spacing:.02em}
.crd .cr-promo__sub{font-size:14px;line-height:1.3;color:rgba(245,240,211,.72)}
.crd .cr-promo__cta{margin-left:auto;flex:none;display:inline-flex;align-items:center;gap:10px;height:46px;padding:0 20px;border-radius:999px;background:var(--gold);color:var(--ink);font-weight:900;font-size:14px;letter-spacing:.03em;transition:transform .2s}
.crd .cr-promo:hover .cr-promo__cta{transform:translateX(3px)}

/* Night-by-night rail */
.crd .cr-tonight{padding:36px 0 0}
.crd .cr-railhead{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:-20px}
.crd .cr-strip{display:flex;gap:8px;min-width:0;padding:4px 2px;overflow-x:auto;scrollbar-width:none}
.crd .cr-strip::-webkit-scrollbar{display:none}
.crd .cr-strip__item{flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;width:66px;height:70px;padding:0;border-radius:14px;border:1px solid var(--line);background:rgba(255,253,246,.55);cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.crd .cr-strip__item:hover{border-color:rgba(46,45,42,.5)}
.crd .cr-strip__dow{font-weight:900;font-size:9.5px;line-height:1;letter-spacing:.16em;text-transform:uppercase}
.crd .cr-strip__num{font-family:'futura-pt-bold','Futura',sans-serif;font-weight:800;font-size:25px;line-height:1}
.crd .cr-strip__item.is-tonight .cr-strip__dow{color:var(--ox)}
.crd .cr-strip__item.is-dark{color:rgba(46,45,42,.55);border-style:dashed;background:transparent}
.crd .cr-strip__item.is-all{width:auto;flex-direction:row;gap:9px;padding:0 18px}
.crd .cr-strip__item.is-all .cr-strip__dow{font-size:10.5px}
.crd .cr-strip__item.is-on{background:var(--ink);border-color:var(--ink);color:var(--cream)}
.crd .cr-strip__item.is-on.is-tonight .cr-strip__dow{color:var(--gold)}
.crd .cr-railctl{flex:none;display:flex;align-items:center;gap:10px}
.crd .cr-count{min-width:62px;white-space:nowrap;text-align:center;font-weight:900;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.crd .cr-round{width:50px;height:50px;padding:0;border-radius:50%;border:1.5px solid var(--ink);background:transparent;display:grid;place-items:center;cursor:pointer;transition:background .2s,color .2s}
.crd .cr-round:hover:not(:disabled){background:var(--ink);color:var(--cream)}
.crd .cr-round:disabled{opacity:.28;cursor:default}
.crd .cr-rail{position:relative;display:flex;align-items:stretch;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--rail-pad);padding:6px var(--rail-pad) 42px;scrollbar-width:none;overscroll-behavior-x:contain}
.crd .cr-rail::-webkit-scrollbar{display:none}
.crd .cr-rail--grid{flex-wrap:nowrap;overflow:visible;scroll-snap-type:none;padding:48px 48px 56px;gap:28px;align-items:stretch}
.crd .cr-day{flex:none;width:404px;scroll-snap-align:start;display:flex;flex-direction:column;overflow:hidden;background-color:var(--card);background-image:linear-gradient(rgba(255,253,246,.85),rgba(255,253,246,.85)),url('../design/grain.webp');background-size:auto,220px 220px;background-blend-mode:normal,multiply;border-radius:22px;border:1px solid rgba(46,45,42,.16);box-shadow:0 36px 60px -40px rgba(46,45,42,.6),0 8px 18px -12px rgba(46,45,42,.22);transition:transform .35s cubic-bezier(.2,.75,.2,1),box-shadow .35s}

@media (hover:hover){
  .crd .cr-day:hover{transform:translateY(-4px);box-shadow:0 44px 70px -40px rgba(46,45,42,.65),0 10px 22px -12px rgba(46,45,42,.25)}
}

/* Night-by-night rail */
.crd .cr-hero{position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:space-between;height:250px;padding:18px 20px 20px;color:var(--cream);background-color:#1d1a14;background-size:cover;background-position:center}
.crd .cr-hero::before{content:'';position:absolute;inset:0;z-index:-1;background:radial-gradient(90% 85% at 55% -20%,rgba(255,220,160,.5),rgba(255,220,160,0) 60%),linear-gradient(180deg,rgba(20,17,12,.04) 0%,rgba(20,17,12,.22) 40%,rgba(20,17,12,.86) 100%)}
.crd .cr-hero--green{background-image:url('../design/curtain-green.webp')}
.crd .cr-hero--teal{background-image:url('../design/curtain-teal.jpg')}
.crd .cr-hero--red{background-image:url('../design/curtain-red.jpg')}
.crd .cr-hero--olive{background-image:url('../design/curtain-olive.jpg')}
.crd .cr-hero--dark{background-image:url('../design/curtain-green.webp')}
.crd .cr-hero--dark::before{background:linear-gradient(180deg,rgba(14,13,11,.82),rgba(14,13,11,.93))}
.crd .cr-hero__top{display:flex;align-items:center;justify-content:space-between}
.crd .cr-tag{display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 13px;border-radius:999px;font-weight:900;font-size:10.5px;line-height:1;letter-spacing:.17em;text-transform:uppercase;white-space:nowrap}
.crd .cr-tag--live{background:var(--gold);color:var(--ink);box-shadow:0 0 0 5px rgba(255,188,41,.18),0 6px 24px rgba(255,188,41,.38)}
.crd .cr-tag--day{color:var(--cream);background:rgba(20,17,12,.3);border:1px solid rgba(245,240,211,.5);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.crd .cr-dot{flex:none;display:inline-block;width:8px;height:8px;border-radius:50%;background:currentColor}
.crd .cr-dot--pulse{background:var(--ox);animation:cr-pulse 1.8s ease-out infinite}
.crd .cr-dot--go{background:var(--green);animation:cr-pulse-g 1.8s ease-out infinite}
@keyframes cr-pulse{0%{box-shadow:0 0 0 0 rgba(114,0,2,.6)}70%{box-shadow:0 0 0 7px rgba(114,0,2,0)}100%{box-shadow:0 0 0 0 rgba(114,0,2,0)}}
@keyframes cr-pulse-g{0%{box-shadow:0 0 0 0 rgba(79,116,74,.6)}70%{box-shadow:0 0 0 7px rgba(79,116,74,0)}100%{box-shadow:0 0 0 0 rgba(79,116,74,0)}}
.crd .cr-hero__line{font-weight:900;font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;color:rgba(245,240,211,.86)}
.crd .cr-hero__title{margin-top:8px;font-size:56px;line-height:.88;white-space:pre-line;color:var(--ivory)}
.crd .cr-hero__meta{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;margin-top:16px;font-weight:700;font-size:13.5px;line-height:1.3;color:rgba(245,240,211,.92)}
.crd .cr-doors{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 13px;border-radius:999px;background:var(--cream);color:var(--ink);font-weight:900;font-size:12.5px;white-space:nowrap}
.crd .cr-bookbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:17px 20px 13px}
.crd .cr-bookbar__label{font-weight:900;font-size:11.5px;letter-spacing:.17em;text-transform:uppercase}
.crd .cr-filter{display:inline-flex;align-items:center;gap:6px;padding:8px 0;margin:-8px 0;font-weight:900;font-size:13px;color:var(--green);text-decoration:none;white-space:nowrap}
.crd .cr-filter:hover{color:var(--green);text-decoration:underline;text-underline-offset:3px}
.crd .cr-filter .cr-ico{width:15px;height:15px}
.crd .cr-shows{display:flex;flex-direction:column}
.crd .cr-show{display:grid;grid-template-columns:62px minmax(0,1fr) auto;align-items:center;gap:14px;padding:15px 20px;border-top:1px dashed rgba(46,45,42,.24)}
.crd .cr-show__title{font-family:'futura-pt-bold','Futura',sans-serif;font-weight:800;text-transform:uppercase;font-size:16.5px;line-height:1.08;letter-spacing:.015em}
.crd .cr-show__title a{text-decoration:none}
.crd .cr-show__title a:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
.crd .cr-show__sub{margin-top:3px;font-style:italic;font-size:13.5px;line-height:1.3;color:var(--ink)}
.crd .cr-show__meta{margin-top:3px;font-size:13px;line-height:1.35;color:var(--muted)}
.crd .cr-price{margin-top:5px;font-weight:900;font-size:14px;line-height:1.3;letter-spacing:.01em;white-space:nowrap}
.crd .cr-price__cit{font-weight:700;color:var(--green)}
.crd .cr-priceline{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-top:6px}
.crd .cr-priceline:empty{display:none}
.crd .cr-priceline .cr-price,.crd .cr-priceline .cr-chip{margin-top:0}
.crd .cr-shows{flex:1}
.crd .cr-day.is-sparse .cr-shows::after{content:'';flex:1;min-height:0;margin:10px 0 18px;background:url('../design/m-mark-dark.webp') center/auto min(76px,70%) no-repeat;opacity:.08}
.crd .cr-shows:empty{display:none}
.crd .cr-popart::before,.crd .cr-barcard__art::before{content:'';position:absolute;inset:0;z-index:-1;background:radial-gradient(rgba(0,0,0,.22) 1px,rgba(0,0,0,0) 1.7px) 0 0/5px 5px,radial-gradient(120% 100% at 15% 0%,rgba(255,255,255,.22),rgba(255,255,255,0) 58%)}
.crd .cr-nextav{display:block;margin-top:7px;font-weight:700;font-size:12.5px;line-height:1.35;color:var(--muted);text-decoration:none}
.crd .cr-nextav:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.crd .cr-nextav .cr-ico{display:inline-block;width:13px;height:13px;margin-left:4px;vertical-align:-2px}
.crd .cr-darkp{position:relative;flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:22px 20px 22px;border-top:1px dashed rgba(46,45,42,.24);overflow:hidden}
.crd .cr-darkp__title{font-size:22px;line-height:1}
.crd .cr-darkp__text{position:relative;z-index:1;max-width:15.5em;font-size:14.5px;line-height:1.5;color:var(--muted)}
.crd .cr-darkp__char{position:absolute;right:8px;bottom:84px;width:150px;transform:rotate(7deg);opacity:.96}
.crd .cr-darkp .cr-btn{position:relative;z-index:1;margin-top:auto}
.crd .cr-allf{flex:1;display:flex;flex-direction:column;padding:24px 22px 22px;background:linear-gradient(180deg,#FFFDF6,#FAF4DF)}
.crd .cr-allf__title{font-size:34px;line-height:.92}
.crd .cr-allf__lede{margin-top:10px;font-size:14.5px;line-height:1.5;color:var(--muted)}
.crd .cr-cal__head{display:flex;align-items:center;justify-content:space-between;margin-top:18px}
.crd .cr-cal__month{font-weight:900;font-size:12.5px;letter-spacing:.18em;text-transform:uppercase}
.crd .cr-cal__nav{display:flex;gap:6px}
.crd .cr-calbtn{width:36px;height:36px;padding:0;border-radius:10px;border:1.5px solid var(--ink);background:transparent;display:grid;place-items:center;cursor:pointer}
.crd .cr-calbtn:disabled{border-color:rgba(46,45,42,.2);color:rgba(46,45,42,.3);cursor:default}
.crd .cr-calbtn .cr-ico{width:16px;height:16px}
.crd .cr-cal__dow{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px;margin-top:12px;font-weight:900;font-size:10px;letter-spacing:.12em;text-align:center;color:var(--muted)}
.crd .cr-cal__grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px;margin-top:7px}
.crd .cr-cal__cell{height:40px;display:grid;place-items:center;border-radius:10px;border:1.5px solid var(--ink);background:#fff;font-weight:900;font-size:13.5px;color:var(--ink);text-decoration:none;transition:background .15s,color .15s}
.crd a.cr-cal__cell:hover{background:var(--ink);color:var(--cream)}
.crd .cr-cal__cell.is-dark{border-color:rgba(46,45,42,.16);background:transparent;color:rgba(46,45,42,.68)}
.crd .cr-cal__cell.is-tight{border-color:var(--ox);color:var(--ox);background:#FBEDE8}
.crd a.cr-cal__cell.is-tight:hover{background:var(--ox);color:#FFF6E0}
.crd .cr-cal__cell.is-blank{border:0;background:none}
.crd .cr-legend{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:14px;font-size:12px;color:var(--muted)}
.crd .cr-legend span{display:inline-flex;align-items:center;gap:6px}
.crd .cr-lg{display:inline-block;width:10px;height:10px;border-radius:50%}
.crd .cr-lg--on{background:var(--ink)}
.crd .cr-lg--dark{border:1.5px solid rgba(46,45,42,.3)}
.crd .cr-lg--tight{background:var(--ox)}
.crd .cr-allf__cta{margin-top:auto;padding-top:18px}
.crd .cr-fine{margin-top:9px;font-size:12px;line-height:1.4;color:var(--muted)}

/* New here */
.crd .cr-new{padding:80px 0 0}
.crd .cr-new__panel{position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"copy media" "stats media" "ctas media";grid-template-rows:auto auto 1fr;column-gap:clamp(32px,5vw,72px);row-gap:28px;padding:clamp(28px,5vw,72px);border-radius:30px;color:var(--ivory);background:var(--green) url('../design/texture-felt.webp') center/360px;box-shadow:0 40px 80px -50px rgba(46,45,42,.7)}
.crd .cr-new__panel::after{content:'';position:absolute;inset:12px;z-index:-1;border:1px solid rgba(255,251,234,.16);border-radius:22px;pointer-events:none}
.crd .cr-new__mono{position:absolute;z-index:-1;left:-70px;bottom:-110px;width:400px;opacity:.07;pointer-events:none}
.crd .cr-new__copy{grid-area:copy}
.crd .cr-new__eyebrow{font-size:42px;color:var(--gold);transform:rotate(-4deg);transform-origin:left bottom}
.crd .cr-new__title{margin-top:14px;font-size:clamp(32px,3.4vw,50px);line-height:1;color:var(--ivory)}
.crd .cr-new__lede{margin-top:20px;max-width:32em;font-size:18px;line-height:1.6;color:rgba(255,251,234,.92)}
.crd .cr-new__media{grid-area:media}
.crd .cr-stats{grid-area:stats;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.crd .cr-stat{padding:18px 16px 16px;border-radius:16px;border:1px solid rgba(255,251,234,.3);background:rgba(16,26,14,.16)}
.crd .cr-stat__n{font-family:'futura-pt-bold','Futura',sans-serif;font-weight:800;text-transform:uppercase;font-size:30px;line-height:1;white-space:nowrap;color:var(--gold)}
.crd .cr-stat__l{margin-top:8px;font-size:14px;line-height:1.35;color:rgba(255,251,234,.88)}
.crd .cr-new__ctas{grid-area:ctas;align-self:start;display:flex;flex-wrap:wrap;gap:12px}

/* Venue photo (Brett, 07 Oct, round 3): the New here panel shows the room, a full house, in place of the drawn stage. */
.crd .cr-new__photo{position:relative;overflow:hidden;min-height:460px;height:100%;border-radius:22px;background:#1d1a14;box-shadow:0 30px 60px -30px rgba(0,0,0,.55)}
.crd .cr-new__photo img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover}
.crd .cr-new__photo::after{content:'';position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);pointer-events:none}

/* Most booked */
.crd .cr-pop{padding:120px 0 64px;overflow:hidden}
.crd .cr-pop__inner{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:center;gap:48px}
.crd .cr-pop__title{font-size:clamp(56px,7.2vw,108px);line-height:.86}
.crd .cr-pop__ctrl{display:flex;align-items:center;gap:12px;margin-top:34px}
.crd .cr-stack{position:relative;height:560px;touch-action:pan-y;-webkit-user-select:none;user-select:none;cursor:grab}
.crd .cr-stack::before{content:'';position:absolute;left:50%;top:50%;width:560px;height:560px;margin:-290px 0 0 -280px;border-radius:50%;background:radial-gradient(rgba(255,188,41,.7) 1.7px,rgba(255,188,41,0) 2.5px) 0 0/11px 11px;-webkit-mask:radial-gradient(closest-side,#000 55%,transparent);mask:radial-gradient(closest-side,#000 55%,transparent);pointer-events:none}
.crd .cr-stack:active{cursor:grabbing}
.crd .cr-popcard{position:absolute;top:12px;left:50%;width:420px;margin-left:-210px;display:flex;flex-direction:column;overflow:hidden;background-color:var(--card);background-image:linear-gradient(rgba(255,253,246,.85),rgba(255,253,246,.85)),url('../design/grain.webp');background-size:auto,220px 220px;background-blend-mode:normal,multiply;border-radius:24px;border:1px solid rgba(46,45,42,.16);box-shadow:0 40px 70px -40px rgba(46,45,42,.65),0 10px 24px -16px rgba(46,45,42,.35);transform-origin:50% 90%;transition:transform .45s cubic-bezier(.2,.75,.2,1),opacity .35s ease}
.crd .cr-popart{position:relative;isolation:isolate;overflow:hidden;height:232px;color:var(--ivory)}
.crd .cr-popart.cr-art--mainstage{background:url('../design/tile-main-stage.jpg') center/auto 100% no-repeat,url('../design/texture-felt.webp') center/360px}
.crd .cr-popart.cr-art--gold,.crd .cr-popart.cr-art--sage{color:var(--ink)}
.crd .cr-rank{position:absolute;z-index:4;top:16px;left:16px;display:inline-flex;align-items:center;height:30px;padding:0 12px;border-radius:999px;background:var(--cream);color:var(--ink);font-weight:900;font-size:10.5px;line-height:1;letter-spacing:.16em;text-transform:uppercase;box-shadow:-2px 2px 0 rgba(0,0,0,.28)}
.crd .cr-popart__type{position:absolute;z-index:2;left:20px;bottom:18px;max-width:58%;font-family:'futura-pt-bold','Futura',sans-serif;font-weight:800;text-transform:uppercase;font-size:33px;line-height:.92;letter-spacing:.01em}
.crd .cr-popart.cr-art--gold .cr-popart__type,.crd .cr-popart.cr-art--sage .cr-popart__type{text-shadow:-1px 1px 0 rgba(255,255,255,.45),-2px 2px 0 rgba(255,255,255,.3),-3px 3px 0 rgba(255,255,255,.18)}
.crd .cr-popart__char{position:absolute;z-index:1;right:-4px;bottom:-30px;height:120%;width:auto;max-width:none;transform:rotate(5deg);filter:drop-shadow(-5px 6px 0 rgba(0,0,0,.2))}
.crd .cr-popcard__body{padding:20px 22px 0}
.crd .cr-popcard__tags{display:flex;align-items:center;gap:12px}
.crd .cr-cattag{display:inline-flex;align-items:center;height:24px;padding:0 9px;border:1px solid rgba(46,45,42,.4);border-radius:4px;font-weight:900;font-size:10px;line-height:1;letter-spacing:.15em;text-transform:uppercase;color:var(--muted)}
.crd .cr-status{display:inline-flex;align-items:center;gap:7px;font-weight:900;font-size:12.5px}
.crd .cr-status i{display:inline-block;width:8px;height:8px;border-radius:50%;background:currentColor}
.crd .cr-status--fast{color:#9A5B00}
.crd .cr-status--ok{color:var(--green)}
.crd .cr-popcard__title{margin-top:12px;font-size:30px;line-height:.98}
.crd .cr-popcard__sub{margin-top:5px;font-style:italic;font-size:15px;line-height:1.3}
.crd .cr-popcard__dates{margin-top:6px;font-size:14.5px;color:var(--muted)}
.crd .cr-popcard__foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 22px 22px}
.crd .cr-price--lg{margin-top:0;font-size:16px}
.crd .cr-stamp{position:absolute;z-index:6;top:22px;padding:6px 14px;border:3px solid currentColor;border-radius:10px;background:rgba(255,253,246,.88);font-family:'futura-pt-bold','Futura',sans-serif;font-weight:800;font-size:24px;line-height:1;letter-spacing:.08em;text-transform:uppercase;pointer-events:none}
.crd .cr-stamp--yes{right:20px;color:var(--ox);transform:rotate(9deg)}
.crd .cr-stamp--no{left:20px;color:var(--ink);transform:rotate(-9deg)}

/* Citizens */
.crd .cr-cit{padding:20px 0 40px}
.crd .cr-cit__card{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:44px;padding:34px 48px 34px 44px;overflow:hidden;border-radius:26px;background-color:var(--card);background-image:linear-gradient(rgba(255,253,246,.85),rgba(255,253,246,.85)),url('../design/grain.webp');background-size:auto,220px 220px;background-blend-mode:normal,multiply;border:1px solid rgba(46,45,42,.16);box-shadow:0 30px 60px -44px rgba(46,45,42,.6)}
.crd .cr-cit__card::after{content:'';position:absolute;inset:9px;border:1px solid rgba(79,116,74,.26);border-radius:19px;pointer-events:none}
.crd .cr-pass{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;width:124px;height:166px;margin:6px 4px 6px 8px;border-radius:8px 14px 14px 8px;color:var(--gold);background:linear-gradient(90deg,var(--green-dk) 0 10px,var(--green) 10px);box-shadow:-5px 5px 0 #263D23,0 22px 30px -18px rgba(0,0,0,.55);transform:rotate(-7deg)}
.crd .cr-pass::before{content:'';position:absolute;inset:9px 8px 9px 18px;border:1px solid rgba(255,188,41,.55);border-radius:6px}
.crd .cr-pass__mono{width:58px;filter:sepia(1) saturate(2.6) hue-rotate(-12deg) brightness(.97)}
.crd .cr-pass__t{padding-left:9px;font-weight:900;font-size:7.5px;line-height:1;letter-spacing:.3em;text-transform:uppercase}
.crd .cr-cit__title{font-size:46px;line-height:1}
.crd .cr-cit__text{margin-top:10px;max-width:34em;font-size:18px;color:var(--muted)}

/* Bar & food */
.crd .cr-bar{padding:76px 0 120px;overflow:hidden}
.crd .cr-bar__head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.crd .cr-bar__eyebrow{font-size:42px;color:var(--ox);transform:rotate(-4deg);transform-origin:left bottom}
.crd .cr-bar__title{margin-top:14px;max-width:12em;font-size:clamp(30px,4.2vw,58px);line-height:.95}
.crd .cr-pill{flex:none;display:inline-flex;align-items:center;gap:10px;height:50px;padding:0 22px;border-radius:999px;border:1.5px solid var(--ink);font-weight:900;font-size:14.5px;text-decoration:none;white-space:nowrap;transition:background .2s,color .2s}
.crd .cr-pill:hover{background:var(--ink);color:var(--cream)}
.crd .cr-bar__lede{margin-top:16px;max-width:36em;font-size:18px;color:var(--muted)}
.crd .cr-barrail{margin-top:40px;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.crd .cr-bartrack{display:flex;gap:20px;width:max-content;padding-right:20px;animation:cr-marquee 80s linear infinite}
.crd .cr-barrail:hover .cr-bartrack{animation-play-state:paused}
@keyframes cr-marquee{from{transform:translate3d(0,0,0)}to{transform:translate3d(-33.3333%,0,0)}}
.crd .cr-barcard{flex:none;width:252px;overflow:hidden;border-radius:20px;background-color:var(--card);background-image:linear-gradient(rgba(255,253,246,.85),rgba(255,253,246,.85)),url('../design/grain.webp');background-size:auto,220px 220px;background-blend-mode:normal,multiply;border:1px solid rgba(46,45,42,.16);box-shadow:0 24px 40px -32px rgba(46,45,42,.55);transition:transform .35s cubic-bezier(.2,.75,.2,1)}

@media (hover:hover){
  .crd .cr-barcard:hover{transform:translateY(-4px) rotate(-1deg)}
}

/* Bar & food */
.crd .cr-barcard__art{position:relative;isolation:isolate;overflow:hidden;height:222px;display:flex;align-items:flex-end;justify-content:center;color:var(--ivory)}
.crd .cr-barcard__art.cr-art--gold,.crd .cr-barcard__art.cr-art--sage{color:var(--ink)}
.crd .cr-barcard__art.is-left{justify-content:flex-start}
.crd .cr-barcard__art.is-right{justify-content:flex-end}
.crd .cr-barcard__art img{height:86%;width:auto;max-width:none;margin-bottom:-8px;filter:drop-shadow(-4px 6px 0 rgba(0,0,0,.22))}
.crd .cr-barcard__art.is-left img{margin-left:-2px}
.crd .cr-barcard__art.is-right img{margin-right:-2px}
.crd .cr-typetile{align-self:center;display:flex;flex-direction:column;align-items:center;gap:6px;padding:0 16px;text-align:center}
.crd .cr-typetile__a{font-family:'futura-pt-bold','Futura',sans-serif;font-weight:800;text-transform:uppercase;font-size:34px;line-height:.92;letter-spacing:.01em}
.crd .cr-typetile__b{font-family:'Norican','Brush Script MT',cursive;font-size:30px;line-height:1}
.crd .cr-art--ink .cr-typetile__b{color:var(--gold)}
.crd .cr-art--sage .cr-typetile__b{color:var(--ox)}
.crd .cr-art--ox .cr-typetile__b{color:var(--gold)}
.crd .cr-barcard__body{padding:16px 18px 18px}
.crd .cr-barcard__name{font-family:'futura-pt-bold','Futura',sans-serif;font-weight:800;text-transform:uppercase;font-size:17px;line-height:1.05;letter-spacing:.015em}
.crd .cr-barcard__note{margin-top:4px;font-size:14px;color:var(--muted)}

/* States view */
.crd .cr-states{padding:0;background:var(--cream)}

@media (max-width:899px){
  .crd .cr-railhead{display:none}
  .crd .cr-tonight{padding-top:16px}
  .crd .cr-rail{gap:12px;padding-bottom:30px}
  .crd .cr-day{width:calc(100% - 28px);border-radius:20px}
  .crd .cr-hero{height:214px;padding:16px}
  .crd .cr-hero__title{font-size:44px}
  .crd .cr-bookbar{padding:15px 16px 11px}
  .crd .cr-darkp{padding:20px 16px}
  .crd .cr-allf{padding:22px 18px 18px}
  .crd .cr-allf__title{font-size:30px}
  .crd .cr-cal__cell{height:36px;border-radius:9px;font-size:12.5px}
  .crd .cr-cal__grid,.crd .cr-cal__dow{gap:4px}
  .crd .cr-new{padding-top:44px}
  .crd .cr-new__panel{grid-template-columns:minmax(0,1fr);grid-template-areas:"copy" "media" "stats" "ctas";grid-template-rows:none;row-gap:20px;padding:26px 20px 22px;border-radius:24px}
  .crd .cr-new__panel::after{inset:8px;border-radius:18px}
  .crd .cr-new__eyebrow{font-size:34px}
  .crd .cr-new__title{margin-top:10px;font-size:29px;line-height:1.02}
  .crd .cr-new__lede{margin-top:14px;font-size:16px}
  .crd .cr-new__photo{min-height:0;height:auto;aspect-ratio:16/11;border-radius:16px}
  .crd .cr-stats{gap:8px}
  .crd .cr-stat{padding:12px 11px;border-radius:12px}
  .crd .cr-stat__n{font-size:19px}
  .crd .cr-stat__l{margin-top:5px;font-size:12.5px}
  .crd .cr-new__ctas{flex-direction:column;gap:10px}
  .crd .cr-new__ctas .cr-btn{width:100%}
  .crd .cr-pop{padding:56px 0 32px}
  .crd .cr-pop__inner{grid-template-columns:minmax(0,1fr);gap:16px}
  .crd .cr-pop__intro{order:2}
  .crd .cr-pop__title{display:none}
  .crd .cr-pop__ctrl{justify-content:center;margin-top:0}
  .crd .cr-stack{height:458px}
  .crd .cr-stack::before{width:380px;height:380px;margin:-200px 0 0 -190px}
  .crd .cr-popcard{top:8px;left:16px;width:calc(100% - 32px);margin-left:0;border-radius:20px}
  .crd .cr-popart{height:176px}
  .crd .cr-popart__type{left:16px;bottom:14px;font-size:25px}
  .crd .cr-popcard__body{padding:16px 18px 0}
  .crd .cr-popcard__title{font-size:23px}
  .crd .cr-popcard__sub{font-size:14px}
  .crd .cr-popcard__dates{font-size:13.5px}
  .crd .cr-popcard__foot{padding:14px 18px 18px}
  .crd .cr-stamp{font-size:19px;top:16px}
  .crd .cr-cit{padding:20px 0 28px}
  .crd .cr-cit__card{grid-template-columns:auto minmax(0,1fr);gap:18px 18px;padding:22px 20px}
  .crd .cr-cit__card::after{inset:6px;border-radius:15px}
  .crd .cr-cit__card .cr-btn{grid-column:1 / -1;width:100%}
  .crd .cr-pass{width:68px;height:92px;gap:0;margin:4px 0 4px 6px;border-radius:5px 9px 9px 5px;box-shadow:-3px 3px 0 #263D23,0 14px 20px -12px rgba(0,0,0,.5)}
  .crd .cr-pass::before{inset:5px 5px 5px 11px;border-radius:4px}
  .crd .cr-pass__mono{width:32px}
  .crd .cr-pass__t{display:none}
  .crd .cr-cit__title{font-size:30px}
  .crd .cr-cit__text{margin-top:6px;font-size:15.5px}
  .crd .cr-bar{padding:52px 0 64px}
  .crd .cr-bar__head{gap:14px}
  .crd .cr-bar__eyebrow{font-size:31px}
  .crd .cr-bar__title{margin-top:10px;font-size:26px}
  .crd .cr-pill{height:42px;padding:0 15px;gap:8px;font-size:13px}
  .crd .cr-pill .cr-ico{width:15px;height:15px}
  .crd .cr-bar__lede{margin-top:10px;font-size:15.5px}
  .crd .cr-barrail{margin-top:22px;overflow-x:auto;-webkit-mask-image:none;mask-image:none;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gut);scrollbar-width:none;padding-left:var(--gut)}
  .crd .cr-barrail::-webkit-scrollbar{display:none}
  .crd .cr-bartrack{gap:12px;padding-right:var(--gut);animation:none}
  .crd .cr-barcard{width:156px;border-radius:16px;scroll-snap-align:start}
  .crd .cr-barcard.is-dup{display:none}
  .crd .cr-barcard__art{height:130px}
  .crd .cr-typetile__a{font-size:20px}
  .crd .cr-typetile__b{font-size:19px}
  .crd .cr-barcard__body{padding:11px 12px 13px}
  .crd .cr-barcard__name{font-size:14px}
  .crd .cr-barcard__note{font-size:12.5px}
}

@media (max-width:599px){
  .crd .cr-promo__inner{gap:12px;min-height:74px;padding:13px 0}
  .crd .cr-promo__tag{display:none}
  .crd .cr-promo__kicker{display:block}
  .crd .cr-promo__art .cr-art__ini{font-size:17px}
  .crd .cr-promo__title{font-size:15px}
  .crd .cr-promo__sub{font-size:12.5px}
  .crd .cr-promo__cta{width:42px;height:42px;padding:0;justify-content:center}
  .crd .cr-promo__cta span{display:none}
  .crd .cr-show{grid-template-columns:56px minmax(0,1fr) auto;gap:12px;padding:14px 16px}
  .crd .cr-show__title{font-size:15px}
  .crd .cr-show__meta{font-size:12.5px}
  .crd .cr-price{font-size:13px}
}

/* Review round 1 */
.crd .cr-pop__all{display:none}
.crd .cr-stats{gap:10px}
.crd .cr-stat__n{font-size:clamp(19px,2.1vw,30px);white-space:normal}
.crd .cr-stat__l{color:rgba(255,251,234,.96)}

@media (min-width:900px){
  .crd .cr-new{padding-top:56px}
  .crd .cr-pop{padding:96px 0 48px}
  .crd .cr-cit{padding:0 0 48px}
  .crd .cr-bar{padding:48px 0 120px}
  .crd .cr-pop__inner{display:block}
  .crd .cr-pop__intro{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:34px}
  .crd .cr-pop__title{font-size:clamp(44px,4.6vw,66px);line-height:.9}
  .crd .cr-pop__title br{display:none}
  .crd .cr-pop__ctrl{display:none}
  .crd .cr-pop__all{display:inline-flex;margin-bottom:2px;font-size:14px}
  .crd .cr-stack{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;height:auto;cursor:auto;touch-action:auto;-webkit-user-select:auto;user-select:auto}
  .crd .cr-stack::before{display:none}
  .crd .cr-popcard{position:relative;top:auto;left:auto;width:auto;margin:0;transform:none!important;opacity:1!important;pointer-events:auto!important;z-index:auto!important;box-shadow:0 30px 56px -40px rgba(46,45,42,.6),0 8px 18px -14px rgba(46,45,42,.25);transition:transform .35s cubic-bezier(.2,.75,.2,1),box-shadow .35s}
  .crd .cr-popart{height:200px}
  .crd .cr-popart.cr-art--mainstage{background-size:auto 78%,360px;background-position:center}
  .crd .cr-popcard__foot{margin-top:auto}
  .crd .cr-stamp{display:none}
  .crd .cr-rail:not(.cr-rail--grid){-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--rail-pad),#000 calc(100% - var(--rail-pad)),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 var(--rail-pad),#000 calc(100% - var(--rail-pad)),transparent 100%)}
}

@media (min-width:900px) and (hover:hover){
  .crd .cr-popcard:hover{transform:translateY(-4px)!important;box-shadow:0 40px 64px -40px rgba(46,45,42,.65),0 10px 22px -14px rgba(46,45,42,.28)}
}

@media (min-width:1100px){
  .crd .cr-barrail{width:min(var(--wrap),calc(100% - 2 * var(--gut)));margin-inline:auto;overflow:visible;-webkit-mask-image:none;mask-image:none}
  .crd .cr-bartrack{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px;width:auto;padding-right:0;animation:none}
  .crd .cr-barcard{width:auto}
  .crd .cr-barcard.is-dup{display:none}
  .crd .cr-barcard__art{height:188px}
  .crd .cr-typetile__a{font-size:24px}
  .crd .cr-typetile__b{font-size:24px}
}

@media (max-width:1199px){
  .crd .cr-strip{padding-right:44px;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 56px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 56px),transparent)}
}

@media (min-width:640px) and (max-width:899px){
  .crd .cr-day{width:calc(50% - 22px)}
}

@media (max-width:599px){
  .crd .cr-stat{padding:12px 10px}
  .crd .cr-stat__n{font-size:17px}
  .crd .cr-stat__l{font-size:12px;hyphens:none;-webkit-hyphens:none}
}

@media (prefers-reduced-motion:reduce){
  .crd .cr-bartrack,.crd .cr-promo::before,.crd .cr-promo::after,.crd .cr-dot--pulse,.crd .cr-dot--go{animation:none}
  .crd .cr-barrail{overflow-x:auto}
  .crd .cr-popcard{transition:none}
}

/* Promoted billboard (Brett, 07 Oct, round 2): from 600px the promoted show's photo fills the strip behind the text, fading to dark on the left; a promo video, when staff add one, plays muted on desktop with a pause button. Phones keep the compact strip with the photo in the tile. */
.crd .cr-promo-box{position:relative}
.crd .cr-promo__media,.crd .cr-promo__pause{display:none}
.crd .cr-promo__thumb{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

@media (min-width:600px){
  .crd .cr-promo.is-media .cr-promo__inner{min-height:200px;padding:30px 0;gap:22px}
  .crd .cr-promo.is-media .cr-promo__art{display:none}
  .crd .cr-promo.is-media .cr-promo__title{font-size:clamp(26px,2.65vw,38px);line-height:1}
  .crd .cr-promo.is-media .cr-promo__sub{margin-top:4px;font-size:16.5px;color:rgba(245,240,211,.88)}
  .crd .cr-promo.is-media .cr-promo__cta{height:56px;padding:0 26px;font-size:15.5px;box-shadow:-3px 3px 0 var(--gold-dk)}
  .crd .cr-promo.is-media .cr-promo__media{display:block;position:absolute;inset:0;z-index:-1}
  .crd .cr-promo__img,.crd .cr-promo__video{position:absolute;top:0;right:0;width:62%;height:100%;max-width:none;object-fit:cover;object-position:center 30%}
  .crd .cr-promo__video{opacity:0;transition:opacity .6s ease}
  .crd .cr-promo__video.is-on{opacity:1}
  .crd .cr-promo__media::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,var(--ink-dk) 0%,var(--ink-dk) 34%,rgba(36,35,33,.55) 62%,rgba(36,35,33,.18) 100%)}
}

@media (min-width:600px) and (max-width:899px){
  .crd .cr-promo.is-media .cr-promo__inner{min-height:170px;padding:26px 0}
  .crd .cr-promo__img,.crd .cr-promo__video{width:72%}
  .crd .cr-promo__media::after{background:linear-gradient(90deg,var(--ink-dk) 0%,var(--ink-dk) 26%,rgba(36,35,33,.74) 58%,rgba(36,35,33,.4) 100%)}
}

@media (min-width:900px){
  .crd .cr-promo-box.has-video .cr-promo__pause{display:grid;place-items:center;position:absolute;z-index:3;right:18px;bottom:20px;width:38px;height:38px;padding:0;border-radius:50%;border:1.5px solid rgba(255,251,234,.6);background:rgba(36,35,33,.55);color:var(--ivory);cursor:pointer;transition:background .2s,color .2s}
  .crd .cr-promo-box.has-video .cr-promo__pause:hover{background:var(--gold);border-color:var(--gold);color:var(--ink)}
  .crd .cr-promo__pause .cr-ico{width:16px;height:16px}
}

@media (prefers-reduced-motion:reduce){
  .crd .cr-promo__video{display:none}
}
/* ==== PORT-END ==== */

/* ==== Theme additions — not in the design. Keep them few and small. ==== */

/* Most booked art from an uploaded image: .cr-popart.cr-art--mainstage with the URL in --art (in the
   desktop grid at the design's 78%, as .cr-popart.cr-art--mainstage there). */
.crd .cr-popart.cr-art--image{background:var(--art) center/auto 100% no-repeat,url('../design/texture-felt.webp') center/360px}
@media (min-width:900px){
  .crd .cr-popart.cr-art--image{background-size:auto 78%,360px;background-position:center}
}

/* Bar card with a photo (a Bar item whose art is Image): the photo fills the art instead of standing in it like a character. */
.crd .cr-barcard__art.is-photo img{position:absolute;inset:0;width:100%;height:100%;max-width:none;margin:0;object-fit:cover;filter:none}

/* A night's lead show photo (template-parts/components/night-card.php, cr_rail_lead()) in place of the curtain,
   under the scrim. No warm spotlight (it washes faces out); a top shade keeps the day pill legible and
   the band under the date and title is dark enough for 4.5:1 over bright photos and poster lettering. */
/* The small type gets a soft shadow; the title keeps the design's extrude (.cr-x-light, a text-shadow). */

/* Keyboard focus pauses the bar marquee as hover does; with reduced motion the still rail drops the loop copies. */
.crd .cr-barrail:focus-within .cr-bartrack{animation-play-state:paused}

/* The strip scroller would clip a focus ring drawn outside the pill: draw it inside. */
.crd .cr-strip__item:focus-visible{outline-offset:-3px}

/* The billboard's pause button (home.js): pause bars while the clip runs, a play triangle once the
   visitor pauses it, and the dark-surface focus ring. */
.crd .cr-promo__pause .cr-ico + .cr-ico,.crd .cr-promo__pause.is-paused .cr-ico:first-child{display:none}
.crd .cr-promo__pause.is-paused .cr-ico + .cr-ico{display:block;fill:currentColor}
.crd .cr-promo__pause:focus-visible{outline-color:var(--gold);box-shadow:0 0 0 3px var(--ink-dk)}

/* From 1200px the design's strip has no fade: its twelve nights and "All dates" just fit at 1440.
   At 1200–1439px, or with a thirteen-night week, they do not, and "All dates" was cut mid-word with
   no sign the strip scrolls. home.js sets .is-clipped while the pills do not fit; the strip then
   fades out as the design's does under 1200px. */
@media (min-width:1200px){
  .crd .cr-strip.is-clipped{padding-right:44px;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 56px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 56px),transparent)}
}

/* Without JS (no html.cr-js) the buttons that jump or step do nothing, so they hide (strip, ‹ ›, Next
   show night; Next available is a #night-… link and still works), the rail shows its scrollbar, and
   on phones (the stack; from 900px the design's grid needs no JS) the Most booked stack lays out as a
   swipe row of every card. */
html:not(.cr-js) .crd .cr-railhead,html:not(.cr-js) .crd .cr-darkp .cr-btn,html:not(.cr-js) .crd .cr-pop__ctrl{display:none}
html:not(.cr-js) .crd .cr-rail{scrollbar-width:thin}
@media (max-width:899px){
  html:not(.cr-js) .crd .cr-stack{display:flex;gap:16px;height:auto;padding:12px 0 28px;overflow-x:auto;scroll-snap-type:x mandatory;cursor:auto}
  html:not(.cr-js) .crd .cr-stack::before{display:none}
  html:not(.cr-js) .crd .cr-popcard{position:relative;top:auto;left:auto;flex:none;margin-left:0;scroll-snap-align:start;transform:none!important;opacity:1!important;pointer-events:auto!important}
}

/* Day cards with real titles and prices. The design's rows (art | words | ticket stub) were drawn
   for a 322px card (390px); narrower cards — phones under 390px, and the 640–899px rule's two-up
   cards — left the words 37–50px wide, so long titles, "/ Citizens $20", the chips and Next
   available ran under the stub. Each card is a size container: under the 390px card's width the
   stub drops under the words (still the row's own ticket), and a word too long for its line breaks
   rather than running out. From 640 to 899px the cards keep a 360px floor (the rail scrolls, as it
   does on phones), so the words keep the 390px design's room. */
@container (max-width:319px){
  .crd .cr-show{grid-template-columns:56px minmax(0,1fr);row-gap:10px}
  .crd .cr-show>.cr-tix{grid-column:2;justify-self:start}
  .crd .cr-show .cr-price{white-space:normal}
}

/* Most booked grid (from 900px) with real show names: the art tile's big title is sized to its tile
   (the design's 33px from a 420px tile, 1440px) and stops at three lines, so a long name no longer
   climbs under the "#N Most booked" badge, and a long word stays inside the tile; the card title (30px) shrinks with a
   narrow card (900–1100px) and breaks a word too long for the card rather than being cut off. */
@media (min-width:900px){
  .crd .cr-popart,.crd .cr-popcard{container-type:inline-size}
  .crd .cr-popart__type{font-size:clamp(20px,7.9cqi,33px);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden}
  .crd .cr-popcard__title{font-size:min(30px,9cqi);overflow-wrap:anywhere}
}

/* The clamp above hides what overflows the title's 58%: a word of 11+ letters ("LAUGHTERNOONS",
   home-most-booked.php sets --cr-word, its length) was cut ("LAUGHTERNOC"). It is sized so the word
   fits the 58% (about .72em a letter), never above the size above; a word that still cannot fit
   breaks rather than being cut. The design's own names carry no --cr-word. */
@media (min-width:900px){
  .crd .cr-popart__type[style*="--cr-word"]{font-size:min(clamp(20px,7.9cqi,33px),calc(58cqi / (var(--cr-word) * .72)));overflow-wrap:break-word}
}

/* A Most booked art title of more than 20 characters (home-most-booked.php: is-long) runs to three
   lines, and the upper lines climb into the character (the mouth's lip and legs, the mic's arm). It
   drops to two-thirds of the size in a 50% column, so its three lines take the height of the design's
   two-line names and stay in the clear corner the design gives them; still three lines at most. In the
   desktop grid the character keeps its size (120% of a 200px band) while the tile narrows (900–1200px),
   so the column also stops 175px from the tile's right edge, short of the character's legs. */
.crd .cr-popart__type.is-long{max-width:50%}
@media (max-width:899px){
  .crd .cr-popart__type.is-long{font-size:17px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden}
}
@media (min-width:900px){
  .crd .cr-popart__type.is-long{max-width:min(50%,calc(100% - 175px));font-size:clamp(14px,5.27cqi,22px)}
  .crd .cr-popart__type.is-long[style*="--cr-word"]{font-size:min(clamp(14px,5.27cqi,22px),calc(min(50cqi,100cqi - 175px) / (var(--cr-word) * .72)))}
}

/* A day-card title with a word of 13+ letters (cr_rail_row() long: "LAUGHTERNOONS") a size down on
   phones and tablets, so the word fits the row's text column instead of breaking mid-word. */

/* Touch screens (pointer: coarse): the future-dates calendar's month arrows (36px) and each day
   card's "Filter by type" (36px tall) get 44px hit areas without changing what is drawn. The
   calendar's day cells (35–47px, 4–5px apart) are the design's size: their hit areas take half the
   gap above and below (40px tall on phones). "Next available" (one or two 17px lines) gets 44px. */

/* Brett, 07 Oct (after round 3), over the ported design — home only where it says body.home.
   1. The date strip sits above the cards (template-parts/home-rail.php) with 19px (17px) under it.
   2. The promoted strip has no running lights.
   3. Night cards: corners 10px (9px phones), status badges 30px, ticket stubs 5px, 20px apart (12px
      phones), three from 1200px and two on tablets, art 228px (177px), Book header 19px / 20px
      (16px), show rows 16px / 15px (14px / 11px); a softer shadow and a slightly smaller day and date.
   4. The top of the homepage is one #2E2D2A piece: the header, the date strip and the cards' band.
      The strip shows on phones too (no counter or arrows there), its tabs to his table. (Since 08 Oct
      phones hide it: section 43.) */
.crd .cr-promo::before,.crd .cr-promo::after{content:none;animation:none}

.crd .cr-railhead{margin-top:0;margin-bottom:19px}
.crd .cr-strip{gap:8px}
.crd .cr-strip__item{width:auto;min-width:72px;height:62px;gap:5px;padding:0 10px;border-radius:var(--cr-radius-sm)}
.crd .cr-strip__dow{font-family:'futura-pt','Helvetica Neue',Helvetica,Arial,sans-serif;font-weight:900;font-size:var(--cr-fs-label);letter-spacing:var(--cr-label-track)}
.crd .cr-strip__num{font-family:'futura-pt-bold','Futura',sans-serif;font-size:25px;line-height:1.15}
.crd .cr-strip__item.is-all{padding:0 18px}
.crd .cr-strip__item.is-all .cr-strip__dow{font-size:var(--cr-fs-label)}

.crd .cr-rail{gap:20px}
@media (max-width:899px){
  .crd .cr-railhead{display:flex;margin-bottom:17px}
  .crd .cr-railctl{display:none}
  .crd .cr-strip{gap:6px}
  .crd .cr-strip__item{min-width:45px;height:54px;gap:4px;padding:0 6px}
  .crd .cr-strip__num{font-size:21px}
  .crd .cr-strip__item.is-all{padding:0 12px}
  .crd .cr-rail{gap:12px}
}

/* 5. No "Promoted" label on the banner, and no art tile beside each show on the night cards. (Rules: components.css, Home components.) */

/* 6. Every night's banner is one shape, 3:2 (the 11 Oct card's photo, 1024 × 682; Brett, 07 Oct):
      about 283px tall on the three-up desktop rail, 205px on a phone. A photo of another shape fills
      it from its centre (cover), curtains and dark nights take the same height. (Rules: components.css, Home components.) */

/* 8. No drop shadows on the night cards' banner words (Brett, 07 Oct): the title's extrude, the
      date line, and the Doors pill and its line. The photo scrim keeps them legible. (Rules: components.css, Home components.) */

/* 9. The promoted billboard is twice as tall (Brett, 07 Oct), and a YouTube video (home.js) fills
      the photo's area, cropped to cover it, with a sound button beside the pause button. */
.crd .cr-promo__mute{display:none}
@media (min-width:600px){
  .crd .cr-promo.is-media .cr-promo__inner{min-height:400px}
  .crd .cr-promo__yt{position:absolute;top:0;right:0;width:62%;height:100%;overflow:hidden;container-type:size;opacity:0;transition:opacity .6s ease;pointer-events:none}
  .crd .cr-promo__yt.is-on{opacity:1}
  /* Oversized 140% and centred, so YouTube's title bar, logo and caption line fall outside the banner. */
  .crd .cr-promo__ytframe{position:absolute;top:50%;left:50%;width:calc(max(100cqw,177.78cqh) * 1.4);height:calc(max(100cqh,56.25cqw) * 1.4);max-width:none;transform:translate(-50%,-50%);border:0}
}
@media (min-width:600px) and (max-width:899px){
  .crd .cr-promo.is-media .cr-promo__inner{min-height:340px}
}
@media (min-width:900px){
  .crd .cr-promo-box.has-video .cr-promo__mute{display:grid;place-items:center;position:absolute;z-index:3;right:64px;bottom:20px;width:38px;height:38px;padding:0;border-radius:50%;border:1.5px solid rgba(255,251,234,.6);background:rgba(36,35,33,.55);color:var(--ivory);cursor:pointer;transition:background .2s,color .2s}
  .crd .cr-promo-box.has-video .cr-promo__mute:hover{background:var(--gold);border-color:var(--gold);color:var(--ink)}
  .crd .cr-promo__mute .cr-ico{width:17px;height:17px}
  .crd .cr-promo__mute .cr-ico + .cr-ico,.crd .cr-promo__mute.is-loud .cr-ico:first-child{display:none}
  .crd .cr-promo__mute.is-loud .cr-ico + .cr-ico{display:block}
  .crd .cr-promo__mute:focus-visible{outline-color:var(--gold);box-shadow:0 0 0 3px var(--ink-dk)}
}

/* 10. "Filter by type" on the night cards is black (Brett, 07 Oct). (Rules: components.css, Home components.) */

/* 11. The venue photos are low-light shots: brightened in the files themselves (a CSS filter broke
      them inside the phone card stack), under a lighter scrim than a show photo. (Rules: components.css, Home components.) */

/* 12. The Doors pill sits beside LIVE TONIGHT at the top of tonight's banner (Brett, 07 Oct). (Rules: components.css, Home components.) */

/* 13. The sparse-night watermark sits centred at the same height on every card, 40px off the card's
      foot, however many rows sit above it (it was centred in the leftover space). (Rules: components.css, Home components.) */

/* 14. The promoted billboard is the near-black #0F0E0C (Brett, 07 Oct), its fade too. */
.crd .cr-promo{background:#0F0E0C}
@media (min-width:600px){
  .crd .cr-promo__media::after{background:linear-gradient(90deg,#0F0E0C 0%,#0F0E0C 34%,rgba(15,14,12,.55) 62%,rgba(15,14,12,.18) 100%)}
}
@media (min-width:600px) and (max-width:899px){
  .crd .cr-promo__media::after{background:linear-gradient(90deg,#0F0E0C 0%,#0F0E0C 26%,rgba(15,14,12,.74) 58%,rgba(15,14,12,.4) 100%)}
}

/* 16. The billboard's Tickets button is a gold ticket stub with ink type, like every buy button
      (components.css), the same notches and dashed tear line (Brett, 07 Oct). Phones keep the arrow circle. */
@media (min-width:600px){
  .crd .cr-promo.is-media .cr-promo__cta{position:relative;height:var(--cr-btn-h);padding:0 22px 0 38px;border-radius:var(--cr-radius-sm);background:var(--gold);color:var(--ink);box-shadow:none;-webkit-mask:radial-gradient(circle 7px at 0 50%,#0000 96%,#000) 0 0/51% 100% no-repeat,radial-gradient(circle 7px at 100% 50%,#0000 96%,#000) 100% 0/51% 100% no-repeat;mask:radial-gradient(circle 7px at 0 50%,#0000 96%,#000) 0 0/51% 100% no-repeat,radial-gradient(circle 7px at 100% 50%,#0000 96%,#000) 100% 0/51% 100% no-repeat}
  .crd .cr-promo.is-media .cr-promo__cta::before{content:'';position:absolute;left:20px;top:11px;bottom:11px;border-left:1.5px dashed rgba(46,45,42,.45)}
}

/* 17. Desktop: with a photo / video billboard the homepage header floats over it (clear until the
      page scrolls and it turns compact, then black; no blur while clear) and the billboard runs up
      behind it (the header is 89px with its border); its own left-to-right fade is the only shade. */
@media (min-width:900px){
  body.home:has(.cr-promo.is-media) .crd .cr-header{transition:background .3s ease}
  body.home:has(.cr-promo.is-media) .crd .cr-header:not(.is-compact){background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
  body.home:has(.cr-promo.is-media) .crd .cr-promo-box{margin-top:-89px}
  body.home:has(.cr-promo.is-media) .crd .cr-promo.is-media .cr-promo__inner{min-height:489px;padding-top:119px}
}

/* 18. Citizens is the page's one bold colour (Brett, 07 Oct): a full-width band in the deep Citizens
      green (green means Citizens, section 32) with cream type and a gold Join button
      (home-citizens.php), not a white card. The grain is neutral, so it multiplies over the green. */
.crd .cr-cit{margin:24px 0 48px;padding:0;background:var(--cr-green-deep) url('../design/grain.webp') 0 0/220px 220px;background-blend-mode:multiply;color:var(--cream)}
.crd .cr-cit__card{padding:56px 0;border:0;border-radius:0;background:none;box-shadow:none}
.crd .cr-cit__card::after{display:none}
.crd .cr-cit__title{color:var(--ivory)}
.crd .cr-cit__text{color:rgba(245,240,211,.86)}
@media (max-width:899px){
  .crd .cr-cit{margin:12px 0 32px;padding:0}
  .crd .cr-cit__card{padding:36px 0}
}

/* 19. The billboard's sound and pause buttons line up with the page's right edge (the Tickets stub and
      What's on above), and on phones the strip's All dates tab is just its calendar icon. */
.crd .cr-promo-box{--cr-edge:max(var(--gut),calc((100% - var(--wrap)) / 2))}
@media (min-width:900px){
  /* Bare icons, no rings (Brett, 07 Oct): cream, gold on hover, the pause icon's edge on the page edge. */
  .crd.crd .cr-promo-box.has-video :is(.cr-promo__pause,.cr-promo__mute){width:26px;height:38px;border:0;border-radius:0;background:transparent;color:var(--cr-cream);bottom:24px}
  .crd.crd .cr-promo-box.has-video :is(.cr-promo__pause,.cr-promo__mute):hover{border:0;background:transparent;color:var(--cr-marigold)}
  .crd.crd .cr-promo-box.has-video .cr-promo__pause{right:var(--cr-edge);place-items:center end}
  .crd.crd .cr-promo-box.has-video .cr-promo__mute{right:calc(var(--cr-edge) + 40px)}
  .crd.crd .cr-promo-box.has-video :is(.cr-promo__pause,.cr-promo__mute) .cr-ico{width:20px;height:20px}
}
@media (max-width:899px){
  .crd .cr-strip__item.is-all{min-width:45px;padding:0}
  .crd .cr-strip__item.is-all .cr-strip__dow{display:none}
}

/* 20. Most booked art is a photo (cr-popart--photo, the band's background image): a venue photo for
      a season show, else the show's own photo, under the rank badge. */
.crd .cr-popart--photo{background-color:#1d1a14;background-size:cover;background-position:center 35%;background-repeat:no-repeat}
.crd .cr-popart--photo::before{display:none}
.crd .cr-popart--photo .cr-rank{z-index:4}

/* 21. New here sits straight on the cream (Brett, 07 Oct): no green panel, texture or mono mark;
      ink headline, oxblood "New here?" script, big brass numerals with no boxes; the photo stays. */
.crd .cr-new__panel{padding:0;border-radius:0;background:none;box-shadow:none;color:var(--ink)}
.crd .cr-new__panel::after,.crd .cr-new__mono{display:none}
.crd .cr-new__eyebrow{color:var(--ox)}
.crd .cr-new__title{color:var(--ink)}
.crd .cr-new__lede{color:var(--muted)}
.crd .cr-stats{grid-template-columns:repeat(3,auto);justify-content:start;column-gap:clamp(18px,3vw,44px)}
.crd .cr-stat{padding:0;border:0;border-radius:0;background:none}
.crd .cr-stat__n{font-size:var(--cr-fs-h2);white-space:nowrap;color:var(--cr-brass)}
.crd .cr-stat__l{margin-top:8px;color:var(--muted)}
/* On cream the gold button drops the old panel's hard offset step and matches the outline button
   beside it (same box, a hairline of the same weight); the photo loses its drop shadow too. */
.crd .cr-new .cr-btn--gold,.crd .cr-new .cr-btn--gold:hover{box-shadow:none;transform:none}
.crd .cr-new .cr-btn--gold:hover{background:#FFC94D}
.crd .cr-new__photo{box-shadow:none}
@media (max-width:899px){
  .crd .cr-new__panel{padding:0;border-radius:0}
  .crd .cr-stat{padding:0}
  .crd .cr-stat__n{font-size:var(--cr-fs-h3)}
}

/* 22. Phones: the date row spans the width (eight equal tabs, no fade), and its active tab and the
      tabs' type take the night cards' white. (Dormant since 08 Oct: phones hide the strip, section 43.) */
@media (max-width:899px){
  .crd .cr-railhead{display:block}
  .crd .cr-strip{width:100%;padding-right:0;-webkit-mask-image:none;mask-image:none;overflow:visible}
  .crd .cr-strip__item,.crd .cr-strip__item.is-all{flex:1 1 0;min-width:0;width:auto;padding:0}
  body.home .crd .cr-strip__item{color:var(--card)}
  body.home .crd .cr-strip__item.is-on{background-color:var(--card);background-image:linear-gradient(rgba(255,253,246,.85),rgba(255,253,246,.85)),url('../design/grain.webp');background-size:auto,220px 220px;background-blend-mode:normal,multiply;border-color:var(--card);color:var(--ink)}
}

/* 23. The night strip's counter ("Night 1 of 7") goes, its arrows stay; on phones the first night
      card runs to the date row's right edge, the next one still peeking. (Most booked: 27.) */
.crd .cr-tonight .cr-count{display:none}

/* 24. The Bar tiles share one background, the near-black, with the characters in cream line art
      (cr_character_line_url()) and the type tiles in cream with a brass label (section 36). */
.crd .cr-bar .cr-barcard__art img{filter:none}
.crd .cr-bar .cr-barcard__art.is-photo img{filter:none}

/* 25. Under 900px Citizens sits 24px under Most booked (Brett, 07 Oct). (The 07 Oct short photo
      hero for phones that was here is gone: phones get the 70px promoted banner, section 39.) */
@media (max-width:899px){
  .crd .cr-cit{margin-top:24px}
}

/* 26. Type scale (Brett, 07 Oct): the billboard's show title is the biggest type on the page
      (--cr-fs-hero); every section heading shares --cr-fs-h2 (tokens in components.css; 31 below). */
.crd.crd .cr-promo.is-media .cr-promo__title{font-size:var(--cr-fs-hero);line-height:.95}
.crd.crd :is(.cr-new__title,.cr-cit__title,.cr-bar__title){font-size:var(--cr-fs-h2);line-height:1}

/* 27. Most booked (Brett, 07 Oct): a near-black two-column section, headline left and one card deck
      right at every width, stacked as the design's fan (home-modules.js; under 960px the text stacks
      above the deck), in the
      Tonight band's and billboard's colours, type and buttons. Deck layout is html.cr-js only: without
      JS the cards stay the ported grid / swipe row. */
/* (--cr-shadow-card is a token on :root in components.css.) */
.crd.crd .cr-pop{padding:var(--cr-section-pad) 0;background:var(--cr-black);color:var(--cr-cream);overflow:hidden}
.crd.crd .cr-pop__inner{display:grid;grid-template-columns:minmax(0,1fr);align-items:center;gap:40px}
.crd.crd .cr-pop__intro{display:block;order:0;margin:0}
.crd.crd .cr-pop__title{display:block;order:0;margin-top:14px;font-size:var(--cr-fs-h2);line-height:.95;letter-spacing:.01em;color:var(--cr-cream);text-shadow:none}
.crd.crd .cr-pop__lede{margin-top:16px;max-width:30em;font-size:var(--cr-fs-lede);line-height:1.5;color:color-mix(in srgb,var(--cr-cream) 86%,transparent)}
.crd.crd .cr-pop__all{display:inline-block;margin-top:22px;font-weight:700;font-size:var(--cr-fs-link);color:var(--cr-cream);text-decoration:underline 1px currentColor;text-underline-offset:4px}
.crd.crd .cr-pop__all:hover{color:var(--cr-cream);text-decoration-color:var(--cr-marigold)}
@media (min-width:960px){
  .crd.crd .cr-pop__inner{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px}
}
.crd.crd .cr-pop__deck{min-width:0}
.crd.crd .cr-stack{order:0}
.crd.crd .cr-stack::before{display:none}
.crd.crd .cr-stack:focus-visible{outline:2px solid var(--cr-marigold);outline-offset:8px;border-radius:var(--cr-radius-lg)}
html.cr-js .crd .cr-pop .cr-stack{display:block;position:relative;height:600px;cursor:grab;touch-action:pan-y;-webkit-user-select:none;user-select:none}
/* The cards sit as the design stacked them: the front card centred, the fan tucked behind it. */
html.cr-js .crd .cr-pop .cr-popcard{position:absolute;top:8px;left:16px;width:calc(100% - 32px);margin:0;transform-origin:50% 50%}
@media (min-width:960px){
  html.cr-js .crd .cr-pop .cr-stack{height:560px}
  html.cr-js .crd .cr-pop .cr-popcard{--cr-cardw:min(420px,calc(100% - 64px));top:22px;width:var(--cr-cardw);left:calc(50% - var(--cr-cardw) / 2)}
}
/* The card: paper, the card radius and shadow, the show photo at 4:3 with no overlay. */
.crd.crd .cr-pop .cr-popcard{overflow:hidden;border:0;border-radius:var(--cr-radius-lg);background:var(--cr-paper);background-image:none;box-shadow:var(--cr-shadow-card);color:var(--cr-ink);transition:transform .45s cubic-bezier(.2,.75,.2,1),opacity .35s ease}
.crd.crd .cr-pop .cr-popart{height:auto;aspect-ratio:4 / 3}
html.cr-js .crd .cr-pop .cr-popcard{min-height:var(--cr-card-h,0)}
.crd.crd .cr-pop .cr-popcard__foot{margin-top:auto}
.crd.crd .cr-pop .cr-rank{height:28px;padding:0 12px;border-radius:var(--cr-radius-pill);background:var(--cr-paper);color:var(--cr-ink);font-weight:900;font-size:var(--cr-fs-label);letter-spacing:var(--cr-label-track);text-transform:uppercase;box-shadow:none}
/* One tracked label row: "LINE-UP · AVAILABLE" (the category tag and status, no pill or dot). */
.crd.crd .cr-pop .cr-popcard__tags{gap:0}
.crd.crd .cr-pop .cr-cattag,.crd.crd .cr-pop .cr-status{height:auto;padding:0;border:0;border-radius:0;background:none;font-weight:900;font-size:var(--cr-fs-label);line-height:1;letter-spacing:var(--cr-label-track);text-transform:uppercase;color:var(--cr-ink-muted)}
.crd.crd .cr-pop .cr-status{gap:0}
.crd.crd .cr-pop .cr-status i{display:none}
.crd.crd .cr-pop .cr-cattag + .cr-status::before{content:'\00B7';margin:0 .55em;letter-spacing:0}
.crd.crd .cr-pop .cr-popcard__title{margin-top:10px;font-size:var(--cr-fs-h3);line-height:1;color:var(--cr-ink)}
.crd.crd .cr-pop .cr-popcard__sub{color:var(--cr-ink)}
.crd.crd .cr-pop .cr-popcard__dates{font-size:var(--cr-fs-body);font-weight:400;color:var(--cr-ink-muted)}
/* ‹ › either side of the card (Brett, 07 Oct): from 960px they sit off the card's sides, centred on
   it, so the deck column is just the card and the text centres on it; under 960px they sit under the
   card at its left and right edges. The counter stays for screen readers only. */
.crd.crd .cr-pop__deck{position:relative}
.crd.crd .cr-pop__ctrl{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:24px 16px 0}
@media (min-width:960px){
  .crd.crd .cr-pop__ctrl{position:absolute;top:0;bottom:0;left:50%;width:min(620px,100%);margin:0;transform:translateX(-50%);pointer-events:none}
  .crd.crd .cr-pop__ctrl .cr-round{pointer-events:auto}
}
.crd.crd .cr-pop .cr-round{border:1px solid color-mix(in srgb,var(--cr-cream) 40%,transparent);background:transparent;color:var(--cr-cream)}
.crd.crd .cr-pop .cr-round:hover:not(:disabled){background:var(--cr-cream);color:var(--cr-ink)}
.crd.crd .cr-pop .cr-count{position:absolute;width:1px;min-width:0;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* Reduced motion: no slide or rotate; the new front card fades up (home-modules.js adds .is-fading;
   filter, because the deck's inline opacity is !important and would hold an opacity animation). */
@media (prefers-reduced-motion:reduce){
  .crd.crd .cr-pop .cr-popcard{transition:none}
  .crd.crd .cr-pop .cr-popcard.is-fading{animation:cr-deck-fade .35s ease}
}
@keyframes cr-deck-fade{from{filter:opacity(0)}to{filter:opacity(1)}}

/* 28. New here gets the section padding top and bottom (96px, 64px on phones), so it has room above
      and below and the gap into Most booked matches the gap above it (Brett, 07 Oct). */
.crd.crd .cr-new{padding:var(--cr-section-pad) 0}
/* Citizens meets the dark Most booked band directly (no cream strip between them). */
.crd.crd .cr-cit{margin-top:0}

/* 29. The date strip's arrows sit in line with the pills (Brett, 07 Oct): the pills' height, centred on
      them, and one outline for pills and arrows (cream at 40%). */
.crd{--cr-strip-line:color-mix(in srgb,var(--cr-cream) 40%,transparent)}
@media (min-width:900px){
  .crd.crd .cr-tonight .cr-railctl{align-self:center;align-items:center}
  .crd.crd .cr-tonight .cr-round{width:62px;height:62px;border:1px solid var(--cr-strip-line)}
}

/* 30. Every homepage band takes the section pad on the section itself (Brett, 07 Oct): Tonight,
      Citizens and Bar & Food join New here and Most booked at 96px top and bottom (64px on phones). */
.crd.crd :is(.cr-tonight,.cr-cit,.cr-bar){padding-block:var(--cr-section-pad)}
/* Tonight's rail is the scroll box, so it keeps 32px under the cards for their shadow and hover lift
   and gives the same back, so the cards still end one pad above the band's edge. */
.crd.crd .cr-tonight .cr-rail{padding-bottom:32px;margin-bottom:-32px}
/* Citizens: the pad moves off the card onto the oxblood band, with no cream gap under it. The band
   clips now (sideways), not the card, so the tilted pass keeps its corners. */
.crd.crd .cr-cit{margin-bottom:0;overflow:hidden}
.crd.crd .cr-cit__card{padding-block:0;overflow:visible}

body.home .crd .cr-header{background:#0F0E0C;border-bottom-color:transparent;box-shadow:none}
body.home .crd .cr-tonight{background:#0F0E0C;color:var(--cream)}
body.home .crd .cr-count{color:rgba(245,240,211,.72)}
body.home .crd .cr-round{border:1px solid color-mix(in srgb,var(--cr-cream) 40%,transparent);color:var(--cr-cream)}
body.home .crd .cr-round:hover:not(:disabled){background:var(--cream);color:var(--ink)}
body.home .crd .cr-strip__item{border-color:var(--cr-strip-line);background:transparent;color:var(--cream)}
body.home .crd .cr-strip__item:hover{border-color:rgba(245,240,211,.7)}
body.home .crd .cr-strip__item.is-tonight .cr-strip__dow{color:var(--gold)}
body.home .crd .cr-strip__item.is-dark{color:rgba(245,240,211,.45);border-style:dashed}
body.home .crd .cr-strip__item.is-on{background:var(--cream);border-color:var(--cream);color:var(--ink)}
body.home .crd .cr-strip__item.is-on.is-tonight .cr-strip__dow{color:var(--ink)}
body.home .crd .cr-strip__item:focus-visible{outline-color:var(--gold)}

/* 31. Polish pass (Brett, 07 Oct): one radius scale, three button styles and one type scale, all from
      the tokens in components.css (where this section's scale rules now live too). Presentation only, except three buttons that became text links
      (inc/home-modules.php, home-future-dates.php, home-bar.php). */

/* Radius. Controls take sm: buttons, stubs, date pills, calendar cells and arrows, square tags. */
body.home .crd.crd .cr-promo .cr-promo__cta{border-radius:var(--cr-radius-sm)}
/* Every card takes lg: night cards (were 10px, 9px on phones), Most booked, the bar tiles, New here's photo. */
body.home .crd.crd .cr-pop .cr-popcard{border-radius:var(--cr-radius-lg)}
/* The Citizens pass takes md on all four corners (was 8px 14px 14px 8px). */
body.home .crd.crd .cr-pass{border-radius:var(--cr-radius-md)}
/* Most booked's drag stamps (TICKETS / NEXT) are square tags: sm, h3 type. */
body.home .crd.crd .cr-stamp{border-radius:var(--cr-radius-sm);font-size:var(--cr-fs-h3);letter-spacing:.01em}
/* The pass's inner frame, the status dots and the billboard's art tile (shown when the show has no photo)
   are on the scale too. */
body.home .crd.crd .cr-pass::before{border-radius:var(--cr-radius-sm)}
body.home .crd.crd .cr-promo__art{border-radius:var(--cr-radius-md)}
/* Status chips are the only pills. */
body.home .crd.crd .cr-pop .cr-rank{border-radius:var(--cr-radius-pill)}

/* Primary (marigold), only for what converts: the billboard's Tickets, every ticket stub, Join Citizens
   (Sign up and Get 10% are in components.css). Lato 900 15px, 54px, no border or shadow, #E6A61F on
   hover. The stubs keep their notches and perforation, so their left padding stays. */
body.home .crd.crd .cr-promo .cr-promo__cta{height:var(--cr-btn-h);padding-right:22px;border:0;background:var(--cr-marigold);color:var(--cr-ink);font-family:'futura-pt',sans-serif;font-weight:900;font-size:var(--cr-fs-btn);box-shadow:none}
body.home .crd.crd .cr-promo:hover .cr-promo__cta{background:var(--cr-marigold-hover);transform:none}
/* Every stub is the button height on phones too (was 50px there), with the button's 22px on the right. */
body.home .crd.crd .cr-cit .cr-btn--gold{height:var(--cr-btn-h);padding:0 22px;border:0;background:var(--cr-marigold);color:var(--cr-ink);font-weight:900;font-size:var(--cr-fs-btn);box-shadow:none}
body.home .crd.crd .cr-cit .cr-btn--gold:hover{background:var(--cr-marigold-hover)}
/* Nothing else is marigold: LIVE TONIGHT is a cream pill with ink type (its dot stays), Selling fast brass. */

/* (New here's outline button became a text link on 08 Oct, section 34.) */
/* The date pills, the round arrows and the calendar follow the same hover: a full border and a 6% wash
   (cream on the dark band, ink on the paper calendar; nearly-gone days in brass). The month arrows
   draw a real 1px border. */
body.home .crd.crd .cr-strip__item:not(.is-on):hover{border-color:var(--cr-cream);background:color-mix(in srgb,var(--cr-cream) 6%,transparent)}
body.home .crd.crd .cr-round:hover:not(:disabled),body.home .crd.crd .cr-pop .cr-round:hover:not(:disabled){border-color:var(--cr-cream);background:color-mix(in srgb,var(--cr-cream) 6%,transparent);color:var(--cr-cream)}

/* Text links (.cr-link, components.css): See what's on this week, Open the full calendar, See the bar.
   Everything on is the same link in cream on the dark band; Next available on a dark night too. */
body.home .crd.crd .cr-pop__all{display:inline-block;padding:0;font-family:'futura-pt',sans-serif;font-weight:700;font-size:var(--cr-fs-link);line-height:1.4;color:var(--cr-cream);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;text-decoration-color:currentColor}
body.home .crd.crd .cr-pop__all:hover{color:var(--cr-cream);text-decoration-color:var(--cr-marigold)}
/* Its arrow is plain text, as the spec allows. */
body.home .crd.crd .cr-nextav .cr-ico{display:none}
/* Filter by type keeps its 13px, in the link pattern (700, a 1px underline, marigold on hover). */
/* Show titles in the night cards are links: the same underline on hover. */
body.home .crd.crd .cr-show__title a:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;text-decoration-color:var(--cr-marigold)}
/* New here's script heading tilts out of its box: the panel (a green card once) no longer clips it. */
body.home .crd.crd .cr-new__panel{overflow:visible}
/* With search open over the billboard the header is near-black, so its cream links still show. */
body.home:has(.cr-promo.is-media) .crd .cr-header.is-searching:not(.is-compact){background:var(--cr-black)}
/* Where the links sit: in New here's row, under the calendar, and under the Bar & Food lede. */
body.home .crd.crd .cr-new__ctas{align-items:center;column-gap:28px}
@media (max-width:899px){
  body.home .crd.crd .cr-new__ctas{align-items:flex-start}
}
body.home .crd.crd .cr-allf__cta .cr-link{margin-bottom:6px}
body.home .crd.crd .cr-bar .cr-bar__more{margin-top:28px}
@media (max-width:899px){
  body.home .crd.crd .cr-bar .cr-bar__more{margin-top:20px}
}

/* Display: Guess Sans 800, uppercase, 0.01em. Hero 56 (40 on phones); every section heading and the
   night cards' day titles 46 (32); card titles 24 (20); the night cards' show titles 17 (16). The bar
   tiles' names are one 20px (24 wraps them). */
body.home .crd.crd .cr-promo .cr-promo__title{font-size:var(--cr-fs-hero)}
body.home .crd.crd .cr-pop .cr-popcard__title{font-size:var(--cr-fs-h3)}
/* New here's numerals: h2 on desktop; three across on phones, so h3 there. */
body.home .crd.crd .cr-stat__n{font-size:var(--cr-fs-h2);line-height:1}
@media (max-width:768px){
  body.home .crd.crd .cr-stat__n{font-size:var(--cr-fs-h3)}
}

/* Body (Lato): ledes 18, body 14.5, prices 14 (900; Citizens 700 in the Citizens green), fine print 12. */
body.home .crd.crd .cr-promo .cr-promo__sub{font-size:var(--cr-fs-lede);font-weight:400}
/* Calendar day numbers share the price step (14, 900). */

/* Labels: Lato 900, uppercase, 0.15em, one 11px. */
body.home .crd.crd .cr-strip__item.is-all .cr-strip__dow{font-family:'futura-pt',sans-serif;font-weight:900;font-size:var(--cr-fs-label);letter-spacing:var(--cr-label-track);text-transform:uppercase}
/* Phones: the date row still spans the width. TONIGHT at 11px needs more room than a day, so its tab
   takes its own width and the others share the rest. */
@media (max-width:899px){
  body.home .crd.crd .cr-strip{gap:3px}
  body.home .crd.crd .cr-strip__item.is-tonight{flex:0 0 auto;padding:0 2px}
  body.home .crd.crd .cr-strip__dow{letter-spacing:var(--cr-label-track)}
}
/* Narrow phones (under 390px): All dates is only its icon, so its tab narrows and the gaps close up,
   leaving the day labels their 11px. */
@media (max-width:389px){
  body.home .crd.crd .cr-strip{gap:2px}
  body.home .crd.crd .cr-strip__item.is-all{flex:0 0 30px}
}
/* Tracked labels centre on their letters, not on the trailing 0.15em. */
body.home .crd.crd .cr-strip__dow{margin-right:calc(var(--cr-label-track) * -1)}

/* Script (Norican): 42px, 32px on phones; oxblood on cream. */
body.home .crd.crd .cr-script{font-size:var(--cr-fs-script)}

/* 32. Green means Citizens and nothing else (Brett, 07 Oct). The band is the deep green (section 18)
      and the Citizens prices the green (27, 31, components.css). Oxblood is back to atmosphere and
      urgency only: the script eyebrows, Last tickets, the sold-out dot and the live dot. */
/* The green pass on the green band: a cream hairline ring so it sits forward (its fill stays), and its
   lettering and inner frame cream (green on the green pass wouldn't read; marigold is for buying). */
body.home .crd.crd .cr-pass{color:var(--cr-cream);box-shadow:-5px 5px 0 #263D23,0 22px 30px -18px rgba(0,0,0,.55),0 0 0 1px rgba(245,240,211,.35)}
@media (max-width:899px){
  body.home .crd.crd .cr-pass{box-shadow:-3px 3px 0 #263D23,0 14px 20px -12px rgba(0,0,0,.5),0 0 0 1px rgba(245,240,211,.35)}
}
body.home .crd.crd .cr-pass::before{border-color:color-mix(in srgb,var(--cr-cream) 55%,transparent)}
/* The calendar's nearly-gone days go brass, like the Selling fast chip: a brass line and wash with ink
   numbers (they were oxblood). */
/* Most booked's TICKETS drag stamp is ink like NEXT (it was oxblood). */
body.home .crd.crd .cr-stamp--yes{color:var(--cr-ink)}

/* 33. The date strip sits 24px under the billboard at every width (Brett, 07 Oct; it was the 96px /
      64px section pad). Desktop billboard: the video takes the right half (was 62%) and the banner is
      a half-width 16:9 tall, about 405px at 1440 and never under 400px (it was 489px). The photo layer
      (.cr-promo__media, which holds the video) takes that half, and its shade fades both into the
      black on their left edge. */
.crd.crd .cr-tonight{padding-top:24px}
@media (min-width:900px){
  body.home:has(.cr-promo.is-media) .crd .cr-promo.is-media .cr-promo__inner{min-height:max(400px,calc(100vw * 9 / 32))}
  .crd.crd .cr-promo.is-media .cr-promo__media{left:50%}
  .crd.crd .cr-promo__yt,.crd.crd .cr-promo.is-media .cr-promo__img{width:100%}
  .crd.crd .cr-promo.is-media .cr-promo__media::after{z-index:1;background:linear-gradient(90deg,#0F0E0C 0%,rgba(15,14,12,0) 22%)}
}

/* 34. Home polish (Brett, 08 Oct). Each override sits one level under its section, so it beats the
      component rule in components.css cleanly (no !important).
      - The Bar tiles' names at 17px, so HOUSE NEGRONI, ESPRESSO MARTINI and LOCAL DISTILLERY sit on one
        line and the card footers line up.
      - See the bar sits under the lede, left-aligned, 28px down (20px on phones), as New here's links
        sit under its stats (above, Where the links sit).
      - New here's row is two text links (inc/home-modules.php); Most booked's back cards sit at 70%
        (assets/js/home-modules.js).
      - Citizens: the line under the title at 20px, and 72px top and bottom (phones keep their 64px). */
body.home .crd.crd .cr-bar .cr-barcard__name{font-size:17px}
body.home .crd.crd .cr-cit .cr-cit__text{font-size:20px}
.crd.crd .cr-cit{padding-block:min(72px,var(--cr-section-pad))}


/* 35. The sign-up dock on one line (Brett, 08 Oct). The title block, the email field, Get 10% and the
      × share a centre line, resting and stuck. The copy and the × spanned the error note's row as
      well as the form's, so they sat 11px under the field. Now only the note takes the second row
      (under the form), and its 6px gap only opens when it shows. Phones keep their stacked layout. */
@media (min-width:900px){
  body.home .crd .cr-signup__inner{grid-template-areas:"copy form close" ". err .";row-gap:0}
  body.home .crd .cr-err{margin-top:6px}
}

/* 36. One eyebrow for every home section (Brett, 08 Oct): the script (.cr-script, Norican 42px, 32px
      on phones) tilted 4 degrees above the heading, as New here's and Bar & Food's are in the design.
      - Most booked: "Hottest acts" in script (Brett, 08 Oct), brass on the black (the .cr-section--black
        default), where the tracked label was. Its class is __kicker, not __eyebrow, because
        components.css sets .cr-pop__eyebrow as a label.
      - Citizens: "Membership" in cream on the green band.
      - On cream the script stays oxblood (New here, Bar & Food).
      - Script is for section eyebrows only, so the Bar tiles' "house", "martini" and "local" are 11px
        brass labels (Lato 900, tracked, upper case). */
body.home .crd :is(.cr-pop__kicker,.cr-cit__kicker){transform:rotate(-4deg);transform-origin:left bottom}
body.home .crd .cr-cit__kicker{color:var(--cr-cream)}
body.home .crd .cr-cit__kicker + .cr-cit__title{margin-top:14px}
/* Under 900px the reference eyebrows sit 10px over their headings (the PORT phone block), so these do. */
@media (max-width:899px){
  body.home .crd :is(.cr-pop__kicker + .cr-pop__title,.cr-cit__kicker + .cr-cit__title){margin-top:10px}
}
/* The label centres on its letters, not on the trailing 0.15em (as the strip's day labels, above). */
body.home .crd.crd .cr-bar .cr-typetile__b{margin-right:calc(var(--cr-label-track) * -1);font-family:var(--cr-font-body);font-weight:900;font-size:var(--cr-fs-label);line-height:1;letter-spacing:var(--cr-label-track);text-transform:uppercase;color:var(--cr-brass)}

/* 37. The Sold out stub (Brett, 08 Oct). Home only until components.css has a --soldout variant
      (NOTES.md 7).
      - A sold-out row's stub says SOLD OUT and does nothing: a <span aria-disabled="true">
        (show-row.php), no hover state, the default cursor.
      - Drawn as the time stub: the same box, notches, perforation and corners. No fill, a 1px
        outline in ink at 40%, the label in ink muted (Lato 900 11px, tracked, upper case).
      - Width: its own time stub's, at every width, so it lines up with the marigold stubs above and
        below. The invisible ::after prints the row's time (data-time, "6:30pm"; "0:00pm" where attr()
        content isn't supported) in the time's own type to size the body; the label sits
        over it, centred between the perforation and the right notch (7.5px, the notch's ring), on its
        letters rather than the trailing 0.15em.
      - The outline is an inset shadow, not a border, so the box and perforation sit exactly where a
        time stub's do. The notch mask cuts the edge there, so a 1px ring traces each notch (painted
        from 1px in, so it doesn't double the edge where they meet).
      - Every sold-out row gets it, a started one too: the status is still true.
      - The row: no Sold out chip and the time in the meta line (cr_home_rail_row()); everything at
        55% but Next available, the one thing left to do, which stays a full-strength text link.
      - Two levels deeper than usual: components.css paints every .cr-tix:not(.cr-tix--wait)
        marigold, hover included, at (0,7,1). */
body.home .crd.crd .cr-day .cr-show .cr-tix.is-soldout .cr-tix__body{--cr-so-line:color-mix(in srgb,var(--cr-ink) 40%,transparent);background:radial-gradient(circle at -1px 50%,transparent 6.1px,var(--cr-so-line) 6.35px,var(--cr-so-line) 7.25px,transparent 7.5px) 1px 0/calc(50% - 1px) 100% no-repeat,radial-gradient(circle at calc(100% + 1px) 50%,transparent 6.1px,var(--cr-so-line) 6.35px,var(--cr-so-line) 7.25px,transparent 7.5px) calc(100% - 1px) 0/calc(50% - 1px) 100% no-repeat;box-shadow:inset 0 0 0 1px var(--cr-so-line);color:var(--cr-ink-muted)}
body.home .crd .cr-show .cr-tix.is-soldout{cursor:default}
body.home .crd .cr-tix.is-soldout .cr-tix__body::after{content:'0:00pm';content:attr(data-time);content:attr(data-time) / '';visibility:hidden}
body.home .crd .cr-tix.is-soldout .cr-tix__so{position:absolute;top:0;right:7.5px;bottom:0;left:16.5px;display:flex;align-items:center;justify-content:center;padding-left:var(--cr-label-track);font-family:var(--cr-font-body);font-weight:900;font-size:var(--cr-fs-label);line-height:1;letter-spacing:var(--cr-label-track);text-transform:uppercase}
body.home .crd .cr-tix.is-soon .cr-tix__so--two{flex-direction:column;gap:2px;font-size:calc(var(--cr-fs-label) * .86);letter-spacing:.06em;padding-left:.06em}
@media (max-width:599px){
  body.home .crd .cr-tix.is-soldout .cr-tix__so{left:14.5px}
}
body.home .crd .cr-show.is-soldout :is(.cr-show__title,.cr-show__sub,.cr-show__meta,.cr-priceline,.cr-tix){opacity:.55}
/* Fixes from the independent review (08 Oct):
   - Forced colours drop the inset shadow and the rings, so there the stub is a GrayText outline and
     the row keeps the user's full-strength palette.
   - Next available is the standard text link: its line-height (1.35 in the port) matches .cr-link's 1.4.
   - On touch screens components.css turns the link's ::after into an absolutely placed tap area, and
     the → (the same ::after) lands over "Ne". The → goes back inline at the end; the tap area moves to
     ::before (NOTES.md 9). */
@media (forced-colors:active){
  body.home .crd .cr-show.is-soldout :is(.cr-show__title,.cr-show__sub,.cr-show__meta,.cr-priceline,.cr-tix){opacity:1}
  body.home .crd.crd .cr-day .cr-show .cr-tix.is-soldout .cr-tix__body{outline:1px solid GrayText;outline-offset:-1px}
}
body.home .crd.crd .cr-nextav{line-height:1.4}
@media (pointer:coarse){
  body.home .crd.crd .cr-nextav::after{position:static;inset:auto}
  body.home .crd.crd .cr-nextav::before{content:'';position:absolute;inset:min(0px,calc(50% - 22px)) 0}
}

/* 38. New here's stat numerals in brass for text on cream (Brett, 08 Oct): --cr-brass-text, so the
      numbers pass AA as large text (46px, 20px on phones, Guess Sans 800) on the cream. --cr-brass stays
      for hairlines and labels on dark. A home token until components.css has it (NOTES.md 8). It wins over
      design-brand.css's brass (.crd.crd .cr-stat__n, which loads after this sheet) one level under New
      here. */
:root{--cr-brass-text:#A87700}
body.home .crd .cr-new .cr-stat__n{color:var(--cr-brass-text)}

/* 39. Phones: the promoted banner (Kyran's wireframe 1a; Brett, 08 Oct). Under 600px the billboard is
      a full-width 70px black bar: the show and its time on the left, the marigold Tickets stub on the
      right, a cream hairline under it. Nothing of the billboard loads: no photo (home-promo.php gives
      phones a blank <source>), no tile, no video or YouTube frame (home.js mounts those from 900px).
      Tonight's first time stub then sits well above the sign-up bar at 390x844.
      One level under section 31's (0,5,1) all-width rules, through .cr-promo-box. */
@media (max-width:599px){
  body.home .crd.crd .cr-promo-box .cr-promo{display:block;box-sizing:border-box;height:70px;border-bottom:1px solid var(--cr-cream-rule)}
  body.home .crd.crd .cr-promo-box .cr-promo:focus-visible{outline-offset:-3px}
  body.home .crd.crd .cr-promo-box :is(.cr-promo__media,.cr-promo__art){display:none}
  body.home .crd.crd .cr-promo-box .cr-promo .cr-promo__inner{display:flex;height:100%;min-height:0;padding:0;gap:12px;align-items:center}
  body.home .crd.crd .cr-promo-box .cr-promo .cr-promo__text{display:flex;flex:1 1 auto;flex-direction:column;gap:2px;min-width:0}
  body.home .crd.crd .cr-promo-box .cr-promo .cr-promo__title{font-size:var(--cr-fs-h4);line-height:1.1}
  body.home .crd.crd .cr-promo-box .cr-promo .cr-promo__sub{margin-top:0;font-size:var(--cr-fs-price);line-height:1.3}
  body.home .crd.crd .cr-promo-box .cr-promo :is(.cr-promo__title,.cr-promo__sub){overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
  body.home .crd.crd .cr-promo-box .cr-promo .cr-promo__cta{position:relative;flex:none;width:auto;height:var(--cr-btn-h);padding:0 20px 0 30px;justify-content:center;border-radius:var(--cr-radius-sm);-webkit-mask:radial-gradient(circle 6px at 0 50%,transparent 96%,black) 0 0/51% 100% no-repeat,radial-gradient(circle 6px at 100% 50%,transparent 96%,black) 100% 0/51% 100% no-repeat;mask:radial-gradient(circle 6px at 0 50%,transparent 96%,black) 0 0/51% 100% no-repeat,radial-gradient(circle 6px at 100% 50%,transparent 96%,black) 100% 0/51% 100% no-repeat}
  body.home .crd.crd .cr-promo-box .cr-promo .cr-promo__cta span{display:inline}
  body.home .crd.crd .cr-promo-box .cr-promo .cr-promo__cta .cr-ico{display:none}
  body.home .crd.crd .cr-promo-box .cr-promo .cr-promo__cta::before{content:'';position:absolute;left:15px;top:10px;bottom:10px;border-left:1.5px dashed color-mix(in srgb,var(--cr-ink) 45%,transparent)}
}

/* 40. Night cards size to their shows (Brett, 08 Oct).
      - The rail aligns cards to its top: no card stretches to the tallest night, so no empty cream
        and no M-mark watermark filling it.
      - At most three shows a card, with "+N more tonight →" (or "tomorrow", "on Sat") in the card's
        foot, linking to that night on What's on (night-card.php). It's the standard text link, its →
        drawn as Next available's is, with the rows' dashed rule above it and a 44px tap height
        (12.2px above and below a 19.6px line).
      - A dark night keeps room for its drinks character, which would otherwise sit over the copy.
      - Phones and tablets (under 900px): the rail starts at the height of the cards in view, not
        the tallest night, so there is no black gap under Tonight. A card out of view gives up its
        height through a negative bottom margin, and the rail clips it. Before home-modules.js runs
        only the first card counts on phones and the first two on tablets (html.cr-js is set before
        first paint, so nothing moves at load); after that, the cards in view (.is-in), so an
        incoming card is never cut off mid-swipe, and a card taking keyboard focus counts at once.
        It shrinks again on a night with fewer shows, so the section below comes up under the card
        (Brett, 08 Oct; the "grows only" min-height is gone). */
body.home .crd .cr-tonight .cr-rail{align-items:start}
body.home .crd .cr-tonight .cr-day.is-sparse .cr-shows::after{display:none}
body.home .crd .cr-tonight .cr-day.is-dark .cr-darkp{min-height:330px}
body.home .crd .cr-tonight .cr-day__foot{padding:4px 15px 8px;border-top:1px dashed color-mix(in srgb,var(--cr-ink) 24%,transparent)}
body.home .crd.crd .cr-tonight .cr-day__more{display:inline-block;padding-block:12.2px}
body.home .crd.crd .cr-tonight .cr-day__more::after{content:"\00a0\2192";content:"\00a0\2192" / ""}
@media (max-width:899px){
  body.home .crd .cr-tonight .cr-day__foot{padding:2px 11px 6px}
}
@media (max-width:899px){
  html.cr-js body.home .crd .cr-tonight .cr-rail{overflow-y:hidden}
  html.cr-js body.home .crd .cr-tonight .cr-rail.is-tracked > .cr-day:not(.is-in){margin-bottom:-9999px}
}
@media (max-width:639px){
  html.cr-js body.home .crd .cr-tonight .cr-rail:not(.is-tracked) > .cr-day:nth-child(n+2){margin-bottom:-9999px}
}
@media (min-width:640px) and (max-width:899px){
  html.cr-js body.home .crd .cr-tonight .cr-rail:not(.is-tracked) > .cr-day:nth-child(n+3){margin-bottom:-9999px}
}

/* 41. Selling fast on the night cards is the event page's marigold pill (Brett, 08 Oct): marigold with
      ink lettering, as .ev-flag.cr-chip--fast in design-event.css. components.css paints it brass on
      home (body.home .crd.crd .cr-chip--fast); this wins one level under the night cards. The
      search panel's chips stay brass (NOTES.md 13). */
body.home .crd.crd .cr-day .cr-chip--fast{background:var(--cr-marigold);color:var(--cr-ink)}

/* 42. Desktop night cards (900px and up; Brett, 08 Oct): one height for the row.
      - The photo is always 232px, on every card, whatever the night holds.
      - The show area takes the rest: every card is as tall as the tallest (a three-show card), so a
        card with fewer shows has plain whitespace under its rows, as before. At most three shows a
        card, then "+N more" (section 40 / night-card.php).
      - Under 900px (section 40): the rail follows the card in view, up and down, cards top-aligned. */
@media (min-width:900px){
  body.home .crd .cr-tonight .cr-rail{align-items:stretch}
  body.home .crd .cr-tonight .cr-day:not(.cr-day--all) .cr-hero{flex:none;height:232px;aspect-ratio:auto}
}

/* 43. Phones (under 900px; Brett, 08 Oct): no date tabs over the night cards (the rail still swipes),
      and under the cards one full-width "See full calendar" button to the calendar view, in the
      inactive tab's style: the 40% cream line, the sm corner, no fill, cream; the calendar icon at the
      All dates tab's 18px and the tabs' 11px tracked label; the tabs' hover (a full line and a 6% wash,
      the same 0.2s fade) and focus ring. From 900px the date strip stays and the button doesn't show.
      The row is positioned so it stacks over the rail: the rail's 32px shadow room (section 30) runs
      8px into the button's top and would otherwise take its taps. Sections 4, 19, 22 and 31's phone
      strip rules are dormant under this one. */
body.home .crd .cr-fullcal-row{display:none}
@media (max-width:899px){
  body.home .crd .cr-tonight .cr-railhead{display:none}
  body.home .crd .cr-tonight .cr-fullcal-row{position:relative;display:block;margin-top:24px}
  body.home .crd.crd .cr-fullcal{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;height:54px;padding:0 16px;border:1px solid var(--cr-strip-line);border-radius:var(--cr-radius-sm);background:transparent;color:var(--cr-cream);text-decoration:none;transition:background .2s,border-color .2s,color .2s}
  body.home .crd.crd .cr-fullcal:hover{border-color:var(--cr-cream);background:color-mix(in srgb,var(--cr-cream) 6%,transparent);color:var(--cr-cream)}
  body.home .crd.crd .cr-fullcal:focus-visible{outline-color:var(--cr-marigold);outline-offset:-3px}
  body.home .crd.crd .cr-fullcal .cr-ico{flex:none;width:18px;height:18px}
  body.home .crd.crd .cr-fullcal__label{margin-right:calc(var(--cr-label-track) * -1);font-family:var(--cr-font-body);font-weight:900;font-size:var(--cr-fs-label);line-height:1;letter-spacing:var(--cr-label-track);text-transform:uppercase}
}
@media (max-width:899px) and (prefers-reduced-motion:reduce){
  body.home .crd.crd .cr-fullcal{transition:none}
}

/* Phone banner (Homepage modules → Promoted strip → Phone banner; Brett, 21 Oct; wireframe 1a: 390 × 70):
   under 600px one staff-chosen picture, full width and 70px tall, is the strip; the show strip hides. */
.crd .cr-promo-phone{display:none}
@media (max-width:599px){
  .crd .cr-promo-phone{display:block;height:70px;overflow:hidden;background:var(--ink-dk)}
  .crd .cr-promo-phone__img{display:block;width:100%;height:70px;object-fit:cover}
  body.home .crd.crd .cr-promo-box .cr-promo.has-phone{display:none}
}

/* Night by night without the date strip (Brett, 21 Oct): no strip, counter or All dates pill at any width;
   the ‹ › arrows sit on the rail's edges over the cards in view, at every width, and hide when there is
   nothing that way; See full calendar stays a phone-only button (Brett, 21 Oct: not on desktop); the cards lose their
   Book / Filter by type bar (night-card.php). */
body.home .crd .cr-tonight .cr-railhead{display:none}
body.home .crd .cr-tonight .cr-railbox{position:relative}
/* The gap from the promoted strip to the cards is the cards' own gap (Brett, 21 Oct): 20px, 12px on phones. */
body.home .crd.crd.crd .cr-tonight{padding-top:0}
body.home .crd.crd .cr-tonight .cr-rail{padding-top:20px}
body.home .crd.crd.crd .cr-tonight .cr-railarrow{position:absolute;top:calc(50% - 7px);z-index:3;width:50px;height:50px;transform:translateY(-50%);border:1px solid var(--cr-ink);background:var(--cr-cream);color:var(--cr-ink);box-shadow:0 8px 22px rgba(0,0,0,.45);opacity:1}
body.home .crd.crd.crd .cr-tonight .cr-railarrow:hover:not(:disabled){background:var(--cr-marigold);color:var(--cr-ink)}
body.home .crd.crd.crd .cr-tonight .cr-railarrow:disabled{display:none}
body.home .crd .cr-tonight .cr-railarrow--prev{left:calc(var(--rail-pad) - 25px)}
body.home .crd .cr-tonight .cr-railarrow--next{right:calc(var(--rail-pad) - 25px)}
@media (min-width:900px){
  body.home .crd .cr-tonight .cr-fullcal-row{display:none}
}
@media (max-width:899px){
  /* On a phone the card fills the width, so the arrows sit at the photo's middle, clear of the day text and the Featured Talent line. */
  /* Phones share one card height too (Brett, 21 Oct): home.js gives every night card the tallest card's height (capped at three rows). */
  body.home .crd.crd .cr-tonight .cr-rail{padding-top:12px}
  /* --cr-arrow-top: the photo's centre, set by home.js (the photo's height follows the width under 900px). */
  body.home .crd.crd.crd .cr-tonight .cr-railarrow{width:42px;height:42px;top:var(--cr-arrow-top,calc(12px + 116px))}
  body.home .crd .cr-tonight .cr-railarrow--prev{left:calc(var(--rail-pad) - 14px)}
  body.home .crd .cr-tonight .cr-railarrow--next{right:calc(var(--rail-pad) - 14px)}
}

/* Night cards, 21 Oct (Brett): three shows show at a time and the rest scroll inside the card (home.js
   sets the height at three rows); a Promo pill (Show → Homepage & cards) in marigold; the countdown pill
   counts to the show, not doors. */
body.home .crd .cr-shows.is-scroll{overflow-y:auto;scroll-snap-type:y proximity;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:rgba(46,45,42,.35) transparent}
body.home .crd .cr-shows.is-scroll .cr-show{scroll-snap-align:start}
/* The promo pill wears the old LIVE TONIGHT colours (cream, burgundy lettering; Brett, 21 Oct), so it never reads as a ticket stub. */
body.home .crd.crd .cr-hero__top .cr-tag--promo{background:var(--cr-cream);color:var(--cr-oxblood);border-color:var(--cr-cream)}

/* Whose photo it is (Brett, 21 Oct): "Featured Talent: …" under the day on a card that shows a show's photo,
   italic, the hero line's size, on the photo's text shadow. */
body.home .crd.crd .cr-hero__talent{margin:7px 0 0;font-family:var(--cr-font-body);font-style:italic;font-weight:400;font-size:13.5px;line-height:1.3;letter-spacing:0;color:rgba(245,240,211,.9);text-shadow:0 1px 8px rgba(20,17,12,.75)}
@media (max-width:899px){
  body.home .crd.crd .cr-hero__talent{font-size:12.5px;margin-top:5px}
}

/* The billboard's copy and its Tickets button stack on the left: title, time, then the button under them
   (Brett, 21 Oct). */
@media (min-width:600px){
  body.home .crd.crd .cr-promo.is-media .cr-promo__inner{flex-direction:column;align-items:flex-start;justify-content:center;gap:22px}
  body.home .crd.crd .cr-promo.is-media .cr-promo__cta{margin-left:0}
}


/* A show row with a ticket stub is one link: home.js follows the stub from a click anywhere on it
   (Brett, 23 Oct). */
body.home .crd .cr-show:has(> a.cr-tix[href]){cursor:pointer}