/* SILK ON WOUNDS — M. 4:9—01X */

@font-face {
  font-family: "Goudy Old Style Web";
  /* Always the site's own copy: its line metrics are adjusted so the capitals
     sit exactly in the middle of the line, identically on every system. */
  src: url("../fonts/goudy-old-style.woff?v=2") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Arial Narrow Web";
  src: local("Arial Narrow"), local("ArialNarrow"),   /* use the installed copy if there is one */
       url("../fonts/arial-narrow.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #000;
  --ink: #e6edd3;
  --header: #a8a8a8;     /* logo + INFO (logo color itself is set in images/logo.svg) */
  --footer-opacity: 0.25; /* Real American Cinema wordmark (its gray is set in images/rac-logo.svg) */
  --hover: #ffffff;     /* hover, active and focus states */
  --fade: 0.4s ease;     /* how quickly interactive elements fade to --hover */
  /* image widths — each image picks one with `size` in js/content.js */
  --small:  360px;
  --medium: 560px;
  --large:  800px;
  --wide:   1200px;
  --gap: 350px;          /* space between images */
  --edge: 25px;
  --footer-inset: 25px;
  --nav-gap: 14px;       /* space between INFO and the grid icon */   /* footer wordmark's distance from the edges */
  --logo-w: min(200px, (100vw - var(--edge) - 120px) / 2);   /* header logo width */          /* nav inset from viewport edge */
  --font: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-caption: var(--font-nav);   /* Goudy Old Style */
  --font-info: var(--font-nav);   /* testing Goudy; to go back: "Arial Narrow Web", "Arial Narrow", "Helvetica Neue", Arial, sans-serif */
  --goudy-spacing: 0px;            /* letter-spacing wherever Goudy is used */
  --stretch: 1.5;                  /* horizontal stretch of all Goudy text */
  --index-thumb: 180px;            /* index list: thumbnail width */
  --index-gap: 44px;               /* index list: thumbnail → caption */
  --font-nav: "Goudy Old Style Web", "Goudy Old Style", Georgia, serif;
}

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

html { background: var(--bg); }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

body.is-locked { overflow: hidden; }

a { color: inherit; text-decoration: none; }

:focus-visible { outline: 1px solid var(--hover); outline-offset: 4px; }

/* ── Header ─────────────────────────────────────────── */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 10;
  display: flex;
  justify-content: flex-start;
  padding: 25px 120px 40px var(--edge);   /* left edge lines up with the footer wordmark */
  pointer-events: none;
}

.site-header > * { pointer-events: auto; }

.logo { display: block; width: var(--logo-w); flex: none; }
.logo img { display: block; width: 100%; height: auto; }

.nav {
  position: absolute;
  /* vertically centred on the header logo (logo art is 1920 × 314) */
  top: calc(var(--edge) + var(--logo-w) * 314 / 1920 / 2);
  transform: translateY(-50%);   /* Goudy's caps sit centred in the line box; no nudge needed */
  padding: 0;
  border: 0;
  background: none;
  color: var(--header);
  font: 14px/1 var(--font-nav);
  letter-spacing: var(--goudy-spacing);
  margin-right: calc(-1 * var(--goudy-spacing));   /* cancel the space after the last letter so it stays flush right */
  text-transform: uppercase;
  cursor: pointer;
  transition: color var(--fade), opacity 0.35s;
}

.nav-right { right: var(--edge); }

.nav:hover,
.nav[aria-expanded="true"] { color: var(--hover); }

/* INFO ⇄ CLOSE: the two words stacked in one spot, right-aligned, cross-fading */
.nav-right:not(.nav-grid) {
  display: grid;
  justify-items: end;
}
.nav-label { grid-area: 1 / 1; transition: opacity 0.2s ease; }
.nav-label-open { opacity: 0; }
.nav[aria-expanded="true"] .nav-label-closed { opacity: 0; }
.nav[aria-expanded="true"] .nav-label-open { opacity: 1; }

/* INFO and the grid icon: one row in the top-right corner, centred on the logo.
   The Goudy file's line metrics put the capitals exactly in the middle of the
   line, so centring the 10px icon in the same row lines it up with the letters. */
