@font-face{
  font-family:"Manjari"; font-style:normal; font-weight:700; font-display:swap;
  src:url("assets/fonts/manjari-700-malayalam.woff2") format("woff2");
  unicode-range:U+0307, U+0323, U+0D00-0D7F, U+200C-200D, U+20B9;
}
@font-face{
  font-family:"Fraunces"; font-style:normal; font-weight:400; font-display:swap;
  src:url("assets/fonts/fraunces-400-latin.woff2") format("woff2");
}
@font-face{
  font-family:"Fraunces"; font-style:italic; font-weight:400; font-display:swap;
  src:url("assets/fonts/fraunces-400-italic-latin.woff2") format("woff2");
}
@font-face{
  font-family:"Figtree"; font-style:normal; font-weight:400 600; font-display:swap;
  src:url("assets/fonts/figtree-variable-latin.woff2") format("woff2");
}
@font-face{
  font-family:"IBM Plex Mono"; font-style:normal; font-weight:400; font-display:swap;
  src:url("assets/fonts/ibm-plex-mono-400-latin.woff2") format("woff2");
}

:root{
  --ink:#2E1A10;
  --paper:#FCEFE3;
  --grey:#6F5646;
  --hair:#EFD8C4;
  --leaf:#2F5D3A;
  --accent:#B3261E;
  --deep:#5A140D;
  --on-accent:#FFF6EC;
  --rust:#A8481F;
  --swash:#F3C7A6;
  --swash2:#EDB790;
  --band:#F9DCC4;
  --panel:#FFF7EF;
  --serif:"Fraunces", ui-serif, Georgia, "Times New Roman", serif;
  --sans:"Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:"IBM Plex Mono", "Manjari", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --ml:"Manjari", "Malayalam Sangam MN", "Noto Sans Malayalam", sans-serif;
  --breath:7s;
}

*{ box-sizing:border-box }
html{ scroll-behavior:smooth }
[id]{ scroll-margin-top:84px }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); line-height:1.65; overflow-x:clip;
}
a{ color:inherit }
a:hover{ color:var(--rust) }
a:focus-visible, summary:focus-visible{
  outline:2px solid var(--accent); outline-offset:3px;
}
img{ max-width:100%; height:auto }
.wrap{ max-width:1120px; margin-inline:auto; padding-inline:24px }
.ml{ font-family:var(--ml); font-weight:700 }
.late{ --rust:var(--accent) }

.strip{
  margin:0; background:var(--ink); color:var(--paper);
  text-align:center; padding:9px 16px; font-size:13px; letter-spacing:.02em;
}
.header{
  position:sticky; top:0; z-index:10;
  background:color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--hair);
}
.header-row{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:24px; min-height:68px;
}
.home-link{
  display:inline-flex; align-items:center; gap:12px; min-height:44px;
  text-decoration:none; color:var(--ink);
  font-family:var(--serif); font-size:22px;
}
.home-link .lark{ width:38px; height:auto; display:block }
.wordmark{ display:block; height:13px; width:auto }
.nav{ display:flex; flex-wrap:wrap; align-items:center; gap:28px }
.nav a{
  display:inline-flex; align-items:center; min-height:44px;
  font-size:15px; text-decoration:none;
}

