/* christianblack.media — site layout.
   Built on the Christian Black Design System tokens. Rules that matter:
   serif only, warm dark neutrals, at most two accents per screen,
   air as the layout, hairlines instead of boxes, one fixed element (the rail). */

@import url("tokens.css");
@import url("base.css");

/* ---------- Page frame ---------- */

html { scroll-behavior: smooth; }
body { padding-right: var(--rail-width); }

.page {
  max-width: var(--max-content);
  margin: 0 auto;
  padding: var(--space-10) var(--gutter-page) var(--space-9);
  animation: cbFade var(--dur-slow) var(--ease-out) both;
}
@keyframes cbFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .page { animation: none; }
  * { transition-duration: 1ms !important; }
}

.label {
  font-family: var(--font-label);
  font-size: var(--text-label);
  letter-spacing: var(--tracking-label-wide);
  text-transform: uppercase;
  color: var(--text-muted);
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
}
.label .idx { color: var(--accent); }

.meta {
  font-family: var(--font-label);
  font-size: var(--text-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--stone-400);
  white-space: nowrap;
}

.page-head {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: var(--space-8);
  align-items: end;
  margin-bottom: var(--space-9);
}
.page-head h1 {
  font-size: var(--text-display-2);
  line-height: var(--leading-tight);
  margin-top: var(--space-5);
}
.page-head .lede {
  max-width: var(--measure-narrow);
  margin-top: var(--space-5);
  font-size: var(--text-body-lg);
  color: var(--text-secondary);
}
.page-head .aside { padding-bottom: var(--space-2); text-align: right; }

.section { margin-top: var(--space-10); }
.section > .label { margin-bottom: var(--space-6); }
.rule { border: 0; border-top: 1px solid var(--border-hairline); margin: var(--space-9) 0; }

/* ---------- Right rail ---------- */

.rail {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: var(--rail-width);
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  padding: var(--space-6) 0;
  border-left: 1px solid var(--border-hairline);
  background: rgba(22, 21, 15, 0.72);
  backdrop-filter: var(--blur-veil);
  -webkit-backdrop-filter: var(--blur-veil);
  z-index: 20;
}
.rail .mark {
  font-family: var(--font-display);
  font-size: var(--text-subhead);
  color: var(--text-primary);
  letter-spacing: 0.04em;
  border: 0;
  display: block; line-height: 0;
}
.rail .mark__img {
  width: 46px; height: auto; opacity: 0.92;
  transition: opacity var(--dur-fast) var(--ease-soft);
}
.rail .mark:hover .mark__img { opacity: 1; }
.rail ul { list-style: none; margin: auto 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-7); align-items: center; }
.rail li { writing-mode: vertical-rl; transform: rotate(180deg); }
.rail a {
  display: inline-flex; align-items: center; gap: var(--space-3);
  font-family: var(--font-label); font-size: var(--text-caption);
  letter-spacing: var(--tracking-label-wide); text-transform: uppercase;
  color: var(--text-muted); border: 0;
}
.rail a:hover { color: var(--stone-200); }
.rail a .rail__tick { width: 1px; height: 0; background: var(--accent); transition: height var(--dur-base) var(--ease-out); }
.rail a[aria-current="page"] { color: var(--text-primary); }
.rail a[aria-current="page"] .rail__tick { height: 26px; }

/* ---------- Media frames ---------- */

.frame { margin: 0; }
.frame .box {
  position: relative;
  aspect-ratio: var(--aspect-frame);
  overflow: hidden;
  background: var(--media-placeholder);
  border-radius: var(--radius-xs);
  box-shadow: var(--shadow-inset-hairline);
}
.frame .box img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
.frame .box:hover img { transform: scale(var(--media-hover-scale)); }
.frame[data-ratio="portrait"] .box { aspect-ratio: var(--aspect-portrait); }
.frame[data-ratio="frame"] .box { aspect-ratio: var(--aspect-frame); }
.frame[data-ratio="landscape"] .box { aspect-ratio: var(--aspect-landscape); }
.frame[data-ratio="cinema"] .box { aspect-ratio: var(--aspect-cinema); }
.frame[data-ratio="video"] .box { aspect-ratio: var(--aspect-video); }
.frame[data-ratio="free"] .box { aspect-ratio: auto; }
.frame[data-ratio="free"] .box img { height: auto; }
.frame .empty {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--font-label); font-size: var(--text-label);
  letter-spacing: var(--tracking-label-wide); text-transform: uppercase; color: var(--stone-400);
  text-align: center; padding: var(--space-5);
}
.frame figcaption { display: flex; justify-content: space-between; gap: var(--space-4); margin-top: var(--space-3); }
.frame figcaption .cap { font-size: var(--text-caption); color: var(--text-secondary); font-style: italic; }
.frame.clickable .box { cursor: pointer; }

.hero { position: relative; margin-bottom: var(--space-9); }
.hero .box { aspect-ratio: var(--aspect-cinema); }
.hero .scrim {
  position: absolute; inset: 0; display: flex; align-items: flex-end;
  padding: var(--space-7); background: var(--overlay-protect); pointer-events: none;
}
.hero .scrim h2 { font-size: var(--text-heading); color: var(--paper); }

/* ---------- Tick list: fixed header + photo bands ---------- */

