*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 5rem; }
body { margin: 0; background: var(--page); color: var(--ink); font: var(--text-weight, 300) 1.0625rem/1.6 var(--text); }
img, video, iframe { display: block; max-width: 100%; height: auto; }
video, iframe { width: 100%; aspect-ratio: 16 / 9; background: #000; border: 0; }
h1, h2, h3, h4 { color: var(--head-ink, inherit); font-family: var(--head); font-weight: var(--head-weight, 300); line-height: 1.12; margin: 1.4em 0 .5em; overflow-wrap: break-word; }
h1 { font-size: clamp(2.25rem, 5vw, 3.75rem); }
h2, h3 { font-size: clamp(1.75rem, 3.6vw, 2.75rem); }
h3:has(strong), .cols h3 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); }
h3 strong { font-weight: inherit; }
h4 { font-size: 1.15rem; }
.lead { font: var(--head-weight, 300) clamp(1.1rem, 2vw, 1.45rem)/1.4 var(--head); }
a { color: inherit; }
table { width: 100%; border-collapse: collapse; margin: 1em 0; }
td, th { padding: .5em .75em .5em 0; border-bottom: 1px solid color-mix(in srgb, currentColor 25%, transparent); text-align: left; vertical-align: top; }

.top { position: fixed; inset: 0 0 auto; z-index: 10; display: flex; align-items: center; gap: 1rem; padding: .75rem 1rem; background: var(--bar); }
.logo { margin-right: auto; }
.logo img { height: 2rem; width: auto; }
.langs { display: flex; gap: .6rem; font-size: .85rem; }
.langs a { text-decoration: none; opacity: .65; padding: .4rem .1rem; }
.langs [aria-current] { opacity: 1; text-decoration: underline; }
.menu summary { list-style: none; cursor: pointer; padding: .75rem .25rem; }
.menu summary::-webkit-details-marker { display: none; }
.menu summary span, .menu summary span::before, .menu summary span::after { display: block; width: 1.6rem; height: 2px; background: currentColor; content: ''; }
.menu summary span { position: relative; }
.menu summary span::before { position: absolute; top: -.45rem; }
.menu summary span::after { position: absolute; top: .45rem; }
.menu nav { position: fixed; inset: 3.5rem 0 0; overflow-y: auto; padding: 1.5rem max(1rem, calc(50vw - 35rem)) 3rem; background: var(--page); display: flex; flex-direction: column; align-items: flex-start; gap: 1.5rem; }
.menu nav > ul { list-style: none; margin: 0; padding: 0; width: 100%; display: grid; gap: 1.25rem 2rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); }
.menu nav > ul > li > a { font: var(--head-weight, 300) 1.35rem/1.2 var(--head); text-decoration: none; }
.menu ul ul { list-style: none; margin: .5rem 0 0; padding: 0; font-size: .95rem; }
.menu ul ul a { display: block; padding: .3rem 0; text-decoration: none; opacity: .8; }

.band { padding: clamp(2.5rem, 6vw, 5rem) max(1rem, calc(50vw - 35rem)); background: var(--tone, var(--page)); color: var(--tone-ink, var(--ink)); }
main > .band:first-child { padding-top: clamp(6rem, 12vw, 9rem); }
.band > :first-child, .cols > div > :first-child { margin-top: 0; }
.band > :last-child, .cols > div > :last-child { margin-bottom: 0; }
.band.photo { --head-ink: #fff; position: relative; background: linear-gradient(rgb(26 25 25 / .4), rgb(26 25 25 / .45)), var(--bg) center / cover; color: #fff; min-height: 22rem; display: flex; flex-direction: column; justify-content: center; }
.band.hero { min-height: clamp(36rem, 66vw, 58rem); background-position: center 17%; }
.hero h1 { font-size: clamp(2rem, 3.6vw, 3rem); text-align: center; }
.hero p { font-family: var(--quote); font-size: 1.15rem; }
.cols { display: grid; gap: 1.5rem 2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); margin-block: 1.5rem; }
.cols:first-child { margin-top: 0; }
.cols:last-child { margin-bottom: 0; }

.button { display: inline-block; margin: .25rem .6rem .25rem 0; padding: .65rem 1.1rem; border: 0; background: var(--button); color: var(--button-ink); font: inherit; font-family: var(--head); font-size: 1rem; line-height: 1.25; text-decoration: none; cursor: pointer; }
.button::before { content: '→ '; }
.consent .button::before { content: none; }
.button:hover { filter: brightness(1.1); }
.button:disabled { opacity: .6; cursor: wait; }

