#keir-full-study { --ec-paper:#f2f1e9; --ec-ink:#23251e; --ec-green:#b9e944; --ec-line:#b9baae; color-scheme:light; background:var(--ec-paper); color:var(--ec-ink); font:400 15px/1.65 'DM Sans',sans-serif; width:100%; max-width:2240px; margin-inline:auto; padding:0 clamp(20px,4vw,96px); }
#keir-full-study * { box-sizing:border-box; }
#keir-full-study [hidden] { display:none!important; }
#keir-full-study h1,#keir-full-study h2,#keir-full-study h3,#keir-full-study p,#keir-full-study figure { margin:0; color:inherit; }
#keir-full-study button { color:inherit; font:inherit; border:0; background:transparent; padding:0; text-align:left; }
#keir-full-study img { display:block; width:100%; max-width:100%; }
#keir-full-study a:focus-visible,#keir-full-study button:focus-visible { outline:3px solid var(--ec-ink); outline-offset:5px; }
#keir-full-study .ec-header { display:flex; justify-content:space-between; align-items:center; min-height:90px; gap:24px; border-bottom:1px solid var(--ec-line); padding-right:80px; }
#keir-full-study .ec-brand { display:flex; gap:13px; align-items:center; }
#keir-full-study .ec-brand img { width:43px; height:43px; object-fit:contain; }
#keir-full-study .ec-brand span { font:600 29px/1 'Space Grotesk',sans-serif; letter-spacing:-1.7px; }
#keir-full-study .ec-brand b { font-weight:400; }
#keir-full-study nav { display:flex; gap:25px; }
#keir-full-study nav a { font-size:12px; min-height:44px; }
#keir-full-study nav a[aria-current] { border-bottom:2px solid var(--ec-ink); }
#keir-full-study .ec-eyebrow { font:500 11px/1.5 'DM Sans',sans-serif; letter-spacing:1.2px; }
#keir-full-study .ec-hero { padding:43px 0 35px; }
#keir-full-study .ec-hero h1 { font:500 clamp(44px,8.7vw,94px)/.98 'Space Grotesk',sans-serif; letter-spacing:-4.7px; margin:27px 0 29px; }
#keir-full-study .ec-hero-heading { display:flex; align-items:flex-end; flex-wrap:wrap; gap:24px; margin-top:27px; }
#keir-full-study .ec-hero .ec-hero-heading h1 { margin:0; max-width:100%; }
#keir-full-study .ec-scroll-button { display:grid; place-items:center; flex:0 0 auto; width:66px; height:66px; margin-bottom:5px; font-size:52px; line-height:1; letter-spacing:0; background:var(--ec-green); border-radius:50%; text-align:center; color:inherit; text-decoration:none; transition:transform .2s ease; }
#keir-full-study .ec-scroll-button:hover { transform:translateY(3px); }
#keir-full-study #ec-selected-work { scroll-margin-top:24px; }
#keir-full-study .ec-rule { display:flex; justify-content:space-between; gap:15px; padding:15px 0 25px; border-top:1px solid var(--ec-line); font-size:10px; letter-spacing:1px; }
#keir-full-study .ec-project-grid { display:grid; grid-template-columns:1.3fr 1fr; gap:50px 7%; padding-bottom:55px; }
#keir-full-study .ec-photo { width:100%; position:relative; display:block; overflow:hidden; }
#keir-full-study .ec-photo img { height:100%; object-fit:cover; transition:transform .25s ease; }
#keir-full-study .ec-photo:hover img { transform:scale(1.025); }
#keir-full-study .ec-photo > span { position:absolute; right:14px; bottom:14px; width:36px; height:36px; display:grid; place-items:center; background:var(--ec-paper); border-radius:50%; font-size:24px; }
#keir-full-study .ec-first .ec-photo { height:310px; }
#keir-full-study .ec-second { padding-top:140px; }
#keir-full-study .ec-second .ec-photo { height:350px; }
#keir-full-study .ec-third { margin-top:-80px; }
#keir-full-study .ec-third .ec-photo { height:360px; }
#keir-full-study .ec-caption { display:flex; justify-content:space-between; gap:12px; align-items:center; padding-top:15px; }
#keir-full-study .ec-caption h2 { font:500 25px/1.15 'Space Grotesk',sans-serif; letter-spacing:-.8px; }
#keir-full-study .ec-caption > span { font-size:10px; }
#keir-full-study .ec-project > p { padding-top:5px; font-size:12px; }
#keir-full-study .ec-project > small { font-size:11px; }
#keir-full-study .ec-philosophy { padding-top:16px; }
#keir-full-study .ec-philosophy > p:nth-child(2) { font:400 25px/1.35 'Space Grotesk',sans-serif; letter-spacing:-.6px; margin-top:20px; }
#keir-full-study .ec-text-button { display:inline-block; border-bottom:1px solid var(--ec-ink); font-size:12px; padding-bottom:5px; margin-top:20px; min-height:32px; }
#keir-full-study .ec-index-list { display:grid; grid-template-columns:1fr 1fr; column-gap:7%; }
#keir-full-study .ec-index-list a { display:flex; width:100%; align-items:center; justify-content:space-between; gap:14px; padding:14px 0; border-bottom:1px solid var(--ec-line); font-size:14px; }
#keir-full-study .ec-index-list a:hover { background:color-mix(in srgb,var(--ec-green) 35%,transparent); }
#keir-full-study .ec-index-list a > span:first-child { font-size:10px; min-width:22px; }
#keir-full-study .ec-index-list a > span:nth-child(2) { flex:1; }
#keir-full-study .ec-project-index { padding-bottom:48px; }
#keir-full-study .ec-home-about { display:grid; grid-template-columns:1fr 2fr; gap:30px; border-top:1px solid var(--ec-line); padding:35px 0 60px; }
#keir-full-study .ec-home-about > div > p { font-size:20px; line-height:1.6; letter-spacing:-.3px; }
#keir-full-study .ec-page-title { padding:38px 0 35px; }
#keir-full-study .ec-page-title .ec-eyebrow { margin:22px 0; }
#keir-full-study .ec-page-title h1 { font:500 clamp(40px,7.1vw,76px)/1.05 'Space Grotesk',sans-serif; letter-spacing:-3.5px; overflow-wrap:anywhere; }
#keir-full-study .ec-page-title .ec-text-button { margin:0 0 10px; }
#keir-full-study .ec-prose-grid { display:grid; grid-template-columns:1fr 2fr; gap:35px; border-top:1px solid var(--ec-line); padding:30px 0 35px; }
#keir-full-study .ec-prose-grid > h2,#keir-full-study .ec-prose-grid > div > h2 { font:500 30px/1.1 'Space Grotesk',sans-serif; letter-spacing:-1px; }
#keir-full-study .ec-reading { max-width:610px; }
#keir-full-study .ec-reading p { margin-bottom:22px; font-size:16px; line-height:1.8; }
#keir-full-study .ec-reading p:last-child { margin-bottom:0; }
#keir-full-study .ec-audi { display:grid; grid-template-columns:1fr 1fr; gap:6%; padding:8px 0 45px; }
#keir-full-study .ec-audi figure:nth-child(2) { padding-top:70px; }
#keir-full-study .ec-audi img { aspect-ratio:4/3; object-fit:cover; }
#keir-full-study figcaption { font-size:11px; line-height:1.6; padding-top:10px; }
#keir-full-study .ec-awards { padding-bottom:55px; }
#keir-full-study .ec-awards h2 { margin-top:12px; }
#keir-full-study .ec-awards details { border-bottom:1px solid var(--ec-line); padding:15px 0; }
#keir-full-study .ec-awards summary { font-size:14px; font-weight:500; }
#keir-full-study .ec-awards details p { font-size:13px; padding:13px 0 2px; }
#keir-full-study .ec-contact-reading { padding-bottom:65px; max-width:620px; }
#keir-full-study .ec-project-hero img { max-height:490px; object-fit:contain; }
#keir-full-study .ec-project-hero { margin-bottom:35px; }
#keir-full-study .ec-project-body { padding-bottom:20px; }
#keir-full-study .ec-project-copy { display:grid; grid-template-columns:1fr 2fr; gap:35px; border-top:1px solid var(--ec-line); padding:28px 0; }
#keir-full-study .ec-project-copy h2 { font:500 27px/1.15 'Space Grotesk',sans-serif; letter-spacing:-.7px; }
#keir-full-study .ec-mechanism { display:grid; grid-template-columns:1fr 1.3fr; gap:8%; padding:25px 0 45px; align-items:center; }
#keir-full-study .ec-mechanism h2 { font:500 33px/1.15 'Space Grotesk',sans-serif; letter-spacing:-1px; padding:17px 0 0; }
#keir-full-study .ec-mechanism img { height:360px; object-fit:contain; }
#keir-full-study [data-explode-status] { font-size:12px; padding-top:15px; }
#keir-full-study .ec-footer { background:var(--ec-green); color:#23251e; padding:32px clamp(20px,4vw,96px) 22px; margin:0 calc(-1 * clamp(20px,4vw,96px)); }
#keir-full-study .ec-footer-top { display:flex; justify-content:space-between; gap:35px; align-items:center; }
#keir-full-study .ec-footer h2 { font:500 clamp(32px,5.3vw,58px)/1.05 'Space Grotesk',sans-serif; letter-spacing:-2px; padding:20px 0 35px; }
#keir-full-study .ec-footer-top > img { width:95px; height:95px; object-fit:contain; }
#keir-full-study .ec-footer-links { border-top:1px solid #758834; padding-top:18px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:13px 20px; font-size:12px; overflow-wrap:anywhere; }
#keir-full-study .ec-footer-note { font-size:10px; letter-spacing:1px; padding-top:25px; }
#keir-full-study .ec-sr { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
@media (prefers-color-scheme:dark) { #keir-full-study { --ec-paper:#e9e8de; } }
@media (min-width:1100px) { #keir-full-study .ec-hero { padding-top:58px; padding-bottom:46px; } #keir-full-study .ec-hero h1 { font-size:clamp(94px,7.7vw,150px); letter-spacing:-.055em; } #keir-full-study .ec-scroll-button { width:clamp(66px,5.4vw,105px); height:clamp(66px,5.4vw,105px); font-size:clamp(52px,4.4vw,85px); } #keir-full-study .ec-first .ec-photo { height:clamp(310px,30vw,600px); } #keir-full-study .ec-second { padding-top:clamp(140px,12vw,240px); } #keir-full-study .ec-second .ec-photo { height:clamp(350px,36vw,720px); } #keir-full-study .ec-third .ec-photo { height:clamp(360px,32vw,640px); } #keir-full-study .ec-philosophy > p:nth-child(2) { font-size:clamp(25px,2.1vw,38px); max-width:21ch; } #keir-full-study .ec-reading { max-width:66ch; } #keir-full-study .ec-reading p { font-size:18px; } #keir-full-study .ec-home-about > div > p { max-width:56ch; font-size:24px; } #keir-full-study .ec-prose-grid,#keir-full-study .ec-project-copy { grid-template-columns:minmax(220px,1fr) minmax(0,2fr); } #keir-full-study .ec-header nav a { font-size:14px; } #keir-full-study .ec-project-hero img { max-height:720px; } #keir-full-study .ec-audi { max-width:1600px; } }
@media (max-width:650px) { #keir-full-study .ec-header { flex-wrap:wrap; padding-right:0; padding-top:20px; padding-bottom:14px; gap:10px; } #keir-full-study .ec-header nav { width:100%; justify-content:space-between; } #keir-full-study .ec-brand img { width:39px; height:39px; } #keir-full-study .ec-brand span { font-size:27px; } #keir-full-study .ec-hero h1 { font-size:clamp(34px,9.4vw,61px); letter-spacing:-2.6px; } #keir-full-study .ec-scroll-button { width:44px; height:44px; font-size:33px; margin-bottom:0; } #keir-full-study .ec-project-grid { grid-template-columns:1fr; gap:32px; } #keir-full-study .ec-first { width:95%; } #keir-full-study .ec-first .ec-photo { height:240px; } #keir-full-study .ec-second { width:78%; padding-top:0; margin-left:auto; } #keir-full-study .ec-second .ec-photo { height:330px; } #keir-full-study .ec-third { margin-top:0; width:95%; } #keir-full-study .ec-third .ec-photo { height:300px; } #keir-full-study .ec-philosophy { padding-top:5px; max-width:380px; } #keir-full-study .ec-philosophy > p:nth-child(2) { font-size:24px; } #keir-full-study .ec-index-list { grid-template-columns:1fr; } #keir-full-study .ec-home-about,#keir-full-study .ec-prose-grid,#keir-full-study .ec-project-copy { grid-template-columns:1fr; gap:20px; } #keir-full-study .ec-home-about > div > p { font-size:18px; } #keir-full-study .ec-reading p { font-size:16px; } #keir-full-study .ec-audi { grid-template-columns:1fr; gap:25px; } #keir-full-study .ec-audi figure:nth-child(2) { padding-top:0; width:85%; margin-left:auto; } #keir-full-study .ec-page-title h1 { letter-spacing:-2px; } #keir-full-study .ec-mechanism { grid-template-columns:1fr; gap:25px; } #keir-full-study .ec-mechanism img { height:330px; } #keir-full-study .ec-footer-top > img { width:58px; height:58px; } #keir-full-study .ec-footer h2 { font-size:32px; letter-spacing:-1.3px; } #keir-full-study .ec-rule { font-size:9px; letter-spacing:.4px; } }
@media (prefers-reduced-motion:reduce) { #keir-full-study .ec-photo img,#keir-full-study .ec-scroll-button { transition:none; } }
html { background:#f2f1e9; scroll-behavior:smooth; }
body { margin:0; }
#keir-full-study { box-sizing:border-box; }
#keir-full-study a { color:inherit; }
#keir-full-study .ec-header { padding-right:0; }
#keir-full-study .ec-brand,#keir-full-study nav a,#keir-full-study .ec-index-list a,#keir-full-study .ec-footer-links a { text-decoration:none; }
#keir-full-study nav a { display:flex; align-items:center; gap:4px; }
#keir-full-study a.ec-text-button { text-decoration:none; }
#keir-full-study nav a:hover,#keir-full-study .ec-footer-links a:hover { text-decoration:underline; text-underline-offset:5px; }
#keir-full-study .ec-skip { position:absolute; top:8px; left:16px; padding:10px 18px; background:var(--ec-green); z-index:10; transform:translateY(-200%); }
#keir-full-study .ec-skip:focus { transform:translateY(0); }
#keir-full-study button,#keir-full-study a { -webkit-tap-highlight-color:transparent; }
#keir-full-study button { cursor:pointer; }
#keir-full-study .ec-gallery { display:grid; gap:36px 4%; margin:8px 0 52px; align-items:start; }
#keir-full-study .ec-gallery-3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
#keir-full-study .ec-gallery-2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
#keir-full-study .ec-gallery-single { display:block; max-width:1500px; margin-inline:auto; }
#keir-full-study .ec-image-link { display:block; position:relative; background:#e3e3db; overflow:hidden; }
#keir-full-study .ec-gallery .ec-image-link img { width:100%; height:clamp(240px,27vw,480px); object-fit:contain; }
#keir-full-study .ec-gallery-single .ec-image-link img { height:auto; max-height:780px; }
#keir-full-study .ec-enlarge { position:absolute; right:12px; bottom:12px; display:grid; place-items:center; width:34px; height:34px; border-radius:50%; background:var(--ec-paper); color:var(--ec-ink); font-size:24px; line-height:1; }
#keir-full-study .ec-gallery figcaption { font-size:13px; line-height:1.6; padding:13px 0 0; max-width:68ch; }
#keir-full-study .ec-project-body .ec-reading { width:100%; }
#keir-full-study .ec-project-body .ec-project-copy:has(h2:empty) h2 { visibility:hidden; }
#keir-full-study .ec-next-project { border-top:1px solid var(--ec-line); margin:10px 0 60px; padding-top:26px; }
#keir-full-study .ec-next-project > a:first-of-type { display:flex; justify-content:space-between; gap:24px; margin:18px 0 8px; text-decoration:none; font:500 clamp(26px,4vw,54px)/1.1 'Space Grotesk',sans-serif; letter-spacing:-1.5px; }
#keir-full-study .ec-next-project > a:first-of-type:hover { text-decoration:underline; text-underline-offset:8px; }
#keir-full-study .ec-story { border-top:1px solid var(--ec-line); padding-top:30px; margin:15px 0 58px; }
#keir-full-study .ec-story-heading { display:flex; align-items:end; justify-content:space-between; gap:24px; margin-bottom:25px; }
#keir-full-study .ec-story-heading h2 { font:500 clamp(27px,3.5vw,42px)/1.1 'Space Grotesk',sans-serif; letter-spacing:-1px; margin-top:13px; }
#keir-full-study .ec-story-controls { display:flex; gap:18px; align-items:center; }
#keir-full-study .ec-story-controls button,#keir-full-study .ec-lightbox-controls button { width:44px; height:44px; border:1px solid var(--ec-line); border-radius:50%; text-align:center; font-size:24px; }
#keir-full-study .ec-story-controls button:hover { background:var(--ec-green); }
#keir-full-study [data-story-count] { font-size:13px; font-variant-numeric:tabular-nums; white-space:nowrap; }
#keir-full-study .ec-story-slides figure { max-width:1600px; margin:0 auto 30px; }
#keir-full-study .ec-story[data-enhanced] .ec-story-slides figure { margin-bottom:0; }
#keir-full-study .ec-story-full { display:block; position:relative; color:var(--ec-ink); }
#keir-full-study .ec-story-full img { width:100%; aspect-ratio:16/9; object-fit:contain; background:#e5e1d6; }
#keir-full-study .ec-story-enlarge { position:absolute; right:14px; bottom:14px; padding:8px 13px; font-size:12px; background:var(--ec-paper); border-radius:3px; }
#keir-full-study .ec-story-slides figcaption { font-size:14px; padding-top:12px; }
#keir-full-study .ec-story-thumbnails { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:15px; margin-top:22px; }
#keir-full-study .ec-story-thumbnails button { display:block; position:relative; padding:4px; border:1px solid transparent; opacity:.58; }
#keir-full-study .ec-story-thumbnails button[aria-pressed="true"] { border-color:var(--ec-ink); opacity:1; }
#keir-full-study .ec-story-thumbnails button:hover { opacity:1; }
#keir-full-study .ec-story-thumbnails img { width:100%; aspect-ratio:16/9; object-fit:contain; }
#keir-full-study .ec-story-thumbnails button > span { display:block; font-size:11px; padding-top:6px; }
#keir-full-study .ec-film { margin:0 0 54px; }
#keir-full-study .ec-film .ec-rule a { font-size:12px; letter-spacing:0; }
#keir-full-study .ec-video { position:relative; aspect-ratio:16/9; overflow:hidden; background:#24251e; max-width:1600px; margin-inline:auto; }
#keir-full-study .ec-video > img { width:100%; height:100%; object-fit:cover; opacity:.6; }
#keir-full-study .ec-video button { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); padding:15px 22px; border-radius:30px; background:var(--ec-green); color:var(--ec-ink); font-size:15px; white-space:nowrap; }
#keir-full-study .ec-video iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
#keir-full-study .ec-portrait { margin-top:24px; max-width:310px; }
#keir-full-study .ec-portrait img { aspect-ratio:4/5; object-fit:cover; }
#keir-full-study .ec-about-intro .ec-reading { padding-top:35px; }
#keir-full-study .ec-audi { grid-template-columns:1fr 1fr; }
#keir-full-study .ec-audi .ec-image-link img { height:auto; aspect-ratio:4/3; object-fit:cover; }
#keir-full-study .ec-lightbox { width:calc(100% - 48px); max-width:1600px; max-height:calc(100svh - 40px); padding:20px 24px; border:0; background:var(--ec-paper); color:var(--ec-ink); }
#keir-full-study .ec-lightbox::backdrop { background:rgb(0 0 0 / .86); }
#keir-full-study .ec-lightbox-toolbar { display:flex; justify-content:space-between; align-items:center; gap:25px; padding-bottom:14px; }
#keir-full-study .ec-lightbox-toolbar h2 { font:500 17px/1.3 'Space Grotesk',sans-serif; }
#keir-full-study .ec-lightbox-toolbar button { min-height:44px; padding:5px 12px; white-space:nowrap; }
#keir-full-study .ec-lightbox-toolbar button > span { font-size:25px; padding-left:12px; }
#keir-full-study .ec-lightbox-stage img { width:100%; height:calc(100svh - 230px); min-height:150px; object-fit:contain; }
#keir-full-study .ec-lightbox-bottom { display:flex; align-items:center; justify-content:space-between; gap:24px; padding-top:15px; }
#keir-full-study [data-lightbox-caption] { font-size:14px; line-height:1.5; max-width:80ch; }
#keir-full-study .ec-lightbox-controls { display:flex; align-items:center; gap:15px; flex:0 0 auto; }
#keir-full-study [data-lightbox-count] { font-size:12px; font-variant-numeric:tabular-nums; min-width:40px; text-align:center; }
@media (prefers-color-scheme:dark) { html { background:#e9e8de; } }
@media (max-width:800px) { #keir-full-study .ec-gallery-3 { grid-template-columns:repeat(2,minmax(0,1fr)); } #keir-full-study .ec-gallery-3 figure:last-child { grid-column:1/-1; max-width:75%; justify-self:center; width:100%; } #keir-full-study .ec-story-heading { align-items:start; flex-direction:column; gap:18px; } #keir-full-study .ec-gallery .ec-image-link img { height:300px; } #keir-full-study .ec-gallery-single .ec-image-link img { height:auto; } }
@media (max-width:650px) { #keir-full-study .ec-gallery-3,#keir-full-study .ec-gallery-2,#keir-full-study .ec-audi { grid-template-columns:1fr; } #keir-full-study .ec-gallery-3 figure:last-child { grid-column:auto; max-width:none; } #keir-full-study .ec-gallery { gap:30px; } #keir-full-study .ec-gallery .ec-image-link img { height:auto; max-height:520px; } #keir-full-study .ec-story-thumbnails { grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; } #keir-full-study .ec-story-enlarge { right:8px; bottom:8px; padding:5px 8px; font-size:11px; } #keir-full-study .ec-story-full img { aspect-ratio:4/3; } #keir-full-study .ec-lightbox { width:calc(100% - 16px); padding:12px; } #keir-full-study .ec-lightbox-stage img { height:calc(100svh - 290px); } #keir-full-study .ec-lightbox-bottom { flex-direction:column; gap:12px; align-items:start; } #keir-full-study .ec-lightbox-controls { width:100%; justify-content:space-between; } #keir-full-study .ec-about-intro .ec-reading { padding-top:0; } #keir-full-study .ec-portrait { max-width:250px; } #keir-full-study .ec-next-project > a:first-of-type { letter-spacing:-.7px; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }