/* DC Social Collective
   Palette from the brand: navy and coral. Amber is the string-light glow that runs through their photography. */
:root {
  --navy: #071a3a;
  --navy-2: #0c2450;
  --coral: #f04e49;
  --coral-dark: #c93a36;
  --amber: #f2b75b;
  --cream: #f7f1e6;
  --cream-2: #efe6d6;
  --ink: #12203a;
  --ink-2: #4b5670;
  --paper: #fffdf9;
  --display: "Fraunces", Georgia, serif;
  --body: "Work Sans", system-ui, sans-serif;
  --wide: 1240px;
  --gutter: clamp(1.1rem, 4vw, 2.5rem);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }
body { margin: 0; font-family: var(--body); font-size: 1.05rem; line-height: 1.6; color: var(--ink); background: var(--cream); }
img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3 { text-wrap: balance; font-family: var(--display); font-weight: 700; line-height: 1.05; margin: 0 0 .6em; letter-spacing: -.01em; font-variation-settings: "opsz" 144; }
h1 { font-size: clamp(2.6rem, 6vw, 4.8rem); }
h2 { font-size: clamp(2rem, 4vw, 3rem); }
h3 { font-size: 1.35rem; }
p { margin: 0 0 1.1em; max-width: 68ch; }
.wrap { max-width: var(--wide); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.skip { position: absolute; left: -999px; top: 0; background: var(--coral); color: #fff; padding: .6rem 1rem; z-index: 100; }
.skip:focus { left: 1rem; top: 1rem; }
:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; }

/* buttons */
.btn { display: inline-block; background: var(--coral); color: #fff; font-weight: 600; text-decoration: none; padding: .95rem 1.6rem; border-radius: 999px; border: 2px solid var(--coral); line-height: 1.1; transition: background .15s, border-color .15s; }
.btn:hover { background: var(--coral-dark); border-color: var(--coral-dark); }
.btn.ghost { background: transparent; color: inherit; border-color: currentColor; }
.btn.ghost:hover { background: rgba(255,255,255,.08); }
.btn.small { padding: .55rem 1.1rem; font-size: .95rem; }
.on-dark .btn.ghost:hover { background: rgba(255,255,255,.1); }

/* header */
.site-head { position: absolute; inset: 0 0 auto 0; z-index: 20; }
body:not(.home) .site-head { position: static; background: var(--navy); }
.bar { display: flex; align-items: center; justify-content: space-between; height: 84px; }
.brand img { width: auto; height: 54px; }
.nav { display: flex; align-items: center; gap: 1.6rem; }
.nav a { color: #fff; text-decoration: none; font-weight: 500; font-size: 1rem; padding-bottom: 2px; border-bottom: 2px solid transparent; }
.nav a[aria-current] { border-bottom-color: var(--coral); }
.nav a:not(.btn):hover { border-bottom-color: rgba(255,255,255,.5); }
.nav .btn { color: #fff; }
.menu-toggle, .menu-btn { display: none; }
@media (max-width: 860px) {
  .menu-btn { display: flex; flex-direction: column; gap: 7px; width: 44px; height: 44px; align-items: center; justify-content: center; cursor: pointer; }
  .menu-btn span { display: block; width: 26px; height: 2px; background: #fff; }
  .nav { display: none; position: absolute; top: 84px; left: 0; right: 0; background: var(--navy); flex-direction: column; align-items: flex-start; padding: 1rem var(--gutter) 1.6rem; gap: 1rem; border-top: 1px solid rgba(255,255,255,.1); }
  .nav a { font-size: 1.2rem; }
  .menu-toggle:checked ~ .nav { display: flex; }
}

/* hero */
.hero { position: relative; min-height: min(92vh, 900px); display: grid; align-items: end; color: #fff; background: var(--navy); isolation: isolate; }
.hero video.bg, .hero img.bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; z-index: -2; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(7,26,58,.55) 0%, rgba(7,26,58,.15) 35%, rgba(7,26,58,.75) 75%, var(--navy) 100%); }
.hero .wrap { padding-top: 8.5rem; padding-bottom: 4rem; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(320px, 400px); gap: 4rem; align-items: end; justify-content: space-between; }
.hero h1 { font-size: clamp(3rem, 6.4vw, 5.6rem); margin-bottom: 1rem; max-width: 14ch; }
.hero h1 em { font-style: italic; font-weight: 500; }
.hero .lede { font-size: clamp(1.1rem, 1.5vw, 1.3rem); max-width: 34rem; color: rgba(255,255,255,.88); }
.hero-actions { display: flex; gap: .8rem; flex-wrap: wrap; margin-top: 1.4rem; }

/* next event card in hero */
.next { background: var(--cream); color: var(--ink); border-radius: 14px; overflow: hidden; box-shadow: 0 30px 60px -20px rgba(0,0,0,.6); justify-self: end; width: 100%; max-width: 420px; text-decoration: none; display: block; }
.next img { aspect-ratio: 2 / 1; object-fit: cover; width: 100%; }
.next .body { padding: 1.2rem 1.4rem 1.4rem; }
.next .kicker { font-size: .85rem; color: var(--coral-dark); font-weight: 600; margin: 0 0 .3rem; }
.next h2 { font-size: 1.7rem; margin: 0 0 .3rem; }
.next .meta { color: var(--ink-2); margin: 0 0 1rem; font-size: .98rem; }
.next .btn { width: 100%; text-align: center; }
@media (max-width: 860px) {
  .hero { min-height: auto; }
  .hero .wrap { grid-template-columns: 1fr; padding-top: 7rem; }
  .next { justify-self: stretch; max-width: none; }
}

/* sections */
.band { padding: clamp(3.5rem, 7vw, 6rem) 0; }
.band.navy { background: var(--navy); color: #fff; }
.band.navy p { color: rgba(255,255,255,.85); }
.band.paper { background: var(--paper); }
.band-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 2rem; }
.band-head h2 { margin: 0; }
.band-head a:not(.btn) { color: var(--coral-dark); font-weight: 600; text-decoration: none; border-bottom: 2px solid transparent; }
.band-head a:not(.btn):hover { border-bottom-color: currentColor; }
.band.navy .band-head a:not(.btn) { color: var(--amber); }
.lede { font-size: clamp(1.15rem, 1.6vw, 1.35rem); line-height: 1.5; max-width: 40rem; }

/* event list */
.events { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(18,32,58,.15); }
.band.navy .events { border-color: rgba(255,255,255,.15); }
.events li { border-bottom: 1px solid rgba(18,32,58,.15); }
.band.navy .events li { border-color: rgba(255,255,255,.15); }
.events a { display: grid; grid-template-columns: 9rem 180px minmax(0, 1fr) auto; gap: 1.75rem; align-items: center; padding: 1.4rem 0; text-decoration: none; color: inherit; }
.events a::after { content: "→"; font-size: 1.4rem; color: var(--coral); opacity: 0; transform: translateX(-6px); transition: opacity .15s, transform .15s; }
.events a:hover::after { opacity: 1; transform: none; }
.events .thumb { order: -1; }
.events .date { font-family: var(--display); font-weight: 700; font-size: 1.5rem; line-height: 1; }
.events .date small { display: block; font-family: var(--body); font-weight: 500; font-size: .85rem; color: var(--ink-2); margin-top: .3rem; }
.band.navy .events .date small { color: rgba(255,255,255,.6); }
.events h3 { margin: 0 0 .2rem; font-size: 1.5rem; }
.events .venue { margin: 0; color: var(--ink-2); font-size: .98rem; }
.band.navy .events .venue { color: rgba(255,255,255,.7); }
.events .thumb { width: 180px; aspect-ratio: 2 / 1; object-fit: cover; border-radius: 8px; order: 0; }
.events .date { order: -1; }
.events a:hover h3 { color: var(--coral-dark); }
.band.navy .events a:hover h3 { color: var(--amber); }
@media (max-width: 720px) {
  .events a { grid-template-columns: 5.2rem minmax(0, 1fr); gap: 1rem; }
  .events .thumb, .events a::after { display: none; }
}

/* posters (upcoming on events page) */
.posters { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 2rem; }
.poster { background: var(--paper); border-radius: 14px; overflow: hidden; box-shadow: 0 18px 40px -24px rgba(7,26,58,.45); display: flex; flex-direction: column; }
.poster img { aspect-ratio: 2 / 1; object-fit: cover; }
.poster .body { padding: 1.4rem 1.6rem 1.6rem; display: flex; flex-direction: column; flex: 1; }
.poster .when { color: var(--coral-dark); font-weight: 600; margin: 0 0 .3rem; }
.poster h3 { font-size: 1.8rem; margin: 0 0 .3rem; }
.poster .venue { margin: 0 0 .8rem; color: var(--ink-2); }
.poster p.desc { font-size: .98rem; margin-bottom: 1.2rem; }
.poster .actions { margin-top: auto; display: flex; gap: .7rem; flex-wrap: wrap; }
.poster .actions .ghost { color: var(--ink); }

/* series */
.series { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.5rem; }
.series article { border-radius: 14px; overflow: hidden; color: #fff; background: var(--navy); display: flex; flex-direction: column; }
.series img { aspect-ratio: 4 / 3; width: 100%; object-fit: cover; }
.series .txt { padding: 1.3rem 1.4rem 1.5rem; }
.series h3 { margin: 0 0 .25rem; font-size: 1.6rem; }
.series p { margin: 0; font-size: .95rem; color: rgba(255,255,255,.85); }

/* about strip on home */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
.two-col img { border-radius: 14px; }
@media (max-width: 860px) { .two-col { grid-template-columns: 1fr; } }
.values { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; margin-top: 2.5rem; }
.values h3 { margin-bottom: .4rem; }
.values p { font-size: 1rem; margin: 0; }
@media (max-width: 860px) { .values { grid-template-columns: 1fr; } }

/* mosaic */
.mosaic { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 200px; gap: .8rem; }
.mosaic a { display: block; overflow: hidden; border-radius: 10px; }
.mosaic img { width: 100%; height: 100%; object-fit: cover; }
.mosaic a:nth-child(1) { grid-column: span 2; grid-row: span 2; }
@media (max-width: 860px) { .mosaic { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 160px; } }

/* quote */
.quote { font-family: var(--display); font-style: italic; font-weight: 500; font-size: clamp(1.5rem, 3vw, 2.4rem); line-height: 1.25; max-width: 28ch; margin: 0 auto; text-align: center; }
.quote cite { display: block; font-family: var(--body); font-style: normal; font-size: .95rem; margin-top: 1rem; color: rgba(255,255,255,.7); }

/* newsletter */
.signup { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
.signup form { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.signup input { min-width: 0; width: 100%; font: inherit; padding: .9rem 1rem; border-radius: 8px; border: 1px solid rgba(18,32,58,.25); background: #fff; }
.signup input[type=email] { grid-column: 1 / -1; }
.signup button { grid-column: 1 / -1; font: inherit; }
@media (max-width: 860px) { .signup { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .signup form { grid-template-columns: 1fr; } .hero h1 { font-size: 2.9rem; } .hero .lede { font-size: 1.05rem; } .events .date { font-size: 1.25rem; } .band-head { flex-direction: column; gap: .4rem; align-items: flex-start; } }

/* sponsors */
.sponsors { display: flex; gap: 2.5rem; align-items: center; flex-wrap: wrap; }
.sponsors img { height: 56px; width: auto; }
.sponsors .txt p { margin: 0; }

/* inner pages */
.page-head { padding-top: clamp(2.5rem, 5vw, 4rem); padding-bottom: 1rem; }
.page-head h1 { margin-bottom: .4rem; }
.page-head .lede { margin: 0; }
.prose { max-width: 68ch; }
.prose h2 { font-size: 1.9rem; margin-top: 2.5rem; }
.letter { background: var(--paper); border-radius: 14px; padding: clamp(1.5rem, 4vw, 3rem); max-width: 60ch; }
.letter p:last-child { margin: 0; }
.faq details { border-top: 1px solid rgba(18,32,58,.15); padding: 1rem 0; }
.faq details:last-child { border-bottom: 1px solid rgba(18,32,58,.15); }
.faq summary { font-family: var(--display); font-weight: 700; font-size: 1.3rem; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.faq summary::after { content: "+"; font-weight: 400; font-size: 1.6rem; color: var(--coral-dark); }
.faq details[open] summary::after { content: "–"; }
.faq p { margin: .6rem 0 0; }

.team { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 2.5rem 2rem; }
.team img { aspect-ratio: 1; object-fit: cover; border-radius: 14px; margin-bottom: 1rem; }
.team h2 { font-size: 1.6rem; margin: 0; }
.team .role { color: var(--coral-dark); font-weight: 600; margin: 0 0 .6rem; }
.team p { font-size: .98rem; }

.gallery { columns: 3; column-gap: 1rem; }
.gallery figure { margin: 0 0 1rem; break-inside: avoid; position: relative; }
.gallery figure > a:first-child { display: block; border-radius: 10px; overflow: hidden; }
@media (max-width: 860px) { .gallery { columns: 2; } }

.event-page { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 3.5rem; align-items: start; }
.event-page .facts { position: sticky; top: 1.5rem; }
.event-page img.cover { border-radius: 14px; }
.event-page .facts { background: var(--paper); border-radius: 14px; padding: 1.6rem; }
.event-page .facts dl { margin: 0 0 1.2rem; display: grid; grid-template-columns: auto 1fr; gap: .4rem 1.2rem; }
.event-page .facts dt { color: var(--ink-2); }
.event-page .facts dd { margin: 0; }
@media (max-width: 860px) { .event-page { grid-template-columns: 1fr; gap: 1.5rem; } .event-page .facts { position: static; order: -1; } }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.5rem; }
/* Four abreast on a desktop, so the row cannot break into three and one. */
.cards.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1000px) { .cards.four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .cards.four { grid-template-columns: 1fr; } }
.card { background: var(--paper); border-radius: 14px; padding: 1.6rem; display: flex; flex-direction: column; }
.card h2 { font-size: 1.6rem; margin-bottom: .4rem; }
.card p { font-size: .98rem; flex: 1; }
.card .btn { align-self: flex-start; }
.form { display: grid; gap: .8rem; max-width: 34rem; }
.form label { display: grid; gap: .3rem; font-weight: 500; font-size: .95rem; }
.form input, .form textarea, .form select { min-width: 0; width: 100%; font: inherit; padding: .8rem .9rem; border-radius: 8px; border: 1px solid rgba(18,32,58,.25); background: #fff; }
.form button { font: inherit; justify-self: start; cursor: pointer; }

/* footer */
.site-foot { background: var(--navy); color: rgba(255,255,255,.85); padding: 3.5rem 0 2rem; }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2rem; }
.foot-brand img { width: auto; height: 56px; margin-bottom: .8rem; }
.foot-brand p { font-size: .95rem; max-width: 30ch; }
.site-foot h3 { color: #fff; font-size: 1.1rem; margin-bottom: .6rem; }
.site-foot a { display: block; color: rgba(255,255,255,.8); text-decoration: none; padding: .2rem 0; }
.site-foot a:hover { color: var(--amber); }
.foot-small { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: 2.5rem; padding-top: 1.2rem; border-top: 1px solid rgba(255,255,255,.12); font-size: .9rem; color: rgba(255,255,255,.6); }
.foot-small a { display: inline; }
.foot-credit { margin: 1.6rem 0 0; font-size: .9rem; color: rgba(255,255,255,.6); }
@media (max-width: 860px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .foot-grid { grid-template-columns: 1fr; } }

.feature { width: 100%; border-radius: 14px; background: #000; }
.videos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 1.8rem; }
.videos figure { margin: 0; }
.videos video { width: 100%; border-radius: 12px; background: #000; }
.videos figcaption { margin-top: .6rem; font-size: .95rem; color: rgba(255,255,255,.8); }
.videos figcaption strong { color: #fff; }
@media (prefers-reduced-motion: reduce) { .hero video.bg { display: none; } }

.two-col img.fill { width: 100%; height: 100%; object-fit: cover; }
/* Sat still at the top of the column rather than following the scroll. */
.story-side { position: static; align-self: start; }
.story-side img { border-radius: 14px; margin-bottom: 1rem; }
.story-side p { font-size: .98rem; color: var(--ink-2); }
.faq { display: grid; grid-template-columns: 1fr 1fr; gap: 0 3rem; align-items: start; }
.faq details:last-child { border-bottom: 0; }
.faq details:nth-last-child(-n+2) { border-bottom: 1px solid rgba(18,32,58,.15); }
@media (max-width: 860px) { .faq { grid-template-columns: 1fr; } .faq details:nth-last-child(2) { border-bottom: 0; } }
.videos video, .feature { aspect-ratio: 16 / 9; object-fit: cover; }
.letter { max-width: none; }

.ambassadors { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.amb { display: grid; grid-template-columns: 120px 1fr; gap: 1.2rem; align-items: start; background: var(--cream); border-radius: 14px; padding: 1.4rem; text-decoration: none; color: inherit; }
.amb img { aspect-ratio: 1; object-fit: cover; border-radius: 12px; }
.amb h3 { margin: 0 0 .1rem; font-size: 1.3rem; }
.amb .role { color: var(--coral-dark); font-weight: 600; font-size: .9rem; margin: 0 0 .5rem; }
.amb p { font-size: .95rem; margin: 0; }
.amb.join { grid-template-columns: 1fr; background: var(--navy); color: #fff; }
.amb.join p { color: rgba(255,255,255,.85); margin-bottom: 1rem; }
@media (max-width: 1000px) { .ambassadors { grid-template-columns: 1fr; } }
.albums { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem; }
.album { display: block; text-decoration: none; color: inherit; }
/* Cards crop to 3:2, so bias the crop upward. Centring it decapitates anyone standing in a portrait photo. */
.album img { aspect-ratio: 3 / 2; object-fit: cover; object-position: center 30%; border-radius: 12px; margin-bottom: .7rem; }
.album h2 { font-size: 1.3rem; margin: 0 0 .15rem; }
.album p { margin: 0; color: var(--ink-2); font-size: .95rem; }
.album:hover h2 { color: var(--coral-dark); }
.gallery img { width: 100%; }
.band.dusk-merch { background: var(--navy); color: #fff; }
.band.dusk-merch p { color: rgba(255,255,255,.85); }
.merch { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
.merch img { border-radius: 14px; }
@media (max-width: 860px) { .merch { grid-template-columns: 1fr; } }

/* Footer v2 */
.site-foot.v2 { padding: 0; border-top: 3px solid var(--foot-accent); }
.site-foot.v2 .foot-top { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1.25fr; gap: 2.5rem 3rem; padding-top: 3.25rem; padding-bottom: 2.5rem; }
.site-foot.v2 .fbrand .foot-brand { margin: 0 0 .4rem; }
.site-foot.v2 .foot-tag { max-width: 38ch; line-height: 1.55; margin: 0 0 1.2rem; }
.site-foot.v2 .foot-ctas { display: flex; gap: .6rem; flex-wrap: wrap; }
.site-foot.v2 .foot-ctas .btn { display: inline-block; padding: .6rem 1rem; font-size: .9rem; background: var(--foot-accent); color: var(--foot-bg); border: 1px solid var(--foot-accent); }
.site-foot.v2 .foot-ctas .btn.ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.35); }
.site-foot.v2 .foot-ctas .btn:hover { filter: brightness(1.08); }
.site-foot.v2 .fcol h3 { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.55); margin: .3rem 0 .9rem; font-weight: 600; font-family: var(--body); }
.site-foot.v2 .fcol a { display: block; padding: .28rem 0; color: rgba(255,255,255,.85); font-size: .97rem; text-decoration: none; }
.site-foot.v2 .fcol a:hover { color: var(--foot-accent); }
.site-foot.v2 .crow { display: flex; align-items: flex-start; gap: .6rem; padding: .28rem 0; color: rgba(255,255,255,.85); font-size: .97rem; text-decoration: none; }
.site-foot.v2 .crow svg { width: 18px; height: 18px; flex: none; margin-top: .15rem; color: var(--foot-accent); }
.site-foot.v2 .socials { display: flex; gap: .5rem; margin-top: 1rem; }
.site-foot.v2 .soc { display: inline-flex; width: 38px; height: 38px; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; color: rgba(255,255,255,.85); padding: 0; }
.site-foot.v2 .soc svg { width: 18px; height: 18px; }
.site-foot.v2 .soc:hover { border-color: var(--foot-accent); color: var(--foot-accent); }
.site-foot.v2 .foot-news { border-top: 1px solid rgba(255,255,255,.12); margin: 0; padding-top: 1.8rem; padding-bottom: 1.8rem; display: grid; grid-template-columns: 1.4fr 1fr; gap: 2rem; align-items: center; }
.site-foot.v2 .foot-news .foot-brand { font-size: 1.25rem; margin: 0 0 .3rem; }
.site-foot.v2 .foot-news .foot-tag { margin: 0; }
.site-foot.v2 .news-form { display: flex; gap: .6rem; }
.site-foot.v2 .news-form input { flex: 1; min-width: 0; font: inherit; padding: .8rem .9rem; border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.06); color: #fff; }
.site-foot.v2 .news-form .btn { background: var(--foot-accent); color: var(--foot-bg); border: 1px solid var(--foot-accent); padding: .8rem 1.1rem; }
.site-foot.v2 .foot-bottom { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; border-top: 1px solid rgba(255,255,255,.12); margin: 0; padding-top: 1.1rem; padding-bottom: 1.3rem; font-size: .88rem; color: rgba(255,255,255,.6); }
.site-foot.v2 .util { display: flex; gap: 1.2rem; align-items: center; flex-wrap: wrap; }
.site-foot.v2 .util a { display: inline; color: rgba(255,255,255,.7); text-decoration: none; }
.site-foot.v2 .util a:hover { color: var(--foot-accent); }
.site-foot.v2 .totop { display: inline-flex; width: 32px; height: 32px; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,.25); border-radius: 50%; }
.site-foot.v2 .totop svg { width: 16px; height: 16px; }
@media (max-width: 900px) { .site-foot.v2 .foot-top { grid-template-columns: 1fr 1fr; } .site-foot.v2 .fbrand { grid-column: 1 / -1; } .site-foot.v2 .foot-news { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .site-foot.v2 .foot-top { grid-template-columns: 1fr; } }

.site-foot.v2 { --foot-accent: var(--amber); --foot-bg: var(--navy); }
.site-foot.v2 .fmark { height: 56px; width: auto; margin-bottom: .8rem; }
.site-foot.v2 .copy a { color: inherit; }
.site-foot.v2 .copy a { display: inline; color: inherit; text-decoration: underline; text-decoration-color: rgba(255,255,255,.3); }
.site-foot.v2 .crow span { overflow-wrap: anywhere; }
.site-foot.v2 .fcontact { min-width: 0; }
.site-foot.v2 .crow { gap: .75rem; align-items: center; }
.site-foot.v2 .crow svg { width: 20px; height: 20px; min-width: 20px; margin-top: 0; }
.site-foot.v2 .crow span { overflow-wrap: break-word; word-break: normal; }
.site-foot.v2 .soc { flex: none; }
.site-foot.v2 .fcol a.crow, .site-foot.v2 .fcol span.crow { display: flex; align-items: center; gap: .75rem; }
.site-foot.v2 .fcol a.soc { display: inline-flex; align-items: center; justify-content: center; padding: 0; width: 38px; height: 38px; }
.site-foot.v2 .fcol a.soc svg { width: 18px; height: 18px; display: block; }
.site-foot.v2 .util a.totop { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; }
.site-foot.v2 .util a.totop svg { width: 16px; height: 16px; display: block; }

/* Get involved pages */
.callout { text-align: center; }
.callout h1, .callout h2 { max-width: 30ch; margin-left: auto; margin-right: auto; }
.callout p { margin-left: auto; margin-right: auto; }
.page-head.callout .lede { margin-left: auto; margin-right: auto; }
.eyebrow { text-transform: uppercase; letter-spacing: .14em; font-size: .82rem; font-weight: 600; color: var(--coral-dark); margin: 0 0 .7rem; }
.contact-lines { list-style: none; margin: 1.2rem 0 0; padding: 0; display: grid; gap: .45rem; font-size: 1.05rem; }
.contact-lines a { color: var(--coral-dark); font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.contact-lines a:hover { text-decoration: underline; }
.ticks { list-style: none; margin: 0 0 1.2rem; padding: 0; display: grid; gap: .55rem; max-width: 60ch; }
.ticks li { display: grid; grid-template-columns: 1rem 1fr; gap: .7rem; }
.ticks li::before { content: "•"; color: var(--coral); font-weight: 700; line-height: 1.4; }
.notice { background: #fff; border-radius: 14px; padding: clamp(1.5rem, 4vw, 2.5rem); max-width: 44rem; }
.notice h2 { font-size: 1.9rem; }
.form input[type="file"] { padding: .6rem .5rem; background: #fff; }

/* Press */
.news { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.2rem; }
.news.three { grid-template-columns: repeat(3, 1fr); }
.news a { display: block; background: var(--paper); border-radius: 14px; padding: 1.5rem 1.6rem; text-decoration: none; color: inherit; height: 100%; box-shadow: 0 18px 40px -30px rgba(7,26,58,.5); }
.news a.withpic { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 1.5rem; align-items: start; padding: 1.2rem 1.4rem; }
.news a img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 10px; }
.news.three a.withpic { grid-template-columns: 1fr; gap: 1rem; }
@media (max-width: 700px) { .news a.withpic { grid-template-columns: 1fr; gap: 1rem; } }
.news a:hover h3 { color: var(--coral-dark); }
.news .pub { font-size: .85rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--coral-dark); margin: 0 0 .5rem; }
.news h3 { font-size: 1.45rem; margin: 0 0 .5rem; }
.news .sum { font-size: .98rem; margin: 0 0 .5rem; }
.news .by { font-size: .9rem; color: var(--ink-2); margin: 0 0 .6rem; }
.news .read { font-weight: 600; color: var(--coral-dark); font-size: .95rem; }
.news .read::after { content: " →"; }
.band.navy .news a { background: rgba(255,255,255,.06); }
@media (max-width: 900px) { .news.three { grid-template-columns: 1fr; } }

/* Download a photo */
.gallery .dl { position: absolute; right: .55rem; bottom: .55rem; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: rgba(7,26,58,.72); color: #fff; opacity: 0; transition: opacity .15s, background .15s; }
.gallery .dl svg { width: 20px; height: 20px; }
.gallery .dl:hover { background: var(--coral); }
.gallery figure:hover .dl, .gallery .dl:focus-visible { opacity: 1; }
@media (hover: none) { .gallery .dl { opacity: .92; } }

/* Venues and partners */
/* Each mark sits in a tile of its own so nothing can be cropped, and so a
   heavy logo and a light one read at the same weight in the row. */
/* Fixed columns rather than wrapping, so the band is always exactly two lines
   on a desktop: five across the top, four beneath. */
.venues { list-style: none; margin: 1rem auto 0; padding: 0; display: grid; gap: 1rem; }
.venues.top { margin-top: 2rem; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.venues:not(.top) { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 872px; }
.venues.top li { height: 112px; padding: 1rem 1.3rem; }
.venues.top li:not(:has(img)) { font-size: 1.15rem; }
@media (max-width: 860px) { .venues.top, .venues:not(.top) { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: none; } }
@media (max-width: 560px) { .venues.top, .venues:not(.top) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.venues li { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; width: auto; height: 96px; padding: .9rem 1.1rem; background: #fff; border-radius: 12px; box-shadow: 0 10px 24px -20px rgba(7,26,58,.5); font-family: var(--display); font-weight: 700; font-size: 1.02rem; line-height: 1.15; text-align: center; color: var(--ink-2); letter-spacing: -.01em; }
/* Venue marks keep their own colours on the light band. Only the press strip
   on the dark homepage band is flattened to white, and those are flat
   wordmarks that survive it. */
.venues li img { opacity: .9; transition: opacity .15s; }
.venues li a:hover img { opacity: 1; }
.logos li img { opacity: .95; transition: opacity .15s; }
.logos li a:hover img { opacity: 1; }
.venues-band .venues { justify-content: center; }
.venues-band .lede { margin-left: auto; margin-right: auto; text-align: center; }
.venues-band .band-head { justify-content: center; }
.venues li img { max-height: 100%; max-width: 100%; width: auto; height: auto; object-fit: contain; display: block; }
.venues a { text-decoration: none; color: inherit; }
.venues li a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.venues li.script { font-family: "Kaushan Script", "Fraunces", cursive; font-weight: 400; font-size: 1.3rem; line-height: 1.25; color: var(--ink); }
.venues a:hover { color: var(--coral-dark); }

/* Pull quotes */
.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem 2.5rem; margin-top: 3.5rem; }
.quotes blockquote { margin: 0; }
.quotes p { font-family: var(--display); font-style: italic; font-weight: 500; font-size: clamp(1.15rem, 1.7vw, 1.45rem); line-height: 1.3; margin: 0 0 .8rem; max-width: none; }
.quotes cite { font-style: normal; font-size: .92rem; color: rgba(255,255,255,.7); }
.quotes cite a { color: var(--amber); text-decoration: none; }
.quotes cite a:hover { text-decoration: underline; }
@media (max-width: 900px) { .quotes { grid-template-columns: 1fr; gap: 1.8rem; } }

/* Where we have been published */
.pubstrip { margin-top: 2rem; padding-top: 1.4rem; border-top: 1px solid rgba(18,32,58,.15); }
.pubstrip ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.6rem; }
.pubstrip li { display: flex; align-items: center; min-height: 54px; font-family: var(--display); font-weight: 700; font-size: 1.15rem; line-height: 1.15; color: var(--ink-2); }
/* This strip sits on the light band, so the marks keep their own colours. */
.pubstrip ul { align-items: center; gap: .9rem 2rem; }
/* The Register artwork sits one unit from its own edges, so at 30px it read as
   shaved. Bigger, with room around it. */
.pubstrip li img { max-height: 54px; max-width: 200px; width: auto; height: auto; object-fit: contain; display: block; opacity: .9; transition: opacity .15s; }
.pubstrip a { text-decoration: none; color: inherit; }
.pubstrip a:hover img { opacity: 1; }

/* Booking form, served by RSVPify inside the page */
/* With the RSVPify welcome step off, the form comes in around 760px tall.
   RSVPify's own embed uses a 800px floor, and the later steps of the form run
   longer, so this leaves a little slack and lets the frame scroll past it. */
.booking { width: 100%; height: 860px; border: 0; border-radius: 14px; background: #fff; box-shadow: 0 18px 40px -30px rgba(7,26,58,.5); }
@media (max-width: 700px) { .booking { height: 1150px; } }

/* As seen in */
.logos-band { padding: 2rem 0 2.2rem; }
.logos-band .eyebrow { color: rgba(255,255,255,.55); text-align: center; margin-bottom: 1rem; }
.logos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem 1.2rem; }
.logos li { font-family: var(--display); font-weight: 700; font-size: clamp(1.15rem, 1.8vw, 1.5rem); color: rgba(255,255,255,.9); }
.logos li { display: flex; align-items: center; justify-content: center; height: 62px; background: #fff; border-radius: 10px; padding: .6rem 1rem; box-shadow: 0 10px 24px -20px rgba(0,0,0,.6); }
/* These SVGs carry a viewBox but no width or height, so they need a definite
   height or they collapse to nothing. max-width keeps the wide ones in line. */
.logos li img { max-height: 36px; max-width: 190px; width: auto; height: auto; object-fit: contain; display: block; }
.logos a { color: inherit; text-decoration: none; }
.logos a:hover { color: var(--amber); }

/* Chris beside his signature */
.signature { display: flex; align-items: center; gap: 1.1rem; margin-top: 1.6rem; }
.signature img { width: 76px; height: 76px; border-radius: 50%; object-fit: cover; flex: none; }
.signature p { margin: 0; }

/* Hover a mark and it says whose it is, so a monogram is never a guess. */
.venues li .vname { position: absolute; left: 0; right: 0; bottom: 0; padding: .3rem .4rem .35rem; font-family: var(--body); font-weight: 600; font-size: .72rem; line-height: 1.2; letter-spacing: .01em; color: #fff; background: rgba(7,26,58,.88); opacity: 0; transform: translateY(100%); transition: opacity .15s, transform .15s; }
.venues li:hover .vname, .venues li:focus-within .vname { opacity: 1; transform: none; }
@media (hover: none) { .venues li .vname { opacity: 1; transform: none; background: rgba(7,26,58,.72); } }

.venues li.darken img { filter: brightness(0); opacity: .82; }
.venues li.darken:hover img { opacity: 1; }

/* Headshots link out to the person */
.team .headshot { position: relative; display: block; }
.team .headshot .ig { position: absolute; right: .6rem; bottom: 1.6rem; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(7,26,58,.72); color: #fff; opacity: 0; transition: opacity .15s; }
.team .headshot .ig svg { width: 18px; height: 18px; }
.team .headshot:hover .ig, .team .headshot:focus-visible .ig { opacity: 1; }
@media (hover: none) { .team .headshot .ig { opacity: .9; } }
.team h2 a { text-decoration: none; color: inherit; }
.team h2 a:hover { color: var(--coral-dark); }

/* Early bird, which takes itself down the day after it ends */
.poster .earlybird { color: var(--coral-dark); font-weight: 600; font-size: .92rem; margin: -.5rem 0 .6rem; }
.gallery .dl[data-busy] { opacity: 1; background: var(--coral); }
.booking-start p { max-width: 46ch; }

/* Three rooms on Get involved */
.trio { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.trio img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 14px; }
.trio p { margin: .8rem 0 0; font-size: .98rem; color: var(--ink-2); max-width: none; }
@media (max-width: 860px) { .trio { grid-template-columns: 1fr; } }
/* a video shot upright keeps its shape instead of being cropped to 16:9 */
.videos video.portrait { aspect-ratio: 9 / 16; object-fit: contain; background: #000; max-height: 70vh; margin: 0 auto; }

/* A form embedded from Squarespace, in place of ours */
.embedded-form { max-width: 34rem; }
.embedded-form iframe { width: 100%; border: 0; }
.signup .embedded-form { max-width: none; }

/* Each recurring night links through to its most recent album. */
.series-link { display: block; text-decoration: none; color: inherit; }
.series-link img { transition: transform .25s ease; }
.series article { overflow: hidden; border-radius: 12px; }
.series-link:hover img { transform: scale(1.03); }
.series-link:hover h3 { color: var(--coral-dark); }
.series-link:focus-visible { outline: 3px solid var(--coral); outline-offset: 3px; }