@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,700;1,9..144,500&display=swap');

:root{--ink:#171717;--orange:#ff6719;--paper:#fff;--mist:#eeece8;--muted:#6a6966;--line:#d5d2cd;--max:1440px}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ink);color:var(--ink);font-family:"DM Sans",Arial,sans-serif;line-height:1.5}
p{text-wrap:pretty}
a{color:inherit}
a:focus-visible{outline:3px solid var(--orange);outline-offset:5px}
.skip-link{position:fixed;top:-100px;left:1rem;z-index:20;background:var(--paper);padding:.75rem 1rem}
.skip-link:focus{top:1rem}
.site-header{height:78px;max-width:var(--max);margin:auto;padding:0 clamp(1.25rem,5vw,5rem);display:flex;align-items:center;justify-content:space-between;background:var(--ink);color:var(--paper);border-bottom:1px solid #303030}
.brand{font:700 1.05rem/1 "Fraunces",Georgia,serif;text-decoration:none}
.site-header nav{display:flex;gap:clamp(1.1rem,3vw,2.8rem)}
.site-header nav a{min-height:44px;display:flex;align-items:center;color:#c9c9c9;font-size:.78rem;text-decoration:none}
.site-header nav a:hover,.site-header nav a[aria-current="page"]{color:var(--paper)}
main,.site-footer{max-width:var(--max);margin:auto}
.eyebrow{margin:0 0 1.4rem;font-size:.67rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase}
h1,h2,h3{font-family:"Fraunces",Georgia,serif;font-weight:400;letter-spacing:-.035em;text-wrap:balance}
em{color:var(--orange);font-weight:500}
.annotation{position:absolute;z-index:3;font:italic 600 .78rem/1.2 "Comic Sans MS","Bradley Hand",cursive;letter-spacing:.02em;transform:rotate(-5deg)}
.hero{position:relative;min-height:calc(100svh - 78px);overflow:hidden;background:var(--ink);color:var(--paper);padding:clamp(4rem,8vw,8rem) clamp(1.25rem,7vw,7rem)}
.hero-copy{position:relative;z-index:2;max-width:940px}
.hero-note{right:8%;bottom:-2rem;color:var(--orange)}.hero-note:after{content:"";position:absolute;width:70px;height:32px;left:-28px;top:-36px;border:2px solid var(--orange);border-color:var(--orange) transparent transparent var(--orange);border-radius:50%;transform:rotate(18deg)}
.hero .eyebrow{color:#aaa}
h1{margin:0;font-size:clamp(5rem,12vw,11rem);line-height:.76}
.role{margin:3rem 0 0;font-size:clamp(1rem,1.8vw,1.35rem);line-height:1.42}
.hero-photo{position:absolute;inset:0 0 0 auto;width:48%;margin:0;overflow:hidden}
.hero-photo:before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,var(--ink) 0,rgba(23,23,23,.9) 15%,rgba(23,23,23,.18) 70%),linear-gradient(180deg,transparent 55%,rgba(255,103,25,.42));mix-blend-mode:multiply}
.hero-photo:after{content:"";position:absolute;top:0;left:19%;width:3px;height:100%;background:var(--orange);opacity:.8}
.hero-photo img{width:100%;height:100%;display:block;object-fit:cover;object-position:center 36%;filter:saturate(.82) contrast(1.08)}
.scroll-cue{position:absolute;left:clamp(1.25rem,7vw,7rem);bottom:2.2rem;color:#aaa;font-size:.68rem;letter-spacing:.17em;text-decoration:none;text-transform:uppercase}
.scroll-cue span{color:var(--orange);margin-left:1rem}
.work,.writing{padding:clamp(5rem,9vw,9rem) clamp(1.25rem,7vw,7rem)}
.work{background:var(--mist)}
.section-intro{display:flex;align-items:end;justify-content:space-between;gap:3rem;margin-bottom:clamp(3rem,6vw,5.5rem)}
.section-intro h2,.about-preview h2{margin:0;font-size:clamp(3.1rem,7vw,6.5rem);line-height:.9}
.section-link{min-height:44px;display:inline-flex;align-items:center;font-size:.76rem;font-weight:600;text-underline-offset:5px;white-space:nowrap}
.section-link span{color:var(--orange);margin-left:.8rem}
.work-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.work-card{position:relative;min-height:300px;padding:clamp(1.5rem,3vw,2.5rem);display:flex;flex-direction:column;background:var(--paper);border-top:3px solid transparent;text-decoration:none;overflow:hidden;transition:transform .22s ease,border-color .22s ease,background-color .22s ease}
.work-card:nth-child(2){background:#dfdcd6;border-color:var(--orange)}
.work-card span{font-size:.68rem;color:var(--muted)}
.work-card h3{margin:auto 0 1.5rem;font-size:clamp(2rem,3.3vw,3.1rem);line-height:.96}
.work-card p{margin:0;max-width:320px;color:var(--muted);font-size:.88rem;line-height:1.55}.work-card:hover,.work-card:focus-visible{border-color:var(--orange)}.hover-aside{display:block;margin-top:1rem;color:var(--orange);font:italic 600 .72rem/1.2 "Comic Sans MS","Bradley Hand",cursive;opacity:0;transform:translateY(8px) rotate(-2deg);transition:.2s ease}.work-card:hover .hover-aside,.work-card:focus-visible .hover-aside,.writing-row:hover .hover-aside,.writing-row:focus-visible .hover-aside{opacity:1;transform:translateY(0) rotate(-2deg)}
@media(hover:hover){.work-card:hover{transform:translateY(-4px)}.handoff-flow li:hover{border-color:var(--orange);transform:translateY(-3px)}}
@media(hover:none){.work-card .hover-aside{opacity:1;transform:translateY(0) rotate(-2deg)}}
.handoff{display:grid;grid-template-columns:minmax(220px,.7fr) 1.3fr;gap:clamp(2rem,6vw,6rem);align-items:center;margin-top:clamp(3rem,6vw,5rem);padding:clamp(1.5rem,3vw,2.5rem);background:var(--ink);color:var(--paper)}
.handoff .eyebrow{margin-bottom:1rem;color:#aaa}
.handoff h3{max-width:300px;margin:0;font-size:clamp(2rem,3.5vw,3.2rem);line-height:.98}
.handoff-flow{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin:0;padding:0;list-style:none;counter-reset:none}
.handoff-flow li{position:relative;min-width:0;padding:1.2rem 1rem;border:1px solid #484848;transition:border-color .2s ease,transform .2s ease}
.handoff-flow li+li:before{content:"→";position:absolute;top:50%;left:-1rem;color:var(--orange);transform:translate(-50%,-50%)}
.handoff-flow li>span{display:block;margin-bottom:1rem;color:var(--orange);font-size:.65rem;letter-spacing:.12em}
.handoff-flow strong{display:block;font:400 clamp(1.25rem,2vw,1.7rem)/1 "Fraunces",Georgia,serif}
.handoff-flow small{display:block;margin-top:.55rem;color:#aaa;font-size:.72rem;line-height:1.4}
.writing{background:var(--paper)}
.section-note{max-width:360px;margin:0 0 1.2rem;color:var(--muted);font-size:.9rem}.writing-intro>div:last-child{max-width:380px}
.writing-landscape{position:relative;height:clamp(280px,42vw,560px);margin:0 0 1rem;overflow:hidden;background:var(--ink)}.writing-landscape:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(23,23,23,.78),transparent 55%),linear-gradient(0deg,rgba(255,103,25,.24),transparent 55%);mix-blend-mode:multiply}.writing-landscape img{width:100%;height:100%;display:block;object-fit:cover;object-position:center 48%;filter:saturate(.72) contrast(1.12)}.writing-landscape figcaption{position:absolute;z-index:2;right:1.5rem;bottom:1.2rem;color:var(--paper);font-size:.65rem;letter-spacing:.12em;text-transform:uppercase}
.essay-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.essay-card{position:relative;min-height:290px;padding:clamp(1.5rem,3vw,2.5rem);background:var(--paper);text-decoration:none}
.essay-card>span{font-size:.67rem;color:var(--muted);letter-spacing:.1em;text-transform:uppercase}
.essay-card h3{max-width:520px;margin:4rem 0 0;font-size:clamp(2rem,4vw,3.8rem);line-height:1.02}
.essay-card b{position:absolute;right:2rem;bottom:2rem;color:var(--orange);font-size:1.4rem}
.essay-card:hover{background:var(--mist)}
.about-preview{display:grid;grid-template-columns:1.1fr .9fr;min-height:540px;background:var(--orange);border-top:1px solid var(--line)}
.about-preview-copy{align-self:center;padding:clamp(3rem,5vw,5rem) clamp(1.25rem,7vw,7rem)}
.about-preview h2 em{display:block;margin:.12em -8% 0 12%;color:var(--paper);text-align:right;transform:rotate(-2deg)}.about-preview-copy>p:not(.eyebrow){max-width:460px;margin:1.25rem 0 1.2rem}.closing-line span{white-space:nowrap}.about-preview figure{position:relative;align-self:center;aspect-ratio:4/3;margin:clamp(1.5rem,3vw,3rem);overflow:visible;transform:rotate(1.2deg)}.about-preview img{width:100%;height:100%;display:block;object-fit:contain;object-position:center;filter:saturate(.8) contrast(1.08)}.about-preview figcaption{position:absolute;right:.3rem;bottom:-1.45rem;font:italic 600 .7rem/1.2 "Comic Sans MS","Bradley Hand",cursive;transform:rotate(-3deg)}
.site-footer{display:grid;grid-template-columns:1fr auto;gap:3rem;padding:3.5rem clamp(1.25rem,5vw,5rem) 2rem;color:var(--paper)}
.footer-identity p,.copyright{color:#888;font-size:.68rem}
.social-icons{display:flex;gap:.9rem}
.social-icons a{width:44px;height:44px;display:grid;place-items:center;border:1px solid #484848;border-radius:50%;color:#ddd;text-decoration:none}
.social-icons a:hover{background:var(--orange);border-color:var(--orange);color:var(--ink)}
.social-icons svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.letter-icon{font:700 1rem/1 "Fraunces",Georgia,serif}
.copyright{grid-column:1/-1;padding-top:2rem;border-top:1px solid #333}

.page-hero{position:relative;overflow:hidden;padding:clamp(5rem,10vw,10rem) clamp(1.25rem,7vw,7rem);background:var(--ink);color:var(--paper)}
.page-hero h1{font-size:clamp(4.2rem,9.5vw,9rem);line-height:.84}
.page-hero>p:last-child{max-width:560px;margin:3rem 0 0;color:#aaa;font-size:1.05rem}
.case-list{background:var(--paper)}
.case{display:grid;grid-template-columns:minmax(180px,.65fr) 1.35fr;gap:clamp(2rem,7vw,8rem);padding:clamp(3rem,6vw,5.5rem) clamp(1.25rem,7vw,7rem);border-bottom:1px solid var(--line)}
.case:nth-child(even){background:var(--mist)}
.case-label{display:flex;gap:2rem;font-size:.68rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.case-label span{color:var(--orange)}.case-label p{margin:0}
.case h2{margin:0;font-size:clamp(1.8rem,2.7vw,2.6rem);line-height:1;white-space:nowrap}
.case>div:last-child>p{max-width:680px;color:var(--muted)}
.case ul{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.5rem 0 0;padding:0;list-style:none}
.case li{padding:.5rem .8rem;border:1px solid var(--orange);background:var(--orange);color:var(--ink);font-size:.72rem;font-weight:700}
.case{transition:transform .2s ease,background .2s ease}.case:hover{transform:translateX(.75rem)}.case:nth-child(3){position:relative;margin:1.5rem clamp(1.25rem,4vw,4rem);background:var(--orange);transform:rotate(-.5deg)}.case:nth-child(3) .case-label span{color:var(--paper)}.case:nth-child(3) li{border-color:var(--ink);background:var(--ink);color:var(--paper)}.case:nth-child(3):hover{transform:translateX(.75rem) rotate(-.5deg)}
.system-sketch{position:absolute;right:7vw;top:50%;width:260px;height:130px;transform:translateY(-50%)}.system-sketch i{position:absolute;width:42px;height:42px;border:2px solid var(--orange);border-radius:50%}.system-sketch i:nth-child(1){left:0;top:45px}.system-sketch i:nth-child(2){left:105px;top:0}.system-sketch i:nth-child(3){right:0;bottom:0}.system-sketch b{position:absolute;height:2px;background:var(--orange);transform-origin:left}.system-sketch b:nth-of-type(1){left:37px;top:52px;width:86px;transform:rotate(-20deg)}.system-sketch b:nth-of-type(2){left:138px;top:38px;width:96px;transform:rotate(33deg)}.sketch-note{right:8vw;bottom:15%;color:var(--orange)}
.writing-hero{background:linear-gradient(118deg,#171717 0 72%,#2a2724 72%)}
.writing-hero>p:last-of-type{max-width:none;white-space:nowrap}.writing-note{right:8vw;bottom:16%;color:var(--orange)}
.writing-index{background:var(--paper)}
.writing-row{display:grid;grid-template-columns:70px 1fr auto;gap:2rem;align-items:center;padding:clamp(2rem,5vw,4rem) clamp(1.25rem,7vw,7rem);border-bottom:1px solid var(--line);text-decoration:none}
.writing-row:nth-child(even){background:var(--mist)}
.writing-row.featured{border-left:5px solid var(--orange)}
.writing-row>span,.writing-row small{color:var(--muted);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase}
.writing-row h2{margin:.4rem 0 0;font-size:clamp(2rem,5vw,4.8rem);line-height:.96}.writing-row p{margin:.7rem 0 0;color:var(--muted)}.writing-row b{color:var(--orange);font-size:1.4rem}.writing-row:hover h2{font-style:italic}.writing-row .hover-aside{margin:.65rem 0 0}.writing-row:nth-child(2){margin-left:clamp(1.5rem,6vw,6rem);border-left:5px solid var(--orange)}
.archive-note{display:flex;justify-content:space-between;align-items:center;gap:2rem;padding:3rem clamp(1.25rem,7vw,7rem);background:var(--orange)}.archive-note p{font-family:"Fraunces",Georgia,serif;font-size:1.5rem}.archive-note div{display:flex;gap:2rem}.archive-note a{min-height:44px;display:flex;align-items:center;font-weight:600;text-underline-offset:5px}
.about-page{display:grid;grid-template-columns:.88fr 1.12fr;background:var(--orange)}
.about-image{position:relative;min-height:calc(100svh - 78px);padding:clamp(1.25rem,3vw,3rem);background:var(--ink)}.about-image img{width:100%;height:100%;display:block;object-fit:cover;object-position:center 22%;filter:brightness(.92) saturate(.85)}.about-image p{position:absolute;right:clamp(1.5rem,4vw,4rem);bottom:clamp(1.5rem,4vw,4rem);margin:0;padding:.35rem .55rem;background:var(--ink);color:var(--paper);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase}
.about-story{align-self:center;padding:clamp(2.5rem,4vw,4rem)}.about-story h1{font-size:clamp(3.4rem,6vw,6rem);line-height:.86}.about-story h1 em{display:block;margin:.08em -5% 0 12%;color:var(--paper);text-align:right;transform:rotate(-2deg)}.bio{max-width:700px;margin-top:1.1rem;font-size:.94rem;line-height:1.48}.bio p{margin:.65rem 0}
.contact-button{display:inline-flex;margin-top:2rem;padding:.9rem 1.2rem;background:var(--ink);color:var(--paper);font-size:.78rem;font-weight:600;text-decoration:none}.contact-button span{margin-left:1.5rem}.contact-button:hover{background:var(--paper);color:var(--ink)}
.affinities-intro{min-height:240px;padding:clamp(4rem,7vw,7rem);display:flex;flex-direction:column;justify-content:center;background:var(--ink);color:var(--paper)}.affinities-intro h2{max-width:900px;margin:0;font-size:clamp(3rem,6vw,5.5rem);line-height:.92}
.affinities{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;padding:clamp(1.25rem,3vw,3rem);background:var(--ink)}.affinities article{position:relative;min-height:560px;padding:clamp(1.25rem,2vw,2rem);background:var(--mist);overflow:hidden}.affinities article:after{content:attr(data-aside) " ↗";position:absolute;right:1.5rem;bottom:1.2rem;color:var(--orange);font:italic 600 .72rem/1.2 "Comic Sans MS","Bradley Hand",cursive;opacity:0;transform:translateY(8px) rotate(-3deg);transition:.2s ease}.affinities article:hover:after{opacity:1;transform:translateY(0) rotate(-3deg)}.affinities article:nth-child(2){z-index:1;transform:translateY(-1.25rem) rotate(.7deg)}.affinity-image{aspect-ratio:4/3;margin:0 0 2rem;overflow:hidden}.affinity-image img{width:100%;height:100%;display:block;object-fit:cover;object-position:center;filter:saturate(.78) contrast(1.08)}.affinities article:nth-child(1) img{object-position:left top;transform:scale(1.8);transform-origin:left top;filter:saturate(.72) contrast(1.1) hue-rotate(8deg)}.affinities article:nth-child(2) img{filter:saturate(.9) contrast(1.05)}.affinities article:nth-child(3) img{filter:saturate(.75) contrast(1.1)}.affinities span{font-size:.68rem;color:var(--orange)}.affinities h2{margin:1.2rem 0 1rem;font-size:clamp(2.5rem,5vw,4.5rem)}.affinities p{color:var(--muted);font-size:.88rem}

.resume-page{display:grid;grid-template-columns:minmax(300px,.72fr) minmax(0,1.28fr);min-height:calc(100svh - 78px);background:var(--mist)}
.resume-intro{position:relative;display:flex;flex-direction:column;justify-content:center;padding:clamp(3rem,7vw,7rem);background:var(--orange);overflow:hidden}
.resume-intro:after{content:"";position:absolute;right:-4rem;bottom:-4rem;width:13rem;height:13rem;border:2px solid rgba(23,23,23,.28);border-radius:50%}
.resume-intro h1{font-size:clamp(3.6rem,6vw,6rem);line-height:.84}
.resume-intro h1 em{display:block;color:var(--paper);transform:translateX(4%) rotate(-2deg)}
.resume-intro>p:not(.eyebrow){max-width:440px;margin:2rem 0 0;font-size:.95rem}
.resume-actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2rem}
.resume-actions a{display:inline-flex;align-items:center;gap:1.2rem;padding:.9rem 1.1rem;border:1px solid var(--ink);font-size:.76rem;font-weight:600;text-decoration:none}
.resume-actions a:first-child{background:var(--ink);color:var(--paper)}
.resume-actions a:hover{background:var(--paper);color:var(--ink)}
.resume-preview{position:relative;min-height:900px;padding:clamp(1.25rem,4vw,4rem);background:var(--ink)}
.resume-preview>a{height:100%;display:block;background:var(--paper);overflow:hidden}
.resume-preview img{width:100%;height:100%;min-height:820px;display:block;object-fit:contain;object-position:top center;background:var(--paper)}
.resume-caption{position:absolute;right:clamp(1.5rem,4vw,4rem);bottom:1.2rem;padding:.35rem .55rem;background:var(--orange);color:var(--ink);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;transform:rotate(-2deg)}

@media(max-width:760px){
  .site-header nav{gap:1rem}.site-header nav a:last-child{display:none}
  .hero{min-height:780px}.hero-photo{right:-28%;width:80%;opacity:.58}.hero-photo:before{background:linear-gradient(90deg,var(--ink),rgba(23,23,23,.25))}h1{font-size:clamp(4.6rem,23vw,7.5rem)}
  .role{max-width:330px}.section-intro{display:block}.section-intro .section-link,.section-note{display:block;margin-top:2rem}
  .work-grid,.essay-grid{grid-template-columns:1fr}.work-card{min-height:240px}.work-card .hover-aside{opacity:1;transform:translateY(0) rotate(-2deg)}.essay-card{min-height:240px}
  .handoff{grid-template-columns:1fr;gap:1.5rem}.handoff h3{max-width:none}.handoff-flow{grid-template-columns:1fr;gap:.65rem}.handoff-flow li{display:grid;grid-template-columns:2rem 1fr;align-items:center;gap:.25rem .6rem;padding:.8rem}.handoff-flow li>span{grid-row:1/3;margin:0}.handoff-flow small{margin-top:.25rem}.handoff-flow li+li:before{content:"↓";top:-.45rem;left:1rem;transform:translateY(-50%)}
  .annotation,.system-sketch{display:none}.about-preview{grid-template-columns:1fr}.about-preview h2 em,.about-story h1 em{margin:.08em 0 0;text-align:left;transform:none}.about-preview figure{min-height:0;margin:1.25rem;aspect-ratio:4/3;transform:none}.case{grid-template-columns:1fr}.case:hover{transform:none}.case:nth-child(3),.case:nth-child(3):hover{margin:0;transform:none}.case-label{justify-content:space-between}.case h2{white-space:normal}.writing-row{grid-template-columns:38px 1fr auto;gap:1rem}.writing-row:nth-child(2){margin-left:0}.writing-hero>p:last-of-type{white-space:normal}.archive-note{display:block}.archive-note div{display:grid;gap:.7rem;margin-top:1rem}
  .about-page{grid-template-columns:1fr}.about-image{min-height:620px}.affinities{grid-template-columns:1fr}.affinities article{min-height:240px}.affinities article:nth-child(2){transform:none}
  .resume-page{grid-template-columns:1fr}.resume-intro{min-height:520px}.resume-preview{min-height:680px;padding:1rem}.resume-preview img{min-height:0;height:auto}.resume-caption{display:none}
  .site-footer{grid-template-columns:1fr}.social-icons{flex-wrap:wrap}.copyright{grid-column:1}
}
@media(max-width:480px){.site-header .brand{display:none}.site-header nav{width:100%;justify-content:space-between;gap:.65rem}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.work-card,.hover-aside,.handoff-flow li{transition:none}.work-card:hover,.handoff-flow li:hover{transform:none}}