/* Ostra — built on tokens.css. Spine values override the starter tokens here. */

:root{
  /* colour: salt-pan paper, granite ink, stripped-cork accent */
  --paper:#F2F0EA; --paper-2:#E8E5DC; --surface:#F7F5F0;
  --ink-rgb:38 37 34;
  --ink:rgb(var(--ink-rgb));
  --ink-2:rgb(var(--ink-rgb) / .68);
  --ink-3:rgb(var(--ink-rgb) / .45);
  --hairline:rgb(var(--ink-rgb) / .12);
  --hairline-2:rgb(var(--ink-rgb) / .22);
  --accent:#9E4316;            /* level marks + the "credited" flag only */
  --accent-ink:#F2F0EA;
  --focus:var(--ink);

  /* type */
  --font-display:"Newsreader", "Source Serif 4", Georgia, serif;
  --font-serif:"Newsreader", Georgia, serif;
  --font-text:"Hanken Grotesk", "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono:"IBM Plex Mono", ui-monospace, monospace;

  --display:clamp(2rem, 1.55rem + 1.3vw, 2.75rem);   /* 32 → 44 */
  --display-wt:300; --display-lh:1.08; --display-ls:-0.015em;
  --h2:clamp(1.75rem, 1.5rem + .8vw, 2.375rem);      /* 28 → 38 */
  --h2-wt:300; --h2-lh:1.1; --h2-ls:-0.01em;
  --h3:clamp(1.75rem, 1.55rem + .5vw, 2.125rem);     /* 28 → 34 */
  --h3-wt:300; --h3-lh:1.05; --h3-ls:-0.01em;
  --finale:clamp(2.25rem, 1.4rem + 2.6vw, 3.5rem);   /* 36 → 56 */
  --body:.875rem; --lede:.9375rem; --ui:.8125rem; --small:.8125rem; --label:.6875rem; --label-ls:.1em;

  /* layout */
  --container:1200px;
  --margin:clamp(1.25rem, -1.5rem + 9.5vw, 7.5rem);  /* 20px at 390 → 120px at 1440 */
  --gap:20px;
  --nav-h:64px;

  /* shape: square camp */
  --r-btn:0; --r-card:0; --r-media:0;
  --btn-h:48px; --btn-h-sm:38px;

  /* motion: the direction's house ease */
  --ease:cubic-bezier(.215,.61,.355,1);
  --t-fast:200ms; --t-ui:300ms; --t-reveal:800ms;
  --stagger:100ms;
}

body{font:400 var(--body)/1.6 var(--font-text)}
.t-display,.t-h2{font-optical-sizing:auto}
.t-label{font-weight:400}
.btn{font:500 var(--ui)/1 var(--font-text);letter-spacing:.01em;padding:1px 24px 0}
.btn--sm{padding-inline:16px}
.btn--wide{width:100%;justify-content:center;height:52px}
.btn--ghost{box-shadow:inset 0 0 0 1px var(--ink-3)}
.btn--ghost:hover{box-shadow:inset 0 0 0 1px var(--ink)}
.btn:disabled{cursor:default;box-shadow:inset 0 0 0 1px var(--hairline-2);color:var(--ink-2)}
.dim{color:var(--ink-2)}
a{transition:color var(--t-fast) var(--ease)}

