/* =========================================================
   Crumble - landing styles
   Layout & palette follow the Memecoin template (green / lime),
   illustrations are Crumble originals.
   ========================================================= */
@font-face {
  font-family: "Dela Gothic One";
  src: url("fonts/dela-gothic-one-latin.woff2") format("woff2");
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("fonts/bricolage-grotesque-latin.woff2") format("woff2");
  font-weight: 200 800; font-display: swap;
}

:root {
  --green: #3C574B;
  --green-2: #2E4A3E;
  --deep: #0F2C23;
  --deep-2: #163A2E;
  --lime: #E2FEA5;
  --cream: #F8FFE8;
  --card: #E4EBD5;
  --butter: #FCFAC2;
  --ink: #0B0B0B;
  --orange: #FF8717;
  --mint: #79CC9E;
  --mint-2: #2F8C5B;
  --purple: #5A0CE1;
  --lavender: #B9A4E9;
  --cherry: #C8102E;

  --f-display: "Dela Gothic One", "Arial Black", sans-serif;
  --f-body: "Bricolage Grotesque", system-ui, sans-serif;

  --wrap: clamp(1280px, 72vw, 1800px);
  --gutter: clamp(16px, 3.4vw, 96px);
  /* One vertical unit. It is 1% of the viewport height, floored so a short
     laptop window does not squash the cards and capped so a very tall one does
     not stretch them past their proportions. Every block that used to carry a
     fixed pixel height is written in multiples of it, so a section keeps the
     same share of the screen on a 900px laptop and on a 1440px monitor.
     At the 900px design baseline 1vu == 9px exactly. */
  --vu: clamp(6.6px, 1vh, 15.5px);
  --r-xl: 64px;
  --r-lg: 40px;
  --r-md: 28px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
body {
  margin: 0;
  background: var(--green);
  color: var(--cream);
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
/* film grain over everything */
/* film grain on section backgrounds only (cards, text and mascots stay clean).
   Each section gets a noise layer between its background and its content. */
main > section, footer { position: relative; }
/* anchor jumps stop below the fixed nav bar instead of under it */
main > section[id] { scroll-margin-top: 84px; } /* nav bar bottom edge sits at 80px */
main > section::before, footer::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: url("img/grain-1.png") 0 0 / 96px 96px repeat;
  opacity: .09;
  animation: grain .34s steps(1) infinite;
}
main > section > :not(.burst), footer > .wrap { position: relative; z-index: 2; }
.burst { z-index: 0; }
.foot-char, .foot-meta { z-index: 3; }
@keyframes grain {
  0%   { background-image: url("img/grain-1.png"); background-position: 0 0; }
  25%  { background-image: url("img/grain-2.png"); background-position: -37px 19px; }
  50%  { background-image: url("img/grain-3.png"); background-position: 23px -41px; }
  75%  { background-image: url("img/grain-4.png"); background-position: -13px -29px; }
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); container-type: inline-size; }
/* big display words are sized by the container width (cqi), so they never spill out on wide screens */
.display { font-family: var(--f-display); font-weight: 400; text-transform: uppercase; line-height: .95; margin: 0; letter-spacing: -.01em; }
.lime { color: var(--lime); }
.kicker { font-weight: 700; font-size: 18px; color: var(--cream); margin: 0 0 8px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 56px; padding: 0 30px; border-radius: 100px;
  background: var(--butter); color: var(--ink);
  border: 2.5px solid var(--ink); box-shadow: 0 4px 0 var(--ink);
  font-weight: 700; font-size: 18px; white-space: nowrap;
  transition: transform .15s ease, box-shadow .15s ease;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 6px 0 var(--ink); }
.btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
.btn.lg { height: 76px; padding: 0 48px; font-size: 26px; }
.btn.sm { height: 42px; padding: 0 18px; font-size: 15px; }
.link-arrow { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--cream); }
.link-arrow:hover { color: var(--lime); }
.soon {
  display: inline-block; font-size: 10px; font-weight: 800; letter-spacing: .08em;
  padding: 3px 7px; border-radius: 100px; background: var(--ink); color: var(--lime); vertical-align: middle;
}

/* ---------- Nav ---------- */
.nav {
  position: fixed; left: 0; right: 0; top: 16px; z-index: 50;
}
.nav-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  height: 64px; padding: 0 8px 0 20px; border-radius: 100px;
  background: var(--cream); color: var(--ink);
  border: 2.5px solid var(--ink); box-shadow: 0 4px 0 var(--ink);
}
.brand { display: flex; align-items: center; gap: 10px; font-family: var(--f-display); font-size: 24px; }
.brand img { width: 40px; }
.nav-right { display: flex; align-items: center; gap: 8px; }
/* social marks sit in ink discs, like the badges in the "Get it now on" pills */
.icon {
  width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%;
  background: var(--ink); color: var(--cream);
  transition: background .15s ease, color .15s ease, transform .15s ease;
}
.icon:hover { background: var(--lime); color: var(--ink); transform: translateY(-2px); }
.icon svg { width: 17px; height: 17px; }
.menu-btn { width: 48px; height: 48px; border-radius: 50%; background: var(--ink); color: var(--cream); display: grid; place-items: center; transition: transform .15s ease; }
.menu-btn:hover { transform: rotate(90deg); }
.menu-btn svg { width: 20px; height: 20px; }

/* ---------- Full-screen menu ---------- */
.sheet {
  position: fixed; inset: 0; z-index: 60; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
  background: var(--deep); color: var(--cream);
  display: flex; flex-direction: column; padding: 16px 0 40px;
  opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s;
}
.sheet.open { opacity: 1; visibility: visible; }
.sheet::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: url("img/grain-1.png") 0 0 / 96px 96px repeat; opacity: .07;
  animation: grain .34s steps(1) infinite;
}
.sheet > * { position: relative; z-index: 2; }
.sheet-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 64px; flex: none; }
.sheet-bar .brand { color: var(--lime); }
.sheet .menu-btn { background: rgba(248,255,232,.1); color: var(--cream); }
.sheet .menu-btn:hover { background: var(--lime); color: var(--ink); }
.sheet-links { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: clamp(4px, 1.6vh, 14px); padding-top: 24px; padding-bottom: 24px; }
.sheet-links a {
  display: flex; align-items: baseline; gap: clamp(12px, 2vw, 26px);
  font-family: var(--f-display); font-weight: 400; text-transform: uppercase; line-height: 1.06;
  font-size: min(clamp(30px, 8.5vw, 74px), 8.4vh); color: var(--lime);
  opacity: 0; transform: translateY(30px);
  transition: transform .55s cubic-bezier(.22,.9,.24,1), opacity .45s ease, color .15s ease;
  transition-delay: calc(var(--i, 0) * 55ms + 80ms);
}
.sheet.open .sheet-links a { opacity: 1; transform: none; }
.sheet-links a:hover { color: var(--cream); }
.sheet-links i { font-family: var(--f-body); font-style: normal; font-weight: 700; font-size: 14px; opacity: .5; flex: none; }
.sheet-foot { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; flex: none; }
.sheet-social { display: flex; gap: 10px; }
.sheet .icon { width: 46px; height: 46px; background: rgba(248,255,232,.1); color: var(--cream); }
.sheet .icon svg { width: 20px; height: 20px; }
.sheet .icon:hover { background: var(--lime); color: var(--ink); }
/* mascot sits beside the links, well clear of the Launch App button */
.sheet-char { position: absolute; right: clamp(16px, 5vw, 90px); top: 50%; transform: translateY(-46%); width: min(290px, 28vw); opacity: .16; z-index: 1; pointer-events: none; }
@media (max-width: 1023px) { .sheet-char { display: none; } }
html.locked, html.locked body { overflow: hidden; }

