/* ==========================================================================
   RIVA DEMIATI — site.css
   Editorial system: warm limestone paper, Bodoni display, portrait plates.
   ========================================================================== */

/* --- 1. Tokens ----------------------------------------------------------- */

:root {
  /* Palette: white, black, and nothing else. All colour comes from the
     photographs, which are never filtered. */
  --paper:    #FFFFFF;
  --paper-2:  #FFFFFF;
  --ink:      #000000;
  --stone:    #555555;  /* neutral grey for secondary text, no colour cast */
  --rule:     #DDDDDD;
  --lagoon:   #000000;  /* focus ring */

  /* Formerly the black bands. Now white like everything else, separated by
     hairlines instead of by colour. Flip these three back to #000 / #FFF /
     #B0B0B0 to restore the black sections. */
  --noir:         #FFFFFF;
  --on-noir:      #000000;
  --on-noir-soft: #555555;

  /* Type */
  --display: "Bodoni Moda", "Didot", "Times New Roman", serif;
  --body:    "Newsreader", Georgia, "Times New Roman", serif;
  --util:    "Jost", "Helvetica Neue", Arial, sans-serif;

  --fs-hero:      clamp(2.9rem, 8.2vw, 7.5rem);
  --fs-display-l: clamp(2.1rem, 5.2vw, 4rem);
  --fs-display-m: clamp(1.5rem, 2.9vw, 2.25rem);
  --fs-statement: clamp(1.45rem, 3.3vw, 2.8rem);
  --fs-body:      clamp(1rem, 0.97rem + 0.18vw, 1.1rem);
  --fs-small:     0.9375rem;
  --fs-eyebrow:   0.6875rem;

  /* Space */
  --gutter:  clamp(1.25rem, 5vw, 4rem);
  --section: clamp(4.5rem, 9vw, 8.5rem);
  --wrap:    1320px;
  --head-h:  clamp(4.5rem, 6vw, 6rem);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* --- 2. Reset ------------------------------------------------------------ */

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.72;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: 0;
}

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

a { color: inherit; }

ul { margin: 0; padding: 0; list-style: none; }

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

:focus-visible {
  outline: 2px solid var(--lagoon);
  outline-offset: 3px;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  padding: 0.85rem 1.25rem;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--util);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.skip:focus { left: 0; }

/* --- 3. Layout primitives ------------------------------------------------ */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.wrap--narrow { max-width: 780px; }
.wrap--mid    { max-width: 1040px; }

.section { padding-block: var(--section); }
.section--tight { padding-block: clamp(3rem, 6vw, 5.5rem); }
.section--flush-top { padding-top: 0; }

/* For pulling two sections closer than the standard rhythm, so a run of
   pictures does not leave a hole before the text that follows it. */
.section--snug-bottom { padding-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.section--snug-top    { padding-top: clamp(2.75rem, 5vw, 4.25rem); }

.section--dark {
  background: var(--noir);
  color: var(--on-noir);
  border-top: 1px solid var(--rule);
}
.section--dark .eyebrow { color: var(--on-noir-soft); }
.section--dark .lede { color: var(--on-noir-soft); }
.section--paper2 { background: var(--paper-2); }

.rule {
  height: 1px;
  background: var(--rule);
  border: 0;
  margin: 0;
}

/* --- 4. Type roles ------------------------------------------------------- */

.eyebrow {
  margin: 0 0 1.6rem;
  font-family: var(--util);
  font-size: var(--fs-eyebrow);
  font-weight: 400;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--stone);
}

.display-hero {
  font-family: var(--display);
  font-size: var(--fs-hero);
  font-weight: 500;
  line-height: 0.94;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  text-wrap: balance;
}

.display-l {
  font-family: var(--display);
  font-size: var(--fs-display-l);
  font-weight: 500;
  line-height: 1.02;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  text-wrap: balance;
}

.display-m {
  font-family: var(--display);
  font-size: var(--fs-display-m);
  font-weight: 500;
  line-height: 1.14;
}

