@font-face{font-family:LocalSans;src:local("Arial");font-display:swap}
:root{--bg:#080c0c;--text:#f3f2e8;--muted:#b5bcb4;--accent:#eef5a0;--line:rgba(195,211,180,.18);--font-sans:Arial,Helvetica,sans-serif;--font-mono:"Courier New",monospace;--font-serif:Georgia,"Times New Roman",serif;color-scheme:dark}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:30px}body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font-sans);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}body:before{content:"";position:fixed;inset:0;z-index:10;pointer-events:none;opacity:.035;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23ffffff' filter='url(%23n)' opacity='.6' d='M0 0h180v180H0z'/%3E%3C/svg%3E")}
::selection{background:var(--accent);color:var(--bg)}a{color:inherit;text-decoration:none}button{font:inherit}img{max-width:100%;height:auto;display:block}svg{display:block;max-width:100%}h1,h2,h3,p{margin:0}h1,h2,h3{font-weight:500;line-height:1.05}button,a{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:6px}.shell{width:calc(100% - 96px);max-width:1344px;margin-inline:auto}.mono{font-family:var(--font-mono);font-size:12px;font-weight:400;line-height:1.55;letter-spacing:.09em}.section-index{color:#c3bd8c;font:12px var(--font-mono);letter-spacing:.09em;white-space:nowrap}.button{display:inline-flex;align-items:center;justify-content:center;gap:25px;min-height:48px;padding:11px 24px;border:1px solid #8f9471;font-size:14px;line-height:1.3;transition:background .2s,color .2s}.button:hover{background:var(--accent);color:var(--bg)}.button-primary{background:var(--accent);color:var(--bg);border-color:var(--accent)}.button-primary:hover{background:#fffec7}.skip-link{position:fixed;top:12px;left:12px;z-index:100;background:var(--accent);color:var(--bg);padding:12px;transform:translateY(-150%)}.skip-link:focus{transform:none}.section-grid{position:relative;border-top:1px solid var(--line)}.section-grid:before{content:"";position:absolute;left:28px;top:0;bottom:0;width:1px;background:var(--line);pointer-events:none}.section-heading{display:grid;grid-template-columns:52px 270px 1fr auto;gap:24px;align-items:start;padding:44px 0 32px}.section-heading h2{font-size:38px;letter-spacing:-1.4px}.section-heading h2 em{font-style:normal;color:var(--accent)}.section-deck{padding-top:6px;color:var(--muted)}.work-count{align-self:center;color:var(--muted);font-size:11px;letter-spacing:.065em}.work-count span{font-size:26px;margin-left:16px;color:var(--accent)}.project-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-bottom:48px}.project{position:relative;min-width:0;border:1px solid var(--line);background:#0b100f;transition:border-color .25s,transform .3s;transform:perspective(1000px) rotateX(var(--tilt-y,0deg)) rotateY(var(--tilt-x,0deg));transform-style:preserve-3d}.project:hover{border-color:#87936a}.project-top{padding:25px 25px 0;min-height:172px}.project h3{font-size:31px;letter-spacing:-1px;margin-bottom:15px}.project-top p{font-size:16px;line-height:1.45;color:#c7ccc2;max-width:31ch}.project-number{float:right;color:#8a9686;border-bottom:1px solid var(--line)}.project-visual{margin-top:-8px;overflow:hidden}.project-visual svg{width:100%;height:auto;transition:transform .6s}.project:hover .project-visual svg{transform:translateY(-3px)}.project-bottom{padding:0 22px 20px;min-height:58px;display:flex;align-items:center;justify-content:space-between;gap:8px}.project-bottom .mono{font-size:10px;letter-spacing:.03em}.project-bottom a{font-size:29px;min-height:44px;min-width:44px;display:grid;place-items:center;margin:-5px -12px -5px 0}.project-research{color:#99a38b}.js-reveal .reveal{opacity:0;transform:translateY(16px);transition:opacity .65s ease,transform .65s ease}.js-reveal .reveal.is-visible{opacity:1;transform:none}
@media(max-width:1100px){.shell{width:calc(100% - 64px)}.section-heading{grid-template-columns:40px 230px 1fr;gap:16px}.work-count{display:none}.project-top{padding:20px 19px 0;min-height:185px}.project-bottom{padding-inline:16px;flex-wrap:wrap}.project-bottom .mono{font-size:10px}.project-grid{gap:15px}}
@media(max-width:760px){.shell{width:calc(100% - 40px)}.section-grid:before{left:9px}.section-heading{grid-template-columns:36px 1fr;gap:12px;padding:35px 0 24px}.section-heading h2{font-size:34px}.section-deck{grid-column:2;font-size:11px}.project-grid{grid-template-columns:1fr;gap:20px;margin-bottom:35px}.project-top{min-height:0;padding:24px 24px 0}.project h3{font-size:32px}.project-top p{max-width:40ch}.project-visual{max-width:440px;margin:0 auto;width:100%}.project-bottom{padding:0 23px 20px;flex-wrap:nowrap}.project-bottom .mono{font-size:10px}.button{padding-inline:18px}.mono{letter-spacing:.07em}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.js-reveal .reveal{opacity:1;transform:none}.project{transform:none!important}}
.project h3{display:flex;align-items:center;gap:12px;min-height:44px}.project-logo{width:42px;height:42px;object-fit:contain;flex:none}.project-top{min-height:190px}

.site-header{height:86px;display:grid;grid-template-columns:230px 1fr auto;align-items:center;border-bottom:1px solid var(--line);position:relative;z-index:5}
.site-brand{font:600 30px/1 var(--font-sans);letter-spacing:-1.3px}.site-brand span{color:var(--text)}.site-nav{display:flex;gap:48px;align-items:center}.site-nav a{position:relative;font-size:14px;min-height:44px;display:flex;align-items:center}.site-nav a:after{content:'';height:1px;position:absolute;bottom:7px;left:0;right:100%;background:var(--accent);transition:right .25s}.site-nav a:hover:after{right:0}.site-status{display:flex;align-items:center;gap:10px;font-size:10px;color:var(--muted)}.site-status span{width:7px;height:7px;background:var(--accent);border-radius:50%}
.hero{height:730px;position:relative;isolation:isolate;overflow:clip;display:block;border-bottom:1px solid #727252}.hero:before{content:'';position:absolute;inset:0;z-index:-1;background-image:linear-gradient(90deg,transparent calc(100% - 1px),var(--line) 0);background-size:25% 100%;opacity:.3;pointer-events:none}.hero-rail{position:absolute;left:0;top:48px;color:#a5af9e;font-size:11px;line-height:1.3;letter-spacing:.14em;text-transform:uppercase;display:flex;flex-direction:column;max-width:112px}.hero-rail:after{content:'';height:1px;background:var(--line);width:72px;margin-top:30px;margin-left:24px}.hero-content{position:relative;z-index:3;margin-left:13%;padding-top:65px;width:55%;pointer-events:none}.hero-content a{pointer-events:auto}.hero-kicker{font-size:11px;color:#aeb39c;margin-bottom:28px;letter-spacing:.13em}.hero h1{font:700 clamp(64px,6.45vw,94px)/.94 var(--font-sans);letter-spacing:-.065em;max-width:700px;position:relative}.hero h1 em{color:var(--accent);font-style:normal}.hero-intro{font-size:17px;line-height:1.5;max-width:365px;margin-top:27px;color:#c6cdc2}.hero-actions{display:flex;gap:16px;margin-top:28px}.hero-actions .button{font-size:14px;gap:19px}.button--primary{background:var(--accent);color:var(--bg);border-color:var(--accent)}
.hero-media{position:absolute;inset:0 0 0 auto;width:64%;z-index:1;overflow:hidden;pointer-events:none;mask-image:linear-gradient(90deg,transparent 0%,#000 25%,#000 95%,transparent 100%)}.hero-media img{width:100%;height:118%;object-fit:cover;object-position:52% 69%;transform:translate(var(--parallax-x,0px),calc(-108px + var(--parallax-y,0px)));filter:brightness(.78) saturate(.78);transition:transform .25s ease}.hero-media:before{content:'';position:absolute;inset:0;z-index:2;background:linear-gradient(90deg,var(--bg) 0%,rgba(8,12,12,.9) 8%,rgba(8,12,12,.45) 28%,transparent 52%),linear-gradient(0deg,var(--bg) 0%,transparent 24%,transparent 77%,rgba(8,12,12,.7));pointer-events:none}.hero-media-edge{position:absolute;inset:0;z-index:2;background:linear-gradient(90deg,transparent 75%,rgba(8,12,12,.55))}.hero-photo-label{position:absolute;right:17px;bottom:132px;font-size:10px;color:var(--muted);writing-mode:vertical-rl;letter-spacing:.15em;z-index:4}.hero-cross{position:absolute;z-index:4;width:50px;height:50px;opacity:.5}.hero-cross:before,.hero-cross:after{content:'';position:absolute;background:#c2bf88}.hero-cross:before{width:50px;height:1px;top:25px}.hero-cross:after{height:50px;width:1px;left:25px}.hero-cross--one{right:18px;top:44px}.hero-cross--two{left:16%;bottom:22px}.hero-note{position:absolute;z-index:4;font:italic 25px/1.05 var(--font-serif);color:#c1c7b9;transform:rotate(-9deg);letter-spacing:.02em}.hero-note--ideas{right:13px;top:150px}.hero-note--ghana{right:15px;top:245px}.hero-question{position:absolute;left:0;bottom:40px;font:12px/1.4 var(--font-mono);text-transform:uppercase;letter-spacing:.05em;color:#aab39f;max-width:125px}.hero-location{position:absolute;right:0;bottom:22px;z-index:4;padding:18px 24px;width:238px;border:1px solid #727252;background:rgba(8,12,12,.85);font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}.hero-location strong{display:block;color:var(--accent);font-weight:400;margin-bottom:5px}
@media(min-width:761px) and (max-width:1100px){.site-header{grid-template-columns:190px 1fr}.site-status{display:none}.site-nav{justify-content:flex-end;gap:35px}.hero{height:700px}.hero-content{margin-left:8%;width:69%;padding-top:85px}.hero-rail{font-size:10px;top:20px;max-width:100%;flex-direction:row;gap:5px}.hero-rail:after{display:none}.hero h1{font-size:clamp(62px,7.8vw,83px)}.hero-media{width:70%}.hero-intro{max-width:330px;font-size:16px}.hero-note{display:none}.hero-question{bottom:25px}.hero-location{font-size:10px;width:210px}.hero-media img{height:115%;transform:translate(var(--parallax-x,0px),-80px)}}
@media(max-width:760px){.site-header{height:auto;min-height:110px;grid-template-columns:1fr;gap:12px;padding-block:20px}.site-brand{font-size:27px}.site-nav{gap:26px}.site-status{display:none}.hero{height:auto;min-height:900px}.hero-content{margin:0;padding-top:40px;width:100%}.hero-kicker{font-size:10px;margin-bottom:20px}.hero h1{font-size:clamp(48px,11.8vw,85px);letter-spacing:-.055em;line-height:.97}.hero-intro{font-size:16px;max-width:35ch;margin-top:24px}.hero-actions{gap:12px;margin-top:24px}.hero-actions .button{font-size:13px;padding-inline:15px;gap:10px}.hero-media{top:auto;bottom:0;width:100%;height:430px;mask-image:linear-gradient(0deg,#000 70%,transparent 100%)}.hero-media img{height:140%;object-position:50% 60%;transform:translateY(-140px)}.hero-media:before{background:linear-gradient(0deg,var(--bg),transparent 25%,transparent 65%,var(--bg))}.hero-media-edge{background:linear-gradient(90deg,rgba(8,12,12,.5),transparent 30%,transparent 70%,rgba(8,12,12,.5))}.hero-question,.hero-rail,.hero-note,.hero-photo-label,.hero-cross{display:none}.hero-location{right:0;bottom:16px;font-size:10px;width:210px;padding:12px 16px}}
@media(prefers-reduced-motion:reduce){.hero-media img{transition:none}.site-nav a:after{transition:none}}

/* Wide cutout portrait: let the open stance read across the hero instead of cropping it into a card. */
.hero-media--wide img{height:auto;max-width:none;width:100%;object-fit:contain;object-position:center bottom;position:absolute;right:0;bottom:0;transform:translate(var(--parallax-x,0px),var(--parallax-y,0px));filter:brightness(.84) saturate(.82)}
@media(max-width:760px){.hero-media--wide img{height:auto;width:125%;max-width:none;right:50%;bottom:26px;transform:translateX(50%);object-fit:contain}}

.about,
.notes,
.contact,
.site-footer {
  border-top: 1px solid var(--line, rgba(244, 240, 224, .16));
}

.about {
  display: grid;
  grid-template-columns: 1fr minmax(18rem, 1.15fr) minmax(20rem, .95fr);
  gap: clamp(1.5rem, 4vw, 5rem);
  padding-block: clamp(5rem, 11vw, 11rem);
  position: relative;
}

.section-intro .mono,
.notes-heading .mono {
  color: var(--muted, #aaa59a);
  font-size: .68rem;
  letter-spacing: .14em;
  line-height: 1.45;
  margin-top: 1rem;
}

.about-copy h2,
.notes h2,
.contact h2 {
  font-size: clamp(2rem, 3.4vw, 4rem);
  letter-spacing: -.055em;
  line-height: .97;
  margin: 0 0 clamp(2rem, 4vw, 4.5rem);
}

.about blockquote {
  color: var(--paper, #f4f0e0);
  font-family: var(--font-serif, Georgia, serif);
  font-size: clamp(2.25rem, 3.3vw, 3.35rem);
  font-weight: 400;
  letter-spacing: -.045em;
  line-height: 1.04;
  margin: 0 0 2.5rem;
  max-width: 31rem;
}

.about-prose {
  color: var(--muted, #b9b4aa);
  font-size: 1rem;
  line-height: 1.5;
  max-width: 34rem;
}

.about-prose p { margin: 0 0 1.15rem; }

.about-art {
  align-self: start;
  min-height: 33rem;
  padding: 0 0 5.5rem 1.3rem;
  position: relative;
}

.about-art figure { margin: 0; }
.about-portrait { max-width: 29rem; position: relative; z-index: 1; }
.about-portrait::after { border: 1px solid var(--accent, #e5ea67); content: ''; inset: .85rem -.85rem -.85rem .85rem; opacity: .45; pointer-events: none; position: absolute; }
.about-portrait img { aspect-ratio: 4 / 5; display: block; filter: saturate(.9) contrast(1.04); height: auto; object-fit: cover; width: 100%; }
.about-desk { bottom: 0; max-width: 18rem; position: absolute; right: -1.2rem; width: 65%; z-index: 2; }
.about-desk img { aspect-ratio: 4 / 3; display: block; object-fit: cover; width: 100%; }
.about-annotation { color: var(--accent, #e5ea67); font-family: var(--font-hand, cursive); font-size: clamp(1.1rem, 1.7vw, 1.7rem); line-height: .95; margin: 0; position: absolute; right: 0; top: -2.2rem; transform: rotate(-7deg); z-index: 3; }

.notes { padding-block: clamp(4.5rem, 8vw, 8rem); }
.notes-heading { align-items: end; display: flex; gap: 2rem; justify-content: space-between; margin-bottom: 2rem; }
.notes-heading h2 { margin-bottom: 0; }
.notes-heading .mono { max-width: 23rem; margin: 0 0 .5rem; }
.notes-grid { display: grid; gap: 1rem; grid-template-columns: repeat(3, 1fr); }
.note-entry { background: rgba(255, 255, 255, .015); border: 1px solid var(--line, rgba(244, 240, 224, .16)); color: inherit; display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto 1fr; min-height: 11rem; padding: 1.25rem; position: relative; text-decoration: none; }
.note-entry[href] { transition: background .25s ease, border-color .25s ease, transform .25s ease; }
.note-entry[href]:hover { background: rgba(227, 235, 103, .06); border-color: var(--accent, #e5ea67); transform: translateY(-3px); }
.note-status { color: var(--accent, #e5ea67); font-size: .68rem; letter-spacing: .12em; }
.note-entry h3 { align-self: end; font-size: clamp(1.18rem, 1.55vw, 1.6rem); font-weight: 500; grid-column: 1; letter-spacing: -.035em; line-height: 1.05; margin: 1.5rem 1rem 0 0; }
.note-arrow { align-self: end; color: var(--accent, #e5ea67); font-size: 1.2rem; grid-column: 2; grid-row: 2; }

.contact { align-items: start; display: grid; gap: clamp(2rem, 5vw, 6rem); grid-template-columns: minmax(14rem, .8fr) minmax(17rem, 1fr) minmax(15rem, .9fr); padding-block: clamp(4.5rem, 8vw, 8rem); }
.contact h2 { margin: 1.5rem 0 0; }
.contact-copy { max-width: 29rem; }
.contact-copy p { color: var(--muted, #b9b4aa); font-size: 1rem; line-height: 1.5; margin: 0 0 2rem; }
.button--unavailable { cursor: default; opacity: .55; }
.contact-links { border-left: 1px solid var(--line, rgba(244, 240, 224, .16)); display: grid; gap: .55rem; grid-template-columns: repeat(2, minmax(6rem, 1fr)); padding-left: clamp(1.2rem, 3vw, 3rem); }
.contact-social { align-items: center; color: var(--paper, #f4f0e0); display: flex; font-size: .9rem; gap: .6rem; min-height: 2.75rem; text-decoration: none; }
.contact-social > span { color: var(--accent, #e5ea67); font-size: 1.05rem; width: 1rem; }
.contact-social[href] { transition: color .2s ease, transform .2s ease; }
.contact-social[href]:hover { color: var(--accent, #e5ea67); transform: translateX(3px); }
.contact-social--unavailable { color: var(--muted, #aaa59a); }

.site-footer { align-items: center; display: grid; gap: 1rem; grid-template-columns: 1fr 1.5fr 1fr; padding-block: 2rem; }
.footer-name { color: var(--paper, #f4f0e0); font-size: 1.25rem; font-weight: 700; letter-spacing: -.05em; text-decoration: none; }
.site-footer .mono { color: var(--muted, #aaa59a); font-size: .6rem; letter-spacing: .13em; margin: 0; text-align: center; }
.site-footer .mono:last-child { text-align: right; }

@media (max-width: 900px) {
  .about { grid-template-columns: minmax(10rem, .55fr) 1.1fr; }
  .about-art { grid-column: 2; }
  .contact { grid-template-columns: .8fr 1fr; }
  .contact-links { grid-column: 2; }
}
/* Editorial integration pass: a slim rail and generous manifesto column. */
@media(min-width:901px){.about{grid-template-columns:65px minmax(0,1.16fr) minmax(0,1fr);gap:35px;padding-block:65px 75px}.about-intro .mono{writing-mode:vertical-rl;margin-top:38px;font-size:10px}.about-intro .section-index{font-size:11px;white-space:nowrap}.about-copy h2{font-size:36px;letter-spacing:-1.3px;margin-bottom:38px}.about blockquote{font-size:44px;line-height:1.06;letter-spacing:-1.5px;max-width:520px}.about-prose{max-width:470px;padding-left:24px;border-left:1px solid var(--line)}.about-art{padding:15px 100px 80px 12px;min-height:570px;margin-top:16px}.about-portrait{max-width:350px}.about-portrait img{aspect-ratio:3/4;object-position:center center}.about-desk{right:0;bottom:5px;width:58%;max-width:280px}.about-desk img{aspect-ratio:1/1;object-position:50% 60%}.about-annotation{right:0;top:-10px;font-family:var(--font-serif);font-style:italic;font-size:24px;line-height:1.1;max-width:140px}.notes{padding-block:42px}.notes h2{font-size:34px}.notes-heading .mono{font-size:11px}.note-entry{min-height:145px}.contact{padding-block:48px;grid-template-columns:1fr 1.35fr 1fr;gap:42px}.contact h2{font-size:34px;margin-top:18px}.site-footer{padding-block:34px}.site-footer .mono{font-size:10px}}
.note-entry:not([href]) .note-arrow{display:none}

/* Responsive composition is deliberately authored after the desktop sheets. */
html, body { max-width: 100%; overflow-x: clip; }

@media (max-width: 1024px) {
  .site-header { padding-inline: 1.5rem; }
  .hero { grid-template-columns: 46px minmax(0, 1fr) minmax(310px, 40%); min-height: 660px; }
  .hero-content { padding-left: clamp(1.5rem, 4vw, 3.75rem); }
  .hero h1 { font-size: clamp(3.8rem, 7vw, 5.7rem); }
  .hero-media { min-width: 310px; width: 40%; }
  .hero-question, .hero-location { right: calc(40% + 1rem); }
  .about { column-gap: clamp(1.5rem, 3vw, 2.75rem); }
  .about-art { min-height: 28rem; }
  .about-desk { right: 0; }
}

@media (max-width: 820px) {
  .shell { width: calc(100% - 48px); }
  .site-header { height: auto; min-height: 92px; grid-template-columns: minmax(6rem, 1fr) minmax(11rem, 1.4fr); gap: .8rem 1rem; padding: 1rem 1.5rem; }
  .site-brand { align-self: start; padding-top: .25rem; }
  .site-nav { display: flex; flex-wrap: wrap; gap: .55rem 1rem; justify-content: flex-end; }
  .site-nav a { display: inline-flex; min-height: 44px; align-items: center; font-size: .7rem; }
  .site-status { grid-column: 2; justify-self: end; margin-top: -.65rem; min-height: 20px; }

  .hero { min-height: 670px; padding-inline: 1.5rem; }
  .hero-content { min-height: 670px; padding-bottom: 22.5rem; }
  .hero h1 { font-size: clamp(3.35rem, 10.5vw, 5rem); max-width: 8.2em; }
  .hero-intro { max-width: 33rem; font-size: 1rem; }
  .hero-actions .button { min-height: 48px; font-size: .75rem; }
  .hero-media { height: 24rem; width: min(74vw, 510px); }

  .about { grid-template-columns: minmax(6rem, .38fr) minmax(0, 1fr); padding-block: 5.5rem; }
  .about-copy { min-width: 0; }
  .about-copy h2 { font-size: clamp(2rem, 5vw, 3rem); }
  .about blockquote { font-size: clamp(2.2rem, 4.7vw, 3rem); }
  .about-art { grid-column: 2; margin-top: 1rem; min-height: min(72vw, 34rem); padding-left: 0; width: min(100%, 31rem); }
  .about-portrait { max-width: 26rem; }
  .about-desk { max-width: 15rem; }
  .about-annotation { right: .25rem; }

  .notes-heading { align-items: start; flex-direction: column; gap: .9rem; }
  .notes-heading .mono { margin: 0; max-width: 34rem; }
  .notes-grid { gap: .85rem; }
  .note-entry { min-height: 10.5rem; }
  .contact { column-gap: 2.25rem; }
}

@media (max-width: 620px) {
  .shell { width: calc(100% - 40px); }
  .site-header { grid-template-columns: 1fr; padding-inline: 1.25rem; }
  .site-brand { padding: 0; }
  .site-nav { justify-content: flex-start; width: 100%; }
  .site-status { display: none; }

  .hero { display: block; min-height: 0; overflow: hidden; padding: 0 1.25rem 2.5rem; }
  .hero::before { background-size: 50% 100%; }
  .hero-content { display: block; min-height: 0; padding: 2.5rem 0 1.8rem; }
  .hero-kicker { font-size: .75rem; line-height: 1.45; margin: 0 0 2.25rem; }
  .hero h1 { font-family: var(--font-sans); font-size: clamp(3rem, 15vw, 4.45rem); font-weight: 500; letter-spacing: -.075em; line-height: .88; max-width: 100%; }
  .hero h1 em { font-style: normal; }
  .hero-intro { font-size: 1rem; line-height: 1.5; margin-top: 1.5rem; max-width: 34rem; }
  .hero-actions { gap: .7rem; margin-top: 1.5rem; }
  .hero-actions .button { flex: 1 1 9rem; padding-inline: .8rem; }
  .hero-media { bottom: auto; clip-path: polygon(11% 0, 100% 6%, 100% 100%, 0 100%, 0 12%); height: auto; inset: auto; margin: .25rem 0 0 auto; mask-image: none; min-height: 18rem; position: relative; top: auto; width: min(100%, 29rem); }
  .hero-media img { aspect-ratio: 4 / 3; height: auto; object-position: 58% 31%; transform: none; }
  .hero-media::before { background: linear-gradient(90deg, var(--bg) 0%, rgba(8,12,12,.3) 25%, transparent 52%), linear-gradient(0deg, rgba(8,12,12,.55), transparent 42%); }
  .hero-photo-label { bottom: .75rem; font-size: .62rem; right: .7rem; }
  .hero-note--ideas, .hero-note--ghana, .hero-question, .hero-location, .hero-cross { display: none; }

  .section-heading { grid-template-columns: 1fr; gap: .8rem; padding: 3.25rem 0 1.75rem; }
  .section-heading h2 { font-size: clamp(2.25rem, 10vw, 3.2rem); }
  .section-deck { grid-column: auto; font-size: 12px; max-width: 30ch; padding: 0; }
  .project-grid { gap: 1.25rem; }
  .project-top p { font-size: 1rem; }
  .project-bottom .mono { font-size: 11px; }

  .about { display: block; padding-block: 4.5rem; }
  .section-intro { margin-bottom: 1.25rem; }
  .section-intro .mono { font-size: 12px; }
  .about-copy h2, .notes h2, .contact h2 { font-size: clamp(2rem, 9vw, 3rem); }
  .about blockquote { font-size: clamp(2.15rem, 9vw, 3.1rem); line-height: 1.01; margin-bottom: 2rem; }
  .about-prose { font-size: 1rem; }
  .about-art { margin: 2.75rem 0 0; min-height: 0; padding: 0 0 5rem; width: 100%; }
  .about-portrait { max-width: min(100%, 31rem); }
  .about-portrait::after { inset: .55rem -.55rem -.55rem .55rem; }
  .about-desk { bottom: 0; max-width: 13.5rem; right: 0; width: 58%; }
  .about-annotation { font-size: 1.2rem; right: .2rem; top: -.8rem; }

  .notes { padding-block: 4.5rem; }
  .notes-heading { gap: 1.1rem; margin-bottom: 1.5rem; }
  .notes-heading .mono { font-size: 12px; }
  .notes-grid { grid-template-columns: 1fr; }
  .note-entry { min-height: 9.5rem; padding: 1.2rem; }
  .note-status { font-size: 12px; }
  .note-entry h3 { font-size: 1.4rem; }

  .contact { display: block; padding-block: 4.5rem; }
  .contact-heading { margin-bottom: 1.75rem; }
  .contact-copy p { font-size: 1rem; }
  .contact-copy .button { width: 100%; }
  .contact-links { border-left: 0; border-top: 1px solid var(--line); grid-template-columns: 1fr 1fr; margin-top: 2.25rem; padding: 1.1rem 0 0; }
  .contact-social { font-size: 1rem; min-height: 44px; }
  .site-footer { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; padding-block: 1.75rem; }
  .site-footer .mono, .site-footer .mono:last-child { font-size: 11px; text-align: left; }
}

@media (max-width: 380px) {
  .shell { width: calc(100% - 32px); }
  .site-header, .hero { padding-inline: 1rem; }
  .site-nav { gap: .25rem .8rem; }
  .site-nav a { font-size: .66rem; }
  .hero h1 { font-size: clamp(2.75rem, 15vw, 3.5rem); }
  .hero-actions { flex-direction: column; }
  .hero-actions .button { width: 100%; }
  .about blockquote { font-size: 2.05rem; }
  .contact-links { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .note-entry[href], .contact-social[href] { transition: none; }
}
/* Tablet retains a full-height portrait; coordinates stay outside the actions. */
@media(min-width:621px) and (max-width:1024px){.hero{height:710px;min-height:710px;padding-inline:0}.hero-content{padding:78px 0 40px;margin-left:7%;width:76%;min-height:0}.hero h1{font-size:clamp(62px,8vw,82px);font-weight:700;line-height:.96}.hero-intro{max-width:320px}.hero-media{top:0;right:0;bottom:0;left:auto;width:65%;height:100%;min-width:0;max-width:none;clip-path:none}.hero-media img{width:100%;height:100%;object-position:52% 50%;transform:none;aspect-ratio:auto}.hero-media:before{background:linear-gradient(90deg,var(--bg),rgba(8,12,12,.75) 17%,transparent 60%),linear-gradient(0deg,var(--bg),transparent 35%,rgba(8,12,12,.18))}.hero-location{right:0;left:auto;top:auto;bottom:20px;font-size:10px;width:195px}.hero-note,.hero-question{display:none}.hero-rail{top:20px}.site-nav a{font-size:14px}.site-header{padding-inline:0}.about{grid-template-columns:minmax(0,1fr);padding-block:50px}.about-intro{margin:0}.about-intro .mono{writing-mode:horizontal-tb;margin-top:12px;font-size:11px}.about-copy{max-width:640px}.about-art{grid-column:1;max-width:520px;width:80%;margin:20px 0 0 auto;min-height:580px}.about-portrait{max-width:370px}.about-desk{width:52%;max-width:260px;right:0}.contact{grid-template-columns:1fr 1.3fr;gap:28px;padding-block:48px}.contact-links{grid-column:2}.notes{padding-block:45px}}
@media(max-width:620px){.hero h1{font-weight:700;line-height:.98;letter-spacing:-.06em}.hero-media{clip-path:none;mask-image:linear-gradient(0deg,transparent,#000 20%,#000 85%,transparent);margin-top:0}.hero-media img{aspect-ratio:1.15;object-position:50% 65%;}.hero{padding-inline:0}.hero-actions .button{font-size:13px}.site-header{padding-inline:0}.site-nav a{font-size:13px}.hero-kicker{margin-bottom:24px}.about-annotation{font-family:var(--font-serif);font-style:italic}}
@media(max-width:620px){.hero-media{min-width:0;max-width:100%}}

/* Notes archive and article view: an editorial research notebook. */
.notebook-header { border-bottom: 1px solid var(--line); }
.notebook-masthead { align-items: stretch; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: minmax(0, 3fr) minmax(20rem, 2fr); min-height: 31rem; overflow: hidden; position: relative; }
.notebook-intro { align-self: center; max-width: 43rem; padding: 4.75rem clamp(1.5rem, 5vw, 6rem) 4.5rem 0; position: relative; z-index: 2; }
.notebook-intro .section-index { margin-bottom: 2rem; }
.notebook-intro h1 { font-size: clamp(3.5rem, 7.2vw, 7.6rem); font-weight: 600; letter-spacing: -.075em; line-height: .86; max-width: 8.8em; }
.notebook-intro h1 span { color: var(--accent); display: block; }
.notebook-intro > p:not(.mono) { color: var(--muted); font-size: 1.05rem; line-height: 1.55; margin-top: 2rem; max-width: 37rem; }
.notebook-meta { color: #c9c387; font-size: 12px; margin-top: 2.4rem; }
.notes-portrait { align-self: end; height: 31rem; margin: 0; min-width: 0; overflow: hidden; position: relative; }
.notes-portrait img { height: 100%; max-width: none; object-fit: contain; object-position: center bottom; width: 100%; }

.archive { padding-block: clamp(4rem, 8vw, 7rem); }
.archive-toolbar { align-items: end; border-bottom: 1px solid var(--line); display: grid; gap: 1.25rem 2rem; grid-template-columns: 1fr auto; padding-bottom: 1.5rem; }
.archive-filters { display: flex; flex-wrap: wrap; gap: .55rem; }
.filter-button { background: transparent; border: 1px solid var(--line); color: var(--muted); cursor: pointer; font: 12px/1 var(--font-mono); letter-spacing: .08em; min-height: 44px; padding: .55rem .85rem; text-transform: uppercase; transition: background .2s, border-color .2s, color .2s; }
.filter-button:hover, .filter-button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--bg); }
.archive-search { display: flex; min-width: min(18rem, 100%); }
.archive-search input { appearance: none; background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; color: var(--text); font: 16px/1.3 var(--font-sans); min-height: 44px; outline: 0; padding: .55rem 0; width: 100%; }
.archive-search input:focus { border-color: var(--accent); }
.archive-search input::placeholder { color: var(--muted); opacity: 1; }
.archive-count { color: var(--muted); font-size: 12px; grid-column: 1 / -1; margin: .2rem 0 0; }
.writing-list { border-top: 1px solid var(--line); margin-top: 1.7rem; }
.writing-entry { align-items: start; border-bottom: 1px solid var(--line); display: grid; gap: 1.25rem; grid-template-columns: 4.5rem minmax(0, 1fr) 3rem; min-width: 0; padding: clamp(1.5rem, 3vw, 2.75rem) 0; }
.writing-number { color: #c9c387; font: 12px/1.3 var(--font-mono); padding-top: .35rem; }
.writing-content { min-width: 0; }
.writing-meta, .writing-tags { color: var(--muted); font-size: 12px; }
.writing-title { display: inline-block; font-size: clamp(1.65rem, 3.1vw, 3.4rem); letter-spacing: -.055em; line-height: .98; margin: .7rem 0 .95rem; text-decoration: none; }
.writing-title:hover { color: var(--accent); }
.writing-content > p { color: var(--muted); font-size: 1rem; line-height: 1.5; max-width: 48rem; }
.writing-tags { color: #c9c387; display: block; margin-top: 1rem; }
.writing-arrow { align-items: center; border: 1px solid var(--line); color: var(--accent); display: inline-flex; font-size: 1.25rem; height: 44px; justify-content: center; margin-top: .2rem; text-decoration: none; transition: background .2s, color .2s; width: 44px; }
.writing-arrow:hover { background: var(--accent); color: var(--bg); }
.writing-empty { border-bottom: 1px solid var(--line); color: var(--muted); padding: 3rem 0; }
.writing-empty[hidden] { display: none; }
.platform-note { border-left: 1px solid var(--line); margin: 4rem 0 0 auto; max-width: 28rem; padding: 1.25rem 0 1.25rem 1.4rem; }
.platform-note h3 { color: var(--accent); font: 12px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }
.platform-note p { color: var(--muted); font-size: 1rem; line-height: 1.5; margin: .75rem 0 1rem; }
.platform-note .button { min-width: 44px; }

.paper-hero { border-bottom: 1px solid var(--line); max-width: 100%; padding-block: clamp(5rem, 10vw, 10rem) clamp(3rem, 6vw, 6rem); }
.paper-kicker { color: #c9c387; font-size: 12px; margin-bottom: 1.8rem; }
.paper-hero h1 { font-size: clamp(3rem, 7vw, 7.4rem); letter-spacing: -.075em; line-height: .88; max-width: 13ch; }
.paper-subtitle { color: var(--muted); font-family: var(--font-serif); font-size: clamp(1.25rem, 2vw, 1.8rem); line-height: 1.35; margin-top: 2rem; max-width: 43rem; }
.paper-meta { color: var(--muted); font-size: 12px; margin-top: 2rem; }
.paper-layout { display: grid; gap: clamp(2.5rem, 8vw, 9rem); grid-template-columns: minmax(10rem, .45fr) minmax(0, 1.55fr); padding-block: clamp(4rem, 9vw, 8rem); }
.paper-toc { align-self: start; border-left: 1px solid var(--line); padding-left: 1rem; position: sticky; top: 2rem; }
.paper-toc p { color: #c9c387; font-size: 12px; margin-bottom: .85rem; }
.paper-toc a { color: var(--muted); display: block; font-size: .92rem; line-height: 1.3; margin: .6rem 0; min-height: 28px; text-decoration: none; }
.paper-toc a:hover { color: var(--accent); }
.paper-content { font-size: 1.08rem; line-height: 1.65; max-width: 47rem; min-width: 0; }
.paper-content > * + * { margin-top: 1.4rem; }
.paper-content h2 { font-size: clamp(1.85rem, 3.2vw, 3.25rem); letter-spacing: -.05em; line-height: 1; margin-top: 3.8rem; }
.paper-content h2:first-child { margin-top: 0; }
.paper-content p, .paper-content li { color: #c8cdc3; }
.paper-content ul { padding-left: 1.15rem; }
.paper-content li + li { margin-top: .5rem; }
.paper-callout { border-block: 1px solid #8f9471; color: var(--text); font-family: var(--font-serif); font-size: clamp(1.35rem, 2.5vw, 2.1rem); line-height: 1.22; margin: 3rem 0; padding: 1.5rem 0; }
.paper-diagram { background: rgba(238,245,160,.025); border: 1px solid var(--line); margin: 2.5rem 0; overflow: hidden; padding: 1rem; }
.paper-diagram svg { height: auto; width: 100%; }
.paper-download { margin-top: 3rem; }

@media (max-width: 760px) {
  .notebook-masthead { display: block; min-height: 0; overflow: visible; }
  .notebook-intro { padding: 3.75rem 0 2.3rem; }
  .notebook-intro h1 { font-size: clamp(3.1rem, 15vw, 5rem); }
  .notebook-intro > p:not(.mono) { font-size: 1rem; }
  .notes-portrait { height: auto; margin-inline: auto; max-width: 38rem; }
  .notes-portrait img { height: auto; object-position: center bottom; width: 100%; }
  .archive-toolbar { align-items: stretch; display: flex; flex-direction: column; }
  .archive-search { min-width: 0; }
  .writing-entry { grid-template-columns: 2.5rem minmax(0, 1fr) 44px; }
  .writing-title { font-size: clamp(1.55rem, 7.5vw, 2.5rem); }
  .platform-note { margin-left: 0; }
  .paper-layout { display: block; }
  .paper-toc { border-bottom: 1px solid var(--line); border-left: 0; margin-bottom: 2.5rem; padding: 0 0 1rem; position: static; }
  .paper-toc a { display: inline-block; margin-right: 1rem; min-height: 44px; padding-top: .65rem; }
  .paper-content { font-size: 1rem; }
}

@media (max-width: 420px) {
  .notebook-intro { padding-top: 3rem; }
  .notebook-meta { font-size: 11px; }
  .archive-filters { gap: .4rem; }
  .filter-button { font-size: 11px; padding-inline: .65rem; }
  .writing-entry { gap: .65rem; grid-template-columns: 2rem minmax(0, 1fr) 44px; }
  .writing-number, .writing-meta, .writing-tags { font-size: 11px; }
  .writing-arrow { margin-left: -.2rem; }
  .paper-hero h1 { font-size: clamp(2.85rem, 14vw, 4rem); }
}

@media (prefers-reduced-motion: reduce) {
  .filter-button, .writing-arrow { transition: none; }
}

/* Transparent portrait treatment. Keep source pixels intact: all depth comes from light and shadow. */
.hero-media img[src*="cutout-hero"],
.about-portrait img[src*="cutout-about"],
.notes-portrait img[src*="cutout-notes"] {
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 2px 1px rgba(0,0,0,.4)) drop-shadow(0 18px 30px rgba(0,0,0,.55));
}

.hero-media:has(img[src*="cutout-hero"]) {
  overflow: visible;
  mask-image: none;
  background: radial-gradient(ellipse 54% 48% at 59% 44%, rgba(238,245,160,.13), transparent 68%);
}
.hero-media:has(img[src*="cutout-hero"]) img {
  height: 100%;
  width: 100%;
  transform: translate(var(--parallax-x, 0px), var(--parallax-y, 0px));
}
.hero-media:has(img[src*="cutout-hero"])::after,
.about-portrait:has(img[src*="cutout-about"])::before,
.notes-portrait:has(img[src*="cutout-notes"])::before {
  content: '';
  inset: 8% 8% 6%;
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(ellipse at 48% 42%, rgba(238,245,160,.16), rgba(82,104,84,.07) 45%, transparent 70%);
  filter: blur(16px);
  pointer-events: none;
}
.hero-media:has(img[src*="cutout-hero"])::before { background: linear-gradient(90deg, var(--bg) 0%, rgba(8,12,12,.45) 14%, transparent 46%), linear-gradient(0deg, var(--bg), transparent 28%, rgba(8,12,12,.24)); }

.about-portrait:has(img[src*="cutout-about"]), .notes-portrait:has(img[src*="cutout-notes"]) { isolation: isolate; overflow: visible; }
.about-portrait:has(img[src*="cutout-about"]) img, .notes-portrait:has(img[src*="cutout-notes"]) img { aspect-ratio: auto; height: auto; position: relative; z-index: 1; }

@media (max-width: 1024px) {
  .hero-media:has(img[src*="cutout-hero"]) img { transform: translate(calc(var(--parallax-x, 0px) * .55), calc(var(--parallax-y, 0px) * .55)); }
}
@media (max-width: 760px) {
  .hero-media:has(img[src*="cutout-hero"]) { background: radial-gradient(ellipse 58% 43% at 50% 48%, rgba(238,245,160,.12), transparent 72%); }
  .hero-media:has(img[src*="cutout-hero"]) img { height: 100%; transform: none; }
  .about-portrait:has(img[src*="cutout-about"]) img, .notes-portrait:has(img[src*="cutout-notes"]) img { max-height: 34rem; object-position: center bottom; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-media:has(img[src*="cutout-hero"]) img { transform: none; }
}

/* Fit the wide hero cutout without the portrait crop or side masks. */
.hero-media.hero-media--wide { mask-image:none; overflow:visible; }
.hero-media.hero-media--wide img { width:76%; height:auto; aspect-ratio:auto; max-width:100%; right:2%; bottom:80px; object-fit:contain; transform:none; }
.hero-media.hero-media--wide::before { background:linear-gradient(0deg,var(--bg),transparent 18%); }
.hero-media--wide .hero-media-edge { display:none; }
@media(max-width:1024px) and (min-width:621px){
  .hero-media.hero-media--wide img { width:88%; height:auto; right:4%; bottom:90px; }
}
@media(max-width:620px){
  .hero-media.hero-media--wide { min-height:0; height:auto; margin:12px auto 0; width:100%; }
  .hero-media.hero-media--wide img { position:relative; width:92%; height:auto; right:auto; bottom:auto; margin:0 auto; aspect-ratio:auto; transform:none; }
}

/* Keep mobile faces clear of annotations and show the complete workspace photo. */
@media(max-width:620px){
  .hero-media.hero-media--wide, .notes-portrait { padding-top:12px; }
  .about-art { padding-top:3rem; padding-bottom:0; }
  .about-annotation { top:0; }
  .about-portrait:has(img[src*="cutout-about"]) img { max-height:none; }
  .about-art .about-desk { position:relative; bottom:auto; right:auto; margin:-3rem 0 0 auto; }
  .about-desk img { aspect-ratio:auto; height:auto; object-fit:contain; }
}

/* Personal identity and writing integration. */
.site-brand{display:flex;align-items:center;gap:10px;white-space:nowrap}.site-brand span{margin-left:-10px}.personal-mark{height:50px;width:34px;object-fit:contain}.footer-brand{display:flex;align-items:center;gap:10px}.footer-brand img{height:42px;width:28px;object-fit:contain}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}[hidden]{display:none!important}.medium-link{display:inline-flex;align-items:center}.paper-diagram{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:24px 10px;border-block:1px solid var(--line);margin:30px 0}.paper-diagram>div{border:1px solid var(--line);padding:16px 14px;min-width:0}.paper-diagram small{display:block;font:10px/1.5 var(--font-mono);color:var(--accent)}.paper-diagram strong{font:20px/1.5 var(--font-sans)}.paper-diagram>span{color:var(--accent)}.notes-heading .notebook-open{white-space:nowrap}.about-portrait:has(img[src*="cutout-about"]):after{display:none}
@media(max-width:760px){.personal-mark{height:40px;width:27px}.paper-diagram{gap:5px;padding-inline:0}.paper-diagram>div{padding:12px 8px}.paper-diagram small{font-size:8px}.paper-diagram strong{font-size:16px}.notebook-open{align-self:flex-start}}

/* Enhancement is mobile-only; without JavaScript the existing links stay visible. */
.nav-toggle, .nav-backdrop, .nav-signature { display: none; }
@media (max-width: 620px) {
  .nav-ready.site-header { grid-template-columns: 1fr auto; min-height: 82px; }
  .nav-ready .site-brand { align-self: center; }
  .nav-ready .nav-toggle { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; width: 44px; height: 44px; padding: 10px; border: 1px solid var(--line); color: var(--text); background: var(--bg); cursor: pointer; }
  .nav-toggle span { display: block; width: 20px; height: 1px; background: currentColor; transition: transform .2s ease; }
  .nav-toggle[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
  .nav-ready .site-nav { display: none; }
  .nav-ready.nav-open { z-index: 50; }
  .nav-ready.nav-open .site-nav { display: flex; flex-direction: column; align-items: stretch; gap: 0; position: absolute; top: 100%; left: 0; right: 0; width: auto; padding: 16px 24px; max-height: calc(100dvh - var(--nav-top, 100px) - 20px); overflow-y: auto; background: var(--bg); border: 1px solid var(--line); z-index: 2; animation: nav-enter .18s ease-out; }
  .nav-ready.nav-open .site-nav a { font-size: 16px; min-height: 52px; border-bottom: 1px solid var(--line); }
  .nav-ready.nav-open .nav-signature { display: block; align-self: center; width: 24px; height: 36px; object-fit: contain; margin-top: 20px; }
  .nav-ready.nav-open .nav-backdrop { display: block; position: fixed; inset: 0; background: rgba(0, 0, 0, .6); z-index: -1; }
  .nav-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
  @keyframes nav-enter { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } }
}
@media (prefers-reduced-motion: reduce) {
  .nav-toggle span { transition: none; }
  .nav-ready.nav-open .site-nav { animation: none; }
}