/* ============================================================
   D. FRANCIS MURRAY, stylesheet
   One layout. It reflows for phones. No separate mobile version.

   To change the colours, edit the values below and nothing else.
   ============================================================ */

:root{
  --bg:        #181a1b;   /* dark grey, Dark Reader style */
  --bg-raised: #202324;   /* slightly lifted panels */
  --text:      #f2f0ed;   /* body text */
  --muted:     #bdbab6;   /* secondary text, lifted for legibility */
  --line:      #34383a;   /* hairlines */
  --accent:    #ffffff;   /* link hover */
  --maxw:      1180px;

  /* Display face. Swap to "trajan-pro-3", Georgia, serif
     once the Adobe Fonts link is pasted into index.html */
  --display:   'Cinzel', Georgia, serif;
}

*{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif;
  font-weight:300;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; height:auto; display:block; }

/* No single word ever left alone on a last line. */
p, h1, h2, h3, blockquote{ text-wrap:pretty; }

a{ color:var(--text); text-decoration:none; }


/* ---------- HERO ---------- */

.hero{
  max-width:var(--maxw);
  margin:0 auto;
  padding:clamp(2.5rem,7vw,5.5rem) 1.5rem 0;
  text-align:center;
}

.name{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(1.9rem,5.5vw,3.6rem);
  letter-spacing:.06em;
  margin:0;
  line-height:1.15;
}

.role{
  font-family:var(--display);
  font-size:clamp(1rem,2.4vw,1.5rem);
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--muted);
  margin:.5rem 0 0;
  padding-left:.34em;      /* optical balance for the tracking */
}

/* Discipline row = the navigation.
   Flex wrap with gap, so it breaks cleanly on a phone.
   Nothing is glued to anything, so nothing can strand at a line end. */
.disciplines{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:.9rem 2.6rem;
  margin:clamp(1.8rem,4vw,2.8rem) 0 clamp(2rem,5vw,3.2rem);
}

.disciplines a{
  font-family:var(--display);
  font-size:clamp(.82rem,1.5vw,1rem);
  letter-spacing:.19em;
  text-transform:uppercase;
  color:var(--muted);
  padding-bottom:.35rem;
  border-bottom:1px solid transparent;
  transition:color .2s, border-color .2s;
}

.disciplines a:hover,
.disciplines a:focus-visible{
  color:var(--accent);
  border-bottom-color:var(--accent);
}


/* ---------- VIDEO ---------- */

.video{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  background:#000;
  border:1px solid var(--line);
}

/* Small link under the two 360 pieces. They play fine here, but
   only youtube.com lets you drag the view around. */
.lookaround{
  display:inline-block;
  margin-top:.7rem;
  font-size:.78rem;
  letter-spacing:.08em;
  color:var(--muted);
  border-bottom:1px solid var(--line);
  padding-bottom:.15rem;
  transition:color .2s, border-color .2s;
}
.lookaround:hover{ color:var(--accent); border-bottom-color:var(--accent); }

.video iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
}


.credit{
  font-size:.8rem;
  letter-spacing:.06em;
  color:var(--muted);
  margin:1rem 0 0;
}

/* A handful of credit lines have grown into full paragraphs people
   are meant to actually read (the Gat Dang writeup), rather than a
   one line attribution like the Conception trailer's. Give those
   the same weight as a prose lead paragraph: bigger, brighter,
   narrower so the lines don't run too long to read comfortably. */
.credit.long{
  font-size:clamp(1.05rem,2vw,1.25rem);
  letter-spacing:normal;
  color:var(--text);
  max-width:42rem;
  margin:1.5rem auto 0;
  text-align:left;
}


/* ---------- STATEMENT ---------- */

.statement{
  max-width:44rem;
  margin:clamp(3.5rem,9vw,6rem) auto;
  padding:0 1.5rem;
  text-align:center;
}

.statement p{
  font-size:clamp(1rem,1.9vw,1.2rem);
  color:var(--text);
  margin:0;
}

