:root{
  --linen:#F3EEE6;--sand:#EAE3D7;--ink:#1C1A16;--muted:#4A453D;--label:#5C554A;
  --clay:#8E4B30;--night:#0D0B08;--resin:#2A1A0F;--amber:#C08A3E;--paper:#EDE6DA;
  --rule:rgba(28,26,22,.14);
  --serif:'EB Garamond',Georgia,serif;--sans:'Geist',system-ui,sans-serif;--mark:'UnifrakturCook','EB Garamond',serif;
  --gut:clamp(20px,4vw,56px);--gap:clamp(140px,16vw,220px);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--linen);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.65;font-variant-numeric:lining-nums;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
::selection{background:#E4D2B4}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:6px}
button{font:inherit;color:inherit}
a:focus-visible,button:focus-visible{outline:1px solid currentColor;outline-offset:4px}
h1,h2,h3{text-wrap:balance;font-family:var(--serif);font-weight:400;letter-spacing:-.01em}
p{text-wrap:pretty}
img{max-width:100%}
[hidden]{display:none!important}
[id]{scroll-margin-top:120px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:16px;z-index:50;background:var(--ink);color:var(--linen);padding:8px 12px}

.wrap{max-width:1240px;margin:0 auto;padding:0 var(--gut)}
.sec{padding-bottom:var(--gap)}
.sec-top{padding-top:var(--gap)}
.h2{margin:0 0 80px;font-size:clamp(44px,5.4vw,80px);line-height:1.02}
.label{margin:0;font-family:var(--sans);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--label)}
.muted{color:var(--muted)}
.btn{display:inline-block;background:var(--ink);color:var(--linen);text-decoration:none;border:0;padding:16px 30px;font-weight:500;font-size:15px;letter-spacing:.01em;transition:background-color .4s ease}
a.btn:hover{background-color:#3A352D}
.btn[aria-disabled=true]{opacity:.55;cursor:default}
.quiet{text-decoration:none;transition:opacity .4s ease}
.quiet:hover{opacity:.6}
.grade{filter:saturate(.8) sepia(.1) contrast(1.02)}
.split{display:flex;flex-wrap:wrap;gap:56px clamp(48px,8vw,140px)}
.split>.side{flex:1 1 280px;margin:0}
.split>.main{flex:999 1 520px;min-width:0}

/* Header */
.hdr{position:fixed;top:0;left:0;right:0;z-index:20}
.hdr.static{position:static}
.hdr-in{max-width:1440px;margin:0 auto;padding:24px var(--gut);display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:12px 48px}
.logo{font-family:var(--mark);font-weight:700;font-size:28px;line-height:1}
.nav{display:flex;flex-wrap:wrap;gap:8px 36px;font-size:14px;letter-spacing:.01em}

/* Opening (homepage) */
.root{timeline-scope:--pro}
.pro{position:relative;height:min(620vh,6200px);background:var(--night);view-timeline:--pro block}
.stage{position:sticky;top:0;height:min(100vh,1100px);overflow:hidden;color:var(--paper)}
.grain{position:absolute;inset:0;opacity:.06;pointer-events:none}
.ln{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 24px;text-align:center}
.ln p.big{margin:0;max-width:940px;font-family:var(--serif);font-size:clamp(32px,4.4vw,66px);line-height:1.12;letter-spacing:-.015em}
.ln p.first{max-width:980px;font-size:clamp(40px,6vw,92px);line-height:1.04;letter-spacing:-.01em}
.ln .label{margin-bottom:44px;color:inherit;opacity:.6}
.ln h1{margin:0 0 32px;max-width:1100px;font-size:clamp(48px,7.2vw,116px);line-height:.98;letter-spacing:-.015em}
.ln .sub{margin:0 0 52px;max-width:420px;font-size:18px;opacity:.75}
.ctas{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:16px 40px}
.ctas a:not(.btn){font-size:15px;font-weight:500}
.drop{position:absolute;left:calc(50% - 9px);top:70%;opacity:0}
.cue{position:absolute;left:50%;bottom:48px;width:1px;height:56px;background:currentColor;opacity:.5}
.bar{position:absolute;left:0;right:0;bottom:0;height:1px}
.bar i{position:absolute;inset:0;background:currentColor;opacity:.14}
.bar .fill{opacity:.6}

@supports (animation-timeline: view()){
.hdr.anim{animation:hdr linear both;animation-timeline:--pro;animation-range:contain 0% contain 100%}
.stage{animation:stage linear both;animation-timeline:--pro;animation-range:contain 0% contain 100%}
.ln{opacity:0;animation:ln linear both;animation-timeline:--pro}
.ln0{opacity:1;animation-name:ln0;animation-range:contain 0% contain 16.6%}
.ln1{animation-range:contain 16.6% contain 33.3%}
.ln2{animation-range:contain 33.3% contain 50%}
.ln3{animation-range:contain 50% contain 66.6%}
.ln4{animation-range:contain 66.6% contain 83.3%}
.ln5{visibility:hidden;animation-name:ln5;animation-range:contain 83.3% contain 100%}
.drop{animation:drop linear both;animation-timeline:--pro;animation-range:contain 58% contain 83%}
.fill{transform-origin:left center;animation:fill linear both;animation-timeline:--pro;animation-range:contain 0% contain 83.3%}
.bar{animation:bar linear both;animation-timeline:--pro;animation-range:contain 80% contain 84%}
.cue{animation:cue linear both;animation-timeline:--pro;animation-range:contain 0% contain 4%}
}
@keyframes hdr{0%,79%{color:var(--paper);background-color:rgba(243,238,230,0)}84%{color:var(--ink)}97%{background-color:rgba(243,238,230,0)}100%{color:var(--ink);background-color:rgba(243,238,230,.94)}}
@keyframes stage{0%{background-color:var(--night);color:var(--paper)}64%,79%{background-color:var(--resin);color:var(--paper)}83%{color:var(--ink)}87%,100%{background-color:var(--linen);color:var(--ink)}}
@keyframes ln{0%{opacity:0;transform:translateY(28px)}30%,70%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-28px)}}
@keyframes ln0{0%,70%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-28px)}}
@keyframes ln5{0%{opacity:0;visibility:hidden;transform:translateY(28px)}35%,100%{opacity:1;visibility:visible;transform:none}}
@keyframes drop{0%{opacity:0;transform:scale(0)}30%,55%{opacity:1;transform:scale(1)}100%{opacity:0;transform:translateY(220px) scale(1)}}
@keyframes fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes bar{from{opacity:1}to{opacity:0}}
@keyframes cue{to{opacity:0}}
@supports not (animation-timeline: view()){
.pro{height:auto}
.stage{position:relative;height:auto;background:var(--linen);color:var(--ink);padding:140px 0 96px}
.ln{position:relative;inset:auto;padding:40px 24px}
.drop,.bar,.cue,.grain{display:none}
.hdr.anim{color:var(--ink);background:rgba(243,238,230,.94)}
}
@media (prefers-reduced-motion:reduce){.ln,.drop{transform:none!important}}

