/* Gallery system. Homepage body only; project artwork and case pages retain their own identities. */
body.home-page{background:#f2f4f5}
.selected-work,.code-feature,.further-work,.practice,.about,.contact{
 --paper:#f2f4f5;--ink:#172733;--muted:#52636f;--line:#c8d3da;--accent:#315f86;color:var(--ink);
}
.selected-work a:focus-visible,.further-work a:focus-visible,.practice a:focus-visible,.about a:focus-visible{outline:3px solid #315f86;outline-offset:5px}
.selected-work::selection,.further-work::selection,.practice::selection,.about::selection{background:#c8e0f0;color:#172733}
.selected-work{padding-top:65px;padding-bottom:0}
.work-heading{display:flex;align-items:baseline;justify-content:space-between;gap:25px;border:0;border-bottom:1px solid var(--line);padding:0 0 25px;margin-bottom:0}
.work-heading h2,.further-heading h2{font:500 clamp(34px,3.7vw,58px)/1.1 var(--body);letter-spacing:-.055em;max-width:none}
.work-heading h2 .meta{color:#596e7c;font-size:10px}
.discipline-nav{margin:0;gap:22px;color:#52636f;font-size:12px}
.discipline-nav a{padding:10px 0}.discipline-nav a:hover{color:#244c6c}
.selected-work .project{margin:0;min-width:0}
.project-copy h3,.project-comi h3,.project-pocket h3,.project-squad-feature h3{font:600 clamp(42px,4.8vw,76px)/1.04 var(--body);letter-spacing:-.055em;margin:20px 0 23px;color:#172733}
.project-meta,.secondary-meta{color:#556c7a;font-size:10px;letter-spacing:.045em}
.project-description{font-size:17px;line-height:1.6;color:#52636f;max-width:42ch}
.project-link{font-size:13px;max-width:310px;min-height:48px;margin-top:25px;gap:25px}
.circle{border-color:#9badb9;transition:background 200ms ease,color 200ms ease,transform 200ms ease}
.project-link:hover .circle,.secondary-project .circle:hover{background:#254e6b;color:#fff;border-color:#254e6b;transform:translate(2px,-2px)}
.role-note{color:#566d7c;font-size:10px;max-width:36ch;line-height:1.7}
.live-link{font-size:12px;border-color:#aabac5;color:#315f86;padding-block:10px}
.live-link:hover{color:#172733;border-color:currentColor}
.project-visual{border:1px solid #fff;border-radius:12px;background:#e1e8ed;box-shadow:0 10px 32px #19364b0d;isolation:isolate;position:relative}
.project-visual::after{content:'';position:absolute;inset:0;border-radius:inherit;border:1px solid #243f5512;pointer-events:none}
.project-visual>img{transition:transform 500ms cubic-bezier(.2,.7,.25,1)}
.project-visual:hover>img{transform:scale(1.018)}
/* 01: generous product stage with a restrained glass edge. */
.project-comi{display:grid;grid-template-columns:1fr 1.3fr;gap:8%;align-items:center;padding:65px 0 90px}
.project-comi .project-description{font:400 clamp(18px,1.7vw,24px)/1.5 var(--body);color:#344c5c;max-width:28ch;letter-spacing:-.02em}
.comi-visual{border-radius:14px;display:flex;align-items:flex-start;gap:25px;justify-content:center;padding:48px 35px 60px;background:radial-gradient(ellipse at 75% 12%,#fff9,transparent 60%),linear-gradient(135deg,#dce6ed,#e9eff2 55%,#d4e0e8);box-shadow:0 14px 45px #19364b0e}
.comi-visual .comi-screen{width:calc(50% - 13px);max-width:210px;aspect-ratio:430/932;height:auto;box-shadow:0 16px 22px #1a334b1a;border:1px solid #fff8;transform:none}
.comi-visual .screen-connect{margin-top:40px}.comi-visual .screen-home{margin-top:0}
.comi-visual:hover .screen-home{transform:translateY(-4px)}.comi-visual:hover .screen-connect{transform:translateY(3px)}
.comi-caption{bottom:19px;left:28px;color:#526b7c;font-size:9px}
/* 02: broad visual, editorial information underneath. */
.project-pocket{display:flex;flex-direction:column;gap:0;padding:0 0 90px;border-bottom:1px solid #c8d3da}
.project-pocket .pocket-visual{width:100%;padding:clamp(18px,3vw,48px);background:linear-gradient(135deg,#1a2e3b,#304956);box-shadow:0 16px 40px #152d4012}
.pocket-visual img{width:100%;aspect-ratio:1.6;object-fit:contain;border-radius:4px;box-shadow:0 14px 30px #081b2e40;transform:none}
.pocket-visual:hover img{transform:scale(1.012)}
.project-pocket .project-copy{width:100%;display:grid;grid-template-columns:50px 1fr 1fr;gap:0 28px;padding:28px 0 0;align-items:start}
.project-pocket .project-number{grid-column:1;grid-row:1/4;font:400 20px var(--mono);color:#587183;margin:0;float:none}
.project-pocket .project-meta{grid-column:2;grid-row:1;margin:0;font-size:10px}.project-pocket .project-meta br{display:none}.project-pocket .project-meta br::after{content:' / '}
.project-pocket h3{grid-column:2;grid-row:2;font-size:clamp(38px,4.2vw,66px);margin:13px 0 18px}
.project-pocket .project-description{grid-column:3;grid-row:1/3;margin:0;font-size:17px;max-width:40ch}
.project-pocket .project-link{grid-column:3;grid-row:3;max-width:none;width:100%;margin:0}
.project-pocket .live-link{grid-column:2;grid-row:3;align-self:center;margin:0}
/* 03: a second split layout, with a quieter silver presentation surface. */
.project-squad-feature{display:grid;grid-template-columns:1.3fr 1fr;align-items:center;gap:8%;padding:80px 0 90px}
.squad-visual{padding:30px;background:linear-gradient(145deg,#e8edf1,#d9e2e9);box-shadow:0 14px 40px #19364b0d}
.squad-visual img{width:100%;aspect-ratio:1.5;object-fit:contain;border-radius:5px;filter:drop-shadow(0 8px 15px #18334918)}
.project-squad-feature h3{font-size:clamp(36px,4vw,64px)}
/* 04: blue-black, precise framing, artwork supplies the cyan. */
.code-feature{padding:80px 0 85px;background:linear-gradient(120deg,#101f2b,#192f40);color:#f0f5f8;border-block:1px solid #324d61}
.code-feature::before{display:none}
.code-layout{grid-template-columns:.85fr 1.35fr;gap:7%;align-items:center}
.code-layout .meta{color:#a1c6de;font-size:10px;letter-spacing:.06em}
.code-layout h2{font:600 clamp(48px,6vw,92px)/1 var(--body);letter-spacing:-.055em;margin:28px 0;overflow-wrap:normal}
.code-layout h2 a{display:block}
.code-layout .project-description{color:#d6e1e9;font-size:17px;line-height:1.6;max-width:34ch}
.code-layout .role-note{color:#9ab2c3;font-size:10px}
.code-layout .live-link{color:#b1d4eb;border-color:#557086}
.code-layout .circle{border-color:#718b9e;color:#e5f2fa}
.code-layout .project-link:hover .circle{background:#c9e0ef;color:#183346;border-color:#c9e0ef}
.code-layout a:focus-visible{outline-color:#badbf0}
.exe-visual{padding:18px;background:linear-gradient(135deg,#ffffff13,#ffffff04);border:1px solid #708b9f55;box-shadow:0 18px 40px #06131c30;transform:none;border-radius:12px}
.exe-visual::after{border-color:#ffffff12}.exe-visual img{width:100%;aspect-ratio:16/9;object-fit:contain;border-radius:4px}
/* 05–08: compact two-column visual index. */
.further-work{padding:75px 0 70px}
.further-heading{margin-bottom:35px;align-items:baseline}.further-heading .meta{color:#566d7c;max-width:30ch;font-size:10px}
.secondary-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:45px 35px}
.secondary-project,.secondary-project.project-ice{display:flex;flex-direction:column;align-items:stretch;gap:0;padding:0;border:0;grid-column:auto;min-width:0}
.secondary-project::before{display:none}
.secondary-project .project-visual{grid-area:auto;width:100%;background:linear-gradient(135deg,#e1e8ed,#edf1f4);padding:18px}
.secondary-project .project-visual img,.project-hub .project-visual img,.project-green .project-visual img,.project-ice .project-visual img{width:100%;height:auto;aspect-ratio:1.75;max-height:none;object-fit:contain;border-radius:3px}
.secondary-meta{grid-area:auto;margin:19px 0 0;align-self:stretch;font-size:10px}
.secondary-title{grid-area:auto;padding:10px 0 14px;border-bottom:1px solid #c8d3da;gap:18px}
.secondary-title h3,.project-ice .secondary-title h3{font:500 clamp(26px,2.7vw,40px)/1.1 var(--body);letter-spacing:-.045em}
.secondary-title .circle{width:38px;height:38px}
.secondary-project>p,.ice-copy>p{grid-area:auto;font-size:14px;line-height:1.6;color:#52636f;margin:14px 0 0;max-width:48ch;align-self:stretch}
.project-ice .ice-copy{display:block;grid-area:auto}
/* Reflection and biography: quiet surfaces and readable hierarchy. */
.practice{display:grid;grid-template-columns:.7fr 1.6fr;gap:8%;margin-top:0;margin-bottom:65px;padding:46px;background:linear-gradient(115deg,#fff9,#e6edf270);border:1px solid #fff;border-radius:12px;box-shadow:inset 0 0 0 1px #cbd7df70}
.practice .accent,.about .accent{color:#3a607b}.practice-label h2{font-size:24px;margin-top:14px;color:#223b4c}
.practice-statement{font:400 clamp(27px,3vw,43px)/1.24 var(--body);letter-spacing:-.035em;margin:0 0 26px;max-width:33ch;color:#243d4f}
.practice-copy>p:not(.practice-statement){font-size:15px;line-height:1.7;color:#52636f;max-width:60ch}
.underlined-link{font-size:12px;border-color:#8ca3b3;color:#315f86;padding-block:10px;transition:color 200ms,border-color 200ms}
.underlined-link:hover{background:none;color:#172733;border-color:#172733}
.about{border-top:1px solid #c8d3da;padding:30px 0 80px}
.about-main{grid-template-columns:1fr 1fr;gap:8%;margin-top:32px}
.about h2{font:500 clamp(36px,4.4vw,66px)/1.1 var(--body);letter-spacing:-.05em;color:#223b4c}
.about-copy{font-size:15px;line-height:1.7;color:#52636f;max-width:none}
.about-portrait{margin:0 0 20px 24px;width:130px}
.about-portrait img{box-shadow:0 7px 18px #1c3c5015;border:4px solid #fff;border-radius:6px}
.about-portrait figcaption{color:#566d7c;font-size:9px;margin-top:8px}
/* Footer echoes the first screen without repeating its visual complexity. */
.contact{width:100%;max-width:none;padding:65px var(--gutter) 24px;background:linear-gradient(115deg,#12222e,#1d3547);color:#edf3f7;border-top:1px solid #486174}
.contact::before{display:none}.contact .accent{color:#aac5d8}
.contact h2{font:500 clamp(52px,6.8vw,100px)/1.05 var(--body);letter-spacing:-.055em;margin-top:20px}
.contact-top{display:flex;justify-content:space-between;align-items:end;gap:40px;padding-bottom:55px}
.contact-email{font-size:clamp(15px,1.5vw,22px);gap:20px;margin:0}
.contact-email>span:first-child{border-color:#7793a7}
.contact .circle{border-color:#7290a5}.contact-email:hover .circle{background:#d3e7f3;color:#173447;border-color:#d3e7f3}
.contact-bottom{border-color:#526d815e}.contact-bottom .meta{color:#afc2d0}.contact a:focus-visible{outline-color:#c3e1f3}
@media(max-width:1100px){
 .work-heading{align-items:flex-start;flex-direction:column;gap:12px}.discipline-nav{gap:22px}
 .project-comi{gap:6%;padding-bottom:70px}.comi-visual{padding:35px 24px 55px;gap:18px}.comi-visual .comi-screen{width:calc(50% - 9px)}
 .project-pocket .project-copy{grid-template-columns:35px 1fr 1fr;gap:0 20px}
 .code-layout{grid-template-columns:1fr 1.25fr;gap:5%}.code-layout h2{font-size:clamp(43px,6vw,70px)}
 .contact-top{display:block}.contact-email{margin-top:30px;width:fit-content}
 .practice{padding:34px;gap:6%}
}
@media(max-width:700px){
 .selected-work{padding-top:38px}.work-heading{padding-bottom:20px;gap:12px}.work-heading h2,.further-heading h2{font-size:34px}.discipline-nav{gap:8px 19px;font-size:11px}.work-heading h2 .meta{font-size:9px}
 .project-comi{display:flex;flex-direction:column;align-items:stretch;padding:30px 0 52px;gap:28px}
 .project-comi .comi-visual{order:-1}.project-copy h3,.project-comi h3,.project-pocket h3,.project-squad-feature h3{font-size:42px;margin:14px 0 17px}
 .comi-visual{padding:28px 24px 50px;border-radius:10px;gap:18px}.comi-visual .screen-connect{margin-top:25px}.comi-visual .comi-screen{max-width:170px}
 .project-comi .project-description{font-size:19px;line-height:1.5;max-width:32ch}.project-description{font-size:15px;line-height:1.6}.role-note{margin-top:18px}
 .project-link{font-size:13px;margin-top:18px;max-width:none}.circle{width:42px;height:42px}
 .project-pocket{padding-bottom:45px}.project-pocket .pocket-visual{padding:14px;border-radius:10px}
 .project-pocket .project-copy{display:grid;grid-template-columns:1fr;gap:0;padding-top:23px}
 .project-pocket .project-number{display:none}.project-pocket .project-meta,.project-pocket h3,.project-pocket .project-description,.project-pocket .project-link,.project-pocket .live-link{grid-column:1;grid-row:auto}
 .project-pocket .project-meta{font-size:10px}.project-pocket .project-meta br{display:none}.project-pocket .project-description{margin:0;font-size:15px;max-width:none}.project-pocket .project-link{margin-top:18px}.project-pocket .live-link{margin-top:10px}
 .project-squad-feature{display:flex;flex-direction:column;align-items:stretch;gap:25px;padding:45px 0 50px}.squad-visual{padding:16px;border-radius:10px}
 .code-feature{padding:45px 0}.code-layout{display:flex;flex-direction:column;gap:28px;align-items:stretch}.exe-visual{order:-1;padding:12px;border-radius:10px}
 .code-layout h2{font-size:48px;line-height:1.06;margin:18px 0 22px}.code-layout .project-description{font-size:16px;max-width:34ch}.code-layout .project-link{max-width:none}
 .further-work{padding:45px 0}.further-heading{align-items:flex-start;gap:12px;flex-direction:column;margin-bottom:25px}.further-heading .meta{max-width:none;text-align:left;font-size:9px}
 .secondary-grid{grid-template-columns:1fr;gap:32px}.secondary-project .project-visual{padding:14px;border-radius:10px}.secondary-meta{font-size:9px;margin-top:16px}.secondary-title h3,.project-ice .secondary-title h3{font-size:29px}.secondary-project>p,.ice-copy>p{font-size:14px;line-height:1.6;margin-top:12px}
 .practice{display:block;padding:25px;margin-bottom:38px;border-radius:10px}.practice-label h2{font-size:23px;margin-top:8px}.practice-copy{margin-top:25px}.practice-statement{font-size:28px;line-height:1.3;margin-bottom:23px}.practice-copy>p:not(.practice-statement){font-size:14px}
 .about{padding:25px 0 45px}.about-main{display:block;margin-top:22px}.about h2{font-size:38px}.about-copy{margin-top:25px;font-size:14px}.about-portrait{width:105px;margin-left:18px}
 .contact{padding:40px var(--gutter) 22px}.contact h2{font-size:54px}.contact-top{display:block;padding-bottom:32px}.contact-email{width:100%;font-size:14px;gap:12px;margin-top:28px;justify-content:space-between}.contact-bottom{display:block}.contact-bottom>div{justify-content:space-between;font-size:11px;margin-top:20px;gap:18px}
}
@media(prefers-reduced-motion:reduce){.project-visual img,.circle,.underlined-link{transition:none}}
.project-pocket .project-meta br{display:initial}
/* October 29 supplied exports include their own device frames and transparency. */
.london-art.phones img{clip-path:none;border-radius:0;aspect-ratio:290/617;width:min(calc(50% - 7px),calc(var(--preview-height) * 290 / 617))}
.comi-visual .comi-screen{aspect-ratio:290/617;border:0;border-radius:0;box-shadow:none;filter:drop-shadow(0 12px 12px #1a334b20)}
.squad-visual img{aspect-ratio:1280/734;filter:none}