.statement {
  font-family: var(--display);
  font-size: var(--fs-statement);
  font-weight: 400;
  line-height: 1.26;
  letter-spacing: -0.005em;
}
.statement em { font-style: italic; }

.lede {
  font-size: clamp(1.05rem, 1rem + 0.35vw, 1.3rem);
  line-height: 1.62;
  color: var(--stone);
}

.small { font-size: var(--fs-small); }

.muted { color: var(--stone); }

/* Utilities — deliberately few, so the layout classes stay in charge. */
.center        { text-align: center; }
.flush         { margin: 0; }
.measure       { max-width: 56ch; }
.measure-short { max-width: 24ch; }
.mb-m          { margin-bottom: 1.25rem; }
.mb-l          { margin-bottom: 1.5rem; }
.mb-xl         { margin-bottom: 2rem; }
.mt-l          { margin-top: 1.5rem; }

.notes { display: grid; gap: 0.7rem; }
.notes li { font-size: var(--fs-small); line-height: 1.55; }

/* --- 5. Signature: the place-mark ---------------------------------------
   Every photograph is filed the way she thinks about places — by name, then
   by the detail that fixed it in memory. This is the one recurring device.
   ------------------------------------------------------------------------ */

.mark {
  display: block;
  margin-top: 0.95rem;
  font-family: var(--util);
}

.mark__place {
  display: block;
  font-size: var(--fs-eyebrow);
  font-weight: 400;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink);
}

.mark__note {
  display: block;
  margin-top: 0.35rem;
  max-width: 34ch;
  font-family: var(--body);
  font-style: italic;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--stone);
}

.mark--over {
  position: absolute;
  left: var(--gutter);
  bottom: clamp(1.25rem, 3vw, 2.25rem);
  z-index: 2;
  margin-top: 0;
}
.mark--over .mark__place { color: #fff; }
.mark--over .mark__note  { color: rgba(255, 255, 255, 0.82); }

.section--dark .mark__place { color: var(--on-noir); }
.section--dark .mark__note  { color: var(--on-noir-soft); }

/* --- 6. Links ------------------------------------------------------------ */

.link {
  display: inline-block;
  font-family: var(--util);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--ink);
  transition: opacity 0.3s var(--ease);
}
.link:hover { opacity: 0.55; }

.section--dark .link { border-bottom-color: var(--on-noir); }

.link-list { display: flex; flex-wrap: wrap; gap: 1.5rem 2.5rem; }

.inline-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
  transition: border-color 0.3s var(--ease);
}
.inline-link:hover { border-bottom-color: var(--ink); }

.section--dark .inline-link { border-bottom-color: var(--rule); }
.section--dark .inline-link:hover { border-bottom-color: var(--on-noir); }

/* --- 7. Header ----------------------------------------------------------- */

.head {
  position: absolute;
  inset: 0 0 auto;
  z-index: 50;
  padding-block: clamp(1.4rem, 2.4vw, 2.1rem);
}

.head--solid {
  position: relative;
  border-bottom: 1px solid var(--rule);
}

.head__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.head__name {
  display: inline-flex;
  align-items: center;
  min-height: 44px;               /* comfortable tap target on phones */
  margin-block: -11px;            /* without changing the masthead rhythm */
  font-family: var(--display);
  font-size: clamp(0.95rem, 0.9rem + 0.25vw, 1.15rem);
  /* Bodoni is a high-contrast Didone: at small sizes the thin strokes drop
     out, so the masthead and nav run heavier than the body copy. */
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}

.head__nav { display: none; }

@media (min-width: 900px) {
  .head__nav {
    display: flex;
    align-items: center;
    gap: clamp(1.75rem, 2.8vw, 2.9rem);
  }
}

.head__link {
  font-family: var(--display);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  padding-block: 0.35rem;
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--ease);
}
.head__link:hover { border-bottom-color: currentColor; }
.head__link[aria-current="page"] { border-bottom-color: currentColor; }