/* ---------- Hero ---------- */
.hero {
  position: relative; overflow: hidden;
  background: radial-gradient(ellipse at 50% 20%, #24443A 0%, #1B3A30 60%, var(--green-2) 100%);
  padding: 170px 0 0; text-align: center;
}
.burst { position: absolute; left: 50%; top: 40px; width: 1300px; max-width: none; transform: translateX(-50%); opacity: .9; pointer-events: none; will-change: transform; }
.hero-inner { position: relative; z-index: 2; }
.hero .intro { font-weight: 600; letter-spacing: .04em; color: var(--cream); margin: 0 0 8px; }
.hero h1 { font-size: clamp(44px, 13.5vw, 176px); font-size: clamp(40px, 15cqi, calc(19.6 * var(--vu))); color: var(--lime); }
.hero .sub { font-size: clamp(17px, 1.6vw, 21px); font-weight: 500; margin: 18px auto 30px; max-width: 640px; }
.hero-ctas { display: flex; gap: 22px; justify-content: center; align-items: center; flex-wrap: wrap; }

.hero-stage { position: relative; height: calc(22 * var(--vu)); margin-top: calc(3.4 * var(--vu)); }
.hero-mascot { position: absolute; right: 7%; top: -250px; width: clamp(220px, 24vw, 340px); z-index: 3; transform: rotate(6deg); }
.bubble {
  position: absolute; right: calc(7% + clamp(190px, 21vw, 300px)); top: -220px; z-index: 4;
  background: var(--ink); color: var(--lime); font-family: var(--f-display); font-size: clamp(20px, 2.4vw, 30px);
  padding: 12px 22px; border-radius: 14px;
}
.bubble.off { display: none; }  /* set by main.js when the bubble would cover the hero buttons */
.bubble::after { content: ""; position: absolute; right: 26px; bottom: -14px; border: 8px solid transparent; border-top: 8px solid var(--ink); border-right-color: var(--ink); }
.ca-tab {
  /* thin lime tab sitting on the card's top edge (its bottom border merges with the
     card border). Its left edge must clear the card's corner radius (--r-xl), or it
     hangs over the curve where there is no straight edge to sit on. */
  position: absolute; left: max(76px, var(--gutter)); bottom: 100%; z-index: 2;
  display: inline-flex; align-items: center; gap: 8px; max-width: calc(100% - 112px);
  background: var(--lime); color: var(--ink); border: 2.5px solid var(--ink); border-bottom-width: 2.5px;
  border-radius: 14px 14px 0 0; padding: 5px 16px; font-size: 13px; font-weight: 700; line-height: 1.3;
  /* bottom:100% already lands on the card's padding box, i.e. 2.5px in - exactly the
     thickness of the card border - so the two borders merge into one line. Any
     negative margin on top of that pushes the tab onto the card itself. */
  margin-bottom: 0;
}
.ca-tab:hover { background: var(--butter); }
.ca-tab span { white-space: nowrap; flex: none; }
.ca-tab code { min-width: 0; font-family: var(--f-body); font-size: 13px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ca-tab svg { width: 14px; height: 14px; flex: none; }

/* ---------- Get it now on ---------- */
.getit { background: var(--green-2); padding: 0 0 calc(13.4 * var(--vu)); }
.getit-card {
  position: relative; background: var(--card); color: var(--ink);
  border: 2.5px solid var(--ink); border-radius: var(--r-xl); padding: 56px 0 44px;
  margin: 0;
}
.getit-card h2 { font-size: clamp(44px, 6vw, calc(8.9 * var(--vu))); padding: 0 var(--gutter); display: flex; gap: 20px; align-items: flex-start; }
.getit-card h2 svg { width: 60px; flex: none; margin-top: -6px; }
/* No bottom radius here: the row sits 44px above the card's bottom edge, so there is
   nothing to clip against - a 64px radius on a ~70px tall row just ate the corner
   pills and left flat stubs behind. The side fade is the mask, and stays. */
.pills { margin-top: 40px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
/* spacing sits on each item, not as flex gap: with gap the two halves differ by
   one gap and the loop hops at the seam */
.pills-track > * { margin-right: 18px; flex: none; }
.crumbs-strip .track > * { margin-right: 36px; flex: none; }
.pills-track { display: flex; width: max-content; padding-bottom: 6px; animation: scroll 45s linear infinite; }
.pill {
  display: inline-flex; align-items: center; gap: 10px; height: 64px; padding: 0 30px; border-radius: 100px;
  background: var(--card); border: 2.5px solid var(--ink); box-shadow: 0 4px 0 var(--ink);
  font-weight: 700; font-size: 18px; color: var(--ink);
}
.pill:hover { background: var(--lime); }
.pill-logo { width: 36px; height: 36px; margin-left: -12px; object-fit: contain; flex: none; }

/* ---------- About ---------- */
.about { background: linear-gradient(180deg, var(--green-2), var(--green)); padding: calc(4.4 * var(--vu)) 0 calc(13.4 * var(--vu)); }
.about h2 { font-size: clamp(44px, 7vw, calc(11 * var(--vu))); text-align: center; color: var(--lime); margin-bottom: calc(5.2 * var(--vu)); }
.about-grid { display: grid; grid-template-columns: 1fr 1.05fr 1fr; align-items: center; }
.about-card { border: 2.5px solid var(--ink); border-radius: var(--r-lg); overflow: hidden; }
.about-left { background: var(--card); color: var(--ink); padding: calc(3.9 * var(--vu)) 34px 0; margin-right: -40px; min-height: max(calc(50 * var(--vu)), 39cqi); display: flex; flex-direction: column; }
.about-left h3 { font-family: var(--f-display); font-weight: 400; font-size: clamp(26px, 3.3 * var(--vu), 44px); line-height: 1; margin: 0 0 20px; text-transform: uppercase; }
.about-left img { margin-top: auto; width: 110%; max-width: none; margin-left: -8%; }
.about-mid { position: relative; z-index: 2; background: var(--deep); color: var(--lime); padding: calc(3.9 * var(--vu)) 32px; min-height: max(calc(57 * var(--vu)), 44cqi); display: flex; flex-direction: column; gap: 14px; font-size: clamp(16px, 1.9 * var(--vu), 26px); font-weight: 500; }
.about-mid p { margin: 0; }
.about-mid .ctas { margin-top: auto; display: flex; flex-wrap: wrap; gap: 12px; }
.about-right { background: var(--deep); color: var(--cream); margin-left: -40px; min-height: max(calc(50 * var(--vu)), 39cqi); padding: calc(3.9 * var(--vu)) 34px calc(3.9 * var(--vu)) 70px; display: flex; flex-direction: column; gap: 18px; position: relative; }
.about-right .gh { display: inline-flex; align-items: center; gap: 12px; font-weight: 700; font-size: clamp(17px, 2 * var(--vu), 27px); }
.about-right .gh span { width: 44px; height: 44px; border-radius: 50%; background: var(--cream); color: var(--ink); display: grid; place-items: center; }
.about-right .gh svg { width: 22px; height: 22px; }
.code {
  margin: 0; overflow-x: auto; max-width: 100%;
  font-family: ui-monospace, Menlo, monospace; font-size: 13.5px; line-height: 1.7; color: var(--lime);
  background: rgba(0,0,0,.25); border: 1.5px solid rgba(226,254,165,.25); border-radius: 18px; padding: 18px;
}
.code .c { color: #8DB39E; } .code .k { color: var(--orange); } .code .s { color: var(--butter); }
.about-right img { width: 150px; position: absolute; right: 24px; bottom: 22px; transform: rotate(8deg); }

/* ---------- Recipe (3 arch cards) ---------- */
.recipe { background: var(--deep); padding: calc(13.4 * var(--vu)) 0; }
.sec-head { text-align: center; margin-bottom: calc(4.6 * var(--vu)); position: relative; }
.sec-head h2 { font-size: clamp(44px, 7vw, calc(10.6 * var(--vu))); color: var(--lime); }
.bolt { position: absolute; width: 26px; left: calc(50% + 96px); top: -44px; transform: rotate(12deg); }
.arches { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
/* width has to be stated: with only aspect-ratio and a min-height, a tall
   min-height feeds back into the width and the card bulges out of its grid
   column. Fixing the width makes the ratio set the height and nothing else. */
.arch-img { background: var(--card); border-radius: 300px 300px 0 0; width: 100%; aspect-ratio: 1 / 1.1; min-height: calc(46 * var(--vu)); display: grid; place-items: center; overflow: hidden; }
.arch-img img { width: 78%; }
.arch h3 { font-family: var(--f-display); font-weight: 400; color: var(--lime); font-size: clamp(26px, 3.3 * var(--vu), 44px); line-height: 1.05; margin: 16px 0 8px; }
.arch p { margin: 0; color: var(--cream); font-weight: 500; }

/* ---------- A year of crumbs ---------- */
.crumbs { background: var(--green); padding: calc(9.4 * var(--vu)) 0 calc(7.8 * var(--vu)); position: relative; overflow-x: clip; }
.crumbs .kicker { position: relative; z-index: 0; text-align: center; }  /* the headline below is centred, so the kicker has to be too:
     without this it inherits the section's left alignment and reads as
     a stray line off to one side. */
/* Sized to keep "A year of crumbs" on ONE line: the stage below is pulled up by
   -7cqi, so a second line lands straight under the mascot. */
.crumbs h2 { font-size: clamp(30px, 5.6vw, 92px); font-size: clamp(28px, 5.8cqi, 92px); color: var(--lime); text-align: center; position: relative; z-index: 0; white-space: nowrap; }
@media (max-width: 560px) { .crumbs h2 { white-space: normal; } }
/* mascot overlaps the headline and slides up out of the card as you scroll (driven by --rise in main.js) */
.crumbs-stage { position: relative; margin-top: -2cqi; }
.crumbs-char {
  /* Half the mascot is buried behind the card. A percentage margin would
     resolve against the STAGE width, so shrinking the mascot would bury more of
     it; keyed to its own width, the same half shows at every size. */
  --cw: clamp(150px, 21cqi, 300px);
  width: var(--cw); margin: 0 auto calc(var(--cw) * -.5); position: relative; z-index: 1;
  transform: translateY(calc((1 - var(--rise, 0)) * 58%)); will-change: transform;
}
.heart { position: absolute; width: clamp(40px, 6cqi, 76px); right: 11%; top: 11cqi; transform: rotate(14deg); z-index: 1; }
.crumbs-card { position: relative; z-index: 2; background: var(--deep); border: 2.5px solid var(--ink); border-radius: var(--r-xl); overflow: hidden; padding-bottom: calc(1.5 * var(--vu)); }
.crumbs-strip { overflow: hidden; border-bottom: 2px solid rgba(226,254,165,.12); padding: calc(.9 * var(--vu)) 0; }
.crumbs-strip .track { display: flex; width: max-content; animation: scroll 70s linear infinite; font-family: var(--f-display); font-size: clamp(22px, 2.9 * var(--vu), 39px); color: var(--cream); }
.crumbs-body { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(28px, 3cqi, 44px); align-items: center; padding: calc(1.8 * var(--vu)) clamp(28px, 4.6cqi, 60px) 0; }
.pie { width: min(100%, calc(45 * var(--vu))); margin: 0 auto; aspect-ratio: 1; }
.pie svg { width: 100%; height: 100%; overflow: visible; }
/* slices scale in one by one as the section scrolls past (--r comes from main.js) */
.pie .pop { transform: scale(var(--r, 0)); transform-box: view-box; transform-origin: 500px 500px; }
html.boot .pie .pop { transition: transform .7s cubic-bezier(.34,1.56,.64,1); }
.pie .slice { transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.pie .slice:hover, .pie .slice.active { transform: translate(var(--dx), var(--dy)); }
.pie .cut { fill: none; stroke: #0B0B0B; stroke-width: 8; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
/* Each leg is its own little control: dot, ticker, this year's dollars, and a
   slider that re-cuts the pie live. Moving one pushes the rest the other way,
   so the basket always adds up to 100. */
.crumbs-mix { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 0 0 7px; color: var(--cream); font-weight: 800; font-size: clamp(15px, 1.7 * var(--vu), 23px); }
.crumbs-mix span { font-weight: 700; font-size: clamp(13px, 1.45 * var(--vu), 20px); opacity: .6; }
.crumbs-legend { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 7px; margin-bottom: 8px; font-size: clamp(16px, 1.78 * var(--vu), 24px); }
.crumbs-legend .leg { display: grid; grid-template-columns: 16px minmax(0,1fr) auto; align-items: center; column-gap: 10px; row-gap: 6px; padding: 6px 13px 8px; border-radius: 14px; background: rgba(248,255,232,.08); border: 1.5px solid rgba(226,254,165,.2); color: var(--cream); font-weight: 700; text-align: left; transition: background .14s ease; }
.crumbs-legend .leg:hover, .crumbs-legend .leg.active { background: rgba(226,254,165,.18); }
.crumbs-legend i { width: 16px; height: 16px; border-radius: 50%; border: 2px solid #0B0B0B; }
.crumbs-legend .leg-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crumbs-legend b { padding-left: 8px; font-family: var(--f-display); font-weight: 400; font-size: clamp(16px, 1.9 * var(--vu), 26px); color: var(--lime); font-variant-numeric: tabular-nums; }
.crumbs-legend input[type="range"] {
  -webkit-appearance: none; appearance: none;
  grid-column: 1 / -1; width: 100%; height: 6px; margin: 0;
  background: linear-gradient(90deg, var(--lime) var(--fill, 0%), rgba(248, 255, 232, .18) var(--fill, 0%));
  border-radius: 100px; outline-offset: 4px;
}
.crumbs-legend input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--lime); border: 2px solid var(--ink);
  box-shadow: 0 2px 0 var(--ink);
  transition: transform .13s ease;
}
.crumbs-legend input[type="range"]::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--lime); border: 2px solid var(--ink);
  box-shadow: 0 2px 0 var(--ink);
  transition: transform .13s ease;
}
.crumbs-legend input[type="range"]:hover::-webkit-slider-thumb { transform: scale(1.18); }
.crumbs-legend input[type="range"]:hover::-moz-range-thumb { transform: scale(1.18); }
.crumbs-legend input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.3); }
.crumbs-legend input[type="range"]:active::-moz-range-thumb { transform: scale(1.3); }
@media (prefers-reduced-motion: reduce) {
  .crumbs-legend input[type="range"]::-webkit-slider-thumb { transition: none; }
  .crumbs-legend input[type="range"]::-moz-range-thumb { transition: none; }
}
/* Two rows side by side: stacked, they push the card past the height at which
   the section can still hold a stop-marker on a 1080 screen. */
.crumbs-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (max-width: 720px) { .crumbs-list { grid-template-columns: 1fr; } }
.crumbs-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 9px 20px; border-radius: 18px; background: var(--card); color: var(--ink); font-weight: 700; font-size: clamp(16px, 2 * var(--vu), 27px); border: 2px solid var(--ink); }
.crumbs-row b { font-family: var(--f-display); font-weight: 400; font-size: clamp(20px, 2.45 * var(--vu), 33px); text-align: right; }
.crumbs-note { margin: 7px 0 0; color: var(--cream); opacity: .75; font-size: clamp(14px, 1.65 * var(--vu), 22px); }

/* ---------- the calculator's controls ---------- */
.crumbs-controls { display: grid; gap: 8px; margin-bottom: 11px; }
.cr-ctl {
  display: grid; grid-template-columns: clamp(120px, 13.5 * var(--vu), 190px) minmax(0, 1fr) auto;
  align-items: center; gap: 14px;
  color: var(--cream); font-weight: 700; font-size: clamp(15px, 1.7 * var(--vu), 23px);
}
.cr-ctl > span { opacity: .8; }
.cr-ctl > b {
  font-family: var(--f-display); font-weight: 400; font-size: 19px;
  color: var(--lime); min-width: 64px; text-align: right;
  font-variant-numeric: tabular-nums;
}

/* range input, restyled in both engines */
.cr-ctl input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 10px; margin: 0;
  background: rgba(248, 255, 232, .16);
  border-radius: 100px; outline-offset: 4px;
}
.cr-ctl input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--lime); border: 2.5px solid var(--ink);
  box-shadow: 0 2px 0 var(--ink);
  transition: transform .13s ease;
}
.cr-ctl input[type="range"]::-moz-range-thumb {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--lime); border: 2.5px solid var(--ink);
  box-shadow: 0 2px 0 var(--ink);
  transition: transform .13s ease;
}
/* The grip grows under the cursor and again while held, so there is never a
   doubt about which handle the drag is moving. */
