/* ============================================================
   BLENDMANDU — design system
   Retro-deco poster look: cream ground, coral accent,
   dashed cards, centered badge logo, bolt corner marks.
   ============================================================ */

/* ---------- tokens ---------- */
:root {
  --cream:        #f8f7e5;
  --cream-deep:   #efedd6;
  --ink:          #1d1d1d;
  --ink-soft:     #5a5a51;
  --accent:       #ff834f;
  --accent-deep:  #e2662f;
  --green:        #6E9E5E;
  --white:        #FFFFFF;

  --display: 'Righteous', 'Trebuchet MS', sans-serif;
  --body:    'Eczar', Georgia, 'Times New Roman', serif;

  --rule: 1px solid var(--ink);
  --dash: 1px dashed rgba(29,29,29,.35);
  --radius: 26px;

  --shell: 1180px;
  --gut: clamp(18px, 4vw, 48px);
}

*, *::before, *::after { box-sizing: border-box; }

/* scroll-behavior is left to Lenis; it sets scroll-behavior:auto when active */
html:not(.lenis) { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

/* ---------- type ---------- */
h1, h2, h3, h4, .display {
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .01em;
  line-height: 1.02;
  margin: 0 0 .5em;
}
h1 { font-size: clamp(2.6rem, 7vw, 4.6rem); }
h2 { font-size: clamp(2rem, 4.6vw, 3.1rem); }
h3 { font-size: clamp(1.15rem, 2.2vw, 1.45rem); }

.eyebrow {
  font-family: var(--display);
  text-transform: uppercase;
  font-size: .82rem;
  letter-spacing: .09em;
  color: var(--ink);
}
.eyebrow--accent { color: var(--accent-deep); }

.meta {
  font-family: var(--display);
  text-transform: uppercase;
  font-size: .8rem;
  letter-spacing: .06em;
  color: var(--ink-soft);
}

p { margin: 0 0 1.1em; }
.lede { font-size: 1.06rem; max-width: 62ch; }

/* ---------- layout ---------- */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gut);
}
.section { padding-block: clamp(48px, 8vw, 92px); }

.hr-dash { border: 0; border-top: var(--dash); margin: 0; }

/* ============================================================
   HEADER — centered badge with rules running left + right
   ============================================================ */
.masthead {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--cream);
  padding: 14px var(--gut) 0;
}
.masthead__grid {
  max-width: var(--shell);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  gap: 12px;
}
.masthead__side {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 6px;
  min-height: 46px;
}
.masthead__side--right { justify-content: flex-end; }

/* the thin rules that run out from under the badge */
.masthead__side::after {
  content: "";
  flex: 1;
  height: 0;
  border-top: var(--rule);
  margin-top: 22px;
}
.masthead__side--right::after { order: -1; }

.navlink {
  font-family: var(--display);
  text-transform: uppercase;
  font-size: .85rem;
  letter-spacing: .07em;
  text-decoration: none;
  white-space: nowrap;
}
.navlink:hover { color: var(--accent-deep); }

/* ---------- badge logo ---------- */
.badge {
  display: block;
  text-decoration: none;
  text-align: center;
  padding: 0 18px;
}
.badge__box {
  display: block;
  border: 2.5px solid var(--ink);
  padding: 9px 13px 7px;
  min-width: 104px;
  line-height: .94;
  background: var(--cream);
}
.badge__line {
  font-family: var(--display);
  font-size: 1.3rem;
  letter-spacing: .03em;
  display: block;
  text-align: center;
}
.badge__tab {
  display: inline-block;
  background: var(--ink);
  color: var(--cream);
  font-family: var(--display);
  font-size: .7rem;
  letter-spacing: .12em;
  padding: 3px 11px 2px;
  margin-top: -2px;
}

/* ---------- pills / buttons ---------- */
.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--display);
  text-transform: uppercase;
  font-size: .82rem;
  letter-spacing: .07em;
  text-decoration: none;
  padding: 11px 22px 9px;
  border-radius: 999px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform .12s ease, background .15s ease, color .15s ease;
  line-height: 1;
}
.pill:active { transform: translateY(1px); }
.pill--accent { background: var(--accent); color: var(--ink); }
.pill--accent:hover { background: var(--accent-deep); }
.pill--ink { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.pill--ink:hover { background: #000; }
.pill--ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.pill--ghost:hover { background: var(--ink); color: var(--cream); }
.pill--wide { width: 100%; padding-block: 15px 13px; font-size: .92rem; }
.pill[disabled] { opacity: .4; pointer-events: none; }

.circle-btn {
  width: 40px; height: 40px;
  border: var(--rule);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--display);
  font-size: .72rem;
  letter-spacing: .06em;
  text-decoration: none;
  background: transparent;
  cursor: pointer;
  flex: 0 0 auto;
}
.circle-btn:hover { background: var(--ink); color: var(--cream); }

.cart-btn { position: relative; }
.cart-count {
  position: absolute;
  top: -5px; right: -5px;
  min-width: 20px; height: 20px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--ink);
  font-family: var(--display);
  font-size: .66rem;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
}
.cart-count.is-on { display: inline-flex; }

/* ---------- 24/7 strip ---------- */
.ticker {
  background: var(--ink);
  color: var(--cream);
  overflow: hidden;
  padding: 9px 0;
  margin-top: 14px;
}
.ticker__track {
  display: flex;
  gap: 42px;
  width: max-content;
  animation: slide 34s linear infinite;
  font-family: var(--display);
  text-transform: uppercase;
  font-size: .78rem;
  letter-spacing: .14em;
  white-space: nowrap;
}
.ticker__track span { display: inline-flex; align-items: center; gap: 42px; }
.ticker__track span::after { content: "\25C6"; color: var(--accent); }
@keyframes slide { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .ticker__track { animation: none; }
}

