/* V22 — heavier typography, tactile logbook surfaces and a living waterline. */
:root{
  --ink-heavy:#24170f;
  --ink-copy:#39281c;
  --paper-light:#f0dfbc;
  --paper-mid:#dcc095;
  --wood-dark:#352015;
  --wood:#6f4328;
  --wood-light:#a46d3c;
  --iron:#243239;
  --foam-bright:#d9f5f1;
}

html{font-size:17px}
body{font-weight:500;letter-spacing:.006em;text-rendering:geometricPrecision}
body,button,input,textarea,select{font-synthesis:weight style}
p,.product-description,.story-lead,.stockist-summary{font-weight:550;line-height:1.62}
h1,h2,h3,h4,h5,h6,h1 *,h2 *,h3 *,h4 *,h5 *,h6 *{
  font-weight:650!important;
  letter-spacing:.005em!important;
  text-rendering:geometricPrecision;
}
.eyebrow,.product-label,.product-count{font-weight:700!important;letter-spacing:.15em!important}

/* Paper and copy receive physical weight without blurring the text layer. */
:is(.float-shell,.float-note,.quality-arena .quality-bubble,.trade-blob,.nutrition-panel,.stockist-toolbar,.stockist-card,.stockist-empty,.faq-item,.buy-dialog,#stockists){
  color:var(--ink-heavy)!important;
  filter:drop-shadow(0 18px 21px rgba(0,7,13,.28));
}
:is(.float-shell,.float-note,.quality-arena .quality-bubble,.trade-blob,.nutrition-panel,.stockist-toolbar,.stockist-card,.stockist-empty,.faq-item,.buy-dialog,#stockists)::before{
  outline:1px solid rgba(57,35,19,.38);
  outline-offset:-2px;
  background-image:var(--log-grain),
    radial-gradient(ellipse at 87% 15%,rgba(255,248,217,.42),transparent 30%),
    radial-gradient(ellipse at 8% 86%,rgba(91,54,25,.18),transparent 34%),
    linear-gradient(100deg,#b58c5d 0%,var(--paper-mid) 5%,var(--paper-light) 45%,#e4cba1 84%,#b88e60 100%)!important;
  box-shadow:inset 0 2px 1px rgba(255,250,226,.88),inset 0 -4px 5px rgba(80,45,21,.35),inset 9px 0 14px rgba(91,51,24,.23),0 2px 0 rgba(21,12,8,.5)!important;
}
:is(.float-shell,.float-note,.quality-arena .quality-bubble,.trade-blob,.nutrition-panel,.stockist-toolbar,.stockist-card,.stockist-empty,.faq-item,.buy-dialog,#stockists) :is(h1,h2,h3,h4,summary,strong){
  color:var(--ink-heavy)!important;
  -webkit-text-fill-color:currentColor!important;
  text-shadow:0 .35px 0 currentColor!important;
}
:is(.float-shell,.float-note,.quality-arena .quality-bubble,.trade-blob,.buy-dialog,#stockists) :is(h1,h2,h3,h4) em{
  color:#6b4527!important;
  -webkit-text-fill-color:#6b4527!important;
  text-shadow:0 .35px 0 #6b4527!important;
}
:is(.float-shell,.float-note,.quality-arena .quality-bubble,.trade-blob,.nutrition-panel,.stockist-toolbar,.stockist-card,.stockist-empty,.faq-item,.buy-dialog,#stockists) :is(p,label,small,span,li){
  color:var(--ink-copy)!important;
  text-shadow:0 .2px 0 rgba(36,23,15,.7)!important;
}
.product-description,.story-lead,.serif-line{font-size:max(1rem,16px)!important}
.quality-arena .quality-bubble p,.faq-item p{font-size:max(.92rem,15px)!important;line-height:1.58!important}
.quality-arena .quality-bubble h3{font-weight:700!important}

/* Heavier, responsive actions. */
.btn,.hero-buy-link,.text-link,.live-inspect,.nutrition-toggle,.circle-btn,.share-btn{
  font-weight:700!important;
  transition:transform .34s cubic-bezier(.2,.85,.25,1.25),box-shadow .28s ease,filter .28s ease!important;
}
.btn{min-height:50px;border-width:2px!important;box-shadow:inset 0 1px rgba(255,255,255,.38),0 5px 0 rgba(35,20,12,.38),0 12px 22px rgba(0,9,15,.22)!important}
@media(hover:hover){
  .btn:hover,.hero-buy-link:hover,.text-link:hover,.live-inspect:hover,.nutrition-toggle:hover{transform:translateY(-2px) scale(1.015);filter:saturate(1.08)}
  .btn:active,.hero-buy-link:active,.text-link:active{transform:translateY(2px) scale(.99)}
}

/* The interface reacts quickly, then settles with underwater mass. */
@keyframes driftA{0%,100%{transform:translate3d(0,-2px,0) rotate(-.12deg)}45%{transform:translate3d(3px,3px,0) rotate(.15deg)}70%{transform:translate3d(1px,2px,0) rotate(.05deg)}}
@keyframes driftB{0%,100%{transform:translate3d(-2px,2px,0) rotate(.12deg)}48%{transform:translate3d(3px,-3px,0) rotate(-.14deg)}72%{transform:translate3d(1px,-1px,0) rotate(-.04deg)}}
@keyframes driftC{0%,100%{transform:translate3d(2px,-1px,0) rotate(.09deg)}52%{transform:translate3d(-3px,3px,0) rotate(-.14deg)}76%{transform:translate3d(-1px,1px,0) rotate(-.04deg)}}
.drift-a{animation-duration:10.8s!important;animation-timing-function:cubic-bezier(.45,.05,.55,.95)!important}
.drift-b{animation-duration:12.4s!important;animation-timing-function:cubic-bezier(.45,.05,.55,.95)!important}
.drift-c{animation-duration:9.8s!important;animation-timing-function:cubic-bezier(.45,.05,.55,.95)!important}

/* Sky above, water below: the header becomes the actual surface. */
.site-header,.site-header.scrolled{
  height:92px!important;
  padding:0 clamp(16px,3vw,46px) 12px!important;
  align-items:flex-end!important;
  overflow:visible!important;
  isolation:isolate;
  background:
    radial-gradient(circle at 72% 7%,rgba(255,234,175,.2),transparent 20%),
    linear-gradient(180deg,#173a4a 0%,#31596a 48%,#1f5368 49%,#0b354d 72%,#08283d 100%)!important;
  border:0!important;
  box-shadow:0 10px 24px rgba(0,17,27,.26)!important;
  backdrop-filter:none!important;
}
.site-header::before{
  content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:
    linear-gradient(108deg,transparent 7%,rgba(226,241,235,.08) 7.5%,transparent 9%),
    linear-gradient(73deg,transparent 62%,rgba(239,229,190,.08) 63%,transparent 65%);
  opacity:.8;
}
.site-header::after{
  content:"";position:absolute;left:0;right:0;bottom:-17px;height:39px;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(17,73,94,.98),rgba(7,40,60,.96));
  clip-path:polygon(0 24%,6% 11%,13% 22%,21% 7%,30% 19%,39% 5%,48% 20%,58% 8%,68% 22%,78% 7%,88% 19%,95% 8%,100% 18%,100% 100%,0 100%);
}
.nav-waterline{
  top:auto!important;bottom:-28px!important;height:58px!important;z-index:-1!important;
  overflow:hidden!important;filter:drop-shadow(0 5px 7px rgba(0,20,31,.32));
}
.nav-waterline::before,.nav-waterline::after{
  width:calc(100% + 960px)!important;height:58px!important;top:0!important;
  background-image:url('../assets/ui/surface-wave.v22.svg')!important;
  background-repeat:repeat-x!important;background-size:960px 58px!important;
  animation-name:surface-current!important;will-change:transform;
}
.nav-waterline::before{opacity:.48!important;animation-duration:21s!important;animation-direction:reverse!important;transform:translateY(7px)}
.nav-waterline::after{opacity:.95!important;animation-duration:14s!important}
@keyframes surface-current{from{background-position-x:0;transform:translate3d(0,0,0)}to{background-position-x:-960px;transform:translate3d(-28px,2px,0)}}

/* Wooden floats replace the polished brass plates. */
.site-header .nav{gap:12px!important;align-items:flex-end!important}
.site-header .nav a,.site-header .header-buy,.site-header .nav-toggle{
  --float-delay:0s;
  position:relative!important;isolation:isolate;
  min-height:46px!important;padding:10px 19px!important;
  color:#f4e7c7!important;text-shadow:0 1px 0 #27160d,0 2px 2px rgba(0,0,0,.58)!important;
  border:2px solid #2c211c!important;border-radius:42% 48% 43% 49% / 28% 31% 35% 32%!important;
  background:
    repeating-linear-gradient(0deg,rgba(255,235,181,.05) 0 2px,rgba(41,21,11,.06) 2px 5px),
    linear-gradient(96deg,var(--wood-dark),var(--wood) 16%,var(--wood-light) 49%,#724326 78%,#3e2518)!important;
  box-shadow:inset 0 2px 1px rgba(255,226,168,.34),inset 0 -5px 6px rgba(35,18,10,.55),0 4px 0 #17242a,0 9px 12px rgba(0,14,22,.4)!important;
  translate:0 0;rotate:-.2deg;
  animation:surface-bob 5.8s cubic-bezier(.45,.05,.55,.95) var(--float-delay) infinite!important;
  transition:transform .3s cubic-bezier(.2,.85,.3,1.3),filter .25s ease!important;
}
.site-header .nav a:nth-child(2){--float-delay:-1.1s}.site-header .nav a:nth-child(3){--float-delay:-2.6s}.site-header .nav a:nth-child(4){--float-delay:-.5s}.site-header .nav a:nth-child(5){--float-delay:-3.8s}.site-header .nav a:nth-child(6){--float-delay:-2s}
.site-header .header-buy{--float-delay:-1.7s}
.site-header .nav-toggle{--float-delay:-3.1s}
@keyframes surface-bob{0%,100%{translate:0 0;rotate:-.3deg}35%{translate:0 -3px;rotate:.45deg}68%{translate:0 2px;rotate:-.1deg}}
.site-header .nav a::before,.site-header .header-buy::before,.site-header .nav-toggle::before{
  content:"";position:absolute;z-index:-1;inset:-2px 14% -2px;border-left:5px solid var(--iron);border-right:5px solid var(--iron);border-radius:3px;opacity:.92;
  box-shadow:inset 1px 0 rgba(255,255,255,.16),1px 0 rgba(0,0,0,.4);
}
.site-header .nav a::after{display:none!important}
.brass-glint{inset:3px!important;border-radius:inherit!important;background:linear-gradient(105deg,transparent 35%,rgba(255,235,185,.12),transparent 62%)!important}
.brass-glint::before{display:none!important}
.site-header :is(.nav a,.header-buy,.nav-toggle):hover{transform:translateY(-2px) scale(1.025)!important;filter:brightness(1.08)}
.site-header :is(.nav a,.header-buy,.nav-toggle).is-flipping{animation:none!important;transform:perspective(500px) rotateY(360deg) scale(.96)!important;transition:transform .52s cubic-bezier(.2,.75,.25,1)!important}
.site-header .nav a.active{color:#fff3c9!important;border-color:#4f3523!important;filter:brightness(1.12);box-shadow:inset 0 2px rgba(255,232,177,.42),inset 0 -5px rgba(33,17,9,.54),0 4px 0 #17242a,0 0 18px rgba(129,217,213,.18)!important}
.header-brand{align-self:center;margin-bottom:-4px;filter:drop-shadow(0 9px 8px rgba(0,16,25,.42))}
.sound-toggle{align-self:flex-end;margin-bottom:2px;background:rgba(5,42,58,.64)!important;border:2px solid rgba(212,238,229,.26)!important;box-shadow:0 5px 9px rgba(0,16,24,.34),inset 0 1px rgba(255,255,255,.14)!important}

/* A readable, story-driven intro progress instrument. */
.intro-dive-status{
  position:absolute;z-index:3;left:clamp(18px,4vw,58px);bottom:clamp(24px,5vh,54px);
  width:min(310px,calc(100vw - 36px));padding:17px 18px 15px;
  color:#e8f5ed;background:linear-gradient(145deg,rgba(5,31,46,.88),rgba(4,20,32,.72));
  border:1px solid rgba(190,231,224,.28);border-radius:5px 15px 6px 12px;
  box-shadow:0 14px 32px rgba(0,8,14,.35),inset 0 1px rgba(255,255,255,.08);
  font-family:var(--font-copy);text-shadow:0 1px 2px rgba(0,0,0,.55);
}
.intro-dive-status__kicker{display:block;font-size:.67rem;font-weight:700;letter-spacing:.18em;color:#e4c276;margin-bottom:4px}
.intro-dive-status strong{display:block;font-size:clamp(1.65rem,4vw,2.3rem);line-height:1;font-weight:700!important;letter-spacing:.05em}
.intro-dive-status__copy{display:block;margin-top:7px;font-size:.8rem;font-weight:600;color:#cfdfdb}
.intro-dive-status__track{display:block;height:5px;margin-top:13px;background:rgba(255,255,255,.11);border-radius:99px;overflow:hidden}
.intro-dive-status__track i{display:block;width:0;height:100%;background:linear-gradient(90deg,#9fdad4,#e8cb83);box-shadow:0 0 11px rgba(143,222,215,.5);transition:width .12s linear}
.intro-skip{font-weight:700!important;background:rgba(5,28,42,.82)!important;border:1px solid rgba(208,236,229,.3)!important;box-shadow:0 8px 20px rgba(0,8,14,.28)!important}
body.is-loading .depth-counter{opacity:0!important}

/* Existing depth UI becomes a compact bathymeter. */
.depth-counter{
  right:16px!important;bottom:18px!important;writing-mode:initial!important;
  display:flex!important;flex-direction:column;align-items:flex-end;gap:2px;
  min-width:106px;padding:9px 11px;color:rgba(226,242,236,.78)!important;
  background:linear-gradient(135deg,rgba(4,28,42,.72),rgba(7,48,61,.46));
  border:1px solid rgba(190,226,218,.18);border-radius:4px 12px 4px 10px;
  box-shadow:0 8px 18px rgba(0,12,19,.25);
}
.depth-counter__label{font-size:8px;letter-spacing:.2em;color:#c7a95f}
.depth-counter strong{font-size:16px;letter-spacing:.1em;color:#edf4e8;font-weight:700!important}
.depth-counter__zone{font-size:8px;letter-spacing:.13em;color:#a9ccc5}
.experience-progress{width:3px!important;background:rgba(213,240,232,.12)!important;box-shadow:0 0 0 1px rgba(207,237,229,.06)}
.experience-progress__fill{box-shadow:0 0 12px rgba(130,220,211,.48)}

/* The opened chest keeps one clear route forward. */
#showTreasure[aria-expanded="true"]{display:none!important}

@media(max-width:1300px){
  .site-header .nav{top:78px!important;background:linear-gradient(160deg,rgba(9,47,62,.96),rgba(4,26,40,.98))!important;border:1px solid rgba(170,218,207,.28)!important;padding:12px!important;box-shadow:0 18px 30px rgba(0,10,17,.46)!important}
  .site-header .nav a{animation:none!important;border-radius:18px 25px 17px 23px!important;justify-content:flex-start}
}
@media(max-width:700px){
  html{font-size:16px}
  .site-header,.site-header.scrolled{height:70px!important;padding:0 12px 8px!important;background:linear-gradient(180deg,#1e4555 0%,#285567 46%,#114157 47%,#082c43 100%)!important}
  .nav-waterline{bottom:-23px!important;height:45px!important}.nav-waterline::before,.nav-waterline::after{height:45px!important;background-size:745px 45px!important}
  .site-header::after{bottom:-13px;height:30px}
  .site-header .header-buy,.site-header .nav-toggle{min-height:42px!important;padding:8px 12px!important;font-size:13px!important}
  .site-header .nav{top:64px!important;left:10px!important;right:10px!important;max-height:calc(100dvh - 78px)!important}
  .header-brand{width:46px!important;height:51px!important;margin-right:auto}
  .sound-toggle{width:42px!important;height:42px!important;min-width:42px!important}
  .intro-dive-status{left:14px;bottom:86px;width:calc(100vw - 28px)}
  .intro-skip{right:14px!important;bottom:20px!important}
  .depth-counter{display:none!important}
  .product-description,.story-lead,.serif-line{font-size:.95rem!important}
  .quality-arena .quality-bubble p,.faq-item p{font-size:.9rem!important}
  .treasure-card{left:42%!important;width:16%!important}
  .treasure-scene.is-open .treasure-card{transform:translate(calc(var(--card-x)*2.2),calc(var(--card-y)*.7)) rotate(var(--card-angle))!important}
  .treasure-scene.is-open .treasure-card:hover:not(:disabled),.treasure-scene.is-open .treasure-card:focus-visible{transform:translate(calc(var(--card-x)*2.2),calc(var(--card-y)*.7 - 12px)) rotate(var(--card-angle))!important}
  .treasure-scene.is-open .treasure-card.is-picked{transform:translate(calc(var(--card-x)*2.2),-65%) rotate(0deg) scale(1.12)!important}
}
@media(max-width:420px){
  .site-header .header-buy{font-size:11px!important;padding-inline:9px!important;letter-spacing:0!important}
  .site-header .nav-toggle{font-size:12px!important}
}
@media(prefers-reduced-motion:reduce){
  .site-header .nav a,.site-header .header-buy,.site-header .nav-toggle,.nav-waterline::before,.nav-waterline::after{animation:none!important;translate:none!important;rotate:none!important}
  .drift-a,.drift-b,.drift-c{animation:none!important}
  .site-header :is(.nav a,.header-buy,.nav-toggle).is-flipping{transform:none!important}
}