/* Hakashi Sushi Bar & Grill — draft site styles */

:root {
  --ink: #16130f;
  --ink-2: #1f1a15;
  --ink-3: #2a231c;
  --cream: #f6f1e7;
  --cream-2: #ece3d2;
  --vermilion: #c4402a;
  --vermilion-deep: #a5321f;
  --gold: #c0994a;
  --muted: #9a9084;
  --line: rgba(246, 241, 231, 0.14);
  --shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
  --serif: "Shippori Mincho", Georgia, "Times New Roman", serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --wrap: 1180px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

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

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

a { color: inherit; text-decoration: none; }

/* Keyboard focus: visible ring for anyone navigating without a mouse.
   :focus-visible only shows on keyboard/AT focus, never on mouse click. */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.menu-tab:focus-visible,
.nav-toggle:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Respect users who ask the OS to reduce motion. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 0.4em;
  letter-spacing: 0.01em;
}

.wrap { width: min(var(--wrap), 92vw); margin: 0 auto; }

.eyebrow {
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.28em;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--vermilion);
  margin: 0 0 1rem;
}
.eyebrow.gold { color: var(--gold); }

.section { padding: clamp(4rem, 9vw, 8rem) 0; }
.section-dark { background: var(--ink-2); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1.7rem;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: 2px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--vermilion); color: #fff; }
.btn-primary:hover { background: var(--vermilion-deep); }
.btn-ghost { border-color: var(--line); color: var(--cream); }
.btn-ghost:hover { border-color: var(--cream); background: rgba(246, 241, 231, 0.06); }

/* ---------- Header ---------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem clamp(1.2rem, 4vw, 3rem);
  transition: background 0.3s ease, padding 0.3s ease, box-shadow 0.3s ease;
}
.site-header.scrolled {
  background: rgba(18, 15, 12, 0.92);
  backdrop-filter: blur(10px);
  padding-top: 0.7rem;
  padding-bottom: 0.7rem;
  box-shadow: 0 1px 0 var(--line);
}
.brand { display: flex; align-items: center; gap: 0.7rem; }
.brand img { height: 42px; width: auto; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5)); }
.brand-name {
  font-family: var(--serif);
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.nav { display: flex; align-items: center; gap: 2rem; }
.nav a {
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cream);
  opacity: 0.85;
  transition: opacity 0.2s, color 0.2s;
}
.nav a:hover { opacity: 1; color: var(--vermilion); }
.nav .btn { padding: 0.6rem 1.2rem; }

.nav-toggle {
  display: none;
  background: none;
  border: 0;
  color: var(--cream);
  cursor: pointer;
  padding: 0.4rem;
}
.nav-toggle svg { width: 26px; height: 26px; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  /* Small-viewport unit: on phones this matches what is actually visible under
     Safari's address bar, so the hero's content (buttons included) can be sized
     to genuinely fit the first screen instead of being sliced at the fold. */
  min-height: 100svh;
  display: flex;
  align-items: center;
  text-align: center;
  color: #fff;
  padding: 7rem 1.5rem 4rem;
  background: linear-gradient(180deg, rgba(18,15,12,0.62) 0%, rgba(18,15,12,0.6) 42%, rgba(18,15,12,0.9) 100%),
              url("images/hero.jpg") center 30% / cover no-repeat;
}
.hero-inner { max-width: 820px; margin: 0 auto; }
.hero-logo {
  display: block;
  width: min(360px, 80vw);
  height: auto;
  margin: -1rem auto 1.4rem;
  filter: drop-shadow(0 8px 26px rgba(0, 0, 0, 0.6));
}
/* Kept in the document for search engines and screen readers, hidden from view
   because the hero logo already shows the name. */