/* Colour each band dissolves into as it leaves the screen. */
:root { --band-fade: #FFFFFF; }

/* position + z-index needed because .page's fade-in animation leaves a
   transform on this element, which makes it a stacking context. Without
   this it would paint underneath .fixedbg regardless of child z-indexes. */
.page--bands { max-width: none; padding: 0; position: relative; z-index: 1; }

/* Backdrop pinned behind the page; content scrolls over it. */
.fixedbg {
  position: fixed; top: 0; left: 0; bottom: 0; right: var(--rail-width);
  z-index: 0; overflow: hidden; background: var(--bg-sunken);
}
.fixedbg img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.fixedbg__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(to top,
      rgba(16,15,12,0.94) 0%, rgba(16,15,12,0.86) 18%, rgba(16,15,12,0.62) 38%,
      rgba(16,15,12,0.26) 60%, rgba(16,15,12,0.06) 80%, rgba(16,15,12,0.22) 100%),
    linear-gradient(to right, rgba(16,15,12,0.50) 0%, rgba(16,15,12,0.10) 45%, rgba(16,15,12,0) 70%);
}

.hero-fixed {
  position: relative; z-index: 1;
  min-height: 100vh;
  display: flex; align-items: flex-end;
}
.hero-fixed__inner {
  max-width: var(--max-content); width: 100%; margin: 0 auto;
  padding: var(--space-10) var(--gutter-page) var(--space-9);
  text-shadow: 0 1px 18px rgba(16, 15, 12, 0.6);
}
.hero-fixed h1 {
  font-size: var(--text-display-1);
  line-height: var(--leading-tight);
  margin-top: var(--space-5);
  color: var(--paper);
}
.hero-fixed__sub {
  margin-top: var(--space-5); max-width: var(--measure-narrow);
  font-size: var(--text-body-lg); color: var(--stone-100);
}

.supported { margin-top: var(--space-8); }
/* base.css sets img { display: block }, so text-align can't centre this —
   it needs auto margins. */
.supported__logo { width: 74px; height: auto; opacity: 0.92; margin: 0 auto; }
.supported__label {
  margin-top: var(--space-3);
  font-family: var(--font-label); font-size: var(--text-label);
  letter-spacing: var(--tracking-label-wide); text-transform: uppercase;
  color: var(--stone-300);
}

/* Everything below the header rides over the fixed photo on an opaque ground. */
.scroll-over {
  position: relative; z-index: 1;
  background: var(--bg);
  padding: var(--space-6) 0 var(--space-8);
}

.band {
  position: relative;
  min-height: min(84vh, 880px);
  display: flex; align-items: center;
  overflow: hidden;
  margin: 0 clamp(14px, 2.4vw, 34px);
  border-radius: 10px;
}
.band + .band { margin-top: clamp(14px, 2.4vw, 34px); }

/* Dissolve as the band scrolls past. --fade is set from JS. */
.band__fade {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: var(--band-fade);
  opacity: var(--fade, 0);
}
@media (prefers-reduced-motion: reduce) { .band__fade { opacity: 0 !important; } }

.band__media { position: absolute; inset: 0; background: var(--media-placeholder); }
.band__img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.band__empty {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--font-label); font-size: var(--text-label);
  letter-spacing: var(--tracking-label-wide); text-transform: uppercase; color: var(--stone-400);
}
.band__scrim { position: absolute; inset: 0; pointer-events: none; }
.band--right .band__scrim {
  background:
    linear-gradient(to left,
      rgba(16,15,12,0.94) 0%, rgba(16,15,12,0.86) 26%,
      rgba(16,15,12,0.55) 52%, rgba(16,15,12,0.12) 80%, rgba(16,15,12,0) 100%),
    linear-gradient(rgba(16,15,12,0.18), rgba(16,15,12,0.18));
}
.band--left .band__scrim {
  background:
    linear-gradient(to right,
      rgba(16,15,12,0.94) 0%, rgba(16,15,12,0.86) 26%,
      rgba(16,15,12,0.55) 52%, rgba(16,15,12,0.12) 80%, rgba(16,15,12,0) 100%),
    linear-gradient(rgba(16,15,12,0.18), rgba(16,15,12,0.18));
}

.band__inner {
  position: relative; z-index: 1; width: 100%;
  max-width: var(--max-content); margin: 0 auto;
  padding: var(--space-9) var(--gutter-page);
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8);
}
.band--right .band__col { grid-column: 2; }
.band--left .band__col { grid-column: 1; }
.band__col { text-shadow: 0 1px 14px rgba(16, 15, 12, 0.55); }

.band__label {
  font-size: clamp(34px, 4vw, 58px);
  line-height: var(--leading-tight);
  color: var(--paper);
}
.band__blurb {
  margin-top: var(--space-3);
  font-family: var(--font-label); font-size: var(--text-label);
  letter-spacing: var(--tracking-label-wide); text-transform: uppercase;
  color: var(--stone-300);
}
.band__credit { margin-top: var(--space-5); color: var(--stone-400); }

.ticks { list-style: none; margin: var(--space-7) 0 0; padding: 0; }
.tick {
  padding: var(--space-4) 0;
  border-top: 1px solid rgba(237, 231, 216, 0.20);
}
.tick__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-3); }
.tick__name {
  font-family: var(--font-display); font-size: var(--text-subhead);
  line-height: var(--leading-snug); color: var(--paper);
}
.tick__grade {
  font-family: var(--font-label); font-size: var(--text-small);
  letter-spacing: 0.04em; color: var(--clay-300);
  white-space: nowrap;
}
.tick__detail { display: block; margin-top: var(--space-1); color: var(--stone-200); font-size: var(--text-small); }
.tick__note { display: block; margin-top: var(--space-1); color: var(--stone-300); font-size: var(--text-caption); }
.tick__read {
  display: inline-block; margin-top: var(--space-3); border: 0;
  font-family: var(--font-label); font-size: var(--text-label);
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--clay-300);
}
.tick__read:hover { color: var(--paper); }
.tick__read--empty { color: var(--stone-300); opacity: 0.72; }

