/* cerna — palantir structure (hairline grids, mono readouts, night bands)
   on rhode softness (milky paper, lowercase type, product-first tiles). */

:root {
  --paper: #F4F2EE;
  --paper-2: #EBE8E2;
  --card: #FAF9F6;
  --ink: #141414;
  --ink-2: #55524C;
  --ink-3: #8B877F;
  --line: rgba(20, 20, 20, .11);
  --line-2: rgba(20, 20, 20, .24);

  --night: #0C0C0D;
  --night-2: #161618;
  --night-ink: #F1EFEA;
  --night-ink-2: #9A978F;
  --night-line: rgba(241, 239, 234, .13);
  --error: #E9A08C;

  --mint: #73A4A9;      --mint-tint: #DCE8E7;
  --orange: #B25E26;    --orange-tint: #F0E2D6;
  --bubblegum: #B98589; --bubblegum-tint: #F1E2E1;
  --sprite: #4F8E48;    --sprite-tint: #E0EADB;

  --sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --gutter: clamp(16px, 3.2vw, 44px);
  --max: 1440px;
  --pad-x: max(var(--gutter), calc((100vw - var(--max)) / 2));
  --nav-h: 60px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  /* rhode's house curve: ease-in-out quart, run at ~.7s for nearly every move */
  --ease-rhode: cubic-bezier(.76, 0, .24, 1);

  color-scheme: light;
}

/* ---------- base ---------- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img { display: block; max-width: 100%; }
button, input, select { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, dl, dd, figure { margin: 0; }
[hidden] { display: none !important; }
[id] { scroll-margin-top: calc(var(--nav-h) + 16px); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.sec--night :focus-visible, .footer :focus-visible, .auth__panel :focus-visible { outline-color: var(--night-ink); }

.skip {
  position: absolute; left: 12px; top: -48px; z-index: 100;
  background: var(--ink); color: var(--paper); padding: 10px 14px;
}
.skip:focus { top: 12px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.label {
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.4;
  font-weight: 400;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.sec--night .label, .footer .label, .auth__panel .label { color: var(--night-ink-2); }
.num { font-family: var(--mono); font-size: 14px; letter-spacing: .02em; }

/* ---------- buttons ---------- */

.btn {
  --fill-bg: var(--card);
  --fill-ink: var(--ink);
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 46px; padding: 0 22px;
  border-radius: 999px;
  border: 1px solid var(--ink);
  background: var(--ink); color: var(--paper);
  font-size: 15px; font-weight: 450; white-space: nowrap;
  cursor: pointer;
  transition: background-color .25s, color .25s, border-color .25s, opacity .25s;
}
.btn:hover { background: #2C2B29; border-color: #2C2B29; }
.btn:disabled { opacity: .35; cursor: not-allowed; }
.btn--ghost { --fill-bg: var(--ink); --fill-ink: var(--paper); background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn--ghost:hover { background: transparent; border-color: var(--ink); }
.btn--light { --fill-bg: var(--night); --fill-ink: var(--night-ink); background: var(--night-ink); color: var(--night); border-color: var(--night-ink); }
.btn--light:hover { background: #fff; border-color: #fff; }
.btn--ghost-light { --fill-bg: var(--night-ink); --fill-ink: var(--night); background: transparent; color: var(--night-ink); border-color: var(--night-line); }
.btn--ghost-light:hover { background: transparent; border-color: var(--night-ink); }
.btn--block { width: 100%; }
.arrow { font-family: var(--mono); transition: transform .5s var(--ease-rhode); }
.btn:hover .arrow { transform: translateX(3px); }

/* directional fill: app.js wipes this inverted copy in from the edge the cursor
   entered and back out through the edge it leaves (rhode's button hover) */
.btn__fill {
  position: absolute; inset: 0; z-index: 1;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  border-radius: inherit;
  background: var(--fill-bg); color: var(--fill-ink);
  clip-path: inset(0 0 100% 0 round 999px);
  transition: clip-path .5s var(--ease-rhode);
  pointer-events: none; user-select: none;
}
.btn.has-fill:hover { background: var(--ink); border-color: var(--ink); }
.btn--ghost.has-fill:hover, .btn--ghost-light.has-fill:hover { background: transparent; }
.btn--light.has-fill:hover { background: var(--night-ink); border-color: var(--night-ink); }

/* ---------- tiles ---------- */

.tile {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--tint, var(--paper-2));
  transition: background-color .7s var(--ease-rhode);
}
/* the product shots sit on pure white, so multiply lets the tile tint show through */
.tile img { mix-blend-mode: multiply; }

/* ---------- announcement + nav ---------- */

.announce {
  background: var(--night); color: var(--night-ink);
  text-align: center;
  padding: 8px var(--gutter);
  font-family: var(--sans); font-size: 14px; letter-spacing: -.01em;
}
.announce a { display: inline-flex; align-items: center; gap: .5em; }
.announce .arrow { font-family: var(--sans); }
.announce a:hover .arrow { transform: translateX(3px); }

.nav {
  position: sticky; top: 0; z-index: 40;
  height: var(--nav-h);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding-inline: var(--pad-x);
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s, transform .7s var(--ease-rhode);
}
.nav.is-scrolled, .nav.is-open { border-bottom-color: var(--line); }
/* tucks away while you scroll down, slides back the moment you scroll up */
.nav.is-hidden { transform: translateY(-100%); }
.wordmark { justify-self: start; font-size: 25px; font-weight: 600; letter-spacing: -.055em; line-height: 1; }
.nav__links { display: flex; gap: 34px; font-size: 15px; }
.nav__actions { justify-self: end; display: flex; align-items: center; gap: 26px; font-size: 15px; }
.nav__links a, .nav__actions a, .nav__actions button {
  position: relative; padding: 6px 0;
  background: none; border: 0; cursor: pointer;
}
.nav__links a::after, .nav__actions a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px;
  background: currentColor;
  transform: scaleX(0); transform-origin: right;
  transition: transform .6s var(--ease-rhode);
}
.nav__links a:hover::after, .nav__actions a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }

