:root { --ink:#160c0a; --brown:#25110d; --wine:#571d21; --gold:#e4bc70; --cream:#f7ebd1; --muted:#c6af92; }
* { box-sizing:border-box; }
html { background:var(--ink); scroll-behavior:smooth; }
body { margin:0; min-width:320px; overflow-x:hidden; background:var(--ink); color:var(--cream); font-family:Arial,"Microsoft YaHei",sans-serif; }
button,a { font:inherit; color:inherit; } button { cursor:pointer; }
.site-header { position:fixed; inset:0 0 auto; z-index:20; display:flex; align-items:center; justify-content:space-between; padding:23px clamp(20px,4vw,62px); mix-blend-mode:screen; }
.brand { color:var(--cream); font-family:Georgia,serif; font-size:17px; font-weight:bold; letter-spacing:.04em; text-decoration:none; }.brand span { margin-left:10px; color:#bda582; font:10px/1 Arial,sans-serif; letter-spacing:.15em; }
.gallery-trigger { border:1px solid rgba(228,188,112,.65); border-radius:999px; background:transparent; color:var(--cream); padding:11px 17px; font-size:12px; letter-spacing:.08em; transition:.25s ease; }.gallery-trigger:hover,.gallery-trigger:focus-visible { background:var(--gold); color:var(--ink); outline:none; }.gallery-trigger span { margin-left:9px; font-size:16px; }.gallery-trigger.primary { background:var(--gold); color:var(--ink); padding:15px 25px; }.gallery-trigger.primary:hover { background:#f7d88e; transform:translateY(-2px); }
.panel { position:relative; min-height:100svh; overflow:hidden; isolation:isolate; padding:clamp(88px,11vh,130px) clamp(24px,8vw,132px) clamp(40px,7vh,82px); scroll-snap-align:start; }.hero,.constellation,.contact { scroll-snap-stop:always; } main { scroll-snap-type:y proximity; }
.overline { margin:0 0 16px; color:var(--gold); font-size:11px; font-weight:700; letter-spacing:.2em; }.hero { display:grid; place-items:center; background:radial-gradient(ellipse at 50% 57%,#6a3521 0%,#341713 28%,#160c0a 68%); }.grain { position:absolute; inset:0; z-index:-1; opacity:.22; background-image:radial-gradient(rgba(255,255,255,.75) .6px,transparent .7px); background-size:5px 5px; mix-blend-mode:soft-light; }
.hero-copy { position:relative; z-index:3; width:min(740px,90vw); margin-top:-18vh; text-align:center; pointer-events:none; }.hero-copy h1,.section-copy h2,.selection h2,.contact h2 { margin:0; font-family:Georgia,"Songti SC",serif; font-weight:400; letter-spacing:-.06em; }.hero-copy h1 { font-size:clamp(62px,9.3vw,148px); line-height:.85; text-shadow:0 5px 25px #1a0907; }.intro { margin:25px 0 0; color:#e2ccb0; font-size:14px; line-height:1.8; }
.corridor { position:absolute; inset:20% 0 8%; z-index:1; overflow:hidden; perspective:920px; pointer-events:none; }.corridor-glow { position:absolute; top:53%; left:50%; width:min(55vw,790px); height:30vw; border-radius:50%; background:#d89445; filter:blur(90px); opacity:.32; transform:translate(-50%,-50%); }.aperture { position:absolute; top:53%; left:50%; width:180px; height:83px; border:1px solid rgba(242,194,98,.6); border-radius:50%; box-shadow:0 0 75px 15px #dd983e, inset 0 0 22px #f3ce85; transform:translate(-50%,-50%); }.corridor-cards { position:absolute; inset:0; transform-style:preserve-3d; }.corridor-card { position:absolute; top:52%; left:50%; width:clamp(92px,10vw,158px); aspect-ratio:726/1290; overflow:hidden; border:1px solid rgba(247,235,209,.5); border-radius:5px; background:#3a1814 center/cover; box-shadow:0 25px 35px #100605; transform:translate3d(var(--x),-50%,var(--z)) rotateY(var(--r)) scale(var(--s)); opacity:var(--o); will-change:transform; }
.hero-footer { position:absolute; bottom:clamp(22px,4.5vh,46px); z-index:4; color:#d7bea0; font-size:10px; letter-spacing:.2em; }.hero::after { position:absolute; right:clamp(20px,4vw,60px); bottom:clamp(22px,4.5vh,46px); color:rgba(228,188,112,.7); content:"HOVER TO PAUSE"; font-size:9px; letter-spacing:.16em; transition:opacity .2s; }.hero.is-paused::after { content:"PAUSED"; color:var(--gold); }.scroll-dot { display:inline-block; width:7px; height:7px; margin-right:10px; border-radius:50%; background:var(--gold); box-shadow:0 0 12px var(--gold); animation:pulse 1.8s infinite; } @keyframes pulse { 50% { opacity:.25; transform:scale(.55); } }
.constellation { background:radial-gradient(ellipse at 74% 59%,#7d3123 0%,#401515 29%,#180b09 68%); }.section-copy { position:relative; z-index:4; width:min(550px,53vw); }.section-copy h2,.contact h2 { font-size:clamp(48px,6vw,98px); line-height:.95; }.section-copy h2 em { color:var(--gold); font-style:normal; }.section-copy > p:not(.overline) { width:min(345px,100%); margin-top:24px; color:#d7bda0; font-size:14px; line-height:1.8; }.constellation-stage { position:absolute; inset:0; z-index:2; }.scatter-card { --x:0px; --y:0px; position:absolute; top:55%; left:67%; width:clamp(115px,13.5vw,208px); aspect-ratio:726/1290; overflow:hidden; border-radius:6px; border:1px solid rgba(247,235,209,.48); box-shadow:0 20px 55px rgba(0,0,0,.42); transform-origin:50% 130%; transform:translate(-50%,-50%) scale(.32) rotate(0); opacity:0; transition:transform 1.2s cubic-bezier(.16,1,.3,1),opacity .5s; }.constellation.active .scatter-card { opacity:1; transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y))) rotate(var(--rot)); }.scatter-card img { width:100%; height:100%; object-fit:cover; }.section-index { position:absolute; right:clamp(25px,4vw,60px); bottom:clamp(23px,5vh,50px); color:rgba(228,188,112,.6); font:12px monospace; letter-spacing:.18em; }
.selection { background:#1c0e0b; padding-bottom:80px; }.selection-heading { display:flex; align-items:end; justify-content:space-between; gap:30px; margin-bottom:clamp(35px,6vh,75px); }.selection-heading h2 { font-size:clamp(48px,6vw,88px); line-height:.88; }.selection-heading > p { max-width:230px; margin:0 0 6px; color:#c7ad8b; font-size:13px; line-height:1.65; }.work-wall { display:grid; grid-template-columns:repeat(5,1fr); gap:clamp(12px,1.8vw,27px); width:min(1350px,100%); margin:auto; }.work-card { position:relative; aspect-ratio:726/1290; padding:0; overflow:hidden; border:0; border-radius:4px; background:#391813; transform:translateY(42px); opacity:0; transition:transform .65s cubic-bezier(.16,1,.3,1),opacity .65s,filter .35s; }.selection.active .work-card { transform:translateY(0); opacity:1; }.work-card:nth-child(2n) { margin-top:8vh; }.work-card img { width:100%; height:100%; object-fit:cover; transition:transform .55s ease; }.work-card::after { position:absolute; inset:0; background:linear-gradient(transparent 45%,rgba(14,5,4,.9)); content:""; opacity:.9; }.work-card span { position:absolute; bottom:16px; left:15px; z-index:2; color:var(--cream); font-size:11px; letter-spacing:.1em; text-align:left; }.work-card:hover img,.work-card:focus-visible img { transform:scale(1.06); }.work-card:hover { filter:brightness(1.13); }.work-card:focus-visible { outline:2px solid var(--gold); outline-offset:4px; }
.contact { display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; background:radial-gradient(circle at 50% 52%,#713226,#34110f 38%,#150907 76%); }.contact-light { position:absolute; top:54%; left:50%; z-index:-1; width:36vw; height:36vw; border:1px solid rgba(239,191,92,.3); border-radius:50%; box-shadow:0 0 120px 25px rgba(208,131,44,.26),inset 0 0 80px rgba(224,151,56,.25); transform:translate(-50%,-50%); }.contact-copy { margin:24px 0 30px; color:#ddc3a3; font-size:14px; line-height:1.8; }.contact-actions { display:flex; flex-direction:column; align-items:center; gap:16px; }.email-link { color:#f0cf8c; font-size:13px; text-decoration:none; border-bottom:1px solid rgba(240,207,140,.5); padding-bottom:3px; }.email-link:hover,.email-link:focus-visible { color:white; outline:none; }.fine-print { position:absolute; bottom:34px; color:#ad9072; font-size:9px; letter-spacing:.16em; }
dialog { color:var(--cream); } .gallery-dialog { width:min(1120px,92vw); max-height:88svh; border:1px solid rgba(228,188,112,.35); border-radius:10px; padding:25px; background:#21100d; box-shadow:0 25px 90px #090303; }.gallery-dialog::backdrop,.lightbox::backdrop { background:rgba(7,2,2,.86); backdrop-filter:blur(8px); }.dialog-top { display:flex; justify-content:space-between; align-items:start; }.close-dialog,.close-lightbox { border:0; background:transparent; color:var(--cream); font-size:32px; line-height:1; }.gallery-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:12px; margin-top:18px; }.gallery-item { padding:0; overflow:hidden; border:0; background:#3a1814; aspect-ratio:726/1290; }.gallery-item img { width:100%; height:100%; object-fit:cover; transition:transform .3s; }.gallery-item:hover img,.gallery-item:focus-visible img { transform:scale(1.06); }.gallery-item:focus-visible { outline:2px solid var(--gold); outline-offset:2px; }.lightbox { width:100vw; max-width:none; height:100svh; border:0; padding:5vh 13vw; background:rgba(19,7,5,.94); }.lightbox figure { height:90vh; margin:0; text-align:center; }.lightbox img { max-width:100%; height:calc(100% - 28px); max-height:100%; box-shadow:0 20px 70px #070202; }.lightbox figcaption { margin-top:8px; color:#e7c790; font-size:12px; letter-spacing:.12em; }.close-lightbox { position:absolute; top:25px; right:32px; }.lightbox-nav { position:absolute; top:50%; border:1px solid rgba(228,188,112,.45); border-radius:50%; width:44px; height:44px; background:rgba(36,14,10,.55); color:var(--cream); font-size:21px; }.previous { left:4vw; }.next { right:4vw; }.lightbox-nav:hover,.lightbox-nav:focus-visible { background:var(--gold); color:var(--ink); outline:none; }
@media (max-width:760px) { .site-header { padding:17px 18px; }.brand { font-size:14px; }.brand span { display:none; }.gallery-trigger.compact { padding:9px 12px; font-size:10px; }.panel { min-height:100svh; padding:96px 24px 45px; scroll-snap-align:none; }.hero-copy { margin-top:-20vh; }.hero-copy h1 { font-size:clamp(52px,17vw,76px); }.corridor { inset:24% 0 9%; }.corridor-card { width:102px; }.hero::after { display:none; }.section-copy { width:100%; }.section-copy h2,.contact h2 { font-size:clamp(47px,13vw,68px); }.section-copy > p:not(.overline) { font-size:13px; }.constellation { min-height:720px; }.constellation-stage { top:20%; left:-20%; width:140%; }.scatter-card { left:57%; width:135px; }.selection-heading { display:block; }.selection-heading > p { margin-top:20px; }.work-wall { grid-template-columns:repeat(2,1fr); gap:15px; }.work-card:nth-child(2n) { margin-top:35px; }.work-card:nth-child(5) { grid-column:1 / 3; width:calc(50% - 7px); justify-self:center; }.gallery-grid { grid-template-columns:repeat(3,1fr); }.lightbox { padding:8vh 12vw; }.lightbox figure { height:82vh; }.lightbox-nav { top:auto; bottom:25px; }.previous { left:calc(50% - 58px); }.next { right:calc(50% - 58px); } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; scroll-behavior:auto!important; transition-duration:.01ms!important; }.corridor-card { opacity:.8; }.scatter-card { opacity:1; transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y))) rotate(var(--rot)); }.work-card { opacity:1; transform:none; } }