@media (max-width: 900px) {
  .band { min-height: 0; display: block; }
  .band__media { position: relative; aspect-ratio: var(--aspect-frame); }
  .band__scrim { background: linear-gradient(to top, rgba(16,15,12,0.75) 0%, rgba(16,15,12,0) 55%); }
  .band__inner { grid-template-columns: 1fr; padding: var(--space-7) var(--gutter-page) var(--space-8); }
  .band--right .band__col, .band--left .band__col { grid-column: 1; }
  .ticks { margin-top: var(--space-5); }
}

/* ---------- Athlete ---------- */

.stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5);
  border-top: 1px solid var(--border-subtle); padding-top: var(--space-6);
}
.stat .v { font-family: var(--font-display); font-size: var(--text-title); color: var(--text-primary); line-height: var(--leading-tight); }
.stat .l {
  display: block; margin-top: var(--space-3);
  font-family: var(--font-label); font-size: var(--text-label);
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--stone-400);
}

.entries { list-style: none; margin: 0; padding: 0; }
.entries li {
  display: grid; grid-template-columns: 1.1fr 0.5fr 1.4fr;
  gap: var(--space-5); align-items: baseline;
  padding: var(--space-4) 0; border-bottom: 1px solid var(--border-hairline);
}
.entries .name { color: var(--text-primary); font-size: var(--text-body-lg); }
.entries .grade { font-family: var(--font-label); font-size: var(--text-caption); letter-spacing: 0.08em; color: var(--text-accent); text-transform: uppercase; }
.entries .detail { color: var(--text-muted); font-size: var(--text-small); }
.entries .note { display: block; color: var(--stone-400); font-size: var(--text-caption); font-style: italic; }

.reel { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--grid-gap); align-items: start; }
.reel .frame:nth-child(3) { margin-top: var(--space-8); }

.next { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); align-items: end; }
.next dl { margin: 0; }
.next dt {
  font-family: var(--font-label); font-size: var(--text-label);
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--stone-400);
  margin-top: var(--space-6);
}
.next dd { margin: var(--space-2) 0 0; color: var(--text-primary); font-size: var(--text-body-lg); max-width: var(--measure-narrow); }

.partners { list-style: none; margin: var(--space-3) 0 0; padding: 0; color: var(--text-secondary); }

/* ---------- Photography: full-width photo grid ---------- */

.page--gallery, .page--film { max-width: none; padding: var(--space-8) 0 0; }

.gallery-head {
  max-width: var(--max-content); margin: 0 auto;
  padding: 0 var(--gutter-page) var(--space-7);
}
.gallery-head__lede {
  margin-top: var(--space-4); max-width: var(--measure-narrow);
  color: var(--text-secondary);
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  grid-auto-flow: dense;
  gap: 6px;
  padding: 0 6px var(--space-9);
}
/* every fifth frame runs wide, so the grid breathes rather than marching */
.grid .cell:nth-child(7n + 1) { grid-column: span 2; }
@media (max-width: 1100px) { .grid .cell:nth-child(7n + 1) { grid-column: span 1; } }

.cell { margin: 0; position: relative; }
.cell__box {
  position: relative; aspect-ratio: var(--aspect-landscape);
  overflow: hidden; background: var(--media-placeholder); cursor: pointer;
}
.cell__box img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out), opacity var(--dur-fast) var(--ease-soft);
}
.cell__box:hover img { transform: scale(var(--media-hover-scale)); opacity: 0.92; }
.cell__cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-5);
  background: var(--overlay-protect);
  opacity: 0; transition: opacity var(--dur-fast) var(--ease-soft);
  font-size: var(--text-caption); font-style: italic; color: var(--paper);
  pointer-events: none;
}
.cell:hover .cell__cap { opacity: 1; }
.cell__cap .meta { color: var(--stone-200); }

/* ---------- Film ---------- */

.stage { padding: 0 clamp(6px, 2vw, 28px) var(--space-8); }
.stage__box {
  position: relative; aspect-ratio: var(--aspect-video);
  overflow: hidden; background: var(--ink-950);
  border-radius: 10px; box-shadow: var(--shadow-inset-hairline);
}
.stage__poster { width: 100%; height: 100%; object-fit: cover; }
.stage__scrim { position: absolute; inset: 0; background: var(--overlay-protect); pointer-events: none; }
.stage__box iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.stage__box .play-capsule { left: 50%; bottom: 50%; transform: translate(-50%, 50%); }
.stage__cap {
  max-width: var(--max-content); margin: 0 auto;
  padding: var(--space-6) var(--gutter-page) 0;
  display: grid; grid-template-columns: 1fr auto; gap: var(--space-6); align-items: end;
}
.stage__title { font-size: var(--text-title); line-height: var(--leading-snug); }
.stage__blurb { margin-top: var(--space-3); max-width: var(--measure-narrow); color: var(--text-secondary); }