/* underline draws in from the left and leaves to the right */
.footer ul a, .footer__base a, .crumbs a, .spec__name, .partner-cta p a {
  background: linear-gradient(currentColor, currentColor) no-repeat 100% 100% / 0 1px;
  transition: background-size .6s var(--ease-rhode), color .2s;
}
.footer ul a:hover, .footer__base a:hover, .crumbs a:hover, .spec__name:hover,
.footer ul a:focus-visible, .footer__base a:focus-visible, .crumbs a:focus-visible, .spec__name:focus-visible {
  background-position: 0 100%; background-size: 100% 1px;
}
.nav__bag .num { font-size: 12px; margin-left: 2px; }
.nav__menu { display: none; }

.mobile-menu {
  position: absolute; top: 100%; left: 0; right: 0;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  padding: 8px var(--gutter) 24px;
}
.mobile-menu a {
  display: flex; align-items: baseline; gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
  font-size: 32px; letter-spacing: -.04em; line-height: 1;
}

@media (max-width: 820px) {
  .nav { grid-template-columns: 1fr auto; }
  .nav__links, .nav__login { display: none; }
  .nav__menu { display: inline-flex; }
  .nav__actions { gap: 20px; }
}

/* ---------- hero ---------- */

.hero {
  /* one solid gum tint across the full width; app.js swaps --tint with each tin */
  --tint: var(--mint-tint);
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  min-height: clamp(580px, calc(100svh - var(--nav-h) - 34px - 92px), 900px);
  background: var(--tint);
  transition: background-color .9s ease; /* matches the slide fade so the two stay in step */
  border-bottom: 1px solid var(--line);
}
.hero__copy {
  display: flex; flex-direction: column; justify-content: flex-start; gap: 48px;
  padding: clamp(32px, 4.4vw, 64px) clamp(24px, 4vw, 64px) clamp(36px, 4.4vw, 64px) var(--pad-x);
}
.hero h1 {
  /* the rotating word sits on its own line; sized so the widest one (~3.9em) fits the column */
  font-size: clamp(48px, 7.6vw, 120px);
  font-weight: 400;
  letter-spacing: -.058em;
  line-height: .88;
}
/* "Imagine if you could feel / ___ / all the time": the small lines frame the big word, which
   rolls up in step with the hero tin in that gum's color (--hero-ink is set per slide in app.js) */