.statement em{ font-style:italic; color:#fff; }


/* ---------- THREE BLOCKS ---------- */

.blocks{
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 1.5rem;
  display:grid;
  gap:clamp(2rem,4vw,3rem);
  grid-template-columns:repeat(3,1fr);   /* stacks on narrow screens, below */
}

.block{
  border-top:1px solid var(--line);
  padding-top:1.5rem;
  display:flex;
  flex-direction:column;      /* lets the link sit at the bottom */
}

.block h2{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(1.05rem,2vw,1.3rem);
  letter-spacing:.15em;
  text-transform:uppercase;
  margin:0 0 .8rem;
}

.block p{
  color:var(--muted);
  font-size:.95rem;
  margin:0 0 1.5rem;
  flex:1 0 auto;              /* pushes the link down */
}

.more{
  align-self:flex-start;      /* all three links land on one line */
  font-size:.78rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  border-bottom:1px solid var(--line);
  padding-bottom:.25rem;
  transition:border-color .2s;
}
.more:hover{ border-bottom-color:var(--accent); }


/* ---------- SHEETS ----------
   Straight 12 column grid. No rotation, no cropping.
   Every sheet keeps its true proportions:
     Miriam 1.31   Worm 0.95   Aune 1.02   Drasu 1.40
     Jexu sketch 1.73   Jexu res 2.31   Moksha 2.64

   Spans are picked so the paired rows come out level:
     row 1  Miriam 7 / Worm 5   ->  498px and 484px
     row 2  Aune 5  / Drasu 7   ->  451px and 466px
   The three wide sheets run full width and taper in height. */

.sheets-wrap{
  max-width:var(--maxw);
  margin:clamp(4rem,10vw,7rem) auto;
  padding:0 1.5rem;
  text-align:center;
}
.sheets-wrap .label{ margin-bottom:1.8rem; }

.sheets{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:20px;
  align-items:start;
}

.sheets figure{ margin:0; }

.sheets img{
  width:100%;
  height:auto;                 /* true aspect ratio, never cropped */
  background:#0f1011;
  padding:.55rem;              /* mount, like a print border */
  border:1px solid var(--line);
  box-shadow:0 10px 26px rgba(0,0,0,.45);
  transition:border-color .3s;
}

.sheets figure:hover img{ border-color:#575c5e; }

.s5 { grid-column:span 5; }
.s7 { grid-column:span 7; }
.s12{ grid-column:span 12; }


/* ---------- SOUND REEL ---------- */

.reel{
  max-width:var(--maxw);
  margin:clamp(3.5rem,9vw,6rem) auto;
  padding:0 1.5rem;
  text-align:center;
}

.reel .label{ margin-bottom:1.4rem; }


/* ---------- CLIENTS ---------- */

/* Logo card. White logos on transparent, so it sits on the page
   background with no panel or edge around it. */
.logocard{
  width:100%;
  max-width:820px;
  margin:0 auto 2.4rem;
  opacity:.88;              /* takes the glare off pure white on dark grey */
  transition:opacity .3s;
}
.logocard:hover{ opacity:1; }

.clients{
  max-width:var(--maxw);          /* wide enough to hold nine names on one line */
  margin:0 auto clamp(4rem,10vw,7rem);
  padding:clamp(2.5rem,6vw,4rem) 1.5rem 0;
  border-top:1px solid var(--line);
  text-align:center;
}

.label{
  font-family:var(--display);
  font-weight:400;
  font-size:.78rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--muted);
  margin:0 0 1.6rem;
}

blockquote{
  margin:0;
  max-width:38rem;
  margin-inline:auto;
}

blockquote p{
  font-size:clamp(.98rem,1.8vw,1.12rem);
  font-style:italic;
  color:var(--text);
  margin:0 0 .9rem;
  text-wrap:balance;      /* evens the line lengths, kills the one word orphan */
}

cite{
  font-style:normal;
  font-size:.78rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted);
}


/* ---------- FOOTER ---------- */

footer{
  border-top:1px solid var(--line);
  padding:2.5rem 1.5rem 3.5rem;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.7rem;
}

.footnav{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:.6rem 2rem;
}

footer a{
  font-size:.85rem;
  letter-spacing:.08em;
  color:var(--muted);
  border-bottom:1px solid transparent;
  transition:color .2s, border-color .2s;
}
footer a:hover{ color:var(--accent); border-bottom-color:var(--line); }

.copy{
  font-size:.72rem;
  letter-spacing:.1em;
  color:#5f6263;
  margin:1rem 0 0;
}


/* ============================================================
   NARROW SCREENS
   Same layout, fewer columns. Nothing here is a separate design.
   ============================================================ */

@media (max-width:820px){
  .blocks{ grid-template-columns:1fr; }
  .block{ padding-top:1.2rem; }
  .disciplines{ gap:.8rem 1.6rem; }

  /* Sheets go to one per row so nothing gets tiny. */
  .s5,.s7,.s12{ grid-column:span 12; }
  .sheets{ gap:14px; }

}