.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;
}
.hero h1 {
  font-size: clamp(2.6rem, 7vw, 5rem);
  margin-bottom: 0.5rem;
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.5);
}
.hero .lede {
  font-size: clamp(1.05rem, 2.2vw, 1.35rem);
  color: var(--cream-2);
  max-width: 640px;
  margin: 0 auto 2.2rem;
}
.hero .btn-row { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* keep text legible where it sits over photos */
.hero .eyebrow,
.hero .lede { text-shadow: 0 1px 16px rgba(0, 0, 0, 0.7); }
.menu-hero .eyebrow,
.menu-hero h1,
.menu-hero p { text-shadow: 0 1px 16px rgba(0, 0, 0, 0.6); }
.menu-hero .eyebrow { text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 1px 16px rgba(0, 0, 0, 0.7); }

/* ---------- Generic layout blocks ---------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.split.reverse .split-media { order: 2; }
.split-media img {
  width: 100%;
  border-radius: 4px;
  box-shadow: var(--shadow);
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
/* The About photo is landscape in a portrait slot, so a centered crop cuts the
   lobster tail off the right edge. Shifting the crop right keeps the whole
   dish in frame. Scoped to About so the Chef portrait is unaffected. */
#about .split-media img { object-position: 82% 50%; }
.section h2 { font-size: clamp(1.9rem, 4vw, 3rem); }
.lead { font-size: 1.12rem; color: var(--cream-2); }
.muted { color: var(--muted); }

.rule {
  width: 60px;
  height: 2px;
  background: var(--vermilion);
  margin: 1.4rem 0 1.8rem;
  border: 0;
}

/* feature list */
.ticks { list-style: none; margin: 1.4rem 0 0; padding: 0; }
.ticks li {
  position: relative;
  padding-left: 1.8rem;
  margin-bottom: 0.7rem;
  color: var(--cream-2);
}
.ticks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 8px;
  height: 8px;
  background: var(--vermilion);
  transform: rotate(45deg);
}

.quote {
  font-family: var(--serif);
  font-size: clamp(1.3rem, 3vw, 2rem);
  font-style: italic;
  line-height: 1.4;
  color: var(--cream);
  border-left: 3px solid var(--vermilion);
  padding-left: 1.4rem;
  margin: 2rem 0 0;
}

/* ---------- Omakase / events full-bleed ---------- */
.feature {
  position: relative;
  color: #fff;
  text-align: center;
  padding: clamp(5rem, 12vw, 9rem) 1.5rem;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.feature::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(18, 15, 12, 0.72);
}
.feature .wrap { position: relative; max-width: 760px; }
.feature h2 { font-size: clamp(2rem, 5vw, 3.4rem); }

/* ---------- Menu highlights grid ---------- */
.tag-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.2rem;
  margin-top: 2.5rem;
}
.tag-card {
  background: var(--ink-3);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 1.6rem;
}
.tag-card h4 { color: var(--vermilion); font-size: 1.15rem; margin-bottom: 0.3rem; }
.tag-card p { margin: 0; font-size: 0.95rem; color: var(--muted); }

/* ---------- Gallery ---------- */
.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.6rem;
}
.gallery img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  filter: grayscale(8%);
  transition: filter 0.3s, transform 0.4s;
}
.gallery img:hover { filter: none; transform: scale(1.03); }

/* ---------- Visit / contact ---------- */
.visit-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.info-row { margin-bottom: 1.6rem; }
.info-row .label {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.72rem;
  color: var(--vermilion);
  font-weight: 600;
  margin-bottom: 0.35rem;
}
.info-row a { border-bottom: 1px solid transparent; transition: border-color 0.2s; }
.info-row a:hover { border-color: var(--vermilion); }
.hours-table { width: 100%; border-collapse: collapse; }
.hours-table th {
  text-align: left;
  font-family: var(--serif);
  color: var(--vermilion);
  font-size: 1.1rem;
  padding: 1.2rem 0 0.5rem;
  font-weight: 600;
}
.hours-table td { padding: 0.28rem 0; color: var(--cream-2); font-size: 0.98rem; }
.hours-table td:last-child { text-align: right; color: var(--cream); }
.map-embed {
  width: 100%;
  border: 0;
  border-radius: 4px;
  aspect-ratio: 4 / 3;
  filter: grayscale(30%) invert(4%);
  box-shadow: var(--shadow);
}

