/* =====================================================================
   HERO (the owner's "Mench Hero v27", 31 October 2026)
   Full-screen LED-mosaic photo, the big "mench" in neon tubes drawn on the Mench Cafe logo letterforms, a smaller
   white neon "cafe" under the c-h, the intro box with a Reserve a table button, the switches on the right
   (day/night, sound, Instagram) and "Scroll to explore" at the bottom right. On phones: "cafe" centred under
   "mench", and a big Reserve a table button under the intro box. Script: js/hero.js (the sign switching on, then the old
   hero's flicker). Changed from the handoff, as the owner asked: no notch menu of its own (the site's notch and
   phone menu stay), our switches instead of the social squares, no food bar (its items are in the moving banner
   under the hero), and the flicker with its sound while the sign comes on.

   Always the Plum night look: the hero sets its own Mench tokens on .hero (like the footer), whatever the
   day/night switch is on. Fonts: the neon words are inline SVG, no font needed. Chakra Petch (the Reserve
   buttons) and Share Tech Mono (Scroll to explore) are the hero's exceptions to the style guide's fonts.
   ===================================================================== */

.hero {
  /* Mench tokens, Plum night */
  --bg: #14171b;
  --ink: #f0ebff;
  --muted: #b3a8d6;
  --edge: #f0ebff;
  --hair: #33285a;
  --yellow: #ffd731;
  --on-yellow: #0b0717;
  --blue: #4fa6ff;
  --red: #ff5b52;
  --on-red: #0b0717;
  --green: #35e08b;
  --purple: #b977ff;
  --orange: #ff9a3d; /* hero-only accent (Tea) */
  --black: #000000;

  /* fonts */
  --font-hud: "Chakra Petch", system-ui, sans-serif; /* button labels */
  --font-mono: "Share Tech Mono", ui-monospace, monospace; /* Scroll to explore */

  --r-card: 14px;

  /* the approved layout values (desktop); phones override them below */
  --hero-pad-x: 0px; /* side padding around the word row */
  --hero-pad-top: clamp(64px, 11.8svh, 106px); /* space above "mench" (106px from a 900px-tall screen up) */
  --hero-word-w: 0.79; /* "mench" width, share of the row */
  /* The hero is never taller than the screen (owner, 3 November 2026), so on short screens the words shrink to
     leave --hero-room under them for the intro box, the switches and Reserve a table. The words and "cafe" are
     0.332 of the word row's width tall (plus 27px of gaps), after the 4 x 18px letter spacing. */
  --hero-room: 340px;
  --hero-word-max: max(140px, calc((100svh - var(--hero-pad-top) - var(--hero-room) - 27px) / 0.332 + 72px));
  --hero-ls: 18px; /* extra space between the "mench" letters */
  --hero-cafe-k: 0.42; /* "cafe" size, share of the "mench" letter height */
  --hero-cafe-gap: 13px; /* space between "mench" and "cafe" */
  --hero-cafe-x: 16px; /* "cafe" nudge right */
  --hero-cafe-y: 14px; /* "cafe" nudge down */

  position: relative;
  box-sizing: border-box;
  height: 100vh;
  height: 100svh; /* svh: the screen with the phone's address bar showing, so the hero never runs under it */
  overflow: hidden;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
}
.hero *,
.hero *::before,
.hero *::after {
  box-sizing: border-box;
}
.hero a {
  color: var(--ink);
}

/* ---- photo ---- */
.hero__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 100%;
}
.hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(20, 23, 27, 0.5) 0%,
    rgba(20, 23, 27, 0.14) 36%,
    rgba(20, 23, 27, 0.16) 60%,
    rgba(20, 23, 27, 0.7) 100%
  );
}

