/* V6: a compact identity and comfortable type, with room for the work. */
@font-face{font-family:'Casey Wordmark';src:url('../fonts/casey-wordmark.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}
body{font-size:17px;line-height:1.55}
.site-header{height:96px;gap:24px}
.header-identity{display:flex;flex-direction:column;align-items:flex-start;gap:4px;flex-shrink:0}
.identity-top{display:flex;align-items:center;gap:12px}
.header-roles{display:flex;flex-wrap:wrap;gap:0 8px;margin:0;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:14px;font-weight:400;line-height:1.5;letter-spacing:0;color:var(--muted)}
.header-roles span{white-space:nowrap}
.header-roles span+span::before{content:"·";margin-right:8px}
.wordmark{font-family:'Casey Wordmark','Helvetica Neue',Helvetica,Arial,sans-serif;font-size:36px;font-style:italic;font-weight:400;letter-spacing:-.055em;line-height:1.1;white-space:nowrap;min-width:0}
.site-header nav{gap:20px;font-size:14px}
.header-actions{gap:16px}
.mode-toggle,.appearance>summary,.menu-toggle{font-size:14px}
.intro{display:block;margin:12px var(--pad) 26px}
.intro h1{font-size:clamp(25px,2.8vw,43px);letter-spacing:-.045em;line-height:1.14;max-width:32ch}
html[data-type="mono"] .intro h1{font-size:clamp(24px,2.5vw,38px)}
.intro-line{font-size:17px;line-height:1.5;margin-top:10px;max-width:60ch}
.section-title h2,.section-title h2 span,.text-link,.project-caption .project-role,.project-number,.selected-grid .card-wiggle .project-number,.gallery-item figcaption,.back-link,.case-notes p,.footer-base,.footer-top p,.review-note,.appearance legend,.option-row button,.panel-close,.cinema-mood-note,.filters button,.pill-link,.eyebrow{font-size:14px}
.eyebrow,.project-caption .project-role,.section-title h2,.appearance legend{text-transform:none;letter-spacing:.02em}
.project-intro,.archive-invitation p:not(.eyebrow),.recent-strip>div>p:last-child{font-size:17px;line-height:1.6}
.preview-role{font-size:16px}
.selected-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:38px 28px}
.selected-grid .project-card{grid-column:span 2}
.selected-grid .card-poppy-lissiman,.selected-grid .card-were-your-parents{grid-column:span 3}
.selected-grid .card-frame{grid-column:span 3}
.selected-grid .card-wiggle{grid-column:span 3}
.selected-grid .card-mmlg{grid-column:span 6;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);column-gap:40px;align-items:start}
.selected-grid .card-mmlg>.project-image{grid-row:1/4;aspect-ratio:1.6}
.selected-grid .card-mmlg>.project-caption{padding-top:12px}
.selected-grid .card-mmlg>.project-intro{margin-top:0}
.selected-grid .card-mmlg>.project-preview{grid-column:2}
.selected-grid .card-poppy-lissiman .project-image,.selected-grid .card-were-your-parents .project-image{aspect-ratio:1.6}
.project-caption h3,.selected-grid .card-wiggle h3{font-size:29px}
.case-story{margin-top:10px}
.case-story:empty{display:none}
.case-recent .page-heading{padding-bottom:26px}
.full-gallery{grid-template-columns:1fr;max-width:1400px;margin:auto;gap:38px}
.case-color-note-constructor .case-hero .zoom img,.case-color-note-constructor .full-gallery .zoom img{max-height:none}
.case-color-note-constructor .case-hero.contain .zoom{padding:0}
.case-recent .case-hero .zoom img,.case-recent .full-gallery .zoom img{max-height:none}
.about-copy p{max-width:56ch}
.page-heading{padding-top:28px;padding-bottom:22px}
.page-heading h1,html[data-type] .page-heading h1{font-size:clamp(32px,3.3vw,46px);line-height:1.12;letter-spacing:-.045em}
.page-heading .lead{font-size:18px;max-width:58ch;line-height:1.55;margin-top:12px}
.page-heading+.section{padding-top:12px}
.filters{margin-bottom:24px}
.footer-base>span:first-child{width:auto;margin-right:0}
.footer-base>span:last-child{margin-left:auto}
.back-link{min-height:44px;display:inline-flex;align-items:center;margin-bottom:10px}
.case-notes{max-width:72ch}
.image-dialog .dialog-bar{flex-shrink:0}
.dialog-original{font-size:14px;text-decoration:underline;text-underline-offset:4px;min-height:44px;display:flex;align-items:center;margin-right:auto}
.prometheus-note,.prometheus-choice-number,.prometheus-eyebrow,.prometheus-sheet-link,.prometheus-help,.prometheus-ratio-control p,.prometheus-summary-note{font-size:14px!important}
html[data-mode="cinema"] .selected-grid .card-mmlg{display:block;grid-column:1}
html[data-mode="cinema"] .selected-grid .card-mmlg>.project-intro{margin-top:12px}
html[data-mode="cinema"] .selected-grid .card-frame,html[data-mode="cinema"] .selected-grid .card-wiggle,html[data-mode="cinema"] .selected-grid .card-were-your-parents{grid-column:1}
@media(max-width:1180px){.site-header{gap:18px}.site-header .desktop-navigation{display:none}.site-header .mobile-menu{display:block}.header-actions{gap:12px}.wordmark{font-size:34px}}
@media(max-width:700px){
 .site-header{height:auto;min-height:112px;display:flex;flex-wrap:wrap;gap:0;padding:14px var(--pad) 8px;align-content:center;justify-content:space-between}
 .header-identity{width:100%;gap:5px;margin-bottom:4px}
 .identity-top{gap:10px}
 .header-roles{max-width:100%;column-gap:7px}
 .header-roles span+span::before{margin-right:7px}
 .wordmark{font-size:30px;flex:none;line-height:1.1;margin:0;max-width:none}
 .header-actions{width:100%;justify-content:space-between;gap:12px;margin-left:0}
 .header-actions .mode-toggle{padding:8px 13px;font-size:14px;min-height:44px}
 .appearance>summary,.menu-toggle{font-size:14px;gap:8px}
 .appearance{position:static}
 .appearance-panel{position:absolute;top:100%;max-height:calc(100dvh - 180px)}
 .mobile-menu[open]>.mobile-navigation{max-height:calc(100dvh - 180px)}
 .intro{display:block;margin:8px var(--pad) 22px}
 .intro h1,html[data-type="mono"] .intro h1{font-size:28px;max-width:23ch}
 .intro-line{font-size:16px}
 .selected-grid{grid-template-columns:minmax(0,1fr);gap:32px}
 .selected-grid .project-card,.selected-grid .card-mmlg,.selected-grid .card-frame,.selected-grid .card-wiggle,.selected-grid .card-poppy-lissiman,.selected-grid .card-were-your-parents{grid-column:1;display:block}
 .selected-grid .card-mmlg>.project-intro{margin-top:12px}
 .selected-grid .card-mmlg>.project-image,.selected-grid .card-poppy-lissiman .project-image,.selected-grid .card-were-your-parents .project-image{aspect-ratio:1.42}
 .studies-section .study-grid{grid-template-columns:1fr;gap:30px}
 .studies-section .project-image{aspect-ratio:1.5}
 .studies-section .project-caption h3{font-size:27px}
 .project-caption .project-role,.studies-section .project-role,.section-title h2,.section-title .text-link,.text-link,.footer-base,.footer-top p,.gallery-item figcaption,.appearance legend,.filters button{font-size:14px}
 .project-caption h3,.selected-grid .card-wiggle h3{font-size:28px}
 .page-heading{padding-top:24px;padding-bottom:18px}
 .page-heading h1,html[data-type] .page-heading h1{font-size:32px;overflow-wrap:normal}
 .page-heading .lead{font-size:17px}
 .footer-base{gap:16px}
 .section-title{gap:16px}
 .section-title>a{white-space:nowrap}
 .full-gallery{gap:30px}
 html{scroll-padding-top:180px}
 .dialog-bar button{padding:8px 10px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

@media(max-width:360px){.wordmark{font-size:28px}.identity-top{gap:8px}}


/* A small practical lamp: the same filled blue and oval shapes as the eyes. */
.header-actions .mode-toggle,
html[data-mode="cinema"] .header-actions .mode-toggle{
 position:relative;flex:0 0 44px;width:44px;height:44px;min-width:44px;
 padding:3px;border:0;border-radius:50%;background:transparent;color:#377d96;
 justify-content:center;gap:0;transition:background-color 180ms ease;
}
.mode-lamp{display:block;flex:none;overflow:hidden}
.lamp-shade-lining{fill:#d5dccc}
.lamp-light{transition:opacity 180ms ease}
html[data-theme="ink"] .header-actions .mode-toggle{color:#b9e4e9}
html[data-theme="ink"] .lamp-shade-lining{fill:#22302b}
html[data-theme="ink"] .header-actions .mode-toggle{color:#9bada3}
html[data-theme="ink"] .lamp-light{opacity:0}
html[data-theme="ink"] .lamp-shade-lining{fill:#52645b}
.mode-tooltip{
 position:absolute;right:0;top:calc(100% + 6px);padding:7px 11px;
 background:var(--ink);color:var(--bg);border-radius:8px;font-size:14px;
 font-weight:400;line-height:1.4;white-space:nowrap;pointer-events:none;
 visibility:hidden;opacity:0;z-index:55;
}
.mode-toggle:focus-visible .mode-tooltip{visibility:visible;opacity:1}
@media(hover:hover){
 .header-actions .mode-toggle:hover{background:var(--panel)}
 .mode-toggle:hover .mode-tooltip{visibility:visible;opacity:1}
}
html[data-motion="off"] .mode-toggle,
html[data-motion="off"] .lamp-light{transition:none}
@media(prefers-reduced-motion:reduce){
 .header-actions .mode-toggle,.lamp-light{transition:none}
}

.mode-toggle.tooltip-dismissed .mode-tooltip{visibility:hidden;opacity:0}

/* A lighting-gel fan for appearance; a soft card stack for navigation. */
.header-actions .appearance>summary,.header-actions .menu-toggle{gap:6px;min-height:44px;font-size:14px}
.header-control-icon{display:block;flex:none;overflow:visible;color:#377d96}
.swatch-back,.swatch-middle,.swatch-front{transform-origin:18.5px 25px;transition:transform 220ms ease}
.swatch-back{fill:#758574;transform:rotate(-28deg)}
.swatch-middle{fill:#bc7855;transform:rotate(-9deg)}
.swatch-front{fill:currentColor;transform:rotate(15deg)}
.swatch-pin{fill:#f2ead8}
.appearance[open] .swatch-back{transform:rotate(-46deg)}
.appearance[open] .swatch-middle{transform:rotate(-8deg)}
.appearance[open] .swatch-front{transform:rotate(31deg)}
.menu-icon rect{fill:currentColor;transform-origin:18px 17px;transition:transform 220ms ease,opacity 160ms ease}
.menu-icon .menu-card-middle{fill:#758574}
.mobile-menu[open] .menu-card-top{transform:rotate(45deg) translateY(7px)}
.mobile-menu[open] .menu-card-middle{transform:scaleX(.2);opacity:0}
.mobile-menu[open] .menu-card-bottom{transform:rotate(-45deg) translateY(-7px)}
html[data-theme="ink"] .header-control-icon{color:#b9e4e9}
html[data-theme="ink"] .swatch-back,
html[data-theme="ink"] .menu-card-middle{fill:#a5b39c}
html[data-theme="ink"] .swatch-middle{fill:#d69978}
.lamp-shade{transform-origin:24px 23px}
.lamp-pull{transform-origin:32.75px 23px}
.lamp-jingle .lamp-shade{animation:lamp-settle 780ms ease-in-out both}
.lamp-jingle .lamp-pull{animation:lamp-pull 780ms ease-in-out both}
@keyframes lamp-settle{
 0%,100%{transform:rotate(0deg)}
 14%{transform:rotate(9deg)}
 34%{transform:rotate(-7deg)}
 54%{transform:rotate(4deg)}
 74%{transform:rotate(-2deg)}
}
@keyframes lamp-pull{
 0%,100%{transform:translateY(0) rotate(0deg)}
 14%{transform:translateY(2px) rotate(-8deg)}
 34%{transform:translateY(0) rotate(10deg)}
 54%{transform:rotate(-5deg)}
 74%{transform:rotate(2deg)}
}
html[data-motion="off"] .lamp-shade,html[data-motion="off"] .lamp-pull{animation:none;transform:none}
@media(prefers-reduced-motion:reduce){.lamp-shade,.lamp-pull{animation:none;transform:none}}

/* A small contact link gives the work the final word. */
.footer-top{padding:24px 0 26px;gap:24px}
.footer-top>a{font-size:clamp(18px,2vw,24px);letter-spacing:-.02em;line-height:1.3}
.footer-top>a span{margin-left:8px}
@media(max-width:700px){.footer-top p{margin-top:18px}}

/* A quieter, personal note at the close of the homepage. */
.about-strip p{font-family:Georgia,'Times New Roman',serif;font-size:clamp(22px,2.2vw,30px);font-style:italic;font-weight:400;line-height:1.4;letter-spacing:0;max-width:36ch}

/* Quiet links and full-bleed MMLG artwork; images keep their existing actions. */
.card-mmlg .project-image{background:#198979}
.card-mmlg .project-image img{padding:0;object-fit:cover}
.project-card>.project-intro{margin-top:12px;max-width:58ch}
.project-caption h3 a:hover,.project-caption h3 a:focus-visible{text-decoration:underline;text-underline-offset:5px}
.zoom{cursor:zoom-in}
.archive-more summary,.prometheus-explore>summary{text-decoration:underline;text-underline-offset:5px}
.image-dialog .dialog-bar>div{display:flex;flex-wrap:wrap;gap:6px}
@media(max-width:700px){.image-dialog .dialog-bar{gap:8px}.image-dialog .dialog-bar>div{width:100%}.featured-controls{flex-wrap:wrap}}

/* Lighting and layout are independent; About keeps a comfortable reading width. */
.header-actions .appearance>summary{width:44px;min-width:44px;justify-content:center;gap:0}
.about-layout{grid-template-columns:minmax(0,1fr);max-width:760px}

/* Keep words intact; titles may take the room they need. */
h1,h2,h3,html[data-type] .page-heading h1,.project-caption h3{overflow-wrap:normal;word-break:normal;hyphens:none}
.page-heading h1,html[data-type] .page-heading h1,.project-caption h3,.selected-grid .card-wiggle h3{letter-spacing:-.025em}
.project-caption>div{min-width:0}
.prototype-status{display:block;margin-top:.35em;font-family:var(--body-font,"Helvetica Neue",Helvetica,Arial,sans-serif);font-size:1rem;font-style:normal;font-weight:400;line-height:1.5;letter-spacing:.02em;color:var(--muted)}
.archive-invitation h2,.recent-strip h2{letter-spacing:-.025em;line-height:1.15;overflow-wrap:normal;text-wrap:pretty}
.site-header .desktop-navigation{flex-wrap:wrap}
.header-identity{min-width:0}
.header-roles{row-gap:2px}
/* Three generous covers, each leading straight to its existing project page. */
.prototype-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:42px}
.prototype-grid .project-card{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);column-gap:40px;align-content:start;padding-bottom:42px;border-bottom:1px solid var(--line)}
.prototype-grid .project-image{grid-row:1/3;aspect-ratio:1.6;min-width:0}
.prototype-grid .project-caption{align-self:end;padding-top:12px}
.prototype-grid .project-intro{margin-bottom:0;align-self:start;max-width:38ch}
.prototype-grid .project-number{display:none}
.prototype-grid .contain .project-image img{padding:12px;object-fit:contain}
.case-frame .case-story{margin-top:0;padding-top:8px}
.case-frame .case-story .story-row:last-child{border-bottom:0;padding-bottom:14px}
@media(max-width:700px){
 .prototype-grid{gap:30px}
 .prototype-grid .project-card{display:block;padding-bottom:30px}
 .prototype-grid .project-caption{padding-top:18px}
 .prototype-grid .project-image{aspect-ratio:1.5}
 .prototype-grid .contain .project-image img{padding:6px}
 .archive-invitation h2,.recent-strip h2{font-size:clamp(28px,7.6vw,42px)}
 .section-title{flex-wrap:wrap}
}