.strip-wrap {
  max-width: var(--max-content); margin: 0 auto;
  padding: var(--space-9) var(--gutter-page) var(--space-9);
  border-top: 1px solid var(--border-hairline);
}
.strip {
  display: flex; gap: var(--grid-gap); overflow-x: auto;
  margin-top: var(--space-6); padding-bottom: var(--space-4);
  scroll-snap-type: x proximity;
}
.strip::-webkit-scrollbar { height: 6px; }
.strip::-webkit-scrollbar-thumb { background: var(--border-subtle); border-radius: 999px; }
.vid {
  flex: 0 0 clamp(240px, 26vw, 320px); border: 0; scroll-snap-align: start;
}
.vid__box {
  aspect-ratio: var(--aspect-video); overflow: hidden;
  background: var(--media-placeholder);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-inset-hairline);
}
.vid__box img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}
.vid:hover .vid__box img { transform: scale(var(--media-hover-scale)); }
.vid__title {
  margin-top: var(--space-4); font-family: var(--font-display);
  font-size: var(--text-subhead); color: var(--text-primary);
  transition: color var(--dur-fast) var(--ease-soft);
}
.vid:hover .vid__title { color: var(--accent-hover); }
.vid__box .empty {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--font-label); font-size: var(--text-label);
  letter-spacing: var(--tracking-label-wide); text-transform: uppercase; color: var(--stone-400);
}
.vid--empty { opacity: 0.45; }
.vid--empty .vid__box { display: grid; place-items: center; }

/* ---------- Film ---------- */

.player { margin-bottom: var(--space-7); }
.player .box { aspect-ratio: var(--aspect-video); position: relative; }
.player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.player .scrim { position: absolute; inset: 0; background: var(--overlay-protect); pointer-events: none; }
.play-capsule {
  position: absolute; left: var(--space-7); bottom: var(--space-7);
  display: inline-flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-pill); border: 1px solid var(--border-strong);
  background: rgba(16, 15, 12, 0.55); backdrop-filter: var(--blur-veil); -webkit-backdrop-filter: var(--blur-veil);
  color: var(--paper); cursor: pointer;
  font-family: var(--font-label); font-size: var(--text-label);
  letter-spacing: var(--tracking-label-wide); text-transform: uppercase;
  transition: color var(--dur-fast) var(--ease-soft), border-color var(--dur-fast) var(--ease-soft);
}
.play-capsule:hover { color: var(--accent-hover); border-color: var(--accent-hover); }
.play-capsule[disabled] { color: var(--stone-300); cursor: default; }

.section-photo { margin-top: var(--space-7); }

.films { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-8) var(--grid-gap); }
.film h3 { font-size: var(--text-heading); margin-top: var(--space-4); }
.film .blurb { color: var(--text-secondary); max-width: var(--measure-narrow); margin-top: var(--space-3); }

/* ---------- Parallax backdrop (Words landing + article pages) ---------- */

.fixedbg--parallax { background: var(--ink-950); }
.fixedbg__layer {
  position: absolute; inset: -6% 0 -6% 0;
  will-change: transform, opacity;
  transition: opacity var(--dur-veil) linear;
}
.fixedbg__layer img { width: 100%; height: 100%; object-fit: cover; }
.fixedbg__scrim--dim {
  background:
    linear-gradient(rgba(16,15,12,0.72), rgba(16,15,12,0.72)),
    linear-gradient(to top, rgba(16,15,12,0.9) 0%, rgba(16,15,12,0.2) 50%, rgba(16,15,12,0.6) 100%);
}

/* ---------- Words: the article list ---------- */

.posts {
  position: relative;
  display: grid; gap: clamp(14px, 2.4vw, 34px);
  padding: 0 clamp(14px, 2.4vw, 34px) var(--space-9);
}
.post {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: 340px 1fr; gap: var(--space-8);
  align-items: center;
  padding: var(--space-7);
  background: var(--bg);
  border-radius: 10px;
  box-shadow: var(--shadow-inset-hairline);
  border: 0;
}
.post__thumb {
  aspect-ratio: var(--aspect-landscape); overflow: hidden;
  background: var(--media-placeholder); border-radius: var(--radius-xs);
}
.post__thumb img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}
.post:hover .post__thumb img { transform: scale(var(--media-hover-scale)); }
.post__title {
  font-size: var(--text-heading); margin-top: var(--space-3);
  color: var(--text-primary); transition: color var(--dur-fast) var(--ease-soft);
}
.post:hover .post__title { color: var(--accent-hover); }
.post__excerpt {
  margin-top: var(--space-4); max-width: var(--measure-prose);
  color: var(--text-secondary); font-size: var(--text-body);
}
.post__more {
  display: inline-block; margin-top: var(--space-4);
  font-family: var(--font-label); font-size: var(--text-label);
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted);
}
.post:hover .post__more { color: var(--accent-hover); }

/* ---------- A single article, magazine style ---------- */

.page--article { max-width: none; padding: 0; position: relative; z-index: 1; }

.article__hero {
  min-height: 92vh; display: flex; align-items: flex-end;
}
.article__heroinner {
  max-width: var(--max-content); width: 100%; margin: 0 auto;
  padding: var(--space-10) var(--gutter-page) var(--space-9);
  text-shadow: 0 1px 18px rgba(16, 15, 12, 0.7);
}
.article__hero h1 {
  font-size: var(--text-display-2); line-height: var(--leading-tight);
  margin-top: var(--space-5); max-width: 18ch; color: var(--paper);
}
.article__stamp { margin-top: var(--space-5); color: var(--stone-300); }
.article__credits {
  margin-top: var(--space-4); font-size: var(--text-caption);
  font-style: italic; color: var(--stone-300); line-height: 1.6;
}