/* Proof */
.proof{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:72px 80px}
.num{margin:0 0 20px;font-family:var(--serif);font-size:clamp(64px,8vw,120px);line-height:.9;letter-spacing:-.015em}
.num span{font-size:.45em}
.proof p:last-child{margin:0;max-width:260px;font-size:15px;color:var(--muted)}

/* Origins */
.origins{display:flex;flex-wrap:wrap;gap:64px clamp(48px,8vw,140px);align-items:flex-start}
.olist{flex:999 1 520px;min-width:0;list-style:none;margin:0;padding:0;border-bottom:1px solid var(--rule)}
.olist li{border-top:1px solid var(--rule)}
.row-btn{width:100%;display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:20px 0;background:none;border:0;cursor:pointer;text-align:left;min-height:44px}
.row-name{font-family:var(--serif);font-size:clamp(30px,3.4vw,46px);line-height:1.05;letter-spacing:-.01em;opacity:.55}
.row-btn.has .row-name,.row-btn[aria-pressed=true] .row-name{opacity:1}
.row-btn[aria-pressed=true] .row-name,.row-btn:hover .row-name{font-style:italic}
.row-btn i{width:6px;height:6px;border-radius:50%;flex-shrink:0;align-self:center}
.row-btn.has i{background:var(--clay)}
.panel{flex:1 1 320px;max-width:420px;position:sticky;top:120px}
.panel article{display:flex;flex-direction:column;gap:18px}
.panel h3{margin:0;font-family:var(--serif);font-style:italic;font-size:34px;line-height:1.2;letter-spacing:0}
.panel p{margin:0}
.panel .small{font-size:15px;color:var(--muted)}
.panel img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;object-position:65% center;margin-top:16px;height:auto}
.panel a{align-self:flex-start;margin-top:8px;font-size:15px;font-weight:500}

