/* Red Banana v3 inner pages (job V3-QA1, finishing what V3-D could not run). Loaded last on every inner page:
   rb-v2.css, v3.css, [older page CSS], rb-inner.css, v3-inner.css. Uses v3 tokens only (DESIGN-V3.md).
   1 container and page head, 2 buttons and chips, 3 work list, 4 case pages, 5 studio, 6 contact and prose pages,
   7 closing call (same as home section 07), 8 small text floor. Nothing here animates. */

/* 1. One container for the whole site: the same side margin and width as the home page */
main .wrap{max-width:calc(var(--v3-max) + 2 * var(--v3-pad-x));padding-left:max(var(--v3-pad-x),env(safe-area-inset-left,0px));padding-right:max(var(--v3-pad-x),env(safe-area-inset-right,0px))}
.st-head .page-head{padding-left:max(var(--v3-pad-x),env(safe-area-inset-left,0px));padding-right:max(var(--v3-pad-x),env(safe-area-inset-right,0px))}
.v3-section--head{padding-top:calc(var(--head-h,72px) + env(safe-area-inset-top,0px) + clamp(40px,6vw,88px));padding-bottom:clamp(36px,4.5vw,64px)}
main .page-head,.pf-case-head>.wrap{display:grid;gap:clamp(18px,2vw,28px);justify-items:start}
main .page-head>*,.pf-case-head>.wrap>*{margin:0}
main h1.v3-display,main .page-head h1.v3-display,.pf-index .pf-h1.v3-display,.pf-case-title.v3-display,.st-h1.v3-display{
  font:700 var(--v3-t-display)/.92 var(--v3-font-display);letter-spacing:-.045em;max-width:16ch;margin:0;text-wrap:balance;color:var(--v3-ink)}