.article {
  position: relative;
  max-width: calc(var(--measure-prose) + 13vw);
  margin: 0 auto var(--space-10);
  padding: 0 var(--gutter-page) var(--space-9);
}

/* The reading column sits on its own quiet ground so type stays legible
   over the photograph drifting behind it. */
.article .entry__prose {
  background: rgba(16, 15, 12, 0.86);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  border-radius: 8px;
  padding: var(--space-8) var(--space-8) var(--space-7);
  margin: 0 auto var(--space-6);
  max-width: var(--measure-prose);
  font-size: var(--text-body-lg); line-height: var(--leading-prose); color: var(--text-copy);
}
.article .entry__prose p { margin: 0 0 1.15em; }
.article .entry__prose p:last-child { margin-bottom: 0; }
.article .entry__prose:first-of-type > p:first-of-type::first-letter {
  font-family: var(--font-display); font-size: 4.1em; line-height: 0.82;
  float: left; padding: 6px 12px 0 0; color: var(--text-primary);
}
.article .entry__h2 {
  max-width: var(--measure-prose); margin: var(--space-8) auto var(--space-5);
  font-size: var(--text-heading);
  text-shadow: 0 1px 14px rgba(16,15,12,0.8);
}

/* Photographs break the column and stay full colour. */
.article .entry__photo { margin: var(--space-8) 0; width: 100%; }
.article .entry__photo .box { aspect-ratio: auto; border-radius: 8px; }
.article .entry__photo .box img { height: auto; }
.article .entry__photo figcaption {
  padding: 0 var(--space-2);
  text-shadow: 0 1px 12px rgba(16,15,12,0.85);
}

.article .back {
  display: inline-block; margin-top: var(--space-8); border: 0;
  font-family: var(--font-label); font-size: var(--text-label);
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--stone-300);
  text-shadow: 0 1px 12px rgba(16,15,12,0.85);
}
.article .back:hover { color: var(--accent-hover); }

.pullquote {
  max-width: var(--measure-prose); margin: var(--space-8) auto;
  padding-left: var(--space-6);
  border-left: 1px solid var(--border-strong);
  font-family: var(--font-display); font-style: italic;
  font-size: var(--text-heading); line-height: var(--leading-snug); color: var(--paper);
  text-shadow: 0 1px 14px rgba(16,15,12,0.85);
}

@media (max-width: 900px) {
  .post { grid-template-columns: 1fr; gap: var(--space-4); padding: var(--space-5); }
  .article .entry__prose { padding: var(--space-6) var(--space-5); }
}

/* ---------- Media: film stage, filters, link rows ---------- */

.media-film { margin-top: var(--space-8); }
.media-film .stage { padding: var(--space-6) 0 0; }
.media-film .stage__cap { padding: var(--space-6) 0 0; max-width: none; }

.filters { display: flex; flex-wrap: wrap; gap: var(--space-6); margin: var(--space-10) 0 var(--space-6); }
.filters button {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--font-label); font-size: var(--text-caption);
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted);
  transition: color var(--dur-fast) var(--ease-soft);
}
.filters button[aria-pressed="true"] { color: var(--text-primary); }
.filters button:hover { color: var(--stone-200); }

.links { display: block; }
.mrow { border-top: 1px solid var(--border-hairline); padding: var(--space-6) 0; }
.mrow:last-child { border-bottom: 1px solid var(--border-hairline); }
.mrow__head {
  display: grid; grid-template-columns: 110px 1fr 90px 16px;
  gap: var(--space-5); align-items: baseline; border: 0;
}
.mrow__mid { display: block; }
.mrow__pub { display: block; color: var(--text-secondary); font-size: var(--text-small); }
.mrow__title {
  display: block; margin-top: var(--space-1);
  font-family: var(--font-display); font-size: var(--text-subhead); color: var(--text-primary);
  transition: color var(--dur-fast) var(--ease-soft);
}
.mrow__head:hover .mrow__title { color: var(--accent-hover); }
.mrow__note {
  display: block; margin-top: var(--space-1);
  font-size: var(--text-caption); font-style: italic; color: var(--text-muted);
}
.mrow__yr, .mrow__arrow { text-align: right; color: var(--text-muted); }

.embed { margin-top: var(--space-5); border-radius: 12px; overflow: hidden; }
.embed iframe { display: block; border: 0; width: 100%; }

.mrow__extras { display: flex; flex-wrap: wrap; gap: var(--space-6); margin-top: var(--space-4); }
.mrow__extra {
  border: 0; font-family: var(--font-label); font-size: var(--text-label);
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-accent);
}
.mrow__extra:hover { color: var(--paper); }

/* ---------- Related media on a story ---------- */

.related { display: flex; flex-wrap: wrap; gap: var(--space-6); margin-top: var(--space-7); }
.related__link { border: 0; display: block; }
.related__label {
  display: block; font-family: var(--font-label); font-size: var(--text-label);
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-accent);
  transition: color var(--dur-fast) var(--ease-soft);
}
.related__link:hover .related__label { color: var(--paper); }
.related__note {
  display: block; margin-top: var(--space-1);
  font-size: var(--text-caption); font-style: italic; color: var(--stone-300);
}

/* ---------- A story that hasn't been written yet ---------- */

.soon {
  display: grid; place-items: center;
  min-height: 34vh; margin-top: var(--space-8);
  font-family: var(--font-display);
  font-size: clamp(34px, 6vw, 76px);
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--paper);
  text-shadow: 0 2px 30px rgba(16, 15, 12, 0.8);
}