.cr-ctl input[type="range"]:hover::-webkit-slider-thumb { transform: scale(1.16); }
.cr-ctl input[type="range"]:hover::-moz-range-thumb { transform: scale(1.16); }
.cr-ctl input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.26); }
.cr-ctl input[type="range"]:active::-moz-range-thumb { transform: scale(1.26); }

@media (prefers-reduced-motion: reduce) {
  .cr-ctl input[type="range"]::-webkit-slider-thumb { transition: none; }
  .cr-ctl input[type="range"]::-moz-range-thumb { transition: none; }
}

.cr-seg { display: flex; gap: 6px; }
.cr-seg button {
  flex: 1; padding: 8px 4px; border-radius: 12px;
  background: rgba(248, 255, 232, .08);
  border: 1.5px solid rgba(226, 254, 165, .2);
  color: var(--cream); font: inherit; font-weight: 700;
  transition: background .14s ease, color .14s ease;
}
.cr-seg button:hover { background: rgba(226, 254, 165, .18); }
.cr-seg button.on { background: var(--lime); color: var(--ink); border-color: var(--ink); }

/* ---------- the headline number ---------- */
.crumbs-total {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  margin: 0 0 9px; color: var(--cream);
}
.crumbs-total b {
  font-family: var(--f-display); font-weight: 400;
  font-size: clamp(34px, 4.9cqi, calc(5.8 * var(--vu))); line-height: 1;
  color: var(--lime); font-variant-numeric: tabular-nums;
}
.crumbs-total span { font-size: clamp(14px, 1.7 * var(--vu), 23px); opacity: .8; max-width: 22ch; }

/* The fee, stated but not shouted: mint reads cleanly on --deep without
   competing with the lime figure above it. */
.crumbs-fine {
  margin: -8px 0 9px; font-size: clamp(13px, 1.45 * var(--vu), 20px); line-height: 1.5;
  color: var(--mint); opacity: .9;
}
.crumbs-fine b { font-weight: 700; font-variant-numeric: tabular-nums; }