.say { display: block; font-size: .32em; letter-spacing: -.03em; line-height: 1.15; color: var(--ink); }
.rot { white-space: nowrap; color: var(--hero-ink, #4E8287); transition: color .9s var(--ease-rhode); }
.rot__window {
  display: inline-grid;
  /* clip only top and bottom (for the roll); letters are never cut at the sides,
     even while the width is still easing to fit a longer word */
  overflow: hidden; overflow-x: visible; overflow-y: clip;
  padding-block: .1em .14em; margin-block: -.1em -.14em;
  margin-inline: -.12em; /* cancels the words' overhang padding so the line's alignment stays exact */
}
/* the box is fixed at the widest word and each word is centered in it (left on phones), so the roll
   only ever moves up: no width change, no sideways drift. the side padding covers glyph overhang
   (the "c" in energetic/euphoric) that tight tracking pushes past the edge */
.rot__word { grid-area: 1 / 1; justify-self: center; padding-inline: .12em; transform: translateY(115%); transition: transform .9s var(--ease-rhode); }
.rot__word.is-current { transform: none; }
.rot__word.is-out { transform: translateY(-115%); }
.rot__word.no-anim { transition: none; }
.hero__lede { margin-top: 28px; max-width: 38ch; font-size: clamp(16px, 1.25vw, 19px); color: var(--ink-2); }
.hero__cta { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 10px; }
/* desktop: the copy block sits dead center in its half of the hero */
@media (min-width: 961px) {
  .hero__copy { justify-content: center; align-items: center; text-align: center; }
  .hero__lede { margin-inline: auto; }
  .hero__cta { justify-content: center; }
}

.hero__media {
  background: transparent;
  display: grid; place-items: center;
  padding: clamp(28px, 4vw, 56px);
}
.hero__object { position: relative; width: min(100%, 74svh); aspect-ratio: 1; }
/* each slide is an opaque square in its gum's tint with the tin multiplied on top. the next one
   fades in over the last (which never fades out), on the same .9s ease as the hero background,
   so the square edge never shows and the tin never dips out mid-change */
.hero__slide { position: absolute; inset: 0; isolation: isolate; overflow: hidden; transition: opacity .9s ease; }
.hero__slide img {
  position: absolute; inset: 0;
  display: block; width: 100%; height: 100%; object-fit: contain;
  mix-blend-mode: multiply; -webkit-user-drag: none; user-select: none;
}
/* open + closed side by side at the same scale as a single tin: every photo frames its tin in the
   middle 40% (x 30–70%), so shifting each photo a quarter-width puts the two tins next to each other */
.hero__slide--pair img:first-child { transform: translateX(-24%); }
.hero__slide--pair img:last-child { transform: translateX(24%); }
.hero__slide.is-entering { opacity: 0; transition: none; }
.meta {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  padding-inline: var(--pad-x);
  border-bottom: 1px solid var(--line);
}
.meta__cell {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 24px 20px;
  border-left: 1px solid var(--line);
}
.meta__cell:first-child { border-left: 0; padding-left: 0; }
.meta__num { font-size: clamp(28px, 2.7vw, 42px); font-weight: 300; letter-spacing: -.045em; line-height: 1; }

@media (max-width: 960px) {
  .hero { grid-template-columns: 1fr; min-height: 0; }
  .hero__copy { padding: 32px var(--gutter) 40px; }
  .hero h1 { font-size: clamp(56px, 16vw, 132px); }
  .rot__word { justify-self: start; }
  .hero__media { padding: 24px var(--gutter); }
  .hero__object { width: min(100%, 560px); }
  .meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .meta__cell:nth-child(3) { border-left: 0; padding-left: 0; }
  .meta__cell:nth-child(n + 3) { border-top: 1px solid var(--line); }
}
@media (max-width: 560px) {
  .meta__cell { flex-direction: column; gap: 6px; padding: 18px 14px; }
}

/* ---------- sections ---------- */

.sec { padding: clamp(64px, 9vw, 132px) var(--pad-x); }
.sec + .sec { border-top: 1px solid var(--line); }
.sec--night { background: var(--night); color: var(--night-ink); }
.sec + .sec--night, .sec--night + .sec { border-top-color: transparent; }

.sec-head { margin-bottom: clamp(36px, 5vw, 72px); }
.sec-head__bar {
  display: flex; justify-content: space-between; gap: 16px;
  padding-bottom: 14px; margin-bottom: clamp(24px, 3vw, 40px);
  border-bottom: 1px solid var(--line);
}
.sec--night .sec-head__bar { border-bottom-color: var(--night-line); }
.sec-head__bar .label:first-child { color: var(--ink); }
.sec--night .sec-head__bar .label:first-child { color: var(--night-ink); }
/* a section header that is just the label bar */
.sec-head--bar .sec-head__bar { margin-bottom: 0; }
.sec-head__body { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gutter); align-items: end; }
.sec-head h2 { font-size: clamp(40px, 5.6vw, 88px); font-weight: 400; letter-spacing: -.052em; line-height: .92; }
.sec-head p { max-width: 38ch; color: var(--ink-2); font-size: 17px; }
.sec--night .sec-head p { color: var(--night-ink-2); }

@media (max-width: 820px) {
  .sec-head__body { grid-template-columns: 1fr; gap: 20px; }
}

/* headline lines rise out of a mask, one after another (app.js splits on <br>) */
.lines .line {
  display: block; overflow: hidden; overflow-x: visible; overflow-y: clip;
  padding-block: .1em .14em; margin-block: -.1em -.14em;
}
.lines .line > span {
  display: block;
  transform: translateY(110%);
  transition: transform 1.1s var(--ease-rhode);
  transition-delay: calc(var(--d, 0ms) + var(--l, 0) * 110ms);
}
.lines.is-in .line > span, .is-in .lines .line > span { transform: none; }

/* ---------- flavor cards (home) ---------- */

/* four fixed cards on a hairline grid, one per flavor */
.fcards {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--line); border-left: 1px solid var(--line);
}
.fcard {
  display: flex; flex-direction: column; gap: 12px;
  padding: 22px 20px 20px;
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.fcard__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.fcard__dot { width: 10px; height: 10px; border-radius: 50%; }
.fcard__name { font-size: clamp(30px, 2.8vw, 42px); font-weight: 400; letter-spacing: -.045em; line-height: 1; }
.fcard__desc { flex: 1; margin-bottom: 18px; color: var(--ink-2); font-size: 15px; }


@media (max-width: 1200px) {
  .fcards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .fcards { grid-template-columns: 1fr; }
}

/* ---------- ingredients ---------- */

.ingredients {
  counter-reset: ing;
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line); border-left: 1px solid var(--line);
}
.ingredients li {
  counter-increment: ing;
  display: flex; align-items: baseline; gap: 16px;
  padding: 18px 20px;
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  font-size: clamp(19px, 1.8vw, 26px); letter-spacing: -.035em; line-height: 1.15;
}
.ingredients li::before {
  content: counter(ing, decimal-leading-zero);
  flex: none;
  font-family: var(--mono); font-size: 11px; letter-spacing: .08em; color: var(--ink-3);
}
@media (max-width: 600px) { .ingredients { grid-template-columns: 1fr; } }