/* ---------- Footer ---------- */

.site-footer {
  position: relative; z-index: 1; background: var(--bg);
  max-width: none; margin: 0 auto;
  padding: var(--space-5) var(--gutter-page) var(--space-8);
  border-top: 1px solid var(--border-hairline);
  display: flex; justify-content: space-between; gap: var(--space-5);
  font-family: var(--font-label); font-size: var(--text-label);
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--stone-400);
}
.site-footer a { border: 0; color: inherit; }
.site-footer a:hover { color: var(--accent-hover); }

/* ---------- Narrow screens ---------- */

@media (max-width: 900px) {
  body { padding-right: 0; padding-bottom: 64px; }
  .rail {
    top: auto; left: 0; right: 0; bottom: 0; width: auto; height: 64px;
    flex-direction: row; padding: 0 var(--space-5);
    border-left: 0; border-top: 1px solid var(--border-hairline);
  }
  .rail ul { flex-direction: row; gap: var(--space-5); }
  .rail li { writing-mode: horizontal-tb; transform: none; }
  .rail a { flex-direction: column; gap: var(--space-2); font-size: var(--text-label); letter-spacing: var(--tracking-label); }
  .rail a .rail__tick { width: 0; height: 1px; transition: width var(--dur-base) var(--ease-out); }
  .rail a[aria-current="page"] .rail__tick { width: 20px; height: 1px; }
  .rail .mark { font-size: var(--text-body-lg); }
  .page-head, .next, .set-head { grid-template-columns: 1fr; }
  .page-head .aside { text-align: left; }
  .stats { grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }
  .gallery, .reel, .films { grid-template-columns: 1fr; }
  .gallery .frame:nth-child(3n), .reel .frame:nth-child(3) { margin-top: 0; }
  .entries li { grid-template-columns: 1fr; gap: var(--space-2); }
  .links a { grid-template-columns: 1fr auto; }
  .links .kind, .links .yr { display: none; }
  .post { grid-template-columns: 1fr; gap: var(--space-4); }
  .entry__photo { width: 100%; }
}

/* ---------- Footer social + contact (addition to the design system:
   two drawn marks, the only icons in the system, at stroke-width 1) ---------- */

.site-footer {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
}
.site-footer__right { text-align: right; }
.social { display: flex; gap: var(--space-5); justify-content: center; }
.social__link {
  border: 0; color: var(--stone-400); line-height: 0;
  transition: color var(--dur-fast) var(--ease-soft);
}
.social__link:hover { color: var(--accent-hover); }

/* ---------- Header photo credit ---------- */

.hero-fixed__credit {
  position: absolute; right: var(--gutter-page); bottom: var(--space-6);
  color: var(--stone-300); text-shadow: 0 1px 10px rgba(16,15,12,0.7);
}

/* ---------- Supported-by block: logo centred over its caption ---------- */

.supported { display: inline-block; text-align: center; }

/* ---------- About ---------- */

.about {
  display: grid; grid-template-columns: minmax(0, var(--measure-prose)) 1fr;
  gap: var(--space-9); align-items: start;
}
.about__prose { font-size: var(--text-body-lg); line-height: var(--leading-prose); color: var(--text-copy); }
.about__prose p:first-of-type::first-letter {
  font-family: var(--font-display); font-size: 4.1em; line-height: 0.82;
  float: left; padding: 6px 12px 0 0; color: var(--text-primary);
}

.contact { max-width: var(--measure-prose); }
.contact__title { font-size: var(--text-title); margin-top: var(--space-5); }
.contact__blurb { margin-top: var(--space-4); color: var(--text-secondary); }
.contact__form { display: grid; gap: var(--space-5); margin-top: var(--space-7); }
.field { display: flex; flex-direction: column; gap: var(--space-2); }
.field > span {
  font-family: var(--font-label); font-size: var(--text-label);
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted);
}
.field input, .field textarea {
  font-family: var(--font-text); font-size: var(--text-body);
  color: var(--text-primary); background: var(--surface-inset);
  border: 1px solid var(--border-hairline); border-radius: var(--radius-xs);
  padding: var(--space-4); width: 100%; resize: vertical; line-height: var(--leading-normal);
}
.field input:focus, .field textarea:focus { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.contact__send {
  justify-self: start;
  font-family: var(--font-label); font-size: var(--text-label);
  letter-spacing: var(--tracking-label-wide); text-transform: uppercase;
  padding: var(--space-4) var(--space-7);
  color: var(--paper); background: var(--accent);
  border: 1px solid var(--accent); border-radius: var(--radius-xs); cursor: pointer;
  transition: background var(--dur-fast) var(--ease-soft), color var(--dur-fast) var(--ease-soft);
}
.contact__send:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--ink-900); }
.contact__note { font-size: var(--text-caption); font-style: italic; color: var(--text-accent); min-height: 1.2em; }

@media (max-width: 900px) {
  .site-footer { grid-template-columns: 1fr; gap: var(--space-5); text-align: center; }
  .site-footer__right { text-align: center; }
  .about { grid-template-columns: 1fr; }
  .hero-fixed__credit { right: var(--gutter-page); bottom: var(--space-4); }
}

/* The footer "Contact" needs to read as a link, not as sentence text. */
.site-footer__right a {
  color: var(--text-accent);
  border-bottom: 1px solid var(--border-subtle);
}
.site-footer__right a:hover { color: var(--paper); border-color: var(--paper); }

/* ---------- Photography: coming-soon banner ---------- */