@media (max-width: 720px) {
  .cr-ctl { grid-template-columns: 1fr auto; row-gap: 8px; }
  .cr-ctl input[type="range"] { grid-column: 1 / -1; order: 3; }
}

/* ---------- On the menu (the starter basket) ---------- */
.menu-sec { background: var(--green); padding: clamp(64px, 11vh, 120px) 0 clamp(56px, 10vh, 110px); overflow-x: clip; }
/* The headline and the bill sit on the left, the menu sheet on the right: one
   row instead of two stacked ones, which is what keeps the whole section inside
   a pinned viewport on a 900px laptop. */
.menu-grid { display: grid; grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr); align-items: center; gap: clamp(28px, 4vw, 56px); }
.menu-side { display: flex; flex-direction: column; gap: 26px; }
.menu-sec h2 { font-size: clamp(54px, 7.4vw, calc(12.9 * var(--vu))); color: var(--lime); }
.menu-sec .tail { margin: 16px 0 0; font-weight: 600; }
/* the ticker pill, used on the menu sheet and in the chips under it */
.tick {
  font-family: var(--f-display); font-weight: 400; font-size: 15px; letter-spacing: .03em;
  background: var(--ink); color: var(--cream); border-radius: 100px; padding: 8px 14px 7px; line-height: 1;
}

/* ---------- The menu sheet ----------
   A printed menu, not a card grid: name, ticker, a dotted leader and the weight
   where a price would sit. Sizes are in cqi against the sheet itself, so the
   rows hold their proportions whatever the sheet is given. */
.sheet-menu {
  margin: 0;
  background: var(--butter) url("/assets/img/paper.webp") center / 100% 100% no-repeat;
  color: var(--ink);
  border: 3px solid var(--ink); border-radius: var(--r-md);
  box-shadow: 0 10px 0 var(--ink);
  padding: calc(4.6 * var(--vu)) clamp(22px, 5cqi, 54px) calc(4.4 * var(--vu));
  container-type: inline-size;
  /* A floor rather than a fixed height: on a short screen the sheet is whatever
     its rows need, on a tall one it grows and the rows spread into the extra
     paper instead of leaving it blank at the bottom. */
  display: flex; flex-direction: column; min-height: calc(78 * var(--vu));
}
.sm-head { display: flex; align-items: center; gap: 18px; margin-bottom: calc(3.6 * var(--vu)); }
/* two hairlines rather than one: a single rule reads as a divider, a double rule
   reads as the top of a menu */
.sm-rule { flex: 1; height: 5px; border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); }
.sm-eyebrow { margin: 0 -.22em 0 0; font-weight: 800; font-size: 12px; letter-spacing: .22em; text-transform: uppercase; white-space: nowrap; }

.sm-list { list-style: none; margin: 0; padding: 0; display: grid; gap: calc(3.5 * var(--vu)); flex: 1; align-content: space-between; }
.sm-line { display: flex; align-items: baseline; gap: 12px; }
.sm-dot { width: 13px; height: 13px; border-radius: 50%; background: var(--c, var(--ink)); border: 2px solid var(--ink); flex: none; align-self: center; }
.sm-name { font-family: var(--f-display); font-weight: 400; font-size: clamp(22px, 4.2cqi, 34px); line-height: 1; text-transform: uppercase; white-space: nowrap; }
.sm-tick { font-size: 11px; padding: 6px 10px 5px; letter-spacing: .1em; }
/* the leader takes whatever is left between the name and the price, and sits on
   the baseline rather than under it */
.sm-lead { flex: 1; min-width: 14px; border-bottom: 3px dotted rgba(11, 11, 11, .3); transform: translateY(-5px); }
.sm-pct { font-family: var(--f-display); font-weight: 400; font-size: clamp(24px, 4.4cqi, 36px); line-height: 1; color: var(--c, var(--ink)); font-variant-numeric: tabular-nums; }
.sm-blurb { margin: calc(1.1 * var(--vu)) 0 0 25px; font-weight: 600; font-size: clamp(14px, 1.9cqi, 16px); opacity: .7; }

.sm-split { display: flex; align-items: center; gap: 14px; margin: calc(3.6 * var(--vu)) 0 calc(3.2 * var(--vu)); }
.sm-split span { flex: 1; height: 0; border-top: 2px solid rgba(11, 11, 11, .22); }
.sm-split b { font-size: 13px; line-height: 1; opacity: .4; }

.sm-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 26px 40px; flex-wrap: wrap; }
.sm-also { margin: 0 0 11px; font-weight: 800; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; opacity: .55; }
.sm-cta { text-align: right; margin-left: auto; }
.sm-note { margin: 0 0 12px; font-weight: 600; font-size: 15px; opacity: .7; }

/* receipt: one real round-up, to the last cent (19.8 + 9.9*3 = 49.5 = 50.0 - 1%).
   Sits under the headline, in the left column of .menu-grid. */
.slip {
  margin: 0; width: 100%; max-width: 440px; background: var(--deep); color: var(--cream);
  border: 2px solid rgba(226,254,165,.22); border-radius: 20px; padding: 18px 20px 20px;
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: clamp(12.5px, 1.5 * var(--vu), 20px); line-height: 1.2;
}
.slip-head { margin: 0 0 14px; font-family: var(--f-body); font-weight: 800; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; opacity: .5; }
.slip-rows { display: grid; grid-template-columns: 1fr auto; gap: 9px 14px; align-items: baseline; }
.slip-rows span { opacity: .75; }
.slip-rows b { font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.slip-rows .lit, .slip-rows b.lit { color: var(--lime); opacity: 1; }
.slip-rows i { font-style: normal; color: var(--lime); opacity: .95; }
.slip-cut { margin: 15px -20px; border-top: 2px dashed rgba(226,254,165,.22); }

/* the rest of the menu + the only call to action in this section */
.more-chips { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- House rules ---------- */
.rules { background: var(--deep); padding: clamp(56px, 8vh, 96px) 0; }

/* ---------- House rules, on a magnet board ----------
   The board hangs off a nail on two cords. Every piece is PRESSED on, not faded
   in: it arrives oversized and extra crooked, overshoots just past its resting
   size and settles. That squash is a formula of --r (the scroll engine's 0->1),
   so scrolling back up peels the pieces off again instead of snapping them away.

   --u  = how much is still missing
   --sq = the ease on the way in
   --ov = a hump that peaks mid-flight, which is what makes it land rather than stop */
.board-hang { position: relative; height: calc(9.5 * var(--vu)); }
.board-hang .cord { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.board-hang .cord path { fill: none; stroke: rgba(226, 254, 165, .38); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.board-hang .nail {
  position: absolute; left: 50%; top: 2px; translate: -50% 0;
  width: 19px; height: 19px; border-radius: 50%;
  background: var(--butter); border: 3px solid var(--ink);
  box-shadow: 0 3px 0 rgba(11, 11, 11, .45);
}

.board {
  position: relative; background: var(--card); color: var(--ink);
  border: 3px solid var(--ink); border-radius: var(--r-lg);
  box-shadow: 0 10px 0 var(--ink);
  padding: calc(7 * var(--vu)) clamp(28px, 4vw, 60px) calc(9 * var(--vu));
  background-image: linear-gradient(105deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 26%,
                    rgba(255,255,255,0) 72%, rgba(11,11,11,.05) 100%);
  container-type: inline-size;
}
.board-kicker {
  margin: 0 0 calc(3.5 * var(--vu)); font-weight: 800; font-size: 12px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--ink); opacity: .55;
}

/* ---- the magnet letters ---- */
.mag-title { margin: 0 0 calc(6.5 * var(--vu)); display: flex; flex-wrap: wrap; gap: 10px clamp(26px, 3.6cqi, 52px); align-items: center; }
.mag-row { display: flex; gap: 8px; }
/* the slide the scroll engine gives every .reveal would fight the press-on */
.mag-row .mag { display: block; transform: none; opacity: calc(var(--r, 0) * 3); }
.mag b {
  --u: calc(1 - var(--r, 0));
  --sq: calc(var(--u) * var(--u));
  --ov: calc(var(--r, 0) * var(--u) * 4);
  display: grid; place-items: center;
  width: clamp(46px, 8cqi, calc(11 * var(--vu))); aspect-ratio: 1;
  font-family: var(--f-display); font-weight: 400;
  font-size: clamp(28px, 4.75cqi, calc(6.5 * var(--vu))); line-height: 1;
  background: var(--c); color: var(--t);
  border: 3px solid var(--ink); border-radius: 16px;
  box-shadow: 0 4px 0 rgba(11, 11, 11, .38);
  transform: rotate(calc(var(--tilt, 0deg) + var(--u) * -13deg))
             scale(calc(1 + .38 * var(--sq) - .1 * var(--ov)));
}

/* ---- the notes ---- */
.notes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 22px); }
.notes .note-slot { transform: none; opacity: calc(var(--r, 0) * 3); }
.bnote {
  --u: calc(1 - var(--r, 0));
  --sq: calc(var(--u) * var(--u));
  --ov: calc(var(--r, 0) * var(--u) * 4);
  position: relative; height: 100%; min-height: calc(34 * var(--vu));
  display: flex; flex-direction: column; justify-content: center;
  background: var(--paper, var(--butter)); color: var(--ink);
  border: 2.5px solid var(--ink); border-radius: 10px;
  padding: calc(3.8 * var(--vu)) 22px calc(2.9 * var(--vu));
  box-shadow: 0 5px 0 rgba(11, 11, 11, .22);
  transform: rotate(calc((var(--tilt, 0deg) + var(--u) * -7deg) * var(--tilt-k, 1)))
             scale(calc(1 + .17 * var(--sq) - .055 * var(--ov)));
  transition: box-shadow .22s ease;
}
.bnote:hover { box-shadow: 0 10px 0 rgba(11, 11, 11, .22); }
.bnote .pin {
  position: absolute; top: -11px; left: 50%; translate: -50% 0;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--c); border: 3px solid var(--ink);
  box-shadow: 0 2px 0 rgba(11, 11, 11, .3);
}
.bnote .num {
  display: block; font-family: var(--f-display); font-weight: 400; font-size: clamp(22px, 2.2cqi, calc(3.4 * var(--vu)));
  line-height: 1; color: transparent; -webkit-text-stroke: 1.5px var(--ink); opacity: .45;
}
.bnote h3 {
  font-family: var(--f-display); font-weight: 400; font-size: clamp(16px, 1.65cqi, calc(2.6 * var(--vu)));
  line-height: 1.1; margin: calc(1.3 * var(--vu)) 0 calc(.9 * var(--vu)); text-transform: uppercase; color: var(--ink);
}
.bnote p { margin: 0; font-weight: 600; font-size: clamp(13px, 1.25cqi, calc(2.1 * var(--vu))); line-height: 1.4; color: var(--ink); opacity: .78; }

