@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Archivo+Black&display=swap');
:root { --paper:#fff7e9; --mint:#bfe6d5; --pink:#fbbbd3; --hot:#a51e50; --ink:#172e38; --blue:#194baa; --bg:var(--paper); color-scheme:light; }
body { background:var(--paper); color:var(--ink); font-family:'Space Grotesk',Arial,sans-serif; }
body, button, a { overflow-wrap:break-word; }
* { box-sizing:border-box; }
h1,h2,h3 { font-family:'Archivo Black',Arial,sans-serif; font-weight:400; }
em { font-family:Georgia,serif; font-weight:400; }
header { height:80px; padding:0 5%; gap:34px; background:var(--paper); border-bottom:1px solid #172e3833; box-shadow:none; backdrop-filter:none; }
.brand { color:var(--ink); }
.brand span { color:var(--hot); }
header nav { gap:24px; }
header nav a, .header-right { color:var(--ink); font-size:14px; }
header nav a:hover { text-decoration:underline; text-underline-offset:5px; }
.mini { background:var(--ink); }
.kicker { text-transform:uppercase; font-size:13px; font-weight:700; letter-spacing:1.6px; line-height:1.5; margin:0 0 18px; }
.creative-hero { background:var(--mint); display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:32px; padding:64px 6% 76px; border-bottom:1px solid var(--ink); overflow:hidden; }
.hero-intro { max-width:690px; }
.creative-hero h1 { font-size:clamp(48px,5.5vw,88px); line-height:1.03; letter-spacing:-3px; margin:0 0 28px; color:var(--ink); }
.creative-hero h1 span { color:var(--hot); }
.hero-description { font-size:18px; line-height:1.65; max-width:550px; }
.hero-links { display:flex; gap:25px; align-items:center; flex-wrap:wrap; margin-top:30px; }
.hero-links>a:not(.button) { font-weight:700; border-bottom:1px solid; }
.hero-signature { font-size:14px; margin:30px 0 0; }
.button { background:var(--paper); color:var(--ink); border:1.5px solid var(--ink); border-radius:0; min-height:48px; padding:12px 22px; box-shadow:4px 4px 0 var(--ink); transition:transform .2s,box-shadow .2s; }
.button.primary { background:var(--ink); color:white; border-color:var(--ink); box-shadow:4px 4px 0 var(--hot); }
.button:hover { transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--ink); filter:none; }
a:focus-visible,button:focus-visible { outline:3px solid var(--blue); outline-offset:6px; }
.work-collage { position:relative; min-height:495px; margin:0 12px; }
.paper { display:block; background:var(--paper); border:1px solid var(--ink); padding:14px; box-shadow:8px 10px 0 #172e3822; transition:transform .25s; }
.paper:hover { z-index:4; transform:rotate(0) translateY(-5px); }
.paper img { width:100%; height:auto; display:block; object-fit:contain; }
.paper-label { display:block; font-size:12px; font-weight:700; letter-spacing:1.5px; margin-bottom:12px; }
.paper-caption { display:block; font-size:14px; font-weight:500; margin-top:10px; }
.paper-main { position:absolute; width:87%; left:0; top:4%; transform:rotate(-6deg); }
.paper-social { position:absolute; width:66%; right:-3%; top:47%; transform:rotate(7deg); }
.paper-startup { position:absolute; bottom:-3%; left:-2%; width:56%; transform:rotate(-9deg); }
.toolkit-section { padding:64px 6%; background:var(--pink); border-bottom:1px solid var(--ink); }
.toolkit-heading { display:flex; flex-wrap:wrap; align-items:baseline; column-gap:32px; margin-bottom:30px; }
.toolkit-heading .kicker { width:100%; margin-bottom:8px; }
.toolkit-heading h2 { font-size:clamp(40px,4vw,64px); letter-spacing:-2px; margin:0; line-height:1.1; }
.toolkit-heading>p:last-child { font-size:16px; }
.toolkit-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; }
.tool-card { display:flex; flex-direction:column; padding:24px; border:1px solid var(--ink); background:var(--paper); box-shadow:4px 4px 0 #172e3833; transition:transform .2s; }
.tool-card:hover { transform:translateY(-5px); }
.tool-index { font-size:12px; letter-spacing:1px; font-weight:700; }
.tool-card h3 { font-size:22px; line-height:1.2; margin:22px 0 6px; letter-spacing:-.6px; }
.tool-card p { font-size:16px; line-height:1.55; }
.tool-chips { display:flex; flex-wrap:wrap; gap:6px; margin:4px 0 24px; }
.tool-chips span { padding:4px 7px; border:1px solid #172e3866; font-size:13px; background:white; }
.tool-card>strong { font-size:14px; line-height:1.5; padding-top:18px; border-top:1px solid #172e3833; margin-top:auto; }
.everyday-tools { display:flex; flex-wrap:wrap; gap:16px 30px; align-items:center; margin-top:35px; font-size:16px; }
.everyday-tools>span { font-size:14px; }
.main { max-width:none; padding:0; }
.section { padding:75px 6%; }
.section-head { justify-content:space-between; align-items:end; gap:24px; margin-bottom:42px; }
.section-head h2 { font-size:clamp(40px,4.5vw,68px); line-height:1.05; letter-spacing:-2px; color:var(--ink); }
.section-head>p { font-size:16px; line-height:1.6; max-width:410px; margin:0; }
.section-head .kicker { color:var(--hot); }
.projects { display:flex; flex-direction:column; gap:0; }
.case-spread { display:grid; grid-template-columns:.85fr 1.15fr; gap:6%; padding:55px 0; border-top:1px solid #172e3844; align-items:center; }
.case-spread:nth-child(even) .case-copy { order:2; }
.case-spread:nth-child(even) .case-art { order:1; transform:rotate(2deg); }
.case-counter { color:var(--hot); font-size:13px; font-weight:700; letter-spacing:1px; margin:0 0 16px; }
.case-copy h3 { font-size:clamp(29px,3vw,46px); letter-spacing:-1.5px; line-height:1.12; margin:0 0 14px; }
.case-context { font-size:14px; margin-bottom:26px; }
.case-copy dl { margin:0 0 30px; }
.case-copy dt { font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:1px; margin-top:18px; }
.case-copy dd { font-size:16px; line-height:1.6; margin:5px 0 0; max-width:530px; }
.case-open { background:var(--mint); }
.case-art { margin:0; padding:14px; border:1px solid var(--ink); background:#fff; box-shadow:10px 10px 0 var(--pink); transform:rotate(-2deg); }
.case-art img { display:block; width:100%; height:auto; }
.case-art figcaption { font-size:14px; color:var(--ink); padding:15px 4px 3px; }
.case-gtt .case-art { box-shadow:10px 10px 0 var(--mint); }
.digital-section { background:var(--mint); border-block:1px solid var(--ink)!important; }
.tech-projects { display:grid; grid-auto-flow:row; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; overflow:visible; padding:0; }
.tech-card { background:var(--paper); color:var(--ink); border:1px solid var(--ink); padding:0; box-shadow:5px 5px 0 #172e3822; transition:transform .2s; }
.tech-card:hover { transform:translateY(-5px); }
.tech-image { padding:14px; background:white; border-bottom:1px solid #172e3822; }
.tech-image img { width:100%; height:auto; aspect-ratio:16/9; display:block; object-fit:contain; }
.tech-copy { padding:22px; }
.tech-copy .kicker { font-size:12px; color:var(--hot); margin-bottom:10px; }
.tech-copy h3 { font-size:26px; margin:0; letter-spacing:-1px; }
.tech-copy p { font-size:16px; line-height:1.6; margin:16px 0; }
.tech-tools { font-size:14px; font-weight:500; border-top:1px solid #172e3844; padding:15px 0; }
.tech-copy>strong { font-size:14px; }
.thesis-section { background:var(--paper); border:0!important; padding-top:48px; padding-bottom:48px; }
.thesis-section .section-head { margin-bottom:24px; }
.thesis-section .section-head h2 { font-size:clamp(30px,3vw,42px); letter-spacing:-1px; }
.thesis-feature { background:var(--blue); color:white; border:1px solid var(--ink); border-radius:0; box-shadow:6px 6px 0 var(--pink); grid-template-columns:1.4fr 1fr; min-height:0; max-width:1000px; }
.thesis-copy { padding:26px 30px; }
.thesis-copy p { font-size:15px; line-height:1.6; margin-bottom:16px; }
.thesis-copy strong { margin-top:18px; }
.thesis-copy .eyebrow { color:white; font-size:12px; }
.thesis-copy h3 { letter-spacing:-1px; font-size:clamp(26px,2.6vw,36px); line-height:1.1; margin:12px 0; }
.thesis-copy p,.thesis-tags span { color:white; }
.thesis-tags span { font-size:14px; border-color:white; }
.thesis-visual img { object-fit:contain; height:auto; max-height:210px; }
.thesis-visual { background:white; min-height:0; padding:16px; }
.about { margin:0; padding:70px 6%; border-radius:0; border:0; border-top:1px solid var(--ink); background:var(--pink); gap:6%; box-shadow:none; }
.about.about-intro { background:var(--paper); border-top:0; border-bottom:1px solid var(--ink); align-items:start; }
.about-heading .kicker { color:var(--hot); }
.about-thread { margin-top:26px!important; font-size:20px; line-height:1.4; }
.about-story { max-width:760px; }
.about-portrait { width:min(100%,270px); margin:28px 0 0; padding:9px; background:white; border:1px solid var(--ink); box-shadow:6px 6px 0 var(--pink); transform:rotate(-2deg); }
.about-portrait img { display:block; width:100%; aspect-ratio:4/5; object-fit:cover; object-position:center 35%; }
.about-story>p { font-size:16px; line-height:1.75; }
.study-path { padding:0; list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:20px; margin:28px 0; }
.study-path li { border-top:2px solid var(--hot); padding-top:13px; }
.study-path span,.study-path strong,.study-path small { display:block; }
.study-path span { font-size:12px; letter-spacing:.8px; margin-bottom:8px; }
.study-path strong { font-size:16px; line-height:1.4; }
.study-path small { font-size:14px; margin-top:6px; line-height:1.5; }
@media(max-width:520px) { .study-path { grid-template-columns:1fr; } }
.about h2 { font-size:clamp(32px,3.4vw,52px); letter-spacing:-1.5px; line-height:1.12; }
.about p,.education,.about .eyebrow { color:var(--ink); }
.education { font-size:14px; }
.footer { background:var(--blue); padding:55px 6% 30px; flex-wrap:wrap; color:white; }
.contact-head { width:100%; margin-bottom:30px; }
.contact-head>a { font-family:'Archivo Black',Arial,sans-serif; font-size:clamp(48px,8vw,105px); line-height:1.1; letter-spacing:-3px; color:var(--paper); border-bottom:3px solid var(--pink); }
.footer-links { font-size:16px; flex-wrap:wrap; }
.contact-details { display:flex; flex-wrap:wrap; gap:24px 56px; margin-top:32px; font-style:normal; }
.contact-details a { color:white; font-size:clamp(16px,2vw,22px); line-height:1.5; overflow-wrap:anywhere; }
.contact-details span { display:block; font-size:13px; text-transform:uppercase; letter-spacing:1px; color:var(--pink); margin-bottom:6px; }
.contact-details a:hover { text-decoration:underline; text-underline-offset:4px; }
dialog { background:var(--paper); color:var(--ink); border:2px solid var(--ink); border-radius:0; }
.detail-hero { color:white; }
.detail-hero .eyebrow { color:white; }
.detail-body { padding-top:20px; }
.detail-row { border-color:#172e3833; }
.detail-row h3 { color:var(--hot); }
.detail-row p,.detail-row ul,.note { color:var(--ink); }
.role-row { background:var(--mint); }
.slide-grid a,.slide-grid img { background:white; }
.slide-grid span { color:var(--ink); font-size:14px; }
dialog .button { color:var(--ink); background:var(--paper); border-color:var(--ink); }
dialog .button.primary { background:var(--ink); color:white; }
.close { background:var(--ink); color:white; }
@media(min-width:1700px) { .creative-hero,.toolkit-section,.section,.about,.footer { padding-left:max(6%,calc((100vw - 1500px)/2)); padding-right:max(6%,calc((100vw - 1500px)/2)); } }
@media(max-width:1100px) { .toolkit-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } header { gap:22px; } header nav { gap:16px; } .header-right>a { display:none; } .work-collage { min-height:430px; } .paper-research { width:50%; } .creative-hero h1 { font-size:60px; } .tech-projects { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:800px) { header { flex-wrap:wrap; height:auto; padding:14px 6% 10px; gap:10px; } header nav { order:3; width:100%; overflow-x:auto; gap:23px; padding:5px 0; white-space:nowrap; } header nav a { display:block!important; flex-shrink:0; } .header-right { margin-left:auto; } .creative-hero { grid-template-columns:1fr; padding-top:42px; gap:35px; } .creative-hero h1 { font-size:clamp(42px,9vw,72px); } .work-collage { width:min(100%,560px); min-height:480px; margin:auto; } .section-head { flex-direction:column; align-items:start; } .case-spread { grid-template-columns:1fr; gap:35px; } .case-spread:nth-child(even) .case-copy { order:0; } .case-art { max-width:650px; } .about { grid-template-columns:1fr; gap:30px; } .thesis-feature { grid-template-columns:1fr; } }
@media(max-width:520px) { .creative-hero,.section,.toolkit-section,.about { padding:36px 6% 45px; } .creative-hero h1 { letter-spacing:-2px; font-size:clamp(38px,10.5vw,55px); } .hero-description { font-size:16px; } .work-collage { min-height:365px; } .paper { padding:9px; } .paper-research { padding:13px; } .paper-label { font-size:11px; } .paper-caption { font-size:12px; } .paper-research>span:last-child { font-size:12px; } .toolkit-grid,.tech-projects { grid-template-columns:1fr; } .toolkit-heading h2,.section-head h2 { font-size:40px; letter-spacing:-1.5px; } .case-spread { padding:36px 0; } .case-copy h3 { font-size:30px; } .hero-links { gap:24px; } .thesis-copy { padding:28px 22px; } .thesis-visual { min-height:0; } .contact-head>a { letter-spacing:-2px; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; animation:none!important; } }