/* =====================================================================
   Kristen Calvin: site styles.
   Colors live in themes.css. This file is layout and type only.
   ===================================================================== */

@font-face { font-family: 'Archivo'; src: url('../fonts/archivo-var.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Instrument Serif'; src: url('../fonts/instrument-serif.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Instrument Serif'; src: url('../fonts/instrument-serif-italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }

:root, .stage, .band {
  --line: color-mix(in srgb, var(--text) 14%, transparent);
  --line-soft: color-mix(in srgb, var(--text) 12%, transparent);
  --line-mid: color-mix(in srgb, var(--text) 35%, transparent);
  --line-strong: color-mix(in srgb, var(--text) 45%, transparent);
  --serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --sans: 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --gutter: clamp(20px, 4vw, 56px);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ground); color: var(--text); font: 400 17px/1.6 var(--sans); }
img { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
::selection { background: var(--accent); color: var(--accent-ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.band :focus-visible { outline-color: var(--accent); }
[hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; animation: none !important; } }

.skip { position: absolute; left: 12px; top: -80px; z-index: 100; background: var(--accent); color: var(--accent-ink); padding: 12px 18px; font-weight: 700; text-decoration: none; border-radius: 2px; }
.skip:focus { top: 12px; }
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.wrap { max-width: 1360px; margin: 0 auto; padding: 0 var(--gutter); }
.eyebrow { margin: 0 0 14px; font-size: 13px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--accent); }
.display { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(64px, 10vw, 150px); line-height: .9; letter-spacing: -.025em; }
.display em { font-style: italic; }
.h3 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(34px, 4vw, 52px); line-height: 1.1; }
.lede { margin: 18px 0 0; max-width: 46ch; color: var(--muted); }
.sec-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 40px; margin-bottom: clamp(28px, 4vw, 44px); }

/* ---------- shared controls ---------- */
.cta { appearance: none; border: 0; border-radius: 2px; background: var(--accent); color: var(--accent-ink); min-height: 52px; padding: 0 28px; font: 700 16px var(--sans); cursor: pointer; display: inline-flex; align-items: center; gap: 12px; text-align: left; text-decoration: none; transition: filter .2s ease; }
.cta:hover { filter: brightness(1.1); }
.ghost { appearance: none; background: transparent; cursor: pointer; font: 700 15px var(--sans); color: var(--text); border: 1px solid var(--line-strong); border-radius: 999px; min-height: 48px; padding: 0 22px; display: inline-flex; align-items: center; gap: 10px; text-decoration: none; transition: border-color .2s ease, color .2s ease; }
.ghost:hover { border-color: var(--accent); color: var(--accent); }
.tlink { appearance: none; background: transparent; border: 0; padding: 0; cursor: pointer; font: 700 14px var(--sans); color: var(--text); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; min-height: 44px; display: inline-flex; align-items: center; text-align: left; }
.tlink:hover { color: var(--accent); }
.src { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.src:hover { color: var(--accent); }
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pill { appearance: none; cursor: pointer; min-height: 44px; padding: 8px 18px; border-radius: 999px; border: 1px solid var(--line-mid); font: 600 15px var(--sans); color: var(--text); background: transparent; transition: background-color .2s ease, color .2s ease; }
.pill[aria-pressed="true"] { background: var(--text); color: var(--ground); }
.pill[aria-pressed="false"]:hover { background: color-mix(in srgb, var(--text) 12%, transparent); }
.pill .n { opacity: .7; font-weight: 500; }
.arrow { appearance: none; width: 48px; height: 48px; border-radius: 999px; background: transparent; color: var(--text); border: 1px solid var(--line-strong); font: 700 20px var(--sans); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: border-color .2s ease, color .2s ease; }
.arrow:hover { border-color: var(--accent); color: var(--accent); }

/* ---------- hero + nav ---------- */
.hero { position: relative; overflow: hidden; height: clamp(740px, 55vw, 940px); background: var(--ground); color: var(--text); }
.hero-img { position: absolute; top: 0; bottom: 0; left: 9%; right: -9%; width: 100%; max-width: none; height: 100%; object-fit: cover; object-position: 70% 30%; }
.hero-fade { position: absolute; inset: 0; background: linear-gradient(90deg, var(--ground) 0%, color-mix(in srgb, var(--ground) 86%, transparent) 26%, color-mix(in srgb, var(--ground) 0%, transparent) 62%), linear-gradient(180deg, color-mix(in srgb, var(--ground) 70%, transparent) 0%, color-mix(in srgb, var(--ground) 0%, transparent) 22%), linear-gradient(0deg, var(--ground) 0%, color-mix(in srgb, var(--ground) 0%, transparent) 22%); }
@media (max-width: 919px) {
  .hero-img { object-position: 40% 0%; left: 0; right: 0; }
  .hero-fade { background: linear-gradient(180deg, color-mix(in srgb, var(--ground) 80%, transparent) 0%, color-mix(in srgb, var(--ground) 20%, transparent) 30%, color-mix(in srgb, var(--ground) 55%, transparent) 62%, var(--ground) 100%); }
}
.hero-inner { position: relative; z-index: 1; max-width: 1360px; height: 100%; margin: 0 auto; padding: 0 var(--gutter); display: flex; flex-direction: column; justify-content: space-between; }
.nav { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 32px; padding: 24px 0; }
.brand { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; text-decoration: none; }
.brand:hover { color: var(--accent); }
.hero-copy { padding: clamp(24px, 4vw, 56px) 0 clamp(36px, 5vw, 64px); max-width: 880px; }
.hero-copy .eyebrow { margin-bottom: 18px; }
.hero h1 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(76px, 13.5vw, 212px); line-height: .84; letter-spacing: -.025em; }
.hero h1 em { font-style: italic; }
.hero-line { margin: 28px 0 0; max-width: 38ch; font-family: var(--serif); font-size: clamp(24px, 2.6vw, 34px); line-height: 1.2; }
.hero .cta { margin-top: 28px; }
.hero-next { margin: 10px 0 0; font-size: 15px; }
/* ---------- Menu button and the full-screen curtain ---------- */
.menu-btn { appearance: none; cursor: pointer; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 20px; font: 700 14px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--text); background: transparent; border: 1px solid var(--line-strong); border-radius: 999px; transition: border-color .2s ease, color .2s ease; }
.menu-btn:hover { color: var(--accent); border-color: var(--accent); }
.menu-btn svg { flex: none; }
.menu-float { position: fixed; z-index: 40; top: 14px; right: clamp(16px, 4vw, 56px); color: var(--accent); border-color: var(--accent); background: color-mix(in srgb, var(--ground) 94%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s, border-color .2s ease, color .2s ease; }
.menu-float.on { opacity: 1; visibility: visible; transform: none; transition: opacity .25s ease, transform .25s ease, border-color .2s ease, color .2s ease; }
body.menu-open { overflow: hidden; }
.curtain { position: fixed; inset: 0; z-index: 70; overflow-y: auto; overscroll-behavior: contain; background: var(--ground); color: var(--text); clip-path: inset(0 0 100% 0); transition: clip-path .45s cubic-bezier(.7, 0, .2, 1); }
.curtain.open { clip-path: inset(0); }
.curtain-in { min-height: 100vh; min-height: 100svh; max-width: 1360px; margin: 0 auto; padding: 0 var(--gutter); display: flex; flex-direction: column; }
.curtain-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0; }
.curtain-nav { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-content: center; padding: 4px 0 16px; }
.curtain-grp { opacity: 0; transform: translateY(14px); transition: opacity .4s ease, transform .5s cubic-bezier(.2, .7, .2, 1); }
.curtain.open .curtain-grp { opacity: 1; transform: none; transition-delay: .16s; }
.curtain.open .curtain-grp:nth-child(2) { transition-delay: .24s; }
.curtain.open .curtain-grp:nth-child(3) { transition-delay: .32s; }
.curtain-grp .eyebrow { margin: 0 0 6px; }
.curtain-grp ul { list-style: none; margin: 0; padding: 0; }
.curtain-grp a { display: flex; align-items: center; min-height: 44px; font-family: var(--serif); font-size: clamp(30px, 5.4vh, 44px); font-size: clamp(30px, 5.4svh, 44px); line-height: 1.05; letter-spacing: -.02em; padding: 0; text-decoration: none; }
.curtain-grp a:hover { color: var(--accent); }
.curtain-grp a[aria-current="page"] { color: var(--accent); font-style: italic; }
.curtain-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 24px; padding: 6px 0 14px; border-top: 1px solid var(--line); }
@media (max-height: 600px) { .curtain-grp a { min-height: 40px; font-size: 30px; } .curtain-nav { gap: 8px; } }
.curtain-foot .tlink { font-size: 14px; }
@media (min-width: 1100px) {
  .curtain-nav { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
  .curtain-grp .eyebrow { margin-bottom: 18px; }
  .curtain-top { padding: 24px 0; }
  .curtain-grp a { display: block; min-height: 0; font-size: clamp(56px, 5.8vw, 92px); line-height: 1.02; }
  .curtain-foot { padding: 20px 0 28px; }
  .curtain-foot .tlink { font-size: 15px; }
}
/* Phones and tablets held upright: the hero fills the first screen so "Start here" is always on it. */
@media (max-width: 919px) {
  .hero { height: auto; min-height: 560px; min-height: min(100svh, 820px); }
  .hero-inner { height: auto; min-height: inherit; }
}
@media (max-width: 919px) and (max-height: 720px) {
  .nav { padding: 14px 0; }
  .hero-copy { padding: 12px 0 24px; }
  .hero-copy .eyebrow { margin-bottom: 10px; }
  .hero h1 { font-size: clamp(60px, 17vw, 76px); }
  .hero-line { margin-top: 16px; font-size: 21px; }
  .hero .cta { margin-top: 18px; }
}
@media (max-width: 380px) { .eyebrow { letter-spacing: .14em; font-size: 12px; } }

/* ---------- Listen ---------- */
.sec { background: var(--ground); }
.sec-listen { border-top: 1px solid var(--line-soft); padding: clamp(64px, 8vw, 112px) 0; }
.split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
.player { order: -1; scroll-margin-top: 16px; color: var(--text); background: var(--panel); border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
@media (min-width: 960px) {
  .split { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 56px; align-items: start; }
  .player { order: 0; position: sticky; top: 24px; }
}
.tracks { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.track { display: flex; align-items: center; border-bottom: 1px solid var(--line); border-left: 3px solid transparent; }
.track.on { background: color-mix(in srgb, var(--accent) 9%, transparent); border-left-color: var(--accent); }
.pick { appearance: none; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; padding: 12px 8px 12px 14px; min-width: 0; flex: 1 1 auto; display: flex; align-items: center; gap: 16px; transition: background-color .2s ease; }
.pick:hover { background: color-mix(in srgb, var(--text) 6%, transparent); }
.pick .num { flex: 0 0 28px; font-family: var(--serif); font-size: 22px; color: var(--muted); }
.track.on .num, .track.on .ttl { color: var(--accent); }
.pick:hover .ttl { color: var(--accent); }
.thumb { flex: 0 0 auto; width: 112px; position: relative; aspect-ratio: 16 / 9; border-radius: 2px; overflow: hidden; background: linear-gradient(135deg, var(--panel3), var(--panel2)); }
.thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 560px) { .thumb { width: 84px; } .pick .num { display: none; } }
.pick .txt { display: flex; flex-direction: column; min-width: 0; }
.ttl { font-family: var(--serif); font-size: clamp(22px, 2.4vw, 30px); line-height: 1.1; color: var(--text); transition: color .2s ease; }
.sub { font-size: 14px; color: var(--muted); margin-top: 3px; }
.watch { display: inline-flex; align-items: center; justify-content: center; min-width: 48px; min-height: 48px; margin-right: 6px; text-decoration: none; color: var(--accent); font-size: 20px; border-radius: 999px; }
.watch:hover { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.frame { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: linear-gradient(135deg, var(--panel3), var(--panel2)); }
.frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.frame-btn { appearance: none; border: 0; padding: 0; margin: 0; cursor: pointer; display: block; position: absolute; inset: 0; width: 100%; height: 100%; background: transparent; }
.frame-btn img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.play { position: absolute; left: 20px; bottom: 20px; width: 72px; height: 72px; border-radius: 50%; background: var(--play); color: var(--play-ink); display: flex; align-items: center; justify-content: center; font-size: 24px; padding-left: 4px; transition: transform .25s ease, background-color .25s ease; }
.play.sm { width: 64px; height: 64px; font-size: 22px; }
.frame-btn:hover .play { transform: scale(1.1); background: var(--accent); }
.player-meta { padding: 24px 24px 26px; display: flex; flex-direction: column; gap: 8px; }
.kicker { font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); }
.player-title { font-family: var(--serif); font-size: clamp(30px, 3.2vw, 42px); line-height: 1.05; }
.player-ctx { font-size: 16px; color: var(--soft); }
.player-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 14px; }
.player-actions .src { font-size: 15px; font-weight: 600; min-height: 44px; display: inline-flex; align-items: center; }

/* ---------- Roles ---------- */
.sec-roles { border-top: 1px solid var(--line); padding: clamp(64px, 8vw, 112px) 0 clamp(40px, 5vw, 72px); background: var(--panel); }
.sec-roles .sec-head { gap: 16px 40px; margin-bottom: clamp(28px, 4vw, 48px); }
.sec-roles .side { margin: 0; max-width: 40ch; color: var(--muted); }
.role-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: clamp(16px, 2vw, 28px); }
.role-tile { display: block; text-decoration: none; }
.role-img { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 2px; background: linear-gradient(135deg, var(--panel3), var(--panel2)); }
.role-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.role-tile:hover .role-img img { transform: scale(1.04); }
.role-tile:hover .role-name { color: var(--accent); }
.role-n { display: block; margin-top: 12px; font-size: 12px; font-weight: 700; letter-spacing: .16em; color: var(--accent); }
.role-name { display: block; font-family: var(--serif); font-size: clamp(22px, 2vw, 28px); line-height: 1.1; transition: color .2s ease; }
.role-show { display: block; font-size: 13px; color: var(--muted); margin-top: 2px; }