/* ---------------------------------------------------------------- nav */
.nav{position:sticky;top:0;z-index:20;background:var(--paper);border-bottom:1px solid var(--hairline)}
.nav__in{height:var(--nav-h);width:min(100% - 2 * var(--margin), var(--container));margin-inline:auto;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
.nav__left,.nav__right{display:flex;gap:28px;align-items:center;font-size:var(--ui)}
.nav__right{justify-content:flex-end}
.nav a,.nav__bag{color:var(--ink-2);text-decoration:none;padding:8px 0}
.nav a:hover,.nav__bag:hover{color:var(--ink)}
.nav__bag{background:none;border:0;cursor:pointer;font-size:var(--ui)}
.wordmark{font:300 1.625rem/1 var(--font-display);letter-spacing:.02em;color:var(--ink);text-decoration:none}
.nav .wordmark{color:var(--ink);padding:0}

/* ---------------------------------------------------------------- hero */
.hero{min-height:calc(100svh - var(--nav-h));display:flex;flex-direction:column;padding-top:var(--s-7)}
.hero__grid{flex:1;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:end}
.hero__copy{grid-column:1 / 6;padding-bottom:var(--s-6)}
.hero__copy h1{margin-top:var(--s-5);max-width:11em}
.hero__dek{margin-top:var(--s-5);font-size:var(--lede);max-width:34em;color:var(--ink-2)}
.hero__ctas{margin-top:var(--s-6);display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px}
.hero__more{font-size:var(--ui);color:var(--ink);text-decoration:underline;text-decoration-color:var(--hairline-2);padding:12px 0}
.hero__more:hover{text-decoration-color:currentColor}
.hero__fig{grid-column:7 / 13;justify-self:center;display:flex;flex-direction:column;align-items:center}
.vials__svg{height:min(58svh, 540px);width:auto;max-width:100%;color:var(--ink);overflow:visible}
.vials__art{display:flex;flex-direction:column;width:fit-content;max-width:100%}
.vials__names{list-style:none;margin:14px 0 0;padding:0;width:100%;display:grid;grid-template-columns:repeat(4,1fr);text-align:center;font-size:var(--ui)}
.vials__names .t-label{display:block;color:var(--ink-2);margin-bottom:2px}
.hero__fig figcaption{margin-top:var(--s-5);text-align:center}
.hero__meta{display:flex;justify-content:space-between;gap:var(--gap);border-top:1px solid var(--hairline);padding-block:16px 18px;margin-top:var(--s-6)}

/* svg drawing behaviour */
.level{stroke:var(--accent);stroke-width:1.5;vector-effect:non-scaling-stroke}
.fill{transition:transform 1.4s var(--ease) calc(400ms + var(--i, 0) * 120ms)}
html:not(.no-js) .vials:not(.is-in) .fill{transform:translateY(360px)}
html:not(.no-js) .vials:not(.is-in) .fill--x{transform:translateX(-300px)}
.gr-num{font-family:var(--font-mono)}

/* ---------------------------------------------------------------- statement */
.statement{padding-block:var(--s-10) var(--s-9)}
.statement__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:baseline}
.statement__k{grid-column:1 / 4}
.statement h2{grid-column:4 / 12;max-width:24em}

/* ---------------------------------------------------------------- the four */
.four{padding-bottom:var(--s-9)}
.four__head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:end;margin-bottom:var(--s-8)}
.four__head h2{grid-column:1 / 8}
.four__note{grid-column:9 / 13;color:var(--ink-2);max-width:34em}

.tick-rule{position:relative;height:1px;background:var(--hairline-2)}
.tick-rule::before{content:"";position:absolute;left:0;top:0;width:97px;height:9px;
  background:linear-gradient(to right,var(--ink-3) 1px,transparent 1px) 0 0 / 12px 100%}
.tick-rule span{position:absolute;right:0;top:12px;color:var(--ink-2)}

.eau{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);padding-block:var(--s-7) var(--s-8)}
.eau__id{grid-column:1 / 4}
.eau__name{font:var(--h3-wt) var(--h3)/var(--h3-lh) var(--font-display);letter-spacing:var(--h3-ls);margin:10px 0 6px}
.eau__mat{color:var(--ink-2)}
.eau__place{margin-top:var(--s-5)}
.eau__body{grid-column:5 / 13}
.eau__desc{font-size:var(--lede);max-width:56ch}
.eau__desc i{font-family:var(--font-serif);font-size:1.07em}

.drydown{margin-top:var(--s-7)}
.ruler{position:relative;height:22px;margin-inline:0}
.ruler::before{content:"";position:absolute;left:0;right:0;bottom:0;height:9px;border-right:1px solid var(--ink-3);
  background:
    linear-gradient(to right,var(--ink-3) 1px,transparent 1px) 0 100% / calc(100% / var(--total)) 9px no-repeat repeat-x,
    linear-gradient(to right,var(--hairline-2) 1px,transparent 1px) 0 100% / calc(100% / (var(--total) * 2)) 4px repeat-x}
.ruler::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--hairline-2)}
.seg{position:absolute;top:4px;height:3px;left:calc(var(--a) / var(--total) * 100%);width:calc((var(--b) - var(--a)) / var(--total) * 100%)}
.seg--1,.sw--1{background:var(--ink)}
.seg--2,.sw--2{background:var(--ink-3)}
.seg--3,.sw--3{background:repeating-linear-gradient(to right,var(--ink-3) 0 5px,transparent 5px 8px)}
.seg--3::after{content:"";position:absolute;right:0;top:-5px;width:1px;height:13px;background:var(--ink)}
.ruler__hours{display:flex;justify-content:space-between;margin-top:8px;color:var(--ink-2)}
.ruler__hours span{width:0;display:flex;justify-content:center;white-space:nowrap}
.ruler__hours span:first-child{justify-content:flex-start}
.ruler__hours span:last-child{justify-content:flex-end}

.legend{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap);margin:var(--s-6) 0 0}
.legend dt{display:flex;align-items:center;gap:10px;color:var(--ink-2)}
.legend dd{margin:6px 0 0}
.sw{display:inline-block;width:24px;height:3px;flex:none}

