/* Club Royal Amsterdam. Sketch of 6 October 2026, fourth round.
   1. The crest, the club's picture and the headline open the page; the five nights and their tickets follow at once.
   2. Everything sits on one axis, like the crown above Rembrandt in the club's own Grand Opening picture.
   3. Three bands, each with a job: night (the programme), velvet (the house), paper (practical matters).
   4. Basteleur speaks: menu, dates, names. Names of others are set with its plain capitals. Montserrat explains and is never smaller than 13 px.
   5. The ticket: the gold piece buys a ticket, the stub beside it leads to the page of that night. Everything else is a word.
   6. Gold marks tickets and links. The menu and the footer are ivory and turn gold under the pointer.
   7. No arrows, no hairlines, no text on a picture. Rhythm comes from the bands and from space. */
@font-face{font-family:Basteleur;src:url('/assets/Basteleur-Moonlight.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Basteleur;src:url('/assets/Basteleur-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:Montserrat;src:url('/assets/montserrat-latin.woff2') format('woff2');font-weight:400 600;font-style:normal;font-display:swap}
@property --fill{syntax:'<color>';inherits:true;initial-value:#c79a46}

:root{
  --black:#050505;--ivory:#f7f3ea;--gold:#c79a46;--gold-lit:#dcb568;--burgundy:#4b1018;--wine:#7d1826;--ink:#161614;--stub:#2b271f;--stub-lit:#3a3428;
  --serif:Basteleur,Georgia,serif;--sans:Montserrat,Arial,sans-serif;
  --gutter:clamp(20px,4.4vw,72px);--page:1280px;--notch:7px;
  --ease:cubic-bezier(.2,.7,.2,1);
}
/* Band colours. Header, footer and link in bio use the night scheme. */
:root,.band-night,.band-velvet{--bg:var(--black);--fg:var(--ivory);--soft:rgba(247,243,234,.76);--accent:var(--gold);--accent-hover:var(--ivory);--edge:rgba(247,243,234,.16)}
.band-velvet{--bg:var(--burgundy);--soft:rgba(247,243,234,.86)}
.band-paper{--bg:var(--ivory);--fg:var(--ink);--soft:#4c4841;--accent:var(--wine);--accent-hover:var(--ink);--edge:rgba(22,22,20,.16)}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:24px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--black);color:var(--ivory);font:16px/1.7 var(--sans);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
img{display:block;max-width:100%;height:auto}
h1,h2,h3,p,dl,dt,dd,ul{margin:0;padding:0}
ul{list-style:none}
h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.08;letter-spacing:-.035em;text-wrap:balance;overflow-wrap:break-word}
p{text-wrap:pretty}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
::selection{background:var(--gold);color:var(--black)}
:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.container{width:100%;max-width:calc(var(--page) + 2*var(--gutter));margin-inline:auto;padding-inline:var(--gutter)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:fixed;top:10px;left:10px;z-index:100;padding:12px 18px;background:var(--ivory);color:var(--black);transform:translateY(-160%)}
.skip-link:focus{transform:none}
.when-time{white-space:nowrap}
.date-short{display:none}

/* Voice */
.name,.artists,.stage-bill h3{font-feature-settings:"ss01"}
.when{font-family:var(--serif);font-size:clamp(17px,1.45vw,21px);line-height:1.35;letter-spacing:-.02em;color:var(--soft)}
.lead{font-family:var(--serif);font-size:clamp(19px,1.75vw,25px);line-height:1.38;letter-spacing:-.02em;color:var(--soft);text-wrap:balance}
.link{display:inline-block;padding-block:11px;font-family:var(--serif);font-size:19px;line-height:1.2;letter-spacing:-.02em;color:var(--accent);transition:color .18s}
.link:hover{color:var(--accent-hover)}
.link-large{font-size:clamp(24px,2.4vw,30px)}
.microcopy{font-size:13px;line-height:1.6;color:var(--soft);margin-top:12px}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:6px 30px}

/* The ticket. The gold piece goes to the ticket shop, the dark stub beside it to the page of that night.
   Four scooped corners per piece; where the two meet the scoops form the punch holes. */
.ticket{display:inline-flex;align-items:stretch;max-width:100%;min-height:56px;font-family:var(--serif);font-size:19px;line-height:1.1;letter-spacing:-.025em}
.ticket-main,.ticket-stub{--fill:var(--gold);display:flex;align-items:center;justify-content:center;text-align:center;color:var(--black);transition:--fill .2s,color .2s;background:
  radial-gradient(circle var(--notch) at 0 0,transparent calc(var(--notch) - .6px),var(--fill) var(--notch)) 0 0/51% 51% no-repeat,
  radial-gradient(circle var(--notch) at 100% 0,transparent calc(var(--notch) - .6px),var(--fill) var(--notch)) 100% 0/51% 51% no-repeat,
  radial-gradient(circle var(--notch) at 0 100%,transparent calc(var(--notch) - .6px),var(--fill) var(--notch)) 0 100%/51% 51% no-repeat,
  radial-gradient(circle var(--notch) at 100% 100%,transparent calc(var(--notch) - .6px),var(--fill) var(--notch)) 100% 100%/51% 51% no-repeat}
.ticket-main{flex:1 1 auto;padding:13px 30px 14px}
.ticket-stub{--fill:var(--stub);color:var(--ivory);position:relative;flex:0 0 auto;padding:13px 20px 14px 22px;font-size:17px;white-space:nowrap}
@media(hover:hover){.ticket-main:hover{--fill:var(--gold-lit)}.ticket-stub:hover{--fill:var(--stub-lit);color:var(--gold-lit)}}
.ticket-main:focus-visible,.ticket-stub:focus-visible{position:relative;z-index:1}
.ticket-wide{display:flex;width:100%}
.ticket-large{min-height:66px;font-size:23px}
.ticket-large .ticket-main{padding-inline:54px}
.ticket-status{font-family:var(--serif);font-size:19px;color:var(--soft)}

/* Header: the crest on the axis, two menu items on either side. */
.site-header{position:relative;z-index:10;display:grid;grid-template-columns:minmax(0,1fr) 140px minmax(0,1fr);column-gap:clamp(30px,4.2vw,64px);align-items:center;padding:24px var(--gutter) 12px;background:var(--black);color:var(--ivory)}
.brand{grid-column:2;grid-row:1;position:relative;z-index:32;display:block}
.brand img{width:100%}
.main-nav{grid-column:1/-1;grid-row:1;display:grid;grid-template-columns:inherit;column-gap:inherit;align-items:center}
.nav-side{display:flex;gap:clamp(26px,3.4vw,50px)}
.nav-side:first-child{justify-content:flex-end}
.nav-side:last-child{grid-column:3}
.nav-link{font-family:var(--serif);font-size:21px;line-height:1;letter-spacing:-.025em;padding:14px 0;transition:color .18s}
.nav-link:hover,.nav-link[aria-current]{color:var(--gold)}
.header-tools{grid-column:3;grid-row:1;justify-self:end;position:relative;z-index:32;display:flex;align-items:center}
.language-switch{display:flex;gap:4px;font-family:var(--serif);font-size:17px;line-height:1}
.language-switch a{padding:14px 7px;color:rgba(247,243,234,.56);transition:color .18s}
.language-switch a[aria-current]{color:var(--ivory)}
.language-switch a:hover{color:var(--gold)}
.language-switch a:focus-visible{outline-offset:-3px}
.menu-toggle{display:none}

/* Bands */
.band{background:var(--bg);color:var(--fg);padding-block:clamp(64px,8.6vw,128px)}
.band-follow{padding-top:0}
.masthead{text-align:center;padding-block:clamp(12px,1.8vw,26px) clamp(40px,5vw,72px)}
.masthead h1{font-size:clamp(42px,5.4vw,78px);line-height:1.04;letter-spacing:-.045em}
.masthead .lead{max-width:920px;margin:clamp(10px,1.3vw,18px) auto 0}
.masthead-link{margin-top:4px}

/* Home: the club's picture opens the page under the crest, edge to edge and fading into the black. Nothing is written on it. */
.stage{text-align:center;padding-block:0 clamp(56px,7vw,104px)}
/* Wide screens: the whole statue stands sharp on the axis; the same scene, out of focus, fills the width behind it. */
.stage-hero{display:block;position:relative;overflow:hidden;height:min(46svh,480px);margin-bottom:clamp(10px,1.4vw,20px);
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.35) 0,#000 9%,#000 64%,transparent 100%);mask-image:linear-gradient(180deg,rgba(0,0,0,.35) 0,#000 9%,#000 64%,transparent 100%)}
.stage-hero::before{content:"";position:absolute;inset:-60px;background:url('/assets/club-hero-wide.webp') 50% 22%/cover no-repeat;filter:blur(34px) brightness(.5) saturate(1.1)}
.stage-hero img{position:relative;display:block;height:100%;width:auto;max-width:none;margin-inline:auto;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 24%,#000 76%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 24%,#000 76%,transparent 100%)}
.stage h1{font-weight:700;font-size:clamp(44px,6vw,88px);line-height:1;letter-spacing:-.06em}
.stage .lead{margin-top:clamp(10px,1.2vw,16px)}
.nights{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(14px,1.7vw,26px);margin-top:clamp(26px,2.8vw,40px)}
.night{display:flex;flex-direction:column;min-width:0;animation:rise .7s var(--ease) both;animation-delay:calc(var(--i)*70ms)}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.night-poster{display:block;transition:transform .32s var(--ease)}
.night .when{margin-top:14px;font-size:clamp(16px,1.25vw,18px)}
.night h3{font-size:clamp(18px,1.5vw,22px);line-height:1.18;letter-spacing:-.03em;margin:3px 0 16px;min-height:2.36em}
.night h3 a{transition:color .18s}
.night h3 a:hover{color:var(--gold)}
.night .ticket{margin-top:auto}
.night .ticket-main{padding-inline:14px}
.night .ticket-stub{padding-inline:14px 12px;font-size:16px}
.section-foot{margin-top:clamp(22px,2.6vw,36px)}
.event-poster{position:relative;aspect-ratio:4/5;background:#000;overflow:hidden}
.event-poster img{width:100%;height:100%;object-fit:cover}
.poster-contain img{object-fit:contain}
.event-poster::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px var(--edge);pointer-events:none}
@media(hover:hover){.night:hover .night-poster,.row-poster:hover{transform:translateY(-6px)}}

/* Home, the house: words only, on the axis. */
.house{text-align:center;max-width:calc(680px + 2*var(--gutter))}
.house h2{font-size:clamp(36px,4.3vw,62px);margin-bottom:clamp(18px,2vw,28px)}
.house p{color:var(--soft);max-width:560px;margin-inline:auto}
.house p+p{margin-top:16px}
.house .link{margin-top:20px}

/* Duo block: two equal halves around the axis. The words are centred in their half. */
.duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(36px,6.4vw,104px);align-items:center;max-width:calc(1120px + 2*var(--gutter))}
.duo-media img{width:100%;aspect-ratio:4/5;object-fit:cover}
.duo-copy{text-align:center}
.duo-copy h2{font-size:clamp(36px,4.3vw,62px);margin-bottom:clamp(18px,2vw,28px)}
.duo-copy p{color:var(--soft);max-width:460px;margin-inline:auto}
.duo-copy p+p{margin-top:16px}
.duo-copy>.link,.duo-copy>.actions{margin-top:20px}
.duo .actions{justify-content:center}
.halves{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,6vw,96px)}

