@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=Playfair+Display:wght@500;600&display=swap");

:root {
  --bg: #0b0d10;
  --surface: #13161b;
  --surface-2: #1a1e25;
  --text: #f5f5f1;
  --muted: #a8adb7;
  --line: rgba(255,255,255,.10);
  --accent: #d8ff61;
  --max: 1240px;
  --radius: 24px;
  --shadow: 0 28px 90px rgba(0,0,0,.28);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bg); }
body {
  margin: 0;
  min-width: 320px;
  color: var(--text);
  background:
    radial-gradient(circle at 85% 0%, rgba(63,86,255,.12), transparent 34rem),
    var(--bg);
  font-family: "DM Sans",Arial,sans-serif;
  -webkit-font-smoothing: antialiased;
}
body.nav-open { overflow: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
p { line-height: 1.75; }
code { font-family: ui-monospace,SFMono-Regular,Consolas,monospace; }
.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; }

.shell { width: min(calc(100% - 48px), var(--max)); margin-inline: auto; }
.site-header {
  position: sticky; top: 0; z-index: 100;
  display:flex; align-items:center; justify-content:space-between;
  width:min(calc(100% - 48px),var(--max)); margin:0 auto; padding:22px 0;
}
.site-header::before {
  content:""; position:absolute; inset:7px -18px; z-index:-1;
  border:1px solid transparent; border-radius:999px; transition:.25s ease;
}
.site-header.is-scrolled::before {
  border-color:var(--line); background:rgba(11,13,16,.72); backdrop-filter:blur(18px);
}
.brand { display:flex; align-items:baseline; gap:10px; font-weight:600; letter-spacing:.01em; }
.brand small { color:var(--muted); font-size:11px; font-weight:500; }
.nav { display:flex; align-items:center; gap:28px; }
.nav a { position:relative; padding:6px 0; color:var(--muted); font-size:14px; }
.nav a::after { content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--accent); transform:scaleX(0); transform-origin:right; transition:.2s ease; }
.nav a:hover,.nav a.active { color:var(--text); }
.nav a:hover::after,.nav a.active::after { transform:scaleX(1); transform-origin:left; }
.nav-toggle { display:none; width:42px; height:42px; border:1px solid var(--line); border-radius:50%; background:var(--surface); color:var(--text); }
.nav-toggle > span:not(.sr-only){display:block;width:16px;height:1px;margin:5px auto;background:currentColor;transition:.2s ease;}