/* ---------- partner cta + inline forms ---------- */

.partner-cta {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gutter); align-items: end;
  margin-top: clamp(36px, 4vw, 56px);
}
.partner-cta h3 { font-size: clamp(26px, 2.6vw, 38px); font-weight: 400; letter-spacing: -.045em; line-height: 1; margin-bottom: 10px; }
.partner-cta p { color: var(--ink-2); max-width: 46ch; }

.inline-form {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 4px 4px 20px;
  border: 1px solid var(--line-2); border-radius: 999px;
  background: var(--card);
  transition: border-color .2s;
}
.inline-form:focus-within { border-color: var(--ink); }
.inline-form input { flex: 1; min-width: 0; height: 40px; border: 0; background: transparent; outline: none; font-size: 15px; }
.inline-form input::placeholder { color: var(--ink-3); }
.inline-form .btn { height: 40px; padding: 0 18px; }
.inline-form--night { background: var(--night-2); border-color: var(--night-line); }
.inline-form--night:focus-within { border-color: var(--night-ink); }
.inline-form--night input::placeholder { color: var(--night-ink-2); }

@media (max-width: 960px) {
  .partner-cta { grid-template-columns: 1fr; }
}

/* ---------- members band ---------- */

.members { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border-top: 1px solid var(--line); }
.members__media { --tint: var(--bubblegum-tint); min-height: clamp(420px, 44vw, 640px); }
.members__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 6%; transform: scale(var(--z, 1)); }
.members__copy {
  display: flex; flex-direction: column; justify-content: center; gap: 22px;
  padding: clamp(48px, 6vw, 96px) var(--pad-x) clamp(48px, 6vw, 96px) clamp(24px, 5vw, 80px);
}
.members__cta { display: flex; flex-wrap: wrap; gap: 10px; }