/* Events: poster and words meet on the axis, in equal halves. */
.event-rows{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(48px,5.8vw,84px);max-width:calc(1120px + 2*var(--gutter))}
.event-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(22px,5vw,72px);align-items:center}
.row-poster{justify-self:end;width:min(100%,330px);transition:transform .32s var(--ease)}
.row-copy h2{font-size:clamp(25px,3vw,42px);line-height:1.08;letter-spacing:-.04em;margin:8px 0 14px}
.row-copy h2 a{transition:color .18s}
.row-copy h2 a:hover{color:var(--gold)}
.row-text{color:var(--soft);max-width:470px;margin-bottom:24px}

/* One night */
.event-detail{padding-top:clamp(10px,2vw,30px)}
.detail{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"poster head" "poster body";column-gap:clamp(36px,6.4vw,104px);align-items:start;max-width:calc(1120px + 2*var(--gutter))}
.detail-head{grid-area:head}
.detail-body{grid-area:body}
.detail-poster{grid-area:poster;position:sticky;top:28px}
.detail-poster .event-poster{aspect-ratio:auto}
.detail-poster .event-poster img{height:auto}
.detail-poster .poster-contain{max-width:430px;margin-inline:auto}
.detail-head h1{font-size:clamp(38px,4.2vw,62px);line-height:1.04;letter-spacing:-.04em;margin-bottom:clamp(16px,1.8vw,24px)}
.detail-head h1.long-title{font-size:clamp(31px,3.5vw,52px)}
.facts{color:var(--soft)}
.facts dt:not(.sr-only),.facts dd{display:inline}
.fact-when{font-family:var(--serif);font-size:clamp(19px,1.6vw,23px);line-height:1.3;letter-spacing:-.02em;color:var(--fg);margin-bottom:6px}
.detail-ticket{margin-top:clamp(22px,2.4vw,32px)}
.detail-text{color:var(--soft);max-width:520px;margin-top:clamp(28px,3vw,40px)}
.lineup{margin-top:clamp(30px,3.2vw,44px)}
.lineup h2{font-size:clamp(28px,2.7vw,38px);margin-bottom:14px}
.stage-bill+.stage-bill{margin-top:20px}
.stage-bill h3{font-size:18px;line-height:1.3;letter-spacing:-.015em;color:var(--soft);margin-bottom:4px}
.artists{font-family:var(--serif);font-size:clamp(20px,1.7vw,25px);line-height:1.36;letter-spacing:-.02em}
.detail-links{display:flex;flex-wrap:wrap;gap:0 30px;margin-top:clamp(22px,2.6vw,34px)}

