@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@1,600&family=Manrope:wght@400;500;600;700&display=swap");

:root { --navy:#030b16; --gold:#d7a640; --gold-light:#f4d486; --cream:#fff4d6; --muted:#8e8b84; --line:rgba(220,171,70,.22); }
* { box-sizing:border-box; }
html, body { min-height:100%; }
body { margin:0; min-width:320px; color:var(--cream); background:radial-gradient(circle at 50% 40%,rgba(54,92,119,.15),transparent 36%),var(--navy); font-family:"Manrope",sans-serif; }
body::before { content:""; position:fixed; inset:0; pointer-events:none; opacity:.13; 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='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.3'/%3E%3C/svg%3E"); }
.ambient { position:fixed; inset:0; pointer-events:none; background:linear-gradient(90deg,transparent 49.96%,rgba(215,166,64,.06) 50%,transparent 50.04%),linear-gradient(transparent 49.96%,rgba(215,166,64,.04) 50%,transparent 50.04%); }
.page { position:relative; width:min(1180px,calc(100% - 48px)); min-height:100vh; margin:auto; display:grid; grid-template-rows:auto 1fr auto; }
header { height:76px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:12px; color:inherit; text-decoration:none; }
.brand-mark { width:38px; height:38px; display:grid; place-items:center; border:1px solid var(--gold); color:var(--gold-light); transform:rotate(45deg); }
.brand-mark b { font-size:12px; letter-spacing:-.05em; transform:rotate(-45deg); }
.brand > span:last-child { display:grid; gap:3px; }
.brand strong { font-size:12px; letter-spacing:.025em; }
.brand small { color:var(--gold); font-size:8px; font-weight:600; letter-spacing:.28em; text-transform:uppercase; }
.status { margin:0; display:flex; align-items:center; gap:9px; color:var(--muted); font-size:9px; letter-spacing:.17em; text-transform:uppercase; }
.status i { width:6px; height:6px; border-radius:50%; background:var(--gold); box-shadow:0 0 13px var(--gold); animation:pulse 2.2s infinite; }
main { display:grid; align-items:center; }
.hero { padding:28px 0 24px; text-align:center; }
.eyebrow { margin:0 0 10px; display:flex; align-items:center; justify-content:center; gap:13px; color:var(--gold-light); font-size:9px; font-weight:600; letter-spacing:.22em; text-transform:uppercase; animation:rise .7s both; }
.eyebrow span { width:28px; height:1px; background:var(--gold); opacity:.7; }
h1 { margin:0 0 20px; font-size:clamp(34px,4vw,55px); line-height:1; font-weight:600; letter-spacing:-.05em; animation:rise .8s .08s both; }
h1 em { color:var(--gold-light); font-family:"Cormorant Garamond",serif; font-weight:600; }
.artwork { position:relative; width:fit-content; max-width:min(870px,100%); margin:0 auto; padding:8px; border:1px solid var(--line); background:rgba(215,166,64,.035); box-shadow:0 25px 90px rgba(0,0,0,.55),0 0 55px rgba(215,166,64,.06); animation:rise .9s .16s both; }
.artwork img { display:block; width:auto; max-width:100%; max-height:min(59vh,584px); object-fit:contain; }
.corner { position:absolute; z-index:1; width:25px; height:25px; }
.corner-tl { top:-5px; left:-5px; border-top:1px solid var(--gold-light); border-left:1px solid var(--gold-light); }
.corner-tr { top:-5px; right:-5px; border-top:1px solid var(--gold-light); border-right:1px solid var(--gold-light); }
.corner-bl { bottom:-5px; left:-5px; border-bottom:1px solid var(--gold-light); border-left:1px solid var(--gold-light); }
.corner-br { bottom:-5px; right:-5px; border-bottom:1px solid var(--gold-light); border-right:1px solid var(--gold-light); }
.closing { margin:17px 0 0; color:var(--muted); font-size:10px; letter-spacing:.15em; text-transform:uppercase; }
footer { min-height:58px; display:flex; align-items:center; justify-content:space-between; gap:24px; border-top:1px solid var(--line); color:#676b6e; font-size:8px; letter-spacing:.12em; text-transform:uppercase; }
footer p { margin:0; } footer b { color:var(--gold); margin:0 5px; }
@keyframes rise { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:translateY(0); } }
@keyframes pulse { 50% { opacity:.35; box-shadow:0 0 4px var(--gold); } }
@media (max-width:620px) {
  .page { width:calc(100% - 28px); } header { height:68px; } .status { font-size:0; }
  .hero { padding:24px 0 20px; } .eyebrow { letter-spacing:.13em; } .eyebrow span { width:17px; }
  h1 { margin-bottom:16px; font-size:clamp(31px,9.4vw,44px); }
  .artwork { padding:5px; } .artwork img { max-height:none; width:100%; }
  .closing { font-size:8px; line-height:1.5; }
  footer { padding:17px 0; flex-direction:column; justify-content:center; gap:7px; text-align:center; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; } }