/* =========================================================
   Jakob Wulf – Project detail page (editorial)
   ========================================================= */

:root {
  --ease: cubic-bezier(.2,.7,.2,1);
  --frame: 1920px;                      /* max width for full-bleed media */
  --mono: 'Geist Mono', ui-monospace, monospace;   /* technical annotations: numbers, labels, captions */
  --dot: 'Doto', ui-monospace, monospace;          /* rare display accent: single words */
}

html { scroll-behavior: smooth; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.frame { max-width: var(--frame); margin-left: auto; margin-right: auto; }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 1.5rem; }
.accent { font-family: var(--dot); font-weight: 800; letter-spacing: -0.02em; word-spacing: -0.34em; }   /* Doto is monospaced: its space is 0.6em, shrink it to Figtree width */

/* Media + draft crops (--x/--y/--z crop a detail out of one render) */
.media { position: relative; overflow: hidden; background: #0d0d0d; }
.media img { width: 100%; height: 100%; object-fit: cover; display: block; object-position: var(--x, 50%) var(--y, 50%); transform-origin: var(--x, 50%) var(--y, 50%); scale: var(--z, 1); }
.media--contain { background: var(--fill, #0d0d0d); }   /* screenshots: show whole image on matching bg */
.media--contain img { object-fit: contain; }

/* ── COVER ── */
.cover-media { height: calc(100svh - 72px - min(9vw, 130px)); min-height: 420px; max-height: 1000px; }
.cover-media img { scale: 1.08; filter: brightness(0.45) saturate(0.1); transition: scale 2.2s var(--ease), filter 1.4s ease; }
.cover.is-in .cover-media img { scale: 1; filter: brightness(0.92) saturate(1); }
.cover-title { position: relative; z-index: 2; margin-top: -0.43em; font-size: clamp(88px, 19vw, 300px); font-weight: 600; letter-spacing: -0.055em; line-height: 0.82; color: var(--text); }
.cover-title--long { font-size: clamp(56px, 12.5vw, 200px); }
/* title completely below the cover image, not overlapping it – image and title still fit the first screen together */
.cover--below { --ct: clamp(88px, 19vw, 300px); --ct-gap: clamp(1.5rem, 3vw, 3rem); }
.cover--below:has(.cover-title--long) { --ct: clamp(56px, 12.5vw, 200px); }
.cover--below .cover-title { margin-top: var(--ct-gap); }
.cover--below .cover-media { height: calc(100svh - 66px - var(--ct) * 0.9 - var(--ct-gap) - 2rem); }
/* COVER SHADE – on every project page: the title overlaps the image (the one deliberate break, like the landing hero),
   the image bottom is darkened so the title always reads. To remove it everywhere, delete just this one rule. */
.cover .cover-media::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, var(--bg) 0%, rgba(8,8,8,0.6) 16%, rgba(8,8,8,0.15) 34%, transparent 50%); }
.cover-title .line { display: block; overflow: hidden; padding-bottom: 0.06em; }
.cover-title .line > span { display: block; transform: translateY(105%); transition: transform 1.3s var(--ease) 0.25s; }
.cover.is-in .cover-title .line > span { transform: none; }

/* ── INTRO / STANDFIRST ── */
.intro { padding-top: 8rem; padding-bottom: 10rem; align-items: start; }
.credits { grid-column: 1 / span 3; display: grid; gap: 1.6rem; }
.credits dt { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: #555; }
.credits dd { font-size: 14px; color: #999; line-height: 1.6; margin-top: 0.5rem; }
.lead { grid-column: 5 / span 8; font-size: clamp(26px, 3.1vw, 46px); line-height: 1.18; letter-spacing: -0.02em; color: #4a4a4a; }
.lead strong { font-weight: 400; color: var(--text); }
.lead .accent { color: var(--text); }

/* ── FULL-BLEED ── */
.bleed { width: 100%; height: min(100svh, 1080px); }

/* ── CHAPTER MODULE ──
   Number + title + text always look the same; only the arrangement changes per page.
   · beside: number left of the text block, right-aligned against it, cap height level with the title's cap height
   · above:  number over the text block (split, feature, compare), its left ink edge flush with the title */
:root {
  --num: clamp(120px, min(20vw, 28vh), 320px);   /* one size everywhere; the vh cap keeps the sticky split column on screen */
  --num-gap: 2.5rem;                             /* number ↔ text, beside and above */
  --ch-title: clamp(34px, 4.2vw, 64px);          /* one title size everywhere */
}
.chapter { padding-top: 12rem; padding-bottom: 8rem; align-items: start; }
.chapter-num { font-family: var(--mono); font-weight: 400; font-size: var(--num); line-height: 0.75; letter-spacing: -0.06em; color: #242424; }
.chapter-title { font-size: var(--ch-title); font-weight: 500; letter-spacing: -0.03em; line-height: 1.02; color: var(--text); margin: 0 0 2rem; }
.chapter-title .accent { color: #8a8a8a; }
.chapter-body { grid-column: 7 / span 5; }
.chapter-body p { font-size: 16px; color: #777; line-height: 1.8; max-width: 46ch; }
.chapter-body p + p { margin-top: 1.1rem; }

/* beside (Geist Mono's cap top sits at the top of its 0.75 line box, Figtree's 0.14em below the top of its line box) */
.chapter .chapter-num { grid-column: 1 / span 6; justify-self: end; margin-right: calc(var(--num-gap) - 1.5rem); margin-top: calc(var(--ch-title) * 0.14); }
/* above (Geist Mono has ~0.045em left side bearing) */
.split-text .chapter-num,
.feature-body .chapter-num,
.compare-head .chapter-num { margin-left: -0.045em; margin-bottom: var(--num-gap); }
.compare-head .chapter-num { grid-column: 1 / -1; }

/* arrangement variants for text-only chapters */
.chapter--right .chapter-num { grid-column: 1 / span 7; }                 /* text at the right content edge (columns 8–12) */
.chapter--right .chapter-body { grid-column: 8 / span 5; }
.chapter--left { grid-template-columns: auto minmax(0, 1fr); column-gap: var(--num-gap); }   /* module starts at the left content edge */
.chapter--left .chapter-num { grid-column: 1; justify-self: start; margin-right: 0; margin-left: -0.045em; }
.chapter--left .chapter-body { grid-column: 2; max-width: 34rem; }
.chapter--intro { padding-bottom: 4rem; }   /* chapter that introduces the image right below it (e.g. a compare slider) */

/* ── DUO – two equal 16:9 images side by side ── */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.duo .media { aspect-ratio: 16 / 9; }

/* ── STAGGERED PAIR ── */
.pair { align-items: start; }
.pair-a { grid-column: 1 / span 7; }
.pair-a .media { aspect-ratio: 4/3; }
.pair-b { grid-column: 9 / span 4; margin-top: 45%; }
.pair-b .media { aspect-ratio: 4/5; }

/* ── FEATURE (image + text side by side) ── */
.feature { align-items: end; padding-top: 12rem; }
.feature-media { grid-column: 1 / span 6; }
.feature-media .media { aspect-ratio: 3/4; }
.feature-body { grid-column: 8 / span 5; }
.feature-body p { font-size: 16px; color: #777; line-height: 1.8; max-width: 46ch; }
.feature-body p + p { margin-top: 1.1rem; }

/* ── PULL QUOTE ── */
.quote { padding-top: 14rem; padding-bottom: 14rem; text-align: center; }
.quote blockquote { font-size: clamp(40px, 6.2vw, 104px); font-weight: 500; line-height: 1; letter-spacing: -0.035em; color: var(--text); max-width: 15ch; margin: 0 auto; }
.quote blockquote span { color: #4a4a4a; }

/* ── STICKY SPLIT ── */
.split { align-items: start; padding-bottom: 10rem; }
.split-text { grid-column: 1 / span 4; position: sticky; top: 8rem; }
.split-text p { font-size: 16px; color: #777; line-height: 1.8; max-width: 46ch; }
.split-text p + p { margin-top: 1.1rem; }
.split-media { grid-column: 6 / span 7; display: grid; gap: 6rem; }
.split-media .media { aspect-ratio: 4/3; }
.split-media figure:nth-child(2) { width: 72%; margin-left: auto; }
.split-media figure:nth-child(2) .media { aspect-ratio: 4/5; }

/* ── COMPARE SLIDER (clay / wireframe vs. final) ── */
.compare-head { padding-bottom: 2.5rem; align-items: end; }
.compare-head .chapter-title { grid-column: 1 / span 7; margin: 0; }
.compare-head p { grid-column: 9 / span 4; font-size: 14px; color: #555; line-height: 1.7; }
.p-compare { position: relative; width: 100%; aspect-ratio: 16/9; max-height: min(100svh, 1080px); overflow: hidden; background: #111; user-select: none; --pos: 50%; }
.p-compare img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.p-compare-before { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.p-compare-before.is-clay { filter: grayscale(1) brightness(1.15) contrast(0.85); }
.p-compare-line { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 1px; background: rgba(255,255,255,0.6); pointer-events: none; }
.p-compare-knob { position: absolute; top: 50%; left: 50%; width: 56px; height: 56px; transform: translate(-50%,-50%); border-radius: 50%; border: 1px solid rgba(255,255,255,0.6); background: rgba(8,8,8,0.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; font-size: 14px; color: var(--text); }
.p-compare-tag { position: absolute; bottom: 1.75rem; font-family: var(--dot); font-weight: 800; font-size: clamp(16px, 1.6vw, 26px); text-transform: uppercase; color: rgba(255,255,255,0.85); pointer-events: none; }
.p-compare-tag--l { left: var(--gutter); }
.p-compare-tag--r { right: var(--gutter); }
.p-compare input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; }
.p-compare input:focus-visible ~ .p-compare-line .p-compare-knob { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ── VERTICAL FORMATS (9:16 projects) ── */
.cover-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; background: none; }
.cover-strip > div { position: relative; overflow: hidden; min-width: 0; }   /* each frame zooms inside its own cell */
.strip { display: grid; grid-template-columns: repeat(var(--n, 4), 1fr); gap: 3px; }
.strip .media { aspect-ratio: 9/16; }
.media--sketch { background: #fff; }
.video { position: relative; aspect-ratio: 16/9; max-height: min(100svh, 1080px); background: var(--bg); }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* two-click video: the third-party player only loads after the visitor clicks (js/video-consent.js) – interim until the videos are self-hosted MP4s */
.video-consent { position: absolute; inset: 0; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.1rem;
  background: #0d0d0d; border: 1px solid #1e1e1e; color: var(--text); cursor: pointer; font: inherit; }
.video-consent-play { width: 0; height: 0; border-style: solid; border-width: 14px 0 14px 24px; border-color: transparent transparent transparent currentColor; transition: transform 0.3s ease; }
.video-consent:hover .video-consent-play { transform: scale(1.12); }
.video-consent-label { font: 400 12px/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; }
.video-consent-note { max-width: 34em; padding: 0 1.5rem; font-size: 13px; line-height: 1.6; color: #666; text-align: center; }
.video-consent-note a { color: #999; }
.wide-img { margin-top: 3px; }
.wide-img img { width: 100%; height: auto; display: block; }

/* ── VIDEO CLIP (self-hosted, autoplaying loop) ── */
.clip { position: relative; overflow: hidden; background: #0d0d0d; }
.clip video { width: 100%; height: 100%; object-fit: cover; object-position: bottom; display: block; }

/* ── TRIPTYCH ── */
.triptych { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; margin-top: 10rem; }
.triptych .media { aspect-ratio: 3/4; }

.p-contact-gap { height: 10rem; }

/* ── REVEALS ── */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 1s ease, transform 1s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
.reveal-img::after { content: ''; position: absolute; inset: 0; background: var(--bg); transform-origin: bottom; transition: transform 1.4s var(--ease); }
.reveal-img.is-in::after { transform: scaleY(0); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .reveal-img::after, .cover-media img, .cover-title .line > span { transition: none; }
}

@media (max-width: 900px) {
  .grid > * { grid-column: 1 / -1 !important; }
  .cover-media { height: 62svh; min-height: 0; }
  .intro { padding-top: 5rem; padding-bottom: 6rem; row-gap: 3rem; }
  .credits { grid-template-columns: 1fr 1fr; order: 2; }
  .bleed { height: 70svh; }
  .chapter { padding-top: 7rem; padding-bottom: 4rem; }
  .chapter .chapter-num, .chapter--left .chapter-num { grid-column: 1 / -1; justify-self: start; margin: 0 0 1.5rem -0.045em; }
  .chapter-body, .chapter--right .chapter-body, .chapter--left .chapter-body { grid-column: 1 / -1; }
  .chapter--left { grid-template-columns: minmax(0, 1fr); }
  .pair { row-gap: 3rem; }
  .pair-b { margin-top: 0; width: 70%; margin-left: auto; }
  .quote { padding-top: 8rem; padding-bottom: 8rem; }
  .feature { padding-top: 7rem; row-gap: 2.5rem; }
  .split { padding-bottom: 6rem; row-gap: 3rem; }
  .split-text { position: static; }
  .split-media { gap: 3rem; }
  .split-media figure { width: auto !important; }
  .compare-head { row-gap: 1.25rem; }
  .p-compare { aspect-ratio: 4/5; }
  .cover-strip { grid-template-columns: 1fr 1fr; }
  .cover-strip > div:nth-child(n+3) { display: none; }
  .strip { grid-template-columns: 1fr 1fr; }
  .triptych { grid-template-columns: 1fr 1fr; margin-top: 6rem; }
  .triptych figure:first-child { grid-column: 1 / -1; }
  .triptych figure:first-child .media { aspect-ratio: 16/10; }
}