@media (max-width: 809px) {
  .board { padding: 26px 20px 30px; }
  .notes { --tilt-k: 0; }
  .bnote { min-height: 0; padding: 30px 18px 20px; }
}
@media (prefers-reduced-motion: reduce) { .bnote { transition: none; } }

/* ---------- How to buy ---------- */
.buy { background: var(--green); padding: calc(13.4 * var(--vu)) 0 calc(8.9 * var(--vu)); }
/* Pinned, the scroll pages the steps and the button would be a second, slower way
   to do the same thing. Unpinned (phones, short screens) it is the only way. */
[data-pin].on [data-step-next] { display: none; }
.buy-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 16px; }
.buy-title { grid-column: 1 / -1; background: var(--deep); border-radius: var(--r-lg); padding: calc(6.2 * var(--vu)) 40px; text-align: center; }
.buy-title h2 { font-size: clamp(44px, 9cqi, calc(13.8 * var(--vu))); color: var(--lime); }
.buy-intro { background: var(--deep); border-radius: var(--r-lg); padding: calc(4.4 * var(--vu)) 40px; font-weight: 700; font-size: clamp(18px, 2.2 * var(--vu), 30px); line-height: 1.45; display: flex; flex-direction: column; gap: 20px; min-height: calc(46.5 * var(--vu)); }
.buy-intro p { margin: 0; }
.buy-intro img { width: min(210px, 55%); margin: auto auto 0; transform: translateY(calc(var(--p, 0) * -22px)); }
.steps-card { background: var(--deep); border-radius: var(--r-lg); padding: calc(4.9 * var(--vu)) 44px; display: flex; flex-direction: column; min-height: calc(46.5 * var(--vu)); overflow: hidden; touch-action: pan-y; user-select: none; }
.step-body { display: flex; flex-direction: column; gap: 14px; }
.step-body.in-l { animation: stepInL .35s cubic-bezier(.2,.8,.2,1); }
.step-body.in-r { animation: stepInR .35s cubic-bezier(.2,.8,.2,1); }
@keyframes stepInL { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: none; } }
@keyframes stepInR { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: none; } }
.steps-card .n { font-family: var(--f-display); font-size: clamp(17px, 2 * var(--vu), 27px); }
.steps-card h3 { font-family: var(--f-display); font-weight: 400; font-size: clamp(30px, 3.4vw, 46px); line-height: 1.02; margin: 0; color: var(--lime); text-transform: uppercase; }
.steps-card p { margin: 0; max-width: 56ch; font-weight: 500; font-size: clamp(17px, 2 * var(--vu), 27px); }
.steps-card p a { color: var(--lime); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.steps-card p a:hover { text-decoration-thickness: 3px; }
.steps-foot { margin-top: auto; padding-top: calc(3.1 * var(--vu)); display: flex; flex-direction: column; align-items: center; gap: 18px; }
.steps-foot .link-arrow { font-size: 18px; padding: 6px 10px; }
.dots { display: flex; gap: 10px; justify-content: center; }
.dots button { position: relative; width: 64px; height: 12px; padding: 0; border: 0; border-radius: 10px; background: rgba(248,255,232,.25); cursor: pointer; transition: background .2s ease, width .2s ease; }
.dots button::after { content: ""; position: absolute; inset: -12px -5px; }  /* a 12px bar is too thin to hit: widen the target, not the bar */
.dots button:hover { background: rgba(248,255,232,.5); }
.dots button:focus-visible { outline: 2px solid var(--lime); outline-offset: 4px; }
.dots button.on { background: var(--lime); }
/* Short laptop screens: the full-size block is taller than the screen, so it could
   not be pinned and the scroll stopped paging the steps. main.js adds .fit to try
   a tighter version first; it only pins if that one fits. */
.buy.fit .buy-title { padding: calc(3 * var(--vu)) 40px; }
.buy.fit .buy-title h2 { font-size: clamp(40px, 7cqi, calc(10.4 * var(--vu))); }
.buy.fit .buy-intro, .buy.fit .steps-card { min-height: calc(36 * var(--vu)); padding-top: calc(3.4 * var(--vu)); padding-bottom: calc(3.4 * var(--vu)); }
.buy.fit .buy-intro img { width: min(170px, 45%); }
.buy.fit .steps-foot { padding-top: calc(2 * var(--vu)); }
.buy.fit .buy-cta { height: calc(9 * var(--vu)); }
.buy-cta { grid-column: 1 / -1; width: 100%; height: calc(11.6 * var(--vu)); margin-top: 8px; font-family: var(--f-display); font-weight: 400; text-transform: uppercase; font-size: clamp(26px, 4cqi, 48px); letter-spacing: .01em; box-shadow: 0 6px 0 var(--ink); border-width: 3px; }
.buy-cta:hover { box-shadow: 0 8px 0 var(--ink); }
.buy-cta .soon { font-family: var(--f-body); font-size: 12px; }

/* ---------- Footer ---------- */
footer { background: var(--green); padding: 40px 0 0; text-align: center; position: relative; overflow: hidden; }
.foot-mark { font-family: var(--f-display); color: var(--lime); font-size: clamp(56px, 12.6vw, 190px); font-size: clamp(40px, 15cqi, calc(21 * var(--vu))); line-height: .9; }
.foot-links { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: calc(4 * var(--vu)) 0 0; font-weight: 600; font-size: clamp(17px, 2.1 * var(--vu), 28px); }
.foot-links a:hover { color: var(--lime); }
.foot-note { margin: 14px 0 0; font-size: 13px; opacity: .8; }
.foot-bottom { --oven: clamp(260px, 30vw, calc(44 * var(--vu))); position: relative; margin-top: calc(2.7 * var(--vu)); height: calc(var(--oven) * .962 + 24px); }
.hills { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 300px; }
.foot-char { position: absolute; left: 50%; bottom: 0; width: var(--oven); transform: translateX(-50%); z-index: 2; }
/* ---------- The abduction, in the footer sky ----------
   Built at 420x600 and then scaled down as one piece, so every number below is
   the size it was tuned at. One shared clock, --flicker: the saucer's glow, the
   beam and the pull on the mascot run on the SAME uneven stops, so brightness
   and height are one event - brighter burns, higher he goes, and higher means
   further away, so he shrinks and stretches. */
.abduct {
  --flicker: 9s; --cycle: 2.6s; --sway: 9s; --drift: 11s;
  position: absolute; left: 2%; bottom: 30%; width: 420px; height: 600px;
  transform: scale(.27); transform-origin: left bottom;
  opacity: .58; pointer-events: none;
}
/* saucer, light, beam and cargo are one object, pivoting on the saucer itself */
.abduct .rig { position: absolute; inset: 0; transform-origin: 50% 150px; animation: drift var(--drift) ease-in-out infinite alternate; }
@keyframes drift { from { transform: translateY(-6px) rotate(-1.2deg); } to { transform: translateY(6px) rotate(1.2deg); } }
/* height:auto: the img carries width/height attributes, and setting only the CSS
   width leaves the attribute height in force */
.abduct .ship { position: absolute; left: 50%; top: 0; width: 300px; height: auto; translate: -50% 0; z-index: 3; }
.abduct .glow {
  position: absolute; left: 50%; top: 175px; width: 270px; height: 104px;
  translate: -50% -50%; z-index: 2; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(226,254,165,.95), rgba(226,254,165,.35) 55%, transparent 100%);
  filter: blur(13px); mix-blend-mode: plus-lighter;
  animation: candleGlow var(--flicker) ease-in-out infinite;
}
.abduct .beam {
  position: absolute; left: 50%; top: 196px; width: 340px; height: 390px; translate: -50% 0; z-index: 0;
  clip-path: polygon(40% 0, 60% 0, 97% 100%, 3% 100%);
  background: linear-gradient(to bottom, rgba(226,254,165,.60) 0%, rgba(226,254,165,.28) 50%, rgba(226,254,165,.03) 100%);
  -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
  animation: candleBeam var(--flicker) ease-in-out infinite;
}
/* two nested elements: one element cannot have two animations writing transform */
.abduct .pull { position: absolute; left: 50%; top: 286px; width: 200px; z-index: 1; translate: -50% 0; transform-origin: 50% 0; animation: candlePull var(--flicker) ease-in-out infinite; }
.abduct .who { width: 100%; aspect-ratio: 445/584; background: url("/assets/img/mascot-abducted-sprite.webp") 0 0 / 400% 100% no-repeat; animation: whoFrames var(--cycle) infinite, whoSway var(--sway) ease-in-out infinite alternate; }
/* explicit stops rather than steps(): no rounding to argue with */
@keyframes whoFrames {
  0%, 24.9% { background-position-x: 0%; }
  25%, 49.9% { background-position-x: 33.3333%; }
  50%, 74.9% { background-position-x: 66.6667%; }
  75%, 100% { background-position-x: 100%; }
}
@keyframes whoSway { from { transform: rotate(-1.8deg); } to { transform: rotate(1.8deg); } }
/* A flame gutters, it does not oscillate: ten stops at uneven distances, eased
   between. All three sets share those ten positions exactly. */
