:root{
  --ink:#100f0e;
  --ink-2:#25201d;
  --paper:#f1eadf;
  --paper-2:#fbf6ee;
  --muted:#887d70;
  --line:rgba(16,15,14,.18);
  --line-light:rgba(241,234,223,.25);
  --red:#d44731;
  --gold:#b99453;
  --green:#7f8b71;
  --shadow:0 30px 80px rgba(16,15,14,.18);
  --sans:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  --serif:Georgia, "Times New Roman", "Noto Serif SC", "Songti SC", serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--ink);
  background:var(--paper);
  font-family:var(--sans);
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit}
::selection{background:var(--red);color:var(--paper-2)}

.page-noise{
  position:fixed;inset:0;pointer-events:none;z-index:9999;opacity:.08;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.65'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}
.scroll-progress{position:fixed;left:0;top:0;width:100%;height:3px;z-index:1000;background:transparent}
.scroll-progress span{display:block;height:100%;width:0;background:var(--red)}

.site-header{
  position:fixed;top:0;left:0;right:0;z-index:900;
  display:flex;align-items:center;justify-content:space-between;
  padding:22px clamp(18px,4vw,54px);
  color:var(--paper-2);
  mix-blend-mode:difference;
}
.logo{display:flex;gap:10px;align-items:baseline;letter-spacing:.02em;font-weight:900}
.logo b{font-size:16px}.logo span{font-size:11px;color:rgba(255,255,255,.72)}
.desktop-nav{display:flex;gap:26px;font-size:12px;font-weight:800;letter-spacing:.12em}
.desktop-nav a{opacity:.82}.desktop-nav a:hover{opacity:1;color:var(--red)}
.menu-button{display:none;width:44px;height:44px;border:1px solid rgba(255,255,255,.32);border-radius:50%;background:transparent;color:inherit;cursor:pointer;position:relative}
.menu-button span{position:absolute;left:12px;right:12px;height:2px;background:currentColor;transition:.25s ease}.menu-button span:first-child{top:17px}.menu-button span:last-child{bottom:17px}
.menu-button.is-open span:first-child{top:21px;transform:rotate(45deg)}.menu-button.is-open span:last-child{bottom:21px;transform:rotate(-45deg)}
.mobile-panel{position:fixed;inset:0;z-index:850;background:var(--ink);color:var(--paper);display:grid;place-content:center;gap:18px;opacity:0;pointer-events:none;transform:translateY(-12px);transition:.3s ease}
.mobile-panel.is-open{opacity:1;pointer-events:auto;transform:translateY(0)}
.mobile-panel a{font-family:var(--serif);font-size:clamp(42px,10vw,90px);line-height:.92;text-align:center;text-transform:uppercase}

.section-dark{background:var(--ink);color:var(--paper)}
.hero{min-height:100svh;position:relative;display:grid;align-items:end;padding:110px clamp(18px,4vw,54px) 34px;isolation:isolate;overflow:hidden}
.hero-bg{position:absolute;inset:0;background:linear-gradient(90deg,rgba(16,15,14,.78),rgba(16,15,14,.18) 44%,rgba(16,15,14,.72)),url('../assets/architecture-dark.jpg') center/cover;z-index:-2;transform:scale(1.04)}
.hero:after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(circle at 78% 22%,rgba(212,71,49,.28),transparent 26%),linear-gradient(0deg,rgba(16,15,14,.55),transparent 52%)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.18fr) minmax(280px,.52fr) minmax(240px,.42fr);gap:clamp(18px,3vw,46px);align-items:end;width:100%}
.eyebrow,.mini-title,.section-label{font-size:12px;letter-spacing:.16em;font-weight:900;text-transform:uppercase;color:var(--red)}
.hero-left h1{font-family:var(--serif);font-size:clamp(76px,14vw,230px);line-height:.73;letter-spacing:-.09em;margin:24px 0 22px;text-transform:uppercase}
.hero-left h1 span{display:block;text-shadow:0 16px 40px rgba(0,0,0,.22)}
.hero-meta{display:flex;flex-wrap:wrap;gap:10px;font-size:13px;color:rgba(241,234,223,.74)}
.hero-meta span{border:1px solid var(--line-light);border-radius:999px;padding:8px 12px;background:rgba(241,234,223,.05);backdrop-filter:blur(8px)}
.hero-portrait{margin:0;position:relative;box-shadow:var(--shadow);border:1px solid rgba(241,234,223,.22);background:var(--paper);padding:10px;transform:rotate(-1.4deg)}
.hero-portrait img{aspect-ratio:4/5;object-fit:cover;filter:contrast(1.03) saturate(.95)}
.hero-portrait figcaption{position:absolute;left:10px;right:10px;bottom:10px;padding:14px 16px;background:rgba(16,15,14,.88);display:flex;justify-content:space-between;gap:14px;align-items:end;color:var(--paper)}
.hero-portrait strong{font-family:var(--serif);font-size:18px}.hero-portrait span{font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:rgba(241,234,223,.72);text-align:right}
.hero-right{align-self:center;border-left:1px solid var(--line-light);padding-left:22px;max-width:330px}
.hero-right p{font-family:var(--serif);font-size:clamp(22px,2.4vw,36px);line-height:1.08;margin:18px 0 28px;color:var(--paper-2)}
.outline-link{display:inline-flex;border:1px solid var(--paper);padding:12px 16px;border-radius:999px;font-size:12px;font-weight:900;letter-spacing:.08em;transition:.25s ease}
.outline-link:hover{background:var(--paper);color:var(--ink);transform:translateY(-2px)}
.hero-bottom{position:relative;margin-top:50px;padding-top:18px;border-top:1px solid var(--line-light);display:flex;justify-content:space-between;gap:18px;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:rgba(241,234,223,.72)}
.hero-bottom span:first-child{font-family:var(--serif);font-size:clamp(36px,6vw,82px);line-height:.82;color:var(--paper);letter-spacing:.02em;text-transform:none}

