/* Row Twelve Coffee demo stylesheet (spec 19, v2-demo-coffee-shop;
   build round R1a, the asset layer; re-voiced by amendment 19/3, the
   rebrand + font + color + geometry round). Standalone, scoped css for this
   demo alone: every selector is .mrd- prefixed. The documented
   machine-scope exceptions are exactly two kinds: the five @font-face
   rules and the one token block on #demo-main (the demo's own serving
   scope; the one sanctioned machine root, which also repaints the
   machinery body paint for this light theme). The demo carries its own
   border-box group (the machinery sheets ship no reset) and the
   descendant link override group (the machinery base paints no
   anchors, so prose anchors would bleed UA styling): every component
   anchor paints through its own .mrd- rule at a higher specificity
   than the bare override, so the belt never eats a button or pill
   face.

   Machinery contract (demo-base.css, demo-notice.css, layouts.demo)
   is never redefined here: the machinery banner-clearance token is
   consumed at EXACTLY ONE var() site, the demo-owned --mrd-clear
   bridge on the page wrapper (the static non-sticky chrome pays the
   fixed demo notice's height through its top padding). The machinery
   favicon pair, the demo notice, the skip link, and the consent pair
   ride the machinery chain untouched. No imports anywhere; the
   sibling demo namespaces and the app bundles are absent by
   construction.

   Faces: five font-face rules live ONLY in this file, self-hosted
   beside their OFL licenses under /demos/coffee-shop/fonts/, display
   swap: Bricolage Grotesque 700 and 800 (the display voice: headings,
   pills, price figures, numerals) and Hanken Grotesk 400, 500 and
   700 (body, name rows, link rows). No fixed-pitch face anywhere in
   the stack.

   Palette law (spec 19, the Greenrow register per amendment 19/3
   part C): the nine color tokens are the only color literals in the
   sheet (eight hex bytes + the scrim triplet); light text rides the
   base token through the var (the token block holds the sheet's
   single light-byte literal); dark washes, scrims, and shadows ride
   the one neutral scrim triplet and are never accent tinted; overlay
   text rides the base token at full opacity; leaf and sage paint
   fills and borders only, they never carry text. Text on the leaf
   fill rides the ink-deep byte (6.78:1 over the leaf; the raw ink
   pair passes at 5.91 but the on-fill byte stays by device), which is
   why pills and the value band read ink-deep. No zero-value dark hex
   anywhere (the dark fields ride the ink token).

   Media conditions, the only two in this file besides the
   reduced-motion pair: 48rem (the chrome flip, the bullet-bar grown
   size) and 56rem (the text/media split pair, the stats quartet, the
   contact split, the footer trio). Mobile-first, min-width queries
   only; the machinery's own 768 breakpoint never appears.

   Visibility law: the hidden-attribute blanket companion below (plus
   one explicit companion per element class whose own rule sets
   display: flex or grid) keeps any [hidden] attribute winning the
   paint at every width. The reduced-motion block at the end covers
   the whole page plus every state the script can reach. The locked
   section vocabulary the plan pins is the only structural class set:
   no repeatable boxed surface shapes appear anywhere. */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/demos/coffee-shop/fonts/bricolage-latin-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/demos/coffee-shop/fonts/bricolage-latin-800.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("/demos/coffee-shop/fonts/hanken-latin-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("/demos/coffee-shop/fonts/hanken-latin-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("/demos/coffee-shop/fonts/hanken-latin-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* The Greenrow tokens (part C's verbatim block): the eight
   spec-locked bytes + the scrim triplet in its rgba form. */
#demo-main {
  --mrd-base: #f2f1e8;   /* oat porcelain page base; ALSO the light text byte: text on ink/scrim rides this var (the sheet's single light literal) */
  --mrd-ink: #262e20;    /* deep spruce ink: headings, body, nav, price names, quote and statement faces; the dark fields' fill (stats, footer, hero backdrop); pill and chip borders */
  --mrd-ink-deep: #1c2317; /* the on-fill text byte: pill text + the leaf value band's text */
  --mrd-leaf: #95b177;   /* fills only: pills, bullet bars, footer dots, counter chips, case buttons, active dot fill, the value band fill */
  --mrd-sage: #c6d2a4;   /* the sage flat band fill only */
  --mrd-hint: #5b614b;   /* hint lines + menu row descriptions */
  --mrd-tint: #e4e7d6;   /* the carousel band (used once) + the link/nav hover chip fill */
  --mrd-line: #d9dcc8;   /* hairlines: dividers, leaders, statement underline, topbar border */
  --mrd-scrim: 30, 33, 24; /* the dark neutral spruce-warm triplet: hero stops + washes + shadows; NEVER accent tinted */
  color-scheme: light;
  background: var(--mrd-base);
}
.mrd-page {
  --mrd-clear: var(--demo-notice-space);   /* consumed at EXACTLY ONE var() site (.mrd-topbar padding-top) */
  --mrd-display: "Bricolage Grotesque", sans-serif;
  --mrd-text: "Hanken Grotesk", sans-serif;
  --mrd-shell: 71.25rem;
  --mrd-fs-hero: clamp(2.625rem, 1.2rem + 6.4vw, 4.625rem);
  --mrd-fs-banner: clamp(1.9375rem, 1rem + 4.2vw, 3rem);
  --mrd-fs-section: clamp(1.625rem, 1.05rem + 2.4vw, 2.375rem);
  --mrd-fs-statement: clamp(2rem, 1.05rem + 3.8vw, 2.75rem);
  --mrd-fs-stat: clamp(2.25rem, 1rem + 5vw, 3.75rem);
  --mrd-fs-price: clamp(1.75rem, 1.4rem + 1.2vw, 2.125rem);
  --mrd-fs-counter: clamp(1.875rem, 1rem + 3vw, 2.5rem);
  --mrd-fs-flavor: clamp(1.375rem, 1rem + 1.8vw, 1.75rem);
  --mrd-band-inner: clamp(3rem, 8vw, 5rem);
  --mrd-section: clamp(3.25rem, 8.5vw, 5.5rem);
  --mrd-gap: clamp(2rem, 4.5vw, 3.5rem);
  --mrd-radius: 0.875rem;
  --mrd-shadow: 0 0.75rem 1.5rem rgba(var(--mrd-scrim), 0.28);
  font-family: var(--mrd-text);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--mrd-ink);
}

