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

:root { color-scheme: dark; --bg:#08090b; --paper:#e8e4dc; --muted:#8b8c91; --line:rgba(235,231,224,.13); --accent:#b4c6d8; }
* { box-sizing:border-box; }
html { min-height:100%; background:var(--bg); }
body { min-height:100vh; margin:0; background:var(--bg); color:var(--paper); font-family:'DM Sans',sans-serif; }
a { color:inherit; text-decoration:none; }
.site-header { position:fixed; z-index:10; inset:0 0 auto; height:82px; padding:0 clamp(24px,6vw,92px); display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); background:rgba(8,9,11,.72); backdrop-filter:blur(16px); }
.wordmark { font-family:'Playfair Display',serif; font-size:29px; letter-spacing:-.08em; }
.site-nav { display:flex; gap:clamp(20px,4vw,52px); align-items:center; }
.nav-link { color:var(--muted); font-size:12px; letter-spacing:.03em; transition:color .2s ease; }
.nav-link:hover,.nav-link.active { color:var(--paper); }
.stage { position:relative; width:100%; height:100svh; min-height:0; display:grid; grid-template-rows:clamp(230px,37vh,350px) minmax(0,1fr); justify-items:center; align-content:stretch; overflow:hidden; padding:88px 24px 54px; background:radial-gradient(ellipse at 50% 60%,rgba(25,53,84,.2),transparent 43%),var(--bg); }
.declaration { position:relative; z-index:2; grid-row:1; grid-column:1; align-self:center; transform:none; width:min(1100px,92vw); height:100%; overflow:hidden; color:rgba(232,228,220,.34); font-size:clamp(12px,1.1vw,14px); line-height:1.5; letter-spacing:.02em; text-align:justify; column-count:3; column-gap:30px; column-fill:balance; }
.declaration p { margin:0 0 10px; }
#eye { position:relative; z-index:1; grid-row:2; display:block; place-self:center; width:min(66vw,42vh); height:min(66vw,42vh); }
.hero-copy { position:absolute; z-index:1; left:clamp(26px,10vw,150px); top:clamp(142px,23vh,230px); pointer-events:none; }
.eyebrow,.page-kicker { color:#8c9cae; font-size:9px; letter-spacing:.24em; }
.hero-copy h1 { margin:19px 0 0; font:400 clamp(34px,5vw,62px)/1.08 'Playfair Display',serif; letter-spacing:-.035em; }
.hero-link { position:absolute; right:clamp(26px,10vw,150px); bottom:clamp(112px,18vh,185px); padding-bottom:9px; border-bottom:1px solid var(--line); color:#c6c8cc; font-size:12px; }
.hero-link span { margin-left:18px; color:var(--accent); }
.cursor-hint { position:fixed; bottom:28px; left:50%; transform:translateX(-50%); color:rgba(220,220,225,.36); font-size:8px; letter-spacing:.2em; white-space:nowrap; text-align:center; }
.page-shell { width:min(1120px,calc(100% - 48px)); margin:0 auto; padding:clamp(150px,21vh,205px) 0 100px; }
.page-heading { display:grid; grid-template-columns:1fr minmax(220px,340px); gap:42px; align-items:end; margin-bottom:52px; }
.page-heading h1 { margin:14px 0 0; font:400 clamp(48px,8vw,92px)/.98 'Playfair Display',serif; letter-spacing:-.045em; }
.page-heading p { max-width:34ch; margin:0 0 6px; color:#a7a6a3; font:400 14px/1.8 'DM Sans',sans-serif; }
.wall-grid { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:18px; }
.wall-card { position:relative; display:block; grid-column:span 4; min-height:min(52vh,470px); overflow:hidden; border:1px solid var(--line); color:var(--paper); background:linear-gradient(145deg,rgba(31,34,40,.7),rgba(13,14,16,.94)); transition:transform .35s ease,border-color .35s ease,filter .35s ease; }
.wall-card:hover { transform:translateY(-6px); border-color:rgba(211,224,237,.38); filter:brightness(1.12); }
.wall-card:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
.wall-card-image { position:absolute; z-index:0; inset:0; width:100%; height:100%; object-fit:cover; filter:brightness(.65) saturate(.75); transition:transform .7s ease,filter .35s ease; }
.wall-card:hover .wall-card-image { transform:scale(1.045); filter:brightness(.78) saturate(.85); }
.wall-card::before { content:''; position:absolute; z-index:1; inset:0; opacity:.5; background:radial-gradient(ellipse at 28% 23%,rgba(121,146,171,.14),transparent 44%),linear-gradient(120deg,transparent 35%,rgba(0,0,0,.72) 100%); }
.wall-card:nth-child(1)::before { opacity:.68; background:repeating-linear-gradient(127deg,transparent 0 28px,rgba(198,183,154,.075) 29px 31px,transparent 32px 54px),radial-gradient(ellipse at 67% 35%,rgba(168,124,69,.18),transparent 48%),linear-gradient(145deg,#252320,#111214 70%); }
.wall-card:nth-child(2)::before { opacity:.7; background:radial-gradient(ellipse at 70% 24%,rgba(172,127,87,.2),transparent 45%),repeating-linear-gradient(0deg,transparent 0 43px,rgba(224,209,187,.045) 44px 45px),linear-gradient(145deg,#29231f,#111214 72%); }
.wall-card:nth-child(3)::before { opacity:.64; background:radial-gradient(ellipse at 34% 32%,rgba(112,143,157,.18),transparent 40%),linear-gradient(155deg,#1d2426,#111214 76%); }
.wall-card-inner { position:absolute; z-index:2; inset:auto 26px 25px; pointer-events:none; }
.wall-number { color:#818d98; font-size:9px; letter-spacing:.18em; }
.wall-card h2 { margin:13px 0 14px; font:400 clamp(30px,3vw,42px)/1.1 'Playfair Display',serif; }
.wall-card-hint { display:flex; justify-content:space-between; align-items:center; max-width:190px; padding-top:11px; border-top:1px solid var(--line); color:#9b9da1; font-size:10px; }
.wall-card-hint span { color:#c5d5e2; font-size:14px; }
.empty-gallery { min-height:300px; display:grid; place-items:center; border:1px solid var(--line); background:radial-gradient(ellipse at center,rgba(72,86,97,.12),transparent 58%); }
.empty-gallery p { margin:0; color:#85868a; font:400 16px/1.6 'Playfair Display',serif; }
.category-cover { display:flex; justify-content:center; margin:0; padding:22px; border:1px solid var(--line); background:#050506; }
.category-cover img { display:block; max-width:100%; max-height:min(70vh,820px); object-fit:contain; }
.back-link { display:inline-block; margin-top:28px; color:#aeb3b8; font-size:11px; }
.back-link:hover { color:var(--paper); }
.wall-note { padding:20px 0 0; color:#77797d; font-size:11px; line-height:1.7; }
.about-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(220px, .72fr); gap:clamp(48px,10vw,145px); align-items:start; }
.about-copy { max-width:58ch; padding-top:16px; }
.about-copy p { margin:0 0 24px; color:#b2b0aa; font:400 clamp(16px,1.7vw,19px)/1.9 'Playfair Display',serif; }
.about-side { margin-top:22px; padding:22px 0 0; border-top:1px solid var(--line); color:#77797d; font-size:11px; line-height:1.9; }
.about-side span { display:block; margin-bottom:8px; color:#94a3b2; font-size:9px; letter-spacing:.2em; }
.page-footer { margin-top:68px; padding-top:18px; border-top:1px solid var(--line); color:#66686d; font-size:10px; }
.fallback { margin:0; color:#a8afb9; font:14px/1.5 sans-serif; }
@media (max-width:760px) {
  .site-header { height:70px; padding:0 22px; }
  .site-nav { gap:19px; }
  .nav-link { font-size:11px; }
  .stage { grid-template-rows:minmax(220px,42vh) minmax(0,1fr) auto; padding:78px 16px 58px; }
  .declaration { width:calc(100% - 36px); height:100%; font-size:clamp(7px,2vw,9px); line-height:1.3; text-align:left; column-count:1; column-gap:0; }
  #eye { width:min(91vw,34vh); height:min(91vw,34vh); max-width:100%; max-height:100%; }
  .hero-copy { top:116px; left:25px; }
  .hero-copy h1 { font-size:40px; }
  .hero-link { position:relative; grid-row:3; grid-column:1; justify-self:end; right:auto; bottom:auto; z-index:2; margin:0 9px 2px; padding-bottom:7px; }
  .page-shell { width:calc(100% - 42px); padding-top:130px; }
  .page-heading { grid-template-columns:1fr; gap:18px; margin-bottom:34px; }
  .page-heading h1 { font-size:66px; }
  .wall-grid { gap:12px; }
  .wall-card { grid-column:span 6; min-height:260px; }
  .about-layout { grid-template-columns:1fr; gap:24px; }
  .about-side { max-width:400px; }
  .cursor-hint { width:calc(100% - 35px); bottom:18px; font-size:7px; letter-spacing:.13em; }
}
@media (max-width:420px) {
  .site-nav { gap:13px; }
  .nav-link { font-size:10px; }
  .wall-card { grid-column:span 12; min-height:220px; }
}
@media (max-width:760px) and (max-height:500px) {
  .stage { grid-template-rows:minmax(100px,28vh) minmax(0,1fr) auto; padding:72px 16px 44px; }
  #eye { width:min(52vw,30vh); height:min(52vw,30vh); }
  .cursor-hint { bottom:8px; font-size:6px; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto !important; transition-duration:.01ms !important; animation-duration:.01ms !important; } }
@media (max-height:850px) and (min-width:761px) {
  .stage { grid-template-rows:34vh minmax(0,1fr); padding-top:88px; padding-bottom:52px; }
  .declaration { height:100%; font-size:clamp(10px,1vw,12px); line-height:1.4; }
  #eye { width:min(66vw,38vh); height:min(66vw,38vh); }
}
@media (max-width:1000px) and (min-width:761px) {
  .stage { grid-template-rows:39vh minmax(0,1fr); }
  .declaration { column-count:2; font-size:12px; }
  #eye { width:min(66vw,35vh); height:min(66vw,35vh); }
}
@media (max-width:850px) and (min-width:761px) {
  .declaration { font-size:10px; line-height:1.35; }
}