:root {
  --ink: #181513;
  --paper: #f3efe8;
  --line: rgba(24, 21, 19, .16);
  --navy: #1a1816;
  --rose: #c8b8a4;
  --serif: Georgia, "Times New Roman", serif;
  --sans: Arial, Helvetica, sans-serif;
}

* { box-sizing: border-box; }
html { max-width: 100%; overflow-x: clip; scroll-behavior: smooth; background: var(--paper); }
body { width: 100%; min-width: 0; margin: 0; overflow-x: hidden; background: var(--paper); color: var(--ink); font: 16px/1.55 var(--sans); }
a { color: inherit; }
.skip-link { position: absolute; left: -999px; top: 0; }
.skip-link:focus { left: 1rem; top: 1rem; z-index: 99; padding: .7rem 1rem; background: white; }
.site-header { height: 92px; position: absolute; inset: 0 0 auto; z-index: 6; display: flex; align-items: center; justify-content: space-between; padding: 0 clamp(1.5rem, 5vw, 5.2rem); color: #f8f3eb; }
.brand,.footer-brand { color: inherit; text-decoration: none; font: 400 clamp(1.35rem,2.1vw,2.25rem)/1 var(--serif); letter-spacing: .02em; }
.brand span,.footer-brand span { font-style: italic; }
nav { display: flex; gap: clamp(1.1rem,2.3vw,2.6rem); }
nav a { text-decoration: none; font-size: .76rem; letter-spacing: .09em; text-transform: uppercase; }
.menu-button { display: none; color: inherit; background: none; border: 0; font: inherit; }

.hero { min-height: 100svh; position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: stretch; background: #1d1814; }
.hero-scene { position: absolute; z-index: -3; inset: 0; margin: 0; }
.hero-scene picture,.hero-scene img { width: 100%; height: 100%; display: block; }
.hero-scene img { object-fit: cover; object-position: center; filter: saturate(.82) contrast(1.04); }
.hero::before { content: ""; position: absolute; z-index: -2; inset: 0; background: linear-gradient(90deg,rgba(20,16,13,.72) 0%,rgba(20,16,13,.57) 31%,rgba(20,16,13,.16) 55%,rgba(20,16,13,.04) 100%); }
.hero::after { content: ""; position: absolute; z-index: -1; inset: 0; background: radial-gradient(circle at 73% 53%,rgba(224,168,99,.15),transparent 18%),linear-gradient(0deg,rgba(14,11,9,.35),transparent 38%); pointer-events: none; }
.hero-copy { width: min(43vw,570px); min-height: 100svh; margin-left: clamp(1.5rem,5vw,5.2rem); padding: 9.2rem 0 4rem; display: flex; flex-direction: column; justify-content: center; color: #f8f3eb; }
.eyebrow { margin: 0 0 1.4rem; color: #54565c; font-size: .66rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; }
.hero h1,.section h2,.commitment h2 { margin: 0; font: 400 clamp(3.4rem,7vw,7.5rem)/.86 var(--serif); letter-spacing: -.065em; }
.hero h1 em { font-style: italic; }
.hero .eyebrow { color: rgba(248,243,235,.73); }
.hero-intro { max-width: 24rem; margin: 2.25rem 0 1.8rem; color: rgba(248,243,235,.86); font: 400 1.12rem/1.55 var(--serif); }
.text-link { display: inline-flex; gap: .75rem; align-items: center; width: max-content; padding-bottom: .35rem; border-bottom: 1px solid currentColor; text-decoration: none; font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; }
.text-link span { font-size: 1.1rem; line-height: 0; }

.section { padding: clamp(5.5rem,11vw,11rem) clamp(1.5rem,5vw,5.2rem); }
.section-head { max-width: 48rem; margin-bottom: 4.5rem; }
.section-head h2 { font-size: clamp(3.2rem,6.3vw,6.4rem); }
.section-head > p:last-child { max-width: 27rem; margin: 1.6rem 0 0; color: #56575c; font: 400 1.2rem/1.5 var(--serif); }
.candle-signature { display: grid; grid-template-columns: minmax(15rem,1.25fr) repeat(2,minmax(9rem,.55fr)); gap: clamp(1.4rem,3vw,4rem); align-items: end; margin: 0 0 clamp(4rem,7vw,7rem); padding: clamp(1.7rem,3.5vw,3rem) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.burn-time { display: grid; grid-template-columns: auto 1fr; column-gap: .85rem; align-items: end; }
.burn-time strong { grid-row: span 2; font: 400 clamp(3.9rem,7.2vw,7.4rem)/.72 var(--serif); letter-spacing: -.07em; }
.burn-time em { align-self: end; padding-bottom: .25rem; font: italic clamp(1.25rem,2vw,2rem)/1 var(--serif); }
.burn-time span,.technical-detail span { color: #6a625b; font-size: .63rem; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; }
.technical-detail { display: grid; gap: .45rem; padding-bottom: .1rem; }
.technical-detail strong { font: 400 clamp(1.5rem,2.2vw,2.25rem)/1 var(--serif); letter-spacing: -.04em; }
.fragrance-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: clamp(2.8rem,5vw,5rem) clamp(1.25rem,2.4vw,2.5rem); align-items: start; }
.fragrance { margin: 0; }
.fragrance img { width: 100%; display: block; object-fit: cover; aspect-ratio: 4/5; filter: saturate(.84); transition: filter .25s ease, transform .35s ease; }
.fragrance:hover img { filter: saturate(.94) brightness(1.035); transform: scale(1.012); }
.fragrance p { display: flex; gap: .75rem; margin: .9rem 0 0; font: 400 clamp(1.15rem,1.75vw,1.75rem)/1.1 var(--serif); letter-spacing: -.025em; }
.fragrance p span { padding-top: .1rem; color: #777; font: 600 .63rem/1.75 var(--sans); letter-spacing: .13em; }
.collection-note { margin: 4.5rem 0 0; color: #45413d; }

.story { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(3rem,9vw,10rem); align-items: center; padding-top: 0; }
.story-image-wrap { position: relative; height: min(48vw,670px); overflow: hidden; background: var(--navy); box-shadow: 0 18px 48px rgba(16,18,23,.14); }
.story-image-wrap::after { content: ""; position: absolute; inset: 0; background: linear-gradient(145deg,rgba(241,238,233,.16),transparent 44%,rgba(16,17,22,.12)); pointer-events: none; }
.story-image-wrap img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 46%; filter: brightness(1.09) contrast(.9); }
.story-copy { position: relative; isolation: isolate; }
.story-copy > :not(.footprint) { position: relative; z-index: 1; }
.footprint { position: absolute; z-index: 0; right: -9%; bottom: -8%; width: clamp(15rem,29vw,31rem); max-width: 105%; opacity: .065; mix-blend-mode: multiply; pointer-events: none; transform: rotate(-7deg); }
.story-copy h2 { font-size: clamp(3.2rem,6vw,6.4rem); }
.story-copy > p:not(.eyebrow):not(.signature) { max-width: 30rem; color: #48494d; font: 400 1.17rem/1.55 var(--serif); }
.signature { margin-top: 2rem; font: italic 1.25rem var(--serif); }
.commitment { display: grid; grid-template-columns: .55fr 1.45fr; gap: 4rem; padding: clamp(4.5rem,10vw,9rem) clamp(1.5rem,10vw,12rem); background: var(--ink); color: #f3f0eb; }
.commitment-mark { color: var(--rose); font: italic clamp(9rem,20vw,20rem)/.7 var(--serif); }
.commitment .eyebrow { color: #d6d0c9; }
.commitment h2 { font-size: clamp(3.25rem,7vw,7rem); }
.commitment h2 + p { max-width: 35rem; margin: 1.6rem 0 2rem; color: #dedbd6; font: 400 1.25rem/1.6 var(--serif); }
.light-link { color: #f3f0eb; }
.stockists { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(3rem,9vw,10rem); align-items: start; }
.stockists-head { margin: 0; }
.stockist-list { border-top: 1px solid var(--line); }
.stockist-list article { padding: 1.3rem 0 1.5rem; border-bottom: 1px solid var(--line); }
.stockist-list p { margin: 0 0 .55rem; color: #666; font-size: .67rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.stockist-list a { display: flex; justify-content: space-between; align-items: center; text-decoration: none; font: 400 1.32rem/1.6 var(--serif); }
.stockist-list a span { margin-left: .7rem; font: 1rem var(--sans); }
.site-footer { padding: clamp(3rem,6vw,6rem) clamp(1.5rem,5vw,5.2rem) 1.5rem; background: #0c0d10; color: #efebe5; }
.footer-main { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2rem; min-height: 170px; }
.footer-brand { font-size: clamp(2rem,4vw,4rem); }
.footer-label { margin: 0 0 .6rem; color: #a7a5a1; font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; }
.footer-main a:not(.footer-brand) { text-decoration: none; font: 400 1.1rem var(--serif); }
.footer-bottom { display: flex; justify-content: space-between; padding-top: 1.3rem; border-top: 1px solid rgba(255,255,255,.18); color: #a7a5a1; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; }

@media (max-width:800px) {
  .site-header { height: 72px; width: 100%; max-width: 100vw; }
  .brand,.menu-button { position: relative; z-index: 8; }
  .brand { transition: color .32s ease; }
  .site-header.menu-open .brand { color: var(--ink); }
  .menu-button { display: inline-flex; min-width: 6.25rem; min-height: 2.75rem; align-items: center; justify-content: center; gap: .65rem; padding: .55rem .45rem .55rem .75rem; border: 1px solid rgba(248,243,235,.35); border-radius: 999px; cursor: pointer; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; transition: color .35s ease, border-color .35s ease, background-color .35s ease, transform .25s ease; }
  .menu-button:active { transform: scale(.96); }
  .menu-icon { position: relative; display: block; width: 1.35rem; height: .9rem; }
  .menu-icon::before,.menu-icon::after { content: ""; position: absolute; left: 0; width: 100%; height: 1px; background: currentColor; transform-origin: center; transition: transform .4s cubic-bezier(.22,1,.36,1), top .4s cubic-bezier(.22,1,.36,1); }
  .menu-icon::before { top: .18rem; }
  .menu-icon::after { top: .67rem; width: 72%; left: auto; right: 0; }
  .menu-button[aria-expanded="true"] { color: var(--ink); border-color: rgba(24,21,19,.18); background: rgba(243,239,232,.94); }
  .menu-button[aria-expanded="true"] .menu-icon::before { top: .43rem; transform: rotate(45deg); }
  .menu-button[aria-expanded="true"] .menu-icon::after { top: .43rem; width: 100%; transform: rotate(-45deg); }
  nav { position: fixed; z-index: 7; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: .32rem; width: 100vw; height: 100dvh; padding: 6rem 1.5rem 3.5rem; overflow-y: auto; overscroll-behavior: contain; background: var(--paper); color: var(--ink); opacity: 0; visibility: hidden; pointer-events: none; transform: translate3d(0,-1.5rem,0); clip-path: inset(0 0 100% 0 round 0 0 2rem 2rem); transition: opacity .28s ease, visibility 0s linear .48s, transform .48s cubic-bezier(.22,1,.36,1), clip-path .48s cubic-bezier(.22,1,.36,1); }
  nav a { position: relative; width: 100%; padding: .65rem 0; border-bottom: 1px solid rgba(24,21,19,.13); opacity: 0; transform: translate3d(0,.8rem,0); text-decoration: none; font: 400 clamp(1.65rem,7vw,2.35rem)/1.12 var(--serif); letter-spacing: -.04em; transition: opacity .36s ease, transform .52s cubic-bezier(.22,1,.36,1), color .25s ease, padding-left .25s ease; }
  nav a:active { padding-left: .3rem; color: #887a6c; }
  nav.open { visibility: visible; pointer-events: auto; opacity: 1; transform: translate3d(0,0,0); clip-path: inset(0 0 0 0 round 0); transition-delay: 0s; }
  nav.open a { opacity: 1; transform: translate3d(0,0,0); }
  nav.open a:nth-child(1) { transition-delay: .11s; }
  nav.open a:nth-child(2) { transition-delay: .16s; }
  nav.open a:nth-child(3) { transition-delay: .21s; }
  nav.open a:nth-child(4) { transition-delay: .26s; }
  nav.open a:nth-child(5) { transition-delay: .31s; }
  body.menu-open { overflow: hidden; touch-action: none; }
  .hero,.section,.site-footer { max-width: 100vw; }
  .hero { min-height: max(100svh,760px); }
  .hero::before { background: linear-gradient(180deg,rgba(20,16,13,.62) 0%,rgba(20,16,13,.53) 32%,rgba(20,16,13,.12) 61%,rgba(20,16,13,.19) 100%); }
  .hero-copy { width: 100%; min-height: max(100svh,760px); margin-left: 0; padding: 8rem 1.5rem 3.4rem; justify-content: flex-start; }
  .hero h1 { font-size: clamp(3.7rem,15vw,5.5rem); }
  .hero-intro { max-width: 18rem; margin-top: 1.6rem; font-size: 1.03rem; }
  .section { padding: 5.2rem 1.5rem; }
  .section-head { margin-bottom: 3rem; }
  .candle-signature { grid-template-columns: 1fr 1fr; gap: 1.5rem 1rem; margin-bottom: 3.7rem; padding: 1.55rem 0 1.7rem; }
  .burn-time { grid-column: 1 / -1; }
  .burn-time strong { font-size: clamp(4.4rem,18vw,6rem); }
  .burn-time em { font-size: 1.45rem; }
  .fragrance-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 2.7rem 1rem; }
  .fragrance,.fragrance:nth-child(n) { grid-column: auto; margin-top: 0; }
  .fragrance p { font-size: 1.25rem; }
  .story { display: flex; flex-direction: column; gap: 3rem; overflow: hidden; }
  .story-image-wrap { width: 100%; height: 72vw; max-height: 650px; }
  .commitment { grid-template-columns: 1fr; gap: 2rem; }
  .commitment-mark { font-size: 8rem; }
  .stockists { display: block; }
  .stockists-head { margin-bottom: 3rem; }
  .footer-main { grid-template-columns: 1fr; gap: 1.8rem; }
  .footer-bottom { flex-direction: column; gap: 1rem; }
}
@media (max-width:440px) {
  .fragrance-grid { grid-template-columns: 1fr; gap: 2.2rem; }
  .hero { min-height: 760px; }
  .hero-copy { min-height: 760px; padding-top: 7.6rem; }
  .commitment h2 { font-size: 3.2rem; }
  .stockist-list a { font-size: 1.15rem; }
}