.nav-group {
  position: absolute;
  right: var(--edge);
  /* the row's top lands on a whole pixel, so nothing in it gets rounded unevenly */
  top: calc(var(--edge) + var(--logo-w) * 314 / 1920 / 2 - 0.5em);
  top: round(calc(var(--edge) + var(--logo-w) * 314 / 1920 / 2 - 0.5em), 1px);
  display: flex;
  align-items: center;
  gap: var(--nav-gap);
  font: 14px/1 var(--font-nav);
}
.nav-group .nav { position: static; transform: none; }
.nav-group .nav-right:not(.nav-grid) {
  transform: scaleX(var(--stretch));   /* stretched from the right, so the gap to the icon stays put */
  transform-origin: right center;
}
.nav-grid { margin-right: 0; height: 1em; place-items: center; }   /* same 14px line as INFO */
/* Grid icon ⇄ X: both drawn in the same spot, cross-fading */
.nav-grid { display: grid; }
.nav-grid svg {
  grid-area: 1 / 1;
  display: block;
  width: 10px;             /* ≈ the visible height of INFO's capitals; whole pixels stay crisp */
  height: 10px;
  transform: translateY(0.35px);   /* the letters' visible centre sits 0.35px below the line's centre */
  transition: opacity var(--fade);
}
.nav-grid .icon-grid { fill: currentColor; }
.nav-grid .icon-close { fill: none; stroke: currentColor; stroke-width: 1.2; opacity: 0; }
.nav-grid[aria-expanded="true"] .icon-grid { opacity: 0; }
.nav-grid[aria-expanded="true"] .icon-close { opacity: 1; }

/* While the index is open, INFO fades out of the way */
.nav-right:not(.nav-grid) { transition: color var(--fade), opacity var(--fade), visibility var(--fade); }
.site-header:has(.nav-grid[aria-expanded="true"]) .nav-right:not(.nav-grid) {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* ── Footer wordmark ────────────────────────────────── */

.site-footer {
  position: fixed;
  left: var(--edge);
  right: var(--edge);
  bottom: calc(var(--edge) + env(safe-area-inset-bottom, 0px));
  z-index: 10;              /* above images and the INFO overlay, like the header */
  opacity: var(--footer-opacity);
  pointer-events: none;     /* never blocks scrolling or clicks */
}

.site-footer img { display: block; width: 100%; height: auto; }

/* ── Image stream ───────────────────────────────────── */

#stream {
  margin: 0 auto;
  padding: 120px 0 var(--gap);   /* space above the first image */
}

.plate {
  width: min(var(--large), 100% - 40px);
  margin: 0 auto var(--gap);
}

.plate[data-size="small"]  { width: min(var(--small), 60%); }
.plate[data-size="medium"] { width: min(var(--medium), 80%); }
.plate[data-size="wide"]   { width: min(var(--wide), 100% - 40px); }
.plate[data-size="full"]   { width: 100%; }   /* edge to edge */
.plate:last-child { margin-bottom: 0; }

/* End of the sequence: a full screen of space after the last item, so it can
   be scrolled completely past before the first item comes round again. */
.plate.is-end { margin-bottom: calc(max(var(--gap), 100vh) + var(--seam-pad, 0px)); }

.plate video {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;      /* fill the locked frame exactly */
  pointer-events: none;   /* no tap-to-pause, no context menu controls */
}

/* Hide the play button some browsers overlay before playback starts */
.plate video::-webkit-media-controls,
.plate video::-webkit-media-controls-start-playback-button,
.plate video::-webkit-media-controls-overlay-play-button {
  display: none !important;
  -webkit-appearance: none;
}

.plate img {
  display: block;
  width: 100%;
  height: auto;
}

/* Hidden until revealed (only when JS is running) */
.js .plate { opacity: 0; }

.js .plate.is-in {
  opacity: 1;
  animation: flicker 1.1s linear both;
}

@keyframes flicker {
  0%   { opacity: 0; }
  8%   { opacity: 0.3; }
  12%  { opacity: 0; }
  24%  { opacity: 0.5; }
  28%  { opacity: 0.05; }
  42%  { opacity: 0.7; }
  46%  { opacity: 0.15; }
  62%  { opacity: 0.9; }
  66%  { opacity: 0.4; }
  100% { opacity: 1; }
}

/* ── Info overlay ───────────────────────────────────── */