/* The demo-owned groups: border-box, links, the hidden blanket, and
   the focus rings (every interactive element, dark surfaces inverted). */
.mrd-page,
.mrd-page *,
.mrd-page *::before,
.mrd-page *::after {
  box-sizing: border-box;
}
.mrd-page a {
  color: inherit;
  text-decoration: none;
}
.mrd-page a:not([class]) {
  color: var(--mrd-ink);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.1875rem;
}
.mrd-page [hidden] {
  display: none !important;
}
.mrd-page a:focus-visible,
.mrd-page button:focus-visible {
  outline: 3px solid var(--mrd-ink-deep);
  outline-offset: 0.1875rem;
}
.mrd-page :is(.mrd-stats, .mrd-footer) a:focus-visible {
  outline-color: var(--mrd-base);
}

/* Uppercase 800 display headings; sizes ride the scale tokens
   contextually (hero on the photo, statement, section, banner, stat,
   price, counter, flavor). */
.mrd-page :is(h1, h2, h3, h4) {
  margin: 0 0 0.75rem;
  font-family: var(--mrd-display);
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1.1;
  color: var(--mrd-ink);
}
.mrd-page h1 {
  font-size: var(--mrd-fs-statement);
}
.mrd-page h2 {
  font-size: var(--mrd-fs-section);
}
.mrd-page p {
  margin: 0 0 1rem;
}

/* Text voices: the link pair (light surfaces, D.3; the device rules
   ride above the belt at two-class specificity), the hint voice, and
   the pull-quote voice. */