/* Header sits over the full-bleed hero photograph at every width. The rule
   below it matches the one on the interior pages, in translucent white so it
   reads against the photograph without drawing a hard line across it. */
.head--over {
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}
.head--over .head__name { color: #fff; }

/* Burger */
.burger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  gap: 5px;
  min-width: 44px;
  min-height: 44px;
  padding: 0.5rem 0;
  margin-block: -11px;
}
@media (min-width: 900px) { .burger { display: none; } }

.burger span {
  display: block;
  width: 24px;
  height: 1px;
  background: currentColor;
}

/* Mobile menu */
.menu {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--gutter);
  background: var(--paper);
  transform: translateY(-100%);
  visibility: hidden;
  /* visibility flips instantly on open, and only after the slide on close,
     so the panel is never focusable while it is off-screen */
  transition: transform 0.5s var(--ease), visibility 0s 0.5s;
}
.menu[data-open="true"] {
  transform: translateY(0);
  visibility: visible;
  transition: transform 0.5s var(--ease), visibility 0s 0s;
}

.menu__close {
  position: absolute;
  top: clamp(1.4rem, 2.4vw, 2.1rem);
  right: var(--gutter);
  font-family: var(--util);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.menu__list { display: grid; gap: 0.35rem; }

.menu__link {
  font-family: var(--display);
  font-size: clamp(2rem, 9vw, 3.25rem);
  line-height: 1.16;
  text-transform: uppercase;
  text-decoration: none;
}

.menu__foot {
  margin-top: 2.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  font-family: var(--util);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.menu__foot a { text-decoration: none; }

body[data-locked="true"] { overflow: hidden; }

/* --- 8. Hero ------------------------------------------------------------
   Every source photograph is 3:4 portrait, so the hero presents a portrait
   plate rather than cropping one into a letterbox. Mobile goes full-bleed
   (a phone screen *is* 3:4-ish); desktop bleeds the plate off the right edge.
   ------------------------------------------------------------------------ */

.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 100svh;
  padding-block: var(--head-h) clamp(2rem, 5vw, 3rem);
  color: #fff;
  isolation: isolate;
  text-align: center;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
}

/* The figure occupies 53% to 92% of this portrait photograph. How much of it
   survives a full-bleed crop depends entirely on the viewport's aspect ratio,
   so the focal point is stepped by aspect rather than by width. Each value is
   the one that puts the top of the visible window at her head.
   Phones and tablets are taller than 3:4, so nothing is cropped vertically at
   all there and she is shown head to foot. She stays whole up to about 1.9;
   past that the frame is simply too wide for a portrait photograph. */
.hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 100%;
}

/* These values sit her feet just above the bottom edge and give every
   remaining pixel of the crop to headroom, so she is never pressed against
   the masthead. */
@media (min-aspect-ratio: 3/2) {        /* 1.50 */
  .hero__img { object-position: 50% 86%; }
}
@media (min-aspect-ratio: 17/10) {      /* 1.70 */
  .hero__img { object-position: 50% 88%; }
}
@media (min-aspect-ratio: 19/10) {      /* 1.90, where the crop runs out of
                                           room and nothing can be spared */
  .hero__img { object-position: 50% 87%; }
}

/* Full-bleed photograph behind centred white type. This is a bright picture
   (pale sky, lit water), so the fade never drops below 0.55: measured, that is
   the point where every piece of text clears 4.5:1 against the worst pixel it
   sits on. Slightly deeper top and bottom for a little depth. */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to bottom,
    rgba(0, 0, 0, 0.72) 0%,
    rgba(0, 0, 0, 0.64) 38%,
    rgba(0, 0, 0, 0.64) 72%,
    rgba(0, 0, 0, 0.70) 100%);
}

.hero__inner { width: 100%; }

.hero .eyebrow { color: rgba(255, 255, 255, 0.86); }

.hero__title {
  margin-bottom: 1.5rem;
  margin-inline: auto;
  max-width: 15ch;
  font-size: clamp(1.95rem, 8.5vw, 3.4rem);
}

.hero__col {
  max-width: 1000px;
  margin-inline: auto;
}

