/* Bad Moon v4. Built by scripts/build-webflow-staging.cjs. */ /* site-styles.css */ :root{--bg:#111211;--ink:#eeeee7;--muted:#a7aaa4;--accent:#EEFF58;--line:#343730}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:90px}body{margin:0;background:var(--bg);color:var(--ink);font-family:Arial,Helvetica,sans-serif}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:5px}.review{background:var(--accent);color:#172013;padding:8px 5%;font-size:11px;letter-spacing:1.5px;text-align:center;text-transform:uppercase}header{height:90px;padding:0 5%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);background:var(--bg);position:sticky;top:0;z-index:20}.brand{display:flex;align-items:center;gap:12px}.moon{width:34px;height:34px;border-radius:50%;background:var(--ink);position:relative;overflow:hidden}.moon:after{content:'';position:absolute;width:29px;height:29px;border-radius:50%;background:var(--bg);left:13px;top:-4px}.wordmark{font-weight:900;font-size:22px;letter-spacing:-1px;line-height:.9}.wordmark small{display:block;font-size:8px;letter-spacing:3px;margin-top:6px}nav{display:flex;gap:32px;align-items:center;font-size:12px}nav a:hover{color:var(--accent)}.navcta{border:1px solid #7a8073;padding:12px 18px}.menu{display:none;background:none;border:0}.eyebrow{text-transform:uppercase;letter-spacing:2px;font-size:10px;color:var(--muted)}.hero{position:relative;min-height:680px;height:calc(100svh - 122px);max-height:940px;overflow:hidden;background:#182126}.hero img{position:absolute;width:100%;height:100%;object-fit:cover;object-position:50% 35%}.hero:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,14,13,.91),rgba(7,14,13,.33) 65%,rgba(7,14,13,.05)),linear-gradient(0deg,#111211,transparent 40%)}.hero-content{position:relative;z-index:1;padding:9vh 5%;max-width:960px}.hero .eyebrow{color:var(--accent)}h1{font-size:clamp(64px,8.5vw,132px);font-weight:800;letter-spacing:-.075em;line-height:.92;margin:28px 0}h1 span{color:var(--accent)}.hero p{font-size:16px;line-height:1.6;color:#d3d8ce;max-width:370px;margin:28px 0}.link{display:inline-flex;align-items:center;gap:40px;border-bottom:1px solid var(--accent);padding:14px 0;font-size:13px}.link b{font-size:22px;color:var(--accent);font-weight:400}.hero-foot{position:absolute;bottom:28px;left:5%;right:5%;z-index:2;display:flex;justify-content:space-between;color:#bac1b5;font-size:10px;letter-spacing:1px}.hero-foot a:hover{color:var(--accent)}.clients{padding:32px 5%;border-bottom:1px solid var(--line);display:flex;gap:40px;align-items:center}.clients .eyebrow{max-width:135px;line-height:1.7}.client-list{display:flex;flex:1;justify-content:space-around;gap:24px;flex-wrap:wrap;font-size:17px;font-weight:700;color:#bbbeb6}.section{padding:100px 5%}.section-top{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:38px}h2{font-size:clamp(40px,5vw,76px);line-height:1;letter-spacing:-.055em;font-weight:600;margin:18px 0 0}.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:28px}.filters button{background:transparent;border:1px solid var(--line);padding:10px 18px;border-radius:25px;font-size:11px;color:var(--muted)}.filters button.active{background:var(--ink);color:var(--bg);border-color:var(--ink)}.grid{display:grid;grid-template-columns:1fr 1fr;gap:40px 24px}.card{padding:0;border:0;background:none;text-align:left;width:100%}.visual{aspect-ratio:1.52;overflow:hidden;background:#222}.visual img{height:100%;width:100%;object-fit:cover;transition:transform .5s,filter .5s}.card:hover img{transform:scale(1.035);filter:brightness(1.1)}.caption{padding:18px 0;display:flex;align-items:center;justify-content:space-between}.caption h3{font-size:17px;font-weight:500;margin:0 0 8px}.caption small{font-size:10px;letter-spacing:1px;color:var(--muted);text-transform:uppercase}.caption span{font-size:25px;color:var(--accent)}.artnote{color:var(--muted);font-size:11px;margin-top:30px;line-height:1.6}.services{border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1.1fr;gap:100px}.lead{color:var(--muted);font-size:16px;line-height:1.7;max-width:390px;margin-top:28px}.service{padding:25px 0;border-bottom:1px solid var(--line)}.service summary{font-size:25px;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:20px}.service summary:after{content:'+';color:var(--accent);font-size:23px}.service[open] summary:after{content:'−'}.service p{font-size:14px;color:var(--muted);line-height:1.7;max-width:460px}.studio{background:#e4e7dc;color:#191c17;display:grid;grid-template-columns:1.3fr 1fr;gap:90px}.studio h2{font-size:clamp(48px,5vw,76px)}.studio .eyebrow{color:#50594c}.studio p{font-size:17px;line-height:1.8;margin-top:10px}.facts{display:flex;gap:50px;margin-top:38px;padding-top:25px;border-top:1px solid #a8afa1}.facts strong{font-size:27px;display:block}.facts small{display:block;font-size:10px;text-transform:uppercase;letter-spacing:1px;margin-top:10px}.ip{border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:25px;padding:32px 5%}.ip strong{font-size:24px;font-weight:500}.ip span{font-size:10px;letter-spacing:2px;color:var(--accent)}.contact{padding:100px 5% 70px}.contact h2{font-size:clamp(60px,8vw,116px);max-width:950px}.contact-row{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-top:45px}.email{font-size:clamp(18px,3vw,36px);border-bottom:1px solid var(--accent);padding-bottom:12px}.contact p{color:var(--muted);font-size:13px;line-height:1.7;max-width:300px}footer{display:flex;justify-content:space-between;gap:20px;padding:25px 5%;border-top:1px solid var(--line);color:var(--muted);font-size:10px}dialog{background:var(--bg);color:var(--ink);border:1px solid var(--line);padding:24px;width:min(1000px,94vw);max-height:92vh}dialog::backdrop{background:#000d}dialog img{display:block;max-width:100%;max-height:65vh;margin:20px auto;object-fit:contain}.dialog-head{display:flex;justify-content:space-between;align-items:center;gap:20px}dialog h3{margin:0;font-size:24px}dialog button{border:1px solid var(--line);background:none;padding:9px 14px}dialog p{font-size:12px;color:var(--muted);line-height:1.6}dialog .link{font-size:12px}.hidden{display:none!important}@media(max-width:760px){header{height:75px}.menu{display:block}nav{display:none;position:absolute;top:75px;left:0;right:0;background:var(--bg);padding:25px 5%;flex-direction:column;align-items:start}nav.open{display:flex}.hero{height:740px;min-height:600px}.hero-content{padding-top:90px}.hero img{object-position:65% 35%}h1{font-size:72px}.hero:after{background:linear-gradient(90deg,#07100ddd,#07100d33),linear-gradient(0deg,#111211,transparent)}.hero-foot{font-size:8px;gap:20px}.clients{align-items:start;flex-direction:column;gap:22px}.clients .eyebrow{max-width:none}.client-list{justify-content:start;font-size:14px;gap:20px 30px}.section{padding:65px 5%}.section-top{align-items:start;gap:20px;flex-direction:column}.grid{grid-template-columns:1fr;gap:20px}.services,.studio{grid-template-columns:1fr;gap:30px}.contact{padding-top:70px}.contact-row{flex-direction:column;align-items:start}.facts{gap:30px}.ip{align-items:start;flex-direction:column}.caption h3{font-size:16px}footer{line-height:1.8;flex-wrap:wrap}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.visual img{transition:none}} /* Review 02: editorial typography and full-image masonry */ @font-face{font-family:StudioDisplay;src:url('https://cdn.prod.website-files.com/6ace877c1c1df34e33b7760b/6af5492e22e2dab8ab67b2de_bm-runtime-studio-display.ttf') format('truetype');font-style:normal;font-weight:600 700;font-display:swap} .review{font-size:13px}.eyebrow{font-size:12px;line-height:1.6}nav{font-size:14px}.wordmark small{font-size:10px}.hero p{font-size:18px;max-width:430px}.link{font-size:15px}.hero-foot{font-size:12px;letter-spacing:.6px}h1,h2{font-family:StudioDisplay,'Arial Narrow',Impact,sans-serif;text-transform:uppercase;font-weight:600;letter-spacing:-.025em}h1{font-size:clamp(80px,10.4vw,164px);line-height:.88}h2{font-size:clamp(52px,6vw,88px);line-height:.95}.hero-content{max-width:1150px;padding-top:7vh}.hero img{object-position:50% 42%}.hero:after{background:linear-gradient(90deg,rgba(7,14,13,.84),rgba(7,14,13,.18) 70%),linear-gradient(0deg,#111211,transparent 45%)} .filters button{font-size:14px;padding:11px 20px}.grid{display:block;columns:2;column-gap:10px}.card{display:block;break-inside:avoid;margin-bottom:10px;position:relative;overflow:hidden}.visual{aspect-ratio:auto;overflow:hidden}.visual img{display:block;width:100%;height:auto;object-fit:contain}.caption{position:absolute;bottom:0;left:0;right:0;padding:45px 20px 18px;background:linear-gradient(transparent,rgba(0,0,0,.85));opacity:0;transition:opacity .25s}.card:hover .caption,.card:focus-visible .caption{opacity:1}.caption h3{font-size:18px;line-height:1.3}.caption small{font-size:12px}.artnote{font-size:13px;line-height:1.7}.lead{font-size:18px;max-width:430px}.service p{font-size:16px}.studio p{font-size:18px}.facts small{font-size:12px}.ip .eyebrow,.ip span{font-size:12px}.contact p{font-size:16px;max-width:350px}footer{font-size:12px}.clients{padding:42px 5%;border-top:1px solid var(--line);gap:50px}.clients .eyebrow{max-width:190px}.client-list{align-items:center;justify-content:space-between}.client-list a{display:flex;justify-content:center;align-items:center;min-height:65px;flex:1}.client-list img{object-fit:contain;max-width:200px;max-height:65px;filter:grayscale(1);opacity:.7;transition:opacity .2s}.client-list a:hover img{opacity:1}.client-list .rt{filter:grayscale(1) invert(1);max-width:230px}.client-list .peg{max-width:150px;max-height:80px} .testimonials{padding:65px 5%;border-top:1px solid var(--line)}.testimonial-top{display:flex;justify-content:space-between;align-items:center;gap:20px}.testimonial-top button{background:none;border:1px solid var(--line);padding:10px 16px;font-size:13px}.testimonial-layout{display:grid;grid-template-columns:1fr 1.5fr;gap:70px;padding-top:35px}.testimonial-layout h2{font-size:55px}.quote-placeholder{border-left:2px solid var(--accent);padding-left:30px}.quote-placeholder .eyebrow{color:var(--accent)}.quote-placeholder p{font-size:23px;line-height:1.55;color:#c5c9be;max-width:660px}.quote-placeholder small{font-size:14px;color:var(--muted)}.testimonial-layout[hidden]{display:none}.viewer-controls{display:flex;gap:12px;align-items:center;justify-content:center;margin:15px 0}.viewer-controls span{font-size:14px;color:var(--muted)}dialog p{font-size:14px}dialog .link{font-size:14px}dialog img{width:auto;height:auto} @media(min-width:1600px){.grid{columns:3}}@media(hover:none){.caption{opacity:1}}@media(max-width:1000px){.hero-foot{font-size:10px}.client-list img{max-width:150px}.client-list .rt{max-width:180px}.testimonial-layout{gap:30px}.services{gap:40px}}@media(max-width:760px){h1{font-size:clamp(68px,13vw,96px)}.hero-content{padding-top:100px}.hero p{font-size:17px}.hero-foot{font-size:10px;flex-wrap:wrap}.hero-foot>a:nth-child(2){max-width:180px;line-height:1.7}.grid{columns:2;column-gap:7px}.card{margin-bottom:7px}.caption{padding:35px 10px 10px;opacity:1}.caption h3{font-size:13px;line-height:1.3;margin-bottom:4px}.caption small{font-size:10px}.caption span{font-size:18px}.clients{gap:25px}.client-list{width:100%;gap:25px;flex-wrap:wrap}.client-list a{flex:0 1 calc(50% - 15px)}.client-list img{max-width:145px;max-height:55px}.client-list .rt{max-width:160px}.testimonial-layout{grid-template-columns:1fr;gap:25px}.quote-placeholder p{font-size:20px}.testimonial-top{align-items:start}.facts{flex-wrap:wrap}footer{font-size:12px}.service summary{font-size:24px}.hero{min-height:700px}} @media(max-width:480px){.grid{columns:1}.caption h3{font-size:17px}.caption small{font-size:12px}.caption{padding:50px 16px 16px}.filters{gap:7px}.filters button{font-size:13px;padding:10px 14px}.testimonial-top{flex-direction:column}.email{font-size:19px}} h1,h2{font-family:StudioWide,Arial,sans-serif;font-weight:400;letter-spacing:-.055em}h1{font-size:clamp(64px,7.5vw,126px);line-height:.98}.hero-content{max-width:1400px;padding-top:150px}header{position:fixed;top:32px;left:0;right:0;background:transparent;border-color:transparent;transition:background .25s,top .25s,backdrop-filter .25s}header.scrolled{top:0;background:rgba(17,18,17,.72);backdrop-filter:blur(18px);border-color:#ffffff12}.hero{height:calc(100svh - 32px);max-height:1000px}.hero:after{background:linear-gradient(90deg,#07100dd9,#07100d22 80%),linear-gradient(0deg,#111211,transparent 45%),linear-gradient(180deg,#11121188,transparent 30%)}.moon:after{background:#111211}.banner-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.project-banner{position:relative;aspect-ratio:1.95;overflow:hidden;border:0;background:#222;padding:0;display:block;text-align:left}.project-banner.is-wide,.project-banner.is-balanced-wide{grid-column:1/-1;aspect-ratio:3.2}.project-banner img{width:100%;height:100%;object-fit:cover;transition:transform .6s}.project-banner:hover img{transform:scale(1.035)}.project-banner:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#000b,transparent 75%)}.banner-copy{position:absolute;z-index:1;bottom:30px;left:30px;right:30px;display:flex;align-items:end;justify-content:space-between;gap:20px}.banner-copy h3{font-family:StudioWide,Arial,sans-serif;text-transform:uppercase;font-size:clamp(23px,2.4vw,38px);letter-spacing:-.04em;margin:9px 0;line-height:1.1}.banner-copy small{font-size:12px;letter-spacing:1px;color:#d3dacd;text-transform:uppercase}.banner-copy .arrow{font-size:32px;color:var(--accent)} .clients{display:block;padding-top:55px;padding-bottom:55px}.clients-top{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:30px}.clients .eyebrow{max-width:none}.logo-controls{display:flex;gap:9px}.logo-controls button{background:none;border:1px solid var(--line);padding:10px 15px;font-size:18px}.logo-viewport{overflow-x:auto;scrollbar-width:none;mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);scroll-snap-type:x proximity;padding:8px 4%}.logo-viewport::-webkit-scrollbar{display:none}.logo-track{display:grid;grid-template-rows:repeat(2,95px);grid-auto-flow:column;grid-auto-columns:calc((82vw - 120px)/7);gap:18px 20px;width:max-content}.logo-cell{display:flex;align-items:center;justify-content:center;scroll-snap-align:start;min-width:0}.logo-cell img{max-width:85%;max-height:72px;object-fit:contain;filter:grayscale(1) brightness(1.55);opacity:.65;transition:opacity .2s}.logo-cell:hover img{opacity:1;filter:grayscale(0)}.logo-note{font-size:12px;color:var(--muted);line-height:1.7;margin:22px 0 0}.stats-section{padding:55px 5% 65px;border-top:1px solid var(--line)}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:32px}.stat{border-left:1px solid var(--line);padding-left:28px}.stat:first-child{border-left:0;padding-left:0}.stat strong{font-family:StudioWide,Arial,sans-serif;display:block;font-size:clamp(48px,5vw,80px);letter-spacing:-.055em;font-variant-numeric:tabular-nums}.stat span{display:block;font-size:14px;color:var(--muted);margin-top:12px}.stats-note{font-size:12px;color:var(--muted);margin-top:28px;line-height:1.7} #gallery-page{padding:150px 5% 80px;min-height:100vh}#gallery-page[hidden],#homepage[hidden]{display:none!important}.gallery-heading{display:flex;justify-content:space-between;align-items:end;gap:40px;margin:30px 0 45px}.gallery-heading h1{font-size:clamp(42px,6vw,85px);margin:18px 0}.gallery-heading p{color:var(--muted);font-size:15px;line-height:1.7}.gallery-wall{columns:3;column-gap:10px}.artwork-tile{width:100%;display:block;break-inside:avoid;border:0;padding:0;background:#222;margin-bottom:10px;position:relative;overflow:hidden}.artwork-tile img{display:block;width:100%;height:auto;transition:filter .25s}.artwork-tile:hover img{filter:brightness(1.12)}.artwork-tile span{position:absolute;bottom:0;left:0;right:0;padding:35px 15px 15px;background:linear-gradient(transparent,#000b);font-size:12px;opacity:0;text-align:left}.artwork-tile:hover span,.artwork-tile:focus-visible span{opacity:1}.gallery-source{color:var(--muted);font-size:12px;line-height:1.7;margin-top:24px}.viewer-credit{color:var(--accent)!important}.testimonial-layout h2{font-size:clamp(34px,3.7vw,55px)}.contact h2{font-size:clamp(48px,6.6vw,104px)}.studio h2{font-size:clamp(40px,4.5vw,72px)}h2{font-size:clamp(40px,4.5vw,72px)} @media(max-width:1100px){.logo-track{grid-auto-columns:160px}.gallery-wall{columns:2}.banner-copy{bottom:22px;left:22px;right:22px}.banner-copy h3{font-size:25px}}@media(max-width:760px){header{top:32px}.hero-content{padding-top:140px}h1{font-size:clamp(42px,9vw,66px);letter-spacing:-.06em}.hero{min-height:720px}.hero p{max-width:340px}.banner-grid{grid-template-columns:1fr}.project-banner,.project-banner.is-wide,.project-banner.is-balanced-wide{grid-column:auto;aspect-ratio:1.5}.banner-copy h3{font-size:26px}.logo-track{grid-auto-columns:135px;grid-template-rows:repeat(2,80px);gap:14px}.logo-cell img{max-height:60px}.stats{gap:20px}.stat{padding-left:15px}.stat strong{font-size:44px}.stat span{font-size:12px;line-height:1.6}.gallery-heading{flex-direction:column;align-items:start;gap:10px}#gallery-page{padding-top:125px}.gallery-wall{columns:2}.artwork-tile span{opacity:1}.logo-note{font-size:12px}.review{font-size:11px;letter-spacing:.6px;padding-top:10px;padding-bottom:10px}.service summary{font-size:22px}.clients-top{align-items:start}}@media(max-width:480px){.gallery-wall{columns:1}.stats{grid-template-columns:1fr;gap:25px}.stat,.stat:first-child{border-left:0;padding-left:0;padding-bottom:20px;border-bottom:1px solid var(--line)}.stat strong{font-size:58px}.stat span{font-size:14px}.banner-copy small{font-size:11px}.gallery-heading h1{font-size:42px}}@media(prefers-reduced-motion:reduce){header,.project-banner img{transition:none}.logo-viewport{scroll-behavior:auto}} /* Review 04: focused reading columns, saturated colour, tactile logo strip. */ .services,.studio,.testimonials,.contact,.stats-section{padding-left:max(5%,calc((100% - 1280px)/2));padding-right:max(5%,calc((100% - 1280px)/2))}.services{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:64px}.studio{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px}.service p{max-width:55ch}.lead{max-width:42ch}.section-top,.filters,.artnote{max-width:1400px;margin-left:auto;margin-right:auto}.testimonial-layout{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:60px}.contact-row{justify-content:start;gap:80px}.contact p{max-width:34ch}header,footer{padding-left:max(5%,calc((100% - 1600px)/2));padding-right:max(5%,calc((100% - 1600px)/2))}.hero-content{width:min(90%,1600px);max-width:none;padding-left:0;padding-right:0;margin-inline:auto}.hero p{max-width:470px}.hero p strong{font-weight:500;color:var(--ink)}.hero-foot{left:max(5%,calc((100% - 1600px)/2));right:max(5%,calc((100% - 1600px)/2))} .logo-viewport{cursor:grab;user-select:none;touch-action:pan-y;scroll-snap-type:none;overflow-anchor:none;mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.12) 10%,rgba(0,0,0,.5) 23%,#000 38%,#000 62%,rgba(0,0,0,.5) 77%,rgba(0,0,0,.12) 90%,transparent 100%);-webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.12) 10%,rgba(0,0,0,.5) 23%,#000 38%,#000 62%,rgba(0,0,0,.5) 77%,rgba(0,0,0,.12) 90%,transparent 100%)}.logo-viewport.dragging{cursor:grabbing}.logo-track{display:flex;width:max-content;gap:20px;grid-template-rows:none;grid-auto-flow:initial}.logo-cycle{display:grid;grid-template-rows:repeat(2,95px);grid-auto-flow:column;grid-auto-columns:clamp(130px,calc((82vw - 120px)/7),230px);gap:18px 20px}.logo-cell{scroll-snap-align:none}.logo-cell img{pointer-events:none;-webkit-user-drag:none;opacity:.85}.logo-controls button{touch-action:none;user-select:none}.logo-controls button:active{border-color:var(--accent);color:var(--accent)}.logo-hint{font-size:12px;color:var(--muted);margin-left:18px;text-transform:none;letter-spacing:0}.social-links{display:flex;align-items:center;gap:12px}.social-links a{display:grid;place-items:center;width:38px;height:38px;border:1px solid var(--line);border-radius:50%;color:var(--ink);transition:color .2s,border-color .2s}.social-links a:hover{color:var(--accent);border-color:var(--accent)}.social-links svg{width:18px;height:18px;fill:currentColor}.social-links svg.line-icon{fill:none;stroke:currentColor;stroke-width:1.8}footer{align-items:center}.stats-note{max-width:70ch}.stat strong{min-width:4ch}.stat span small{display:block;font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--accent);margin-top:8px} @media(max-width:1100px){.services,.studio{gap:40px}.contact-row{gap:40px}.testimonial-layout{gap:35px}}@media(max-width:760px){.services,.studio,.testimonial-layout{grid-template-columns:1fr;gap:30px}.contact-row{gap:20px}.logo-cycle{grid-auto-columns:135px;grid-template-rows:repeat(2,80px);gap:14px 20px}.logo-hint{display:block;margin:6px 0 0}.hero-content{padding-top:140px}.hero-foot{font-size:10px}.hero-foot>a:nth-child(2){max-width:200px}.social-links a{width:40px;height:40px}} /* Review 05: team portraits and live accent directions. */ .team-section{grid-column:1/-1;margin-top:12px;padding-top:42px;border-top:1px solid #b4bcab}.team-intro{display:flex;justify-content:space-between;gap:35px;align-items:end;margin-bottom:36px}.team-intro h3{font-family:StudioWide,Arial,sans-serif;font-size:clamp(23px,2.3vw,32px);letter-spacing:-.035em;max-width:530px;margin:0}.team-intro p{font-size:14px;max-width:350px;line-height:1.6;margin:0;color:#53604b}.team-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:38px 30px}.team-card{margin:0;display:flex;gap:17px;align-items:center}.team-card img{width:108px;height:108px;object-fit:cover;border-radius:50%;filter:grayscale(1);flex:0 0 auto}.team-card.founder img{box-shadow:0 0 0 4px #e4e7dc,0 0 0 6px #89937f}.team-card h4{font-size:16px;font-weight:600;margin:0 0 8px;line-height:1.25}.team-card span{font-size:12px;line-height:1.5;color:#53604b;display:block}.testimonials:has(.testimonial-layout[hidden]){padding-top:30px;padding-bottom:30px} @media(max-width:1100px){.team-card{flex-direction:column;text-align:center;align-items:center}.team-card img{width:120px;height:120px}.team-intro{align-items:start}}@media(max-width:760px){.team-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 20px}.team-intro{flex-direction:column;gap:15px}.team-section{padding-top:32px;margin-top:0}.team-card h4{font-size:15px}.team-card span{font-size:12px}} /* Review 06: approved colour and deliberate headline line breaks. */ :root{--accent:#EEFF58}.heading-wrap{container-type:inline-size;min-width:0;width:100%}body .heading-wrap>h2{font-size:clamp(22px,var(--heading-fluid),var(--heading-max));line-height:1.06;letter-spacing:-.055em;text-wrap:initial;overflow-wrap:normal;hyphens:none}.section-top>div:first-child{flex:1;min-width:0;max-width:850px;width:100%}.heading-line{display:block;white-space:nowrap}.hero-first-line{color:var(--ink)}.hero-content{container-type:inline-size}body .hero-content h1{font-size:clamp(30px,11cqi,126px);line-height:1.02;overflow-wrap:normal}.testimonial-layout>.heading-wrap{align-self:start}#contact-heading-wrap{max-width:950px}.gallery-heading h1{text-wrap:balance;overflow-wrap:normal}.lead,.service p,.studio p,.contact p{text-wrap:pretty} @supports not (font-size:1cqi){body .heading-wrap>h2{font-size:clamp(22px,3.7vw,54px)}body .hero-content h1{font-size:clamp(30px,9vw,126px)}@media(max-width:760px){body .heading-wrap>h2{font-size:clamp(22px,6.4vw,44px)}}} /* Approved final accent placements. */ .section-number,.stat strong,.email{color:var(--accent)}.project-banner{box-shadow:inset 0 0 0 0 transparent}.project-banner:hover,.project-banner:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}.team-card:hover img{box-shadow:0 0 0 4px #e4e7dc,0 0 0 6px var(--accent-on-light)}.services .heading-line:last-child{color:var(--accent)} /* Review 07: compact expanding navigation and optional team introduction. */ header.compact-header{left:max(5%,calc((100% - 1600px)/2));right:auto;top:48px;width:auto;max-width:90%;height:auto;min-height:56px;padding:10px;gap:0;border:1px solid #ffffff22;border-radius:8px;background:rgba(17,18,17,.6);backdrop-filter:blur(16px);justify-content:flex-start;transition:background .2s;box-shadow:0 8px 30px #0002}header.compact-header.scrolled{top:16px;background:rgba(17,18,17,.88)}.logo-trigger{background:none;border:0;padding:0;min-width:34px;min-height:34px;gap:0;text-align:left}.logo-trigger .moon{flex:0 0 34px}.logo-trigger .wordmark{display:none;white-space:nowrap}.compact-header nav{display:none;position:static;background:none;padding:0;font-size:14px;gap:24px}.compact-header.is-open{padding:16px 20px;gap:32px}.compact-header.is-open .logo-trigger{gap:12px}.compact-header.is-open .wordmark{display:block}.compact-header.is-open nav{display:flex}.compact-header .navcta{padding:10px 14px}.team-toggle{display:flex;align-items:center;justify-content:space-between;gap:20px;width:100%;padding:0;background:none;border:0;text-align:left;color:#191c17;font-family:StudioWide,Arial,sans-serif;font-size:clamp(23px,2.3vw,32px);letter-spacing:-.035em}.team-toggle-symbol{font:32px Arial,sans-serif;color:#53604b}.team-toggle:hover{color:var(--accent-on-light)}.team-toggle:focus-visible{outline:2px solid var(--accent-on-light);outline-offset:8px}#team-content[hidden]{display:none!important}#team-content{padding-top:34px}.team-section .team-intro{margin-bottom:30px}.team-section .team-intro h3{font-size:22px}.compact-header nav a{white-space:nowrap}@media(max-width:1000px){.compact-header.is-open{flex-wrap:wrap;gap:20px;max-width:90%}.compact-header.is-open nav{flex-wrap:wrap;gap:16px 24px}}@media(max-width:760px){header.compact-header{top:48px;max-width:90%}.compact-header.is-open{width:90%;gap:18px}.compact-header.is-open nav{display:flex;flex-direction:column;align-items:flex-start;width:100%;gap:18px;padding:4px 0 8px}.compact-header.is-open .wordmark{font-size:21px}.compact-header .navcta{display:block}#team-content{padding-top:28px}} /* Darker lime for readable accents on the pale studio background. */ .studio .section-number{color:var(--accent-on-light)} /* Review 08: transparent, looping testimonial samples. */ .official-menu-badge{display:block;width:36px;height:36px;object-fit:contain}.official-footer-brand{display:flex;flex-direction:column;gap:10px}.official-footer-wordmark{display:block;width:120px;height:auto}.official-gallery-brand{display:block;width:150px;margin-bottom:30px}.official-gallery-brand img{width:100%;height:auto}.clients-top,.logo-note{max-width:1400px;margin-left:auto;margin-right:auto}.logo-viewport{max-width:1400px;margin-left:auto;margin-right:auto}.logo-cycle{grid-auto-columns:180px}.testimonial-loop-layout{display:block;padding-top:35px}.testimonial-loop-layout[hidden]{display:none!important}.testimonial-loop-layout>.heading-wrap{max-width:750px;margin-bottom:25px}.testimonial-loop-top{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:15px}.testimonial-disclaimer{font-size:13px;line-height:1.7;color:var(--muted);max-width:68ch;margin:0}.testimonial-loop-controls{display:flex;gap:10px;flex-shrink:0}.testimonial-loop-controls button{width:44px;height:44px;background:transparent;border:1px solid var(--line);border-radius:50%;font-size:19px;touch-action:none}.testimonial-loop-controls button:hover{border-color:var(--accent);color:var(--accent)}.testimonial-loop-viewport{overflow-x:auto;scrollbar-width:none;cursor:grab;touch-action:pan-y;user-select:none;overflow-anchor:none;mask-image:linear-gradient(90deg,transparent,rgba(0,0,0,.25) 8%,#000 20%,#000 80%,rgba(0,0,0,.25) 92%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,rgba(0,0,0,.25) 8%,#000 20%,#000 80%,rgba(0,0,0,.25) 92%,transparent)}.testimonial-loop-viewport::-webkit-scrollbar{display:none}.testimonial-loop-viewport.dragging{cursor:grabbing}.testimonial-loop-track,.testimonial-cycle{display:flex;gap:36px;width:max-content;align-items:stretch}.testimonial-slide{flex:0 0 auto;display:flex;flex-direction:column;width:clamp(270px,30vw,380px);min-height:310px;padding:24px 8px;background:transparent;border:0;box-shadow:none}.testimonial-sample-label{color:var(--accent);font-size:11px;line-height:1.5;letter-spacing:.8px;text-transform:uppercase;margin-bottom:20px}.testimonial-slide h3{font-size:19px;font-weight:600;line-height:1.4;margin:0 0 18px}.testimonial-slide .testimonial-sample-copy{font-size:17px;line-height:1.7;color:#d3d8ce;margin:0 0 26px}.testimonial-person{margin-top:auto}.testimonial-person strong{display:block;font-size:16px;font-weight:500;margin-bottom:7px}.testimonial-person small{display:block;font-size:12px;line-height:1.6;color:var(--muted)}.testimonial-loop-hint{font-size:12px;color:var(--muted);margin:15px 0 0}.testimonial-loop-viewport:focus-visible{outline:1px solid var(--accent);outline-offset:8px}@media(max-width:760px){.logo-cycle{grid-auto-columns:135px}.testimonial-loop-top{align-items:flex-start}.testimonial-disclaimer{font-size:12px}.testimonial-slide{width:280px;min-height:330px}.testimonial-loop-track,.testimonial-cycle{gap:24px}.testimonial-loop-viewport{mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}} /* Studio light-surface accent and persistent testimonial heading. */ .studio{--light-accent:var(--accent-on-light)}.studio .section-number,.studio .team-toggle-symbol{color:var(--light-accent)}.studio .team-toggle:hover{color:var(--light-accent)}.studio .team-card:hover img{box-shadow:0 0 0 4px #e4e7dc,0 0 0 6px var(--light-accent)}.testimonial-top{align-items:flex-end;gap:30px}.testimonial-header-copy{flex:1;min-width:0;max-width:750px}.testimonial-header-copy .heading-wrap{max-width:750px}.testimonial-top>button{flex-shrink:0;min-height:44px}.testimonial-loop-layout{padding-top:30px}.testimonials:has(.testimonial-layout[hidden]){padding-top:55px;padding-bottom:55px}@media(max-width:760px){.testimonial-top{flex-direction:column;align-items:flex-start;gap:24px}.testimonial-header-copy{width:100%}.testimonials:has(.testimonial-layout[hidden]){padding-top:40px;padding-bottom:40px}} /* Footer aligned with native Webflow layout. */ .back-to-top{display:inline-flex;align-items:center;gap:12px;min-height:44px;color:var(--muted);font-size:12px}.back-to-top:hover{color:var(--accent)} footer{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:24px;padding:25px max(5%,calc((100% - 1600px)/2));font-size:12px;color:var(--muted)} .official-footer-brand{display:flex;flex-direction:column;align-items:flex-start;gap:6px} .official-footer-logo-link{display:block;margin-bottom:10px} footer .social-links{display:flex;align-items:center;gap:12px;flex-wrap:nowrap} footer .social-links a{display:flex;align-items:center;justify-content:center;width:44px;height:44px;flex-shrink:0} @media(max-width:767px){footer{flex-direction:column;align-items:flex-start;justify-content:flex-start;row-gap:24px;padding-top:36px;padding-bottom:32px}.official-footer-brand{width:100%}footer .social-links{justify-content:flex-start}} @media(max-width:767px){footer{display:grid;grid-template-columns:1fr auto;column-gap:20px;align-items:center}.official-footer-brand{grid-column:1/-1;grid-row:1}footer .social-links{grid-column:1;grid-row:2}.back-to-top{grid-column:2;grid-row:2;justify-self:end;white-space:nowrap}.footer-tagline{grid-column:1/-1;grid-row:3}} /* A quiet, lightweight studio ticker. */ body{padding-top:26px}.studio-ticker{position:fixed;inset:0 0 auto;height:26px;z-index:30;display:flex;background:var(--accent);color:#172013;font-size:var(--ticker-size,30px);line-height:26px}.studio-ticker-window{flex:1;min-width:0;overflow:hidden}.studio-ticker-track{display:flex;width:max-content;animation:studio-drift var(--studio-ticker-duration,56.52s) linear infinite;will-change:transform}.studio-ticker-cycle{display:flex;align-items:center;flex-shrink:0;white-space:nowrap;gap:32px;padding-right:32px}.studio-ticker-cycle>span{font-size:var(--ticker-size,30px);line-height:26px}.studio-ticker-dot{opacity:.45}.studio-ticker-pause{flex:0 0 36px;border:0;background:var(--accent);color:#172013;padding:0;font-size:13px}.studio-ticker:hover .studio-ticker-track,.studio-ticker:focus-within .studio-ticker-track,.studio-ticker.is-paused .studio-ticker-track{animation-play-state:paused}header.compact-header,header.compact-header.scrolled{top:43px}@keyframes studio-drift{to{transform:translateX(-50%)}}@media(prefers-reduced-motion:reduce){.studio-ticker-track{animation:none;will-change:auto}.studio-ticker-cycle[aria-hidden]{display:none}.studio-ticker-pause{display:none}} .back-to-top{display:flex;width:56px;height:44px;align-items:center;justify-content:center;white-space:nowrap;margin-left:auto;margin-right:max(5%,calc((100% - 1600px)/2));margin-bottom:16px;font-size:12px} @media(max-width:767px){footer{grid-template-columns:minmax(148px,1fr) minmax(0,1fr);align-items:start}.official-footer-brand{grid-column:1;grid-row:1;min-width:0}.footer-location{grid-column:2;grid-row:1}footer .social-links{grid-column:1;grid-row:2;gap:8px}.footer-tagline{grid-column:2;grid-row:2;align-self:center}.back-to-top{display:flex}} .back-to-top{position:relative;z-index:2;color:var(--accent);border:1px solid var(--accent);border-radius:24px} @media(max-width:767px){footer{display:flex;flex-direction:column;align-items:center;text-align:center;row-gap:16px}.official-footer-brand{align-items:center}footer .social-links{justify-content:center;gap:12px}.footer-tagline{align-self:center}} .studio .facts{border-top:2px solid var(--accent-on-light)}.studio .facts strong{color:#191c17} .back-to-top-row{display:flex;justify-content:flex-end;align-items:center;width:100%;padding:20px max(5%,calc((100% - 1600px)/2));background:var(--bg);position:relative;z-index:3} .back-to-top-row .back-to-top{display:flex;visibility:visible;opacity:1;position:relative;width:64px;height:44px;margin:0;grid-area:auto;background:var(--accent);color:#172013;border:1px solid var(--accent);border-radius:24px;line-height:1;flex-shrink:0} .back-to-top-row .back-to-top:hover{background:#eeeee7;border-color:#eeeee7} /* Keep iOS browser chrome and landscape safe-area gutters charcoal. */ html{background-color:#111211;color-scheme:dark}body{background-color:#111211;min-height:100svh;padding-top:31px} .studio-ticker{height:31px;padding-top:6px;background:#111211;-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px)} .studio-ticker-window{height:25px;background:var(--accent)}.studio-ticker-pause{height:25px} header.compact-header,header.compact-header.scrolled{top:47px} .studio-ticker-pause,.logo-controls button[hidden]{display:none!important} .studio-ticker{font-family:var(--ticker-font,Arial,Helvetica,sans-serif)} .ticker-font-review{position:fixed;left:5%;bottom:max(16px,env(safe-area-inset-bottom));z-index:35;width:220px;padding:14px;background:rgba(17,18,17,.95);color:#eeeee7;border:1px solid #555b4c;border-radius:8px;box-shadow:0 8px 30px #0004;font:13px Arial,sans-serif} .ticker-font-review summary{cursor:pointer;min-height:30px;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px}.ticker-font-review summary span{font-size:10px;color:#a7aaa4}.ticker-font-options{display:grid;gap:6px;padding-top:10px}.ticker-font-options button{min-height:44px;border:1px solid #343730;background:transparent;text-align:left;padding:10px;color:#eeeee7;border-radius:4px;font:13px Arial,sans-serif}.ticker-font-options button[aria-pressed="true"]{border-color:var(--accent);color:var(--accent)}.ticker-font-options button[data-band-font="studio"]{font-family:StudioWide,Arial,sans-serif}.ticker-font-options button[data-band-font="mono"]{font-family:'Courier New',monospace} @font-face{font-family:BarlowCondensed;src:url('https://cdn.prod.website-files.com/6ace877c1c1df34e33b7760b/6af549201b654be3f470cd4e_bm-runtime-BarlowCondensed-Thin.ttf') format('truetype');font-style:normal;font-weight:100;font-display:swap} @font-face{font-family:BarlowCondensed;src:url('https://cdn.prod.website-files.com/6ace877c1c1df34e33b7760b/6af5492044fe97a79f5d8ded_bm-runtime-BarlowCondensed-Regular.woff') format('woff');font-style:normal;font-weight:400;font-display:swap} .studio-ticker{font-weight:var(--ticker-weight,400)}.ticker-font-options button[data-band-font="narrow-thin"]{font-family:BarlowCondensed,Arial,sans-serif;font-weight:100;font-size:18px}.ticker-font-options button[data-band-font="narrow-normal"]{font-family:BarlowCondensed,Arial,sans-serif;font-weight:400;font-size:18px} /* Tighter clean sans; physical spacing is reserved for compressed glyphs. */ .studio-ticker-cycle{gap:48px;padding-right:48px}.studio-ticker-track{animation:none!important} .studio-ticker{cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none}.studio-ticker.is-dragging{cursor:grabbing} .studio-ticker-phrase{display:block;flex:0 0 auto;overflow:visible}.studio-ticker-ink{display:block;width:max-content;white-space:nowrap;transform-origin:left center} .studio-ticker[data-font="clean"] .studio-ticker-ink{transform:scaleX(.75)} .studio-ticker[data-font="clean"] .studio-ticker-ink{-webkit-text-stroke:.6px var(--accent);paint-order:normal} .ticker-font-review[hidden]{display:none!important} /* Keep the top control with the last section’s content, above its bottom padding. */ .contact-ending{display:flex;align-items:flex-end;gap:24px;flex:1 1 360px;max-width:520px;min-width:0}.contact-ending p{margin:0;flex:1;min-width:0;max-width:none} .section-back-to-top{display:flex;align-items:center;justify-content:center;align-self:flex-end;flex:0 0 64px;width:64px;height:44px;min-height:44px;margin:0;position:relative;z-index:2;background:var(--accent);color:#172013;border:1px solid var(--accent);border-radius:24px;line-height:1;font-size:12px} .section-back-to-top:hover{background:#eeeee7;border-color:#eeeee7;color:#172013}.gallery-ending{display:flex;align-items:flex-end;justify-content:space-between;gap:24px}.gallery-ending .gallery-source{margin-bottom:0;max-width:75ch} .studio-line-arrow{display:inline-block;width:1em;height:1em;vertical-align:-.12em;flex-shrink:0;overflow:visible;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} @media(max-width:760px){.contact-ending{flex:0 0 auto;width:100%;max-width:none;gap:20px}.gallery-ending{gap:20px}.gallery-ending .gallery-source{min-width:0}.section-back-to-top{margin:0}} .service summary,.team-toggle,#toggle-testimonial{min-height:44px}.service summary{align-items:center} .moon-intro{position:fixed;inset:0;z-index:2147483000;isolation:isolate;background:transparent;overscroll-behavior:none;touch-action:none} .moon-stage{position:absolute;inset:0;background:#000;overflow:hidden;contain:paint} .moon-bottom-glow{position:absolute;inset:auto 0 0;height:100px;z-index:1;pointer-events:none;background:linear-gradient(0deg,var(--accent) 0%,color-mix(in srgb,var(--accent) 82%,transparent) 24%,color-mix(in srgb,var(--accent) 0%,transparent));opacity:0;will-change:opacity;contain:paint} .moon-disc,.moon-mark{position:absolute;left:50%;top:50%;translate:-50% -50%;border-radius:50%;aspect-ratio:1/1;pointer-events:none} .moon-field{z-index:2;will-change:transform,opacity;transform-origin:center;backface-visibility:hidden} .moon-fill-surface{position:absolute;inset:0;z-index:2;opacity:0;background:var(--accent);pointer-events:none;will-change:opacity;contain:paint} .moon-mark{transition:top .5s cubic-bezier(.22,1,.36,1);z-index:3;background:#000;display:grid;place-items:center;overflow:hidden} .moon-mark img{width:84%;height:84%;object-fit:contain;will-change:transform} .moon-bands{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-20deg)} .moon-ribbon{position:absolute;left:0;width:100%;border-radius:999px;background:var(--accent);overflow:hidden;clip-path:inset(0 50% round 88px);contain:paint;will-change:transform} .moon-ribbon-text{transform-origin:left center;-webkit-text-stroke:.69px var(--accent);paint-order:normal;width:max-content;position:absolute;left:0;top:0;height:100%;display:flex;align-items:center;white-space:pre;color:#111211;font-family:Arial,sans-serif;font-weight:400;line-height:1;will-change:transform} .moon-intro-skip{z-index:10;position:absolute;right:max(24px,env(safe-area-inset-right));bottom:max(24px,env(safe-area-inset-bottom));height:44px;padding:0 16px;border:1px solid #ffffff60;border-radius:30px;background:#111211b8;color:#fff;font:13px Arial;letter-spacing:.04em;backdrop-filter:blur(8px)} .moon-intro-skip span{margin-left:12px;font-size:20px;vertical-align:-1px} .moon-intro-skip:focus-visible{outline:2px solid white;outline-offset:4px} .moon-read-prompt{position:absolute;left:50%;bottom:max(112px,calc(env(safe-area-inset-bottom) + 100px));translate:-50% 0;z-index:5;border:1px solid #ffffff80;border-radius:30px;padding:14px 22px;background:#000d;color:#fff;font:14px Arial;white-space:nowrap} .moon-quiz{position:absolute;inset:0;z-index:5;padding:30px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#111211} .moon-quiz[hidden],.moon-read-prompt[hidden]{display:none} .moon-quiz-eyebrow{font:12px Arial;letter-spacing:.15em;margin:0 0 24px} .moon-quiz h2{font-family:StudioWide,Arial,sans-serif;font-size:clamp(28px,4.6vw,70px);line-height:1.08;max-width:1000px;margin:0 0 32px;overflow-wrap:anywhere;text-wrap:balance} .moon-answers{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;max-width:900px} .moon-answers button{border:1.5px solid #111211;background:transparent;color:#111211;border-radius:999px;padding:17px 25px;font:600 14px Arial;min-height:50px;transition:background .18s,color .18s} .moon-answers button:hover,.moon-answers button:focus-visible{background:#111211;color:var(--accent);outline-offset:4px;outline-color:#111211} .moon-quiz-result{font:16px/1.5 Arial;min-height:48px;max-width:500px;margin:22px 0 0} @media(max-width:600px){.moon-quiz{padding:24px}.moon-quiz h2{font-size:clamp(26px,7.7vw,42px)}.moon-answers{width:100%;gap:12px}.moon-answers button{width:100%;max-width:380px;font-size:13px}.moon-quiz-eyebrow{font-size:10px;letter-spacing:.1em}} /* Portfolio filter accent and casual artwork-save deterrents. */ #work .filters button{transition:color .18s,border-color .18s,background-color .18s} #work .filters button.active{background:var(--accent);border-color:var(--accent);color:#111211} @media(hover:hover){#work .filters button:not(.active):hover{color:var(--accent);border-color:var(--accent)}} #work .filters button:focus-visible{outline:2px solid var(--accent);outline-offset:4px} .hero img,.project-banner,.project-banner img,.artwork-tile,.artwork-tile img,#project-image{-webkit-user-drag:none;-webkit-touch-callout:none;user-select:none} #studio .team-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;align-items:stretch} #studio .party-card{position:relative;margin:0;padding:26px 22px 22px;border:1px solid #b8c3ad;border-top:3px solid var(--accent-on-light);background:#ffffff38;border-radius:3px;text-align:left;display:flex;flex-direction:column;align-items:flex-start;gap:18px;min-width:0;transition:border-color .2s,background-color .2s,transform .2s} #studio .party-card:hover{border-color:var(--accent-on-light);background:#ffffff70;transform:translateY(-3px)} #studio .party-card img{width:96px;height:96px;border-radius:50%;object-fit:cover;border:2px solid var(--accent-on-light);padding:3px;background:#e4e7dc;margin:0} #studio .party-number{position:absolute;top:20px;right:20px;color:#728466;font:12px/1 Arial;letter-spacing:.12em} #studio .party-card figcaption{width:100%;min-width:0} #studio .party-card h4{font-size:20px;line-height:1.2;margin:0 0 9px;color:#191c17} #studio .party-class{display:inline-block;font:700 12px/1.4 Arial;letter-spacing:.08em;color:var(--accent-on-light);padding:5px 8px;border:1px solid color-mix(in srgb,var(--accent-on-light) 37.647%,transparent);border-radius:2px;background:color-mix(in srgb,var(--accent-on-light) 3.922%,transparent)} #studio .party-traits{list-style:none;padding:15px 0 0;margin:16px 0 0;border-top:1px solid #b8c3ad;display:flex;flex-direction:column;gap:8px} #studio .party-traits li{font:12px/1.45 Arial;letter-spacing:.025em;color:#394332;overflow-wrap:anywhere} #studio .party-traits li:before{content:'+';color:var(--accent-on-light);display:inline-block;width:17px;font-weight:700} @media(max-width:991px){#studio .team-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:479px){#studio .team-grid{grid-template-columns:1fr}#studio .party-card{display:grid;grid-template-columns:76px minmax(0,1fr);gap:18px;padding:24px 18px}#studio .party-card img{width:76px;height:76px;align-self:start}#studio .party-number{top:9px;right:10px;font-size:10px}#studio .party-card h4{font-size:19px}#studio .party-traits li{font-size:11px}} @media(prefers-reduced-motion:reduce){#studio .party-card{transition:none}#studio .party-card:hover{transform:none}} /* Trading-card team treatment, following the supplied portrait/ribbon/panel sketch. */ #studio .team-grid{gap:30px 24px;padding:12px 5px 20px} #studio .tcg-card{--card-tilt:-.7deg;isolation:isolate;display:flex;flex-direction:column;align-items:stretch;gap:0;padding:16px 18px 14px;min-height:440px;border:2px solid var(--accent-on-light);border-radius:12px;background:linear-gradient(140deg,#252d22,#111611 65%);color:#eeeee7;box-shadow:0 4px 0 #304329,0 12px 22px #14250f25;transform:rotate(var(--card-tilt));text-align:center;transition:transform .25s,box-shadow .25s;overflow:visible} #studio .tcg-card:nth-child(even){--card-tilt:.7deg} #studio .tcg-card:before{content:'';position:absolute;inset:6px;border:1px solid #71825d;border-radius:7px;pointer-events:none;z-index:-1} #studio .tcg-card:after{content:'';position:absolute;inset:12px;border:1px solid color-mix(in srgb,var(--accent) 12.549%,transparent);border-radius:4px;pointer-events:none;z-index:-1} #studio .tcg-card:hover{transform:translateY(-7px) rotate(0deg);background:linear-gradient(140deg,#293725,#111611 65%);border-color:var(--accent-on-light);box-shadow:0 4px 0 #304329,0 18px 28px #14250f35} #studio .tcg-topline{display:flex;justify-content:space-between;align-items:center;color:#b7c5a5;font:10px/1.4 Arial;letter-spacing:.14em;padding:0 0 12px;border-bottom:1px solid #71825d70} #studio .tcg-art{position:relative;display:grid;place-items:center;padding:24px 0 16px;min-height:196px;background:radial-gradient(ellipse,color-mix(in srgb,var(--accent-on-light) 14.510%,transparent),transparent 68%)} #studio .tcg-art:before,#studio .tcg-art:after{content:'◆';position:absolute;left:0;top:49%;color:var(--accent);font-size:10px} #studio .tcg-art:after{left:auto;right:0} #studio .tcg-card img{position:relative;width:146px;height:146px;max-width:100%;padding:4px;border:2px solid var(--accent);border-radius:50%;background:#111611;box-shadow:0 0 0 5px #111611,0 0 0 6px #71825d;object-fit:cover;filter:grayscale(1)} #studio .tcg-orbit{position:absolute;width:172px;height:172px;border:1px dashed #71825d70;border-radius:50%} #studio .tcg-card figcaption{display:flex;flex:1;flex-direction:column;align-items:stretch;min-width:0} #studio .tcg-card h4{color:#eeeee7;font-size:clamp(18px,1.5vw,23px);line-height:1.2;letter-spacing:-.025em;margin:0 0 19px;text-wrap:balance} #studio .tcg-ribbon{position:relative;z-index:1;margin:0 -8px 15px;padding:8px 3px;background:var(--accent);border:1px solid var(--accent);box-shadow:0 3px 0 var(--accent-on-light);clip-path:polygon(4% 0,96% 0,100% 50%,96% 100%,4% 100%,0 50%)} #studio .tcg-card .party-class{display:block;border:0;background:none;padding:0;font:700 12px/1.4 Arial;letter-spacing:.1em;color:#111611} #studio .tcg-card .party-traits{flex:1;list-style:none;margin:0;padding:15px 13px;background:#e4e7dc;border:1px solid #71825d;outline:1px solid #e4e7dc30;outline-offset:3px;border-radius:3px;text-align:left;gap:10px} #studio .tcg-card .party-traits li{display:flex;align-items:baseline;font:11px/1.5 Arial;letter-spacing:.025em;color:#283521;overflow-wrap:anywhere} #studio .tcg-card .party-traits li:before{content:'✦';flex:0 0 17px;color:var(--accent-on-light);font-size:10px} #studio .tcg-seal{display:flex;justify-content:space-between;gap:8px;align-items:center;margin:15px 0 0;color:#9aa88a;font:8px/1.4 Arial;letter-spacing:.1em} #studio .tcg-seal span:first-child,#studio .tcg-seal span:last-child{color:var(--accent)} @media(max-width:1100px) and (min-width:992px){#studio .tcg-card{padding:14px 14px 12px}#studio .tcg-card img{width:120px;height:120px}#studio .tcg-orbit{width:145px;height:145px}#studio .tcg-art{min-height:170px}#studio .tcg-card .party-traits{padding:13px 9px}#studio .tcg-card .party-traits li{font-size:10px}} @media(max-width:479px){#studio .team-grid{max-width:340px;margin-inline:auto;gap:30px;padding-inline:6px}#studio .tcg-card{display:flex;grid-template-columns:none;padding:18px 22px 16px;min-height:455px}#studio .tcg-card img{width:160px;height:160px;align-self:auto}#studio .tcg-orbit{width:188px;height:188px}#studio .tcg-art{min-height:213px}#studio .tcg-card h4{font-size:23px}#studio .tcg-card .party-traits li{font-size:12px}} @media(prefers-reduced-motion:reduce){#studio .tcg-card{transition:none;transform:none}#studio .tcg-card:hover{transform:none}} @font-face{font-family:CardCondensed;src:url('https://cdn.prod.website-files.com/6ace877c1c1df34e33b7760b/6af5492044fe97a79f5d8ded_bm-runtime-BarlowCondensed-Regular.woff') format('woff');font-weight:400;font-style:normal;font-display:swap} #studio .tcg-card,#studio .tcg-card:hover{background:#111211;border-color:var(--accent-on-light);box-shadow:0 4px 0 #222622,0 12px 22px #0003} #studio .tcg-card img{background:#111211;box-shadow:0 0 0 5px #111211,0 0 0 6px #747d70} #studio .tcg-art{background:radial-gradient(ellipse,#ffffff09,transparent 68%)} #studio .tcg-card h4{font-family:CardCondensed,Arial,sans-serif;font-weight:400;text-transform:uppercase;font-size:30px;line-height:1;letter-spacing:.015em;margin-bottom:20px} #studio .tcg-topline{font-family:monospace;font-size:10px;letter-spacing:.09em;color:#b0b7aa} #studio .tcg-ribbon{margin:0 -32px 18px;padding:11px 18px;clip-path:polygon(3% 0,97% 0,100% 50%,97% 100%,3% 100%,0 50%);box-shadow:0 4px 0 var(--accent-on-light)} #studio .tcg-card .party-class{font-family:CardCondensed,Arial,sans-serif;font-weight:400;font-size:19px;line-height:1;letter-spacing:.1em} #studio .tcg-card .party-traits li{font-size:12px;letter-spacing:0;line-height:1.5} #studio .tcg-card .party-traits{padding:15px 12px} #studio .tcg-seal{color:#8e9787;margin-top:15px} #studio .tcg-seal i{display:block;flex:1;height:1px;background:#67715a} #studio .team-grid.team-deck{display:block;position:relative;width:100%;max-width:none;height:660px;margin:0;padding:0;overflow:hidden;touch-action:pan-y;user-select:none;cursor:grab;isolation:isolate} #studio .team-deck.is-dragging{cursor:grabbing} #studio .team-deck .tcg-card{position:absolute;left:50%;top:80px;width:var(--deck-card-width,278px);min-height:460px;height:470px;margin-left:calc(var(--deck-card-width,278px) / -2);padding:16px 20px 14px;transform-origin:50% 90%;transform:translate3d(var(--deck-x,0px),var(--deck-y,0px),0) rotate(var(--deck-angle,0deg)) scale(var(--deck-scale,1));transition:transform .38s cubic-bezier(.22,1,.36,1),opacity .25s,box-shadow .25s;will-change:transform;cursor:pointer} #studio .team-deck .tcg-card:focus-visible{outline:3px solid var(--accent-on-light);outline-offset:7px} #studio .team-deck .tcg-art{min-height:190px;padding:20px 0 16px} #studio .team-deck .tcg-card img{width:140px;height:140px} #studio .team-deck .tcg-orbit{width:168px;height:168px} #studio .team-deck-controls{display:flex;align-items:center;justify-content:center;gap:24px;margin-top:-15px;padding-bottom:20px;color:#191c17} #studio .team-deck-controls button{width:48px;height:48px;border:1px solid #8c9b80;border-radius:50%;background:transparent;color:#191c17;display:grid;place-items:center;font-size:23px} #studio .team-deck-controls button:hover,#studio .team-deck-controls button:focus-visible{background:var(--accent-on-light);color:#fff;border-color:var(--accent-on-light)} #studio .team-deck-status{text-align:center;min-width:190px} #studio .team-deck-status strong{display:block;font:400 23px/1.2 CardCondensed,Arial,sans-serif;text-transform:uppercase} #studio .team-deck-status span{display:block;font:11px/1.5 Arial;color:#53604b;margin-top:4px} @media(max-width:650px){#studio .team-grid.team-deck{height:600px;overflow:hidden}#studio .team-deck .tcg-card{top:60px;height:470px;min-height:470px;padding:16px 20px 14px;display:flex}#studio .team-deck .tcg-card h4{font-size:30px}#studio .team-deck .tcg-card .party-traits li{font-size:12px}#studio .team-deck-controls{gap:12px;margin-top:0}#studio .team-deck-status{min-width:170px}} @media(prefers-reduced-motion:reduce){#studio .team-deck .tcg-card{transition:none}} /* Version B: compact, symmetric seven-slot fan and live finish comparisons. */ #studio .team-grid.team-deck{height:425px;overflow:visible;max-width:100%;margin-inline:auto} #studio .team-deck .tcg-card{top:12px;transform-origin:50% 0%;width:278px;margin-left:-139px;height:470px;min-height:470px;transition:transform .32s cubic-bezier(.22,1,.36,1),opacity .18s,box-shadow .2s} #studio .team-deck .tcg-ribbon{isolation:isolate;background:#000;border:2px solid #000;filter:drop-shadow(1px 0 0 #000) drop-shadow(-1px 0 0 #000) drop-shadow(0 1px 0 #000)} #studio .team-deck .tcg-ribbon:before{content:"";position:absolute;inset:1px;z-index:-1;background:var(--accent);clip-path:polygon(3% 0,97% 0,100% 50%,97% 100%,3% 100%,0 50%)} #studio .team-deck-controls{margin-top:0} #studio .team-card-options{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 28px;margin:0 0 34px;padding:0 8px} #studio .team-card-options fieldset{display:flex;gap:6px;flex-wrap:wrap;border:0;margin:0;padding:0;min-width:0} #studio .team-card-options legend{font:11px/1.5 Arial;text-transform:uppercase;letter-spacing:.08em;color:#53604b;margin-bottom:7px} #studio .team-card-options button{font:12px/1.3 Arial;color:#283521;padding:8px 13px;border:1px solid #9caa90;border-radius:20px;background:transparent;min-height:36px} #studio .team-card-options button[aria-pressed="true"]{color:#fff;background:#283521;border-color:#283521} #studio .team-card-options button:hover,#studio .team-card-options button:focus-visible{border-color:var(--accent-on-light);outline-color:var(--accent-on-light)} #studio .team-deck[data-panel="charcoal"] .party-traits{background:#242624;border-color:#686e65} #studio .team-deck[data-panel="charcoal"] .party-traits li{color:#eeeee7} #studio .team-deck[data-panel="charcoal"] .party-traits li:before{color:var(--accent)} #studio .team-deck[data-panel="lime"] .party-traits{background:var(--accent);border-color:#111211} #studio .team-deck[data-panel="lime"] .party-traits li{color:#111211} #studio .team-deck[data-panel="lime"] .party-traits li:before{color:#111211} #studio .team-deck[data-type="condensed"] .party-traits li{font-family:CardCondensed,Arial,sans-serif;font-size:15px;letter-spacing:.03em} #studio .team-deck[data-type="mono"] .party-traits li{font-family:'Courier New',monospace;font-size:11px;letter-spacing:-.02em} @media(max-width:650px){#studio .team-grid.team-deck{height:425px;overflow:visible}#studio .team-deck .tcg-card{top:12px;transform-origin:50% 0%;height:470px;min-height:470px}#studio .team-card-options{gap:14px;margin-bottom:28px}#studio .team-card-options fieldset{justify-content:center}#studio .team-card-options legend{text-align:center}#studio .team-card-options button{min-height:40px;padding:8px 11px}} @media(prefers-reduced-motion:reduce){#studio .team-deck .tcg-card{transition:none}} /* Selected team deck finish: responsive size, charcoal panels, Arial traits. */ #studio .team-intro{margin-bottom:22px} #studio .team-grid.team-deck{margin-top:0;margin-bottom:0;padding:0} #studio .team-deck .tcg-card{top:24px} #studio .team-deck-controls{margin-top:0;padding-bottom:8px;gap:22px} #studio .team-deck[data-type="arial"] .party-traits li{font-family:Arial,Helvetica,sans-serif;font-size:12px;letter-spacing:0} @media(max-width:650px){#studio .team-intro{margin-bottom:18px}#studio .team-deck .tcg-card{top:24px}#studio .team-deck-controls{gap:12px;padding-bottom:4px}} .testimonial-cycle,.testimonial-loop-track{gap:28px;align-items:stretch} .testimonial-trading-card{position:relative;display:flex;flex-direction:column;flex:0 0 auto;width:clamp(480px,48vw,650px);min-height:340px;padding:19px 22px 21px;border:2px solid var(--accent-on-light);border-radius:12px;background:#111211;box-shadow:0 4px 0 #202820;isolation:isolate} .testimonial-trading-card:before{content:'';position:absolute;inset:6px;border:1px solid #66705c;border-radius:7px;pointer-events:none;z-index:-1} .testimonial-card-header{display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid #59614f;padding-bottom:12px;margin-bottom:20px} .testimonial-card-header .testimonial-sample-label{margin:0;font-size:10px;line-height:1.4;letter-spacing:.06em;color:var(--accent)} .testimonial-card-header>span{font:10px monospace;color:#9da694;white-space:nowrap} .testimonial-card-body{display:grid;grid-template-columns:minmax(110px,.8fr) minmax(0,1.8fr);gap:24px;flex:1;align-items:stretch} .testimonial-client{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:16px;text-align:center;min-width:0} .testimonial-logo-frame{width:100%;min-height:90px;display:grid;place-items:center;padding:8px} .testimonial-logo-frame img{display:block;width:100%;height:auto;max-height:100px;object-fit:contain} .testimonial-client h3{font:400 22px/1.1 CardCondensed,Arial,sans-serif;text-transform:uppercase;letter-spacing:.03em;margin:0;color:#eeeee7;text-wrap:balance} .testimonial-quote-panel{position:relative;background:#242624;border:1px solid #5a6253;border-radius:4px;padding:25px 20px 18px;display:flex;flex-direction:column;min-width:0} .testimonial-quote-mark{position:absolute;top:-18px;left:12px;font:64px/1 Georgia,serif;color:var(--accent);pointer-events:none} .testimonial-trading-card .testimonial-sample-copy{font:15px/1.65 Arial;color:#e2e5dd;margin:0 0 20px} .testimonial-trading-card .testimonial-person{margin-top:auto;border-top:1px solid #4b5145;padding-top:12px} .testimonial-trading-card .testimonial-person strong{font-size:14px;color:#eeeee7;margin-bottom:4px} .testimonial-trading-card .testimonial-person small{font-size:11px;line-height:1.5;color:#a7aaa4} .testimonial-card-rule{height:2px;background:linear-gradient(90deg,var(--accent),transparent);margin-top:18px} .testimonial-loop-viewport{padding-top:7px;padding-bottom:12px} @media(max-width:650px){.testimonial-trading-card{width:88vw;max-width:450px;min-height:300px;padding:17px 18px 18px}.testimonial-card-body{grid-template-columns:minmax(76px,.65fr) minmax(0,1.5fr);gap:14px}.testimonial-logo-frame{min-height:70px;padding:0}.testimonial-logo-frame img{max-height:75px}.testimonial-client h3{font-size:18px}.testimonial-quote-panel{padding:22px 13px 15px}.testimonial-trading-card .testimonial-sample-copy{font-size:13px;line-height:1.6}.testimonial-card-header{gap:8px;margin-bottom:18px}.testimonial-card-header .testimonial-sample-label{font-size:9px}.testimonial-cycle,.testimonial-loop-track{gap:20px}} .logo-fallback{font:600 13px/1.4 Arial;color:#c6cdbf;text-align:center;padding:8px;max-width:100%} .logo-fallback[hidden],.logo-cell img[hidden]{display:none} html.studio-fonts-pending h1,html.studio-fonts-pending h2,html.studio-fonts-pending h3,html.studio-fonts-pending .tcg-card h4,html.studio-fonts-pending .tcg-card .party-class{visibility:hidden} .gallery-floating-back{position:fixed;left:var(--album-back-left,max(5%,calc((100vw - 1600px)/2)));top:var(--album-back-top,117px);bottom:auto;z-index:25;display:inline-flex;align-items:center;gap:10px;min-height:46px;padding:12px 18px;border:1px solid color-mix(in srgb,var(--accent) 50.196%,transparent);border-radius:28px;background:#111211ed;color:#eeeee7;font:14px/1.2 Arial;text-decoration:none;box-shadow:0 5px 22px #0005;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)} .gallery-floating-back[hidden]{display:none} .gallery-floating-back .studio-line-arrow{color:var(--accent)} .gallery-floating-back:hover,.gallery-floating-back:focus-visible{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 9%,#111211);color:var(--accent)} @media(max-width:600px){.gallery-floating-back{left:var(--album-back-left,5%);top:var(--album-back-top,117px);bottom:auto;font-size:13px;padding:12px 16px}} /* Artwork viewer: constrain the panel, not the artwork, to the visible phone viewport. */ :root{--viewer-vh:100vh;--viewer-vw:100vw;--viewer-vtop:0px;--viewer-vleft:0px} @supports(height:100dvh){:root{--viewer-vh:100dvh;--viewer-vw:100dvw}} #viewer{--viewer-pad:20px;box-sizing:border-box;position:fixed;inset:auto;top:calc(var(--viewer-vtop) + env(safe-area-inset-top,0px) + 12px);left:calc(var(--viewer-vleft) + var(--viewer-vw)/2);transform:translateX(-50%);margin:0;width:min(1000px,calc(var(--viewer-vw) - 24px));max-width:none;height:auto;max-height:calc(var(--viewer-vh) - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px) - 24px);padding:var(--viewer-pad);overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;border-radius:8px;scroll-padding-top:80px} #viewer .dialog-head{position:sticky;top:calc(-1 * var(--viewer-pad));z-index:2;align-items:center;gap:14px;background:#111211;padding:12px 0;border-bottom:1px solid #343730;box-shadow:0 -20px 0 #111211} #viewer #project-title{font-family:Arial,Helvetica,sans-serif;font-size:20px;line-height:1.3;min-width:0;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} #viewer #close{display:grid;place-items:center;flex:0 0 44px;width:44px;height:44px;min-height:44px;padding:10px;border-radius:50%;color:#eeeee7;border:1px solid #777e70} #viewer #close svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round} #viewer #close:hover{border-color:var(--accent);color:var(--accent)} #viewer #project-image{display:block;width:auto;height:auto;max-width:100%;max-height:max(100px,calc(var(--viewer-vh) - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px) - 205px));object-fit:contain;margin:16px auto} #viewer .viewer-controls{position:relative;display:flex;align-items:center;justify-content:center;gap:12px;margin:12px 0} #viewer .viewer-controls button{min-height:44px;padding:10px 14px;font-size:14px;white-space:nowrap} #viewer .viewer-controls span{font-size:13px;white-space:nowrap;min-width:42px;text-align:center} #viewer p{font-size:13px;line-height:1.55;margin:14px 0} #viewer #project-link{font-size:13px;line-height:1.4;margin-bottom:4px} #viewer::backdrop{background:rgba(0,0,0,.94)} html:has(#viewer[open]){overflow:hidden} @media(max-width:600px){#viewer{--viewer-pad:14px;width:calc(var(--viewer-vw) - 16px);top:calc(var(--viewer-vtop) + env(safe-area-inset-top,0px) + 8px);max-height:calc(var(--viewer-vh) - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px) - 16px)}#viewer #project-title{font-size:16px;line-height:1.3}#viewer .dialog-head{gap:10px;padding-top:8px;padding-bottom:10px}#viewer #project-image{margin:12px auto;max-height:max(100px,calc(var(--viewer-vh) - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px) - 190px))}#viewer .viewer-controls{gap:9px}#viewer .viewer-controls button{font-size:13px;padding:9px 12px}} .moon-reveal-veil{position:absolute;inset:0;z-index:1;pointer-events:none} .moon-reveal-veil[hidden]{display:none} /* Full-width feedback disclosure and artist introductions. */ .testimonial-top{display:block}.testimonial-top #toggle-testimonial{display:flex;align-items:center;justify-content:space-between;gap:24px;width:100%;min-height:76px;margin-top:28px;padding:18px 0;border:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:transparent;text-align:left;font-family:StudioWide,Arial,sans-serif;font-size:clamp(23px,2.3vw,32px);letter-spacing:-.035em;color:var(--text,#eeeee7);cursor:pointer}.testimonial-top #toggle-testimonial:hover{color:var(--accent)}.testimonial-top #toggle-testimonial:focus-visible{outline:2px solid var(--accent);outline-offset:6px}.testimonial-toggle-symbol{font:32px Arial,sans-serif;color:var(--accent);flex-shrink:0}.testimonial-loop-top{justify-content:flex-end} #careers-page[hidden]{display:none!important} #careers-page{padding:170px max(24px,calc(5% - 60px)) 70px;max-width:1620px;margin:auto;min-height:85vh} .careers-intro{max-width:900px;margin:48px 0 64px} .careers-intro h1{font-size:clamp(48px,7vw,104px);line-height:.98;margin:22px 0 28px} .careers-intro h1 span,.careers-grid .eyebrow span{color:var(--accent)} .careers-lead{font-size:clamp(20px,2vw,27px);line-height:1.5;max-width:800px} .careers-intro p:last-child{max-width:770px;color:var(--muted);line-height:1.75;font-size:17px} .careers-intro p,.careers-callout p{text-wrap:pretty} .careers-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;border-top:1px solid var(--line);padding-top:38px} .careers-grid h2{font-size:clamp(26px,3vw,40px);margin:16px 0 24px} .careers-grid p,.careers-grid li{font-size:17px;line-height:1.75;color:#c5c9be} .careers-grid strong{color:var(--ink)} .careers-grid ul{padding-left:21px} .careers-grid li{padding:5px 0} .careers-callout{margin-top:56px;border-top:1px solid var(--line);padding:32px 0} .careers-callout .link{font-size:clamp(18px,2.5vw,27px);max-width:100%;overflow-wrap:anywhere} #careers-page #artist-introduction{padding-block-end:6px;margin-block-end:12px} .careers-callout p{max-width:760px;font-size:15px;line-height:1.7;color:var(--muted)} @media(max-width:760px){.testimonial-top #toggle-testimonial{min-height:66px;margin-top:22px;padding:16px 0;font-size:23px}#careers-page{padding-top:145px;padding-inline:5%}.careers-intro{margin:32px 0 40px}.careers-grid{grid-template-columns:1fr;gap:28px}.careers-callout{margin-top:32px}} /* Shared disclosure rhythm on light and dark surfaces. */ .team-section{padding-top:0;border-top:0} .team-toggle,.testimonial-top #toggle-testimonial{display:flex;align-items:center;justify-content:space-between;gap:24px;width:100%;min-height:76px;padding:18px 0;border:0;border-top:1px solid var(--disclosure-line,var(--line));font-family:StudioWide,Arial,sans-serif;font-size:clamp(23px,2.3vw,32px);line-height:1.2;letter-spacing:-.035em;cursor:pointer} .team-section{--disclosure-line:#b4bcab} .team-toggle-symbol,.testimonial-toggle-symbol{font:32px/1 Arial,sans-serif;flex:0 0 32px;text-align:right} .team-toggle:focus-visible,.testimonial-top #toggle-testimonial:focus-visible{outline:2px solid currentColor;outline-offset:6px} @media(max-width:760px){.team-toggle,.testimonial-top #toggle-testimonial{min-height:66px;padding:16px 0;font-size:23px}} /* Compact illustrated services: visible offer, optional detail. */ #services.services-visual{display:block;padding-top:76px;padding-bottom:76px} .services-intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,.8fr);column-gap:64px;align-items:end;margin-bottom:46px} .services-intro>.eyebrow{grid-column:1/-1;margin-bottom:18px}.services-intro h2{margin-top:0}.services-intro .lead{margin:0;max-width:43ch}.services-intro .heading-wrap{min-width:0} .services-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 52px;align-items:start} #services .service-visual{min-width:0;padding:0;border-top:1px solid var(--line);border-bottom:0} #services .service-visual summary{position:relative;display:grid;grid-template-columns:124px minmax(0,1fr) 24px;align-items:center;gap:24px;padding:28px 0;min-height:174px;text-align:left;list-style:none} #services .service-visual summary::-webkit-details-marker{display:none}#services .service-visual summary::marker{content:''} #services .service-visual summary:after{font:28px/1 Arial,sans-serif;text-align:right;align-self:center} .service-copy{display:flex;flex-direction:column;gap:9px;min-width:0}.service-index{font-size:11px;letter-spacing:1.5px;color:var(--accent)}.service-title{font-size:20px;line-height:1.2;font-weight:600;letter-spacing:-.35px;text-wrap:balance}.service-teaser{font-size:14px;line-height:1.5;color:var(--muted);text-wrap:pretty} .service-preview{display:block;position:relative;width:124px;height:112px;overflow:hidden;background:#1d211e;isolation:isolate}.service-preview img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .25s ease}.service-preview-scene img{object-position:64% 50%}.service-preview-cards{background:transparent}.service-preview-cards img{position:absolute;width:66px;height:93px;top:10px;left:29px;object-fit:cover;border:2px solid #111211;box-shadow:0 2px 7px #0006}.service-preview-cards img:first-child{transform:translateX(-23px) rotate(-13deg)}.service-preview-cards img:nth-child(2){transform:translateX(23px) rotate(13deg)}.service-preview-cards img:last-child{object-position:25% center}.service-preview-book{background:transparent}.service-preview-book img:first-child{position:absolute;left:4px;top:5px;width:65px;height:102px;object-fit:cover;transform:rotate(-7deg);box-shadow:2px 3px 8px #0008;z-index:1}.service-preview-book img:last-child{position:absolute;left:64px;top:19px;width:57px;height:82px;object-fit:cover;transform:rotate(6deg)}.service-preview-concept img{object-fit:contain;background:#d5d0bf} #services .service-visual>p{margin:0 0 28px 148px;font-size:15px;line-height:1.65;max-width:44ch;color:var(--muted)} #services .service-visual summary:hover .service-title{color:var(--accent)}#services .service-visual summary:focus-visible{outline:2px solid var(--accent);outline-offset:4px} @media(max-width:1000px){.services-grid{gap:8px 36px}#services .service-visual summary{grid-template-columns:96px minmax(0,1fr) 20px;gap:14px}.service-preview{width:96px;height:104px}.service-title{font-size:18px}.service-preview-cards img{left:15px}.service-preview-book img:last-child{left:45px}#services .service-visual>p{margin-left:110px}} @media(max-width:760px){#services.services-visual{padding-top:52px;padding-bottom:52px}.services-intro{display:block;margin-bottom:34px}.services-intro>.eyebrow{margin-bottom:20px}.services-intro .lead{margin-top:22px;max-width:45ch}.services-grid{grid-template-columns:1fr;gap:0}#services .service-visual summary{grid-template-columns:82px minmax(0,1fr) 20px;gap:16px;min-height:134px;padding:22px 0}.service-preview{width:82px;height:88px}.service-preview-cards img{width:48px;height:70px;left:17px;top:9px}.service-preview-cards img:first-child{transform:translateX(-15px) rotate(-13deg)}.service-preview-cards img:nth-child(2){transform:translateX(15px) rotate(13deg)}.service-preview-book img:first-child{width:48px;height:77px;top:5px}.service-preview-book img:last-child{left:39px;width:40px;height:65px;top:12px}.service-copy{gap:7px}.service-title{font-size:18px}.service-teaser{font-size:14px;line-height:1.4}.service-index{font-size:10px}#services .service-visual>p{margin:0 0 24px 98px;font-size:14px}} @media(prefers-reduced-motion:reduce){.service-preview img{transition:none}} /* Quiet service artwork, revealed by pointer, keyboard or touch expansion. */ #services .service-preview img{filter:grayscale(1) brightness(.62);transition:filter 480ms cubic-bezier(.22,.61,.36,1)} #services .service-visual[open] .service-preview img,#services .service-visual summary:focus-visible .service-preview img{filter:grayscale(0) brightness(1)} @media(hover:hover){#services .service-visual:hover .service-preview img{filter:grayscale(0) brightness(1)}} @media(prefers-reduced-motion:reduce){#services .service-preview img{transition:none}} /* Shared homepage editorial hierarchy. Hero and contact retain their display scale. */ #homepage .eyebrow{font-family:Arial,Helvetica,sans-serif} #homepage{--section-heading-size:clamp(30px,4vw,52px);--section-label-gap:20px;--section-content-gap:40px} #work .section-top>div:first-child>.eyebrow,.services-intro>.eyebrow,#studio>div:first-child>.eyebrow,.testimonial-header-copy>.eyebrow,#contact>.eyebrow{font:12px/1.6 Arial,Helvetica,sans-serif;letter-spacing:2px;text-transform:uppercase;margin:0 0 var(--section-label-gap);color:var(--muted)} #studio>div:first-child>.eyebrow{color:#50594c} #work .heading-wrap>h2,#services .heading-wrap>h2,#studio .heading-wrap>h2,.testimonial-header-copy .heading-wrap>h2{font-family:Arial,Helvetica,sans-serif;font-weight:700;font-size:var(--section-heading-size);line-height:1.06;letter-spacing:-.055em;margin:0;text-transform:uppercase} #contact .heading-wrap>h2{font-family:Arial,Helvetica,sans-serif;font-weight:700;margin-top:0;line-height:1.06;letter-spacing:-.055em} #work .section-top{margin-bottom:var(--section-content-gap)}.services-intro{margin-bottom:var(--section-content-gap)}.services-intro .lead{line-height:1.7} #studio .heading-line:last-child{color:var(--accent-on-light)}.testimonial-header-copy .heading-line:last-child{color:var(--accent)} .testimonial-top #toggle-testimonial{margin-top:var(--section-content-gap)} @media(max-width:760px){#homepage{--section-heading-size:clamp(24px,8vw,42px);--section-label-gap:18px;--section-content-gap:32px}#work .heading-wrap>h2,#services .heading-wrap>h2,#studio .heading-wrap>h2,.testimonial-header-copy .heading-wrap>h2{font-size:clamp(24px,min(8vw,var(--heading-fluid)),42px)}#work .section-top>div:first-child>.eyebrow,.services-intro>.eyebrow,#studio>div:first-child>.eyebrow,.testimonial-header-copy>.eyebrow,#contact>.eyebrow{font-size:11px;letter-spacing:1.7px}.services-intro .lead{margin-top:24px}} /* Touch gets native horizontal momentum; desktop keeps direct mouse dragging. */ .logo-viewport,.testimonial-loop-viewport{touch-action:pan-x pan-y pinch-zoom;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scroll-behavior:auto} .studio-ticker-window,#studio .team-grid.team-deck{touch-action:pan-y pinch-zoom} #studio .team-deck .tcg-card{transform:translate3d(calc(var(--deck-x,0px) + var(--deck-swipe,0px)),var(--deck-y,0px),0) rotate(var(--deck-angle,0deg)) scale(var(--deck-scale,1))} #studio .team-deck.is-touch-swiping .tcg-card{transition:none} @media(pointer:coarse){.logo-viewport,.testimonial-loop-viewport{cursor:auto}.logo-cell img,.testimonial-slide img,#studio .team-deck img{-webkit-user-drag:none;user-select:none;-webkit-touch-callout:none}} /* The transformed fan must never enlarge the document's scrollable width. */ html,body{max-width:100%;overflow-x:hidden} @supports(overflow:clip){html,body{overflow-x:clip}} #studio .team-section,#team-content{min-width:0;max-width:100%} #studio .team-grid.team-deck{overflow:hidden;contain:paint} @supports(overflow:clip){#studio .team-grid.team-deck{overflow:clip;overflow-clip-margin:12px}} /* Suppress accidental double-tap zoom while retaining pan and pinch zoom. */ #viewer,#viewer button,#viewer #project-image,.artwork-tile,.logo-controls button,.testimonial-loop-controls button,#studio .team-deck-controls button{touch-action:manipulation} /* Landscape companions to the team cards, following the studio sketch. */ .testimonial-party-card{width:clamp(440px,45vw,580px);min-height:300px;padding:18px 22px 20px;background:#111211;border:2px solid #89937f;border-radius:12px;box-shadow:0 4px 0 #30352e,0 12px 22px #0003;overflow:visible} .testimonial-party-card:before{border-color:#586052} .testimonial-party-card .testimonial-card-header{justify-content:space-between;margin:0 0 14px 104px;padding:0;border:0;min-height:18px;gap:12px} .testimonial-party-card .testimonial-card-header .testimonial-sample-label{font:10px/1.4 Arial;color:#a7aaa4;letter-spacing:.06em} .testimonial-party-card .testimonial-card-body{display:block;position:relative;flex:1;padding:0;margin-bottom:20px;min-width:0} .testimonial-party-card .testimonial-logo-frame{position:absolute;z-index:2;left:-4px;top:-14px;width:104px;height:104px;min-height:0;padding:14px;background:#111211;border:2px solid #eeeee7;border-radius:50%;box-shadow:0 0 0 5px #111211,0 0 0 6px #68715f} .testimonial-party-card .testimonial-logo-frame img{width:100%;height:100%;max-height:100%;object-fit:contain} .testimonial-party-card .testimonial-quote-panel{margin-left:70px;min-height:176px;padding:24px 22px 19px 42px;background:#242624;border:1px solid #686e65;border-radius:5px;box-shadow:0 3px 0 #090a09;transform:rotate(-.5deg)} .testimonial-party-card .testimonial-quote-mark{left:auto;right:14px;top:-15px;font:52px/1 Georgia,serif;color:var(--accent)} .testimonial-party-card .testimonial-sample-copy{font:16px/1.65 Arial,Helvetica,sans-serif;color:#eeeee7;margin:0 0 20px;text-wrap:pretty} .testimonial-party-card .testimonial-person{border-top:1px solid #4b5145;padding-top:12px;margin-top:auto} .testimonial-party-card .testimonial-person strong{font:600 14px/1.3 Arial;display:block;margin-bottom:5px} .testimonial-party-card .testimonial-person small{font:11px/1.5 Arial;color:#a7aaa4;display:block} .testimonial-client-ribbon{position:relative;isolation:isolate;z-index:3;display:grid;place-items:center;min-height:45px;margin:0 -34px;padding:10px 24px;background:#000;border:2px solid #000;clip-path:polygon(3% 0,97% 0,100% 50%,97% 100%,3% 100%,0 50%);filter:drop-shadow(0 3px 0 #000)} .testimonial-client-ribbon:before{content:'';position:absolute;inset:1px;z-index:-1;background:var(--accent);clip-path:polygon(3% 0,97% 0,100% 50%,97% 100%,3% 100%,0 50%)} .testimonial-party-card .testimonial-client-ribbon h3{font:400 25px/1.1 CardCondensed,Arial,sans-serif;letter-spacing:.04em;text-transform:uppercase;text-align:center;color:#111211;margin:0;text-wrap:balance} .testimonial-loop-viewport{padding-top:16px;padding-bottom:20px}.testimonial-cycle,.testimonial-loop-track{gap:40px} @media(max-width:650px){.testimonial-party-card{width:min(86vw,430px);min-height:290px;padding:16px 17px 18px}.testimonial-party-card .testimonial-card-header{margin-left:78px;gap:8px;margin-bottom:16px}.testimonial-party-card .testimonial-card-header .testimonial-sample-label{font-size:9px}.testimonial-party-card .testimonial-card-header>span{font-size:9px}.testimonial-party-card .testimonial-logo-frame{width:76px;height:76px;left:-1px;top:-9px;padding:10px;box-shadow:0 0 0 4px #111211,0 0 0 5px #68715f}.testimonial-party-card .testimonial-quote-panel{margin-left:42px;min-height:174px;padding:23px 14px 16px 32px}.testimonial-party-card .testimonial-sample-copy{font-size:14px;line-height:1.6;margin-bottom:16px}.testimonial-party-card .testimonial-person strong{font-size:13px}.testimonial-party-card .testimonial-person small{font-size:10px}.testimonial-party-card .testimonial-card-body{margin-bottom:18px}.testimonial-client-ribbon{margin:0 -27px;min-height:44px;padding:9px 22px}.testimonial-party-card .testimonial-client-ribbon h3{font-size:22px}.testimonial-cycle,.testimonial-loop-track{gap:32px}} /* Bound portrait-shaped client logos and keep quote attribution compact. */ .testimonial-party-card .testimonial-logo-frame{display:flex;align-items:center;justify-content:center;overflow:hidden} .testimonial-party-card .testimonial-logo-frame img{display:block;width:72px;height:72px;min-width:0;min-height:0;max-width:100%;max-height:100%;object-fit:contain;aspect-ratio:1;flex:0 1 auto} .testimonial-party-card .testimonial-quote-mark{transform:none;line-height:1} .testimonial-party-card .testimonial-person{display:flex;flex-wrap:wrap;align-items:baseline;gap:5px 9px} .testimonial-party-card .testimonial-person strong{margin:0;white-space:nowrap} .testimonial-party-card .testimonial-person small{display:inline;margin:0;white-space:nowrap} #contact .contact-row{width:100%} #contact .contact-ending{max-width:none;flex:1 1 360px;justify-content:space-between} #contact .contact-ending p{flex:0 1 34ch;max-width:34ch} #contact .contact-ending .section-back-to-top{margin-left:auto;flex-shrink:0} @media(max-width:760px){#contact .contact-ending{flex:0 0 auto;width:100%}#contact .contact-ending p{flex:0 1 34ch}} @media(max-width:650px){.testimonial-party-card .testimonial-logo-frame img{width:52px;height:52px}.testimonial-party-card .testimonial-person{gap:4px 7px}} /* Service banners: permanent readable vignette, colour on intent, plain detail below. */ #services .services-grid{gap:24px 32px;align-items:start} #services .service-banner{padding:0;border:1px solid #343730;background:#1b1e1b;min-width:0;overflow:hidden} #services .service-banner summary{position:relative;isolation:isolate;display:flex;align-items:flex-end;min-height:218px;padding:26px 68px 26px 28px;gap:0;overflow:hidden} .service-banner-art{position:absolute;inset:0;z-index:-2;background:#242624;pointer-events:none} #services .service-banner-art img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 44%;filter:grayscale(1) brightness(.65);transition:filter 480ms cubic-bezier(.22,.61,.36,1)} #services .service-banner summary:before{content:'';position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 58% 35%,transparent 0%,rgba(0,0,0,.3) 62%,rgba(0,0,0,.76) 100%),linear-gradient(0deg,rgba(0,0,0,.86),rgba(0,0,0,.28) 76%);pointer-events:none} #services .service-banner-copy{display:flex;flex-direction:column;gap:10px;max-width:480px;min-width:0} #services .service-banner .service-index{font:11px/1.3 Arial;letter-spacing:1.5px;color:var(--accent)} #services .service-banner .service-title{font:400 clamp(20px,1.8vw,27px)/1.13 StudioWide,Arial,sans-serif;letter-spacing:-.035em;color:#eeeee7;text-transform:uppercase;text-wrap:balance} #services .service-banner .service-teaser{font:14px/1.5 Arial;color:#d0d4ca;text-wrap:pretty} #services .service-banner summary:after{content:'+';position:absolute;bottom:25px;right:24px;display:grid;place-items:center;width:32px;height:32px;border:1px solid color-mix(in srgb,var(--accent) 50.196%,transparent);border-radius:50%;font:25px/1 Arial;color:var(--accent);background:#11121166} #services .service-banner[open] summary:after{content:'−'} #services .service-banner[open] .service-banner-art img,#services .service-banner summary:focus-visible .service-banner-art img{filter:grayscale(0) saturate(.85) brightness(.78)} #services .service-banner summary:focus-visible{outline:2px solid var(--accent);outline-offset:-3px} #services .service-description{padding:22px 28px 24px;background:#1b1e1b;border-top:1px solid #343730} #services .service-description p{font:15px/1.7 Arial;color:#bfc5b8;max-width:60ch;margin:0} #services .service-description p+p{margin-top:12px} #services .service-banner-concept .service-banner-art img{object-position:center 46%} #services .service-banner-book .service-banner-art img{object-position:center 35%} @media(hover:hover){#services .service-banner summary:hover .service-banner-art img{filter:grayscale(0) saturate(.85) brightness(.78)}} @media(max-width:760px){#services .services-grid{grid-template-columns:1fr;gap:16px}#services .service-banner summary{min-height:178px;padding:22px 60px 22px 22px}#services .service-banner-copy{gap:8px}#services .service-banner .service-title{font-size:21px}#services .service-banner .service-teaser{font-size:13px}#services .service-banner summary:after{right:18px;bottom:21px;width:30px;height:30px}#services .service-description{padding:20px 22px 22px}#services .service-description p{font-size:14px}} @media(prefers-reduced-motion:reduce){#services .service-banner-art img{transition:none}} :root{--accent-on-light:#788234} .accent-review{position:fixed;right:20px;bottom:max(18px,env(safe-area-inset-bottom));z-index:1000;font-family:Arial,Helvetica,sans-serif;color:#eeeee7;width:min(370px,calc(100vw - 32px));pointer-events:none} .accent-study-toggle,.accent-study-panel{pointer-events:auto} .accent-study-toggle{display:flex;align-items:center;gap:10px;min-height:46px;margin-left:auto;padding:11px 15px;border:1px solid #74786c;border-radius:26px;background:#171917f2;color:#eeeee7;font:13px/1.3 Arial;box-shadow:0 5px 24px #0006;touch-action:manipulation;backdrop-filter:blur(12px)} .accent-study-toggle:hover{border-color:var(--accent)}.accent-study-dot{width:14px;height:14px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 1px #ffffff33}.accent-study-toggle-icon{font-size:20px;margin-left:5px} .accent-study-panel{padding:20px;margin-bottom:10px;border:1px solid #555b50;border-radius:12px;background:#171917fa;box-shadow:0 12px 50px #0007;max-height:min(72svh,540px);overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y pinch-zoom} .accent-study-panel[hidden]{display:none!important}.accent-study-head{display:flex;justify-content:space-between;align-items:start;gap:16px;margin-bottom:18px}.accent-study-head span{font:10px/1.5 Arial;letter-spacing:1.2px;text-transform:uppercase;color:#a7aaa4} .accent-study-head h2{font:400 23px/1.2 StudioWide,Arial,sans-serif;letter-spacing:-.04em;text-transform:uppercase;margin:8px 0 0}.accent-study-close{display:grid;place-items:center;flex:0 0 36px;width:36px;height:36px;border:1px solid #454a40;border-radius:50%;background:transparent;color:#eeeee7;font:25px Arial;touch-action:manipulation} .accent-study-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px} .accent-study-option{display:flex;flex-direction:column;align-items:flex-start;gap:5px;min-width:0;min-height:90px;padding:10px 8px;border:1px solid #3b4036;border-radius:7px;background:#20231e;text-align:left;color:#eeeee7;touch-action:manipulation} .accent-study-option:hover{border-color:#979e8f}.accent-study-option[aria-pressed="true"]{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)} .accent-study-swatch{width:24px;height:24px;display:block;background:var(--swatch);border-radius:50%;box-shadow:inset 0 0 0 1px #ffffff26;margin-bottom:3px} .accent-study-option strong{font:500 11px/1.25 Arial}.accent-study-option small{font:9px/1.3 Arial;color:#a7aaa4;letter-spacing:.2px} .accent-study-current{padding-top:16px;margin-top:16px;border-top:1px solid #3b4036}.accent-study-current strong{font:600 13px/1.4 Arial;color:var(--accent)}.accent-study-current p{font:12px/1.6 Arial;color:#d0d4ca;margin:7px 0}.accent-study-current small{font:10px/1.5 Arial;color:#a7aaa4} .accent-study-actions{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:16px}.accent-study-actions button,.accent-study-actions a{background:none;border:0;border-bottom:1px solid #737c68;border-radius:0;padding:6px 0;color:#eeeee7;font:11px/1.4 Arial;touch-action:manipulation} .accent-study-footnote{font:10px/1.5 Arial;color:#969d8f;margin:12px 0 0} @media(max-width:480px){.accent-review{right:16px}.accent-study-panel{padding:16px}.accent-study-head h2{font-size:21px}.accent-study-option{min-height:87px}} .accent-study-sets{display:flex;gap:8px;margin-bottom:14px} .accent-study-sets button{flex:1;min-height:40px;padding:9px 12px;border:1px solid #454a40;border-radius:22px;background:transparent;color:#c7cdbf;font:12px/1.3 Arial;touch-action:manipulation} .accent-study-sets button[aria-pressed="true"]{background:#eeeee7;border-color:#eeeee7;color:#111211} .accent-study-option[hidden]{display:none!important} /* Static brushed-metal finish, applied only to the metallic colour family. */ html[data-accent-finish="metallic"]{ --metal-surface:repeating-linear-gradient(0deg,rgba(255,255,255,.065) 0,rgba(255,255,255,.065) .6px,rgba(0,0,0,.03) 1.2px,transparent 2.4px),linear-gradient(112deg,color-mix(in srgb,var(--accent) 88%,#000) 0%,var(--accent) 16%,color-mix(in srgb,var(--accent) 60%,#fff) 27%,var(--accent) 39%,color-mix(in srgb,var(--accent) 88%,#000) 48%,color-mix(in srgb,var(--accent) 72%,#fff) 53%,var(--accent) 65%,color-mix(in srgb,var(--accent) 80%,#fff) 83%,var(--accent) 100%); --metal-type:linear-gradient(112deg,var(--accent) 0%,color-mix(in srgb,var(--accent) 65%,#fff) 30%,var(--accent) 47%,color-mix(in srgb,var(--accent) 75%,#fff) 54%,var(--accent) 78%,color-mix(in srgb,var(--accent) 82%,#fff) 100%); } html[data-accent-finish="metallic"] .studio-ticker, html[data-accent-finish="metallic"] .moon-ribbon, html[data-accent-finish="metallic"] #work .filters button.active, html[data-accent-finish="metallic"] .section-back-to-top, html[data-accent-finish="metallic"] .back-to-top-row .back-to-top, html[data-accent-finish="metallic"] #studio .team-deck .tcg-ribbon:before, html[data-accent-finish="metallic"] .testimonial-client-ribbon:before, html[data-accent-finish="metallic"] .accent-study-dot{background-image:var(--metal-surface)} html[data-accent-finish="metallic"] .moon-field[data-accent-surface="true"], html[data-accent-finish="metallic"] .moon-fill-surface{background-image:var(--metal-surface)!important} @supports(background-clip:text){ html[data-accent-finish="metallic"] #home h1>span:last-child, html[data-accent-finish="metallic"] #services .heading-line:last-child, html[data-accent-finish="metallic"] .testimonial-header-copy .heading-line:last-child, html[data-accent-finish="metallic"] .stat strong{background-image:var(--metal-type);background-clip:text;-webkit-background-clip:text;color:transparent} } .accent-study-option[data-palette-set="metallic"] .accent-study-swatch{background-image:repeating-linear-gradient(0deg,#ffffff20 0,#ffffff20 .6px,transparent 1px,transparent 2px),linear-gradient(120deg,var(--swatch) 8%,color-mix(in srgb,var(--swatch) 55%,#fff) 30%,var(--swatch) 47%,color-mix(in srgb,var(--swatch) 70%,#fff) 55%,var(--swatch) 90%);box-shadow:inset 0 1px 1px #fff9,inset 0 -1px 1px #0004} .accent-study-sets button{padding-left:8px;padding-right:8px;font-size:11px} .accent-custom-form{padding:14px 0;margin:0 0 14px;border-top:1px solid #3b4036;border-bottom:1px solid #3b4036} .accent-custom-form>label{display:block;margin-bottom:9px;font:600 12px/1.4 Arial;color:#eeeee7} .accent-custom-fields{display:flex;gap:8px;align-items:center;min-width:0} .accent-custom-fields input[type="text"]{min-width:0;flex:1;width:100%;height:44px;padding:10px 11px;background:#20231e;color:#eeeee7;border:1px solid #66705c;border-radius:5px;font:16px/1.3 Arial;letter-spacing:.5px} .accent-custom-fields input[type="color"]{flex:0 0 44px;width:44px;height:44px;padding:3px;border:1px solid #66705c;border-radius:5px;background:#20231e;cursor:pointer} .accent-custom-fields button{flex:0 0 auto;min-height:44px;padding:10px 12px;background:#eeeee7;color:#111211;border:0;border-radius:5px;font:600 12px/1.3 Arial;touch-action:manipulation} .accent-custom-status{margin:8px 0 0;color:#a7aaa4;font:10px/1.5 Arial}.accent-custom-fields input[aria-invalid="true"]{border-color:#ff8098} .accent-study-sets{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))} /* Approved Citron default, compact visitor swatches, and project credits. */ .studio-ticker{padding-top:5px}.studio-ticker-window{height:26px;padding-top:1px}.studio-ticker-pause{height:26px} .menu-accent-swatches{display:flex;align-items:center;flex-shrink:0;gap:0;margin-left:4px;padding-left:8px;border-left:1px solid var(--line)} .menu-accent-swatch{display:grid;place-items:center;width:40px;height:44px;padding:0;border:0;background:transparent;border-radius:50%;touch-action:manipulation;cursor:pointer} .menu-accent-swatch span{display:block;width:19px;height:19px;border-radius:50%;background:var(--swatch);box-shadow:0 0 0 1px #ffffff35;transition:box-shadow .18s,transform .18s} .menu-accent-swatch[aria-pressed="true"] span{box-shadow:0 0 0 3px #111211,0 0 0 4px var(--swatch)} .menu-accent-swatch:hover span{transform:scale(1.12)}.menu-accent-swatch:focus-visible{outline:2px solid var(--accent);outline-offset:-3px} .testimonial-party-card .testimonial-person small{white-space:normal;text-wrap:pretty}.testimonial-credit .testimonial-role{white-space:nowrap}.testimonial-credit-dot{opacity:.65}.testimonial-project{color:#d1d4cb} @media(max-width:760px){.compact-header #nav .menu-accent-swatches{align-self:flex-start;justify-content:flex-start;margin:-4px 0 0 -8px;padding:0;border-left:0;gap:4px}.menu-accent-swatch{width:44px}} /* Team deck: wider, shorter cards with a more compact portrait area. */ #studio .team-deck .tcg-card{width:var(--deck-card-width,278px);margin-left:calc(var(--deck-card-width,278px) / -2);height:423px;min-height:423px;padding:12px 20px 14px} #studio .team-deck .tcg-topline{padding-bottom:8px;margin-bottom:6px;flex-shrink:0} #studio .team-deck .tcg-topline>span{transform:translateY(3px)} #studio .team-deck .tcg-art{min-height:156px;padding:10px 0;margin-bottom:6px;flex-shrink:0} #studio .team-deck .tcg-card img{width:136px;height:136px} #studio .team-deck .tcg-orbit{width:156px;height:156px} #studio .team-deck .tcg-card h4{margin-bottom:10px} #studio .team-deck .tcg-ribbon{padding-top:8px;padding-bottom:8px;margin-bottom:12px} #studio .team-deck .tcg-card .party-traits{padding-top:9px;padding-bottom:9px;gap:8px} #studio .team-deck .tcg-seal{margin-top:3px} /* Art Direction Lab 01: asymmetric hero and quieter, more spacious composition. */ #home.hero{height:calc(100svh + 168px);min-height:880px;max-height:1200px} #home .hero-content{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;row-gap:32px;padding-top:clamp(150px,13vh,220px);padding-bottom:150px} #home .hero-content>.eyebrow{grid-column:1/10} body #home .hero-content h1{grid-column:1/-1;width:100%;font-size:clamp(62px,7.4vw,126px);line-height:1.04;margin:0;letter-spacing:-.055em} #home .hero-content h1>.heading-line:last-child{margin-left:14%} #home .hero-support{grid-column:6/12;max-width:470px;padding-top:6px} #home .hero-support p{margin:0 0 22px;max-width:100%;font-size:18px;line-height:1.65} #home:after{background:linear-gradient(90deg,#07100dd9,#07100d22 80%),linear-gradient(0deg,#111211 0%,#11121199 43%,transparent 76%),linear-gradient(180deg,#11121188,transparent 30%)} #home .hero-foot{align-items:flex-end;flex-wrap:nowrap;gap:32px;bottom:34px} #home .hero-foot>a{margin-left:auto;text-align:right;max-width:min(55%,520px);line-height:1.6} #homepage .section{padding-top:125px;padding-bottom:125px} #homepage .contact{padding-top:125px;padding-bottom:88px} #homepage .testimonials,#homepage .testimonials:has(.testimonial-layout[hidden]){padding-top:66px;padding-bottom:66px} #work .section-top{margin-bottom:46px} #homepage .clients{padding-top:66px;padding-bottom:78px;border-bottom:0} #homepage .clients .clients-top{margin-bottom:36px} #homepage .clients>.stats-section{border-top:0;padding:72px 0 0;max-width:1280px;margin-inline:auto} #homepage .clients .logo-controls{display:none} #work .project-banner{aspect-ratio:2.4375} #work .project-banner.is-wide,#work .project-banner.is-balanced-wide{aspect-ratio:4} #work .project-banner img{filter:brightness(.63);transition:filter .48s ease,transform .6s ease} #work .project-banner:after{background:radial-gradient(ellipse at 50% 40%,transparent 10%,#0008 100%),linear-gradient(0deg,#000c,transparent 78%);pointer-events:none} #work .project-banner:hover img,#work .project-banner:focus-visible img{filter:brightness(.94)} #work .banner-copy{left:22px;right:22px;bottom:20px;gap:16px} #work .banner-copy h3{font-size:clamp(20px,1.9vw,30px);line-height:1.04;letter-spacing:-.045em;margin:6px 0;max-width:620px;text-wrap:balance} #work .banner-copy small{font-size:11px;letter-spacing:.65px;line-height:1.4} #work .banner-copy .arrow{font-size:26px;flex-shrink:0} @media(max-width:1000px){#home .hero-support{grid-column:5/12}#home .hero-content{column-gap:16px}} @media(max-width:760px){ #home.hero{height:calc(100svh + 168px);min-height:920px;max-height:1100px} #home .hero-content{padding-top:155px;padding-bottom:130px;column-gap:10px;row-gap:28px} #home .hero-content>.eyebrow{grid-column:1/-1;font-size:11px;letter-spacing:1.6px} body #home .hero-content h1{font-size:clamp(30px,10cqi,68px);line-height:1.08} #home .hero-content h1>.heading-line:last-child{margin-left:7%} #home .hero-support{grid-column:2/13;padding-top:10px;max-width:390px} #home .hero-support p{font-size:17px;line-height:1.7;margin-bottom:20px} #home .hero-foot{bottom:28px;gap:18px;align-items:flex-end} #home .hero-foot>span{max-width:38%;line-height:1.6;font-size:9px} #home .hero-foot>a{max-width:58%;font-size:10px} #homepage .section{padding-top:80px;padding-bottom:80px} #homepage .contact{padding-top:84px;padding-bottom:70px} #homepage .testimonials,#homepage .testimonials:has(.testimonial-layout[hidden]){padding-top:48px;padding-bottom:48px} #homepage .clients{padding-top:54px;padding-bottom:66px} #homepage .clients>.stats-section{padding-top:56px} #work .project-banner,#work .project-banner.is-wide,#work .project-banner.is-balanced-wide{aspect-ratio:1.875} #work .banner-copy{left:18px;right:18px;bottom:17px;gap:12px} #work .banner-copy h3{font-size:clamp(19px,4.7vw,25px);margin:5px 0} #work .banner-copy small{font-size:10px;letter-spacing:.45px} #work .banner-copy .arrow{font-size:23px} } @media(prefers-reduced-motion:reduce){#work .project-banner img{transition:none}} /* Hero dialogue: two voices, one accent, a brief intermittent distortion. */ #home .hero-content{height:100%;grid-template-rows:auto 1fr auto;row-gap:36px;padding-bottom:140px} body #home .hero-content h1.hero-dialogue{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:5%;align-self:start;font-size:clamp(45px,5.35vw,92px);line-height:1.06;letter-spacing:-.055em} #home .hero-dialogue .hero-phrase{display:block;color:var(--ink);min-width:0} #home .hero-dialogue .hero-phrase>span{display:block;white-space:nowrap;color:inherit} #home .hero-dialogue .hero-answer{padding-top:clamp(46px,5vw,90px)} #home .hero-dialogue .hero-chaos{position:relative;display:inline-block;color:var(--accent);isolation:isolate;white-space:nowrap} #home .hero-chaos:before,#home .hero-chaos:after{content:attr(data-glitch);position:absolute;inset:0;pointer-events:none;color:var(--accent);opacity:0} #home .hero-chaos:before{animation:moon-chaos-slice 4.76s linear infinite;clip-path:inset(19% 0 58% 0)} #home .hero-chaos:after{animation:moon-chaos-echo 4.76s linear infinite;clip-path:inset(62% 0 13% 0)} #home .hero-support{grid-column:1/6;align-self:end;padding-top:0} @keyframes moon-chaos-slice{0%,69%,75%,100%{opacity:0;transform:translateX(0)}70%,72%{opacity:1;transform:translateX(-4px)}71%,73%{opacity:1;transform:translateX(4px)}74%{opacity:.7;transform:translateX(-2px)}} @keyframes moon-chaos-echo{0%,69%,75%,100%{opacity:0;transform:translateX(0)}70%,72%{opacity:.9;transform:translateX(4px)}71%,73%{opacity:.9;transform:translateX(-3px)}74%{opacity:.5;transform:translateX(2px)}} @media(max-width:1000px) and (min-width:761px){#home .hero-support{grid-column:1/8}} @media(max-width:760px){ #home .hero-content{row-gap:28px;padding-bottom:130px} body #home .hero-content h1.hero-dialogue{grid-template-columns:1fr;gap:25px;font-size:clamp(34px,8.6vw,64px);line-height:1.07} #home .hero-dialogue .hero-world{justify-self:start} #home .hero-dialogue .hero-answer{justify-self:end;padding-top:0;text-align:right} #home .hero-support{grid-column:1/-1;max-width:390px;padding-top:0} } @media(prefers-reduced-motion:reduce){#home .hero-chaos:before,#home .hero-chaos:after{animation:none;display:none}} /* Art Direction Lab 03: restrained hero, oversized section titles, hover captions. */ body #home .hero-content h1.hero-dialogue{display:block;max-width:780px;font-size:clamp(36px,3.55vw,62px);line-height:1.1;letter-spacing:-.045em} #home .hero-dialogue .hero-phrase{display:block} #home .hero-dialogue .hero-phrase>span{display:inline;white-space:normal} #home .hero-dialogue .hero-phrase>span:first-child:after{content:' '} #home .hero-dialogue .hero-answer{padding-top:12px;text-align:left} #home .hero-content{row-gap:28px} #work .banner-copy{opacity:0;transform:translateY(calc(100% + 22px));transition:transform .38s cubic-bezier(.22,1,.36,1),opacity .24s ease;pointer-events:none} #work .project-banner:hover .banner-copy,#work .project-banner:focus-visible .banner-copy{opacity:1;transform:translateY(0)} #homepage{--section-heading-size:clamp(60px,8vw,104px)} #work .heading-wrap>h2,#services .heading-wrap>h2,#studio .heading-wrap>h2,.testimonial-header-copy .heading-wrap>h2{font-size:var(--section-heading-size);line-height:1.02;overflow-wrap:anywhere;text-wrap:balance} #homepage .heading-wrap .heading-line{white-space:normal} #homepage .testimonial-header-copy,#homepage .testimonial-header-copy .heading-wrap{max-width:none} #contact .heading-wrap>h2{font-size:clamp(80px,calc(var(--heading-fluid) * 2),208px);line-height:1.02;overflow-wrap:anywhere;text-wrap:balance} #homepage .lead,#homepage .studio p,#homepage .hero-support p{font-size:17px;line-height:1.7} #homepage .service-description p,#homepage .contact p{font-size:15px;line-height:1.75} #homepage .artnote,#homepage .logo-note{font-size:12px;line-height:1.75} @media(max-width:760px){ body #home .hero-content h1.hero-dialogue{font-size:clamp(29px,7.6vw,50px);line-height:1.14;max-width:100%} #home .hero-dialogue .hero-answer{padding-top:10px;justify-self:start;text-align:left} #home .hero-dialogue .hero-phrase>span{display:inline} #home .hero-dialogue .hero-phrase>span:first-child:after{content:' '} #homepage{--section-heading-size:clamp(38px,12vw,76px)} #work .heading-wrap>h2,#services .heading-wrap>h2,#studio .heading-wrap>h2,.testimonial-header-copy .heading-wrap>h2{font-size:var(--section-heading-size)} #contact .heading-wrap>h2{font-size:clamp(44px,15vw,96px)} #homepage .lead,#homepage .studio p,#homepage .hero-support p{font-size:16px} #homepage .service-description p,#homepage .contact p{font-size:15px} } @media(hover:none){#work .banner-copy{opacity:1;transform:none}} @media(prefers-reduced-motion:reduce){#work .banner-copy{transition:none}} /* Art Direction Lab 04: broader canvas, deeper vertical rhythm, unified title scale. */ :root{--page-gutter:max(3%,calc((100% - 1760px)/2))} #homepage{--section-heading-size:clamp(48px,6.4vw,83.2px);--section-content-gap:56px;--section-label-gap:26px} #homepage .section,#homepage .clients,#homepage .testimonials,#homepage .contact{padding-left:var(--page-gutter);padding-right:var(--page-gutter)} #homepage .section{padding-top:150px;padding-bottom:150px} #homepage .contact{padding-top:150px;padding-bottom:106px} #homepage .testimonials,#homepage .testimonials:has(.testimonial-layout[hidden]){padding-top:80px;padding-bottom:80px} #homepage .clients{padding-top:80px;padding-bottom:94px} #homepage .clients>.stats-section{padding-top:86px;max-width:none} #homepage .clients-top,#homepage .logo-note,#homepage .logo-viewport{max-width:none} #homepage .section-top,#homepage .filters,#homepage .artnote{max-width:none} #work .section-top{margin-bottom:56px} #home .hero-content{width:calc(100% - var(--page-gutter) - var(--page-gutter))} #home .hero-foot{left:var(--page-gutter);right:var(--page-gutter)} header.compact-header{left:var(--page-gutter)} body>footer{padding-left:var(--page-gutter);padding-right:var(--page-gutter)} #gallery-page{padding-left:var(--page-gutter);padding-right:var(--page-gutter)} #work .heading-wrap>h2,#services .heading-wrap>h2,#studio .heading-wrap>h2,.testimonial-header-copy .heading-wrap>h2,#contact .heading-wrap>h2{font-size:var(--section-heading-size);line-height:1.04} #contact-heading-wrap{max-width:1100px} #homepage .services-intro{margin-bottom:56px;column-gap:80px} #homepage .studio{row-gap:78px;column-gap:80px} #homepage .contact-row{margin-top:56px;gap:96px} #homepage .testimonial-top #toggle-testimonial{margin-top:52px} #homepage #team-content{padding-top:42px} #homepage .team-intro{margin-bottom:30px} #homepage .testimonial-loop-layout{padding-top:42px} #homepage .lead,#homepage .studio p{max-width:48ch} #homepage .contact p{max-width:36ch} @media(max-width:1000px){#homepage .services-intro,#homepage .studio{column-gap:40px}#homepage .contact-row{gap:42px}} @media(max-width:760px){ :root{--page-gutter:4%} #homepage{--section-heading-size:clamp(30.4px,9.6vw,60.8px);--section-content-gap:40px;--section-label-gap:22px} #homepage .section{padding-top:96px;padding-bottom:96px} #homepage .contact{padding-top:100px;padding-bottom:84px} #homepage .testimonials,#homepage .testimonials:has(.testimonial-layout[hidden]){padding-top:58px;padding-bottom:58px} #homepage .clients{padding-top:65px;padding-bottom:80px} #homepage .clients>.stats-section{padding-top:68px} #work .section-top{margin-bottom:44px} #homepage .services-intro{margin-bottom:44px} #homepage .studio{row-gap:42px} #homepage .contact-row{margin-top:42px;gap:30px} #homepage .testimonial-top #toggle-testimonial{margin-top:40px} #homepage #team-content{padding-top:34px} #homepage .testimonial-loop-layout{padding-top:34px} } /* Art Direction Lab 05: aligned hero lines, curated crops and fluid descriptions. */ body #home .hero-content h1.hero-dialogue{width:100%;max-width:820px;font-size:clamp(32px,3.4vw,58px);line-height:1.12} #home .hero-dialogue .hero-phrase{display:flex;justify-content:space-between;align-items:baseline;gap:.18em;width:100%} #home .hero-dialogue .hero-phrase>span{display:block;white-space:nowrap} #home .hero-dialogue .hero-phrase>span:first-child:after{content:none} #home .hero-dialogue .hero-keyword{font-size:1.12em;letter-spacing:-.06em} #home .hero-dialogue .hero-phrase>.hero-chaos{color:var(--accent)} #home .hero-dialogue .hero-answer{padding-top:12px} #contact .heading-wrap>h2{font-size:calc(var(--section-heading-size) * 1.15)} #homepage #studio>div:nth-child(2)>p{width:100%;max-width:none} #homepage #services .service-description p{width:100%;max-width:none} #work{--banner-edge:clamp(14px,1.8vw,32px)} #work #banners{position:relative;width:min(1920px,calc(100vw - var(--banner-edge) - var(--banner-edge)));max-width:none;margin-left:calc((100% - min(1920px,calc(100vw - var(--banner-edge) - var(--banner-edge)))) / 2);margin-right:0} #work .section-top{transform:translateY(-18px);margin-bottom:76px} #work [data-album="critical-role"] img{object-position:50% 39%} #work [data-album="sci-fi"] img{object-position:50% 40%} #work [data-album="galaxy"] img{object-position:50% 27%} #work [data-album="neuroscape"] img{object-position:50% 38%} #work [data-album="guillman"] img{object-position:50% 25%} #work [data-album="shadow-scar"] img{object-position:50% 48%} #work [data-album="covers"] img{object-position:50% 25%} @media(max-width:760px){ body #home .hero-content h1.hero-dialogue{font-size:clamp(21px,6vw,36px);max-width:100%;line-height:1.15} #home .hero-dialogue .hero-phrase{display:flex;gap:.14em} #home .hero-dialogue .hero-phrase>span{display:block} #home .hero-dialogue .hero-phrase>span:first-child:after{content:none} #home .hero-dialogue .hero-answer{padding-top:11px} #work .section-top{transform:translateY(-10px);margin-bottom:60px} #work{--banner-edge:12px} #work [data-album="critical-role"] img{object-position:50% 42%} #work [data-album="sci-fi"] img{object-position:50% 42%} #work [data-album="guillman"] img{object-position:50% 35%} } /* Restore the original left-aligned hero composition, retaining the new copy. */ #home .hero-content{display:block;height:auto;padding-top:150px;padding-bottom:140px} body #home .hero-content h1.hero-original-layout{display:block;width:100%;max-width:none;font-size:clamp(30px,8.1cqi,126px);font-family:StudioWide,Arial,sans-serif;font-weight:400;letter-spacing:-.055em;line-height:1.02;margin:28px 0} #home h1.hero-original-layout>.heading-line{display:block;white-space:nowrap;margin:0;padding:0} #home h1.hero-original-layout>.hero-first-line{color:var(--ink)} #home h1.hero-original-layout>.hero-second-line{color:var(--accent)} #home .hero-original-layout .hero-chaos{position:relative;display:inline-block;color:var(--accent);font-size:inherit;isolation:isolate} #home .hero-support{max-width:470px;padding-top:0} #home .hero-support p{margin:28px 0;font-size:17px;line-height:1.7} #home .hero-support .link{margin:0} @media(max-width:760px){#home .hero-content{padding-top:140px;padding-bottom:130px}body #home .hero-content h1.hero-original-layout{font-size:clamp(25px,8.1cqi,65px);line-height:1.08}#home .hero-support{max-width:390px}#home .hero-support p{font-size:16px}} /* Wider album insets and height-based column rhythm. */ #work{--banner-edge:clamp(20px,3vw,56px)} #work #banners{column-gap:var(--banner-column-gap,60px);row-gap:12px} #work .project-banner{height:var(--banner-half-height,280px);aspect-ratio:auto} #work .project-banner.is-wide,#work .project-banner.is-balanced-wide{height:var(--banner-wide-height,360px);aspect-ratio:auto} @media(max-width:760px){#work{--banner-edge:20px}#work #banners{column-gap:0}#work .project-banner,#work .project-banner.is-wide,#work .project-banner.is-balanced-wide{height:var(--banner-mobile-height,150px)}} /* Art Direction Lab 07: four-line pillars frame the artwork; copy sits low left. */ #home .hero-content{display:grid;height:100%;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:auto 1fr auto;row-gap:28px;padding-top:145px;padding-bottom:120px} #home .hero-content>.eyebrow{grid-column:1/-1;letter-spacing:.32em;font-size:12px;line-height:1.8} body #home .hero-content h1.hero-pillars{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24%;align-self:start;width:100%;margin:0;font:400 clamp(36px,min(6vw,13svh),112px)/1.02 StudioWide,Arial,sans-serif;letter-spacing:-.055em;text-transform:uppercase} #home .hero-pillars .hero-pillar{display:flex;flex-direction:column;align-items:flex-start;gap:0;min-width:0;color:var(--ink)} #home .hero-pillars .hero-pillar>span{display:block;white-space:nowrap;color:inherit} #home .hero-pillars .hero-pillar-chaos{align-items:flex-end;text-align:right} #home .hero-pillars .hero-pillar>.hero-chaos{position:relative;display:block;color:var(--accent);isolation:isolate} #home .hero-support{grid-column:1/6;align-self:end;max-width:470px;padding:0} #home .hero-support p{margin:0;font-size:17px;line-height:1.7} #work #banners{column-gap:12px;row-gap:0} #work .project-banner{margin-bottom:calc(var(--banner-half-height,280px) * .3)} #work .project-banner.is-wide,#work .project-banner.is-balanced-wide{margin-bottom:calc(var(--banner-wide-height,360px) * .3)} @media(max-width:760px){ #home .hero-content{padding-top:140px;padding-bottom:120px;row-gap:26px;column-gap:10px} #home .hero-content>.eyebrow{font-size:10px;letter-spacing:.22em;line-height:1.8} body #home .hero-content h1.hero-pillars{font-size:clamp(30px,8.9vw,64px);line-height:1.08;gap:14%} #home .hero-support{grid-column:1/12;max-width:390px} #home .hero-support p{font-size:16px} #work #banners{column-gap:12px} #work .project-banner,#work .project-banner.is-wide,#work .project-banner.is-balanced-wide{margin-bottom:calc(var(--banner-mobile-height,150px) * .3)} } /* Art Direction Lab 08: compact art strips and the team's star-and-rule motif. */ #work .section-top{transform:none;margin-bottom:40px} #work .filters{margin-top:0;margin-bottom:42px} #work .section-top>div:first-child>.eyebrow{margin-bottom:22px} #work .album-row-separator{--row-banner-height:var(--banner-half-height,140px);grid-column:1/-1;position:relative;top:calc(var(--row-banner-height) * -.15);display:flex;align-items:center;gap:14px;height:0;margin-inline:2%;pointer-events:none;color:var(--accent)} #work .album-row-separator.after-wide{--row-banner-height:var(--banner-wide-height,180px)} #work .album-row-separator>span{font:12px/1 Arial;color:var(--accent);flex-shrink:0} #work .album-row-separator>i{display:block;flex:1;height:5px;border-top:1px solid #67715a;border-bottom:1px solid #67715a55} #homepage #services .services-intro>.lead{max-width:none;width:100%;justify-self:stretch} #homepage #services .service-description p{max-width:none;width:100%} @media(max-width:1100px){#work .banner-copy{bottom:10px;left:15px;right:15px}#work .banner-copy small{display:none}#work .banner-copy h3{font-size:18px;line-height:1.04;margin:0}} @media(max-width:760px){#work .section-top{transform:none;margin-bottom:30px}#work .filters{margin-bottom:32px}#work .section-top>div:first-child>.eyebrow{margin-bottom:18px}#work .album-row-separator,#work .album-row-separator.after-wide{--row-banner-height:var(--banner-mobile-height,75px);gap:10px}#work .album-row-separator>span{font-size:9px}#work .banner-copy{bottom:8px;left:12px;right:12px}#work .banner-copy h3{font-size:16px;line-height:1.05}#work .banner-copy .arrow{font-size:18px}} /* Diagonal seams between paired art strips; directional arrows always visible. */ #work .project-banner>.banner-arrow{position:absolute;z-index:2;right:22px;bottom:20px;color:var(--accent);font-size:26px;line-height:1;pointer-events:none;display:block} #work .project-banner>.banner-arrow svg{width:1em;height:1em} #work .banner-copy{right:66px} @media(min-width:761px){#work .project-banner.is-pair-left{clip-path:polygon(0 0,calc(100% - 18px) 0,100% 100%,0 100%)}#work .project-banner.is-pair-right{clip-path:polygon(0 0,100% 0,100% 100%,18px 100%)}#work .is-pair-right .banner-copy{left:30px}} @media(max-width:1100px){#work .project-banner>.banner-arrow{right:15px;bottom:10px;font-size:22px}#work .banner-copy{right:50px}} @media(max-width:760px){#work .project-banner>.banner-arrow{right:13px;bottom:9px;font-size:20px}#work .banner-copy{right:44px}} /* Art Direction Lab 09: common section rhythm and a slim, reversed 30-degree seam. */ #homepage{--section-space:127.5px} #homepage .section,#homepage .clients,#homepage .testimonials,#homepage .testimonials:has(.testimonial-layout[hidden]),#homepage .contact{padding-top:var(--section-space);padding-bottom:var(--section-space)} #work #banners{column-gap:8px} #work .project-banner.is-last-row{margin-bottom:0} #work .album-row-separator>i{border-top-color:#67715a55;border-bottom-color:#67715a22} #work .album-row-separator>span{opacity:.55} #work>.artnote{position:relative;width:min(1920px,calc(100vw - var(--banner-edge) - var(--banner-edge)));max-width:none;margin:24px 0 0 calc((100% - min(1920px,calc(100vw - var(--banner-edge) - var(--banner-edge)))) / 2);color:#8c9187} @media(min-width:761px){ #work .project-banner.is-pair-left,#work .project-banner.is-pair-right{--seam-offset:calc(var(--banner-half-height,140px) * .5773502692);width:calc(100% + var(--seam-offset) * .5);max-width:none} #work .project-banner.is-pair-left{clip-path:polygon(0 0,100% 0,calc(100% - var(--seam-offset)) 100%,0 100%)} #work .project-banner.is-pair-right{margin-left:calc(var(--seam-offset) * -.5);clip-path:polygon(var(--seam-offset) 0,100% 0,100% 100%,0 100%)} #work .is-pair-left>.banner-arrow{right:calc(var(--seam-offset) + 22px)} #work .is-pair-left .banner-copy{right:calc(var(--seam-offset) + 66px)} #work .is-pair-right .banner-copy{left:30px} } @media(max-width:760px){#homepage{--section-space:81.6px}#work #banners{column-gap:8px}#work>.artnote{margin-top:20px;font-size:11px;line-height:1.7}} #work [data-album="critical-role"] img{object-position:50% 32%} #work [data-album="sci-fi"] img{object-position:50% 52%} #work [data-album="galaxy"] img{object-position:var(--galaxy-banner-position,50%) 50%;scale:var(--galaxy-banner-scale,1);transform-origin:0 50%} #work [data-album="neuroscape"] img{object-position:40% 33%} #work [data-album="cyberpunk"] img{object-position:50% 36%} #work [data-album="guillman"] img{object-position:50% 12%} #work [data-album="shadow-scar"] img{object-position:50% 54%} #work [data-album="covers"] img{object-position:50% 20%} /* Art Direction Lab 10: readable small-screen art and protected diagonal captions. */ #home .hero-content{grid-template-rows:auto auto 1fr} #home .hero-support{grid-column:1/8;align-self:start;margin-left:clamp(0px,14.8cqi,260px);padding-top:20px} @media(min-width:761px){#work .is-pair-right .banner-copy{left:calc(var(--seam-offset) + 20px)}} @media(max-width:1100px) and (min-width:761px){#work .banner-copy h3{font-size:20px;line-height:1.1}} @media(max-width:760px){#home .hero-content{grid-template-rows:auto auto 1fr}#home .hero-support{grid-column:1/-1;max-width:390px;margin-left:0;padding-top:18px}#work .banner-copy{bottom:16px;left:16px;right:52px}#work .banner-copy h3{font-size:20px;line-height:1.1}#work .project-banner>.banner-arrow{right:16px;bottom:16px;font-size:24px}} /* Align supporting copy with the title; let small-screen content determine height. */ #home .hero-support{margin-left:0} @media(max-width:1000px){ #home.hero{height:auto;min-height:calc(100svh - 31px);max-height:none} #home .hero-content{height:auto;min-height:calc(100svh - 31px);padding-top:124px;padding-bottom:110px;grid-template-rows:auto auto 1fr;row-gap:26px} #home .hero-support{grid-column:1/-1;margin-left:0;padding-top:4px;max-width:470px} body #home .hero-content h1.hero-pillars{font-size:clamp(30px,min(8.9vw,9svh),64px)} #home .hero-foot{bottom:24px} } @media(max-width:1100px) and (max-height:600px){ #home.hero{height:auto;min-height:calc(100svh - 31px);max-height:none} #home .hero-content{height:auto;min-height:calc(100svh - 31px);padding-top:104px;padding-bottom:100px;row-gap:22px;grid-template-rows:auto auto 1fr} body #home .hero-content h1.hero-pillars{font-size:clamp(30px,7svh,48px)} #home .hero-support{grid-column:1/-1;margin-left:0;padding-top:0} } /* Lab 13: quieter editorial framing, with the art carrying the visual weight. */ #home:after{background:linear-gradient(90deg,rgba(9,13,14,.66),rgba(9,13,14,.08) 38%,rgba(9,13,14,.08) 62%,rgba(9,13,14,.55)),linear-gradient(0deg,#111211,transparent 43%),linear-gradient(180deg,#11121166,transparent 32%)} body #home .hero-content h1.hero-pillars{font-size:clamp(36px,min(5.2vw,11svh),98px);line-height:1.06;letter-spacing:-.045em;gap:28%} #home .hero-content>.eyebrow{color:#e6e8de;letter-spacing:.25em} #home .hero-support{padding-top:32px;max-width:450px} #homepage #home .hero-support p{font-size:16px;line-height:1.8;color:#d0d3ca;text-wrap:pretty} #home .hero-support strong{display:inline-block;color:var(--ink);font-weight:400;margin-bottom:6px} #home .hero-foot{font-size:11px;letter-spacing:.1em;color:#aeb4aa} #homepage h2{letter-spacing:-.045em;text-wrap:balance} #homepage .lead,#homepage .service-description p,#homepage .studio p{text-wrap:pretty} #work .album-row-separator>i{height:1px;border-top-color:#ffffff18;border-bottom:0} #work .album-row-separator>span{opacity:.3;font-size:10px} #work .banner-copy h3{letter-spacing:-.025em;line-height:1.12} #work .banner-copy small{font-size:11px;letter-spacing:.09em} #work .project-banner>.banner-arrow{opacity:.82;transition:opacity .25s,transform .25s} #work .project-banner:hover>.banner-arrow,#work .project-banner:focus-visible>.banner-arrow{opacity:1;transform:translate(2px,-2px)} #work .filters button{font-family:Arial,Helvetica,sans-serif;border-color:#ffffff2b;background:transparent;color:#bbbfb5;transition:color .2s,border-color .2s,background .2s} #work .filters button.active,#work .filters button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#111211} #work .filters button:hover{border-color:var(--accent);color:var(--ink)} #work .filters button.active:hover,#work .filters button[aria-pressed="true"]:hover{color:#111211} #work>.artnote{font-size:12px;letter-spacing:.015em} @media(max-width:1000px){ body #home .hero-content h1.hero-pillars{font-size:clamp(30px,min(8.4vw,8.5svh),64px);gap:14%} #home .hero-support{padding-top:18px} #home .hero-foot{font-size:10px;letter-spacing:.06em} } @media(max-width:600px){#homepage #home .hero-support p{font-size:15px;line-height:1.75}#home .hero-content>.eyebrow{letter-spacing:.17em}#work .banner-copy small{font-size:10px}} @media(max-width:1100px) and (max-height:600px){body #home .hero-content h1.hero-pillars{font-size:clamp(30px,7svh,48px)}#home .hero-support{padding-top:0}} @media(prefers-reduced-motion:reduce){#work .project-banner>.banner-arrow{transition:none}} /* A single, restrained glitch. Text and hit areas never move or disappear. */ @keyframes studio-detail-glitch{ 0%,100%{text-shadow:none} 18%{text-shadow:2px 0 var(--accent),-1px 0 #eeeeee55} 32%{text-shadow:-2px 0 var(--accent),1px 0 #eeeeee44} 46%{text-shadow:none} 61%{text-shadow:1px 0 var(--accent),-1px 0 #eeeeee33} 76%{text-shadow:none} } #stats [data-counter="artworks"].detail-glitch,#contact .email.detail-glitch{animation:studio-detail-glitch 260ms steps(1,end) 1} @media(prefers-reduced-motion:reduce){#stats [data-counter="artworks"].detail-glitch,#contact .email.detail-glitch{animation:none}} /* Lab 15: three deliberate asymmetrical moments within the shared grid. */ #home .hero-pillars{align-items:start} #home .hero-pillars .hero-pillar-chaos{margin-top:1.06em} #home .hero-support{padding-top:20px} @media(min-width:1001px){#home .hero-content{row-gap:24px;padding-top:140px}} @media(min-width:761px){ #work #banners{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:8px} #work .project-banner.is-pair-left{grid-column:1 / span 6} #work .project-banner.is-pair-right{grid-column:7 / span 6} #work .project-banner.is-pair-left.is-left-heavy{grid-column:1 / span 7} #work .project-banner.is-pair-right.is-left-heavy{grid-column:8 / span 5} #work .project-banner.is-pair-left.is-right-heavy{grid-column:1 / span 5} #work .project-banner.is-pair-right.is-right-heavy{grid-column:6 / span 7} #work .project-banner[data-album="neuroscape"]{height:calc(var(--banner-wide-height) * 1.12);margin-bottom:calc(var(--banner-wide-height) * .336)} #work [data-album="neuroscape"]+.album-row-separator{--row-banner-height:calc(var(--banner-wide-height) * 1.12)} #work .project-banner.is-last-row{margin-bottom:0} #homepage #contact .contact-row{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;row-gap:36px;margin-top:54px;align-items:start} #contact .contact-row>.email{grid-column:5 / -1;justify-self:start;max-width:100%;font-size:clamp(22px,2.5vw,40px);overflow-wrap:anywhere} #contact .contact-ending{grid-column:7 / -1;width:100%;max-width:none;gap:36px;align-items:flex-end} #homepage #contact .contact-ending p{max-width:38ch;flex:0 1 38ch;font-size:16px;line-height:1.8} #contact .contact-ending .section-back-to-top{margin-left:auto} } @media(max-width:1000px) and (min-width:761px){ #home .hero-pillars .hero-pillar-chaos{margin-top:.8em} #contact .contact-row>.email{grid-column:3 / -1} #contact .contact-ending{grid-column:5 / -1} } @media(max-width:760px){ #home .hero-pillars .hero-pillar-chaos{margin-top:.45em} #home .hero-support{padding-top:12px} #work #banners{grid-template-columns:minmax(0,1fr)} #homepage #contact .contact-row{display:flex;flex-direction:column;gap:28px} #contact .contact-row>.email{max-width:100%;overflow-wrap:anywhere} #contact .contact-ending{padding-left:6%;gap:20px} } @media(max-width:1100px) and (max-height:600px){#home .hero-pillars .hero-pillar-chaos{margin-top:.35em}} /* Lab 16: restore the hero alignment; tighten the closing composition. */ #home .hero-pillars .hero-pillar-chaos{margin-top:0} #homepage #contact .contact-row{display:grid;grid-template-columns:minmax(0,1fr);align-items:start;gap:32px;margin-top:44px;width:100%;max-width:none} #contact .contact-row>.email{grid-column:1;justify-self:start;width:fit-content;max-width:100%;font-size:clamp(20px,2.5vw,40px);line-height:1.3;overflow-wrap:anywhere} #contact .contact-ending{grid-column:1;padding-left:0;width:100%;max-width:none;display:flex;justify-content:space-between;align-items:flex-end;gap:48px} #homepage #contact .contact-ending p{flex:0 1 58ch;width:auto;max-width:58ch;margin:0;font-size:16px;line-height:1.8} #contact .contact-ending .section-back-to-top{margin-left:auto;flex:0 0 64px} @media(min-width:1101px){ :root{--page-gutter:max(104px,calc((100% - 1760px)/2))} header.compact-header{left:24px;max-width:calc(100vw - 48px)} } @media(min-width:761px){#work #banners{column-gap:14px}} @media(max-width:760px){ #homepage #contact .contact-row{gap:26px;margin-top:34px} #contact .contact-ending{padding-left:0;gap:24px} #homepage #contact .contact-ending p{font-size:15px;line-height:1.75} #work #banners{column-gap:0} } /* Final return bar: fill grows from the centre, then exits at both edges. */ .end-top-bar{position:relative;display:grid;place-items:center;width:100%;height:64px;min-height:48px;margin:0;padding:0;overflow:hidden;border:0;border-radius:0;background:#000;color:#fff;cursor:pointer;touch-action:manipulation;isolation:isolate} .end-bar-fill{position:absolute;top:0;bottom:0;width:50.1%;background:var(--accent);pointer-events:none;transform:translateX(0) scaleX(0)} .end-bar-fill.is-left{left:0;transform-origin:right center} .end-bar-fill.is-right{right:0;transform-origin:left center} .end-top-bar.is-active .end-bar-fill{transform:translateX(0) scaleX(1);transition:transform .45s cubic-bezier(.22,.61,.36,1)} .end-top-bar.is-leaving .end-bar-fill{transition:transform .45s cubic-bezier(.4,0,.6,1)} .end-top-bar.is-leaving .is-left{transform:translateX(-102%) scaleX(1)} .end-top-bar.is-leaving .is-right{transform:translateX(102%) scaleX(1)} .end-bar-arrow{position:relative;z-index:1;display:block;width:32px;height:32px;color:#fff;transition:color .15s} .end-top-bar.is-active .end-bar-arrow{color:#000;transition-delay:.06s} .end-bar-arrow svg{display:block;width:100%;height:100%} .end-top-bar:focus-visible{outline:3px solid #000;outline-offset:-7px} @media(max-width:760px){.end-top-bar{height:56px}.end-bar-arrow{width:28px;height:28px}} @media(prefers-reduced-motion:reduce){.end-top-bar .end-bar-fill,.end-bar-arrow{transition:none!important}} /* Keep the invitation beside the email on larger screens. */ @media(min-width:1001px){ #homepage #contact .contact-row{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);column-gap:clamp(32px,5vw,88px);align-items:start} #contact .contact-row>.email{grid-column:1;font-size:clamp(22px,2.35vw,38px)} #contact .contact-ending{grid-column:2;padding-top:4px;align-items:flex-start} #homepage #contact .contact-ending p{width:100%;max-width:none;flex:1 1 auto} } footer .social-links .intro-replay{opacity:.55;transition:opacity .2s,color .2s,border-color .2s} footer .social-links .intro-replay:hover,footer .social-links .intro-replay:focus-visible{opacity:1;color:var(--accent);border-color:var(--accent)} @media(max-width:760px){footer .social-links{flex-wrap:wrap;max-width:100%}} /* Contact invitation stays close to the email rather than at the far edge. */ @media(min-width:1001px){ #homepage #contact .contact-row{grid-template-columns:max-content minmax(0,440px);justify-content:start;column-gap:clamp(24px,2.6vw,44px)} #contact .contact-ending{justify-content:flex-start} #homepage #contact .contact-ending p{text-align:left} } footer .social-links .intro-replay:hover,footer .social-links .intro-replay:focus-visible{background:var(--accent);color:#111211;border-color:var(--accent);opacity:1} #stats .stat:has([data-counter="clients"]):focus-visible{outline:1px solid var(--accent);outline-offset:10px} /* A brief phrase introduces the seven-question entry experiment. */ .moon-question-lead{position:absolute;inset:0;z-index:6;display:flex;align-items:center;justify-content:center;margin:0;padding:24px;text-align:center;color:#111211;font:400 clamp(28px,5vw,80px)/1.08 StudioWide,Arial,sans-serif;letter-spacing:-.025em;text-wrap:balance;pointer-events:none} .moon-question-lead[hidden]{display:none} @media(orientation:landscape) and (max-height:600px){.moon-quiz{padding:12px 64px}.moon-quiz h2{font-size:clamp(22px,4vw,44px);margin-bottom:16px}.moon-quiz-eyebrow{margin-bottom:12px}.moon-answers{gap:10px}.moon-answers button{min-height:44px;padding:10px 18px;width:auto}.moon-question-lead{font-size:clamp(24px,5vw,52px)}} /* Reserve classic-scrollbar width while intro/gallery overlays lock page scrolling. */ html{scrollbar-gutter:stable} /* Compact touch-landscape question layout; leave an explicit lane for the moon. */ @media(orientation:landscape) and (max-height:540px) and (pointer:coarse){ .moon-quiz{padding:58px max(32px,env(safe-area-inset-left),env(safe-area-inset-right)) 14px;justify-content:center;gap:0;animation:moon-question-arrive .22s ease-out both} .moon-quiz-eyebrow{font-size:10px;line-height:1.2;letter-spacing:.14em;margin:0 0 10px} .moon-quiz h2{font-size:clamp(20px,8.5svh,32px);line-height:1.12;max-width:min(88vw,900px);margin:0 0 14px} .moon-answers{gap:10px;max-width:100%;flex-wrap:nowrap} .moon-answers button{width:auto;max-width:none;min-height:40px;padding:8px 18px;font-size:12px;line-height:1.2} .moon-question-lead{font-size:clamp(22px,9svh,34px);padding:24px 40px} .moon-read-prompt{bottom:max(20px,env(safe-area-inset-bottom));padding:10px 16px;font-size:12px;min-height:40px} .moon-intro-skip{bottom:max(18px,env(safe-area-inset-bottom));right:max(20px,env(safe-area-inset-right));height:40px;font-size:12px} } @keyframes moon-question-arrive{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}} @media(prefers-reduced-motion:reduce){.moon-quiz{animation:none}} /* Lemon Milk is shared by all navigation, independent of the display-font comparison. */ @font-face{font-family:LemonMilkMenu;src:url('https://cdn.prod.website-files.com/6ace877c1c1df34e33b7760b/6af549216a611ebb0cc7b872_bm-runtime-lemon-milk-bold.woff') format('woff');font-style:normal;font-weight:400;font-display:swap} .compact-header #nav>a,.chapter-menu .chapter-label{font-family:LemonMilkMenu,StudioWide,Arial,sans-serif;font-weight:400} .compact-header #nav>a{font-size:12px;letter-spacing:.01em;text-transform:uppercase} /* Avoid accidental text highlighting during clicks, deck drags and touch gestures. */ body,body *,body *::before,body *::after{-webkit-user-select:none!important;user-select:none!important} body input,body textarea,body [contenteditable]:not([contenteditable="false"]),body [contenteditable]:not([contenteditable="false"]) *{-webkit-user-select:text!important;user-select:text!important} body img{-webkit-user-drag:none} /* Programmatically focused headings are reading targets, not boxed controls. */ h1[tabindex="-1"]:focus,h2[tabindex="-1"]:focus{outline:none} /* gallery-b.css */ /* Gallery B: stable image layers with a composited expansion mask. */ #gallery-b{position:fixed;inset:auto;top:var(--viewer-vtop,0px);left:var(--viewer-vleft,0px);width:var(--viewer-vw,100vw);height:var(--viewer-vh,100dvh);max-width:none;max-height:none;margin:0;padding:0;border:0;border-radius:0;background:transparent;color:#eeeee7;overflow:hidden;overscroll-behavior:contain;box-shadow:none} #gallery-b[open]{display:grid;grid-template-rows:minmax(0,1fr) auto} #gallery-b::backdrop{background:#000c;backdrop-filter:blur(1px)} #gallery-b *{box-sizing:border-box} #gallery-b .fb-header{position:absolute;z-index:8;top:calc(16px + env(safe-area-inset-top));right:max(20px,env(safe-area-inset-right))} #gallery-b .fb-heading{min-width:0;text-align:center;width:min(calc(100% - 320px),800px)} #gallery-b .fb-client{margin:0 0 5px;font:10px/1.3 Arial;letter-spacing:.15em;text-transform:uppercase;color:#afb6aa} #gallery-b .fb-title{margin:0;font:400 clamp(15px,1.7vw,24px)/1.15 StudioWide,Arial;letter-spacing:-.025em;text-transform:uppercase;overflow-wrap:anywhere} #gallery-b .fb-close{display:grid;place-items:center;width:44px;height:44px;padding:11px;background:#0008;border:1px solid #ffffff40;border-radius:50%;color:#eeeee7;touch-action:manipulation} #gallery-b svg{width:20px;height:20px;display:block;flex-shrink:0} #gallery-b button:hover{color:var(--accent);border-color:var(--accent)} #gallery-b button:focus-visible,#gallery-b a:focus-visible{outline:2px solid var(--accent);outline-offset:4px} #gallery-b .fb-stage{position:relative;min-height:0;overflow:hidden;touch-action:pan-y pinch-zoom;--fb-drag:0px} #gallery-b .fb-card{position:absolute;left:50%;top:50%;display:block;width:var(--fb-card-w,180px);height:var(--fb-card-h,400px);min-width:0;min-height:0;margin:0;padding:0;border:0;border-radius:0;overflow:hidden;clip-path:polygon(16% 0,94% 0,100% 4.5%,84% 100%,6% 100%,0 95.5%);background:#000;transform:translate(-50%,-50%) translate(calc(var(--fb-x,0px) + var(--fb-drag)),16px);opacity:var(--fb-fade,1);filter:brightness(.72);transition:transform .62s cubic-bezier(.22,.7,.2,1),clip-path .62s cubic-bezier(.22,.7,.2,1),opacity .35s,filter .3s;touch-action:pan-y pinch-zoom;backface-visibility:hidden} #gallery-b .fb-thumb{position:absolute;left:50%;top:50%;display:block;width:100%;height:100%;transform:translate(-50%,-50%);padding:1px;background:#69715e;clip-path:polygon(16% 0,94% 0,100% 4.5%,84% 100%,6% 100%,0 95.5%);transition:opacity .3s ease} #gallery-b .fb-image-bed{display:block;width:100%;height:100%;background:#000;clip-path:polygon(16% 0,94% 0,100% 4.5%,84% 100%,6% 100%,0 95.5%)} #gallery-b .fb-card img{display:block;width:100%;height:100%;max-width:none;max-height:none;min-height:0;margin:0;object-fit:cover;pointer-events:none;user-select:none;-webkit-user-drag:none;opacity:0;transition:opacity .18s} #gallery-b .fb-card img.is-loaded{opacity:1} #gallery-b .fb-card.is-center{width:var(--fb-canvas-w);height:var(--fb-canvas-h);clip-path:var(--fb-strip-shape);filter:none;opacity:1;z-index:3;will-change:transform,clip-path;background:#000} #gallery-b .fb-card.is-center .fb-thumb{width:var(--fb-strip-w);height:var(--fb-strip-h);padding:3px;background:var(--accent)} #gallery-b .fb-card .fb-full-image{position:absolute;left:50%;top:50%;width:var(--fb-full-w);height:var(--fb-full-h);transform:translate(-50%,-50%);object-fit:contain;opacity:0;visibility:hidden;transition:opacity .32s ease,visibility .32s} #gallery-b .fb-card:focus-visible{outline:0} #gallery-b.is-expanded .fb-card:not(.is-center){transform:translate(-50%,-50%) translate(var(--fb-out),16px);pointer-events:none;opacity:0} #gallery-b.is-expanded .fb-card.is-center{clip-path:var(--fb-full-shape);transform:translate(-50%,-50%) translate(var(--fb-drag),var(--fb-full-y))} #gallery-b.is-expanded .fb-card.is-center .fb-thumb{opacity:0} #gallery-b .fb-card .fb-full-image.is-loaded{opacity:0} #gallery-b.is-expanded .fb-card .fb-full-image{visibility:visible} #gallery-b.is-expanded .fb-card .fb-full-image.is-loaded{opacity:1} #gallery-b .fb-meta{position:absolute;z-index:4;left:50%;top:var(--fb-meta-top,15%);width:var(--fb-full-w,400px);padding:12px 16px;background:#050505;color:#eeeee7;transform:translate(-50%,-6px);opacity:0;pointer-events:none;transition:opacity .22s,transform .35s;max-height:128px;overflow:auto;overscroll-behavior:contain} #gallery-b.is-expanded .fb-meta{opacity:1;pointer-events:auto;transform:translate(-50%,0);transition-delay:.3s} #gallery-b .fb-art-title{margin:0 0 5px;font:12px/1.35 Arial;overflow-wrap:anywhere} #gallery-b .fb-credit{display:flex;align-items:center;gap:6px 14px;flex-wrap:wrap;font:10px/1.5 Arial;color:#a7aaa4} #gallery-b .fb-source{color:var(--accent)} #gallery-b .fb-footer{position:relative;display:flex;align-items:center;justify-content:center;min-height:102px;padding:12px 20px calc(18px + env(safe-area-inset-bottom));background:transparent} #gallery-b .fb-subline{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:9px;font:10px/1.4 Arial;color:#afb6aa} #gallery-b .fb-count{font-variant-numeric:tabular-nums;white-space:nowrap} #gallery-b .fb-return{position:absolute;right:24px;bottom:calc(20px + env(safe-area-inset-bottom));display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 14px;border:1px solid #ffffff40;background:#0008;color:#eeeee7;font:12px/1.3 Arial;touch-action:manipulation} #gallery-b .fb-prev,#gallery-b .fb-next{position:absolute;z-index:2;top:60px;bottom:12px;display:flex;align-items:center;justify-content:center;width:max(44px,calc((100% - var(--fb-full-w,70%)) / 2 - 8px));padding:0;border:0;background:transparent;color:#b4bcaa;touch-action:manipulation} #gallery-b .fb-prev{left:0}#gallery-b .fb-next{right:0} #gallery-b .fb-prev svg,#gallery-b .fb-next svg{width:24px;height:24px;opacity:.5;transition:opacity .2s} #gallery-b .fb-prev:hover svg,#gallery-b .fb-next:hover svg{opacity:1} #gallery-b button:disabled{opacity:.2;cursor:default} #gallery-b.is-dragging .fb-card{transition:none} #gallery-b [hidden]{display:none!important} @media(max-width:600px){#gallery-b .fb-heading{width:100%}#gallery-b .fb-title{font-size:14px}#gallery-b .fb-client{font-size:9px}#gallery-b .fb-meta{padding:9px 12px;max-height:124px}#gallery-b .fb-art-title{font-size:11px}#gallery-b .fb-credit{font-size:9px}#gallery-b .fb-footer{min-height:134px;padding:10px 20px calc(58px + env(safe-area-inset-bottom))}#gallery-b .fb-return{right:16px;bottom:calc(8px + env(safe-area-inset-bottom));font-size:11px;padding:8px 12px}#gallery-b .fb-subline{gap:8px;font-size:9px}} @media(orientation:landscape) and (max-height:600px){#gallery-b .fb-header{top:8px}#gallery-b .fb-client{display:none}#gallery-b .fb-title{font-size:13px}#gallery-b .fb-footer{min-height:72px;padding:6px 160px calc(6px + env(safe-area-inset-bottom))}#gallery-b .fb-heading{width:100%}#gallery-b .fb-meta{padding:6px 10px;max-height:72px}#gallery-b .fb-art-title{font-size:10px;margin-bottom:3px}#gallery-b .fb-credit{font-size:9px}#gallery-b .fb-hint{display:none}#gallery-b .fb-return{bottom:calc(10px + env(safe-area-inset-bottom))}#gallery-b .fb-prev,#gallery-b .fb-next{top:44px}} @media(prefers-reduced-motion:reduce){#gallery-b .fb-card,#gallery-b .fb-meta,#gallery-b .fb-thumb,#gallery-b .fb-card img{transition:none!important}#gallery-b.is-expanded .fb-meta{transition-delay:0s}} /* Keep the album label in an explicit, visible bottom row. */ #gallery-b .fb-stage{grid-row:1;min-width:0} #gallery-b .fb-footer{grid-row:2;width:100%;z-index:5;align-self:end} #gallery-b .fb-heading{display:block;visibility:visible;opacity:1;flex:0 0 auto} #gallery-b .fb-title{display:block!important;visibility:visible!important;opacity:1;color:#eeeee7;max-width:100%} #gallery-b .fb-prev,#gallery-b .fb-next{top:20%;bottom:20%} @media(max-width:600px){#gallery-b .fb-heading{flex:0 1 100%}} /* Detail zoom is bounded inside the existing image frame. */ #gallery-b .fb-card .fb-full-image{transform:translate(-50%,-50%) translate(var(--fb-pan-x,0px),var(--fb-pan-y,0px)) scale(var(--fb-zoom,1));transform-origin:center} #gallery-b .fb-loader{position:absolute;z-index:5;left:50%;top:50%;width:64px;height:64px;transform:translate(-50%,-50%);background:url('https://cdn.prod.website-files.com/6ace877c1c1df34e33b7760b/6af5494933b08cae3685498a_bm-runtime-studio-intro-logo-white.png') center/contain no-repeat;opacity:0;visibility:hidden;pointer-events:none} #gallery-b.is-expanded.is-image-loading .fb-loader{opacity:.85;visibility:visible} #gallery-b:not(.is-expanded) .fb-card{cursor:grab} #gallery-b.is-dragging:not(.is-expanded) .fb-card{cursor:grabbing} #gallery-b.is-zoomed .fb-card.is-center{cursor:grab;touch-action:pinch-zoom} #gallery-b.is-panning .fb-card.is-center{cursor:grabbing} #gallery-b.is-expanded.is-image-loading .fb-full-image{opacity:0!important;transition:none} /* iPhone detail layout: metadata cannot recursively shrink the artwork. */ #gallery-b .fb-meta{width:var(--fb-meta-w,80%);max-height:76px;overflow:hidden} #gallery-b .fb-art-title{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:normal} #gallery-b.is-expanded .fb-stage,#gallery-b.is-expanded .fb-card,#gallery-b.is-zoomed .fb-card.is-center{touch-action:none} @media(pointer:coarse){#gallery-b .fb-stage,#gallery-b .fb-card{touch-action:none}#gallery-b .fb-close{width:40px;height:40px}#gallery-b .fb-hint{font-size:10px}#gallery-b .fb-return{min-height:40px}} #gallery-b.is-compact .fb-footer{min-height:42px;padding:5px 140px 5px 60px} #gallery-b.is-compact .fb-title{font:400 11px/1.2 Arial;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #gallery-b.is-compact .fb-client,#gallery-b.is-compact .fb-hint,#gallery-b.is-compact .fb-credit{display:none} #gallery-b.is-compact .fb-subline{margin-top:3px;font-size:10px} #gallery-b.is-compact .fb-meta{max-height:30px;padding:6px 10px} #gallery-b.is-compact .fb-art-title{font:11px/18px Arial;display:block;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;margin:0} #gallery-b.is-compact .fb-return{bottom:4px;right:max(12px,env(safe-area-inset-right));padding:6px 10px;font-size:11px;min-height:34px} #gallery-b.is-compact .fb-header{top:6px;right:max(12px,env(safe-area-inset-right))} /* Keep iOS gestures inside this modal; the document remains untouched. */ #gallery-b{touch-action:none} #gallery-b .fb-meta{touch-action:manipulation} /* Restore the even citron rim. */ #gallery-b .fb-card.is-center .fb-thumb{padding:3px} /* Fine-pointer desktop: one caption aligned to the artwork's actual edges. */ #gallery-b .fb-desktop-meta{display:none} @media(min-width:761px) and (pointer:fine){ #gallery-b.has-desktop-meta .fb-meta{width:var(--fb-full-w);max-height:96px;overflow:auto;padding:12px 14px;transform:translate(-50%,-100%) translateY(-6px)} #gallery-b.has-desktop-meta.is-expanded .fb-meta{transform:translate(-50%,-100%)} #gallery-b.has-desktop-meta .fb-meta>.fb-art-title,#gallery-b.has-desktop-meta .fb-meta>.fb-credit{display:none} #gallery-b.has-desktop-meta .fb-desktop-meta{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:12px;align-items:center;font:12px/1.4 Arial,sans-serif} #gallery-b .fb-art-info{min-width:0;text-align:left} #gallery-b .fb-desktop-title{margin:0;color:#eeeee7;overflow-wrap:anywhere} #gallery-b .fb-description{margin:4px 0 0;color:#a7aaa4;font-size:11px;overflow-wrap:anywhere} #gallery-b .fb-artists{min-width:0;text-align:right;border-left:1px solid #ffffff40;padding-left:12px;overflow-wrap:anywhere} #gallery-b .fb-artist-label{color:#eeeee7} #gallery-b .fb-artist-name{color:var(--accent);text-decoration:none} #gallery-b .fb-artist-name:hover{text-decoration:underline} } /* Mobile viewing pass: explicit controls, quiet metadata, image-first sizing. */ #gallery-b .fb-details{display:none} @media(pointer:coarse){ #gallery-b.is-touch-viewer .fb-footer{display:grid;grid-template-columns:1fr auto;gap:8px 12px;align-items:center;min-height:88px;padding:8px max(16px,env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));background:#080908e8} #gallery-b.is-touch-viewer .fb-heading{grid-column:1/-1;width:100%;min-width:0} #gallery-b.is-touch-viewer .fb-title{font:400 12px/1.35 Arial;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #gallery-b.is-touch-viewer .fb-client,#gallery-b.is-touch-viewer .fb-hint{display:none} #gallery-b.is-touch-viewer .fb-subline{margin-top:4px;font-size:11px} #gallery-b.is-touch-viewer .fb-return,#gallery-b.is-touch-viewer .fb-details{position:static;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:8px 12px;border:1px solid #ffffff40;background:#080908;color:#eeeee7;font:12px/1.2 Arial;touch-action:manipulation} #gallery-b.is-touch-viewer .fb-details{justify-self:start} #gallery-b.is-touch-viewer .fb-return{justify-self:end} #gallery-b.is-touch-viewer:not(.is-expanded) .fb-heading{grid-row:1} #gallery-b.is-touch-viewer:not(.is-expanded) .fb-footer{min-height:58px} #gallery-b.is-touch-viewer .fb-header{top:max(8px,env(safe-area-inset-top));right:max(8px,env(safe-area-inset-right))} #gallery-b.is-touch-viewer .fb-close{width:44px;height:44px} #gallery-b.is-touch-viewer .fb-prev,#gallery-b.is-touch-viewer .fb-next{top:calc(50% - 36px);bottom:auto;height:72px;min-width:44px;width:max(44px,calc((100% - var(--fb-full-w,70%))/2));z-index:6} #gallery-b.is-touch-viewer .fb-prev svg,#gallery-b.is-touch-viewer .fb-next svg{opacity:.9} #gallery-b.is-touch-viewer.is-zoomed .fb-prev,#gallery-b.is-touch-viewer.is-zoomed .fb-next{opacity:0;pointer-events:none} #gallery-b.is-touch-viewer .fb-meta{display:none;top:56px;left:50%;width:min(560px,calc(100% - 104px));max-height:calc(100% - 72px);padding:12px 14px;transform:translateX(-50%);background:#080908f5;overflow:auto;transition:none} #gallery-b.is-touch-viewer.is-expanded.has-details-open .fb-meta{display:block;opacity:1;transform:translateX(-50%)} #gallery-b.is-touch-viewer .fb-art-title{display:block;font:12px/1.5 Arial;white-space:normal;overflow-wrap:anywhere;margin-bottom:6px} #gallery-b.is-touch-viewer .fb-credit{display:flex;font:11px/1.5 Arial} } @media(pointer:coarse) and (orientation:landscape) and (max-height:600px){ #gallery-b.is-touch-viewer .fb-footer{grid-template-columns:auto minmax(0,1fr) auto;gap:12px;min-height:48px;padding-top:2px;padding-bottom:max(2px,env(safe-area-inset-bottom))} #gallery-b.is-touch-viewer .fb-heading{grid-column:2;grid-row:1;width:100%;min-width:0} #gallery-b.is-touch-viewer .fb-details{grid-column:1;grid-row:1} #gallery-b.is-touch-viewer .fb-return{grid-column:3;grid-row:1} #gallery-b.is-touch-viewer .fb-title{font-size:11px} #gallery-b.is-touch-viewer .fb-subline{margin-top:2px} #gallery-b.is-touch-viewer:not(.is-expanded) .fb-footer{min-height:42px} } /* Safe-area-centred touch canvas; metadata occupies its own footer row. */ @media(pointer:coarse){ #gallery-b.is-touch-viewer{left:env(safe-area-inset-left,0px);right:auto;width:calc(100vw - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px));-webkit-text-size-adjust:100%;text-size-adjust:100%} #gallery-b.is-touch-viewer .fb-meta,#gallery-b.is-touch-viewer.is-expanded.has-details-open .fb-meta{position:static;grid-column:1/-1;grid-row:3;left:auto;top:auto;width:100%;max-height:90px;min-width:0;margin:0;padding:8px 4px 2px;transform:none;box-shadow:none;border-top:1px solid #ffffff24;background:transparent;overflow:auto;text-align:left} #gallery-b.is-touch-viewer .fb-prev,#gallery-b.is-touch-viewer .fb-next{width:48px} } @media(pointer:coarse) and (orientation:landscape) and (max-height:600px){ #gallery-b.is-touch-viewer .fb-meta,#gallery-b.is-touch-viewer.is-expanded.has-details-open .fb-meta{grid-row:2;max-height:62px;padding-top:5px;padding-bottom:4px} #gallery-b.is-touch-viewer .fb-art-title{font-size:11px;line-height:1.35;margin-bottom:3px} #gallery-b.is-touch-viewer .fb-credit{font-size:10px;line-height:1.3} #gallery-b.is-touch-viewer .fb-footer{padding-left:8px;padding-right:8px} } /* Desktop artwork captions: quieter neutral text, accent attribution preserved. */ @media(min-width:761px) and (pointer:fine){ #gallery-b.has-desktop-meta .fb-desktop-meta{font-size:9.2px;color:#ccc} #gallery-b.has-desktop-meta .fb-desktop-title{font-size:10.4px;line-height:1.4;color:#ccc} #gallery-b.has-desktop-meta .fb-description{font-size:8.6px;line-height:1.4;color:#b8b8b8} #gallery-b.has-desktop-meta .fb-artist-label{color:#ccc} #gallery-b.has-desktop-meta .fb-artist-name{color:var(--accent)} } /* hero-opening.css */ /* v3 opening scene: the existing hero is the final composition. */ .hero-opening-scene{position:relative;overflow-anchor:none} .hero-opening-moon{display:none} html.hero-opening-on .hero-opening-scene{height:var(--opening-scene-height)} html.hero-opening-on #home.hero{position:sticky;top:27px;height:calc(100svh - 27px);min-height:0;max-height:none;background:#000;isolation:isolate} html.hero-opening-on #home>.hero-content{height:100%;min-height:0;padding-top:clamp(150px,24svh,260px);padding-bottom:70px;grid-template-rows:auto auto minmax(0,1fr);row-gap:12px} html.hero-opening-on #home h1.hero-pillars{font-size:clamp(43.2px,min(6.24vw,10.8svh),117.6px);line-height:.94} html.hero-opening-on #home .hero-pillar>span{will-change:transform;transform:translate3d(var(--opening-x,0px),var(--opening-y,0px),0) scale(var(--opening-type-scale,1))} html.hero-opening-on #home .hero-pillar-world>span{transform-origin:center} html.hero-opening-on #home .hero-pillar-chaos>span{transform-origin:center} html.hero-opening-on #home::after{top:0;opacity:var(--opening-art,0)} html.hero-opening-on #home>img{top:0;bottom:0;height:100%;mask-image:none;-webkit-mask-image:none;opacity:var(--opening-art,0);transform:scale(var(--opening-art-scale,1.035));transform-origin:center} html.hero-opening-on #home>.hero-content>.eyebrow,html.hero-opening-on #home .hero-foot{opacity:var(--opening-copy,0);transform:translateY(var(--opening-copy-y,12px));visibility:var(--opening-copy-visibility,hidden)} html.hero-opening-on #home .hero-support{align-self:start;margin-left:0;padding-top:12px;overflow:hidden;opacity:var(--opening-copy,0);visibility:var(--opening-copy-visibility,hidden)} html.hero-opening-on #home .hero-support p{transform:translateY(var(--opening-support-drop,-108%))} html.hero-opening-on .hero-opening-moon{display:grid;place-items:center;position:fixed;z-index:22;left:var(--opening-moon-left,50%);top:var(--opening-moon-top,50%);width:var(--opening-moon-size,96px);height:var(--opening-moon-size,96px);padding:0;border:0;border-radius:50%;background:#000;transform:translate(-50%,-50%) translate3d(var(--opening-moon-dx,0px),var(--opening-moon-dy,0px),0) scale(var(--opening-moon-scale,1));opacity:var(--opening-moon,1);visibility:var(--opening-moon-visibility,visible);cursor:pointer} body:has(>.moon-intro) .hero-opening-moon{visibility:hidden!important} .hero-opening-moon img{display:block;width:84%;height:84%;object-fit:contain;animation:none;transform:rotate(var(--opening-start-angle,0deg));pointer-events:none} html.hero-opening-on header.compact-header{opacity:var(--opening-menu,0);pointer-events:var(--opening-menu-events,none)} html.hero-opening-on header.compact-header:focus-within{opacity:1;pointer-events:auto} @media(max-width:1000px){ html.hero-opening-on #home h1.hero-pillars{font-size:clamp(36px,min(10.08vw,9.6svh),76.8px);line-height:.94} html.hero-opening-on #home>.hero-content{padding-top:clamp(140px,calc(100svh - 430px),min(36svh,340px));padding-bottom:70px;row-gap:12px} } @media(max-height:540px) and (orientation:landscape){ html.hero-opening-on #home>.hero-content{padding-top:clamp(64px,20svh,100px);padding-bottom:32px;row-gap:4px} html.hero-opening-on #home h1.hero-pillars{font-size:clamp(20px,6svh,32px);line-height:.92} html.hero-opening-on #home .hero-support{grid-column:1/-1;padding-top:8px;align-self:start} html.hero-opening-on #homepage #home .hero-support p{font-size:11px;line-height:1.3} html.hero-opening-on #home .hero-foot{bottom:12px;font-size:9px} html.hero-opening-on #home>.hero-content>.eyebrow{font-size:9px} } @media(prefers-reduced-motion:reduce){ html.hero-opening-on #home .hero-pillar>span,html.hero-opening-on #home>img{transform:none!important} .hero-opening-moon{display:none!important} } /* The reply begins behind the centred first phrase and uncovers per line. */ html.hero-opening-on #home .hero-pillar-world{position:relative;z-index:2} html.hero-opening-on #home .hero-pillar-chaos{position:relative;z-index:1} html.hero-opening-on #home .hero-pillar-chaos>span{opacity:var(--opening-reply,0);clip-path:var(--opening-reply-clip,inset(-.12em calc(var(--opening-reply-mask,100%) - .12em) -.12em -.12em))} html.hero-opening-on #home::before{content:none} html.hero-opening-on #home .hero-pillar-world>span:last-child{color:color-mix(in srgb,var(--accent) var(--opening-world-accent,100%),var(--ink))} @media(min-width:1001px) and (max-height:700px){html.hero-opening-on #home>.hero-content{padding-top:clamp(72px,16svh,112px);padding-bottom:60px}} /* Editorial hero rhythm: a compact headline, then a measured copy block. */ html.hero-opening-on #home h1.hero-pillars{line-height:.91} html.hero-opening-on #home>.hero-content{row-gap:0} html.hero-opening-on #home>.hero-content>.eyebrow{margin-bottom:24px;line-height:1.5} html.hero-opening-on #home .hero-support{padding-top:28px;max-width:32rem} html.hero-opening-on #homepage #home .hero-support p{line-height:1.55;margin:0} html.hero-opening-on #home .hero-support strong{display:block;line-height:1.35;margin:0 0 12px} html.hero-opening-on #home .hero-support strong+br{display:none} @media(max-width:1000px){ html.hero-opening-on #home>.hero-content>.eyebrow{margin-bottom:20px;letter-spacing:.17em} html.hero-opening-on #home .hero-support{padding-top:24px;max-width:42ch} html.hero-opening-on #home .hero-support strong{margin-bottom:10px} } @media(max-height:540px) and (orientation:landscape){ html.hero-opening-on #home h1.hero-pillars{line-height:.92} html.hero-opening-on #home>.hero-content>.eyebrow{margin-bottom:10px} html.hero-opening-on #home .hero-support{padding-top:10px;max-width:70ch} html.hero-opening-on #homepage #home .hero-support p{line-height:1.35} html.hero-opening-on #home .hero-support strong{margin-bottom:4px} } /* Fade the completed hero into the interlude as its sticky scene releases. */ html.hero-opening-on .hero-opening-scene{background:#000} html.hero-opening-on #home.hero{opacity:var(--opening-out,1)} /* Actual-size type at the desktop opening avoids upscaled compositor text. */ .hero-opening-crisp{display:none} @media(min-width:1001px), (pointer:fine){ html.hero-opening-on .hero-opening-crisp{display:block;position:absolute;inset:0;z-index:3;pointer-events:none} html.hero-opening-on .hero-opening-crisp[hidden]{display:none} .hero-opening-crisp>span{position:absolute;display:block;white-space:nowrap;text-align:center;font-style:normal;text-transform:uppercase} html.hero-opening-on #home .hero-pillar-world>span{opacity:var(--opening-original,1)} html.hero-opening-on #home .hero-pillar>span{will-change:var(--opening-layer,auto);transform:translate(var(--opening-x,0px),var(--opening-y,0px)) scale(var(--opening-type-scale,1))} } /* Lemon Milk: optically inset supporting text from the large display edge. */ @media(min-width:1001px) and (pointer:fine){ html[data-display-font="lemon"] #home>.hero-content>.eyebrow, html[data-display-font="lemon"].hero-opening-on #home .hero-support, html[data-display-font="lemon"] #home .hero-support{margin-left:3px} } /* Wide desktop navigation follows the capped content rather than the screen edge. */ @media(min-width:1101px) and (pointer:fine){ header.compact-header,header.compact-header.scrolled{left:max(24px,calc((100vw - 1760px)/2 - 80px));right:auto} } /* Keep the natural hero origin and sticky origin identical at scroll zero. */ html.hero-opening-on body{padding-top:27px} /* Opening hero accepts a click anywhere; the moon has no decorative pulse ring. */ @media(min-width:761px) and (max-width:1100px), (pointer:coarse) and (min-width:761px){:root{--moon-ring-size:99%;--moon-ring-width:4px;--moon-ring-gap:-1.5px}} /* Approved phone ring profiles; banner and desktop studies remain pending. */ @media(max-width:760px){:root{--moon-ring-size:92%;--moon-ring-width:2.5px;--moon-ring-gap:1px}} @media(pointer:coarse) and (orientation:landscape) and (max-height:600px){:root{--moon-ring-size:96%;--moon-ring-width:2px;--moon-ring-gap:0px}} /* Approved desktop tuning; touch/tablet profiles retain their own values. */ @media(min-width:1101px) and (pointer:fine){:root{--moon-ring-size:96%;--moon-ring-width:4px;--moon-ring-gap:0px}} /* Resting letters use native text layout after the scaling has ended. */ html.hero-opening-on #home.is-opening-rest .hero-pillar>span{transform:none;will-change:auto} /* Visual guide only: the page itself accepts clicks and scrolling. */ .hero-opening-cue{display:none} html.hero-opening-on .hero-opening-cue{position:fixed;z-index:23;display:flex;align-items:center;justify-content:center;gap:8px;left:50%;top:auto;bottom:max(22px,calc(env(safe-area-inset-bottom,0px) + 12px));transform:translateX(-50%);margin:0;padding:9px 17px;border:1px solid #eeeee766;border-radius:999px;background:#111211d9;color:var(--ink);font:400 12px/16px Arial,Helvetica,sans-serif;letter-spacing:.03em;white-space:nowrap;pointer-events:none} .hero-opening-cue span,.hero-opening-cue svg{animation:hero-guide-breathe 1.8s ease-in-out infinite} .hero-opening-cue svg{width:13px;height:16px;flex:none} @keyframes hero-guide-breathe{0%,100%{opacity:.55}50%{opacity:1}} .hero-opening-cue[hidden]{display:none!important} @media(pointer:coarse) and (orientation:landscape) and (max-height:600px){html.hero-opening-on .hero-opening-cue{bottom:max(12px,calc(env(safe-area-inset-bottom,0px) + 6px));padding:6px 13px;font-size:10px;line-height:14px}} @media(prefers-reduced-motion:reduce){.hero-opening-cue{display:none!important}.hero-opening-cue span,.hero-opening-cue svg{animation:none}} /* Both marks share the same angle during travel; the live menu finishes upright. */ html.hero-moon-live .hero-opening-moon img,html.hero-moon-live header.compact-header .official-menu-badge{animation:none;transform:rotate(var(--opening-spin-angle,0deg))} @media(prefers-reduced-motion:reduce){html.hero-moon-live .hero-opening-moon img,html.hero-moon-live header.compact-header .official-menu-badge{transform:none}} /* Phone portrait: lift the whole resting copy group, retaining its internal rhythm. */ @media(max-width:760px) and (orientation:portrait){ /* Fill Safari's largest canvas without changing document height as its toolbar moves. Keep copy on the stable canvas so toolbar changes do not move the title. */ #home.hero,html.hero-opening-on #home.hero{height:calc(100svh - 27px);height:calc(100lvh - 27px);min-height:calc(100svh - 27px);max-height:none} #home.hero>img,html.hero-opening-on #home.hero>img{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;max-height:none;object-fit:cover;aspect-ratio:auto} html.hero-opening-on #home>.hero-content{height:calc(100svh - 27px)} #home>.hero-content{padding-top:92px} html.hero-opening-on #home>.hero-content{padding-top:calc(clamp(140px,calc(100svh - 430px),min(36svh,340px)) - clamp(24px,5svh,44px))} } /* chapter-menu.css */ /* Five smaller ribbons behind fitted, angled menu masks. */ #homepage .chapter-menu{position:relative;height:calc(521svh + 27px);padding:0;background:#000;overflow:clip;isolation:isolate} .chapter-stage{position:sticky;top:27px;display:grid;grid-template-columns:minmax(0,1fr);place-items:center;min-width:0;width:100%;height:calc(100svh - 27px);padding:30px 0} .chapter-bands{position:absolute;top:50%;left:0;width:100%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;gap:clamp(13px,2.1svh,20px);pointer-events:none} .chapter-ribbon{--band-height:clamp(34px,5.6svh,53px);position:relative;flex:none;width:140vw;height:var(--band-height);background:var(--accent);transform:translate3d(var(--ribbon-entry,0vw),0,0) rotate(-10deg);isolation:isolate;will-change:transform;backface-visibility:hidden} .chapter-menu nav{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);margin:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.1em;font-size:clamp(31.68px,4.1888vw,68.64px);width:max-content;min-width:0;max-width:calc(100% - 32px);padding:0;background:none;opacity:var(--chapter-labels,0);isolation:isolate} .chapter-menu nav::before{content:none} .chapter-menu .chapter-choice{position:relative;display:flex;align-items:center;justify-content:center;flex:none;min-height:0;padding:.04em 0;transform:rotate(-10deg);white-space:nowrap;text-align:center;text-transform:uppercase;background:none;color:var(--ink);font:400 1em/1 StudioWide,Arial,sans-serif;letter-spacing:-.04em} .chapter-label{position:relative;display:block;isolation:isolate;transition:color .2s} .chapter-label::before{content:"";position:absolute;z-index:-1;inset:-.16em -6%;background:#000;pointer-events:none} .chapter-menu .chapter-choice:hover .chapter-label,.chapter-menu .chapter-choice:focus-visible .chapter-label,.chapter-menu .chapter-choice.is-chosen .chapter-label{color:var(--accent)} .chapter-menu .chapter-choice:focus-visible{outline:2px solid var(--accent);outline-offset:6px} .chapter-menu nav:focus-within{opacity:1} .chapter-ribbon-window{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;contain:paint;transform:translateZ(0);backface-visibility:hidden} .chapter-ribbon-track{display:flex;align-items:center;width:max-content;height:100%;color:#10130c;animation:chapter-pan var(--ribbon-duration,50s) linear infinite;animation-play-state:paused;will-change:transform;scale:.75 1;transform-origin:left center} .chapter-ribbon-cycle{display:block;flex:none;padding-right:36px;white-space:nowrap;font:400 calc(var(--band-height)*1.1)/1 Arial,sans-serif;letter-spacing:-.075em;word-spacing:.2em} .chapter-ribbon:nth-child(even) .chapter-ribbon-track{animation-direction:reverse} .chapter-menu.is-visible .chapter-ribbon-track,.chapter-flight .chapter-ribbon-track{animation-play-state:running} @keyframes chapter-pan{to{transform:translateX(-50%)}} .chapter-flight{position:fixed;z-index:90;inset:0;pointer-events:none;overflow:hidden} .chapter-flight::before{content:'';position:absolute;inset:0;background:#000;opacity:1;transition:opacity 1.45s ease} .chapter-flight .chapter-stage{position:absolute} .chapter-flight .chapter-ribbon{transition:transform 1.45s cubic-bezier(.4,0,.6,1);transition-delay:var(--ribbon-leave-delay,0ms)} .chapter-flight nav{transition:opacity .14s ease} .chapter-flight.is-departing::before,.chapter-flight.is-departing nav{opacity:0} .chapter-flight.is-departing .chapter-ribbon{transform:translate3d(var(--ribbon-exit,150vw),0,0) rotate(-10deg)} @media(max-width:760px){ #homepage .chapter-menu{height:calc(457svh + 27px)} .chapter-bands{gap:15px} .chapter-ribbon{--band-height:38px} .chapter-menu nav{font-size:min(35.2px,8.8vw);max-width:calc(100% - 24px)} } @media(orientation:landscape) and (max-height:540px){ .chapter-stage{padding:12px 0} .chapter-bands{gap:9px} .chapter-ribbon{--band-height:clamp(18px,5.6svh,28px)} .chapter-menu nav{font-size:28.16px} } @media(prefers-reduced-motion:reduce){ #homepage .chapter-menu{height:auto;min-height:80svh} .chapter-stage{position:relative;height:80svh;top:0} .chapter-ribbon{transform:rotate(-10deg)!important;will-change:auto} .chapter-menu nav{opacity:1} .chapter-label{transition:none} .chapter-ribbon-track{animation:none!important;will-change:auto} .chapter-flight{display:none} } #chapter-choices+#work{background-image:linear-gradient(#000,transparent 140px)} /* Desktop ribbons gain body; touch layouts keep their existing thickness. */ @media(min-width:1001px) and (pointer:fine){.chapter-ribbon{--band-height:clamp(40.8px,6.72svh,63.6px)}} /* The earlier thickness pass changed bands only: reduce desktop menu 25%. */ @media(min-width:1001px) and (pointer:fine){.chapter-menu nav{font-size:clamp(23.76px,3.1416vw,51.48px)}} @media(min-width:1001px) and (pointer:fine) and (orientation:landscape) and (max-height:540px){.chapter-menu nav{font-size:21.12px}} /* A quiet invitation: one resting link changes colour, never its position. */ .chapter-menu .chapter-label{transition:color 260ms ease} .chapter-menu .chapter-choice.is-invited .chapter-label{color:var(--accent)} @media(prefers-reduced-motion:reduce){.chapter-menu .chapter-label{transition:none}} /* Desktop-only shorter arrival/departure; settled reading interval is retained. */ @media(min-width:1101px) and (pointer:fine) and (prefers-reduced-motion:no-preference){#homepage .chapter-menu{height:calc(476.6svh + 27px)}} /* Tablet landscape: ten percent shorter entry/exit, same reading interval. */ @media(orientation:landscape) and (min-height:601px) and (min-width:761px) and (max-width:1100px) and (prefers-reduced-motion:no-preference), (pointer:coarse) and (orientation:landscape) and (min-height:601px) and (min-width:761px) and (prefers-reduced-motion:no-preference){#homepage .chapter-menu{height:calc(491.4svh + 27px)}} /* Reserve layers only while the interlude is in view or leaving on click. */ .chapter-menu:not(.is-visible):not(.chapter-flight) .chapter-ribbon, .chapter-menu:not(.is-visible):not(.chapter-flight) .chapter-ribbon-track{will-change:auto} /* work-unfold.css */ /* Work opens row by row. Existing crops, diagonal cuts and hover styles remain. */ #work.work-unfold-enabled{overflow:clip} #work #banners{position:relative} #work.work-unfold-enabled .project-banner{translate:var(--work-entry-x,0px) 0} #work .work-art-curtain{position:absolute;z-index:4;inset:0;display:block;background:#000;pointer-events:none;transition:clip-path .4s cubic-bezier(.2,.6,.25,1);clip-path:inset(0 0 0 var(--work-uncover,0%))} #work .is-work-revealing>.work-art-curtain{transition:none} #work [data-work-side="right"]>.work-art-curtain{clip-path:inset(0 var(--work-uncover,0%) 0 0)} #work.work-unfold-enabled .album-row-separator{opacity:var(--work-line,0)} #work.work-unfold-enabled .album-row-separator>i{transform:scaleX(var(--work-line,0));transform-origin:center} #work.work-unfold-enabled .project-banner:focus-visible{translate:0 0} #work .project-banner:focus-visible>.work-art-curtain{display:none} @media(prefers-reduced-motion:reduce){ #work.work-unfold-enabled .project-banner{translate:0 0!important} #work .work-art-curtain{display:none!important;transition:none} #work.work-unfold-enabled .album-row-separator{opacity:1!important} #work.work-unfold-enabled .album-row-separator>i{transform:none!important} } /* A single horizontal monologue ribbon replaces the solid-colour panel. */ #work .work-reveal-band{--work-band-height:clamp(34px,5.6svh,53px);position:absolute;top:50%;left:0;right:0;height:var(--work-band-height);transform:translateY(-50%);overflow:hidden;background:var(--accent);color:#10130c} #work .work-reveal-track{display:flex;align-items:center;width:max-content;height:100%;scale:.75 1;transform-origin:left center;animation:work-reveal-pan 42s linear infinite;animation-play-state:paused} #work .work-reveal-cycle{flex:none;white-space:nowrap;padding-right:36px;font:400 calc(var(--work-band-height)*1.1)/1 Arial,sans-serif;letter-spacing:-.075em;word-spacing:.2em} #work [data-work-side="right"] .work-reveal-track{animation-direction:reverse} #work .is-work-revealing .work-reveal-track{animation-play-state:running} @keyframes work-reveal-pan{to{transform:translateX(-50%)}} @media(max-width:760px){#work .work-reveal-band{--work-band-height:38px}} @media(prefers-reduced-motion:reduce){#work .work-reveal-track{animation:none!important}} /* Selected-accent infill in the existing 30-degree paired-banner gap only. */ #work .album-pair-seam{position:absolute;z-index:0;display:block;background:var(--accent);transform:skewX(-30deg);transform-origin:0 100%;pointer-events:none} #work.work-unfold-enabled .album-pair-seam{opacity:var(--work-line,0)} @media(max-width:760px){#work .album-pair-seam{display:none}} @media(prefers-reduced-motion:reduce){#work .album-pair-seam{opacity:1!important}} /* Finished and offscreen reveal strips need no paint or compositor reservation. */ #work.work-unfold-enabled .project-banner:not(.is-work-revealing)>.work-art-curtain{visibility:hidden} #work .is-work-revealing{will-change:translate} #work .is-work-revealing .work-reveal-track{will-change:transform} /* quiet-reveals.css */ /* Calm section reveals: no pinning, layout shifts or scroll-controlled playback. */ html.quiet-reveals-on [data-quiet="logos"]{clip-path:inset(0 50% 0 50%);transition:clip-path 650ms cubic-bezier(.22,.65,.25,1)} html.quiet-reveals-on [data-quiet="logos"].is-quiet-revealed,html.quiet-reveals-on [data-quiet="logos"]:focus-within{clip-path:inset(0)} html.quiet-reveals-on [data-quiet="service"]{clip-path:polygon(0 0,0 0,0 100%,0 100%);transition:clip-path 680ms cubic-bezier(.22,.65,.25,1) var(--quiet-delay,0ms)} html.quiet-reveals-on [data-quiet="service"].is-quiet-revealed,html.quiet-reveals-on summary:focus-within [data-quiet="service"]{clip-path:polygon(0 0,100% 0,100% 100%,0 100%)} html.quiet-reveals-on #studio[data-quiet="studio"]{position:relative;isolation:isolate} html.quiet-reveals-on #studio[data-quiet="studio"]::before{content:'';position:absolute;inset:0;z-index:5;background:var(--bg);pointer-events:none;clip-path:polygon(0 0,100% 0,100% 100%,0 100%);transition:clip-path 850ms cubic-bezier(.25,.6,.25,1)} html.quiet-reveals-on #studio.is-quiet-revealed::before{clip-path:polygon(110% 0,110% 0,100% 100%,100% 100%)} html.quiet-reveals-on #studio:focus-within::before{display:none} html.quiet-reveals-on [data-quiet="studio-line"]{clip-path:inset(100% 0 0 0);transition:clip-path 540ms cubic-bezier(.22,.65,.25,1) var(--quiet-delay,400ms)} html.quiet-reveals-on [data-quiet="studio-line"].is-quiet-revealed,html.quiet-reveals-on #studio:focus-within [data-quiet="studio-line"]{clip-path:inset(0)} html.quiet-reveals-on [data-quiet="email"]{clip-path:inset(0 100% 0 0);transition:clip-path 550ms cubic-bezier(.22,.65,.25,1)} html.quiet-reveals-on [data-quiet="email"].is-quiet-revealed,html.quiet-reveals-on [data-quiet="email"]:focus-visible{clip-path:inset(0)} @media(max-width:760px){ html.quiet-reveals-on [data-quiet="service"]{transition-duration:500ms;transition-delay:0ms} html.quiet-reveals-on #studio[data-quiet="studio"]::before{clip-path:inset(0);transition-duration:650ms} html.quiet-reveals-on #studio.is-quiet-revealed::before{clip-path:inset(0 0 0 100%)} html.quiet-reveals-on [data-quiet="studio-line"]{transition-duration:400ms} } @media(prefers-reduced-motion:reduce){ html.quiet-reveals-on [data-quiet]{clip-path:none!important;transition:none!important} html.quiet-reveals-on #studio[data-quiet="studio"]::before{display:none!important} } /* mobile-landscape.css */ /* Short touch-landscape viewports only. Desktop and portrait keep their layouts. */ @media(orientation:landscape) and (max-height:540px) and (pointer:coarse){ html{-webkit-text-size-adjust:100%;text-size-adjust:100%} :root{--page-gutter:max(clamp(72px,9vw,104px),env(safe-area-inset-left),env(safe-area-inset-right))} #homepage .section,#homepage .clients,#homepage .testimonials,#homepage .contact{padding-left:var(--page-gutter);padding-right:var(--page-gutter)} #work #banners{width:100%;max-width:100%;margin-left:0;margin-right:0} #homepage{--section-space:clamp(32px,10svh,48px)} #homepage .heading-wrap>h2{font-size:clamp(26px,8svh,40px);line-height:1.02} #homepage #contact .heading-wrap>h2{font-size:clamp(32px,10svh,48px)} #homepage .eyebrow{font-size:10px;letter-spacing:.13em} #homepage #services .services-intro>.lead,#homepage #studio>div:nth-child(2)>p{font-size:13px;line-height:1.55} #homepage .section-top{gap:20px;margin-bottom:24px} #work .section-top>div:first-child>.eyebrow{margin-bottom:12px} #work .filters{margin-bottom:22px;gap:8px} #work .filters button{font-size:12px;padding:8px 14px} #work #banners{--banner-wide-height:clamp(140px,52svh,220px)!important;--banner-half-height:clamp(130px,46svh,190px)!important} #work .project-banner.is-wide,#work .project-banner.is-balanced-wide{height:var(--banner-wide-height);margin-bottom:calc(var(--banner-wide-height)*.3)} #work .project-banner.is-last-row{margin-bottom:0} #work .album-row-separator.after-wide,#work [data-album="critical-role"]+.album-row-separator,#work [data-album="neuroscape"]+.album-row-separator{--row-banner-height:var(--banner-wide-height)} #work .banner-copy h3{font-size:16px} #work .project-banner>.banner-arrow{font-size:22px} #clients .logo-cycle{grid-template-rows:repeat(2,64px);grid-auto-columns:130px;gap:12px 20px} #clients .clients-top{margin-bottom:18px} #clients .logo-note{font-size:11px;line-height:1.5} #clients .logo-hint{font-size:11px} #stats{padding-top:32px;padding-bottom:0} #stats .stats{gap:20px} #stats .stat strong{font-size:clamp(34px,11svh,48px)} #stats .stat>span{font-size:13px} #services .services-intro{gap:20px;margin-bottom:28px} #services .services-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px} #services .service-banner summary{min-height:145px;padding:18px 48px 18px 18px} #services .service-banner-copy{gap:6px} #services .service-banner .service-title{font-size:18px} #services .service-banner .service-teaser{font-size:12px;line-height:1.4} #services .service-banner summary:after{width:28px;height:28px;right:14px;bottom:16px;font-size:22px} #services .service-description{padding:16px 18px} #services .service-description p{font-size:13px;line-height:1.6} #studio{gap:28px} #studio .facts{gap:28px;margin-top:24px} #studio .facts strong{font-size:24px} #studio .team-section{padding-top:24px} #studio .team-toggle,#feedback #toggle-testimonial{font-size:20px} #feedback .testimonial-top{gap:20px} #feedback .testimonial-header-copy{max-width:none} #feedback .testimonial-top .heading-wrap{max-width:none} #contact .contact-row{display:flex;flex-wrap:wrap;align-items:flex-start;gap:18px 28px;margin-top:28px} #contact .email{font-size:clamp(20px,3.8vw,30px);margin:0} #contact .contact-ending{flex:1 1 240px;max-width:42ch;align-items:flex-start} #homepage #contact .contact-ending p{font-size:13px;line-height:1.55;max-width:none} body>footer{padding-left:var(--page-gutter);padding-right:var(--page-gutter)} footer{display:grid;grid-template-columns:1.4fr 1fr auto 1fr;gap:20px;align-items:center;padding-top:24px;padding-bottom:24px;font-size:10px;text-align:left} footer .official-footer-brand,footer .footer-location,footer .social-links,footer .footer-tagline{grid-column:auto;grid-row:auto;width:auto;text-align:left;justify-self:start} footer .official-footer-wordmark{width:90px} footer .social-links{gap:7px} footer .social-links a{width:32px;height:32px} footer .social-links svg{width:15px;height:15px} header.compact-header,header.compact-header.scrolled{left:12px;top:39px;min-height:44px;padding:7px;max-width:calc(100% - 24px)} header.compact-header .official-menu-badge{width:28px;height:28px} header.compact-header.is-open{display:grid;grid-template-columns:28px minmax(0,1fr);align-items:center;max-height:calc(100svh - 60px);overflow:auto;padding:10px 14px;gap:16px;width:max-content} .compact-header.is-open nav{grid-column:2;grid-row:1;flex-direction:row;flex-wrap:wrap;align-items:center;gap:10px 16px;font-size:13px;min-width:0;width:auto;margin:0;padding:0} header.compact-header.is-open .logo-trigger{grid-column:1;grid-row:1;align-self:center;min-width:28px;min-height:28px} .compact-header.is-open nav>a{white-space:nowrap} .compact-header.is-open #nav .menu-accent-swatches{align-self:center;margin:0;padding-left:8px;gap:0} .compact-header.is-open #nav .menu-accent-swatch{width:32px;height:36px} /* Larger resting hero type, closer columns and readable supporting copy. */ html.hero-opening-on #home>.hero-content{width:calc(100% - var(--page-gutter) - var(--page-gutter));margin-inline:auto;padding-inline:0;padding-top:clamp(48px,16svh,72px);padding-bottom:32px;row-gap:0;max-width:1100px} html.hero-opening-on #home .hero-content h1.hero-pillars{font-size:clamp(26px,10svh,44px);line-height:.92;grid-template-columns:max-content max-content;column-gap:clamp(20px,4vw,48px);justify-content:space-between;width:100%} html.hero-opening-on #home .hero-pillar-chaos{margin-top:0} html.hero-opening-on #home>.hero-content>.eyebrow{font-size:9px;letter-spacing:.16em;margin-bottom:10px} html.hero-opening-on #home .hero-support{padding-top:12px;max-width:76ch;grid-column:1/-1;align-self:start} html.hero-opening-on #homepage #home .hero-support p{font-size:12px;line-height:1.45} html.hero-opening-on #home .hero-support strong{display:inline;margin-right:8px} html.hero-opening-on #home .hero-support strong+br{display:none} html.hero-opening-on #home .hero-foot{font-size:9px;bottom:10px;left:var(--page-gutter);right:var(--page-gutter)} /* Give landscape ribbons presence while the five links still fit vertically. */ .chapter-ribbon{--band-height:clamp(28px,9svh,44px)} .chapter-bands{gap:clamp(8px,2.5svh,12px)} .chapter-menu nav{font-size:clamp(28px,8.6svh,36px)} } /* One measured canvas for the opening title and moon, independent of Safari chrome. */ @media(orientation:landscape) and (max-height:540px) and (pointer:coarse){ html.hero-opening-on #home.hero{height:calc(100dvh - 27px)} html.hero-opening-on #home>.hero-content{padding-top:clamp(48px,calc(var(--opening-stable-height,273px)*.16 + 4.32px),72px)} html.hero-opening-on #home .hero-content h1.hero-pillars{font-size:clamp(26px,calc(var(--opening-stable-height,273px)*.1 + 2.7px),44px)} } /* Fill newly exposed space when Safari retracts its bars; type keeps its measured canvas. */ @media(orientation:landscape) and (max-height:540px) and (pointer:coarse){ html.hero-opening-on #home>.hero-content{height:var(--opening-stable-height,calc(100svh - 27px))} .chapter-stage{height:calc(100dvh - 27px)} header.compact-header.is-open{width:calc(100vw - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px) - 24px);gap:clamp(7px,1.2vw,12px);padding:8px 10px;overflow:visible;max-height:none} header.compact-header.is-open #nav{display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:space-between;align-items:center;gap:clamp(5px,.8vw,10px);width:100%;min-width:0} header.compact-header.is-open #nav>a{font-size:clamp(8.5px,1.2vw,11px);letter-spacing:0;flex:none} header.compact-header.is-open #nav .navcta{padding:8px clamp(5px,1vw,10px)} header.compact-header.is-open #nav .menu-accent-swatches{flex:none;flex-wrap:nowrap;margin:0;padding:0 0 0 5px;gap:0} header.compact-header.is-open #nav .menu-accent-swatch{width:clamp(24px,3.5vw,30px);height:36px} header.compact-header.is-open #nav .menu-accent-swatch span{width:15px;height:15px} } /* scroll-pacing.css */ /* Redistribute a little native scroll distance from the interlude to content. */ #homepage{--section-space:142.8px} #chapter-choices+#work{padding-top:calc(var(--section-space) + clamp(24px,5svh,56px))} @media(max-width:760px){#homepage{--section-space:91.4px}} @media(orientation:landscape) and (max-height:540px) and (pointer:coarse){ #homepage{--section-space:clamp(40px,12svh,56px)} #chapter-choices+#work{padding-top:calc(var(--section-space) + 24px)} } @media(prefers-reduced-motion:reduce){#chapter-choices+#work{padding-top:var(--section-space)}} /* Touch handoff: Work replaces the departing sticky frame, not a blank screen. */ @media(pointer:coarse) and (prefers-reduced-motion:no-preference){ #chapter-choices+#work{position:relative;z-index:1;margin-top:calc(-100svh + 27px);background-color:var(--bg)} } /* landscape-frame.css */ /* Fixed charcoal safe-area rails cannot inherit the Studio section's light fill. */ html[data-landscape-frame],html[data-landscape-frame] body{background-color:#111211!important;color-scheme:dark} html[data-landscape-frame] body::before,html[data-landscape-frame] body::after{content:'';position:fixed;z-index:1001;top:0;bottom:0;pointer-events:none;background:#111211} html[data-landscape-frame] body::before{left:0;width:env(safe-area-inset-left,0px)} html[data-landscape-frame] body::after{right:0;width:env(safe-area-inset-right,0px)} html[data-landscape-frame].intro-pending body::before,html[data-landscape-frame].intro-pending body::after, html[data-landscape-frame] body:has(.moon-intro)::before,html[data-landscape-frame] body:has(.moon-intro)::after{visibility:hidden} html[data-landscape-frame]{--page-gutter:max(clamp(72px,9vw,104px),calc(env(safe-area-inset-left,0px) + 64px),calc(env(safe-area-inset-right,0px) + 64px))} html[data-landscape-frame] header.compact-header,html[data-landscape-frame] header.compact-header.scrolled{left:calc(env(safe-area-inset-left,0px) + 12px);max-width:calc(100% - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px) - 24px)} /* A dark sample at the viewport edge prevents citron leaking into Safari's bottom chrome. */ .viewport-bottom-rail{display:none} @media(pointer:coarse){ html,body{background-color:#111211!important;color-scheme:dark} .viewport-bottom-rail{display:block;position:fixed;z-index:1002;left:0;right:0;bottom:0;height:1px;background:#111211;pointer-events:none} html.intro-pending .viewport-bottom-rail,body:has(.moon-intro) .viewport-bottom-rail{visibility:hidden} } /* Keep the hero's final links inside the usable canvas, above the home indicator. */ @media(pointer:coarse){html.hero-opening-on #home .hero-foot{bottom:max(12px,calc(env(safe-area-inset-bottom,0px) + 6px))}} html.page-rotation-restoring,html.page-rotation-restoring body{overflow-anchor:none;scroll-behavior:auto} /* motion-budget.css */ /* Only background animation layers pause; intro and gallery transitions keep running. */ html.studio-motion-covered #chapter-choices .chapter-ribbon-track, html.studio-motion-covered #work .work-reveal-track, html.studio-motion-covered .hero-opening-moon img, html.studio-motion-covered #home .hero-chaos::before, html.studio-motion-covered #home .hero-chaos::after{animation-play-state:paused!important} /* testimonial-responsive.css */ /* Top-right badge: one clipped frame, a half-protruding client badge, and an extended ribbon. */ #feedback{--quote-card-width:clamp(440px,42vw,580px);--quote-pad:28px;--quote-logo:77px;--quote-copy:17px;--quote-deck-gap:44px;--quote-notch:28px} #feedback .testimonial-party-card{position:relative;isolation:isolate;display:flex;flex-direction:column;flex:0 0 auto;width:var(--quote-card-width);min-width:0;max-width:none;height:auto;min-height:0;padding:calc((var(--quote-logo)*.5 + 4px)*.6) var(--quote-pad) 22px;background:none;border:0;border-radius:0;box-shadow:none;overflow:visible} #feedback .testimonial-party-card:before,#feedback .testimonial-party-card:after{content:'';position:absolute;pointer-events:none;border:0;border-radius:14px 0 14px 14px;clip-path:polygon(0 0,calc(100% - var(--quote-notch)) 0,100% var(--quote-notch),100% 100%,0 100%)} #feedback .testimonial-party-card:before{inset:0;background:#8d9187;z-index:-2} #feedback .testimonial-party-card:after{inset:1.5px;background:#111211;z-index:-1;--quote-notch:27px} #feedback .testimonial-party-card .testimonial-logo-frame{position:absolute;left:auto;right:max(var(--quote-pad),calc(var(--quote-notch) + 8px));top:0;transform:translateY(-50%);width:var(--quote-logo);height:var(--quote-logo);min-height:0;padding:13px;display:flex;align-items:center;justify-content:center;background:#111211;border:2px solid #dedfd7;border-radius:50%;box-shadow:none;overflow:hidden;z-index:2} #feedback .testimonial-party-card.testimonial-wide-logo .testimonial-logo-frame{width:calc(var(--quote-logo)*1.85);height:calc(var(--quote-logo)*.86);border-radius:22px;padding:12px 17px} #feedback .testimonial-party-card .testimonial-logo-frame img{display:block;width:100%;height:100%;max-width:100%;max-height:100%;min-width:0;min-height:0;aspect-ratio:auto;object-fit:contain} #feedback .testimonial-party-card .testimonial-card-header{display:flex;align-items:center;min-height:0;margin:0 0 14px;padding:0;border:0} #feedback .testimonial-client-name{font:400 19px/1.3 StudioWide,Arial,sans-serif;letter-spacing:-.025em;text-transform:uppercase;color:#eeeee7;margin:0;text-wrap:balance} #feedback .testimonial-party-card .testimonial-card-body{display:flex;flex:1;position:static;min-width:0;margin:0 0 16px;padding:0} #feedback .testimonial-party-card .testimonial-quote-panel{display:flex;flex-direction:column;flex:1;margin:0;padding:0;min-height:0;background:none;border:0;border-radius:0;box-shadow:none;transform:none} #feedback .testimonial-quote-top{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:10px;min-height:34px} #feedback .testimonial-party-card .testimonial-quote-mark{position:static;display:block;transform:none;font:64px/.65 Georgia,serif;color:var(--accent);height:34px} #feedback .testimonial-party-card .testimonial-card-count{font:10px/1.4 Arial,sans-serif;letter-spacing:.04em;color:#92968e;margin:0} #feedback .testimonial-party-card .testimonial-sample-copy{font:400 var(--quote-copy)/1.55 Arial,Helvetica,sans-serif;color:#e4e6de;letter-spacing:0;margin:0 0 24px;text-wrap:pretty;overflow-wrap:break-word} #feedback .testimonial-party-card .testimonial-person{display:block;margin-top:auto;border-top:1px solid #686d62;padding-top:16px} #feedback .testimonial-party-card .testimonial-person strong{display:block;font:400 17px/1.3 StudioWide,Arial,sans-serif;text-transform:uppercase;white-space:normal;color:#eeeee7;margin:0 0 5px} #feedback .testimonial-party-card .testimonial-person small{display:block;font:14px/1.4 Arial,sans-serif;color:#adb1a7;white-space:normal;margin:0} #feedback .testimonial-party-card .testimonial-client-ribbon{position:relative;flex:none;min-height:44px;margin:0 calc(-1*var(--quote-pad) - 10px);padding:10px 23px;background:var(--accent);border:0;filter:none;box-shadow:none;clip-path:polygon(12px 0,calc(100% - 12px) 0,100% 50%,calc(100% - 12px) 100%,12px 100%,0 50%)} #feedback .testimonial-client-ribbon:before{display:none} #feedback .testimonial-party-card .testimonial-client-ribbon h3{font:400 15px/1.3 StudioWide,Arial,sans-serif;letter-spacing:-.02em;color:#111211;text-transform:uppercase;text-wrap:balance;margin:0} #feedback .testimonial-cycle,#feedback .testimonial-loop-track{gap:var(--quote-deck-gap);align-items:flex-start} #feedback .testimonial-loop-viewport{padding:calc(var(--quote-logo)*.5 + 12px) 14px 22px;mask-image:linear-gradient(90deg,transparent,#000 2%,#000 98%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 2%,#000 98%,transparent)} @media(max-width:1100px){#feedback{--quote-card-width:clamp(360px,48vw,500px);--quote-pad:24px;--quote-logo:70px;--quote-copy:16px;--quote-deck-gap:38px}} @media(max-width:600px){ #feedback{--quote-card-width:min(82vw,410px);--quote-pad:21px;--quote-logo:63px;--quote-copy:15px;--quote-deck-gap:32px} #feedback .testimonial-party-card{padding-bottom:18px} #feedback .testimonial-client-name{font-size:16px} #feedback .testimonial-party-card .testimonial-sample-copy{line-height:1.5;margin-bottom:20px} #feedback .testimonial-party-card .testimonial-person strong{font-size:15px} #feedback .testimonial-party-card .testimonial-person small{font-size:13px} #feedback .testimonial-party-card .testimonial-client-ribbon h3{font-size:12px} } @media(orientation:landscape) and (max-height:600px) and (pointer:coarse){ #feedback{--quote-card-width:clamp(360px,60vw,520px);--quote-pad:22px;--quote-logo:56px;--quote-copy:15px;--quote-deck-gap:34px} #feedback .testimonial-party-card{padding-bottom:16px} #feedback .testimonial-party-card .testimonial-card-header{margin-bottom:12px} #feedback .testimonial-client-name{font-size:16px} #feedback .testimonial-party-card .testimonial-sample-copy{line-height:1.45;margin-bottom:18px} #feedback .testimonial-party-card .testimonial-client-ribbon h3{font-size:13px} } /* Phone landscape: reduce the complete A1 card by about one fifth. */ @media(orientation:landscape) and (max-height:600px) and (pointer:coarse){ #feedback{--quote-card-width:clamp(288px,48vw,416px);--quote-pad:18px;--quote-logo:45.5px;--quote-copy:12.5px;--quote-deck-gap:28px;--quote-notch:23px} #feedback .testimonial-party-card{padding-bottom:13px} #feedback .testimonial-party-card:after{--quote-notch:22px} #feedback .testimonial-party-card .testimonial-logo-frame{padding:9px} #feedback .testimonial-party-card.testimonial-wide-logo .testimonial-logo-frame{padding:8px 12px;border-radius:17px} #feedback .testimonial-party-card .testimonial-card-header{margin-bottom:10px} #feedback .testimonial-client-name{font-size:13px} #feedback .testimonial-quote-top{min-height:27px;margin-bottom:8px} #feedback .testimonial-party-card .testimonial-quote-mark{font-size:51px;height:27px} #feedback .testimonial-party-card .testimonial-card-count{font-size:8px} #feedback .testimonial-party-card .testimonial-sample-copy{line-height:1.45;margin-bottom:14px} #feedback .testimonial-party-card .testimonial-card-body{margin-bottom:11px} #feedback .testimonial-party-card .testimonial-person{padding-top:13px} #feedback .testimonial-party-card .testimonial-person strong{font-size:13.5px} #feedback .testimonial-party-card .testimonial-person small{font-size:11.5px} #feedback .testimonial-party-card .testimonial-client-ribbon{min-height:35px;padding:8px 19px;margin-inline:calc(-1*var(--quote-pad) - 8px)} #feedback .testimonial-party-card .testimonial-client-ribbon h3{font-size:11px} } /* Keep raised company names clear of the top-right badge. */ #feedback .testimonial-party-card .testimonial-card-header{padding-right:calc(var(--quote-logo) + 16px)} #feedback .testimonial-party-card.testimonial-wide-logo .testimonial-card-header{padding-right:calc(var(--quote-logo)*1.85 + 16px)} #feedback .testimonial-client-name{overflow-wrap:normal} @media(max-width:600px){#feedback .testimonial-wide-logo .testimonial-client-name{font-size:14px}} #feedback .testimonial-party-card .testimonial-card-count{white-space:nowrap;font-variant-numeric:tabular-nums;letter-spacing:0;transform:translateY(-8px)} @media(max-width:600px),(pointer:coarse) and (orientation:landscape) and (max-height:600px){#feedback .testimonial-party-card .testimonial-card-count{transform:translateY(-6px)}} /* Phone portrait: tighten the quotation-mark-to-copy gap by 25%. */ @media(max-width:600px) and (orientation:portrait){ #feedback .testimonial-quote-top{margin-bottom:7.5px} } /* Allow the full company name to wrap in the space reserved beside the badge. */ #feedback .testimonial-party-card[data-client="pinnacle"] .testimonial-client-name{ font-size:17px;line-height:1.16;letter-spacing:-.035em;overflow-wrap:anywhere;min-width:0; } @media(max-width:600px){ #feedback .testimonial-party-card[data-client="pinnacle"] .testimonial-client-name{font-size:clamp(11px,3.35vw,13px)} } @media(orientation:landscape) and (max-height:600px) and (pointer:coarse){ #feedback .testimonial-party-card[data-client="pinnacle"] .testimonial-client-name{font-size:12px} } /* art-book.css */ /* A quiet editorial canvas. Original image proportions, one album experiment. */ #art-book,#art-book-viewer{box-sizing:border-box;position:fixed;inset:0;margin:0;width:100%;max-width:none;height:100dvh;max-height:none;border:0;padding:0;background:#101110;color:var(--ink);font-family:Arial,Helvetica,sans-serif;overscroll-behavior:contain} #art-book::backdrop,#art-book-viewer::backdrop{background:#000c} #art-book{overflow-y:auto;overflow-x:hidden;overflow-anchor:none;scroll-behavior:auto;scrollbar-color:#555 #101110;--ab-gutter:clamp(22px,6vw,112px)} #art-book button,#art-book-viewer button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation;letter-spacing:0;text-transform:none;border-radius:0} #art-book button:focus-visible,#art-book-viewer button:focus-visible{outline:2px solid var(--accent);outline-offset:5px} #art-book button svg,#art-book-viewer button svg{width:22px;height:22px;flex-shrink:0} #art-book .ab-toolbar{position:sticky;inset:0 0 auto;z-index:5;width:100%;height:76px;margin:0;padding:12px var(--ab-gutter);display:grid;grid-template-columns:1fr minmax(0,2fr) 1fr;align-items:center;gap:24px;background:#101110f5;border:0;border-bottom:1px solid #ffffff1a;transform:none;max-width:none;backdrop-filter:blur(12px)} #art-book .ab-toolbar button,#art-book .ab-end-close{min-height:44px;display:inline-flex;align-items:center;gap:12px;background:transparent;border:0;padding:8px 0;font-size:14px;white-space:nowrap} #art-book .ab-toolbar button:hover,#art-book .ab-end-close:hover{color:var(--accent)} #art-book .ab-toolbar-title{justify-self:center;text-align:center;max-width:100%;font-size:11px;letter-spacing:1px;text-transform:uppercase;color:#989b94;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} #art-book .ab-density-toggle{justify-self:end;border:1px solid #ffffff30!important;padding:9px 14px!important;font-size:12px!important} #art-book .ab-density-toggle[aria-pressed="true"]{border-color:var(--accent)!important;color:var(--accent)} #art-book .ab-pages{width:min(100%,1900px);margin:auto;padding:0 clamp(8px,1.5vw,28px)} #art-book .ab-collection-heading{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:6.5px;padding:15.6px 0 14.3px} #art-book #ab-title{font:400 clamp(19px,2.2vw,36px)/1.25 StudioWide,Arial,sans-serif;letter-spacing:-.025em;margin:0;color:var(--ink);max-width:100%;text-transform:uppercase} #art-book .ab-collection-heading p{font-size:12px;line-height:1.5;color:#979d92;text-align:center;margin:0} #art-book .ab-wall{display:grid;gap:var(--mosaic-gap);padding:0;--mosaic-gap:8px;--mosaic-column-gap:calc(var(--mosaic-gap)*1.00982757);--mosaic-unit:clamp(150px,18vw,310px)} #art-book .ab-mosaic-block{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));row-gap:var(--mosaic-gap);column-gap:var(--mosaic-column-gap);min-width:0;isolation:isolate;position:relative} #art-book .ab-row-block{grid-template-rows:var(--row-height)} #art-book .ab-row-block>.ab-plate{grid-column:span var(--row-span);grid-row:1} #art-book .ab-block-4{grid-template-rows:repeat(2,var(--mosaic-unit))} #art-book .ab-block-4 [data-cell="0"]{grid-column:1/5;grid-row:1/3} #art-book .ab-block-4 [data-cell="1"]{grid-column:5/9;grid-row:1} #art-book .ab-block-4 [data-cell="2"]{grid-column:5/9;grid-row:2} #art-book .ab-block-4 [data-cell="3"]{grid-column:9/13;grid-row:1/3} #art-book .ab-block-2{grid-template-rows:calc(var(--mosaic-unit)*1.75)} #art-book .ab-block-2 [data-cell="0"]{grid-column:1/9} #art-book .ab-block-2 [data-cell="1"]{grid-column:9/13} #art-book .ab-block-3{grid-template-rows:calc(var(--mosaic-unit)*1.8)} #art-book .ab-block-3 .ab-plate{grid-column:span 4} #art-book .ab-block-1 .ab-plate,#art-book .ab-block-wide .ab-plate{grid-column:1/-1} #art-book .ab-block-1{grid-template-rows:calc(var(--mosaic-unit)*1.3)} #art-book .ab-plate{margin:0;padding:0;min-width:0;min-height:0;width:100%;height:100%;position:relative;scroll-margin-top:90px;transform-origin:0 0;clip-path:var(--tile-shape,polygon(0 0,100% 0,100% 100%,0 100%))} #art-book .ab-art{display:block;position:relative;width:100%;height:100%;overflow:hidden;background:#090a09;border:0;padding:0;text-align:left;clip-path:none} #art-book .ab-art>img{display:block;width:100%;height:100%;margin:0;max-height:none;max-width:none;object-fit:cover;object-position:var(--art-focus,50% 40%);filter:none;transition:none} #art-book .ab-block-wide .ab-art{height:auto;clip-path:polygon(0 0,100% 0,100% 100%,0 100%)} #art-book .ab-block-wide .ab-art>img{height:auto;object-fit:contain} #art-book .ab-number{position:absolute;top:14px;right:var(--badge-right,16px);z-index:2;pointer-events:none;color:var(--accent);font-size:clamp(12px,1vw,16px);font-weight:400;font-variant-numeric:tabular-nums;letter-spacing:.6px;line-height:1.4;padding:0;background:none;border:0;text-shadow:0 1px 5px #000,0 1px 12px #000} #art-book .ab-plate>figcaption{position:absolute;inset:auto 0 0;margin:0;padding:14px calc(var(--count-right,4px) + 6ch) 3px var(--caption-left,16px);background:linear-gradient(to top,#000d,transparent);display:block;text-align:left;font-size:clamp(10px,.8vw,12px);font-weight:400;line-height:1;color:#fff;text-shadow:0 1px 5px #000,0 1px 12px #000;opacity:0;pointer-events:none;transition:opacity .15s} @media(hover:hover){#art-book .ab-plate:hover>figcaption{opacity:1}} #art-book .ab-plate:has(:focus-visible)>figcaption,#art-book .ab-plate:active>figcaption{opacity:1} #art-book .ab-caption-title{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} #art-book .ab-inspect{display:none;position:absolute;bottom:12px;right:14px;z-index:3;padding:7px;border:0;background:none;color:var(--accent);width:44px;height:44px} #art-book .ab-inspect svg{width:27px;height:27px} #art-book .ab-inspect svg path{stroke-width:2.3} #art-book .is-expanded figcaption{padding-right:64px} #art-book .ab-expanded-row{display:block;padding:0} #art-book .is-expanded{height:auto;z-index:2} #art-book .is-expanded .ab-art{height:auto;min-height:180px;display:flex;align-items:center;justify-content:center;clip-path:polygon(0 0,100% 0,100% 100%,0 100%);background:#090a09} #art-book .is-expanded .ab-art>img{width:auto;height:auto;max-width:100%;max-height:82svh;object-fit:contain} #art-book .is-expanded .ab-inspect{display:block} #art-book .ab-density-toggle:disabled{visibility:hidden} #art-book .ab-ending{height:auto;max-width:1900px;margin:0 auto;padding:24px 28px 35px;display:flex;align-items:center;justify-content:space-between;gap:24px;border:0;background:none} #art-book .ab-ending>span{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:#81867d} #art-book .ab-ending button{color:var(--accent)} #art-book-viewer{background:#080908;overflow:hidden;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)} #art-book-viewer[open]{display:grid;grid-template-rows:64px minmax(0,1fr) auto} #art-book-viewer .av-toolbar{position:static;inset:auto;height:auto;width:100%;max-width:none;padding:10px 24px;display:flex;align-items:center;justify-content:space-between;gap:20px;background:#080908;border:0;border-bottom:1px solid #ffffff14;transform:none;z-index:2} #art-book-viewer .av-toolbar button{border:0;background:none;display:flex;align-items:center;gap:12px;font-size:13px;padding:8px} #art-book-viewer .av-toolbar button:hover{color:var(--accent)} #art-book-viewer .av-count{color:#9fa296;font-size:12px;letter-spacing:1px} #art-book-viewer .av-stage{position:relative;min-height:0;min-width:0;display:flex;align-items:center;justify-content:center;overflow:auto;padding:16px 56px;overscroll-behavior:contain;touch-action:pan-x pan-y pinch-zoom} #art-book-viewer .av-image{display:block;width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;opacity:0;transition:opacity .18s;flex:none} #art-book-viewer .av-image.is-ready{opacity:1} #art-book-viewer .av-stage::before{content:'';position:absolute;width:46px;height:46px;border-radius:50%;background:url('https://cdn.prod.website-files.com/6ace877c1c1df34e33b7760b/6af5494933b08cae3685498a_bm-runtime-studio-intro-logo-white.png') center/contain no-repeat;opacity:.4;pointer-events:none} #art-book-viewer:has(.av-image.is-ready) .av-stage::before{display:none} #art-book-viewer .av-error{position:absolute;max-width:280px;padding:15px;font-size:14px;line-height:1.6;color:#aaa;background:#080908} #art-book-viewer .av-error[hidden]{display:none} #art-book-viewer .av-footer{margin:0;border:0;border-top:1px solid #ffffff14;background:#080908;padding:15px 32px;display:flex;align-items:center;justify-content:space-between;gap:24px;max-width:none} #art-book-viewer .av-title{font-size:13px;font-weight:400;line-height:1.5;color:#ccc;margin:0 0 5px} #art-book-viewer .av-source{font-size:11px;line-height:1.5;color:var(--accent)} #art-book-viewer .av-caption{min-width:0;max-width:70ch} #art-book-viewer .av-navigation{display:flex;align-items:center;gap:14px;flex-shrink:0} #art-book-viewer .av-navigation button{display:grid;place-items:center;min-width:44px;min-height:44px;padding:8px;background:none;border:1px solid #ffffff30;font-size:12px} #art-book-viewer .av-navigation button:hover{border-color:var(--accent);color:var(--accent)} #art-book-viewer.is-zoomed .av-stage{display:block;padding:0} #art-book-viewer.is-zoomed .av-image{max-width:none;max-height:none;margin:auto} @media(max-width:760px){ #art-book{--ab-gutter:16px} #art-book .ab-toolbar{height:60px;padding:8px 16px;gap:12px} #art-book .ab-toolbar-title{display:none} #art-book .ab-toolbar{grid-template-columns:1fr 1fr} #art-book .ab-toolbar button{font-size:12px} #art-book .ab-pages{padding:0 8px} #art-book .ab-collection-heading{padding:12.35px 5px;display:flex} #art-book #ab-title{max-width:none;font-size:clamp(19px,4.5vw,28px)} #art-book .ab-collection-heading p{text-align:center;font-size:11px;margin-top:0} #art-book .ab-wall{--mosaic-gap:6px;--mosaic-unit:clamp(150px,32vw,230px)} #art-book .ab-number{top:9px;right:var(--badge-right,12px);font-size:11px} #art-book .ab-plate{scroll-margin-top:74px} #art-book .ab-ending{padding:24px 16px} #art-book-viewer[open]{grid-template-rows:56px minmax(0,1fr) auto} #art-book-viewer .av-toolbar{padding:6px 14px} #art-book-viewer .av-toolbar button{font-size:12px;gap:8px} #art-book-viewer .av-stage{padding:12px 18px} #art-book-viewer .av-footer{padding:12px 18px;gap:12px;align-items:start} #art-book-viewer .av-title{font-size:11px} #art-book-viewer .av-source{font-size:10px} #art-book-viewer .av-navigation{gap:5px} #art-book-viewer .av-navigation button{min-width:38px;min-height:44px;padding:6px;font-size:11px} } @media(max-width:420px){#art-book-viewer .av-footer{flex-wrap:wrap}#art-book-viewer .av-caption{width:100%}#art-book-viewer .av-navigation{width:100%;justify-content:space-between}} @media(orientation:landscape) and (max-height:600px){ #art-book .ab-toolbar{height:56px;padding:6px 22px} #art-book .ab-collection-heading{padding:9.75px 0;display:flex;gap:5.2px} #art-book #ab-title{font-size:22px;max-width:100%} #art-book .ab-collection-heading p{margin:0;text-align:center} #art-book-viewer[open]{grid-template-rows:42px minmax(0,1fr) 60px} #art-book-viewer .av-toolbar{padding:2px 18px} #art-book-viewer .av-stage{padding:4px 48px} #art-book-viewer .av-footer{padding:5px 18px;flex-wrap:nowrap;align-items:center} #art-book-viewer .av-caption{width:auto;max-width:60%}#art-book-viewer .av-title{font-size:10px;margin-bottom:2px}#art-book-viewer .av-source{font-size:10px} #art-book-viewer .av-navigation{width:auto;gap:12px}#art-book-viewer .av-navigation button{min-height:40px} } @media(hover:none){#art-book .ab-enlarge{opacity:.8}} @media(prefers-reduced-motion:reduce){#art-book .ab-enlarge,#art-book-viewer .av-image{transition:none}} @media(max-width:600px){ #art-book .ab-mosaic-block{grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:var(--phone-rows);grid-auto-rows:auto} #art-book .ab-mosaic-block .ab-plate{grid-column:var(--phone-column,1 / -1);grid-row:var(--phone-row,auto);height:100%;min-height:0} #art-book .ab-mosaic-block .ab-art{aspect-ratio:auto;height:100%;min-height:0} #art-book .ab-mosaic-block .ab-art>img{aspect-ratio:auto;height:100%;max-height:none;object-fit:cover} #art-book .ab-block-wide .ab-plate,#art-book .ab-block-1 .ab-plate{grid-column:1/-1} #art-book .ab-block-wide .ab-art,#art-book .ab-block-wide .ab-art>img{aspect-ratio:auto;height:100%} #art-book .ab-block-1 .ab-art,#art-book .ab-block-1 .ab-art>img{aspect-ratio:auto} #art-book .is-expanded .ab-art>img{max-height:78svh} } @media(prefers-reduced-motion:reduce){#art-book .ab-art,#art-book figcaption{transition:none}} /* Portrait expansion occupies exactly its image column; neighbours fill the rest. */ #art-book .ab-portrait-spread{column-gap:0;grid-template-rows:repeat(2,minmax(0,1fr));row-gap:var(--mosaic-gap)} #art-book .ab-portrait-spread.is-left{grid-template-columns:var(--portrait-width) var(--mosaic-gap) minmax(0,1fr) var(--mosaic-column-gap) minmax(0,1fr)} #art-book .ab-portrait-spread.is-right{grid-template-columns:minmax(0,1fr) var(--mosaic-column-gap) minmax(0,1fr) var(--mosaic-gap) var(--portrait-width)} #art-book .ab-portrait-spread .is-expanded{grid-row:1/3;height:100%} #art-book .ab-portrait-spread.is-left .is-expanded{grid-column:1} #art-book .ab-portrait-spread.is-right .is-expanded{grid-column:5} #art-book .ab-portrait-spread [data-neighbour="0"]{grid-row:1/3} #art-book .ab-portrait-spread [data-neighbour="1"]{grid-row:1} #art-book .ab-portrait-spread [data-neighbour="2"]{grid-row:2} #art-book .ab-portrait-spread.is-left [data-neighbour="0"]{grid-column:3} #art-book .ab-portrait-spread.is-left [data-neighbour="1"],#art-book .ab-portrait-spread.is-left [data-neighbour="2"]{grid-column:5} #art-book .ab-portrait-spread.is-right [data-neighbour="0"]{grid-column:1} #art-book .ab-portrait-spread.is-right [data-neighbour="1"],#art-book .ab-portrait-spread.is-right [data-neighbour="2"]{grid-column:3} #art-book .ab-portrait-spread[data-neighbours="2"] [data-neighbour="1"]{grid-row:1/3} #art-book .ab-portrait-spread.is-left[data-neighbours="1"] [data-neighbour="0"]{grid-column:3/6} #art-book .ab-portrait-spread.is-right[data-neighbours="1"] [data-neighbour="0"]{grid-column:1/4} #art-book .ab-portrait-spread .is-expanded .ab-art{display:block;height:100%;min-height:0} #art-book .ab-portrait-spread .is-expanded .ab-art>img{width:100%;height:100%;max-width:none;max-height:none;object-fit:contain} #art-book .ab-expanded-row .is-expanded .ab-art{display:block;min-height:0} #art-book .ab-expanded-row .is-expanded .ab-art>img{width:100%;height:auto;max-height:none} /* A wide companion spans the context area; smaller companions pack beneath it. */ #art-book .ab-portrait-spread[data-flow="landscape"]{grid-template-rows:var(--neighbour-top) minmax(0,1fr)} #art-book .ab-portrait-spread[data-flow="landscape"] [data-neighbour="0"]{grid-row:1} #art-book .ab-portrait-spread[data-flow="landscape"] [data-neighbour="1"],#art-book .ab-portrait-spread[data-flow="landscape"] [data-neighbour="2"]{grid-row:2} #art-book .ab-portrait-spread.is-left[data-flow="landscape"] [data-neighbour="0"]{grid-column:3/6} #art-book .ab-portrait-spread.is-right[data-flow="landscape"] [data-neighbour="0"]{grid-column:1/4} #art-book .ab-portrait-spread.is-left[data-flow="landscape"] [data-neighbour="1"]{grid-column:3} #art-book .ab-portrait-spread.is-right[data-flow="landscape"] [data-neighbour="1"]{grid-column:1} #art-book .ab-portrait-spread.is-left[data-flow="landscape"] [data-neighbour="2"]{grid-column:5} #art-book .ab-portrait-spread.is-right[data-flow="landscape"] [data-neighbour="2"]{grid-column:3} #art-book .ab-portrait-spread.is-left[data-flow="landscape"][data-neighbours="2"] [data-neighbour="1"]{grid-column:3/6} #art-book .ab-portrait-spread.is-right[data-flow="landscape"][data-neighbours="2"] [data-neighbour="1"]{grid-column:1/4} /* Neighbouring previews always cover their slot, without a viewer-height cap. */ #art-book .ab-portrait-spread>.ab-plate:not(.is-expanded)>.ab-art{position:relative;display:block;height:100%;min-height:0;aspect-ratio:auto} #art-book .ab-portrait-spread>.ab-plate:not(.is-expanded)>.ab-art>img{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;max-height:none;object-fit:cover} /* Accent streaks occupy measured seams only and never intercept gallery gestures. */ #art-book .ab-wall{position:relative} #art-book .ab-gap-flight{position:absolute;z-index:3;pointer-events:none;overflow:hidden;contain:strict} #art-book svg.ab-gap-flight{display:block;max-width:none;pointer-events:none} @media(prefers-reduced-motion:reduce){#art-book .ab-gap-flight{display:none}} /* Positional expansion: the selected row slot never swaps left/right. */ #art-book .ab-position-spread{display:block;position:relative} #art-book .ab-position-spread>.ab-plate{position:absolute;left:var(--slot-x);top:var(--slot-y);width:var(--slot-width);height:var(--slot-height);min-height:0} #art-book .ab-position-spread>.ab-plate>.ab-art{display:block;position:relative;height:100%;min-height:0;aspect-ratio:auto} #art-book .ab-position-spread>.ab-plate>.ab-art>img{position:absolute;inset:0;width:100%;height:100%;max-width:none;max-height:none;object-fit:cover} #art-book .ab-position-spread>.is-expanded>.ab-art>img{object-fit:contain} /* Bounded slot sheets; all empty space is an intentional small seam. */ #art-book .ab-slot-block{display:block;position:relative} #art-book .ab-slot-block>.ab-plate{position:absolute;left:var(--slot-x);top:var(--slot-y);width:var(--slot-width);height:var(--slot-height);min-height:0} #art-book .ab-slot-block>.ab-plate>.ab-art{display:block;position:relative;height:100%;min-height:0;aspect-ratio:auto} #art-book .ab-slot-block>.ab-plate>.ab-art>img{position:absolute;inset:0;width:100%;height:100%;max-width:none;max-height:none;object-fit:cover} #art-book .ab-wide-preview>.ab-plate{height:var(--wide-height)} #art-book .ab-wide-preview .ab-art{height:100%;aspect-ratio:auto} #art-book .ab-wide-preview .ab-art>img{height:100%;object-fit:cover;aspect-ratio:auto} #art-book .ab-bounded-expanded>.is-expanded{width:var(--full-image-width);margin-inline:auto} /* Fixed mosaic focus: the grid never repacks when selecting or browsing. */ #art-book .ab-density-toggle{display:none!important} #art-book .ab-art[aria-expanded="true"]{box-shadow:inset 0 0 0 3px var(--accent)} #art-book .is-selected .ab-number{background:#080908c9;padding:2px 6px} #art-book-viewer{background:#080908b8} #art-book-viewer::backdrop{background:transparent} #art-book-viewer .av-stage{overflow:hidden;touch-action:pan-y pinch-zoom} #art-book-viewer .av-image{cursor:zoom-out;transform-origin:center} #art-book-viewer.is-zoomed .av-stage{overflow:auto;touch-action:pan-x pan-y pinch-zoom} #art-book-viewer.is-zoomed .av-image{cursor:grab} #art-book-viewer .av-toolbar,#art-book-viewer .av-footer{background:#080908eb} #art-book .ab-art[aria-expanded="true"]::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 3px var(--accent);pointer-events:none} /* Directional in-gallery enlargement: positioned over neighbours, in normal scroll. */ #art-book .ab-inline-expansion{position:absolute;z-index:4;margin:0;padding:0;background:#050605;transform-origin:0 0;box-shadow:0 12px 36px #0009;isolation:isolate} #art-book .ab-expanded-art{display:block;width:100%;height:100%;border:0;padding:0;background:#050605;cursor:zoom-out;overflow:hidden;touch-action:pan-y pinch-zoom} #art-book .ab-expanded-image{display:block;width:100%;height:100%;max-width:none;max-height:none;object-fit:contain;opacity:0;transition:opacity .16s} #art-book .is-ready .ab-expanded-image{opacity:1} #art-book .ab-inline-expansion:not(.is-ready)::before{content:'';position:absolute;inset:50% auto auto 50%;width:40px;height:40px;transform:translate(-50%,-50%);background:url('https://cdn.prod.website-files.com/6ace877c1c1df34e33b7760b/6af5494933b08cae3685498a_bm-runtime-studio-intro-logo-white.png') center/contain no-repeat;pointer-events:none;opacity:.5} #art-book .ab-inline-close{position:absolute;top:8px;right:8px;width:44px;height:44px;display:grid;place-items:center;border:1px solid #ffffff40;background:#080908c9;color:var(--accent)} #art-book .ab-expanded-count{position:absolute;top:14px;left:14px;color:var(--accent);font-size:12px;text-shadow:0 1px 6px #000;pointer-events:none} #art-book .ab-expanded-caption{position:absolute;inset:auto 0 0;padding:30px 16px 14px;background:linear-gradient(transparent,#000d);color:#ddd;font:12px/1.5 Arial,sans-serif;opacity:0;pointer-events:none;transition:opacity .15s} #art-book .ab-inline-expansion:hover .ab-expanded-caption,#art-book .ab-inline-expansion:focus-within .ab-expanded-caption{opacity:1} #art-book .ab-inline-expansion.has-error::after{content:'Image unavailable';position:absolute;inset:45% 10% auto;text-align:center;font:12px Arial;color:#aaa;pointer-events:none} @media(prefers-reduced-motion:reduce){#art-book .ab-expanded-image,#art-book .ab-expanded-caption{transition:none}} /* Reset inherited dialog image margins: no black strip or displaced composition. */ #art-book .ab-expansion-viewport{position:absolute;inset:0;overflow:hidden} #art-book .ab-expanded-art{position:relative;margin:0;min-width:0;min-height:0;border-radius:0;line-height:0;appearance:none;-webkit-appearance:none} #art-book .ab-expanded-image{position:absolute;inset:0;margin:0;padding:0;border:0;min-width:0;min-height:0;vertical-align:top} #art-book.is-mobile-landscape .ab-pages{width:100%;max-width:none;margin-inline:auto;padding-inline:12px} #art-book.is-mobile-landscape .ab-wall{width:100%;margin-inline:auto} #art-book .is-landscape-pan .ab-expansion-viewport{overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;touch-action:pan-y pinch-zoom;scrollbar-width:none} #art-book .is-landscape-pan .ab-expanded-art{height:var(--expanded-image-height);overflow:hidden} #art-book .is-landscape-pan .ab-expanded-caption{display:none} #art-book .is-landscape-pan .ab-expanded-count{top:8px;left:10px;font-size:10px} #art-book .is-landscape-pan .ab-inline-close{top:4px;right:4px} #art-book .ab-inline-prev,#art-book .ab-inline-next{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;padding:8px;display:grid;place-items:center;border:1px solid #ffffff40;background:#080908ce;color:var(--accent)} #art-book .ab-inline-prev{left:-54px}#art-book .ab-inline-next{right:-54px} /* Mobile browsing and detail panning are explicit, separate modes. */ #art-book .ab-inline-tools{position:absolute;top:8px;right:8px;z-index:6;display:flex;gap:4px;align-items:center} #art-book .ab-inline-tools button{position:static;display:grid;place-items:center;min-width:44px;height:44px;padding:8px;border:1px solid #ffffff40;background:#080908e6;color:var(--accent);font:12px/1 Arial,sans-serif;transform:none} #art-book .ab-inline-tools .ab-inline-info{font-weight:700;font-size:16px} #art-book .ab-inline-info[aria-expanded="true"]{background:var(--accent);color:#080908} #art-book .is-touch-expansion .ab-inline-tools{top:calc(100% + 4px);right:auto;left:50%;transform:translateX(-50%)} #art-book .is-touch-expansion .ab-inline-zoom{min-width:66px} #art-book .ab-inline-metadata{position:absolute;top:0;z-index:5;padding:8px 10px;background:#080908ed;color:#ccc;font:12px/1.35 Arial,sans-serif;max-height:100%;overflow-y:auto;overscroll-behavior:contain} #art-book .ab-inline-metadata[hidden]{display:none} #art-book .ab-inline-metadata p{margin:0;padding:0;font:inherit;color:inherit;max-width:none} #art-book .ab-meta-credit{overflow-wrap:anywhere} #art-book .ab-meta-divider{color:#999;margin-inline:3px} #art-book .ab-meta-line{text-align:left} #art-book .ab-meta-source{color:var(--accent);white-space:nowrap} #art-book .ab-inline-expansion[data-zoomed="true"] .ab-expansion-viewport{overflow:auto;touch-action:pan-x pan-y pinch-zoom} #art-book .ab-inline-expansion[data-zoomed="true"] .ab-expanded-art{touch-action:pan-x pan-y pinch-zoom;cursor:grab} #art-book .ab-inline-expansion:not(.is-touch-expansion) .ab-inline-metadata{top:60px;max-height:calc(100% - 60px)} /* Subdued criss-cross bands are scenery only; art and controls stay above them. */ #art-book .ab-background-bands{display:none;pointer-events:none} @media(min-width:900px) and (hover:hover) and (pointer:fine){ #art-book .ab-background-bands{display:block;position:fixed;inset:76px 0 0;overflow:hidden;z-index:0;opacity:.22;contain:strict;pointer-events:none;mask-image:linear-gradient(transparent,#000 12%,#000 88%,transparent)} #art-book .ab-background-band{position:absolute;left:-35%;width:170%;height:var(--back-height);transform:rotate(var(--back-angle));background:var(--accent);color:#080908;overflow:hidden;pointer-events:none} #art-book .ab-background-track{display:flex;width:max-content;height:100%;align-items:center;animation:ab-background-pan var(--back-duration) linear infinite;pointer-events:none} #art-book .ab-background-cycle{display:block;flex:none;min-width:140vw;padding:0 36px 0 0;white-space:nowrap;font:400 calc(var(--back-height)*1.1)/1 Arial,Helvetica,sans-serif;letter-spacing:-.075em;word-spacing:.2em} #art-book .ab-pages,#art-book .ab-ending{position:relative;z-index:1} #art-book .ab-background-bands.is-paused .ab-background-track{animation-play-state:paused} } @keyframes ab-background-pan{to{transform:translateX(-50%)}} @media(prefers-reduced-motion:reduce){#art-book .ab-background-track{animation:none}} /* Compact counters follow the artwork's actual lower-right clipped edge. */ #art-book .ab-number{top:auto;bottom:3px;right:var(--count-right,4px);font-size:clamp(10px,.8vw,12px);line-height:1;letter-spacing:-.04em} #art-book .ab-expanded-count,#art-book .is-landscape-pan .ab-expanded-count{top:auto;left:auto;bottom:4px;right:4px;font-size:10px;line-height:1;letter-spacing:-.04em;z-index:7} #art-book .is-selected .ab-number{padding:0;background:none} /* Desktop metadata is always attached to the bottom image edge. */ #art-book .ab-inline-expansion:not(.is-touch-expansion) .ab-inline-metadata{top:auto;bottom:0;left:0;max-height:none;min-height:18px;padding:4px 54px 4px 8px;background:#050605f5;overflow:hidden;font:11px/14px Arial,sans-serif} #art-book .ab-inline-expansion[data-zoomed="true"] .ab-expanded-art{width:var(--expanded-image-width,100%)} /* Landscape: maximise available height, reveal our header only during scrolling. */ #art-book .ab-landscape-back{display:none} #art-book.is-mobile-landscape .ab-toolbar{position:fixed;top:0;left:0;height:44px;padding:0 12px;transform:translateY(-110%);opacity:0;pointer-events:none;transition:transform .18s ease,opacity .18s ease} #art-book.is-mobile-landscape.is-gallery-scrolling .ab-toolbar,#art-book.is-mobile-landscape .ab-toolbar:has(:focus-visible){transform:none;opacity:1;pointer-events:auto} #art-book.is-mobile-landscape .ab-landscape-back{display:grid;place-items:center;position:fixed;top:8px;left:8px;z-index:6;width:40px;height:40px;padding:8px;border:1px solid #ffffff30;background:#080908bd;color:var(--ink)} #art-book .is-landscape-expansion .ab-inline-tools{top:50%;left:calc(100% + 8px);right:auto;transform:translateY(-50%);flex-direction:column} #art-book .is-landscape-expansion .ab-inline-tools .ab-inline-zoom{min-width:44px;width:44px;font-size:10px;padding:2px} #art-book .is-landscape-expansion .ab-inline-prev{left:-52px;top:calc(50% - 26px)} #art-book .is-landscape-expansion .ab-inline-next{left:-52px;right:auto;top:calc(50% + 26px)} @media(prefers-reduced-motion:reduce){#art-book.is-mobile-landscape .ab-toolbar{transition:none}} /* Legacy album viewers retain their layout but share the compact corner count. */ #gallery-b .fb-count,#floating-gallery .fg-count,#viewer #image-count{position:fixed;right:4px;bottom:4px;z-index:12;min-width:0;padding:0;color:var(--accent);font:10px/1 Arial,sans-serif;letter-spacing:-.04em;white-space:nowrap;text-shadow:0 1px 5px #000} /* Landscape controls belong to the viewport, independent of the animated artwork. */ #art-book .ab-landscape-ui{display:none} #art-book.is-mobile-landscape .ab-landscape-ui{display:block;position:fixed;inset:0;z-index:9;pointer-events:none;--edge-left:max(10px,env(safe-area-inset-left));--edge-right:max(10px,env(safe-area-inset-right));--edge-bottom:max(8px,env(safe-area-inset-bottom))} #art-book.is-mobile-landscape .ab-landscape-back{top:max(8px,env(safe-area-inset-top));left:max(10px,env(safe-area-inset-left));width:44px;height:44px;z-index:10} #art-book .ab-landscape-ui button,#art-book .ab-landscape-ui .ab-inline-metadata{pointer-events:auto;touch-action:manipulation} #art-book .ab-landscape-ui .ab-inline-prev,#art-book .ab-landscape-ui .ab-inline-next{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px} #art-book .ab-landscape-ui .ab-inline-prev{left:var(--edge-left);right:auto} #art-book .ab-landscape-ui .ab-inline-next{left:auto;right:var(--edge-right)} #art-book .ab-landscape-ui .ab-inline-tools{position:absolute;top:auto;bottom:var(--edge-bottom);right:var(--edge-right);left:auto;transform:none;display:grid;grid-template-columns:44px 44px;gap:5px} #art-book .ab-landscape-ui .ab-inline-tools button{min-width:44px;width:44px;height:44px;padding:6px} #art-book .ab-landscape-ui .ab-inline-zoom{grid-column:2;font-size:10px} #art-book .ab-landscape-ui .ab-inline-info{grid-column:1} #art-book .ab-landscape-ui .ab-inline-close{grid-column:2} #art-book .ab-landscape-ui .is-side-metadata{position:absolute;top:auto;bottom:var(--edge-bottom);left:var(--edge-left);width:clamp(112px,calc(var(--portrait-left) - var(--edge-left) - 12px),220px);max-height:calc(50% - 42px);padding:7px 8px;font:11px/1.3 Arial;overflow-y:auto;background:#080908ed} #art-book .is-landscape-expansion[data-art-shape="wide"] .ab-inline-metadata{top:auto;bottom:0;left:0;max-height:40%;padding:5px 8px;font:11px/1.3 Arial} /* Four additional points of bar depth, with a ten-point feather into the artwork. */ #art-book .ab-inline-expansion:not(.is-touch-expansion) .ab-inline-metadata{min-height:calc(18px + 4pt);overflow:visible} #art-book .ab-inline-expansion:not(.is-touch-expansion) .ab-inline-metadata::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:10pt;background:linear-gradient(to bottom,transparent,#050605f5);pointer-events:none} /* Mobile focus: readable counters, explicit rectangular zoom and quieter surroundings. */ #art-book .is-touch-expansion{box-shadow:0 12px 36px #0009} #art-book .is-touch-expansion .ab-inline-zoom{border-radius:0;min-width:78px} #art-book .ab-landscape-ui .ab-inline-tools .ab-inline-zoom{grid-column:1 / -1;width:93px;min-width:93px;border-radius:0;font-size:11px} #art-book .is-landscape-expansion[data-art-shape="wide"] .ab-inline-metadata{padding-right:48px} /* Keep dimming stationary while the foreground artwork scales and switches. */ #art-book .ab-mobile-shade{position:fixed;inset:0;z-index:3;background:#0009;pointer-events:none;opacity:0;transition:opacity .18s ease;will-change:opacity} #art-book .ab-mobile-shade.is-visible{opacity:1} @media(prefers-reduced-motion:reduce){#art-book .ab-mobile-shade{transition:none}} /* Portrait artwork zoom stays inside its frame; actions stay within thumb reach. */ #art-book .is-touch-expansion:not(.is-landscape-expansion) .ab-expansion-viewport{overflow:auto;overscroll-behavior:contain;touch-action:pan-x pan-y;scrollbar-width:none} #art-book .is-touch-expansion:not(.is-landscape-expansion) .ab-expanded-art{touch-action:pan-x pan-y} #art-book .is-touch-expansion:not(.is-landscape-expansion) .ab-inline-metadata{top:auto;bottom:0;left:0;max-height:35%;padding:6px 48px 6px 8px;font:11px/1.3 Arial} #art-book.has-touch-art:not(.is-mobile-landscape) .ab-landscape-ui{display:block;position:fixed;inset:0;z-index:9;pointer-events:none} #art-book.has-touch-art:not(.is-mobile-landscape) .ab-landscape-ui .ab-inline-tools{position:absolute;top:auto;bottom:max(10px,env(safe-area-inset-bottom));left:50%;right:auto;transform:translateX(-50%);display:flex;gap:6px;pointer-events:auto} #art-book.has-touch-art:not(.is-mobile-landscape) .ab-landscape-ui .ab-inline-tools .ab-inline-zoom{width:88px;min-width:88px} #art-book .is-touch-expansion:not(.is-landscape-expansion)[data-zoomed="false"] .ab-expansion-viewport,#art-book .is-touch-expansion:not(.is-landscape-expansion)[data-zoomed="false"] .ab-expanded-art{touch-action:pan-y} /* Desktop artwork always leaves browser-responsive space on both sides. */ @media(hover:hover) and (pointer:fine){ #art-book .ab-pages{width:min(calc(100% - 2 * clamp(24px,3.5vw,100px)),1900px);max-width:none;padding-inline:0;margin-inline:auto} } /* One landscape return control; the auto-hiding bar only names the album. */ #art-book.is-mobile-landscape .ab-toolbar .ab-close{display:none} #art-book.is-mobile-landscape .ab-toolbar{grid-template-columns:minmax(0,1fr);padding-inline:max(64px,env(safe-area-inset-left),env(safe-area-inset-right))} #art-book.is-mobile-landscape .ab-toolbar-title{display:block;grid-column:1;justify-self:center;font-size:10px} #art-book.is-mobile-landscape .ab-landscape-back{visibility:visible} #art-book.is-mobile-landscape .ab-landscape-ui{--edge-bottom:max(18px,calc(env(safe-area-inset-bottom) + 8px))} /* Keep the sole landscape exit above passive layers and out of the browser edge strip. */ #art-book.is-mobile-landscape .ab-landscape-back{position:fixed;top:max(20px,calc(env(safe-area-inset-top) + 10px));left:max(18px,calc(env(safe-area-inset-left) + 8px));z-index:30;pointer-events:auto;touch-action:manipulation;isolation:isolate} #art-book .ab-landscape-back svg{pointer-events:none} /* Lay out control hit areas directly, without translated compositor coordinates. */ #art-book .ab-landscape-ui .ab-inline-prev,#art-book .ab-landscape-ui .ab-inline-next{top:calc(50% - 22px);transform:none} #art-book.has-touch-art:not(.is-mobile-landscape) .ab-landscape-ui .ab-inline-tools{left:0;right:0;width:max-content;margin-inline:auto;transform:none} /* Shared gallery navigation: retain 76 / 60 / 44px toolbar heights. */ #art-book .ab-toolbar{display:flex;align-items:center;justify-content:center;gap:0;z-index:40} #art-book .ab-toolbar-title{display:none!important} #art-book .ab-toolbar .ab-close{position:absolute;left:var(--ab-gutter);width:44px;height:44px;justify-content:center;padding:8px} #art-book .ab-toolbar .ab-close span{display:none} #art-book .ab-gallery-menu{position:relative;display:flex;align-items:center;justify-content:center;gap:24px;width:100%;max-width:calc(100% - 100px);min-width:0} #art-book .ab-gallery-menu .ab-menu-toggle{display:grid;place-items:center;flex:none;min-height:44px;width:44px;height:44px;padding:6px;border:1px solid #ffffff26;border-radius:7px;background:#111211a8} #art-book .ab-menu-badge{position:static;display:block;width:30px;height:30px;margin:0;object-fit:contain} #art-book .ab-menu-nav{display:none;position:static;align-items:center;justify-content:center;gap:22px;padding:0;background:none;font:13px/1.3 Arial;min-width:0} #art-book .ab-gallery-menu.is-open .ab-menu-nav{display:flex} #art-book .ab-menu-nav a{white-space:nowrap;min-height:44px;display:flex;align-items:center} #art-book .ab-menu-nav a:hover{color:var(--accent)} #art-book .ab-menu-cta{border:1px solid #ffffff40;padding:8px 12px} #art-book .ab-menu-swatches{display:flex;align-items:center;gap:3px} #art-book .ab-menu-nav .ab-menu-swatch{display:grid;place-items:center;width:32px;height:44px;padding:6px;border:0;background:none} #art-book .ab-menu-dot{display:block;width:16px;height:16px;border-radius:50%;background:var(--swatch);box-shadow:0 0 0 1px #ffffff40} #art-book .ab-menu-swatch[aria-pressed="true"] .ab-menu-dot{outline:1px solid var(--swatch);outline-offset:3px} #art-book.is-mobile-landscape.is-gallery-menu-open .ab-toolbar{transform:none;opacity:1;pointer-events:auto} #art-book .ab-block-single{display:block;position:relative;margin-inline:auto;max-width:100%} #art-book .ab-block-single>.ab-plate{width:100%;height:100%} #art-book .ab-block-single .ab-art{width:100%;height:100%;aspect-ratio:auto} #art-book .ab-block-single .ab-art img{width:100%;height:100%;object-fit:contain} #art-book .ab-ending{justify-content:flex-end;padding-block:32px} #art-book .ab-ending>span{display:none} #art-book .ab-ending .ab-end-close{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:46px;padding:11px 21px;border:1px solid var(--accent);border-radius:999px;background:#111211;color:var(--accent);font:13px/1.2 Arial;transition:background .18s,color .18s} #art-book .ab-ending .ab-end-close:hover,#art-book .ab-ending .ab-end-close:focus-visible{background:var(--accent);color:#111211} @media(max-width:1100px){ #art-book .ab-gallery-menu{max-width:100%;gap:0} #art-book .ab-gallery-menu.is-open .ab-menu-nav{position:absolute;top:calc(100% + 10px);left:0;right:0;width:min(340px,calc(100vw - 36px));max-height:calc(100dvh - 110px);overflow:auto;overscroll-behavior:contain;margin-inline:auto;display:flex;flex-direction:column;align-items:stretch;gap:4px;padding:14px 20px;border:1px solid #ffffff30;border-radius:8px;background:#111211f5;box-shadow:0 14px 32px #0008} #art-book .ab-menu-nav a{min-height:40px} #art-book .ab-menu-swatches{justify-content:flex-start;padding-top:4px} #art-book .ab-menu-nav .ab-menu-swatch{width:40px} } @media(pointer:coarse) and (orientation:landscape) and (max-height:600px){ #art-book .ab-gallery-menu .ab-menu-toggle{width:44px;height:44px;min-height:44px;padding:9px} #art-book .ab-menu-badge{width:24px;height:24px} #art-book .ab-gallery-menu.is-open .ab-menu-nav{top:calc(100% + 6px);width:min(620px,calc(100vw - 130px));max-height:calc(100dvh - 70px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px 14px;padding:10px 16px;font-size:12px} #art-book .ab-menu-nav a{min-height:36px} #art-book .ab-menu-swatches{grid-column:1/-1;justify-content:center;padding-top:0} #art-book .ab-menu-nav .ab-menu-swatch{height:34px;min-height:34px} #art-book .ab-ending{padding:20px max(18px,env(safe-area-inset-right))} } /* Reverse intro: citron title -> striped monologue -> bands leave to both sides. */ #art-book .ab-album-opening{position:fixed;inset:0;z-index:100;overflow:hidden;touch-action:manipulation;isolation:isolate;cursor:pointer} #art-book .ab-opening-fill{position:absolute;inset:0;background:var(--accent);z-index:2;will-change:opacity} #art-book .ab-opening-title{position:absolute;inset:0;z-index:3;display:flex;align-items:center;justify-content:center;text-align:center;padding:max(28px,env(safe-area-inset-top)) max(28px,env(safe-area-inset-left),env(safe-area-inset-right));margin:0;color:#111211;font:400 clamp(28px,5.5vw,76px)/1.1 StudioWide,Arial,sans-serif;letter-spacing:-.04em;text-transform:uppercase;text-wrap:balance;pointer-events:none} #art-book .ab-opening-bands{position:absolute;left:50%;top:50%;width:180vmax;height:150vmax;transform:translate(-50%,-50%) rotate(-20deg);z-index:1;pointer-events:none} #art-book .ab-opening-band{position:absolute;left:0;width:100%;background:var(--accent);transform:scaleY(1.32);overflow:hidden;contain:paint;will-change:transform} #art-book .ab-opening-ink{display:block;width:max-content;height:100%;white-space:pre;color:#111211;font-family:Arial,sans-serif;font-weight:400;line-height:1;letter-spacing:-.15em;word-spacing:.2em;transform-origin:left center;animation:ab-opening-monologue 5s linear infinite;-webkit-text-stroke:.65px var(--accent)} #art-book .ab-opening-band:nth-child(even) .ab-opening-ink{animation-direction:reverse} #art-book.is-album-opening .ab-pages,#art-book.is-album-opening .ab-toolbar,#art-book.is-album-opening .ab-ending,#art-book.is-album-opening .ab-landscape-back{pointer-events:none} @keyframes ab-opening-monologue{from{transform:translateX(-140px) scaleX(.75)}to{transform:translateX(-440px) scaleX(.75)}} @media(max-width:760px) and (orientation:portrait){ #art-book .ab-opening-title{display:grid;place-content:center;font-size:clamp(27px,7.8vw,42px);padding-inline:max(22px,env(safe-area-inset-left),env(safe-area-inset-right));overflow-wrap:anywhere} #art-book .ab-opening-ink{display:flex;align-items:center;letter-spacing:-.085em;-webkit-text-stroke:.4px var(--accent)} } @media(pointer:coarse) and (orientation:landscape) and (max-height:600px){#art-book .ab-opening-title{font-size:clamp(22px,8svh,36px);padding-inline:max(52px,env(safe-area-inset-left),env(safe-area-inset-right))}} @media(prefers-reduced-motion:reduce){#art-book .ab-opening-ink{animation:none}#art-book .ab-end-close{transition:none}} #art-book.is-mobile-landscape .ab-landscape-back{z-index:60} @media(pointer:coarse) and (orientation:landscape) and (max-height:600px){ #art-book .ab-gallery-menu.is-open .ab-menu-nav{position:absolute;left:0;right:0;margin-inline:auto;overflow:auto;overscroll-behavior:contain;border:1px solid #ffffff30;border-radius:8px;background:#111211f5;box-shadow:0 14px 32px #0008} } /* Permanently expanded gallery menu: logo is Home, links remain in the bar. */ #art-book .ab-gallery-menu{width:max-content;max-width:calc(100% - 100px);gap:24px} #art-book .ab-menu-home{display:grid;place-items:center;flex:none;width:44px;height:44px;border:0;border-radius:6px;background:none;min-height:44px} #art-book .ab-gallery-menu.is-open .ab-menu-nav{position:static;top:auto;left:auto;right:auto;display:flex;flex-direction:row;align-items:center;flex-wrap:nowrap;gap:20px;width:auto;min-width:0;max-height:none;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-width:none;margin:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;touch-action:pan-x pan-y} #art-book .ab-menu-nav::-webkit-scrollbar{display:none} #art-book .ab-menu-nav a{font:400 12px/1.3 LemonMilkMenu,StudioWide,Arial,sans-serif;letter-spacing:.01em;text-transform:uppercase;flex-shrink:0;min-height:44px} #art-book .ab-menu-swatches{flex:none;grid-column:auto;justify-content:flex-start;padding:0} #art-book .ab-ending{justify-content:space-between;align-items:center} #art-book .ab-ending>span{display:block;flex:1;min-width:0;font-size:10px;letter-spacing:.12em} @media(max-width:1100px){ #art-book .ab-gallery-menu{width:100%;max-width:calc(100% - 100px);gap:14px} #art-book .ab-gallery-menu.is-open .ab-menu-nav{gap:18px} #art-book .ab-menu-nav a{font-size:11px} #art-book .ab-menu-nav .ab-menu-swatch{width:32px;min-height:44px;height:44px} } @media(pointer:coarse) and (orientation:landscape) and (max-height:600px){ #art-book .ab-gallery-menu{gap:12px} #art-book .ab-menu-home{width:34px;flex-basis:34px} #art-book .ab-gallery-menu.is-open .ab-menu-nav{gap:16px} #art-book .ab-menu-nav a{font-size:10px} #art-book .ab-menu-swatches{grid-column:auto;justify-content:flex-start} } /* Gallery edges share one responsive frame; footer follows the artwork edge. */ #art-book{--gallery-edge:clamp(13.6px,2.55vw,47.6px)} #art-book .ab-pages,#art-book .ab-ending{width:min(calc(100% - 2 * var(--gallery-edge)),1900px);max-width:none;margin-inline:auto;padding-inline:0;box-sizing:border-box} #art-book .ab-ending{padding-top:12px;padding-bottom:24px} @media(max-width:760px){#art-book{--gallery-edge:13.6px}} #art-book.is-mobile-landscape{--gallery-edge:max(20.4px,env(safe-area-inset-left),env(safe-area-inset-right))} #art-book.is-mobile-landscape .ab-pages{width:calc(100% - 2 * var(--gallery-edge));padding-inline:0} @media(hover:hover) and (pointer:fine){#art-book{--gallery-edge:clamp(40.8px,5.95vw,170px)}} #art-book .ab-wide-preview{grid-template-rows:var(--wide-height)} #art-book .ab-wide-preview>.ab-plate{height:var(--wide-height)} /* One visible Safari frame for the dialog and its independently fixed controls. */ html.gallery-is-open,html.gallery-is-open body{background-color:#101110!important;color-scheme:dark;overscroll-behavior:none} #art-book[open]{top:var(--gallery-view-top,0px);bottom:auto;height:var(--gallery-view-height,100dvh);min-height:0;overflow-y:auto;touch-action:pan-x pan-y pinch-zoom;-webkit-overflow-scrolling:touch} #art-book .ab-landscape-ui,#art-book.is-mobile-landscape .ab-landscape-ui,#art-book .ab-mobile-shade,#art-book .ab-album-opening{top:var(--gallery-view-top,0px);bottom:auto;height:var(--gallery-view-height,100dvh)} #art-book.is-mobile-landscape .ab-toolbar{top:var(--gallery-view-top,0px)} #art-book.is-mobile-landscape .ab-landscape-back{top:calc(var(--gallery-view-top,0px) + max(8px,env(safe-area-inset-top)))} @media(pointer:coarse){#art-book::backdrop{background:#101110}} /* Portrait navigation starts at its left edge beside the stationary moon. */ @media(pointer:coarse) and (orientation:portrait) and (max-width:760px){ #art-book .ab-gallery-menu{overflow:hidden;isolation:isolate} #art-book .ab-menu-home{position:relative;z-index:1;flex-shrink:0;background:#101110} #art-book .ab-gallery-menu.is-open .ab-menu-nav{justify-content:flex-start} } /* Preserve the original one-screen gallery footprint while art covers its footer. */ #art-book.has-fitted-desktop-art .ab-ending{visibility:hidden;pointer-events:none} /* The fixed dark frame never scrolls; its child owns native touch scrolling. */ #art-book[open]{overflow:hidden;-webkit-overflow-scrolling:auto} #art-book .ab-scroll{position:relative;width:100%;height:100%;min-height:0;overflow-x:hidden;overflow-y:auto;scrollbar-gutter:stable;overflow-anchor:none;overscroll-behavior:contain;scroll-behavior:auto;touch-action:pan-x pan-y pinch-zoom;-webkit-overflow-scrolling:auto;background:#101110;z-index:auto;isolation:auto} #art-book.has-expanded-art .ab-scroll{overscroll-behavior-y:none} #art-book.is-mobile-landscape .ab-scroll{padding-top:44px} /* Keep accent animation away from Safari's fixed-edge colour sampling. */ #art-book .ab-album-opening{position:absolute;inset:0;height:100%;touch-action:none} @media(pointer:coarse){ #art-book::after{content:'';position:absolute;inset:auto 0 0;height:max(1px,env(safe-area-inset-bottom));background:#101110;pointer-events:none;z-index:101} #art-book .ab-scroll{padding-bottom:env(safe-area-inset-bottom)} } @media(pointer:coarse){#art-book .ab-toolbar{background:#101110;backdrop-filter:none;-webkit-backdrop-filter:none}} /* A wide preview still respects the half-screen cap as browser chrome moves. */ #art-book .ab-wide-preview{grid-template-rows:min(var(--wide-height),calc(var(--gallery-view-height,100dvh) * .5))} #art-book .ab-wide-preview>.ab-plate{height:min(var(--wide-height),calc(var(--gallery-view-height,100dvh) * .5))} #art-book{--gallery-safe-bottom:env(safe-area-inset-bottom,0px)} /* Only the gallery frame is fixed to Safari's visual viewport. All controls share it. */ #art-book[open]{left:var(--gallery-view-left,0px);right:auto;width:var(--gallery-view-width,100%)} #art-book .ab-landscape-ui,#art-book.is-mobile-landscape .ab-landscape-ui,#art-book.has-touch-art:not(.is-mobile-landscape) .ab-landscape-ui,#art-book .ab-mobile-shade{position:absolute;top:0;left:0;right:0;bottom:auto;height:100%} #art-book.is-mobile-landscape .ab-toolbar{position:sticky;top:0;left:0;transform:none;opacity:1;pointer-events:auto} #art-book.is-mobile-landscape .ab-scroll{padding-top:0} #art-book.is-mobile-landscape .ab-landscape-back{position:absolute;top:max(8px,env(safe-area-inset-top))} /* Static gallery menu, including narrow portrait windows. */ #art-book .ab-toolbar,#art-book .ab-menu-nav{animation:none;transition:none} #art-book .ab-gallery-menu.is-open .ab-menu-nav{transform:none;clip-path:none;scroll-behavior:auto} @media(max-width:760px){#art-book:not(.is-mobile-landscape) .ab-gallery-menu.is-open .ab-menu-nav{justify-content:flex-start}} /* The selected artwork must share the shade's stacking context, above its z-index 3. */ #art-book.has-touch-art .ab-pages,#art-book.has-touch-art .ab-wall{z-index:auto;isolation:auto} /* Collection-level direction credit stays compact beneath the album title. */ #art-book .ab-collection-heading .ab-direction-credit{max-width:100%;padding-inline:8px;font:400 12px/1.4 Arial,Helvetica,sans-serif;letter-spacing:0;text-wrap:balance} #art-book .ab-direction-credit .ab-direction-label{color:var(--muted)} #art-book .ab-direction-credit .ab-direction-name{color:inherit} #art-book .ab-client-name{color:var(--accent)} @media(max-width:600px){#art-book .ab-collection-heading .ab-direction-credit{font-size:11px}} @media(pointer:coarse) and (orientation:landscape) and (max-height:600px){#art-book .ab-collection-heading .ab-direction-credit{font-size:11px;line-height:1.3}} /* One compact credit line beneath each album title. */ #art-book .ab-collection-heading .ab-collection-subtitle{display:block;max-width:100%;margin:0;padding-inline:8px;font:400 12px/1.4 Arial,Helvetica,sans-serif;letter-spacing:0;text-align:center;color:var(--muted);overflow-wrap:anywhere;text-wrap:balance} #art-book .ab-collection-heading .ab-direction-credit{display:inline;padding:0;font:inherit;letter-spacing:inherit} #art-book .ab-subtitle-divider{padding-inline:8px;color:var(--muted)} @media(max-width:600px){#art-book .ab-collection-heading .ab-collection-subtitle{font-size:11px}} @media(pointer:coarse) and (orientation:landscape) and (max-height:600px){#art-book .ab-collection-heading .ab-collection-subtitle{font-size:11px;line-height:1.3}} /* Pause gallery scenery while its opaque opening covers the artwork. */ #art-book .ab-background-bands:not(.is-paused) .ab-background-track{will-change:transform} #art-book .ab-background-bands.is-paused .ab-background-track{will-change:auto} /* An editorial opening tile: actual text, excluded from artwork controls/counts. */ #art-book .ab-project-intro{box-sizing:border-box;position:relative;display:flex;flex-direction:column;justify-content:center;gap:14px;min-width:0;margin:0;padding:clamp(22px,2.6vw,46px);background:#050505;color:#b8b8b8;clip-path:var(--tile-shape,none);text-align:left;overflow-wrap:break-word} #art-book .ab-slot-block>.ab-project-intro{position:absolute;left:var(--slot-x);top:var(--slot-y);width:var(--slot-width);height:var(--slot-height);padding-left:clamp(22px,2.6vw,46px);padding-right:clamp(22px,2.6vw,46px)} #art-book .ab-project-eyebrow{display:block;color:var(--accent);font:400 10px/1.3 Arial,sans-serif;letter-spacing:.14em} #art-book .ab-project-title{margin:0;color:#d4d4d4;font:400 clamp(22px,2.2vw,34px)/1.08 StudioWide,Arial,sans-serif;letter-spacing:-.035em;text-transform:uppercase} #art-book .ab-project-copy{margin:0;max-width:48ch;color:#b8b8b8;font:400 clamp(13px,1.12vw,17px)/1.5 Arial,sans-serif;letter-spacing:0;text-wrap:pretty} #art-book .ab-project-details{display:grid;gap:10px;margin:4px 0 0;padding-top:14px;border-top:1px solid #ffffff24;font:400 11px/1.4 Arial,sans-serif;letter-spacing:0} #art-book .ab-project-details>div{display:grid;grid-template-columns:46px minmax(0,1fr);gap:12px} #art-book .ab-project-details dt{color:#777}#art-book .ab-project-details dd{margin:0;color:#c4c4c4} @media(min-width:601px) and (max-width:1100px){#art-book .ab-slot-block>.ab-project-intro{gap:10px;padding:24px}#art-book .ab-project-copy{font-size:14px}} @media(max-width:600px){#art-book .ab-project-intro{padding:26px 22px;gap:12px}#art-book .ab-project-copy{max-width:none;font-size:15px;line-height:1.5}#art-book .ab-project-title{font-size:25px}} #art-book.is-mobile-landscape .ab-project-intro{padding:22px 26px;gap:10px}#art-book.is-mobile-landscape .ab-project-copy{max-width:80ch;font-size:14px;line-height:1.45} /* The project note inverts on devices with genuine hover; touch stays calm. */ @media(hover:hover) and (pointer:fine){ #art-book .ab-project-intro{transition:background-color .24s ease,color .18s ease} #art-book .ab-project-intro :is(.ab-project-eyebrow,.ab-project-title,.ab-project-copy,dt,dd){transition:color .18s ease} #art-book .ab-project-intro .ab-project-details{transition:border-color .18s ease} #art-book .ab-project-intro:hover{background:var(--accent);color:#111211} #art-book .ab-project-intro:hover :is(.ab-project-eyebrow,.ab-project-title,.ab-project-copy,dt,dd){color:#111211} #art-book .ab-project-intro:hover .ab-project-details{border-color:#11121140} } @media(prefers-reduced-motion:reduce){#art-book .ab-project-intro,#art-book .ab-project-intro *{transition:none!important}} /* Optional images belong to the expanded artwork, not the gallery wall. */ #art-book .ab-supplements{position:absolute;inset:100% 0 auto;padding:12px;background:#101110;color:var(--ink);scroll-margin-top:84px} #art-book .ab-supplements:focus{outline:none} #art-book .ab-supplement-title{margin:0 0 8px;font:400 10px/1.4 Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)} #art-book .ab-supplement-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px} #art-book .ab-supplement{position:relative;margin:0;min-width:0;align-self:start;background:#080908} #art-book .ab-supplement img{display:block;width:100%;height:auto;max-height:65svh;object-fit:contain} #art-book .ab-supplement figcaption{position:absolute;inset:auto 5px 5px auto;padding:3px 4px;background:#101110e6;color:var(--accent);font:400 11px/1 Arial,sans-serif;opacity:1;transform:none} #art-book .ab-plate[data-artwork-set].is-selected{visibility:hidden} #art-book .ab-supplement-jump{position:absolute;top:8px;left:8px;z-index:8;min-height:36px;padding:5px 11px;border:1px solid #ffffff50;border-radius:999px;background:#101110ee;color:var(--ink);font:400 11px/1 Arial,sans-serif} #art-book .ab-supplement-jump:hover{color:var(--accent)} @media(pointer:coarse){#art-book .ab-supplement-jump{min-height:44px}} @media(max-width:600px) and (orientation:portrait){ #art-book .ab-supplement-grid{grid-template-columns:minmax(0,1fr)} } /* A continuous, uncropped artwork column; smaller sources sit on black. */ #art-book .ab-supplements{padding:0;background:#000} #art-book .ab-supplement-grid{display:flex;flex-direction:column;gap:0} #art-book .ab-supplement{margin:0;background:#000;display:flex;justify-content:center;align-items:start;flex:none} #art-book .ab-supplement img{height:auto;max-height:none;max-width:100%;object-fit:contain;margin:0} #art-book .ab-supplements .ab-visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap} #art-book .ab-supplement-return{display:block;max-width:100%;border:0;padding:0;margin:0;background:#000;line-height:0;cursor:zoom-out;touch-action:pan-y pinch-zoom} #art-book .ab-supplement-return:focus-visible{outline:2px solid var(--accent);outline-offset:-2px} /* Two transparent faces, adapted from the approved standee reference. */ #art-book .ab-standee-tile .ab-art>img{object-fit:contain!important;object-position:center!important;background:#242622} #art-book .ab-standee-expansion .ab-expanded-art{perspective:1600px;background:#242622;padding:0 0 48px} #art-book .ab-standee-turn{position:relative;width:100%;height:100%;transform-style:preserve-3d} #art-book .ab-standee-turn .ab-standee-face{display:block;position:absolute;inset:0;width:100%;height:100%;min-width:0;min-height:0;max-width:none;max-height:none;margin:0;border:0;padding:12px;object-fit:contain;object-position:center;backface-visibility:hidden;-webkit-backface-visibility:hidden;transform:rotateY(var(--standee-side,0deg)) translateY(var(--standee-offset,0%)) scale(var(--standee-scale,1))} #art-book .ab-standee-back{--standee-side:180deg} #art-book .ab-standee-controls{position:absolute;bottom:26px;left:0;right:0;display:flex;justify-content:center;gap:6px;z-index:9} #art-book .ab-standee-controls button{padding:6px 12px;min-height:34px;border:1px solid #ffffff50;border-radius:24px;background:#101110;color:var(--ink);font:12px Arial} #art-book .ab-standee-controls button:hover{color:var(--accent);border-color:var(--accent)} @keyframes ab-standee-turn{0%,12.6%{transform:rotateY(0deg)}41.7%,60.6%{transform:rotateY(180deg)}92.1%,100%{transform:rotateY(360deg)}} @media(prefers-reduced-motion:reduce){#art-book .ab-standee-turn{animation:none}} #art-book .ab-project-intro-full{margin-bottom:8px} #art-book .ab-project-intro-full .ab-project-copy{max-width:78ch;white-space:pre-line} #art-book .ab-project-intro-full .ab-project-details>div{grid-template-columns:minmax(64px,130px) minmax(0,1fr)} #art-book .ab-project-intro-full .ab-project-details a{color:inherit;text-decoration:underline;text-underline-offset:2px} /* Keep the opening artwork pair landscape beside the brief on wide screens. */ #art-book .ab-landscape-opening{ display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr); gap:var(--mosaic-gap);align-items:stretch; } #art-book .ab-landscape-opening .ab-project-intro-full{margin:0} #art-book .ab-landscape-pair{ display:grid;grid-template-rows:repeat(2,minmax(0,1fr));gap:var(--mosaic-gap); align-self:center;min-width:0; } #art-book .ab-landscape-pair .ab-plate{aspect-ratio:2.25;height:auto} #art-book .ab-landscape-pair .ab-art{position:absolute;inset:0} @media(max-width:760px), (orientation:landscape) and (max-height:600px) and (pointer:coarse){ #art-book .ab-landscape-opening{grid-template-columns:minmax(0,1fr)} #art-book .ab-landscape-pair{grid-template: auto / repeat(2,minmax(0,1fr))} #art-book .ab-landscape-pair .ab-plate{aspect-ratio:1.65} } /* Fit the whole brief inside its diagonal tile, with a readable type floor. */ #art-book .ab-project-content{display:flex;flex:none;flex-direction:column;gap:inherit;min-width:0} #art-book .ab-slot-block>.ab-project-intro{ --brief-scale:1; --brief-left:clamp(18px,2vw,36px); --brief-right:calc((20px + var(--slot-height) * .071) * var(--brief-inset-scale,1)); justify-content:safe center;gap:calc(11px * var(--brief-scale)); padding:clamp(12px,2dvh,24px) var(--brief-right) clamp(12px,2dvh,24px) var(--brief-left); } /* The diagonal can widen the tile after fitting. Keep the text in the original slot. */ #art-book .ab-slot-block>.ab-project-intro>.ab-project-content{ inline-size:max(0px,calc(var(--slot-width) - var(--brief-left) - var(--brief-right))); } @media(max-width:1100px){ #art-book .ab-slot-block>.ab-project-intro{--brief-inset-scale:1.1} } #art-book .ab-slot-block .ab-project-title{font-size:max(20px,calc(clamp(22px,2.2vw,34px) * var(--brief-scale)))} #art-book .ab-slot-block .ab-project-copy{font-size:max(13px,calc(clamp(14px,1.12vw,17px) * var(--brief-scale)));line-height:1.43} #art-book .ab-slot-block .ab-project-details{gap:7px;padding-top:10px} #art-book .ab-slot-block .ab-project-intro-full .ab-project-details>div{grid-template-columns:minmax(58px,27%) minmax(0,1fr);gap:9px} #art-book .ab-series-title{ margin:0;padding:8px 0 2px;color:var(--accent);font:700 clamp(15px,1.55vw,24px)/1.2 Arial,Helvetica,sans-serif; } #art-book[data-album="witcher-cyberpunk-red-shadow-scar"] .ab-series-title, #art-book[data-album="universus-alt-arts"] .ab-series-title{ color:#fff;font:400 clamp(30px,3.1vw,48px)/1.2 StudioWide,Arial,sans-serif;overflow-wrap:anywhere; } /* Attached information footer: never paint over embedded artwork credits. */ #art-book .ab-inline-expansion:not(.is-touch-expansion) .ab-inline-metadata, #art-book .ab-inline-expansion.is-touch-expansion .ab-inline-metadata{ top:100%;bottom:auto;left:0;box-sizing:border-box;width:100%;height:24px; max-height:24px;min-height:0;padding:4px 54px 4px 8px; background:#050605;overflow:auto;font:11px/14px Arial,sans-serif; } #art-book .ab-inline-expansion:not(.is-touch-expansion) .ab-inline-metadata::before{display:none} #art-book .ab-inline-expansion .ab-expanded-count, #art-book .ab-inline-expansion.is-landscape-pan .ab-expanded-count{ top:calc(100% + 4px);bottom:auto;left:auto;right:10px;z-index:6; } #art-book .ab-inline-expansion .ab-supplements{top:calc(100% + 24px)} /* services-direct.css */ @font-face{font-family:LemonMilkMedium;src:url('https://cdn.prod.website-files.com/6ace877c1c1df34e33b7760b/6af5492c33b08cae36853b81_bm-runtime-lemon-milk-medium.woff') format('woff');font-style:normal;font-weight:400;font-display:swap} @font-face{font-family:LemonMilkRegular;src:url('https://cdn.prod.website-files.com/6ace877c1c1df34e33b7760b/6af5492cf61be80b9f80adff_bm-runtime-lemon-milk-regular.woff') format('woff');font-style:normal;font-weight:400;font-display:swap} /* Approved desktop tuning, with scaled typography and spacing per screen. */ #homepage #services.services-direct{ --service-main-size:clamp(48px,4.76vw,72px);--service-title-size:clamp(32px,3.05vw,46px);--service-close-size:clamp(31px,2.82vw,42.5px);--service-body-size:21px; --service-main-line:.95;--service-main-tracking:-.1em;--service-main-word:.36em;--service-title-line:1.13;--service-body-line:1.35; --service-top:145px;--service-bottom:200px;--service-paragraph-gap:32px;--service-intro-gap:90px;--service-column-gap:130px;--service-row-gap:45px;--service-close-gap:90px;--service-title-gap:15px; display:block;padding-top:var(--service-top);padding-bottom:var(--service-bottom) } #homepage #services.services-direct .services-intro{display:block;margin-bottom:var(--service-intro-gap)} #services.services-direct .services-intro>.eyebrow{margin-bottom:clamp(24px,3vw,38px)} #services.services-direct .services-accessible-title{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0} #services .services-main-paragraphs{display:grid;gap:var(--service-paragraph-gap)} #services.services-direct .services-main-copy{min-width:0;max-width:none;margin:0;color:#8f8f8f;font:400 var(--service-main-size)/var(--service-main-line) LemonMilkMedium,Arial,sans-serif;letter-spacing:var(--service-main-tracking);word-spacing:var(--service-main-word);text-align:left;text-transform:uppercase;text-wrap:pretty;overflow-wrap:break-word} #services.services-direct .services-main-copy strong{color:var(--accent);font-weight:inherit} #services.services-direct .services-support{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--service-column-gap);row-gap:var(--service-row-gap);align-items:start} #services.services-direct .service-explanation{min-width:0} #services.services-direct .service-explanation h3{margin:0 0 var(--service-title-gap);color:#d4d4d4;font:400 var(--service-title-size)/var(--service-title-line) StudioWide,Arial,sans-serif;text-transform:uppercase;letter-spacing:-.02em;overflow-wrap:break-word} #services.services-direct .service-explanation p{max-width:90%;margin:0;color:#b8b8b8;font:400 var(--service-body-size)/var(--service-body-line) Arial,Helvetica,sans-serif;letter-spacing:-.005em;word-spacing:.04em;text-align:left;text-transform:none;text-wrap:pretty} #services.services-direct .services-invitation{margin-top:var(--service-close-gap);max-width:1000px} #services.services-direct .services-invitation h3{margin:0 0 20px;color:#d4d4d4;font:400 var(--service-close-size)/var(--service-title-line) StudioWide,Arial,sans-serif;letter-spacing:-.02em;text-transform:uppercase;text-wrap:balance;overflow-wrap:break-word} #services.services-direct .services-invitation h3 span{color:inherit} #services.services-direct .services-invitation h3 .closing-independent{color:var(--accent)} #services.services-direct .services-invitation p{max-width:95%;margin:0;color:#c4c4c4;font:400 var(--service-body-size)/var(--service-body-line) Arial,Helvetica,sans-serif;letter-spacing:-.01em;word-spacing:0;text-transform:none;text-wrap:pretty} @media(max-width:1100px){ #homepage #services.services-direct{--service-main-size:clamp(38px,5.1vw,54px);--service-title-size:clamp(28px,3.5vw,36px);--service-close-size:clamp(28px,3.3vw,34px);--service-body-size:19px;--service-main-line:1.02;--service-main-tracking:-.08em;--service-main-word:.24em;--service-body-line:1.4;--service-top:110px;--service-bottom:140px;--service-paragraph-gap:28px;--service-intro-gap:72px;--service-column-gap:60px;--service-row-gap:40px;--service-close-gap:70px;--service-title-gap:15px} #services.services-direct .service-explanation p{max-width:100%} } @media(max-width:760px){ #homepage #services.services-direct{--service-main-size:clamp(29px,7.7vw,45px);--service-title-size:clamp(27px,6.6vw,33px);--service-close-size:clamp(26px,6.4vw,32px);--service-body-size:17px;--service-main-line:1.06;--service-main-tracking:-.065em;--service-main-word:.16em;--service-title-line:1.15;--service-body-line:1.45;--service-top:80px;--service-bottom:110px;--service-paragraph-gap:24px;--service-intro-gap:56px;--service-column-gap:0px;--service-row-gap:36px;--service-close-gap:60px;--service-title-gap:15px} #services.services-direct .services-support{grid-template-columns:1fr} #services.services-direct .service-explanation h3 br{display:none} #services.services-direct .services-invitation h3{margin-bottom:16px} } @media(pointer:coarse) and (orientation:landscape) and (max-height:600px){ #homepage #services.services-direct{--service-main-size:clamp(30px,4.4vw,45px);--service-title-size:clamp(24px,3vw,30px);--service-close-size:clamp(24px,2.9vw,29px);--service-body-size:16px;--service-main-line:1.03;--service-main-tracking:-.07em;--service-main-word:.2em;--service-title-line:1.15;--service-body-line:1.4;--service-top:65px;--service-bottom:85px;--service-paragraph-gap:22px;--service-intro-gap:48px;--service-column-gap:40px;--service-row-gap:36px;--service-close-gap:50px;--service-title-gap:15px} #services.services-direct .services-support{grid-template-columns:repeat(2,minmax(0,1fr))} #services.services-direct .service-explanation p{max-width:100%} #services.services-direct .service-explanation h3 br{display:none} #services.services-direct .services-invitation h3{margin-bottom:16px} } /* Scope labels and restrained emphasis keep the service copy easy to scan. */ #services.services-direct .service-scope{display:block;margin-top:14px;color:var(--accent);font:400 clamp(12px,1vw,15px)/1.35 LemonMilkRegular,Arial,sans-serif;letter-spacing:0;text-transform:none} #services.services-direct .service-explanation p em{color:#e0e0e0;font-weight:400;font-style:normal} @media(max-width:760px){#services.services-direct .services-invitation p{max-width:100%}} /* Experience → services → clients, with the approved spacing. */ #homepage #stats.studio-counters{padding-top:110px;padding-bottom:0;border-top:0} #homepage #services.services-direct{--service-bottom:110px} #homepage #clients{padding-bottom:144px} @media(max-width:760px){#homepage #clients{padding-bottom:130px}} /* The full-width divider closes Work before the counters begin. */ #homepage #work{border-bottom:1px solid var(--line)} #homepage #clients{border-top:0} /* Approved desktop preset; narrower screen profiles retain their adaptation. */ @media(min-width:1101px){ #homepage #services.services-direct{--service-main-size:65px;--service-main-tracking:-.04em;--service-main-word:.02em;--service-body-size:23px;--service-body-line:1.42;--service-paragraph-gap:32px;--service-intro-gap:80px;--service-close-gap:70px;--service-title-gap:20px;--service-row-gap:55px;--service-column-gap:130px;--service-title-size:46px;--service-close-size:42.5px;--service-top:90px;--service-bottom:0px} #homepage #work{padding-bottom:140px} #homepage #stats.studio-counters{padding-top:90px;padding-bottom:90px} #homepage #clients{padding-top:90px;padding-bottom:180px} #services.services-direct .service-explanation p{max-width:90%} #services.services-direct .services-invitation p{max-width:100%;word-spacing:.02em} } /* Keep the service name together without altering its typography. */ @media(min-width:761px),(orientation:landscape){ #services .services-main-copy .service-keep-together{white-space:nowrap} } /* Phone portrait: tighter evidence block and a 70% smaller services → logos gap. */ @media(max-width:760px) and (orientation:portrait){ #homepage #stats.studio-counters{padding-top:48px;padding-bottom:12px} #stats .stats{margin-top:20px;gap:12px} #stats .stat{padding-bottom:10px} #stats .stat strong{font-size:44px;line-height:1.15} #stats .stat>span{margin-top:6px;font-size:13px;line-height:1.4} #homepage #services.services-direct{--service-top:32px;--service-bottom:33px} #homepage #clients{padding-top:19.5px} } /* Wide-format typography adjustment; portrait phones retain their current scale. */ @media(min-width:761px),(orientation:landscape){ #homepage #services.services-direct .services-main-copy{font-size:74px;max-width:98%} } /* Portrait counters: retain internal rules, omit the trailing divider. */ @media(max-width:760px) and (orientation:portrait){ #homepage #stats .stat:last-child{border-bottom:0} } /* Approved phone-landscape tuning. */ @media(pointer:coarse) and (orientation:landscape) and (max-height:600px){ #homepage #services.services-direct .services-main-copy{font-size:48px;max-width:98%;line-height:.95} #homepage #stats.studio-counters{padding-top:40px;padding-bottom:40px} #homepage #services.services-direct{--service-top:45px;--service-bottom:45px} #homepage #clients{padding-top:10px;padding-bottom:75px} #homepage #work>.artnote{width:100%;max-width:100%;margin:20px 0 0;padding:0;text-align:left;overflow-wrap:break-word} } html[data-landscape-frame] #homepage #work>.artnote{width:100%;max-width:100%;margin:20px 0 0;padding:0;text-align:left;overflow-wrap:break-word} /* Service detail column paired with a vertically centred invitation. */ #services .services-detail-layout{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:var(--service-column-gap);align-items:start} #services .services-detail-layout::before{content:'';position:absolute;left:50%;top:0;bottom:0;width:1px;background:var(--line);pointer-events:none} #homepage #services.services-direct .services-detail-layout>.services-support{grid-template-columns:minmax(0,1fr);row-gap:var(--service-row-gap)} #homepage #services.services-direct .services-detail-layout>.services-invitation{margin-top:0;min-width:0;max-width:100%;align-self:center} @media(max-width:760px){ #services .services-detail-layout{grid-template-columns:minmax(0,1fr);row-gap:var(--service-close-gap)} #services .services-detail-layout::before{display:none} #homepage #services.services-direct .services-detail-layout>.services-invitation{border-top:1px solid var(--line);padding-top:32px} } @media(pointer:coarse) and (orientation:landscape) and (max-height:600px){ #services .services-detail-layout{grid-template-columns:minmax(0,1fr);row-gap:var(--service-close-gap)} #services .services-detail-layout::before{display:none} #homepage #services.services-direct .services-detail-layout>.services-invitation{border-top:1px solid var(--line);padding-top:28px} } /* Deliberate audience lines: keep Independent creators together. */ #services.services-direct .services-invitation{container-type:inline-size} #services.services-direct .services-invitation h3 .closing-independent{white-space:nowrap;font-size:min(1em,7.2cqi)} /* Supporting descriptions are 20% smaller at every screen size. */ #services.services-direct .service-explanation p, #services.services-direct .services-invitation p{font-size:calc(var(--service-body-size)*.8)} /* Keep the final audience phrase whole on wide layouts only. */ @media(min-width:761px){ #services.services-direct .services-invitation h3 .closing-players{white-space:nowrap;font-size:min(1em,4.45cqi)} } @media(pointer:coarse) and (orientation:landscape) and (max-height:600px){ #services.services-direct .services-invitation h3 .closing-players{white-space:nowrap;font-size:min(1em,4.45cqi)} } /* services-lines.css */ #services .services-main-copy.has-line-layout{display:flex;flex-direction:column;align-items:flex-start} #services .service-copy-line{display:block;flex:none;box-sizing:border-box;width:100%;max-width:100%;overflow-wrap:anywhere;text-wrap:initial} #services .service-copy-line.is-auto-fit .service-copy-run{display:inline-block;white-space:pre;max-width:none} /* client-logos.css */ /* Three rows, with each logo's original dimensions scaled up by 30%. */ #clients{--client-logo-row:124px;--client-logo-column:234px;--client-logo-max-height:93.6px;--client-logo-row-gap:24px;--client-logo-column-gap:26px} #clients .logo-track{gap:var(--client-logo-column-gap)} #clients .logo-cycle{ display:flex;flex:none;flex-direction:column;gap:var(--client-logo-row-gap); width:calc(var(--client-logo-columns) * (var(--client-logo-column) + var(--client-logo-column-gap)) - var(--client-logo-column-gap)); } #clients .logo-row{ display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr); min-height:var(--client-logo-row);gap:var(--client-logo-column-gap); } #clients .logo-cell{min-width:0;min-height:0} #clients .logo-cell img{display:block;width:calc(var(--logo-native-width,180px)*1.3);height:auto;max-width:85%;max-height:var(--client-logo-max-height);object-fit:contain} #clients .logo-viewport{padding-top:14px;padding-bottom:14px} @media(max-width:760px){ #clients{--client-logo-row:104px;--client-logo-column:175.5px;--client-logo-max-height:78px;--client-logo-row-gap:18px} #clients .logo-viewport{padding-top:12px;padding-bottom:12px} } @media(pointer:coarse) and (orientation:landscape) and (max-height:600px){ #clients{--client-logo-row:110px;--client-logo-column:169px;--client-logo-row-gap:16px} #clients .logo-viewport{padding-top:12px;padding-bottom:12px} } /* services-appearance.css */ /* Approved desktop service / closing preset, independent of review tools. */ @media(min-width:1101px){ #homepage #services.services-direct{--service-column-gap:110px;--service-row-gap:50px;--service-intro-gap:80px} #homepage #services.services-direct .services-detail-layout{grid-template-columns:minmax(0,45fr) minmax(0,55fr);column-gap:110px;row-gap:0} #homepage #services.services-direct .services-detail-layout::before{left:calc((100% - 110px)*.45 + 55px)} #homepage #services.services-direct .services-invitation h3{line-height:1.1;letter-spacing:-.02em;margin-bottom:24px} #homepage #services.services-direct .closing-publishers{font-size:62px} #homepage #services.services-direct .closing-independent{font-size:min(55px,7.2cqi)} #homepage #services.services-direct .closing-players{font-size:min(42px,4.45cqi)} #homepage #services.services-direct .services-invitation p{font-size:20.8px;line-height:1.4;max-width:92%} #homepage #services.services-direct .service-explanation h3{margin-bottom:16px} #homepage #services.services-direct .service-explanation p{font-size:18px;max-width:90%} } @media(pointer:coarse) and (orientation:landscape) and (max-height:600px){ #homepage #services.services-direct .services-detail-layout{grid-template-columns:minmax(0,1fr)} } #services .services-intro-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:clamp(24px,3vw,38px)} #services .services-intro-heading>.eyebrow{margin-bottom:0} /* frame-deck.css */ #art-book .fd-thumb{background:#151615;isolation:isolate} #art-book .fd-thumb img{position:absolute!important;inset:auto!important;left:50%!important;top:48%!important;width:66%!important;height:83%!important;object-fit:contain!important;transform:translate(calc(-50% + var(--fan)*18%),calc(-50% + var(--fan)*0%)) rotate(calc(var(--fan)*10deg));filter:none!important} #art-book .fd-view{position:absolute;inset:0;z-index:200;background:#101110f7;display:grid;grid-template-rows:auto minmax(0,1fr) auto;padding:20px max(18px,env(safe-area-inset-left)) max(16px,env(safe-area-inset-bottom));overflow:hidden;overscroll-behavior:none} .fd-head{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:0 14px}.fd-head h2{font:18px Arial,sans-serif;color:#ddd;margin:0}.fd-close{width:44px;height:44px;border:1px solid #ffffff50;border-radius:50%;background:#101110;color:var(--accent);font:30px Arial;cursor:pointer} .fd-stage{position:relative;min-height:0;overflow:hidden;touch-action:pan-y;cursor:grab;outline-offset:-3px}.fd-stage:active{cursor:grabbing} .fd-card{position:absolute;left:50%;top:50%;height:90%;width:auto;aspect-ratio:2240/3493;border:0;padding:0;background:none;cursor:pointer;transform-origin:center center;will-change:transform;backface-visibility:hidden} .fd-card img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none;user-select:none;-webkit-user-drag:none;filter:drop-shadow(0 8px 10px #0007)} .fd-settle .fd-card{transition:transform 300ms cubic-bezier(.2,.7,.2,1),opacity 300ms ease} .fd-foot{text-align:center;padding:8px 0 0;z-index:20}.fd-name{font:13px/1.3 Arial,sans-serif;color:#ddd;margin:0 0 10px}.fd-controls{display:flex;align-items:center;justify-content:center;gap:22px}.fd-controls button{width:44px;height:38px;background:none;border:1px solid #ffffff40;border-radius:22px;color:var(--accent);font:24px Arial;cursor:pointer}.fd-controls button:hover,.fd-close:hover{background:var(--accent);color:#101110}.fd-count{font:12px Arial,sans-serif;color:var(--accent);font-variant-numeric:tabular-nums}.fd-hint{font:10px Arial,sans-serif;color:#888;margin:8px 0 0}.has-frame-deck .ab-landscape-ui{visibility:hidden} @media(max-width:600px){.fd-head h2{font-size:14px}.fd-card{height:min(90%,115vw);max-width:74vw}.fd-name{font-size:11px}.fd-stage{min-height:180px}} @media(orientation:landscape) and (max-height:600px){#art-book .fd-view{padding-top:6px;padding-bottom:6px;grid-template-rows:minmax(0,1fr) auto}.fd-head{position:absolute;left:8px;right:8px;top:6px;z-index:25}.fd-head h2{font-size:12px}.fd-card{height:95%;max-width:45vw}.fd-stage{min-height:0}.fd-foot{display:flex;align-items:center;justify-content:center;gap:18px;padding-top:2px}.fd-name{margin:0;max-width:40%;font-size:10px}.fd-hint{display:none}.fd-controls button{height:32px}.fd-close{width:36px;height:36px}.fd-controls{gap:12px}} @media(prefers-reduced-motion:reduce){.fd-settle .fd-card{transition:none}} #art-book .fd-head{position:relative;inset:auto;height:auto;min-height:44px;width:auto;max-width:none;margin:0;background:none;border:0;transform:none} #art-book .fd-foot{display:block;position:relative;inset:auto;height:auto;min-height:0;margin:0;border:0;background:none} #art-book .fd-close{display:grid;place-items:center;width:44px;height:44px;padding:0;border-radius:50%;font-size:30px} @media(orientation:landscape) and (max-height:600px){#art-book .fd-head{position:absolute;inset:6px 8px auto;z-index:25}#art-book .fd-foot{display:flex;gap:18px;align-items:center;justify-content:center}} /* Paired frames share the artwork viewer's dark surface and compact metadata strip. */ #art-book .fd-thumb-3 img{left:calc(27% + var(--side)*46%)!important;width:43%!important;height:78%!important;transform:translate(-50%,-50%)} #art-book .fd-view.fd-mode-3{ display:grid;grid-template-rows:minmax(0,1fr);place-items:center;background:#0003; padding:max(12px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left)); } #art-book .fd-pair-panel{ position:relative;display:grid;grid-template-rows:auto minmax(0,1fr) auto; width:min(920px,100%);height:min(670px,78dvh); background:#101110;border:1px solid #ffffff24;border-radius:12px;overflow:hidden; box-shadow:0 12px 36px #0009; } #art-book .fd-mode-3 .fd-head{position:relative;inset:auto;min-height:0;padding:5px 8px 4px 13px;z-index:25} #art-book .fd-mode-3 .fd-head h2{font-size:clamp(13px,1.45vw,17px)} #art-book .fd-mode-3 .fd-close{flex:none;width:34px;height:34px;border-radius:9px;background:#101110e8;font-size:25px} #art-book .fd-mode-3 .fd-stage{min-height:0;touch-action:none} #art-book .fd-mode-3 .fd-card{ width:calc(100% - 112px);max-width:none;height:92%;aspect-ratio:auto; display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(10px,3vw,40px); } #art-book .fd-pair-member{display:grid;grid-template-rows:minmax(0,1fr) auto;gap:8px;min-width:0;min-height:0} #art-book .fd-pair-member img{min-height:0} #art-book .fd-pair-caption{color:#c9c9c4;font:12px/1.3 Arial,sans-serif;text-align:center} #art-book .fd-mode-3 .fd-foot{ position:static;display:flex;align-items:center;justify-content:space-between;gap:12px; padding:9px 13px;background:#080908ed;border-top:1px solid #ffffff1a;text-align:left; } #art-book .fd-mode-3 .fd-name{order:1;margin:0 0 0 auto;max-width:none} #art-book .fd-mode-3 .fd-controls{display:contents} #art-book .fd-mode-3 .fd-credit{min-width:0;color:#aaa;font:11px/1.2 Arial,sans-serif;text-align:left} #art-book .fd-mode-3 .fd-count{order:2;flex-shrink:0;white-space:nowrap} #art-book .fd-mode-3 .fd-controls button{ position:absolute;top:50%;transform:translateY(-50%); display:grid;place-items:center;width:44px;height:44px;padding:0; border-radius:9px;background:#101110e8;color:var(--accent); } #art-book .fd-mode-3 .fd-controls button:first-child{left:8px} #art-book .fd-mode-3 .fd-controls button:last-child{right:8px} #art-book .fd-mode-3 :is(.fd-controls button,.fd-close):is(:hover,:focus-visible){background:var(--accent);color:#101110} @media(max-width:600px){ #art-book .fd-pair-panel{height:min(560px,max(310px,128vw),78dvh)} #art-book .fd-mode-3 .fd-card{width:calc(100% - 92px);height:86%;gap:10px} #art-book .fd-mode-3 .fd-controls button{width:38px;height:44px} #art-book .fd-mode-3 .fd-controls button:first-child{left:4px} #art-book .fd-mode-3 .fd-controls button:last-child{right:4px} #art-book .fd-pair-caption{font-size:11px} } @media(orientation:landscape) and (max-height:600px){ #art-book .fd-pair-panel{height:calc(100dvh - 28px);width:min(720px,94%)} #art-book .fd-mode-3 .fd-card{height:91%} }