/* ==========================================================================
   XEL — WORK PAGE STYLES
   Shared across all work page templates.
   Loaded after xel.css (which provides variables, nav, footer, grain).

   SECTIONS:
    1.  Page shell & back link
    2.  Work header (title, category, meta row)
    3.  Statement & body text
    4.  Section headers (numbered with rule)
    5.  Image viewer (stage, containment frame, slides, film strip, dial)
    6.  Video block
    7.  Sound block (Bandcamp, SoundCloud, placeholders)
    8.  Links list
    9.  Performances list
   10.  Credits
   11.  Next / Prev navigation
   12.  Sound-only page modifier (.sound-page)
   13.  Responsive overrides
   ========================================================================== */

/* --------------------------------------------------------------------------
   ACCESSIBILITY — focus indicators for work pages
   -------------------------------------------------------------------------- */
.back-link:focus-visible,
.wn-item:focus-visible,
.wc:focus-visible,
.arc-row:focus-visible,
.film-thumb:focus-visible,
.dial-outer:focus-visible {
  outline: 2px solid var(--cobalt-pale);
  outline-offset: 2px;
}
.work-nav .wn-item:focus-visible { outline-offset: -2px; }


/* --------------------------------------------------------------------------
   1. PAGE SHELL & BACK LINK
   -------------------------------------------------------------------------- */

.work-page {
  padding: 11rem 2.5rem 0; /* nav height (~68px) + generous clear breathing */
  position: relative;
  z-index: 3;
  max-width: 1320px;
  margin: 0 auto;
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-size: .62rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink3);
  text-decoration: none;
  margin-bottom: 2rem;
  transition: color .2s;
}
.back-link::before { content: '←'; }
.back-link:hover   { color: var(--cobalt2); }


/* --------------------------------------------------------------------------
   2. WORK HEADER
   -------------------------------------------------------------------------- */


/* Category tags row — statement left, tags right */
.work-statement-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 3rem;
  margin-bottom: 3rem;
}
.work-statement-row .work-statement {
  margin-bottom: 0;
  flex: 1;
}
.work-cats {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  flex-shrink: 0;
  align-items: flex-start;
  padding-top: 0.2rem;
}
.work-cat-tag {
  font-family: var(--font-mono);
  font-size: .56rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--cobalt); border: 1px dotted rgba(24,64,200,.40);
  padding: .2rem .5rem; white-space: nowrap;
}
.work-cat-tag.g { color: var(--brick2); border-color: rgba(180,40,0,.4); border-style: dotted; }

.work-title {
  font-family: var(--font-disp);
  font-weight: 900;
  font-size: clamp(2.5rem, 7vw, 6rem);
  line-height: .88;
  letter-spacing: -.02em;
  color: var(--ink);
  margin-bottom: 1rem;
}

.work-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  padding: 1rem 1.2rem;
  background: rgba(22,29,58,.80);
  border: 1px dotted rgba(80,110,200,.35);
  margin-bottom: 2.2rem;
}

