/* V21: the reverse of a shop sign becomes a quiet aluminium reading plate. */
#work-open{font:inherit;letter-spacing:inherit;line-height:inherit;color:inherit;border:0;border-radius:4px;padding:4px 0;background:transparent;backdrop-filter:none;pointer-events:auto;text-align:center}
#work-open:hover{background:transparent}
#work-ui.is-reading{opacity:0;pointer-events:none;transition:opacity .24s ease}
#work-ui.is-reading button{pointer-events:none}
#case-action{z-index:6}
body:not([data-state=work]) #case-action{opacity:0!important;visibility:hidden;pointer-events:none!important}
#case-page{position:fixed;z-index:8;display:flex;flex-direction:column;isolation:isolate;overflow:hidden;border:1px solid #fafcfbd9;border-radius:16px;color:#202722;background:linear-gradient(117deg,#e3e6e5f7,#f0f1ecf5 32%,#c5cdcef5 74%,#e7eae7f7);box-shadow:inset 0 1px 1px #fff,0 25px 90px #05162645;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);opacity:0;pointer-events:none;transition:opacity .3s ease}
#case-page:before{content:'';position:absolute;inset:0;background:url('./case-assets/aluminium-reference.png') center/cover;opacity:.22;mix-blend-mode:multiply;pointer-events:none;z-index:-1}
#case-page.is-readable{opacity:1;pointer-events:auto}
.case-toolbar{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:11px 28px;border-bottom:1px solid #35403935;flex-shrink:0;font:11px/1.3 'Courier New',monospace;letter-spacing:.01em}
.case-toolbar>div{display:flex;align-items:center;gap:12px}
.case-toolbar .theme-toggle{color:#202722!important;width:36px;height:36px;min-width:36px}
#close-case{background:#ffffff28;color:#202722;border:1px solid #2c383644;font:10px/1.2 'Courier New',monospace;letter-spacing:.015em;padding:10px 13px;white-space:nowrap}
#close-case:hover{background:#fff8}
#case-scroll{position:relative;min-height:0;flex:1;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#4d595970 transparent;padding:32px 52px 0;scroll-behavior:smooth;touch-action:pan-y}
#case-scroll article{max-width:1016px;margin:auto}
.case-toolbar,#case-scroll{opacity:0;transform:translateY(8px);transition:opacity .42s ease .1s,transform .5s ease .1s}
.is-readable .case-toolbar,.is-readable #case-scroll{opacity:1;transform:none}

.case-opening{display:grid;grid-template-columns:1.3fr 1fr;gap:56px;padding:34px 0 38px;align-items:end}
.case-index{display:block;font:10px/1.5 'Courier New',monospace;letter-spacing:.02em;color:var(--case-accent);margin:0 0 20px}
#case-title{font-size:22px;font-weight:500;letter-spacing:-.045em;line-height:1.15;margin:0 0 18px}
.case-headline{font-size:clamp(46px,5.6vw,78px);font-weight:400;line-height:.94;letter-spacing:-.06em;margin:0}
.case-headline em{font-family:Georgia,'Times New Roman',serif;font-weight:400;letter-spacing:-.065em}
.case-introduction p{font-size:18px;line-height:1.45;letter-spacing:-.02em;margin:0 0 18px}
.case-introduction>span{display:block;font-size:12px;line-height:1.65;max-width:330px;color:#414b44}
.case-figure{margin:0;min-width:0}
.case-figure a{display:block;color:inherit;border-radius:1px}
.case-figure img{display:block;width:100%;height:auto;background:#d7dcda}
/* Keep the top 1080px of the 1800 x 1203 photograph, excluding its white bottom strip. */
.case-diffuser-crop img{aspect-ratio:5/3;object-fit:cover;object-position:center top}
.case-figure figcaption{display:block;margin:10px 0 0;font:9px/1.5 'Courier New',monospace;letter-spacing:.02em}
.case-hero img{aspect-ratio:1.85;object-fit:cover}
#case-page[data-project=home-fragrance-co] .case-hero img{object-position:50% 48%}
#case-page[data-project=wax-republic] .case-hero img{aspect-ratio:1.5;object-fit:contain}
.case-facts{display:grid;grid-template-columns:.8fr 1.3fr 1fr;gap:24px;padding:24px 0 28px;border-bottom:1px solid #39443c70;font:9px/1.65 'Courier New',monospace;letter-spacing:.01em}
.case-facts strong{display:block;font:12px/1.5 Helvetica,Arial,sans-serif;margin-top:8px;font-weight:400}
.case-credit{font:11px/1.5 Helvetica,Arial,sans-serif;align-self:end;color:#424d46}
.case-split{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:start;margin:74px 0}
.case-essay{border-top:1px solid #39443c70;padding-top:19px}
.case-essay .case-index{margin-bottom:36px}
.case-essay h2{font-weight:400;font-size:clamp(29px,3.2vw,44px);line-height:1.03;letter-spacing:-.045em;margin:0 0 26px}
.case-essay p{font-size:14px;line-height:1.75;letter-spacing:-.012em;margin:0 0 18px;max-width:36em}
.case-offset{padding-top:68px}
.case-pair{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start;margin:68px 0}
.case-pair-wide{grid-template-columns:1.55fr 1fr;gap:70px;align-items:center}
.case-pair-wide .case-contain img{max-height:480px;object-fit:contain;background:transparent}
.case-statement{display:grid;grid-template-columns:1.25fr 1fr;gap:70px;align-items:end;border-top:1px solid #39443c70;border-bottom:1px solid #39443c70;padding:35px 0;margin:72px 0}
.case-statement>p{font:italic 43px/1.05 Georgia,serif;letter-spacing:-.045em;margin:0}
.case-statement>span{font-size:14px;line-height:1.6;max-width:260px}
.case-range{width:75%;margin:0 auto 72px}
.case-logo{padding:36px;background:#fff}
.case-logo img{max-height:360px;object-fit:contain;background:white}
.case-digital .case-essay{position:sticky;top:24px}
.case-website{padding:16px;background:#f9f9f680;border:1px solid #fff7;box-shadow:0 9px 22px #3d4e4a0f}
.case-ending{border-top:1px solid #39443c70;margin-top:72px;padding:30px 0 52px}
.case-ending h2{font-size:40px;font-weight:400;letter-spacing:-.045em;margin:0 0 28px}
.case-return{display:flex;align-items:center;justify-content:space-between;width:100%;padding:18px 0;border:0;border-radius:0;border-top:1px solid #39443c50;border-bottom:1px solid #39443c50;background:transparent;color:inherit;text-align:left;font-size:13px;backdrop-filter:none}
.case-return:hover{background:#ffffff28}

/* Real website captures stay readable and open at their complete dimensions. */
.case-site-link{display:inline-block;color:var(--case-accent);font-size:12px;line-height:1.5;margin-top:21px;padding-bottom:5px;border-bottom:1px solid currentColor;}
.case-project-status{display:inline-block;margin:0 0 22px;padding:7px 10px;border:1px solid #b5322560;border-radius:3px;color:#90271d;background:#fff5d85c;font:10px/1.5 'Courier New',monospace;}
article[data-case=kamikardzi] .case-hero img{aspect-ratio:16/9;object-fit:contain;}
.kami-brand-window{display:block;position:relative;overflow:hidden;width:min(190px,100%);aspect-ratio:671/453;}
.kami-brand-window .case-brand-logo{position:absolute;left:-10.73025%;top:-40.17660%;width:119.22504%!important;height:auto!important;max-height:none!important;}
#case-label .kami-brand-window{width:65px;}
.kami-full-homepage img{aspect-ratio:auto;object-fit:contain;}
@media(max-width:620px){.kami-brand-window{width:min(160px,100%);}#case-label .kami-brand-window{width:50px;}.case-project-status{font-size:9px;margin-bottom:18px;}}
article[data-case=pellegrini] .case-hero img{aspect-ratio:16/9;object-fit:contain;background:#f6f3eb;}
.case-comparison{margin:64px 0;border-top:1px solid #39443c70;padding-top:24px;}
.case-comparison h2{font:400 clamp(30px,3.4vw,44px)/1.06 Helvetica,Arial,sans-serif;letter-spacing:-.045em;margin:0 0 24px;}
.case-comparison>p{font-size:14px;line-height:1.75;max-width:40em;margin:0 0 24px;}
.case-screen-pair{margin:28px 0 14px;gap:22px;}
.case-screen-pair img{aspect-ratio:16/9;object-fit:cover;object-position:top;border:1px solid #ffffff9c;}
.case-screen-pair figcaption{color:var(--case-accent);}
.case-comparison .case-image-note{font:10px/1.65 'Courier New',monospace;color:#414b44;margin:18px 0 0;max-width:68em;}
.case-screen-wide{margin:34px 0 64px;}
@media(max-width:620px){.case-screen-pair{grid-template-columns:1fr;gap:26px;}.case-comparison{margin:40px 0;}.case-screen-wide{margin:28px 0 40px;}}

.afh-logo-pair{display:grid;gap:24px;}
.afh-logo-panel a{display:flex;align-items:center;justify-content:center;min-height:170px;padding:30px;background:#f8f7f3;border:1px solid #fff8;}
.afh-logo-panel img{width:100%;max-width:200px;height:auto;background:transparent;}
.afh-logo-panel-blue a{background:#3e4ead;border-color:#3e4ead;}
article[data-case=australian-fragrance-house] .case-hero img{aspect-ratio:16/9;object-fit:contain;}
@media(min-width:421px) and (max-width:620px){.afh-logo-pair{grid-template-columns:1fr 1fr;gap:16px;}.afh-logo-panel a{min-height:140px;padding:20px;}}

.case-track{height:3px;background:#fff3;flex:none}
#case-progress{height:100%;background:#34413b;transform:scaleX(0);transform-origin:left}
#case-page :focus-visible{outline:2px solid #174b76;outline-offset:4px}
#case-scroll:focus-visible{outline-offset:-6px}
.image-unavailable{padding:25px;border:1px solid #26312c60;min-height:120px}
body[data-theme=night] #case-page{box-shadow:inset 0 1px 1px #fff,0 25px 90px #0008}
@media(max-width:850px){#case-scroll{padding:26px 32px 0}.case-opening{gap:30px}.case-split,.case-statement{gap:35px}.case-pair-wide{gap:35px}.case-introduction p{font-size:16px}}
@media(max-width:620px){#case-page{border-radius:12px}.case-toolbar{padding:8px 13px;font-size:10px;gap:8px}.case-toolbar>div{gap:3px}.case-toolbar .theme-toggle{width:30px;height:32px;min-width:30px}#close-case{font-size:8px;padding:9px 10px}#case-scroll{padding:21px 20px 0}.case-opening{grid-template-columns:1fr;gap:25px;padding:26px 0 28px}.case-index{font-size:9px;margin-bottom:14px}#case-title{font-size:21px;margin-bottom:17px}.case-headline{font-size:clamp(44px,10.5vw,62px)}.case-introduction p{font-size:16px;line-height:1.5}.case-introduction>span{font-size:12px;max-width:none}.case-hero img{aspect-ratio:1.4}.case-facts{grid-template-columns:1fr 1.2fr;gap:17px;padding:22px 0;font-size:8px}.case-credit{grid-column:1/-1;font-size:11px}.case-facts strong{font-size:11px}.case-split{grid-template-columns:1fr;gap:26px;margin:42px 0}.case-essay .case-index{margin-bottom:22px}.case-essay h2{font-size:34px;margin-bottom:22px}.case-essay p{font-size:14px;line-height:1.7}.case-offset{padding-top:0}.case-pair{gap:15px;margin:38px 0}.case-pair-wide{gap:25px;grid-template-columns:1fr 1fr}.case-figure figcaption{font-size:8px;margin-top:8px}.case-statement{grid-template-columns:1fr;gap:20px;padding:27px 0;margin:40px 0}.case-statement>p{font-size:36px}.case-statement>span{font-size:13px}.case-digital .case-essay{position:static}.case-range{width:100%;margin-bottom:40px}.case-logo{padding:25px}.case-website{padding:10px}.case-ending{margin-top:40px;padding:26px 0 35px}.case-ending h2{font-size:35px}.case-reverse .case-essay{grid-row:1}}
@media(prefers-reduced-motion:reduce){#case-page,.case-toolbar,#case-scroll,#work-ui.is-reading{transition:none}#case-scroll{scroll-behavior:auto}}

/* Client identities and the brief behind each piece of work. */
.case-brand-logo{display:block;width:100%;height:auto;object-fit:contain;object-position:left center;}
#case-label .case-brand-logo{width:90px;max-height:44px;}
#case-page[data-project=wax-republic] #case-label .case-brand-logo{width:52px;max-height:52px;}
#case-title{margin:0 0 30px;}
#case-title .case-brand-logo{width:190px;max-height:102px;}
#case-page[data-project=wax-republic] #case-title .case-brand-logo{width:122px;max-height:none;}
.case-opening{padding-top:8px;}
.case-brief{display:grid;grid-template-columns:1fr 1fr;gap:70px;margin:56px 0 40px;}
.case-brief .case-essay h2{font-size:31px;}
.case-brief .case-index{margin-bottom:22px;}
.case-objective{padding:28px 0 34px;border-top:1px solid #39443c70;border-bottom:1px solid #39443c70;}
.case-objective h2{font:400 clamp(25px,3vw,36px)/1.2 Helvetica,Arial,sans-serif;letter-spacing:-.035em;margin:0;max-width:820px;}
.case-menu-pair{grid-template-columns:1fr;gap:32px;}
.case-outcome{display:grid;grid-template-columns:1fr 1fr;gap:70px;border-top:1px solid #39443c70;padding:28px 0;margin-top:68px;}
.case-outcome h2{font:400 clamp(30px,3.2vw,44px)/1.05 Helvetica,Arial,sans-serif;letter-spacing:-.045em;margin:0;}
.case-outcome p{font-size:14px;line-height:1.75;margin:0 0 18px;}
.case-outcome>div+div{padding-top:35px;}
.case-credits{border-top:1px solid #39443c70;padding-top:22px;margin-top:20px;}
.case-credits h2{font:11px/1.5 'Courier New',monospace;text-transform:uppercase;letter-spacing:.04em;margin:0 0 24px;}
.case-credits dl{display:grid;grid-template-columns:1fr 1fr;gap:24px 70px;margin:0;}
.case-credits dt{font:10px/1.5 'Courier New',monospace;margin-bottom:7px;color:#414b44;}
.case-credits dd{font-size:12px;line-height:1.6;margin:0;max-width:36em;}
.case-ending{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:start;}
.case-ending h2{font-size:clamp(44px,5.6vw,72px);line-height:.98;margin:0;}
.case-ending h2 em{font:italic 1.1em/1 Georgia,serif;letter-spacing:-.06em;}
.case-ending p{font-size:15px;line-height:1.6;margin:0 0 24px;}
.case-enquire{display:block;width:100%;padding:17px 22px;text-align:center;background:#26392f;color:#fff;border:1px solid #26392f;border-radius:999px;font-size:14px;}
.case-enquire:hover{background:#14271d;}
.case-return{display:block;width:auto;border:0;border-bottom:1px solid #39443c60;padding:10px 0;margin-top:12px;font-size:12px;}
@media(max-width:850px){.case-brief,.case-outcome,.case-ending{gap:35px;}.case-credits dl{column-gap:35px;}}
@media(max-width:620px){
 #case-label .case-brand-logo{width:78px;max-height:34px;}
 #case-page[data-project=wax-republic] #case-label .case-brand-logo{width:44px;max-height:44px;}
 #case-title .case-brand-logo{width:160px;max-height:86px;}
 #case-page[data-project=wax-republic] #case-title .case-brand-logo{width:105px;}
 .case-opening{padding-top:4px;}
 .case-brief,.case-outcome,.case-ending{grid-template-columns:1fr;gap:26px;}
 .case-brief{margin:34px 0;}
 .case-brief .case-essay h2{font-size:30px;}
 .case-objective{padding:23px 0 28px;}
 .case-objective h2{font-size:27px;}
 .case-outcome{margin-top:40px;}
 .case-outcome>div+div{padding-top:0;}
 .case-credits dl{grid-template-columns:1fr;gap:20px;}
 .case-menu-pair{grid-template-columns:1fr;gap:26px;}
 .case-ending h2{font-size:48px;}
}