/* ---- layout ---- */
.hero__content {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.hero__brand {
  padding: var(--hero-pad-top) var(--hero-pad-x) 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ---- the neon words: one SVG per letter, logo letterforms drawn as four parallel tubes ---- */
.hero__word {
  margin: 0;
  width: min(calc(var(--hero-word-w) * 100%), var(--hero-word-max));
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
.hero__letter {
  display: block;
  height: auto;
  overflow: visible;
}
.hero__ink rect {
  fill: currentColor;
}
.hero__tubes use {
  fill: none;
  stroke-linecap: butt;
  stroke-linejoin: round;
}
/* letter widths follow the logo's proportions; --hero-ls opens up the gaps */
.hero__letter--m {
  width: calc((100% - 4 * var(--hero-ls)) * 26.4935 / 100);
  color: var(--red);
}
.hero__letter--e {
  width: calc((100% - 4 * var(--hero-ls)) * 16.0173 / 100);
  color: var(--yellow);
}
.hero__letter--n {
  width: calc((100% - 4 * var(--hero-ls)) * 16.0173 / 100);
  color: var(--blue);
}
.hero__letter--c {
  width: calc((100% - 4 * var(--hero-ls)) * 16.0173 / 100);
  color: var(--green);
}
.hero__letter--h {
  width: calc((100% - 4 * var(--hero-ls)) * 15.8442 / 100);
  color: var(--purple);
}
/* thin neon glow plus a dark halo, so the tubes stay readable over the bright photo */
.hero__word .hero__letter {
  filter: brightness(var(--tube-b)) saturate(var(--tube-s)) drop-shadow(0 0 2px var(--tube-glow))
    drop-shadow(0 0 7px var(--tube-glow)) drop-shadow(3px 3px 0 #000) drop-shadow(5px 5px 0 #000)
    drop-shadow(0 0 22px #000);
}

/* "cafe": white neon, under the c-h, right edge in line with the h (plus a small nudge) */
.hero__cafe-row {
  width: min(calc(var(--hero-word-w) * 100%), var(--hero-word-max));
  margin-top: var(--hero-cafe-gap);
  display: flex;
}
.hero__cafe {
  margin-left: auto;
  width: calc(var(--hero-cafe-k) * 71.0823%); /* 71.08% = cafe width / mench width at equal letter height */
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  transform: translate(var(--hero-cafe-x), var(--hero-cafe-y));
  color: var(--ink);
}
.hero__letter--cafe-c,
.hero__letter--cafe-f,
.hero__letter--cafe-e {
  width: 22.5335%;
}
.hero__letter--cafe-a {
  width: 22.6553%;
}
.hero__cafe .hero__letter {
  filter: brightness(var(--tube-b)) saturate(var(--tube-s)) drop-shadow(0 0 1px var(--tube-glow))
    drop-shadow(0 0 5px var(--tube-glow)) drop-shadow(2px 2px 0 #000) drop-shadow(4px 4px 0 #000)
    drop-shadow(0 0 16px #000);
}

/* Switching on: the sign starts switched off (dark tubes, no glow), then js/hero.js turns the letters on one at a
   time. Each letter's filter above reads the --tube-* values, so switching it on is one change of its filter, done
   in a snap like a real tube striking (no flicker or repeated flashing, for visitors sensitive to flashing light). A filter change on its own layer
   (will-change) is one the graphics chip can animate without redrawing the letter. The pace comes from each
   letter's transition-delay, set by the script. Without the script (no .is-armed) the sign is simply on. */
.hero__letter {
  --tube-b: 1; /* brightness */
  --tube-s: 1; /* saturation */
  --tube-glow: currentColor;
}
.hero__neon.is-armed .hero__letter {
  will-change: filter;
}
/* Only on the way on, so switching off (when the script arms the sign) happens before anyone sees it. 0.04s is a
   snap (2 or 3 frames) rather than 0: a transition of 0s ignores its delay, and the delay is what times each letter. */
.hero__neon.is-armed .hero__letter.is-on {
  transition: filter 0.04s linear;
}
.hero__neon.is-armed .hero__letter:not(.is-on) {
  --tube-b: 0.3;
  --tube-s: 0.45;
  --tube-glow: transparent;
}

/* ---- the lights: a dark overlay on the photo, then the old hero's flicker while the sign comes on ----
   js/hero.js adds .is-dark as soon as it runs, then .is-lighting as the "n" of "mench" comes on: the room
   stutters (off 0.5s, on 0.025s, off 1s, on 0.07s, off 0.05s, on 0.07s, off 1s, the flashes at half power), then the lights
   catch at 2.715s. The timings match the "lamps" sound in js/sound.js. Only the overlay's opacity changes, which
   the browser can animate without redrawing the photo or the sign. */
.hero__dim {
  position: absolute;
  inset: 0;
  background: rgb(6 3 14 / 0.6); /* how dark the room is with the lights off */
  opacity: 0;
  pointer-events: none;
}
.hero.is-dark .hero__dim {
  opacity: 1;
}
.hero.is-lighting .hero__dim {
  animation: hero-lights-on 2.715s linear;
}
@keyframes hero-lights-on {
  0%,
  18.416% {
    opacity: 1;
  }
  18.785%,
  19.337% {
    opacity: 0.5;
  }
  20.074%,
  56.169% {
    opacity: 1;
  }
  56.538%,
  58.748% {
    opacity: 0.5;
  }
  59.484%,
  60.589% {
    opacity: 1;
  }
  60.958%,
  63.168% {
    opacity: 0.5;
  }
  63.904%,
  99.632% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* ---- middle: the Reserve a table button (bottom left; it had an intro box around it until 8 November 2026) and the
   switches (right) ---- */
.hero__mid {
  position: relative;
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 32px;
  padding: 20px 36px 16px 12px;
}
.hero__intro {
  position: relative;
  justify-self: start;
  align-self: end;
  margin: 0 0 12px 18px; /* with .hero__mid's padding: 30px in and 28px up, level with Scroll to explore opposite */
}

/* the switches, where the handoff had its social squares and laid out the same way (three 60px squares, 12px
   apart, upright): centred on the hero's height on its right edge (owner, 3 November 2026). They sit in
   .hero__content, which is the hero's full height, so 50% is the middle of the hero. */
.hero__toggles {
  position: absolute;
  right: 30px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
}

/* ---- Reserve a table, the big button under the intro box (phones only; it was How it works) ---- */
.hero__cta {
  display: none;
  align-items: stretch;
  margin: 0 16px 16px;
  text-decoration: none;
  border: 3px solid var(--black);
  border-radius: var(--r-card);
  overflow: hidden;
}
.hero__cta-icon {
  width: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--black);
}
.hero__cta-label {
  flex: 1;
  min-height: 62px;
  padding: 0 24px;
  display: flex;
  align-items: center;
  background: var(--red);
  color: var(--on-red);
  font: 700 18px/1 var(--font-hud);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  transition: background 150ms;
}
.hero__cta:hover .hero__cta-label {
  background: var(--yellow);
  color: var(--on-yellow);
}

/* ---- Reserve a table (owner, 3 November 2026): the hero's own button style, a black icon box and a red label that
   turns yellow on hover, like the phones' How it works button ---- */
.hero__intro {
  display: grid;
  justify-items: start;
}
.hero__reserve {
  display: inline-flex;
  align-items: stretch;
  border: 3px solid var(--black);
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
}
.hero__reserve-icon {
  display: grid;
  place-items: center;
  width: 52px;
  background: var(--black);
}
.hero__reserve-icon svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: var(--red);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.hero__reserve-label {
  display: flex;
  align-items: center;
  min-height: 52px;
  padding: 0 22px;
  background: var(--red);
  color: var(--on-red);
  font: 700 17px/1 var(--font-hud);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: background 150ms;
}
.hero__reserve:hover .hero__reserve-label,
.hero__reserve:focus-visible .hero__reserve-label {
  background: var(--yellow);
  color: var(--on-yellow);
}
.hero__reserve:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
}

/* ---- Reserve a table in light mode (owner, 8 November 2026): the hero keeps its night look, but the button follows
   the switch: an ivory outline, icon box and label text. The label takes the day red, since ivory on the hero's
   brighter night red would be too faint to read (about 3:1; the day red gives 4.6:1). The calendar keeps its red
   lines, now on ivory. Both buttons: the one on desktop (.hero__reserve) and the big one on phones (.hero__cta). ---- */
[data-mode="day"] .hero {
  --ivory: #fffbf0;
  --day-red: #db2e27;
}
[data-mode="day"] .hero__reserve,
[data-mode="day"] .hero__cta {
  border-color: var(--ivory);
}
[data-mode="day"] .hero__reserve-icon,
[data-mode="day"] .hero__cta-icon {
  background: var(--ivory);
}
[data-mode="day"] .hero__reserve-icon svg,
[data-mode="day"] .hero__cta-icon svg {
  stroke: var(--day-red); /* overrides the phone svg's stroke="#FF5B52" attribute: CSS beats presentation attributes */
}
[data-mode="day"] .hero__reserve-label,
[data-mode="day"] .hero__cta-label {
  background: var(--day-red);
  color: var(--ivory);
}
/* hover keeps the yellow, with dark text */
[data-mode="day"] .hero__reserve:hover .hero__reserve-label,
[data-mode="day"] .hero__reserve:focus-visible .hero__reserve-label,
[data-mode="day"] .hero__cta:hover .hero__cta-label {
  background: var(--yellow);
  color: var(--on-yellow);
}

/* ---- Scroll to explore, bottom right (desktop): goes to What's inside, the section after the hero ---- */
.hero__scroll {
  position: absolute;
  right: 30px;
  bottom: 28px;
  z-index: 3;
  display: flex;
  align-items: flex-end;
  gap: 18px;
  font-family: var(--font-mono);
  font-size: 18px;
  letter-spacing: 0.08em;
  text-align: right;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
}
/* Chevron cascade (owner's pick, 8 November 2026, from the Mench Bulb Cues page): three V shapes of five warm
   bulbs, stacked like runway lights and firing one after another downward. Each bulb is an <i> placed on a grid
   (--x, --y in bulb steps of --p); its unlit glass is the <i> itself and its lit glass is the ::after, so the loop only
   fades one opacity. */
.hero__chevrons {
  --p: 11px; /* bulb step */
  --d: 8px; /* bulb size */
  --bulb: #ffc35a; /* an incandescent bulb: the hero's own exception, warmer than --yellow */
  --bulb-hot: #fff3cf; /* its white-hot centre */
  display: grid;
  gap: calc(2 * var(--p) - var(--d)); /* the chevrons' tops sit 4 bulb steps apart */
  flex: none;
}
.hero__chevron {
  position: relative;
  width: calc(4 * var(--p) + var(--d));
  height: calc(2 * var(--p) + var(--d));
}
.hero__chevron i {
  position: absolute;
  left: calc(var(--x) * var(--p));
  top: calc(var(--y) * var(--p));
  width: var(--d);
  height: var(--d);
  border-radius: 50%;
  background: rgb(255 195 90 / 0.13);
}
.hero__chevron i::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 38%, var(--bulb-hot) 0 18%, var(--bulb) 58%);
  box-shadow: none;
  opacity: 0;
  animation: hero-bulb 1.5s ease-out infinite;
  animation-delay: var(--delay); /* a negative delay starts the loop part-way through, so no chevron waits */
}
/* the V: top corners, then in one step, then the point */
.hero__chevron i:nth-child(1) {
  --x: 0;
  --y: 0;
}
.hero__chevron i:nth-child(2) {
  --x: 4;
  --y: 0;
}
.hero__chevron i:nth-child(3) {
  --x: 1;
  --y: 1;
}
.hero__chevron i:nth-child(4) {
  --x: 3;
  --y: 1;
}
.hero__chevron i:nth-child(5) {
  --x: 2;
  --y: 2;
}
.hero__chevron:nth-child(1) {
  --delay: -1.5s;
}
.hero__chevron:nth-child(2) {
  --delay: -1.2s;
}
.hero__chevron:nth-child(3) {
  --delay: -0.9s;
}
@keyframes hero-bulb {
  0%,
  35% {
    opacity: 1;
  }
  55%,
  100% {
    opacity: 0;
  }
}

/* ---- focus ---- */
.hero__cta:focus-visible,
.hero__scroll:focus-visible,
.ig-tile:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
}

/* =====================================================================
   Phones and small tablets (760px and below). The switches move to the phone menu (640px and below) or the desktop
   notch (641px and up).
   ===================================================================== */
@media (max-width: 760px) {
  .hero {
    --hero-pad-x: 16px;
    --hero-pad-top: 96px; /* clear of the floating Menu button (its bottom is 69px down) */
    --hero-word-w: 1;
    --hero-ls: 0px;
    --hero-cafe-k: 0.5;
    --hero-cafe-gap: 6px;
    --hero-cafe-x: 0px;
    --hero-cafe-y: 0px;
    /* here the words and "cafe" are 0.351 of the row's width tall, plus the 6px gap between them */
    --hero-room: 330px;
    --hero-word-max: max(140px, calc((100svh - var(--hero-pad-top) - var(--hero-room) - 6px) / 0.351));
  }
  .hero__photo {
    object-position: 50% 50%;
  }
  .hero__photo,
  .hero__dim {
    height: 94%; /* reaches down behind Reserve a table, so no dark band above it (owner, 13 November 2026; was 76%) */
    -webkit-mask-image: linear-gradient(#000 76%, transparent);
    mask-image: linear-gradient(#000 76%, transparent);
  }

  .hero__word .hero__letter {
    filter: brightness(var(--tube-b)) saturate(var(--tube-s)) drop-shadow(0 0 1px var(--tube-glow))
      drop-shadow(0 0 5px var(--tube-glow)) drop-shadow(2px 2px 0 #000) drop-shadow(3px 3px 0 #000)
      drop-shadow(0 0 14px #000);
  }
  .hero__cafe-row {
    justify-content: center;
  }
  .hero__cafe {
    margin-left: 0;
  }
  .hero__cafe .hero__letter {
    filter: brightness(var(--tube-b)) saturate(var(--tube-s)) drop-shadow(0 0 1px var(--tube-glow))
      drop-shadow(0 0 3px var(--tube-glow)) drop-shadow(1px 1px 0 #000) drop-shadow(2px 2px 0 #000)
      drop-shadow(0 0 8px #000);
  }

  .hero__mid {
    grid-template-columns: 1fr;
    align-items: end;
    padding: 16px 16px 32px;
    gap: 14px;
  }

  /* phones: the big red full-width button is Reserve a table (owner, 3 November 2026; it was How it works), so the
     smaller one steps aside, and with it the empty wrapper that held it */
  .hero__cta {
    display: flex;
  }
  .hero__intro {
    display: none;
  }
  .hero .hero__toggles, /* .hero raises it over .mode-switch { display: flex } further down */
  .hero__scroll {
    display: none;
  }
}

/* short phones (an iPhone SE, small Androids): a tighter button, so it all fits in one screen */
@media (max-width: 760px) and (max-height: 720px) {
  .hero {
    --hero-pad-top: 90px;
    --hero-room: 290px;
  }
  .hero__mid {
    padding-bottom: 16px;
    gap: 10px;
  }
  .hero__cta-label {
    min-height: 50px;
    font-size: 16px;
  }
  .hero__reserve-label {
    min-height: 42px;
    padding: 0 16px;
    font-size: 15px;
  }
  .hero__reserve-icon {
    width: 42px;
  }
}
/* short, wide screens (a laptop with a small window, a phone held sideways): the switches stay in the notch menu,
   and the button gets smaller so the words keep some size */
@media (min-width: 761px) and (max-height: 620px) {
  .hero {
    --hero-room: 190px;
  }
  .hero .hero__toggles {
    display: none;
  }
  .hero__scroll {
    font-size: 15px;
  }
  .hero__reserve-label {
    min-height: 42px;
    font-size: 15px;
  }
  .hero__reserve-icon {
    width: 42px;
  }
  .hero__chevrons {
    --p: 8px;
    --d: 6px;
  }
}

/* phones held sideways and other very short screens: there's no room for everything, so the big Reserve button steps
   aside (the small one comes back) and the words keep a readable size */
@media (max-height: 500px) and (orientation: landscape) {
  .hero {
    --hero-pad-top: 58px;
    --hero-room: 120px;
  }
  .hero__cta {
    display: none;
  }
  .hero__intro {
    display: grid; /* phones hide it, and a phone held sideways can be 760px wide or less */
    margin: 0;
  }
  .hero__reserve {
    display: inline-flex; /* the big button is hidden here, so the small one comes back */
  }
  .hero__mid {
    padding-bottom: 14px;
  }
}

/* less motion: the finished words (js/hero.js doesn't arm them), the scroll cue's bulbs all on and still */
@media (prefers-reduced-motion: reduce) {
  .hero__neon.is-armed .hero__letter {
    transition: none;
  }
  .hero__dim {
    display: none;
  }
  .hero__chevron i::after {
    animation: none;
    opacity: 0.85;
  }
  .hero__cta-label,
  .hero__reserve-label {
    transition: none;
  }
}

/* =====================================================================
   THE SWITCHES on the right of the hero: day/night, sound, and Instagram
   ===================================================================== */
/* ---------- day/night switch: a rounded tile like the sound switch under it ----------
   Night: a dark tile with a yellow outline and moon. Day: a yellow tile with an ink outline, hard ink shadow
   and sun. (Phones don't show it here; the phone menu has its own switch.) */
.bite-toggle {
  --size: 60px; /* the same size as the sound switch under it */
  --ink: #1a1714;
  --night: #171030;
  --yellow: #ffd731;
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --boing: cubic-bezier(0.25, 3, 0.5, 1);
  --ease: cubic-bezier(0.45, 0, 0.2, 1);
  position: relative;
  display: inline-block;
  flex-shrink: 0;
  width: 1em;
  height: 1em;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 0.24em;
  background: none;
  font-size: var(--size);
  line-height: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: transform 150ms var(--boing);
}
.bite-toggle * {
  position: absolute;
  box-sizing: border-box;
}
.bite-toggle:hover {
  transform: translate(-0.025em, -0.025em) rotate(-4deg);
}
.bite-toggle:active {
  transform: scale(0.93);
}
.bite-toggle:focus-visible {
  outline: 0.03em solid #2f8fff;
  outline-offset: 0.09em;
}
.mode-tile {
  inset: 0;
  border: 0.045em solid var(--ink);
  border-radius: 0.24em;
  background: var(--yellow);
  box-shadow: 0.08em 0.08em 0 var(--ink);
  transition:
    background-color 0.45s var(--ease),
    border-color 0.45s var(--ease),
    box-shadow 0.3s var(--ease);
}
.bite-toggle:hover .mode-tile {
  box-shadow: 0.12em 0.12em 0 var(--ink);
}
.bite-toggle[aria-pressed="true"] .mode-tile {
  background: var(--night);
  border-color: var(--yellow);
  box-shadow: none;
}
.bite-toggle[aria-pressed="true"]:hover .mode-tile {
  box-shadow: none;
}
.mode-tile svg {
  left: 50%;
  top: 50%;
  width: 0.5em;
  height: 0.5em;
  margin: -0.25em 0 0 -0.25em;
  transition:
    opacity 0.3s var(--ease),
    scale 0.5s var(--spring),
    rotate 0.5s var(--spring);
}
.mt-moon {
  fill: var(--yellow);
}
.mt-sun {
  fill: var(--ink);
  stroke: var(--ink);
  stroke-width: 2.2;
  stroke-linecap: round;
}
/* the one that isn't showing shrinks and turns away */
.bite-toggle[aria-pressed="true"] .mt-sun,
.bite-toggle:not([aria-pressed="true"]) .mt-moon {
  opacity: 0;
  scale: 0.4;
  rotate: -90deg;
}
@media (prefers-reduced-motion: reduce) {
  .bite-toggle,
  .bite-toggle * {
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
}
.mode-switch {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* the sound switch under the day/night switch: the same tile as the day/night switch, and it flips the same way. Sound on: a
   yellow tile with an ink outline, hard shadow and speaker. Sound off: a dark tile with a yellow outline and
   crossed-out speaker (js/sound.js sets aria-pressed) */
.sound-toggle {
  --ink: #1a1714;
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  padding: 0;
  border: 2.6px solid #ffd731;
  border-radius: 14px;
  background: #171030;
  color: #ffd731;
  cursor: pointer;
  box-shadow: none;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform 150ms var(--boing),
    box-shadow 150ms var(--boing),
    background-color 0.45s,
    border-color 0.45s,
    color 0.45s;
}
.sound-toggle:hover {
  transform: translate(-1.5px, -1.5px) rotate(-4deg);
  box-shadow: none;
}
.sound-toggle:active {
  transform: scale(0.93);
}
.sound-toggle[aria-pressed="true"] {
  background: #ffd731;
  border-color: var(--ink);
  color: var(--ink);
  box-shadow: 4.6px 4.6px 0 var(--ink);
}
.sound-toggle[aria-pressed="true"]:hover {
  box-shadow: 7px 7px 0 var(--ink);
}
.sound-toggle .i {
  width: 28px;
  height: 28px;
}
@media (prefers-reduced-motion: reduce) {
  .sound-toggle {
    transition: none;
  }
}
/* Instagram, under the sound switch: the same tile, always in the switches' dark look (it's a link, not a switch),
   and it turns yellow with the hard ink shadow on hover, like a switch that's on */
.ig-tile {
  --ink: #1a1714;
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  border: 2.6px solid #ffd731;
  border-radius: 14px;
  background: #171030;
  color: #ffd731;
  box-shadow: none;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform 150ms var(--boing),
    box-shadow 150ms var(--boing),
    background-color 0.3s,
    border-color 0.3s,
    color 0.3s;
}
.hero a.ig-tile {
  color: #ffd731; /* .hero a sets every link in the hero to the ink colour */
}
.hero a.ig-tile:hover {
  transform: translate(-1.5px, -1.5px) rotate(-4deg);
  background: #ffd731;
  border-color: var(--ink);
  color: var(--ink);
  box-shadow: 4.6px 4.6px 0 var(--ink);
}
.ig-tile:active {
  transform: scale(0.93);
}
.ig-tile svg {
  width: 28px;
  height: 28px;
}
@media (prefers-reduced-motion: reduce) {
  .ig-tile {
    transition: none;
  }
}