@media (max-width: 820px) {
  .members { grid-template-columns: 1fr; }
  .members__media { min-height: 0; aspect-ratio: 1; }
  .members__copy { padding: 48px var(--gutter) 64px; }
}

/* ---------- footer ---------- */

.footer { background: var(--night); color: var(--night-ink); padding: clamp(56px, 7vw, 96px) var(--pad-x) 22px; overflow: hidden; }
.footer__grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gutter); max-width: 640px;
  padding-bottom: clamp(56px, 7vw, 96px);
}
.footer ul { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.footer ul a { color: var(--night-ink-2); }
.footer ul a:hover { color: var(--night-ink); }
.footer__mark {
  display: block; width: fit-content;
  font-size: clamp(96px, 39.5vw, 610px);
  font-weight: 500; letter-spacing: -.075em; line-height: .76;
  margin-left: -.035em;
  user-select: none;
  --track: -.075em;
  --stroke: max(2px, .017em);
}
.wordmark { --track: -.055em; --stroke: 1.1px; }

/* wordmark hover: each letter slides up into a hollow outline (like the emboss on the tin),
   then drops back to solid; app.js splits the letters and plays it once per hover */
.wm-letter {
  position: relative; display: inline-block; vertical-align: top; overflow: hidden;
  letter-spacing: 0;
  padding-block: .08em; margin-block: -.08em;
  margin-right: var(--track, 0);
}
.wm-solid { display: block; }
.wm-hollow {
  position: absolute; inset: .08em 0;
  /* hollow: clear fill, stroke in the wordmark's own color */
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: var(--stroke) currentColor;
  transform: translateY(120%);
}
.is-sliding .wm-solid { animation: wm-solid 1.9s both; animation-delay: calc(var(--i) * 70ms); }
.is-sliding .wm-hollow { animation: wm-hollow 1.9s both; animation-delay: calc(var(--i) * 70ms); }
@keyframes wm-solid {
  0% { transform: none; animation-timing-function: cubic-bezier(.76, 0, .24, 1); }
  38%, 62% { transform: translateY(-120%); animation-timing-function: cubic-bezier(.76, 0, .24, 1); }
  100% { transform: none; }
}
@keyframes wm-hollow {
  0% { transform: translateY(120%); animation-timing-function: cubic-bezier(.76, 0, .24, 1); }
  38%, 62% { transform: none; animation-timing-function: cubic-bezier(.76, 0, .24, 1); }
  100% { transform: translateY(120%); }
}
.footer__legal { max-width: 88ch; margin-top: 32px; font-size: 12px; line-height: 1.6; color: var(--night-ink-2); }
.footer__base {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px;
  margin-top: 28px; padding-top: 16px;
  border-top: 1px solid var(--night-line);
}
.footer__base a:hover { color: var(--night-ink); }
.footer--slim { padding-top: 0; }
.footer--slim .footer__legal { margin-top: 0; padding-top: 20px; }
.footer--slim .footer__base { margin-top: 16px; padding-block: 18px; }


/* ---------- shop ---------- */

.page-head { padding: clamp(36px, 5vw, 72px) var(--pad-x) clamp(28px, 3vw, 44px); }
.crumbs { display: flex; gap: 10px; }
.crumbs a { color: var(--ink); }
.page-head__body { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gutter); align-items: end; margin-top: clamp(24px, 3vw, 40px); }
.page-head h1 { font-size: clamp(56px, 9.4vw, 152px); font-weight: 400; letter-spacing: -.062em; line-height: .84; }
.page-head__aside p { color: var(--ink-2); font-size: 17px; max-width: 40ch; }
.page-head__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 24px; border-top: 1px solid var(--line); }
.page-head__stats div { padding: 12px 12px 0 0; }
.page-head__stats div + div { padding-left: 12px; border-left: 1px solid var(--line); }
.page-head__stats dd { font-size: 24px; letter-spacing: -.04em; margin-top: 4px; }