.mrd-page .mrd-link {
  color: var(--mrd-ink);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.1875rem;
  border-radius: 0.375rem;
}
.mrd-page .mrd-link:hover {
  color: var(--mrd-ink-deep);
  background: var(--mrd-tint);
}
/* Inline band and row links get the 44px touch floor (amendment 19/3
   part D, FIX 7); the hero, contact, and footer treatments carry
   their own blocks below. Mid-sentence prose anchors stay inline by
   the documented surface exception (the ledger carries the reason). */
.mrd-band .mrd-link,
.mrd-row .mrd-link {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
}
.mrd-hint {
  color: var(--mrd-hint);
  font-size: 0.9375rem;
  line-height: 1.55;
}
.mrd-quote {
  margin: 0;
  font-family: var(--mrd-display);
  font-weight: 700;
  font-size: clamp(1.375rem, 1rem + 2vw, 1.75rem);
  line-height: 1.3;
  color: var(--mrd-ink);
}

/* The shell, the section rhythm, and the statement band (plan D.4). */
.mrd-shell {
  max-width: var(--mrd-shell);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}
.mrd-section {
  padding-block: var(--mrd-section);
}
.mrd-section-head {
  margin-bottom: clamp(1.75rem, 4vw, 2.5rem);
}
.mrd-statement {
  padding-block: clamp(3rem, 9vw, 5.25rem);
  border-bottom: 1px solid var(--mrd-line);
}
.mrd-statement :is(h1, h2) {
  margin: 0;
  font-size: var(--mrd-fs-statement);
}

/* The bullet-bar device (plan D.3, the exact pair: 13x10 at base,
   38x19 from 48rem; grows on the stats band centered over its figure). */
.mrd-bullet-bar {
  display: block;
  width: 0.8125rem;
  height: 0.625rem;
  margin: 0 0 0.625rem;
  background: var(--mrd-leaf);
  border-radius: 0;
}
.mrd-bullet-bar--center {
  margin-inline: auto;
}
@media (min-width: 48rem) {
  .mrd-bullet-bar {
    width: 2.375rem;
    height: 1.1875rem;
    margin-bottom: 0.75rem;
  }
}

/* The chrome: topbar, brand wordmark, nav rows, the disclosure panel
   (plan A.3/A.4). The topbar is static and pays the fixed demo notice
   through the one bridge site. The panel is a full-width absolute
   disclosure under the topbar; [hidden] always wins the paint. */
.mrd-topbar {
  position: relative;
  padding-top: var(--mrd-clear);
  background: var(--mrd-base);
  border-bottom: 1px solid var(--mrd-line);
}
.mrd-topbar-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0 1rem;
  /* The 64px floor gives the 48px pill an even 8px breathing both
     sides (never edge-to-edge); align-items center keeps the
     wordmark and the nav links centered with it. */
  min-height: 4rem;
}
.mrd-topbar-row[hidden] {
  display: none !important;
}
.mrd-brand {
  display: inline-flex;
  flex-direction: column;
  margin-right: auto;
  font-family: var(--mrd-display);
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1.15;
  color: var(--mrd-ink);
}
.mrd-mark {
  font-size: 0.875rem;
  letter-spacing: 0.22em;
}
.mrd-mark-sub {
  font-size: 1.5rem;
  letter-spacing: 0.12em;
}
.mrd-nav {
  display: flex;
  align-items: center;
}
.mrd-nav-links {
  display: none;
  margin: 0;
  padding: 0;
  list-style: none;
}
.mrd-nav-links[hidden] {
  display: none !important;
}
.mrd-nav-link,
.mrd-nav-links a {
  display: flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0.5rem 0.875rem;
  font-weight: 700;
  font-size: 0.9375rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--mrd-ink);
  border-radius: 0.375rem;
}
.mrd-nav-link:hover,
.mrd-nav-links a:hover {
  background: var(--mrd-tint);
}
.mrd-nav-link[aria-current="page"]::before,
.mrd-nav-links a[aria-current="page"]::before,
.mrd-nav-panel a[aria-current="page"]::before {
  content: "";
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  margin-right: 0.375rem;
  background: var(--mrd-leaf);
  border-radius: 999px;
}
.mrd-nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--mrd-ink);
  cursor: pointer;
}
.mrd-nav-toggle[hidden] {
  display: none !important;
}
.mrd-nav-panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 10;
  padding: 0.5rem clamp(1.25rem, 4vw, 2.5rem) 1rem;
  background: var(--mrd-base);
  border-top: 1px solid var(--mrd-line);
  box-shadow: var(--mrd-shadow);
}
.mrd-nav-panel[hidden] {
  display: none !important;
}
.mrd-nav-panel a {
  display: flex;
  align-items: center;
  min-height: 3rem;
  padding: 0.5rem 0.375rem;
  font-weight: 700;
  font-size: 0.9375rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--mrd-ink);
}
.mrd-nav-panel a:hover {
  background: var(--mrd-tint);
}
.mrd-nav-panel .mrd-pill {
  display: flex;
  margin-top: 0.75rem;
}