.statement{display:grid;grid-template-columns:.34fr 1fr;gap:clamp(24px,6vw,90px);padding:clamp(80px,11vw,150px) clamp(18px,5vw,72px);border-bottom:1px solid var(--line)}
.statement-copy{max-width:1080px}.big-copy{font-family:var(--serif);font-size:clamp(38px,6vw,95px);line-height:.98;letter-spacing:-.06em;margin:0 0 32px}.body-copy{font-size:clamp(16px,1.8vw,22px);line-height:1.75;color:var(--ink-2);max-width:780px;margin-left:auto}

.ticker{border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;background:var(--paper-2)}
.ticker-track{display:flex;gap:18px;width:max-content;animation:ticker 24s linear infinite;padding:18px 0}
.ticker-track span{font-family:var(--serif);font-size:clamp(26px,4.2vw,62px);letter-spacing:-.06em;white-space:nowrap;color:transparent;-webkit-text-stroke:1px rgba(16,15,14,.7)}
@keyframes ticker{to{transform:translateX(-50%)}}

.cases,.skills,.contact{padding:clamp(82px,11vw,150px) clamp(18px,5vw,72px)}
.section-top{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:34px;border-bottom:1px solid var(--line);padding-bottom:16px}.section-top p{max-width:380px;color:var(--muted);line-height:1.6;margin:0}
.case-row{display:grid;grid-template-columns:160px 1fr 260px 52px;gap:18px;align-items:center;border-bottom:1px solid var(--line);padding:24px 0;transition:.25s ease;position:relative}
.case-row:hover{padding-left:18px;background:rgba(212,71,49,.04)}
.case-no{font-size:12px;font-weight:900;color:var(--muted);letter-spacing:.1em}.case-name{font-family:var(--serif);font-size:clamp(38px,7vw,108px);line-height:.9;letter-spacing:-.07em}.case-type{font-size:13px;color:var(--muted);line-height:1.5}.case-arrow{font-size:30px;text-align:right;color:var(--red)}
.floating-preview{position:fixed;z-index:800;width:260px;aspect-ratio:4/3;pointer-events:none;opacity:0;transform:translate(-50%,-50%) scale(.92) rotate(-3deg);transition:opacity .18s ease, transform .18s ease;border:8px solid var(--paper-2);box-shadow:0 24px 70px rgba(0,0,0,.28)}
.floating-preview.is-visible{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(-3deg)}
.floating-preview img{width:100%;height:100%;object-fit:cover}

