/* ========================================================
   Coyote's — Moab Mercantile
   Palette: auburn / cream / moss / clay / charcoal
   Type: Outfit / Plus Jakarta Sans / Cormorant Garamond / IBM Plex Mono
   ======================================================== */

:root {
  --auburn:   #8C4028;
  --auburn-d: #6B2F1B;
  --cream:    #F2F0E9;
  --cream-2:  #E8E4D7;
  --moss:     #2E4036;
  --moss-d:   #1F2D26;
  /* Global animation slowdown multiplier (1 = baseline; 1.15 = 15% slower) */
  --anim-scale: 1.15;
  --clay:     #CC5833;
  --clay-d:   #B14826;
  --char:     #1A1A1A;
  --char-2:   #2B2622;
  --line:     rgba(26,26,26,0.14);
  --line-on-dark: rgba(242,240,233,0.22);

  --f-display: "Outfit", system-ui, sans-serif;
  --f-body:    "Plus Jakarta Sans", system-ui, sans-serif;
  --f-accent:  "Cormorant Garamond", Georgia, serif;
  --f-mono:    "IBM Plex Mono", ui-monospace, monospace;

  --max: 1280px;
  --pad: clamp(20px, 5vw, 64px);

  --ease: cubic-bezier(.2,.7,.2,1);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--f-body);
  background: var(--cream);
  color: var(--char);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

::selection { background: var(--clay); color: var(--cream); }

/* paper grain — subtle */
body::before {
  content: "";
  position: fixed; inset: 0;
  background-image:
    radial-gradient(rgba(26,26,26,0.04) 1px, transparent 1px),
    radial-gradient(rgba(140,64,40,0.03) 1px, transparent 1px);
  background-size: 3px 3px, 7px 7px;
  background-position: 0 0, 1px 2px;
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: multiply;
}

.overline {
  font-family: var(--f-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--auburn);
  font-weight: 500;
}
.overline--cream { color: var(--cream); opacity: 0.85; }

.section-title {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(34px, 5vw, 64px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--char);
  margin: 14px 0 0;
  max-width: 22ch;
  text-wrap: balance;
}
.section-title em {
  font-family: var(--f-accent);
  font-style: italic;
  font-weight: 500;
  color: var(--auburn);
  letter-spacing: -0.005em;
}

/* ========== NAV ========== */
.nav {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 50;
  padding: 14px var(--pad);
  transition: background 280ms var(--ease), backdrop-filter 280ms var(--ease), border-color 280ms var(--ease);
  border-bottom: 1px solid transparent;
}
.nav.is-stuck {
  background: rgba(242,240,233,0.74);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom-color: var(--line);
}
.nav__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
  max-width: var(--max);
  margin: 0 auto;
  color: var(--cream);
  transition: color 280ms var(--ease);
}
.nav.is-stuck .nav__inner { color: var(--char); }
.nav__brand {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 20px;
  letter-spacing: -0.01em;
}
.nav__glyph { width: 28px; height: 28px; }
.nav__links {
  display: flex; gap: 18px; align-items: center;
  font-family: var(--f-mono);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
}
.nav__links a {
  position: relative; padding: 6px 0;
  opacity: 0.95;
  font-weight: 800;
  text-shadow: 0 1px 3px rgba(0,0,0,0.45);
  transition: opacity 200ms var(--ease);
}
.nav__links a:hover { opacity: 1; }
.nav__sep {
  font-family: var(--f-mono);
  font-weight: 400;
  opacity: 0.55;
  user-select: none;
  pointer-events: none;
}
.nav.is-stuck .nav__links a { text-shadow: none; }
.nav__links a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0;
  height: 1px; background: currentColor;
  transition: right 240ms var(--ease);
}
.nav__links a:hover::after { right: 0; }
.nav__cta {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--f-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  border: 1.5px solid currentColor;
  padding: 10px 16px;
  border-radius: 999px;
  transition: background 200ms var(--ease), color 200ms var(--ease);
}
.nav__cta svg { width: 14px; height: 14px; }
.nav__cta--stack {
  flex-direction: row;
  gap: 10px;
  padding: 8px 18px;
  line-height: 1.2;
  text-align: left;
}
.nav__cta--stack .nav__cta-caret {
  width: 10px;
  height: 22px;
  flex-shrink: 0;
  align-self: center;
}
.nav__cta-text {
  display: flex;
  flex-direction: column;
}
.nav__cta-main { font-weight: 700; }
.nav__cta-sub {
  font-size: 9px;
  opacity: 0.7;
  letter-spacing: 0.1em;
}
.nav__cta:hover { background: var(--clay); border-color: var(--clay); color: var(--cream); }
.nav.is-stuck .nav__cta:hover { color: var(--cream); }