@media (min-width: 48rem) {
  .mrd-nav-links {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-right: 0.75rem;
  }
  .mrd-nav-toggle {
    display: none;
  }
  .mrd-nav-panel {
    display: none;
  }
}

/* Pills (plan D.3): the leaf fill, the 2px ink boundary device, the
   ink-deep text, 48px tall. The pinned line-height + block padding
   hold the intrinsic border-box (16px x 1.2 line + 2 x 10px blocks +
   4px borders = 43.2px) under the floor at every rendering site
   (topbar, panel row, bands): min-height is the paint, never the
   inherited 1.6 prose line. The label rides white-space: nowrap: the
   48px floor assumes ONE line (the pre-R6 mobile topbar wrapped
   CALL / AHEAD into a squeezed two-line pill; that paint never
   returns). The device rule rides a two-class specificity that beats
   the belt; later overrides (the nav panel's full-width row, the band
   margin) tie it and win by order. Hover is a lift: no darker leaf
   byte exists, so the fill never moves. */
.mrd-page .mrd-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: 0.625rem 1.75rem;
  border-radius: 999px;
  background: var(--mrd-leaf);
  color: var(--mrd-ink-deep);
  border: 2px solid var(--mrd-ink);
  font-family: var(--mrd-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 1rem;
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
}
.mrd-pill[hidden] {
  display: none !important;
}
.mrd-pill:hover {
  transform: translateY(-0.125rem);
  box-shadow: var(--mrd-shadow);
}
.mrd-pill:active {
  transform: none;
}
.mrd-pill:focus-visible {
  outline-color: var(--mrd-ink-deep);
}

/* Hero: photo cover, full-cover scrim, full-cover overlay layer,
   content (the text-over-image contract: the overlay sits above the
   scrim and below the content; the scrim is the neutral triple with
   stops 0, 0.7 at 62%, 0.88 at 100%; copy rides the bottom zone at
   the 0.7 floor or below). The hero box carries the photo-ratio
   height floor (the photo's 1980:1320 ratio as a viewport-relative
   clamp, capped at the widest screens) so the absolute cover image
   and the bottom-anchored copy stack always fit: the copy can never
   overflow upward over the chrome. */
