:root{
--white:#FFFFFF;
--grey:#F4F6F1;
--sage-light:#E6ECE2;
--sage:#B8CCB1;
--olive:#6D7C61;
--ink:#2E332D;
--gold:#B08D3F;
--bg:#E8ECEE;
--sun-x:8vw;
--sun-y:78vh;
--sun-size:62vmin;
--sun-color:#FBD9C0;
--sun-glow:0.55;
--haze:0.35;
--sh-x:26px;
--sh-y:14px;
--sh-blur:44px;
--sh-a:0.16;
--ground-x:70px;
--ground-len:2.3;
--measure:66ch;
--pad:clamp(1.25rem,5vw,5.5rem);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body.idh2{
margin:0;
background:var(--bg);
color:var(--ink);
font-family:"Manrope",system-ui,sans-serif;
font-weight:350;
font-size:clamp(1rem,0.55vw + 0.9rem,1.075rem);
line-height:1.65;
-webkit-font-smoothing:antialiased;
overflow-x:hidden;
transition:background-color .12s linear;
}
.idh2 .sky{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.sun{
position:absolute;
left:var(--sun-x);top:var(--sun-y);
width:var(--sun-size);height:var(--sun-size);
margin:calc(var(--sun-size) / -2) 0 0 calc(var(--sun-size) / -2);
border-radius:50%;
background:radial-gradient(circle at 50% 50%,
var(--sun-color) 0%,
color-mix(in srgb,var(--sun-color) 55%,transparent) 32%,
transparent 68%);
opacity:var(--sun-glow);
filter:blur(6px);
}
.haze{
position:absolute;inset:0;
background:linear-gradient(to bottom,
color-mix(in srgb,var(--sun-color) 22%,transparent) 0%,
transparent 55%);
opacity:var(--haze);
}
.idh2 .grain{
position:fixed;inset:0;z-index:2;pointer-events:none;opacity:.05;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
.idh2 .rail{
position:fixed;left:clamp(.9rem,2.2vw,2rem);top:0;bottom:0;z-index:5;
width:1px;background:color-mix(in srgb,var(--ink) 12%,transparent);
pointer-events:none;
}
.rail__dot{
position:absolute;left:50%;width:7px;height:7px;margin-left:-3.5px;margin-top:-3.5px;
border-radius:50%;background:var(--ink);
top:var(--rail-p,0%);
}
.idh2 .clock{
position:fixed;left:clamp(.9rem,2.2vw,2rem);bottom:clamp(1rem,3vh,2.2rem);z-index:6;
transform:translateX(calc(-50% + .5px));
font-size:.66rem;letter-spacing:.22em;font-weight:500;
font-variant-numeric:tabular-nums;
color:color-mix(in srgb,var(--ink) 62%,transparent);
background:color-mix(in srgb,var(--bg) 82%,transparent);
padding:.5rem .35rem;border-radius:2px;
writing-mode:vertical-rl;
}
.idh2 .top{
position:fixed;top:0;left:0;right:0;z-index:8;
display:flex;align-items:center;justify-content:space-between;
padding:clamp(.9rem,2.4vh,1.6rem) var(--pad);
padding-left:calc(var(--pad) + 1.5rem);
background:linear-gradient(to bottom,color-mix(in srgb,var(--bg) 88%,transparent),transparent);
}
.mark{display:flex;align-items:baseline;gap:.6rem;text-decoration:none;color:var(--ink)}
.mark__id{font-family:"Playfair Display",serif;font-size:1.5rem;letter-spacing:.02em;line-height:1}
.mark__name{font-size:.62rem;letter-spacing:.36em;font-weight:500;text-transform:uppercase}
.idh2 .nav{display:flex;gap:clamp(1rem,2.4vw,2.2rem)}
.idh2 .nav a{
font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;font-weight:500;
color:color-mix(in srgb,var(--ink) 72%,transparent);text-decoration:none;
padding:.35rem 0;border-bottom:1px solid transparent;
}
.idh2 .nav a:hover,.idh2 .nav a:focus-visible{color:var(--ink);border-bottom-color:var(--gold)}
@media(max-width:720px){.idh2 .nav a:nth-child(2),.idh2 .nav a:nth-child(4){display:none}}
.idh2 main{position:relative;z-index:3}
.act{
position:relative;
padding:clamp(6rem,17vh,11rem) var(--pad);
padding-left:calc(var(--pad) + 1.5rem);
}
.inner{max-width:1180px;margin:0 auto}
.hour{
display:block;margin-bottom:1.4rem;
font-size:.64rem;letter-spacing:.28em;font-weight:600;
font-variant-numeric:tabular-nums;
color:var(--olive);
}
.hour::after{content:"";display:inline-block;width:clamp(1.5rem,4vw,3rem);height:1px;background:var(--gold);margin-left:.9rem;vertical-align:middle;transform:scaleX(0);transform-origin:left;transition:transform 1s cubic-bezier(.22,.61,.36,1) .25s}
.hour.in::after{transform:scaleX(1)}
.idh2 main h1,.idh2 main h2,.idh2 main h3{
font-family:"Playfair Display",serif;font-weight:400;
letter-spacing:-.015em;line-height:1.06;margin:0;
text-shadow:calc(var(--sh-x) * .16) calc(var(--sh-y) * .16) calc(var(--sh-blur) * .3) rgba(46,51,45,calc(var(--sh-a) * .5));
}
.idh2 main h1{font-size:clamp(2.9rem,8.4vw,7.2rem)}
.idh2 main h2{font-size:clamp(2rem,4.6vw,3.7rem)}
.idh2 main h3{font-size:clamp(1.2rem,1.8vw,1.5rem);line-height:1.25}
.lede{max-width:var(--measure);margin:1.6rem 0 0;color:color-mix(in srgb,var(--ink) 82%,transparent)}
.idh2 main p{margin:0 0 1.1rem}
.idh2 main em{font-family:"Playfair Display",serif;font-style:italic}
.rv{opacity:0;transform:translateY(22px);transition:opacity 1s cubic-bezier(.22,.61,.36,1),transform 1s cubic-bezier(.22,.61,.36,1)}
.rv.in{opacity:1;transform:none}
.hero{min-height:100svh;display:flex;flex-direction:column;justify-content:center}
.hero h1{max-width:14ch}
.hero h1 .soil{font-style:italic;color:var(--olive)}
.hero__foot{
display:flex;flex-wrap:wrap;gap:2rem 3.5rem;align-items:flex-end;
margin-top:clamp(2.5rem,8vh,5rem);
}
.hero__note{max-width:38ch;font-size:.95rem;color:color-mix(in srgb,var(--ink) 74%,transparent)}
.cue{font-size:.62rem;letter-spacing:.26em;text-transform:uppercase;color:var(--olive);display:flex;align-items:center;gap:.7rem}
.cue span{display:block;width:1px;height:2.2rem;background:linear-gradient(var(--olive),transparent);animation:drop 2.6s ease-in-out infinite}
@keyframes drop{0%,100%{transform:scaleY(.4);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}}
.branch{position:absolute;right:calc(var(--pad) * .4);top:22vh;width:min(46vw,560px);opacity:.5;pointer-events:none}
.branch path,.branch line{stroke:var(--olive);fill:none;stroke-width:1.1;vector-effect:non-scaling-stroke}
.branch ellipse{fill:color-mix(in srgb,var(--sage) 70%,transparent);stroke:none}
@media(max-width:860px){.branch{top:auto;bottom:6vh;right:-8vw;width:78vw;opacity:.3}}
.grove{
position:relative;margin-top:clamp(2.5rem,7vh,4.5rem);
height:clamp(230px,34vh,340px);
border-bottom:1px solid color-mix(in srgb,var(--olive) 30%,transparent);
}
.tree{position:absolute;bottom:0;transform-origin:bottom center}
.tree__shadow{
position:absolute;bottom:-6px;left:50%;width:56px;height:13px;margin-left:-28px;
border-radius:50%;
background:radial-gradient(ellipse,rgba(46,51,45,.30),transparent 72%);
transform:translateX(var(--ground-x)) scaleX(var(--ground-len));
transform-origin:center;
}
.tree svg{display:block;overflow:visible}
.tree .trunk{stroke:var(--olive);stroke-width:2.2;fill:none;stroke-linecap:round}
.tree .crown{fill:color-mix(in srgb,var(--sage) 78%,transparent)}
.grove__note{
position:absolute;right:0;bottom:1.4rem;max-width:24ch;
font-size:.78rem;line-height:1.5;text-align:right;
color:color-mix(in srgb,var(--ink) 60%,transparent);
}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,6vw,5rem);align-items:end}
@media(max-width:860px){.split{grid-template-columns:1fr}}
.harvest{position:relative}
.fall{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:-1}
.olive-drop{
position:absolute;top:-8%;width:11px;height:14px;border-radius:50% 50% 48% 48%;
background:linear-gradient(150deg,var(--olive),var(--ink));
opacity:0;animation:fall linear infinite;
}
@keyframes fall{
0%{transform:translateY(-10vh) rotate(0deg);opacity:0}
12%{opacity:.85}
88%{opacity:.85}
100%{transform:translateY(112vh) rotate(220deg);opacity:0}
}
.counts{display:flex;flex-wrap:wrap;gap:2.5rem 4rem;margin-top:3rem}
.count{border-top:1px solid color-mix(in srgb,var(--olive) 34%,transparent);padding-top:.9rem;min-width:150px}
.count b{display:block;font-family:"Playfair Display",serif;font-weight:400;font-size:clamp(1.8rem,3vw,2.6rem);line-height:1}
.count span{font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--olive)}
.noon{text-align:center}
.noon .hour{text-align:left}
.bottles{
display:flex;justify-content:center;align-items:flex-end;
gap:clamp(1.5rem,6vw,5rem);margin:clamp(3rem,8vh,5rem) 0 0;
}
.bottle{background:none;border:0;padding:0;cursor:pointer;font:inherit;color:inherit;text-align:center;
transition:transform .5s cubic-bezier(.22,.61,.36,1)}
.bottle:hover,.bottle:focus-visible{transform:translateY(-10px)}
.bottle svg{display:block;margin:0 auto;filter:drop-shadow(calc(var(--sh-x) * .5) var(--sh-y) calc(var(--sh-blur) * .5) rgba(46,51,45,calc(var(--sh-a) * 1.1)))}
.bottle .glass{fill:color-mix(in srgb,var(--olive) 88%,var(--ink))}
.bottle .neck{fill:color-mix(in srgb,var(--olive) 70%,var(--ink))}
.bottle .label{fill:var(--white)}
.bottle .cap{fill:var(--gold)}
.bottle__size{display:block;margin-top:1.1rem;font-size:.7rem;letter-spacing:.2em;font-weight:600}
.bottle__price{display:block;font-size:.78rem;color:color-mix(in srgb,var(--ink) 60%,transparent);margin-top:.25rem}
.bottle[aria-pressed="true"] .bottle__size{color:var(--gold)}
.bottle[aria-pressed="true"] svg{transform:scale(1.02)}
.buy{margin-top:clamp(2.5rem,7vh,4rem);display:flex;flex-direction:column;align-items:center;gap:.9rem}
.idh2 .btn{
display:inline-block;border:0;cursor:pointer;font:inherit;
background:var(--ink);color:var(--white);
padding:1rem 2.6rem;border-radius:100px;
font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;font-weight:600;
box-shadow:var(--sh-x) var(--sh-y) var(--sh-blur) rgba(46,51,45,var(--sh-a));
transition:background .3s ease,transform .3s ease;
}
.idh2 .btn:hover,.idh2 .btn:focus-visible{background:var(--olive);transform:translateY(-2px)}
.ship{font-size:.72rem;color:color-mix(in srgb,var(--ink) 58%,transparent)}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1.2rem,3vw,2.4rem);margin-top:clamp(2.5rem,7vh,4rem)}
@media(max-width:860px){.steps{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.steps{grid-template-columns:1fr}}
.step{position:relative;padding-top:1.1rem}
.step::before{
content:"";position:absolute;top:0;left:0;right:0;height:1px;background:var(--ink);
transform:scaleX(0);transform-origin:left;transition:transform .95s cubic-bezier(.22,.61,.36,1);
}
.step.in::before{transform:none}
.step b{display:block;font-size:.64rem;letter-spacing:.24em;color:var(--gold);margin-bottom:.9rem;font-variant-numeric:tabular-nums}
.step h3{margin-bottom:.6rem}
.step p{font-size:.9rem;color:color-mix(in srgb,var(--ink) 76%,transparent);margin:0}
.uses{margin-top:clamp(2.5rem,7vh,4rem);border-top:1px solid color-mix(in srgb,var(--olive) 30%,transparent)}
.use{
display:grid;grid-template-columns:7rem 1fr 1fr;gap:clamp(1rem,3vw,2.5rem);
align-items:baseline;padding:clamp(1.4rem,3.4vh,2.2rem) 0;
border-bottom:1px solid color-mix(in srgb,var(--olive) 22%,transparent);
transition:padding-left .45s cubic-bezier(.22,.61,.36,1),background .45s ease;
}
.use:hover{padding-left:1.2rem;background:color-mix(in srgb,var(--sage-light) 55%,transparent)}
.use time{font-size:.68rem;letter-spacing:.2em;font-weight:600;font-variant-numeric:tabular-nums;color:var(--olive)}
.use p{margin:0;font-size:.92rem;color:color-mix(in srgb,var(--ink) 74%,transparent)}
@media(max-width:760px){.use{grid-template-columns:5.5rem 1fr}.use p{grid-column:1 / -1}}
.voices{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.5rem,4vw,3rem);margin-top:clamp(2.5rem,7vh,4rem)}
@media(max-width:860px){.voices{grid-template-columns:1fr}}
.voice{
background:color-mix(in srgb,var(--white) 72%,transparent);
border-radius:3px;padding:clamp(1.6rem,3vw,2.2rem);
box-shadow:calc(var(--sh-x) * .6) var(--sh-y) var(--sh-blur) rgba(46,51,45,calc(var(--sh-a) * .8));
}
.voice p{font-family:"Playfair Display",serif;font-size:1.08rem;line-height:1.5;margin-bottom:1.2rem}
.voice cite{font-style:normal;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--olive)}
.dusk{
background:var(--ink);color:var(--sage-light);
border-radius:clamp(1.5rem,4vw,3rem) clamp(1.5rem,4vw,3rem) 0 0;
margin-top:clamp(4rem,12vh,8rem);
}
.idh2 .dusk h2{color:var(--white);text-shadow:none}
.dusk .hour{color:var(--sage)}
.dusk .hour::after{background:var(--gold)}
.signup{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2.2rem;max-width:520px}
.signup input{
flex:1 1 220px;background:transparent;border:0;border-bottom:1px solid color-mix(in srgb,var(--sage) 55%,transparent);
color:var(--white);font:inherit;font-size:.95rem;padding:.75rem .2rem;
}
.signup input::placeholder{color:color-mix(in srgb,var(--sage) 70%,transparent)}
.signup input:focus{outline:none;border-bottom-color:var(--gold)}
.idh2 .signup .btn{background:var(--sage-light);color:var(--ink);box-shadow:none}
.idh2 .signup .btn:hover{background:var(--white)}
.colophon{
display:flex;flex-wrap:wrap;justify-content:space-between;gap:1.5rem;
margin-top:clamp(4rem,10vh,7rem);padding-top:1.6rem;
border-top:1px solid color-mix(in srgb,var(--sage) 28%,transparent);
font-size:.7rem;letter-spacing:.1em;color:color-mix(in srgb,var(--sage) 78%,transparent);
}
.colophon a{color:inherit;text-decoration:none;border-bottom:1px solid transparent}
.colophon a:hover,.colophon a:focus-visible{border-bottom-color:var(--gold)}
body.idh2.booting{overflow:hidden}
.booting main,.booting .top,.booting .rail,.booting .clock{opacity:0}
.idh2 main,.idh2 .top,.idh2 .rail,.idh2 .clock{transition:opacity 1.2s ease .15s}
.idh2 .loader{
position:fixed;inset:0;z-index:12;
display:flex;flex-direction:column;align-items:center;justify-content:center;
gap:clamp(1.8rem,5vh,3rem);
background:linear-gradient(to bottom,transparent 38%,rgba(19,24,17,var(--boot-ground,.55)) 100%);
color:var(--boot-ink,#E6ECE2);
transition:opacity 1.1s ease,visibility 1.1s;
}
.loader.done{opacity:0;visibility:hidden;pointer-events:none}
.loader__mark{display:flex;flex-direction:column;align-items:center;gap:.9rem}
.loader__name{font-size:.66rem;letter-spacing:.52em;text-transform:uppercase;font-weight:500;opacity:.8}
.loader__horizon{
position:relative;width:min(62vw,620px);height:1px;
background:color-mix(in srgb,currentColor 22%,transparent);
}
.loader__horizon::after{
content:"";position:absolute;left:50%;top:0;height:1px;
width:calc(var(--boot,0) * 100%);transform:translateX(-50%);
background:linear-gradient(90deg,transparent,var(--gold),transparent);
}
.loader__clock{
font-size:.68rem;letter-spacing:.3em;font-weight:500;font-variant-numeric:tabular-nums;opacity:.75;
}
.idh2 .cursor{
position:fixed;left:0;top:0;width:22px;height:26px;margin:-13px 0 0 -11px;
z-index:20;pointer-events:none;opacity:0;
border-radius:50% 50% 50% 50% / 58% 58% 42% 42%;
background:color-mix(in srgb,var(--olive) 14%,transparent);
border:1px solid color-mix(in srgb,var(--olive) 38%,transparent);
backdrop-filter:blur(2px) saturate(1.35) brightness(1.02);
-webkit-backdrop-filter:blur(2px) saturate(1.35) brightness(1.02);
box-shadow:calc(var(--sh-x) * .28) calc(var(--sh-y) * .28) calc(var(--sh-blur) * .35) rgba(46,51,45,calc(var(--sh-a) * .95));
transition:opacity .45s ease,background .35s ease,border-color .35s ease;
}
.cursor.on{opacity:1}
.cursor__drop{display:none}
.cursor.is-buy{
background:color-mix(in srgb,var(--ink) 92%,transparent);
border-color:var(--ink);
}
body.idh2.booting .cursor{opacity:0}
body.idh2.cursor-none,
body.idh2.cursor-none a,
body.idh2.cursor-none button{cursor:none}
body.idh2.cursor-none input,
body.idh2.cursor-none textarea{cursor:text}
.mark img{display:block;height:clamp(30px,3.4vw,40px);width:auto}
.loader__logo{height:clamp(52px,9vw,78px);width:auto;display:block}
.steps--three{grid-template-columns:repeat(3,1fr)}
@media(max-width:860px){.steps--three{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.steps--three{grid-template-columns:1fr}}
.inline-link{
display:inline-block;margin-top:clamp(2rem,5vh,3rem);
font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;font-weight:600;
color:var(--ink);text-decoration:none;border-bottom:1px solid var(--gold);padding-bottom:.35rem;
}
.inline-link:hover,.inline-link:focus-visible{color:var(--olive)}
.record{
display:grid;grid-template-columns:repeat(4,1fr);gap:0 clamp(1.2rem,3vw,2.5rem);
margin:clamp(2.5rem,6vh,3.5rem) 0 0;border-top:1px solid var(--ink);
}
@media(max-width:860px){.record{grid-template-columns:1fr 1fr}}
.record>div{padding:1.05rem 0;border-bottom:1px solid color-mix(in srgb,var(--olive) 24%,transparent)}
.record dt{font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;color:var(--olive)}
.record dd{margin:.4rem 0 0;font-family:"Playfair Display",serif;font-size:clamp(1rem,1.3vw,1.15rem);line-height:1.3}
.pull{
margin:clamp(2.5rem,6vh,3.5rem) 0 0;max-width:26ch;
font-family:"Playfair Display",serif;font-style:italic;font-size:clamp(1.3rem,2.4vw,1.9rem);
line-height:1.3;color:var(--olive);
}
.estate{position:relative;border-radius:3px;overflow:hidden;box-shadow:var(--sh-x) var(--sh-y) var(--sh-blur) rgba(46,51,45,var(--sh-a))}
.estate img,.estate video{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:4/5;background:var(--sage-light)}
.motion{
position:relative;margin-top:clamp(2.5rem,7vh,4rem);border-radius:3px;overflow:hidden;
box-shadow:var(--sh-x) var(--sh-y) var(--sh-blur) rgba(46,51,45,var(--sh-a));
}
.motion video{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--sage-light)}
.motion figcaption{
position:absolute;left:clamp(1rem,2.5vw,2rem);bottom:clamp(1rem,2.5vw,2rem);
font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;font-weight:600;
color:var(--white);text-shadow:0 1px 12px rgba(46,51,45,.55);
}
.estate__light{
position:absolute;inset:0;pointer-events:none;
background:linear-gradient(to bottom,color-mix(in srgb,var(--sun-color) 70%,transparent),transparent 62%);
mix-blend-mode:soft-light;
}
@media(max-width:860px){.estate img,.estate video{aspect-ratio:16/10}}
.year{margin-top:clamp(2.5rem,6vh,3.5rem)}
.year__months{display:grid;grid-template-columns:repeat(12,1fr);border-bottom:1px solid color-mix(in srgb,var(--olive) 26%,transparent)}
.year__months span{font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;color:color-mix(in srgb,var(--ink) 52%,transparent);padding-bottom:.6rem;text-align:center}
.year__bars{display:grid;grid-template-columns:repeat(12,1fr);gap:3px;margin-top:3px}
.phase{
background:color-mix(in srgb,var(--sage) 55%,transparent);border:0;cursor:pointer;font:inherit;color:var(--ink);
padding:.7rem .5rem;border-radius:2px;text-align:left;
font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;font-weight:600;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
transition:background .35s ease,color .35s ease;
}
.phase:hover{background:color-mix(in srgb,var(--sage) 85%,transparent)}
.phase[aria-selected="true"]{background:var(--olive);color:var(--white)}
.year__panel{margin-top:clamp(1.8rem,4vh,2.6rem);max-width:var(--measure);min-height:9rem}
.idh2 .year__panel em{display:block;font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;font-style:normal;color:var(--gold);margin-bottom:.7rem;font-family:"Manrope",sans-serif;font-weight:600}
.year__panel h3{margin-bottom:.7rem}
.year__panel p{margin:0;color:color-mix(in srgb,var(--ink) 78%,transparent)}
.lab{margin-top:clamp(2.5rem,6vh,3.5rem);border-top:1px solid var(--ink)}
.lab__row{
display:grid;grid-template-columns:1fr 1.4fr;gap:clamp(1rem,3vw,3rem);
padding:clamp(1.4rem,3vh,2rem) 0;
border-bottom:1px solid color-mix(in srgb,var(--olive) 22%,transparent);
}
@media(max-width:760px){.lab__row{grid-template-columns:1fr}}
.lab__head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem}
.lab__name{font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--olive)}
.lab__val{font-family:"Playfair Display",serif;font-size:clamp(1.5rem,2.6vw,2.1rem);line-height:1;font-variant-numeric:tabular-nums}
.meter{position:relative;height:2px;background:color-mix(in srgb,var(--olive) 22%,transparent);margin-top:1rem}
.meter i{position:absolute;left:0;top:0;height:100%;background:var(--gold);width:0;transition:width 1.4s cubic-bezier(.22,.61,.36,1)}
.rv.in .meter i{width:var(--w,0)}
.meter b{position:absolute;top:-4px;width:1px;height:10px;background:var(--ink);left:var(--limit,100%)}
.meter b::after{content:attr(data-l);position:absolute;top:12px;left:-1px;font-size:.56rem;letter-spacing:.1em;color:color-mix(in srgb,var(--ink) 55%,transparent);white-space:nowrap;font-weight:600}
.lab__note{margin:0;font-size:.88rem;color:color-mix(in srgb,var(--ink) 74%,transparent)}
.lab__foot{margin-top:1.4rem;font-size:.72rem;color:color-mix(in srgb,var(--ink) 55%,transparent)}
.fcols{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:clamp(1.8rem,4vw,3rem);margin-top:clamp(3rem,8vh,5rem)}
@media(max-width:860px){.fcols{grid-template-columns:1fr 1fr}}
.fcols img{height:44px;width:auto;display:block;margin-bottom:1.2rem}
.fcols h4{
margin:0 0 1rem;font-family:"Manrope",sans-serif;font-weight:600;
font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;color:var(--sage);
}
.fcols ul{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.fcols a{color:color-mix(in srgb,var(--sage-light) 88%,transparent);text-decoration:none;font-size:.9rem;border-bottom:1px solid transparent}
.fcols a:hover,.fcols a:focus-visible{border-bottom-color:var(--gold)}
.fcols p{font-size:.9rem;max-width:34ch;color:color-mix(in srgb,var(--sage-light) 82%,transparent)}
.rv--mask{opacity:1;transform:none;overflow:hidden;padding-bottom:.12em;margin-bottom:-.12em}
.rv--mask .ln{
display:block;transform:translateY(112%);opacity:0;
transition:transform 1.15s cubic-bezier(.16,.84,.44,1),opacity .7s ease;
}
.rv--mask.in .ln{transform:none;opacity:1}
.branch path{stroke-dashoffset:var(--dash,0);transition:stroke-dashoffset 2.1s cubic-bezier(.32,.72,.35,1)}
.branch ellipse{
opacity:0;transform:scale(.4);transform-box:fill-box;transform-origin:center;
transition:opacity .7s ease,transform .9s cubic-bezier(.22,.61,.36,1);
}
.branch.drawn path{stroke-dashoffset:0}
.branch.drawn ellipse{opacity:1;transform:none}
.tree svg{
transform-origin:bottom center;transform:scaleY(.62);opacity:0;
transition:transform 1.1s cubic-bezier(.22,.61,.36,1),opacity .8s ease;
}
.grove.in .tree svg{transform:none;opacity:1}
.tree__shadow{opacity:0;transition:opacity 1s ease .5s}
.grove.in .tree__shadow{opacity:1}
.record>div{opacity:0;transform:translateY(14px);transition:opacity .8s ease,transform .8s cubic-bezier(.22,.61,.36,1)}
.record.in>div{opacity:1;transform:none}
.record.in>div:nth-child(1){transition-delay:.00s}
.record.in>div:nth-child(2){transition-delay:.07s}
.record.in>div:nth-child(3){transition-delay:.14s}
.record.in>div:nth-child(4){transition-delay:.21s}
.record.in>div:nth-child(5){transition-delay:.28s}
.record.in>div:nth-child(6){transition-delay:.35s}
.record.in>div:nth-child(7){transition-delay:.42s}
.record.in>div:nth-child(8){transition-delay:.49s}
.use{opacity:0;transform:translateX(-20px)}
.use.in{opacity:1;transform:none;transition:opacity .9s ease,transform .9s cubic-bezier(.22,.61,.36,1),padding-left .45s cubic-bezier(.22,.61,.36,1),background .45s ease}
.year{position:relative}
.year__cursor{
position:absolute;top:0;left:var(--year-p,0%);width:1px;height:calc(100% - 9rem);
background:linear-gradient(to bottom,var(--gold),color-mix(in srgb,var(--gold) 10%,transparent));
opacity:0;transition:opacity .6s ease;pointer-events:none;
}
.year.in .year__cursor{opacity:1}
.year__cursor::before{
content:"";position:absolute;top:-3px;left:-3px;width:7px;height:7px;border-radius:50%;background:var(--gold);
}
.phase{position:relative;overflow:hidden}
.phase span{position:relative;z-index:1}
.phase::before{
content:"";position:absolute;inset:0;background:var(--olive);
transform:scaleX(0);transform-origin:left;transition:transform .7s cubic-bezier(.22,.61,.36,1);
}
.phase[aria-selected="true"]::before{transform:none}
.phase[aria-selected="true"]{background:color-mix(in srgb,var(--sage) 55%,transparent)}
.year__panel em,.year__panel h3,.year__panel p{transition:opacity .35s ease,transform .35s ease}
.year__panel.swap em,.year__panel.swap h3,.year__panel.swap p{opacity:0;transform:translateY(6px)}
.idh2 :focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.idh2 .skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:.8rem 1.2rem;z-index:20}
.idh2 .skip:focus{left:.5rem;top:.5rem}
@media(prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
.rv{opacity:1;transform:none;transition:none}
.rv--mask .ln,.use{opacity:1;transform:none;transition:none}
.branch path{stroke-dashoffset:0}
.branch ellipse,.tree svg,.tree__shadow,.record>div{opacity:1;transform:none;transition:none}
.hour::after,.step::before,.phase::before{transform:none}
.year__cursor{opacity:1}
.olive-drop,.cue span{animation:none}
.meter i{width:var(--w,0);transition:none}
.cursor__drop{transition:none}
.olive-drop{opacity:.5}
.idh2 *{transition-duration:.01ms !important}
}