:root{color-scheme:light;--cream:#fcf8f2;--ink:#2c1e36;--muted:#55465e;--accent:#543774;--lavender:#ede2f8;--line:#ded1e3}
*{box-sizing:border-box}
body{margin:0;background:var(--cream);color:var(--ink);font:16px/1.6 system-ui,sans-serif}
a{color:var(--accent);text-underline-offset:.22em}
a:focus-visible{outline:3px solid var(--accent);outline-offset:5px}
.wrap{width:min(1120px,calc(100% - 48px));margin:auto}
header,footer{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:22px 0;border-bottom:1px solid var(--line)}
.brand{font:700 1.5rem Georgia,serif;color:var(--ink);text-decoration:none}.brand span{color:var(--accent)}
nav{display:flex;gap:clamp(12px,3vw,32px)}nav a{font-size:.9rem;font-weight:600;text-decoration:none}nav a:hover,nav a[aria-current]{text-decoration:underline}
.skip{position:absolute;top:8px;left:8px;background:white;padding:10px;transform:translateY(-150%)}.skip:focus{transform:none}
.hero{display:grid;grid-template-columns:1.5fr 1fr;grid-template-areas:"intro portrait" "action portrait";gap:26px clamp(30px,6vw,96px);align-items:center;padding:clamp(48px,8vw,102px) 0}
.eyebrow{text-transform:uppercase;letter-spacing:.14em;font-size:.72rem;font-weight:750;color:var(--accent);margin:0 0 13px}
h1,h2,h3{font-family:Georgia,serif;font-weight:500;line-height:1.04;margin:0;letter-spacing:-.045em}
h1{font-size:clamp(2.6rem,6.25vw,5.6rem)}h1 em{color:var(--accent)}h2{font-size:clamp(2.2rem,4.5vw,4rem)}h3{font-size:2.05rem}
.intro{max-width:49ch;font-size:clamp(1rem,1.6vw,1.2rem);color:var(--muted);margin:23px 0 19px}
.tags{display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:0 0 26px;list-style:none}.tags li{background:var(--lavender);border-radius:30px;padding:5px 12px;font-size:.8rem;color:var(--accent);font-weight:600}
.button{display:inline-block;background:var(--accent);color:white;padding:10px 17px;border-radius:5px;font-weight:650;text-decoration:none}.button:hover{background:var(--ink)}
.hero-copy{grid-area:intro;align-self:end}
.hero > .button{grid-area:action;align-self:start;justify-self:start}
.hero .tags{margin-bottom:0}
.portrait{grid-area:portrait;width:min(100%,400px);justify-self:end;background:var(--lavender);border:1px solid var(--line);padding:9px;border-radius:48% 48% 14px 14px;overflow:hidden}
.portrait img{display:block;width:100%;height:auto;border-radius:inherit}
.contact-links{display:flex;flex-wrap:wrap;gap:12px;padding:0;margin:26px 0;list-style:none}
.contact-links a{display:inline-flex;align-items:center;gap:9px;padding:9px 14px;border:1px solid var(--line);border-radius:6px;background:var(--lavender);font-weight:650;text-decoration:none;min-height:44px}
.contact-links a:hover{text-decoration:underline}
.contact-links svg{width:20px;height:20px;flex:none}
.work{background:#f4edf8;padding:58px 0 64px}.projects{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:24px}article{background:var(--cream);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.cover{position:relative;display:grid;place-items:center;min-height:154px}.cover span{position:absolute;top:12px;left:16px;font-size:.75rem;font-weight:700}.cover img{display:block;width:120px;height:auto}.flow{background:#e0d5f5;color:#503c75}.honey{background:#f7e4bc;color:#774c16}
.card{padding:24px}.card p:not(.eyebrow),.about p:not(.eyebrow){color:var(--muted)}.card a,.about a{font-weight:650}
.about{display:grid;grid-template-columns:1fr 1.25fr;gap:36px;padding:70px 0}.about p:not(.eyebrow):first-child{margin-top:0}
footer{border-top:1px solid var(--line);border-bottom:0;font-size:.84rem;color:var(--muted)}.contact{min-height:72vh;padding:clamp(54px,11vw,130px) 0}
@media(max-width:700px){.hero,.about{grid-template-columns:1fr}.hero{grid-template-areas:"intro" "portrait" "action"}.portrait{width:min(100%,320px);justify-self:start}.projects{grid-template-columns:1fr}.about{gap:19px;padding:52px 0}}
@media(max-width:360px){.wrap{width:calc(100% - 28px)}nav{gap:8px}.brand{font-size:1.25rem}}
.project-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-top:18px}
.case-study{padding:28px 0 65px}
.back-link{display:inline-block;margin-bottom:20px;font-weight:650}
.case-hero{border-radius:14px;padding:clamp(25px,6vw,72px)}
.case-hero .eyebrow{color:inherit}
.case-tagline{max-width:40ch;margin:15px 0 22px;font-size:clamp(1.05rem,2.5vw,1.5rem)}
.case-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:16px 24px;padding:20px 0;margin:0;border-bottom:1px solid var(--line)}
.case-facts dt{font-weight:700;color:var(--accent)}
.case-facts dd{margin:2px 0 0;color:var(--muted)}
.case-section{padding:36px 0;border-bottom:1px solid var(--line)}
.case-section h2{font-size:clamp(2rem,4vw,3rem)}
.case-section p:not(.eyebrow){max-width:65ch;color:var(--muted)}
.case-decisions{margin-bottom:0;padding-left:1.45rem}
.case-decisions li{padding-left:.35rem;margin-top:22px}
.case-decisions li::marker{color:var(--accent);font-weight:700}
.case-decisions h3,.case-comparison h3{font-size:1.45rem}
.case-decisions p,.case-comparison p{margin:8px 0 0}
.case-comparison{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:22px}
.case-comparison > div{border:1px solid var(--line);padding:20px;border-radius:9px}
@media(max-width:600px){.case-facts,.case-comparison{grid-template-columns:1fr}}
.case-preview{margin-top:14px}
.case-preview summary{width:fit-content;min-height:44px;padding:9px 0;color:var(--accent);font-weight:650;cursor:pointer}
.case-preview summary:focus-visible{outline:3px solid var(--accent);outline-offset:4px}
.case-preview .button{margin-top:6px}

.case-video{display:block;width:100%;height:auto;margin-top:6px;border-radius:6px;background:#251a2e}

.project-title-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,30%);align-items:center;gap:clamp(16px,4vw,48px)}
.project-title-logo{display:block;width:100%;max-width:260px;height:auto;justify-self:center}
.case-hero.flow .project-title-logo,.cover.flow img{border-radius:31%}
/* Match the visible artwork width despite the sticker’s transparent margins. */
.case-hero.honey .project-title-logo,.cover.honey img{transform:translate(0.8%,1.8%) scale(1.31)}
@media(max-width:600px){
  .project-title-card{grid-template-columns:1fr}
  .project-title-logo{width:min(100%,170px)}
}

@media(max-width:480px){
  header.wrap{align-items:flex-start;flex-direction:column;gap:10px}
  header nav{flex-wrap:wrap}
}

.resume-page{padding:28px 0 65px}
.resume-preview{display:block;width:min(100%,640px);margin-top:60px}
.resume-preview img{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:6px}