.mrd-hero {
  position: relative;
  overflow: hidden;
  min-height: clamp(22rem, 66.6667vw, 62.5rem);
  background: var(--mrd-ink);
}
.mrd-hero img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mrd-hero .mrd-hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(var(--mrd-scrim), 0) 0%,
    rgba(var(--mrd-scrim), 0.7) 62%,
    rgba(var(--mrd-scrim), 0.88) 100%
  );
}
.mrd-hero .mrd-hero-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
}
.mrd-hero-overlay[hidden] {
  display: none !important;
}
.mrd-hero .mrd-hero-inner {
  max-width: var(--mrd-shell);
  width: 100%;
  margin-inline: auto;
  padding-block: 1rem clamp(2rem, 6vw, 3.75rem);
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}
.mrd-hero h1 {
  font-size: var(--mrd-fs-hero);
}
.mrd-hero :is(h1, .mrd-hero-copy, .mrd-hero-link) {
  color: var(--mrd-base);
}
.mrd-hero :is(p:not(.mrd-hint), .mrd-hero-copy) {
  margin: 0 0 1.5rem;
  max-width: 36rem;
  font-size: 1.0625rem;
}
.mrd-hero .mrd-hero-link {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: var(--mrd-base);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.1875rem;
  border-radius: 0.375rem;
}
.mrd-hero .mrd-hero-link:hover {
  color: var(--mrd-ink-deep);
  background: var(--mrd-tint);
}

/* Flat bands, full bleed: the sage flat band and the leaf value band
   (the banner title device with the upright 800 face lives on exactly
   the two flat band sites; the carousel band is the tint). */
.mrd-band {
  position: relative;
}
.mrd-band-inner {
  max-width: 46rem;
  margin-inline: auto;
  padding-block: var(--mrd-band-inner);
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
  text-align: center;
}
.mrd-band .mrd-band-title {
  margin: 0 0 1rem;
  font-family: var(--mrd-display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: var(--mrd-fs-banner);
  line-height: 1.08;
  letter-spacing: 0.01em;
  color: var(--mrd-ink);
}
.mrd-band--sage {
  background: var(--mrd-sage);
  color: var(--mrd-ink);
}
.mrd-band--leaf {
  background: var(--mrd-leaf);
  color: var(--mrd-ink-deep);
}
.mrd-band--tint {
  background: var(--mrd-tint);
  color: var(--mrd-ink);
  padding-block: var(--mrd-band-inner);
}
.mrd-band--leaf :is(h1, h2, h3, .mrd-band-title) {
  color: var(--mrd-ink-deep);
}
/* The in-band link: the band re-points the link byte to ink-deep, the
   shared on-fill byte by device (6.78:1 over the leaf; the raw ink
   pair passes too), while the device shape and the hover chip stay. */
.mrd-band--leaf .mrd-link {
  color: var(--mrd-ink-deep);
}
.mrd-band .mrd-pill {
  margin-top: 1.5rem;
}

/* Text/media rows (plan D.4): one column at base, the 1fr 1fr split
   from 56rem; the flip variant swaps to text first, media second; the
   media images keep the natural aspect and the rounded imagery byte. */
.mrd-row {
  display: grid;
  gap: var(--mrd-gap);
  align-items: center;
}
.mrd-row[hidden] {
  display: none !important;
}
.mrd-row-media {
  min-height: 0;
}
.mrd-row-media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--mrd-radius);
}
.mrd-row--flip > :not(.mrd-row-media) {
  display: block;
}
@media (min-width: 56rem) {
  .mrd-row {
    grid-template-columns: 1fr 1fr;
  }
  .mrd-row--flip {
    grid-template-areas: "text media";
  }
  .mrd-row--flip > :not(.mrd-row-media) {
    grid-area: text;
  }
  .mrd-row--flip > .mrd-row-media {
    grid-area: media;
  }
}

/* The stats band: the ink flat, two columns at base, four from 56rem;
   separators ride the scrim triplet. */
.mrd-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--mrd-ink);
  color: var(--mrd-base);
}
.mrd-stats[hidden] {
  display: none !important;
}
.mrd-stat {
  padding-block: clamp(2rem, 4vw, 3rem);
  padding-inline: 1.5rem;
  text-align: center;
}
.mrd-stat:nth-child(2n) {
  border-left: 1px solid rgba(var(--mrd-scrim), 0.6);
}
.mrd-stat:nth-child(n+3) {
  border-top: 1px solid rgba(var(--mrd-scrim), 0.6);
}
.mrd-stat .mrd-bullet-bar {
  margin-inline: auto;
}
.mrd-stat strong {
  display: block;
  font-family: var(--mrd-display);
  font-weight: 800;
  font-size: var(--mrd-fs-stat);
  line-height: 1;
  color: var(--mrd-base);
}
.mrd-stat p {
  margin: 0.5rem 0 0;
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mrd-base);
}
@media (min-width: 56rem) {
  .mrd-stats {
    grid-template-columns: repeat(4, 1fr);
  }
  .mrd-stat:nth-child(2n) {
    border-top: 0;
    border-left: 1px solid rgba(var(--mrd-scrim), 0.6);
  }
  .mrd-stat:nth-child(n+3) {
    border-top: 0;
    border-left: 1px solid rgba(var(--mrd-scrim), 0.6);
  }
}