/* ============================================================
   HERO
   ============================================================ */
.hero { text-align: center; padding-block: clamp(56px, 10vw, 110px); }
.hero h1 { margin-bottom: .28em; }
.hero .lede { margin-inline: auto; }
.hero__cta { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; margin-top: 26px; }

/* ============================================================
   SHOP — sidebar + grid
   ============================================================ */
.shop {
  display: grid;
  grid-template-columns: 210px 1fr;
  gap: clamp(24px, 5vw, 60px);
  align-items: start;
}
.filters { position: sticky; top: 130px; }
.filters__title {
  font-family: var(--display);
  text-transform: uppercase;
  font-size: .95rem;
  letter-spacing: .07em;
  margin-bottom: 18px;
}
.filters__list { list-style: none; margin: 0; padding: 0; }
.filters__list li { border-bottom: var(--dash); }
.filters__btn {
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  padding: 13px 0;
  cursor: pointer;
  font-family: var(--display);
  text-transform: uppercase;
  font-size: .86rem;
  letter-spacing: .06em;
  color: var(--ink);
}
.filters__btn:hover { color: var(--accent-deep); }
.filters__btn.is-active { color: var(--accent-deep); }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: clamp(20px, 3vw, 34px);
}

/* ---------- product card ---------- */
.card { display: flex; flex-direction: column; }
.card__art {
  position: relative;
  border: var(--dash);
  border-radius: var(--radius);
  background: var(--white);
  aspect-ratio: 4 / 5;
  display: grid;
  place-items: center;
  padding: 18px;
  overflow: hidden;
  transition: transform .18s ease;
}
.card:hover .card__art { transform: translateY(-4px); }
.card__art svg { width: 100%; height: 100%; }

/* A real cup replaces the flat drawing once WebGL has one ready. The SVG
   stays in the DOM rather than being removed: it is what shows when there
   is no WebGL, and toggling display is cheaper than rebuilding markup. */
.cardcup { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.card__art.has-cup > svg, .pdp__art.has-cup > svg { display: none; }
.pdp__art { position: relative; }
.card__name { margin: 18px 0 8px; font-size: 1.16rem; }
.card__meta { margin-bottom: 14px; }
.card__foot {
  border-top: var(--dash);
  padding-top: 14px;
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.card__price {
  font-family: var(--display);
  color: var(--accent-deep);
  font-size: 1rem;
  letter-spacing: .03em;
}
.card__tag {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  font-family: var(--display);
  font-size: .7rem;                 /* 9.9px was below the legibility floor */
  letter-spacing: .1em;
  text-transform: uppercase;
  background: var(--green);
  color: var(--white);
  padding: 5px 10px 4px;
  border-radius: 999px;
  white-space: nowrap;
}

/* ============================================================
   FEATURE ROWS / STEPS
   ============================================================ */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 30px; }
.step__num {
  font-family: var(--display);
  font-size: 2.4rem;
  color: var(--accent);
  line-height: 1;
  margin-bottom: 10px;
}

.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}

.panel {
  border: var(--dash);
  border-radius: var(--radius);
  background: var(--white);
  padding: clamp(22px, 3.4vw, 34px);
}

/* ============================================================
   CART / CHECKOUT
   ============================================================ */
.cartline {
  display: grid;
  grid-template-columns: 78px 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 18px 0;
  border-bottom: var(--dash);
}
.cartline__art {
  border: var(--dash);
  border-radius: 16px;
  background: var(--white);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  padding: 6px;
}
.cartline__art svg { width: 100%; height: 100%; }
.cartline__name { font-family: var(--display); text-transform: uppercase; font-size: .95rem; letter-spacing: .04em; }

.qty { display: inline-flex; align-items: center; border: var(--rule); border-radius: 999px; overflow: hidden; }
.qty button {
  background: none; border: 0; cursor: pointer;
  width: 32px; height: 32px;
  font-family: var(--display); font-size: 1rem; line-height: 1;
}
.qty button:hover { background: var(--ink); color: var(--cream); }
.qty span { min-width: 30px; text-align: center; font-family: var(--display); font-size: .9rem; }

.totals { display: grid; gap: 10px; margin-top: 22px; }
.totals__row { display: flex; justify-content: space-between; gap: 16px; font-family: var(--display); text-transform: uppercase; font-size: .86rem; letter-spacing: .05em; }
.totals__row--grand { border-top: var(--rule); padding-top: 14px; font-size: 1.15rem; }
.totals__row--grand .totals__val { color: var(--accent-deep); }

/* ---------- form ---------- */
.field { margin-bottom: 18px; }
.field > label {
  display: block;
  font-family: var(--display);
  text-transform: uppercase;
  font-size: .76rem;
  letter-spacing: .08em;
  margin-bottom: 7px;
}
.input, select.input, textarea.input {
  width: 100%;
  font-family: var(--body);
  font-size: 1rem;
  color: var(--ink);
  background: var(--white);
  border: var(--rule);
  border-radius: 14px;
  padding: 12px 15px;
  appearance: none;
}
select.input {
  background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 42px;
}
textarea.input { min-height: 88px; resize: vertical; }
.input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.field__hint { font-size: .85rem; color: var(--ink-soft); margin-top: 6px; }