/* Short names intentional — used repeatedly in every work page */
.wml { font-size: .55rem; letter-spacing: .18em; text-transform: uppercase; color: rgba(185,200,235,.75); margin-bottom: .2rem; }
.wmv { font-size: .75rem; color: #edf0fa; font-weight: 500; letter-spacing: .01em; }


/* --------------------------------------------------------------------------
   3. STATEMENT & BODY TEXT
   -------------------------------------------------------------------------- */

.work-statement {
  font-family: var(--font-ser);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(.85rem, 1.6vw, 1.1rem);
  line-height: 1.5;
  color: var(--ink);
  max-width: 68ch;
  margin-bottom: 3rem;
  border-left: 2px solid var(--brick2);
  box-shadow: -4px 0 0 0 rgba(180,40,0,.07);
  padding-left: 1.5rem;
}
.work-statement em { color: #c83000; font-weight: 700; }

.work-body {
  font-family: var(--font-mono);
  font-size: .78rem;
  line-height: 2.1;
  color: var(--ink2);
  width: 83.333%;
  margin-bottom: 1rem;
}
.work-body p { margin-bottom: 1.2rem; }

.no-ai {
  font-size: .62rem;
  letter-spacing: .1em;
  color: var(--ink3);
  border-left: 1px solid var(--ink3);
  padding-left: .8rem;
  margin-bottom: 3rem;
}


/* --------------------------------------------------------------------------
   4. SECTION HEADERS
   -------------------------------------------------------------------------- */

.media-label {
  font-size: .58rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink3);
  margin-bottom: 1.2rem;
  display: flex;
  align-items: center;
  gap: .8rem;
}
.media-label::before {
  content: '';
  display: inline-block;
  width: 16px;
  height: 1px;
  background: var(--ink3);
}

.section-hdr {
  display: flex;
  align-items: baseline;
  gap: 1.5rem;
  margin-bottom: 2rem;
  border-bottom: 1px dotted var(--border);
  padding-bottom: 1rem;
}
.sh-num   { font-size: .6rem; color: var(--ink3); letter-spacing: .12em; }
.sh-title { font-family: var(--font-disp); font-weight: 700; font-size: .72rem; letter-spacing: .28em; text-transform: uppercase; color: var(--ink2); }
.sh-line  { flex: 1; height: 1px; background: var(--border); }
.sh-dot   { width: 4px; height: 4px; border-radius: 50%; background: var(--brick2); opacity: .55; align-self: center; }


/* --------------------------------------------------------------------------
   5. IMAGE VIEWER  —  Dial + Film Strip + Slice transition
   Containment: the frame is site identity; the image inside is untouched.
   -------------------------------------------------------------------------- */

.viewer {
  border: 1px solid var(--border);
  margin-bottom: 4rem;
}

.viewer-main {
  display: grid;
  grid-template-columns: 1fr 120px;
}

.stage {
  position: relative;
  height: 480px;
  background: #d8e2ff;
  overflow: hidden;
  border-right: 1px solid var(--border);
}

/* Amber top-left / green bottom-right corners — site identity on image */
.stage-frame {
  position: absolute;
  inset: 10px;
  z-index: 4;
  border: 1px solid rgba(220,135,10,.35);
  pointer-events: none;
}
.stage-frame::before {
  content: '';
  position: absolute;
  top: -1px; left: -1px;
  width: 16px; height: 16px;
  border-top: 2px solid var(--cobalt);
  border-left: 2px solid var(--cobalt);
}
.stage-frame::after {
  content: '';
  position: absolute;
  bottom: -1px; right: -1px;
  width: 16px; height: 16px;
  border-bottom: 2px solid var(--brick2);
  border-right: 2px solid var(--brick2);
}

.slide {
  position: absolute;
  inset: 10px;
  overflow: hidden;
  will-change: clip-path, transform;
}
.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Placeholder — canvas + labels shown until real images are added */
.slide-ph {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .8rem;
  background: var(--bg2);
}
.slide-ph-num {
  font-family: var(--font-disp);
  font-weight: 900;
  font-size: 3.5rem;
  color: rgba(24,64,200,.07);
  letter-spacing: -.04em;
  line-height: 1;
}
.slide-ph-label {
  font-size: .58rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink3);
  text-align: center;
  max-width: 24ch;
}

.slide-vignette {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 50%, rgba(5,5,8,.6) 100%);
}

/* Caption revealed on hover */
.slide-caption {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  z-index: 3;
  padding: .6rem 1rem;
  background: rgba(216,226,255,.82);
  border-top: 1px solid rgba(220,135,10,.22);
  font-size: .52rem;
  letter-spacing: .1em;
  color: var(--ink3);
  transform: translateY(100%);
  transition: transform .22s;
}
.slide:hover .slide-caption { transform: translateY(0); }

/* Film strip */
.film-strip {
  background: var(--bg2);
  overflow-y: auto;
  height: 480px;
  scrollbar-width: thin;
  scrollbar-color: rgba(24,64,200,.30) transparent;
}