@keyframes candleGlow {
  0% { opacity:.74; transform:scale(1.01); }  9% { opacity:.90; transform:scale(1.06); }
  17% { opacity:.69; transform:scale(1.00); } 28% { opacity:.97; transform:scale(1.08); }
  39% { opacity:.77; transform:scale(1.02); } 51% { opacity:.87; transform:scale(1.05); }
  63% { opacity:.68; transform:scale(1.00); } 74% { opacity:1;   transform:scale(1.09); }
  85% { opacity:.78; transform:scale(1.03); } 100% { opacity:.74; transform:scale(1.01); }
}
@keyframes candleBeam {
  0% { opacity:.81; }  9% { opacity:.92; } 17% { opacity:.77; } 28% { opacity:.98; }
  39% { opacity:.83; } 51% { opacity:.91; } 63% { opacity:.76; } 74% { opacity:1; }
  85% { opacity:.84; } 100% { opacity:.81; }
}
@keyframes candlePull {
  0% { transform: translateY(-7px) scale(.930,.965); }   9% { transform: translateY(-18px) scale(.876,.938); }
  17% { transform: translateY(-3px) scale(.948,.974); } 28% { transform: translateY(-24px) scale(.850,.925); }
  39% { transform: translateY(-9px) scale(.920,.960); } 51% { transform: translateY(-17px) scale(.884,.942); }
  63% { transform: translateY(-2px) scale(.952,.976); } 74% { transform: translateY(-26px) scale(.840,.920); }
  85% { transform: translateY(-10px) scale(.916,.958); } 100% { transform: translateY(-7px) scale(.930,.965); }
}
@media (max-width: 1099px) { .abduct { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .abduct .rig, .abduct .glow, .abduct .beam, .abduct .pull, .abduct .who { animation: none; }
  .abduct .who { background-position-x: 33.3333%; }
  .abduct .glow { opacity: .72; }
}

.foot-meta { position: absolute; left: 0; right: 0; bottom: 36px; z-index: 3; display: flex; justify-content: space-between; padding: 0 var(--gutter); font-size: 12px; font-weight: 700; letter-spacing: .06em; color: var(--cream); }

/* ---------- Scroll stop-markers ----------
   A pinned section holds the page still while its row fills in, and lets go only
   when the last card has arrived. main.js turns this on per section, and only
   when the whole section fits on screen - on a phone every section is 2-4 screens
   tall, so there is nothing to pin and the normal scrub is used instead. */
[data-pin].on { height: var(--pin-h); padding-top: 0; padding-bottom: 0; }
[data-pin].on > .pin-inner {
  position: sticky; top: 0; height: 100vh; padding-top: 96px;
  display: flex; flex-direction: column; justify-content: center; gap: 0;
}
[data-pin].on > .pin-inner > .wrap { flex: none; }

/* ---------- Toast ---------- */
.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 200%); opacity: 0; visibility: hidden; z-index: 90; background: var(--ink); color: var(--lime); padding: 14px 22px; border-radius: 100px; font-weight: 700; transition: transform .3s ease, opacity .3s ease, visibility .3s; max-width: calc(100vw - 32px); text-align: center; }
.toast.show { transform: translate(-50%, 0); opacity: 1; visibility: visible; }

/* ---------- Reveal: tied to the scroll, not to a trigger ----------
   main.js writes --r (0 → 1) from the scroll position, so scrolling down plays
   an animation and scrolling back up plays it backwards. No transitions here on
   purpose - the scroll is the timeline. html.boot adds them for the first
   screenful only, so the page still animates in on load. */
.reveal { opacity: var(--r, 0); transform: translateY(calc((1 - var(--r, 0)) * 44px)); }
html.boot .reveal { transition: opacity .6s cubic-bezier(.22,.9,.24,1), transform .6s cubic-bezier(.22,.9,.24,1); transition-delay: calc(var(--i, 0) * 90ms); }

/* Headlines: every word rides up from behind its own mask */
[data-split] .w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .14em; margin-bottom: -.14em; }
[data-split] .w > i { display: block; font-style: normal; transform: translateY(calc((1 - var(--r, 0)) * 125%)); }
html.boot [data-split] .w > i { transition: transform .75s cubic-bezier(.22,.9,.24,1); }
/* the SVG next to a split headline comes in with it */
[data-split] > svg { opacity: var(--r, 0); transform: scale(calc(.55 + .45 * var(--r, 0))) rotate(calc((1 - var(--r, 0)) * -30deg)); transform-origin: center; }
html.boot [data-split] > svg { transition: opacity .5s ease .3s, transform .6s cubic-bezier(.34,1.56,.64,1) .3s; }

/* Pop-in (speech bubble) */
[data-pop] { opacity: var(--r, 0); transform: scale(calc(.45 + .55 * var(--r, 0))) rotate(calc((1 - var(--r, 0)) * -10deg)); }
html.boot [data-pop] { transition: opacity .3s ease .3s, transform .55s cubic-bezier(.34,1.56,.64,1) .3s; }

@keyframes scroll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal, [data-split] .w > i, [data-split] > svg, [data-pop], .pie .pop { --r: 1; }
  .crumbs-char { transform: none; }
}

/* ---------- Responsive ----------
   Breakpoints follow the original: desktop ≥1200, tablet 810–1199, mobile <810 */