.hero{
  display:flex; flex-wrap:wrap; align-items:center; gap:48px;
  padding-top:64px; padding-bottom:128px; position:relative;
}
.hero-words{ flex:1 1 400px; min-width:0; display:flex; flex-direction:column; gap:28px }
.eyebrow{
  margin:0; font-family:var(--mono); font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--grey);
}
.hero h1{
  margin:0; font-family:var(--serif); font-weight:400;
  font-size:clamp(28px, 3.7vw, 50px); line-height:1.16; text-wrap:balance;
}
.quiet{
  margin:0; font-size:clamp(16px, 1.5vw, 19px); line-height:1.55;
  color:var(--grey); text-wrap:pretty;
}
.hero-art{
  flex:1.1 1 400px; min-width:0; position:relative;
  display:flex; justify-content:center; align-items:center;
}
.hero-oil{
  position:absolute; left:0; top:0; width:100%; height:100%;
  overflow:visible; pointer-events:none;
}
.hero-goo{ filter:url(#oil-goo-lg); opacity:.36 }
.hero-goo-dark{ filter:url(#oil-goo-lg); opacity:.2 }
.scene{ position:relative; width:100%; max-width:620px; transform-origin:50% 62% }
.scene img{ position:relative; display:block; width:100%; height:auto }
.scene-salt{
  position:absolute; inset:0; width:100%; height:100%;
  overflow:visible; pointer-events:none;
}
.hgrain{ opacity:0 }
.hg2{ --dx:14px } .hg3{ --dx:-22px } .hg4{ --dx:8px } .hg5{ --dx:-12px }
.water{
  position:absolute; left:0; bottom:14px; width:100%; height:112px;
  overflow:visible; pointer-events:none;
}
.water-a{
  fill:none; stroke:var(--rust); stroke-width:1.6; stroke-linecap:round;
  stroke-dasharray:12 13;
}
.water-b{
  fill:none; stroke:#E09A3A; stroke-width:1.2; stroke-linecap:round;
  stroke-dasharray:3 22; transform:translateY(9px);
}

.jar-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:12px;
  min-height:54px; padding:0 26px; border-radius:999px; white-space:nowrap;
  border:1.5px solid var(--ink); color:var(--ink); text-decoration:none;
  font-size:17px; font-weight:600;
  background-image:linear-gradient(to top, var(--deep) 0 50%, transparent 50% 100%);
  background-size:100% 204%; background-position:0 0;
  transition:background-position .55s cubic-bezier(.45,0,.55,1), color .35s ease, border-color .35s ease;
}
.jar-btn:hover{ background-position:0 100%; color:#FBF4E6; border-color:var(--deep) }
.jarglyph{ width:13px; height:18px; flex:none }
.jarfill{ clip-path:inset(62% 0 0 0) }

.band{
  position:relative; overflow:hidden; text-align:center;
  background:var(--band); border-top:1px solid var(--hair); border-bottom:1px solid var(--hair);
  padding:128px 24px 56px;
  --swash:#F0BE9A; --swash2:#E9AE86;
}
.band-ml{
  margin:0; font-size:clamp(42px, 8.4vw, 116px); line-height:1.3; color:var(--rust);
}
.band-en{
  position:relative; display:inline-block; margin:20px auto 0;
  font-family:var(--serif); font-style:italic;
  font-size:clamp(18px, 2vw, 24px); color:var(--grey);
}
.pakam{ border-top:0; position:relative; margin-top:36px; text-align:center }
.pakam > summary{
  display:inline-flex; justify-content:center; gap:10px; padding:0 10px;
  font-size:16px; list-style:none; cursor:pointer; min-height:48px; align-items:center;
}
.pakam > summary::-webkit-details-marker{ display:none }
.pakam > summary span:first-child{ text-decoration:underline; text-underline-offset:6px }
.pakam-body{
  display:flex; flex-wrap:wrap; align-items:center; gap:64px;
  max-width:1072px; margin-inline:auto; padding-top:56px; padding-bottom:72px; text-align:left;
}
.pakam-art{ flex:1 1 300px; min-width:0; display:flex; flex-direction:column; align-items:center; gap:20px }
.pakam-words{ flex:1.3 1 420px; min-width:0; display:flex; flex-direction:column; gap:24px }
.fillword{
  margin:0; font-size:clamp(72px, 10vw, 150px); line-height:1.25; font-weight:700;
  background-image:linear-gradient(to top, var(--rust) 0 50%, #DFB496 50% 100%);
  background-size:100% 200%; background-position:0 100%;
  -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
}
.salt{ width:min(100%, 420px); height:auto; margin-top:12px; overflow:visible }
.hand{ transform-origin:246px 54px }
.heap{ transform-origin:173px 181px }
.grain{ opacity:0 }
.gr2{ --dx:4px } .gr3{ --dx:-5px } .gr4{ --dx:2px }
.gr5{ --dx:-3px } .gr6{ --dx:5px }
.enough{ margin:0; font-family:var(--serif); font-style:italic; font-size:clamp(20px, 2vw, 24px); color:var(--grey) }
.lede{
  font-family:var(--serif); font-size:clamp(22px, 2.3vw, 30px);
  line-height:1.35; margin:0; max-width:30rem; text-wrap:pretty;
}
.body{ margin:0; font-size:17px; line-height:1.7; max-width:34rem; text-wrap:pretty }

.dark{
  background:#5A140D; color:#FBF4E6; padding:120px 0;
  --swash:#7E2A1B; --swash2:#8C3322; --rust:#FBF4E6;
}
.dark .eyebrow{ color:rgba(251,244,230,.7) }
.dark a{ color:#FBF4E6 }
.split{ display:flex; flex-wrap:wrap; align-items:center; gap:64px }
.split-narrow{ flex:1 1 300px; min-width:0 }
.split-wide{ flex:1.35 1 420px; min-width:0; display:flex; flex-direction:column; gap:28px }
.portrait{ display:block; width:100%; height:auto; max-width:420px; margin:0 auto }
.places{ display:flex; align-items:center; gap:16px; max-width:34rem }
.place{ flex:1 1 0; min-width:0; display:flex; flex-direction:column; gap:4px }
.place-right{ text-align:right }
.place-name{
  font-family:var(--mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase;
}
.place-what{ font-size:14px; color:rgba(251,244,230,.72) }
.wire{ position:relative; flex:0 0 96px; height:1px; background:rgba(251,244,230,.4) }
.wire .traveller{
  position:absolute; top:-3px; left:0; width:7px; height:7px;
  margin-left:-3px; border-radius:50%; background:var(--paper);
}

.section{ padding:112px 0 }
.head{
  display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between;
  gap:20px 40px; margin-bottom:56px;
}
.head > div{ display:flex; flex-direction:column; gap:12px }
h2.hs, .hs{
  position:relative; isolation:isolate; width:fit-content; max-width:100%;
  margin:0; font-family:var(--serif); font-weight:400;
  font-size:clamp(30px, 3.4vw, 44px); line-height:1.15;
}
.swash{
  position:absolute; left:-8px; bottom:-.08em; width:calc(100% + 22px); height:.55em;
  z-index:-1; overflow:visible; pointer-events:none; transform-origin:0 50%;
}
.swash path{ fill:none; stroke:var(--swash); stroke-width:6; stroke-linecap:round }
.swash path:nth-child(2n){ stroke:var(--swash2) }
.claims{
  list-style:none; margin:0; padding:0 0 6px; display:flex; flex-wrap:wrap; gap:8px 24px;
  font-size:14px; color:var(--leaf);
}

.cards{
  display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:56px 36px;
}
.card{ display:flex; flex-direction:column; gap:14px; min-width:0 }
.shelf{
  position:relative; display:flex; justify-content:center; align-items:flex-end;
  height:340px; margin-bottom:4px;
}
.jpool{
  position:absolute; left:50%; top:50%; width:320px; height:340px;
  margin:-170px 0 0 -160px; pointer-events:none;
}
.jpool-in{
  display:block; width:100%; height:100%; overflow:visible;
  transform-origin:50% 93%; transition:transform .6s cubic-bezier(.3,.7,.2,1);
}
.card:hover .jpool-in{ transform:scale(1.1) }
.pool-goo{ filter:url(#oil-goo); opacity:.42 }
.pool-dark{ filter:url(#oil-goo); opacity:.24 }
.pool-oil, .lobe, .bead, .sheen{ transform-box:fill-box; transform-origin:50% 50% }
.sheen{
  fill:none; stroke:#FFF6E0; stroke-width:3; stroke-linecap:round; opacity:.55;
}
.ing{
  position:absolute; left:50%; bottom:-10px; width:min(380px, 116%);
  transform:translateX(-50%); pointer-events:none;
}
.ing img{
  display:block; width:100%; height:auto; transform-origin:50% 92%;
  transition:transform .6s cubic-bezier(.3,.7,.2,1);
}
.card:hover .ing img{ transform:scale(1.045) }
.jar-link{ position:relative; z-index:1; line-height:0; color:inherit }
.jar-link:hover{ color:inherit }
.jar{
  position:relative; z-index:1; height:280px; width:auto; max-width:none;
  transition:transform .5s cubic-bezier(.3,.7,.2,1);
}
.card:hover .jar{ transform:translateY(-8px) }
.card:nth-of-type(2){ --d:calc(var(--breath) * .14) }
.card:nth-of-type(3){ --d:calc(var(--breath) * .28) }
.meta{ margin:0; font-family:var(--mono); font-size:12px; letter-spacing:.04em; color:var(--grey) }
.name{ margin:0; font-family:var(--serif); font-weight:400; font-size:28px; line-height:1.15 }
.taste{
  display:flex; align-items:center; gap:10px; margin:0;
  font-family:var(--mono); font-size:14px; color:var(--grey);
}
.line{ margin:0; font-size:16px; line-height:1.55 }
.card details{ border-top:1px solid var(--hair) }
.card summary{
  list-style:none; cursor:pointer; min-height:48px;
  display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:15px;
}
.card summary::-webkit-details-marker{ display:none }
.plus{ font-family:var(--mono); font-size:18px; line-height:1; transition:transform .3s ease }
.card details[open] .plus{ transform:rotate(45deg) }
.taste-body{ margin:0 0 16px; font-size:16px; line-height:1.65 }
.action{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-top:auto; padding-top:16px; border-top:1px solid var(--hair);
}
.price{ margin:0; font-family:var(--mono); font-size:22px }
.price small{ display:block; margin-top:2px; font-family:var(--sans); font-size:13px; color:var(--grey) }
.price .was{
  color:var(--grey);
  text-decoration:line-through;
  text-decoration-thickness:1.5px;
  font-size:.75em;
  margin-right:.35em;
  font-weight:400;
}
.price .now{ color:var(--accent) }
.buy{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:48px; padding:0 22px; border:1.5px solid var(--accent); border-radius:999px;
  background-color:var(--accent);
  background-image:linear-gradient(to top, var(--deep) 0 50%, transparent 50% 100%);
  background-size:100% 204%; background-position:0 0;
  color:var(--on-accent); font-size:16px; font-weight:600; text-decoration:none; white-space:nowrap;
  transition:background-position .55s ease;
}
.buy:hover{ background-position:0 100%; color:var(--on-accent); border-color:var(--deep) }
.note{ max-width:40rem; margin:64px auto 0; text-align:center; font-size:15px; color:var(--grey) }

.rule{ border-top:1px solid var(--hair); padding:120px 0 }
.track{
  position:relative; height:1px; background:var(--hair); margin-bottom:32px;
}
.track .traveller{
  position:absolute; top:-4px; left:0; width:9px; height:9px;
  margin-left:-4px; border-radius:50%; background:var(--rust);
}
.steps{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:40px;
}
.steps li{ display:flex; flex-direction:column; gap:12px }
.step-n{ font-family:var(--mono); font-size:14px; color:var(--rust) }
.steps h3{ margin:0; font-family:var(--serif); font-weight:400; font-size:26px }
.asides{
  display:grid; grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:32px 40px; margin-top:64px; padding-top:32px; border-top:1px solid var(--hair);
}
.asides p{ margin:0; font-size:16px; color:var(--grey) }
.rupee{ font-family:var(--mono); color:var(--ink) }

.shot{ position:relative }
.shot img{ display:block; width:100%; height:auto }
.shot-lines{
  position:absolute; inset:0; width:100%; height:100%; pointer-events:none;
}
.shot-dot{
  position:absolute; width:14px; height:14px; margin:-7px 0 0 -7px;
  border-radius:50%; background:#FCEFE3;
  box-shadow:0 0 0 1.5px rgba(46,26,16,.45), 0 0 0 7px rgba(252,239,227,.28);
}
.tag{
  position:absolute; width:30%; display:flex; flex-direction:column; gap:10px;
  padding:20px 22px 18px; background:rgba(252,239,227,.92);
}
.tag-a{ left:66%; top:10% }
.tag-b{ left:68.5%; top:61% }
.tag h2{ font-size:23px; line-height:1.2 }
.tag p{ margin:0; font-size:15px; line-height:1.55; text-wrap:pretty }
.tag a{ font-size:15px }

.name-block{
  max-width:36rem; margin-inline:auto; padding-inline:24px;
  display:flex; flex-direction:column; align-items:center; gap:28px; text-align:center;
}
.name-block .hs{ align-self:center }
.creek{ width:min(100%, 600px); height:60px }

.kitchen-cta{ padding:72px 0 96px }
.kitchen-cta .wrap{ display:flex; justify-content:center }
@media (max-width:640px){
  .kitchen-cta{ padding:48px 0 64px }
}

footer.foot{ border-top:1px solid var(--hair); padding:56px 0 72px }
.foot-in{ display:flex; flex-direction:column; gap:24px }
.foot .wordmark{ height:14px }
.abroad{ margin:0; max-width:36rem; font-size:16px; line-height:1.7 }
.legal{
  margin:0; max-width:44rem; font-family:var(--mono); font-size:12px;
  line-height:1.8; color:var(--grey);
}
.legal a{ color:var(--grey) }
.foot-links{ display:flex; flex-wrap:wrap; gap:4px 24px }
.foot-links a{ display:inline-flex; align-items:center; min-height:44px; font-size:14px; text-underline-offset:5px }

.policy{
  display:grid; grid-template-columns:200px minmax(0, 1fr);
  gap:72px; align-items:start; padding-top:64px; padding-bottom:112px;
}
.policy-nav{ position:sticky; top:100px; display:flex; flex-direction:column }
.policy-nav a{
  display:flex; align-items:center; min-height:44px; padding-left:16px;
  border-left:1px solid var(--hair); font-size:15px; text-decoration:none; color:var(--grey);
}
.policy-nav a[aria-current]{ border-left:2px solid var(--accent); color:var(--ink); font-weight:600 }
.policy-body{ display:flex; flex-direction:column; gap:20px; max-width:36rem }
.policy-body h1{
  font-family:var(--serif); font-weight:400; font-size:clamp(38px, 4.6vw, 60px);
  line-height:1.08; margin:0 0 12px;
}
.policy-body h2{ font-family:var(--serif); font-weight:400; font-size:24px; margin:28px 0 0 }
.policy-body p{ margin:0; font-size:17px; line-height:1.7 }
.policy-lines{
  margin:0; padding:16px 20px; list-style:none;
  font-family:var(--mono); font-size:14px; line-height:1.9;
  background:var(--panel); border:1px solid var(--hair); border-radius:14px;
}

.batch{ max-width:880px; margin-inline:auto; padding:56px 24px 96px }
.batch-no{
  display:block; font-family:var(--mono); font-size:14px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--accent);
}
.batch h1{
  margin:14px 0 0; font-family:var(--serif); font-weight:400;
  font-size:clamp(38px, 4.6vw, 60px); line-height:1.08;
}
.batch-top{
  display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
  gap:64px; align-items:start; padding:56px 0 88px;
}
.facts{ list-style:none; margin:0; padding:6px 0 0 34px; display:flex; flex-direction:column; gap:30px }
.facts li{ position:relative; font-size:17px; line-height:1.55 }
.facts li::before{
  content:""; position:absolute; left:-34px; top:7px; width:13px; height:13px;
  border-radius:50%; background:var(--paper); box-shadow:0 0 0 1.5px var(--accent);
}
.facts li:last-child::before{ background:var(--accent) }
.batch-photos{ position:relative }
.batch-pool{
  position:absolute; left:50%; bottom:-28px; width:118%; height:200px;
  margin-left:-59%; pointer-events:none;
}
.batch-pool svg{ display:block; width:100%; height:100%; overflow:visible }
.batch-oil{ transform-box:fill-box; transform-origin:50% 50% }
.batch-photo{ position:relative; width:100%; height:auto; display:block; border-radius:4px }
.batch-story{
  margin:0 0 88px; font-family:var(--serif); font-style:italic;
  font-size:clamp(21px, 2.2vw, 27px); line-height:1.5; max-width:40rem;
}
.batch-row{
  border-top:1px solid var(--hair); padding:64px 0;
  display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 2.2fr); gap:24px 56px;
}
.batch-row h2{
  margin:6px 0 0; font-family:var(--mono); font-weight:400; font-size:12px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--grey);
}
.batch-row p{ margin:0 0 16px; font-size:17px; line-height:1.7; max-width:36rem }
.claim{ color:var(--leaf) }
.marks{ display:flex; flex-wrap:wrap; gap:5px; margin-top:8px }
.marks svg{ width:12px; height:17px }
.marks .you{ fill:var(--accent) }
.marks .other{ fill:none; stroke:#DDBFA5; stroke-width:1 }
.batch-end{ border-top:1px solid var(--hair); padding:64px 0 0; display:flex; justify-content:center }

.product-back{
  display:inline-flex; align-items:center; gap:8px; margin-top:28px;
  font-size:15px; color:var(--grey); text-decoration:none;
}
.product-hero{
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:72px; align-items:center; padding:40px 0 96px;
}
.product-art{
  position:relative; display:flex; justify-content:center; align-items:flex-end;
  min-height:560px;
}
.product-pool{
  position:absolute; left:50%; bottom:-34px; width:min(520px, 100%); height:552px;
  transform:translateX(-50%); pointer-events:none;
}
.product-pool svg{ display:block; width:100%; height:100%; overflow:visible }
.product-ing{
  position:absolute; left:50%; bottom:-22px; width:min(560px, 112%);
  transform:translateX(-50%); pointer-events:none;
}
.product-ing img{ display:block; width:100%; height:auto }
.product-photo{ position:relative; height:470px; width:auto; display:block }
.product-words{ display:flex; flex-direction:column; gap:22px; min-width:0 }
.product-words h1{
  margin:0; font-family:var(--serif); font-weight:400;
  font-size:clamp(40px, 5vw, 64px); line-height:1.05;
}
.product-buy{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:16px 24px; padding-top:24px; border-top:1px solid var(--hair);
}
.product-buy .price{ font-size:30px }
.ship-note{ margin:0; font-family:var(--mono); font-size:13px; line-height:1.7; color:var(--grey) }
.product-block{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);
  gap:28px 72px; align-items:start;
}
.product-block h2, .product-note h2{
  margin:0; font-family:var(--serif); font-weight:400;
  font-size:clamp(28px, 3vw, 40px); line-height:1.15;
}
.product-copy{ display:flex; flex-direction:column; gap:28px; min-width:0 }
.product-copy p{ margin:0; font-size:18px; line-height:1.7 }
.facts-grid{
  margin:4px 0 0; display:grid; grid-template-columns:repeat(2, minmax(0,1fr));
  column-gap:40px; font-family:var(--mono); font-size:13px; line-height:1.7;
}
.facts-grid > div{
  display:flex; flex-direction:column; gap:2px; padding:12px 0;
  border-bottom:1px solid var(--hair); min-width:0;
}
.facts-grid dt{ color:var(--grey) }
.facts-grid dd{ margin:0; overflow-wrap:anywhere }
.pcards{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:32px }
.pcard{
  display:flex; flex-direction:column; gap:12px; padding:24px;
  border:1px solid var(--hair); border-radius:20px; background:var(--panel); min-width:0;
}
.pcard-here{ border-color:var(--accent) }
.pcard-art{
  position:relative; display:flex; justify-content:center; align-items:flex-end;
  height:230px; margin-bottom:8px;
}
.pcard-ing{
  position:absolute; left:50%; bottom:-8px; width:112%;
  transform:translateX(-50%); pointer-events:none;
}
.pcard-ing img, .pcard-art .jar{ height:auto }
.pcard-art .jar{ position:relative; height:200px }
.pcard h3{ margin:0; font-family:var(--serif); font-weight:400; font-size:26px }
.pcard h3 a{ text-decoration:none }
.pcard-foot{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; margin-top:auto;
}
.here-note{ font-size:15px; color:var(--grey) }
.product-note{
  display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);
  gap:48px; align-items:center;
}
.product-note img{ display:block; width:100%; height:auto }
.product-note .stack{ display:flex; flex-direction:column; gap:16px }
.product-note p{ margin:0; font-size:16px; line-height:1.65 }
.record-link{ font-size:16px }

@media (max-width:980px){
  .shot-lines, .shot-dot{ display:none }
  .tag{ position:static; width:auto; padding:28px 0 0; background:transparent }
  .tag h2{ font-size:26px }
  .tag p{ font-size:16px }
}
@media (max-width:900px){
  .cards, .steps, .asides, .batch-top, .batch-row,
  .product-hero, .product-block, .product-note, .pcards, .facts-grid{
    grid-template-columns:1fr;
  }
  .product-art{ min-height:420px }
  .product-photo{ height:360px }
  .product-pool{ height:420px }
  .product-ing, .pcard-ing{ width:100% }
  .product-hero{ padding-bottom:72px; gap:40px }
  .shelf{ height:320px }
  .section{ padding:72px 0 }
  .rule, .dark{ padding:72px 0 }
  .hero{ padding-bottom:96px }
  .band{ padding:88px 24px 48px }
}
@media (max-width:760px){
  .header-row{ gap:10px }
  .home-link .lark{ width:30px }
  .wordmark{ height:11px }
  .nav{ gap:14px }
  .nav a{ font-size:14px }
  .policy{ grid-template-columns:1fr; gap:32px; padding-top:32px }
  .policy-nav{ position:static; flex-direction:row; flex-wrap:wrap; gap:0 18px }
  .policy-nav a{ padding-left:0; border-left:0 }
  .policy-nav a[aria-current]{ border-bottom:2px solid var(--accent) }
}
@keyframes oil-breathe{ 0%,100%{ transform:scale(.95) } 42%{ transform:scale(1.045) } }
@keyframes batch-oil-breathe{ 0%,100%{ transform:scale(.96) } 42%{ transform:scale(1.035) } }
@keyframes lobe-a{ 0%,100%{ transform:translate(26px,6px) scale(.9) } 50%{ transform:translate(-30px,-8px) scale(1.12) } }
@keyframes lobe-b{ 0%,100%{ transform:translate(-22px,-6px) scale(1.08) } 50%{ transform:translate(30px,10px) scale(.9) } }
@keyframes lobe-c{ 0%,100%{ transform:translate(-36px,-10px) scale(.94) } 50%{ transform:translate(40px,12px) scale(1.1) } }
@keyframes bead-a{ 0%,12%{ transform:translate(0,0) scale(1) } 46%,58%{ transform:translate(78px,-34px) scale(.5) } 92%,100%{ transform:translate(0,0) scale(1) } }
@keyframes bead-b{ 0%,10%{ transform:translate(0,0) scale(1) } 50%,64%{ transform:translate(-70px,42px) scale(.5) } 94%,100%{ transform:translate(0,0) scale(1) } }
@keyframes bead-c{ 0%,20%{ transform:translate(0,0) scale(1) } 52%,60%{ transform:translate(34px,-52px) scale(.5) } 96%,100%{ transform:translate(0,0) scale(1) } }
@keyframes lobe-sa{ 0%,100%{ transform:translate(10px,2px) scale(.92) } 50%{ transform:translate(-13px,-2px) scale(1.1) } }
@keyframes lobe-sb{ 0%,100%{ transform:translate(-9px,-2px) scale(1.08) } 50%{ transform:translate(13px,3px) scale(.92) } }
@keyframes bead-sa{ 0%,12%{ transform:translate(0,0) scale(1) } 46%,58%{ transform:translate(34px,-9px) scale(.55) } 92%,100%{ transform:translate(0,0) scale(1) } }
@keyframes bead-sb{ 0%,10%{ transform:translate(0,0) scale(1) } 50%,64%{ transform:translate(-36px,10px) scale(.55) } 94%,100%{ transform:translate(0,0) scale(1) } }
@keyframes sheen-glide{ 0%,100%{ transform:translate(-8px,4px); opacity:.15 } 42%{ transform:translate(22px,-6px); opacity:.85 } }
@keyframes ing-breathe{
  0%,100%{ transform:translateX(-50%) translateY(0) }
  42%{ transform:translateX(-50%) translateY(-3px) }
}
@keyframes taste-note{ 0%,100%{ color:var(--grey) } 14%,30%{ color:var(--ink) } 44%{ color:var(--grey) } }
@keyframes buy-breathe{
  0%,100%{ transform:scale(1); box-shadow:0 0 0 0 rgba(179,38,30,.38) }
  42%{ transform:scale(1.04); box-shadow:0 0 0 10px rgba(179,38,30,0) }
}
@keyframes breathe-text{
  0%,100%{ opacity:.82; letter-spacing:0 }
  42%{ opacity:1; letter-spacing:.012em }
}
@keyframes travel{
  0%{ left:0; opacity:0 } 8%{ opacity:1 } 92%{ opacity:1 } 100%{ left:100%; opacity:0 }
}
@keyframes flow{ to{ stroke-dashoffset:-240 } }
@keyframes water-flow{ to{ stroke-dashoffset:-250 } }
@keyframes tide{
  0%,100%{ transform:translateY(3px); opacity:.62 }
  42%{ transform:translateY(-4px); opacity:1 }
}
@keyframes breathe-scene{ 0%,100%{ transform:scale(1) } 42%{ transform:scale(1.018) } }
@keyframes hero-drop{
  0%{ opacity:0; transform:translate(0,0) }
  2%{ opacity:1; transform:translate(0,6px) }
  15%{ opacity:1; transform:translate(var(--dx,0px),264px) }
  17%,100%{ opacity:0; transform:translate(var(--dx,0px),264px) }
}
@keyframes swash-breathe{
  0%,100%{ opacity:.74; transform:scaleX(.975) } 42%{ opacity:1; transform:scaleX(1.015) }
}
@keyframes jar-fill{ 0%,100%{ clip-path:inset(72% 0 0 0) } 42%,70%{ clip-path:inset(24% 0 0 0) } }
@keyframes fill-word{ 0%,100%{ background-position:0 0 } 42%,74%{ background-position:0 100% } }
@keyframes rub{
  0%{ transform:rotate(0deg) } 6%{ transform:rotate(-3deg) } 12%{ transform:rotate(2deg) }
  18%{ transform:rotate(-3deg) } 24%{ transform:rotate(2deg) } 30%{ transform:rotate(-2deg) }
  36%{ transform:rotate(1deg) } 42%,100%{ transform:rotate(0deg) }
}
@keyframes grain-drop{
  0%{ opacity:0; transform:translate(0,0) }
  1.5%{ opacity:1; transform:translate(0,2px) }
  11%{ opacity:1; transform:translate(var(--dx,0px),56px) }
  12.5%,100%{ opacity:0; transform:translate(var(--dx,0px),56px) }
}
@keyframes heap-grow{
  0%{ transform:scale(.1); opacity:0 } 6%{ opacity:1 }
  42%,74%{ transform:scale(1); opacity:1 } 100%{ transform:scale(.1); opacity:0 }
}
@keyframes enough-fade{ 0%,30%{ opacity:.2 } 44%,74%{ opacity:1 } 100%{ opacity:.2 } }
@keyframes unfold{ from{ opacity:0; transform:translateY(18px) } to{ opacity:1; transform:none } }
@keyframes dot-pulse{
  0%,100%{ box-shadow:0 0 0 1.5px rgba(46,26,16,.45), 0 0 0 4px rgba(252,239,227,.3) }
  42%{ box-shadow:0 0 0 1.5px rgba(46,26,16,.45), 0 0 0 11px rgba(252,239,227,.12) }
}
@keyframes rise{ from{ opacity:0; transform:translateY(26px) } to{ opacity:1; transform:none } }
@keyframes mark-in{
  0%{ opacity:0; transform:translateY(3px) scale(.85) }
  100%{ opacity:1; transform:none }
}
@media (prefers-reduced-motion:no-preference){
  .pool-oil{ animation:oil-breathe var(--breath) cubic-bezier(.45,0,.55,1) infinite }
  .batch-oil{ animation:batch-oil-breathe var(--breath) cubic-bezier(.45,0,.55,1) infinite }
  .lobe-a{ animation:lobe-a calc(var(--breath) * 1.5) ease-in-out infinite }
  .lobe-b{ animation:lobe-b calc(var(--breath) * 2) ease-in-out infinite }
  .lobe-c{ animation:lobe-c calc(var(--breath) * 2.5) ease-in-out infinite }
  .bead-a{ animation:bead-a calc(var(--breath) * 2) ease-in-out infinite }
  .bead-b{ animation:bead-b calc(var(--breath) * 3) ease-in-out infinite }
  .bead-c{ animation:bead-c calc(var(--breath) * 2.5) ease-in-out infinite }
  .lobe-sa{ animation:lobe-sa calc(var(--breath) * 1.5) ease-in-out infinite }
  .lobe-sb{ animation:lobe-sb calc(var(--breath) * 2) ease-in-out infinite }
  .bead-sa{ animation:bead-sa calc(var(--breath) * 2) ease-in-out infinite }
  .bead-sb{ animation:bead-sb calc(var(--breath) * 3) ease-in-out infinite }
  .sheen{ animation:sheen-glide var(--breath) cubic-bezier(.45,0,.55,1) infinite }
  .ing{ animation:ing-breathe var(--breath) cubic-bezier(.45,0,.55,1) infinite }
  .tw{ animation:taste-note calc(var(--breath) * 1.2) ease-in-out infinite }
  .tw2{ animation-delay:calc(var(--breath) * .4) }
  .tw3{ animation-delay:calc(var(--breath) * .8) }
  .buy{ animation:buy-breathe var(--breath) cubic-bezier(.45,0,.55,1) infinite }
  .buy, .ing, .pool-oil, .sheen{ animation-delay:var(--d, 0s) }
  .sheen-b{ animation-delay:calc(var(--breath) * .3) }
  .band-ml{ animation:breathe-text var(--breath) cubic-bezier(.45,0,.55,1) infinite }
  .swash{ animation:swash-breathe var(--breath) cubic-bezier(.45,0,.55,1) infinite }
  .jarfill{ animation:jar-fill var(--breath) cubic-bezier(.45,0,.55,1) infinite }
  .scene{ animation:breathe-scene var(--breath) cubic-bezier(.45,0,.55,1) infinite }
  .hgrain{ animation:hero-drop var(--breath) cubic-bezier(.5,0,.9,.6) infinite both }
  .hg2{ animation-delay:calc(var(--breath) * .06) }
  .hg3{ animation-delay:calc(var(--breath) * .12) }
  .hg4{ animation-delay:calc(var(--breath) * .18) }
  .hg5{ animation-delay:calc(var(--breath) * .24) }
  .tide{ animation:tide var(--breath) cubic-bezier(.45,0,.55,1) infinite }
  .water-a, .water-b{ animation:water-flow calc(var(--breath) * 2) linear infinite }
  .fillword{ animation:fill-word calc(var(--breath) * 1.2) cubic-bezier(.45,0,.55,1) infinite }
  .hand{ animation:rub calc(var(--breath) * 1.2) ease-in-out infinite }
  .enough{ animation:enough-fade calc(var(--breath) * 1.2) ease-in-out infinite }
  .heap{ animation:heap-grow calc(var(--breath) * 1.2) cubic-bezier(.45,0,.55,1) infinite }
  .grain{ animation:grain-drop calc(var(--breath) * 1.2) cubic-bezier(.5,0,.9,.6) infinite both }
  .gr2{ animation-delay:calc(var(--breath) * .07) }
  .gr3{ animation-delay:calc(var(--breath) * .14) }
  .gr4{ animation-delay:calc(var(--breath) * .21) }
  .gr5{ animation-delay:calc(var(--breath) * .28) }
  .gr6{ animation-delay:calc(var(--breath) * .35) }
  .traveller{ animation:travel calc(var(--breath) * 2) cubic-bezier(.45,0,.55,1) infinite }
  .creek path{ animation:flow calc(var(--breath) * 2) linear infinite }
  .shot-dot{ animation:dot-pulse var(--breath) cubic-bezier(.45,0,.55,1) infinite }
  .pakam[open] .pakam-body{ animation:unfold .9s cubic-bezier(.45,0,.55,1) both }
  .marks svg{
    animation:mark-in 260ms ease-out both;
    animation-delay:calc(var(--i, 0) * 18ms);
  }
}
@supports (interpolate-size: allow-keywords){
  @media (prefers-reduced-motion:no-preference){
    .pakam{ interpolate-size:allow-keywords }
    .pakam::details-content{
      block-size:0; overflow:clip;
      transition:block-size .8s cubic-bezier(.45,0,.55,1), content-visibility .8s allow-discrete;
    }
    .pakam[open]::details-content{ block-size:auto }
  }
}
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){
    .rv{
      animation:rise linear both;
      animation-timeline:view(); animation-range:entry 0% entry 42%;
    }
  }
}
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  .jar, .buy, .jar-btn, .plus, .jpool-in, .ing img{ transition:none }
  .card:hover .jar, .card:hover .jpool-in, .card:hover .ing img{ transform:none }
  .marks svg{ animation:none; opacity:1; transform:none }
}