/* Menu categories and the price rows (plan D.3): hairline-separated
   rows, the dotted leader, the oversized display price figure. */
.mrd-category + .mrd-category {
  margin-top: 2.75rem;
}
.mrd-category h3 {
  margin: 0 0 1rem;
  font-size: var(--mrd-fs-counter);
}
.mrd-price-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.75rem;
  max-width: 46rem;
  padding-block: 1.125rem;
}
.mrd-price-row[hidden] {
  display: none !important;
}
.mrd-price-row + .mrd-price-row {
  border-top: 1px solid var(--mrd-line);
}
.mrd-price-name {
  max-width: 60%;
  font-weight: 700;
  font-size: 1.0625rem;
  text-transform: uppercase;
  color: var(--mrd-ink);
}
.mrd-price-desc {
  display: block;
  margin-top: 0.25rem;
  font-weight: 400;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--mrd-hint);
}
.mrd-price-lead {
  display: none;
  flex-grow: 1;
  align-self: flex-end;
  min-width: 1.5rem;
  margin-bottom: 0.5rem;
  border-bottom: 2px dotted var(--mrd-line);
}
.mrd-price-fig {
  font-family: var(--mrd-display);
  font-weight: 800;
  font-size: var(--mrd-fs-price);
  white-space: nowrap;
  color: var(--mrd-ink);
}
/* The dotted leader retires below 48rem (the wrapped name column
   stranded 1.5rem dotted stubs on mobile); it restores on the
   single-line desktop rows. */
@media (min-width: 48rem) {
  .mrd-price-lead {
    display: block;
  }
}

/* The oversized ordered-list counters (plan D.3): the leaf numeral
   chip is a ::before on the step, one size at every width. The row
   separator paints the text column only (the ::after inset at the
   chip's 5.5rem column) so it never crosses the 4rem chip; the row
   floor is 6.5rem so a one-line step keeps the chip clear of the next
   separator. */
.mrd-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: mrd;
}
.mrd-step {
  position: relative;
  min-height: 6.5rem;
  padding: 1.5rem 0 1.5rem 5.5rem;
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--mrd-ink);
}
.mrd-step + .mrd-step {
  border-top: 0;
}
.mrd-step + .mrd-step::after {
  content: "";
  position: absolute;
  top: 0;
  left: 5.5rem;
  right: 0;
  height: 1px;
  background: var(--mrd-line);
}
.mrd-step::before {
  content: counter(mrd);
  counter-increment: mrd;
  position: absolute;
  left: 0;
  top: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  border-radius: 999px;
  background: var(--mrd-leaf);
  border: 2px solid var(--mrd-ink);
  color: var(--mrd-ink-deep);
  font-family: var(--mrd-display);
  font-weight: 800;
  font-size: 1.75rem;
  line-height: 1;
}

/* The case carousel (plan E.3, verbatim): the three render states ride
   the js-free stacked list, the reduced-motion static list, and the
   live sliding viewport; the band it sits in is the pale tint. */
