:root {
  color-scheme: dark;
  --ink: #100e0c;
  --panel: #17130f;
  --cream: #f5ead8;
  --muted: #c6b8a5;
  --gold: #d9b77a;
  --line: #80644766;
  --serif: Georgia, "Times New Roman", serif;
  --sans: system-ui, -apple-system, "Segoe UI", sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: 1rem; }
body { margin: 0; background: var(--ink); color: var(--cream); font: 1rem/1.6 var(--sans); }
img { display: block; max-width: 100%; }
a { color: inherit; }
a:focus-visible { outline: 2px solid #fce2ac; outline-offset: 4px; }
h1, h2, h3, p, figure, dl, dd { margin: 0; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; }
em { color: var(--gold); font-weight: 400; }
.wrap { width: min(1200px, 100% - clamp(2.5rem, 10vw, 10rem)); margin-inline: auto; }
.svg-library { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { flex: none; }
.skip { position: absolute; top: 1rem; left: 1rem; z-index: 4; padding: .65rem 1rem; background: var(--gold); color: var(--ink); transform: translateY(-200%); }
.skip:focus { transform: none; }
.site-header { position: relative; z-index: 1; border-bottom: 1px solid var(--line); }
.header-inner { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.brand { display: inline-flex; align-items: center; gap: .65rem; font: 400 1rem/1.2 var(--serif); letter-spacing: .15em; text-decoration: none; }
.brand b { color: var(--gold); font-weight: 400; }
.brand-mark { width: 52px; height: 52px; flex: none; border-radius: 50%; }
.nav { display: flex; gap: 2rem; align-items: center; }
.nav a, .header-cta { color: var(--muted); font-size: .83rem; text-decoration: none; }
.nav a { padding-block: .7rem; }
.nav a:hover { color: var(--cream); text-decoration: underline; text-underline-offset: .3em; }
.header-cta { display: inline-flex; align-items: center; gap: .55rem; padding: .45rem .7rem .45rem .9rem; border: 1px solid var(--line); color: var(--gold); white-space: nowrap; }
.header-cta:hover { border-color: var(--gold); }
.header-cta .icon { width: 18px; }
.hero { position: relative; isolation: isolate; overflow: hidden; }
.hero-art { position: absolute; inset: 0 0 0 47%; z-index: -1; display: grid; align-items: center; }
.hero-art picture { display: block; position: relative; }
.hero-art img { width: 100%; height: auto; }
.hero-art picture::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--ink), transparent 10%), linear-gradient(0deg, var(--ink), transparent 8% 97%, var(--ink)); pointer-events: none; }
.hero-inner { min-height: clamp(625px, 50vw, 770px); display: flex; align-items: center; padding-block: clamp(3rem, 5vw, 5rem); }
.hero-copy { width: min(46%, 575px); }
.kicker { color: var(--gold); font-size: .7rem; font-weight: 700; letter-spacing: .22em; line-height: 1.5; display: flex; gap: .75rem; align-items: center; }
.kicker span { display: inline-block; height: 1px; width: 25px; background: var(--gold); flex: none; }
h1 { margin-top: 1.3rem; font-size: clamp(2.8rem, 5.1vw, 5.15rem); line-height: .99; letter-spacing: -.057em; }
h1 em { display: block; margin-top: .65rem; font-size: .71em; line-height: 1.07; letter-spacing: -.048em; }
.hero-selection { width: fit-content; margin-top: 1.35rem; padding-top: .65rem; border-top: 1px solid var(--line); }
.hero-selection p { color: var(--gold); font-size: .67rem; font-weight: 700; letter-spacing: .17em; text-transform: uppercase; }
.hero-selection ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.2rem; margin: .3rem 0 0; padding: 0; list-style: none; }
.hero-selection a { display: inline-flex; align-items: center; min-height: 26px; color: var(--cream); font: 1.03rem/1.2 var(--serif); text-decoration-color: var(--line); text-underline-offset: .18em; }
.hero-selection a:hover { color: var(--gold); text-decoration-color: currentColor; }
.hero-description { margin: .85rem 0 1.2rem; max-width: 45ch; color: var(--muted); }
.cta { display: inline-flex; align-items: center; justify-content: center; gap: .7rem; min-height: 54px; padding: .8rem 1rem; max-width: 100%; background: #dfbc7f; color: #181008; text-decoration: none; font-size: .72rem; font-weight: 800; letter-spacing: .065em; line-height: 1.35; }
.cta:hover { background: #f3d39b; }
.cta .icon { width: 21px; height: 21px; }
.cta .cta-arrow { width: 18px; height: 18px; margin-inline-start: .35rem; }
.micro { margin-top: .7rem; color: var(--muted); font-size: .77rem; }
.micro span { margin-inline: .17rem; color: var(--gold); }
.edition { border-block: 1px solid var(--line); background: #17120e; }
.edition .wrap { display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 54px; color: var(--muted); font-size: .63rem; font-weight: 650; letter-spacing: .2em; }
.edition i { color: var(--gold); font-style: normal; margin-inline: .45rem; }
.showcase { padding-block: clamp(4rem, 8vw, 8rem); }
.section-head { display: grid; grid-template-columns: 1.3fr 1fr; align-items: end; gap: 1.5rem; margin-bottom: 2rem; }
h2 { margin-top: .85rem; font-size: clamp(2.45rem, 5.4vw, 5rem); letter-spacing: -.06em; line-height: 1.02; }
.section-head > p, .club-inner > div > p:last-child, .final h2 + p { color: var(--muted); max-width: 40ch; }
.section-head > p { justify-self: end; }
.scent-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2.6vw, 2rem); }
.scent { border: 1px solid var(--line); background: var(--panel); }
.scent-art { position: relative; aspect-ratio: 2 / 1; overflow: hidden; background: #2a1c13; border-bottom: 1px solid var(--line); }
.scent-art img { width: 100%; height: 100%; object-fit: cover; }
.scent-art span { position: absolute; top: 1rem; left: 1rem; padding: .33rem .55rem; background: var(--ink); border: 1px solid var(--line); color: var(--gold); font-size: .63rem; font-weight: 700; letter-spacing: .16em; }
.scent-info { padding: clamp(1.15rem, 3vw, 1.9rem); }
.scent-info h3 { font-size: clamp(1.5rem, 2.5vw, 2.12rem); line-height: 1.1; }
.scent-info dl > div { border-top: 1px solid var(--line); padding-top: .65rem; margin-top: .75rem; }
.scent-info dl > div:target { border-top-color: var(--gold); }
.scent-info dt { color: var(--cream); font-size: .94rem; font-weight: 650; }
.scent-info small { color: var(--gold); font-size: .65rem; font-weight: 650; letter-spacing: .11em; text-transform: uppercase; margin-left: .35rem; }
.scent-info dd, .showcase-note { color: var(--muted); font-size: .82rem; }
.showcase-note { margin-top: .85rem; }
.club { background: #191410; border-block: 1px solid var(--line); }
.club-inner { display: grid; grid-template-columns: .9fr 1fr; gap: clamp(2rem, 8vw, 7.5rem); padding-block: clamp(4rem, 8vw, 7rem); }
.club-inner h2 { max-width: 11ch; }
.club-inner > div > p:last-child { margin-top: 1rem; }
.benefits { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.benefits li { display: flex; gap: 1.1rem; align-items: baseline; border-bottom: 1px solid var(--line); padding: .85rem 0 1rem; }
.benefits li > span { color: var(--gold); font-size: .68rem; font-weight: 700; letter-spacing: .12em; }
.benefits h3 { font-size: 1.45rem; line-height: 1.2; }
.benefits p { color: var(--muted); font-size: .89rem; margin-top: .35rem; }
.final { text-align: center; background: radial-gradient(ellipse at 50% 12%, #2a1e13, var(--ink) 68%); padding-block: clamp(4rem, 9vw, 8rem); }
.final-mark { width: 84px; height: 84px; margin: 0 auto .75rem; border-radius: 50%; }
.final .kicker { justify-content: center; }
.final h2 { max-width: 17ch; margin-inline: auto; }
.final h2 + p { margin: 1rem auto 1.65rem; }
.footer { border-top: 1px solid var(--line); }
.footer-inner { min-height: 77px; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-block: 1rem; }
.footer p { color: var(--muted); font-size: .75rem; }
.mobile-dock { display: none; }
@media (max-width: 760px) {
  html { scroll-padding-bottom: calc(5.5rem + env(safe-area-inset-bottom)); }
  body { padding-bottom: calc(5.5rem + env(safe-area-inset-bottom)); }
  .header-inner { min-height: 65px; }
  .nav { display: none; }
  .brand { font-size: .84rem; letter-spacing: .1em; }
  .brand-mark { width: 42px; height: 42px; }
  .hero-inner { display: block; min-height: 0; padding-block: 1.6rem 1.5rem; }
  .hero-copy { width: 100%; }
  h1 { font-size: clamp(2.4rem, 8.5vw, 4.2rem); }
  .hero-selection { margin-top: .95rem; }
  .hero-selection a { font-size: .93rem; }
  .hero-description { margin-block: .75rem 1rem; font-size: .9rem; }
  .cta { text-align: center; }
  .cta .cta-arrow { display: none; }
  .hero-art { position: relative; inset: auto; display: block; margin: .75rem auto 0; max-width: 530px; }
  .hero-art img { max-height: clamp(152px, 100svh - 476px, 328px); object-fit: contain; }
  .hero-art picture::after { background: linear-gradient(0deg, var(--ink), transparent 3% 97%, var(--ink)); }
  .edition .wrap { justify-content: center; }
  .edition .wrap > span:first-child, .edition .wrap > span:last-child { display: none; }
  .section-head, .club-inner { grid-template-columns: 1fr; }
  .section-head { gap: .85rem; }
  .section-head > p { justify-self: start; }
  .mobile-dock { display: block; position: fixed; z-index: 2; inset: auto 0 0; background: #100e0c; border-top: 1px solid var(--line); padding: .65rem max(1rem, env(safe-area-inset-right)) calc(.65rem + env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left)); }
  .mobile-dock .cta { display: flex; width: min(100%, 520px); margin-inline: auto; }
}
@media (max-width: 500px) {
  .scent-grid { grid-template-columns: 1fr; }
  .footer-inner { align-items: flex-start; flex-direction: column; gap: .4rem; }
}
@media (min-width: 501px) and (max-width: 760px) and (max-height: 700px) {
  h1 { font-size: 2.75rem; }
}
@media (max-width: 365px) {
  h1 { font-size: clamp(2rem, 10.4vw, 2.4rem); }
  .hero-art { margin-top: .5rem; }
  .cta { font-size: .67rem; gap: .5rem; padding-inline: .65rem; }
}
@media (forced-colors: active) {
  .cta { border: 1px solid ButtonText; }
  a:focus-visible { outline-color: Highlight; }
}