@media (max-width: 760px) {
  .nav__links { display: none; }
}

/* ========== HERO ========== */
.hero {
  position: relative;
  background: var(--char);
  color: var(--cream);
  padding-top: 0;
  overflow: hidden;
}
.mural--photo {
  position: relative;
  width: 100%;
  aspect-ratio: 1000 / 295; /* matches the uploaded mural's proportion (5214x1541) */
  overflow: hidden;
  background: var(--char-2);
}
.mural--photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  /* slow ken-burns drift */
  animation: muralDrift calc(28s * var(--anim-scale)) ease-in-out infinite alternate;
  transform-origin: 50% 60%;
}
@keyframes muralDrift {
  0%   { transform: scale(1.02) translateX(0); }
  100% { transform: scale(1.06) translateX(-2%); }
}
.mural__vignette {
  position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, rgba(26,26,26,0.4) 0%, rgba(26,26,26,0) 22%, rgba(26,26,26,0) 60%, rgba(26,26,26,0.45) 100%),
    radial-gradient(120% 80% at 50% 100%, rgba(26,26,26,0.55), rgba(26,26,26,0) 60%);
  pointer-events: none;
}

/* Hero copy panel — sits BELOW the mural in a cream block, makes Coyote's a typographic moment */
.hero__copy {
  position: relative;
  background: var(--cream);
  color: var(--char);
  padding: clamp(28px, 3.5vw, 48px) var(--pad) clamp(40px, 5vw, 64px);
  text-align: left;
  border-top: 2px solid var(--char);
  border-bottom: 2px solid var(--char);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.hero__overline { }
.hero__title-seal { }
.hero__title    { text-align: left; }
.hero__tag      { text-align: center; margin: clamp(20px, 3vw, 40px) 0 0; }
.hero__cta-row  { margin-top: clamp(20px, 3vw, 36px); }
@media (max-width: 760px) {
  .hero__copy {
    text-align: center;
  }
  .hero__title-seal { flex-direction: column; gap: 12px; }
  .hero__overline, .hero__title, .hero__tag { text-align: center; }
}
.hero__copy::before {
  /* hand-drawn sun-rise dotted line above title */
  content: none;
}
.hero__overline {
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--f-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--auburn);
  margin-bottom: 8px;
}
.hero__dot { width: 4px; height: 4px; background: var(--clay); border-radius: 50%; }

/* Title + Seal inline row */
.hero__title-seal {
  display: inline-flex;
  align-items: center;
  gap: clamp(16px, 3vw, 40px);
  justify-content: center;
  margin-bottom: 12px;
}
.hero__title-seal .seal--inline {
  position: relative;
  top: auto; right: auto;
  width: clamp(100px, 15vw, 200px);
  flex-shrink: 0;
}
.hero__title {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: clamp(64px, 13vw, 200px);
  line-height: 0.88;
  letter-spacing: -0.045em;
  margin: 0;
  color: var(--char);
}
.hero__title-row { display: inline-flex; }
.hero__letter {
  display: inline-block;
  transform: translateY(110%);
  opacity: 0;
  animation: letterRise 900ms var(--ease) forwards;
  animation-delay: calc(80ms * var(--d) + 200ms);
}
.hero__letter--apos { color: var(--clay); }
@keyframes letterRise {
  to { transform: translateY(0); opacity: 1; }
}