.nav .soon { display: none; }
.lbl-short { display: none; }
@media (max-width: 560px) { .lbl-long { display: none; } .lbl-short { display: inline; } }
@media (max-width: 1199px) {
  .about-grid { grid-template-columns: 1fr; gap: 16px; max-width: 640px; margin: 0 auto; }
  .about-left, .about-right { margin: 0; min-height: 0; }
  .about-left { padding-bottom: 0; }
  .about-left img { width: 80%; max-width: 440px; margin: 10px auto 0; }
  .about-mid { min-height: 0; }
  .about-right { padding: 34px; }
  .about-right img { position: static; width: 130px; margin: 6px auto 0; }
  .crumbs-body { grid-template-columns: 1fr; padding: 40px 40px 0; max-width: 640px; margin: 0 auto; }
  .notes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-mascot { right: 4%; width: clamp(200px, 26vw, 300px); top: -230px; }
  .bubble { right: calc(4% + clamp(170px, 22vw, 250px)); top: -210px; }
}
@media (max-width: 809px) {
  .nav { top: 12px; }
  .nav-bar { height: 58px; padding: 0 6px 0 12px; }
  .brand { font-size: 20px; gap: 8px; }
  .brand img { width: 34px; }
  .nav-right .icon.hide-sm { display: none; }
  .sheet { padding-top: 12px; }
  .sheet-bar { height: 58px; }
  .hero { padding-top: 130px; }
  .hero-stage { height: 314px; margin-top: 24px; }
  .hero-mascot { right: auto; left: 50%; top: -302px; width: 250px; transform: translateX(-50%) rotate(4deg); }
  .bubble { right: 12px; left: auto; top: -284px; font-size: 20px; padding: 10px 16px; }
  .bubble::after { right: auto; left: 18px; border-top-color: var(--ink); border-left-color: var(--ink); border-right-color: transparent; }
  /* card radius drops to 40px here, so the tab clears it at 46px */
  .ca-tab { left: 46px; right: 46px; max-width: none; justify-content: center; padding: 6px 12px; }
  .bolt { left: auto; right: 8%; top: -40px; width: 22px; }
  .getit { padding-bottom: 90px; }
  .getit-card { border-radius: 40px; padding: 40px 0 30px; }
  .getit-card h2 svg { width: 40px; }
  .getit-card h2 { font-size: clamp(34px, 11vw, 64px); gap: 12px; }
  .about { padding-top: 30px; }
  .about h2 { margin-bottom: 40px; }
  .recipe { padding: 90px 0; }
  .buy { padding: 90px 0 60px; }
  footer { padding-top: 30px; }
  .arches { grid-template-columns: 1fr; max-width: 440px; margin: 0 auto; gap: 40px; }
  .crumbs { padding: 90px 0 100px; }
  .menu-sec { padding-top: 90px; }
  .menu-grid { grid-template-columns: 1fr; gap: 34px; }
  .slip { max-width: none; }
  .rules { padding: 80px 0; }
  .rules-head { margin-bottom: 36px; }
  .buy-grid { grid-template-columns: minmax(0, 1fr); }
  .buy-title { padding: 40px 24px; }
  .buy-title h2 { font-size: clamp(40px, 14cqi, 96px); }
  .buy-intro, .steps-card { min-height: 0; }
  .steps-card { min-height: 340px; }
  .foot-mark { font-size: clamp(40px, 15cqi, 120px); }
  .menu-sec h2 { font-size: clamp(54px, 15vw, 110px); }
  .rules-head h2 { font-size: clamp(36px, 13cqi, 88px); }
  .foot-links { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 20px; justify-items: center; font-size: 17px; margin: 28px 0 0; }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .nav-right .btn.sm { padding: 0 16px; height: 40px; }
  .pill { height: 54px; font-size: 16px; padding: 0 22px; }
  .pill-logo { width: 30px; height: 30px; margin-left: -8px; }
  .about-left { padding: 28px 24px 0; }
  .about-mid, .about-right { padding: 28px 24px; }
  .about-left h3 { font-size: 26px; }
  .code { font-size: 11.5px; padding: 14px; }
  .crumbs-body { padding: 30px 18px 0; gap: 28px; }
  .crumbs-card { border-radius: 40px; padding-bottom: 36px; }
  .crumbs-strip .track { font-size: 20px; }
  .crumbs-strip .track > * { margin-right: 26px; }
  .crumbs-legend { grid-template-columns: 1fr; }
  .crumbs-row { padding: 14px 16px; font-size: 16px; border-radius: 16px; }
  .crumbs-row b { font-size: 16px; }
  .crumbs-stage { margin-top: 4px; }
  .crumbs-char { width: 72cqi; }
  .notes { grid-template-columns: 1fr; gap: 16px; }
  .sheet-menu { padding: 30px 20px 28px; }
  .sm-lead { display: none; }
  .sm-pct { margin-left: auto; }
  .sm-foot { display: block; }
  .sm-cta { text-align: left; margin: 22px 0 0; }
  .sm-cta .btn { width: 100%; }
  .slip { font-size: 12.5px; padding: 16px 16px 18px; max-width: none; }
  .slip-cut { margin: 13px -16px; }
  .buy-intro { padding: 28px; font-size: 18px; }
  .steps-card { padding: 30px 26px; }
  .dots button { width: 48px; }
  .buy-cta { height: 80px; font-size: clamp(22px, 8cqi, 30px); padding: 0 20px; }
  .foot-meta { position: static; flex-direction: column; gap: 6px; align-items: center; }
  .foot-bottom { --oven: min(76vw, 300px); height: calc(var(--oven) * .962 + 64px); margin-top: 28px; }
  .btn.lg { height: 64px; font-size: 21px; padding: 0 32px; }
}
@media (max-width: 380px) {
  .brand img { display: none; }
  .hero-mascot { width: 220px; top: -274px; }
  .bubble { top: -274px; font-size: 17px; }
  .hero-stage { height: 286px; }
  .ca-tab span { display: none; }
}

/* ---------- Custom cursors ---------- */
/* A 32px base with a 64px @2x. Chrome quietly ignores a cursor bitmap much past
   128px, so the base stays small; PNG rather than SVG because Safari's SVG
   cursor support is unreliable. The plain url() declaration is written first
   and the image-set() ones after it: a browser that cannot parse image-set()
   drops those lines at parse time and keeps the 1x, so there is no @supports
   test to get wrong. The two numbers after the url are the hotspot - the pixel
   that actually does the clicking. */
html, body {
  cursor: url("/assets/cursors/arrow-32.png") 1 0, auto;
  cursor: -webkit-image-set(url("/assets/cursors/arrow-32.png") 1x,
                            url("/assets/cursors/arrow-64.png") 2x) 1 0, auto;
  cursor: image-set(url("/assets/cursors/arrow-32.png") 1x,
                    url("/assets/cursors/arrow-64.png") 2x) 1 0, auto;
}
a, button, summary, label, select, [role="button"],
.pie .slice, .dots button, .ca-tab,
input[type="checkbox"], input[type="radio"] {
  cursor: url("/assets/cursors/point-32.png") 10 0, pointer;
  cursor: -webkit-image-set(url("/assets/cursors/point-32.png") 1x,
                            url("/assets/cursors/point-64.png") 2x) 10 0, pointer;
  cursor: image-set(url("/assets/cursors/point-32.png") 1x,
                    url("/assets/cursors/point-64.png") 2x) 10 0, pointer;
}
/* Typing gets its own beam rather than the system caret. The hotspot is the
   middle of the bar, not a corner: a text cursor that clicks anywhere else
   drops the caret between the wrong two letters. */
input[type="text"], input[type="number"], input[type="email"],
input[type="search"], input[type="tel"], input[type="url"], textarea {
  cursor: url("/assets/cursors/text-32.png") 16 16, text;
  cursor: -webkit-image-set(url("/assets/cursors/text-32.png") 1x,
                            url("/assets/cursors/text-64.png") 2x) 16 16, text;
  cursor: image-set(url("/assets/cursors/text-32.png") 1x,
                    url("/assets/cursors/text-64.png") 2x) 16 16, text;
}
button[disabled], .btn[disabled], .btn.is-disabled { cursor: not-allowed; }

/* The weight sliders get the open glove instead - the gesture is "take hold of
   this", not "click here", and it closes into a fist for as long as you hold it.

   Each vendor pseudo-element gets its own rule on purpose. A selector list is
   thrown away whole when a browser does not recognise one of its parts, so
   putting ::-webkit-slider-thumb and ::-moz-range-thumb in the same list as the
   input would leave every engine with no rule at all. The thumb needs its own
   because a cursor set there beats the one set on the track. */
.cr-ctl input[type="range"] {
  cursor: url("/assets/cursors/palm-32.png") 16 15, grab;
  cursor: -webkit-image-set(url("/assets/cursors/palm-32.png") 1x,
                            url("/assets/cursors/palm-64.png") 2x) 16 15, grab;
  cursor: image-set(url("/assets/cursors/palm-32.png") 1x,
                    url("/assets/cursors/palm-64.png") 2x) 16 15, grab;
}
.cr-ctl input[type="range"]::-webkit-slider-thumb {
  cursor: url("/assets/cursors/palm-32.png") 16 15, grab;
  cursor: -webkit-image-set(url("/assets/cursors/palm-32.png") 1x,
                            url("/assets/cursors/palm-64.png") 2x) 16 15, grab;
}
.cr-ctl input[type="range"]::-moz-range-thumb {
  cursor: url("/assets/cursors/palm-32.png") 16 15, grab;
  cursor: image-set(url("/assets/cursors/palm-32.png") 1x,
                    url("/assets/cursors/palm-64.png") 2x) 16 15, grab;
}
.cr-ctl input[type="range"]:active {
  cursor: url("/assets/cursors/fist-32.png") 14 16, grabbing;
  cursor: -webkit-image-set(url("/assets/cursors/fist-32.png") 1x,
                            url("/assets/cursors/fist-64.png") 2x) 14 16, grabbing;
  cursor: image-set(url("/assets/cursors/fist-32.png") 1x,
                    url("/assets/cursors/fist-64.png") 2x) 14 16, grabbing;
}
.cr-ctl input[type="range"]:active::-webkit-slider-thumb {
  cursor: url("/assets/cursors/fist-32.png") 14 16, grabbing;
  cursor: -webkit-image-set(url("/assets/cursors/fist-32.png") 1x,
                            url("/assets/cursors/fist-64.png") 2x) 14 16, grabbing;
}
.cr-ctl input[type="range"]:active::-moz-range-thumb {
  cursor: url("/assets/cursors/fist-32.png") 14 16, grabbing;
  cursor: image-set(url("/assets/cursors/fist-32.png") 1x,
                    url("/assets/cursors/fist-64.png") 2x) 14 16, grabbing;
}