.hero__lede {
  max-width: 46ch;
  margin-inline: auto;
  color: rgba(255, 255, 255, 0.92);
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.2rem);
}

.hero__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  margin-top: clamp(2rem, 5vw, 3.25rem);
}

.hero .link { border-bottom-color: rgba(255, 255, 255, 0.85); color: #fff; }

/* The photograph runs full bleed at every width; only the type scale grows.
   The hero stays exactly one screen tall: anything taller pushes her feet
   below the fold, which reads as a crop just as badly. */
@media (min-width: 1000px) {
  .hero__title {
    font-size: clamp(3rem, 4.6vw, 4.2rem);
    max-width: 18ch;
  }
}

/* Interior page heads — deliberately a step below the home hero. */
.pagehead { padding-block: clamp(3.5rem, 8vw, 7rem) clamp(2.5rem, 5vw, 4rem); }
.pagehead__title {
  margin-bottom: 1.5rem;
  font-size: clamp(2.6rem, 6.4vw, 5.5rem);
}
.pagehead__lede { max-width: 52ch; }

/* Title, standfirst and opening text share a block with the photograph, so
   the picture starts level with the eyebrow instead of sitting below it. */
.pagehead--split .pagehead__title {
  font-size: clamp(2.4rem, 4.6vw, 4rem);
  margin-bottom: 1.25rem;
}
.pagehead--split .lede { max-width: 46ch; }

/* --- 9. Figures & plates ------------------------------------------------- */

.plate { margin: 0; }

.plate__img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  background: var(--paper-2);
}

.plate__img--wide {
  aspect-ratio: 4 / 5;
}

/* Shop catalogue mockups are square, so they get their own frame */
.plate__img--square {
  aspect-ratio: 1 / 1;
}

.plate__img--band {
  aspect-ratio: 16 / 9;
  object-position: 50% 45%;
}

@media (max-width: 700px) {
  .plate__img--band { aspect-ratio: 4 / 5; }
}

/* Offset pair — the asymmetry the references live on */
.pair {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
}

@media (min-width: 760px) {
  .pair {
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 5vw, 5rem);
    align-items: start;
  }
  .pair__b { margin-top: clamp(3rem, 9vw, 8rem); }
  .pair--reverse .pair__a { margin-top: clamp(3rem, 9vw, 8rem); }
  .pair--reverse .pair__b { margin-top: 0; }
}

/* Full-bleed band */
.band { position: relative; }
.band__img {
  width: 100%;
  height: clamp(320px, 62vh, 620px);
  object-fit: cover;
  object-position: 50% 45%;
}
.band__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(12, 10, 9, 0.55) 0%, rgba(12, 10, 9, 0) 60%);
}

/* --- 10. Editorial split (text + portrait) ------------------------------- */

.split { display: grid; gap: clamp(2.25rem, 5vw, 4rem); }

@media (min-width: 860px) {
  .split {
    grid-template-columns: 0.85fr 1fr;
    gap: clamp(2.5rem, 6vw, 5.5rem);
    align-items: center;
  }
  .split--text-right { grid-template-columns: 1fr 0.85fr; }
  .split--text-right .split__text { order: 2; }
  .split--text-right .split__media { order: 1; }
  .split--top { align-items: start; }
}

.split__text > .eyebrow { margin-bottom: 1.25rem; }

/* --- 11. Index of places (home) ------------------------------------------ */

.index { border-top: 1px solid var(--rule); }

.index__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: clamp(0.9rem, 1.8vw, 1.35rem);
  border-bottom: 1px solid var(--rule);
}

.index__place {
  font-family: var(--display);
  font-size: clamp(1.15rem, 2.6vw, 1.9rem);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.index__note {
  font-family: var(--util);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--stone);
  text-align: right;
}

/* --- 12. Editorial entries (tours, services, shop) ----------------------- */

.entries { border-top: 1px solid var(--rule); }

.entry {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  padding-block: clamp(2.25rem, 5vw, 3.75rem);
  border-bottom: 1px solid var(--rule);
}