.hero__tag {
  font-family: var(--f-body);
  font-size: clamp(19px, 1.92vw, 24px);
  margin: clamp(18px, 2.5vw, 36px) 0 32px;
  color: var(--char-2);
  text-align: center;
  white-space: nowrap;
  opacity: 0;
  animation: fadeUp 800ms var(--ease) forwards;
  animation-delay: 1100ms;
}
.hero__tag em {
  font-family: var(--f-accent);
  font-style: italic;
  font-weight: 500;
  color: var(--auburn);
  font-size: 1.1em;
}
.hero__tag em:first-of-type {
  font-weight: 700;
  font-size: 1.265em;
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hero__cta-row {
  display: inline-flex; gap: clamp(28px, 6vw, 64px); flex-wrap: wrap; justify-content: center; align-items: center;
  opacity: 0;
  animation: fadeUp 800ms var(--ease) forwards;
  animation-delay: 1250ms;
}

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.01em;
  padding: 14px 22px;
  border-radius: 999px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 160ms var(--ease), background 200ms var(--ease), color 200ms var(--ease), border-color 200ms var(--ease);
}
.btn svg { width: 16px; height: 16px; transition: transform 220ms var(--ease); }
.btn:hover svg { transform: translateX(4px); }
.btn--primary { background: var(--clay); color: var(--cream); border-color: var(--clay); }
.btn--primary:hover { background: var(--clay-d); border-color: var(--clay-d); }
.btn--primary:active { transform: translate(1px, 1px); }
.btn--stack {
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 12px 22px;
  line-height: 1;
  position: relative;
}
.btn--stack .btn__main {
  font-size: 15px;
  letter-spacing: 0.16em;
}
.btn--stack .btn__sub {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  opacity: 0.85;
  text-transform: lowercase;
}
.btn--stack svg {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
}
.btn--stack:hover svg { transform: translate(4px, -50%); }
.btn--ghost { background: transparent; color: var(--char); border-color: var(--char); }
.btn--ghost:hover { background: var(--char); color: var(--cream); }

/* Wax seal — pinned to the mural, top-right */
.seal--inline {
  position: relative;
  width: clamp(180px, 21vw, 256px);
  aspect-ratio: 1;
  filter: drop-shadow(0 8px 22px rgba(60,30,15,0.22));
  pointer-events: none;
  transform: rotate(-6deg);
  flex: 0 0 auto;
  display: block;
  margin: 0;
  align-self: center;
}
.seal--inline svg { width: 100%; height: 100%; display: block; shape-rendering: geometricPrecision; }
.seal--inline svg text { text-rendering: geometricPrecision; }
.seal--legacy { display: none !important; }
@media (max-width: 720px) {
  .seal { top: 16px; right: 16px; width: 92px; }
}
.seal svg { width: 100%; height: 100%; position: relative; z-index: 1; }
.seal__rotor { transform-origin: 100px 100px; animation: sealSpin calc(28s * var(--anim-scale)) linear infinite; }
.seal::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 64%; height: 64%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,0.18), rgba(0,0,0,0) 50%), var(--auburn);
  border: 1.5px solid rgba(0,0,0,0.35);
  z-index: 0;
}
@keyframes sealSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@media (max-width: 560px) {
  .seal { top: 14px; right: 14px; width: 92px; }
}

