@import url('https://fonts.googleapis.com/css2?family=Schibsted+Grotesk:wght@400;500&family=Young+Serif&display=swap');
:root{--paper:#f7f5ee;--ink:#292c25;--muted:#696b62;--blue:#243baf;--ease:cubic-bezier(.2,.7,.2,1);--sans:'Schibsted Grotesk',Arial,sans-serif;--serif:'Young Serif',Georgia,serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:45px}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.65 var(--sans);-webkit-font-smoothing:antialiased}
::selection{background:#e9ba4b88}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:0}
button,a{-webkit-tap-highlight-color:transparent}
button:focus-visible,a:focus-visible{outline:2px solid var(--blue);outline-offset:7px}
h1,h2,h3,p{margin:0;font-weight:400}
h1,h2,h3,.email{font-family:var(--serif)}
.page{max-width:1280px;margin:auto;padding:0 64px;overflow:hidden}

/* Links: a faint rule at rest, drawn in full on hover */
.intro a,.email,.socials a{background:linear-gradient(currentColor 0 0) 0 100%/0 1px no-repeat,linear-gradient(#292c2540 0 0) 0 100%/100% 1px no-repeat;transition:background-size .45s var(--ease),color .2s}
:is(.intro a,.email,.socials a):is(:hover,:focus-visible){color:var(--blue);background-size:100% 1px,100% 1px}

/* Cutouts: --r is the resting angle; dividers add scroll progress (--p, set in script.js) */
.cutout{display:block;position:absolute;pointer-events:none;background:center/contain no-repeat;rotate:var(--r)}
.cutout-blue{width:155px;height:150px;--r:-24deg;background-image:url('assets/cobalt-seaweed.webp')}
.cutout-ochre{width:90px;height:110px;--r:22deg;background-image:url('assets/ochre-crescent.webp')}
.cutout-leaf{width:95px;height:105px;--r:-18deg;--x:60%;background-image:url('assets/olive-leaf.webp')}
.cutout-red{width:95px;height:95px;--r:24deg;--x:36%;background-image:url('assets/vermilion-flower.webp')}
.cutout-star{width:80px;height:80px;--r:-18deg;--x:66%;background-image:url('assets/terracotta-star.webp')}
.divider{position:relative;height:300px;--travel:110px}
.divider .cutout{top:50%;left:var(--x);translate:-50% calc(-50% - var(--p,0) * var(--travel));rotate:calc(var(--r) + var(--p,0) * 80deg)}

.intro{position:relative;padding-top:120px}
.intro-copy{display:grid;grid-template-columns:98px minmax(0,1fr);grid-template-areas:"photo name" "photo text";column-gap:32px;max-width:640px;margin:auto}
.portrait{grid-area:photo;width:98px;height:118px;display:grid;place-items:center;background:#e8e6dc;border-radius:3px;color:var(--muted);font-size:12px}
.intro h1{grid-area:name;font-size:38px;line-height:1.1;letter-spacing:-.5px;margin-bottom:14px}
.intro p{grid-area:text;font-size:17px;line-height:1.7;color:#56594f}
.intro-cutout{left:0;top:130px}
.intro-accent{right:3%;top:190px}

h2{font-size:32px;letter-spacing:-.4px;margin-bottom:36px}
.project-grid{display:grid;grid-template-columns:1.35fr 1fr;gap:56px 40px}
.project-card{display:block;min-width:0}
.project-secondary{padding-top:64px}
.project-visual{height:300px;overflow:hidden;position:relative;border-radius:2px;transition:translate .5s var(--ease)}
.blue-visual{background:#e1e4ef;color:var(--blue)}
.ochre-visual{background:#f1e5c3;color:#7a5c12;height:256px}
.visual-bottom{position:absolute;bottom:16px;left:22px;right:22px;display:flex;font-size:12px;opacity:.75}
.visual-bottom span:last-child{margin-left:auto}
.chart{position:absolute;inset:25px 0 45px;width:100%;height:calc(100% - 70px)}
.chart-grid{fill:none;stroke:currentColor;opacity:.12}
.chart-lines{fill:none;stroke:currentColor;stroke-width:1.5}
.chart-lines path:nth-child(2){opacity:.45}
.chart-lines path:nth-child(3){opacity:.2}
.scatter{position:absolute;inset:10px 0 30px;width:100%;height:calc(100% - 40px)}
.scatter circle{transition:scale .6s var(--ease);transform-box:fill-box;transform-origin:center}
.project-card:hover .project-visual{translate:0 -4px}
.project-card:hover .scatter circle:nth-child(3n){scale:1.35}
.project-card:hover .chart-lines{stroke-dasharray:900;animation:draw 1.8s var(--ease) both}
@keyframes draw{from{stroke-dashoffset:900}}
.project-meta{margin-top:18px;font-size:13px;color:var(--muted)}
.project-card h3{font-size:23px;line-height:1.3;margin:6px 0 8px}
.project-card p{font-size:15px;max-width:490px;color:var(--muted)}
.project-wide{grid-column:1/-1;display:grid;grid-template-columns:180px 1fr;gap:32px;align-items:center}
.project-wide .project-meta{margin-top:0}
.wide-number{display:flex;align-items:center;justify-content:center;min-height:170px;background:#e3e7db;color:#42614c;font-size:72px;letter-spacing:-5px;transition:background .3s}
.wide-number span{font-size:50px;letter-spacing:-3px}
.project-wide:hover .wide-number{background:#d5ddca}

/* Writing: the hovered title draws its rule while the rest recede */
.essay{display:flex;align-items:baseline;justify-content:space-between;gap:4px 32px;padding:14px 0;transition:opacity .35s}
.essay h3{font-size:clamp(22px,2.6vw,32px);line-height:1.25;letter-spacing:-.3px;background:linear-gradient(currentColor 0 0) 0 100%/0 1px no-repeat;transition:background-size .5s var(--ease)}
.essay-date{flex:none;font-size:13px;color:var(--muted);transition:color .3s}
.essay:is(:hover,:focus-visible) h3{background-size:100% 1px}
.essay:is(:hover,:focus-visible) .essay-date{color:var(--blue)}
@media(hover:hover){.writing-list:hover .essay:not(:hover){opacity:.3}}
@keyframes rise{from{opacity:0;translate:0 .5em}}
.js .essay>*{opacity:0}
.js .in .essay>*{opacity:1;animation:rise .9s var(--ease) both}
.js .in .essay:nth-child(2)>*{animation-delay:.12s}
.js .in .essay:nth-child(3)>*{animation-delay:.24s}

.contact{text-align:center}
.email{font-size:clamp(24px,3.6vw,44px);letter-spacing:-.5px;line-height:1.3;overflow-wrap:anywhere}
.socials{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 32px;margin-top:26px}
.socials a{font-size:18px}
.cv-row{display:flex;justify-content:center;margin-top:52px}
.cv-button{background:var(--ink);color:var(--paper);padding:16px 24px;display:flex;gap:40px;transition:background .2s,translate .2s}
.cv-button:hover{background:var(--blue);translate:0 -2px}
.footer{padding:110px 0 36px;text-align:center;font-size:13px;color:var(--muted)}

dialog{background:var(--paper);color:var(--ink);border:0;padding:52px;max-width:650px;width:calc(100% - 32px);max-height:85dvh}
dialog::backdrop{background:#23291f75;backdrop-filter:blur(5px)}
dialog h2{font-size:32px;line-height:1.15;margin:20px 0 25px}
dialog h3{font-size:17px;margin-top:25px}
dialog p{color:var(--muted);margin-top:10px}
.eyebrow{font-size:13px;color:var(--muted)}
.dialog-close{position:absolute;right:15px;top:7px;font-size:30px;padding:4px 10px}
.dialog-back{margin-top:25px;padding:4px 0;font-size:14px}
.skip-link{position:absolute;top:-80px;left:15px;padding:10px;background:var(--paper);z-index:10}
.skip-link:focus{top:10px}

/* Below 1100px the side margins are too narrow for the intro cutouts: they sit above the text instead */
@media(max-width:1100px){.intro{padding-top:130px}
.intro-cutout{width:78px;height:75px;left:-8px;top:24px}
.intro-accent{width:48px;height:58px;right:0;top:34px}}
@media(max-width:950px){.page{padding:0 35px}
.project-grid{gap:40px 25px}
.project-visual{height:270px}
.ochre-visual{height:230px}}
@media(max-width:680px){.page{padding:0 22px}
.intro-copy{grid-template-columns:64px minmax(0,1fr);grid-template-areas:"photo name" "text text";column-gap:18px;align-items:center}
.portrait{width:64px;height:78px;font-size:10px}
.intro h1{font-size:26px;margin:0}
.intro p{font-size:16px;margin-top:22px}
.divider{height:220px;--travel:70px}
.divider .cutout{scale:.75}
h2{font-size:28px;margin-bottom:28px}
.project-grid{display:block}
.project-secondary{padding-top:40px}
.project-visual{height:240px}
.ochre-visual{height:230px}
.project-wide{grid-template-columns:72px 1fr;gap:18px;margin-top:40px;align-items:start}
.wide-number{min-height:86px;font-size:36px;letter-spacing:-2px}
.wide-number span{font-size:27px;letter-spacing:-1px}
.essay{flex-direction:column;padding:14px 0}
.essay-date{font-size:12px}
.socials{gap:6px 22px}
.socials a{font-size:17px}
.cv-row{margin-top:40px}
.footer{padding:80px 0 28px}
dialog{padding:40px 25px}
dialog h2{font-size:28px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}
*,*::before,*::after{animation:none!important;transition:none!important}}