/* Shared portfolio system. Artwork and project UI remain untouched. */
:root{--font-family:Arial,Helvetica,sans-serif;--type-title:32px;--type-copy:16px;--weight-title:700;--weight-main:400;--weight-subtext:600;--color-bg:#fafaf7;--color-text:#151515;--color-muted:#65655e;--color-accent:#8b2435;--color-line:#d5d5cc;--space-unit:8px;--space-grid:24px;--space-section:48px}
body{font-family:var(--font-family);background:var(--color-bg);color:var(--color-text);font-size:var(--type-copy);line-height:1.5;letter-spacing:-.2px}
/* One font; main and supporting copy share a size. */
body :is(p,li,a,button,summary,span,dt,dd,th,td,figcaption,h3,h4,strong,b){font-family:var(--font-family)!important;font-size:var(--type-copy)!important;line-height:1.5!important;letter-spacing:-.2px!important}
body :is(p,li,td,dd){font-weight:var(--weight-main)}
body :is(h1,h2,.original-heading,.research-stat,.footer-title){font-family:var(--font-family)!important;font-size:var(--type-title)!important;font-weight:var(--weight-title)!important;line-height:1.12!important;letter-spacing:-1.3px!important}
body :is(h1,h2,.footer-title) span{font-size:inherit!important;line-height:inherit!important;letter-spacing:inherit!important}
body :is(h3,h4){font-weight:var(--weight-title);line-height:1.4!important}
body :is(.eyebrow,.mini-label,.archive-type,.back,.location,.art-stamp,.metadata dt,figcaption,.footnote,.board-note,.board-note p,.preview-note,.resume-note,.research-context,.research-evidence a,.research-implication b,.priority-top,.priority-verb,.process-note,.conclusion-limit,.carousel-toolbar,.wireframe-notes,.wireframe-notes li,th,.live-status,.boba-label,nav a,.text-link,.app-store-link,.email){font-weight:var(--weight-subtext)!important}
body :is(.metadata dt,.eyebrow,.mini-label,.art-stamp,.boba-label,.yelp-conclusions thead th){text-transform:none}
body .original-list h2{font-size:var(--type-copy)!important;font-weight:var(--weight-subtext)!important;line-height:1.5!important;letter-spacing:-.2px!important}
:is(.hero p,.project-hero .lead,.case-intro,.original-copy,.about-copy p,.mango-details p,.archive-section p,.focus-grid p,.case-collaboration>p,.case-release>p){font-size:var(--type-copy);line-height:1.5;letter-spacing:-.2px}
:is(.blue,.nav-arrow,.email,.footer-title span,.carousel-toolbar button,.research-stat,.research-evidence a,.process-decision summary){color:var(--color-accent)}
:is(.original-copy,.case-intro,.archive-section p,.focus-grid p,.case-collaboration>p,.case-release>p,.year-section p,.play-board p,.feature-caption p,.footnote,.metadata dt){color:var(--color-muted)}
:is(.feature,.focus-grid,.interface-grid,.product-three-grid,.research-evidence,.priority-grid,.process-grid,.play-boards,.discipline-grid){gap:var(--space-grid)}
:is(.project-hero,.hero){padding-top:var(--space-section);padding-bottom:var(--space-section)}
.original-heading{margin:var(--space-section) 0 var(--space-grid);padding-top:var(--space-grid);border-color:var(--color-line)}
.original-copy{margin:var(--space-grid) 0;max-width:900px}
:is(.interface-card h3,.focus-grid h3,.process-decision h3){margin:16px 0 8px}
:is(.interface-card p,.focus-grid p,.process-decision p){margin-top:0}
.project-hero .metadata{gap:var(--space-grid);margin-top:32px}.project-hero .metadata dt{margin-bottom:8px}.project-hero .metadata dd{line-height:1.5}
:is(.text-link,.case-study-link){border-color:currentColor;padding-bottom:4px}
:is(.app-store-link,.year-nav a,dialog button,.carousel-toolbar button){border-radius:4px;min-height:40px}
:is(.app-store-link,.year-nav a,dialog button){padding:8px 16px}
:is(.original-image-button,.flyer-button,.board-button){border-radius:0}
.shindo-scene figcaption,.year-flyer figcaption,.product-three-grid figcaption{margin-top:16px}
:is(.play-teaser,.play-board,.case-release){background:transparent;border-top:1px solid var(--color-line)}
.discipline:nth-child(n) .shape i{background:var(--color-accent)}
:is(a,button,summary,[tabindex]):focus-visible{outline:2px solid var(--color-accent);outline-offset:4px}
@media(max-width:640px){header{gap:16px;flex-wrap:wrap}nav{max-width:none;gap:16px}.wordmark{white-space:nowrap}.shindo-scene figcaption{gap:8px;flex-wrap:wrap}.carousel-toolbar{align-items:flex-start}.case-links{gap:16px}}
body .board-note{font-size:var(--type-copy)!important;letter-spacing:-.2px!important;line-height:1.5!important;font-weight:var(--weight-subtext)!important}

/* Homepage display headline is an intentional graphic accent. */
body .hero h1{font-size:clamp(64px,7.8vw,128px)!important;font-weight:900!important;line-height:.91!important;letter-spacing:-.075em!important}
@media(max-width:640px){body .hero h1{font-size:clamp(50px,11.7vw,75px)!important}}

/* Burgundy wayfinding and graphic accents throughout the portfolio. */
body :is(.eyebrow,.mini-label,.blue,.nav-arrow,.project-row .num,.project-row .arrow,.round-arrow,.priority-top,.priority-verb,.research-stat,.carousel-slide figcaption>span,.footer-title>span,.boba-label>span){color:var(--color-accent)}
body :is(.text-link,.email,.back,.case-study-link,.year-process summary,.research-evidence a,.process-decision summary){color:var(--color-accent)}
body :is(.metadata dt,.original-list h2,.interface-card h3,.focus-grid h3,.discipline h3,.play-board h2){color:var(--color-accent)}
body :is(.research-evidence article,.process-decision,.focus-grid article,.discipline){border-top-color:var(--color-accent)}
body .year-nav a{color:var(--color-accent);border-color:var(--color-accent)}
body .year-nav a:hover{color:var(--color-bg);background:var(--color-accent)}
body .app-store-link{background:var(--color-accent);color:#fff}
body .app-store-link:hover{background:#681a28}
body a:hover{color:var(--color-accent)}
body .app-store-link:hover{color:#fff}

/* Section copy follows the shared page gutter at every breakpoint. */
body .play-teaser{padding-left:0;padding-right:0}

body .case-release{padding:32px 0;margin:24px 0}

.related-projects{margin:48px 0 24px}.related-projects .section-head{align-items:center;margin-bottom:24px}.related-projects .section-head h2{margin:0}.related-projects .carousel-toolbar{margin:0}.related-card{display:block}.related-card>img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;background:var(--color-bg)}.related-card>div{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 0}.related-card h3{margin:0}.related-card span{color:var(--color-accent)}.related-card:hover img{opacity:.9}

.related-card>div{align-items:flex-start}.related-copy{min-width:0}.related-type{margin:6px 0 0;color:var(--color-muted);font-weight:var(--weight-subtext)!important}

/* The wordmark's dot opens into the portfolio's three-petal motif. */
body .wordmark{gap:4px}.brand-dot{position:relative;display:grid;place-items:center;flex:0 0 28px;width:28px;height:28px;padding:0;border:0;border-radius:0;background:transparent;cursor:pointer;touch-action:manipulation}.brand-dot-shape{position:relative;display:block;width:24px;height:24px}.brand-dot-shape i{position:absolute;display:block;left:50%;top:50%;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:var(--color-accent);transition:width .3s ease,height .3s ease,margin .3s ease,transform .4s ease}.brand-dot-shape i:nth-child(2){transform:rotate(60deg)}.brand-dot-shape i:nth-child(3){transform:rotate(120deg)}.wordmark:hover .brand-dot-shape i,.brand-dot:focus-visible .brand-dot-shape i,.brand-dot:active .brand-dot-shape i{width:22px;height:7px;margin:-3.5px 0 0 -11px}.brand-dot:focus-visible{outline-offset:2px}@media(prefers-reduced-motion:reduce){.brand-dot-shape i{transition:none}}

.mango-journey{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-grid);margin:24px 0 48px}.mango-journey article{border-top:1px solid var(--color-line);padding-top:16px}.mango-journey h3{margin:16px 0 8px}.mango-journey p,.mango-testing>p,.case-collaboration>div>p{color:var(--color-muted)}.mango-decisions,.mango-testing{border-top:1px solid var(--color-line);padding-top:24px;margin-bottom:48px}.mango-iteration{display:flex;gap:16px;align-items:center;flex-wrap:wrap;border-top:1px solid var(--color-line);border-bottom:1px solid var(--color-line);padding:20px 0;margin:24px 0}.mango-iteration span{color:var(--color-accent);font-weight:var(--weight-subtext)}@media(max-width:900px){.mango-journey{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:540px){.mango-journey{grid-template-columns:1fr}}

.mango-wireframes{border-top:1px solid var(--color-line);padding-top:24px;margin:0 0 48px}.wireframe-disclosure{color:var(--color-muted);max-width:950px}.mango-wire-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:28px}.mango-wire-grid article{min-width:0}.mango-wire-grid h3{margin:12px 0 20px}.wire-phone{border:1px solid #aaa;border-radius:24px;padding:18px 14px 12px;max-width:310px;margin:0 auto 24px;background:#fff;color:#444;min-height:560px;display:flex;flex-direction:column;gap:18px}.wire-status,.wire-header{display:flex;justify-content:space-between;align-items:center;gap:8px}.wire-status{margin-bottom:8px}.wire-series{display:grid;grid-template-columns:64px 1fr;gap:14px;align-items:center}.wire-cover{height:86px;border:1px solid #aaa;background:repeating-linear-gradient(135deg,transparent,transparent 8px,#e5e5e5 8px,#e5e5e5 9px)}.wire-series i{display:block;height:5px;background:#ddd;margin:10px 0;width:85%}.wire-series i:nth-child(3){width:65%}.wire-action{border:1px solid var(--color-accent);color:var(--color-accent);padding:6px 8px;border-radius:4px;text-align:center;font-weight:600}.wire-chapters>div,.wire-list-item{display:flex;justify-content:space-between;gap:8px;padding:10px 0;border-bottom:1px solid #ddd}.wire-library{margin-top:auto;border-top:1px dashed #aaa;padding-top:16px}.wire-folder-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}.wire-folder-row span{border:1px solid #bbb;padding:12px 6px}.wire-nav{display:flex;justify-content:space-between;border-top:1px solid #aaa;padding-top:12px;gap:8px}.wire-nav b{color:var(--color-accent)}.mango-wire-grid>article>p{color:var(--color-muted)}.wire-tradeoff{border-top:1px solid var(--color-line);padding-top:12px}.wire-tradeoff b{font-weight:600;color:var(--color-text)}@media(max-width:900px){.mango-wire-grid{grid-template-columns:1fr}.wire-phone{width:100%}.mango-wire-grid article{border-top:1px solid var(--color-line);padding-top:20px}}

/* Flat grayscale wireframes echo the annotated Yelp study. */
.mango-flat-grid{align-items:start}.flat-wireframe{position:relative;background:#d9d9d9;color:#222;max-width:290px;aspect-ratio:1/1.94;margin:0 auto 24px;overflow:hidden;display:flex;flex-direction:column;padding:16px 12px 62px;gap:16px}.flat-wire-header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 2px}.flat-wire-control{display:grid;place-items:center;background:#aaa;width:30px;height:30px;border-radius:50%;color:#222}.flat-cover-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 12px}.flat-cover-grid i{display:block;aspect-ratio:1;background:#999;border-radius:6px}.flat-cover-grid span{display:block;text-align:center;margin-top:5px}.flat-wire-nav{position:absolute;bottom:0;left:0;right:0;display:flex;justify-content:space-around;align-items:center;gap:6px;min-height:48px;background:#606060;color:#fff;border-radius:24px;padding:8px}.flat-download-bar{position:absolute;bottom:62px;left:12px;right:12px;background:#777;color:#fff;text-align:center;padding:12px 8px;border-radius:22px}.flat-wire-sheet{position:absolute;left:0;right:0;bottom:48px;background:#b7b7b7;padding:12px;border-radius:18px 18px 0 0;box-shadow:0 -12px 20px #0001}.sheet-grip{height:4px;width:40px;background:#777;border-radius:4px;margin:0 auto 12px}.flat-destination{background:#ccc;padding:9px;margin:12px 0}.flat-chapter{border-bottom:1px solid #999;padding:7px 2px}.flat-sheet-action{background:#606060;color:#fff;text-align:center;border-radius:20px;padding:10px 6px;margin-top:12px}.mango-flat-grid>article>p{max-width:340px;margin-left:auto;margin-right:auto}

.mango-wire-grid.mango-flat-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}.mango-flat-grid .flat-wireframe{width:100%}
@media(min-width:641px) and (max-width:900px){.mango-wire-grid.mango-flat-grid{gap:16px}.mango-flat-grid article{border-top:0;padding-top:0}.mango-flat-grid .flat-wireframe{padding-left:8px;padding-right:8px;gap:10px}.mango-flat-grid .flat-cover-grid{gap:10px 8px}.mango-flat-grid .flat-wire-nav{flex-wrap:wrap}}
@media(max-width:640px){.mango-wire-grid.mango-flat-grid{grid-template-columns:1fr}}

/* Taller phone viewport, approximately 9:19.5. */
.mango-flat-grid .flat-wireframe{aspect-ratio:6/13;min-height:0;max-width:270px}

.actual-wire{position:relative;width:100%;max-width:270px;aspect-ratio:6/13;margin:20px auto 24px;background:#d9d9d9;color:#222;overflow:hidden;padding:16px 10px}.actual-status{display:flex;justify-content:space-between;margin:0 12px 16px}.actual-settings{margin:0 0 10px auto;background:#999;border-radius:50%;width:30px;height:30px;text-align:center}.actual-library-title{margin:0 0 14px;font-weight:600}.actual-library-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px 22px;padding:0 10px}.actual-library-grid i{display:block;background:#999;aspect-ratio:1;border-radius:6px}.actual-library-grid span{display:block;text-align:center;margin-top:5px}.actual-compass{position:absolute;bottom:20px;right:12px;background:#888;width:34px;height:34px;display:grid;place-items:center;border-radius:50%;border:1px solid #777}.actual-top{display:flex;justify-content:space-between;align-items:center;margin:0 2px 16px}.actual-top>span{background:#999;padding:4px 10px;border-radius:24px}.actual-large-cover{width:76%;aspect-ratio:1;background:#999;border-radius:12px;margin:12px auto}.actual-series-title{text-align:center;margin:8px 0 24px}.actual-chapter-heading{display:flex;align-items:center;justify-content:space-between;gap:6px}.actual-chapter-heading b{background:#999;border-radius:20px;padding:3px 7px;font-weight:400}.actual-chapter-list>div{display:flex;justify-content:space-between;border-bottom:1px solid #aaa;padding:10px 2px;gap:6px}.actual-web-content{margin:0 -10px;padding:0 10px}.actual-web-content>b{display:block;margin:14px 0 10px;border-bottom:1px solid #aaa;padding-bottom:8px}.actual-web-covers{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.actual-web-covers i{display:block;aspect-ratio:2/3;background:#999;border-radius:4px}.actual-web-labels{display:flex;justify-content:space-between;gap:4px;margin-top:4px}.actual-address{position:absolute;bottom:18px;left:10px;right:10px;display:flex;gap:8px;align-items:center}.actual-address>b{flex:1;text-align:center;background:#999;border-radius:24px;padding:8px 0;font-weight:400}.actual-address>span{border-radius:50%;background:#999;padding:5px 10px}.actual-wire .actual-download{border-radius:24px}

/* Scale the complete screen as a single fixed-proportion canvas. */
.actual-wire{padding:0;aspect-ratio:390/844;height:auto;min-height:0;max-width:290px}.wire-canvas{display:block;width:100%;height:auto;aspect-ratio:390/844}.actual-wire-stage{position:relative;width:390px;height:844px;overflow:hidden;padding:26px 18px;background:#d9d9d9;box-sizing:border-box}.actual-wire-stage .actual-status{margin-bottom:26px}.actual-wire-stage .actual-settings{width:40px;height:40px;margin-bottom:16px;display:grid;place-items:center}.actual-wire-stage .actual-library-title{margin-bottom:20px;font-size:26px;font-weight:400}.actual-wire-stage .actual-library-grid{gap:24px 34px;padding:0 10px}.actual-wire-stage .actual-top{margin-bottom:24px}.actual-wire-stage .actual-top>span{min-width:40px;min-height:40px;display:grid;place-items:center}.actual-wire-stage .actual-large-cover{width:76%;margin:18px auto 16px}.actual-wire-stage .actual-series-title{margin-bottom:38px;font-size:26px}.actual-wire-stage .actual-chapter-list>div{padding:16px 2px}.actual-wire-stage .actual-compass{width:44px;height:44px;bottom:30px;right:18px}.actual-wire-stage .actual-web-content>b{margin:20px 0 14px}.actual-wire-stage .actual-web-covers{gap:12px}.actual-wire-stage .actual-address{bottom:28px;left:16px;right:16px}.actual-wire-stage .actual-address>b{padding:14px 0}.actual-wire-stage .actual-address>span{padding:10px 14px}

/* Match the plain, consistent labels in the original Yelp wireframes. */
body .actual-wire-stage,body .actual-wire-stage :is(div,span,b,strong){font-family:Arial,Helvetica,sans-serif!important;font-size:18px!important;font-weight:400!important;line-height:1.25!important;letter-spacing:0!important}
body .actual-wire-stage .actual-library-title,body .actual-wire-stage .actual-series-title{font-size:18px!important;font-weight:400!important}
.actual-wire-stage .actual-chapter-heading{gap:8px}.actual-wire-stage .actual-chapter-heading b{white-space:nowrap;padding:7px 10px}

.actual-wire-stage .actual-address{gap:12px;align-items:center}.actual-wire-stage .actual-address>.actual-icon,.actual-wire-stage .actual-top>.actual-icon{width:44px;height:44px;min-width:44px;flex:0 0 44px;padding:0;border-radius:50%;display:grid;place-items:center}.actual-icon>svg{width:24px;height:24px;display:block}.actual-wire-stage .actual-address>b{min-width:0;padding:11px 8px;min-height:44px;display:grid;place-items:center}

/* Wireframe controls retain square geometry independently of text styles. */
body .actual-wire-stage .actual-icon{box-sizing:border-box;width:44px;height:44px;min-width:44px;min-height:44px;max-width:44px;max-height:44px;flex:0 0 44px;aspect-ratio:1;display:grid;place-items:center;padding:0;border-radius:50%;line-height:1!important;overflow:hidden}
body .actual-wire-stage .actual-icon>svg{width:24px!important;height:24px!important;min-width:24px;max-width:24px;min-height:24px;max-height:24px;aspect-ratio:1;display:block;flex:none;overflow:visible}
body .actual-wire-stage .actual-address{align-items:center;grid-template-columns:44px minmax(0,1fr) 44px;display:grid;gap:12px}
body .actual-wire-stage .actual-address>b{box-sizing:border-box;height:44px;min-height:44px;padding:0 8px;display:grid;place-items:center}

/* Mango: authentic iteration evidence and app screens */
.mango-evidence{margin-top:32px}.mango-evidence>p{max-width:800px;margin:12px 0 24px}.mango-evidence-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin:24px 0}.mango-evidence-grid article,.mango-history-grid article{min-width:0}.mango-evidence-grid .original-image-button{display:block;width:100%;background:transparent;border:0;padding:0;cursor:zoom-in}.mango-evidence-grid img{display:block;width:100%;max-width:290px;height:auto!important;object-fit:contain;margin:0 auto 16px}.mango-history-grid{display:grid;grid-template-columns:1fr 2fr;gap:24px;margin:24px 0}.mango-history-grid .original-image-button{width:100%;padding:0;border:0;background:transparent;cursor:zoom-in}.mango-history-grid img{display:block;width:100%;height:auto!important;object-fit:contain;margin-bottom:16px}.mango-history-grid article:first-child img{max-width:290px;margin-left:auto;margin-right:auto}.mango-support{border-top:1px solid var(--line,#d5d5cc);margin-top:24px;padding-top:16px}.mango-support summary{cursor:pointer;color:#8b2435;font-weight:600}.mango-evidence h3{margin-bottom:8px}.mango-evidence article p{margin-top:8px}@media(max-width:640px){.mango-evidence-grid,.mango-history-grid{grid-template-columns:1fr}.mango-history-grid img{max-width:100%}}

.mango-history-grid img{max-height:630px;width:auto;max-width:100%;margin-left:auto;margin-right:auto}.mango-history-grid .original-image-button{display:block}

/* Display only app content in supplied device captures, including enlarged views. */
img[src*="mango-process/"]:not([src*="cover-list"]):not([src*="text-library"]):not([src*="-present"]):not([src*="download-wireframe-"]){clip-path:inset(6.5% 0 0 0)}
.actual-status{visibility:hidden}

/* Mango story: decision and evidence remain together. */
.mango-history-three{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}.mango-history-three .original-image-button{display:block;width:100%;max-width:290px;margin:0 auto 16px}.mango-history-three img{max-height:none;margin:0 auto;width:100%;height:auto!important}.mango-cover-list-crop,.mango-final-library-crop{position:relative;overflow:hidden;width:100%;background:#000}.mango-cover-list-crop{aspect-ratio:572/1254}.mango-history-three .mango-cover-list-crop img{position:absolute;width:211.89%;max-width:none;max-height:none;left:-4.55%;top:-1.44%;height:auto!important}.mango-final-library-crop{aspect-ratio:665/1278}.mango-history-three .mango-final-library-crop img{position:absolute;width:128.27%;max-width:none;max-height:none;left:-14.29%;top:-44.6%;height:auto!important}.mango-download-decision{display:grid;grid-template-columns:1.4fr 1fr;gap:48px;align-items:center}.mango-decision-copy p{max-width:630px;margin:16px 0}.mango-control-notes{display:grid;grid-template-columns:1fr 1fr;gap:24px;border-top:1px solid #d5d5cc;margin-top:24px}.mango-control-notes b{color:#8b2435}.mango-browser-wireframe{display:block;width:100%;max-width:290px;height:auto;margin:0 auto}.mango-browser-evidence>p{max-width:330px;margin:16px auto 0}.mango-structure-details{margin:0 0 48px}.mango-structure-details .mango-wireframes{margin-top:24px}.mango-outcome-grid{margin:24px 0}.mango-download-decision h3{margin-top:24px}@media(max-width:640px){.mango-history-three,.mango-download-decision{grid-template-columns:1fr}.mango-download-decision{gap:24px}.mango-history-three article{margin-bottom:16px}}
/* Crop within the app content, below the promotional device corners. */
.mango-final-library-crop{aspect-ratio:665/1198}.mango-history-three .mango-final-library-crop img{top:-54.26%}
/* Align comparison images, titles, and captions as shared rows. */
.mango-history-three{grid-template-rows:auto auto auto;align-items:start}
.mango-history-three>article{display:grid;grid-template-rows:subgrid;grid-row:span 3;gap:0;align-items:start}
.mango-history-three>article>.original-image-button{align-self:start;margin-bottom:16px}
.mango-history-three>article>h3{margin-top:0;margin-bottom:8px}
.mango-history-three>article>p{margin-top:0}
@media(max-width:640px){.mango-history-three{grid-template-rows:none}.mango-history-three>article{display:block;grid-row:auto}}

/* Equal portrait screenshot slots keep both image edges and text aligned. */
.mango-history-three>article>.original-image-button{aspect-ratio:390/844;overflow:hidden;background:#000;position:relative}
.mango-history-three>article>.original-image-button>img{width:100%;height:100%!important;object-fit:contain;margin:0;max-height:none}
.mango-history-three .mango-cover-list-crop{height:100%;aspect-ratio:auto}

img[src*="mango-process/cover-grid-extended.webp"]{clip-path:none}

/* Bay Baddy: produced apparel and medal applications. */
.bbo-purpose{max-width:900px}.bbo-purpose>p{max-width:800px}.bbo-applications{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;max-width:760px;margin:32px 0}.bbo-applications article{display:grid;grid-template-rows:subgrid;grid-row:span 3;gap:0;min-width:0}.bbo-applications .original-image-button{display:flex;align-items:center;justify-content:center;width:100%;aspect-ratio:4/5;background:transparent;border:0;padding:0;cursor:zoom-in;margin:0 0 16px}.bbo-applications img{display:block;max-width:100%;width:auto;height:auto;max-height:100%;object-fit:contain}.bbo-applications h3{margin:0 0 8px}.year-section .bbo-applications p{max-width:none;margin:0}.year-section .bbo-applications h3{color:#8b2435}@media(max-width:640px){.bbo-applications{grid-template-columns:1fr}.bbo-applications article{display:block;grid-row:auto}.bbo-applications .original-image-button{max-width:420px;margin:0 auto 16px}}

/* Bay Baddy tournament context, using the shared type and accent system. */
.bbo-tournament-context{margin:48px 0}.bbo-about{display:grid;grid-template-columns:1fr 1.35fr;gap:48px;padding-top:32px;border-top:1px solid #d5d5cc}.bbo-about h2{max-width:450px;margin-top:16px}.bbo-about p{margin:0 0 16px;max-width:750px}.bbo-audience{margin-top:32px;padding:24px 0;border-top:1px solid #d5d5cc;border-bottom:1px solid #d5d5cc}.bbo-audience h3{margin:12px 0}.bbo-audience p{max-width:900px;margin:0}.bbo-goals-heading{margin:32px 0 24px}.bbo-goals-heading h2{margin-top:12px}.bbo-goals{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}.bbo-goal-art{height:130px;margin-bottom:24px;color:#8b2435;display:flex;align-items:center;border-bottom:1px solid #d5d5cc}.bbo-goal-art svg{display:block;width:240px;max-width:100%;height:120px}.bbo-goals h3{margin:12px 0 8px}.bbo-goals p{margin:0;max-width:430px}.bbo-values{display:grid;grid-template-columns:1.2fr repeat(4,1fr);gap:24px;align-items:start;border-top:1px solid #d5d5cc;padding-top:24px;margin-top:32px}.bbo-values p{margin:0;font-weight:600}.bbo-tournament-context p{line-height:1.5}@media(max-width:760px){.bbo-about{grid-template-columns:1fr;gap:16px}.bbo-values{grid-template-columns:repeat(2,minmax(0,1fr))}.bbo-values>.eyebrow{grid-column:1/-1}}@media(max-width:640px){.bbo-goals{grid-template-columns:1fr}.bbo-goal-art{margin-bottom:16px}.bbo-goals article{margin-bottom:16px}.bbo-tournament-context{margin:32px 0}}

/* Give the event values four equal columns below their own heading. */
.bbo-values{display:block}.bbo-values>.eyebrow{display:block;margin-bottom:20px}.bbo-values-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}.bbo-values-grid p{margin:0;padding-right:12px}.bbo-values-grid p+p{border-left:1px solid #d5d5cc;padding-left:24px}@media(max-width:760px){.bbo-values-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 24px}.bbo-values-grid p:nth-child(3){border-left:0;padding-left:0}}@media(max-width:400px){.bbo-values-grid{grid-template-columns:1fr}.bbo-values-grid p+p{border-left:0;padding-left:0}}

.bbo-theme-story{padding:24px 0 32px;border-top:1px solid #d5d5cc}.bbo-theme-story h2{margin:12px 0 16px}.bbo-theme-story p{max-width:850px;margin:0}

.bbo-type-story{border-top:1px solid #d5d5cc;padding:32px 0;margin-bottom:16px}.bbo-type-story h2{margin:12px 0 16px}.bbo-type-intro{max-width:850px;margin:0 0 24px}.bbo-type-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}.bbo-type-grid article{border-top:2px solid #8b2435;padding-top:16px}.bbo-type-grid h3{margin:12px 0 8px}.bbo-type-grid p{margin:0;max-width:430px}@media(max-width:640px){.bbo-type-grid{grid-template-columns:1fr}.bbo-type-story{padding-top:24px}}

/* Lead with the work; keep reasoning beside original visual evidence. */
.bbo-overview{margin:32px 0 40px}.bbo-overview-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}.bbo-overview-grid a{display:block}.bbo-overview-grid img{display:block;width:100%;height:390px;object-fit:contain;object-position:center top}.bbo-overview-grid a>span{display:flex;justify-content:space-between;margin-top:16px;font-weight:600;color:#8b2435}.bbo-tournament-context{margin:32px 0}.bbo-type-sample{display:flex;align-items:center;justify-content:center;width:100%;height:150px;border:0;background:transparent;padding:12px 0;cursor:zoom-in;margin:12px 0}.bbo-type-sample svg{display:block;width:100%;max-height:126px}.bbo-selected-process{border-top:1px solid #d5d5cc;padding-top:32px;margin:16px 0 48px}.bbo-selected-process h2{margin:12px 0 16px}.bbo-selected-process>p{max-width:800px}.bbo-process-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:24px}.bbo-process-crop{width:100%;height:250px;background:#202020;border:0;padding:16px;display:flex;align-items:center;justify-content:center;cursor:zoom-in;margin-bottom:16px}.bbo-process-crop svg{display:block;width:100%;max-height:218px}.bbo-process-grid h3{margin:12px 0 8px}.bbo-process-grid p{margin:0}.bbo-type-grid article{display:grid;grid-template-rows:subgrid;grid-row:span 4;gap:0}.bbo-type-grid article>h3{margin-top:0}@media(max-width:900px){.bbo-overview-grid img{height:300px}}@media(max-width:640px){.bbo-overview-grid{gap:12px}.bbo-overview-grid img{height:180px}.bbo-process-grid{grid-template-columns:1fr}.bbo-type-grid article{display:block;grid-row:auto}.bbo-type-sample{height:140px}}

/* Align the tournament paragraph with the title row below its label. */
.bbo-about>div:first-child{display:contents}.bbo-about{column-gap:48px;row-gap:16px;align-items:start}.bbo-about>.bbo-about-label{grid-column:1/-1}.bbo-about>div:first-child>.eyebrow{grid-column:1/-1}.bbo-about>div:first-child>h2{grid-column:1;grid-row:2;margin-top:0}.bbo-about>div:last-child{grid-column:2;grid-row:2}@media(max-width:760px){.bbo-about>div:first-child>h2{grid-column:1;grid-row:auto}.bbo-about>div:last-child{grid-column:1;grid-row:auto}}

/* Industrial case studies follow the shared gutter and 24/48px rhythm. */
.industrial-case .archive-hero{margin-bottom:var(--space-section)}
.industrial-case .original-narrative{max-width:none;margin:0 0 var(--space-section);display:flex;flex-direction:column;gap:var(--space-grid)}
.industrial-case .original-narrative>.original-heading{margin:var(--space-grid) 0 0;padding-top:var(--space-grid)}
.industrial-case .original-narrative>.original-heading:first-child{margin-top:0}
.industrial-case .original-narrative>.original-copy{margin:0}
.industrial-case .original-list{margin:0;padding:var(--space-grid) 0 0;gap:var(--space-grid)}
.industrial-case .original-gallery{margin:0;gap:var(--space-grid)}
.industrial-case .original-narrative>:is(.interface-study,.shindo-products,.moduli-products,.shodoku-products,.shindo-scenes){margin:var(--space-grid) 0 0}
.industrial-case .original-narrative>section>.original-heading{margin:0 0 var(--space-grid);padding-top:var(--space-grid)}
.industrial-case .product-three-grid{margin:0;gap:var(--space-grid)}
.industrial-case .shindo-scenes{width:100%;max-width:none;left:auto;transform:none}
.industrial-case .shindo-scene{margin:0 0 var(--space-section)}
.industrial-case .shindo-scene:last-child{margin-bottom:0}

/* Align industrial hero artwork with the same page gutter as its text. */
.industrial-case .archive-hero{width:100%;max-width:none;margin:0 0 var(--space-section)}
.industrial-case .archive-hero img{width:100%;height:auto;max-height:none;object-fit:contain;background:transparent}
.industrial-case .metadata{width:100%;min-width:0}
.industrial-case .metadata>div{min-width:0;max-width:100%;overflow-wrap:anywhere}

.industrial-case .archive-hero{width:60%;margin-left:auto;margin-right:auto}

/* Boba uses the portfolio's shared gutters, type, and section rhythm. */
.boba-collection{width:60%;margin:0 auto var(--space-section)}
.boba-case img{display:block;width:100%;height:auto}
.boba-section{border-top:1px solid var(--color-line);padding-top:var(--space-grid);margin:0 0 var(--space-section)}
.boba-section>h2{margin:16px 0 24px}.boba-section>p{max-width:900px;color:var(--color-muted);margin:0 0 16px}
.boba-three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-grid);margin:24px 0}
.boba-three h3{color:var(--color-accent);margin:0 0 8px}.boba-three p{margin:0;color:var(--color-muted)}
.boba-detail{margin:32px 0 0}.boba-case figcaption{margin-top:16px;color:var(--color-muted)}
.boba-graphic-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:32px}.boba-graphic-grid figure{margin:0}.boba-graphic-grid img{height:430px;object-fit:contain}.boba-graphic-grid .original-image-button{background:transparent}
.boba-spreads{display:grid;grid-template-columns:1fr 1fr;gap:48px 24px;margin-top:32px}.boba-spreads figure{margin:0;min-width:0}.boba-spreads .original-image-button{background:transparent}.boba-spreads img{aspect-ratio:1.5;object-fit:contain;object-position:center}.boba-spreads figcaption b,.boba-spreads figcaption span{display:block}.boba-spreads figcaption b{color:var(--color-text);margin-bottom:8px}
.boba-natural figure{margin:32px 0 48px}.boba-natural figcaption{display:flex;justify-content:space-between;gap:24px}.boba-board{margin-top:24px;padding-top:24px;border-top:1px solid var(--color-line)}.boba-board summary{cursor:pointer;color:var(--color-accent)}.boba-board img{margin-top:24px}
@media(max-width:640px){.boba-three,.boba-graphic-grid,.boba-spreads{grid-template-columns:1fr}.boba-graphic-grid img{height:auto;max-height:500px}.boba-natural figcaption{flex-wrap:wrap;gap:8px}.boba-collection{width:100%}}

/* Recruiter browsing: clear project choices and persistent wayfinding. */
header{position:sticky;top:0;z-index:20;background:var(--color-bg);border-bottom:1px solid var(--color-line);padding-top:20px;padding-bottom:20px}
:where([id]){scroll-margin-top:104px}.year-nav{top:81px;z-index:10}
.recruiter-hero{padding-bottom:40px}.recruiter-hero>.eyebrow{margin-bottom:24px}.recruiter-hero .hero-meta p{max-width:660px}.recruiter-hero .spark{top:90px}
.hero-actions{display:flex;gap:24px;flex-wrap:wrap;margin-top:8px}.hero-actions .text-link{margin-top:16px}
.work-filters{display:flex;gap:10px;flex-wrap:wrap;margin:24px 0}.work-filters button{padding:8px 16px;border:1px solid var(--color-line);border-radius:4px;background:transparent;cursor:pointer;color:var(--color-muted)}.work-filters button[aria-pressed=true]{background:var(--color-accent);border-color:var(--color-accent);color:white}
.work-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px 24px}.work-card{min-width:0}.work-card[hidden]{display:none}.work-card>a{display:block}.work-card-image{aspect-ratio:4/3;overflow:hidden;background:#efefe9}.work-card-image img{display:block;width:100%;height:100%;object-fit:contain;transition:transform .3s}.work-card:hover img{transform:scale(1.025)}.work-card-featured .work-card-image{background:#efbc69}.work-card-featured img{object-fit:contain;width:64%;margin:auto}.work-card-body{padding:20px 0 0}.work-card-title{display:flex;align-items:center;justify-content:space-between;margin:12px 0}.work-card-title h3{font-size:26px!important;line-height:1.2!important;margin:0}.work-card-title>span{color:var(--color-accent)}.work-card p{max-width:560px;color:var(--color-muted);margin:8px 0}.work-card-role{font-size:14px!important}.work-card .text-link{margin-top:12px}
.recruiter-about,.about-introduction{display:grid;grid-template-columns:1fr 1.3fr;gap:48px;border-top:1px solid var(--color-line);padding-top:32px;margin:64px 0}.recruiter-about h2{margin:16px 0}.recruiter-about p,.about-introduction p{margin:0 0 16px;max-width:750px;color:var(--color-muted)}.about-introduction h2{margin:0}.about-hero h1{margin-top:20px}.about-hero .lead{max-width:780px}
.about-experience,.about-education,.about-capabilities{margin:48px 0}.experience-row{display:grid;grid-template-columns:1fr 1.3fr;gap:48px;padding:24px 0;border-bottom:1px solid var(--color-line)}.experience-row h3{margin:0 0 8px;color:var(--color-accent)}.experience-row span{display:block}.experience-date{margin-top:8px;color:var(--color-muted);font-size:14px!important}.experience-row p{margin:0;color:var(--color-muted);max-width:750px}.education-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}.education-grid h3{color:var(--color-accent);margin:0 0 12px}.education-grid p{color:var(--color-muted);margin:8px 0}.about-contact{border-top:1px solid var(--color-line);padding:32px 0 48px}.about-contact h2{margin:0 0 16px}
.case-quick-summary{margin-top:24px;max-width:800px}.case-quick-summary p{margin:8px 0}.case-status{color:var(--color-muted);font-size:14px!important}.case-outline{border-top:1px solid var(--color-line);border-bottom:1px solid var(--color-line);padding:16px 0;margin:0 0 32px}.case-outline summary{cursor:pointer;color:var(--color-accent);width:100%}.case-outline nav{display:flex;flex-wrap:wrap;gap:12px 24px;margin-top:20px}.case-outline a{padding:0 0 4px;border-bottom:1px solid var(--color-line);max-width:400px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
body :is(figcaption,.metadata dt,.metadata dd,.footnote,.case-status,.related-type){font-size:14px!important;line-height:1.5!important}body figcaption{font-weight:400!important}body .metadata dd{font-weight:400!important}.original-narrative>.original-list{font-size:14px}.case-end{padding-bottom:48px}
@media(max-width:760px){.work-grid{gap:32px 20px}.recruiter-about,.about-introduction,.experience-row{grid-template-columns:1fr;gap:16px}.education-grid{grid-template-columns:1fr;gap:24px}.recruiter-hero .spark{display:none}}
@media(max-width:640px){header{padding-top:16px;padding-bottom:16px;gap:12px}header nav{gap:16px;flex-wrap:wrap}header nav a{font-size:14px!important}.wordmark{font-size:20px}body .recruiter-hero h1{font-size:clamp(46px,10vw,64px)!important}.work-grid{grid-template-columns:1fr}.work-card-image{aspect-ratio:4/3}.work-card-title h3{font-size:24px!important}.work-filters{gap:8px}.work-filters button{font-size:14px!important;padding:8px 12px}.hero-actions{gap:12px 24px}.year-nav{top:108px;overflow-x:auto}.case-outline nav{display:grid;gap:12px}.case-outline a{max-width:none}.recruiter-about{margin:48px 0}}
.mango-card-screens{height:100%;display:flex;gap:12px;align-items:center;justify-content:center;padding:24px}.work-card-featured .mango-card-screens img{width:calc((100% - 24px)/3);height:100%;object-fit:contain;margin:0;transform:none}.work-card-featured:hover .mango-card-screens{opacity:.95}
/* Homepage app previews share one visible image height without device-UI crops. */
.work-card-featured .work-card-image{container-type:inline-size}
.work-card .mango-card-screens>img{clip-path:none!important;width:auto!important;height:calc((100cqw - 72px) * .72059)!important;max-width:none;flex:0 0 auto;object-fit:contain}

/* Align experience descriptions with the role, below the company heading. */
@media(min-width:761px){
  .experience-row{row-gap:0}
  .experience-row>div{display:contents}
  .experience-row h3{grid-column:1;grid-row:1}
  .experience-row>div>span:not(.experience-date){grid-column:1;grid-row:2}
  .experience-row .experience-date{grid-column:1;grid-row:3}
  .experience-row>p{grid-column:2;grid-row:2 / 4;align-self:start}
}

/* A consistent grid keeps section navigation easy to scan. */
.case-outline summary{display:flex;align-items:center;justify-content:space-between;list-style:none;font-weight:600}
.case-outline summary::-webkit-details-marker{display:none}
.case-outline summary>span{transition:transform .2s}
.case-outline[open] summary>span{transform:rotate(180deg)}
.case-outline nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 32px;margin-top:16px}
.case-outline nav a{display:flex;align-items:baseline;gap:12px;max-width:none;padding:12px 0;font-size:14px!important;line-height:1.5;font-weight:500}
.case-outline-number{flex:none;font-size:12px;color:var(--color-muted);font-weight:400;font-variant-numeric:tabular-nums}
@media(max-width:760px){.case-outline nav{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:20px}}
@media(max-width:480px){.case-outline nav{grid-template-columns:1fr}}

.bbo-hero-layout{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;margin-top:24px}
.bbo-hero-poster{margin:0;display:flex;justify-content:center}
.bbo-hero-poster .flyer-button{display:block;padding:0;background:none;border:0;width:min(100%,400px);cursor:zoom-in}
.bbo-hero-poster img{display:block;width:100%;height:auto}
@media(max-width:640px){.bbo-hero-layout{grid-template-columns:1fr;gap:24px}.bbo-hero-poster .flyer-button{width:min(100%,320px)}}

.case-opening-copy{max-width:65ch;margin:24px 0 0}
.case-opening{border-top:1px solid var(--color-line);padding:24px 0;margin-bottom:24px}
.case-opening .case-intro{max-width:66ch;margin:12px 0 24px}
.case-opening-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;max-width:780px}
.case-opening-grid figure{margin:0;min-width:0}
.case-opening-grid button{display:grid;place-items:center;width:100%;padding:16px;background:var(--color-bg)}
.case-opening-grid img{display:block;max-width:100%;width:auto;height:clamp(180px,40vw,390px);object-fit:contain}
.case-opening-grid figcaption{margin-top:12px}
.case-opening-grid p{margin:4px 0;color:var(--color-muted)}
.year-nav{top:var(--site-header-height,81px)}
:where([id]){scroll-margin-top:calc(var(--site-header-height,81px) + 24px)}
#viewer{max-height:95dvh}
#viewer-image{width:auto;height:auto;max-width:100%;max-height:calc(95dvh - 110px);object-fit:contain;margin-inline:auto}
@media(max-width:480px){.case-opening-grid{gap:12px}.case-opening-grid button{padding:6px}.year-nav a{flex-shrink:0}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

.case-opening{padding-bottom:0;margin-bottom:24px}
.case-opening-grid button{padding:0}
.case-opening + .original-narrative{max-width:none;margin:0 0 48px}
.case-opening + .original-narrative > .original-heading:first-child{margin-top:0;padding-top:24px}
.case-opening + .original-narrative > .original-list{margin:0;padding-block:16px}

/* Shared typography for every portfolio route. */
:root{--type-section:24px;--type-small:14px}

body main h1,body main .hero h1,body main .recruiter-hero h1{
  font-family:var(--font-family)!important;
  font-size:var(--type-title)!important;
  font-weight:var(--weight-title)!important;
  line-height:1.12!important;
  letter-spacing:-1.3px!important;
}
body main h2{
  font-size:var(--type-section)!important;
  line-height:1.25!important;
  letter-spacing:-.5px!important;
}
body main :is(h3,h4,.original-list h2,.work-card-title h3){
  font-size:var(--type-copy)!important;
  font-weight:var(--weight-title)!important;
  line-height:1.5!important;
  letter-spacing:-.2px!important;
}
body main :is(.project-hero .lead,.project-hero .archive-type,.metadata dt,.metadata dd,.case-quick-summary p,.case-opening-copy){
  font-size:var(--type-copy)!important;
  font-weight:var(--weight-main)!important;
  line-height:1.5!important;
  letter-spacing:-.2px!important;
}
body main :is(.eyebrow,.mini-label,.footnote,.board-note,.related-type,figcaption,.experience-date){
  font-size:var(--type-small)!important;
  font-weight:var(--weight-main)!important;
  line-height:1.5!important;
}
body main :is(p,li,td,dd):not(.eyebrow,.mini-label,.footnote,.board-note,.related-type,.experience-date){
  font-weight:var(--weight-main);
}
body main .case-outline :is(a,a span){
  font-size:var(--type-small)!important;
  font-weight:var(--weight-main);
}

.link-arrow-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -.125em;
}

.mango-download-wireframe-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;margin-top:24px}
.mango-download-wireframe-grid figure{margin:0;min-width:0}
.mango-download-wireframe-grid button{display:block;width:100%}
.mango-download-wireframe-grid img{display:block;width:100%;height:auto}
.mango-download-wireframe-grid figcaption{margin-top:12px}
.mango-download-wireframe-grid figcaption p{margin:4px 0 0}
@media(max-width:760px){.mango-download-wireframe-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

.mango-download-wireframes{margin-bottom:var(--space-section)}