.hero__scroll {
  position: absolute;
  left: 50%; transform: translateX(-50%);
  bottom: 24px;
  background: var(--char);
  color: var(--cream);
  padding: 8px 14px;
  border-radius: 999px;
  font-family: var(--f-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  display: inline-flex; align-items: center; gap: 8px;
  z-index: 4;
  border: 2px solid var(--cream);
  pointer-events: none;
}
.hero__scroll svg { width: 10px; height: 18px; animation: scrollNudge 1.6s var(--ease) infinite; }
@keyframes scrollNudge {
  0%, 100% { transform: translateY(0); opacity: 1; }
  50% { transform: translateY(3px); opacity: 0.5; }
}

/* ========== TICKER ========== */
.ticker {
  background: #FF3DA0;
  color: var(--cream);
  padding: 18px 0;
  overflow: hidden;
  border-top: 3px solid #FFD64A;
  border-bottom: 3px solid #FFD64A;
  position: relative;
  z-index: 2;
}
.ticker__track {
  display: inline-flex; align-items: center; gap: 32px;
  white-space: nowrap;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(24px, 3.4vw, 38px);
  letter-spacing: -0.01em;
  text-transform: uppercase;
  animation: tickerScroll calc(41s * var(--anim-scale)) linear infinite;
  padding-right: 32px;
}
.ticker__track span:not(.ticker__dot) {
  color: #1A1A1A;
  -webkit-text-stroke: 1px #FFD64A;
  text-stroke: 1px #FFD64A;
  paint-order: stroke fill;
}
.ticker__dot { color: #FFD64A; font-size: 0.7em; -webkit-text-stroke: 0; }
.ticker__track .ticker__dot:nth-of-type(3n) { color: #FFD64A; }
.ticker__track .ticker__dot:nth-of-type(3n+1) { color: #FFD64A; }
@keyframes tickerScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}


/* ========== CATEGORIES BAR (taller, turquoise) ========== */
.cat-bar {
  background: #3CC4BE;
  padding: 24px 0;
  overflow: hidden;
  border-top: 3px solid var(--char);
  border-bottom: 3px solid var(--char);
  position: relative;
  z-index: 2;
}
.cat-bar__track {
  display: inline-flex; align-items: center; gap: 40px;
  white-space: nowrap;
  font-family: var(--f-display);
  font-weight: 900;
  font-size: clamp(38px, 5.3vw, 60px);
  letter-spacing: 0.01em;
  text-transform: uppercase;
  animation: tickerScroll calc(44s * var(--anim-scale)) linear infinite;
  padding-right: 40px;
}
.cat-bar__track span:not(.cat-bar__dot) {
  color: #FFD64A;
  -webkit-text-stroke: 2px #1A1A1A;
  text-stroke: 2px #1A1A1A;
  paint-order: stroke fill;
}
.cat-bar__dot { color: #1A1A1A; font-size: 0.6em; }

/* ========== WHAT WE ARE ========== */
.what {
  padding: clamp(72px, 10vw, 140px) var(--pad) clamp(48px, 6vw, 80px);
  max-width: var(--max);
  margin: 0 auto;
  position: relative;
}
.what__head {
  margin-bottom: clamp(40px, 6vw, 80px);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
}
.what__head-text { min-width: 0; }
.coyote-medallion {
  width: clamp(200px, 24vw, 300px);
  aspect-ratio: 1;
  flex: 0 0 auto;
  position: relative;
  filter: drop-shadow(0 12px 28px rgba(60,30,15,0.18));
}
.coyote-medallion__ring { position: absolute; inset: 0; width: 100%; height: 100%; }
.coyote-medallion__img {
  position: absolute;
  inset: 14%;
  width: 72%;
  height: 72%;
  object-fit: contain;
}
.medallion__rotor { transform-origin: 110px 110px; animation: medspin calc(120s * var(--anim-scale)) linear infinite; }
@keyframes medspin { to { transform: rotate(360deg); } }
@media (max-width: 720px) {
  .what__head { grid-template-columns: 1fr; }
  .coyote-medallion { width: 180px; justify-self: start; }
}
.pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.pillar {
  padding: 56px 36px 48px;
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  transition: transform 280ms var(--ease), box-shadow 280ms var(--ease);
  display: flex;
  flex-direction: column;
}
.pillar::after {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(0,0,0,0.10) 1px, transparent 1.4px);
  background-size: 22px 22px;
  opacity: 0.30;
  pointer-events: none;
}
.pillar:nth-child(1) { background: var(--coral); color: #2A0F08; }
.pillar:nth-child(2) { background: var(--teal);  color: #062826; }
.pillar:nth-child(3) { background: var(--mustard); color: #2A1E04; }
.pillar:hover { transform: translateY(-4px); box-shadow: 0 22px 50px rgba(26,26,26,0.20); }
.pillar > * { position: relative; z-index: 1; }
.pillar__num {
  font-family: var(--f-accent);
  font-style: italic;
  font-weight: 600;
  font-size: 28px;
  margin-bottom: 22px;
  opacity: 0.6;
  display: inline-block;
}
.pillar__title {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(30px, 3vw, 40px);
  line-height: 1.04;
  letter-spacing: -0.02em;
  margin: 0 0 18px;
  color: inherit;
}
.pillar__body {
  margin: 0 0 26px;
  color: inherit;
  opacity: 0.86;
  font-size: 17px;
  line-height: 1.5;
  max-width: 32ch;
}
.pillar__list {
  list-style: none; padding: 0; margin: 0;
  margin-top: auto;
  font-family: var(--f-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: inherit;
}
.pillar__list li {
  padding: 10px 0;
  border-top: 1px solid currentColor;
  opacity: 0.85;
}
.pillar__list li:first-child { border-top: 1px solid currentColor; padding-top: 10px; }

@media (max-width: 880px) {
  .pillars { grid-template-columns: 1fr; }
}

/* ========== TILES ========== */
.tiles {
  padding: clamp(72px, 10vw, 140px) var(--pad);
  max-width: var(--max);
  margin: 0 auto;
}
.tiles__head { margin-bottom: clamp(40px, 6vw, 80px); }
.tiles__head--with-art {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(24px, 4vw, 64px);
}
.tiles__head-text { flex: 1; min-width: 0; }
.tiles__coyote {
  flex-shrink: 0;
  width: clamp(140px, 18vw, 260px);
  height: auto;
  opacity: 0.82;
  transition: opacity 600ms ease;
}
.tiles__coyote:hover { opacity: 1; }
@media (max-width: 680px) {
  .tiles__head--with-art { flex-direction: column; align-items: flex-start; }
  .tiles__coyote { width: 120px; align-self: center; margin-top: 20px; }
}
.tiles__note {
  font-family: var(--f-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--moss);
  margin: 20px 0 0;
  padding-top: 14px;
  border-top: 1px dashed var(--line);
  max-width: 50ch;
}
.tiles__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.tile {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--char);
  border: 2px solid var(--char);
}
.tile__media {
  position: absolute; inset: 0;
  overflow: hidden;
}
.tile__media img,
.tile__placeholder {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 700ms var(--ease), filter 700ms var(--ease);
  filter: saturate(0.9) contrast(1.02);
}
.tile__placeholder svg { width: 100%; height: 100%; display: block; }
.tile:hover .tile__media img,
.tile:hover .tile__placeholder { transform: scale(1.06); filter: saturate(1.05) contrast(1.05); }

.tile__overlay {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 24px 22px;
  color: var(--cream);
  background: linear-gradient(to top, rgba(26,26,26,0.85) 0%, rgba(26,26,26,0.6) 50%, rgba(26,26,26,0) 100%);
  display: grid;
  gap: 4px;
  transition: padding 360ms var(--ease);
}
.tile:hover .tile__overlay { padding-bottom: 32px; }
.tile__num {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  opacity: 0.7;
}
.tile__label {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(18px, 1.6vw, 24px);
  letter-spacing: -0.015em;
  line-height: 1.05;
}
.tile__sub {
  font-family: var(--f-accent);
  font-style: italic;
  font-size: 16px;
  color: var(--cream);
  opacity: 0.8;
}

/* corner stamp on each tile */
.tile::after {
  content: attr(data-stamp);
  position: absolute;
  top: 14px; left: 14px;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cream);
  border: 1px solid rgba(242,240,233,0.55);
  padding: 4px 8px;
  border-radius: 999px;
  backdrop-filter: blur(4px);
}

@media (max-width: 1100px) {
  .tiles__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .tiles__grid { grid-template-columns: 1fr; }
  .tile { aspect-ratio: 3 / 2; }
}

/* ========== LUNCHBOX CALLOUT ========== */
.lunchbox {
  background: var(--moss);
  color: var(--cream);
  border-top: 2px solid var(--char);
  border-bottom: 2px solid var(--char);
  position: relative;
  overflow: hidden;
}
.lunchbox__link {
  display: block;
  padding: clamp(48px, 8vw, 96px) var(--pad);
  position: relative;
}
.lunchbox__inner {
  max-width: var(--max);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}
.lunchbox__title {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: clamp(40px, 6vw, 84px);
  letter-spacing: -0.03em;
  line-height: 1;
  margin: 12px 0 14px;
  color: var(--cream);
  display: inline-flex;
  align-items: baseline;
}
.lunchbox__dot { color: var(--coyote-yellow, #FFD64A); }
.lunchbox__sub {
  font-family: var(--f-accent);
  font-style: italic;
  font-size: clamp(16px, 1.6vw, 22px);
  margin: 0;
  opacity: 0.85;
  max-width: 36ch;
}
.lunchbox__arrow {
  flex: 0 0 auto;
  width: clamp(80px, 10vw, 140px);
  color: var(--cream);
  transition: transform 360ms var(--ease);
}
.lunchbox__link:hover .lunchbox__arrow { transform: translateX(12px); }
.lunchbox__tracks {
  position: absolute;
  bottom: 16px; left: 0;
  width: 200%;
  height: 40px;
  animation: tracks calc(18s * var(--anim-scale)) linear infinite;
}
@keyframes tracks {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (max-width: 720px) {
  .lunchbox__inner { flex-direction: column; align-items: flex-start; gap: 16px; }
  .lunchbox__arrow { width: 100px; }
}

/* ========== VISIT ========== */
.visit {
  padding: clamp(72px, 10vw, 140px) var(--pad);
  max-width: var(--max);
  margin: 0 auto;
}
.visit__head { margin-bottom: clamp(40px, 6vw, 80px); }
.visit__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.card {
  background: var(--cream);
  border: 2px solid var(--char);
  padding: 32px 28px;
  position: relative;
  transition: transform 220ms var(--ease), box-shadow 220ms var(--ease);
}
.card:hover {
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0 var(--char);
}
.card__icon {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--auburn);
  margin-bottom: 18px;
}
.card__icon svg { width: 100%; height: 100%; }
.card__title {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 22px;
  margin: 0 0 12px;
  color: var(--char);
  letter-spacing: -0.01em;
}
.card__body {
  font-family: var(--f-body);
  font-size: 17px;
  color: var(--char);
  margin: 0 0 14px;
  line-height: 1.45;
}
.card__body a { border-bottom: 1px solid var(--clay); padding-bottom: 1px; transition: color 200ms var(--ease); }
.card__body a:hover { color: var(--clay); }
.card__link {
  display: inline-block;
  font-family: var(--f-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--clay);
  margin-top: 4px;
}
.card__link:hover { color: var(--clay-d); }
.card__meta {
  font-family: var(--f-accent);
  font-style: italic;
  font-size: 16px;
  color: var(--moss);
  margin: 0;
  opacity: 0.9;
}

@media (max-width: 880px) {
  .visit__grid { grid-template-columns: 1fr; }
}

/* ========== FOOTER ========== */
.foot {
  background: var(--char);
  color: var(--cream);
  padding: 36px var(--pad);
  border-top: 2px solid var(--char);
}
.foot__inner {
  max-width: var(--max);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  font-family: var(--f-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
}
.foot__brand {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 14px;
  text-transform: none;
  letter-spacing: -0.005em;
}
.foot__brand svg { width: 22px; height: 22px; }
.foot__copy { opacity: 0.6; }
@media (max-width: 720px) {
  .foot__inner { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* ========== REVEAL ========== */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 700ms var(--ease), transform 700ms var(--ease);
}
[data-reveal].is-in {
  opacity: 1;
  transform: translateY(0);
}

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .mural--photo img { animation: none; }
}