:root{
  --night:#130D0C;
  --ember:#2A1411;
  --linen:#EFE7DC;
  --dim:#A99D94;
  --line:rgba(239,231,220,.14);
  --serif:"Fraunces",Georgia,serif;
  --sans:"Hanken Grotesk",system-ui,sans-serif;
  --display:"Cinzel",var(--serif);
  --gutter:clamp(16px,4vw,56px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--night);color:var(--linen);font:400 1.0625rem/1.65 var(--sans);-webkit-font-smoothing:antialiased}
img,video{display:block;max-width:100%}
a{color:inherit}
:focus-visible{outline:1px solid var(--linen);outline-offset:4px}
.wrap{padding-inline:var(--gutter);max-width:1080px;margin-inline:auto}
h2{font:300 clamp(1.75rem,3.4vw,2.5rem)/1.1 var(--serif);font-variation-settings:"SOFT" 100,"opsz" 72;letter-spacing:-.01em;margin-bottom:clamp(24px,3.5vw,40px)}
section{padding-block:clamp(80px,12vw,160px)}
section+section{border-top:1px solid var(--line)}

/* hero */
.hero{position:relative;height:100svh;min-height:560px;display:grid;place-items:center;text-align:center;overflow:hidden;isolation:isolate}
.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 40%;z-index:-2}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 50% 50%,rgba(19,13,12,.25),rgba(19,13,12,.55) 70%),linear-gradient(180deg,rgba(19,13,12,0) 70%,var(--night))}
.wordmark{font:400 clamp(2.6rem,11vw,9rem)/1 var(--display);letter-spacing:.1em;margin-right:-.1em;text-shadow:0 2px 40px rgba(19,13,12,.35)}
.wordmark .u{position:relative;display:inline-block}
.wordmark .u::before{content:"";position:absolute;left:50%;top:-.08em;width:.14em;aspect-ratio:1;translate:-50% 0;border-radius:50%;border:.022em solid var(--linen);box-shadow:0 0 .15em rgba(255,236,220,.7);animation:breathe 6s ease-in-out infinite}
@keyframes breathe{0%,100%{opacity:.7;box-shadow:0 0 .08em rgba(255,236,220,.4)}50%{opacity:1;box-shadow:0 0 .25em rgba(255,236,220,.85)}}
.hero nav{display:flex;justify-content:center;gap:clamp(18px,3vw,36px);margin-top:clamp(14px,2vw,22px);flex-wrap:wrap}
.hero nav a{text-decoration:none;font-size:clamp(.9375rem,1.2vw,1.0625rem);letter-spacing:.04em;padding:6px 0;border-bottom:1px solid transparent}
.hero nav a:hover{border-color:currentColor}
.social{position:absolute;bottom:clamp(20px,4vh,40px);left:50%;translate:-50% 0;display:flex;gap:22px}
.social a{display:grid;place-items:center;width:28px;height:28px;opacity:.85}
.social a:hover{opacity:1}
.social svg{width:20px;height:20px;fill:currentColor}

/* listen */
.featured iframe,.featured button{width:100%;aspect-ratio:16/9;border:0;display:block}
.set button{all:unset;cursor:pointer;display:block;position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;background:var(--ember)}
.set button:focus-visible{outline:1px solid var(--linen);outline-offset:4px}
.set img{width:100%;height:100%;object-fit:cover}
.set .play{position:absolute;inset:0;margin:auto;width:64px;height:64px;border-radius:50%;border:1px solid rgba(239,231,220,.8);background:rgba(19,13,12,.35);backdrop-filter:blur(6px);display:grid;place-items:center}
.set .play::before{content:"";margin-left:4px;border-left:14px solid var(--linen);border-top:9px solid transparent;border-bottom:9px solid transparent}
.set iframe{width:100%;aspect-ratio:16/9;border:0;display:block}
.set-meta{display:flex;justify-content:space-between;gap:16px;margin-top:14px;color:var(--dim);font-size:.9375rem}
.set-meta strong{color:var(--linen);font-weight:500}
.more{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,3vw,32px);margin-top:clamp(32px,5vw,56px)}
.more .play{width:48px;height:48px}

/* about */
.about{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(32px,6vw,96px);align-items:center}
.about img{width:100%;aspect-ratio:4/5;object-fit:cover}
.about p{font:300 clamp(1.25rem,2.1vw,1.625rem)/1.5 var(--serif);font-variation-settings:"SOFT" 100,"opsz" 36;max-width:36ch}
.about p+p{margin-top:1em}
.about .small{font:400 1rem/1.65 var(--sans);color:var(--dim);max-width:58ch}

/* list tables */
.list{width:100%;border-collapse:collapse}
.list th{text-align:left;font-weight:400;font-size:.875rem;color:var(--dim);padding-bottom:12px;border-bottom:1px solid var(--line)}
.list td{padding:18px 0;border-bottom:1px solid var(--line);vertical-align:baseline}
.list td:last-child,.list th:last-child{text-align:right;font-variant-numeric:tabular-nums;color:var(--dim);white-space:nowrap;padding-left:16px}
.list td:first-child{font:300 clamp(1.125rem,1.8vw,1.375rem)/1.3 var(--serif);font-variation-settings:"SOFT" 100,"opsz" 36}

/* dates */
.empty{color:var(--dim)}
.empty a{color:var(--linen);text-underline-offset:4px}

/* watch */
.reels{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,3vw,32px);max-width:640px}
.reel video{width:100%;aspect-ratio:9/16;object-fit:cover;background:#000}
.reel figcaption{margin-top:12px;color:var(--dim);font-size:.9375rem}

/* contact */
.contact{text-align:center}
.contact h2{margin-bottom:20px}
.contact .mail{font:300 clamp(1.4rem,4vw,2.75rem)/1.2 var(--serif);font-variation-settings:"SOFT" 100,"opsz" 72;text-decoration:none;border-bottom:1px solid rgba(239,231,220,.4);word-break:break-word}
.contact .mail:hover{border-color:var(--linen)}
.contact .note{color:var(--dim);margin:20px auto 0;max-width:46ch}
footer{padding:28px var(--gutter);text-align:center;font-size:.875rem;color:var(--dim);border-top:1px solid var(--line)}

@media (max-width:760px){.about{grid-template-columns:1fr}}
@media (max-width:560px){
  .hero img{object-position:63% 40%}
  .more{grid-template-columns:1fr}
  .reels{gap:12px}
  .list td:first-child{padding-right:12px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .wordmark .u::before{animation:none}
}