.pf-case-title.v3-display{max-width:18ch;overflow-wrap:anywhere;word-break:break-word}
main .page-head .v3-lede,.pf-case-head .v3-lede,.pf-head .v3-lede{max-width:46ch;font:400 var(--v3-t-lede)/1.5 var(--v3-font-text);color:var(--v3-ink-2)}
main .v3-eyebrow{color:var(--v3-red-ink)}
.rb-mark-ornament{display:none!important}
/* breadcrumbs on case pages read as the v3 eyebrow */
.pf-crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;font:500 var(--v3-t-label)/1.3 var(--v3-font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--v3-red-ink)}
.pf-crumbs::before{content:"";flex:none;width:32px;height:1px;background:currentColor}
.pf-crumbs a,html body .pf-crumbs a{color:inherit;display:inline-flex;align-items:center;min-height:48px!important;min-width:48px;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.pf-crumbs .pf-crumb-n{margin-left:auto;color:var(--v3-ink-3)}
@media (max-width:760px){.pf-crumbs::before{width:20px}}

/* 2. Buttons: the v2 pills become v3 rectangles */
main .btn,.ct-act .btn{border-radius:var(--v3-radius)!important;min-height:var(--v3-tap)}
main .btn.btn-primary{background:var(--v3-red-fill);border-color:var(--v3-red-fill);color:#fff}
main .btn.btn-primary:hover{background:var(--v3-red-hover);border-color:var(--v3-red-hover)}
.v3-btn svg{width:18px;height:18px;flex:none}
.pf-filter{border-radius:var(--v3-radius)!important;font-family:var(--v3-font-mono)}
.pf-filter[aria-pressed=true]{background:transparent!important;border-color:var(--v3-red-ink)!important;color:var(--v3-red-ink)!important}
.pf-filter[aria-pressed=true] sup{color:inherit}

/* 3. Work list */
.pf-index .pf-head{padding-bottom:clamp(28px,3vw,40px)}
.pf-head .page-head{gap:clamp(16px,1.8vw,24px)}
.pf-card-upd{display:none}
.pf-card-device{color:var(--v3-ink-3)!important}
.pf-dev-dot{display:none}
.pf-card-cta{border-radius:var(--v3-radius)!important}
.pf-media{border-radius:var(--v3-radius-lg)}
.pf-card-tag{border-radius:var(--v3-radius)}

/* 4. Case pages */
.pf-case-head{padding-top:calc(var(--head-h,72px) + clamp(40px,5vw,72px));padding-bottom:clamp(28px,3vw,44px)}
.pf-case-head>.wrap{border-bottom:0}
.pf-hero-frame,.pf-still,.pf-gallery figure{border-radius:var(--v3-radius-lg)}

/* 5. Studio */
.st-artist{font:500 var(--v3-t-label)/1.3 var(--v3-font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--v3-ink-3)}

/* 6. Contact and prose pages */
.ct-act{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px}
.ct-act .v3-btn{gap:10px}
.ct-act-note{max-width:36ch;color:var(--v3-ink-3);font-size:var(--v3-t-small)}
main .brief-card,main .ct-card{border-radius:var(--v3-radius);border-color:var(--v3-line);background:var(--v3-ground-2)}
main .plaque{border-radius:var(--v3-radius);border-color:var(--v3-line)}
main .plaque .acc,main .labs-note .acc{font:500 var(--v3-t-label)/1.3 var(--v3-font-mono);letter-spacing:.12em;color:var(--v3-red-ink)}
main .prose h2,main .prose .h3-like,main .plaque .h3-like,main .h3-like{font-family:var(--v3-font-display);letter-spacing:-.025em}
main .prose a{text-decoration-thickness:1px;text-underline-offset:4px}
main .prose a:hover{color:var(--v3-red-ink)}
.v3-404-stage{display:none}
.cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px}

/* 7. Closing call: the home section 07, without the number */
.hend{padding:0 max(var(--v3-pad-x),env(safe-area-inset-right,0px)) clamp(64px,8vw,112px) max(var(--v3-pad-x),env(safe-area-inset-left,0px))}
.hend-in{max-width:var(--v3-max);margin:0 auto;display:grid;gap:24px;align-items:end;padding-top:clamp(28px,3vw,44px);border-top:1px solid var(--v3-line-strong)}
.hend-t{margin:0;font:700 clamp(2.25rem,4.4vw + .6rem,5.25rem)/.94 var(--v3-font-display);letter-spacing:-.04em;max-width:16ch;color:var(--v3-ink)}
html body .hend-t em{display:block;font-family:var(--v3-font-serif)!important;font-style:italic!important;font-weight:400!important;font-size:1.04em!important;letter-spacing:-.02em!important;color:var(--v3-coral)!important}
.hend .v3-btn{justify-self:start}
@media (min-width:900px){.hend-in{grid-template-columns:minmax(0,1fr) auto;column-gap:clamp(24px,3vw,48px)}.hend .v3-btn{margin-bottom:.6em}}

/* 8. Small text floor: mono labels a visitor must read are 12 px or more in --v3-ink-3 or lighter */
.pf-card-meta,.pf-card-device,.pf-card-tag,.pf-card-cta,.st-ix-n,.ct-n{font-size:max(.75rem,1em)}
#site-footer .legal{color:var(--v3-ink-3);font-size:.75rem}

/* 9. Round 1 fixes: one side margin (the section and the .wrap both padded the head, and .inner was narrower) */
main .v3-section:has(>.wrap),main header.v3-section:has(>.wrap){padding-left:0;padding-right:0}
main .wrap.inner{max-width:calc(var(--v3-max) + 2 * var(--v3-pad-x))!important;padding-left:max(var(--v3-pad-x),env(safe-area-inset-left,0px));padding-right:max(var(--v3-pad-x),env(safe-area-inset-right,0px))}
.pf-crumbs{justify-self:stretch;margin:0!important;padding-bottom:0!important;border-bottom:0!important;font-size:.75rem!important;letter-spacing:.12em!important;flex-wrap:wrap!important;white-space:normal}
/* Studio replicas: three to a row on wide screens so each piece reads (jurors R1: six in a row were 65 px tiles at 390) */
@media (min-width:761px){main .st-replicas-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}}
/* the closing call keeps its two lines on wide screens */
@media (min-width:900px){.hend-t{max-width:22ch}}
/* grid previews never show the film loading chip (jurors R2: a "Loading" pill in the Work grid read as unfinished) */
.pf-card .rb-buffer{display:none!important}
/* Case films on phones: Pause sits inside the frame, top right (clear of the "Powered by" mark), not loose below it (jurors QA2 R2) */
@media (max-width:760px){
  html body.pf-casepage .pf-hero-frame{margin-bottom:0}
  html body.pf-casepage .pf-play{top:10px!important;right:10px!important;bottom:auto!important;min-height:48px;background:rgba(10,10,10,.78);border-color:rgba(236,235,231,.35)}
}
.pf-film-cap{position:absolute;left:0;right:0;top:calc(100% + 12px);margin:0;font:400 .9375rem/1.5 var(--v3-font-text);color:var(--v3-ink-2)}
.pf-film-cap a{color:var(--v3-ink);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px;display:inline-block;padding:10px 0}
.pf-casepage .pf-hero-frame:has(.pf-film-cap){overflow:visible;margin-bottom:76px}
.pf-casepage .pf-hero-frame:has(.pf-film-cap)>video,.pf-casepage .pf-hero-frame:has(.pf-film-cap)>img{border-radius:inherit}
/* Studio: Shuttle Garden is a concept render, so it sits smaller than the two built works (jurors QA2 R2) */
@media (min-width:1000px){html body #shuttle-garden .st-stage{grid-column:1/span 5}html body #shuttle-garden .st-plaque{grid-column:7/span 6}}
/* Contact: "Write to us" sits beside the H1 on wide screens, so the first screen is not half empty (jurors QA1 R3, QA2 R2); the three rows share one width */
html body .ct-reach{margin-top:40px;display:flex;flex-direction:column;align-items:stretch;gap:0;max-width:420px}
.ct-reach .h3-like{margin:0 0 12px}
html body .ct-reach p{margin:0;display:contents}
html body .ct-reach .ctl-mail{margin:0;display:flex;align-items:center;gap:8px;width:100%;min-height:52px;padding:0 12px;box-sizing:border-box;border-bottom:1px solid var(--v3-line-strong);font:500 1rem/1.2 var(--v3-font-mono);color:var(--v3-ink);text-decoration:none;white-space:nowrap}
html body .ct-reach .ctl-mail:hover{border-bottom-color:var(--v3-ink)}
@media (max-width:420px){html body .ct-reach .ctl-mail{font-size:clamp(.8125rem,calc((100vw - 66px) / 19),1rem)}}
@media (min-width:1100px){
  html body .page-head:has(.ct-reach){display:grid;grid-template-columns:697.766fr 558.234fr;column-gap:56px;align-items:end}
  html body .page-head:has(.ct-reach)>:not(.ct-reach){grid-column:1}
  html body .ct-reach{grid-column:2;grid-row:1/span 4;align-self:end;margin:0;justify-self:stretch}
}
/* QA2 gate fixes: case crumbs wrap on narrow phones (13 px floor); the film caption link is a full 44 px target */
@media (max-width:420px){html body .pf-crumbs{flex-wrap:wrap!important;row-gap:6px}}
.pf-film-cap a{display:inline!important;text-decoration:underline;text-underline-offset:4px}
/* The kiosk case film: Pause sits in the caption row, off the film (the film records its own on-screen pills) (jurors QA2 R3) */
html body.pf-casepage .pf-hero-frame:has(.pf-film-cap) .pf-play{top:calc(100% + 10px)!important;right:0!important;bottom:auto!important}
.pf-hero-frame:has(.pf-film-cap) .pf-film-cap{padding-right:120px}
@media (max-width:760px){.pf-hero-frame:has(.pf-film-cap) .pf-film-cap{left:8px;right:8px}html body.pf-casepage .pf-hero-frame:has(.pf-film-cap) .pf-play{right:8px!important}}
/* Card years: some projects have no verified year, so no card shows one (we do not guess); years stay in each case's credits (jurors QA2 R3) */
html body :is(.wk-year,.pf-year){display:none}
@media (max-width:760px){html body .ct-act-note{display:block;margin-top:14px}}
/* Wide screens: the case film runs wider than the text column, so its caption and Pause are inset back to the page margin (juror QA2 R4) */
@media (min-width:761px){
  .pf-hero-frame:has(.pf-film-cap) .pf-film-cap{left:max(0px,calc((100% - (100vw - 2 * var(--v3-pad-x,64px))) / 2));right:max(0px,calc((100% - (100vw - 2 * var(--v3-pad-x,64px))) / 2))}
  html body.pf-casepage .pf-hero-frame:has(.pf-film-cap) .pf-play{right:max(0px,calc((100% - (100vw - 2 * var(--v3-pad-x,64px))) / 2))!important}
}

/* Case films show the whole frame (step 2E). Every film is a 16:9 recording, so the frame is 16:9 and the film is contained:
   no edge is cropped (the STM logo and headline were cut at the left). The 16:10 screenshots used as stills lose only a strip at the bottom. */
html body.pf-casepage .pf-hero-frame{aspect-ratio:16/9!important;max-height:none;width:min(100%,calc(84vh * 16 / 9));margin-inline:auto!important}
html body.pf-casepage .pf-hero-frame>video{object-fit:contain;object-position:center;background:var(--v3-ground,#080808)}

/* Pause sits on a bar under the film, off the picture, at every width (step 2E; it covered the films' own menus and headers on phones). Still a 48 px target, still labelled. */
html body.pf-casepage .pf-hero-frame:not(:has(.pf-film-cap)){overflow:visible;margin-bottom:72px}
html body.pf-casepage .pf-hero-frame:not(:has(.pf-film-cap))>video,html body.pf-casepage .pf-hero-frame:not(:has(.pf-film-cap))>img{border-radius:inherit}
html body.pf-casepage .pf-hero-frame:not(:has(.pf-film-cap)) .pf-play{top:calc(100% + 12px)!important;right:0!important;bottom:auto!important;left:auto!important;min-height:48px!important;min-width:88px!important}
.pf-play,html body .pf-play{height:52px!important;min-height:52px!important;min-width:96px!important;line-height:52px!important}
.pf-still-cap a{display:inline!important}
/* Phones and tablets: the film frame lines up with the text gutter instead of running 8 to 10 px wider than it */
@media (max-width:899px){html body.pf-casepage .pf-hero-wrap{padding-inline:var(--v3-pad-x,20px)}html body.pf-casepage .pf-hero-frame{border:1px solid var(--v3-line,#2b2b2b);border-radius:var(--v3-radius-lg,6px)}}

/* About (step 2E): an installation photograph beside the hero on wide screens, and the long founder story behind "Read the full story" */
.ab-photo{display:none;margin:0}
.ab-photo img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:var(--v3-radius-lg,6px)}
.ab-photo figcaption{margin-top:10px;font:400 .8125rem/1.5 var(--v3-font-mono,monospace);color:var(--v3-ink-3)}
@media (min-width:1100px){
  html body .page-head.ab-head{display:grid;grid-template-columns:minmax(0,1fr) 380px;column-gap:72px;align-items:end}
  html body .page-head.ab-head>:not(.ab-photo){grid-column:1}
  html body .page-head.ab-head .ab-photo{display:block;grid-column:2;grid-row:1/span 4;align-self:center}
}
.founder-more>summary{display:inline-flex;align-items:center;min-height:48px;padding:0 20px;margin:8px 0 20px;border:1px solid var(--v3-line-strong,#454545);border-radius:999px;cursor:pointer;color:var(--v3-ink);font:500 .9375rem/1 var(--v3-font-mono,monospace);list-style:none}
.founder-more>summary::-webkit-details-marker{display:none}
.founder-more>summary::after{content:"+";margin-left:12px;font-size:1.1em}
.founder-more[open]>summary::after{content:"\2212"}
.founder-more>summary:hover{border-color:var(--v3-ink-3)}
.founder-more>summary:focus-visible{outline:3px solid var(--v3-red,#e2422e);outline-offset:3px}

/* Capabilities (step 2E): the headline runs on two lines on wide screens instead of leaving "floor." alone on a third */
@media (min-width:1100px){html body main h1.v3-display.cap-h1{max-width:none}}

/* Step 2F stage D: the case story is body copy, not a lede */
.pf-story .pf-case-text{max-width:62ch;margin:0 0 1.1em;font-size:1.0625rem;line-height:1.65;color:var(--v3-ink-2)}
.pf-story .pf-h2{margin-top:clamp(32px,4vw,56px)}
.pf-story .pf-h2:first-child{margin-top:0}
.st-replicas-story{max-width:62ch;margin:var(--v3-s-5,28px) 0 var(--v3-s-6,40px)}
.st-replicas-story .st-h3{margin:1.6em 0 .4em;font:700 1.125rem/1.2 var(--v3-font-display);letter-spacing:-.01em;color:var(--v3-ink)}
.st-replicas-story .st-replicas-text{margin:0 0 .8em;font-size:1.0625rem;line-height:1.65;color:var(--v3-ink-2)}
html body .pf-story .pf-h2{margin-left:0;margin-right:0;width:auto;max-width:62ch;text-align:left}

@media (max-width:360px){
  .pf-case-title.v3-display{font-size:clamp(1.75rem,8.5vw,2.2rem)!important;line-height:1.05}
  .pf-crumbs{gap:4px 8px}
  .pf-crumbs::before{display:none}
}