/* ==========================================================================
   Mason Jones — cinematic refresh (loaded last, so it layers over the base).
   Four moves, composed as one: a dark default, bigger editorial type + motion,
   one electric-orange accent, and punchier photography. Colours come from the
   theme tokens, so both the dark default and the light toggle stay in step.
   Everything heavy is gated behind (prefers-reduced-motion: no-preference).
   ========================================================================== */

/* ---- Editorial type: push the display sizes + tighten the rhythm ---- */
.hero-cinema h1 { font-size: clamp(2.6rem, 1.4rem + 6vw, 5.5rem); line-height: 0.98; letter-spacing: -0.04em; }
.section-head h2, .page-title { letter-spacing: -0.035em; }
.section-head h2 { font-size: clamp(1.7rem, 1.1rem + 2.6vw, 2.9rem); line-height: 1.04; }
.eyebrow { letter-spacing: 0.16em; }

/* An uppercase section index, e.g. data-index="01", sits above a section head. */
.section-head { position: relative; }

/* ---- One electric accent, used with restraint ---- */
/* Body links (main prose only — not the footer, nav or breadcrumbs) get an
   orange underline instead of a flat colour swap. */
main .prose p a, main .section p a:not(.btn):not(.hero-link):not(.link-more):not(.card-more):not(.crumbs a) {
  color: inherit; text-decoration: none;
  background-image: linear-gradient(var(--accent), var(--accent));
  background-size: 100% 2px; background-position: 0 100%; background-repeat: no-repeat;
  padding-bottom: 1px;
}
.btn-primary { font-weight: 700; letter-spacing: 0.01em; box-shadow: 0 10px 30px -12px color-mix(in srgb, var(--accent) 70%, transparent); }
.btn-primary:hover { filter: brightness(1.05) saturate(1.05); transform: translateY(-1px); }
.nav-cta { font-weight: 700; }
.link-more, .section-cta a { color: var(--accent); }
/* Final CTA band: carry the orange through, and separate it from the body. */
.cta-band { border-top: 1px solid var(--border); }
.cta-band .btn-primary { background: var(--accent); color: var(--accent-ink); }

/* ==========================================================================
   Cinematic hero — a full-bleed photo with a dark scrim and grain.
   ========================================================================== */
.hero-cinema {
  padding: 0;
  min-height: clamp(520px, 86svh, 820px);
  display: grid; align-items: end;
  position: relative; isolation: isolate; overflow: clip;
  color: #f6f5f3;                 /* text is always light on the scrim, in both themes */
}
.hero-cinema::before, .hero-cinema::after { content: none; } /* drop the base ambient glow */

.hero-cinema__media { position: absolute; inset: 0; z-index: -2; display: block; }
.hero-cinema__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; display: block; }

