:root {
  color-scheme: light;
  --paper: #f7f1e7;
  --light: #fffbf3;
  --ink: #291e19;
  --body: #473a33;
  --muted: #68564b;
  --wine: #842438;
  --wine-dark: #61192a;
  --wine-deep: #4b1523;
  --blue: #315670;
  --blue-line: #7a93a4;
  --blue-wash: #dce8ee;
  --cream: #fff5e6;
  --gold: #efd8a1;
  --line: #dbcbba;
  --display: "Fraunces", Georgia, serif;
  --sans: "DM Sans", system-ui, sans-serif;
  --headline: clamp(3.6rem, 5.85vw, 5.95rem);
  --section-title: clamp(2.75rem, 4.7vw, 4.6rem);
  --card-title: clamp(1.65rem, 2.05vw, 2.12rem);
  --label: 0.81rem;
  --gutter: max(clamp(1.25rem, 5vw, 5.5rem), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
  --max-width: 82rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: calc(6.25rem + env(safe-area-inset-top, 0px)); }
body { margin: 0; background: var(--paper); color: var(--ink); font: 1rem/1.55 var(--sans); }
body, p, h1, h2, h3, figure, dl, dd { margin: 0; }
a { color: inherit; }
img { display: block; max-width: 100%; height: auto; }
address { font-style: normal; }
ul { padding: 0; margin: 0; list-style: none; }
::selection { background: var(--wine); color: var(--cream); }
:focus-visible { outline: 2px solid currentColor; outline-offset: 5px; }
[tabindex="-1"]:focus:not(:focus-visible) { outline: none; }
.container { width: min(var(--max-width), calc(100% - 2 * var(--gutter))); margin-inline: auto; }
.section-space { padding-block: clamp(4rem, 7.3vw, 7rem); }
.symbols { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.55; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
.skip-link { position: fixed; z-index: 5; top: .75rem; left: .75rem; transform: translateY(-160%); padding: .75rem 1rem; color: var(--cream); background: var(--wine-deep); }
.skip-link:focus { transform: none; }

h1, h2, h3 { font-family: var(--display); font-weight: 500; word-spacing: .045em; }
h1 { font-size: var(--headline); line-height: .99; letter-spacing: -.057em; }
h2 { font-size: var(--section-title); line-height: 1.03; letter-spacing: -.049em; }
h3 { font-size: var(--card-title); line-height: 1.14; letter-spacing: -.032em; }
h1 em, h2 em { color: var(--wine); font-weight: 500; }
.eyebrow, .micro {
  font: 700 var(--label)/1.4 var(--sans);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.eyebrow { display: flex; align-items: center; gap: .57rem; color: var(--wine); margin-bottom: 1.05rem; }
.eyebrow .icon { width: 1.15rem; height: 1.15rem; color: var(--blue); }
.section-intro { color: var(--body); max-width: 36rem; margin-top: 1rem; font-size: clamp(1.02rem, 1.3vw, 1.15rem); }
.muted { color: var(--muted); font-size: .93rem; }

.site-header { position: sticky; top: 0; z-index: 4; padding-top: env(safe-area-inset-top, 0px); background: var(--paper); border-bottom: 1px solid var(--line); }
.header-inner { min-height: 5.1rem; display: flex; align-items: center; justify-content: space-between; gap: 1.35rem; }
.wordmark { display: inline-flex; align-items: center; gap: .68rem; color: inherit; text-decoration: none; flex-shrink: 0; }
.wordmark strong { display: block; font: 600 1.66rem/.97 var(--display); letter-spacing: -.06em; }
.wordmark small { display: block; margin-top: .35rem; font-size: .63rem; font-weight: 700; letter-spacing: .16em; line-height: 1.25; text-transform: uppercase; }
.wordmark-mark, .seal-mark, .tour-mark { display: block; background: currentColor; mask: var(--cat-mark) center / contain no-repeat; }
.wordmark-mark { width: 2rem; height: 2.8rem; color: var(--wine); }
.desktop-nav, .header-actions { display: flex; align-items: center; gap: clamp(.75rem, 2.2vw, 2.25rem); }
.desktop-nav a, .header-shop, .language { font-size: .95rem; font-weight: 600; text-decoration: none; white-space: nowrap; }
.desktop-nav a, .header-shop { padding-block: .65rem; }
.desktop-nav a:hover, .header-shop:hover { color: var(--wine); text-decoration: underline; text-underline-offset: .33em; }
.header-actions { gap: clamp(.6rem, 1.4vw, 1.4rem); }
.header-ticket { display: flex; }
.header-shop { display: inline-flex; align-items: center; gap: .37rem; }
.language { display: grid; place-items: center; min-width: 2.55rem; min-height: 2.55rem; border: 1px solid var(--line); border-radius: 50%; font-size: .78rem; }
.language:hover { border-color: var(--blue); color: var(--blue); }
.mobile-menu { display: none; }

.button {
  min-height: 3.35rem; display: inline-flex; align-items: center; justify-content: center; gap: .65rem;
  padding: .68rem 1.2rem; border: 1px solid transparent; border-radius: .2rem; text-decoration: none;
  font-weight: 700; line-height: 1.2; transition: background-color .2s, color .2s, border-color .2s;
}
.button .icon { width: 1.22rem; height: 1.22rem; }
.button-primary { background: var(--wine); color: var(--light); }
.button-primary:hover { background: var(--wine-deep); }
.button-primary:focus-visible { outline-color: var(--wine); }
.button-small { min-height: 2.7rem; padding: .55rem .85rem; font-size: .88rem; }
.button-small .icon { width: .95rem; height: .95rem; }
.button-outline { border-color: currentColor; color: var(--ink); }
.button-outline:hover { background: var(--ink); color: var(--light); border-color: var(--ink); }
.text-link {
  width: fit-content; min-height: 2.75rem; display: inline-flex; align-items: center; gap: .45rem; color: var(--blue);
  text-decoration: underline; text-underline-offset: .28em; text-decoration-color: var(--blue-line); font-weight: 700;
}
.text-link .icon, .strip-link .icon { transition: transform .2s; }
.text-link:hover, .strip-link:hover { text-decoration-color: currentColor; }

.hero {
  display: grid; align-items: center; grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
  gap: clamp(2rem, 4.4vw, 4.6rem); padding-block: clamp(2.5rem, 3.3vw, 3.6rem) clamp(2rem, 2.7vw, 2.85rem);
}
.hero-content { padding-bottom: 1.7rem; }
.hero-intro { color: var(--body); max-width: 25rem; margin-top: 1.45rem; font-size: clamp(1.04rem, 1.45vw, 1.22rem); line-height: 1.55; }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem 1.35rem; margin-top: 1.65rem; }
.hero-figure { min-width: 0; position: relative; }
.hero-frame { position: relative; aspect-ratio: 1.23; overflow: hidden; background: #5c2d24; }
.hero-frame img { width: 100%; height: 100%; object-fit: cover; object-position: 48% center; }
.hero-frame::after { content: ""; position: absolute; inset: .62rem; border: 1px solid #fff1c978; pointer-events: none; }
.figure-caption { display: flex; align-items: center; gap: .65rem; margin-top: .78rem; color: var(--muted); font-size: .83rem; }
.figure-caption span { color: var(--blue); font-weight: 700; font-size: .72rem; letter-spacing: .11em; padding-right: .6rem; border-right: 1px solid var(--line); }
.hero-seal {
  display: grid; place-items: center; position: absolute; z-index: 1; right: clamp(-1.45rem, -1.7vw, -.72rem); bottom: 3.6rem;
  width: clamp(5.25rem, 8.9vw, 8.1rem); aspect-ratio: 1; border-radius: 50%; background: var(--blue-wash); color: var(--blue);
  transform: rotate(9deg); box-shadow: 0 .25rem .85rem #291e1933;
}
.hero-seal > svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: .8; }
.hero-seal text { fill: currentColor; stroke: none; font: 700 10px var(--sans); letter-spacing: 1.35px; text-anchor: middle; }
.hero-seal .seal-inner { stroke-dasharray: 1 2; }
.seal-mark { width: 31%; height: 43%; }
.mobile-hours { display: none; }

.visit-strip { color: var(--cream); background: var(--wine-dark); }
.visit-strip-inner { display: grid; grid-template-columns: 1fr 1.35fr auto; align-items: center; gap: clamp(1.1rem, 3.3vw, 3rem); min-height: 7rem; padding-block: 1.15rem; }
.glance-cell { display: flex; align-items: center; gap: 1rem; }
.glance-cell + .glance-cell { padding-left: clamp(1rem, 3.3vw, 3rem); border-left: 1px solid #fff3dc4a; }
.glance-icon { display: grid; flex: none; place-items: center; width: 2.9rem; height: 2.9rem; border-radius: 50%; color: var(--gold); border: 1px solid #f0d8a174; }
.glance-icon .icon { width: 1.35rem; height: 1.35rem; }
.glance-cell .micro { color: var(--gold); font-size: .72rem; }
.glance-value { font-size: clamp(.96rem, 1.6vw, 1.25rem); margin-top: .22rem; }
.strip-link { display: inline-flex; align-items: center; justify-content: center; gap: .65rem; min-height: 2.8rem; text-decoration: underline; text-underline-offset: .3em; text-decoration-color: #ecd5b684; font-weight: 700; }

.section-head { display: flex; align-items: end; justify-content: space-between; gap: 1rem 2.5rem; margin-bottom: 2.05rem; }
.section-head > .text-link { flex-shrink: 0; margin-bottom: .08rem; }
.art-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(.9rem, 2.3vw, 2rem); }
.art-card { display: flex; flex-direction: column; background: var(--light); text-decoration: none; border: 1px solid var(--line); transition: border-color .2s; }
.art-stage { position: relative; display: grid; place-items: center; aspect-ratio: 1.17; overflow: hidden; }
.art-stage img { width: auto; height: 71%; max-width: 77%; object-fit: contain; filter: drop-shadow(.22rem .45rem .45rem #30211845); transition: transform .25s; }
.art-meijer .art-stage { background: #e8d8ae; }
.art-bastet .art-stage { background: #e0c8c2; }
.art-sandoz .art-stage { background: var(--blue-wash); }
.art-sandoz .art-stage img { width: 75%; height: auto; max-height: 75%; }
.art-number { position: absolute; top: 1.03rem; left: 1rem; font-size: .76rem; font-weight: 700; letter-spacing: .12em; color: #514237; }
.art-card-body { padding: 1.12rem 1.25rem 1.3rem; display: flex; flex: 1; align-items: center; justify-content: space-between; gap: .45rem; }
.art-card-body .micro { color: var(--wine); letter-spacing: .115em; margin-bottom: .36rem; font-size: .73rem; }
.artist { color: var(--muted); font-size: .93rem; margin-top: .34rem; }
.round-arrow { width: 2.45rem; height: 2.45rem; flex: none; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--blue); transition: background-color .2s, color .2s, border-color .2s; }
.art-card:hover, .art-card:focus-visible { border-color: var(--blue); }
.art-card:hover .round-arrow, .art-card:focus-visible .round-arrow { background: var(--blue); border-color: var(--blue); color: var(--light); }

.museum { background: #eee3d4; padding-block: clamp(3rem, 6vw, 5.5rem); }
.museum-grid { display: grid; align-items: center; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: clamp(2rem, 7vw, 7rem); }
.museum-figure img { width: 100%; aspect-ratio: 1.44; object-fit: cover; object-position: center; }
.museum-copy h2 { max-width: 31rem; }
.museum-links { display: flex; flex-wrap: wrap; gap: .2rem 1.15rem; margin-top: .85rem; }

.visit-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1rem, 2.2vw, 2rem); margin-top: 2rem; }
.visit-card { background: var(--light); border: 1px solid var(--line); }
.visit-place > img { width: 100%; aspect-ratio: 2.3; object-fit: cover; }
.visit-place-info { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem 1.6rem; padding: clamp(1rem, 2.65vw, 2.25rem); }
.visit-place-info h3 { font: 700 .85rem/1.35 var(--sans); text-transform: uppercase; letter-spacing: .09em; color: var(--wine); margin-bottom: .6rem; }
.visit-place-info .text-link { font-size: .91rem; margin-top: .2rem; }
.visit-prices { padding: clamp(1rem, 2.65vw, 2.25rem); }
.visit-prices dl { margin-top: .75rem; }
.visit-prices dl > div { display: flex; gap: .75rem; justify-content: space-between; padding-block: .44rem; border-bottom: 1px solid var(--line); }
.visit-prices dd { flex-shrink: 0; font-weight: 700; }
.visit-prices .muted { margin: .68rem 0 .95rem; }
.guided-tour { display: flex; align-items: center; gap: .7rem 1.1rem; padding: 1.25rem clamp(.9rem, 2.5vw, 1.8rem); border: 1px solid var(--line); margin-top: clamp(.85rem, 2.2vw, 2rem); background: #f1e8d8; }
.guided-tour h3 { font-size: 1.43rem; margin-bottom: .25rem; }
.guided-tour p { color: var(--body); }
.guided-tour > .text-link { margin-left: auto; flex-shrink: 0; }
.tour-mark { width: 2rem; height: 2.6rem; color: var(--wine); flex: none; }

.shop { background: #eadab9; padding-block: clamp(3rem, 6.2vw, 5.7rem); }
.shop-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; gap: clamp(1.3rem, 5.5vw, 5rem); }
.shop-copy h2 { max-width: 32rem; }
.shop-copy .button { margin-top: 1.35rem; }
.shop-categories { display: flex; flex-wrap: wrap; gap: .25rem 1rem; margin-top: .85rem; }
.shop-categories a { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--wine-dark); font-weight: 700; font-size: .93rem; text-underline-offset: .24em; text-decoration-color: #947b67; }
.shop-categories a:hover { text-decoration-color: currentColor; }
.shop-figure { min-width: 0; aspect-ratio: 1.49; position: relative; isolation: isolate; }
.shop-poster, .shop-cards { position: absolute; border: .45rem solid #fff4df; box-shadow: .55rem .65rem 1.2rem #3b251944; }
.shop-poster { width: 40%; left: 15%; top: 1%; transform: rotate(-10deg); }
.shop-cards { width: 54%; right: 5%; bottom: 13%; transform: rotate(8deg); }
.shop-spark { position: absolute; right: 16%; top: 6%; color: var(--blue); width: 3.1rem; height: 3.1rem; }
.shop-figure .figure-caption { position: absolute; bottom: 0; right: 2%; }

.site-footer { background: var(--wine-deep); color: var(--cream); padding-top: clamp(2.6rem, 5vw, 4.6rem); }
.footer-grid { display: grid; grid-template-columns: 1.35fr .8fr 1.15fr .85fr; gap: 1.3rem 2rem; padding-bottom: 2.4rem; }
.site-footer .wordmark { margin-bottom: 1rem; }
.site-footer .wordmark-mark, .footer-grid .micro { color: var(--gold); }
.footer-grid .micro { margin-bottom: .6rem; }
.footer-grid a:not(.wordmark) { display: block; width: fit-content; padding-block: .18rem; text-decoration-color: #ecd5b684; text-underline-offset: .23em; }
.footer-grid a:not(.wordmark):hover { text-decoration-color: currentColor; }
.footer-support { font-size: .92rem; }
.footer-ticket { margin-top: .43rem; font-weight: 700; }
.footer-bottom { display: flex; flex-wrap: wrap; gap: .6rem 1.3rem; align-items: center; padding: 1.2rem 0 1.45rem; border-top: 1px solid #e4c8ab5e; font-size: .82rem; }
.footer-bottom a { text-decoration: none; }
.footer-bottom a:hover { text-decoration: underline; }
.back-top { margin-left: auto; }

@media (max-width: 990px) {
  .desktop-nav, .header-shop { display: none; }
  .mobile-menu { display: block; }
  .mobile-menu summary {
    list-style: none; display: grid; place-items: center; width: 2.7rem; height: 2.7rem;
    border: 1px solid var(--line); border-radius: .2rem; cursor: pointer; color: var(--wine-dark);
  }
  .mobile-menu summary::-webkit-details-marker { display: none; }
  .mobile-menu summary .menu-close, .mobile-menu[open] summary .menu-open { display: none; }
  .mobile-menu[open] summary .menu-close { display: block; }
  .mobile-nav {
    position: absolute; right: var(--gutter); top: calc(100% + .38rem); z-index: 1; display: grid;
    width: min(22rem, calc(100% - 2 * var(--gutter))); background: var(--light); box-shadow: 0 .45rem 1.25rem #291e1928;
    border: 1px solid var(--line); padding-inline: .9rem;
  }
  .mobile-nav a { min-height: 2.85rem; padding: .6rem .25rem; display: flex; align-items: center; justify-content: space-between; text-decoration: none; font-weight: 700; color: var(--wine-dark); }
  .mobile-nav a + a { border-top: 1px solid var(--line); }
  .mobile-nav a:hover { text-decoration: underline; }
  .hero { gap: 1.65rem; }
  .hero h1 { font-size: clamp(2.75rem, 6.33vw, 4.5rem); }
  .hero-frame { aspect-ratio: .92; }
  .hero-seal { bottom: 3.2rem; }
  .visit-strip-inner { gap: 1.1rem; }
  .glance-cell { gap: .65rem; }
  .glance-cell + .glance-cell { padding-left: 1.1rem; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px), (max-width: 990px) and (max-height: 520px) and (pointer: coarse) {
  html {
    --ticket-button-height: 3.25rem;
    --ticket-bar-padding: .7rem;
    --ticket-bar-safe-area: env(safe-area-inset-bottom, 0px);
    --ticket-bar-height: calc(var(--ticket-button-height) + 2 * var(--ticket-bar-padding) + var(--ticket-bar-safe-area) + 1px);
    scroll-padding-bottom: calc(var(--ticket-bar-height) + .5rem);
  }
  body { padding-bottom: var(--ticket-bar-height); }
  .header-ticket {
    position: fixed;
    inset: auto 0 0;
    z-index: 2;
    padding: var(--ticket-bar-padding) var(--gutter) calc(var(--ticket-bar-padding) + var(--ticket-bar-safe-area));
    border-top: 1px solid var(--line);
    background: var(--paper);
    box-shadow: 0 -.2rem 1rem #291e191a;
  }
  .header-ticket .button { width: 100%; min-height: var(--ticket-button-height); font-size: 1rem; }
  .hero-actions .button-primary { display: none; }
  .mobile-nav {
    max-height: calc(100dvh - var(--ticket-bar-height) - 5.75rem - env(safe-area-inset-top, 0px));
    overflow-y: auto;
  }
}
@media (max-width: 720px) {
  html { scroll-padding-top: calc(5rem + env(safe-area-inset-top, 0px)); }
  .header-inner { min-height: 4.35rem; }
  .hero { grid-template-columns: minmax(0, 1fr); gap: 1.45rem; padding-block: 2.35rem 1.65rem; }
  .hero-content { padding: 0; }
  .hero h1 { font-size: clamp(2.75rem, 12.4vw, 4.9rem); }
  .hero-intro { margin-top: 1.03rem; }
  .hero-actions { margin-top: 1.15rem; }
  .hero-frame { aspect-ratio: 1.2; }
  .hero-seal { right: -.55rem; bottom: 2.85rem; }
  .eyebrow { margin-bottom: .8rem; }
  .mobile-hours { display: flex; align-items: center; gap: .43rem; margin-top: .95rem; color: var(--muted); font-size: .92rem; }
  .visit-strip-inner { grid-template-columns: 1fr auto; min-height: 5.6rem; }
  .glance-cell:first-child { display: none; }
  .glance-cell + .glance-cell { border-left: 0; padding-left: 0; }
  .glance-icon { width: 2.35rem; height: 2.35rem; }
  .strip-link { font-size: .88rem; }
  .section-head { flex-direction: column; align-items: start; gap: .55rem; margin-bottom: 1.25rem; }
  .art-grid { grid-template-columns: minmax(0, 1fr); gap: .9rem; }
  .art-card { display: grid; grid-template-columns: 43% minmax(0, 1fr); }
  .art-stage { aspect-ratio: 1.04; min-height: 8rem; }
  .art-number { top: .55rem; left: .55rem; }
  .art-card-body { padding: .7rem; }
  .art-card h3 { font-size: clamp(1.26rem, 4.8vw, 1.85rem); }
  .art-card-body .artist { font-size: .84rem; }
  .art-card-body .micro { font-size: .67rem; }
  .round-arrow { width: 1.8rem; height: 1.8rem; font-size: .78rem; }
  .museum-grid, .visit-grid, .shop-grid { grid-template-columns: minmax(0, 1fr); }
  .museum-grid { gap: 1.4rem; }
  .museum-copy { grid-row: 1; }
  .visit-grid { margin-top: 1.25rem; }
  .guided-tour { display: grid; grid-template-columns: auto minmax(0, 1fr); }
  .guided-tour > .text-link { grid-column: 2; margin: 0; }
  .shop-figure { width: min(100%, 31rem); margin-inline: auto; }
}
@media (max-width: 460px) {
  .header-inner { gap: .42rem; }
  .wordmark { gap: .38rem; }
  .site-header .wordmark strong { font-size: 1.25rem; }
  .site-header .wordmark small { font-size: .49rem; letter-spacing: .12em; }
  .site-header .wordmark-mark { width: 1.55rem; height: 2.25rem; }
  .header-actions { gap: .4rem; }
  .header-actions > .language { display: none; }
  .mobile-menu summary { width: 2.5rem; }
  .glance-cell { gap: .46rem; }
  .glance-value { font-size: .91rem; }
  .visit-strip-inner { grid-template-columns: 1fr; gap: .35rem; }
  .strip-link { margin-left: 2.8rem; justify-content: flex-start; min-height: 2rem; }
  .visit-place-info { gap: .7rem; }
  .footer-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.25rem .75rem; }
  .footer-grid > :first-child { grid-column: 1 / -1; }
  .footer-grid a { overflow-wrap: anywhere; }
  .back-top { margin-left: 0; }
}
@media (prefers-reduced-motion: no-preference) {
  .hero-frame, .mast-figure, .detail-mat, .media-arrived {
    animation: media-arrive .55s ease-out;
  }

  .round-arrow .icon { transition: translate .2s ease-out; }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .text-link:hover .icon, .strip-link:hover .icon { transform: translateX(.17rem); }
  .hero-actions .text-link:hover .icon { transform: translateY(.17rem); }
  .art-card:hover img { transform: scale(1.035); }
  :is(.art-card, .browse-card):hover .round-arrow .icon { translate: 2px 0; }
}
@keyframes media-arrive {
  from { opacity: .84; translate: 0 5px; }
  to { opacity: 1; translate: 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}