.eyebrow { margin:0 0 14px; color:var(--accent); font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; }
.home-hero { min-height:min(760px,calc(100vh - 80px)); display:grid; align-content:center; padding:96px 0 70px; }
.home-hero h1 { margin:0; max-width:12em; font-size:clamp(46px,7.6vw,100px); font-weight:500; line-height:.97; letter-spacing:-.055em; }
.home-hero .lead { max-width:800px; margin:30px 0 14px; color:var(--muted); font-size:clamp(18px,2.2vw,24px); line-height:1.7; }
.home-hero .statement { max-width:680px; margin:0 0 30px; color:#d6d8dd; }
.text-link { display:inline-flex; align-items:center; gap:10px; width:fit-content; padding-bottom:4px; border-bottom:1px solid var(--line); font-size:14px; }

.section { padding:80px 0 110px; }
.section-head { display:flex; align-items:end; justify-content:space-between; gap:30px; margin-bottom:34px; }
.section-head h2 { margin:0; font-size:clamp(30px,4vw,50px); font-weight:500; letter-spacing:-.04em; }
.section-note { max-width:520px; margin:0 0 4px; color:var(--muted); font-size:14px; }

.project-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-rows:1fr; gap:28px; align-items:stretch; }
.project-card { min-width:0; height:100%; overflow:hidden; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s,border-color .35s; }
.project-card > a { display:flex; flex-direction:column; height:100%; }
.project-card:hover { transform:translateY(-7px); border-color:rgba(255,255,255,.2); box-shadow:var(--shadow); }
.project-media { display:flex; align-items:center; justify-content:center; aspect-ratio:16/10; overflow:hidden; background:#07080a; }
.project-media img { width:100%; height:100%; object-fit:contain; object-position:center; transition:transform .7s cubic-bezier(.2,.7,.2,1); }
.project-card:hover .project-media img { transform:none; }
.project-meta { display:flex; flex:1; flex-direction:column; padding:22px 24px 26px; }
.meta-top { margin:0 0 12px; color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.07em; }
.project-title-row { display:flex; align-items:center; justify-content:space-between; gap:20px; }
.project-title-row h3 { margin:0; font-size:clamp(25px,3vw,36px); font-weight:500; letter-spacing:-.04em; }
.project-title-row span { color:var(--accent); font-size:25px; transition:.25s; }
.project-card:hover .project-title-row span { transform:translate(4px,-4px); }
.project-meta > p:last-child { margin:12px 0 0; color:var(--muted); font-size:15px; }

.button-row { display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
.button { display:inline-flex; align-items:center; justify-content:center; min-height:46px; padding:12px 18px; border:1px solid transparent; border-radius:999px; background:var(--text); color:#111318; font-size:14px; font-weight:600; transition:transform .2s,opacity .2s,border-color .2s; }
.button:hover { transform:translateY(-2px); }
.button.secondary { border-color:var(--line); background:transparent; color:var(--text); }

.site-footer { display:flex; justify-content:space-between; gap:24px; padding:28px 0 34px; border-top:1px solid var(--line); color:var(--muted); font-size:13px; }

/* About */
.page-main { padding:90px 0 110px; }
.about-hero { display:grid; grid-template-columns:minmax(320px,.85fr) minmax(0,1.15fr); gap:clamp(48px,8vw,110px); align-items:start; }
.about-photo { margin:0; position:sticky; top:120px; }
.about-photo img { width:100%; height:auto; aspect-ratio:auto; object-fit:contain; object-position:center; border:1px solid var(--line); border-radius:var(--radius); }
.about-copy h1 { margin:0; font-size:clamp(52px,7vw,92px); line-height:.98; letter-spacing:-.055em; font-weight:500; }
.about-copy .lead { margin:28px 0; font-size:clamp(20px,2.4vw,28px); line-height:1.55; }
.about-copy .body-copy { color:var(--muted); font-size:17px; }
.fact-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-top:46px; }
.fact-card { padding:20px; border:1px solid var(--line); border-radius:18px; background:var(--surface); }
.fact-card small { display:block; margin-bottom:8px; color:var(--accent); font-size:11px; text-transform:uppercase; letter-spacing:.1em; }
.fact-card p { margin:0; color:#e5e6e8; font-size:14px; }

/* Resume */
.resume-head { display:flex; align-items:end; justify-content:space-between; gap:40px; margin-bottom:28px; }
.resume-head h1 { margin:0; font-size:clamp(50px,7vw,86px); font-weight:500; letter-spacing:-.055em; }
.resume-head p { max-width:700px; color:var(--muted); }
.pdf-frame { min-height:75vh; overflow:hidden; border:1px solid var(--line); border-radius:var(--radius); background:#111; }
.pdf-frame iframe { display:block; width:100%; height:80vh; border:0; }

/* Project pages */
.project-body { --project-accent:var(--accent); --project-bg:var(--bg); background:var(--project-bg); }
.project-body .eyebrow { color:var(--project-accent); }
.project-body .button { background:var(--project-accent); }
.project-body .button.secondary { background:transparent; color:var(--text); border-color:var(--line); }
.project-hero { padding:62px 0 46px; }
.project-kicker { display:flex; flex-wrap:wrap; gap:10px 20px; color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.08em; }
.project-hero h1 { margin:18px 0 8px; font-size:clamp(58px,10vw,132px); line-height:.92; letter-spacing:-.065em; font-weight:500; }
.project-subtitle { margin:0 0 30px; color:#d9dce2; font-size:clamp(18px,2vw,24px); }
.project-cover { display:block; width:100%; height:auto; max-height:none; object-fit:contain; border:1px solid var(--line); border-radius:var(--radius); }
.project-overview { display:grid; grid-template-columns:.72fr 1.28fr; gap:60px; padding:70px 0; border-bottom:1px solid var(--line); }
.project-overview h2,.story-section h2 { margin:0; font-size:20px; font-weight:500; }
.project-overview .large-copy { margin:0; color:#dadce1; font-size:clamp(20px,2.3vw,29px); line-height:1.65; }
.project-meta-strip { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:38px; }
.project-meta-strip div { padding:18px; border:1px solid var(--line); border-radius:16px; background:var(--surface); }
.project-meta-strip small { display:block; color:var(--muted); margin-bottom:6px; text-transform:uppercase; letter-spacing:.08em; font-size:10px; }
.project-meta-strip p { margin:0; font-size:13px; line-height:1.55; }

.problem-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; padding:70px 0; }
.problem-card { padding:28px; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); }
.problem-card .num { color:var(--project-accent); font-size:12px; letter-spacing:.08em; }
.problem-card h3 { margin:12px 0; font-size:22px; font-weight:500; }
.problem-card p { margin:0; color:var(--muted); }

.story-section { display:grid; grid-template-columns:.72fr 1.28fr; gap:60px; padding:64px 0; border-top:1px solid var(--line); }
.story-section p { margin:0; color:var(--muted); font-size:17px; }
.gallery { display:grid; grid-template-columns:repeat(12,1fr); gap:18px; padding:20px 0 90px; }
.gallery figure { grid-column:span 12; margin:0; }
.gallery img { width:100%; height:auto; border:1px solid var(--line); border-radius:20px; background:#fff; }
.gallery figcaption { padding:10px 4px 0; color:var(--muted); font-size:13px; }
.project-next { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-bottom:90px; padding:30px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.project-next span { color:var(--muted); }
.project-next strong { font-size:clamp(24px,3vw,38px); font-weight:500; }

/* Themes */
.theme-whispering { --project-accent:#ff785b; --project-bg:#07080a; }
.theme-timeless { --project-accent:#50caff; --project-bg:#06111a; }
.theme-cities { --project-accent:#28a99a; --project-bg:#0e1312; }
.theme-ruins { --project-accent:#d8a56e; --project-bg:#120e0b; }
.theme-ruins .project-hero h1 { font-family:"Playfair Display",serif; letter-spacing:-.045em; }
.theme-cities .project-cover { background:#f2efe4; }

.reveal { opacity:0; transform:translateY(24px); transition:opacity .65s ease var(--delay,0ms),transform .65s ease var(--delay,0ms); }
.reveal.is-visible { opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior:auto!important; transition-duration:.01ms!important; animation-duration:.01ms!important; animation-iteration-count:1!important; }
  .reveal { opacity:1; transform:none; }
}
@media (max-width:900px) {
  .shell,.site-header { width:min(calc(100% - 32px),var(--max)); }
  .project-grid,.about-hero,.project-overview,.story-section,.problem-grid { grid-template-columns:1fr; }
  .home-hero { min-height:auto; padding-top:110px; }
  .section-head,.resume-head { align-items:flex-start; flex-direction:column; }
  .about-photo { position:static; max-width:620px; }
  .project-overview,.story-section { gap:24px; }
  .project-meta-strip { grid-template-columns:1fr; }
}
@media (max-width:680px) {
  .site-header { padding:16px 0; }
  .site-header::before { inset:5px -8px; }
  .brand small { display:none; }
  .nav-toggle { display:block; position:relative; z-index:2; }
  .nav { position:fixed; inset:0; z-index:1; flex-direction:column; align-items:flex-start; justify-content:center; gap:28px; padding:42px; background:rgba(11,13,16,.97); backdrop-filter:blur(18px); opacity:0; pointer-events:none; transform:translateY(-10px); transition:.2s ease; }
  .nav.is-open { opacity:1; pointer-events:auto; transform:none; }
  .nav a { color:var(--text); font-size:28px; }
  .nav-toggle[aria-expanded=true] > span:first-child { transform:translateY(3px) rotate(45deg); }
  .nav-toggle[aria-expanded=true] > span:nth-child(2) { transform:translateY(-3px) rotate(-45deg); }
  .home-hero h1 { font-size:clamp(42px,13vw,68px); }
  .project-grid { grid-auto-rows:auto; gap:18px; }
  .site-footer { flex-direction:column; gap:0; }
  .page-main { padding-top:70px; }
  .fact-grid { grid-template-columns:1fr; }
  .project-hero h1 { font-size:clamp(50px,15vw,84px); }
  .project-cover { border-radius:18px; }
  .problem-grid { gap:14px; }
}