.choices { display: grid; gap: 10px; }
.choice {
  display: flex; align-items: flex-start; gap: 11px;
  border: var(--rule); border-radius: 16px;
  padding: 13px 15px; cursor: pointer;
  background: var(--white);
}
.choice:has(input:checked) { border-color: var(--accent-deep); background: #FFF6EE; }
.choice input { margin-top: 4px; accent-color: var(--accent-deep); flex: 0 0 auto; }
.choice__label { font-family: var(--display); text-transform: uppercase; font-size: .82rem; letter-spacing: .05em; }
.choice__note { font-size: .86rem; color: var(--ink-soft); }

.empty { text-align: center; padding: 60px 0; }

/* ============================================================
   GATE (Kathmandu delivery-area check)
   ============================================================ */
.gate {
  position: fixed; inset: 0; z-index: 200;
  background: var(--cream);
  display: grid; place-items: center;
  text-align: center;
  padding: var(--gut);
}
.gate[hidden] { display: none; }
.gate__inner { max-width: 620px; }
.gate__btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin: 22px 0 20px; }
.gate__no { display: none; }
.gate.is-out .gate__ask { display: none; }
.gate.is-out .gate__no { display: block; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { background: var(--cream-deep); padding-block: clamp(44px, 7vw, 72px) 0; margin-top: 40px; }
.footer__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 34px; }
.footer__title { font-family: var(--display); text-transform: uppercase; font-size: .84rem; letter-spacing: .09em; margin-bottom: 14px; }
.footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; font-size: .95rem; }
.footer__list a { text-decoration: none; }
.footer__list a:hover { color: var(--accent-deep); }
.footer__bar {
  margin-top: 40px; padding: 18px 0 26px;
  border-top: var(--dash);
  display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  font-family: var(--display); text-transform: uppercase; font-size: .72rem; letter-spacing: .08em;
  color: var(--ink-soft);
}

.newsletter { display: flex; gap: 10px; flex-wrap: wrap; }
.newsletter .input { flex: 1 1 190px; border-radius: 999px; }

/* ---------- bolt corner marks ---------- */
.bolt {
  position: fixed;
  bottom: -6px;
  width: clamp(88px, 12vw, 150px);
  color: var(--accent);
  pointer-events: none;
  z-index: 1;
  opacity: .95;
}
.bolt--l { left: -14px; }
.bolt--r { right: -14px; transform: scaleX(-1); }
@media (max-width: 700px) { .bolt { display: none; } }

/* ---------- toast ---------- */
.toast {
  position: fixed;
  left: 50%; bottom: 26px;
  transform: translate(-50%, 120%);
  background: var(--ink); color: var(--cream);
  font-family: var(--display); text-transform: uppercase;
  font-size: .78rem; letter-spacing: .07em;
  padding: 13px 22px 11px;
  border-radius: 999px;
  z-index: 300;
  transition: transform .28s cubic-bezier(.2,.9,.3,1.2);
  box-shadow: 0 8px 26px rgba(0,0,0,.18);
}
.toast.is-up { transform: translate(-50%, 0); }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .shop { grid-template-columns: 1fr; }
  .filters { position: static; }
  .filters__list { display: flex; flex-wrap: wrap; gap: 8px; }
  .filters__list li { border: 0; }
  .filters__btn { border: var(--rule); border-radius: 999px; padding: 9px 16px; width: auto;
                  min-width: 44px; }   /* short labels like "Bowls" fell under the tap floor */
  .filters__btn.is-active { background: var(--accent); border-color: var(--accent); color: var(--ink); }
}
@media (max-width: 640px) {
  /* #menu-open also carries .navlink, so a blanket hide here removed the
     only way to open the menu on a phone. Exclude it. */
  .masthead__side .navlink:not(.menu-btn) { display: none; }
  .masthead__side::after { display: none; }   /* rules read as stray dashes once the nav is gone */
  .masthead__side .pill { white-space: nowrap; }
  .masthead { padding-top: 10px; }
  .masthead__side .pill { padding: 9px 15px 8px; font-size: .74rem; }
  .cartline { grid-template-columns: 60px 1fr; }
  .cartline__side { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; }
}

/* ============================================================
   MOTION
   Smooth scroll + scroll reveals + marching dotted rules.
   All of it collapses to static under prefers-reduced-motion.
   ============================================================ */

/* ---- marching dotted rules (their dottedLineAnim) ---- */
.hr-dash,
.filters__list li,
.card__foot,
.cartline,
.footer__bar {
  border-color: transparent !important;
}
.hr-dash {
  height: 1px;
  background-image: repeating-linear-gradient(90deg,
    rgba(29,29,29,.42) 0 7px, transparent 7px 14px);
  background-size: 14px 1px;
  animation: dottedLine 1.1s linear infinite;
}
.filters__list li,
.card__foot,
.cartline,
.footer__bar {
  position: relative;
}
.filters__list li::after,
.card__foot::before,
.cartline::after,
.footer__bar::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background-image: repeating-linear-gradient(90deg,
    rgba(29,29,29,.42) 0 7px, transparent 7px 14px);
  background-size: 14px 1px;
  animation: dottedLine 1.1s linear infinite;
  pointer-events: none;
}
.filters__list li::after { bottom: 0; }
.cartline::after        { bottom: 0; }
.card__foot::before     { top: 0; }
.footer__bar::before    { top: 0; }

@keyframes dottedLine { to { background-position: 14px 0; } }

/* the dashed card outline gets the same treatment on hover */
.card__art {
  border-color: rgba(29,29,29,.35);
  transition: transform .5s cubic-bezier(.16,1,.3,1), box-shadow .5s cubic-bezier(.16,1,.3,1);
}
.card:hover .card__art {
  transform: translateY(-7px);
  box-shadow: 0 16px 34px -18px rgba(29,29,29,.42);
}
.card__art svg {
  transition: transform .6s cubic-bezier(.16,1,.3,1);
}
/* The art zoom used to name the SVG only. Once a real cup takes over that
   SVG is display:none, so the zoom silently did nothing on every card with
   WebGL. Name both, and let the canvas take the same treatment. */