/* Paper: opening hours, house rules, questions and the enquiry form. */
.info{text-align:center}
.info+.info{margin-top:clamp(64px,8vw,120px)}
.info>h2,.form-wrap>h2,.venue>h2{font-size:clamp(32px,4.6vw,66px)}
.info-intro{color:var(--soft);max-width:520px;margin:16px auto 0}
.info>.halves{max-width:860px;margin:clamp(28px,3.4vw,46px) auto 0}
.halves h3,.halves dt,.qa h3,.trio h2{font-family:var(--serif);font-size:clamp(23px,2.1vw,30px);line-height:1.15;letter-spacing:-.03em;margin-bottom:8px}
.halves p,.halves dd{color:var(--soft);max-width:340px;margin-inline:auto}
.halves .link{margin-top:4px}
.hours-list{max-width:260px;margin-inline:auto;color:var(--soft)}
.hours-list div{display:flex;justify-content:space-between;gap:20px}
.rules{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:42px clamp(40px,6vw,96px);max-width:1040px;margin:clamp(34px,4vw,56px) auto 0}
.rules>div:last-child:nth-child(odd){grid-column:1/-1}
.rules h3{font-size:22px;line-height:1.2;letter-spacing:-.025em;margin-bottom:6px}
.rules p{color:var(--soft);font-size:15px;max-width:440px;margin-inline:auto}
.rules a{text-decoration:underline;text-underline-offset:3px}
.rules a:hover{color:var(--wine)}
.qa{display:grid;grid-template-columns:minmax(0,1fr);gap:34px;max-width:660px;margin:clamp(30px,3.6vw,48px) auto 0}
.qa p{color:var(--soft)}
.venue{text-align:center;max-width:calc(900px + 2*var(--gutter))}
.spaces{grid-template-columns:minmax(0,1fr);gap:26px;margin-block:clamp(24px,2.8vw,38px) clamp(34px,4vw,54px)}
.spaces dt{text-wrap:balance;margin-bottom:4px}
.spaces dd{max-width:480px;text-wrap:balance}
.venue>p{color:var(--soft);max-width:560px;margin-inline:auto}
.venue>p+p{margin-top:16px}
.venue>.link{margin-top:14px}
.form-wrap{text-align:center;max-width:calc(820px + 2*var(--gutter))}
.rental-typeform{width:100%;height:560px;margin-top:12px}
.rental-typeform iframe{width:100%;height:100%;border:0}
.trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,4vw,56px);text-align:center;max-width:calc(1080px + 2*var(--gutter))}
.trio .link{overflow-wrap:anywhere}
.simple{text-align:center;max-width:calc(620px + 2*var(--gutter))}
.simple p{color:var(--soft);margin-bottom:20px}