@media (min-width: 860px) {
  .entry {
    grid-template-columns: 0.42fr 1fr 0.5fr;
    gap: clamp(2rem, 4vw, 3.5rem);
    align-items: start;
  }
  .entry--media { grid-template-columns: 0.42fr 1fr 0.5fr; }
}

.entry__index {
  font-family: var(--util);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--stone);
  padding-top: 0.5rem;
}

.entry__title { margin-bottom: 1rem; }

.entry__body { max-width: 58ch; }

.entry__meta {
  font-family: var(--util);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--stone);
  line-height: 2;
  padding-top: 0.5rem;
}

.entry__media { align-self: start; }

/* A service that isn't open for booking yet, held back from the active ones */
.entry--soon .entry__title,
.entry--soon .entry__body,
.entry--soon .entry__index { color: var(--stone); }

/* --- 13. Grid of plates -------------------------------------------------- */

.grid {
  display: grid;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 860px) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
}

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

/* --- 13b. Mosaic (About) -------------------------------------------------
   Seven pictures in three columns: tall, short in the left column, three in
   the middle, short, tall on the right, so the two outer columns mirror each
   other. Collapses to a plain two-column grid on phones.
   ------------------------------------------------------------------------ */

.mosaic {
  display: grid;
  gap: clamp(0.5rem, 1.4vw, 1rem);
  grid-template-columns: repeat(2, 1fr);
}

.mosaic figure { margin: 0; overflow: hidden; min-height: 0; }

.mosaic img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--paper-2);
}

@media (min-width: 760px) {
  .mosaic {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(12, 1fr);
    aspect-ratio: 16 / 10;
  }
  .mosaic img { aspect-ratio: auto; }

  .m1 { grid-column: 1; grid-row: 1 / 8;  }
  .m2 { grid-column: 1; grid-row: 8 / 13; }
  .m3 { grid-column: 2; grid-row: 1 / 4;  }
  .m4 { grid-column: 2; grid-row: 4 / 9;  }
  .m5 { grid-column: 2; grid-row: 9 / 13; }
  .m6 { grid-column: 3; grid-row: 1 / 6;  }
  .m7 { grid-column: 3; grid-row: 6 / 13; }
}

/* --- 13c. Reels ----------------------------------------------------------
   Covers that link out to Instagram; the video plays there, not here.
   ------------------------------------------------------------------------ */

.reels {
  display: grid;
  gap: clamp(0.75rem, 2vw, 1.25rem);
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 760px) {
  .reels { grid-template-columns: repeat(3, 1fr); }
}

.reel {
  position: relative;
  display: block;
  overflow: hidden;
  text-decoration: none;
  background: var(--paper-2);
}

.reel img {
  width: 100%;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  transition: transform 0.7s var(--ease);
}
.reel:hover img { transform: scale(1.04); }

.reel__badge {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 2.5rem 0.85rem 0.85rem;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.62), rgba(0, 0, 0, 0));
  color: #fff;
  font-family: var(--util);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.reel__badge svg { flex: none; }

/* --- 13d. Selected work --------------------------------------------------
   A vertical film at a comfortable reading width, a grid of portrait plates,
   and the credit lines that sit under each. The credits are set in the label
   face so they read as captions, not as headings.
   ------------------------------------------------------------------------ */

.works {
  display: grid;
  gap: clamp(2.5rem, 6vw, 4rem);
}

.works__set { margin: 0; }

/* The film keeps a comfortable column on desktop and tablet, and runs the
   full width of the gutter on phones. */
.film {
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
}

.film__video {
  display: block;
  width: 100%;
  height: auto;   /* beats the video's own height attribute, so the ratio holds */
  aspect-ratio: 9 / 16;
  object-fit: cover;
  /* Near-black rather than paper, so the half second before the first frame
     arrives reads as the edge of the film and not as a hole in the page. */
  background: #0C0A09;
}

@media (max-width: 560px) {
  .film { max-width: none; }
}

