/* ============================================================
   Middle House
   Chase's identity: cream, gold, teal, orange. Cream is the page.
   Every foreground/background pair below was measured against
   WCAG AA before it was used. Notes give the ratio.

   Two contrast failures on the live site are corrected here:
     gold  #C6922A on cream  was 2.07  ->  #7E5D1B  4.50
     cream on orange #D5632A was 2.77  ->  dark ink 4.92
   The orange and teal are unchanged — the old bug was the text
   colour sitting on them, not the brand colours themselves.

   Film mounts (slide frames, contact-sheet cells, video facades)
   stay dark on purpose: a black mount is what a real slide or
   contact sheet looks like, and labels printed on those mounts
   are light-on-dark for the same reason.
   ============================================================ */

:root{
  /* surfaces */
  --gate:    #E8DDC9;   /* his cream — the page      */
  --gate-2:  #DCCFB6;   /* raised panel              */
  --teal:    #293C3D;   /* his teal — a dark panel   */

  /* ink */
  --ivory:   #262F2C;   /* primary   — 9.4:1 on cream */
  --sage:    #4E5854;   /* secondary — 6.4:1 on cream */
  --muted:   #646157;   /* tertiary  — 4.6:1 on cream */

  /* accent */
  --amber:   #7E5D1B;   /* his gold, darkened — 4.5:1 on cream */
  --ember:   #D5632A;   /* his orange, unchanged — dark text only */

  --line:    #CBBDA2;

  /* ink for text sitting ON --ember — 4.9:1 */
  --ink-on-fill: #181413;

  /* mounts: the dark frames that hold photographs */
  --mount:      #1B1714;
  --mount-line: #B9A98C;
  --on-mount:   #FFF4E4;   /* light ink printed on a mount */
  --on-mount-2: #A79A83;   /* frame codes — 5.4:1 on --mount */
  --on-mount-accent: #F0A860;

  --font-display: "Helvetica Neue", -apple-system, BlinkMacSystemFont,
                  "Segoe UI", Roboto, Arial, sans-serif;
  --font-body:    "Iowan Old Style", "Palatino Linotype", Palatino,
                  Georgia, "Times New Roman", serif;
  --font-mono:    ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Code",
                  Menlo, Consolas, monospace;

  --rail: 46px;         /* filmstrip rail width */
  --pad: clamp(1.25rem, 5vw, 5rem);
  --maxw: 1180px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}

body{
  margin:0;
  background:var(--gate);
  color:var(--ivory);
  font-family:var(--font-body);
  font-size:clamp(1rem, .96rem + .25vw, 1.125rem);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

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

a{ color:var(--amber); }
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:2px solid var(--amber);
  outline-offset:3px;
}

.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--amber); color:var(--on-mount);
  padding:.7rem 1.1rem; font-family:var(--font-mono); font-size:.8rem;
  text-decoration:none;
}
.skip:focus{ left:0; }

/* ---------- shared type ------------------------------------ */

.eyebrow,.marker,.keykode,.rail__label,.rail__frame,
.sheet__code,.price__from,.price__terms,.nav,
.film__label,.footer__copy{
  font-family:var(--font-mono);
  text-transform:uppercase;
  letter-spacing:.16em;
}

.eyebrow,.marker{
  font-size:.7rem; color:var(--muted);
  margin:0 0 1.4rem;
}
.marker{ color:var(--amber); }

/* ---------- filmstrip rail --------------------------------- */
/* The page is a reel; each section is a frame. The numbering is
   sequence, not ornament, so it advances as you scroll.        */

.rail{
  position:fixed; left:0; top:0; bottom:0; width:var(--rail);
  background:var(--gate-2);
  border-right:1px solid var(--line);
  display:none; flex-direction:column; align-items:stretch;
  z-index:40;
}
/* Perforations run the full height, like real stock. Squares with a hint of
   radius read as sprocket holes; dots read as a dotted border. */