.education{padding:clamp(82px,11vw,150px) clamp(18px,5vw,72px);display:grid;grid-template-columns:.82fr .72fr;gap:clamp(28px,5vw,76px);align-items:start;position:relative;overflow:hidden}
.education:before{content:"COURSEWORK";position:absolute;right:-.05em;top:26px;font-family:var(--serif);font-size:clamp(70px,15vw,220px);line-height:.8;color:rgba(241,234,223,.045);letter-spacing:-.08em;pointer-events:none}
.edu-title span{color:var(--red);font-weight:900;font-size:12px;letter-spacing:.16em}.edu-title h2{font-family:var(--serif);font-size:clamp(50px,9vw,136px);line-height:.82;letter-spacing:-.08em;margin:18px 0 0;max-width:900px}
.edu-card{border:1px solid var(--line-light);padding:clamp(22px,4vw,42px);background:rgba(241,234,223,.06);backdrop-filter:blur(10px);margin-top:8px}.edu-time{color:var(--gold);font-weight:900;letter-spacing:.12em}.edu-card h3{font-size:clamp(24px,3vw,42px);margin:18px 0;font-family:var(--serif);letter-spacing:-.04em}.edu-card p:last-child{line-height:1.75;color:rgba(241,234,223,.74)}
.course-list{grid-column:1/-1;display:grid;grid-template-columns:repeat(6,1fr);border-top:1px solid var(--line-light);border-left:1px solid var(--line-light)}
.course-list span{min-height:112px;padding:18px;border-right:1px solid var(--line-light);border-bottom:1px solid var(--line-light);display:flex;align-items:flex-end;font-weight:800;color:rgba(241,234,223,.85)}

.skill-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line)}
.skill-card{min-height:330px;padding:24px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;flex-direction:column;justify-content:space-between;transition:.25s ease;background:rgba(255,255,255,.12)}
.skill-card:hover{background:var(--ink);color:var(--paper);transform:translateY(-8px)}
.skill-card span{font-family:var(--serif);font-size:clamp(52px,8vw,102px);line-height:.8;letter-spacing:-.06em;color:var(--red)}
.skill-card h3{font-family:var(--serif);font-size:clamp(26px,3vw,42px);line-height:.95;letter-spacing:-.05em;margin:0}.skill-card p{line-height:1.7;color:var(--muted);margin:18px 0 0}.skill-card:hover p{color:rgba(241,234,223,.72)}

.life{display:grid;grid-template-columns:.92fr 1fr;gap:clamp(32px,6vw,90px);padding:clamp(82px,11vw,150px) clamp(18px,5vw,72px);border-top:1px solid var(--line);align-items:center}
.life-media{position:relative;min-height:680px}.arch-img{width:min(72%,560px);height:680px;object-fit:cover;box-shadow:var(--shadow);filter:contrast(1.04) saturate(.92)}.pixel-img{position:absolute;width:min(38%,260px);right:4%;bottom:8%;border:10px solid var(--paper-2);box-shadow:0 30px 70px rgba(16,15,14,.22);transform:rotate(6deg)}
.life-copy h2{font-family:var(--serif);font-size:clamp(50px,9vw,130px);line-height:.86;letter-spacing:-.08em;margin:24px 0}.life-copy p{font-size:clamp(16px,1.8vw,22px);line-height:1.75;color:var(--ink-2);max-width:660px}.tag-wall{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}.tag-wall span{border:1px solid var(--line);padding:10px 13px;border-radius:999px;background:var(--paper-2);font-weight:800;font-size:13px}