@media (max-width:520px){
  .role{ letter-spacing:.24em; padding-left:.24em; }
  .sheets img{ padding:.35rem; }
}


/* Respect users who ask for reduced motion */
@media (prefers-reduced-motion:reduce){
  *{ transition:none !important; }
}


/* ============================================================
   INTERIOR PAGES
   Shared by music.html, and by films / sound / art when built.
   ============================================================ */

.pagehead{
  max-width:var(--maxw);
  margin:0 auto;
  padding:clamp(2rem,5vw,3.5rem) 1.5rem clamp(2rem,5vw,3rem);
  text-align:center;
}

.backhome{
  font-family:var(--display);
  font-size:clamp(1.1rem,2.6vw,1.6rem);
  letter-spacing:.1em;
  color:var(--text);
  transition:opacity .2s;
}
.backhome:hover{ opacity:.72; }

.pagehead .disciplines{ margin:1.6rem 0 clamp(2rem,5vw,3rem); }

/* Marks which page you are on. */
.disciplines a.current{
  color:var(--accent);
  border-bottom-color:var(--line);
}

.pagetitle{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(1.3rem,3vw,2rem);
  letter-spacing:.2em;
  text-transform:uppercase;
  margin:0;
}


/* ---------- TRACK LIST ---------- */

/* Wider than the reading column, because the visual players
   render the artwork as a banner and want the room. */
.tracks{
  max-width:56rem;
  margin:0 auto;
  padding:0 1.5rem;
}

.tracks .tracknote{ max-width:44rem; }

.track{
  border-top:1px solid var(--line);
  padding:clamp(1.6rem,3.5vw,2.2rem) 0;
}

.tracks:first-of-type .track:first-child{ border-top:none; padding-top:0; }

.track h2{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(.95rem,1.9vw,1.15rem);
  letter-spacing:.13em;
  text-transform:uppercase;
  margin:0 0 .7rem;
}

.tracknote{
  color:var(--muted);
  font-size:.92rem;
  margin:0 0 1.1rem;
}

.track iframe{
  display:block;
  width:100%;
  border:0;
}

/* The featured track sits apart from the list below it. */
.featured{
  padding-bottom:clamp(2.5rem,6vw,3.5rem);
  margin-bottom:clamp(1.5rem,4vw,2.5rem);
  border-bottom:1px solid var(--line);
}

.featured h2{
  font-size:clamp(1.15rem,2.4vw,1.5rem);
}


/* ============================================================
   LIGHTBOX
   Tap a sheet to view it full screen. touch-action lets a phone
   pinch to zoom inside the overlay.
   ============================================================ */

.sheets a{ display:block; }

.lightbox{
  position:fixed;
  inset:0;
  z-index:100;
  background:rgba(12,13,14,.97);
  display:flex;
  align-items:center;
  justify-content:center;
}
.lightbox[hidden]{ display:none; }

.lightbox-stage{
  width:100%;
  height:100%;
  overflow:auto;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:clamp(.5rem,2vw,2rem);
  touch-action:pinch-zoom;          /* allows pinch to zoom on a phone */
  -webkit-overflow-scrolling:touch;
}

.lightbox-stage img{
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
  object-fit:contain;
  touch-action:pinch-zoom;
}

