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

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--background); }
body { margin: 0; min-width: 320px; background: var(--background); color: var(--text); font-family: 'Manrope', Arial, sans-serif; font-size: 15px; line-height: 1.6; overflow-x: hidden; }
body::before { content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .3; background: radial-gradient(36rem circle at var(--pointer-x, 72%) var(--pointer-y, 24%), rgba(var(--accent-rgb),.09), transparent 72%); transition: opacity .35s ease; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; }
button { color: inherit; }
img { display: block; max-width: 100%; }
.ambient-glow { position: fixed; width: 30rem; height: 30rem; top: 18vh; right: -20rem; z-index: 0; pointer-events: none; border-radius: 50%; background: rgba(var(--accent-2-rgb),.055); filter: blur(90px); }
#site-header, #page-content, #site-footer { position: relative; z-index: 1; }
.page-gutter { padding-left: clamp(1.2rem, 6.4vw, 7rem); padding-right: clamp(1.2rem, 6.4vw, 7rem); }
.nav-shell { min-height: 86px; display: flex; align-items: center; gap: 2rem; padding: 0 clamp(1.2rem, 6.4vw, 7rem); border-bottom: 1px solid var(--line); }
.wordmark { display: inline-flex; align-items: center; gap: .8rem; white-space: nowrap; font-size: .78rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.wordmark-mark { display: grid; place-items: center; width: 2.35rem; height: 2.35rem; border: 1px solid rgba(var(--accent-rgb),.55); border-radius: 50%; color: var(--accent); font-family: 'DM Mono', monospace; font-size: .72rem; letter-spacing: 0; }
.primary-nav { margin-left: auto; display: flex; align-items: center; gap: clamp(1rem, 2.7vw, 2.7rem); }
.nav-link { color: var(--muted); font-size: .68rem; letter-spacing: .11em; text-transform: uppercase; transition: color .2s ease; }
.nav-link:hover, .nav-link:focus-visible, .nav-link.is-current { color: var(--text); }
.nav-link.is-current::after { content: ''; display: block; width: .28rem; height: .28rem; margin: .35rem auto 0; border-radius: 50%; background: var(--accent); }
.nav-index { color: rgba(185,178,162,.56); font: .58rem 'DM Mono', monospace; letter-spacing: .12em; }
.menu-toggle { display: none; }
.hero { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, .86fr) 34px; align-items: center; min-height: min(790px, calc(100svh - 86px)); padding-top: clamp(4rem, 8vw, 8rem); padding-bottom: 5rem; }
.hero-copy { position: relative; z-index: 2; grid-column: 1; grid-row: 1; max-width: 740px; padding-bottom: 2rem; }
.eyebrow, .section-index, .nav-index, .scene-caption, .vertical-label, .side-index, .hero-footnote, .project-card-meta, .experience-number, .experience-period, .education-row > span, .skill-item > span, .footer-inner > span, .project-endnote, .contact-placeholder, .form-note { font-family: 'DM Mono', monospace; }
.eyebrow { display: flex; align-items: center; gap: .7rem; margin: 0 0 1.8rem; color: var(--muted); font-size: .63rem; letter-spacing: .09em; text-transform: uppercase; }
.eyebrow-dot { display: inline-block; width: .42rem; height: .42rem; flex: 0 0 .42rem; border-radius: 50%; background: var(--accent); box-shadow: 0 0 1.1rem rgba(var(--accent-rgb),.7); }
h1, h2, h3, p { margin-top: 0; }
.hero h1 { margin: 0; font-family: 'Playfair Display', Georgia, serif; font-size: clamp(5.4rem, 13vw, 12.8rem); font-weight: 500; letter-spacing: -.08em; line-height: .78; }
h1 em, h2 em, .intro-statement em { color: var(--accent); font-style: italic; font-weight: 500; }
.hero h1 em { display: inline-block; padding-left: .16em; color: transparent; -webkit-text-stroke: 1px var(--accent); }
.hero-statement { max-width: 34rem; margin: 2.2rem 0 0; color: var(--muted); font-size: clamp(1rem, 1.35vw, 1.18rem); line-height: 1.85; }
.hero-actions { display: flex; align-items: center; gap: 2rem; margin-top: 2.1rem; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 1.2rem; min-height: 50px; padding: .7rem 1.2rem; border: 1px solid transparent; cursor: pointer; font-size: .7rem; font-weight: 700; letter-spacing: .06em; transition: transform .22s ease, background .22s ease, color .22s ease; }
.button:hover { transform: translateY(-3px); }
.button-gold { background: var(--accent); color: #17140b; }
.button-gold:hover { background: color-mix(in srgb, var(--accent) 82%, white); }
.button span, .text-link span, .arrow-link span { font-size: 1.05rem; }
.text-link, .arrow-link { display: inline-flex; align-items: center; gap: .7rem; color: var(--muted); font-size: .7rem; transition: color .2s ease; }
.text-link:hover, .arrow-link:hover { color: var(--accent); }
.hero-footnote { display: flex; justify-content: space-between; max-width: 33rem; margin-top: clamp(3.5rem, 9vh, 6.2rem); padding-top: 1rem; border-top: 1px solid var(--line); color: rgba(185,178,162,.62); font-size: .55rem; letter-spacing: .08em; text-transform: uppercase; }
.hero-art { position: relative; grid-column: 2; grid-row: 1; height: clamp(370px, 48vw, 620px); margin-left: -2rem; overflow: hidden; isolation: isolate; border-radius: 48% 48% 3px 3px; background: #100e0a; box-shadow: 0 2.5rem 7rem rgba(0,0,0,.35); transform: translateZ(0); }
.hero-art::after { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(90deg, rgba(9,9,9,.4), transparent 28%), linear-gradient(0deg, rgba(9,9,9,.34), transparent 45%); }
.hero-art-image { position: absolute; inset: -2%; width: 104%; height: 104%; object-fit: cover; object-position: 58% center; opacity: .84; filter: saturate(.88) contrast(1.06); transform: translate3d(var(--art-x, 0px), var(--art-y, 0px), 0) scale(1.04); transition: transform .3s ease-out; }
.hero-art canvas { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; mix-blend-mode: screen; }
.scene-caption { position: absolute; right: 1rem; bottom: 1rem; left: 1rem; z-index: 3; display: flex; align-items: center; justify-content: space-between; color: rgba(255,252,244,.72); font-size: .52rem; letter-spacing: .12em; text-transform: uppercase; }
.scene-caption-mark { color: var(--accent); font-size: 1.2rem; }
.hero-side-note { grid-column: 3; grid-row: 1; align-self: stretch; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 1.5rem 0; color: rgba(185,178,162,.55); }
.vertical-label { writing-mode: vertical-rl; font-size: .53rem; letter-spacing: .16em; }
.side-index { writing-mode: vertical-rl; font-size: .5rem; letter-spacing: .12em; }
.hero-scroll { position: absolute; left: clamp(1.2rem, 6.4vw, 7rem); bottom: 1.7rem; display: flex; align-items: center; gap: .75rem; color: rgba(185,178,162,.6); font: .55rem 'DM Mono', monospace; letter-spacing: .1em; text-transform: uppercase; }
.scroll-line { display: inline-block; width: 2.5rem; height: 1px; background: var(--accent); }
.intro-band { display: grid; grid-template-columns: 1fr 2fr; gap: 2rem; padding-top: clamp(6rem, 12vw, 10rem); padding-bottom: clamp(6rem, 12vw, 10rem); border-top: 1px solid var(--line); }
.section-index { margin: 0; color: var(--accent); font-size: .57rem; letter-spacing: .14em; line-height: 1.6; text-transform: uppercase; }
.intro-statement { max-width: 850px; margin: 0 0 1.8rem; font-family: 'Playfair Display', Georgia, serif; font-size: clamp(2rem, 5.1vw, 5rem); font-weight: 500; letter-spacing: -.045em; line-height: 1.14; }
.home-work { padding-top: 4rem; padding-bottom: 8rem; background: linear-gradient(180deg, transparent, rgba(21,21,21,.56) 36%, rgba(21,21,21,.56)); }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 2rem; margin-bottom: 3rem; }
.section-head h2, .skills-content h2, .about-education h2 { margin: 1rem 0 0; font-family: 'Playfair Display', Georgia, serif; font-size: clamp(2.7rem, 6vw, 5.6rem); font-weight: 500; letter-spacing: -.055em; line-height: .98; }
.project-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(1rem, 3vw, 3rem); row-gap: 4.5rem; align-items: start; }
.project-card { display: block; width: 100%; padding: 0; border: 0; background: transparent; text-align: left; cursor: pointer; color: var(--text); }
.project-card:nth-child(4n+1) { grid-column: 1 / span 7; }
.project-card:nth-child(4n+2) { grid-column: 9 / span 4; margin-top: 5rem; }
.project-card:nth-child(4n+3) { grid-column: 2 / span 5; margin-top: 1rem; }
.project-card:nth-child(4n+4) { grid-column: 7 / span 6; margin-top: -2rem; }
.home-grid .project-card:nth-child(3n+1) { grid-column: 1 / span 7; }
.home-grid .project-card:nth-child(3n+2) { grid-column: 9 / span 4; margin-top: 5rem; }
.home-grid .project-card:nth-child(3n+3) { grid-column: 3 / span 7; margin-top: 1rem; }
.project-image-wrap { position: relative; display: block; overflow: hidden; aspect-ratio: 1.48 / 1; background: var(--card); }
.project-card:nth-child(4n+2) .project-image-wrap { aspect-ratio: .82 / 1; }
.project-card:nth-child(4n+3) .project-image-wrap { aspect-ratio: 1.15 / 1; }
.home-grid .project-card:nth-child(3n+3) .project-image-wrap { aspect-ratio: 1.65 / 1; }
.project-image-wrap::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(9,9,9,.3), transparent 40%); pointer-events: none; }
.project-image-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform .75s cubic-bezier(.2,.7,.2,1), filter .45s ease; }
.project-card:hover .project-image-wrap img, .project-card:focus-visible .project-image-wrap img { transform: scale(1.045); filter: saturate(1.07); }
.project-open { position: absolute; top: 1rem; right: 1rem; z-index: 1; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border: 1px solid rgba(255,252,244,.38); border-radius: 50%; background: rgba(9,9,9,.3); color: var(--text); font-size: 1rem; opacity: 0; transform: translateY(5px); transition: opacity .25s ease, transform .25s ease, background .25s ease; }
.project-card:hover .project-open, .project-card:focus-visible .project-open { opacity: 1; transform: none; background: rgba(var(--accent-rgb),.9); color: #17140b; }
.project-card-meta { display: flex; justify-content: space-between; gap: 1rem; margin-top: 1rem; color: var(--muted); font-size: .53rem; letter-spacing: .08em; text-transform: uppercase; }
.project-card-title { display: block; margin-top: .45rem; font-family: 'Playfair Display', Georgia, serif; font-size: clamp(1.35rem, 2.5vw, 2.3rem); letter-spacing: -.025em; line-height: 1.2; }
.project-card-summary { display: block; max-width: 36rem; margin-top: .5rem; color: var(--muted); font-size: .8rem; line-height: 1.7; }
.home-focus { display: grid; grid-template-columns: 1fr 2fr auto; align-items: center; gap: 2rem; margin: 0 clamp(1.2rem, 6.4vw, 7rem) 7rem; padding: 2rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.focus-label { color: var(--accent); font: .58rem 'DM Mono', monospace; letter-spacing: .14em; text-transform: uppercase; }
.home-focus p { margin: 0; font-family: 'Playfair Display', Georgia, serif; font-size: clamp(1.25rem, 2.5vw, 2.2rem); }
.round-link { display: grid; place-items: center; width: 3rem; height: 3rem; border: 1px solid rgba(var(--accent-rgb),.65); border-radius: 50%; color: var(--accent); font-size: 1.15rem; transition: background .2s ease, color .2s ease, transform .2s ease; }
.round-link:hover { transform: rotate(45deg); background: var(--accent); color: var(--background); }
.inner-hero { position: relative; display: grid; grid-template-columns: 1fr 2fr 1fr; align-items: end; min-height: 440px; padding-top: 6rem; padding-bottom: 4rem; border-bottom: 1px solid var(--line); }
.inner-hero > .section-index { align-self: start; }
.inner-hero h1 { margin: 0; font-family: 'Playfair Display', Georgia, serif; font-size: clamp(3.8rem, 9vw, 8.7rem); font-weight: 500; letter-spacing: -.07em; line-height: .93; }
.inner-hero h1 em { color: var(--accent); }
.inner-hero-aside { align-self: end; display: flex; gap: .8rem; align-items: flex-start; max-width: 16rem; margin-left: 2rem; color: var(--muted); font-size: .8rem; line-height: 1.7; }
.inner-hero-aside p { margin: 0; }
.about-lead { display: grid; grid-template-columns: 1fr 1.2fr .8fr; gap: clamp(2rem, 6vw, 6rem); padding-top: 6rem; padding-bottom: 8rem; align-items: start; }
.about-lead-copy { max-width: 46rem; }
.lead-copy { margin: 0; font-family: 'Playfair Display', Georgia, serif; font-size: clamp(1.7rem, 3.2vw, 3.2rem); letter-spacing: -.035em; line-height: 1.35; }
.body-copy { max-width: 32rem; margin: 2rem 0 0; color: var(--muted); font-size: .92rem; line-height: 1.9; }
.about-photo { position: relative; margin-top: 2.5rem; }
.about-photo img { width: 100%; max-height: 320px; object-fit: cover; filter: saturate(.55); }
.about-photo span { display: block; margin-top: .55rem; color: rgba(185,178,162,.55); font: .5rem 'DM Mono', monospace; letter-spacing: .1em; text-transform: uppercase; }
.about-experience { padding-top: 5rem; padding-bottom: 8rem; background: var(--surface); }
.section-note { max-width: 18rem; margin: 0; color: var(--muted); font-size: .72rem; line-height: 1.7; }
.experience-list { border-top: 1px solid var(--line); }
.experience-row { display: grid; grid-template-columns: 45px 1.2fr 1.5fr .55fr; align-items: start; gap: 1.5rem; padding: 1.6rem 0; border-bottom: 1px solid var(--line); }
.experience-number, .experience-period { padding-top: .3rem; color: var(--accent); font-size: .56rem; letter-spacing: .1em; }
.experience-row h3, .education-row h3 { margin: 0; font-size: .9rem; font-weight: 600; }
.experience-row p, .education-row p { margin: .35rem 0 0; color: var(--muted); font-size: .75rem; }
.experience-row .experience-description { max-width: 26rem; margin: 0; line-height: 1.7; }
.experience-period { color: var(--muted); text-align: right; }
.about-skills { display: grid; grid-template-columns: 1fr 2fr; gap: 2rem; padding-top: 8rem; padding-bottom: 8rem; }
.skills-content h2 { margin: 0 0 3rem; }
.skill-list { border-top: 1px solid var(--line); }
.skill-item { display: grid; grid-template-columns: 45px 1fr 2rem; align-items: center; gap: 1rem; padding: .9rem 0; border-bottom: 1px solid var(--line); }
.skill-item > span { color: var(--accent); font-size: .55rem; }
.skill-item p { margin: 0; font-size: .85rem; }
.skill-item b { color: var(--muted); font-weight: 400; text-align: right; }
.about-education { display: grid; grid-template-columns: 1fr 2fr; gap: 2rem; padding-top: 5rem; padding-bottom: 7rem; background: var(--surface); }
.about-education h2 { margin: 0 0 2.5rem; }
.education-list { border-top: 1px solid var(--line); }
.education-row { display: grid; grid-template-columns: 90px 1fr; gap: 1rem; padding: 1.3rem 0; border-bottom: 1px solid var(--line); }
.education-row > span { padding-top: .25rem; color: var(--accent); font-size: .55rem; }
.future-panel { display: grid; grid-template-columns: 1fr 2fr; gap: 2rem; padding-top: 7rem; padding-bottom: 8rem; }
.future-panel > div > p { max-width: 58rem; margin: 0 0 2rem; font-family: 'Playfair Display', Georgia, serif; font-size: clamp(1.8rem, 4vw, 3.8rem); letter-spacing: -.04em; line-height: 1.25; }
.project-hero { min-height: 390px; }
.project-hero h1 { grid-column: 2; }
.project-hero h1 em { color: var(--accent); }
.project-hero .inner-hero-aside { grid-column: 3; }
.projects-section { padding-top: 5rem; padding-bottom: 7rem; }
.projects-grid .project-card:nth-child(4n+2) { grid-column: 9 / span 4; margin-top: 6rem; }
.projects-grid .project-card:nth-child(4n+3) { grid-column: 2 / span 5; margin-top: 0; }
.projects-grid .project-card:nth-child(4n+4) { grid-column: 7 / span 6; margin-top: -2rem; }
.project-endnote { display: flex; justify-content: space-between; gap: 2rem; margin: 0 clamp(1.2rem, 6.4vw, 7rem) 7rem; padding: 1.3rem 0; border-top: 1px solid var(--line); color: var(--muted); font-size: .57rem; letter-spacing: .08em; text-transform: uppercase; }
.project-endnote a { color: var(--text); }
.project-endnote a span { color: var(--accent); }
.project-dialog { position: fixed; inset: auto 0 0 auto; width: min(940px, 96vw); height: min(88vh, 870px); max-width: none; max-height: none; margin: 0; padding: 0; overflow: auto; border: 1px solid rgba(var(--accent-rgb),.2); background: var(--surface); color: var(--text); box-shadow: 0 0 0 100vmax rgba(0,0,0,.75); }
.project-dialog::backdrop { background: rgba(0,0,0,.78); backdrop-filter: blur(8px); }
.dialog-close { position: sticky; top: 1rem; left: calc(100% - 4rem); z-index: 5; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; margin: 1rem 1rem -3.6rem auto; border: 1px solid rgba(255,252,244,.45); border-radius: 50%; background: rgba(9,9,9,.6); color: var(--text); cursor: pointer; font-size: 1.5rem; }
.dialog-close:hover { background: var(--accent); color: var(--background); }
.dialog-content { display: grid; grid-template-columns: 1fr .8fr; min-height: 100%; }
.dialog-image { min-height: 100%; background: var(--card); }
.dialog-image img { position: sticky; top: 0; width: 100%; height: 88vh; object-fit: cover; }
.dialog-copy { padding: 5rem 2.5rem 3rem; }
.dialog-copy h2 { margin: 1rem 0; font-family: 'Playfair Display', Georgia, serif; font-size: clamp(2rem, 4vw, 3.8rem); font-weight: 500; letter-spacing: -.04em; line-height: 1.08; }
.dialog-summary { color: var(--muted); font-size: .88rem; line-height: 1.8; }
.dialog-meta { display: flex; gap: 2rem; margin: 2rem 0; padding: 1rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.dialog-meta div { display: grid; gap: .25rem; }
.dialog-meta span { color: var(--accent); font: .52rem 'DM Mono', monospace; letter-spacing: .1em; text-transform: uppercase; }
.dialog-meta strong { font-size: .7rem; font-weight: 500; }
.dialog-detail h3 { margin: 1.7rem 0 .3rem; font: .58rem 'DM Mono', monospace; letter-spacing: .12em; text-transform: uppercase; }
.dialog-detail p { margin: 0; color: var(--muted); font-size: .75rem; line-height: 1.8; }
.contact-hero { padding-top: 5rem; padding-bottom: 5rem; }
.contact-layout { display: grid; grid-template-columns: 1fr .72fr; align-items: center; gap: 3rem; min-height: 520px; }
.contact-layout h1 { margin: 1.5rem 0 1.2rem; font-family: 'Playfair Display', Georgia, serif; font-size: clamp(4.5rem, 10vw, 9.4rem); font-weight: 500; letter-spacing: -.075em; line-height: .92; }
.contact-layout h1 em { color: transparent; -webkit-text-stroke: 1px var(--accent); }
.contact-intro { max-width: 31rem; color: var(--muted); font-size: .95rem; line-height: 1.85; }
.email-link { display: inline-flex; align-items: center; gap: 1rem; margin-top: 1.5rem; padding-bottom: .5rem; border-bottom: 1px solid rgba(var(--accent-rgb),.55); color: var(--accent); font-size: clamp(1rem, 2.1vw, 1.7rem); }
.email-link span { font-size: 1.1rem; }
.contact-orb { position: relative; width: min(32vw, 350px); aspect-ratio: 1; justify-self: center; border-radius: 50%; background: radial-gradient(circle at 40% 38%, rgba(255,252,244,.22), rgba(var(--accent-rgb),.13) 19%, rgba(var(--accent-2-rgb),.08) 37%, transparent 65%); filter: drop-shadow(0 0 4rem rgba(var(--accent-rgb),.1)); animation: orb-breathe 8s ease-in-out infinite alternate; }
.orb-ring { position: absolute; inset: 14%; border: 1px solid rgba(var(--accent-rgb),.4); border-radius: 46% 54% 60% 40% / 50% 41% 59% 50%; transform: rotate(24deg); }
.ring-two { inset: 2%; border-color: rgba(var(--accent-2-rgb),.4); transform: rotate(-33deg) scaleY(.7); }
.orb-core { position: absolute; inset: 38%; border-radius: 50%; background: radial-gradient(circle, rgba(255,252,244,.9), rgba(var(--accent-rgb),.45) 40%, transparent 75%); filter: blur(6px); }
@keyframes orb-breathe { from { transform: scale(.94) rotate(-6deg); } to { transform: scale(1.04) rotate(8deg); } }
.contact-content { display: grid; grid-template-columns: .8fr 1fr; gap: clamp(3rem, 10vw, 10rem); padding-top: 4rem; padding-bottom: 9rem; border-top: 1px solid var(--line); background: var(--surface); }
.contact-detail-link { display: inline-block; margin-top: 1.5rem; color: var(--accent); font-size: 1.1rem; }
.contact-placeholder { margin: 1.4rem 0 0; color: var(--muted); font-size: .57rem; letter-spacing: .05em; }
.contact-form { display: grid; gap: 1.2rem; }
.contact-form > .section-index { margin-bottom: .3rem; }
.contact-form label { display: grid; gap: .4rem; color: var(--muted); font: .58rem 'DM Mono', monospace; letter-spacing: .08em; text-transform: uppercase; }
.contact-form input, .contact-form textarea { width: 100%; padding: .8rem 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; outline: none; background: transparent; color: var(--text); font: .85rem 'Manrope', Arial, sans-serif; resize: vertical; }
.contact-form input::placeholder, .contact-form textarea::placeholder { color: rgba(185,178,162,.45); }
.contact-form input:focus, .contact-form textarea:focus { border-color: var(--accent); }
.contact-form .button { justify-self: start; }
.form-note { margin: -.4rem 0 0; color: rgba(185,178,162,.58); font-size: .52rem; }
.footer-rule { height: 1px; margin: 0 clamp(1.2rem, 6.4vw, 7rem); background: var(--line); }
.footer-inner { display: flex; align-items: center; gap: 1.5rem; min-height: 92px; padding: 1rem clamp(1.2rem, 6.4vw, 7rem); color: rgba(185,178,162,.62); font-size: .56rem; }
.footer-name { color: var(--text); font: .75rem 'Manrope', sans-serif; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.footer-inner > a:nth-of-type(2) { margin-left: auto; color: var(--accent); }
.footer-year { white-space: nowrap; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

@media (max-width: 900px) {
  .nav-shell { min-height: 72px; }
  .nav-index { display: none; }
  .hero { grid-template-columns: minmax(0, 1fr) minmax(290px, .8fr) 22px; min-height: 700px; }
  .hero-art { height: 440px; margin-left: -1.5rem; }
  .hero h1 { font-size: clamp(5rem, 13vw, 8rem); }
  .inner-hero { grid-template-columns: .7fr 2fr; min-height: 370px; }
  .inner-hero-aside { grid-column: 2; margin: 2rem 0 0; }
  .project-hero h1 { grid-column: 2; }
  .project-hero .inner-hero-aside { grid-column: 2; }
  .about-lead { grid-template-columns: .6fr 1.4fr; }
  .about-photo { grid-column: 2; width: min(380px, 70%); margin-top: 0; }
  .experience-row { grid-template-columns: 35px 1fr 1.3fr; }
  .experience-period { grid-column: 2 / -1; text-align: left; }
}
@media (max-width: 650px) {
  body { font-size: 14px; }
  .page-gutter { padding-left: 1.15rem; padding-right: 1.15rem; }
  .nav-shell { position: relative; min-height: 70px; padding: 0 1.15rem; }
  .wordmark { font-size: .7rem; }
  .menu-toggle { display: grid; gap: 5px; margin-left: auto; padding: .6rem; border: 0; background: transparent; }
  .menu-toggle span { display: block; width: 1.3rem; height: 1px; background: var(--text); transition: transform .2s ease; }
  .menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(3px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3px) rotate(-45deg); }
  .primary-nav { position: absolute; top: 69px; right: 0; left: 0; z-index: 10; display: none; align-items: stretch; gap: 0; padding: .6rem 1.15rem 1rem; border-bottom: 1px solid var(--line); background: rgba(9,9,9,.96); }
  .primary-nav.is-open { display: flex; flex-direction: column; }
  .nav-link { padding: .8rem 0; border-bottom: 1px solid var(--line); }
  .nav-link.is-current::after { display: none; }
  .hero { display: flex; flex-direction: column; align-items: stretch; min-height: unset; padding-top: 3.4rem; padding-bottom: 4rem; }
  .hero-copy { padding-bottom: 0; }
  .eyebrow { margin-bottom: 1.2rem; font-size: .52rem; }
  .hero h1 { font-size: clamp(4.4rem, 19vw, 7rem); }
  .hero-statement { margin-top: 1.5rem; font-size: .9rem; }
  .hero-actions { gap: 1.2rem; margin-top: 1.5rem; }
  .button { min-height: 46px; padding: .65rem .85rem; font-size: .64rem; }
  .hero-art { order: -1; width: 84%; height: 380px; align-self: flex-end; margin: 0 0 2rem; border-radius: 50% 50% 2px 2px; }
  .hero-side-note, .hero-scroll { display: none; }
  .hero-footnote { margin-top: 2.8rem; font-size: .48rem; }
  .intro-band { grid-template-columns: 1fr; gap: 1.5rem; padding-top: 5rem; padding-bottom: 5rem; }
  .intro-statement { font-size: 2.35rem; }
  .home-work { padding-top: 3rem; padding-bottom: 5rem; }
  .section-head { align-items: start; flex-direction: column; margin-bottom: 2rem; }
  .section-head h2, .skills-content h2, .about-education h2 { font-size: 3rem; }
  .project-grid { display: flex; flex-direction: column; gap: 2.8rem; }
  .project-card, .project-card:nth-child(n), .home-grid .project-card:nth-child(n), .projects-grid .project-card:nth-child(n) { width: 100%; margin: 0; }
  .project-image-wrap, .project-card:nth-child(n) .project-image-wrap, .home-grid .project-card:nth-child(n) .project-image-wrap { aspect-ratio: 1.2 / 1; }
  .project-card:nth-child(2n) .project-image-wrap { aspect-ratio: .95 / 1; }
  .project-open { opacity: 1; transform: none; }
  .project-card-meta { font-size: .47rem; }
  .home-focus { grid-template-columns: 1fr auto; gap: .6rem 1rem; margin: 0 1.15rem 5rem; }
  .focus-label { grid-column: 1; }
  .home-focus p { grid-column: 1; font-size: 1.45rem; }
  .round-link { grid-column: 2; grid-row: 1 / span 2; }
  .inner-hero { display: block; min-height: unset; padding-top: 4rem; padding-bottom: 3rem; }
  .inner-hero > .section-index { margin-bottom: 2.5rem; }
  .inner-hero h1 { font-size: clamp(3.8rem, 16vw, 6.4rem); }
  .inner-hero-aside { margin: 1.8rem 0 0; }
  .about-lead { display: block; padding-top: 4rem; padding-bottom: 5rem; }
  .about-lead .section-index { margin-bottom: 1.7rem; }
  .lead-copy { font-size: 1.75rem; }
  .body-copy { font-size: .83rem; }
  .about-photo { width: 78%; margin: 2rem 0 0 auto; }
  .about-experience { padding-top: 4rem; padding-bottom: 5rem; }
  .section-note { margin-top: .8rem; }
  .experience-row { grid-template-columns: 28px 1fr; gap: .6rem 1rem; }
  .experience-description { grid-column: 2; }
  .experience-period { grid-column: 2; }
  .about-skills { display: block; padding-top: 5rem; padding-bottom: 5rem; }
  .about-skills > .section-index { margin-bottom: 1.6rem; }
  .skills-content h2 { margin-bottom: 2rem; }
  .skill-item { grid-template-columns: 28px 1fr 1.5rem; gap: .6rem; }
  .skill-item p { font-size: .76rem; }
  .about-education { display: block; padding-top: 4rem; padding-bottom: 5rem; }
  .about-education > .section-index { margin-bottom: 1.6rem; }
  .about-education h2 { margin-bottom: 1.8rem; }
  .education-row { grid-template-columns: 55px 1fr; }
  .future-panel { display: block; padding-top: 5rem; padding-bottom: 5rem; }
  .future-panel > .section-index { margin-bottom: 1.6rem; }
  .future-panel > div > p { font-size: 1.8rem; }
  .projects-section { padding-top: 3rem; padding-bottom: 5rem; }
  .project-endnote { flex-direction: column; margin: 0 1.15rem 5rem; font-size: .5rem; }
  .project-dialog { inset: auto 0 0; width: 100%; height: 92vh; border-right: 0; border-bottom: 0; border-left: 0; }
  .dialog-content { display: block; }
  .dialog-image { height: 35vh; min-height: 220px; }
  .dialog-image img { position: absolute; top: 0; height: 35vh; min-height: 220px; }
  .dialog-copy { padding: 2rem 1.2rem 3rem; }
  .dialog-copy h2 { font-size: 2.5rem; }
  .dialog-close { position: fixed; top: 1rem; right: 1rem; left: auto; margin: 0; }
  .contact-hero { padding-top: 4rem; padding-bottom: 4rem; }
  .contact-layout { display: flex; flex-direction: column; align-items: stretch; gap: 2rem; min-height: unset; }
  .contact-layout h1 { font-size: clamp(4rem, 16vw, 6.5rem); }
  .contact-orb { order: -1; align-self: flex-end; width: 42vw; margin-bottom: -3rem; }
  .contact-intro { font-size: .85rem; }
  .email-link { font-size: 1rem; }
  .contact-content { display: flex; flex-direction: column; gap: 4rem; padding-top: 3rem; padding-bottom: 5rem; }
  .footer-inner { display: grid; grid-template-columns: 1fr auto; gap: .5rem 1rem; padding: 1.2rem 1.15rem; font-size: .48rem; }
  .footer-inner > span:nth-of-type(1) { grid-column: 1 / -1; grid-row: 2; }
  .footer-inner > a:nth-of-type(2) { grid-column: 1; grid-row: 3; margin-left: 0; }
  .footer-year { grid-column: 2; grid-row: 3; }
  .footer-rule { margin: 0 1.15rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Full-bleed hero and a contact visual tied to the work */
.hero {
  display: block;
  height: calc(100svh - 86px);
  min-height: 700px;
  padding: 0;
  overflow: hidden;
  isolation: isolate;
}
.hero-copy {
  position: absolute;
  top: 47%;
  left: clamp(1.2rem, 6.4vw, 7rem);
  width: min(58vw, 740px);
  max-width: 740px;
  padding: 0;
  transform: translateY(-43%);
}
.hero-art {
  position: absolute;
  inset: 0;
  z-index: 0;
  height: auto;
  margin: 0;
  border-radius: 0;
  box-shadow: none;
}
.hero-art::after {
  background: linear-gradient(90deg, rgba(9,9,9,.91) 0%, rgba(9,9,9,.78) 30%, rgba(9,9,9,.28) 59%, rgba(9,9,9,.04) 100%), linear-gradient(0deg, rgba(9,9,9,.56), transparent 38%);
}
.hero-art-image { object-position: 62% center; opacity: .94; }
.hero-side-note {
  position: absolute;
  top: 1.5rem;
  right: clamp(1.2rem, 6.4vw, 7rem);
  bottom: 3rem;
  z-index: 3;
}
.hero-scroll { z-index: 3; }
.scene-caption { right: clamp(1.2rem, 6.4vw, 7rem); bottom: 1.5rem; left: auto; }
.contact-layout { align-items: center; }
.contact-visual {
  position: relative;
  width: min(36vw, 430px);
  min-width: 300px;
  height: clamp(390px, 43vw, 570px);
  margin: 0;
  overflow: hidden;
  background: var(--card);
  box-shadow: 0 2.5rem 7rem rgba(0,0,0,.38);
}
.contact-visual::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(0deg, rgba(9,9,9,.72), transparent 35%), linear-gradient(90deg, rgba(9,9,9,.12), transparent 55%);
}
.contact-visual img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.contact-visual figcaption {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  left: 1rem;
  z-index: 1;
  color: rgba(255,252,244,.8);
  font: .52rem 'DM Mono', monospace;
  letter-spacing: .1em;
  text-transform: uppercase;
}
@media (max-width: 900px) and (min-width: 651px) {
  .hero { height: calc(100svh - 86px); min-height: 700px; }
  .hero-copy { width: min(66vw, 680px); }
  .hero h1 { font-size: clamp(5.4rem, 12vw, 9rem); }
  .contact-visual { width: 34vw; min-width: 250px; height: 420px; }
}
@media (max-width: 650px) {
  .hero {
    display: flex;
    height: calc(100svh - 70px);
    min-height: 720px;
    margin-top: 0;
    padding: 2rem 1.15rem 2.2rem;
  }
  .hero-copy {
    position: relative;
    top: auto;
    left: auto;
    z-index: 3;
    width: 100%;
    max-width: none;
    margin-top: auto;
    transform: none;
  }
  .hero-art { position: absolute; inset: 0; width: 100%; height: 100%; }
  .hero-art::after { background: linear-gradient(0deg, rgba(9,9,9,.96) 0%, rgba(9,9,9,.82) 37%, rgba(9,9,9,.1) 100%); }
  .hero-art-image { object-position: 58% center; }
  .hero h1 { font-size: clamp(4.4rem, 19vw, 7rem); }
  .hero-statement { max-width: 34rem; }
  .hero-footnote { margin-top: 2rem; }
  .scene-caption { right: 1.15rem; bottom: auto; top: 1.15rem; left: auto; font-size: .43rem; }
  .contact-visual { order: -1; align-self: flex-end; width: min(58vw, 310px); min-width: 0; height: 320px; margin-bottom: -1rem; }
}

/* Bring project cards and profile content into a more connected rhythm. */
.projects-grid .project-card:nth-child(4n+1) { grid-column: 1 / span 7; margin-top: 0; }
.projects-grid .project-card:nth-child(4n+2) { grid-column: 8 / span 5; margin-top: 3rem; }
.projects-grid .project-card:nth-child(4n+3) { grid-column: 2 / span 5; margin-top: 1rem; }
.projects-grid .project-card:nth-child(4n+4) { grid-column: 7 / span 6; margin-top: 2rem; }
.about-lead {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(1.2rem, 2.5vw, 2rem);
  padding-top: 4.5rem;
  padding-bottom: 5.5rem;
}
.about-lead > .section-index { grid-column: 1 / span 2; }
.about-lead-copy { grid-column: 3 / span 6; max-width: 48rem; }
.about-photo { grid-column: 9 / span 4; width: 100%; margin-top: .35rem; }
.about-photo img { aspect-ratio: 1.15 / 1; max-height: 380px; }
@media (max-width: 900px) and (min-width: 651px) {
  .projects-grid .project-card:nth-child(4n+1) { grid-column: 1 / span 7; }
  .projects-grid .project-card:nth-child(4n+2) { grid-column: 8 / span 5; margin-top: 2rem; }
  .projects-grid .project-card:nth-child(4n+3) { grid-column: 1 / span 5; }
  .projects-grid .project-card:nth-child(4n+4) { grid-column: 7 / span 6; margin-top: 1.5rem; }
  .about-lead { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1rem; }
  .about-lead > .section-index { grid-column: 1 / span 2; }
  .about-lead-copy { grid-column: 3 / span 6; }
  .about-photo { grid-column: 9 / span 4; width: 100%; }
}
@media (max-width: 650px) {
  .projects-grid .project-card:nth-child(n) { grid-column: auto; margin: 0; }
  .about-lead { display: block; padding-top: 4rem; padding-bottom: 5rem; }
  .about-photo { width: 78%; margin: 2rem 0 0 auto; }
}



/* Responsive light field and editorial NP monogram. */
.serif-monogram .wordmark-mark{border:0;border-radius:0;font-family:Georgia,'Times New Roman',serif;font-size:1.7rem;font-weight:400;letter-spacing:-.16em;color:var(--text);padding-right:.16em;width:2.5rem}.light-field-hero .hero-art-image{display:none}.light-field-hero .hero-art{background:transparent}.light-field-hero .hero-art::after{background:linear-gradient(0deg,var(--background),transparent 18%)}.light-field-hero #scene-canvas{mix-blend-mode:normal;opacity:1}.light-field-hero .scene-caption,.light-field-hero .hero-side-note{display:none}.light-field-hero .hero-copy{width:min(49vw,680px)}.light-field-hero h1{font-size:clamp(5rem,10vw,10.5rem)}.light-field-hero .hero-statement{max-width:31rem}.light-field-prompt{position:absolute;z-index:4;right:5%;bottom:2rem;padding:.7rem 0;border:0;border-bottom:1px solid rgba(var(--accent-rgb),.4);background:transparent;color:var(--muted);font:10px/1.5 monospace;letter-spacing:.06em;cursor:pointer}.light-field-prompt:hover,.light-field-prompt:focus-visible{color:var(--accent)}@media(max-width:700px){.light-field-hero .hero-copy{width:calc(100% - 2.4rem)}.light-field-prompt{right:1.2rem;bottom:1rem;font-size:8px}.light-field-hero .hero-scroll{display:none}.light-field-hero h1{font-size:clamp(4.8rem,17vw,7rem)}}

.light-field-3d .hero-art{background:radial-gradient(ellipse at 77% 56%,#38200d40,transparent 59%)}.light-field-3d .hero-art::after{background:linear-gradient(90deg,#090909 0%,#090909cc 27%,#09090900 58%),linear-gradient(0deg,#090909 0%,transparent 15%)}.light-field-3d .light-field-prompt{cursor:default;pointer-events:none;color:#c7af86}.field-fallback .hero-art-image{display:block;opacity:.3!important}

.project-credits{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:1.1rem;padding-top:1rem;border-top:1px solid var(--line);text-align:left}.project-credits>span{display:grid;gap:.3rem}.project-credits small{color:var(--accent);font:10px/1.5 monospace;text-transform:uppercase;letter-spacing:.04em}.project-credits>span>span{color:var(--muted);font-size:.8rem}.draft-placeholder{border:1px dashed var(--line);padding:1rem;color:var(--muted);font-size:.85rem;line-height:1.6}.resume-panel button:disabled{opacity:.55;cursor:default}.software-section h3{font-size:1.5rem}.draft-placeholder p{margin:.5rem 0 0}

/* Centered project dialog v1 */
body .project-dialog{position:fixed;inset:0;margin:auto;width:min(1120px,calc(100vw - 48px));height:min(88vh,900px);height:min(88svh,900px);max-width:calc(100vw - 48px);max-height:calc(100svh - 48px);border-radius:16px;overflow:auto;overscroll-behavior:contain;box-sizing:border-box}
body .project-dialog .dialog-image img{height:min(88vh,900px);height:min(88svh,900px)}
@media(max-width:700px){body .project-dialog{width:calc(100vw - 24px);max-width:calc(100vw - 24px);height:calc(100vh - 32px);height:calc(100svh - 32px);max-height:calc(100svh - 32px);border-radius:12px}body .project-dialog .dialog-content{display:block;min-height:0}body .project-dialog .dialog-image{min-height:0}body .project-dialog .dialog-image img{position:static;height:260px;object-fit:contain}body .project-dialog .dialog-copy{padding:32px 24px}body .project-dialog .dialog-close{top:12px}}
/* End centered project dialog */