.motto{padding:clamp(90px,13vw,180px) clamp(18px,5vw,72px);text-align:center;position:relative;overflow:hidden}.motto:before{content:"©";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-family:var(--serif);font-size:40vw;color:rgba(241,234,223,.04);line-height:1}.motto p{position:relative;color:var(--red);letter-spacing:.16em;font-weight:900}.motto h2{position:relative;font-family:var(--serif);font-size:clamp(72px,14vw,210px);line-height:.9;margin:18px 0;letter-spacing:.02em}.motto span{position:relative;color:rgba(241,234,223,.68);letter-spacing:.08em;text-transform:uppercase}

.contact{display:grid;grid-template-columns:1fr .62fr;gap:clamp(28px,5vw,80px);align-items:start}.contact-heading h2{font-family:var(--serif);font-size:clamp(54px,9vw,140px);line-height:.82;letter-spacing:-.08em;margin:24px 0 0}.contact-card{border:1px solid var(--line);background:var(--paper-2);box-shadow:var(--shadow)}.contact-card a,.contact-card div{display:block;padding:24px;border-bottom:1px solid var(--line)}.contact-card span{display:block;font-size:11px;font-weight:900;letter-spacing:.14em;color:var(--red);margin-bottom:8px}.contact-card b{font-size:clamp(18px,2.2vw,28px);word-break:break-word}.contact-card a:hover{background:var(--ink);color:var(--paper)}.copy-button{width:100%;border:0;background:var(--red);color:white;padding:18px;font-weight:900;letter-spacing:.12em;cursor:pointer}.copy-button:hover{filter:brightness(.92)}

.site-footer{display:flex;justify-content:space-between;gap:18px;padding:28px clamp(18px,5vw,72px);border-top:1px solid var(--line);font-size:13px;color:var(--muted)}.site-footer a{font-weight:900;color:var(--ink)}

.reveal{opacity:0;transform:translateY(30px);transition:opacity .75s ease,transform .75s cubic-bezier(.2,.8,.2,1)}.reveal.is-visible{opacity:1;transform:translateY(0)}.delay-1{transition-delay:.12s}.delay-2{transition-delay:.22s}.delay-3{transition-delay:.32s}

@media(max-width:1100px){
  .hero-grid{grid-template-columns:1fr .55fr}.hero-right{grid-column:1/-1;max-width:none;border-left:0;border-top:1px solid var(--line-light);padding:20px 0 0}.case-row{grid-template-columns:120px 1fr 44px}.case-type{grid-column:2/3}.course-list{grid-template-columns:repeat(3,1fr)}.skill-grid{grid-template-columns:repeat(2,1fr)}.contact{grid-template-columns:1fr}.life{grid-template-columns:1fr}.life-media{min-height:560px}.arch-img{height:560px}
}
@media(max-width:760px){
  .desktop-nav{display:none}.menu-button{display:block}.site-header{padding:16px 18px}.logo span{display:none}
  .hero{padding:92px 18px 28px}.hero-grid{grid-template-columns:1fr}.hero-left h1{font-size:clamp(76px,26vw,142px)}.hero-portrait{max-width:360px;margin-left:auto}.hero-bottom{flex-direction:column}.hero-bottom span:first-child{font-size:48px}.statement{grid-template-columns:1fr;padding:72px 18px}.body-copy{margin-left:0}.cases,.skills,.contact,.education,.life{padding:72px 18px}.section-top{display:block}.section-top p{margin-top:16px}.case-row{grid-template-columns:1fr 36px;gap:8px;padding:22px 0}.case-no,.case-type{grid-column:1/2}.case-name{grid-column:1/2;font-size:clamp(42px,15vw,72px)}.case-arrow{grid-column:2/3;grid-row:1/4}.education{grid-template-columns:1fr}.course-list{grid-template-columns:1fr 1fr}.skill-grid{grid-template-columns:1fr}.skill-card{min-height:260px}.life-media{min-height:450px}.arch-img{width:78%;height:450px}.pixel-img{width:42%;right:0}.contact-heading h2{font-size:clamp(50px,16vw,84px)}.site-footer{flex-direction:column}.floating-preview{display:none}
}