.buy{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;margin-top:var(--s-7)}
.buy__price{font-size:var(--lede);min-width:9em}
.buy__alt{font-size:var(--ui);color:var(--ink-2);padding:10px 0}
.buy__alt:hover{color:var(--ink)}

/* ---------------------------------------------------------------- discovery set */
.set{background:var(--paper-2);padding-block:var(--s-10)}
.set__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:center}
.set__fig{grid-column:1 / 7;color:var(--ink)}
.set__fig svg{width:100%;height:auto;overflow:visible}
.set__fig figcaption{margin-top:var(--s-5)}
.set__copy{grid-column:8 / 13}
.set__copy h2{margin-top:var(--s-5)}
.ledger{width:100%;border-collapse:collapse;margin-top:var(--s-7);font-size:var(--lede)}
.ledger th{font-weight:400;text-align:left;padding:12px 0;border-top:1px solid var(--hairline-2)}
.ledger td{text-align:right;padding:12px 0;border-top:1px solid var(--hairline-2);white-space:nowrap}
.ledger__credit th,.ledger__credit td{color:var(--ink-2)}
.ledger__total th,.ledger__total td{border-top:1px solid var(--ink);font-weight:500}
.flag{font:400 var(--label)/1 var(--font-mono);letter-spacing:var(--label-ls);text-transform:uppercase;font-feature-settings:"case";
  color:var(--accent);margin-left:10px;vertical-align:1px}
.set__facts{list-style:none;padding:0;margin:var(--s-6) 0 var(--s-6);color:var(--ink-2)}
.set__facts li{padding:6px 0 6px 20px;position:relative}
.set__facts li::before{content:"+";position:absolute;left:0;color:var(--ink-3)}

/* ---------------------------------------------------------------- house */
.house__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:start}
.house__copy{grid-column:1 / 7}
.house__copy p{margin-top:var(--s-6);font-size:var(--lede);max-width:46ch;color:var(--ink-2)}
.spec{grid-column:8 / 13;margin:6px 0 0;border-bottom:1px solid var(--hairline-2)}
.spec div{display:grid;grid-template-columns:1fr auto;gap:var(--gap);align-items:baseline;padding:12px 0;border-top:1px solid var(--hairline-2)}
.spec dt{color:var(--ink-2)}
.spec dd{margin:0;text-align:right}

/* ---------------------------------------------------------------- finale */
.finale{padding-block:var(--s-8) var(--s-10)}
.finale__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:end;border-top:1px solid var(--hairline-2);padding-top:var(--s-8)}
.finale__line{grid-column:1 / 8;font:300 var(--finale)/1.02 var(--font-display);letter-spacing:-.02em}
.finale__act{grid-column:9 / 13}
.finale__act p{margin-top:14px;font-size:var(--ui)}

/* ---------------------------------------------------------------- footer */
.foot{border-top:1px solid var(--hairline-2);padding-top:var(--s-8);font-size:var(--ui)}
.foot__cols{display:grid;grid-template-columns:2fr 1fr 1fr 1fr 2.2fr;gap:var(--gap)}
.foot ul{list-style:none;padding:0;margin:14px 0 0}
.foot li a{display:inline-block;padding:4px 0;color:var(--ink);text-decoration:none}
.foot li a:hover{text-decoration:underline;text-decoration-color:var(--hairline-2)}
.wordmark--foot{font-size:2rem}
.foot address{font-style:normal;margin-top:14px;line-height:1.7}
.letters__note{margin-top:14px;color:var(--ink-2)}
.letters__row{display:flex;margin-top:14px;border-bottom:1px solid var(--ink)}
.letters__row input{flex:1;min-width:0;background:none;border:0;padding:12px 0;font-size:var(--ui)}
.letters__row input::placeholder{color:var(--ink-2)}
.letters__row input:focus-visible{outline:none}
.letters__row:focus-within{border-bottom-width:2px;margin-bottom:-1px}
.letters__go{background:none;border:0;padding:12px 0 12px 16px;cursor:pointer;font-weight:500}
.letters__ok{margin-top:14px}

.atelier{margin-top:var(--s-8);border-top:1px solid var(--hairline);padding-top:var(--s-5)}
.atelier__now{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px}
.atelier__time{font:300 1.625rem/1 var(--font-display)}
.atelier__status{color:var(--ink-2)}
.day{position:relative;height:44px;margin-top:var(--s-5)}
.day::before{content:"";position:absolute;left:0;right:0;top:10px;height:8px;border-right:1px solid var(--ink-3);
  background:linear-gradient(to right,var(--ink-3) 1px,transparent 1px) 0 0 / calc(100% / 24) 100% repeat-x}