.toolbar {
  position: sticky; top: var(--nav-h); z-index: 20;
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px;
  padding: 12px var(--pad-x);
  background: color-mix(in srgb, var(--paper) 90%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-block: 1px solid var(--line);
  transition: transform .7s var(--ease-rhode);
}
/* once stuck under the nav, the toolbar rides up with it when the nav tucks away */
.nav-hidden .toolbar.is-stuck { transform: translateY(calc(var(--nav-h) * -1)); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  height: 34px; padding: 0 14px;
  border: 1px solid var(--line-2); border-radius: 999px; background: transparent; cursor: pointer;
  font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  transition: background-color .2s, color .2s, border-color .2s;
}
.chip:hover { border-color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.chip__count { opacity: .55; margin-left: 6px; }

.shop { padding: clamp(28px, 3vw, 44px) var(--pad-x) clamp(72px, 9vw, 132px); }
.products { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 56px clamp(12px, 1.6vw, 24px); }
.card { display: flex; flex-direction: column; gap: 18px; }
.card--set { grid-column: span 2; }
.card__media { aspect-ratio: 4 / 5; }
.card__media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: contain;
  transform: scale(1.04);
  transition: opacity .7s var(--ease-rhode), transform 1.2s var(--ease-rhode);
}
.card__media .img-alt { opacity: 0; }
.card:hover .card__media img, .card:focus-within .card__media img { transform: scale(1.08); }
.card:hover .img-alt, .card:focus-within .img-alt { opacity: 1; }
.card:hover .img-main.has-alt, .card:focus-within .img-main.has-alt { opacity: 0; }
.card__media--set { position: relative; flex: 1; aspect-ratio: auto; min-height: 320px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: none; }
/* size each tin by cell height so tall, narrow cells never crop the lid */
.card__media--set .tile img { inset: auto; left: 50%; top: 50%; width: auto; height: 92%; max-width: none; transform: translate(-50%, -50%); }
.card:hover .card__media--set .tile img, .card:focus-within .card__media--set .tile img { transform: translate(-50%, -50%) scale(1.04); }
.badge { position: absolute; top: 14px; left: 14px; z-index: 2; padding: 4px 8px; background: var(--paper); color: var(--ink); }
.card__body { display: flex; flex-direction: column; gap: 10px; }
.card__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.card__name { font-size: clamp(26px, 2.3vw, 34px); font-weight: 400; letter-spacing: -.045em; line-height: 1; }
.card__desc { color: var(--ink-2); font-size: 15px; max-width: 42ch; }
.card__buy { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 8px; margin-top: 6px; }
.card__buy--set { grid-template-columns: minmax(0, 1fr); max-width: 320px; }
.card.is-flash .card__media { animation: flash 1.8s var(--ease); }
@keyframes flash { 0%, 40% { box-shadow: inset 0 0 0 2px var(--ink); } 100% { box-shadow: inset 0 0 0 2px transparent; } }

.seg {
  display: grid; grid-template-columns: 1fr 1fr;
  height: 46px; padding: 3px;
  border: 1px solid var(--line-2); border-radius: 999px;
}
.seg button {
  border: 0; border-radius: 999px; background: transparent; cursor: pointer;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase;
  transition: background-color .2s, color .2s;
}
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }

.spec-wrap { overflow-x: auto; border-top: 1px solid var(--line); }
.spec { width: 100%; min-width: 760px; border-collapse: collapse; }
.spec th { padding: 14px 12px 14px 0; text-align: left; white-space: nowrap; border-bottom: 1px solid var(--line); }
.spec td { padding: 20px 12px 20px 0; border-bottom: 1px solid var(--line); vertical-align: middle; font-size: 15px; }
.spec__name { display: inline-flex; align-items: center; gap: 12px; font-size: 26px; letter-spacing: -.045em; line-height: 1; }
.spec__name i { width: 10px; height: 10px; border-radius: 50%; }
.spec td.label { font-size: 11px; color: var(--ink-2); }
.spec tbody th { padding: 20px 12px 20px 0; font-weight: 400; vertical-align: middle; }
.spec--compare { min-width: 640px; }
.spec--compare td { font-size: 16px; color: var(--ink-2); }
.spec--compare .spec__us { padding-left: 16px; background: var(--card); color: var(--ink); }
@media (max-width: 760px) {
  /* fit the comparison on screen so the cerna column is never scrolled out of view */
  .spec--compare { min-width: 0; table-layout: fixed; }
  .spec--compare thead th:first-child { width: 24%; }
  .spec--compare td, .spec--compare tbody th { padding-block: 14px; font-size: 13px; }
  .spec--compare tbody th { font-size: 10px; }
  .spec--compare .spec__us { padding-left: 10px; }
}