.lightbox-close{
  position:absolute;
  top:.6rem;
  right:.9rem;
  z-index:2;
  background:none;
  border:0;
  color:var(--muted);
  font-size:2.4rem;
  line-height:1;
  padding:.3rem .6rem;
  cursor:pointer;
  transition:color .2s;
}
.lightbox-close:hover{ color:#fff; }

/* Hint that the sheets are clickable. */
.sheets a:hover img{ border-color:#575c5e; }
.sheets a{ cursor:zoom-in; }


/* ------------------------------------------------------------
   MUSIC PAGE FIX
   The featured track had a bottom rule and the next track had a
   top rule, which read as two lines. One rule only.
   ------------------------------------------------------------ */
.featured{ border-bottom:none; }


/* ---------- PROSE PAGES (about, contact) ---------- */

.prose{
  max-width:42rem;
  margin:0 auto clamp(4rem,10vw,7rem);
  padding:0 1.5rem;
}

.prose .lead{
  font-size:clamp(1.05rem,2vw,1.25rem);
  color:var(--text);
  text-align:center;
  margin:0 0 2.5rem;
}

.prose p{ color:var(--muted); }


/* ============================================================
   ART GALLERY
   Uniform 16:9 cells. The source art is already 16:9, so nothing
   is really cropped. The lightbox always shows the full frame.
   ============================================================ */

.anchors{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:.8rem 2.2rem;
  margin-top:1.6rem;
}

.anchors a{
  font-family:var(--display);
  font-size:.8rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted);
  padding-bottom:.3rem;
  border-bottom:1px solid transparent;
  transition:color .2s, border-color .2s;
}
.anchors a:hover{ color:var(--accent); border-bottom-color:var(--accent); }

.gallery-wrap{
  max-width:var(--maxw);
  margin:clamp(3rem,7vw,5rem) auto;
  padding:0 1.5rem;
  text-align:center;
  scroll-margin-top:1.5rem;
}
.gallery-wrap .label{ margin-bottom:1.6rem; }

.gallery{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
}

.gallery a{
  display:block;
  cursor:zoom-in;
  line-height:0;
}

.gallery img{
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  border:1px solid var(--line);
  transition:border-color .25s, opacity .25s;
}
.gallery a:hover img{ border-color:#6a7072; opacity:.85; }

@media (max-width:820px){ .gallery{ grid-template-columns:repeat(2,1fr); gap:10px; } }
@media (max-width:520px){ .gallery{ grid-template-columns:1fr; } }


/* Lightbox arrows */
.lightbox-prev,.lightbox-next{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:2;
  background:none;
  border:0;
  color:var(--muted);
  font-size:3rem;
  line-height:1;
  padding:.4rem 1rem;
  cursor:pointer;
  transition:color .2s;
}
.lightbox-prev{ left:.2rem; }
.lightbox-next{ right:.2rem; }
.lightbox-prev:hover,.lightbox-next:hover{ color:#fff; }

@media (max-width:520px){
  .lightbox-prev,.lightbox-next{ font-size:2.2rem; padding:.3rem .6rem; }
}


/* ---------- PORTRAIT (about page) ---------- */

.portrait{
  width:100%;
  max-width:260px;
  margin:0 auto 2.2rem;
  border-radius:50%;
  border:1px solid var(--line);
}


/* ---------- ON SET STILLS (direction page) ---------- */

.stills-wrap{
  max-width:var(--maxw);
  margin:clamp(3rem,7vw,5rem) auto;
  padding:0 1.5rem;
  text-align:center;
}
.stills-wrap .label{ margin-bottom:1.6rem; }

.stills{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:16px;
  align-items:start;
}

.stills figure{ margin:0; }

.stills a{ display:block; cursor:zoom-in; line-height:0; }

.stills img{
  width:100%;
  height:auto;
  border:1px solid var(--line);
  transition:border-color .25s, opacity .25s;
}
.stills a:hover img{ border-color:#6a7072; opacity:.9; }

@media (max-width:640px){ .stills{ grid-template-columns:1fr; } }


/* ============================================================
   TIGHTEN THE TOP OF INTERIOR PAGES
   The page header, the title and the first section were each
   adding their own space, which stacked into a large gap.
   ============================================================ */

.pagehead{ padding-bottom:clamp(1rem,2vw,1.4rem); }
.pagehead .disciplines{ margin-bottom:clamp(1.2rem,2.5vw,1.8rem); }
.pagehead .anchors{ margin-top:1.1rem; }

/* First block on a page sits close under the title. */
.pagehead + .reel,
.pagehead + .tracks,
.pagehead + .prose,
.pagehead + main > .gallery-wrap:first-child{
  margin-top:clamp(1.4rem,3vw,2.2rem);
}
#galleries > .gallery-wrap:first-child{ margin-top:clamp(1.4rem,3vw,2.2rem); }

/* Sound page: Selected Credits is now the first thing under the
   title, so it shouldn't carry the top border and padding meant to
   separate it from a banner/intro that used to sit above it. */
.pagehead + .clients{
  padding-top:0;
  border-top:none;
  margin-top:clamp(1.4rem,3vw,2.2rem);
}


/* ============================================================
   BANNER
   Wide image directly under a page title.
   ============================================================ */

.banner{
  max-width:var(--maxw);
  margin:0 auto clamp(2rem,5vw,3rem);
  padding:0 1.5rem;
}
.banner img{
  width:100%;
  height:auto;
  max-height:46vh;
  object-fit:cover;
  border:1px solid var(--line);
}


/* ============================================================
   FILM CHAPTERS
   Heading, one line of copy, then a grid of stills.
   ============================================================ */

.chapter{
  max-width:var(--maxw);
  margin:clamp(2.2rem,5vw,3.5rem) auto;
  padding:0 1.5rem;
  text-align:center;
}

.chapter .label{ margin-bottom:.9rem; }

.chapter-note{
  max-width:40rem;
  margin:0 auto 1.8rem;
  color:var(--muted);
  font-size:.94rem;
}

.filmgrid{
  display:grid;
  gap:14px;
}
.filmgrid.one  { grid-template-columns:1fr; max-width:820px; margin-inline:auto; }
.filmgrid.two  { grid-template-columns:repeat(2,1fr); }
.filmgrid.three{ grid-template-columns:repeat(3,1fr); }
.filmgrid.four { grid-template-columns:repeat(4,1fr); }

.filmgrid figure{ margin:0; }
.filmgrid a{ display:block; cursor:zoom-in; line-height:0; }

.filmgrid img{
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  border:1px solid var(--line);
  transition:border-color .25s, opacity .25s;
}
.filmgrid a:hover img{ border-color:#6a7072; opacity:.88; }

@media (max-width:820px){
  .filmgrid.three,
  .filmgrid.four{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:560px){
  .filmgrid.two,
  .filmgrid.three,
  .filmgrid.four{ grid-template-columns:1fr; }
}


/* ---------- NO CGI NO AI ---------- */

.noai{
  font-family:var(--display);
  font-size:clamp(.9rem,1.8vw,1.05rem);
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--text);
  text-align:center;
  margin:2rem 0 0;
}


/* ---------- CREDITS ---------- */

.credits{ margin-top:clamp(3rem,7vw,5rem); }
.credits .label{ text-align:center; }

.credits dl{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:.45rem 1.6rem;
  margin:0;
  font-size:.88rem;
}
.credits dt{
  text-align:right;
  color:#8d8f90;
  letter-spacing:.04em;
}
.credits dd{ margin:0; color:var(--muted); }

@media (max-width:560px){
  .credits dl{ grid-template-columns:1fr; gap:0 0; text-align:center; }
  .credits dt{ text-align:center; margin-top:1rem; font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; }
}


/* ---------- POSTERS GRID ----------
   Posters are portrait, around 2:3, so they get their own ratio. */
.gallery.portrait{ grid-template-columns:repeat(4,1fr); }
.gallery.portrait img{ aspect-ratio:2/3; }
@media (max-width:820px){ .gallery.portrait{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:520px){ .gallery.portrait{ grid-template-columns:repeat(2,1fr); } }


/* ---------- SLATE ---------- */
.slate{
  font-family:var(--display);
  font-size:clamp(.85rem,1.7vw,1.05rem);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--text);
  line-height:2.2;
  margin:0;
}


/* ---------- MUSIC: featured track spacing ----------
   Was much taller than the gap between the other cues. */
.featured{
  padding-bottom:clamp(1.6rem,3.5vw,2.2rem);
  margin-bottom:0;
}


/* ============================================================
   ILLUMINATED OPENING
   The portrait sits where a Lombardic capital would, with the
   first paragraph running around it. Stacks on a phone.
   ============================================================ */

.illuminated{ margin-bottom:1.6rem; }

.illuminated .portrait{
  float:left;
  width:170px;
  margin:.35rem 1.5rem .7rem 0;
  border-radius:0;                 /* square, like the sheets */
  background:#0f1011;
  padding:.4rem;
  border:1px solid var(--line);
  box-shadow:0 8px 22px rgba(0,0,0,.45);
  shape-outside:margin-box;
}

.illuminated p{
  font-size:clamp(1.02rem,1.9vw,1.18rem);
  color:var(--text);
  margin:0;
}

.illuminated::after{ content:''; display:block; clear:both; }

.prose h2.label{
  text-align:left;
  margin:2.8rem 0 .9rem;
  padding-top:1.6rem;
  border-top:1px solid var(--line);
}

/* "Beyond Conception" on the Direction page centers its heading to
   match the centered lead paragraph under it, unlike the left-aligned
   running subheadings on the About page and the Credits block. */
.prose.beyond h2.label{ text-align:center; }

.prose p{ margin:0 0 1.1rem; }
.prose em{ font-style:italic; color:var(--text); }

@media (max-width:560px){
  .illuminated .portrait{
    float:none;
    width:150px;
    margin:0 auto 1.2rem;
  }
  .illuminated p{ text-align:center; }
}


/* ============================================================
   CONTACT FORM
   ============================================================ */

.form{
  max-width:34rem;
  margin:0 auto;
  text-align:left;
}

.form label{
  display:block;
  font-size:.72rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted);
  margin:1.4rem 0 .45rem;
}

.form input,
.form textarea{
  width:100%;
  background:#0f1011;
  border:1px solid var(--line);
  color:var(--text);
  font-family:inherit;
  font-size:.95rem;
  font-weight:300;
  padding:.7rem .85rem;
  transition:border-color .2s;
}
.form input:focus,
.form textarea:focus{ outline:none; border-color:#6a7072; }

.form textarea{ min-height:9rem; resize:vertical; }

.form button{
  margin-top:1.8rem;
  background:none;
  color:var(--text);
  border:1px solid var(--line);
  font-family:var(--display);
  font-size:.78rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  padding:.8rem 2.2rem;
  cursor:pointer;
  transition:border-color .2s, background .2s;
}
.form button:hover{ border-color:var(--accent); background:#202324; }

.form-note{
  font-size:.8rem;
  color:#8d8f90;
  margin-top:1.4rem;
}


/* ============================================================
   WORK LIST  (sound page)
   ============================================================ */

.worklist{
  max-width:52rem;
  margin:clamp(3rem,7vw,4.5rem) auto;
  padding:0 1.5rem;
}

.worklist > .label{ text-align:center; }

.work{
  border-top:1px solid var(--line);
  padding:clamp(1.6rem,3.5vw,2.2rem) 0;
}
.worklist .work:first-of-type{ border-top:none; padding-top:0; }

.work h3{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(.98rem,2vw,1.18rem);
  letter-spacing:.13em;
  text-transform:uppercase;
  margin:0 0 .5rem;
}

.worknote{
  color:var(--muted);
  font-size:.9rem;
  margin:0 0 1.1rem;
}


/* Posters read better larger and in a narrower container. */
.gallery-wrap#posters{ max-width:900px; }
.gallery.portrait{ grid-template-columns:repeat(3,1fr); gap:18px; }
@media (max-width:640px){ .gallery.portrait{ grid-template-columns:repeat(2,1fr); } }


/* ============================================================
   POSTER RAIL
   Horizontal scrolling row of large posters, like the old site.
   Scrolls with a trackpad, a swipe, or the arrows.
   ============================================================ */

.gallery-wrap#posters{ max-width:none; padding:0; }
.gallery-wrap#posters .label{ margin-bottom:1.4rem; }

.rail-shell{ position:relative; }

.rail{
  display:flex;
  gap:20px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  padding:0 clamp(1.5rem,6vw,5rem) .6rem;
  scrollbar-width:none;
}
.rail::-webkit-scrollbar{ display:none; }

.rail a{
  flex:0 0 auto;
  width:clamp(200px,24vw,320px);
  scroll-snap-align:center;
  cursor:zoom-in;
  line-height:0;
}

.rail img{
  width:100%;
  height:auto;                 /* posters keep their real shape */
  border:1px solid var(--line);
  transition:border-color .25s, opacity .25s;
}
.rail a:hover img{ border-color:#6a7072; opacity:.9; }

.rail-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:2;
  background:rgba(24,26,27,.82);
  border:1px solid var(--line);
  color:var(--text);
  font-size:1.8rem;
  line-height:1;
  padding:.5rem .85rem;
  cursor:pointer;
  transition:background .2s, border-color .2s;
}
.rail-arrow:hover{ background:#2a2e30; border-color:#6a7072; }
.rail-arrow.left { left:clamp(.4rem,2vw,1.4rem); }
.rail-arrow.right{ right:clamp(.4rem,2vw,1.4rem); }

@media (max-width:640px){
  .rail-arrow{ display:none; }   /* swipe instead */
  .rail{ padding-inline:1.2rem; }
}


/* ---------- SLATE ----------
   Each title is one unbreakable unit, so a line can never split
   "The 33" into "The" and "33". Flex wrapping instead of spaces
   keeps the gaps even however it breaks.

   Flex wraps whole items, not text, so a stray space or  
   between the last two titles does nothing: whichever title lands
   last can still end up alone on the final line. The last two are
   wrapped together in one shared .pair item instead, which the
   flex layout can only ever wrap as a single unit, so neither one
   can end up stranded without the other. */
.slate{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:.6rem 1.7rem;
  line-height:1.9;
}
.slate span{ white-space:nowrap; }
.slate .pair{
  display:inline-flex;
  flex-wrap:nowrap;
  gap:.6rem 1.7rem;
}

/* 360 videos link out to YouTube, where they actually render and
   can be dragged around. This is the little badge on the thumbnail. */
a