@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700&display=swap');

:root{--ink:#11110f;--paper:#e8e5df;--muted:#9b9991;--line:#3e3d38;--gold:#d4aa56;--pad:clamp(1.25rem,4vw,4.5rem)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--ink);color:var(--paper);font-family:Manrope,Arial,sans-serif;font-size:15px;line-height:1.5;overflow-x:hidden}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}.site-header{position:relative;z-index:5;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:1.55rem var(--pad);border-bottom:1px solid var(--line)}.wordmark{font-size:1.25rem;font-weight:700;letter-spacing:.15em}.wordmark-dot{color:var(--gold)}.header-meta,.eyebrow,.project-meta,.frame-caption,.footer-bottom,.menu-toggle,.site-menu a span{font-family:'DM Mono',monospace;font-size:.65rem;letter-spacing:.08em;text-transform:uppercase}.header-meta{display:flex;gap:.8rem;color:var(--muted)}.meta-slash{color:var(--gold)}.menu-wrap{justify-self:end;position:relative}.menu-toggle{display:flex;align-items:center;gap:1rem;padding:.5rem 0}.menu-icon{display:grid;gap:5px;width:20px}.menu-icon i{height:1px;width:100%;background:var(--paper);transition:transform .3s}.menu-wrap.is-open .menu-icon i:first-child{transform:translateY(3px) rotate(45deg)}.menu-wrap.is-open .menu-icon i:last-child{transform:translateY(-3px) rotate(-45deg)}.site-menu{position:absolute;right:0;top:2.7rem;width:220px;padding:1rem;background:#1b1b18;border:1px solid var(--line);opacity:0;pointer-events:none;transform:translateY(-8px);transition:.25s ease}.menu-wrap.is-open .site-menu{opacity:1;pointer-events:auto;transform:none}.site-menu a{display:flex;justify-content:space-between;padding:.8rem 0;border-bottom:1px solid var(--line);font-size:.85rem}.site-menu a:last-child{border:0}.site-menu a:hover{color:var(--gold)}
.section-grid{display:grid;grid-template-columns:minmax(250px,1fr) minmax(300px,1fr);gap:clamp(3rem,11vw,11rem);padding:clamp(5.5rem,12vw,11rem) var(--pad)}.hero{min-height:calc(100vh - 77px);align-items:center}.hero-visual{max-width:495px}.image-frame{position:relative;aspect-ratio:1/1.12;overflow:hidden;background:#050505}.image-frame:after{content:'';position:absolute;inset:0;border:1px solid rgba(232,229,223,.24)}.image-frame img{width:100%;height:100%;object-fit:cover;object-position:20% 51%;display:block;filter:saturate(.8) contrast(1.05)}.frame-caption{display:flex;justify-content:space-between;color:var(--muted);padding-top:.8rem}.hero-copy{align-self:center;max-width:480px}.eyebrow{color:var(--gold);margin:0 0 2rem}.hero h1,.section-intro h2,.showcase h2,.closing h2{font-size:clamp(3.5rem,7vw,7.5rem);font-weight:400;line-height:.91;letter-spacing:-.08em;margin:0}.hero h1 em,.section-intro h2 em,.showcase h2 em,.closing h2 em{font-family:Georgia,serif;font-style:italic;letter-spacing:-.1em}.intro{font-size:1rem;line-height:1.8;color:#b9b6ae;max-width:390px;margin:2.5rem 0}.path-trigger{display:flex;align-items:center;gap:1.5rem;color:var(--paper);font-family:'DM Mono',monospace;font-size:.65rem;text-transform:uppercase;letter-spacing:.08em}.path-trigger svg{width:120px;height:74px;overflow:visible}.arrow-path{fill:none;stroke:var(--gold);stroke-width:1}.path-trigger svg>path:last-child{fill:none;stroke:var(--gold);stroke-width:1}.path-trigger:hover .arrow-path{stroke-dasharray:150;animation:draw .8s ease}.value{border-top:1px solid var(--line)}.section-intro h2{font-size:clamp(3rem,5.5vw,6rem)}.value-list{border-top:1px solid var(--line)}.value-item{display:grid;grid-template-columns:3rem 1fr;gap:1.5rem;padding:2.25rem 0;border-bottom:1px solid var(--line)}.item-number{font: .7rem 'DM Mono',monospace;color:var(--gold)}.value-item h3{font-size:clamp(1rem,1.5vw,1.3rem);font-weight:500;line-height:1.35;max-width:500px;margin:0 0 1rem}.value-item p{color:var(--muted);max-width:430px;margin:0;line-height:1.7;font-size:.9rem}.showcase{padding:clamp(5.5rem,10vw,9rem) var(--pad) 0;border-top:1px solid var(--line)}.showcase-heading{display:flex;align-items:end;justify-content:space-between;margin-bottom:4rem}.showcase h2{font-size:clamp(4rem,9vw,9rem)}.showcase-note{font: .7rem 'DM Mono',monospace;color:var(--muted);max-width:170px;line-height:1.6;text-transform:uppercase}.project-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}.project-card figure{position:relative;aspect-ratio: .77;overflow:hidden;margin:0;background:#252521}.project-card img{width:100%;height:100%;display:block;object-fit:cover;filter:grayscale(.8) sepia(.15);transition:transform .6s cubic-bezier(.2,.8,.2,1),filter .4s}.project-card:hover img{transform:scale(1.04);filter:grayscale(.1) sepia(.1)}.project-index{position:absolute;top:1rem;left:1rem;font: .65rem 'DM Mono',monospace;color:var(--paper)}.project-meta{display:flex;justify-content:space-between;color:var(--muted);padding:.8rem 0 .3rem}.project-card h3{font-size:.95rem;font-weight:500;margin:0}.plane-path{height:145px;margin:1rem calc(var(--pad) * -1) 0;overflow:hidden}.plane-path svg{width:100%;height:100%;overflow:visible}.squiggle{fill:none;stroke:#57564f;stroke-width:1}.paper-plane{fill:var(--gold);transform:translate(0,78px);opacity:0}.paper-plane path:last-child{fill:#8d6d32}.plane-path.is-visible .paper-plane{animation:fly 5.5s cubic-bezier(.5,.05,.2,1) forwards}.closing{padding:clamp(6rem,14vw,13rem) var(--pad);border-top:1px solid var(--line)}.closing h2{font-size:clamp(3.2rem,7vw,7.5rem);max-width:860px;margin-bottom:3.5rem}.text-link{display:inline-flex;gap:1.2rem;align-items:center;border-bottom:1px solid var(--gold);padding-bottom:.6rem;font-size:.9rem}.text-link span,.footer-links span{color:var(--gold);font-size:1.2rem}.site-footer{padding:2rem var(--pad) 1.5rem;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr 1fr;gap:2rem;color:var(--muted);font-size:.75rem}.footer-mark{font-size:2rem;color:var(--paper);font-weight:700}.footer-mark span{font-size:1rem;color:var(--gold)}.footer-links{display:flex;flex-direction:column;gap:.5rem;justify-self:center}.footer-links a:hover{color:var(--paper)}.footer-bottom{grid-column:1/-1;display:flex;justify-content:space-between;padding-top:3rem;color:#625f57}
.reveal{opacity:0;transform:translateY(18px);transition:opacity .8s ease,transform .8s ease}.reveal.is-visible{opacity:1;transform:none}@keyframes fly{0%{opacity:0;offset-distance:0%}8%{opacity:1}100%{opacity:1;offset-distance:100%}}.paper-plane{offset-path:path('M 0 95 C 92 9, 136 135, 229 75 S 369 16, 450 76 S 580 143, 678 62 S 820 15, 900 76 S 1036 138, 1117 64 S 1170 50, 1200 82');offset-rotate:auto}@keyframes draw{from{stroke-dashoffset:150}to{stroke-dashoffset:0}}
@media(max-width:760px){.site-header{grid-template-columns:1fr auto}.header-meta{display:none}.section-grid{grid-template-columns:1fr;gap:4rem}.hero{padding-top:4rem;min-height:auto}.hero-visual{max-width:100%}.image-frame{aspect-ratio:1/.95}.hero h1{font-size:clamp(4rem,18vw,7rem)}.hero-copy{padding-bottom:2rem}.value{gap:3rem}.showcase-heading{display:block;margin-bottom:2.5rem}.showcase-note{margin-top:1.5rem}.project-grid{grid-template-columns:repeat(2,1fr);gap:2.25rem 1rem}.project-card figure{aspect-ratio:.85}.plane-path{height:100px}.closing h2{font-size:clamp(3.4rem,15vw,6rem)}.site-footer{grid-template-columns:1fr 1fr}.footer-links{justify-self:end}.footer-bottom{padding-top:2rem}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.reveal{opacity:1;transform:none;transition:none}.plane-path.is-visible .paper-plane{animation:none;opacity:1;transform:translate(1120px,50px)}*{animation-duration:.01ms!important}}

/* Responsive spacing and reversed hero composition. */
:root{--pad:40px}
.section-grid{gap:clamp(2.5rem,6vw,6rem);padding-top:clamp(4.5rem,8vw,7rem);padding-bottom:clamp(4.5rem,8vw,7rem)}
.hero{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(2rem,4vw,4rem)}
.hero-visual{order:2;width:100%;max-width:clamp(260px,32vw,430px);min-width:0;justify-self:end}.hero-copy{order:1;min-width:0}
.showcase{padding-top:clamp(4.5rem,8vw,7rem)}
@media(max-width:900px) and (min-width:761px){
  .hero{gap:2rem}
  .hero-visual{max-width:clamp(230px,34vw,340px)}
  .hero h1{font-size:clamp(3rem,6vw,5rem)}
  .intro{font-size:.9rem;margin:1.75rem 0}
}
@media(max-width:760px){
  :root{--pad:20px}
  .section-grid{grid-template-columns:1fr;gap:2.5rem;padding-top:4rem;padding-bottom:4rem}
  .hero{min-height:auto}
  .hero-copy{order:1}
  .hero-visual{order:2;max-width:100%;justify-self:stretch}
}

/* Keep the hero compact, centered, and visually connected to its heading. */
.hero{width:min(100%,1280px);margin-inline:auto;grid-template-columns:minmax(0,.95fr) minmax(250px,.75fr);gap:40px}
.hero-copy{width:min(100%,560px);justify-self:start}
.hero-visual{width:min(100%,420px);justify-self:end}
.hero h1{max-width:560px}

@media(max-width:900px) and (min-width:761px){
  .hero{grid-template-columns:minmax(0,1fr) minmax(220px,.65fr);gap:28px}
  .hero-visual{width:min(100%,340px)}
  .hero h1{font-size:clamp(3.5rem,7vw,5.5rem)}
}

@media(max-width:760px){
  .hero{width:100%;gap:2.25rem;text-align:center}
  .hero-copy,.hero-visual{width:100%;justify-self:center}
  .hero-copy{max-width:560px}
  .hero-visual{max-width:380px}
  .intro{margin-inline:auto}
  .path-trigger{justify-content:center}
  .frame-caption{text-align:left}
}

/* Final spacing pass: bring the interface inward and reduce unused vertical space. */
.site-header{padding-inline:clamp(56px,9vw,120px)}
.hero{min-height:auto;padding-top:clamp(4rem,7vw,6rem);padding-bottom:clamp(4rem,7vw,6rem)}
.hero h1{ text-wrap:balance }
.value{padding-top:clamp(4rem,7vw,6rem);padding-bottom:clamp(4rem,7vw,6rem)}
.closing{padding-top:clamp(5rem,9vw,8rem);padding-bottom:clamp(5rem,9vw,8rem)}
.showcase-heading{margin-bottom:3rem}

@media(max-width:760px){
  .site-header{padding-inline:20px}
  .hero{padding-top:3.5rem;padding-bottom:3.5rem}
  .value{padding-top:3.5rem;padding-bottom:3.5rem}
  .showcase-heading{margin-bottom:2rem}
  .closing{padding-top:4.5rem;padding-bottom:4.5rem}
}

/* Shared section rhythm and a restrained 15% scale reduction. */
.hero,.value,.showcase,.closing{padding-top:clamp(3.4rem,6vw,5.1rem)}
.hero,.value,.showcase,.closing{padding-bottom:clamp(3.4rem,6vw,5.1rem)}
.hero{gap:34px}
.hero h1{font-size:clamp(3rem,5.95vw,6.375rem)}
.section-intro h2{font-size:clamp(2.55rem,4.675vw,5.1rem)}
.showcase h2{font-size:clamp(3.4rem,7.65vw,7.65rem)}
.closing h2{font-size:clamp(2.72rem,5.95vw,6.375rem)}
.value-item{gap:1.275rem;padding-block:1.9rem}
.showcase-heading{margin-bottom:2.55rem}
.closing{padding-bottom:clamp(4.25rem,7.65vw,6.8rem)}

@media(max-width:760px){
  .hero,.value,.showcase,.closing{padding-top:3rem;padding-bottom:3rem}
  .hero{gap:1.9rem}
  .hero h1{font-size:clamp(3.4rem,15.3vw,5.95rem)}
  .section-intro h2{font-size:clamp(2.55rem,11.5vw,5.1rem)}
  .showcase h2{font-size:clamp(3.4rem,12.75vw,6.4rem)}
  .closing h2{font-size:clamp(2.9rem,12.75vw,5.1rem)}
  .value-item{padding-block:1.6rem}
  .showcase-heading{margin-bottom:1.7rem}
}

/* iPhone-sized layout: prioritize readable type, touch targets, and zero overflow. */
@media(max-width:600px){
  body{font-size:14px}
  .site-header{padding-block:1.1rem}
  .wordmark{font-size:1.05rem}
  .menu-toggle{min-height:44px}
  .site-menu{top:3.1rem;width:min(220px,calc(100vw - 40px))}
  .hero h1{font-size:clamp(3rem,15vw,4.8rem);line-height:.94}
  .eyebrow{margin-bottom:1.35rem}
  .intro{font-size:.92rem;line-height:1.7;margin-top:1.75rem}
  .path-trigger{gap:.8rem;flex-wrap:wrap}
  .path-trigger svg{width:96px;height:60px}
  .image-frame{aspect-ratio:1/.92}
  .section-intro h2{font-size:clamp(2.5rem,12vw,4rem)}
  .value-item{grid-template-columns:2rem 1fr;gap:.8rem}
  .value-item h3{font-size:1rem}
  .value-item p{font-size:.85rem;line-height:1.65}
  .showcase h2{font-size:clamp(3rem,14vw,5rem)}
  .showcase-note{font-size:.6rem;max-width:220px}
  .project-grid{grid-template-columns:1fr;gap:2rem}
  .project-card figure{aspect-ratio:1/.72}
  .project-card h3{font-size:1rem}
  .plane-path{height:82px}
  .closing h2{font-size:clamp(2.8rem,13vw,4.8rem);line-height:.96}
  .text-link{min-height:44px;align-items:center}
  .site-footer{grid-template-columns:1fr;gap:1.5rem;padding-top:1.75rem}
  .footer-links{justify-self:start;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;gap:.7rem 1.5rem}
  .footer-bottom{padding-top:1.25rem;gap:1rem;flex-wrap:wrap}
}

/* Keep every primary section aligned to the same left and right gutter. */
.site-header{padding-inline:var(--pad)}
.hero{width:100%;margin-inline:0}
.site-footer{padding-inline:var(--pad)}

/* Section 02 and Section 03 trade places while keeping their anchors intact. */
main{display:flex;flex-direction:column}
#profile{order:1}
#projects{order:2}
#value{order:3}
#hidden-secrets{order:4}