details:not(.menu) { border-bottom: 1px solid color-mix(in srgb, currentColor 30%, transparent); padding: .85rem 0; }
details:not(.menu) > summary { cursor: pointer; font-family: var(--head); font-size: 1.1rem; }
details:not(.menu)[open] > summary { margin-bottom: .75rem; }

.cards { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); margin-block: 1.5rem; }
.card { display: flex; flex-direction: column; gap: .3rem; text-decoration: none; font-size: .95rem; }
.card img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; margin-bottom: .4rem; }
.calendar .card img { aspect-ratio: 9 / 16; }
/* Event pictures are often flyers with text to the edges, so they show whole; the stand-in picture fills its frame. */
.calendar .card img:not(.stock) { object-fit: contain; background: rgb(0 0 0 / .25); }
.card strong { font: var(--head-weight, 300) 1.1rem/1.2 var(--head); }
.card em, .calendar em { font-style: normal; font-size: .85em; opacity: .85; }
.off strong { text-decoration: line-through; }

.team, .slides { display: flex; gap: 1.5rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.team::-webkit-scrollbar, .slides::-webkit-scrollbar { display: none; }
.team > *, .slides > * { scroll-snap-align: start; flex: 0 0 auto; }
.team > * { width: calc((100% - 3rem) / 3); }
.slides > * { width: 100%; }
.slide { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: center; margin: 0; }
.slide img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.slide blockquote { margin: 0; font-family: var(--quote); font-size: clamp(1.1rem, 1.8vw, 1.4rem); line-height: 1.45; }
.slide p { margin: 0 0 1rem; }
.slide footer { font: var(--head-weight, 300) 1.1rem var(--head); }
.arrows { display: flex; gap: .5rem; margin: 1rem 0; }
.arrows button { width: 2.75rem; height: 2.75rem; border: 1px solid currentColor; background: none; color: inherit; font-size: 1.1rem; cursor: pointer; }
@media (max-width: 56rem) { .team > * { width: calc((100% - 1.5rem) / 2); } .slide { grid-template-columns: 1fr; } .slide img { order: -1; } }
@media (max-width: 30rem) { .team > * { width: 85%; } }

.calendar ul { list-style: none; margin: 0 0 1.5rem; padding: 0; }
.calendar li { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1rem; padding: .6rem 0; border-top: 1px solid color-mix(in srgb, currentColor 25%, transparent); }
.calendar time { min-width: 7rem; font-variant-numeric: tabular-nums; }
.calendar li strong { flex: 1 1 12rem; font-weight: 500; }
.calendar li span { font-size: .9em; opacity: .85; }
.calendar li .button { margin: 0; padding: .35rem .75rem; }

.foot { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); padding: 3rem max(1rem, calc(50vw - 35rem)); background: var(--foot); font-size: .9rem; }
.foot h4 { margin-top: 0; }
.legal { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 1rem; margin: 0; font-size: .8rem; }
.legal span { margin-left: auto; }
.linkish { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: underline; cursor: pointer; }
.consent { position: fixed; inset: auto 1rem 1rem; z-index: 20; max-width: 32rem; padding: 1rem; background: var(--page); border: 1px solid var(--button); font-size: .9rem; }
.consent p { margin: 0 0 .5rem; }

@font-face { font-family: Soehne; src: url(/fonts/soehne-leicht.ttf); font-display: swap; }
@font-face { font-family: SoehneBreit; src: url(/fonts/soehne-breit-leicht.ttf); font-display: swap; }
@font-face { font-family: SangBleu; src: url(/fonts/SangBleuOGSans-Light.ttf); font-display: swap; }
@font-face { font-family: SoehneBreitXL; src: url(/fonts/soehne-breit-extraleicht.ttf); font-display: swap; }

:root {
  --text: Soehne, system-ui, sans-serif;
  --head: SoehneBreit, system-ui, sans-serif;
  --quote: SangBleu, Georgia, serif;
  --head-ink: #bca68e;
  --page: #1a1919;
  --ink: #f4eee7;
  --bar: #1a1919e6;
  --foot: #0a0a0a;
  --button: #bca68e;
  --button-ink: #1a1919;
}
h1 { font-family: SoehneBreitXL, var(--head); }
.band.plum { --tone: #443945; }
.band.wine { --tone: #8d5768; --head-ink: #f0e4d6; }
.band.umber { --tone: #6a5353; --head-ink: #e0d3c5; }
.band.green { --tone: #5b8672; --head-ink: #f0e4d6; }
.band.tan { --tone: #bca68e; --tone-ink: #1a1919; --head-ink: #1a1919; --button: #1a1919; --button-ink: #f4eee7; }
.band.cream { --tone: #e0d3c5; --tone-ink: #1a1919; --head-ink: #1a1919; --button: #1a1919; --button-ink: #f4eee7; }