@media (max-width: 1024px) {
  .products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  .page-head__body { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .products { grid-template-columns: 1fr; gap: 44px; }
  .card--set { grid-column: auto; }
  .card__media--set { min-height: 0; aspect-ratio: 2 / 1; }
  .toolbar { flex-wrap: nowrap; }
  .chips {
    flex: 1; min-width: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    padding-right: 36px; scroll-padding-inline-end: 36px;
    -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent);
    mask-image: linear-gradient(90deg, #000 82%, transparent);
  }
  .chips::-webkit-scrollbar { display: none; }
  .chip { flex: none; padding: 0 12px; }
  .chip__count { display: none; }
}

/* ---------- bag drawer + toast ---------- */

.scrim {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(12, 12, 13, .34);
  opacity: 0; pointer-events: none;
  transition: opacity .7s var(--ease-rhode);
}
.drawer {
  position: fixed; top: 0; right: 0; z-index: 60;
  width: min(440px, 100vw); height: 100dvh;
  display: flex; flex-direction: column;
  background: var(--paper);
  border-left: 1px solid var(--line);
  transform: translateX(100%);
  transition: transform .7s var(--ease-rhode);
}
.is-bag-open { overflow: hidden; }
.is-bag-open .scrim { opacity: 1; pointer-events: auto; }
.is-bag-open .drawer { transform: none; }
.drawer__head { display: flex; justify-content: space-between; align-items: center; padding: 18px 24px; border-bottom: 1px solid var(--line); }
.drawer__title { font-size: 24px; font-weight: 400; letter-spacing: -.04em; display: flex; align-items: baseline; gap: 10px; }
.drawer__close { background: none; border: 0; cursor: pointer; padding: 6px 0; color: var(--ink); }
.ship-meter { padding: 16px 24px; border-bottom: 1px solid var(--line); }
.ship-meter .label { color: var(--ink); }
.ship-meter__bar { height: 2px; margin-top: 10px; background: var(--line); }
.ship-meter__bar span { display: block; height: 100%; width: 0; background: var(--ink); transition: width .5s var(--ease); }
.drawer__items { flex: 1; overflow-y: auto; padding: 0 24px; }
.drawer__empty { display: grid; justify-items: center; gap: 18px; padding: 64px 0; color: var(--ink-2); }
.bag-item { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--line); }
.bag-item__thumb { aspect-ratio: 1; }
.bag-item__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transform: scale(1.3); }
.bag-item__thumb--set { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: none; }
.bag-item__thumb--set .tile img { transform: scale(1.6); }
.bag-item__name { font-size: 19px; letter-spacing: -.035em; line-height: 1.1; margin-bottom: 2px; }
.bag-item__end { display: grid; justify-items: end; gap: 10px; }
.bag-item__remove { background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.qty { display: inline-flex; align-items: center; height: 30px; margin-top: 10px; border: 1px solid var(--line-2); border-radius: 999px; }
.qty button { width: 30px; height: 28px; border: 0; background: none; cursor: pointer; font-size: 16px; line-height: 1; }
.qty span { min-width: 18px; text-align: center; font-family: var(--mono); font-size: 12px; }
.drawer__foot { display: grid; gap: 14px; padding: 20px 24px 24px; border-top: 1px solid var(--line); }
.drawer__total { display: flex; justify-content: space-between; align-items: baseline; font-size: 18px; }
.drawer__note { text-align: center; }

.toast {
  position: fixed; left: 50%; bottom: 24px; z-index: 70;
  max-width: calc(100vw - 32px);
  padding: 12px 20px;
  border-radius: 999px;
  background: var(--night); color: var(--night-ink);
  font-size: 14px;
  opacity: 0; pointer-events: none;
  transform: translate(-50%, 16px);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ---------- auth ---------- */

.auth { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: calc(100svh - var(--nav-h) - 34px); }
.auth__media {
  --tint: var(--bubblegum-tint);
  position: sticky; top: var(--nav-h); align-self: start;
  height: calc(100svh - var(--nav-h));
  display: grid; place-items: center;
  padding: clamp(40px, 5vw, 72px);
}
.auth__media img { width: min(100%, 72svh); height: auto; aspect-ratio: 1; object-fit: contain; }
.auth__panel { display: grid; place-items: center; padding: clamp(40px, 5vw, 72px) var(--gutter); background: var(--night); color: var(--night-ink); }
.auth__form { width: 100%; max-width: 420px; display: grid; gap: 16px; }
.auth__form h1 { font-size: clamp(42px, 4.6vw, 70px); font-weight: 400; letter-spacing: -.055em; line-height: .9; margin-top: 6px; }
.auth__sub { color: var(--night-ink-2); margin-bottom: 8px; }
.field { display: grid; gap: 8px; }
.field__top { display: flex; justify-content: space-between; align-items: baseline; }
.field label { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--night-ink-2); }
.field input {
  width: 100%; height: 50px; padding: 0 14px;
  background: var(--night-2); color: var(--night-ink);
  border: 1px solid var(--night-line); border-radius: 2px;
  font-size: 16px; outline: none;
  transition: border-color .2s;
}
.field input:focus { border-color: var(--night-ink); }
.field input[aria-invalid="true"] { border-color: var(--error); }
.field__err { font-size: 13px; color: var(--error); }
.field__err:empty { display: none; }
.field__link { background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.pw { position: relative; }
.pw input { padding-right: 64px; }
.pw button { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); background: none; border: 0; cursor: pointer; padding: 6px 2px; }
.check { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; color: var(--night-ink-2); cursor: pointer; }
.check input { width: 16px; height: 16px; accent-color: var(--night-ink); }
.auth__status { padding: 12px 14px; border: 1px solid var(--night-line); border-radius: 2px; font-size: 14px; }
.divider { display: flex; align-items: center; gap: 12px; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--night-line); }
.fineprint { font-size: 13px; color: var(--night-ink-2); }
.fineprint a { text-decoration: underline; text-underline-offset: 3px; }
.auth__form[data-mode="login"] .only-signup, .auth__form[data-mode="signup"] .only-login { display: none; }

