@font-face {
  font-family: Inter;
  src: url("./assets/fonts/inter-latin-variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --paper: #fffdf7;
  --cream: #f5ecdd;
  --ink: #171711;
  --muted: #686357;
  --line: rgba(23, 23, 17, .19);
  --gold: #d8a43b;
  --gold-hover: #e6b34b;
  --focus: #8d5900;
  --footer: #171711;
  --footer-text: #fffdf7;
  --footer-muted: #bcb6a9;
  --font-body: Inter, Arial, sans-serif;
  --font-display: Inter, Arial, sans-serif;
  --text-xs: .75rem;
  --text-sm: .875rem;
  --text-base: 1rem;
  --text-lg: clamp(1.125rem, 1rem + .4vw, 1.375rem);
  --text-section: clamp(1.65rem, 1.3rem + 1.2vw, 2.5rem);
  --text-price: clamp(2.5rem, 2rem + 1vw, 3rem);
  --text-display: clamp(4rem, 1.5rem + 5.5vw, 7.25rem);
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 20px;
  --s6: 24px;
  --s8: 32px;
  --s10: 40px;
  --s12: 48px;
  --s16: 64px;
  --s20: 80px;
  --radius: 6px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #171711;
    --cream: #25241d;
    --ink: #fffdf7;
    --muted: #bcb6a9;
    --line: rgba(255, 253, 247, .2);
    --focus: #e6b34b;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #171711;
  --cream: #25241d;
  --ink: #fffdf7;
  --muted: #bcb6a9;
  --line: rgba(255, 253, 247, .2);
  --focus: #e6b34b;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--s6); }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
body.dialog-open { overflow: hidden; }
button, input { font: inherit; color: inherit; }
button, summary, a { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, p, figure { margin: 0; }
h1, h2 { font-family: var(--font-display); text-wrap: balance; }
[hidden] { display: none !important; }
::selection { background: var(--gold); color: #171711; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 5px; }
.container { width: min(1200px, calc(100% - 96px)); margin-inline: auto; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; top: var(--s3); left: var(--s3); z-index: 100;
  padding: var(--s3) var(--s5); background: var(--gold); color: #171711;
  transform: translateY(-200%); font-weight: 700; border-radius: var(--radius);
}
.skip-link:focus { transform: translateY(0); }
.eyebrow { font-size: var(--text-xs); font-weight: 650; text-transform: uppercase; letter-spacing: .085em; }
.site-header { border-bottom: 1px solid var(--line); }
.header-inner { min-height: 96px; display: flex; align-items: center; justify-content: space-between; gap: var(--s8); }
.brand { display: inline-flex; align-items: center; gap: var(--s3); flex-shrink: 0; }
.brand img { width: 56px; height: 56px; border-radius: 50%; object-fit: contain; }
.brand-name { font-size: var(--text-xs); font-weight: 600; letter-spacing: .065em; line-height: 1.2; }
.brand-name strong { display: block; font-weight: 900; font-size: 1.65rem; letter-spacing: -.04em; line-height: 1.05; }
.main-nav { display: flex; gap: var(--s8); margin-left: auto; margin-right: var(--s6); font-size: var(--text-sm); font-weight: 550; }
.main-nav a, .header-contact { min-height: 44px; display: inline-flex; align-items: center; gap: var(--s3); }
.main-nav a, .source-link, .footer-bottom a { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 5px; transition: text-decoration-color .18s; }
.main-nav a:hover, .source-link:hover, .footer-bottom a:hover { text-decoration-color: currentColor; }
.header-actions { display: flex; align-items: center; gap: var(--s6); }
.header-contact { font-size: var(--text-sm); font-weight: 750; }
.header-contact:hover { color: var(--muted); }
.theme-toggle { background: transparent; border: 0; padding: var(--s2); min-height: 44px; min-width: 44px; display: flex; align-items: center; gap: var(--s2); border-radius: var(--radius); }
.theme-toggle:hover { background: var(--cream); }
.theme-symbol { font-size: 1.4rem; line-height: 1; }
.theme-label { font-size: var(--text-xs); }

.hero { display: grid; grid-template-columns: 1.05fr 1fr; gap: var(--s16); align-items: center; padding-block: var(--s10) var(--s12); }
.hero-copy { min-width: 0; }
.hero h1 { font-size: var(--text-lg); font-weight: 550; line-height: 1.35; letter-spacing: -.025em; }
.hero-display { font-size: var(--text-display); font-weight: 900; letter-spacing: -.06em; line-height: .95; margin-block: var(--s5) var(--s6); padding-bottom: var(--s1); }
.hero-display span { color: var(--gold); }
.hero-description { max-width: 34ch; font-size: var(--text-base); line-height: 1.6; }
.hero-offer { margin-top: var(--s6); margin-bottom: var(--s5); }
.price { display: flex; align-items: baseline; flex-wrap: wrap; column-gap: var(--s3); line-height: 1.2; }
.price strong { font-size: var(--text-price); letter-spacing: -.065em; font-weight: 800; }
.price > span { font-size: var(--text-sm); white-space: nowrap; font-weight: 550; }
.price-divider { margin-inline: var(--s1); color: var(--muted); }
.offer-note { display: flex; align-items: center; flex-wrap: wrap; gap: 0 var(--s3); font-size: var(--text-xs); color: var(--muted); }
.offer-note a { display: inline-flex; align-items: center; min-height: 44px; gap: var(--s1); text-decoration: underline; text-underline-offset: 3px; }
.offer-note a:hover { color: var(--ink); }
.button { min-height: 56px; display: inline-flex; align-items: center; justify-content: space-between; gap: var(--s8); padding: var(--s4) var(--s6); font-size: var(--text-sm); font-weight: 750; line-height: 1.3; border-radius: var(--radius); border: 1px solid transparent; transition: background .18s, transform .18s; }
.button-gold { background: var(--gold); color: #171711; }
.button-gold:hover { background: var(--gold-hover); transform: translateY(-2px); }
.button-gold:active { transform: translateY(0); }
.arrow { font-size: var(--text-lg); line-height: 1; transition: transform .18s; }
.button:hover .arrow { transform: translate(2px, -2px); }
.hero-note { margin-top: var(--s3); color: var(--muted); font-size: var(--text-xs); line-height: 1.6; }
.source-link { display: inline-flex; align-items: center; gap: var(--s2); min-height: 44px; font-size: var(--text-xs); color: var(--muted); }
.hero-photo { min-width: 0; width: 100%; max-width: 468px; justify-self: end; }
.photo-link { display: block; position: relative; background: #171711; border-radius: var(--radius); overflow: hidden; }
.photo-link picture { display: block; }
.photo-link img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: contain; transition: filter .25s; }
.photo-link:hover img { filter: brightness(1.06); }
.photo-expand { position: absolute; right: var(--s3); bottom: var(--s3); display: flex; align-items: center; gap: var(--s2); min-height: 44px; padding: var(--s2) var(--s3); background: #fffdf7; color: #171711; border-radius: var(--radius); font-size: var(--text-xs); font-weight: 650; }
.photo-expand > span { font-size: var(--text-lg); line-height: 1; }
figcaption { display: flex; justify-content: space-between; gap: var(--s3); padding-block: var(--s3) 0; color: var(--muted); font-size: var(--text-xs); letter-spacing: .045em; font-weight: 550; }

.event-section { padding-block: var(--s16); background: var(--cream); }
.event-grid { display: grid; grid-template-columns: .8fr 1.2fr; align-items: center; gap: var(--s20); }
.second-photo { width: min(100%, 296px); justify-self: center; }
.event-copy { min-width: 0; }
.event-copy .eyebrow, .faq-heading .eyebrow { color: var(--muted); margin-bottom: var(--s4); }
.event-copy h2, .faq-heading h2 { font-size: var(--text-section); font-weight: 850; line-height: 1.1; letter-spacing: -.055em; }
.event-intro { margin-top: var(--s5); font-weight: 550; }
.space-note { color: var(--muted); font-size: var(--text-sm); line-height: 1.65; max-width: 56ch; margin-top: var(--s2); }
.quote-details { margin-top: var(--s2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
summary { cursor: pointer; list-style: none; }
summary::-webkit-details-marker { display: none; }
.quote-details summary { display: flex; align-items: center; gap: var(--s2); min-height: 56px; padding-block: var(--s3); font-size: var(--text-sm); font-weight: 650; }
.optional { color: var(--muted); font-weight: 400; }
.disclosure { font-size: var(--text-lg); font-weight: 400; line-height: 1; margin-left: auto; flex-shrink: 0; transition: transform .2s; }
details[open] > summary .disclosure { transform: rotate(45deg); }
.quote-fields { min-width: 0; padding: 0 0 var(--s5); margin: 0; border: 0; display: grid; grid-template-columns: .85fr 1.15fr; gap: var(--s3) var(--s4); }
.field { min-width: 0; }
.field label { display: block; font-size: var(--text-xs); font-weight: 650; margin-bottom: var(--s2); }
.field input { display: block; width: 100%; max-width: 100%; min-width: 0; height: 48px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s3); font-size: var(--text-base); line-height: 1.3; }
.field input::placeholder { color: var(--muted); opacity: 1; }
#quote-help { grid-column: 1 / -1; font-size: var(--text-xs); color: var(--muted); }
.event-action { margin-top: var(--s5); }
.quote-status:empty { display: none; }
.quote-status { font-size: var(--text-xs); margin-top: var(--s2); color: var(--muted); }
.confirmation-note { font-size: var(--text-xs); line-height: 1.65; color: var(--muted); margin-top: var(--s3); max-width: 56ch; }

.faq-section { display: grid; grid-template-columns: .9fr 1.1fr; gap: var(--s16); padding-block: var(--s16); }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list details:first-child { border-top: 1px solid var(--line); }
.faq-list summary { display: flex; align-items: center; gap: var(--s5); min-height: 64px; padding-block: var(--s4); font-size: var(--text-sm); font-weight: 650; }
.faq-answer { padding: 0 var(--s8) var(--s3) 0; font-size: var(--text-sm); color: var(--muted); line-height: 1.65; }
details[open] .faq-answer, details[open] .quote-fields { animation: soft-in .2s ease; }
@keyframes soft-in { from { opacity: .5; transform: translateY(-3px); } to { opacity: 1; transform: translateY(0); } }

.site-footer { background: var(--footer); color: var(--footer-text); }
.footer-main { display: flex; align-items: center; justify-content: space-between; gap: var(--s8); padding-block: var(--s8); }
.footer-brand img { width: 48px; height: 48px; }
.footer-main p { font-size: var(--text-sm); }
.footer-main p span { color: var(--footer-muted); font-size: var(--text-xs); }
.footer-phone { display: inline-flex; align-items: center; gap: var(--s6); min-height: 44px; font-size: var(--text-lg); font-weight: 700; letter-spacing: -.035em; }
.footer-phone:hover { color: var(--gold); }
.footer-bottom { display: flex; align-items: center; gap: var(--s8); padding-block: var(--s3) var(--s5); border-top: 1px solid rgba(255, 253, 247, .2); font-size: var(--text-xs); color: var(--footer-muted); }
.footer-bottom a { display: inline-flex; align-items: center; gap: var(--s2); min-height: 44px; }
.footer-bottom nav { margin-left: auto; display: flex; gap: var(--s6); }
.site-footer :focus-visible { outline-color: var(--gold); }
.mobile-dock { display: none; }

.gallery-dialog { padding: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); color: var(--ink); width: min(720px, calc(100vw - 48px)); max-width: none; max-height: calc(100dvh - 40px); overflow: auto; }
.gallery-dialog::backdrop { background: rgba(12, 12, 8, .82); }
.gallery-dialog[open] { animation: soft-in .2s ease; }
.gallery-header { display: flex; align-items: center; justify-content: space-between; padding: var(--s2) var(--s5); gap: var(--s4); }
.gallery-header h2 { font-size: var(--text-xs); letter-spacing: .04em; font-weight: 650; }
.gallery-close { display: inline-flex; align-items: center; gap: var(--s3); min-height: 44px; padding: var(--s2); background: transparent; border: 0; border-radius: var(--radius); font-size: var(--text-sm); }
.gallery-close span { font-size: var(--text-lg); }
.gallery-close:hover { background: var(--cream); }
.gallery-stage { background: #171711; display: grid; place-items: center; padding: 0 var(--s4); }
.gallery-stage img { width: 100%; height: min(68dvh, 680px); object-fit: contain; }
.gallery-controls { display: flex; align-items: center; justify-content: space-between; padding: var(--s2) var(--s5); gap: var(--s4); }
.gallery-arrow, .gallery-selectors button { min-width: 44px; min-height: 44px; background: transparent; color: var(--ink); border: 1px solid transparent; border-radius: var(--radius); padding: var(--s2); }
.gallery-arrow { font-size: var(--text-lg); }
.gallery-selectors { display: flex; gap: var(--s2); }
.gallery-selectors button { font-size: var(--text-xs); font-weight: 650; }
.gallery-selectors button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.gallery-arrow:hover, .gallery-selectors button:not([aria-pressed="true"]):hover { border-color: var(--line); }

.error-page { min-height: 100svh; display: grid; place-items: center; padding: var(--s8); }
.error-content { max-width: 600px; }
.error-content .brand { margin-bottom: var(--s12); }
.error-content .eyebrow { color: var(--muted); }
.error-content h1 { font-size: var(--text-section); font-weight: 850; line-height: 1.1; letter-spacing: -.05em; margin-block: var(--s4); }
.error-content p { margin-bottom: var(--s6); }
.error-links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s4) var(--s6); }

@media (min-width: 1100px) and (max-height: 820px) {
  .hero { padding-block: var(--s8); }
  .hero-photo { max-width: min(440px, calc((100svh - 170px) * .75)); }
  .hero-display { font-size: clamp(4rem, 1rem + 4.5vw, 5.5rem); }
}
@media (max-width: 1050px) {
  .container { width: calc(100% - 64px); }
  .hero { gap: var(--s10); }
  .main-nav { margin-right: 0; gap: var(--s5); }
  .theme-label { display: none; }
  .header-actions { gap: var(--s3); }
  .event-grid { gap: var(--s12); }
  .faq-section { gap: var(--s10); }
}
@media (max-width: 760px) {
  .container { width: calc(100% - 40px); }
  .header-inner { min-height: 76px; gap: var(--s3); }
  .brand { gap: var(--s2); }
  .brand img { width: 44px; height: 44px; }
  .brand-name { font-size: .75rem; }
  .brand-name strong { font-size: 1.375rem; }
  .main-nav { display: none; }
  .header-actions { gap: var(--s1); }
  .header-contact { font-size: var(--text-xs); gap: var(--s1); }
  .hero { grid-template-columns: 1fr; gap: var(--s6); padding-block: var(--s6) var(--s8); }
  .hero-copy { padding: 0; }
  .hero h1 { font-size: 1.125rem; line-height: 1.3; }
  .hero h1 br { display: none; }
  .hero-display { font-size: clamp(2.375rem, .5rem + 9.5vw, 4.75rem); letter-spacing: -.05em; margin-block: var(--s4) var(--s3); white-space: nowrap; line-height: 1.05; }
  .desktop-break { display: none; }
  .hero-description { max-width: 38ch; font-size: var(--text-sm); line-height: 1.55; }
  .hero-offer { margin-top: var(--s4); margin-bottom: var(--s4); }
  .price strong { font-size: 2.5rem; }
  .offer-note { margin-top: var(--s1); }
  .hero-copy > .button { width: 100%; }
  .hero-note { margin-top: var(--s2); }
  .hero-note br { display: none; }
  .hero-copy > .source-link { min-height: 44px; }
  .hero-photo { max-width: 420px; justify-self: center; }
  .event-section { padding-block: var(--s10); }
  .event-grid { grid-template-columns: 1fr; gap: var(--s8); }
  .second-photo { width: min(68%, 264px); justify-self: start; }
  .event-copy .eyebrow { margin-bottom: var(--s3); }
  .event-copy h2, .faq-heading h2 { font-size: 1.8rem; }
  .event-intro { margin-top: var(--s4); }
  .event-action .button { width: 100%; }
  .faq-section { grid-template-columns: 1fr; gap: var(--s6); padding-block: var(--s10); }
  .faq-heading .eyebrow { margin-bottom: var(--s3); }
  .footer-main { display: grid; grid-template-columns: 1fr; gap: var(--s5); padding-block: var(--s8) var(--s5); }
  .footer-main p { display: none; }
  .footer-phone { justify-content: space-between; }
  .footer-bottom { display: grid; grid-template-columns: 1fr; gap: 0; padding-block: var(--s3) var(--s6); }
  .footer-bottom nav { margin-left: 0; margin-top: var(--s2); gap: var(--s6); }
  .site-footer { padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px)); }
  .mobile-dock { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); position: fixed; bottom: 0; left: 0; right: 0; z-index: 20; background: var(--paper); border-top: 1px solid var(--line); padding: var(--s3) var(--s5) calc(var(--s3) + env(safe-area-inset-bottom, 0px)); }
  .dock-price { display: grid; line-height: 1.35; }
  .dock-price strong { font-size: 1.25rem; letter-spacing: -.035em; font-weight: 800; }
  .dock-price small { font-size: var(--text-xs); font-weight: 550; }
  .dock-price > span { font-size: var(--text-xs); color: var(--muted); }
  .mobile-dock .button { min-height: 48px; gap: var(--s6); padding: var(--s3) var(--s5); }
  .gallery-dialog { width: calc(100vw - 24px); max-height: calc(100dvh - 24px); }
  .gallery-header, .gallery-controls { padding-inline: var(--s3); }
  .gallery-stage { padding: 0; }
  .gallery-stage img { height: calc(100dvh - 164px); max-height: 680px; }
}
@media (max-width: 359px) {
  .container { width: calc(100% - 32px); }
  .header-contact { display: none; }
  .hero-display { font-size: 2.375rem; }
  .quote-fields { grid-template-columns: 1fr; }
  .quote-details summary { flex-wrap: wrap; }
  .quote-details .disclosure { margin-left: auto; }
  .mobile-dock { padding-inline: var(--s4); }
  .mobile-dock .button { gap: var(--s3); padding-inline: var(--s4); }
}
@media (max-height: 480px) { .mobile-dock { display: none; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}