/* Footer: one centred column. Its links are quiet, like the menu. */
.site-footer{background:var(--black);color:var(--ivory);text-align:center;padding:clamp(60px,7.4vw,104px) var(--gutter) 38px}
.footer-logo{display:block;width:140px;margin:0 auto clamp(26px,3vw,38px)}
.footer-address{font-family:var(--serif);font-size:clamp(24px,2.5vw,34px);line-height:1.15;letter-spacing:-.03em}
.footer-hours{color:var(--soft);font-size:15px;line-height:1.8;max-width:680px;margin:14px auto 18px;text-wrap:balance}
.footer-links{display:flex;flex-wrap:wrap;justify-content:center;gap:0 30px}
.foot-link{display:inline-block;padding-block:11px;font-family:var(--serif);font-size:18px;line-height:1.2;letter-spacing:-.02em;color:var(--soft);transition:color .18s}
.foot-link:hover{color:var(--gold)}
.footer-legal{margin-top:30px;font-size:13px;color:rgba(247,243,234,.56)}

/* Cookie banner: a strip on black at the foot of the screen, the answer as one ticket. */
.consent{position:fixed;inset:auto 0 0;z-index:40;background:var(--black);color:var(--ivory);border-top:1px solid rgba(199,154,70,.55);padding:18px var(--gutter) calc(18px + env(safe-area-inset-bottom));display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px 34px;text-align:center}
.consent[hidden]{display:none}
.consent p{margin:0;max-width:560px;font-size:15px;line-height:1.55;color:var(--soft);text-wrap:balance}
.consent-ticket{flex:0 0 auto}
.consent .ticket-main,.consent .ticket-stub{appearance:none;border:0;cursor:pointer;font:inherit}
.consent .ticket-main{padding:11px 26px 12px}
.consent .ticket-stub{padding:11px 18px 12px 20px}
@media(max-width:640px){.consent{gap:14px}.consent-ticket{width:100%;display:flex}}