.film-thumb {
  position: relative;
  height: 90px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  overflow: hidden;
  transition: background .15s;
}
.film-thumb img           { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .95; transition: opacity .2s; }
.film-thumb:hover         { background: #c8d4ff; }
.film-thumb:hover img     { opacity: 1; }
.film-thumb.active        { background: #b8c8ff; }
.film-thumb.active img    { opacity: 1; }
.film-thumb::before       { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: transparent; z-index: 2; transition: background .15s; }
.film-thumb.active::before{ background: var(--cobalt); }

.ft-num   { position: absolute; bottom: .3rem; right: .4rem; font-size: .42rem; color: var(--ink3); z-index: 3; }
.ft-type  { position: absolute; top: .3rem; left: .4rem; font-size: .4rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(24,64,200,.5); z-index: 3; }
.ft-canvas{ position: absolute; inset: 0; width: 100%; height: 100%; }

/* Dial bar */
.dial-bar {
  display: grid;
  grid-template-columns: auto 1fr auto;
  border-top: 1px solid var(--border);
  align-items: center;
}
.dial-section {
  padding: 1rem 1.2rem;
  border-right: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 1rem;
}
.dial-outer        { position: relative; cursor: grab; flex-shrink: 0; user-select: none; }
.dial-outer:active { cursor: grabbing; }
#dialCanvas        { display: block; }

.dial-hint         { font-size: .5rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink3); line-height: 1.8; }
.dial-hint strong  { display: block; color: var(--ink2); font-family: var(--font-disp); font-size: .58rem; font-weight: 700; letter-spacing: .03em; }

.caption-section   { padding: 1rem 1.5rem; }
.cs-title          { font-family: var(--font-ser); font-style: italic; font-weight: 300; font-size: .92rem; color: var(--ink); margin-bottom: .2rem; line-height: 1.3; }
.cs-sub            { font-size: .52rem; color: var(--ink3); letter-spacing: .08em; }

.counter-section   { padding: 1rem 1.2rem; border-left: 1px solid var(--border); text-align: right; }
.counter-num       { font-family: var(--font-disp); font-weight: 900; font-size: 1.6rem; line-height: 1; color: var(--cobalt); letter-spacing: -.03em; }
.counter-of        { font-size: .46rem; color: var(--ink3); letter-spacing: .1em; margin-top: .1rem; }


/* --------------------------------------------------------------------------
   6. VIDEO BLOCK
   Vimeo preferred. See HTML template comments for embed instructions.
   -------------------------------------------------------------------------- */

.video-block { margin-bottom: 4rem; }

.video-wrap {
  position: relative;
  width: 100%;
  padding-top: 56.25%;   /* 16:9 aspect ratio */
  background: #000;
  border: 1px solid var(--border);
  overflow: hidden;
}
.video-wrap iframe,
.video-wrap video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

/* Placeholder — remove once real embed src is added */
.video-ph {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  background: var(--bg2);
  border: 1px dashed rgba(74,94,128,.40);
}
.video-ph p { font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink3); text-align: center; max-width: 36ch; line-height: 1.8; }
.vid-icon   { width: 48px; height: 48px; border: 1px solid rgba(24,64,200,.3); border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.vid-icon::after { content: ''; width: 0; height: 0; border-left: 14px solid rgba(24,64,200,.5); border-top: 8px solid transparent; border-bottom: 8px solid transparent; margin-left: 3px; }

.video-caption      { padding: .7rem 1rem; border: 1px solid var(--border); border-top: none; font-size: .58rem; color: var(--ink3); letter-spacing: .08em; display: flex; justify-content: space-between; align-items: center; }
.vc-platform        { font-size: .52rem; letter-spacing: .14em; text-transform: uppercase; color: var(--cobalt); opacity: .7; }


/* --------------------------------------------------------------------------
   7. SOUND BLOCK  —  Bandcamp + SoundCloud
   -------------------------------------------------------------------------- */

.sound-block { margin-bottom: 4rem; }

.platform-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .65rem 1rem;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-bottom: none;
}
.platform-name             { font-size: .52rem; letter-spacing: .16em; text-transform: uppercase; }
.platform-name.bandcamp    { color: var(--cobalt); }
.platform-name.soundcloud  { color: var(--brick3); }

.platform-link        { font-size: .5rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink3); text-decoration: none; transition: color .2s; display: flex; align-items: center; gap: .4rem; }
.platform-link::after { content: '↗'; }
.platform-link:hover  { color: var(--cobalt2); }

.bandcamp-wrap,
.soundcloud-wrap      { border: 1px solid var(--border); background: var(--bg2); overflow: hidden; }

.bandcamp-wrap iframe,
.soundcloud-wrap iframe { display: block; width: 100%; border: none; }