/* The photograph is shown whole — the banner takes its height from the
   image itself rather than cropping it to a fixed shape. */
.banner {
  position: relative; display: block;
  margin: 0 clamp(6px, 2vw, 28px) var(--space-9);
  overflow: hidden; border-radius: 10px;
  background: var(--media-placeholder);
}
.banner__img { display: block; width: 100%; height: auto; }
.banner__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(rgba(16,15,12,0.42), rgba(16,15,12,0.42));
}
.banner__word {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  margin: 0;
  font-size: clamp(38px, 8vw, 148px);
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--paper);
  text-shadow: 0 2px 40px rgba(16, 15, 12, 0.75);
  text-align: center;
  padding: 0 var(--gutter-page);
}

/* ============================================================
   Phones. The rail becomes a bottom bar, the fixed backdrops
   reclaim the full width, and the display type steps down so
   headlines don't eat the screen.
   ============================================================ */

@media (max-width: 900px) {
  /* the rail sits along the bottom on small screens, so nothing
     should be reserving width for it on the right any more */
  .fixedbg { right: 0; }
  body { padding-bottom: 72px; }
}

@media (max-width: 640px) {
  /* --- bottom navigation: six items have to fit --- */
  .rail { height: 62px; padding: 0 var(--space-3); gap: var(--space-3); }
  .rail .mark__img { width: 28px; }
  .rail ul {
    flex: 1; gap: var(--space-2);
    justify-content: space-between;
    overflow-x: auto; scrollbar-width: none;
  }
  .rail ul::-webkit-scrollbar { display: none; }
  .rail a {
    font-size: 9px; letter-spacing: 0.04em;
    white-space: nowrap; gap: var(--space-1);
  }
  .rail li { flex: 0 0 auto; }

  /* --- display type --- */
  .hero-fixed h1 { font-size: clamp(38px, 12vw, 56px); }
  .hero-fixed__inner { padding: var(--space-9) var(--gutter-page) var(--space-8); }
  .hero-fixed__sub { font-size: var(--text-body); }
  .article__hero { min-height: 72vh; }
  .article__hero h1 { font-size: clamp(32px, 10vw, 44px); max-width: none; }
  .article__heroinner { padding: var(--space-9) var(--gutter-page) var(--space-7); }
  .page-head h1, .entry__head h1 { font-size: clamp(32px, 10vw, 44px); }
  .band__label { font-size: clamp(30px, 9vw, 44px); }

  /* --- reading --- */
  .article { padding: 0 var(--space-4) var(--space-8); }
  .article .entry__prose {
    padding: var(--space-6) var(--space-5);
    font-size: var(--text-body); border-radius: 6px;
  }
  .article .entry__prose:first-of-type > p:first-of-type::first-letter {
    font-size: 3.2em; padding: 4px 8px 0 0;
  }
  .article .entry__h2, .pullquote { font-size: var(--text-subhead); }
  .about__prose { font-size: var(--text-body); }

  /* --- cards and media --- */
  .posts { padding: 0 var(--space-3) var(--space-8); gap: var(--space-3); }
  .post { padding: var(--space-4); border-radius: 8px; }
  .post__title { font-size: var(--text-subhead); }
  .band { margin: 0 var(--space-3); border-radius: 8px; }
  .band + .band { margin-top: var(--space-3); }
  .grid { grid-template-columns: 1fr; gap: 3px; padding: 0 3px var(--space-8); }
  .cell__cap { opacity: 1; padding: var(--space-4); }

  /* --- film --- */
  .stage { padding: 0 var(--space-3) var(--space-7); }
  .stage__cap { grid-template-columns: 1fr; gap: var(--space-3); align-items: start; }
  .stage__title { font-size: var(--text-heading); }
  .stage__box .play-capsule { bottom: 50%; }
  .strip-wrap { padding: var(--space-8) var(--space-4); }
  .vid { flex: 0 0 68vw; }

  /* --- banner --- */
  .banner { margin: 0 var(--space-3) var(--space-8); border-radius: 8px; }

  /* --- footer --- */
  .site-footer { padding: var(--space-5) var(--space-4) var(--space-7); gap: var(--space-4); }
}

@media (max-width: 640px) {
  .mrow__head { grid-template-columns: 1fr 16px; gap: var(--space-3); }
  .mrow__kind, .mrow__yr { display: none; }
  .filters { gap: var(--space-4); margin: var(--space-8) 0 var(--space-5); }
  .media-film .stage { padding: var(--space-5) 0 0; }
  .related { gap: var(--space-5); }
}

/* ---------- About ---------- */

.about__quote {
  margin-top: var(--space-5);
  font-family: var(--font-display); font-style: italic;
  font-size: var(--text-heading); color: var(--stone-100);
  max-width: var(--measure-narrow);
}

.about-open-wrap {
  position: relative;
  max-width: var(--max-content); margin: 0 auto;
  padding: var(--space-8) var(--gutter-page) var(--space-6);
}
.about-open {
  display: grid; grid-template-columns: 1.2fr 0.8fr;
  gap: var(--space-8); align-items: start;
}
.about-open__text {
  margin: 0; max-width: none;
  padding: var(--space-7) var(--space-7) var(--space-6);
}
.about-open__photo .box { border-radius: 8px; }
.about-open__photo .box img { height: auto; }