.rail__perfs{
  flex:1 1 auto; width:100%;
  /* 13px hole, 11px land — a sprocket pitch, not a dotted line.
     Holes are darker than the cream stock so they read as holes. */
  background-image:linear-gradient(to bottom,
      #C0B096 0 13px, transparent 13px 24px);
  background-repeat:repeat-y;
  background-size:15px 24px;
  background-position:center 0;
}
.rail__meta{
  flex:0 0 auto;
  padding:1.6rem 0;
  background:var(--gate-2);
  display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:1.1rem;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.rail__frame{
  font-size:.82rem; color:var(--on-mount); background:var(--amber);
  letter-spacing:.02em; font-variant-numeric:tabular-nums;
  padding:.3rem .4rem; min-width:2.4em; text-align:center;
}
.rail__label{
  writing-mode:vertical-rl;
  font-size:.55rem; color:var(--muted); letter-spacing:.3em;
}

@media (min-width:1024px){
  .rail{ display:flex; }
  body{ padding-left:var(--rail); }
}

/* ---------- top bar ---------------------------------------- */

.topbar{
  position:sticky; top:0; z-index:30;
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem;
  padding:.85rem var(--pad);
  background:color-mix(in srgb, var(--gate) 88%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
/* His own wordmark, artwork rather than set type — the house glyph
   between the two words isn't something a font can stand in for. */
.wordmark{ display:inline-flex; align-items:center; text-decoration:none; }
.wordmark__img{
  display:block; width:auto;
  height:clamp(15px,2.2vw,20px);
}

.nav{ display:flex; align-items:center; gap:clamp(.9rem,2.4vw,1.9rem); font-size:.68rem; }
.nav a{ color:var(--sage); text-decoration:none; }
.nav a:hover{ color:var(--ivory); }
.nav__cta{
  color:var(--ink-on-fill) !important;   /* 4.9:1 on --ember */
  background:var(--ember);
  padding:.55rem .85rem;
}
.nav__cta:hover{ background:var(--amber); color:var(--on-mount) !important; }
@media (max-width:640px){
  .nav a:not(.nav__cta){ display:none; }
}

/* ---------- hero ------------------------------------------- */

.hero{
  max-width:var(--maxw); margin:0 auto;
  padding:clamp(3rem,9vh,6.5rem) var(--pad) clamp(3rem,8vh,5.5rem);
  display:grid; gap:clamp(2.5rem,6vw,4.5rem);
  grid-template-columns:1fr;
  align-items:center;
}
@media (min-width:900px){
  .hero{ grid-template-columns:1.15fr .85fr; }
}

.hero__h1{
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(2.9rem, 8.5vw, 5.6rem);
  line-height:.94;
  letter-spacing:-.035em;
  margin:0 0 1.5rem;
  text-transform:uppercase;
}
.hero__h1 em{
  font-style:normal;
  color:var(--amber);
}

.lede{
  font-size:clamp(1.06rem,1.7vw,1.28rem);
  color:var(--sage);
  max-width:34ch; margin:0 0 2.2rem;
}

.hero__actions{ display:flex; flex-wrap:wrap; gap:.8rem; }

.btn{
  font-family:var(--font-mono); font-size:.72rem;
  text-transform:uppercase; letter-spacing:.16em;
  text-decoration:none; cursor:pointer;
  display:inline-block; padding:.95rem 1.5rem;
  background:var(--ember); color:var(--ink-on-fill);   /* 4.9:1 */
  border:1px solid var(--ember);
  transition:background .18s ease, color .18s ease;
}
.btn:hover{ background:var(--amber); border-color:var(--amber); color:var(--on-mount); }

.btn--ghost{
  background:transparent; color:var(--ivory); border-color:var(--mount-line);
}
.btn--ghost:hover{ background:transparent; border-color:var(--amber); color:var(--amber); }

/* the gate — a single frame, shown at native scale so it stays sharp */
.gate{ margin:0; }
.gate__frame{
  position:relative;
  border:1px solid var(--mount-line);
  background:var(--mount);
  padding:10px;
}
.gate__frame::before,.gate__frame::after{
  content:""; position:absolute; left:0; right:0; height:10px;
  background-image:radial-gradient(var(--gate) 38%, transparent 39%);
  background-size:20px 10px;
}
.gate__frame::before{ top:0; }
.gate__frame::after{ bottom:0; }
.gate__video{ width:100%; aspect-ratio:1/1; object-fit:cover; }

.keykode{
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  font-size:.6rem; color:var(--muted);
  margin-top:.7rem;
}

/* ---------- generic section -------------------------------- */

.section{
  max-width:var(--maxw); margin:0 auto;
  padding:clamp(3.5rem,10vh,7rem) var(--pad);
  border-top:1px solid var(--line);
}
.section--tight{ padding-top:clamp(2.75rem,7vh,5rem); }

.section__h2{
  font-family:var(--font-display);
  font-weight:800; text-transform:uppercase;
  font-size:clamp(1.9rem,4.6vw,3.1rem);
  line-height:1; letter-spacing:-.03em;
  margin:0 0 1rem;
}
.section__note{
  color:var(--sage); max-width:52ch; margin:0;
}
.section__head{ margin-bottom:clamp(2rem,5vw,3.2rem); }

.cols{
  display:grid; gap:1.4rem 3rem; grid-template-columns:1fr;
  max-width:76ch;
}
@media (min-width:820px){ .cols{ grid-template-columns:1fr 1fr; } }
.cols p{ margin:0; color:var(--sage); }

/* ---------- films (click-to-load facade) -------------------- */

.films{
  list-style:none; margin:0; padding:0;
  display:grid; gap:clamp(1rem,2.4vw,1.8rem);
  grid-template-columns:1fr;
}
@media (min-width:760px){ .films{ grid-template-columns:1fr 1fr; } }

.film__btn{
  position:relative; display:block; width:100%; padding:0;
  border:1px solid var(--mount-line); background:var(--mount); cursor:pointer;
  overflow:hidden;
}
.film__img{
  width:100%; aspect-ratio:16/9; object-fit:cover;
  opacity:.82; transition:opacity .25s ease, transform .5s ease;
}
.film__btn:hover .film__img{ opacity:1; transform:scale(1.02); }

.film__play{
  position:absolute; inset:0; margin:auto;
  width:58px; height:58px; border-radius:50%;
  border:1px solid var(--on-mount);
  background:rgba(20,16,14,.5);
  backdrop-filter:blur(2px);
}
.film__play::after{
  content:""; position:absolute; inset:0; margin:auto;
  width:0; height:0;
  border-left:13px solid var(--on-mount);
  border-top:8px solid transparent;
  border-bottom:8px solid transparent;
  transform:translateX(2px);
}
.film__btn:hover .film__play{ border-color:var(--on-mount-accent); }
.film__btn:hover .film__play::after{ border-left-color:var(--on-mount-accent); }

/* Labels sit on top of photographs, so they stay light-on-dark. */
.film__label{
  position:absolute; left:0; bottom:0;
  display:flex; align-items:center; gap:.6rem;
  padding:.7rem .9rem;
  font-size:.62rem; color:var(--on-mount);
  background:linear-gradient(to top, rgba(20,16,14,.92), transparent);
  width:100%;
}
.film__idx{ color:var(--on-mount-accent); }

.film__btn.is-live{ cursor:default; }
.film__btn.is-live .film__play,
.film__btn.is-live .film__label,
.film__btn.is-live .film__img{ display:none; }
.film__iframe{ width:100%; aspect-ratio:16/9; border:0; display:block; }

/* ---------- how I shoot ------------------------------------- */

/* The claim on the left, the method on the right, the evidence in a
   full-width row underneath. Stacks in that same order when narrow. */
.approach{
  display:grid; gap:clamp(1.5rem,4vw,2.4rem);
  grid-template-columns:1fr;
  align-items:start;
}
@media (min-width:900px){
  .approach{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    column-gap:clamp(2.5rem,6vw,5rem);
  }
  /* The quote owns a column now, so it can be set larger. Sized to land
     on three lines at this measure rather than orphaning its last word. */
  .approach .pull p{ font-size:clamp(1.9rem,3vw,2.8rem); }
}

/* No ch cap here: on the blockquote a ch resolves against the body font,
   not the display size the quote is actually set in, which strangles it.
   The column is the measure, and text-wrap:balance evens the lines. */
.approach .pull{ margin:0; max-width:none; }
.approach .pull p{ max-width:100%; }

.approach__copy{ display:grid; gap:1.3rem; max-width:58ch; }
.approach__copy p{ margin:0; color:var(--sage); }

/* ---------- pull quote ------------------------------------- */

.pull{
  margin:0 0 clamp(2.2rem,5vw,3.2rem);
  padding:0; max-width:30ch;
}
.pull p{
  font-family:var(--font-display); font-weight:800;
  text-transform:uppercase; letter-spacing:-.03em;
  font-size:clamp(1.5rem,4vw,2.6rem); line-height:1.06;
  margin:0; color:var(--ivory);
  text-wrap:balance;
}

/* ---------- contact sheet ---------------------------------- */

.sheet__h3{
  font-family:var(--font-mono); text-transform:uppercase;
  letter-spacing:.16em; font-size:.68rem; font-weight:400;
  color:var(--muted);
  margin:clamp(2.5rem,6vw,3.5rem) 0 1rem;
}
.sheet{
  list-style:none; margin:0; padding:0;
  display:grid; gap:.6rem;
  grid-template-columns:repeat(2,1fr);
}
@media (min-width:760px){ .sheet{ grid-template-columns:repeat(3,1fr); } }

.sheet__cell{
  border:1px solid var(--mount-line); background:var(--mount); padding:6px;
}
.sheet__cell video{ width:100%; aspect-ratio:1/1; object-fit:cover; }
/* Frame codes are printed inside the dark mount, so they run light. */
.sheet__code{
  display:block; margin-top:.5rem;
  font-size:.55rem; color:var(--on-mount-2);
}

/* ---------- price ------------------------------------------ */

.price{
  display:grid; gap:clamp(2rem,5vw,3.5rem);
  grid-template-columns:1fr;
  align-items:start;
}
@media (min-width:860px){ .price{ grid-template-columns:.85fr 1.15fr; } }

/* The one dark block on the page: cream text on his teal, 8.6:1 */
.price__figure{
  background:var(--teal); border:1px solid var(--teal);
  padding:clamp(1.6rem,4vw,2.4rem);
}
.price__from{ display:block; font-size:.62rem; color:#C3CDC8; margin-bottom:.7rem; }
.price__amount{
  display:block;
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(3rem,9vw,4.6rem); line-height:.9;
  letter-spacing:-.045em; color:#F6EFE1;
  font-variant-numeric:tabular-nums;
}
.price__basis{
  display:block; margin-top:.9rem; padding-top:.9rem;
  border-top:1px solid var(--ember);
  font-size:.86rem; color:#F6EFE1; max-width:34ch;
}
.price__terms{ display:block; font-size:.58rem; color:#C3CDC8; margin-top:1rem; line-height:1.9; }

/* Homepage teaser: what's included as a spec strip rather than a grid of
   descriptions, which is what /pricing/ is for. */
.price__what{ display:grid; gap:1.4rem; align-content:start; }
.price__what .keykode{ margin:0; gap:1.4rem; }
.price__more{ margin:0; color:var(--sage); font-size:.94rem; max-width:46ch; }

.incl{ list-style:none; margin:0; padding:0; display:grid; gap:1.5rem; }
@media (min-width:560px){ .incl{ grid-template-columns:1fr 1fr; gap:1.8rem 2.4rem; } }
.incl h3{
  font-family:var(--font-display); text-transform:uppercase;
  font-size:.9rem; letter-spacing:.02em; font-weight:800;
  margin:0 0 .4rem; color:var(--ivory);
  padding-top:.9rem; border-top:1px solid var(--ember);
}
.incl p{ margin:0; color:var(--sage); font-size:.96rem; }

.fineprint{
  margin:clamp(2rem,5vw,3rem) 0 0;
  max-width:72ch; font-size:.88rem; color:var(--muted);
}

/* ---------- FAQ -------------------------------------------- */
/* Ten short answers, so two columns rather than one long scroll.
   Same rule-over-heading treatment as the price inclusions. */

.qas{
  display:grid; gap:clamp(1.5rem,3.5vw,2.2rem);
  grid-template-columns:1fr;
}
@media (min-width:900px){
  .qas{
    grid-template-columns:1fr 1fr;
    column-gap:clamp(2.5rem,5vw,4rem);
  }
}
.qa{ max-width:60ch; }
.qa__q{
  font-family:var(--font-display); text-transform:uppercase;
  font-size:1rem; letter-spacing:.01em; font-weight:800;
  margin:0 0 .5rem; color:var(--ivory);
  padding-top:.9rem; border-top:1px solid var(--ember);
  text-wrap:balance;
}
.qa__a{ margin:0; color:var(--sage); font-size:.98rem; }

/* ---------- chase ------------------------------------------ */

/* Frames on the left, him on the right — the one section that reads as
   a spread rather than a stack, since a square frame and a short bio
   fit side by side without either being starved.
   Source order is heading, frames, copy, so the narrow layout still
   reads top to bottom without any reordering. */

.chase{
  display:grid; gap:clamp(1.6rem,4vw,2.4rem);
  grid-template-columns:1fr;
}
@media (min-width:1000px){
  .chase{
    grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
    grid-template-areas:
      "frames head"
      "frames body";
    grid-template-rows:auto 1fr;
    row-gap:0;
    column-gap:clamp(2.5rem,5vw,4.5rem);
    align-items:start;
  }
  .chase__head{ grid-area:head; }
  .chase__frames{ grid-area:frames; }
  .chase__body{ grid-area:body; }
}

/* Two text columns would be four columns of nothing in half the width. */
.chase__body .cols{ grid-template-columns:1fr; max-width:52ch; }

/* Chase's own frames: six, two of which move. One at a time, in the
   same dark mount the contact-sheet cells use — it sits just outside
   the picture rather than framing it. */

.strip{ margin:0; }

/* The section already carries the page gutter, and the frame lines up
   with the heading and the controls rather than floating centred —
   scoped past the .slide rules further down the file. */
.strip__track > .strip__slide{ padding:0; justify-content:flex-start; }

/* Frames are square because every frame on this site is square —
   the hero gate and the contact sheet both are. */
.frame{
  margin:0;
  width:100%; max-width:560px;
  background:var(--mount);
  border:1px solid var(--mount-line);
  padding:6px;
}

.frame__img,.frame__clip{
  display:block; width:100%; aspect-ratio:1/1; object-fit:cover;
  background:#000;
}

/* Printed inside the mount, like the codes under the contact sheet. */
.frame__edge{
  display:flex; align-items:baseline; gap:.7rem;
  padding:.55rem .1rem 0;
  font-family:var(--font-mono); text-transform:uppercase;
  letter-spacing:.16em; font-size:.55rem;
  color:var(--on-mount-2);
}
.frame__no{ color:var(--on-mount-accent); }
/* Kept next to the description rather than pushed to the frame edge —
   at the far edge it read as the caption of the frame beside it. */
.frame__stock{ opacity:.7; letter-spacing:.2em; }
.frame__stock::before{ content:"· "; }

/* The section already carries the page gutter, so the bar and hint
   line up with the strip instead of indenting twice. Scoped past the
   .reel__bar / .reel__hint rules further down the file. */
.strip > .reel__bar{ padding:1.2rem 0 0; }
.strip > .reel__hint{ padding:.8rem 0 0; }

.welcome{
  margin:clamp(2rem,5vw,3rem) 0 0;
  padding-left:1.1rem;
  border-left:2px solid var(--ember);
  color:var(--ivory); max-width:52ch;
}

/* ---------- form ------------------------------------------- */

.form{
  display:grid; gap:1.3rem 1.6rem;
  grid-template-columns:1fr; max-width:760px;
}
@media (min-width:640px){ .form{ grid-template-columns:1fr 1fr; } }
.field{ display:flex; flex-direction:column; gap:.45rem; }
.field--wide{ grid-column:1 / -1; }

.field label{
  font-family:var(--font-mono); text-transform:uppercase;
  letter-spacing:.16em; font-size:.62rem; color:var(--sage);
}
/* Says which fields are required before the visitor hits submit rather
   than after. Spelt out, not an asterisk that needs a legend. */
.req{ color:var(--amber); margin-left:.35em; }
.field input,.field select,.field textarea{
  font-family:var(--font-body); font-size:1rem;
  color:var(--ivory); background:var(--gate-2);
  border:1px solid var(--mount-line); padding:.8rem .9rem;
  width:100%; resize:vertical;
}
.field input::placeholder,.field textarea::placeholder{ color:#7C7768; }
.field input:focus,.field select:focus,.field textarea:focus{ border-color:var(--amber); }

/* The native control brings its own chrome and its own grey, so it gets
   the same caret and the same panel colour as everything else here. */
.field select{
  appearance:none; -webkit-appearance:none;
  padding-right:2.6rem; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M0 0h10L5 6z' fill='%234E5854'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right .95rem center;
  background-size:10px 6px;
}

.hp{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }

/* The widget is a fixed-size third-party iframe; it only needs room and
   somewhere to sit. Nothing to restyle — hCaptcha owns its own chrome. */
.captcha{ margin:.2rem 0 0; }
.captcha iframe{ max-width:100%; }

.form__foot{
  grid-column:1 / -1;
  display:flex; align-items:center; gap:1.2rem; flex-wrap:wrap;
}
.form__status{ margin:0; font-size:.9rem; color:var(--sage); }
.form__status[data-state="error"]{ color:#8C2F14; }
.form__status[data-state="ok"]{ color:#4A6B3F; }

.fallback{ margin:1.8rem 0 0; color:var(--muted); font-size:.94rem; }

/* ---------- footer ----------------------------------------- */

.footer{
  max-width:var(--maxw); margin:0 auto;
  padding:clamp(2.5rem,7vh,4rem) var(--pad) clamp(3rem,8vh,5rem);
  border-top:1px solid var(--line);
  display:grid; gap:1rem;
}
/* The mark can run larger down here than it does in the topbar —
   nothing is competing with it for the width. */
.footer__logo{
  display:block; width:auto; justify-self:start;
  height:clamp(24px,4.2vw,36px);
  margin-bottom:.3rem;
}
.footer__meta{ margin:0; color:var(--sage); font-size:.94rem; }
.footer__copy{ margin:0; font-size:.58rem; color:var(--muted); }

.social{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; gap:1rem;
}
/* Generous hit area on touch without pushing the icons apart visually. */
.social a{
  display:inline-flex; padding:.35rem;
  color:var(--sage); text-decoration:none;
  transition:color .18s ease;
}
.social a:hover{ color:var(--amber); }
.social__i{ display:block; width:22px; height:22px; }

/* ---------- films reel (horizontal, one at a time) --------- */
/* Native scroll-snap does the work: touch, trackpad and the
   arrow buttons all drive the same scroll position. */

.section--reel{ padding-right:0; padding-left:0; }
.section--reel .section__head{ padding:0 var(--pad); }

.reel{ position:relative; }

.reel__viewport{
  overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
}
.reel__viewport::-webkit-scrollbar{ display:none; }
.reel__viewport:focus-visible{ outline:2px solid var(--amber); outline-offset:-2px; }

.reel__track{
  list-style:none; margin:0; padding:0;
  display:flex;
}
.slide{
  flex:0 0 100%;
  scroll-snap-align:center;
  padding:0 var(--pad);
  display:flex; align-items:center; justify-content:center;
}
.slide .film{ width:100%; max-width:1000px; }

.film__cap{
  display:flex; align-items:baseline; gap:.9rem;
  margin-top:1rem;
}
.film__cap .film__idx{
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.16em;
  color:var(--amber);
}
.film__cap .film__name{
  font-family:var(--font-display); font-weight:800;
  text-transform:uppercase; letter-spacing:-.02em;
  font-size:clamp(1.1rem,2.4vw,1.6rem);
}

/* controls */
.reel__bar{
  display:flex; align-items:center; gap:1.1rem;
  padding:1.6rem var(--pad) 0;
}
.reel__btn{
  width:46px; height:46px; flex:0 0 auto;
  background:transparent; color:var(--ivory);
  border:1px solid var(--line);
  font-size:1.1rem; line-height:1; cursor:pointer;
  transition:border-color .18s ease, color .18s ease;
}
.reel__btn:hover:not(:disabled){ border-color:var(--amber); color:var(--amber); }
.reel__btn:disabled{ opacity:.35; cursor:default; }

.reel__count{
  margin:0; font-family:var(--font-mono); font-size:.78rem;
  letter-spacing:.16em; color:var(--ivory);
  font-variant-numeric:tabular-nums;
}
.reel__of{ color:var(--muted); margin-left:.4em; }

.reel__hint{
  margin:.9rem 0 0; padding:0 var(--pad);
  font-family:var(--font-mono); font-size:.62rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
}

@media (prefers-reduced-motion:reduce){
  .reel__viewport{ scroll-behavior:auto; }
}

/* play / pause toggle */
.reel__btn--play{ margin-left:auto; }
.reel__ico{
  display:block; width:12px; height:14px; margin:0 auto;
  border-left:4px solid currentColor; border-right:4px solid currentColor;
}
.reel.is-paused .reel__ico{
  width:0; height:0;
  border-left:11px solid currentColor; border-right:0;
  border-top:7px solid transparent; border-bottom:7px solid transparent;
  transform:translateX(2px);
}