/* Scent map */
.smell{background:var(--sand)}
.map-wrap{display:flex;flex-wrap:wrap;gap:56px clamp(48px,6vw,96px)}
.map{flex:999 1 600px;min-width:0;position:relative;padding:32px 0}
.map .label{position:absolute}
.map .t{top:0;left:50%;transform:translateX(-50%)}
.map .b{bottom:0;left:50%;transform:translateX(-50%)}
.plane{position:relative;height:540px}
.plane .l{left:0;top:50%;transform:translateY(-140%)}
.plane .r{right:0;top:50%;transform:translateY(-140%)}
.plane .vx{position:absolute;left:50%;top:0;bottom:0;border-left:1px solid rgba(28,26,22,.16)}
.plane .hx{position:absolute;top:50%;left:0;right:0;border-top:1px solid rgba(28,26,22,.16)}
.dot{position:absolute;transform:translate(-50%,-50%);width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:none;border:0;padding:0;cursor:pointer}
.dot i{display:block;width:8px;height:8px;border-radius:50%;background:var(--ink);transition:all .3s ease}
.dot[aria-pressed=true] i{width:12px;height:12px;background:var(--clay);box-shadow:0 0 0 8px rgba(142,75,48,.14)}
.dot span{position:absolute;left:44px;white-space:nowrap;font-family:var(--serif);font-style:italic;font-size:18px;display:none}
.dot[aria-pressed=true] span{display:block}
.scent-out{flex:1 1 280px;display:flex;flex-direction:column;justify-content:center;gap:16px}
.scent-out h3{margin:0;font-size:48px;line-height:1.05}
.scent-out p{margin:0;font-family:var(--serif);font-style:italic;font-size:26px;line-height:1.25;color:var(--muted)}
.scent-out a{align-self:flex-start;margin-top:16px;font-size:15px;font-weight:500}

/* Discovery set */
.set{display:flex;flex-wrap:wrap;gap:72px clamp(48px,9vw,160px);align-items:center}
.vials{flex:1 1 400px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;align-items:end;max-width:480px}
.set-copy{flex:1 1 360px;max-width:440px}
.set-copy h2{margin-bottom:32px}
.set-copy p{margin:0 0 48px;color:var(--muted)}

/* Field notes */
.notes{border-bottom:1px solid var(--rule);margin:0;padding:0;list-style:none}
.notes li{display:grid;grid-template-columns:minmax(120px,200px) minmax(0,1fr);gap:8px 32px;align-items:baseline;padding:28px 0;border-top:1px solid var(--rule)}
.notes .t{font-family:var(--serif);font-size:clamp(26px,2.8vw,38px);line-height:1.15}
.notes .soon{grid-column:2;font-size:14px;color:var(--label)}