.sound-ph             { border: 1px solid var(--border); padding: 1.8rem 1.5rem; background: var(--bg2); display: flex; align-items: center; gap: 1.5rem; }
.sound-ph-wave        { flex-shrink: 0; }
.sound-ph-info        { flex: 1; }
.sound-ph-title       { font-size: .78rem; color: var(--ink2); margin-bottom: .3rem; }
.sound-ph-meta        { font-size: .58rem; color: var(--ink3); letter-spacing: .08em; line-height: 1.8; }
.sound-ph-instruction { font-size: .54rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink3); margin-top: .7rem; border-left: 2px solid var(--brick2); padding-left: .7rem; line-height: 2; }


/* --------------------------------------------------------------------------
   8. LINKS LIST
   -------------------------------------------------------------------------- */

.links-list              { border: 1px dotted var(--border); margin-bottom: 4rem; }
.link-row                { display: flex; align-items: baseline; gap: 2rem; padding: .9rem 1.2rem; border-bottom: 1px dotted var(--border); text-decoration: none; transition: background .2s, padding-left .2s; }
.link-row:last-child     { border-bottom: none; }
.link-row:hover          { background: var(--bg2); padding-left: 1.6rem; }
.link-title              { font-family: var(--font-ser); font-style: italic; font-weight: 300; font-size: 1rem; color: var(--ink2); transition: color .2s; }
.link-row:hover .link-title { color: var(--cobalt2); }
.link-source             { font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink3); }
.link-arrow              { font-size: .7rem; color: var(--ink3); margin-left: auto; }


/* --------------------------------------------------------------------------
   9. PERFORMANCES LIST
   -------------------------------------------------------------------------- */

.perf-list           { border: 1px dotted var(--border); margin-bottom: 4rem; }
.perf-row            { display: grid; grid-template-columns: 5.5rem 1fr auto; gap: 1.5rem; align-items: baseline; padding: .9rem 1.2rem; border-bottom: 1px solid rgba(74,94,128,.35); }
.perf-row:last-child { border-bottom: none; }
.perf-date           { font-size: .62rem; color: var(--ink3); }
.perf-venue          { font-size: .75rem; color: var(--ink2); }
.perf-city           { font-size: .62rem; color: var(--ink3); text-align: right; }


/* --------------------------------------------------------------------------
   10. CREDITS
   -------------------------------------------------------------------------- */

.credits-block         { border-top: 1px solid var(--border); padding-top: 2rem; margin-bottom: 4rem; }
.credits-label         { font-size: .6rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ink3); margin-bottom: 1rem; }
.credits-body          { font-family: var(--font-mono); font-size: .72rem; line-height: 2; color: var(--ink3); }
.credits-body strong   { color: var(--ink2); font-weight: 700; }


/* --------------------------------------------------------------------------
   11. NEXT / PREV NAVIGATION
   -------------------------------------------------------------------------- */

