:root {
  --wall: #E8EEE5;
  --bone: #F5F7EF;
  --panel: #FFFFFF;
  --ink: #18271F;
  --mute: #596C60;

  --faint: #92A096;
  --red: #B84F36;
  --brass: #78952F;
  --brass-s: #E2EBCB;
  --wood: #654D85;

  --glass: rgba(255, 255, 255, .58);
  --line: #D3DED1;
  --shadow: 0 28px 70px -36px rgba(24, 39, 31, .22);

  --display: 'Yeseva One', serif;
  --sans: 'Urbanist', sans-serif;
  --mono: 'Red Hat Mono', monospace;
}

[data-theme="dark"] {
  --wall: #101A15;
  --bone: #17231B;
  --panel: #202E24;
  --ink: #F1F5E9;
  --mute: #B0BFAF;

  --faint: #788A79;
  --red: #F08A68;
  --brass: #B5D96A;
  --brass-s: #303D26;
  --wood: #B5A0E0;

  --glass: rgba(255, 255, 255, .055);
  --line: #344638;
  --shadow: 0 28px 70px -36px rgba(0, 0, 0, .78);
}

* { box-sizing: border-box }
html { scroll-behavior: smooth; scroll-padding-top: 24px }
body { margin: 0; background: var(--wall); color: var(--ink); font-family: var(--sans); padding-bottom: 110px; transition: background .45s, color .45s; overflow-x: hidden }
.modal{ z-index: 10000; }
h1, h2, h3, h4, .display { font-family: var(--display); font-weight: 400; letter-spacing: -.01em }
.mono { font-family: var(--mono) }
.mute { color: var(--mute) }
a { color: inherit }
::selection { background: var(--red); color: #fff }
::-webkit-scrollbar { width: 8px; height: 8px }
::-webkit-scrollbar-thumb { background: var(--brass); border-radius: 8px }
.wrap { max-width: 1280px; margin: 0 auto; padding: 0 28px }
.acc { font-family: var(--mono); font-size: .68rem; letter-spacing: .22em; text-transform: uppercase; color: var(--brass) }
.h-xl { font-family: var(--display); font-size: clamp(2.4rem, 5vw, 4.4rem); line-height: 1.05 }
.sec { padding: 7.5rem 0 }
.dock { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 1100; display: flex; align-items: center; gap: 6px; background: color-mix(in srgb, var(--panel) 88%, transparent); backdrop-filter: blur(16px); border: 1px solid var(--line); border-radius: 999px; padding: 8px 10px 8px 18px; box-shadow: var(--shadow); max-width: calc(100vw - 24px) }
.dock .mark { font-family: var(--display); font-size: 1.15rem; text-decoration: none; color: var(--ink); padding-right: 10px; border-right: 1px solid var(--line); white-space: nowrap }
.dock .mark span { color: var(--red) }
.dock nav { display: flex; gap: 2px }
.dock nav a { text-decoration: none; color: var(--mute); font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; padding: 8px 10px; border-radius: 999px; transition: .2s; white-space: nowrap }
.dock nav a:hover, .dock nav a.on { color: var(--ink) }
.dock nav a.on { background: var(--ink); color: var(--bone) }
.dock .tools { display: flex; gap: 6px; margin-left: 8px; padding-left: 10px; border-left: 1px solid var(--line) }
.d-btn { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: var(--bone); color: var(--ink); display: grid; place-items: center; position: relative; transition: .2s }
.d-btn:hover { background: var(--red); border-color: var(--red); color: #fff }
.d-btn .n { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; border-radius: 9px; background: var(--brass); color: #1c1914; font: 600 .6rem var(--mono); display: grid; place-items: center }
.sheet { position: fixed; inset: 0; z-index: 1200; background: var(--ink); color: var(--bone); display: none; flex-direction: column; align-items: center; justify-content: center; gap: 10px }
.sheet.open { display: flex }
.sheet a { color: var(--bone); text-decoration: none; font-family: var(--display); font-size: 2rem }
.sheet .x { position: absolute; top: 22px; right: 22px; background: none; border: 0; color: var(--bone); font-size: 1.6rem }
@media(max-width:900px) { .dock nav { display: none } .dock { padding-left: 12px } }
.btn-red, .btn-ghost, .btn-ink { border-radius: 999px; padding: .8rem 1.5rem; font-weight: 700; font-size: .85rem; display: inline-flex; align-items: center; gap: .45rem; text-decoration: none; border: 1px solid transparent; transition: .25s; cursor: pointer }
.btn-red { background: var(--red); color: #fff }
.btn-red:hover { background: var(--ink); color: var(--bone); transform: translateY(-2px) }
.btn-ink { background: var(--ink); color: var(--bone) }
.btn-ink:hover { background: var(--red); color: #fff; transform: translateY(-2px) }
.btn-ghost { background: transparent; border-color: var(--ink); color: var(--ink) }
.btn-ghost:hover { background: var(--ink); color: var(--bone) }
.chip { border: 1px solid var(--line); background: var(--panel); color: var(--ink); border-radius: 999px; padding: .45rem 1rem; font-size: .78rem; font-weight: 600; transition: .2s }
.chip:hover, .chip.on { background: var(--ink); color: var(--bone); border-color: var(--ink) }
#hero { padding: 0 }
.banner { display: block; width: 100%; aspect-ratio: 15/7; overflow: hidden; cursor: pointer; background: var(--bone); position: relative }
.banner img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.1s cubic-bezier(.2, .8, .2, 1), filter .5s }
.banner:hover img { transform: scale(1.035); filter: saturate(1.05) }
.banner .fallback { position: absolute; inset: 0; display: none; place-items: center; text-align: center; padding: 6%; background: radial-gradient(circle at 30% 20%, var(--brass-s), transparent 50%), linear-gradient(160deg, var(--red), #5a121c) }
.banner .fallback h2 { color: #fff; font-size: clamp(1.6rem, 4vw, 3rem) }
.banner .fallback p { color: rgba(255, 255, 255, .8); font-family: var(--mono); font-size: .78rem }
.about-stage { display: grid; grid-template-columns: 1.05fr .95fr; gap: 72px; align-items: center }
.pull { font-family: var(--display); font-size: clamp(1.7rem, 3vw, 2.5rem); line-height: 1.25; border-left: 3px solid var(--brass); padding-left: 28px }
.pull em { font-style: italic; color: var(--red) }
.didactic { background: var(--panel); border: 1px solid var(--line); padding: 36px 32px; position: relative }
.didactic:before { content: 'About Us'; position: absolute; top: -10px; left: 22px; background: var(--wall); padding: 0 8px; font-family: var(--mono); font-size: .62rem; letter-spacing: .2em; color: var(--brass) }
.stat-row { display: flex; gap: 28px; margin-top: 28px; flex-wrap: wrap }
.stat-row b { display: block; font-family: var(--display); font-size: 2rem; color: var(--red) }
.virtues { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 22px }
.virtue { border-top: 1px solid var(--line); padding-top: 14px }
.virtue i { color: var(--brass); font-size: 1.15rem }
.virtue h5 { margin: 8px 0 4px; font-size: 1.05rem }
.virtue p { margin: 0; font-size: .88rem; color: var(--mute) }
@media(max-width:880px) { .about-stage { grid-template-columns: 1fr; gap: 36px } }
.rooms { display: flex; flex-direction: column }
.room { display: grid; grid-template-columns: 88px 1fr auto; gap: 24px; align-items: center; padding: 28px 8px; border-top: 1px solid var(--ink); cursor: pointer; transition: .35s }
.room:last-child { border-bottom: 1px solid var(--ink) }
.room:hover { background: var(--panel); padding-left: 18px }
.room .rn { font-family: var(--mono); font-size: .75rem; color: var(--brass) }
.room h3 { font-family: var(--display); font-size: clamp(1.6rem, 3vw, 2.6rem); margin: 0; line-height: 1 }
.room .meta { font-family: var(--mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--mute); text-align: right }
.room .go { opacity: 0; transform: translateX(-8px); transition: .3s; color: var(--red); font-size: 1.4rem }
.room:hover .go { opacity: 1; transform: none }
@media(max-width:640px) { .room { grid-template-columns: 60px 1fr } .room .meta { display: none } }
#featured { background: var(--ink); color: var(--bone) }
[data-theme="dark"] #featured { background: #0e0c0a }
.vitrine { border: 14px solid #2a241c; border-radius: 6px; background: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .02)), linear-gradient(90deg, rgba(255, 255, 255, .05), transparent 18%, transparent 82%, rgba(255, 255, 255, .05)), #1a1612; position: relative; overflow: hidden; box-shadow: inset 0 0 80px rgba(0, 0, 0, .45), 0 40px 80px rgba(0, 0, 0, .35) }
.vitrine:after { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .16) 46%, transparent 54%); pointer-events: none; animation: shine 7s ease-in-out infinite }
@keyframes shine { 0%, 100% { transform: translateX(-12%) } 50% { transform: translateX(12%) } }
.shelf { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; padding: 28px 24px 18px; align-items: end; position: relative; z-index: 1 }
.shelf+.shelf { border-top: 10px solid var(--wood); box-shadow: inset 0 8px 0 rgba(255, 255, 255, .08) }
.obj { text-align: center; cursor: pointer; transition: .35s }
.obj img { width: 100%; aspect-ratio: 1; object-fit: cover; border: 1px solid rgba(255, 255, 255, .12); background: #111; -webkit-box-reflect: below 6px linear-gradient(transparent 55%, rgba(0, 0, 0, .35)); transition: transform .4s }
.obj:hover { transform: translateY(-10px) }
.obj:hover img { transform: scale(1.04) }
.obj .cap { margin-top: 28px; font-family: var(--mono); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--brass) }
.obj h4 { font-family: var(--display); font-size: 1rem; color: #f7f1e4; margin: 6px 0 2px; line-height: 1.2 }
.obj .pr { font-family: var(--mono); color: #ead9a8; font-size: .8rem }
.cab-nav { display: flex; gap: 8px; justify-content: center; margin-top: 22px }
.cab-nav button { border: 1px solid rgba(247, 241, 228, .3); background: transparent; color: var(--bone); border-radius: 999px; padding: .45rem 1.1rem; font-family: var(--mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase }
.cab-nav button.on, .cab-nav button:hover { background: var(--brass); border-color: var(--brass); color: #1c1914 }
@media(max-width:720px) { .shelf { grid-template-columns: repeat(2, 1fr) } }
.exhibit { display: grid; grid-template-columns: 1fr 240px; gap: 48px; align-items: start }
.plate-grid { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 52px 36px }
.plate { break-inside: avoid }
.plate .frame { background: var(--panel); padding: 12px 12px 0; border: 1px solid var(--line); box-shadow: var(--shadow); transition: .35s }
.plate:hover .frame { transform: translateY(-8px); box-shadow: 0 30px 50px -28px rgba(28, 25, 20, .55) }
.plate img { width: 100%; aspect-ratio: 4/5; object-fit: cover; display: block; filter: saturate(.92) }
.plate:hover img { filter: none }
.plate figcaption { padding: 14px 4px 0 }
.plate .acc-n { font-family: var(--mono); font-size: .62rem; letter-spacing: .18em; color: var(--brass); margin-bottom: 4px }
.plate h3 { font-size: 1.25rem; margin: 0 0 4px; line-height: 1.15 }
.plate .row { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 10px; padding-bottom: 6px }
.plate .pr { font-family: var(--mono); font-weight: 600; color: var(--red) }
.plate .acts { display: flex; gap: 6px }
.sq { width: 36px; height: 36px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); border-radius: 50%; display: grid; place-items: center; transition: .2s }
.sq:hover { background: var(--ink); color: var(--bone); border-color: var(--ink) }
.sq.loved { background: var(--red); color: #fff; border-color: var(--red) }
.add { border: 1px solid var(--ink); background: var(--ink); color: var(--bone); border-radius: 999px; padding: .4rem .9rem; font-size: .75rem; font-weight: 700 }
.add:hover { background: var(--red); border-color: var(--red); color: #fff }
.index { position: sticky; top: 24px; background: var(--panel); border: 1px solid var(--line); padding: 22px 18px }
.index h5 { font-family: var(--mono); font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--brass); margin-bottom: 14px }
.index .search { display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--ink); padding-bottom: 8px; margin-bottom: 14px }
.index input, .index select { border: 0; background: transparent; outline: 0; width: 100%; color: var(--ink); font-family: var(--sans) }
.index select { border: 1px solid var(--line); padding: 8px; margin-bottom: 14px; width: 100%; color: var(--ink); background: var(--bone) }
.index button { display: block; width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px dotted var(--line); padding: 9px 0; font-size: .82rem; color: var(--mute) }
.index button:hover, .index button.on { color: var(--red) }
@media(max-width:980px) { .exhibit { grid-template-columns: 1fr } .index { position: relative; top: 0; margin-bottom: 28px } .plate-grid { grid-template-columns: 1fr 1fr; gap: 28px } }
@media(max-width:620px) { .plate-grid { grid-template-columns: 1fr } }
.panels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px }
.panel { background: var(--panel); border: 1px solid var(--line); padding: 28px 24px; position: relative; min-height: 220px; transition: .3s }
.panel:hover { transform: translateY(-6px); border-color: var(--brass) }
.panel .pn { position: absolute; top: 18px; right: 18px; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--brass); color: var(--brass); display: grid; place-items: center; font-family: var(--mono); font-size: .72rem }
.panel i { font-size: 1.5rem; color: var(--red) }
.panel h3 { font-size: 1.2rem; margin: 16px 0 8px }
.panel p { margin: 0; color: var(--mute); font-size: .9rem; line-height: 1.55 }
@media(max-width:800px) { .panels { grid-template-columns: 1fr } }
.faq-grid { display: grid; grid-template-columns: .7fr 1.3fr; gap: 56px }
.accordion-item { background: transparent; border: 0; border-top: 1px solid var(--line); border-radius: 0 !important }
.accordion-item:last-child { border-bottom: 1px solid var(--line) }
.accordion-button { background: transparent; color: var(--ink); font-family: var(--display); font-size: 1.25rem; box-shadow: none !important; padding: 1.2rem 0 }
.accordion-button:not(.collapsed) { color: var(--red) }
.accordion-button::after { filter: grayscale(1) }
[data-theme="dark"] .accordion-button::after { filter: invert(1) }
.accordion-body { color: var(--mute); padding: 0 0 1.2rem; line-height: 1.65 }
@media(max-width:800px) { .faq-grid { grid-template-columns: 1fr; gap: 24px } }
.invite { display: grid; grid-template-columns: .9fr 1.1fr; background: var(--panel); border: 1px solid var(--line) }
.invite-copy { padding: 48px 40px; background: var(--red); color: #fff }
.invite-copy h2 { color: #fff }
.invite-copy .acc { color: var(--brass-s) }
.invite-copy p { color: rgba(255, 255, 255, .85) }
.invite-form { padding: 48px 40px }
.form-control, .form-select { background: var(--bone); border: 1px solid var(--line); color: var(--ink); border-radius: 0; padding: .75rem 1rem }
.form-control:focus, .form-select:focus { background: var(--panel); color: var(--ink); border-color: var(--red); box-shadow: none }
@media(max-width:800px) { .invite { grid-template-columns: 1fr } }
.co-grid { display: grid; grid-template-columns: 1.35fr .65fr; gap: 24px }
.co-card { background: var(--panel); border: 1px solid var(--line); padding: 26px }
.co-line { display: grid; grid-template-columns: 64px 1fr auto; gap: 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line) }
.co-line img { width: 64px; height: 64px; object-fit: cover }
.qb { display: inline-flex; border: 1px solid var(--line) }
.qb button { width: 28px; border: 0; background: transparent; color: var(--ink) }
.qb button:hover { background: var(--red); color: #fff }
@media(max-width:820px) { .co-grid { grid-template-columns: 1fr } }
.ct-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 24px }
.ct-row { display: flex; gap: 14px; align-items: center; background: var(--panel); border: 1px solid var(--line); padding: 16px 18px; margin-bottom: 10px }
.ct-row .g { width: 44px; height: 44px; border-radius: 50%; background: var(--brass-s); color: var(--red); display: grid; place-items: center }
.ct-row b { display: block; font-family: var(--mono); font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; color: var(--brass) }
.mapbox { border: 1px solid var(--line); height: 210px; overflow: hidden; margin-top: 8px }
.mapbox iframe { width: 100%; height: 100%; border: 0; filter: grayscale(.5) sepia(.15) }
@media(max-width:820px) { .ct-grid { grid-template-columns: 1fr } }
footer.ft { background: var(--ink); color: var(--bone); padding: 5rem 0 8rem }
footer.ft a { color: rgba(247, 241, 228, .65); text-decoration: none; font-size: .9rem }
footer.ft a:hover { color: var(--brass) }
footer.ft h6 { font-family: var(--mono); font-size: .66rem; letter-spacing: .18em; text-transform: uppercase; color: var(--brass); margin-bottom: 14px }
.giant { font-family: var(--display); font-size: clamp(3.5rem, 6vw, 4rem); line-height: .85; color: transparent; -webkit-text-stroke: 1px rgba(247, 241, 228, .25) }
.offcanvas, .modal-content { background: var(--panel); color: var(--ink); border-radius: 0 }
.offcanvas { border-left: 1px solid var(--line) !important }
.modal-content { border: 1px solid var(--line) }
.rel-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px }
.rel-grid article { border: 1px solid var(--line); cursor: pointer; background: var(--bone); transition: .2s }
.rel-grid article:hover { transform: translateY(-4px); box-shadow: var(--shadow) }
.rel-grid img { width: 100%; aspect-ratio: 1; object-fit: cover }
.rel-grid .rt { padding: 8px; font-size: .75rem }
.rel-grid .rt b { display: block; line-height: 1.2 }
.rel-grid .rt span { font-family: var(--mono); color: var(--red); font-size: .7rem }
@media(max-width:760px) { .rel-grid { grid-template-columns: repeat(2, 1fr) } }
#notes { position: fixed; top: 18px; left: 50%; transform: translateX(-50%); z-index: 3000; display: flex; flex-direction: column; gap: 10px; width: min(380px, calc(100vw - 32px)) }
.note { background: var(--panel); border: 1px solid var(--ink); padding: 14px 16px; display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: start; box-shadow: var(--shadow); animation: nin .45s ease both; position: relative; overflow: hidden }
.note.out { animation: nout .3s forwards }
@keyframes nin { from { opacity: 0; transform: translateY(-16px) } to { opacity: 1 } }
@keyframes nout { to { opacity: 0; transform: translateY(-16px) } }
.note .ti { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--brass); color: var(--red); display: grid; place-items: center }
.note b { font-family: var(--display); display: block; font-size: 1.05rem }
.note p { margin: 2px 0 0; font-size: .78rem; color: var(--mute) }
.note i.bar { position: absolute; left: 0; bottom: 0; height: 2px; background: var(--brass); animation: bar 3.8s linear forwards }
@keyframes bar { from { width: 100% } to { width: 0 } }
#toTop { position: fixed; right: 18px; bottom: 92px; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: var(--ink); color: var(--bone); z-index: 900; opacity: 0; pointer-events: none; transition: .3s }
#toTop.on { opacity: 1; pointer-events: auto }