/* Shared presentation rules for both portfolio case studies. Product artwork
   keeps its own colours; the surrounding editorial interface shares one system. */
.portfolio-case{--case-emphasis:var(--green);--case-rule:var(--line);--case-surface:#eee9df}
.portfolio-case .site-shell{width:min(calc(100% - 120px),1040px)}
.portfolio-case :is(.case-intro,.bubu-intro) h1{font-family:var(--serif);font-size:clamp(40px,3.8vw,48px);font-weight:500;letter-spacing:-.03em;line-height:1.04}
.portfolio-case h2{font-family:var(--serif);font-size:clamp(29px,3vw,37px);font-weight:500;line-height:1.2;letter-spacing:-.025em}
.portfolio-case :is(.research-method,.bubu-feature-heading) h3{font-family:var(--serif);font-size:clamp(25px,2.5vw,30px);font-weight:500;line-height:1.3}
.portfolio-case .section-kicker{color:var(--muted)}
.portfolio-case :is(.quiet-link,.bubu-button){background:var(--ink);color:var(--paper);border-radius:999px;font-size:13px;padding:12px 20px}
.portfolio-case :is(.quiet-link,.bubu-button):hover{background:var(--green);color:var(--paper)}
.portfolio-case.bubu-page{--bubu-blue:var(--case-emphasis);--bubu-soft:var(--case-surface);--bubu-rule:var(--case-rule)}
.portfolio-case.bubu-page .bubu-case{margin-inline:auto}
.portfolio-case.bubu-page .bubu-section{padding-bottom:110px}
.portfolio-case.bubu-page .bubu-screen>a,.portfolio-case.bubu-page .bubu-screen>a:hover{padding:0;background:transparent;border:0}
.portfolio-case.bubu-page .bubu-screen img{width:100%;height:auto}
.portfolio-case.bubu-page .bubu-screen figcaption{font-size:12px;line-height:1.7;color:var(--muted);padding-top:16px}
.portfolio-case.bubu-page .bubu-lightbox-stage{background:var(--paper)}
.portfolio-case.bubu-page .bubu-opportunity{background:var(--case-surface);border-color:var(--green)}
.portfolio-case .stage-nav{gap:10px}
.portfolio-case .stage-subnav{display:flex;flex-direction:column;gap:9px;padding:3px 0 5px 18px}
.portfolio-case .stage-subnav[hidden]{display:none}
.portfolio-case .stage-subnav a{font-size:10px;font-weight:400;gap:9px;line-height:1.35}
.portfolio-case .stage-subnav a i{width:6px;height:6px}
.portfolio-case .stage-subnav a.is-active{font-weight:700}
.bubu-landing-gallery{display:grid;gap:64px}
.bubu-more-screens .bubu-screen-pair:has(>figure:only-child){grid-template-columns:1fr}
.bubu-draw-guide{max-width:680px;margin:0 0 28px;font-size:15px;line-height:1.8;color:var(--green)}
.bubu-draw-guide strong{display:block;font-weight:600;margin-bottom:6px}
.bubu-draw-guide[hidden]{display:none}
.bubu-growth-part{margin-top:64px;scroll-margin-top:40px}
.bubu-growth-part+.bubu-growth-part{margin-top:110px;padding-top:44px;border-top:1px solid var(--line)}
.bubu-subsection-heading{max-width:680px;margin-bottom:40px}
.bubu-subsection-heading h4{font-family:var(--serif);font-size:28px;line-height:1.3;font-weight:500;margin:0 0 20px}
.bubu-growth-part h5{font-family:var(--sans);font-size:14px;color:var(--green);font-weight:600;margin:0 0 14px}
.bubu-growth-part .bubu-screen-pair>div>p{font-size:15px;margin:0 0 28px}
.bubu-growth-part .bubu-screen-pair>div{display:flex;flex-direction:column;min-width:0}
.bubu-growth-part .bubu-screen-pair>div>figure{margin-top:auto}
@media(max-width:900px){.portfolio-case .site-shell{width:calc(100% - 72px)}}
@media(max-width:680px){.portfolio-case :is(.case-intro,.bubu-intro) h1{font-size:clamp(39px,10vw,50px)}}
@media(max-width:680px){.portfolio-case .site-shell{width:calc(100% - 48px)}.portfolio-case.bubu-page .bubu-section{padding-bottom:90px}.bubu-landing-gallery{gap:44px}.bubu-growth-part+.bubu-growth-part{margin-top:76px;padding-top:34px}.bubu-subsection-heading h4{font-size:26px}.portfolio-case .stage-nav{display:none}}

/* Three editorial levels: section title, supporting heading, reading text. */
.portfolio-case{--case-title:clamp(29px,3vw,37px);--case-heading:26px;--case-copy:15px}
.portfolio-case main :is(.bubu-section,.case-section) :is(h3,h4,.bubu-hmw){font-family:var(--serif);font-size:var(--case-heading);font-weight:500;line-height:1.35;letter-spacing:-.02em}
.portfolio-case main :is(.bubu-section,.case-section) :is(p,li,figcaption,.section-kicker,.bubu-row-index,.bubu-source,.bubu-stat-label,.bubu-feature-heading strong,.bubu-palette span){font-size:var(--case-copy);line-height:1.75}
.portfolio-case main :is(.section-kicker,.bubu-row-index){text-transform:none;letter-spacing:0}
.portfolio-case main :is(.bubu-context-stat,.bubu-metrics dd,.bubu-launch strong){font-size:var(--case-title);line-height:1.2}
.portfolio-case main :is(.bubu-metrics dt,.bubu-metrics dd span,.bubu-launch strong span){font-size:var(--case-copy);line-height:1.75}
.portfolio-case main .bubu-hmw{max-width:840px;margin-bottom:48px;color:var(--green)}
.portfolio-case main .bubu-challenge .bubu-section-heading{margin-bottom:32px}
.portfolio-case main .bubu-challenge-columns .bubu-row-index{margin-bottom:12px}
.portfolio-case main .bubu-challenge-columns h3{font-size:var(--case-copy);font-family:var(--sans);font-weight:600;line-height:1.75;letter-spacing:0}
.portfolio-case main .bubu-challenge-columns{gap:48px}
.portfolio-case.bubu-page main .bubu-challenge :is(p,h3){font-size:var(--case-copy);font-family:var(--sans);line-height:1.75}
.portfolio-case.bubu-page main .bubu-challenge .bubu-hmw{font-family:var(--serif);font-size:var(--case-heading);line-height:1.4}
.portfolio-case.bubu-page main .bubu-challenge h3{font-weight:600}
.portfolio-case main .bubu-closing{font-family:var(--serif);font-size:var(--case-heading);line-height:1.4;text-wrap:balance}
.portfolio-case .bubu-intro .bubu-subtitle{font-size:var(--case-title);max-width:none}
.portfolio-case .bubu-intro p:not(.bubu-subtitle),.portfolio-case .bubu-facts>div{font-size:var(--case-copy)}
.portfolio-case.bubu-page main :is(p,figcaption){text-wrap:balance}
.bubu-intro-results{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin:36px 0 0;padding-top:26px;border-top:1px solid var(--line)}
.bubu-intro-results>div{display:flex;flex-direction:column;gap:12px}
.bubu-intro-results dt{font-size:15px;color:var(--muted)}
.bubu-intro-results dd{order:-1;margin:0;font-family:var(--serif);font-size:var(--case-title);color:var(--green);white-space:nowrap}

/* Character studies lead into the deck, with original sketches kept intact. */
.bubu-artwork-heading{max-width:720px;margin-bottom:32px}
.portfolio-case .bubu-artwork-heading h4{margin:0 0 16px}
.bubu-artwork-heading p{margin:0;max-width:640px}
.bubu-character-sheet{max-width:720px;margin:0 auto 48px}
.portfolio-case.bubu-page .bubu-character-study img{aspect-ratio:auto;object-fit:contain;border-radius:8px}
.bubu-scene-studies{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
.portfolio-case.bubu-page .bubu-scene-studies .bubu-screen>a{aspect-ratio:1.58;overflow:hidden;position:relative}
.portfolio-case.bubu-page .bubu-scene-studies img{width:100%;height:100%;object-fit:cover;border-radius:0}
.portfolio-case.bubu-page .bubu-scene-studies .bubu-scene-sketch img{position:absolute;max-width:none;width:119.1%;height:131.1%;left:-4.1%;top:-17.3%;object-fit:fill}
.bubu-deck-heading{margin-top:88px;padding-top:40px;border-top:1px solid var(--line);max-width:none}
@media(max-width:700px){.bubu-scene-studies{grid-template-columns:1fr;gap:36px}.bubu-character-sheet{margin-bottom:36px}.bubu-deck-heading{margin-top:64px;padding-top:32px}.bubu-artwork-heading{margin-bottom:26px}}

/* Real laptop frame with a native, keyboard-accessible scrolling screen. */
.bubu-laptop{position:relative;aspect-ratio:1600/978;isolation:isolate}
.bubu-laptop-frame{position:absolute;inset:0;z-index:2;width:100%;height:100%;pointer-events:none}
.bubu-landing-scroll{position:absolute;left:9.8125%;top:2.3517%;width:80.3125%;height:85.3783%;z-index:1;overflow:auto;overscroll-behavior-y:contain;background:#102337;border-radius:1.2% 1.2% 0 0;scrollbar-width:none;scroll-behavior:auto;touch-action:pan-y}
.bubu-landing-scroll::-webkit-scrollbar{display:none}
.bubu-landing-scroll:focus-visible{outline:3px solid var(--accent);outline-offset:4px}
.bubu-landing-scroll img{display:block;width:100%;height:auto;max-width:none}
.bubu-landing-preview figcaption{display:flex;justify-content:space-between;align-items:start;gap:24px;padding-top:22px;font-size:15px;line-height:1.7}
.bubu-page .bubu-preview-hint{max-width:760px;margin:0 auto 32px;padding:16px 20px;font-size:15px;font-weight:600;line-height:1.7;text-align:center;color:var(--accent);text-wrap:balance}
.bubu-preview-actions{display:flex;align-items:center;flex-wrap:wrap;gap:12px 20px}
.bubu-preview-actions button,.bubu-preview-actions a{font:inherit;font-size:13px;color:var(--green);border:0;border-bottom:1px solid var(--line);padding:6px 0;background:transparent;cursor:pointer}
.bubu-preview-actions [hidden]{display:none}
.bubu-touch-help{display:none}
@media(hover:none){.bubu-hover-help{display:none}.bubu-touch-help{display:inline}}
@media(max-width:700px){.bubu-landing-preview figcaption{flex-direction:column;gap:12px}.bubu-character-sheet{max-width:90%}}

/* Never reduce the case navigation to unexplained dots. */
.portfolio-case .stage-nav{display:flex;width:150px;right:18px;gap:12px}
.portfolio-case .stage-nav a{font-size:12px;gap:10px;line-height:1.45;min-height:24px}
.portfolio-case .stage-nav a span{display:inline}
.portfolio-case .stage-subnav{padding-left:18px;gap:10px}
.portfolio-case .stage-subnav a{font-size:11px}
@media(min-width:901px) and (max-width:1380px){
  .portfolio-case main .site-shell,.portfolio-case.bubu-page .bubu-case{width:calc(100% - 244px);margin-left:40px;margin-right:auto}
}
@media(max-width:900px){
  .portfolio-case{padding-bottom:145px}
  .portfolio-case .stage-nav{top:auto;bottom:0;left:0;right:0;width:100%;transform:none;display:flex;flex-direction:row;flex-wrap:wrap;gap:0;max-height:none;overflow:visible;padding:8px 16px max(8px,env(safe-area-inset-bottom));background:var(--paper);border-top:1px solid var(--line);z-index:15}
  .portfolio-case .stage-nav>a{order:2;flex:1 0 16%;justify-content:center;min-height:34px;font-size:12px}
  .portfolio-case .stage-nav a i,.portfolio-case .stage-track{display:none}
  .portfolio-case .stage-nav a.is-active{text-decoration:underline;text-underline-offset:5px}
  .portfolio-case .stage-subnav{order:1;flex:0 0 100%;width:100%;flex-direction:row;overflow-x:auto;gap:24px;padding:0 4px 10px;margin-bottom:4px;border-bottom:1px solid var(--line);scrollbar-width:thin}
  .portfolio-case .stage-subnav a{flex:none;font-size:12px;white-space:nowrap;min-height:34px}
  .portfolio-case .bubu-contents{display:none}
}
@media(max-width:500px){.portfolio-case .stage-nav>a{flex-basis:33.333%}.portfolio-case main .bubu-challenge-columns{gap:28px}.bubu-intro-results{gap:20px}}