.info {
  position: fixed;
  inset: 0;
  z-index: 5;            /* below the header so INFO/CLOSE stays visible */
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 120px var(--edge);   /* left edge lines up with both logos */
  border: 0;
  background: rgba(0, 0, 0, 0.82);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: var(--header);
  overflow-y: auto;
  outline: none;
  opacity: 0;
  transition: opacity 0.6s ease;
}

.info[open] { display: flex; }
.info.is-visible { opacity: 1; }

/* Index overlay: a scrolling list of thumbnails with captions, on solid black */
.index {
  align-items: flex-start;
  background: #000;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  padding-bottom: calc(110px + env(safe-area-inset-bottom, 0px));   /* last row clears the footer wordmark */
}
.index-list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;                      /* images touch */
  width: 100%;
}
.index-item {
  display: flex;
  align-items: center;         /* caption centred on its thumbnail */
  gap: var(--index-gap);
  padding: 0;
  border: 0;
  background: none;
  color: var(--header);
  text-align: left;
  cursor: pointer;
}
.index-thumb {
  display: block;
  flex: none;
  width: var(--index-thumb);
}
.index-thumb img, .index-thumb video {
  display: block;
  width: 100%;
  height: auto;
}
.index-caption {
  display: block;
  min-width: 0;
  max-width: calc((100vw - 2 * var(--edge) - var(--index-thumb) - var(--index-gap)) / var(--stretch));
  transform: scaleX(var(--stretch));   /* stretched from the left, still 44px from the thumbnail */
  transform-origin: left center;
  font: 10px/1.3 var(--font-caption);
  letter-spacing: calc(var(--goudy-spacing) + 0.5px);
  text-transform: uppercase;
}


.info-text {
  margin: auto 0;               /* vertically centred, pinned left */
  /* Layout width is divided by the stretch, so the stretched text still
     spans 45% of the window (under half). */
  max-width: calc(45vw / var(--stretch));
  transform: scaleX(var(--stretch));
  transform-origin: left center;   /* stays lined up with the logos */
  font-family: var(--font-info);
  text-transform: uppercase;
  letter-spacing: var(--goudy-spacing);
  font-size: 28px;               /* 1.75 × 16px */
  line-height: 1.4;
  text-align: left;
}

.info-text p { margin: 0 0 1.4em; }
.info-text p:last-child { margin-bottom: 0; }
/* Hanging punctuation: the opening “ sits in the margin so the letters line up
   with the left edge. 0.364em = the width of “ in Goudy Old Style (0.404em)
   minus the font's built-in kerning between “ and A. */
.info-text .quote { text-indent: -0.364em; }

.info-text a { transition: color var(--fade); white-space: nowrap; text-decoration: none; }   /* keep the name on one line */
.info-text a:hover { color: var(--hover); }

/* ── Smaller screens ────────────────────────────────── */

@media (max-width: 1023px) {
  :root { --logo-w: min(200px, (100vw - var(--edge) - 45px) / 2); }
  .site-header { padding: 25px 45px 40px var(--edge); }

  #stream { padding-top: 100px; }

  .info { padding: 80px var(--edge); }
  .info-text { font-size: 22.75px; }   /* 1.75 × 13px */
}

/* Phones: every image the same width, lined up with the logos.
   Full-bleed images stay edge to edge. */
@media (max-width: 767px) {
  .info-text { max-width: calc((100vw - 2 * var(--edge)) / var(--stretch)); }
  .index { padding-top: 100px; padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)); }
  :root { --index-thumb: 110px; --index-gap: 20px; }
  .cap-title { display: block; }   /* phones: break after the title… */
  .cap-sep { display: none; }      /* …and drop the comma that joined them */

  .plate,
  .plate[data-size="small"],
  .plate[data-size="medium"],
  .plate[data-size="wide"] { width: calc(100% - 2 * var(--edge)); }

  /* Footer wordmark: nearly full width, 10px from the edges */
  :root { --footer-inset: 10px; }
  .site-footer {
    left: 10px;
    right: 10px;
    bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  }
}

/* ── Reduced motion ─────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .js .plate.is-in { animation: none; }
  .js .plate { transition: opacity 0.4s; }
  .info, .nav, .nav-label, .nav-grid svg, .info-text a, .index-thumb, .index-caption { transition: none; }
}

.noscript { margin: 0; text-align: center; font-size: 14px; }