/* ============================================================
   v3 — Project / Case study.  Loads after base.css + v3.css.
   Full-bleed cinematic hero → editorial lead + meta → image
   sequence → credits → next project.  Rendered by js/project.js.
   ============================================================ */
body { background: var(--paper); color: var(--ink); }

/* #1 — scroll-grown white masthead (height set by js/project.js) */
.proj-mast { position: fixed; top: 0; left: 0; right: 0; height: 0; z-index: 99;
  background: var(--paper); border-bottom: 0 solid var(--line); pointer-events: none; will-change: height; }

.proj-error { min-height: 60vh; display: grid; place-content: center; gap: 1rem; text-align: center; padding: var(--margin);
  font-family: var(--mono); font-size: var(--t-cap); text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-soft); }

/* —— Hero ————————————————————————————————————————————————— */
.proj-hero { position: relative; width: 100%; height: 92svh; min-height: 480px; overflow: hidden; background: var(--ink); }
.proj-hero__img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.06); animation: phHero 2s var(--ease) forwards; }
/* optional mobile-specific hero: render both, show one per viewport (blocks.json hero `mobileMedia`/`mobileCrop`). Base rule MUST precede these so the modifier wins the cascade. */
.proj-hero__img--narrow { display: none; }
@media (max-width: 760px) { .proj-hero__img--wide { display: none; } .proj-hero__img--narrow { display: block; } }
@keyframes phHero { to { transform: scale(1); } }
.proj-hero::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(8,8,8,0.6), rgba(8,8,8,0.1) 34%, rgba(8,8,8,0) 56%); }
.proj-hero__foot { position: absolute; left: var(--margin); right: var(--margin); bottom: clamp(1.6rem, 1rem + 2vw, 3rem); z-index: 2; color: #fff; }
.proj-hero__kicker { display: block; font-family: var(--mono); font-size: var(--t-cap); text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.92;
  margin-bottom: clamp(0.7rem, 0.4rem + 0.7vw, 1.1rem); opacity: 0; transform: translateY(16px); animation: phUp 0.9s var(--ease) 0.15s forwards; }
.proj-hero__title { font-family: var(--display); font-weight: 600; font-size: clamp(2.6rem, 0.5rem + 7.8vw, 7.6rem); line-height: 0.93; letter-spacing: -0.03em;
  max-width: 18ch; text-wrap: balance; opacity: 0; transform: translateY(20px); animation: phUp 1s var(--ease) 0.28s forwards; }
.proj-hero__scroll { position: absolute; right: var(--margin); bottom: clamp(1.6rem, 1rem + 2vw, 3rem); z-index: 2; color: #fff;
  font-family: var(--mono); font-size: var(--t-cap); text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.9; }
@keyframes phUp { to { opacity: 1; transform: none; } }

/* —— Lead + meta ————————————————————————————————————————— */
.proj-intro { padding: clamp(3.2rem, 2rem + 4.5vw, 7rem) var(--margin) clamp(1.5rem, 1rem + 1.5vw, 3rem);
  display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(1.8rem, 1rem + 2.5vw, 3.4rem) 1.5rem; }
.proj-lead { grid-column: 1 / span 7; font-family: var(--display); font-weight: 400;
  font-size: clamp(1.4rem, 1rem + 1.9vw, 2.6rem); line-height: 1.22; letter-spacing: -0.015em; max-width: 24ch; text-wrap: balance; }
.proj-lead em { font-style: normal; color: var(--ink-mute); }
.proj-meta { grid-column: 9 / span 4; align-self: start; display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem 1rem; }
.proj-meta dt { font-family: var(--mono); font-size: var(--t-cap); text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-mute);
  border-top: 1px solid var(--line); padding-top: 0.7rem; margin-bottom: 0.55rem; }
.proj-meta dd { font-size: var(--t-body); line-height: 1.55; }

/* —— Body copy ——————————————————————————————————————————— */
.proj-body { padding: clamp(1rem, 0.5rem + 1vw, 2rem) var(--margin) clamp(2.5rem, 1.5rem + 3vw, 5rem);
  display: grid; grid-template-columns: repeat(12, 1fr); }
.proj-body__text { grid-column: 1 / span 7; }
.proj-body__text p { font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.32rem); line-height: 1.5; color: var(--ink-soft); max-width: 58ch; }
.proj-body__text p + p { margin-top: 1.1rem; }

