/* go.menu.ca: the Menu.ca brand (red, navy, mint; Bricolage Grotesque + DM Sans). */
:root {
  --red: #fe4745;
  --red-ink: #d42d2b;
  --navy: #102b36;
  --mint: #eef5f3;
  --bg: #ffffff;
  --surface: #ffffff;
  --ink: #152d37;
  --muted: #54676e;
  --line: #d7e1df;
  --accent-ink: var(--red-ink);
  --focus: #fe4745;
  --ok: #1f9d6b;
  --ok-ink: #137a52;
  --radius: 14px;
  --display: "Bricolage Grotesque", system-ui, sans-serif;
  --body: "DM Sans", system-ui, sans-serif;
  --mono: "DM Mono", ui-monospace, monospace;
}

.top { background: var(--mint); }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font: 800 1.5rem/1 var(--display); letter-spacing: -.02em; color: var(--navy); }
.brand b { color: var(--red); font-weight: 800; }
.brand.small { font-size: 1.05rem; gap: 6px; }
.owners {
  display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border-radius: 999px;
  background: var(--navy); color: #fff; text-decoration: none; font-weight: 600; font-size: .9rem;
}
.owners:hover { background: #1c4252; }

/* ---------- hero: the cravings wall */
.hero { background: var(--mint); padding: clamp(28px, 6vw, 72px) 0 clamp(36px, 6vw, 72px); overflow: hidden; }
.hero h1 { margin: 0; font: 600 clamp(1.15rem, 2vw, 1.4rem)/1.3 var(--body); color: var(--navy); }
.lede { margin: 6px 0 clamp(20px, 4vw, 36px); color: var(--muted); font-size: 1.02rem; }
.lede strong { color: var(--navy); font-family: var(--mono); font-weight: 500; }

.wall { display: flex; flex-wrap: wrap; align-items: baseline; gap: clamp(2px, 1vw, 10px) clamp(14px, 2.4vw, 34px); }
.crave {
  position: relative; border: 0; background: none; padding: 0 .08em; cursor: pointer;
  font-family: var(--display);
  font-size: clamp(2.2rem, 6vw, 5.4rem);
  font-weight: 800;
  font-variation-settings: "wdth" 76, "opsz" 96;
  line-height: 1.02; letter-spacing: -.025em;
  color: var(--navy);
  transition: color .2s, opacity .25s;
}
.crave sup {
  position: relative; top: -.15em; margin-left: .06em;
  font: 500 .22em/1 var(--mono); letter-spacing: 0; vertical-align: super; color: var(--red-ink);
}
.crave:hover { color: var(--red); }
.wall.has-pick .crave { opacity: .32; }
.wall.has-pick .crave:hover { opacity: .75; }
.wall.has-pick .crave[aria-pressed="true"] { opacity: 1; color: var(--red); }
.crave:focus-visible { outline-offset: 6px; border-radius: 6px; }

/* The logo's broken double ring, drawn around the chosen food. */
.ring {
  position: absolute; inset: -16% -14% -10% -12%; width: 126%; height: 126%;
  overflow: visible; pointer-events: none;
  fill: none; stroke: var(--red); stroke-width: 3; stroke-linecap: round; vector-effect: non-scaling-stroke;
}
.ring { opacity: 0; clip-path: inset(0 100% 0 0); transition: opacity .15s, clip-path .55s cubic-bezier(.6, 0, .2, 1); }
.ring path { vector-effect: non-scaling-stroke; }
.crave[aria-pressed="true"] .ring { opacity: 1; clip-path: inset(-10% -10% -10% -10%); }

/* ---------- why order direct */
.direct { margin-top: 88px; }
.direct-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 32px; border-top: 2px solid var(--navy); padding-top: 28px; }
.direct h2 { margin: 0; font: 800 clamp(1.8rem, 3.6vw, 2.6rem)/1.05 var(--display); font-variation-settings: "wdth" 80; letter-spacing: -.02em; color: var(--navy); }
.facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin: 0; }
.facts dt { font: 700 1.05rem/1.25 var(--display); color: var(--navy); margin-bottom: 6px; }
.facts dd { margin: 0; color: var(--muted); font-size: .95rem; }

.crossroads { margin-top: 56px; }
.cross-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.cross {
  position: relative; display: flex; flex-direction: column; gap: 6px; padding: 28px 64px 28px 28px;
  border-radius: var(--radius); text-decoration: none; min-height: 150px; justify-content: flex-end;
}
.cross-ottawa { background: var(--mint); color: var(--navy); }
.cross-owners { background: var(--navy); color: #fff; }
.cross-kicker { font: 500 .8rem var(--mono); letter-spacing: .04em; opacity: .8; }
.cross-title { font: 800 clamp(1.3rem, 2.4vw, 1.75rem)/1.1 var(--display); letter-spacing: -.015em; }
.cross-go { position: absolute; right: 26px; bottom: 24px; font: 700 1.6rem var(--display); color: var(--red); transition: transform .2s; }
.cross:hover .cross-go { transform: translateX(4px); }

@media (max-width: 860px) {
  .direct-grid, .facts, .cross-grid { grid-template-columns: 1fr; }
  .facts { gap: 18px; }
}
@media (max-width: 640px) {
  .owners { height: 36px; padding: 0 12px; font-size: .82rem; }
  .brand { font-size: 1.25rem; }
  .brand img { width: 30px; height: 30px; }
  .crave { font-size: clamp(2rem, 10.5vw, 2.9rem); }
}