/* ==========================================================================
   Master Prototype port — Tarde de Salsa at UCR ARTS ONLY.
   Ported directly from the approved standalone visual master
   (visual-prototype/index.html + style.css, CINTHIA_VISUAL_PROTOTYPE_REDESIGNED.zip).
   Loaded ONLY when single-project.php's $cinthia_is_master_prototype gate is true
   (this post's slug === 'tarde-de-salsa-at-ucr-arts') -- delete this <link> and this
   file to fully retire the prototype; nothing else on the site references it.

   Scoped entirely under .master-prototype (applied to <main>) so these selectors —
   several of them intentionally short/generic, matching the approved file's own names
   (.hero, .section, .credentials-row, etc.) — can never leak onto or collide with any
   other template's CSS.

   STRUCTURAL NOTE (strict parity pass, 2026-09-05): the approved reference's own cascade is
   DESKTOP-AS-BASE -- its unscoped rules already ARE the desktop grid values, then narrowed down
   via max-width:900px (tablet) and max-width:600px (phone). The first version of this port
   inverted that (mobile-first base + min-width:901px "add desktop"), which left the 768px tablet
   tier hitting neither ruleset correctly -- confirmed directly via getBoundingClientRect()
   (.gallery-section measured 3697px tall at 768px, vs. the reference's own 484px at the same
   width). This version follows the reference's own base/900/600 structure literally instead. */

.master-prototype{
  --mp-bg:#fbfaf7;--mp-paper:#fffdfa;--mp-text:#090b14;--mp-muted:#6f6c6b;--mp-line:#ded9d4;--mp-cream:#f8f2ef;
  --mp-burg:#74052a;--mp-burg2:#8b0634;--mp-gold:#f3a000;--mp-shadow:0 18px 44px rgba(65,48,40,.08);
  --mp-sans:'Manrope',Arial,Helvetica,sans-serif;--mp-serif:'Bricolage Grotesque',Georgia,serif;--mp-mono:'IBM Plex Mono',monospace;
  /* Single source of truth for hero-copy/hero-rail's clearance under the fixed header (home.css
     `header{position:fixed}`, real rendered height ~71.5px desktop/tablet, ~74px mobile -- close
     enough together that one value serves both without a separate mobile override). Deliberate
     editorial breathing room, not just "no longer overlapping": header height + ~35-38px visual
     gap, minus .hero's OWN 22px top padding (the row already starts 22px down before this value
     even applies) = this padding-top, applied to hero-copy/hero-rail so the first breadcrumb
     line -- not just the H1 -- clears the header with real intentional space above it. Shared by
     both single-project.php and taxonomy-practice-dimension.php (both load this one file), so
     the two stay synchronized by construction -- change this one value, both update together.
     Bumped 88px -> 96px (2026-09-05): the 38-40px measured clearance this produced was confirmed
     correct but still visually tight on direct inspection; +8px targets ~46-48px, desktop/tablet
     only per explicit scope (mobile's 88px override below is unchanged -- its ~39px clearance
     was not flagged). hero-copy and hero-rail both read this same token via the one shared rule
     below, so the whole breadcrumb/kicker/number/title/gold-rule/lede/Explore-link stack and the
     rail move down together as one block -- nothing here repositions the H1 alone.
     Bumped again 96px -> 108px (2026-09-05, same day): the 46.53px this produced measured
     correct on every one of 4 archives + 10 published Projects (confirmed identical to the
     sub-pixel across all of them -- align-self:start makes this genuinely content-independent,
     not a per-page coincidence), but still read as visually tight on direct production
     inspection. +12px targets ~56-60px. Desktop/tablet only, same as the prior bump -- mobile's
     88px override is untouched again (no mobile complaint this round). IMPORTANT: this value is
     load-bearing for measurement, not just layout -- a naive re-check immediately after
     navigation can read the PRE-reveal transform (.reveal starts translateY(16px) opacity:0,
     see the .reveal rule far below) or a browser-cached copy of this very file, either of which
     produces a false "still ~22px" or "still ~38px" reading. Verify by polling
     getComputedStyle(kicker) for opacity:1 + transform:none (real IntersectionObserver settling,
     never force the .in class by script) AND by fetching this file with cache:'no-store' to
     confirm the byte value actually served, before trusting any measured clearance. */
  --mp-hero-copy-clearance:108px;
  background:var(--mp-bg);color:var(--mp-text);font-family:var(--mp-sans);font-size:14px;line-height:1.45;
}
.master-prototype *{box-sizing:border-box}
.master-prototype a{color:inherit;text-decoration:none}
.master-prototype button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.master-prototype img{display:block;max-width:100%}
.master-prototype .mp-shell{width:min(904px,calc(100% - 72px));margin-inline:auto}

/* ---- hero (base = desktop) ---- */
.master-prototype .hero{padding:22px 0 26px}
.master-prototype .mp-hero-grid{display:grid;grid-template-columns:52.6% 34.6% 10.5%;column-gap:2.3%;align-items:center}
/* No Hero Image and no gallery-fallback image (single-project.php never renders
   .hero-media-wrap in that case): the copy column claims the freed width instead of leaving it
   blank -- same 34.6:10.5 copy:rail ratio as the media state, just rescaled to fill 100%. */