/* —— Image sequence —————————————————————————————————————— */
/* Blocks abut like Figma (auto-layout gap 0) — full-bleed sections touch; the rhythm comes from
   each block's own padding below, not a uniform inter-block gap. */
.pg + .pg { margin-top: 0; }
.proj-body + .proj-gallery .pg:first-child { margin-top: 0; }
.pg__media { position: relative; overflow: hidden; background: var(--paper-2); }
.pg__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pg__cap { margin-top: 0.7rem; font-family: var(--mono); font-size: var(--t-cap); text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-mute); }

.pg--full .pg__media { width: 100%; aspect-ratio: 16 / 9; }
.pg--full .pg__cap { padding: 0 var(--margin); }
.pg--inset { padding: clamp(1rem, 0.6rem + 1vw, 1.5rem) var(--margin) 0; }
.pg--inset .pg__media { aspect-ratio: 3 / 2; }
.pg--duo { padding: clamp(1rem, 0.6rem + 1vw, 1.5rem) var(--margin); display: grid; grid-template-columns: var(--pg-cols, 1fr 1fr); gap: clamp(0.8rem, 0.4rem + 1.4vw, 2rem); }
.pg--duo .pg__media { aspect-ratio: 4 / 5; }

/* image eases up + un-zooms as it reveals */
.pg[data-reveal] .pg__media img { transform: scale(1.07); transition: transform 1.5s var(--ease); }
.pg[data-reveal].is-in .pg__media img { transform: scale(1); }

/* —— Credits ————————————————————————————————————————————— */
.proj-credits { border-top: 1px solid var(--line); margin: clamp(3rem, 2rem + 3vw, 6rem) var(--margin) 0; padding-top: clamp(1.5rem, 1rem + 1.5vw, 2.4rem);
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem 1rem; }
.proj-credits dt { font-family: var(--mono); font-size: var(--t-cap); text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-mute); margin-bottom: 0.5rem; }
.proj-credits dd { font-size: var(--t-body); line-height: 1.6; }

/* —— Next project ———————————————————————————————————————— */
.proj-next { position: relative; display: block; margin-top: clamp(3.5rem, 2.5rem + 3vw, 6.5rem); border-top: 1px solid var(--line);
  padding: clamp(3rem, 2rem + 4vw, 7rem) var(--margin); overflow: hidden; }
.proj-next__label { font-family: var(--mono); font-size: var(--t-cap); text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-mute); }
.proj-next__title { font-family: var(--display); font-weight: 600; font-size: clamp(2.4rem, 0.6rem + 6.8vw, 6.6rem); line-height: 0.96; letter-spacing: -0.03em;
  margin-top: 0.45rem; display: inline-flex; align-items: baseline; gap: 0.3em; transition: transform 0.55s var(--ease); }
.proj-next__arrow { font-size: 0.6em; transition: transform 0.55s var(--ease); }
.proj-next:hover .proj-next__title { transform: translateX(clamp(0.5rem, 1.4vw, 1.6rem)); }
.proj-next__img { position: absolute; top: 50%; right: clamp(2rem, 7vw, 9rem); transform: translateY(-50%) scale(0.96); z-index: 1;
  width: clamp(170px, 22vw, 350px); aspect-ratio: 4 / 5; object-fit: cover; opacity: 0; pointer-events: none;
  transition: opacity 0.5s var(--ease), transform 0.7s var(--ease); }
.proj-next:hover .proj-next__img { opacity: 1; transform: translateY(-50%) scale(1); }

/* —— More work ——————————————————————————————————————————— */
.proj-more { border-top: 1px solid var(--line); padding: clamp(2rem, 1.5rem + 2vw, 3.5rem) var(--margin) 0; }
.proj-more__head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  font-family: var(--mono); font-size: var(--t-cap); text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-mute);
  margin-bottom: clamp(1.2rem, 0.8rem + 1.5vw, 2.2rem); }
.proj-more__head a:hover { color: var(--ink); }
.proj-more__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(0.8rem, 0.4rem + 1.4vw, 2rem); }
.pm-card__media { overflow: hidden; aspect-ratio: 4 / 3; background: var(--paper-2); }
.pm-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.9s var(--ease); }
.pm-card:hover .pm-card__media img { transform: scale(1.04); }
.pm-card__row { display: flex; justify-content: space-between; gap: 1rem; margin-top: 0.7rem; align-items: baseline; }
.pm-card__name { font-family: var(--display); font-weight: 600; font-size: clamp(1rem, 0.85rem + 0.5vw, 1.25rem); letter-spacing: -0.02em; }
.pm-card__meta { font-family: var(--mono); font-size: var(--t-cap); text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-mute); white-space: nowrap; }
@media (max-width: 720px) { .proj-more__grid { grid-template-columns: 1fr; } }