/* ---------- The Oven ----------
   The box is an oven drawn in CSS. The footer already carries the oven mascot;
   repeating that picture two screens higher would read as a copy-paste, so the
   focal point here is built rather than reused. */
.oven { background: var(--deep-2); padding: calc(12 * var(--vu)) 0; }
.oven-head { text-align: center; margin-bottom: calc(4 * var(--vu)); }
.oven-head h2 { font-size: clamp(34px, 8cqi, calc(10.2 * var(--vu))); color: var(--lime); }
.oven-grid { display: grid; grid-template-columns: minmax(0, calc(46 * var(--vu))) minmax(0, 1fr); gap: 48px; align-items: start; }
/* The oven is a drawing, and the live figure sits on its door glass. The window
   box is pinned to the black rectangle measured off the artwork itself - it
   starts 18.85% in from the left and 39.08% down, and runs 50.04% wide by 28.58%
   tall. Those numbers belong to /assets/img/oven.webp: redraw the oven and they
   have to be measured again. */
.oven-box { container-type: inline-size; }
.oven-art { position: relative; }
.oven-art img { display: block; width: 100%; height: auto; }
/* The oven is lit: small flames all the way round the inside of the glass, each
   one on its own clock so the ring never pulses in unison, plus a warm rim glow
   clipped to the same quad. Everything here animates transform and opacity only,
   so it stays off the layout and paint path. */
.oven-fire { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.oven-glow { fill: none; stroke: var(--orange); stroke-width: 44; filter: blur(22px); opacity: .45; animation: ovenGlow 3.6s ease-in-out infinite alternate; }
.oven-fire .f-out { fill: var(--orange); }
.oven-fire .f-in { fill: #FFD25E; }
.oven-fire .fl { transform-box: fill-box; transform-origin: 50% 100%; animation: ovenFlame 900ms ease-in-out infinite alternate; }
@keyframes ovenFlame { from { transform: scale(.74, .62); } to { transform: scale(1.08, 1.18); } }
@keyframes ovenGlow { from { opacity: .28; } to { opacity: .55; } }
@media (prefers-reduced-motion: reduce) {
  .oven-fire .fl, .oven-glow { animation: none; }
  .oven-fire .fl { transform: scale(.94, .92); }
}
.oven-window {
  position: absolute; left: 18.85%; top: 39.08%; width: 50.04%; height: 28.58%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; padding: 0 5%; text-align: center;
  /* The glass is not a rectangle: its left and right edges are vertical, but the
     top and bottom run downhill to the right - a pure vertical shear. Measured off
     the artwork, the centre line drops 65px over 610px, which is 6.1deg. Skewing
     the readout by the same amount lays the text on the door instead of floating
     it in front. Skew about the centre so the box itself stays put. */
  transform: skewY(6.1deg); transform-origin: center;
}
.oven-label { display: block; font-weight: 700; font-size: clamp(9px, 2.9cqi, 12px); letter-spacing: .14em; text-transform: uppercase; color: var(--mint); }
.oven-amount { display: block; font-family: var(--f-display); font-weight: 400; font-size: clamp(20px, 7.4cqi, 32px); line-height: 1.05; color: var(--lime); margin: 0; overflow-wrap: anywhere; }
.oven-unit { display: block; font-weight: 700; font-size: 14px; letter-spacing: .1em; text-transform: uppercase; color: var(--cream); opacity: .7; }
.oven-more { display: block; font-weight: 600; font-size: 14px; color: var(--mint); margin-top: 8px; }
.oven-more:empty { display: none; }
.oven-state { margin: 10px 0 0; font-weight: 600; font-size: 15px; color: var(--cream); opacity: .75; text-align: center; }
.oven-steps { margin: 0 0 calc(2.4 * var(--vu)); padding: 0; list-style: none; counter-reset: ovenstep; }
.oven-steps li { position: relative; padding-left: 54px; margin-bottom: calc(1.6 * var(--vu)); font-weight: 500; font-size: clamp(16px, 1.9 * var(--vu), 26px); color: var(--cream); opacity: .9; }
.oven-steps li::before { counter-increment: ovenstep; content: "0" counter(ovenstep); position: absolute; left: 0; top: -3px; font-family: var(--f-display); font-weight: 400; font-size: 28px; line-height: 1; color: transparent; -webkit-text-stroke: 1.6px var(--lime); }
.oven-steps b { color: var(--lime); font-weight: 700; }
.oven-steps code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .92em; background: rgba(226,254,165,.14); border-radius: 6px; padding: 1px 6px; }
.oven-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: calc(2 * var(--vu)); }
.oven-stats > div { background: var(--deep); border: 2px solid rgba(226,254,165,.22); border-radius: var(--r-md); padding: calc(1.5 * var(--vu)) 18px; }
.oven-stats span { display: block; font-weight: 700; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--mint); margin-bottom: 8px; }
.oven-stats b { font-family: var(--f-display); font-weight: 400; font-size: clamp(18px, 2.2 * var(--vu), 30px); line-height: 1.15; letter-spacing: -.01em; color: var(--lime); overflow-wrap: break-word; }
.oven-note { margin: 0 0 calc(1.2 * var(--vu)); font-weight: 600; font-size: clamp(15px, 1.8 * var(--vu), 24px); color: var(--cream); }
@media (max-width: 809px) {
  .oven-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .oven-box { max-width: 460px; }
}
@media (max-width: 560px) {
  .oven { padding: 80px 0; }
  .oven-head { margin-bottom: 36px; }
  .oven-stats { grid-template-columns: 1fr; }
  .oven-steps li { padding-left: 50px; font-size: 16px; }
  .oven-steps li::before { font-size: 23px; top: -1px; }
}


/* ---------- Oven ticker in the nav ----------
   Sits in the empty middle of the pill: a pulsing dot for "something is running",
   the live pot for "what", and a hairline that fills toward the threshold the
   contract declares. No threshold on chain yet, so it runs as a stripe. */
.nav-oven { display: flex; flex-direction: column; justify-content: center; gap: 6px; height: 40px; padding: 0 16px; border-radius: 100px; background: var(--ink); text-decoration: none; transition: transform .15s ease; }
.nav-oven:hover { transform: translateY(-2px); }
.nav-right .nav-oven { margin-right: 6px; }  /* sits with the X and chart icons, a touch apart from them */
.nav-oven-in { display: flex; align-items: center; gap: 8px; line-height: 1; }
.nav-oven-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--lime); flex: none; animation: ovenPulse 3.4s ease-out infinite; }
@keyframes ovenPulse {
  0% { box-shadow: 0 0 0 0 rgba(226, 254, 165, .5); }
  70% { box-shadow: 0 0 0 8px rgba(226, 254, 165, 0); }
  100% { box-shadow: 0 0 0 0 rgba(226, 254, 165, 0); }
}
.nav-oven-label { font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--mint); white-space: nowrap; }
.nav-oven b { font-size: 13px; font-weight: 800; color: var(--lime); font-variant-numeric: tabular-nums; }
.nav-oven-unit { font-size: 10px; font-weight: 700; letter-spacing: .1em; color: var(--cream); opacity: .5; }
.nav-oven-line { display: block; height: 2px; border-radius: 2px; background: rgba(248, 255, 232, .16); overflow: hidden; }
.nav-oven-line i { display: block; height: 100%; width: 0; background: var(--lime); transition: width .9s cubic-bezier(.2, .8, .2, 1); }
.nav-oven.is-idle .nav-oven-line i { width: 100%; opacity: .55; background: repeating-linear-gradient(115deg, var(--lime) 0 8px, rgba(226, 254, 165, .1) 8px 20px); background-size: 200% 100%; animation: ovenStripe 9s linear infinite; }
@keyframes ovenStripe { to { background-position: -200% 0; } }
@media (max-width: 1199px) { .nav-oven-label { display: none; } }
@media (max-width: 809px) { .nav-oven { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .nav-oven-dot { animation: none; }
  .nav-oven-line i { transition: none; }
  .nav-oven.is-idle .nav-oven-line i { animation: none; }
}