.master-prototype .mp-hero-grid.no-media{grid-template-columns:76.7% 23.3%}
.master-prototype .mp-hero-grid.no-media .hero-copy{padding-left:0}
.master-prototype .hero-media{position:relative;margin:0;border-radius:16px;overflow:hidden;aspect-ratio:1.53/1;background:#ddd}
/* Optional per-dimension focal-point + modest zoom (2026-09-05): --hero-focal-x/-y and --hero-zoom
   are set inline per hero (taxonomy-practice-dimension.php, from practice_hero_focal_x/_y/_zoom
   term meta) with these var() fallbacks (50%/50%/1) as the default -- a dimension with no custom
   value renders byte-identical to before this existed. object-position alone has almost no range
   when the source photo's own aspect ratio nearly matches this box's 1.53:1 (object-fit:cover
   then has only a few px of crop to move within, confirmed on Artistic Practice's artist.jpg:
   1145x763, aspect 1.501); --hero-zoom gives editors real room to work with on exactly that case
   by scaling the already-cover-fit image around the SAME focal point (transform-origin matches
   object-position exactly), rather than a second, independent crop step. Default 1 = no zoom. */
.master-prototype .hero-media img{width:100%;height:100%;object-fit:cover;object-position:var(--hero-focal-x,50%) var(--hero-focal-y,50%);transform:scale(var(--hero-zoom,1));transform-origin:var(--hero-focal-x,50%) var(--hero-focal-y,50%);transition:transform .8s cubic-bezier(.22,1,.36,1)}
@media(hover:hover){.master-prototype .hero-media-wrap:hover .hero-media img{transform:scale(calc(var(--hero-zoom,1) * 1.035))}}
.master-prototype .hero-media figcaption{position:absolute;left:16px;bottom:14px;color:white;font-size:8px;text-shadow:0 1px 4px #000;margin:0}
.master-prototype .watch-pill{position:absolute;right:14px;bottom:13px;background:rgba(8,8,11,.83);color:white;border-radius:999px;padding:7px 12px 7px 8px;display:flex;gap:7px;align-items:center;font-size:8px;line-height:1.25}
.master-prototype .play-ring{width:31px;height:31px;border:1.5px solid white;border-radius:50%;display:grid;place-items:center;font-size:10px}
.master-prototype .hero-copy{padding-left:2px}
/* Header-clearance fix (2026-09-08, revised same day for real editorial breathing room, not
   just non-overlap): .mp-hero-grid is align-items:center, and its row height is set by the
   tallest column -- hero-media (or, in the .no-media state, hero-copy itself, since nothing
   taller exists to define the row). .hero-copy's own content height varies per real project
   (kicker length, whether a subtitle/lede exists), so centering a SHORTER block leaves more
   empty space above it and a TALLER one less -- purely accidental distance from the top. The
   header is position:fixed (~71.5px tall) and overlays the top of every page regardless, so
   whichever project's copy centers closest to the top gets its ENTIRE copy stack (breadcrumb,
   kicker, title, lede, Explore link, rail) pushed up toward or under it -- confirmed exactly this
   way on Tarde de Salsa and on Dance with the World's breadcrumb line, the same root cause
   already found and fixed for the four Practice Dimension archives. align-self:start makes
   hero-copy/hero-rail's position independent of their own content height instead of centered;
   --mp-hero-copy-clearance (defined above) is what actually guarantees the deliberate gap below
   the header, not merely clearing it. Reset to 0 under the 600px mobile breakpoint below, where
   .mp-hero-grid already becomes a stacked flex column and was never clipped (the image flows
   before the text there on its own) -- except .no-media, which still needs it there too, see
   that breakpoint's own comment. */
.master-prototype .hero-copy,
.master-prototype .hero-rail{align-self:start;padding-top:var(--mp-hero-copy-clearance)}
/* Media-position robustness fix (2026-09-05): the comment above this one used to claim
   "hero-media is untouched -- it's still the tallest column defining row height", which was
   only true when hero-copy's own content happened to be shorter than hero-media. It measurably
   ISN'T on Research/Cultural Curation, whose longer lede text makes .hero-copy taller than
   .hero-media (310.78px fixed by its own aspect-ratio) -- with the row's height then set by
   hero-copy instead, align-items:center (still governing hero-media-wrap, the one column this
   rule didn't touch) re-centers the fixed-height image within that now-taller row, shifting it
   down by (rowHeight-mediaHeight)/2. Confirmed directly: Pedagogy/Artistic Practice (shorter
   copy than media) sat at wrap-top:22px, Research/Cultural Curation (taller copy) sat at
   ~46px -- a real, content-length-dependent drift, not a per-dimension design choice. Fixing it
   the same way as hero-copy/hero-rail above: align-self:start pins hero-media-wrap to the row's
   own top (=.hero's 22px padding) regardless of how tall hero-copy's text ever grows, on any
   future dimension or project. Image dimensions/composition/aspect-ratio are untouched -- this
   only removes an accidental vertical offset the column's height never earned. */
.master-prototype .hero-media-wrap{align-self:start}
.master-prototype .hero-kicker{display:flex;align-items:center;gap:7px;flex-wrap:wrap;color:#716e70;font-family:var(--mp-mono);font-size:9px;letter-spacing:.08em;margin:0;text-transform:uppercase}
.master-prototype .hero-kicker .dot{width:5px;height:5px;border-radius:50%;background:var(--mp-gold);display:inline-block;flex:none}
.master-prototype .number-chip{display:inline-flex;align-items:center;justify-content:center;background:var(--mp-gold);color:white;border-radius:999px;min-width:21px;height:14px;padding:0 5px;font-weight:700;font-style:normal}
.master-prototype .mp-hero-title{font-family:var(--mp-serif);font-size:39px;line-height:.99;letter-spacing:-.03em;margin:16px 0 12px;font-weight:600}
.master-prototype .gold-rule{display:block;width:43px;height:3px;background:var(--mp-gold);margin-bottom:13px}
.master-prototype .hero-subtitle{font-size:11px;color:#666165;margin:0 0 6px;font-weight:600}
.master-prototype .hero-lede{font-size:11px;line-height:1.55;color:#666165;margin:0 0 10px;max-width:38em}
.master-prototype .hero-meta{font-family:var(--mp-mono);font-size:9px;letter-spacing:.04em;color:var(--mp-muted);margin:0 0 10px}
.master-prototype .text-link{color:var(--mp-burg);font-size:9px;text-decoration:underline;text-underline-offset:3px;font-weight:600;display:inline-flex;align-items:center;gap:5px}
.master-prototype .text-link span,.master-prototype .text-link svg{color:var(--mp-gold)}
.master-prototype .hero-rail{align-self:stretch;border-left:1px solid #e0a11e;padding-left:24px;display:flex;flex-direction:column;justify-content:center;gap:13px}
.master-prototype .hero-rail ul{list-style:none;padding:0;margin:0;font-family:var(--mp-mono);font-size:9px;line-height:1.85;letter-spacing:.1em;color:#6c6969;text-transform:uppercase}
.master-prototype .rail-spark{color:var(--mp-gold);font-size:17px}
.master-prototype .rail-note{font-family:var(--mp-serif);font-style:italic;font-size:16px;line-height:1.3;margin:0;color:#35405c}
.master-prototype .rail-note cite{display:block;margin-top:.5em;font-family:var(--mp-mono);font-style:normal;font-size:9px;color:#747073}

/* ---- section scaffolding ---- */
.master-prototype .section{padding:0 0 20px}
.master-prototype .section-label{height:28px;display:flex;align-items:center;gap:8px;font-size:11px;font-weight:700;letter-spacing:.05em;color:#5d1330;text-transform:uppercase;margin:0}
.master-prototype .section-label .sec-num{font-size:13px;color:var(--mp-gold)}
.master-prototype .section-label i{height:1px;flex:1;min-width:2rem;background:#a66d7f;display:block}

/* ---- About this Practice (optional extended narrative, 2026-09-06) ----
   Deliberately kept OUT of the hero: practice_lede lives inside .hero-copy, a fixed-composition
   grid column tuned for a short line or two -- growing it to fit a real multi-paragraph story
   would drag the hero's own proportions (image bleed, --mp-hero-copy-clearance, hero-rail
   alignment) out of shape as Cinthia adds more text over time. This section is its own,
   auto-height, ordinary reading column instead -- no fixed height, nothing here can clip real
   content, and it renders nothing at all when practice_narrative is empty (no placeholder,
   no gap). 65ch keeps a real paragraph at a readable line length regardless of viewport width,
   same target this session already uses for the Credits & Collaborators copy. */
.master-prototype .narrative-prose{max-width:65ch;margin-top:20px}
.master-prototype .narrative-prose p{font-size:13px;line-height:1.7;color:var(--mp-text);margin:0 0 16px}
.master-prototype .narrative-prose p:last-child{margin-bottom:0}

/* ---- Areas of Practice (optional, 2026-09-06) ----
   A plain responsive card grid -- 3 fixed real areas today (University/Community/Personal &
   Community Development on Pedagogy), but term-driven so a future dimension with its own real
   areas (or a 4th one added later) needs no template change, only new rows in wp-admin. */
.master-prototype .areas-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:22px}
.master-prototype .area-card{border:1px solid var(--mp-line);border-radius:12px;padding:22px 20px;background:var(--mp-paper)}
.master-prototype .area-title{font-family:var(--mp-serif);font-size:16px;font-weight:600;margin:0 0 10px;color:var(--mp-burg)}
.master-prototype .area-body p{font-size:12.5px;line-height:1.65;color:var(--mp-muted);margin:0 0 10px}
.master-prototype .area-body p:last-child{margin-bottom:0}

/* ---- Courses & Workshops (optional, 2026-09-06) ----
   A vertical list rather than a grid: real course descriptions vary a lot in length, and a grid
   of equal-height cards would either crop real content or force awkward equal-height stretching.
   Only the teaser is always visible -- the full description lives behind a native <details>/
   <summary> disclosure (no JS: keyboard- and screen-reader-accessible for free, and immune to any
   future script change breaking the toggle). Looks the same with 1, 3 or 10+ real rows since
   nothing here is sized for a fixed count. */
.master-prototype .courses-list{display:flex;flex-direction:column;gap:0;margin-top:22px}
.master-prototype .course-card{padding:24px 0;border-bottom:1px solid var(--mp-line)}
.master-prototype .course-card:first-child{padding-top:0}
.master-prototype .course-card:last-child{border-bottom:0;padding-bottom:0}
.master-prototype .course-category{font-size:9px;letter-spacing:.06em;color:var(--mp-gold);text-transform:uppercase;margin:0 0 6px}
.master-prototype .course-title{font-family:var(--mp-serif);font-size:17px;font-weight:600;line-height:1.3;margin:0 0 8px;max-width:52ch}
.master-prototype .course-teaser{font-size:12.5px;line-height:1.6;color:var(--mp-muted);margin:0;max-width:60ch}
.master-prototype .course-details{margin-top:10px}
.master-prototype .course-toggle{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:5px;color:var(--mp-burg);font-size:11px;font-weight:600;text-decoration:underline;text-underline-offset:3px}
.master-prototype .course-toggle::-webkit-details-marker{display:none}
.master-prototype .course-toggle-arrow{transition:transform .2s ease;color:var(--mp-gold)}
.master-prototype .course-details[open] .course-toggle-arrow{transform:rotate(90deg)}
.master-prototype .course-details[open] .course-toggle{margin-bottom:12px}
.master-prototype .course-description{max-width:65ch}
.master-prototype .course-description p{font-size:12.5px;line-height:1.7;color:var(--mp-text);margin:0 0 14px}
.master-prototype .course-description p:last-child{margin-bottom:0}
.master-prototype .course-description ul{margin:0 0 14px;padding-left:18px}
.master-prototype .course-description li{font-size:12.5px;line-height:1.65;color:var(--mp-text);margin-bottom:6px}

@media(max-width:900px){
  .master-prototype .areas-grid{grid-template-columns:1fr 1fr;gap:16px}
}
@media(max-width:600px){
  .master-prototype .areas-grid{grid-template-columns:1fr}
  .master-prototype .course-title{font-size:15.5px}
}

/* ---- gallery (base = desktop 4-column mosaic) ---- */
.master-prototype .gallery-topline{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem}
.master-prototype .gallery-tools{display:flex;align-items:center;gap:22px}
.master-prototype .round-nav{display:flex;gap:9px}
.master-prototype .round-nav button{width:28px;height:28px;border:1px solid #d8d2cf;border-radius:50%;display:grid;place-items:center;font-size:12px;background:var(--mp-paper)}
.master-prototype .gallery-grid{display:grid;grid-template-columns:1.7fr .92fr .98fr 1.18fr;grid-template-rows:132px 132px;grid-auto-rows:132px;gap:8px}
.master-prototype .gallery-card-extra{grid-column:span 2}
.master-prototype .gallery-card{position:relative;margin:0;border-radius:8px;overflow:hidden;background:#ddd;aspect-ratio:auto}
.master-prototype .gallery-card>figure{margin:0;height:100%;position:relative}
.master-prototype .gallery-card img{width:100%;height:100%;object-fit:cover;transition:transform .65s cubic-bezier(.2,.7,.2,1)}
/* Two real photos absorbed into one named slot (g-top, g-small-3) rather than a 3rd grid row --
   each tile keeps its own small radius/gutter so it still visibly reads as two distinct real
   photographs, not one stretched/cropped image. */
.master-prototype .gallery-card-pair{display:flex;gap:6px}
.master-prototype .gallery-card-pair-tile{flex:1;min-width:0;position:relative;overflow:hidden;border-radius:6px;height:100%}
.master-prototype .gallery-card-pair-tile img{width:100%;height:100%;object-fit:cover}
.master-prototype .media-shade{position:absolute;inset:45% 0 0;background:linear-gradient(transparent,rgba(0,0,0,.72))}
.master-prototype .media-copy{position:absolute;left:13px;bottom:10px;color:white;display:flex;flex-direction:column;gap:2px;font-size:10px;line-height:1.2}
.master-prototype .media-copy small{font-family:var(--mp-mono);font-size:8px;margin-bottom:5px;opacity:.85}
.master-prototype .media-copy strong{font-size:11px}
@media(hover:hover){.master-prototype .gallery-card:hover img{transform:scale(1.035)}}
.master-prototype .g-main{grid-column:1;grid-row:1/3}
.master-prototype .g-top{grid-column:2/4;grid-row:1}
.master-prototype .g-wide{grid-column:4;grid-row:1}
.master-prototype .g-small-1{grid-column:2;grid-row:2}
.master-prototype .g-small-2{grid-column:3;grid-row:2}
.master-prototype .g-small-3{grid-column:4;grid-row:2}
/* An 8-photo project's 2 extra photos (beyond the reference's own 6-slot layout) are absorbed
   AS PAIRS into the g-top and g-small-3 slots (see the PHP slot-assignment comment in
   single-project.php) rather than added as a 3rd grid row -- a 3rd row at this same 132px height
   cost 130px of extra page height with no reference equivalent, found via direct measurement
   during the 2026-09-05 geometry audit. No third-row rule exists here anymore. */

/* ---- testimonials (base = desktop 3-column: anchor + 2 supporting) ---- */
.master-prototype .testimonial-layout{display:grid;grid-template-columns:88px 1fr;gap:16px}
.master-prototype .testimonial-controls{padding-top:28px}
.master-prototype .testimonial-controls .round-nav{margin-bottom:23px}
.master-prototype .tc-count{display:flex;align-items:center;gap:6px;font-family:var(--mp-mono);font-size:10px;color:#777}
.master-prototype .tc-count b{font-size:11px;color:#41404a}
.master-prototype .tc-track{display:grid;grid-template-columns:1.55fr 1fr 1fr;gap:16px}
.master-prototype .testimonial-card{display:none;min-height:153px;margin:0;border:1px solid #e1dbd6;border-radius:12px;padding:27px 26px 20px;position:relative;background:var(--mp-paper);flex-direction:column;justify-content:space-between}
.master-prototype .testimonial-card.is-active,.master-prototype .testimonial-card.is-support-1,.master-prototype .testimonial-card.is-support-2{display:flex}
/* 1 or 2 real testimonials: no controls column, no carousel roles -- every real card is simply
   shown, at every breakpoint, sized to share the row evenly. Wins over the display:none default
   above (and over the mobile "only .is-active shows" rule further down) by naming the plain
   .testimonial-card selector explicitly rather than relying on source order. */
.master-prototype .testimonial-section[data-count="1"] .testimonial-layout,
.master-prototype .testimonial-section[data-count="2"] .testimonial-layout{grid-template-columns:1fr}
.master-prototype .testimonial-section[data-count="1"] .tc-track{grid-template-columns:1fr}
.master-prototype .testimonial-section[data-count="2"] .tc-track{grid-template-columns:1fr 1fr}
.master-prototype .testimonial-section[data-count="1"] .testimonial-card,
.master-prototype .testimonial-section[data-count="2"] .testimonial-card{display:flex}
.master-prototype .testimonial-card.is-active{order:0}
.master-prototype .testimonial-card.is-support-1{order:1}
.master-prototype .testimonial-card.is-support-2{order:2}
.master-prototype .mp-testimonial-anchor{background:linear-gradient(120deg,#f7efeb,#fffdfa);border-color:#f0e8e2}
.master-prototype .quote-mark{position:absolute;left:24px;top:16px;font-family:var(--mp-serif);font-size:44px;line-height:1;color:var(--mp-gold);font-weight:700}
.master-prototype .testimonial-card p{margin:16px 0 13px 36px;font-size:12px;line-height:1.27;font-weight:500}
.master-prototype .mp-testimonial-anchor p{font-size:16px;line-height:1.27;margin-left:48px}
.master-prototype .testimonial-card cite{font-style:normal;margin-left:36px;display:flex;flex-direction:column;gap:3px}
.master-prototype .mp-testimonial-anchor cite{margin-left:48px}
.master-prototype .testimonial-card cite b{font-size:7.5px}
.master-prototype .testimonial-card cite span{font-size:8px;color:#7b7776}
.master-prototype .tc-expand{margin:0 0 0 36px;padding:0;border:0;background:none;font:inherit;font-size:10px;font-weight:600;letter-spacing:.02em;text-decoration:underline;text-underline-offset:2px;color:var(--mp-gold);cursor:pointer;align-self:flex-start}
.master-prototype .mp-testimonial-anchor .tc-expand{margin-left:48px}
@keyframes mpTcIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:no-preference){
  .master-prototype .testimonial-card.is-active,.master-prototype .testimonial-card.is-support-1,.master-prototype .testimonial-card.is-support-2{animation:mpTcIn .5s cubic-bezier(.22,1,.36,1) both}
  .master-prototype .testimonial-card.is-support-1{animation-delay:.08s}
  .master-prototype .testimonial-card.is-support-2{animation-delay:.16s}
}

/* ---- video (base = desktop 3-column) ---- */
.master-prototype .video-layout{display:grid;grid-template-columns:40% 28% 1fr;gap:23px;align-items:center}
/* Only one real video -> no sidebar playlist: the freed rail collapses so the copy takes its
   place, the featured frame keeps its exact size and aspect (2026-09-10 client feedback). */
.master-prototype .video-layout.is-single{grid-template-columns:40% 1fr}
.master-prototype .video-frame{aspect-ratio:1.82/1;border-radius:8px;overflow:hidden;position:relative;background:#111;cursor:pointer}
.master-prototype .video-frame-media{position:absolute;inset:0}
.master-prototype .video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.master-prototype .video-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.12),rgba(0,0,0,.05))}
.master-prototype .big-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:44px;height:44px;background:white;border-radius:50%;display:grid;place-items:center;padding-left:3px;color:#181218;font-size:16px;box-shadow:0 3px 15px rgba(0,0,0,.18);border:0}
@media(hover:hover){.master-prototype .big-play:hover{background:var(--mp-gold)}}
@media(prefers-reduced-motion:no-preference){.master-prototype .big-play{transition:background .25s,transform .25s}}
.master-prototype .video-copy{align-self:start;padding-top:4px}
.master-prototype .featured{font-size:9px;font-weight:700;display:flex;gap:7px;align-items:center;text-transform:uppercase;letter-spacing:.06em;color:var(--mp-muted)}
.master-prototype .featured .dot{width:5px;height:5px;border-radius:50%;background:var(--mp-gold);display:inline-block}
.master-prototype .video-copy h2{font-family:var(--mp-serif);font-size:22px;line-height:1.1;margin:9px 0 7px;letter-spacing:-.02em;font-weight:600}
.master-prototype .video-copy .meta{font-family:var(--mp-mono);font-size:10px;color:#777;margin:0 0 12px}
.master-prototype .video-copy>p:not(.meta){font-size:12px;line-height:1.55;color:#716d6b;margin:0 0 14px;max-width:32em}
.master-prototype .video-copy>a{color:var(--mp-gold);font-weight:600;text-decoration:underline;text-underline-offset:3px;font-size:11px}
.master-prototype .video-list{border-left:1px solid #e3dcda;border-top:0;padding:0 0 0 18px;display:flex;flex-direction:column;gap:10px}
.master-prototype .video-item{display:grid;grid-template-columns:61px 1fr;gap:10px;align-items:center;min-height:53px;position:relative;padding:0 7px}
.master-prototype .video-item[data-video-select]{cursor:pointer}
.master-prototype .video-item[data-video-select]:focus-visible{outline:2px solid var(--mp-gold);outline-offset:2px;border-radius:8px}
.master-prototype .video-item.active{border:1px solid #f2c574;border-radius:8px;padding:7px}
.master-prototype .video-item img{width:61px;height:43px;object-fit:cover;border-radius:5px}
.master-prototype .mini-play{position:absolute;left:25px;top:18px;width:19px;height:19px;background:white;border-radius:50%;display:grid;place-items:center;font-size:8px}
.master-prototype .video-item.active .mini-play{left:31px;top:25px}
.master-prototype .video-item div{display:flex;flex-direction:column;gap:4px}
.master-prototype .video-item b{font-size:10px;line-height:1.25;font-weight:600}
.master-prototype .video-item small{font-size:9px;color:#85807e}
.master-prototype .video-item em{font-style:normal;font-size:8px;color:var(--mp-gold);background:#fff3dc;border-radius:999px;padding:4px 8px;white-space:nowrap;display:inline-block;margin-top:2px}

/* ---- more projects (base = desktop 5-column: arrow/card/card/card/arrow) ---- */
.master-prototype .project-strip{display:flex;flex-direction:column;gap:14px}
.master-prototype .project-strip-row{display:grid;grid-template-columns:31px 1fr 1fr 1fr 31px;align-items:center;gap:14px}
.master-prototype .circle-arrow{width:31px;height:31px;border:1px solid #d8d2cf;border-radius:50%;display:grid;place-items:center;font-size:14px;background:var(--mp-paper)}
@media(hover:hover){.master-prototype .circle-arrow:hover,.master-prototype .round-nav button:hover{border-color:var(--mp-burg);color:var(--mp-burg)}}
.master-prototype .mp-project-card{min-width:0;border:1px solid #e1dcd8;border-radius:8px;padding:8px;display:grid;grid-template-columns:82px 1fr 16px;gap:11px;align-items:center;background:var(--mp-paper)}
@media(hover:hover){.master-prototype .mp-project-card:hover{transform:translateY(-2px);border-color:#cdbfc0}}
@media(prefers-reduced-motion:no-preference){.master-prototype .mp-project-card{transition:transform .3s cubic-bezier(.22,1,.36,1),border-color .3s}}
.master-prototype .mp-project-card img{width:82px;height:83px;object-fit:cover;border-radius:5px}
.master-prototype .mp-project-card h3{font-family:var(--mp-serif);font-size:11px;margin:0 0 7px;line-height:1.2;font-weight:600;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.master-prototype .mp-project-card p{font-family:var(--mp-mono);font-size:7.5px;color:#85807e;margin:0 0 9px}
.master-prototype .tag{display:inline-block;border:1px solid #dcd7d4;border-radius:999px;padding:3px 8px;font-size:6.5px;color:#6e6a68;margin-right:4px}
.master-prototype .project-go{font-size:15px;font-weight:400;justify-self:end}
.master-prototype .mp-project-card-all{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:.35rem;background:var(--mp-cream);color:var(--mp-burg)}
.master-prototype .mp-project-card-all-label{font-family:var(--mp-mono);font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;margin-top:.4rem}
.master-prototype .mp-project-card-all-sub{font-size:9px;color:var(--mp-muted)}

/* ---- credentials (base = desktop 4-column row) ---- */
.master-prototype .credentials-row{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}
.master-prototype .credentials-row article{border:1px solid #e2dcd8;border-radius:10px;padding:16px 15px 13px;min-height:89px;background:var(--mp-paper);margin:0}
.master-prototype .credentials-row h2,.master-prototype .credentials-row h3,.master-prototype .credential-name{font-family:var(--mp-serif);font-size:11px;margin:0 0 7px;line-height:1.25;font-weight:600}
.master-prototype .credentials-row small,.master-prototype .credential-meta{font-family:var(--mp-mono);font-size:6.7px;color:#8a8582;letter-spacing:.04em;display:block}
.master-prototype .credentials-row p,.master-prototype .credential-context{font-size:8.5px;margin:7px 0 0}
.master-prototype .credentials-row a,.master-prototype .credential-link{display:inline-block;margin-top:3px;color:var(--mp-gold);font-size:8px;text-decoration:underline;text-underline-offset:2px}

/* ---- Documentation (base = desktop) ----
   Media-figure photos only now (2026-09-05) -- Collaborators moved to its own "Credits &
   Collaborators" section below, so this is always the single-column is-media-only composition;
   is-split/is-collab-only (the old collaborators-sharing-this-layout variants) no longer exist. */
.master-prototype .supplementary-layout{display:grid;gap:44px;align-items:start;margin-top:26px}
.master-prototype .supplementary-layout.is-media-only{grid-template-columns:1fr}

.master-prototype .supplementary-media{display:flex;flex-direction:column;gap:10px}
.master-prototype .supplementary-media-figure{position:relative;margin:0;border-radius:10px;overflow:hidden;background:#ddd}
.master-prototype .supplementary-media-figure img{width:100%;height:100%;object-fit:cover;display:block}
.master-prototype .supplementary-media-figure.is-anchor{aspect-ratio:3/4}
.master-prototype .is-media-only .supplementary-media-figure.is-anchor{aspect-ratio:16/10}
.master-prototype .supplementary-media-figure.is-support{aspect-ratio:16/9}
.master-prototype .supplementary-media-figure figcaption{position:absolute;left:0;right:0;bottom:0;margin:0;padding:16px 18px;background:linear-gradient(transparent,rgba(0,0,0,.75));color:#fff;font-size:10.5px;font-weight:600;line-height:1.4}

/* ---- Event Flyer (2026-09-10, client feedback item 6) ----
   A real, approved event flyer is poster artwork, not a cropped photo: it is shown whole
   (object-fit isn't needed -- the <img> keeps its own aspect ratio), sized like a physical flyer
   on the page, on a plain surface so it reads as a document rather than a design element. Reuses
   the same restrained treatment src/pages.css's .is-flyer-evidence already established for the
   legacy in-content rendering. */
.master-prototype .flyer-layout{margin-top:26px;display:flex;flex-wrap:wrap;gap:34px}
.master-prototype .flyer-layout.is-single{justify-content:flex-start}
.master-prototype .flyer-figure{margin:0;max-width:26rem;flex:0 1 26rem;background:var(--cream,#fcfcfc);border:1px solid rgba(2,4,15,.12);border-radius:10px;padding:14px;box-shadow:0 8px 20px rgba(0,0,0,.08)}
.master-prototype .flyer-figure img{width:100%;height:auto;display:block;border-radius:4px}
.master-prototype .flyer-figure figcaption{margin-top:12px;color:var(--muted,#8d8583);font-size:11px;font-weight:600;line-height:1.5}
@media (max-width:640px){.master-prototype .flyer-layout{gap:22px}.master-prototype .flyer-figure{flex-basis:100%;max-width:100%}}

/* ---- Credits & Collaborators (2026-09-05, panel redesign 2026-09-06) ----
   Replaces the old always-off "Collaborators & Documentation" combined section (collab-credit-*
   classes, is-collab-only) entirely -- no two competing collaborator presentations.

   Visual-review correction (2026-09-06): a first pass made the ENTIRE <section> burgundy,
   full shell width -- on a credits-only project (Ritwal) that read as a large, mostly-empty red
   band, and because the footer right below is ALSO burgundy, the two visually fused into one
   oversized red mass with no visible seam. Fixed by moving the brand-burgundy treatment onto an
   INSET .cc-panel instead: the outer <section>/.section-label stay on the page's normal white
   background (default section-label styling, same as Gallery/Credentials/etc. -- no color
   override needed here anymore), and only the inner panel carries burgundy + cream, sized to
   its own real content rather than the full section width/height. .credits-collab-section's own
   extra bottom padding (below) is the deliberate white gap that keeps this panel and the
   burgundy footer reading as two separate components, not one continuous field. */
.master-prototype .credits-collab-section{padding-bottom:64px}
.master-prototype .cc-panel{background:linear-gradient(115deg,var(--mp-burg),var(--mp-burg2));color:var(--mp-cream);border-radius:20px;padding:44px 48px;margin-top:22px}
.master-prototype .cc-layout{display:grid;gap:48px}
/* Credits left, Collaborators right with more visual weight (wider column) -- an intentional
   two-zone composition, not two independent stacked lists. */
.master-prototype .cc-layout.has-both{grid-template-columns:1fr 1.6fr;align-items:start}
/* Credits-only (no collaborators, State B): centered within the panel instead of pinned to the
   left edge with the whole right side of the panel sitting empty -- a solid burgundy block with
   nothing to its right read as unfinished, not compact. Centering (rather than, say, shrinking
   the panel itself) keeps one panel-sizing rule for every state. */
.master-prototype .cc-layout.is-credits-only{display:flex;justify-content:center}
.master-prototype .cc-layout.is-credits-only .cc-credits{width:100%;max-width:440px}
/* Visual-review refinement (2026-09-06): a single real credit (Ritwal) still read as stretched --
   the default row puts name and role at opposite ends via justify-content:space-between, which
   only reads as intentional when it's one entry among several filling a real list. Scoped to
   .is-credits-only only (never .has-both or a multi-credit-only project's later rows) so this
   doesn't touch any other state: role sits directly under the name with a tight, deliberate gap,
   and the panel's own vertical padding shrinks slightly since a stacked single row needs less
   room to feel complete than the wider two-column states do. */
.master-prototype .cc-panel.is-credits-only{padding-top:32px;padding-bottom:32px}
.master-prototype .cc-layout.is-credits-only .cc-credits-list{gap:14px}
.master-prototype .cc-layout.is-credits-only .cc-credits-row{flex-direction:column;align-items:flex-start;gap:3px}
.master-prototype .cc-layout.is-credits-only .cc-credits-row dd{text-align:left}
.master-prototype .cc-subhead{font-family:var(--mp-mono);font-size:9.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(248,242,239,.62);margin:0 0 14px;display:flex;align-items:center;gap:7px}
.master-prototype .cc-subhead::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--mp-gold);display:inline-block;flex:none}
/* Small shared accent, one rhythm on both sides of the panel (Credits and Collaborators each get
   one) -- the same visual grammar as the hero's own .gold-rule, so hierarchy reads as "the same
   design system, quieter register" rather than a new motif invented just for this section. */
.master-prototype .cc-accent-rule{display:block;width:28px;height:2px;background:var(--mp-gold);margin:0 0 20px}

/* Capped so a credits-only project doesn't stretch each row edge to edge -- name and role would
   sit awkwardly far apart. Narrower than this in the paired layout already (~1fr of a 1:1.6
   split), so this only ever constrains the standalone (State B) case. */
.master-prototype .cc-credits-list{margin:0;display:flex;flex-direction:column;gap:16px;max-width:360px}
.master-prototype .cc-layout.is-credits-only .cc-credits-list{max-width:none}
.master-prototype .cc-credits-row{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding-bottom:16px;border-bottom:1px solid rgba(248,242,239,.16)}
.master-prototype .cc-credits-row:last-child{border-bottom:0;padding-bottom:0}
.master-prototype .cc-credits-row dt{font-family:var(--mp-serif);font-size:19px;font-weight:600;margin:0}
.master-prototype .cc-credits-row dd{font-family:var(--mp-mono);font-size:9.5px;letter-spacing:.05em;text-transform:uppercase;color:rgba(248,242,239,.68);margin:0;text-align:right;flex:none}

/* Real collaborator logos are any native colorway (confirmed: dark charcoal/teal, pure black) --
   a light frosted tile behind the mark, not this panel's own burgundy showing through it, is what
   keeps an arbitrary full-color logo legible without a separate white/monochrome derivative
   asset. Grid, not flex-wrap: auto-fit + minmax means exactly 2 real collaborators split the full
   row 50/50, while 3+ wrap to as many per row as the minmax floor allows.

   Card treatment (2026-09-06, restrained per visual review): the panel itself stays solid
   burgundy -- glass is scoped to these cards only, and deliberately quiet: a faint lightened
   surface (not the stronger .08 opacity/14px blur/32px-spread shadow the first pass used, which
   read as a "tech UI" floating panel rather than an editorial card), a thin light border, one
   soft 1px inset highlight along the top edge (the "gentle highlight" a real glass surface catches
   from above), and a shorter, softer drop shadow that grounds the card without lifting it too far
   off the burgundy. */
/* minmax floor checked against the tightest real case: 904px shell, 48px panel padding, 1:1.6
   split, 48px cc-layout gap -> collaborators column is ~468px. 2*230+22 (a prior value) exceeded
   that and silently collapsed 2 real cards to one per row -- 210 leaves real margin (2*210+22=442). */
.master-prototype .cc-collab-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:22px}
.master-prototype .cc-collab-card{display:flex;flex-direction:column;gap:18px;background:rgba(248,242,239,.055);border:1px solid rgba(248,242,239,.15);border-radius:16px;padding:28px 26px;backdrop-filter:blur(6px);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 8px 20px rgba(0,0,0,.13)}
.master-prototype .cc-collab-logo{display:flex;align-items:center;justify-content:center;height:58px;background:rgba(248,242,239,.95);border-radius:10px;padding:0 20px;align-self:stretch}
.master-prototype .cc-collab-logo-img{height:calc(30px * var(--logo-scale,1));width:auto;max-width:100%;object-fit:contain;display:block;margin:0 auto}
.master-prototype .cc-collab-info b{display:block;font-family:var(--mp-serif);font-size:17px;font-weight:600;line-height:1.3;margin-bottom:4px}
/* No logo tile to anchor the card's top -- the name itself carries that visual weight instead,
   so a text-only card still reads as composed rather than as a card missing its image. */
.master-prototype .cc-collab-card.is-text-only .cc-collab-info b{font-size:21px}
.master-prototype .cc-collab-info span{display:block;font-family:var(--mp-mono);font-size:9px;letter-spacing:.04em;text-transform:uppercase;color:rgba(248,242,239,.6)}
.master-prototype .cc-collab-info p{font-size:11px;line-height:1.6;color:rgba(248,242,239,.78);margin:8px 0 0}
.master-prototype .cc-collab-info a{display:inline-block;margin-top:8px;color:var(--mp-gold);font-size:9.5px;font-weight:600;text-decoration:underline;text-underline-offset:2px}

/* ---- footer (base = desktop fixed-height row) ---- */
.master-prototype .closing{height:130px;position:relative;overflow:hidden;background:linear-gradient(115deg,#700021,#970034);color:white}
.master-prototype .footer-lines{position:absolute;inset:0;width:100%;height:100%;opacity:.12;pointer-events:none}
.master-prototype .footer-lines path{fill:none;stroke:white;stroke-width:1}
.master-prototype .closing .mp-shell{height:100%}
.master-prototype .footer-grid{height:100%;display:grid;grid-template-columns:1fr 1.4fr 1fr;align-items:center;position:relative;z-index:1;text-align:left;gap:0}
.master-prototype .footer-brand{display:flex;gap:11px;align-items:center;justify-content:flex-start}
.master-prototype .footer-brand b{font-size:11px;display:block;font-family:var(--mp-serif)}
.master-prototype .footer-brand small{display:block;font-size:9.8px;line-height:1.5;margin-top:2px;color:#f1d9df;font-family:var(--mp-mono)}
.master-prototype .footer-cta{text-align:center}
.master-prototype .footer-cta p{font-family:var(--mp-serif);font-style:italic;font-size:11px;line-height:1.45;margin:0 0 15px}
.master-prototype .footer-cta a{display:inline-flex;background:var(--mp-gold);color:#1b1211;border-radius:999px;padding:10px 23px;font-size:8.4px;font-weight:700}
@media(hover:hover){.master-prototype .footer-cta a:hover{transform:scale(1.04)}}
@media(prefers-reduced-motion:no-preference){.master-prototype .footer-cta a{transition:transform .3s cubic-bezier(.22,1,.36,1)}}
.master-prototype .footer-right{justify-self:end;text-align:right}
.master-prototype .footer-right ul{list-style:none;padding:0;margin:0 0 7px;font-family:var(--mp-mono);font-size:9.8px;line-height:1.5;letter-spacing:.06em;text-transform:uppercase}
.master-prototype .footer-right .spark{display:block;margin-bottom:8px}
.master-prototype .socials{display:flex;gap:13px;justify-content:flex-end}
.master-prototype .social-link{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border:1px solid rgba(252,252,252,.3);border-radius:50%;color:#fff}
@media(hover:hover){.master-prototype .social-link:hover{border-color:var(--mp-gold);color:var(--mp-gold)}}
@media(prefers-reduced-motion:no-preference){.master-prototype .social-link{transition:border-color .25s,color .25s}}

/* ---- credits + back-link, folded into the footer's own brand column ----
   Real data (who made this, wayfinding back to the dimension) that the approved reference has no
   dedicated section for. Rendered as a second <small> immediately after the identity line inside
   .footer-brand. Sized on its own now (2026-09-07 typography refinement) rather than inheriting
   the identity line's size via the shared .footer-brand small selector above -- a real link
   benefits from reading slightly more comfortably at normal zoom than a purely decorative
   descriptor line does, so the two are no longer required to move together. The extra `small`
   type selector here matches .footer-brand small's own specificity exactly (not just a bare
   .footer-meta class), so this is a deliberate, unambiguous override, not a source-order
   accident. */
.master-prototype .footer-brand small.footer-meta{font-size:10px;margin-top:2px}
.master-prototype .footer-meta a{color:inherit;text-decoration:underline;text-underline-offset:2px}

/* ==========================================================================
   TABLET — max-width:900px. A literal translation of the approved reference's own
   @media(max-width:900px) block: this is where the reference itself narrows from the desktop
   grid down to a compact 2-column tablet layout, not a "mobile-first add-on."
   ========================================================================== */
@media(max-width:900px){
  /* The fixed header (home.css `header`) is genuinely taller here than at desktop or phone width
     -- nav.php's own content (logo, links, clock chip, menu button) wraps across this tier in a
     way it doesn't at either neighboring tier, measured directly at 601-900px: as tall as
     ~159px at 768px, vs. ~71.5px at desktop and ~74px at phone. A single clearance value tuned
     for the short header would put this tier's kicker right back underneath it, so this
     redefines the same --mp-hero-copy-clearance token (read by the one shared hero-copy/hero-rail
     rule above -- nothing here duplicates that rule) against the worst real height actually
     measured in this range, same ~37-40px breathing room past it. The header's own tablet-range
     height variability is a pre-existing nav/header layout condition, not something this
     hero-clearance refinement changes -- flagged, not silently absorbed by guessing a smaller
     number. Bumped 178px -> 186px (2026-09-05), same +8px/~46-48px target as the desktop base
     value above, for the same "technically clear but visually tight" reason -- kept as its own
     override since this tier's header is still genuinely taller than desktop's. Bumped again
     186px -> 198px (2026-09-05, same day), same +12px/~56-60px target as the desktop base
     value's second bump, same reason. */
  .master-prototype{--mp-hero-copy-clearance:198px}
  .master-prototype .mp-shell{width:min(92%,760px)}
  .master-prototype .mp-hero-grid{grid-template-columns:56% 1fr}
  .master-prototype .mp-hero-grid.no-media{grid-template-columns:1fr}
  .master-prototype .hero-rail{display:none}
  .master-prototype .mp-hero-title{font-size:35px}
  .master-prototype .gallery-topline{align-items:flex-end}
  .master-prototype .gallery-grid{grid-template-columns:1.25fr 1fr;grid-template-rows:180px 120px 120px;grid-auto-rows:120px}
  .master-prototype .g-main{grid-column:1;grid-row:1/3}
  .master-prototype .g-top{grid-column:2;grid-row:1}
  .master-prototype .g-wide{grid-column:2;grid-row:2}
  .master-prototype .g-small-1{grid-column:1;grid-row:3}
  .master-prototype .g-small-2{grid-column:2;grid-row:3}
  /* The reference's own tablet layout hides its 6th tile entirely (a real content-count
     difference: it only ever had 6 photos to begin with). g-small-3 here holds a PAIR of real
     photos (images 7-8, absorbed rather than dropped -- never hide a real photo), so it stays
     visible at tablet as one additional compact row rather than following the reference's hide
     rule verbatim. */
  .master-prototype .g-small-3{grid-column:1/3;grid-row:4;height:120px}
  .master-prototype .gallery-card-extra{grid-column:1/3;height:120px}
  .master-prototype .testimonial-layout{grid-template-columns:70px 1fr}
  .master-prototype .tc-track{grid-template-columns:1.5fr 1fr}
  .master-prototype .testimonial-card.is-support-2{display:none}
  .master-prototype .video-layout{grid-template-columns:1.2fr 1fr;align-items:start}
  /* keep the single-video override in step with the tablet frame width (it has higher
     specificity than the rule above, so it must be restated here, not left at the desktop value) */
  .master-prototype .video-layout.is-single{grid-template-columns:1.2fr 1fr}
  .master-prototype .video-list{grid-column:1/3;border-left:0;border-top:1px solid #e3dcda;padding:12px 0 0;display:grid;grid-template-columns:repeat(3,1fr);flex-direction:row}
  .master-prototype .video-item{grid-template-columns:50px 1fr}
  /* Matches the reference's own tablet behaviour (3 real cards -> 2 visible, fitted to a
     4-column arrow/card/card/arrow grid) -- hiding .mp-project-card-all specifically (an
     unambiguous class target) rather than an nth-of-type position: this page's 3 real cards are
     3 differently-classed <a> elements (prev/all-work/next), not identical siblings, so
     :nth-of-type(4) never matched anything here -- confirmed the hard way (it left a 5th visible
     item overflowing this 4-column grid, pushing the whole page 77px wider than its own 768px
     viewport). Previous/Next stay visible: real project chronology, the two most load-bearing
     cards, kept over the "View All Work" utility card. */
  .master-prototype .project-strip-row{grid-template-columns:31px 1fr 1fr 31px}
  .master-prototype .project-strip-row .mp-project-card-all{display:none}
  .master-prototype .credentials-row{grid-template-columns:repeat(2,1fr)}
  .master-prototype .supplementary-layout{gap:28px;margin-top:22px}
  /* Stacked single-column at this width (no rail beside it to justify a wide crop) -- keep the
     same moderate ratio mobile uses so a text-dense flyer doesn't lose its top/bottom content. */
  .master-prototype .supplementary-media-figure.is-anchor{aspect-ratio:4/3}
  /* Credits & Collaborators: the two-column split (Credits rail beside the collaborator card
     row) narrows to a compact stack at this width, same "narrow to a compact stack" rule the
     reference itself applies to Hero/Video Documentation at this breakpoint. */
  .master-prototype .cc-panel{padding:32px 34px}
  .master-prototype .cc-layout.has-both{grid-template-columns:1fr;gap:32px}
  .master-prototype .closing{height:auto;padding:30px 0}
  .master-prototype .closing .mp-shell{height:auto}
  .master-prototype .footer-grid{grid-template-columns:1fr 1fr;height:auto;gap:20px}
  .master-prototype .footer-cta{order:-1;grid-column:1/3;margin-bottom:5px}
  .master-prototype .footer-right{justify-self:end}
}

/* ==========================================================================
   MOBILE — max-width:600px. Literal translation of the reference's own phone breakpoint.
   ========================================================================== */
@media(max-width:600px){
  /* max-width:900px above and this max-width:600px block are both "true" simultaneously at
     phone widths (max-width conditions overlap, they aren't exclusive tiers) -- without
     re-declaring --mp-hero-copy-clearance here, the 900px block's own 178px tablet override
     (correct for that tier's genuinely taller wrapped header, see its own comment) would leak
     straight through to phone width too, since nothing after it redefined the token. Restored
     here to the base/desktop value: phone's own header is short again (~74px, not tablet's
     ~159px), and .mp-hero-grid.no-media is the only mobile consumer left (the has-media case
     resets this to 0 a few lines below) -- confirmed this exact leak inflated Ritwal's mobile
     kicker to top:205px before this line existed. */
  .master-prototype{--mp-hero-copy-clearance:88px}
  .master-prototype{font-size:13px}
  .master-prototype .mp-shell{width:calc(100% - 34px)}
  .master-prototype .hero{padding:24px 0 20px}
  .master-prototype .mp-hero-grid{display:flex;flex-direction:column;gap:20px}
  .master-prototype .hero-media{width:100%;aspect-ratio:1.15/1}
  .master-prototype .hero-copy{width:100%}
  /* Reset the header-clearance padding-top to 0 only when a hero image exists: stacked in
     document order above hero-copy, its own real height already clears the fixed header on its
     own, so the extra padding would just be dead space. The .no-media state has nothing above
     hero-copy to provide that clearance, so it keeps the base rule's --mp-hero-copy-clearance --
     confirmed clipped without it (kicker measured top:24px against a ~74px header on Ritwal,
     the one real project with no Hero Image, before this specific carve-out). */
  .master-prototype .mp-hero-grid:not(.no-media) .hero-copy{padding-top:0}
  .master-prototype .hero-kicker{font-size:7px}
  .master-prototype .mp-hero-title{font-size:38px;max-width:9ch}
  .master-prototype .hero-lede{font-size:11px}
  .master-prototype .hero-rail{display:none}
  .master-prototype .section{padding-bottom:26px}
  .master-prototype .section-label{height:34px}
  .master-prototype .gallery-topline{display:block}
  .master-prototype .gallery-tools{justify-content:flex-end;margin:-34px 0 7px}
  .master-prototype .gallery-grid{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto;gap:7px}
  .master-prototype .gallery-card{aspect-ratio:1.35/1}
  .master-prototype .g-main{grid-column:1/3;grid-row:auto;aspect-ratio:1.15/1}
  .master-prototype .g-top,.master-prototype .g-wide,.master-prototype .g-small-1,.master-prototype .g-small-2,.master-prototype .g-small-3,.master-prototype .gallery-card-extra{grid-column:auto;grid-row:auto;display:block;height:auto}
  .master-prototype .gallery-card-pair{aspect-ratio:1.35/1}
  .master-prototype .testimonial-layout{display:block}
  .master-prototype .testimonial-controls{display:flex;align-items:center;justify-content:space-between;padding:0 0 10px}
  .master-prototype .testimonial-controls .round-nav{margin:0}
  .master-prototype .tc-count{margin-left:auto;margin-right:15px}
  .master-prototype .tc-track{display:block}
  /* .is-support-1/.is-support-2 must be named explicitly here, not just re-asserting .is-active:
     their base (desktop) rule is .testimonial-card.is-active,.is-support-1,.is-support-2{display:
     flex} at specificity (0,2,0), which beats a plain .testimonial-card{display:none} (0,1,0) at
     this same viewport regardless of which media query comes later in the file -- confirmed via
     computed style inspection, not assumed: .is-support-1 was rendering display:flex at 390px
     before this line existed, showing 2 testimonials stacked instead of the intended 1. */
  .master-prototype .testimonial-card,.master-prototype .testimonial-card.is-support-1,.master-prototype .testimonial-card.is-support-2{display:none;min-height:205px}
  .master-prototype .testimonial-card.is-active{display:flex}
  .master-prototype .mp-testimonial-anchor p,.master-prototype .testimonial-card p{font-size:16px;margin-left:40px}
  .master-prototype .mp-testimonial-anchor cite,.master-prototype .testimonial-card cite{margin-left:40px}
  .master-prototype .video-layout{display:block}
  .master-prototype .video-copy{padding:18px 0}
  .master-prototype .video-list{display:block;border-top:1px solid #e2dcda;border-left:0;padding:10px 0 0}
  .master-prototype .video-item{grid-template-columns:72px 1fr;margin-bottom:10px}
  .master-prototype .video-item img{width:72px;height:50px}
  .master-prototype .project-strip-row{display:flex;overflow-x:auto;-webkit-overflow-scrolling:touch;gap:10px;padding-bottom:5px}
  .master-prototype .circle-arrow{display:none}
  .master-prototype .mp-project-card{flex:0 0 82%;min-width:82%;grid-template-columns:82px 1fr 16px}
  .master-prototype .mp-project-card img{width:82px;height:83px}
  .master-prototype .credentials-row{grid-template-columns:1fr}
  .master-prototype .supplementary-layout{gap:22px;margin-top:18px}
  .master-prototype .supplementary-media-figure.is-anchor{aspect-ratio:4/3}
  /* Credits & Collaborators: cards drop to one per row -- the auto-fit/minmax(220px,1fr) grid
     would otherwise try to keep 2 columns right up until they can no longer fit, squeezing the
     logo tile too narrow just before that point. */
  .master-prototype .cc-panel{padding:26px 22px;border-radius:16px}
  .master-prototype .cc-layout{gap:28px}
  .master-prototype .cc-collab-grid{grid-template-columns:1fr}
  .master-prototype .cc-credits-row dt{font-size:14px}
  .master-prototype .closing{padding:34px 0}
  .master-prototype .footer-grid{display:flex;flex-direction:column;gap:25px;text-align:center}
  .master-prototype .footer-cta{order:-1;margin:0}
  .master-prototype .footer-right{justify-self:auto;text-align:center}
  .master-prototype .footer-brand{justify-content:center}
  .master-prototype .footer-right ul{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
  .master-prototype .footer-right .spark{margin:8px auto}
  .master-prototype .socials{justify-content:center}
  /* Desktop-only follow-up bump (2026-09-07, second pass): the base rules above went from 7px to
     9.8px/10px for desktop readability, a jump too large for this breakpoint's own tighter,
     centered, wrapped composition -- explicitly keeping "the current mobile treatment" per this
     round's own instruction means holding these three back at the previous, already-approved
     mobile sizes (8.3px / 9px / 8.3px) rather than inheriting the new desktop values. Tablet
     (901-900px block above) intentionally has no equivalent override -- it already had the room
     to carry the bigger desktop sizing comfortably in the prior pass. */
  .master-prototype .footer-brand small{font-size:8.3px;line-height:1.55}
  .master-prototype .footer-brand small.footer-meta{font-size:9px}
  .master-prototype .footer-right ul{font-size:8.3px;line-height:1.55;letter-spacing:.07em}
}

/* ---- reveal-on-scroll (shared behaviour, scoped) ---- */
.master-prototype .reveal{opacity:0;transform:translateY(16px)}
.master-prototype .reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:no-preference){.master-prototype .reveal.in{transition:opacity .65s ease,transform .65s cubic-bezier(.2,.7,.2,1)}}
@media(prefers-reduced-motion:reduce){.master-prototype .reveal{opacity:1;transform:none}}