@font-face { font-family: Fraunces; src: url('assets/fraunces.woff2') format('woff2'); font-style: normal; font-weight: 400 700; font-display: swap; }
@font-face { font-family: 'Lato Light'; src: url('assets/lato-light.woff2') format('woff2'); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: 'Lato Light'; src: url('assets/lato-bold.woff2') format('woff2'); font-style: normal; font-weight: 700; font-display: swap; }
:root { --ink:#000; --cream:#f4ebd7; --green:#014235; --display:Fraunces,Georgia,serif; --sans:'Lato Light',Arial,sans-serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:#fff; font:400 16px/1.4 var(--sans); }
img { display:block; max-width:100%; }
a { color:inherit; text-underline-offset:3px; }
button,input,textarea { font:inherit; }
button,a,input,textarea { -webkit-tap-highlight-color:transparent; }
a:focus-visible,button:focus-visible { outline:2px solid var(--green); outline-offset:5px; }
.container { width:calc(100% - 80px); margin-inline:auto; }
.skip-link { position:fixed; top:8px; left:8px; z-index:100; transform:translateY(-160%); background:#fff; padding:10px 14px; border:1px solid; }
.skip-link:focus { transform:none; }
.site-header { min-height:80px; background:var(--cream); display:flex; align-items:center; position:relative; z-index:10; }
.header-inner { display:flex; align-items:center; justify-content:space-between; gap:32px; }
.identity { display:flex; align-items:center; gap:10px; text-decoration:none; flex-shrink:0; }
.identity-mark { width:48px; height:48px; object-fit:contain; }
.identity-name { display:block; font:400 22px/28px var(--display); }
.identity-role { display:block; margin-top:5px; font:400 14px/17px var(--sans); }
.site-nav { display:flex; align-items:center; }
.site-nav a { min-width:87px; text-align:center; padding:0 14px; text-decoration:none; border-right:1px solid #000; line-height:24px; }
.site-nav a:last-child { border-right:0; }
.site-nav a[aria-current='page'],.site-nav a:hover { color:var(--green); }
.menu-toggle { display:none; border:0; background:transparent; padding:8px; font-size:30px; cursor:pointer; }
.page-title { margin:0; font:400 56px/1.4 var(--display); }
.section-title { margin:0; font:400 38px/1.24 var(--display); }
.home-hero { padding:138px 0 139px; }
.home-grid { width:min(980px,calc(100% - 80px)); display:grid; grid-template-columns:492px minmax(0,1fr); gap:24px; align-items:start; }
.portrait { width:480px; height:480px; margin-left:12px; border-radius:50%; object-fit:cover; }
.home-copy { padding-top:33px; }
.display-title { margin:0 0 0 6px; font:400 100px/124px var(--display); }
.home-copy h2 { margin:24px 0 5px 13px; font:400 22px/28px var(--display); }
.home-copy p { margin:0 0 0 13px; font:400 16px/25.6px var(--sans); width:418px; max-width:calc(100% - 13px); }
.circle-links { display:flex; gap:17px; margin-top:66px; }
.circle-link { display:grid; place-items:center; width:140px; height:140px; flex:0 0 140px; border:1px solid #a45f53; border-radius:50%; background:#94d7ff; color:#000; text-decoration:none; font:400 22px/1.3 var(--display); transition:background .2s; }
.circle-link:nth-child(2) { background:#ff6b5a; }
.circle-link:nth-child(3) { background:#e6fff8; border-color:#638c83; }
.circle-link:hover,.circle-link:focus-visible { background:#fff; }
.about-page { padding:20px 0 41px; }
.about-intro { padding:80px 41px 66px; margin:0 0 19px; }
.about-intro h1 { margin:0 0 40px; font:400 56px/1.4 var(--display); }
.about-intro p { margin:0; font:400 16px/28.8px var(--sans); }
.resume-panel,.info-card { background:var(--cream); margin:0 0 41px; padding:80px 41px 36px; }
.resume-panel h2,.info-card h2 { margin:0 0 43px; font:400 38px/47px var(--display); }
.job { display:grid; grid-template-columns:250px minmax(0,1fr); gap:41px; }
.job + .job { margin-top:43px; }
.job-heading p:first-child { margin:3px 0 11px; font:400 16px/20px var(--display); }
.job-heading p + p { margin:0; font:400 14px/25.2px var(--sans); }
.job ul { margin:0; padding-left:21px; font:400 16px/22.4px var(--sans); }
.job li { padding:0; }
.info-card { padding-bottom:69px; }
.info-card p { margin:0; font:400 16px/22.4px var(--sans); }
.info-card:last-child { margin-bottom:0; }
.education-row { display:grid; grid-template-columns:233px 1fr; gap:50px; }
.education-row p:first-child { font:400 16px/20px var(--display); }
.projects-page { background:linear-gradient(#fafafa 0 446px,#fff 446px); padding:143px 0 100px; }
.projects-page > .container { width:min(980px,calc(100% - 80px)); }
.projects-intro { padding:84px 100px 75px; background:#fff; }
.projects-intro .page-title { font:400 56px/69px var(--display); }
.projects-intro p { margin:40px 0 0; font:400 22px/39.6px var(--sans); }
.project-list { padding:0 30px 0 40px; }
.project-row { display:grid; grid-template-columns:450px 1fr; gap:59px; padding:26px 0 27px; position:relative; margin-bottom:26px; align-items:center; }
.project-row::before { content:""; position:absolute; top:-10px; left:-40px; right:-30px; border-top:1px solid #aaa; }
.project-row:last-child::after { content:""; position:absolute; bottom:-10px; left:-40px; right:-30px; border-top:1px solid #aaa; }
.project-row:nth-child(odd) .project-image-wrap { order:-1; }
.project-row:nth-child(even) { grid-template-columns:1fr 450px; gap:58px; }
.project-copy { padding:15px 0 12px; }
.project-num { display:block; margin:0 0 5px; font:400 30px/37px var(--display); }
.project-copy h2 { margin:0 0 26px; font:400 30px/37px var(--display); }
.project-copy h2 a { text-decoration:underline; }
.project-copy p { margin:0 0 26px; font:400 22px/39.6px var(--sans); }
.project-image-wrap { width:450px; height:450px; }
.project-image { width:100%; height:100%; object-fit:cover; }
.button { display:inline-flex; align-items:center; justify-content:center; width:142px; min-height:40px; border:1px solid var(--green); background:var(--green); color:#fff; font:400 16px/1.4 var(--sans); text-decoration:none; transition:background .2s,color .2s; }
.button:hover,.button:focus-visible { background:#fff; color:var(--green); }
.contact-page { padding:91px 0 140px; min-height:658px; }
.contact-grid { display:grid; grid-template-columns:371px 431px; gap:96px; width:min(974px,calc(100% - 80px)); }
.contact-intro .page-title { font:400 42px/52px var(--display); margin-bottom:6px; }
.contact-intro > p { margin:0; font:400 16px/25.6px var(--sans); }
.contact-block { margin:30px 0 0; }
.contact-block + .contact-block { margin-top:19px; }
.contact-block strong { display:block; margin-bottom:4px; font:400 18px/23px var(--display); }
.contact-block a { text-decoration:none; font:400 16px/22.4px var(--sans); }
.contact-form { display:grid; grid-template-columns:1fr 1fr; gap:24px 36px; padding-top:18px; }
.field { display:flex; flex-direction:column; gap:8px; }
.field.full { grid-column:1/-1; gap:16px; }
.field input,.field textarea { width:100%; padding:8px; border:1px solid #000; border-radius:0; background:#fff; color:#000; }
.field input { height:40px; }
.field textarea { height:76px; min-height:76px; resize:vertical; }
.field input:hover,.field textarea:hover { border-width:2px; padding:7px; }
.field input:focus,.field textarea:focus { outline:2px solid var(--green); outline-offset:2px; }
.submit-button { grid-column:1/-1; margin-top:8px; width:100%; min-height:50px; background:var(--cream); border:1px solid #a45f53; border-radius:999px; font:400 22px/28.6px var(--display); cursor:pointer; }
.submit-button:hover { background:#fff; }
.form-note { grid-column:1/-1; margin:0; font-size:13px; color:#555; }
.case-page { padding:56px 0 60px; }
.case-body { width:min(980px,calc(100% - 80px)); }
.case-hero { padding:0 20px 56px; }
.case-hero h1 { width:960px; max-width:calc(100% + 20px); }
.case-hero h1 { margin:0 0 19px; font:400 56px/69px var(--display); }
.case-subtitle { max-width:885px; margin:0; font:400 22px/30.8px var(--sans); }
.case-visual { width:100%; height:auto; margin:25px 0; }
.case-prose { width:min(885px,calc(100% - 48px)); margin-inline:auto; font:400 22px/30.8px var(--sans); }
.case-prose p { margin:0; }
.case-gallery { display:grid; gap:10px; margin:40px 0 0; }
.case-gallery + .case-gallery { margin-top:10px; }
.case-gallery img { width:100%; height:auto; }
.case-content > .case-prose + .case-prose { margin-top:0; }
.case-image-pair { display:grid; grid-template-columns:1fr 1fr; margin:58px 0 28px; }
.case-image-pair img { width:100%; height:auto; }
.case-image-caption { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:39px; margin:58px 0 25px; }
.case-image-caption img { width:100%; height:auto; }
.case-image-caption .case-prose { width:100%; padding-right:40px; }
.case-overlap { position:relative; height:auto; aspect-ratio:980/489; margin:35px 0 10px; }
.case-overlap img { width:61.225%; height:auto; position:absolute; top:0; left:0; }
.case-overlap img + img { top:20.86%; left:auto; right:0; }
.case-centered { display:flex; justify-content:center; margin:32px 0 20px; }
.case-centered img { width:auto; height:auto; max-width:100%; }
[data-case='didis-jewellery'] .case-gallery { margin:48px auto 32px; }
[data-case='didis-jewellery'] .case-gallery img { width:auto; max-width:100%; margin:auto; }
[data-case='email-design'] .case-visual { margin-top:0; }
[data-case='email-design'] .case-gallery { gap:70px; }
.case-decisions { width:min(885px,calc(100% - 48px)); margin:52px auto 40px; }
.case-decisions .section-title { margin:0 0 22px; font:400 30px/37px var(--display); }
.decisions-grid { display:grid; grid-template-columns:1fr; }
.decision h3 { margin:0; font:400 18px/25.2px var(--display); }
.decision p { margin:0; font:400 16px/22.4px var(--sans); }
.case-facts { padding:80px 35px; display:grid; grid-template-columns:422px minmax(0,1fr); gap:90px; border-top:1px solid #000; }
.facts-list p { margin:0; font:400 16px/22.4px var(--sans); }
.role-card { align-self:start; padding-top:10px; text-align:left; }
.role-card p { margin:0 0 8px; font:400 16px/22.4px var(--sans); }
.role-card h6 { margin:0; font:400 18px/25.2px var(--display); }
.back-link { display:inline-block; margin:10px 35px 0; font-size:14px; }
.site-footer { min-height:229px; padding:41px 40px 45px; }
.footer-grid { width:100%; border-top:1px solid #aaa; padding:11px 10px 0; display:grid; grid-template-columns:repeat(4,1fr); gap:0; }
.footer-title { display:block; margin-bottom:7px; font:400 18px/23px var(--display); }
.footer-grid p { margin:0; font:400 16px/22.4px var(--sans); }
.footer-grid a { text-decoration:none; }
.social-link { display:block; width:24px; height:24px; }
.footer-grid .copyright { padding-top:5px; font:400 13px/18.2px var(--sans); }
@media (min-width:851px) and (max-width:1059px) {
 .project-list { padding-inline:30px; }
 .project-row,.project-row:nth-child(even) { grid-template-columns:1fr 1fr; gap:40px; }
 .project-image-wrap { width:100%; height:auto; aspect-ratio:1; }
 .contact-grid { grid-template-columns:minmax(0,1fr) 431px; gap:40px; }
 .home-grid { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:24px; }
 .portrait { width:100%; height:auto; margin-left:0; }
 .circle-links { gap:10px; }
 .circle-link { width:30%; height:auto; flex:1 1 0; aspect-ratio:1; font-size:20px; }
}
@media (max-width:850px) {
 .container { width:calc(100% - 40px); }
 .site-header { min-height:90px; }
 .identity-name { font-size:21px; }
 .identity-role { font-size:12px; }
 .menu-toggle { display:block; }
 .site-nav { display:none; position:absolute; top:100%; left:0; right:0; background:var(--cream); padding:12px 20px 24px; flex-direction:column; align-items:stretch; }
 .site-nav.open { display:flex; }
 .site-nav a { border:0; padding:14px; font-size:20px; }
 .home-hero { padding:55px 0 75px; }
 .home-grid { width:calc(100% - 40px); max-width:560px; grid-template-columns:1fr; gap:35px; }
 .portrait { width:min(100%,480px); height:auto; aspect-ratio:1; margin:0 auto; }
 .home-copy { padding:0; }
 .display-title { margin:0; font-size:80px; line-height:1.2; }
 .home-copy h2 { margin:20px 0 8px; }
 .home-copy p { width:auto; max-width:none; margin:0; }
 .circle-links { margin-top:35px; justify-content:flex-start; gap:15px; }
 .circle-link { width:125px; height:125px; flex-basis:125px; font-size:20px; }
 .about-page { padding:0 0 30px; }
 .about-intro { padding:55px 25px; margin-bottom:20px; }
 .about-intro h1 { font-size:46px; line-height:1.2; margin-bottom:30px; }
 .resume-panel,.info-card { padding:45px 25px; margin-bottom:25px; }
 .resume-panel h2,.info-card h2 { font-size:30px; line-height:1.25; margin-bottom:30px; }
 .job { grid-template-columns:1fr; gap:20px; }
 .job + .job { margin-top:36px; }
 .education-row { grid-template-columns:1fr; gap:20px; }
 .projects-page { padding:35px 0 65px; }
 .projects-page > .container { width:calc(100% - 40px); }
 .projects-intro { padding:30px 15px 45px; }
 .projects-intro .page-title { font-size:46px; line-height:1.2; }
 .projects-intro p { font-size:20px; line-height:1.7; margin-top:25px; }
 .project-list { padding:0 15px; }
 .project-row,.project-row:nth-child(even) { grid-template-columns:1fr; gap:25px; padding:30px 0; margin-bottom:0; }
 .project-row::before,.project-row:last-child::after { left:0; right:0; top:0; }
 .project-row:last-child::after { top:auto; bottom:0; }
 .project-row:nth-child(odd) .project-image-wrap { order:initial; }
 .project-copy { padding:0; }
 .project-copy p { font-size:20px; line-height:1.7; }
 .project-image-wrap { width:100%; height:auto; aspect-ratio:1; }
 .contact-page { padding:55px 0 65px; min-height:0; }
 .contact-grid { width:calc(100% - 50px); max-width:560px; grid-template-columns:1fr; gap:35px; }
 .contact-form { padding:0; gap:24px 24px; }
 .case-page { padding:45px 0; }
 .case-body { width:calc(100% - 40px); }
 .case-hero { padding:0 5px 25px; }
 .case-hero h1 { font-size:40px; line-height:1.2; }
 .case-subtitle,.case-prose { font-size:19px; line-height:1.6; }
 .case-prose,.case-decisions { width:calc(100% - 20px); }
 .case-image-caption { gap:20px; }
 .case-image-caption .case-prose { padding:0; }
 .case-facts { grid-template-columns:1fr; gap:30px; padding:40px 10px; }
 .role-card { padding-top:0; }
 .site-footer { padding:30px 20px 45px; min-height:0; }
 .footer-grid { grid-template-columns:1fr 1fr; gap:30px 20px; padding-top:25px; }
}
@media (max-width:480px) {
 .header-inner { gap:10px; }
 .identity-mark { width:40px; height:40px; }
 .identity-name { font-size:20px; line-height:25px; }
 .identity-role { font-size:10px; margin-top:3px; }
 .circle-links { gap:10px; }
 .circle-link { flex:1 1 0; width:auto; height:auto; aspect-ratio:1; font-size:18px; }
 .contact-form { grid-template-columns:1fr; }
 .case-image-pair,.case-image-caption { grid-template-columns:1fr; gap:15px; }
 .case-overlap { aspect-ratio:auto; display:grid; gap:15px; }
 .case-overlap img,.case-overlap img + img { position:static; width:100%; }
 .footer-grid { grid-template-columns:1fr; }
 .case-hero h1 { font-size:36px; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { transition:none !important; } }