.card:hover .card__art svg,
.card:hover .card__art .cardcup { transform: scale(1.06) rotate(-1.5deg); }
.card__art .cardcup { transition: transform .5s cubic-bezier(.2,.9,.3,1); }

/* ---- scroll reveals ---- */
[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity .78s cubic-bezier(.16,1,.3,1),
    transform .78s cubic-bezier(.16,1,.3,1);
  transition-delay: calc(var(--i, 0) * 80ms);
}
[data-reveal].is-in {
  opacity: 1;
  transform: none;
}

/* ---- reduced motion: everything goes still ---- */
@media (prefers-reduced-motion: reduce) {
  .hr-dash,
  .filters__list li::after,
  .card__foot::before,
  .cartline::after,
  .footer__bar::before { animation: none; }
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  .card:hover .card__art,
  .card:hover .card__art svg,
  .card:hover .card__art .cardcup { transform: none; }
}

/* ============================================================
   WEBGL STAGES + PAGE TINT
   ============================================================ */
:root { --tint: #f8f7e5; }

body { transition: background-color .75s cubic-bezier(.4,0,.2,1); }

/* the page takes the colour of the flavour on screen */
html.is-tinted {
  --cream:      var(--tint);
  --cream-deep: color-mix(in srgb, var(--tint) 88%, #000);
  --ink:        #f8f7e5;
  --ink-soft:   rgba(248,247,229,.70);
  --white:      rgba(255,255,255,.07);
  --accent-deep:#F7A876;
  --rule:       1px solid rgba(248,247,229,.85);
  --dash:       1px dashed rgba(248,247,229,.38);
}
html.is-tinted body,
html.is-tinted .masthead { background: var(--tint); }
/* dotted rules have to invert too */
html.is-tinted .hr-dash,
html.is-tinted .filters__list li::after,
html.is-tinted .card__foot::before,
html.is-tinted .cartline::after,
html.is-tinted .footer__bar::before {
  background-image: repeating-linear-gradient(90deg,
    rgba(248,247,229,.5) 0 7px, transparent 7px 14px);
}
/* orange pill keeps dark text whatever the page is doing */
.pill--accent { color: #1d1d1d; }
html.is-tinted .ticker { background: #f8f7e5; color: var(--tint); }
html.is-tinted .badge__box { background: transparent; }

/* ---------- hero stage ---------- */
.hero--3d { padding-bottom: clamp(30px, 5vw, 56px); text-align: center; }

.cupstage {
  position: relative;
  width: min(560px, 92vw);
  height: min(560px, 62vh);
  margin: clamp(6px, 2vw, 20px) auto 0;
  touch-action: pan-y;
}
.cupstage canvas { width: 100%; height: 100%; display: block; opacity: 0; transition: opacity .45s ease; }
.cupstage.is-live canvas { opacity: 1; }
/* The fallback used to be removed with display:none the instant the canvas
   went live, while the canvas itself took .6s to fade up. The stage emptied
   in between, which is what made the swap read as a flash rather than a
   handoff. Fading the two across each other hides the seam. */
.cupstage__fallback {
  position: absolute; inset: 0; display: grid; place-items: center; padding: 6%;
  opacity: 1; transition: opacity .45s ease;
}
.cupstage.is-live .cupstage__fallback { opacity: 0; pointer-events: none; }
.cupstage__fallback svg { width: 100%; height: 100%; }

.cupstage__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px; height: 46px;
  border-radius: 50%;
  border: var(--rule);
  background: transparent;
  color: var(--ink);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  display: none;
  align-items: center; justify-content: center;
  transition: background .2s ease, color .2s ease;
}
.cupstage.is-live .cupstage__arrow { display: flex; }
.cupstage__arrow:hover { background: var(--ink); color: var(--tint, var(--cream)); }
.cupstage__arrow--l { left: -6px; }
.cupstage__arrow--r { right: -6px; }

.cupmeta { margin-top: 8px; }
.cupmeta__hint { margin-bottom: 14px; display: none; }
.cupstage.is-live ~ .cupmeta .cupmeta__hint { display: block; }
.cupmeta h2 { margin-bottom: .18em; }
.cupmeta__price { font-family: var(--display); color: var(--accent-deep); font-size: 1.25rem; letter-spacing: .04em; }

/* ---------- pinned section ---------- */
.pin { height: 300vh; position: relative; }
.pin__sticky { position: sticky; top: 0; height: 100vh; display: grid; align-items: center; overflow: hidden; }
.pin__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 5vw, 60px); align-items: center; }
.pin__copy { position: relative; min-height: 340px; }
.pin__step {
  position: absolute;
  inset: 34px 0 auto 0;
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .55s ease, transform .55s cubic-bezier(.16,1,.3,1);
  pointer-events: none;
}
.pin__step.is-on { opacity: 1; transform: none; pointer-events: auto; }
.pin__stage { height: min(74vh, 560px); }
.pin__stage canvas { width: 100%; height: 100%; display: block; }
html.no-webgl .pin { height: auto; }
html.no-webgl .pin__sticky { position: static; height: auto; padding-block: 60px; }
html.no-webgl .pin__copy { min-height: 0; }
html.no-webgl .pin__step { position: static; opacity: 1; transform: none; margin-bottom: 34px; }
html.no-webgl .pin__stage { display: none; }

/* ---------- scrubbed sequence ---------- */
.seq { height: 260vh; position: relative; }
.seq__sticky { position: sticky; top: 0; height: 100vh; display: grid; align-items: center; }
.seq__inner { text-align: center; }
/* superseded below */
html.no-webgl .seq { height: auto; }
html.no-webgl .seq__sticky { position: static; height: auto; padding-block: 60px; }
html.no-webgl #seq { display: none; }

@media (max-width: 860px) {
  .pin { height: auto; }
  .pin__sticky { position: static; height: auto; padding-block: 56px; }
  .pin__grid { grid-template-columns: 1fr; }
  .pin__copy { min-height: 0; }
  .pin__step { position: static; opacity: 1; transform: none; margin-bottom: 30px; }
  .pin__stage { height: 60vh; }
  .seq { height: 200vh; }
  .cupstage__arrow--l { left: -2px; }
  .cupstage__arrow--r { right: -2px; }
}

@media (prefers-reduced-motion: reduce) {
  body { transition: none; }
  .cupstage canvas, .cupstage__fallback { transition: none; }
  .pin, .seq { height: auto; }
  .pin__sticky, .seq__sticky { position: static; height: auto; padding-block: 56px; }
  .pin__step { position: static; opacity: 1; transform: none; margin-bottom: 30px; }
  .pin__copy { min-height: 0; }
}

/* ---- Lenis (smooth scroll) required styles ---- */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* ============================================================
   MENU OVERLAY
   ============================================================ */
.menu-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: none;
  border: 0;
  cursor: pointer;
  color: inherit;
  padding: 0;
}
.burger { display: inline-flex; flex-direction: column; gap: 4px; width: 24px; }
.burger i { display: block; height: 2px; background: currentColor; transition: transform .3s ease; }
.menu-btn:hover .burger i:nth-child(1) { transform: translateX(3px); }
.menu-btn:hover .burger i:nth-child(3) { transform: translateX(-3px); }

.menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 150;
  background: var(--cream);
  display: grid;
  grid-template-rows: 1fr auto;
  align-items: center;
  padding: clamp(20px, 6vw, 60px);
  opacity: 0;
  visibility: hidden;
  /* toggling [hidden] (display:none) races the opacity transition and the
     overlay sticks part-faded — drive visibility instead, so the element
     is always laid out and only its paint changes. */
  transition: opacity .4s ease, visibility 0s linear .4s;
}
.menu-overlay.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity .4s ease, visibility 0s linear 0s;
}

.menu-close {
  position: absolute;
  top: clamp(14px, 3vw, 30px);
  right: clamp(14px, 3vw, 30px);
  width: 48px; height: 48px;
  border: var(--rule);
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  font-size: 1.7rem;
  line-height: 1;
  cursor: pointer;
}
.menu-close:hover { background: var(--ink); color: var(--cream); }

.menu-nav { display: grid; gap: clamp(4px, 1.4vw, 12px); justify-items: start; align-content: center; }
.menu-nav a {
  font-family: var(--display);
  text-transform: uppercase;
  font-size: clamp(2rem, 7vw, 4rem);
  line-height: 1.04;
  text-decoration: none;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .5s ease, transform .5s cubic-bezier(.16,1,.3,1), color .2s ease;
  transition-delay: calc(var(--i) * 60ms + 90ms);
}
.menu-overlay.is-open .menu-nav a { opacity: 1; transform: none; }
.menu-nav a:hover { color: var(--accent-deep); }

.menu-foot {
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  border-top: var(--dash); padding-top: 18px;
  font-family: var(--display); text-transform: uppercase;
  font-size: .76rem; letter-spacing: .08em;
}
.menu-foot a { text-decoration: none; }
.menu-foot a:hover { color: var(--accent-deep); }

@media (prefers-reduced-motion: reduce) {
  .menu-overlay, .menu-nav a { transition: none; }
  .menu-nav a { opacity: 1; transform: none; }
}

/* ============================================================
   PRODUCT DETAIL PAGE
   ============================================================ */
.crumbs {
  font-family: var(--display);
  text-transform: uppercase;
  font-size: .74rem;
  letter-spacing: .07em;
  color: var(--ink-soft);
  margin-bottom: 26px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--accent-deep); }
.crumbs [aria-current] { color: var(--ink); }

.pdp {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 5vw, 64px);
  align-items: start;
}
.pdp__art {
  position: relative;
  border: var(--dash);
  border-radius: var(--radius);
  background: var(--white);
  aspect-ratio: 4 / 5;
  display: grid;
  place-items: center;
  padding: clamp(14px, 3vw, 34px);
  position: sticky;
  top: 130px;
}
.pdp__art svg { width: 100%; height: 100%; }
.pdp__meta { margin-bottom: 18px; }
.pdp__price {
  font-family: var(--display);
  color: var(--accent-deep);
  font-size: clamp(1.6rem, 3.4vw, 2.2rem);
  letter-spacing: .03em;
  margin: 22px 0 20px;
}
.pdp__buy { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 30px; }
.pdp__buy .pill { padding-inline: 32px; }

.pdp__facts { margin: 0 0 18px; display: grid; gap: 0; }
.pdp__facts > div {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 14px;
  padding: 13px 0;
  border-top: var(--dash);
}
.pdp__facts dt {
  font-family: var(--display);
  text-transform: uppercase;
  font-size: .74rem;
  letter-spacing: .07em;
  color: var(--ink-soft);
}
.pdp__facts dd { margin: 0; font-size: .96rem; }

/* card art becomes a link overlay, name becomes a link */
.card__artlink { position: absolute; inset: 0; z-index: 1; border-radius: var(--radius); }
.card__link { text-decoration: none; }
.card__link:hover { color: var(--accent-deep); }
.card__tag { z-index: 2; }

