/* ============================================================
   LEVÉE — Design System
   Fonts: Cinzel (display) + Jost (body)
   ============================================================ */

:root {
  --ivory:      #d0c1a8;
  --taupe:      #c4b49a;
  --linen:      #e9e2d8;
  --linen-light:#f2ede6;
  --walnut:     #231c14;
  --espresso:   #130e08;
  --gold:       #c0a882;
  --muted:      #8a7560;
  --cream:      #e9e2d8;
  --body-dark:  rgba(233,226,216,0.48);
  --faded:      rgba(233,226,216,0.28);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: 'Jost', sans-serif; font-weight: 300; background: var(--linen); color: var(--walnut); }

/* NAV */
.nav { display:flex; justify-content:space-between; align-items:center; padding:20px 52px; background:var(--linen); border-bottom:0.5px solid var(--gold); position:sticky; top:0; z-index:100; }
.nav-logo { font-family:'Cinzel',serif; font-size:15px; letter-spacing:0.55em; color:var(--walnut); text-decoration:none; font-weight:300; }
.nav-links { display:flex; gap:32px; }
.nav-links a { font-size:8.5px; letter-spacing:0.2em; text-transform:uppercase; color:var(--muted); text-decoration:none; transition:color 0.2s; }
.nav-links a:hover, .nav-links a.active { color:var(--walnut); }
.nav-cta { font-size:8px; letter-spacing:0.2em; text-transform:uppercase; color:var(--cream); background:var(--walnut); padding:10px 22px; text-decoration:none; transition:background 0.2s; }
.nav-cta:hover { background:#3a3020; }
.nav-hamburger { display:none; background:none; border:none; font-size:20px; cursor:pointer; color:var(--walnut); }
.nav-mobile { display:none; flex-direction:column; background:var(--linen); border-bottom:0.5px solid var(--gold); padding:20px 52px; gap:16px; }
.nav-mobile a { font-size:10px; letter-spacing:0.2em; text-transform:uppercase; color:var(--muted); text-decoration:none; }
.nav-mobile.open { display:flex; }

/* HERO */
.hero { height:580px; display:grid; grid-template-columns:1fr 1fr; overflow:hidden; }
.hero-l { background:var(--ivory); position:relative; display:flex; flex-direction:column; justify-content:flex-end; padding:56px; border-right:0.5px solid #b0956e; overflow:hidden; }
.hero-l::before { content:''; position:absolute; inset:0; background:repeating-linear-gradient(90deg,transparent,transparent 119px,rgba(184,160,120,0.12) 120px); }
.hero-r { background:var(--taupe); position:relative; display:flex; flex-direction:column; justify-content:space-between; padding:56px; }
.hero-r::before { content:''; position:absolute; inset:0; background:repeating-linear-gradient(90deg,transparent,transparent 119px,rgba(148,126,92,0.1) 120px); }
.hero-eyebrow { font-size:8px; letter-spacing:0.35em; text-transform:uppercase; color:var(--gold); margin-bottom:20px; position:relative; }
.hero-title { font-family:'Cinzel',serif; font-size:88px; color:var(--walnut); font-weight:300; letter-spacing:0.03em; line-height:0.9; position:relative; }
.hero-rule { width:44px; height:0.5px; background:var(--gold); margin:28px 0; }
.hero-sub { font-size:9.5px; letter-spacing:0.12em; line-height:2.1; color:var(--muted); position:relative; }
.hero-quote { font-family:'Cinzel',serif; font-size:22px; color:var(--walnut); line-height:1.6; max-width:300px; font-weight:300; font-style:italic; position:relative; }
.hero-bottom { position:relative; }
.hero-desc { font-size:9.5px; line-height:2; color:var(--muted); margin-bottom:28px; font-style:italic; font-family:'Cinzel',serif; }
.hero-enter { display:flex; align-items:center; gap:14px; text-decoration:none; }
.hero-enter span:first-child { font-size:8px; letter-spacing:0.25em; text-transform:uppercase; color:var(--walnut); border-bottom:0.5px solid var(--walnut); padding-bottom:2px; }
.hero-enter-line { flex:1; height:0.5px; background:var(--gold); max-width:70px; display:block !important; }

/* BAND */
.band { background:var(--walnut); padding:14px 52px; display:flex; justify-content:center; align-items:center; gap:24px; flex-wrap:wrap; overflow:hidden; }
.band span { font-size:8px; letter-spacing:0.22em; text-transform:uppercase; color:rgba(233,226,216,0.5); white-space:nowrap; }
.band-dot { width:4px; height:4px; border-radius:50%; background:var(--gold); opacity:0.5; display:inline-block; flex-shrink:0; }

/* SECTIONS */
.section { padding:56px 52px; }
.sec-eye { font-size:8px; letter-spacing:0.3em; text-transform:uppercase; color:var(--gold); margin-bottom:36px; display:flex; align-items:center; gap:16px; }
.sec-eye::after { content:''; flex:1; height:0.5px; background:var(--gold); opacity:0.4; }
.dvd { height:0.5px; background:var(--gold); margin:0 52px; }

/* PILLARS */
.pillars { display:grid; grid-template-columns:1fr 1fr 1fr; border:0.5px solid var(--gold); }
.pillar { padding:38px 30px; border-right:0.5px solid var(--gold); }
.pillar:last-child { border-right:none; }
.p-num { font-family:'Cinzel',serif; font-size:44px; color:var(--gold); font-weight:300; line-height:1; margin-bottom:16px; }
.p-tit { font-size:8px; letter-spacing:0.22em; text-transform:uppercase; color:var(--walnut); margin-bottom:14px; }
.p-bod { font-size:10.5px; line-height:2; color:var(--muted); }

/* GALLERY GRID */
.gallery-grid { display:grid; grid-template-columns:1.55fr 1fr 1fr; grid-template-rows:210px 190px; gap:2px; background:var(--gold); }
.gc { position:relative; overflow:hidden; cursor:pointer; }
.gc.tall { grid-row:span 2; }
.gc-a { background:#cfc3ae; } .gc-b { background:#c3b6a0; } .gc-c { background:#cabea9; } .gc-d { background:#bfb09a; } .gc-e { background:#c8bca7; }
.gc-placeholder { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.gc-placeholder::after { content:'Your Photo Here'; font-size:8px; letter-spacing:0.15em; text-transform:uppercase; color:rgba(35,28,20,0.25); }
.gc img { width:100%; height:100%; object-fit:cover; }
.gc-info { position:absolute; bottom:0; left:0; right:0; padding:16px 20px; background:linear-gradient(transparent,rgba(22,14,6,0.75)); }
.gc-artist { font-size:7px; letter-spacing:0.18em; text-transform:uppercase; color:rgba(233,226,216,0.72); }
.gc-title { font-family:'Cinzel',serif; font-size:14px; color:#e9e2d8; margin-top:3px; font-weight:300; }
.gc-cause { font-size:7px; letter-spacing:0.1em; color:var(--gold); margin-top:4px; }
.gc-inq { position:absolute; top:14px; right:14px; font-size:6.5px; letter-spacing:0.14em; text-transform:uppercase; background:rgba(233,226,216,0.1); border:0.5px solid rgba(233,226,216,0.3); padding:5px 10px; color:rgba(233,226,216,0.7); cursor:pointer; font-family:'Jost',sans-serif; opacity:0; transition:opacity 0.2s; }
.gc:hover .gc-inq { opacity:1; }

/* BUTTONS */
.outline-btn { font-size:8px; letter-spacing:0.22em; text-transform:uppercase; border:0.5px solid var(--gold); padding:12px 26px; color:var(--gold); cursor:pointer; background:transparent; text-decoration:none; transition:all 0.2s; display:inline-block; }
.outline-btn:hover { background:var(--gold); color:var(--walnut); }
.dark-btn { font-size:8px; letter-spacing:0.22em; text-transform:uppercase; background:var(--walnut); color:var(--gold); border:none; padding:14px 28px; cursor:pointer; font-family:'Jost',sans-serif; text-decoration:none; display:inline-block; transition:background 0.2s; }
.dark-btn:hover { background:#3a3020; }
.gold-btn { font-size:8px; letter-spacing:0.22em; text-transform:uppercase; background:var(--gold); color:var(--walnut); border:none; padding:14px 28px; cursor:pointer; font-family:'Jost',sans-serif; text-decoration:none; display:inline-block; transition:background 0.2s; }
.gold-btn:hover { background:#b09870; }

/* HOW IT WORKS */
.how { background:var(--linen-light); padding:56px 52px; border-top:0.5px solid var(--gold); border-bottom:0.5px solid var(--gold); }
.how-grid { display:grid; grid-template-columns:1fr 1fr 1fr 1fr; border:0.5px solid var(--gold); }
.how-step { padding:34px 26px; border-right:0.5px solid var(--gold); }
.how-step:last-child { border-right:none; }
.how-n { font-family:'Cinzel',serif; font-size:48px; color:#e0d8cc; font-weight:300; line-height:1; margin-bottom:16px; }
.how-tit { font-size:8px; letter-spacing:0.2em; text-transform:uppercase; color:var(--walnut); margin-bottom:12px; }
.how-bod { font-size:10px; line-height:1.95; color:var(--muted); }

/* QUOTE BAND */
.quote-band { background:var(--gold); padding:56px 52px; text-align:center; }
.qb-text { font-family:'Cinzel',serif; font-style:italic; font-size:26px; color:var(--walnut); line-height:1.6; max-width:780px; margin:0 auto; font-weight:300; }
.qb-attr { font-size:8px; letter-spacing:0.25em; text-transform:uppercase; color:#8a6a40; margin-top:20px; }

/* JOURNAL */
.journal-grid { display:grid; grid-template-columns:1fr 0.5px 1fr 0.5px 1fr; }
.j-divider { background:var(--gold); opacity:0.3; }
.j-col { padding:0 36px; }
.j-col:first-child { padding-left:0; }
.j-col:last-child { padding-right:0; }
.j-img { height:160px; margin-bottom:20px; background:#c8bca7; overflow:hidden; }
.j-img img { width:100%; height:100%; object-fit:cover; }
.j-eye { font-size:7px; letter-spacing:0.24em; text-transform:uppercase; color:var(--gold); margin-bottom:14px; }
.j-tit { font-family:'Cinzel',serif; font-size:18px; color:var(--walnut); font-weight:300; line-height:1.4; margin-bottom:12px; }
.j-exc { font-size:10px; line-height:2; color:var(--muted); }
.j-rd { font-size:7.5px; letter-spacing:0.18em; text-transform:uppercase; color:var(--walnut); border-bottom:0.5px solid var(--walnut); display:inline-block; padding-bottom:2px; margin-top:16px; text-decoration:none; }

/* ABOUT */
.about { background:var(--walnut); padding:68px 52px; display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; }
.ab-eye { font-size:7.5px; letter-spacing:0.3em; text-transform:uppercase; color:var(--gold); margin-bottom:22px; }
.ab-tit { font-family:'Cinzel',serif; font-size:30px; color:var(--cream); font-weight:300; line-height:1.4; margin-bottom:22px; }
.ab-bod { font-size:10px; line-height:2.3; color:var(--body-dark); }
.ab-rule { height:0.5px; background:rgba(192,168,130,0.2); margin:28px 0; }
.ab-timeline { display:flex; flex-direction:column; gap:18px; }
.abt { display:flex; gap:20px; align-items:flex-start; }
.abt-year { font-family:'Cinzel',serif; font-size:14px; color:var(--gold); min-width:44px; font-weight:300; }
.abt-text { font-size:9.5px; line-height:1.8; color:rgba(233,226,216,0.38); }
.about-r { display:grid; grid-template-columns:1fr 1fr; gap:24px; align-content:start; }
.stat { border-top:0.5px solid rgba(192,168,130,0.2); padding-top:18px; }
.st-n { font-family:'Cinzel',serif; font-size:30px; color:var(--gold); font-weight:300; }
.st-l { font-size:7.5px; letter-spacing:0.14em; text-transform:uppercase; color:var(--faded); margin-top:5px; line-height:1.8; }

/* GIVE */
.give-grid { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start; }
.give-tit { font-family:'Cinzel',serif; font-size:28px; color:var(--walnut); font-weight:300; line-height:1.45; margin-bottom:14px; }
.give-bod { font-size:10px; line-height:2.1; color:var(--muted); }
.give-note { font-size:9px; line-height:1.9; color:#b0a090; margin-top:20px; border-top:0.5px solid var(--gold); padding-top:16px; }
.pills { display:flex; flex-wrap:wrap; gap:10px; margin-top:20px; }
.pill { font-size:7px; letter-spacing:0.16em; text-transform:uppercase; border:0.5px solid var(--gold); padding:9px 16px; color:var(--muted); cursor:pointer; background:transparent; font-family:'Jost',sans-serif; transition:all 0.2s; }
.pill:hover, .pill.hi { border-color:var(--walnut); color:var(--walnut); }

/* SUBMIT FORM */
.submit-grid { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
.sub-tit { font-family:'Cinzel',serif; font-size:30px; color:var(--walnut); font-weight:300; line-height:1.35; margin-bottom:14px; }
.sub-bod { font-size:10px; line-height:2; color:var(--muted); }
.sub-form { display:flex; flex-direction:column; gap:14px; }
.sub-field { background:transparent; border:none; border-bottom:0.5px solid var(--gold); padding:10px 0; font-family:'Jost',sans-serif; font-size:10px; color:var(--walnut); letter-spacing:0.05em; outline:none; width:100%; }
.sub-field::placeholder { color:#b0a090; font-size:9px; letter-spacing:0.12em; }
.sub-select { background:transparent; border:none; border-bottom:0.5px solid var(--gold); padding:10px 0; font-family:'Jost',sans-serif; font-size:10px; color:var(--walnut); outline:none; width:100%; cursor:pointer; appearance:none; }
.sub-label { font-size:8px; letter-spacing:0.18em; text-transform:uppercase; color:var(--gold); margin-bottom:4px; display:block; }
.sub-group { display:flex; flex-direction:column; }

/* STRIP */
.strip { background:var(--walnut); padding:22px 52px; display:flex; justify-content:space-between; align-items:center; border-top:0.5px solid rgba(192,168,130,0.15); }
.strip-t { font-family:'Cinzel',serif; font-style:italic; font-size:18px; color:var(--cream); font-weight:300; }
.strip-btn { font-size:7.5px; letter-spacing:0.22em; text-transform:uppercase; border:0.5px solid var(--gold); padding:11px 24px; color:var(--gold); cursor:pointer; background:transparent; text-decoration:none; transition:all 0.2s; }
.strip-btn:hover { background:var(--gold); color:var(--walnut); }

/* FOOTER */
.footer { background:var(--espresso); padding:48px 52px 28px; }
.footer-top { display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:40px; padding-bottom:40px; border-bottom:0.5px solid rgba(192,168,130,0.15); }
.f-brand { display:flex; flex-direction:column; gap:14px; }
.f-logo { font-family:'Cinzel',serif; font-size:17px; letter-spacing:0.5em; color:rgba(233,226,216,0.3); }
.f-tagline { font-family:'Cinzel',serif; font-style:italic; font-size:13px; color:rgba(233,226,216,0.2); line-height:1.7; }
.f-note { font-size:9px; letter-spacing:0.08em; color:rgba(233,226,216,0.15); line-height:1.8; }
.f-col { display:flex; flex-direction:column; gap:4px; }
.f-col-tit { font-size:7px; letter-spacing:0.25em; text-transform:uppercase; color:rgba(192,168,130,0.45); margin-bottom:12px; }
.f-col a { font-size:9px; letter-spacing:0.1em; color:rgba(233,226,216,0.22); text-decoration:none; padding:5px 0; transition:color 0.2s; }
.f-col a:hover { color:var(--gold); }
.footer-bot { display:flex; justify-content:space-between; align-items:center; padding-top:24px; }
.f-copy { font-size:7.5px; letter-spacing:0.12em; color:rgba(233,226,216,0.15); }
.f-mercy { font-size:7.5px; letter-spacing:0.1em; color:rgba(192,168,130,0.3); }

/* PAGE HEADERS */
.page-header { background:var(--ivory); padding:80px 52px 60px; border-bottom:0.5px solid var(--gold); }
.page-header-inner { max-width:600px; }
.ph-eye { font-size:8px; letter-spacing:0.3em; text-transform:uppercase; color:var(--gold); margin-bottom:16px; }
.ph-title { font-family:'Cinzel',serif; font-size:52px; color:var(--walnut); font-weight:300; line-height:1.1; margin-bottom:16px; }
.ph-sub { font-size:11px; line-height:2; color:var(--muted); }

/* BLOG */
.blog-cats { display:flex; gap:0; border-bottom:0.5px solid var(--gold); margin-bottom:48px; }
.blog-cat-btn { font-size:8px; letter-spacing:0.2em; text-transform:uppercase; padding:14px 24px; color:var(--muted); cursor:pointer; background:transparent; border:none; font-family:'Jost',sans-serif; border-bottom:2px solid transparent; transition:all 0.2s; }
.blog-cat-btn:hover, .blog-cat-btn.active { color:var(--walnut); border-bottom-color:var(--walnut); }
.blog-grid { display:grid; grid-template-columns:1fr 1fr; gap:52px; }
.blog-card { cursor:pointer; }
.blog-card-img { height:240px; background:#c8bca7; margin-bottom:20px; overflow:hidden; }
.blog-card-img img { width:100%; height:100%; object-fit:cover; transition:transform 0.4s; }
.blog-card:hover .blog-card-img img { transform:scale(1.03); }
.blog-card-eye { font-size:7px; letter-spacing:0.24em; text-transform:uppercase; color:var(--gold); margin-bottom:10px; }
.blog-card-tit { font-family:'Cinzel',serif; font-size:20px; color:var(--walnut); font-weight:300; line-height:1.4; margin-bottom:10px; }
.blog-card-exc { font-size:10px; line-height:2; color:var(--muted); }
.blog-card-rd { font-size:7.5px; letter-spacing:0.18em; text-transform:uppercase; color:var(--walnut); border-bottom:0.5px solid var(--walnut); display:inline-block; padding-bottom:2px; margin-top:14px; text-decoration:none; }
.blog-featured { grid-column:span 2; display:grid; grid-template-columns:1.2fr 1fr; gap:52px; border-bottom:0.5px solid var(--gold); padding-bottom:52px; margin-bottom:0; }
.blog-featured-img { height:360px; background:#c0b4a0; overflow:hidden; }
.blog-featured-img img { width:100%; height:100%; object-fit:cover; }
.blog-featured-content { display:flex; flex-direction:column; justify-content:center; }
.blog-featured-label { font-size:7px; letter-spacing:0.28em; text-transform:uppercase; color:var(--gold); margin-bottom:20px; }
.blog-featured-tit { font-family:'Cinzel',serif; font-size:28px; color:var(--walnut); font-weight:300; line-height:1.4; margin-bottom:16px; }
.blog-featured-exc { font-size:10.5px; line-height:2.1; color:var(--muted); }

/* EXHIBITION PAGE */
.ex-intro { display:grid; grid-template-columns:1fr 1fr; gap:52px; margin-bottom:36px; align-items:end; }
.ex-title { font-family:'Cinzel',serif; font-size:36px; color:var(--walnut); font-weight:300; line-height:1.25; }
.ex-body { font-size:10px; line-height:2.1; color:var(--muted); }
.vr-chrome { border:0.5px solid var(--gold); background:#100c07; overflow:hidden; }
.vr-topbar { display:flex; justify-content:space-between; align-items:center; padding:13px 24px; border-bottom:0.5px solid #2e2416; background:#130e08; }
.vr-topbar-t { font-size:7.5px; letter-spacing:0.22em; text-transform:uppercase; color:var(--gold); }
.vr-dots-row { display:flex; gap:6px; }
.vr-dot { width:8px; height:8px; border-radius:50%; background:#2e2416; }
.vr-dot.on { background:var(--gold); }
.room { position:relative; height:460px; overflow:hidden; background:#0d0a06; }
.room-svg { position:absolute; inset:0; width:100%; height:100%; }
.room-label { position:absolute; top:18px; left:22px; font-size:7px; letter-spacing:0.2em; text-transform:uppercase; color:rgba(192,168,130,0.55); }
.room-hint { position:absolute; top:18px; right:22px; font-size:7px; letter-spacing:0.12em; color:rgba(192,168,130,0.4); }
.hs { position:absolute; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:4px; }
.hs-r { width:22px; height:22px; border-radius:50%; border:0.5px solid rgba(192,168,130,0.65); display:flex; align-items:center; justify-content:center; background:rgba(192,168,130,0.08); }
.hs-d { width:6px; height:6px; border-radius:50%; background:var(--gold); }
.hs-l { font-size:6px; letter-spacing:0.1em; text-transform:uppercase; color:rgba(192,168,130,0.7); white-space:nowrap; background:rgba(13,10,6,0.6); padding:2px 6px; }
.vr-nav-bar { display:flex; justify-content:space-between; align-items:center; padding:14px 24px; border-top:0.5px solid #2e2416; background:#100c07; }
.vr-nav-a { font-size:7.5px; letter-spacing:0.16em; text-transform:uppercase; color:var(--muted); cursor:pointer; }
.vr-nav-a b { color:var(--gold); }
.vr-room-dots { display:flex; gap:5px; }
.vr-rd { width:20px; height:3px; background:#2e2416; }
.vr-rd.on { background:var(--gold); }
.vr-cta-row { display:flex; gap:12px; margin-top:24px; }

/* GIVE PAGE */
.charity-list { display:flex; flex-direction:column; gap:0; border:0.5px solid var(--gold); }
.charity-item { display:flex; justify-content:space-between; align-items:center; padding:24px 28px; border-bottom:0.5px solid var(--gold); }
.charity-item:last-child { border-bottom:none; }
.charity-name { font-family:'Cinzel',serif; font-size:16px; color:var(--walnut); font-weight:300; }
.charity-desc { font-size:9px; line-height:1.8; color:var(--muted); margin-top:4px; }
.charity-link { font-size:7.5px; letter-spacing:0.18em; text-transform:uppercase; color:var(--gold); text-decoration:none; border-bottom:0.5px solid var(--gold); padding-bottom:1px; white-space:nowrap; }

/* RESPONSIVE */
@media (max-width: 900px) {
  .nav-links, .nav-cta { display:none; }
  .nav-hamburger { display:block; }
  .hero { grid-template-columns:1fr; height:auto; }
  .hero-l { padding:40px 28px 32px; }
  .hero-r { padding:32px 28px 40px; }
  .hero-title { font-size:56px; }
  .pillars { grid-template-columns:1fr; }
  .pillar { border-right:none; border-bottom:0.5px solid var(--gold); }
  .pillar:last-child { border-bottom:none; }
  .gallery-grid { grid-template-columns:1fr 1fr; grid-template-rows:auto; }
  .gc.tall { grid-row:span 1; }
  .how-grid { grid-template-columns:1fr 1fr; }
  .how-step { border-right:none; border-bottom:0.5px solid var(--gold); }
  .how-step:nth-child(odd) { border-right:0.5px solid var(--gold); }
  .journal-grid { grid-template-columns:1fr; }
  .j-divider { display:none; }
  .j-col { padding:0 0 36px; border-bottom:0.5px solid var(--gold); }
  .j-col:last-child { border-bottom:none; padding-bottom:0; }
  .about { grid-template-columns:1fr; gap:40px; }
  .about-r { grid-template-columns:1fr 1fr; }
  .footer-top { grid-template-columns:1fr 1fr; gap:32px; }
  .section, .how, .quote-band, .about, .strip, .footer { padding-left:28px; padding-right:28px; }
  .dvd { margin:0 28px; }
  .blog-grid { grid-template-columns:1fr; }
  .blog-featured { grid-column:span 1; grid-template-columns:1fr; }
  .give-grid, .submit-grid, .ex-intro { grid-template-columns:1fr; }
  .band { gap:12px; padding:12px 28px; }
}