.mrd-case-viewport {
  position: relative;
}
.mrd-case-track {
  display: block;
  list-style: none;
  margin: 0;
  padding: 0;
}
.mrd-case-track[hidden] {
  display: none !important;
}
.mrd-case-slide {
  padding: 0 0 2.5rem;
}
.mrd-case-controls {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.5rem;
}
.mrd-case-controls[hidden] {
  display: none !important;
}
.mrd-case-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 999px;
  background: var(--mrd-leaf);
  border: 2px solid var(--mrd-ink);
  color: var(--mrd-ink-deep);
  cursor: pointer;
}
.mrd-case-btn[hidden] {
  display: none !important;
}
.mrd-case-btn:hover {
  box-shadow: var(--mrd-shadow);
  transform: translateY(-0.125rem);
}
.mrd-case-btn[aria-disabled="true"] {
  opacity: 0.4;
  cursor: default;
  transform: none;
  box-shadow: none;
}
.mrd-case-dot {
  width: 2.75rem;
  height: 2.75rem;
  border: 0;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.mrd-case-dot[hidden] {
  display: none !important;
}
.mrd-case-dot::before {
  content: "";
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 999px;
  border: 2px solid var(--mrd-ink);
  background: transparent;
  transition: background 160ms ease;
}
.mrd-case-dot[aria-current="true"]::before {
  background: var(--mrd-leaf);
}
.mrd-case-dot:hover::before {
  background: rgba(var(--mrd-scrim), 0.10);
}
.mrd-case-dot[aria-current="true"]:hover::before {
  background: var(--mrd-leaf);
}
/* THE LIVE STATE */
.mrd-case-live .mrd-case-viewport {
  overflow: hidden;
}
.mrd-case-live .mrd-case-track {
  display: flex;
  transform: translateX(calc(var(--mrd-i, 0) * -100%));
  transition: transform 280ms ease;
}
.mrd-case-live .mrd-case-slide {
  flex: 0 0 100%;
  padding: 0;
}
@media (prefers-reduced-motion: reduce) {
  .mrd-case-live .mrd-case-track {
    transition: none;
  }
}

/* The carousel slide anatomy (plan E.3): flavor, price, line. */
.mrd-case-flavor {
  margin: 0 0 0.25rem;
  font-family: var(--mrd-display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: var(--mrd-fs-flavor);
  color: var(--mrd-ink);
}
.mrd-case-price {
  margin: 0 0 0.5rem;
  font-family: var(--mrd-display);
  font-weight: 800;
  font-size: var(--mrd-fs-price);
  color: var(--mrd-ink);
}
.mrd-case-line {
  margin: 0;
  max-width: 30rem;
  font-size: 1.0625rem;
  color: var(--mrd-ink);
}

/* The footer (plan A.5): the ink flat, the light-text uppercase 700
   link rows with the leaf bullet dots, the leaf marker-chip hover,
   the three columns, the copyright rule. */
.mrd-footer {
  padding: clamp(2.75rem, 6vw, 4rem) 0 2rem;
  background: var(--mrd-ink);
  color: var(--mrd-base);
}
.mrd-footer-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.5rem;
  margin: 0 0 2rem;
  padding: 0;
  list-style: none;
}
.mrd-footer-list[hidden] {
  display: none !important;
}
.mrd-footer-nav li {
  display: flex;
  align-items: center;
  min-height: 2.75rem;
}
.mrd-footer-nav li::before {
  content: "";
  width: 0.375rem;
  height: 0.375rem;
  flex: 0 0 auto;
  background: var(--mrd-leaf);
  border-radius: 999px;
  margin-right: 0.5rem;
}
.mrd-page .mrd-footer-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0.375rem 0.75rem;
  border-radius: 0.375rem;
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--mrd-base);
  text-decoration: none;
}
.mrd-footer-nav a:hover {
  background: var(--mrd-leaf);
  color: var(--mrd-ink-deep);
}
.mrd-footer-grid {
  display: grid;
  gap: 2rem;
}
.mrd-footer-grid[hidden] {
  display: none !important;
}
.mrd-footer-grid {
  margin-top: 2rem;
}
.mrd-footer h3 {
  margin: 0 0 0.75rem;
  font-size: 0.875rem;
  letter-spacing: 0.06em;
  color: var(--mrd-base);
}
.mrd-footer-col p {
  margin: 0 0 0.5rem;
  font-size: 0.9375rem;
  color: var(--mrd-base);
}
.mrd-page .mrd-footer-col a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: var(--mrd-base);
  text-decoration: none;
}
.mrd-footer-col a:hover {
  text-decoration: underline;
}
.mrd-footer .mrd-brand {
  color: var(--mrd-base);
  margin-bottom: 0.75rem;
}
.mrd-footer-copy {
  margin: 2.5rem 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(var(--mrd-scrim), 0.6);
  font-size: 0.875rem;
  color: var(--mrd-base);
}
@media (min-width: 56rem) {
  .mrd-footer-grid {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

/* The visit/contact tail (plan D.4): the hairline top, the section
   rhythm on the bordered strip, the split pair from 56rem; col links
   underline like prose on the light field and carry the 44px touch
   floor. MID-SENTENCE PROSE EXCEPTION (documented): anchors that live
   inside sentence text stay inline for line-rhythm fidelity; the
   strip's and footer's own column links take the inline-flex floor. */
.mrd-contact {
  border-top: 1px solid var(--mrd-line);
  padding-block: var(--mrd-section);
}
.mrd-contact-inner {
  display: grid;
  gap: var(--mrd-gap);
}
.mrd-contact-inner[hidden] {
  display: none !important;
}
@media (min-width: 56rem) {
  .mrd-contact-inner {
    grid-template-columns: 1fr 1fr;
  }
}
.mrd-contact-col p {
  margin: 0 0 0.5rem;
}
.mrd-contact-col a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: var(--mrd-ink);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.1875rem;
}
.mrd-contact-col a:hover {
  color: var(--mrd-ink-deep);
}

/* The FAQ row rhythm, the owner and crew rows, and find-us figures:
   hairline-separated rows, rounded imagery, no boxed surfaces. */
.mrd-faq-row + .mrd-faq-row {
  border-top: 1px solid var(--mrd-line);
}
.mrd-faq-row {
  padding-block: 1.25rem;
}
.mrd-faq-row h3 {
  margin: 0 0 0.5rem;
  font-size: 1.0625rem;
}
/* The summary device (the four native disclosure rows on Visit): the
   summary row is the 44px touch target in the uppercase 700 1.0625rem
   ink voice (uppercase, ink, and the 1.0625rem face ride the heading
   group and the settled h3 rule above; this device completes the 700
    weight and zeroes the margin inside the flex row), the tint
    chip on hover, the native marker suppressed for the inline chevron
   that turns 0.5turn when the row opens, the shared focus ring, and
   the body p at the same 1.0625rem ink voice with zero margins so the
   settled 1.25rem row padding carries the open rhythm. */
.mrd-faq-row summary {
  display: flex;
  align-items: center;
  min-height: 44px;
  border-radius: 0.375rem;
  list-style: none;
  cursor: pointer;
}
.mrd-faq-row summary::-webkit-details-marker {
  display: none;
}
.mrd-faq-row summary:hover {
  background: var(--mrd-tint);
}
.mrd-faq-row summary:focus-visible {
  outline: 3px solid var(--mrd-ink-deep);
  outline-offset: 0.1875rem;
}
.mrd-faq-row summary h3 {
  margin: 0;
  font-weight: 700;
}
.mrd-faq-row summary svg {
  margin-left: 0.375rem;
  vertical-align: middle;
}
.mrd-faq-row[open] summary svg {
  transform: rotate(0.5turn);
}
.mrd-faq-row p {
  margin: 0;
  font-size: 1.0625rem;
}
.mrd-owner img,
.mrd-crew img,
.mrd-where img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--mrd-radius);
}

/* The reduced-motion pair: the global blanket over the page plus the
   track rule above keep every state the script can touch static. */
@media (prefers-reduced-motion: reduce) {
  .mrd-page *,
  .mrd-page *::before,
  .mrd-page *::after {
    transition-duration: 0s;
    animation: none;
  }
}