@media (max-width: 760px) {
  .pdp { grid-template-columns: 1fr; }
  /* was position:static, which unsticks it but also removes the
     containing block the cup canvas anchors to, so the canvas escaped and
     sized itself to the viewport. relative unsticks it just as well. */
  .pdp__art { position: relative; top: auto; }
  .pdp__facts > div { grid-template-columns: 1fr; gap: 3px; }
}

/* ============================================================
   PROSE (policy / contact / 404 pages)
   ============================================================ */
.prose { max-width: 72ch; }
.prose h1 { margin-bottom: .5em; }
.prose h2 {
  font-size: clamp(1.1rem, 2.2vw, 1.35rem);
  margin: 2em 0 .6em;
  padding-top: 1.1em;
  border-top: var(--dash);
}
.prose ul { padding-left: 1.15em; margin: 0 0 1.2em; }
.prose li { margin-bottom: .5em; }
.prose a { color: var(--accent-deep); text-underline-offset: 3px; }
.prose a:hover { color: var(--ink); }
.prose .panel a { color: var(--accent-deep); }

.footer__legal {
  display: flex; flex-wrap: wrap; gap: 6px 14px;
  font-family: var(--display); text-transform: uppercase;
  font-size: .7rem; letter-spacing: .08em;
}
.footer__legal a { text-decoration: none; }
.footer__legal a:hover { color: var(--accent-deep); }

/* ============================================================
   SEARCH
   ============================================================ */
.search { margin-bottom: 28px; }
.search__box { position: relative; display: flex; align-items: center; }
.search__icon {
  position: absolute; left: 13px;
  width: 16px; height: 16px;
  color: var(--ink-soft);
  pointer-events: none;
}
.search__input {
  border-radius: 999px;
  padding-left: 38px;
  padding-right: 36px;
  font-size: .95rem;
}
.search__input::-webkit-search-cancel-button { display: none; }
.search__clear {
  position: absolute; right: 8px;
  width: 26px; height: 26px;
  border: 0; border-radius: 50%;
  background: var(--ink); color: var(--cream);
  font-size: 1.1rem; line-height: 1;
  cursor: pointer;
  display: grid; place-items: center;
}
.search__clear[hidden] { display: none; }
.search__clear:hover { background: var(--accent-deep); color: var(--ink); }
#search-count:empty { display: none; }

@media (max-width: 900px) {
  .search { margin-bottom: 22px; }
}

/* language toggle */
.lang-btn { font-family: var(--display); font-size: .68rem; letter-spacing: .04em; text-decoration: none; }
/* both directions use Latin codes, so no Devanagari-specific styling */

/* ============================================================
   TIER 4 — conversion + a11y
   ============================================================ */

/* skip link: invisible until focused */
.skiplink {
  position: fixed;
  top: 8px; left: 8px;
  z-index: 400;
  background: var(--ink); color: var(--cream);
  font-family: var(--display); text-transform: uppercase;
  font-size: .78rem; letter-spacing: .07em;
  padding: 11px 18px; border-radius: 999px;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform .2s ease;
}
.skiplink:focus { transform: none; }

/* a visible focus ring everywhere, not just where the browser guesses */
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* honeypot — off-screen, never shown, never announced */
.hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  opacity: 0; pointer-events: none;
}

/* ---------- sticky cart bar ---------- */
/* Floating chrome, not page content — so it uses fixed colours rather than
   the themed tokens. On a tinted page `--ink` flips to cream and this bar
   inverted into a pale slab that read as a rendering fault. */
.cartbar {
  position: fixed;
  left: 12px; right: 12px; bottom: 12px;
  z-index: 120;
  background: #1d1d1d;
  color: #f8f7e5;
  border-radius: 999px;
  text-decoration: none;
  overflow: hidden;
  transform: translateY(150%);
  transition: transform .32s cubic-bezier(.2,.9,.3,1.15);
  box-shadow: 0 10px 30px -10px rgba(0,0,0,.45);
}
.cartbar.is-up { transform: none; }
/* A full-height 22% wash had no affordance saying "progress" — it just
   looked like part of the bar had failed to paint. A thin track along the
   bottom edge reads as progress at a glance and cannot be mistaken for one. */