/* ---------- Footer ---------- */
.site-footer {
  background: #0f0c09;
  padding: 3rem 0 2rem;
  border-top: 1px solid var(--line);
}
.footer-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: space-between;
  align-items: center;
}
.socials { display: flex; gap: 1.2rem; }
.socials a {
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.8;
}
.socials a:hover { color: var(--vermilion); opacity: 1; }
.footer-legal { color: var(--muted); font-size: 0.8rem; margin-top: 1.5rem; text-align: center; }
/* Accessibility note: a real person to reach if any part of the site is hard
   to use. Kept quiet visually but the contact links stay clearly tappable. */
.footer-access {
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0.9rem;
  line-height: 1.7;
  font-size: 0.76rem;
}
.footer-access a {
  color: var(--cream-2);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.footer-access a:hover { color: var(--vermilion); }

/* ======================================================
   MENU PAGE
   ====================================================== */
.menu-hero {
  padding: 9rem 1.5rem 3rem;
  text-align: center;
  background: linear-gradient(180deg, rgba(18,15,12,0.8), rgba(18,15,12,0.72) 30%, rgba(18,15,12,0.95)),
              url("images/menu-banner.jpg") center 38% / cover no-repeat;
}
.menu-hero h1 { font-size: clamp(2.4rem, 6vw, 4rem); }
.menu-hero p { color: var(--cream-2); max-width: 560px; margin: 0.5rem auto 1.8rem; }

/* Search + diet chips: scroll away with the page like normal content, so the
   pinned assembly stays slim (search is one flick from anywhere). */
.menu-tabs-wrap {
  padding-top: 0.4rem;
}
/* Only the category tab strip stays pinned while scrolling. It sits in its
   own top-level bar because sticky elements can only stick within their
   parent's box; inside the short search wrap it stopped sticking one flick in. */
.menu-tabs-bar {
  position: sticky;
  top: 60px;
  z-index: 40;
  background: rgba(18, 15, 12, 0.96);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

/* search + dietary filter row */
.menu-search-row {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  flex-wrap: wrap;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0.8rem clamp(1rem, 4vw, 3rem) 0;
}
.menu-search { position: relative; flex: 1 1 240px; display: flex; align-items: center; }
.menu-search > svg {
  position: absolute; left: 0.85rem;
  width: 16px; height: 16px; color: var(--muted); pointer-events: none;
}
.menu-search input {
  width: 100%;
  font-family: var(--sans);
  font-size: 0.95rem;
  color: var(--cream);
  background: rgba(246, 241, 231, 0.06);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 0.62rem 2.2rem 0.62rem 2.4rem;
  outline: none;
  transition: border-color 0.2s;
}
.menu-search input::placeholder { color: var(--muted); }
.menu-search input:focus { border-color: var(--gold); }
.menu-search input::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
.menu-search-clear {
  position: absolute; right: 0.5rem;
  background: none; border: 0; color: var(--muted);
  font-size: 1.35rem; line-height: 1; cursor: pointer; padding: 0.1rem 0.4rem;
}
.menu-search-clear:hover { color: var(--cream); }
.diet-filters { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.diet-chip {
  flex: 0 0 auto;
  padding: 0.5rem 0.9rem;
  font-family: var(--sans);
  font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600;
  color: var(--muted);
  background: none;
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.2s, background 0.2s, border-color 0.2s;
}
.diet-chip:hover { color: var(--cream); }
.diet-chip.active { color: var(--ink); background: var(--gold); border-color: var(--gold); }
.menu-search-status {
  max-width: var(--wrap); margin: 0 auto;
  padding: 0.55rem clamp(1rem, 4vw, 3rem) 0;
  color: var(--muted); font-size: 0.82rem;
}

/* filter visibility helpers */
.menu-item.item-hidden { display: none; }
.menu-list.list-hidden { display: none; }
.menu-subhead.subhead-hidden { display: none; }

/* dietary tag chips on menu items */
.menu-tags { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.45rem; }
.tag {
  font-family: var(--sans);
  font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700;
  padding: 0.16rem 0.5rem; border-radius: 3px; line-height: 1.5;
  border: 1px solid transparent;
}
.tag-veg { color: #9ccb84; border-color: rgba(156, 203, 132, 0.4); background: rgba(156, 203, 132, 0.09); }
.tag-raw { color: #86b8dd; border-color: rgba(134, 184, 221, 0.4); background: rgba(134, 184, 221, 0.09); }
.tag-spicy { color: #e8896e; border-color: rgba(232, 137, 110, 0.45); background: rgba(232, 137, 110, 0.11); }
.menu-tabs {
  display: flex;
  gap: 0.4rem;
  overflow-x: auto;
  padding: 0.9rem clamp(1rem, 4vw, 3rem);
  scrollbar-width: none;
  max-width: var(--wrap);
  margin: 0 auto;
  /* fade the right edge to hint that more categories scroll into view */
  -webkit-mask-image: linear-gradient(90deg, #000 86%, transparent);
  mask-image: linear-gradient(90deg, #000 86%, transparent);
}
.menu-tabs::-webkit-scrollbar { display: none; }
/* drop the right-edge fade once scrolled to the end, so the last tab (Beer)
   shows at full brightness instead of dimmed under the fade */
.menu-tabs.at-end { -webkit-mask-image: none; mask-image: none; }
.menu-tab {
  flex: 0 0 auto;
  padding: 0.55rem 1.1rem;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--muted);
  background: none;
  border: 1px solid transparent;
  border-radius: 2px;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.2s, background 0.2s, border-color 0.2s;
}
.menu-tab:hover { color: var(--cream); }
.menu-tab.active { color: #fff; background: var(--vermilion); }

.menu-body { padding: clamp(2.5rem, 6vw, 4.5rem) 0 6rem; min-height: 100vh; }
.menu-cat { scroll-margin-top: 140px; margin-bottom: 3.5rem; }
.menu-cat.hidden { display: none; }
.menu-cat-head { margin-bottom: 1.8rem; }
.menu-cat-head h2 { font-size: clamp(1.6rem, 3.5vw, 2.4rem); margin: 0 0 0.9rem; }
.menu-cat-head .line { display: block; width: 56px; height: 2px; background: var(--vermilion); }
.menu-subhead {
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--gold);
  margin: 2.2rem 0 0.7rem;
}
.menu-subhead:first-of-type { margin-top: 0.4rem; }
.menu-note {
  color: var(--muted);
  font-size: 0.92rem;
  font-style: italic;
  margin: -1rem 0 1.6rem;
}
.menu-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.4rem 3rem;
}
.menu-item {
  padding: 0.95rem 0;
  border-bottom: 1px solid rgba(246, 241, 231, 0.07);
}
/* drop the trailing line under the last visible item(s); managed in JS so it
   stays correct when filtering hides items (CSS :last-child counts hidden ones) */
.menu-item.no-divider { border-bottom: none; }
.menu-item-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
}
.menu-item-name {
  font-family: var(--serif);
  font-size: 1.12rem;
  font-weight: 600;
  color: var(--cream);
}
.menu-item-price {
  font-family: var(--sans);
  font-weight: 600;
  color: var(--vermilion);
  white-space: nowrap;
  font-size: 0.98rem;
}
.menu-item-price.mp { color: var(--gold); font-size: 0.82rem; letter-spacing: 0.06em; }
.menu-item-price .sz {
  color: var(--muted);
  font-size: 0.72em;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.menu-item-desc { color: #b6ac9d; font-size: 0.98rem; margin: 0.25rem 0 0; }

.menu-cta {
  text-align: center;
  padding: 3rem 1.5rem 0;
}
.menu-footnote {
  text-align: center;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.6;
  max-width: 640px;
  margin: 2.5rem auto 0;
}
/* California Proposition 65 alcohol warning. Set apart with a rule and slightly
   brighter text so it reads as a required notice rather than menu small print. */
.prop65 {
  margin-top: 1.4rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--line);
  color: var(--cream-2);
}
.prop65 strong { letter-spacing: 0.06em; }
.prop65 a { color: var(--cream-2); text-decoration: underline; text-underline-offset: 2px; }
.prop65 a:hover { color: var(--vermilion); }

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .nav { display: none; }
  .nav.open {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.4rem;
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    background: rgba(18, 15, 12, 0.98);
    padding: 1.6rem clamp(1.2rem, 4vw, 3rem) 2rem;
    border-bottom: 1px solid var(--line);
  }
  .nav-toggle { display: block; }
  .menu-cat { scroll-margin-top: 125px; }
  .split { grid-template-columns: 1fr; }
  .split.reverse .split-media { order: 0; }
  .split-media img { aspect-ratio: 3 / 2; }
  .visit-grid { grid-template-columns: 1fr; }
  .gallery { grid-template-columns: repeat(2, 1fr); }
  .menu-list { grid-template-columns: 1fr; gap: 0; }
}

@media (max-width: 520px) {
  body { font-size: 16px; }
  /* Compact the hero so the whole stack (logo, tagline, lede, BOTH buttons)
     fits above the fold on a standard iPhone; before this, the screen edge
     sliced through the first orange button, which read as a broken bar. */
  .hero { padding: 5.5rem 1.25rem 2.5rem; }
  .hero-logo { width: min(270px, 66vw); margin: -0.5rem auto 1rem; }
  .hero .lede { font-size: 1rem; margin-bottom: 1.5rem; }
  .hero .btn-row { flex-direction: column; align-items: stretch; gap: 0.7rem; }
  .btn { justify-content: center; }
  /* Menu readability: descriptions up to the 16px comfortable-reading line,
     dish names a step larger to match. */
  .menu-item-name { font-size: 1.19rem; }
  .menu-item-desc { font-size: 1rem; }
  /* tighten the sticky search + tabs bar so it eats less of the phone screen */
  .menu-search-row { padding-top: 0.6rem; gap: 0.45rem; }
  .menu-search input { padding-top: 0.5rem; padding-bottom: 0.5rem; font-size: 0.9rem; }
  .diet-chip { padding: 0.4rem 0.72rem; font-size: 0.68rem; }
  .menu-tabs { padding-top: 0.6rem; padding-bottom: 0.6rem; }
}

/* Extra-short phone screens (older small iPhones with Safari's bars showing):
   compact the hero further so the fold still never slices a button. Modern
   taller phones never match this and keep the roomier version above. */
@media (max-width: 520px) and (max-height: 700px) {
  .hero { padding: 4.5rem 1.25rem 1.5rem; }
  .hero-logo { width: min(190px, 50vw); margin: -0.4rem auto 0.8rem; }
  .hero .lede { font-size: 0.95rem; margin-bottom: 1.1rem; }
}

/* ---------- Mobile quick-action bar ---------- */
.mobile-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  display: none;
  background: rgba(15, 12, 9, 0.97);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--line);
}
.mobile-bar-inner { display: flex; }
.mobile-bar a {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 0.65rem 0.2rem;
  padding-bottom: calc(0.65rem + env(safe-area-inset-bottom, 0px));
  font-size: 0.62rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--cream-2);
  border-right: 1px solid var(--line);
}
.mobile-bar a:last-child { border-right: 0; }
.mobile-bar a:active { background: rgba(196, 64, 42, 0.18); }
.mobile-bar svg { width: 21px; height: 21px; color: var(--vermilion); }

@media (max-width: 860px) {
  .mobile-bar { display: block; }
  body { padding-bottom: calc(66px + env(safe-area-inset-bottom, 0px)); }
}