@media (max-width: 860px) {
  .auth { grid-template-columns: 1fr; min-height: 0; }
  .auth__media { position: relative; top: auto; height: auto; padding: 56px 24px 52px; }
  .auth__media img { width: min(56vw, 300px); }
}

/* ---------- gum rain on add to bag (after rhode's falling spotwear) ---------- */

.gum-drop {
  position: fixed; z-index: 80; pointer-events: none;
  width: var(--size, 14px); height: calc(var(--size, 14px) * .86);
  border-radius: 30%;
  background: linear-gradient(160deg, #fff 30%, #e6e3de);
  box-shadow: 0 1px 2px rgba(20, 20, 20, .14), inset 0 -1px 1px rgba(20, 20, 20, .06);
  animation: gum-fall var(--dur, 1.4s) var(--delay, 0s) both;
}
@keyframes gum-fall {
  0% { transform: translate(0, 0) rotate(0deg); animation-timing-function: cubic-bezier(.2, .6, .4, 1); }
  18% { transform: translate(calc(var(--dx) * .3), var(--pop, -46px)) rotate(calc(var(--rot) * .2)); animation-timing-function: cubic-bezier(.5, 0, .9, .5); }
  100% { transform: translate(var(--dx), 110vh) rotate(var(--rot)); }
}

/* ---------- reveal ---------- */

.js [data-reveal] {
  opacity: 0; transform: translateY(18px);
  transition: opacity 1s var(--ease-rhode), transform 1.1s var(--ease-rhode);
  transition-delay: var(--d, 0ms);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0ms !important; transition-duration: .01ms !important; }
  .js [data-reveal] { opacity: 1; transform: none; }
  .lines .line > span { transform: none; }
  .gum-drop { display: none; }
}