.day::after{content:"";position:absolute;left:0;right:0;top:18px;height:1px;background:var(--hairline-2)}
.day__open{position:absolute;top:13px;height:3px;left:calc(11 / 24 * 100%);width:calc(8 / 24 * 100%);background:var(--ink)}
.day__now{position:absolute;top:2px;height:24px;width:1.5px;background:var(--accent);left:calc(var(--t, .5) * 100%);
  transition:left var(--t-ui) var(--ease)}
.day__now::before{content:"";position:absolute;top:-2px;left:-2.25px;width:6px;height:6px;border-radius:50%;background:var(--accent)}
.day__hours{position:absolute;left:0;right:0;top:26px;display:flex;justify-content:space-between;color:var(--ink-2)}
.day__hours span{width:0;display:flex;justify-content:center}
.day__hours span:first-child{justify-content:flex-start}
.day__hours span:last-child{justify-content:flex-end}

.foot__base{display:flex;justify-content:space-between;gap:var(--gap);border-top:1px solid var(--hairline);margin-top:var(--s-6);padding-block:18px 28px}

/* ---------------------------------------------------------------- tablet */
@media (max-width: 1080px){
  .hero__copy{grid-column:1 / 7}
  .hero__fig{grid-column:7 / 13}
  .foot__cols{grid-template-columns:1fr 1fr 1fr;row-gap:var(--s-7)}
  .foot__brand{grid-column:1 / -1}
  .letters{grid-column:1 / -1;max-width:420px}
}

/* ---------------------------------------------------------------- mobile: its own composition */
@media (max-width: 760px){
  :root{--nav-h:56px}
  .nav__in{grid-template-columns:auto 1fr}
  .nav__left{display:none}
  .nav__right{gap:18px}
  .nav a,.nav__bag{padding:12px 0}

  .hero{min-height:0;padding-top:var(--s-6)}
  .hero__grid{display:flex;flex-direction:column;align-items:stretch}
  .hero__copy{padding-bottom:0}
  .hero__copy h1{margin-top:var(--s-4)}
  .hero__ctas{flex-direction:column;align-items:stretch;gap:4px}
  .hero__ctas .btn{justify-content:center}
  .hero__more{text-align:center}
  /* deliberate crop: caps, collars and the fill line; the vial bases fall away */
  .hero__fig{margin-top:var(--s-7);width:100%}
  .vials__art{width:100%}
  .vials__svg{width:100%;height:auto;max-height:none;aspect-ratio:480 / 330;overflow:hidden}
  .vials__svg{-webkit-mask-image:linear-gradient(to bottom,#000 78%,transparent);mask-image:linear-gradient(to bottom,#000 78%,transparent)}
  .hero__meta{flex-direction:column;gap:4px;margin-top:var(--s-7)}
  .hero__meta-mid{display:none}

  .statement{padding-block:var(--s-9) var(--s-8)}
  .statement__k{grid-column:1 / -1;margin-bottom:var(--s-4)}
  .statement h2{grid-column:1 / -1}

  .four__head{display:block;margin-bottom:var(--s-7)}
  .four__note{margin-top:var(--s-4)}
  .tick-rule::before{width:49px}
  .eau{display:block;padding-block:var(--s-6) var(--s-7)}
  .eau__id{display:grid;grid-template-columns:1fr auto;align-items:baseline;column-gap:12px;margin-bottom:var(--s-5)}
  .eau__id > .t-label:first-child{grid-column:1 / -1}
  .eau__place{margin-top:0;grid-column:1 / -1}
  .eau__mat{grid-column:1 / -1}
  .legend{grid-template-columns:1fr;gap:12px}
  .legend div{display:grid;grid-template-columns:96px 1fr;align-items:center}
  .legend dd{margin:0}
  .buy{flex-direction:column;align-items:stretch;gap:8px}
  .buy .btn{justify-content:center;height:var(--btn-h)}
  .buy__alt{text-align:center}

  .set{padding-block:var(--s-9)}
  .set__grid{display:flex;flex-direction:column-reverse;gap:var(--s-8)}
  .house__grid{display:block}
  .spec{margin-top:var(--s-7)}
  .finale__grid{display:block}
  .finale__act{margin-top:var(--s-6)}
  .finale__act .btn{width:100%;justify-content:center}

  .foot__cols{grid-template-columns:1fr 1fr}
  .foot__base{flex-direction:column;gap:4px}
  .day__hours span:nth-child(2),.day__hours span:nth-child(4){visibility:hidden}
}

@media (prefers-reduced-motion: reduce){
  .fill{transition:none}
  html:not(.no-js) .vials:not(.is-in) .fill{transform:none}
}