/* Every browser blocks sound on an autoplaying video, so the film starts
   silent and this is the one control that turns it on. Set in the label face,
   in a 44px row so it stays comfortable to tap on a phone. */
.film__sound {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 44px;
  margin-top: 0.4rem;
  font-family: var(--util);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
}

.film__sound span {
  padding-bottom: 0.3rem;
  border-bottom: 1px solid var(--ink);
}

.film__sound + .credit { margin-top: 0.35rem; }

.credit {
  margin: 1rem 0 0;
  font-family: var(--util);
  font-size: var(--fs-eyebrow);
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--stone);
}

.film .credit { text-align: center; }

/* --- 14. Quote ----------------------------------------------------------- */

.quote {
  margin: 0;
  text-align: center;
}

.quote__text {
  font-family: var(--display);
  font-size: clamp(1.55rem, 3.6vw, 3.1rem);
  font-style: italic;
  font-weight: 400;
  line-height: 1.24;
  letter-spacing: -0.01em;
  margin: 0;
}

.quote__cite {
  display: block;
  margin-top: 1.75rem;
  font-family: var(--util);
  font-size: var(--fs-eyebrow);
  font-style: normal;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--stone);
}

/* --- 15. Contact list ---------------------------------------------------- */

.channels { border-top: 1px solid var(--rule); }

.channel {
  display: grid;
  gap: 0.35rem 2rem;
  padding-block: clamp(1.25rem, 2.6vw, 1.85rem);
  border-bottom: 1px solid var(--rule);
}

@media (min-width: 700px) {
  .channel {
    grid-template-columns: 0.34fr 1fr;
    align-items: baseline;
  }
}

.channel__label {
  font-family: var(--util);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--stone);
}

.channel__value {
  font-family: var(--display);
  font-size: clamp(1.15rem, 2.2vw, 1.6rem);
  text-decoration: none;
  overflow-wrap: anywhere;
}
.channel__value:hover { opacity: 0.6; }

.channel__hint {
  display: block;
  margin-top: 0.3rem;
  font-size: var(--fs-small);
  color: var(--stone);
}

/* --- 16. Note / status --------------------------------------------------- */

.note {
  font-family: var(--util);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--stone);
}

.currently {
  display: grid;
  gap: clamp(1.25rem, 3vw, 2rem);
}

@media (min-width: 760px) {
  .currently { grid-template-columns: 0.28fr 1fr; align-items: start; }
}

/* --- 17. Footer ---------------------------------------------------------- */

.foot {
  background: var(--noir);
  color: var(--on-noir);
  border-top: 1px solid var(--rule);
  padding-block: clamp(3.5rem, 7vw, 5.5rem) clamp(2rem, 4vw, 3rem);
}

.foot__top {
  display: grid;
  gap: clamp(2.25rem, 5vw, 3.5rem);
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}

@media (min-width: 820px) {
  .foot__top { grid-template-columns: 1.2fr 0.8fr 0.8fr; }
}

.foot__word {
  font-family: var(--display);
  font-size: clamp(1.6rem, 3.4vw, 2.5rem);
  line-height: 1.16;
  max-width: 22ch;
}

.foot__label {
  font-family: var(--util);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--on-noir-soft);
  margin-bottom: 1.1rem;
}

.foot__list { display: grid; gap: 0.7rem; }

.foot__list a {
  text-decoration: none;
  font-size: var(--fs-small);
  color: var(--on-noir);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--ease);
  justify-self: start;
}
.foot__list a:hover { border-bottom-color: var(--on-noir); }

.foot__base {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2rem;
  justify-content: space-between;
  padding-top: clamp(1.5rem, 3vw, 2rem);
  border-top: 1px solid var(--rule);
  font-family: var(--util);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--on-noir-soft);
}

/* --- 18. Motion ---------------------------------------------------------- */

/* Scoped to .js (set by an inline script in <head>) so that if scripting is
   blocked or fails, every section is simply visible rather than invisible. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
  .js [data-reveal] { opacity: 1; transform: none; }
}