.contact-wrap { margin-top: var(--space-8); }
.contact__btn {
  display: inline-block; margin-top: var(--space-6); border: 0;
  font-family: var(--font-label); font-size: var(--text-label);
  letter-spacing: var(--tracking-label-wide); text-transform: uppercase;
  padding: var(--space-4) var(--space-8);
  color: var(--paper); background: var(--accent);
  border: 1px solid var(--accent); border-radius: var(--radius-xs);
  transition: background var(--dur-fast) var(--ease-soft), color var(--dur-fast) var(--ease-soft);
}
.contact__btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--ink-900); }

@media (max-width: 640px) {
  .about-open { grid-template-columns: 1fr; gap: var(--space-5); }
  .about__quote { font-size: var(--text-subhead); }
}


/* ---------- About: a wider measure, set to the left of the page ---------- */

.page--about .article {
  max-width: var(--max-content);
  margin: 0 auto;
  padding: 0 var(--gutter-page) var(--space-9);
}
.page--about .article .entry__prose {
  max-width: 74ch;
  margin: 0 0 var(--space-6) 0;      /* left, not centred */
  padding: var(--space-7) var(--space-8) var(--space-6);
}
.page--about .article .entry__h2,
.page--about .article .pullquote {
  max-width: 74ch; margin-left: 0; margin-right: 0;
}
.page--about .article .entry__photo { width: 100%; margin: var(--space-8) 0; }
.page--about .contact { max-width: 74ch; }

@media (max-width: 640px) {
  .page--about .article { padding: 0 var(--space-4) var(--space-8); }
  .page--about .article .entry__prose { padding: var(--space-6) var(--space-5); }
}

/* ---------- Credits sitting on backdrops and banners ---------- */

.fixedbg__credit {
  position: absolute; right: var(--gutter-page); bottom: var(--space-5);
  color: var(--stone-300); text-shadow: 0 1px 10px rgba(16, 15, 12, 0.85);
  z-index: 1;
}
.banner__credit {
  position: absolute; right: var(--space-6); bottom: var(--space-5);
  color: var(--stone-200); text-shadow: 0 1px 10px rgba(16, 15, 12, 0.85);
}

/* ---------- About: full-width photo break ---------- */

.about-break {
  max-width: var(--max-content); margin: var(--space-8) auto;
  padding: 0 var(--gutter-page);
}
.about-break .box { border-radius: 8px; }
.about-break .box img { height: auto; }
.about-break figcaption { justify-content: flex-end; }

/* ---------- Text laid over a photograph ---------- */

.overlay {
  position: relative; overflow: hidden;
  display: grid; align-items: center;
  margin: var(--space-8) clamp(6px, 2vw, 28px);
  border-radius: 10px;
  background: var(--media-placeholder);
  min-height: min(72vh, 760px);
}
.overlay__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}
.overlay__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(to right, rgba(16,15,12,0.92) 0%, rgba(16,15,12,0.82) 38%,
                              rgba(16,15,12,0.45) 62%, rgba(16,15,12,0.10) 100%),
    linear-gradient(rgba(16,15,12,0.18), rgba(16,15,12,0.18));
}
.overlay--right .overlay__scrim {
  background:
    linear-gradient(to left, rgba(16,15,12,0.92) 0%, rgba(16,15,12,0.82) 38%,
                             rgba(16,15,12,0.45) 62%, rgba(16,15,12,0.10) 100%),
    linear-gradient(rgba(16,15,12,0.18), rgba(16,15,12,0.18));
}
/* the closing photograph is knocked back further so the button reads clearly */
.overlay__scrim--heavy {
  background: linear-gradient(rgba(16,15,12,0.74), rgba(16,15,12,0.74));
}

/* max-width covers the padding too, so this is sized to leave roughly a
   55-character measure inside it rather than 62ch of box. */
.overlay__panel {
  position: relative;
  max-width: min(660px, 54%);
  padding: var(--space-8);
  text-shadow: 0 1px 16px rgba(16, 15, 12, 0.7);
}
.overlay--left .overlay__panel { justify-self: start; }
.overlay--right .overlay__panel { justify-self: end; }
.overlay__panel--centre {
  justify-self: center; text-align: center; max-width: min(620px, 80%);
}
.overlay__heading {
  font-size: var(--text-title); line-height: var(--leading-snug);
  color: var(--paper); margin-bottom: var(--space-5);
}
.overlay__text {
  font-size: var(--text-body); line-height: var(--leading-prose); color: var(--stone-100);
}
.overlay__text p { margin: 0 0 1em; }
.overlay__text p:last-child { margin-bottom: 0; }
.overlay__credit {
  position: absolute; right: var(--space-6); bottom: var(--space-4);
  color: var(--stone-300); text-shadow: 0 1px 10px rgba(16, 15, 12, 0.85);
}

.overlay--contact { min-height: min(60vh, 620px); }
.overlay--contact .label { justify-content: center; }
.overlay--contact .contact__title { font-size: var(--text-title); margin-top: var(--space-4); }
.overlay--contact .contact__blurb { margin-top: var(--space-4); color: var(--stone-100); }

@media (max-width: 640px) {
  .overlay { min-height: 0; margin: var(--space-6) var(--space-3); }
  .overlay__panel { padding: var(--space-7) var(--space-5); max-width: none; }
  .overlay__scrim, .overlay--right .overlay__scrim {
    background: linear-gradient(rgba(16,15,12,0.80), rgba(16,15,12,0.80));
  }
  .overlay__heading { font-size: var(--text-heading); }
  .about-break { padding: 0 var(--space-3); margin: var(--space-6) auto; }
  .fixedbg__credit { right: var(--space-4); bottom: var(--space-4); }
}