/* Oil page */
.buy{display:flex;flex-wrap:wrap;gap:64px clamp(48px,8vw,140px);align-items:center;padding-top:clamp(48px,6vw,96px)}
.buy>img{flex:999 1 480px;min-width:0;display:block;aspect-ratio:4/5;object-fit:cover;height:auto}
.buy-copy{flex:1 1 340px;max-width:420px}
.buy-copy .label{margin-bottom:32px}
.buy-copy h1{margin:0 0 16px;font-size:clamp(44px,4.8vw,68px);line-height:1.02}
.buy-copy .by{margin:0 0 40px;font-size:15px;color:var(--muted)}
.buy-copy .scent{margin:0 0 56px;font-family:var(--serif);font-style:italic;font-size:26px;line-height:1.35}
.sizes{display:flex;gap:28px;padding-bottom:14px;border-bottom:1px solid var(--rule)}
.size{background:none;border:0;padding:10px 0;min-height:44px;cursor:pointer;font-size:15px;opacity:.45;text-underline-offset:8px;text-decoration-thickness:1px;transition:opacity .3s ease}
.size:hover{opacity:1}
.size[aria-pressed=true]{opacity:1;text-decoration:underline}
.chosen{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin:20px 0 32px}
.chosen .p{font-family:var(--serif);font-size:28px}
.chosen .n{font-size:14px;color:var(--label)}
.buy-copy .btn{width:100%;text-align:center;padding:18px 24px;min-height:56px}
.buy-copy .after{margin:20px 0 0;font-size:15px;color:var(--muted)}
.wears{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:48px;border-top:1px solid rgba(28,26,22,.3)}
.wears li{padding-top:28px}
.wears .label{margin-bottom:16px}
.wears p:last-child{margin:0;font-family:var(--serif);font-size:34px;line-height:1.15}
.dials{display:flex;flex-direction:column;gap:48px;padding-top:16px}
.dial-ends{display:flex;justify-content:space-between;gap:16px;font-size:14px;color:var(--muted);margin-bottom:16px}
.dial{position:relative;height:1px;background:rgba(28,26,22,.25)}
.dial i{position:absolute;top:50%;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;background:var(--ink)}
.facts{margin:0;display:grid;grid-template-columns:minmax(120px,200px) minmax(0,1fr);font-size:16px;border-bottom:1px solid var(--rule)}
.facts dt{padding:20px 24px 20px 0;border-top:1px solid var(--rule);line-height:2.2}
.facts dd{margin:0;padding:20px 0;border-top:1px solid var(--rule)}
.distiller{display:flex;flex-wrap:wrap;gap:64px clamp(48px,8vw,140px);align-items:center}
.distiller img{flex:1 1 420px;min-width:0;display:block;aspect-ratio:4/5;object-fit:cover;object-position:65% center;height:auto}
.distiller div{flex:1 1 340px;max-width:420px}
.distiller h2{margin-bottom:32px}
.distiller p{margin:0 0 40px;color:var(--muted)}
.distiller a{font-size:15px;font-weight:500}
.wear-line{max-width:820px;text-align:center}
.wear-line p{margin:0;font-family:var(--serif);font-size:clamp(30px,3.4vw,46px);line-height:1.25;letter-spacing:-.01em}

/* Footer */
.ftr{background:var(--night);color:var(--paper)}
.ftr .wrap{padding-top:140px;padding-bottom:48px}
.ftr .big{margin:0 0 28px;font-family:var(--mark);font-weight:700;font-size:clamp(56px,8vw,120px);line-height:1}
.ftr .tag{margin:0 0 96px;font-size:12px;letter-spacing:.32em;text-transform:uppercase;color:rgba(237,230,218,.7)}
.ftr-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:24px 48px;padding-top:24px;border-top:1px solid rgba(237,230,218,.14);font-size:14px}
.ftr nav{display:flex;flex-wrap:wrap;gap:8px 32px}
.ftr-row>span{color:rgba(237,230,218,.6)}

@media (max-width:600px){
.h2{margin-bottom:56px}
.plane{height:420px}
.notes li{grid-template-columns:1fr}
.notes .soon{grid-column:1}
.facts{grid-template-columns:1fr}
.facts dt{padding-bottom:0}
.facts dd{border-top:0;padding-top:4px}
.panel{position:static}
}