.cartbar__progress {
  position: absolute;
  left: 20px; right: 20px; bottom: 6px;
  height: 3px;
  border-radius: 999px;
  background: rgba(248, 247, 229, .22);
  overflow: hidden;
}
.cartbar__progress::after {
  content: "";
  position: absolute;
  inset: 0;
  width: var(--pct, 0%);
  background: #ff834f;
  border-radius: 999px;
  transition: width .45s cubic-bezier(.16,1,.3,1);
}
.cartbar__body {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 4px 12px;
  padding: 13px 20px 17px;
}
.cartbar__count {
  grid-row: span 2;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: #ff834f;
  color: #1d1d1d;
  font-family: var(--display); font-size: .85rem;
  display: grid; place-items: center;
}
.cartbar__label {
  font-family: var(--display); text-transform: uppercase;
  font-size: .84rem; letter-spacing: .06em;
}
.cartbar__note { font-size: .78rem; opacity: .8; grid-column: 2; color: #f8f7e5; }
.cartbar__total {
  grid-row: span 2;
  font-family: var(--display); font-size: 1.05rem;
  color: #ff834f;
}
@media (min-width: 901px) {
  .cartbar { left: auto; right: 22px; bottom: 22px; min-width: 300px; }
}

/* ---------- floating WhatsApp ---------- */
.wafloat {
  position: fixed;
  right: 16px; bottom: 84px;
  z-index: 110;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  display: grid; place-items: center;
  box-shadow: 0 8px 22px -8px rgba(0,0,0,.5);
  transition: transform .2s ease;
}
.wafloat:hover { transform: scale(1.07); }
.wafloat svg { width: 27px; height: 27px; }
@media (min-width: 901px) { .wafloat { bottom: 22px; right: 22px; } }
/* the cart bar is two lines tall on a phone, so clear it properly */
body:has(.cartbar.is-up) .wafloat { bottom: 108px; }
@media (min-width: 901px) { body:has(.cartbar.is-up) .wafloat { bottom: 100px; right: 22px; } }

/* ---------- consent banner ---------- */
.consent {
  position: fixed;
  left: 12px; right: 12px; bottom: 12px;
  z-index: 220;
  background: var(--cream);
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  padding: 18px 20px;
  transform: translateY(150%);
  transition: transform .35s cubic-bezier(.2,.9,.3,1.1);
  box-shadow: 0 14px 40px -16px rgba(0,0,0,.4);
}
.consent.is-up { transform: none; }
.consent__inner {
  display: flex; gap: 18px; align-items: center;
  flex-wrap: wrap; justify-content: space-between;
  max-width: var(--shell); margin-inline: auto;
}
.consent__title {
  font-family: var(--display); text-transform: uppercase;
  font-size: .9rem; letter-spacing: .05em;
  display: block; margin-bottom: 5px;
}
.consent__text { font-size: .9rem; margin: 0; max-width: 58ch; }
.consent__btns { display: flex; gap: 10px; flex-wrap: wrap; }
@media (max-width: 640px) {
  .consent { bottom: 12px; }
  .consent__btns { width: 100%; }
  .consent__btns .pill { flex: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .cartbar, .consent, .skiplink, .wafloat { transition: none; }
  .cartbar__progress::after { transition: none; }
}

/* toast must clear the sticky cart bar, not sit under it */
body:has(.cartbar.is-up) .toast { bottom: 92px; }
@media (min-width: 901px) { body:has(.cartbar.is-up) .toast { bottom: 26px; } }
body:has(.consent.is-up) .cartbar,
body:has(.consent.is-up) .wafloat { display: none; }

/* ============================================================
   FAQ
   ============================================================ */
.faq { max-width: 76ch; margin-top: 26px; }
.faq__item { border-top: var(--dash); }
.faq__item:last-child { border-bottom: var(--dash); }
.faq__q {
  font-family: var(--display);
  text-transform: uppercase;
  font-size: clamp(.92rem, 1.9vw, 1.05rem);
  letter-spacing: .03em;
  padding: 20px 44px 20px 0;
  cursor: pointer;
  position: relative;
  list-style: none;
  min-height: 44px;
  display: flex;
  align-items: center;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after {
  content: "";
  position: absolute;
  right: 6px; top: 50%;
  width: 12px; height: 12px;
  border-right: 2.5px solid var(--accent-deep);
  border-bottom: 2.5px solid var(--accent-deep);
  transform: translateY(-70%) rotate(45deg);
  transition: transform .25s ease;
}
.faq__item[open] .faq__q::after { transform: translateY(-30%) rotate(-135deg); }
.faq__q:hover { color: var(--accent-deep); }
.faq__a { padding: 0 44px 22px 0; }
.faq__a p { margin: 0; }
@media (prefers-reduced-motion: reduce) { .faq__q::after { transition: none; } }

/* ============================================================
   TOUCH TARGETS
   Pills sat at 33-37px and circle buttons at 40px. WCAG 2.5.8 only
   demands 24px, but this store is almost entirely thumbs on phones,
   and a 33px target is a missed tap — which is a lost order.
   ============================================================ */
.pill {
  min-height: 44px;
  padding-block: 13px 11px;
}
.pill--wide { min-height: 50px; }
.circle-btn { width: 44px; height: 44px; }
.qty button { width: 40px; height: 44px; }
.cupstage__arrow { width: 48px; height: 48px; }
.menu-close { width: 52px; height: 52px; }
.search__clear { width: 30px; height: 30px; }

/* a card's title is a small link, so give it a comfortable hit area */
.card__name { padding-block: 2px; }
.card__link { display: inline-block; min-height: 32px; }

/* the filter pills are primary navigation on mobile */
@media (max-width: 900px) {
  .filters__btn { min-height: 44px; padding-block: 11px; }
}

/* inline field errors — paired with aria-invalid + aria-describedby */
.field__error {
  font-size: .86rem;
  color: #b3261e;
  margin: 7px 0 0;
  font-weight: 600;
}
html.is-tinted .field__error { color: #ffb4ab; }
.input[aria-invalid="true"] { border-color: #b3261e; border-width: 2px; }
html.is-tinted .input[aria-invalid="true"] { border-color: #ffb4ab; }

/* the scrubbed sequence needs room to read; it was cramped at 46vh */
#seq { width: min(860px, 94vw); height: min(56vh, 440px); margin: 26px auto 0; display: block; }
.seq__caption {
  margin: 18px auto 0;
  max-width: 44ch;
  min-height: 2.6em;
  color: var(--ink-soft);
}

/* the hero stage is transformed by JS on scroll (parallax + scale-away) */
.cupstage { will-change: transform, opacity; transform-origin: 50% 30%; }
@media (prefers-reduced-motion: reduce) {
  .cupstage { transform: none !important; opacity: 1 !important; }
}

/* ============================================================
   MOBILE HERO
   The authored line breaks are right on a wide screen and wrong on a
   narrow one, where "AM" ended up orphaned on its own line. Below the
   breakpoint the spans run inline and the browser balances the wrap.
   ============================================================ */
.hero__title span { display: block; }
.hero__title { text-wrap: balance; }

@media (max-width: 620px) {
  .hero__title span { display: inline; }
  .hero__title { font-size: clamp(2rem, 9vw, 2.8rem); }
  /* the cup was 503px tall on an 863px screen, so the hero never fit */
  .cupstage { height: min(420px, 44vh); width: min(420px, 88vw); }
  .hero--3d { padding-block: clamp(18px, 4vw, 34px) clamp(20px, 4vw, 36px); }
  .cupmeta h2 { font-size: clamp(1.5rem, 6.5vw, 2rem); }
  .hero .lede { font-size: 1rem; }
}

/* a short phone in landscape has almost no height to give the stage */
@media (max-height: 560px) and (max-width: 900px) {
  .cupstage { height: 54vh; }
}

/* ============================================================
   MOBILE TAP TARGETS
   The earlier 44px pass was measured on desktop and missed these:
   card title links (32px) and every footer link (27px). On a phone
   those are the links people actually reach for.
   ============================================================ */
@media (max-width: 900px) {
  .card__link {
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  .footer__list a,
  .footer__legal a,
  .crumbs a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .footer__list { gap: 0; }
  .footer__legal { gap: 0 18px; }
  /* the legal row is a dense strip of links; give it breathing room */
  .footer__bar { gap: 4px 14px; }
}

/* The allergy link sits inside body text at 24px tall — but it is the
   control we tell people to use before ordering, so it gets a real
   tap area. The qty stepper is a primary control; 40px wide is mean. */
@media (max-width: 900px) {
  .field__hint a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .qty button { width: 46px; }
}
.skiplink { min-height: 44px; display: inline-flex; align-items: center; }

/* ============================================================
   CART LAYOUT
   This lived in an inline style, which beats any media query — so the
   checkout stayed two columns on a phone, squeezing the form until the
   phone field read "98XXXX" and the area select read "Tha…".
   ============================================================ */
.cartlayout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: start;
}
@media (max-width: 900px) {
  .cartlayout { grid-template-columns: 1fr; gap: 34px; }
}

/* same problem, smaller blast radius: the stat grid on the home page */
.statgrid { grid-template-columns: 1fr 1fr; gap: 22px; }
@media (max-width: 420px) {
  .statgrid { grid-template-columns: 1fr; gap: 18px; }
}

/* ============================================================
   MENU OVERLAY ON MOBILE
   clamp(2rem, 7vw, 4rem) collapses to its 2rem floor on a 400px screen,
   so a full-screen menu rendered 33px links. On a phone this overlay is
   the primary navigation — it should feel full-screen.
   ============================================================ */
@media (max-width: 620px) {
  .menu-nav a {
    font-size: clamp(2.1rem, 11vw, 3rem);
    min-height: 44px;          /* line-height rounding left it at 43 */
    display: flex;
    align-items: center;
  }
  .menu-nav { gap: 10px; }
  .menu-foot { gap: 10px 16px; }
  .menu-foot a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

/* ============================================================
   MASTHEAD ON SMALL SCREENS
   The three column layout with decorative rules only works when there is
   room for it. Between roughly 640px and 900px the rules collapsed to
   30px stubs, six controls fought over the width, and the KTM tab landed
   on top of the ticker. Below 900px the header keeps only what a phone
   needs: order, brand, menu, cart.
   ============================================================ */
@media (max-width: 900px) {
  .masthead { padding: 10px var(--gut) 0; }

  /* stub rules read as breakage, not decoration */
  .masthead__side::after { display: none; }

  .masthead__grid { gap: 6px; align-items: center; }
  .masthead__side { min-height: 0; padding-top: 0; gap: 8px; }

  /* text labels go; the burger carries the meaning */
  .masthead__side .navlink:not(.menu-btn) { display: none; }
  /* collapsing the label left a 26x14 tap target; give it a real one */
  .menu-btn {
    font-size: 0;
    gap: 0;
    width: 44px;
    height: 44px;
    justify-content: center;
  }
  .menu-btn .burger { width: 26px; }

  /* The language switch belongs in the header, not buried in the menu:
     a Nepali speaker should see it without opening anything. It was only
     hidden because six controls collided here. Now that the text labels
     and rules are gone there is room, provided the gaps are tightened. */
  .masthead .lang-btn {
    display: inline-flex;
    width: 40px; height: 40px;
    font-size: .66rem;
  }
  .masthead__side--right { gap: 6px; }

  .badge { padding: 0 8px; }
  .badge__box { min-width: 92px; padding: 7px 10px 5px; }
  .badge__line { font-size: 1.05rem; }
  .badge__tab { font-size: .7rem; padding: 2px 9px 1px; }   /* was 9.6px */

  /* the tab was landing on the ticker */
  .ticker { margin-top: 18px; }
}

@media (max-width: 460px) {
  .badge__box { min-width: 80px; }
  .badge__line { font-size: .95rem; }
  /* the CTA is the widest thing in the row, so it gives up the most */
  .masthead__side .pill { padding: 9px 11px 8px; font-size: .68rem; }
  /* 38 cleared the WCAG minimum but sat under the 44 that phones want.
     There is room for 42 once the gap either side is tightened. */
  .masthead .lang-btn { width: 42px; height: 42px; }
  .masthead__side--right { gap: 4px; }
}

/* Kept in the overlay as well: it is a full-width tap target with the
   language written out in its own script, which is easier to find than a
   two letter circle for someone who does not read English. */
.menu-lang { font-weight: 600; }
@media (min-width: 901px) { .menu-lang { display: none; } }