.work-nav {
  display: grid; grid-template-columns: 1fr 1fr;
  border: 1px solid var(--border); margin-top: 3.4rem;
  background-color: var(--bg2);
  /* Single grain across entire nav bar — consistent texture */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='120'%3E%3Cfilter id='wn'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.40' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='640' height='120' filter='url(%23wn)' opacity='0.18'/%3E%3C/svg%3E");
  background-size: 640px 120px;
}
.wn-item {
  padding: 0.704rem 1.6rem 0.704rem;
  text-decoration: none;
  background: transparent;
  transition: background .2s, color .2s;
  display: flex; flex-direction: column; justify-content: center; gap: .255rem;
}
.wn-item:hover   { background: transparent; }
.wn-item.next    { text-align: right; border-left: 1px solid var(--border); }
.wn-dir {
  font-size: .54rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink3); display: flex; align-items: center; gap: .6rem;
  line-height: 1;
}
.wn-item.prev .wn-dir::before {
  content: '←'; font-size: .7rem; color: var(--cobalt);
}
.wn-item.next .wn-dir {
  flex-direction: row-reverse;
}
.wn-item.next .wn-dir::before {
  content: '→'; font-size: .7rem; color: var(--cobalt);
}
.wn-title { font-family: var(--font-disp); font-weight: 700; font-size: .88rem; color: var(--ink2); transition: color .2s; line-height: 1; }
.wn-cat   { display: none; }
.wn-item:hover .wn-title { color: #c83000; }


/* --------------------------------------------------------------------------
   12. SOUND-ONLY PAGE MODIFIER
   Add class="sound-page" alongside .work-page on release / sound-only pages.
   Hides the image viewer grid, widens the text column.
   -------------------------------------------------------------------------- */

.sound-page { max-width: 860px; }

.sound-hero         { position: relative; height: 200px; overflow: hidden; border: 1px solid var(--border); margin-bottom: 3rem; background: #d8e2ff; }
#soundHeroCanvas    { display: block; width: 100%; height: 100%; }
.sound-hero-label   { position: absolute; bottom: 1rem; right: 1rem; z-index: 2; font-size: .52rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(24,64,200,.4); }

.release-card       { display: grid; grid-template-columns: auto 1fr; gap: 2rem; padding: 1.5rem; border: 1px solid var(--border); background: var(--bg2); margin-bottom: 3rem; }
.release-cover      { width: 120px; height: 120px; border: 1px solid var(--border); background: var(--bg); overflow: hidden; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.release-cover canvas { display: block; }
.release-cover-ph   { font-size: .5rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink3); text-align: center; padding: .5rem; line-height: 1.8; }
.release-info       { display: flex; flex-direction: column; justify-content: center; gap: .4rem; }
.release-title      { font-family: var(--font-disp); font-weight: 900; font-size: 1.1rem; letter-spacing: .04em; color: var(--ink); }
.release-artist     { font-family: var(--font-ser); font-style: italic; font-weight: 300; font-size: .9rem; color: var(--brick3); }
.release-meta       { font-size: .6rem; color: var(--ink3); letter-spacing: .1em; line-height: 1.9; }
.release-tags       { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .6rem; }
.release-tag        { font-size: .5rem; letter-spacing: .1em; text-transform: uppercase; border: 1px solid var(--ink3); color: var(--ink3); padding: .18rem .5rem; }
.sound-embed-stack  { display: flex; flex-direction: column; gap: 1.5rem; margin-bottom: 4rem; }


/* --------------------------------------------------------------------------
   13. RESPONSIVE — WORK PAGES
   -------------------------------------------------------------------------- */

/* ── Tablet landscape / small laptop (769–1024px) ── */
@media (min-width: 769px) and (max-width: 1024px) {
  .work-page   { padding: 9rem 1.75rem 0; }

  /* Slightly shorter stage — leaves room for content below */
  .stage       { height: 380px; }
  .film-strip  { height: 380px; }

  /* Work title can be large — allow it to breathe */
  .work-title  { font-size: clamp(2rem, 5vw, 4rem); }
}

/* ── Tablet portrait (601–768px) ── */
@media (min-width: 601px) and (max-width: 768px) {
  .work-page   { padding: 7.5rem 1.5rem 0; }

  /* Viewer: film strip moves to horizontal strip below stage */
  .viewer-main            { grid-template-columns: 1fr; }
  .stage                  { height: 320px; border-right: none; }
  .film-strip             {
    height: auto;
    display: flex; flex-direction: row;
    overflow-x: auto; overflow-y: hidden;
    border-top: 1px solid var(--border);
    scrollbar-width: none;
  }
  .film-strip::-webkit-scrollbar { display: none; }
  .film-thumb             {
    width: 90px; height: 64px;
    flex-shrink: 0;
    border-bottom: none;
    border-right: 1px solid var(--border);
    aspect-ratio: 90 / 64;
  }
  /* Move active stripe to top */
  .film-thumb::before     { width: 100%; height: 2px; bottom: auto; top: 0; left: 0; right: 0; }

  /* Dial bar: hide counter at this width */
  .dial-bar               { grid-template-columns: auto 1fr; }
  .counter-section        { display: none; }

  /* Perf list: hide city */
  .perf-row               { grid-template-columns: 4.5rem 1fr; }
  .perf-city              { display: none; }
}

/* ── Mobile (≤600px) ── */
@media (max-width: 600px) {
  /* 7rem ≈ 112px — nav is ~69px tall, gives 43px breathing room */
  .work-page   { padding: 7rem 1.25rem 0; }

  /* Work header */
  .work-title  { font-size: clamp(2rem, 9vw, 3.5rem); margin-bottom: 1rem; }
  .work-meta-row { gap: 1rem; }
  .work-statement { font-size: clamp(.82rem, 3vw, 1rem); margin-bottom: 2rem; }
  .work-statement-row { flex-direction: column; gap: 1rem; }
  .work-statement-row .work-statement { margin-bottom: 0; }

  /* Viewer */
  .viewer-main            { grid-template-columns: 1fr; }
  .stage                  { height: 240px; border-right: none; }
  .stage-frame::before,
  .stage-frame::after     { width: 12px; height: 12px; }
  .film-strip             {
    height: auto;
    display: flex; flex-direction: row;
    overflow-x: auto; overflow-y: hidden;
    border-top: 1px solid var(--border);
    scrollbar-width: none;
  }
  .film-strip::-webkit-scrollbar { display: none; }
  .film-thumb             {
    width: 72px; height: 54px;
    flex-shrink: 0;
    border-bottom: none;
    border-right: 1px solid var(--border);
  }
  .film-thumb::before     { width: 100%; height: 2px; bottom: auto; top: 0; left: 0; right: 0; }
  .ft-type                { display: none; }

  /* Dial bar: minimal */
  .dial-bar               { grid-template-columns: auto 1fr; }
  .counter-section        { display: none; }
  .dial-section           { padding: .7rem .9rem; }
  .cs-title               { font-size: .8rem; }

  /* Body text */
  .work-body              { font-size: .75rem; width: 100%; }

  /* Section headers */
  .section-hdr            { margin-bottom: 1.2rem; }

  /* Performances */
  .perf-row               { grid-template-columns: 3.5rem 1fr; gap: .8rem; padding: .7rem .9rem; }
  .perf-city              { display: none; }
  .perf-venue             { font-size: .7rem; }

  /* Links */
  .link-row               { padding: .7rem .9rem; }

  /* Credits */
  .credits-body           { font-size: .68rem; }

  /* Work nav — padding-based height; title shrinks to fit on one line, bar height is natural */
  .work-nav               { grid-template-columns: 1fr 1fr; margin-top: 2rem; margin-bottom: 0; }
  .wn-item                { padding: .85rem 1rem; gap: .2rem; justify-content: center;
                            display: flex; flex-direction: column; align-self: stretch; overflow: hidden; }
  .wn-item.next           { border-left: 1px solid var(--border); text-align: right; align-items: flex-end; }
  .wn-item.prev           { align-items: flex-start; }
  .wn-dir                 { display: none; }
  /* Scale font down with viewport so long titles fit without wrapping.
     Ellipsis is a last-resort guard — the clamp should handle most titles. */
  .wn-title               { font-size: clamp(.52rem, 3.2vw, .78rem); line-height: 1.2;
                            white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* Arrow above title */
  .wn-item.prev::before   { content: '←'; display: block; font-size: .9rem; color: var(--cobalt); margin-bottom: .2rem; }
  .wn-item.next::before   { content: '→'; display: block; font-size: .9rem; color: var(--cobalt); margin-bottom: .2rem; }

  /* Sound page */
  .release-card           { grid-template-columns: auto 1fr; gap: 1rem; padding: 1rem; }
  .release-cover          { width: 80px; height: 80px; }
  .sound-hero             { height: 120px; }
  .sound-ph               { flex-direction: column; gap: .8rem; padding: 1rem; }
  .sound-ph-wave          { align-self: flex-start; }
}

/* ── Tiny phones (≤390px) ── */
@media (max-width: 390px) {
  .stage          { height: 200px; }
  .film-thumb     { width: 60px; height: 46px; }
  .work-title     { font-size: clamp(1.8rem, 9vw, 2.8rem); }
  .release-cover  { width: 70px; height: 70px; }
}


/* --------------------------------------------------------------------------
   REDUCED MOTION — work/viewer pages
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:        0.01ms !important;
    animation-iteration-count: 1      !important;
    transition-duration:       0.01ms !important;
  }

  /* Slide caption — appear instantly, no slide-up */
  .slide-caption { transform: translateY(0) !important; }

  /* Film thumbs and link rows — instant state changes */
  .film-thumb,
  .film-thumb img,
  .link-row,
  .link-title,
  .wn-item,
  .wn-title,
  .platform-link { transition: none !important; }
}