@media (min-width: 351px) and (max-width: 520px) {
  .role-grid li:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .role-grid li:last-child:nth-child(odd) .role-img { aspect-ratio: 16 / 9; }
}
.chapter { padding: clamp(56px, 8vw, 112px) 0; border-bottom: 1px solid var(--line-soft); scroll-margin-top: 0; }
.ch-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 20px; margin-bottom: 8px; }
.ch-n { font-size: 14px; font-weight: 700; letter-spacing: .18em; color: var(--accent); }
.ch-show { font-size: 14px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.ch-role { margin: 0 0 clamp(28px, 4vw, 48px); font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(56px, 10.5vw, 164px); line-height: .9; letter-spacing: -.025em; }
.ch-body { display: flex; flex-wrap: wrap; gap: clamp(28px, 4vw, 64px); align-items: flex-start; }
.ch-media { flex: 1.25 1 520px; min-width: 0; }
.ch-side { flex: 1 1 360px; min-width: 0; display: flex; flex-direction: column; gap: 28px; }
.ch-media figure, .ch-media .clipwrap { margin: 0; }
.ch-photo { position: relative; aspect-ratio: 3 / 2; overflow: hidden; border-radius: 2px; background: var(--panel2); }
.ch-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cap { margin: 12px 0 0; font-size: 14px; color: var(--muted); }
.ch-video { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 2px; background: linear-gradient(135deg, var(--panel3), var(--panel2)); }
.ch-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.pull { margin: 0; font-family: var(--serif); font-size: clamp(28px, 3vw, 42px); line-height: 1.15; }
.byline { margin: 14px 0 0; font-size: 14px; line-height: 1.5; }
.byline b { font-weight: 700; }
.byline .src { display: inline-block; padding: 12px 0; margin: -12px 0; }
.ch-note { margin: 0; font-size: 16px; color: var(--soft); }
.ch-watch { display: flex; flex-direction: column; gap: 12px; padding-top: 24px; border-top: 1px solid var(--line); }
.rowbtn { appearance: none; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; padding: 0; width: 100%; min-height: 56px; display: flex; align-items: center; gap: 14px; }
.rowbtn .thumb { width: 112px; }
.rowbtn .ttl { font-size: 24px; }
.rowbtn:hover .ttl { color: var(--accent); }
.rowbtn[aria-pressed="true"] .ttl { color: var(--accent); }
.rowbtn .txt { display: flex; flex-direction: column; }

/* ---------- Liner notes (band) ---------- */
.band { background: var(--surface); color: var(--text); }
.sec-notes { padding: clamp(64px, 8vw, 120px) 0; }
.notes-intro { margin: 0 0 clamp(32px, 4vw, 56px); max-width: 50ch; font-size: 18px; color: var(--muted); }
.feat { margin: 0; max-width: 1080px; }
.feat blockquote { margin: 0; font-family: var(--serif); font-style: italic; font-size: clamp(32px, 4.4vw, 62px); line-height: 1.08; letter-spacing: -.015em; }
.feat figcaption { margin-top: 22px; font-size: 16px; line-height: 1.5; }
.feat figcaption b { font-weight: 700; }
.feat .on-show, .note .on-show { color: var(--accent); font-weight: 600; }
.feat .mentions { display: flex; flex-wrap: wrap; align-items: center; gap: 0 22px; margin-top: 10px; }
.feat .mentions span { font-size: 14px; color: var(--muted); }
.notes-grid { list-style: none; margin: clamp(44px, 6vw, 80px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); gap: clamp(32px, 4vw, 56px) clamp(28px, 4vw, 64px); }
.note { border-top: 2px solid var(--text); padding-top: 20px; display: flex; flex-direction: column; }
.note blockquote { margin: 0; font-family: var(--serif); font-size: clamp(26px, 2.4vw, 34px); line-height: 1.18; }
.note .byline { margin-top: 14px; }
.note .links { display: flex; flex-wrap: wrap; gap: 0 22px; margin-top: 8px; }
.press-note { margin: clamp(40px, 5vw, 64px) 0 0; font-size: 14px; color: var(--muted); }

/* ---------- About ---------- */
.sec-about { background: var(--panel); border-top: 1px solid var(--line-soft); padding: clamp(64px, 8vw, 120px) 0; }
.about-grid { display: flex; flex-wrap: wrap; gap: clamp(36px, 5vw, 88px); }
.about-text { flex: 1.4 1 440px; min-width: 0; }
.about-text h2 { margin: 0 0 32px; font-family: var(--serif); font-weight: 400; font-size: clamp(48px, 7vw, 104px); line-height: .95; letter-spacing: -.02em; }
.about-text h2 em { font-style: italic; }
.bio { display: flex; flex-direction: column; gap: 20px; max-width: 62ch; font-size: 18px; line-height: 1.7; color: var(--soft); }
.bio p { margin: 0; }
.about-photos { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 28px; }
.about-photos img { width: 100%; object-fit: cover; border-radius: 2px; }
.more-links { display: flex; flex-wrap: wrap; gap: 4px 28px; margin-top: 32px; }
.credits-wrap { margin-top: clamp(56px, 7vw, 96px); }
.credits-wrap h3 { margin-bottom: 24px; }
.credits { list-style: none; margin: 0; padding: 0; font-size: 15px; line-height: 1.45; column-width: 300px; column-gap: 48px; }
.credits li { break-inside: avoid; padding: 10px 0; border-bottom: 1px solid var(--line-soft); }
.credits b { display: block; font-weight: 700; }
.credits .r { display: block; color: var(--soft); }
.credits .c { display: block; color: var(--muted); }

/* ---------- On the Bill ---------- */
.sec-bill { background: var(--ground); padding: clamp(64px, 8vw, 112px) 0 clamp(56px, 7vw, 96px); }
.sec-bill .tools { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.rail { --gut: calc(max(0px, (100% - 1360px) / 2) + clamp(20px, 4vw, 56px)); display: flex; gap: clamp(16px, 2vw, 24px); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; padding: 4px var(--gut) 22px; scroll-padding-inline: var(--gut); scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--text) 38%, transparent) transparent; }
.show { flex: 0 0 auto; width: clamp(240px, 26vw, 350px); scroll-snap-align: start; display: flex; flex-direction: column; gap: 16px; }
.pbtn { appearance: none; border: 0; padding: 0; margin: 0; background: var(--panel); cursor: zoom-in; display: block; width: 100%; overflow: hidden; border-radius: 2px; box-shadow: 0 0 0 1px color-mix(in srgb, var(--text) 16%, transparent); }
.pbtn img { width: 100%; height: auto; aspect-ratio: 387 / 516; object-fit: cover; transition: transform .5s ease, filter .3s ease; }
.pbtn:hover img { transform: scale(1.03); }
.show.np { align-self: flex-start; padding-top: 18px; border-top: 2px solid var(--accent); }
.nopost { aspect-ratio: 387 / 516; width: 100%; border: 1px dashed var(--line-mid); background: var(--panel); border-radius: 2px; padding: 22px; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; }
.nopost .a { font-family: var(--serif); font-size: clamp(34px, 3vw, 44px); line-height: 1.02; font-style: italic; }
.nopost .b { font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.show-info { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; }
.show-when { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.show-when .d { font-family: var(--serif); font-size: clamp(30px, 2.6vw, 38px); line-height: 1.1; }
.chip { background: var(--accent); color: var(--accent-ink); font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; padding: 3px 9px; border-radius: 2px; }
.chip.tbc { background: transparent; color: var(--text); box-shadow: inset 0 0 0 1px var(--line-strong); }
.show-act { font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin-top: 4px; }
.show-head { font-size: 18px; font-weight: 600; line-height: 1.3; margin-top: 6px; }
.show-where { font-size: 15px; color: var(--muted); }
.show-time { font-size: 15px; color: var(--soft); }
.show-note { font-size: 14px; color: var(--muted); }
.show-links { display: flex; flex-wrap: wrap; gap: 0 20px; margin-top: auto; padding-top: 6px; }
/* The dates as a plain list, under the posters */
.datelist-wrap { margin-top: clamp(28px, 3vw, 44px); }
.dl-title { margin: 0 0 18px; font-family: var(--serif); font-weight: 400; font-size: clamp(30px, 3vw, 40px); line-height: 1.1; }
.datelist { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.datelist li { display: grid; gap: 2px 28px; padding: 14px 0; border-bottom: 1px solid var(--line-soft); }
.dl-when { font-family: var(--serif); font-size: 26px; line-height: 1.15; }
.dl-what b { display: block; font-weight: 700; line-height: 1.35; }
.dl-what span { display: block; font-size: 15px; color: var(--muted); }
.dl-time { font-size: 15px; color: var(--soft); }
.dl-act { font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.dl-act .chip { margin-left: 8px; white-space: nowrap; letter-spacing: .08em; }
@media (min-width: 760px) { .dl-act .chip { display: table; margin: 6px 0 0; } }
@media (min-width: 760px) { .datelist li { grid-template-columns: 150px minmax(0, 1fr) 170px 250px; align-items: baseline; } }
.empty-bill { margin: 0; font-family: var(--serif); font-size: clamp(26px, 3vw, 38px); line-height: 1.2; max-width: 30ch; }
.wall-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; margin-bottom: 24px; border-top: 1px solid var(--line); padding-top: clamp(28px, 3vw, 40px); }
.wall-head p { margin: 0; font-size: 14px; color: var(--muted); }
.wall-wrap { margin-top: clamp(40px, 5vw, 72px); }
.wall-more { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 28px; }
.wall { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(170px, 45%), 1fr)); gap: 28px 16px; }
.wall li { display: flex; flex-direction: column; gap: 10px; }
.wall .pbtn img { filter: saturate(.8) brightness(.9); }
.wall .pbtn:hover img { filter: none; }
.wall .cap2 { font-size: 14px; line-height: 1.35; }
.wall .cap2 b { display: block; font-weight: 700; }
.wall .cap2 span { display: block; color: var(--muted); }
@media (hover: none) { .arrows { display: none !important; } }
.arrows { display: flex; gap: 8px; }

/* ---------- Contact ---------- */
.sec-contact { padding: clamp(56px, 7vw, 100px) 0; }
.contact-grid { display: flex; flex-wrap: wrap; gap: clamp(32px, 5vw, 72px); align-items: flex-start; }
.contact-l { flex: 1 1 380px; min-width: 0; }
.contact-l h2 { margin: 0 0 20px; font-family: var(--serif); font-weight: 400; font-size: clamp(44px, 6vw, 88px); line-height: .98; letter-spacing: -.02em; }
.contact-l p { margin: 0; font-size: 17px; display: flex; flex-wrap: wrap; gap: 4px 18px; }
.contact-l .c-note { display: block; margin: 0 0 18px; max-width: 42ch; font-size: 17px; }
.contact-l a { white-space: nowrap; display: inline-flex; align-items: center; min-height: 44px; }
.contact-l a { font-weight: 700; }
.contact-l .dot { opacity: .6; }
.socials { display: flex; flex-wrap: wrap; gap: 4px 22px; margin-top: 14px; }
.contact-r { flex: 1 1 360px; min-width: 0; max-width: 520px; }
.list-form { display: flex; flex-wrap: wrap; gap: 12px; }
.list-form label { flex: 1 0 100%; font-size: 14px; font-weight: 700; }
.input { flex: 1 1 240px; width: auto; min-height: 48px; padding: 12px 14px; font: 400 16px var(--sans); color: var(--field-ink); background: var(--field); border: 1px solid color-mix(in srgb, var(--text) 50%, transparent); border-radius: 4px; }
.input::placeholder { color: var(--placeholder); }
.band .cta.dark { background: var(--text); color: var(--surface); }
.hp { position: absolute; left: -9999px; }
.thanks { margin: 0; font-family: var(--serif); font-size: 32px; line-height: 1.2; }
.form-err { flex: 1 0 100%; margin: 0; font-size: 14px; color: var(--text); }
.foot { background: var(--ground); padding: 28px 0 40px; }
.foot .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; font-size: 14px; color: var(--muted); }
.foot a { text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.foot a:hover { color: var(--accent); }
.foot-id { display: flex; flex-direction: column; gap: 4px; }
.foot-credit { font-size: 13px; }
.foot nav { display: flex; flex-wrap: wrap; gap: 4px 20px; }

/* ---------- Lightbox ---------- */
body.lb-open { overflow: hidden; }
.lb { position: fixed; inset: 0; z-index: 60; background: rgba(6, 5, 8, .92); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 20px; overflow: auto; color: #F6F4EF; }
.lb img { width: auto; height: min(76vh, 760px); height: min(76svh, 760px); max-width: 92vw; object-fit: contain; border-radius: 2px; box-shadow: 0 20px 60px rgba(0, 0, 0, .6); }
.lb p { margin: 0; max-width: 46ch; text-align: center; font-size: 16px; line-height: 1.45; }
.lb-bar { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.lb .ghost { color: #F6F4EF; border-color: rgba(246, 244, 239, .55); }
.lb .ghost:hover { color: var(--accent); border-color: var(--accent); }

/* ---------- inner pages ---------- */
.page-top { background: var(--ground); border-bottom: 1px solid var(--line-soft); }
.page-top .nav { padding: 20px 0; }
.page-head { padding: clamp(48px, 7vw, 96px) 0 clamp(28px, 4vw, 48px); }
.page-head .display { font-size: clamp(56px, 9vw, 132px); }
.page-body { padding: 0 0 clamp(64px, 8vw, 112px); }
.hs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: clamp(24px, 3vw, 40px); align-items: start; }
.hs-card { display: flex; flex-direction: column; gap: 14px; }
.hs-card .pbtn { cursor: zoom-in; background: var(--panel2); }
.hs-card .pbtn img { aspect-ratio: auto; height: auto; }
.hs-card h2 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 34px; line-height: 1.1; }
.hs-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.hs-note { color: var(--muted); font-size: 15px; max-width: 60ch; margin: 0 0 clamp(28px, 4vw, 44px); }
.masonry { column-width: 320px; column-gap: 18px; }
.masonry figure { break-inside: avoid; margin: 0 0 18px; }
.masonry .pbtn img { aspect-ratio: auto; height: auto; }
.masonry figcaption { margin-top: 8px; font-size: 14px; line-height: 1.4; }
.masonry figcaption b { display: block; font-weight: 700; }
.masonry figcaption span { display: block; color: var(--muted); }

.resume { max-width: 960px; }
.res-bar { display: flex; flex-wrap: wrap; gap: 12px; margin: 22px 0 0; }
.res-meta { margin: 20px 0 0; font-size: 16px; color: var(--soft); display: flex; flex-wrap: wrap; gap: 4px 22px; }
.res-sec { margin-top: clamp(36px, 5vw, 56px); }
.res-sec h2 { margin: 0 0 12px; font-size: 13px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--accent); padding-bottom: 10px; border-bottom: 1px solid var(--line-mid); }
.res-table { width: 100%; border-collapse: collapse; font-size: 16px; }
.res-table td { padding: 9px 12px 9px 0; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.res-table td:first-child { font-weight: 700; width: 36%; }
.res-table td:nth-child(2) { color: var(--soft); width: 36%; }
.res-table td:nth-child(3) { color: var(--muted); }
.res-train td:first-child { width: 42%; }
.res-skills { margin: 0; color: var(--soft); }
.res-draft { margin: 24px 0 0; font-size: 14px; color: var(--muted); }
@media (max-width: 640px) {
  .res-table, .res-table tbody, .res-table tr, .res-table td { display: block; width: 100% !important; }
  .res-table tr { padding: 10px 0; border-bottom: 1px solid var(--line-soft); }
  .res-table td { border: 0; padding: 0; }
}
.nf { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; }
.nf-main { flex: 1; display: flex; align-items: center; }
.nf-main h1 { margin: 0 0 18px; font-family: var(--serif); font-weight: 400; font-size: clamp(64px, 12vw, 180px); line-height: .9; letter-spacing: -.025em; }
.nf-main h1 em { font-style: italic; color: var(--accent); }

@media print {
  .menu-btn, .menu-float, .curtain { display: none !important; }
  @page { size: letter; margin: 0.5in 0.7in; }
  html[data-theme] { --ground: #fff !important; --text: #111 !important; --muted: #444 !important; --soft: #222 !important; --accent: #111 !important; --panel: #fff !important; --line: #bbb !important; --line-soft: #ccc !important; --line-mid: #999 !important; }
  body { background: #fff; color: #111; font-size: 9pt; line-height: 1.3; }
  .page-top, .res-bar, .foot, .skip, .noprint { display: none !important; }
  .wrap { padding: 0; max-width: none; }
  .page-head { padding: 0 0 6pt; }
  .page-head .eyebrow { display: none; }
  .page-head .display { font-size: 26pt; line-height: 1; }
  .res-meta { margin: 4pt 0 0; font-size: 9pt; gap: 2pt 14pt; }
  .res-meta a { text-decoration: none; }
  .page-body { padding: 0; }
  .res-sec { margin-top: 7pt; }
  .res-sec h2 { color: #111; font-size: 7.5pt; margin: 0 0 3pt; padding-bottom: 3pt; }
  .res-table { font-size: 8.6pt; }
  .res-table tr { break-inside: avoid; }
  .res-table td { padding: 1.3pt 8pt 1.3pt 0; }
  .res-skills { font-size: 8.6pt; }
}