/* Scrim: darken from the bottom-left where the text sits, plus a soft vignette. */
.hero-cinema > .hero-cinema__inner::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(to top, rgba(6,6,8,0.92) 0%, rgba(6,6,8,0.72) 24%, rgba(6,6,8,0.22) 56%, rgba(6,6,8,0) 78%),
    radial-gradient(130% 90% at 18% 92%, rgba(6,6,8,0.55), transparent 60%),
    radial-gradient(120% 120% at 50% 40%, transparent 55%, rgba(4,4,6,0.5) 100%);
}
/* Fine film grain over the whole hero (static; it only animates below). */
.hero-cinema::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0.14; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero-cinema__inner { position: static; width: 100%; /* static: the scrim below spans the whole hero, not just the text column */ padding-top: 64px; padding-bottom: clamp(40px, 7vh, 88px); }
.hero-cinema .eyebrow { color: var(--accent); }
/* The tagline sits under the buttons, on the darkest part of the scrim, so the photo never hides it. */
.hero-cinema__tag { margin: 22px 0 0; text-shadow: 0 1px 12px rgba(0,0,0,.6); }
.hero-cinema .hero-lede { color: #e9e7e3; max-width: 46ch; font-size: clamp(1.02rem, 0.96rem + 0.5vw, 1.2rem); }
.hero-cinema .hero-actions { margin-top: 28px; align-items: center; }
.hero-cinema .hero-link { color: #f6f5f3; text-decoration: none; font-weight: 600; }
.hero-cinema .hero-link:hover { color: var(--accent); }

/* A slow push-in on the hero photo as it first loads + drifts on scroll. */
@keyframes hero-cinema-in { from { transform: scale(1.12); } to { transform: scale(1.0); } }
@media (prefers-reduced-motion: no-preference) {
  .hero-cinema__media img { animation: hero-cinema-in 1.6s var(--ease-out, cubic-bezier(.2,.7,.2,1)) both; }
  @supports (animation-timeline: view()) {
    /* scroll-driven drift (ViewTimeline) — tied to scroll, not a never-ending loop */
    .hero-cinema__media img { animation: hero-cinema-in 1.6s var(--ease-out, cubic-bezier(.2,.7,.2,1)) both, hero-cinema-drift linear both; animation-timeline: auto, view(); animation-range: normal, exit 0% exit 100%; }
  }
}
@keyframes hero-cinema-drift { to { transform: scale(1.08); } }

/* Keep the hero sharp on phones: object-fit cover draws the photo wider than
   the viewport, so the box is kept short enough that the 1200w source covers it. */
@media (max-width: 560px) {
  .hero-cinema { min-height: clamp(430px, 72svh, 500px); }
  .hero-cinema h1 { font-size: clamp(2.1rem, 1.1rem + 5.2vw, 2.9rem); }
  .hero-cinema__inner { padding-top: 28px; padding-bottom: 32px; }
  .hero-cinema__tag { margin-top: 16px; }
}

/* ==========================================================================
   Kinetic ticker strip under the hero.
   ========================================================================== */
.ticker { border-block: 1px solid var(--border); background: var(--surface); }
.ticker__track { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0.6rem 1.25rem; padding: 14px max(16px, env(safe-area-inset-left, 0px));
  font-family: var(--font-head); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.8rem; color: var(--text-soft); }
.ticker__track span { white-space: nowrap; }
.ticker__dot { width: 6px; height: 6px; background: var(--accent); transform: rotate(45deg); flex: none; }

/* ==========================================================================
   Punchier photography — hover-zoom + a framed, glowing hover on the grid.
   ========================================================================== */
.gallery-item { position: relative; overflow: clip; border-radius: var(--radius); background: var(--surface); display: block; }
.gallery-item img { transition: transform 0.6s var(--ease-out, cubic-bezier(.2,.7,.2,1)), filter 0.4s ease; display: block; }
@media (hover: hover) {
  .gallery-item:hover img, .gallery-item:focus-visible img { transform: scale(1.06); filter: saturate(1.06); }
  .gallery-item::after { content: ""; position: absolute; inset: 0; border: 2px solid transparent; border-radius: inherit; transition: border-color 0.3s ease; pointer-events: none; }
  .gallery-item:hover::after, .gallery-item:focus-visible::after { border-color: color-mix(in srgb, var(--accent) 85%, transparent); }
}

/* Bolder album covers on /work: a stronger label + accent edge on hover. */
.album-stack:hover .album-stack__name, .album-stack:focus-visible .album-stack__name { color: var(--accent); }
@media (hover: hover) {
  .album-stack__pile { transition: transform 0.5s var(--ease-out, cubic-bezier(.2,.7,.2,1)); }
  .album-stack:hover .album-stack__pile { transform: translateY(-4px); }
}

/* ==========================================================================
   Header theme toggle (dark default → light). Wired in main.js.
   ========================================================================== */
.theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px;
  border: 1px solid var(--border); border-radius: 999px; background: transparent; color: var(--text-soft); cursor: pointer;
  transition: color var(--dur-fast, .18s) ease, border-color var(--dur-fast, .18s) ease, background-color var(--dur-fast, .18s) ease; }
.theme-toggle:hover { color: var(--text); border-color: var(--text-dim); }
.theme-toggle svg { width: 18px; height: 18px; display: block; }
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }
:root[data-theme="light"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="light"] .theme-toggle .icon-moon { display: none; }
.nav-theme { display: flex; align-items: center; }
@media (max-width: 760px) { .nav-theme { margin-top: 6px; } }

/* Portrait photos in a split (the About page): taller frame, kept in proportion. */
.split-photo--portrait { aspect-ratio: 3 / 4; object-position: 50% 35%; }