/* —— Footer (mirrors page-foot) —————————————————————————— */
.proj-foot { border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.6rem 1.5rem;
  padding: clamp(1.4rem, 1rem + 1vw, 2.2rem) var(--margin) clamp(2rem, 1.4rem + 2vw, 3.4rem);
  font-family: var(--mono); font-size: var(--t-cap); text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-soft); }
.proj-foot a:hover { color: var(--ink); }

/* —— Responsive ————————————————————————————————————————— */
@media (max-width: 860px) {
  .proj-lead { grid-column: 1 / -1; }
  .proj-meta { grid-column: 1 / -1; }
  .proj-body__text { grid-column: 1 / -1; }
  .proj-credits { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .proj-hero { height: 80svh; }
  .pg--duo { grid-template-columns: 1fr; }
}

/* ============================================================
   Block kit — art-directed layout blocks. js/project.js renders
   p.blocks (from content/projects/<NN>/blocks.json); each type below
   mirrors a Figma component. full / inset / duo (above) are reused.
   ============================================================ */
.pg__media video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* —— Slideshow — any media slot given a LIST instead of one path (js/project.js initSlides).
   Each slide eases in from the right as the last exits left, holds, then the next goes; a click
   runs the whole set through back-to-back. The ease is Play's — slow start, hard acceleration,
   long settle — so it reads as the same hand as the rest of the site. —— */
.pg-show { position: relative; overflow: hidden;
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='46'%3E%3Ccircle cx='23' cy='23' r='22' fill='%23141412' fill-opacity='0.5'/%3E%3Cpath d='M19 15l9 8-9 8' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 23 23, pointer; }
.pg-show__s { position: absolute; inset: 0; overflow: hidden; transform: translate3d(100%, 0, 0); will-change: transform;
  transition: transform 0.9s cubic-bezier(0.5, 0, 0.08, 1); }
.pg-show__s.is-on { transform: translate3d(0, 0, 0); }
.pg-show__s img, .pg-show__s video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* fit:"contain" — media sits smaller & centered on a black cell (logos / gif marks), not cover-cropped */
.pg__media--contain { background: #000; }
.pg__media--contain img, .pg__media--contain video, .pg__media--contain .pg-show__s img, .pg__media--contain .pg-show__s video { object-fit: contain; }
/* per-slide contain — one slide in a cover slideshow sits centered on black (e.g. a square clip in a 16:9 box) */
.pg-show__s--contain { background: #000; }
.pg-show__s--contain img, .pg-show__s--contain video { object-fit: contain; }

/* —— video audio cue —— only on clips that actually carry sound (build.py → site.json `audio`).
   Muted + looping until the cursor is over it, when initVideos unmutes it. Bottom-left, clear of the counter. —— */
.pg__media.has-audio, .pg-split__bleed.has-audio, .pg-split__c.has-audio, .proj-hero.has-audio { position: relative;
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='46'%3E%3Ccircle cx='23' cy='23' r='22' fill='%23141412' fill-opacity='0.55'/%3E%3Cpath d='M22 18l-4 3h-3v4h3l4 3z' fill='%23ffffff'/%3E%3Cpath d='M27 19a5 5 0 0 1 0 8' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round'/%3E%3Cpath d='M30 16a9 9 0 0 1 0 14' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") 23 23, auto; }
.pg-audio { position: absolute; left: clamp(0.7rem, 1.4vw, 1.15rem); bottom: clamp(0.7rem, 1.4vw, 1.15rem); z-index: 4;
  font-family: var(--mono); font-size: var(--t-cap); text-transform: uppercase; letter-spacing: 0.05em;
  color: #fff; background: rgba(20, 20, 18, 0.5); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px);
  padding: 0.34em 0.64em; border-radius: 999px; pointer-events: none; opacity: 0.9; transition: opacity 0.3s var(--ease); }
.proj-hero .pg-audio { left: auto; right: var(--margin); bottom: auto; top: clamp(5rem, 12vh, 8rem); }
.pg-audio__on { display: none; }
.is-audible .pg-audio__off { display: none; }
.is-audible .pg-audio__on { display: inline; }
.is-audible .pg-audio { opacity: 1; }
/* the reveal's scale-up is replaced by the slideshow's own affordances; keep an eased transition
   on the on-screen slide so the hover-zoom glides (specificity beats the .pg[data-reveal] reveal rule) */
.pg[data-reveal] .pg-show__s > img, .pg[data-reveal] .pg-show__s > video,
.pg[data-reveal].is-in .pg-show__s > img, .pg[data-reveal].is-in .pg-show__s > video { transform: none; transition: transform 0.55s var(--ease); }

/* —— that a slot holds MORE than one image: a running counter, a settle-pulse the first time it's
   seen, and a gentle hover-zoom — so a slideshow never reads as a plain static image (initSlides) —— */
.pg-show__count { position: absolute; z-index: 4; right: clamp(0.7rem, 1.4vw, 1.15rem); bottom: clamp(0.7rem, 1.4vw, 1.15rem);
  font-family: var(--mono); font-size: var(--t-cap); letter-spacing: 0.06em; color: #fff; mix-blend-mode: difference;
  opacity: 0.85; pointer-events: none; transition: opacity 0.3s var(--ease); }
.pg-show:hover .pg-show__count { opacity: 1; }
.pg[data-reveal] .pg-show:hover .pg-show__s.is-on > img, .pg[data-reveal] .pg-show:hover .pg-show__s.is-on > video,
.pg[data-reveal].is-in .pg-show:hover .pg-show__s.is-on > img, .pg[data-reveal].is-in .pg-show:hover .pg-show__s.is-on > video { transform: scale(1.03); }
.pg-show.is-hint .pg-show__s.is-on > img, .pg-show.is-hint .pg-show__s.is-on > video { animation: pgShowHint 0.9s var(--ease); }
@keyframes pgShowHint { 0% { transform: scale(1); } 45% { transform: scale(1.035); } 100% { transform: scale(1); } }

@media (prefers-reduced-motion: reduce) {
  .pg-show__s { transition: none; }                      /* initSlides() also never starts the timer */
  .pg-show.is-hint .pg-show__s.is-on > img, .pg-show.is-hint .pg-show__s.is-on > video { animation: none; }
}
.pg[data-reveal] .pg__media video { transform: scale(1.07); transition: transform 1.5s var(--ease); }
.pg[data-reveal].is-in .pg__media video { transform: scale(1); }

/* text — an editorial column (heading + copy) */
.pg--text { padding: clamp(1rem, 0.5rem + 1vw, 2rem) var(--margin); display: grid; grid-template-columns: repeat(12, 1fr); }
.pg--text .pg-text__col { grid-column: 1 / span 7; }

/* stats — a "by the numbers" band (custom block, e.g. Deep Objects) — equal cells, dividers, big figures that pop */
.pg--custom { padding: clamp(2.5rem, 1.5rem + 3vw, 6rem) var(--margin); }
.pg-stats { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.pg-stat { display: flex; flex-direction: column; gap: clamp(0.8rem, 0.5rem + 0.8vw, 1.3rem); padding: clamp(1.8rem, 1rem + 2.6vw, 3.6rem) clamp(1.2rem, 0.6rem + 2vw, 3rem); }
.pg-stat + .pg-stat { border-left: 1px solid var(--line); }
.pg-stat__n { font-family: var(--display); font-weight: 700; font-size: clamp(3rem, 1.4rem + 6.5vw, 7rem); line-height: 0.82; letter-spacing: -0.045em; color: var(--ink); }
.pg-stat__l { font-family: var(--mono); font-size: var(--t-cap); text-transform: uppercase; letter-spacing: 0.03em; line-height: 1.4; color: var(--ink-mute); max-width: 22ch; }
@media (max-width: 720px) { .pg-stats { grid-template-columns: 1fr; } .pg-stat + .pg-stat { border-left: 0; border-top: 1px solid var(--line); } }

/* CTA — a big editorial "read" link (e.g. Deep Objects → white-paper flipbook) */
.pg--cta { padding: clamp(3rem, 2rem + 5vw, 8rem) var(--margin); display: flex; justify-content: center; }
.pg-cta { display: inline-flex; flex-direction: column; align-items: center; gap: clamp(0.7rem, 0.4rem + 0.6vw, 1.1rem); text-decoration: none; color: var(--ink); text-align: center; }
.pg-cta__ey { font-family: var(--mono); font-size: var(--t-cap); text-transform: uppercase; letter-spacing: 0.18em; color: var(--ink-mute); }
.pg-cta__row { display: inline-flex; align-items: center; gap: 0.32em; border-bottom: 2px solid currentColor; padding-bottom: 0.1em; transition: gap .3s cubic-bezier(.2, .7, .2, 1), opacity .3s; }
.pg-cta__label { font-family: var(--display); font-weight: 600; font-size: clamp(2.2rem, 1rem + 5vw, 5rem); letter-spacing: -0.02em; line-height: 1; text-transform: uppercase; }
.pg-cta__arw { font-family: var(--display); font-weight: 400; font-size: 0.6em; line-height: 1; }
.pg-cta:hover .pg-cta__row { gap: 0.5em; opacity: 0.6; }

.pg-text__head { font-family: var(--display); font-weight: 600; font-size: clamp(1.3rem, 1rem + 1.4vw, 2rem); line-height: 1.1; letter-spacing: -0.02em; margin-bottom: 0.85rem; }
.pg--text p { font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.32rem); line-height: 1.5; color: var(--ink-soft); max-width: 58ch; }
.pg--text p + p { margin-top: 1.1rem; }

/* trio — three across */
.pg--trio { padding: clamp(1rem, 0.6rem + 1vw, 1.5rem) var(--margin); display: grid; grid-template-columns: var(--pg-cols, repeat(3, 1fr)); gap: clamp(0.8rem, 0.4rem + 1.4vw, 2rem); }
.pg--trio .pg__media { aspect-ratio: 3 / 4; }

/* grid — N images (columns via --cols, default 3) */
.pg--grid { padding: clamp(1rem, 0.6rem + 1vw, 1.5rem) var(--margin); display: grid; grid-template-columns: repeat(var(--cols, 3), 1fr); gap: clamp(0.8rem, 0.4rem + 1.4vw, 2rem); }
.pg--grid .pg__media { aspect-ratio: 1 / 1; }

/* quote — a large pull-quote */
.pg--quote { padding: clamp(2.6rem, 1.6rem + 3.5vw, 6rem) var(--margin); }
.pg--quote blockquote { font-family: var(--display); font-weight: 400; font-size: clamp(1.3rem, 0.95rem + 1.5vw, 2.2rem); line-height: 1.28; letter-spacing: -0.018em; max-width: 46ch; text-wrap: balance; color: var(--ink); }
.pg--quote cite { display: block; margin-top: 1.4rem; font-family: var(--mono); font-style: normal; font-size: var(--t-cap); text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-mute); }

/* video — full-bleed (default) or inset; media box mirrors pg--full */
.pg--video .pg__media { width: 100%; aspect-ratio: 16 / 9; }
.pg--video .pg__cap { padding: 0 var(--margin); }
.pg--video.pg--video-inset { padding: 0 var(--margin); }
.pg--video.pg--video-inset .pg__cap { padding: 0; }

/* image-text — image beside a text column (side=right flips the order) */
.pg--imgtext { padding: clamp(2rem, 1.2rem + 2vw, 2.75rem) var(--margin) 0; display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(1.4rem, 0.8rem + 2.5vw, 3.4rem); align-items: center; }
.pg--imgtext .pg__media { grid-column: 1 / span 7; aspect-ratio: 4 / 3; }
.pg--imgtext .pg-it__text { grid-column: 9 / span 4; }
.pg--imgtext.pg--right .pg__media { grid-column: 6 / span 7; }
.pg--imgtext.pg--right .pg-it__text { grid-column: 1 / span 4; grid-row: 1; }
/* phone treatment — media reads as a rounded device screen (landscape phone recording) */
.pg--imgtext-phone .pg__media { border-radius: clamp(1.1rem, 0.6rem + 1.4vw, 2.2rem); overflow: hidden; background: #000; box-shadow: 0 22px 50px rgba(0, 0, 0, 0.20); }
.pg-it__head { font-family: var(--display); font-weight: 600; font-size: clamp(1.2rem, 1rem + 1vw, 1.75rem); line-height: 1.12; letter-spacing: -0.02em; margin-bottom: 0.7rem; }
.pg-it__text p { font-size: var(--t-body); line-height: 1.55; color: var(--ink-soft); }
.pg-it__text p + p { margin-top: 0.9rem; }

/* split — one half full-bleed image/video, the other a small centered image/video (mirror with bleed:right) */
/* No forced 86vh: the bleed half carries the aspect of the frame it was composed in (inline
   aspect-ratio from blocks.json bleedAspect), so its crop matches Figma. align-items centres
   the shorter half against the taller one. */
.pg--split { display: grid; grid-template-columns: 1fr 1fr; align-items: center; background: var(--paper); }
.pg--split > .pg-split__bleed, .pg--split > .pg-split__center { min-width: 0; }   /* keep 1fr 1fr truly equal — don't let the bleed's intrinsic media width widen its column */
.pg--split .pg-split__bleed { position: relative; overflow: hidden; }
.pg--split .pg-split__bleed img, .pg--split .pg-split__bleed video { width: 100%; height: 100%; object-fit: cover; display: block; }
.pg--split .pg-split__center { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.9rem; padding: clamp(2rem, 6vw, 7rem); }
.pg--split .pg-split__c { position: relative; width: min(100%, 66%); overflow: hidden; background: var(--paper-2); }   /* relative: a slideshow's slides stack against this box */
.pg--split .pg-split__c img, .pg--split .pg-split__c video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* phone center — a device screen (image/video) in a rounded phone frame, floating on the paper (AI Creator) */
.pg--split .pg-split__c--phone { background: #000; width: min(100%, 58%); border-radius: clamp(1.7rem, 1rem + 2.4vw, 3.6rem); overflow: hidden; box-shadow: 0 26px 60px rgba(0, 0, 0, 0.22); }
.pg--split .pg-split__c--phone img, .pg--split .pg-split__c--phone video { object-fit: cover; }
/* blend — a transparent-framed center (e.g. a B&W scan) multiplied onto the paper, no grey box */
.pg--split .pg-split__c--blend-multiply { background: transparent; }
.pg--split .pg-split__c--blend-multiply img, .pg--split .pg-split__c--blend-multiply video { mix-blend-mode: multiply; }
/* tight split — center media flush against the bleed: no padding, fills the half (Deep Objects first set) */
.pg--split-tight { align-items: stretch; }
.pg--split-tight .pg-split__center { padding: 0; }
.pg--split-tight .pg-split__c { width: 100%; height: 100%; }
/* bare center — a transparent mockup (e.g. the phone): no grey box, contained, standing on the bottom edge, leaning toward the bleed */
.pg--split .pg-split__center--bare { padding: 0; }
.pg--split .pg-split__c--contain { width: 100%; height: 100%; background: transparent; overflow: visible; }
.pg--split .pg-split__c--contain img, .pg--split .pg-split__c--contain video { object-fit: contain; object-position: center bottom; }
.pg--split-br .pg-split__c--contain img, .pg--split-br .pg-split__c--contain video { object-position: right bottom; }
.pg--split-bl .pg-split__c--contain img, .pg--split-bl .pg-split__c--contain video { object-position: left bottom; }
.pg--split .pg-split__center--bottom { justify-content: flex-end; }   /* center media (e.g. a reduced phone) sits on the bottom edge */
.pg--split .pg-split__center .pg__cap { margin: 0; }
@media (max-width: 760px) {
  .pg--split { grid-template-columns: 1fr; min-height: 0; }
  .pg--split .pg-split__bleed { aspect-ratio: 4 / 3; }
  .pg--split .pg-split__center { padding: clamp(2.4rem, 12vw, 4rem) var(--margin); }
  .pg--split-tight .pg-split__center { padding: clamp(1.6rem, 8vw, 3rem) var(--margin); }
  .pg--split-tight .pg-split__c, .pg--split .pg-split__c--contain { height: auto; width: 100%; }
}

/* spacer — a quiet section break */
.pg--spacer { height: clamp(2rem, 4vw, 5rem); }
.pg--spacer.pg--sm { height: clamp(1rem, 2vw, 2.4rem); }
.pg--spacer.pg--lg { height: clamp(4rem, 8vw, 9rem); }
.pg + .pg--spacer, .pg--spacer + .pg { margin-top: 0; }

@media (max-width: 860px) {
  .pg--imgtext { grid-template-columns: 1fr; }
  .pg--imgtext .pg__media, .pg--imgtext.pg--right .pg__media { grid-column: 1 / -1; }
  .pg--imgtext .pg-it__text, .pg--imgtext.pg--right .pg-it__text { grid-column: 1 / -1; grid-row: auto; }
  .pg--text .pg-text__col { grid-column: 1 / -1; }   /* body copy full-width on mobile — not a narrow left-justified column */
  .pg--text p { max-width: none; }
}
@media (max-width: 600px) {
  .pg--trio { grid-template-columns: 1fr; }
  .pg--grid { grid-template-columns: repeat(2, 1fr); }
  .pg--text p { font-size: 1.14rem; line-height: 1.55; }   /* a touch larger so full-width body copy reads comfortably on phones */
}