:root { --ink:#e8e4dc; --muted:#9a9892; --bg:#101111; --line:#303231; --accent:#c6b18b; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--bg); font-family:Inter,"Noto Serif SC",sans-serif; font-weight:300; }
a { color:inherit; text-decoration:none; }
.topbar { position:fixed; z-index:20; inset:0 0 auto; height:72px; padding:0 4vw; display:flex; align-items:center; justify-content:space-between; mix-blend-mode:difference; color:white; }
.brand { font-size:11px; letter-spacing:.22em; font-weight:500; }
nav { display:flex; gap:28px; font-size:12px; letter-spacing:.12em; }
nav a { opacity:.75; transition:opacity .25s; } nav a:hover { opacity:1; }
.theme-trigger { display:flex; align-items:center; gap:9px; min-width:108px; justify-content:flex-end; padding:8px 0; color:inherit; background:none; border:0; font:400 11px Inter,sans-serif; letter-spacing:.12em; cursor:pointer; }
.theme-dot { width:8px; height:8px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 4px rgba(255,255,255,.1); }
.theme-panel { position:fixed; z-index:40; top:0; right:0; width:min(520px,92vw); height:100svh; padding:34px clamp(25px,4vw,55px); color:var(--ink); background:var(--bg); border-left:1px solid var(--line); transform:translateX(102%); transition:transform .55s cubic-bezier(.75,0,.2,1); }
.theme-panel.open { transform:none; }
.theme-panel-head { display:flex; justify-content:space-between; color:var(--accent); font-size:9px; letter-spacing:.25em; }
.theme-panel-head button { color:var(--ink); background:none; border:0; font-size:26px; cursor:pointer; }
.theme-panel>p { margin:70px 0 30px; font:300 25px/1.5 "Noto Serif SC",serif; }
.theme-options { border-top:1px solid var(--line); }
.theme-option { width:100%; display:grid; grid-template-columns:25px 1fr auto; align-items:center; gap:14px; padding:25px 3px; color:var(--ink); background:none; border:0; border-bottom:1px solid var(--line); text-align:left; cursor:pointer; }
.theme-option i { width:12px; height:12px; border:1px solid var(--muted); border-radius:50%; }
.theme-option.active i { border:4px solid var(--accent); }
.theme-option b { display:block; font:400 16px "Noto Serif SC",serif; }
.theme-option small { display:block; margin-top:6px; color:var(--muted); letter-spacing:.16em; }
.theme-option em { color:var(--muted); font-style:normal; font-size:10px; }
.panel-backdrop { position:fixed; z-index:30; inset:0; background:rgba(0,0,0,.55); opacity:0; pointer-events:none; transition:opacity .4s; }
.panel-backdrop.open { opacity:1; pointer-events:auto; }
.menu-button { display:none; background:none; border:0; color:inherit; }
.hero { min-height:100svh; position:relative; overflow:hidden; display:flex; align-items:flex-end; padding:10vh 7vw; }
.hero-photo,.hero-shade { position:absolute; inset:0; }
.hero-photo { animation:heroZoom 14s ease-out both; }
.hero-shade { background:linear-gradient(90deg,rgba(6,8,8,.72),rgba(6,8,8,.05) 60%),linear-gradient(0deg,rgba(6,8,8,.64),transparent 55%); }
.hero-copy { position:relative; z-index:2; }
.eyebrow,.section-index { color:var(--accent); font-size:10px; letter-spacing:.28em; }
h1 { margin:.22em 0 0; font-family:"Noto Serif SC",serif; font-size:clamp(64px,10vw,150px); font-weight:300; letter-spacing:.08em; line-height:1; }
.hero-en { margin:14px 0 40px; letter-spacing:.48em; font-size:12px; }
.artist { font-family:"Noto Serif SC",serif; letter-spacing:.18em; }
.scroll-cue { position:absolute; right:4vw; bottom:9vh; z-index:2; writing-mode:vertical-rl; font-size:9px; letter-spacing:.3em; display:flex; align-items:center; gap:12px; }
.scroll-cue span { display:block; width:1px; height:55px; background:#fff; }
.section { padding:140px 7vw; }
.statement { display:grid; grid-template-columns:1fr 2fr; min-height:75vh; align-items:center; border-bottom:1px solid var(--line); }
.statement-copy { max-width:800px; }
.statement-copy .lead { font:300 clamp(28px,4vw,54px)/1.5 "Noto Serif SC",serif; margin:0 0 50px; }
.statement-copy p:last-child { max-width:600px; color:var(--muted); font:300 15px/2 "Noto Serif SC",serif; }
.section-heading { display:grid; grid-template-columns:1fr 1fr; align-items:end; margin-bottom:90px; }
.section-heading .section-index { grid-column:1/-1; margin-bottom:25px; }
h2 { margin:0; font:300 clamp(38px,6vw,76px)/1.1 "Noto Serif SC",serif; letter-spacing:.08em; }
.section-heading>p { justify-self:end; color:var(--muted); font-size:12px; }
.gallery { display:grid; grid-template-columns:repeat(12,1fr); gap:10vw 3vw; }
.work { grid-column:span 5; margin:0; cursor:zoom-in; }
.work:nth-child(2) { grid-column:8/span 4; margin-top:18vw; }
.work:nth-child(3) { grid-column:2/span 4; }
.work:nth-child(4) { grid-column:7/span 6; margin-top:12vw; }
.work:nth-child(5) { grid-column:3/span 5; }
.work .photo { aspect-ratio:4/3; overflow:hidden; transition:transform .7s cubic-bezier(.2,.7,.2,1),filter .5s; }
.work-tall .photo { aspect-ratio:3/4; }
.work:hover .photo { transform:scale(.985); filter:brightness(1.1); }
figcaption { display:flex; gap:18px; padding-top:18px; border-top:1px solid var(--line); margin-top:16px; }
figcaption>span { color:var(--accent); font-size:10px; }
figcaption h3 { margin:0; font:400 18px "Noto Serif SC",serif; letter-spacing:.12em; }
figcaption p { margin:8px 0 0; color:var(--muted); font-size:10px; letter-spacing:.16em; }
.quote { min-height:70vh; display:grid; place-items:center; text-align:center; }
blockquote { font:300 clamp(25px,4vw,52px)/1.65 "Noto Serif SC",serif; margin:0; }
.about { border-top:1px solid var(--line); }
.about-grid { display:grid; grid-template-columns:1fr 1fr; gap:10vw; align-items:center; margin-top:70px; }
.portrait { aspect-ratio:4/5; }
.about-grid p:not(.eyebrow) { max-width:480px; color:var(--muted); font:300 15px/2 "Noto Serif SC",serif; margin:30px 0; }
.text-link { padding-bottom:7px; border-bottom:1px solid var(--accent); font-size:12px; letter-spacing:.14em; }
footer { padding:35px 4vw; border-top:1px solid var(--line); display:flex; justify-content:space-between; color:var(--muted); font-size:9px; letter-spacing:.18em; }
.photo { background-color:#333; background-size:cover; background-position:center; }
.photo-hero { background-image:url("images/hero-documentary.png"); }
.photo-1 { background-image:radial-gradient(ellipse at 70% 25%,rgba(236,226,206,.42),transparent 25%),linear-gradient(165deg,#abb6af 0 23%,#73817a 23% 38%,#3d4b47 38% 54%,#17201f 54% 70%,#090c0c 70%); }
.photo-2 { background-image:linear-gradient(176deg,#8f776b 0 45%,#594943 45% 50%,#242c2e 50% 68%,#080e11 68%); }
.photo-3 { background-image:radial-gradient(ellipse at 57% 62%,#171717 0 1.4%,transparent 1.6%),linear-gradient(175deg,#b9b1a0 0 55%,#77715f 55% 63%,#332f28 63%); }
.photo-4 { background-image:linear-gradient(90deg,transparent 0 18%,rgba(5,12,21,.8) 18% 24%,transparent 24% 53%,rgba(7,15,25,.75) 53% 67%,transparent 67%),linear-gradient(170deg,#526778 0 62%,#14212b 62%); }
.photo-5 { background-image:repeating-linear-gradient(78deg,transparent 0 12px,rgba(20,18,12,.55) 13px 15px),linear-gradient(170deg,#919486 0 48%,#405156 48% 60%,#39392e 60%); }
.portrait { background-image:radial-gradient(circle at 50% 32%,#222 0 10%,transparent 10.5%),linear-gradient(90deg,transparent 30%,#1c1c1a 30% 70%,transparent 70%),linear-gradient(150deg,#8d8a80,#373937); }
body, .theme-panel, figcaption, .statement, .about, footer { transition:background-color .55s,color .55s,border-color .55s; }
body[data-theme="realist"] { --bg:#f2f2ef; --ink:#171818; --muted:#626461; --line:#cfd0cc; --accent:#2d6255; }
body[data-theme="realist"] .photo-hero { background-image:url("images/hero-realist.png"); }
body[data-theme="realist"] .work .photo { filter:saturate(.92) contrast(1.08); }
body[data-theme="realist"] .work figcaption { border-top-width:2px; }
body[data-theme="nostalgia"] { --bg:#241d17; --ink:#ead9bb; --muted:#ad9373; --line:#564431; --accent:#df8c4b; }
body[data-theme="nostalgia"] .photo-hero { background-image:url("images/hero-nostalgia.png"); filter:sepia(.16) saturate(.8); }
body[data-theme="nostalgia"] .work .photo { filter:sepia(.38) saturate(.72) contrast(.92); }
body[data-theme="nostalgia"]::after { content:""; position:fixed; z-index:50; inset:0; opacity:.055; pointer-events:none; 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='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E"); }
body[data-theme="nostalgia"] h1, body[data-theme="nostalgia"] h2 { font-style:italic; letter-spacing:.03em; }
body[data-theme="modern"] { --bg:#f4ff38; --ink:#0a0a0a; --muted:#484b00; --line:#111; --accent:#ff3c00; }
body[data-theme="modern"] .photo-hero { background-image:url("images/hero-modern.png"); filter:contrast(1.12) saturate(.85); }
body[data-theme="modern"] .hero-copy { background:var(--bg); color:var(--ink); padding:25px 32px; }
body[data-theme="modern"] .hero-copy .eyebrow, body[data-theme="modern"] .section-index { color:var(--accent); }
body[data-theme="modern"] h1, body[data-theme="modern"] h2 { font-family:Inter,sans-serif; font-weight:500; letter-spacing:-.055em; }
body[data-theme="modern"] .work .photo { filter:contrast(1.22) saturate(.35); }
body[data-theme="modern"] .work:nth-child(even) { transform:rotate(1.2deg); }
body[data-theme="modern"] figcaption { border-top:3px solid; }
.reveal { opacity:0; transform:translateY(34px); transition:opacity 1s,transform 1s; }
.reveal.visible { opacity:1; transform:none; }
.lightbox { width:100vw; max-width:none; height:100vh; max-height:none; margin:0; padding:4vh 5vw; border:0; color:white; background:rgba(6,7,7,.96); }
.lightbox[open] { display:grid; grid-template-columns:50px 1fr 50px; grid-template-rows:1fr auto; align-items:center; }
.lightbox::backdrop { background:#000; }
.lightbox-stage { height:80vh; display:grid; place-items:center; }
.lightbox-photo { width:min(76vw,1200px); height:100%; background-size:contain; background-repeat:no-repeat; }
.lightbox button { color:white; border:0; background:none; font-size:28px; cursor:pointer; }
.lightbox-close { position:absolute; right:25px; top:20px; }
.lightbox-info { grid-column:2; display:flex; justify-content:center; gap:20px; font-size:12px; letter-spacing:.12em; }
.lightbox-info span { color:var(--muted); }
@keyframes heroZoom { from { transform:scale(1.07); } to { transform:scale(1); } }
@media (max-width:720px) {
  .topbar { height:60px; } .menu-button { display:block; } .brand { display:none; }
  nav { position:absolute; right:4vw; top:52px; flex-direction:column; gap:0; padding:8px 18px; background:#151616; display:none; }
  nav.open { display:flex; } nav a { padding:10px; }
  .hero { padding:15vh 7vw 9vh; } h1 { font-size:18vw; }
  .hero-en { letter-spacing:.27em; } .scroll-cue { display:none; }
  .section { padding:95px 7vw; }
  .statement { display:block; } .statement .section-index { margin-bottom:70px; }
  .section-heading { display:block; } .section-heading>p { margin-top:18px; }
  .gallery { display:block; } .work,.work:nth-child(n) { margin:0 0 80px; }
  .work:nth-child(even) { margin-left:15vw; }
  .about-grid { grid-template-columns:1fr; }
  footer { gap:18px; flex-direction:column; }
  .lightbox { padding:7vh 3vw 4vh; } .lightbox[open] { grid-template-columns:34px 1fr 34px; }
  .lightbox-stage { height:73vh; } .lightbox-photo { width:100%; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; animation:none!important; transition:none!important; } .reveal { opacity:1; transform:none; } }