/* Link in bio (/linkinbio/): one column on black for Instagram traffic. */
.bio{max-width:520px;margin-inline:auto;padding:22px 20px 48px;text-align:center}
.bio-logo{display:block;width:110px;margin:0 auto 12px}
.bio h1{font-size:40px;margin-bottom:4px}
.bio>.when{margin-bottom:24px}
.bio-address{display:block}
.bio-list{display:grid;grid-template-columns:minmax(0,1fr);gap:44px}
.bio-card .event-poster{aspect-ratio:auto}
.bio-card .event-poster img{height:auto}
.bio-card .when{margin-top:16px}
.bio-card h2{font-size:29px;line-height:1.1;margin:4px 0 16px}
.bio-card .link{margin-top:4px}
.bio-socials{display:flex;flex-wrap:wrap;justify-content:center;gap:0 28px;margin-top:36px}

/* Laptops with a low screen: the five nights and their tickets still fit the first screen. */
@media(min-width:901px) and (max-height:800px){
  .stage .container{max-width:calc(1080px + 2*var(--gutter))}
  .stage-hero{height:42svh}
  .stage h1{font-size:clamp(44px,5.2vw,68px)}
  .nights{margin-top:26px}
  .night .when{margin-top:10px;font-size:16px}
  .night h3{font-size:19px;margin:2px 0 12px}
  .night .ticket{min-height:50px;font-size:17px}
  .night .ticket-main{padding-inline:10px}
  .night .ticket-stub{padding-inline:11px 9px;font-size:15px}
}
@media(max-width:1180px){
  .night h3{font-size:18px}
  .night .ticket{font-size:17px}
  .night .ticket-main{padding-inline:10px}
  .night .ticket-stub{padding-inline:11px 9px;font-size:15px}
}
/* Narrow desktops: five cards are too slim for a ticket and stub side by side, so the stub hangs under the ticket. */
@media(min-width:901px) and (max-width:1100px){
  .night .ticket{flex-direction:column;min-height:0}
  .night .ticket-main{min-height:46px}
  .night .ticket-stub{min-height:44px;padding:10px}
}
@media(max-width:900px){
  /* Header: language left, crest on the axis, the word Menu right. */
  .site-header{grid-template-columns:minmax(0,1fr) 125px minmax(0,1fr);padding:12px var(--gutter) 6px}
  .header-tools{grid-column:1/-1;justify-self:stretch;justify-content:space-between}
  .language-switch a:first-child{padding-left:0}
  .menu-toggle{display:block;font-family:var(--serif);font-size:20px;line-height:1;letter-spacing:-.025em;padding:13px 0 13px 14px;min-width:44px;transition:color .18s}
  .menu-toggle:hover{color:var(--gold)}
  .main-nav{display:none;position:fixed;inset:0;z-index:30;background:var(--black);flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:150px var(--gutter) 70px}
  .nav-side{display:contents}
  .main-nav .nav-link{font-size:clamp(44px,13.5vw,62px);line-height:1.12;letter-spacing:-.04em;padding:6px 0}
  .menu-open{overflow:hidden}
  .menu-open .main-nav{display:flex}
  .menu-open .site-header{position:fixed;top:0;left:0;right:0;background:none}
  /* Phones: the picture runs edge to edge. */
  .stage-hero{height:min(86vw,42svh)}
  .stage-hero::before{display:none}
  .stage-hero img{width:100%;object-fit:cover;object-position:50% 0;-webkit-mask-image:none;mask-image:none}
  /* The five nights stand under each other, each with its ticket across the full width. */
  .nights{grid-template-columns:minmax(0,1fr);gap:34px;max-width:520px;margin-inline:auto}
  .night{display:grid;grid-template-columns:42% minmax(0,1fr);gap:12px 20px;align-items:center;text-align:left}
  .night .when{margin:0 0 4px;font-size:18px}
  .night h3{margin:0;min-height:0;font-size:clamp(22px,6.4vw,30px)}
  .night .ticket{grid-column:1/-1;margin:0;font-size:20px;min-height:58px}
  .night .ticket-main{padding-inline:22px}
  .night .ticket-stub{padding-inline:24px 22px;font-size:18px}
  .duo{grid-template-columns:minmax(0,1fr);gap:34px}
  .duo-media{width:100%;max-width:520px;margin-inline:auto}
  /* One night: name, date and ticket first, then the poster. */
  .detail{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "poster" "body";row-gap:30px;text-align:center}
  .detail-poster{position:static;width:100%;max-width:520px;margin-inline:auto}
  .detail-text{margin-inline:auto;margin-top:0}
  .detail-links{justify-content:center}
  .fact-when .when-dot{display:none}
  .fact-when .when-time{display:block}
  .rules{grid-template-columns:minmax(0,1fr);max-width:620px;gap:30px}
  .trio{grid-template-columns:minmax(0,1fr);gap:26px}
}
@media(max-width:640px){
  /* Events: poster beside date and name, then the ticket across the full width. */
  .event-row{grid-template-columns:42% minmax(0,1fr);gap:0 20px;align-items:center}
  .row-copy,.row-copy .actions{display:contents}
  .row-poster{grid-column:1;grid-row:1/span 2;width:100%}
  .row-copy .when{grid-column:2;grid-row:1;align-self:end;font-size:18px}
  .row-copy .date-long,.row-copy .when-dot{display:none}
  .row-copy .date-short{display:inline}
  .row-copy .when-time{display:block}
  .stage .when-dot{display:none}
  .stage .lead time{display:block}
  .row-copy h2{grid-column:2;grid-row:2;align-self:start;margin:6px 0 0}
  .row-copy .ticket,.row-copy .ticket-status{grid-column:1/-1;grid-row:3;margin-top:12px}
  .row-copy .ticket{display:flex;font-size:20px;min-height:58px}
  .row-text{grid-column:1/-1;grid-row:4;max-width:none;margin:14px 0 0}
  .row-copy .link{grid-column:1/-1;grid-row:5;justify-self:start}
  .row-copy .ticket-stub{padding-inline:24px 22px;font-size:18px}
  .ticket-large{font-size:21px}
  .halves{grid-template-columns:minmax(0,1fr);gap:34px}
  .rental-typeform{height:590px}
}
@media(max-width:360px){
  .night .ticket,.row-copy .ticket{font-size:18px}
  .night .ticket-stub,.row-copy .ticket-stub{font-size:16px;padding-inline:16px 14px}
  .row-copy h2{font-size:22px}
  .bio-card h2{font-size:25px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important;animation:none!important}}
@media print{.site-header,.site-footer,.ticket,.link{display:none}body,.band{background:#fff!important;color:#000!important}.container{padding:0}.detail-poster{position:static}.event-poster{-webkit-print-color-adjust:exact;print-color-adjust:exact}}