/* Alder & Rye demo stylesheet (spec 14, v2-demo-restaurant, the round
   14/2 redesign): the "Prime and Copper" system. Standalone, scoped css
   for this demo alone: every selector is .rye-* prefixed. The one
   documented machine-scope exception is the token block on #demo-main
   (the demo's own serving scope: the one sanctioned machine-selector
   root, which also repaints the serving surface so the machinery base
   body paint and its cast never show through this demo); no .demo-base
   descendant resets are needed, fonts and colors ride .rye- rules
   directly.

   Locked tokens, type ramp, compositions: the redesign plan set
   (2026-10-11-spec14-redesign-plan-1-palette-fonts.md, -2-chrome-home.md,
   -3-pages.md, -4-images-tests.md). Machinery contract (demo-base.css,
   demo-notice.css, layouts.demo) is never redefined here:
   --demo-notice-space is consumed at exactly two sites in this file
   (the sticky chrome clearance padding below, plus the
   --rye-chrome-stick token definition that carries the same value to
   the rail stick line, the anchor scroll margins, and the derived
   utility clearance). No stylesheet imports anywhere; the
   three font-face rules live ONLY in this file, self-hosted beside
   their OFL licenses under /demos/restaurant/fonts/, font-display
   swap. No fixed-pitch face in this stack. No boxed template surfaces:
    compositions are full-width bands, offset scrim panels, crossing
    panels, the pinned two-tile exception, the widget panel, an
    asymmetric gallery mosaic, statement heroes, a deep footer, and
    disclosure rows only.

   Chrome mechanics note (round 14/3): the utility tier is a static
   bar that scrolls away; the ticket strip is the sticky tier, pinned
   from the page top with the clearance padding inside it, so the
   stuck chrome is exactly the notice-space clearance plus the 56px
   strip. The course rail parks under the strip via the
   --rye-chrome-stick token.

   Hero mechanics note: the hero band keeps the text-over-image
   contract: the eager img paints the area, the scrim sits absolutely
   over it (neutral-deep ink stops only, written as literal rgba stops
   of the --rye-scrim-triplet triplet), and the offset scrim panel
   carries the content above both layers, inside the panel, all
   full-opacity bone text. */

@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("/demos/restaurant/fonts/fraunces-latin-opsz-wght.woff2") format("woff2");
}
@font-face {
  font-family: "Fraunces";
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url("/demos/restaurant/fonts/fraunces-latin-opsz-wght-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Mulish";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("/demos/restaurant/fonts/mulish-latin-wght.woff2") format("woff2");
}

/* Prime and Copper tokens (the plan's block; the single sanctioned
   machine-scope root block on this file; it repaints the serving
   surface and names the demo's own tokens; it never redefines a
   machinery variable). A deep charcoal-brown ink base with a warm
   cast (red channel the maximum, blue the minimum), a copper accent
   family at hue 23 to 25 degrees, bone-parchment headings, warm
   smoke-grey secondary text. The accent pair is hue-distinct from the
   machinery banner's accent (hue 44) and matches none of the banned
   family needles; no accent-tinted scrim ever ships (scrims carry the
   --rye-scrim-triplet ink triplet only, shipped as the literal stops
   on the hero scrim). */
#demo-main {
  --rye-ink: #251a12;             /* warm charcoal-brown page + chrome base */
  --rye-hearth: #322417;          /* raised band tint: alternating bands, notes band */
  --rye-hearth-deep: #180f0a;     /* deepest surface: footer, rail strip, reservation band, disclosure */
  --rye-bone: #f3ead9;            /* headings, display, numerals, hero overlay text, button-adjacent display */
  --rye-smoke: #b2a08e;           /* body copy, captions on solid surfaces */
  --rye-smoke-deep: #9a8672;      /* footer furniture, meta lines */
  --rye-copper: #b06a3c;          /* accent fills: CTA button, rail markers, step rules, focus ring */
  --rye-copper-bright: #dd9660;   /* accent text: links, overline labels, V tags, prices, active rail link */
  --rye-btn-ink: #140a04;         /* text + icon ink on the copper buttons */
  --rye-tint: rgba(176, 106, 60, 0.14);        /* copper washes: rail active chip, hover washes; NEVER a scrim */
  --rye-tint-bone: rgba(243, 234, 217, 0.05);  /* row hover wash on ink */
  --rye-hairline: rgba(243, 234, 217, 0.13);    /* row + band dividers */
  --rye-hairline-strong: rgba(243, 234, 217, 0.30); /* chip borders, on-photo overline rule */
  --rye-scrim-triplet: 24, 15, 10; /* the deepest ink triplet; the hero scrim ships its two literal rgba stops */
  --rye-strip-h: 44px;             /* the utility strip height */
  --rye-bar-h: 72px;               /* the main nav bar height */
  --rye-chrome-stick: calc(var(--demo-notice-space, 0px) + 56px); /* the rail stick line + scroll margins; clears the 56px sticky ticket strip */
  --rye-rail-h: 52px;              /* the rail row height, both skins */
  --rye-paper: var(--rye-bone);    /* the parchment surface: crossing panels, captions, the widget */
  --rye-veil: rgba(24, 15, 10, 0.35);           /* photo base scrim: neutral dark, never accent-tinted */
  --rye-panel-veil: rgba(24, 15, 10, 0.85);     /* the hero panel body over its photo */
  --rye-cell-border: rgba(243, 234, 217, 0.16); /* the ticket strip cells and outlined CTAs (bone at 16 percent) */
  --rye-overlap-strip: 32px;       /* the hero band vs the ticket strip overlap (tablet and desktop) */
  --rye-font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --rye-font-body: "Mulish", system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--rye-ink);
  color: var(--rye-smoke);
}

/* Base rhythm: shell + section padding, mobile-first. The >= 640px,
   768px, 880px, 900px and 1020px step-ups live in the blocks near the
   end. */
.rye-shell {
  width: 100%;
  max-width: 68rem;
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 40px);
  box-sizing: border-box;
  font-family: var(--rye-font-body);
  font-size: 1rem;
  line-height: 1.65;
}

/* Box discipline: the machinery stylesheets ship no global reset
   (content-box is the browser default), so the demo carries its own
   border-box group like the machinery skip link does: min-heights stay
   honest (a 44px target never becomes 44 plus padding). */
.rye-shell,
.rye-brand,
.rye-brand-mark,
.rye-brand-text,
.rye-chrome,
.rye-utility,
.rye-utility-bar,
.rye-utility-phone,
.rye-utility-hours,
.rye-navbar,
.rye-navbar-bar,
.rye-nav-group,
.rye-nav-toggle,
.rye-nav-bars,
.rye-nav-toggle-label,
.rye-nav-hours,
.rye-nav-links,
.rye-nav-links a,
.rye-nav-links li,
.rye-btn,
.rye-link,
.rye-hero,
.rye-hero__img,
.rye-hero__scrim,
.rye-overline,
.rye-section,
.rye-statement,
.rye-statement-lead,
.rye-features,
.rye-suppliers,
.rye-suppliers li,
.rye-quote,
.rye-quote-figure,
.rye-quote-img,
.rye-quote-body,
.rye-quote-name,
.rye-quote-role,
.rye-stats,
.rye-stats-grid,
.rye-stat,
.rye-stat-number,
.rye-stat-label,
.rye-contact,
.rye-contact-lines,
.rye-contact-line,
.rye-contact-line a,
.rye-footer,
.rye-footer-grid,
.rye-footer-col,
.rye-footer-head,
.rye-footer-copy,
.rye-pagehero,
.rye-lead,
.rye-menu-body,
.rye-rail-wrap,
.rye-rail-inner,
.rye-rail-inner a,
.rye-menu-courses,
.rye-course,
.rye-course-split,
.rye-course-media,
.rye-course-copy,
.rye-course-note,
.rye-media-figure,
.rye-media-figure img,
.rye-dish,
.rye-dish-name,
.rye-dish-line,
.rye-dish-price,
.rye-steps,
.rye-step,
.rye-step-number,
.rye-step-text,
.rye-ready-list li,
.rye-faq,
.rye-faq-q,
.rye-faq-mark,
.rye-faq-a,
.rye-band-img,
.rye-mosaic,
.rye-mosaic__set,
.rye-mosaic__row,
/* P4b + U2 (R5): the mosaic captions and the widget family join the
   group the same way (content-box + percentage widths + padding pushed
   both outside their panels). The group keeps its two box-sizing
   declaration blocks; only the selector list grows. */
.rye-caption,
.rye-widget,
.rye-widget__title,
.rye-widget__cols,
.rye-widget__col,
.rye-widget__label,
.rye-widget__line,
.rye-widget__foot,
.rye-widget__foot-line,
.rye-widget__cta,
.rye-notes {
  box-sizing: border-box;
}

/* Prose defaults inside the demo shells. */
.rye-shell p { margin: 0 0 1.1em; }
.rye-shell ul,
.rye-shell ol { margin: 0 0 1.1em; }

/* Body link overrides (the machinery sheets paint no anchors; without
   these the UA link paint would bleed into the demo prose). Prose,
   reservation-line and contact anchors carry the accent text register;
   component rules below handle every other anchor. */
.rye-shell p a,
.rye-contact-line a {
  color: var(--rye-copper-bright);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.rye-shell p a:hover,
.rye-contact-line a:hover {
  color: var(--rye-bone);
  text-decoration-color: var(--rye-bone);
}

/* Type ramp. */
.rye-hero h1,
.rye-pagehero h1 {
  font-family: var(--rye-font-display);
  font-weight: 560;
  font-size: clamp(2.6rem, 6vw, 4.3rem);
  line-height: 1.04;
  color: var(--rye-bone);
  margin: 0;
}
.rye-pagehero h1 { margin: 0 0 14px; }
.rye-section h2,
.rye-course h2 {
  font-family: var(--rye-font-display);
  font-weight: 520;
  font-size: clamp(1.9rem, 3.4vw, 2.7rem);
  line-height: 1.12;
  color: var(--rye-bone);
  margin: 0 0 16px;
}
.rye-step-text h3 {
  font-family: var(--rye-font-display);
  font-weight: 520;
  font-size: clamp(1.375rem, 2.4vw, 1.75rem);
  line-height: 1.25;
  color: var(--rye-bone);
  margin: 0 0 10px;
}
.rye-lead {
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--rye-bone);
}
.rye-statement-lead {
  font-family: var(--rye-font-display);
  font-weight: 480;
  font-size: clamp(1.5rem, 2.9vw, 2.15rem);
  line-height: 1.3;
  color: var(--rye-bone);
  margin: 0 0 1.1em;
}

/* The overline (the Prime and Copper metadata voice): a letterspaced
   uppercase label, copper on solid surfaces, bone on photos, wrapped
   in a hairline-strong rule where it heads a band on its own. Split
   rows, feature rows, courses and the notes band render it bare and
   left-aligned (the notes band keeps its centered voice, bare). */
.rye-overline {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
.rye-overline::before {
  content: "";
  width: 64px;
  height: 1px;
  background: var(--rye-hairline-strong);
}
.rye-overline-label {
  font-family: var(--rye-font-body);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--rye-copper-bright);
}
.rye-overline-onphoto .rye-overline-label { color: var(--rye-bone); }
.rye-quote-body .rye-overline,
.rye-course .rye-overline {
  align-items: flex-start;
}
.rye-quote-body .rye-overline::before,
.rye-course .rye-overline::before,
.rye-notes .rye-overline::before {
  display: none;
}

/* The V vegetarian tag: a small-caps suffix, never an icon. */
.rye-v {
  font-family: var(--rye-font-body);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rye-copper-bright);
  padding-left: 0.5em;
}

/* Buttons, text links, focus rings. The copper button carries the
   deep ink label at full opacity; hover fills the brighter copper. */
.rye-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: var(--rye-copper);
  color: var(--rye-btn-ink);
  font-family: var(--rye-font-body);
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
}
.rye-btn:hover {
  background: var(--rye-copper-bright);
  color: var(--rye-btn-ink);
}
.rye-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 600;
  color: var(--rye-bone);
  text-decoration: underline;
  text-decoration-color: var(--rye-copper-bright);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}
.rye-link:hover {
  color: var(--rye-copper-bright);
  text-decoration-color: var(--rye-copper-bright);
}
.rye-shell a:focus-visible,
.rye-chrome a:focus-visible,
.rye-nav-toggle:focus-visible,
.rye-rail-inner a:focus-visible,
.rye-faq-q:focus-visible {
  outline: 2px solid var(--rye-copper-bright);
  outline-offset: 2px;
}

/* Section rhythm: shared block padding, hairline dividers between
   bands ride each surface's own edges below. */
.rye-section {
  padding-block: clamp(56px, 7vw, 96px);
}

/* The layered chrome (round 14/3). The utility tier is a static bar
   that scrolls away; its at-rest clearance is DERIVED from the
   chrome-stick token (token minus the 56px strip equals the machinery
   notice space), so the machinery variable still rides exactly two
   sites: this token and the chrome's padding-top below. The
   .rye-chrome wrapper stays sticky from the page top and pays the
   fixed banner clearance exactly once (the padding-top), so the stuck
   stack is the notice space plus the 56px strip. The fixed machinery
   banner (z-index 9998) paints over the clearance zone; the chrome
   sits under it (z-index 40). The utility rides z-index 70 so it
   paints over the pinned strip while it scrolls out. */
.rye-chrome {
  position: sticky;
  top: 0;
  z-index: 40;
  padding-top: var(--demo-notice-space);
  background: var(--rye-ink);
}
.rye-utility {
  display: none;
  position: relative;
  z-index: 70;
  padding-top: calc(var(--rye-chrome-stick) - 56px);
  /* U1 (user report): NO border-bottom here. The ticket strip's own 1px
     frame is the bar's single hairline authority; this tier's bottom
     edge meets the strip's top border, so a hairline here doubled the
     seam (the uniformity fix keeps every boundary at exactly 1px). */
}
.rye-utility-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: var(--rye-strip-h);
}
.rye-utility-phone {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  color: var(--rye-bone);
  text-decoration: none;
}
.rye-utility-phone:hover { color: var(--rye-copper-bright); }
.rye-utility-hours {
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  color: var(--rye-smoke);
  text-align: right;
}
.rye-navbar {
  position: relative;
  /* U1: no border-bottom (see the utility note). The strip's own frame
     closes the navbar's bottom edge; a hairline here doubled the strip's
     bottom border and ran the full width past the strip's frame. */
}
.rye-navbar-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: var(--rye-bar-h);
}
.rye-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--rye-bone);
}
.rye-brand-mark {
  color: var(--rye-copper);
  flex: none;
}
.rye-brand-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.rye-brand-word {
  font-family: var(--rye-font-display);
  font-weight: 520;
  font-size: 1.35rem;
  line-height: 1.05;
  color: var(--rye-bone);
}
.rye-brand-sub {
  font-family: var(--rye-font-body);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rye-smoke-deep);
}
.rye-nav-group {
  display: none;
  align-items: center;
  gap: 36px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.rye-nav-group a:not(.rye-btn) {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--rye-bone);
  text-decoration: none;
}
.rye-nav-group a:not(.rye-btn):hover,
.rye-nav-group a:not(.rye-btn)[aria-current="page"] {
  color: var(--rye-copper-bright);
}
.rye-btn-nav { padding: 0 22px; }
.rye-nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 44px;
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid var(--rye-hairline);
  border-radius: 8px;
  background: transparent;
  color: var(--rye-bone);
  cursor: pointer;
  font-family: var(--rye-font-body);
  font-weight: 600;
  font-size: 0.875rem;
}
.rye-nav-bars {
  position: relative;
  width: 18px;
  height: 10px;
}
.rye-nav-bars::before,
.rye-nav-bars::after {
  content: "";
  position: absolute;
  left: 0;
  width: 18px;
  height: 2px;
  border-radius: 1px;
  background: var(--rye-bone);
}
.rye-nav-bars::before { top: 0; }
.rye-nav-bars::after { top: 8px; }
.rye-nav-toggle-label { display: inline-block; }

/* The small-screen disclosure panel: class-toggle state only, never
   inline display styles; the [hidden] companion ships defensively so
   a hidden panel can never paint. Full-width rows, 48px min-height,
   hairline separators; the hours row is a plain span, not a link. */
.rye-nav-links {
  position: absolute;
  top: 100%;
  inset-inline: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--rye-hearth-deep);
  border-bottom: 1px solid var(--rye-hairline);
}
.rye-nav-closed { display: none; }
.rye-nav-open { display: block; }
.rye-nav-links[hidden] { display: none; }
.rye-nav-links li {
  display: block;
  border-bottom: 1px solid var(--rye-hairline);
}
.rye-nav-links li:last-child {
  border-bottom: 0;
  padding: 12px clamp(20px, 4vw, 40px) 16px;
}
.rye-nav-links li a {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding-inline: clamp(20px, 4vw, 40px);
  color: var(--rye-smoke);
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
}
.rye-nav-links li a:hover,
.rye-nav-links li a[aria-current="page"] { color: var(--rye-bone); }
.rye-nav-hours {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding-inline: clamp(20px, 4vw, 40px);
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  color: var(--rye-smoke);
}
.rye-nav-links .rye-btn-nav {
  display: inline-flex;
  justify-content: center;
  width: 100%;
}

/* Band 1, the full-bleed photo hero (Home): the offset scrim panel
   hangs below the ticket strip's overlap. Layers: the eager img
   paints the area (z 0); the scrim sits absolutely over it (z 10);
   the panel sits above the scrim (z 20) and carries the content. All
   panel text is bone at full opacity; the scrim is the neutral ink
   triplet only (its two literal stops). The img and scrim blocks
   carry the plan's canonical class names (the round 14/3 rename). */
.rye-hero {
  position: relative;
  overflow: hidden;
  min-height: 520px;
}
.rye-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.rye-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 10;
  background: linear-gradient(
    rgba(24, 15, 10, 0.82) 0%,
    rgba(24, 15, 10, 0.94) 100%
  );
}
.rye-hero h1 { max-width: 44rem; }

/* Band 2, the intro statement: the ampersand badge breaks the band's
   top edge (the section is the badge's positioning context), and the
   statement block offsets left of center; the lead and the prose ride
   the block's left rail. */
.rye-statement {
  position: relative;
}
.rye-statement .rye-shell {
  /* P4a (R5): width auto, not the base 100 percent: the shell's own
     margin-left must come out of its box, otherwise a 100 percent border
     box plus the clamp margin overflows the 390px viewport by the margin
     width. Auto keeps the desktop shape identical (1008 fill capped at
     the 620px max-width after the 96px offset). */
  width: auto;
  max-width: 620px;
  margin-left: clamp(24px, 8vw, 96px);
  text-align: left;
}

/* Band 3, the features band: the band marker overline, then the pinned
   two-tile exception (.rye-tiles): the italic display heading crosses
   the bar tile's top edge; no card chrome, image + label + line only. */
.rye-features .rye-shell { text-align: left; }

/* Inset figures: the 8px radius band with a 4:3 crop (course media). */
.rye-media-figure {
  aspect-ratio: 4 / 3;
  border-radius: 8px;
  overflow: clip;
  margin: 0;
}
.rye-media-figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Band 7, the chef pull quote: portrait left and quote right on
   desktop; portrait above, capped at 320px, on mobile. The quote is
   the one italic register in the demo. */
.rye-quote-figure {
  display: grid;
  gap: 28px;
  align-items: center;
  margin: 0;
}
.rye-quote-img {
  display: block;
  width: 100%;
  max-width: 320px;
  aspect-ratio: 4 / 5;
  height: auto;
  object-fit: cover;
  border-radius: 8px;
}
.rye-quote-text {
  margin: 0 0 18px;
  font-family: var(--rye-font-display);
  font-style: italic;
  font-weight: 460;
  font-size: clamp(1.35rem, 2.6vw, 1.9rem);
  line-height: 1.35;
  color: var(--rye-bone);
}
.rye-quote-name {
  font-weight: 600;
  color: var(--rye-bone);
}
.rye-quote-role {
  font-family: var(--rye-font-body);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rye-smoke-deep);
  padding-left: 0.5em;
}

/* Band 8, the stats band: full-width raised tint, no cell backgrounds
   or borders: hairline column rules only. */
.rye-stats { background: var(--rye-hearth); }
.rye-stats .rye-shell { text-align: center; }
.rye-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 32px;
  row-gap: 36px;
  margin-top: 8px;
}
.rye-stat:nth-child(even) {
  border-left: 1px solid var(--rye-hairline);
  padding-left: 32px;
}
.rye-stat-number {
  display: block;
  font-family: var(--rye-font-display);
  font-weight: 500;
  font-size: clamp(2.4rem, 5vw, 3.7rem);
  line-height: 1;
  color: var(--rye-bone);
  font-variant-numeric: lining-nums;
}
.rye-stat-label {
  display: block;
  margin-top: 10px;
  font-family: var(--rye-font-body);
  font-size: 0.875rem;
  letter-spacing: 0.04em;
  color: var(--rye-smoke);
}

/* Band 9, the contact block (all four pages): the one id, kept
   centered over its shell, reskinned. */
.rye-contact .rye-shell { text-align: center; }
.rye-contact-lines {
  list-style: none;
  margin: 0;
  padding: 0;
}
.rye-contact-line { padding-block: 8px; }

/* The deep four-column footer on the deepest surface. */
.rye-footer { background: var(--rye-hearth-deep); }
.rye-footer .rye-shell { padding-block: 56px 40px; }
.rye-footer-brand { margin-bottom: 28px; }
.rye-footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px 32px;
}
.rye-footer-col p {
  margin: 0 0 10px;
  color: var(--rye-smoke-deep);
  font-size: 0.9375rem;
  line-height: 1.6;
}
.rye-footer-head {
  font-family: var(--rye-font-body);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--rye-copper-bright);
  border-bottom: 1px solid var(--rye-hairline);
  padding-bottom: 10px;
  margin: 0 0 14px;
}
.rye-footer-col a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--rye-smoke-deep);
  text-decoration: none;
}
.rye-footer-col a:hover {
  color: var(--rye-copper-bright);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.rye-footer-copy {
  margin: 28px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--rye-hairline);
  color: var(--rye-smoke-deep);
  font-size: 0.8125rem;
  line-height: 1.6;
}

/* Statement heroes (thin, typographic; centered). */
.rye-pagehero .rye-shell { text-align: center; }
.rye-pagehero .rye-lead {
  max-width: 40rem;
  margin: 0 auto;
}

/* The Menu course rail: a pinned horizontal strip below 1020px and a
   sticky column of the two-column menu grid at and above it. State
   keys off [aria-current="true"]; the js moves one attribute and the
   paint follows; nothing ever hides. The wrap parks under the sticky
   chrome via the chrome-stick token (never a raw banner read). */
.rye-rail-wrap {
  position: sticky;
  top: var(--rye-chrome-stick);
  z-index: 10;
  margin-inline: calc(-1 * clamp(20px, 4vw, 40px));
  background: var(--rye-hearth-deep);
  border-bottom: 1px solid var(--rye-hairline);
}
.rye-rail-inner {
  display: flex;
  overflow-x: auto;
}
.rye-rail-inner a {
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 16px;
  border-bottom: 2px solid transparent;
  color: var(--rye-smoke);
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.rye-rail-inner a[aria-current="true"] {
  color: var(--rye-copper-bright);
  border-bottom-color: var(--rye-copper);
}
.rye-menu-courses { min-width: 0; }

/* Course sections (Menu): tighter padding than page bands, anchor
   scroll margins landing below the sticky chrome and rail, hairline
   dividers between courses. */
.rye-course {
  padding-block: clamp(48px, 6vw, 72px);
  scroll-margin-top: calc(var(--rye-chrome-stick) + var(--rye-rail-h) + 16px);
}
.rye-course + .rye-course { border-top: 1px solid var(--rye-hairline); }
.rye-course-copy .rye-overline { margin-bottom: 14px; }
.rye-course-note {
  max-width: 40rem;
  margin: 0 0 4px;
}

/* Dish rows: name left, price right, one ingredient line under; a
   hairline top separator and a 44px minimum row height. */
.rye-dish-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.rye-dish {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  column-gap: 24px;
  min-height: 44px;
  padding-block: 16px;
  border-top: 1px solid var(--rye-hairline);
}
.rye-dish-name {
  grid-column: 1;
  grid-row: 1;
  font-family: var(--rye-font-body);
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1.3;
  color: var(--rye-bone);
  margin: 0;
}
.rye-dish-price {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  font-family: var(--rye-font-display);
  font-weight: 520;
  font-size: 1.0625rem;
  line-height: 1.4;
  color: var(--rye-copper-bright);
  font-variant-numeric: lining-nums;
}
.rye-dish-line {
  grid-column: 1 / -1;
  grid-row: 2;
  margin: 6px 0 0;
  color: var(--rye-smoke);
  font-size: 0.9375rem;
}

/* Notes band (Menu): round 14/3 re-voices the surface to the parchment
   panel register (paper background, ink text) and the band opens on
   the full paper ornament; the centered voice stays. */
.rye-notes {
  background: var(--rye-paper);
  color: var(--rye-ink);
}
.rye-notes .rye-shell {
  max-width: 46rem;
  text-align: center;
}
.rye-notes p { margin: 0 0 0.8em; }
.rye-notes p:last-child { margin-bottom: 0; }

/* The numbered band (Reservations): copper Fraunces numerals in a
   fixed column with a hairline rule under each numeral, rows on the
   ink surface, hairline between rows. */
.rye-steps {
  list-style: none;
  margin: 0;
  padding: 0;
}
.rye-step {
  display: grid;
  grid-template-columns: 64px 1fr;
  column-gap: 20px;
  padding-block: 24px;
  border-bottom: 1px solid var(--rye-hairline);
}
.rye-step:last-child { border-bottom: 0; }
.rye-step-number {
  font-family: var(--rye-font-display);
  font-weight: 520;
  font-size: 1.0625rem;
  line-height: 1.2;
  color: var(--rye-copper);
  font-variant-numeric: lining-nums;
}
.rye-step-number::after {
  content: "";
  display: block;
  width: 24px;
  height: 1px;
  margin-top: 8px;
  background: var(--rye-hairline-strong);
}
.rye-step-text p { margin: 0; max-width: 40rem; }

/* The simple copper-marker list (the have-ready block). */
.rye-ready-list {
  list-style: disc;
  max-width: 40rem;
  padding-left: 22px;
}
.rye-ready-list li { padding-block: 6px; }
.rye-ready-list li::marker { color: var(--rye-copper); }

/* Disclosure rows (Reservations): the details markup does the work;
   the mark is the two-line plus glyph built from CSS borders; the
   vertical stroke drops on [open], leaving the minus. State keyed on
   the details[open] attribute, css only. */
.rye-faq {
  border-bottom: 1px solid var(--rye-hairline);
  padding-block: 6px 0;
}
.rye-faq:last-of-type { border-bottom: 0; }
.rye-faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 44px;
  padding-block: 10px;
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  font-size: 1rem;
  color: var(--rye-bone);
}
.rye-faq-q::-webkit-details-marker { display: none; }
.rye-faq-mark {
  position: relative;
  flex: none;
  width: 14px;
  height: 14px;
}
.rye-faq-mark::before,
.rye-faq-mark::after {
  content: "";
  position: absolute;
  background: var(--rye-copper-bright);
}
.rye-faq-mark::before {
  left: 0;
  top: 6px;
  width: 14px;
  height: 2px;
}
.rye-faq-mark::after {
  left: 6px;
  top: 0;
  width: 2px;
  height: 14px;
}
.rye-faq[open] .rye-faq-mark::after { opacity: 0; }
.rye-faq-a { padding: 0 0 20px; }
.rye-faq-a p { margin: 0; max-width: 40rem; }

/* Step-ups: 640px (footer to two columns). */
@media (min-width: 640px) {
  .rye-footer-grid { grid-template-columns: repeat(2, 1fr); gap: 28px 32px; }
}

/* Step-ups: 768px. */
@media (min-width: 768px) {
  .rye-stats-grid { grid-template-columns: repeat(4, 1fr); }
  .rye-stat:nth-child(n+2) {
    border-left: 1px solid var(--rye-hairline);
    padding-left: 32px;
  }
  .rye-quote-figure {
    grid-template-columns: 320px 1fr;
    gap: 48px;
  }
  .rye-quote-img {
    max-width: none;
    width: 100%;
  }
}

/* Step-ups: 880px (the chrome completes: the utility tier and the
   ticket cells show; the toggle and the disclosure hide. The display
   rule below outranks the .rye-nav-open class because it is later in
   the file at the same specificity. The chrome's negative margin
   condenses the flow so the strip's at-rest top stays where the old
   nav bar's top was: the utility's box is the derived notice
   clearance plus its 44px row, and the chrome pulls up by that
   clearance; the utility paints over the drawn-up pad zone). */
@media (min-width: 880px) {
  .rye-utility { display: block; }
  .rye-chrome { margin-top: calc(-1 * (var(--rye-chrome-stick) - 56px)); }
  .rye-nav-group { display: flex; }
  .rye-nav-toggle { display: none; }
  .rye-nav-links { display: none; }
}

/* Step-ups: 900px (the hero gains its tall desktop box; course splits
   gain their two-column rhythm). */
@media (min-width: 900px) {
  .rye-hero { min-height: 640px; }
  .rye-course-split {
    display: grid;
    grid-template-columns: 460px 1fr;
    gap: 40px 48px;
    align-items: start;
  }
  .rye-course-split .rye-course-media {
    grid-column: 1;
    grid-row: 1;
  }
  .rye-course-split .rye-course-copy {
    grid-column: 2;
    grid-row: 1;
  }
  .rye-course-split-rev { grid-template-columns: 1fr 460px; }
  .rye-course-split-rev .rye-course-media {
    grid-column: 2;
    grid-row: 1;
  }
  .rye-course-split-rev .rye-course-copy {
    grid-column: 1;
    grid-row: 1;
  }
}

/* Step-ups: 1020px (the menu body two-column grid: rail column +
   courses; the rail becomes a static column with a sticky inner list;
   the hero CTAs already sit side by side from 560px). */
@media (min-width: 1020px) {
  .rye-menu-body {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 48px;
    align-items: stretch;
  }
  .rye-rail-wrap {
    position: static;
    z-index: auto;
    margin-inline: 0;
    background: transparent;
    border-bottom: 0;
    border-right: 1px solid var(--rye-hairline);
  }
  .rye-rail-inner {
    position: sticky;
    top: var(--rye-chrome-stick);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    overflow-x: visible;
  }
  .rye-rail-inner a {
    white-space: normal;
    display: block;
    margin-bottom: 2px;
    padding: 12px 16px;
    border-bottom: 0;
    border-left: 2px solid transparent;
    text-align: left;
  }
  .rye-rail-inner a[aria-current="true"] {
    border-left-color: var(--rye-copper);
    background: var(--rye-tint);
  }
  .rye-footer-grid { grid-template-columns: repeat(4, 1fr); }
}

/* Reduced motion: every transition this demo declares stops. Anchor
    jumps stay instant (no smooth scrolling is ever declared). */
@media (prefers-reduced-motion: reduce) {
  .rye-btn,
  .rye-link,
  .rye-shell p a,
  .rye-contact-line a,
  .rye-nav-group a:not(.rye-btn),
  .rye-nav-links li a,
  .rye-utility-phone,
  .rye-rail-inner a,
  .rye-footer-col a {
    transition: none;
  }
}

/* The 14/3 layered layout round (the layout amendment: plans
   2026-10-11-spec14-layout-plan-1-geometry.md and
   -4-room-mosaic.md). ADDITIVE: new .rye- prefixed mechanism classes
   only; every rule above stays byte-identical until the round's view
   swap retires them, and the committed stacked-band views keep
   rendering against them in the meantime. Breakpoints for this block:
   mobile-first base (the <= 640px register), 641px = tablet,
   901px = desktop. No box-sizing lines here (the border-box group up
   top keeps its plan-documented count; the mosaic classes join it at
   the view swap), no --demo-notice-space references (the machinery
   contract stays exactly two consumptions in this file). */

/* Mechanism 1: the ticket strip (the nav's bar skin): one bordered
   strip of cells, the wordmark first, the link cells with hairline
   seams, and the ONE filled action cell last. Mobile shows the
   wordmark and the filled cell only (the links ride the disclosure);
   tablet and desktop carry all cells; the filled cell is the only
   filled surface in the strip. */
.rye-tickets {
  display: flex;
  align-items: stretch;
  max-width: 1140px;
  margin: 0 auto;
  background: var(--rye-ink);
  border: 1px solid var(--rye-cell-border);
  position: relative;
  z-index: 60;
  font-family: var(--rye-font-body);
}
.rye-tickets__cell {
  min-height: 48px;
  display: flex;
  align-items: center;
  padding: 0 16px;
  border-left: 1px solid var(--rye-cell-border);
}
.rye-tickets__cell:first-child { border-left: 0; }
.rye-tickets__cell--word {
  flex: 1 1 auto;
  padding-inline: 16px;
  /* P7 (R5): the wordmark cell is an anchor; without the reset the UA
     paints the brand underline (the Freshcut fact-668 defect class). */
  text-decoration: none;
  /* P5 (R5): the wordmark must stay ONE line below 641px. The wrap was
     what grew the first strip cell to two text lines (60px), stretched
     the 48px cells, and made the stuck strip 62px with the rail parked
     7px under it: nowrap restores the 48px-cell strip arithmetic. The
     mobile row fits (wordmark + toggle + filled cell + frame = ~381px
     at 390; the R3a 16px cell paddings are the fitting register). */
  white-space: nowrap;
  font-family: var(--rye-font-display);
  font-size: 1.25rem;
  color: var(--rye-bone);
}
.rye-tickets__cell--link {
  display: none;
  color: var(--rye-bone);
  font-size: 0.8125rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.2s ease;
}
.rye-tickets__cell--link:hover { background: var(--rye-tint); }
.rye-tickets__cell--fill {
  margin-left: auto;
  background: var(--rye-copper);
  color: var(--rye-bone);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
}

/* The ticket strip overlap: the hero band pulls itself up so its top
   edge rides behind the strip's bottom border, and the band's
   padding-top grows by the same value so nothing climbs under the
   opaque cells. Mobile overlaps 20px; tablet and desktop consume the
   32px token. */
.rye-band--hero {
  margin-top: -20px;
  padding-top: 20px;
}

/* Mechanism 2: the offset hero panel (the panel IS the dark scrim
   panel, so the text-over-image contract holds by construction: photo,
   then the neutral veils, then full-opacity bone text inside the
   panel). Mobile: no left bias, margins 88/16/40, the stacked
   full-width CTAs; tablet: 560px panel at 48px; desktop: the 620px
   panel with the clamp margins. */
.rye-hero__panel {
  position: relative;
  z-index: 20;
  max-width: 620px;
  margin: 88px 16px 40px;
  padding: 26px 20px 30px;
  background: var(--rye-panel-veil);
  border: 1px solid var(--rye-cell-border);
  border-left: 3px solid var(--rye-copper);
  color: var(--rye-bone);
  font-family: var(--rye-font-body);
}
.rye-hero__panel__over {
  display: block;
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rye-copper-bright);
}
.rye-hero__panel h1 { font-size: clamp(34px, 3.9vw, 56px); }
.rye-hero__panel__promise {
  margin: 0;
  max-width: 52ch;
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--rye-bone);
}
.rye-hero__ctas {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 28px;
}
.rye-hero__ctas .rye-btn {
  justify-content: center;
  min-height: 48px;
  width: 100%;
}

/* The outlined dual CTAs (never filled in the hero band): the primary
   carries the copper-pale border and ink, the quiet variant the cell
   border and bone; the copper wash handles both hovers (the --rye-tint
   token serves the plan's 0.14/0.15 rounding pair). */
.rye-btn--outline {
  background: transparent;
  border-color: var(--rye-copper-bright);
  color: var(--rye-copper-bright);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 12px 26px;
  min-height: 48px;
}
.rye-btn--outline:hover {
  background: var(--rye-tint);
  color: var(--rye-copper-bright);
}
.rye-btn--outline--quiet {
  border-color: var(--rye-cell-border);
  color: var(--rye-bone);
}
.rye-btn--outline--quiet:hover {
  background: var(--rye-tint);
  color: var(--rye-bone);
}

/* Mechanism 3: the circular ampersand badge; mobile 72px with the 36px
   edge break, tablet and desktop 96px with the 48px break. The badge
   breaks the band's top edge and nothing behind it but the boundary;
   the positioning context on its band arrives with the view swap. */
.rye-badge {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--rye-hearth);
  border: 1px solid rgba(221, 150, 96, 0.55);
  box-shadow: 0 6px 18px rgba(24, 15, 10, 0.45);
  display: grid;
  place-items: center;
  color: var(--rye-copper-bright);
  font-family: var(--rye-font-display);
  font-style: italic;
  font-weight: 560;
  font-size: 34px;
  position: absolute;
  z-index: 30;
}
.rye-badge--intro {
  top: -36px;
  left: clamp(24px, 8vw, 96px);
}
.rye-badge--widget {
  top: -36px;
  left: 48px;
}

/* Mechanism 4: the ornament dividers, pure css: hairline rules with
   the filled copper diamond center and the two hollow edge diamonds.
   The tight register rides under overlines and statement headings
   (left-aligned); the paper register re-inks the rules for parchment
   surfaces (the diamonds keep copper). Ornament markup carries no
   text (aria-hidden). */
.rye-orn {
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 720px;
  margin: 0 auto 40px;
}
.rye-orn::before,
.rye-orn::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(221, 150, 96, 0.25);
}
.rye-orn__d {
  width: 10px;
  height: 10px;
  transform: rotate(45deg);
  background: var(--rye-copper);
  flex: 0 0 auto;
}
.rye-orn__d--edge {
  width: 5px;
  height: 5px;
  background: transparent;
  border: 1px solid rgba(221, 150, 96, 0.6);
}
.rye-orn--tight {
  max-width: 260px;
  gap: 10px;
  margin: 18px 0 0;
}
.rye-orn--tight .rye-orn__d {
  width: 6px;
  height: 6px;
}
.rye-orn--paper::before,
.rye-orn--paper::after {
  background: rgba(37, 26, 18, 0.22);
}

/* Mechanism 5: the two staggered features tiles, the pinned exception
   to the anti-uniformity census (no card chrome: image, label, line).
   The italic display heading crosses the bar tile's top edge and the
   tile carries its own top scrim for the text-over-image contract.
   Mobile: single column with the heading overlap; tablet: the 58/42
   columns with the 72px top offset; desktop: the 112px offset, the 48px
   right padding, and the table tile's 32px left reach. */
.rye-tiles {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  font-family: var(--rye-font-body);
}
.rye-tiles .rye-tiles__display {
  position: relative;
  z-index: 20;
  margin: -24px 16px 20px;
  width: max-content;
  font-family: var(--rye-font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(34px, 9vw, 40px);
  color: var(--rye-bone);
}
.rye-tile { margin: 0; }
.rye-tile--bar { position: relative; margin-top: 0; }
.rye-tile--bar img {
  aspect-ratio: 4 / 5;
}
.rye-tile--bar::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  aspect-ratio: 4 / 5;
  background: linear-gradient(180deg, rgba(24, 15, 10, 0.55), rgba(24, 15, 10, 0) 45%);
  z-index: 1;
  pointer-events: none;
}
.rye-tile--table { margin-left: 0; }
.rye-tile--table img {
  aspect-ratio: 3 / 4;
}
.rye-tile img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: center;
  border-radius: 8px;
}
.rye-tile .rye-overline { align-items: flex-start; }
.rye-tile .rye-overline::before { display: none; }
.rye-tile .rye-overline-label {
  font-size: 0.75rem;
  letter-spacing: 0.16em;
}
.rye-tile h3 {
  font-family: var(--rye-font-display);
  font-weight: 520;
  font-size: clamp(1.375rem, 2.4vw, 1.75rem);
  line-height: 1.25;
  color: var(--rye-bone);
  margin: 0 0 10px;
}
.rye-tile--bar p {
  font-size: 1rem;
  max-width: 44ch;
  color: var(--rye-bone);
}
.rye-tile--table p {
  font-size: 0.9375rem;
  max-width: 44ch;
  color: var(--rye-bone);
}

/* Mechanisms 6 + 7: the crossing panels. The photo band paints its img
   full-bleed under the neutral veil; the deep band is the textured ink
   surface with the one copper radial highlight top center. The solid
   parchment panel crosses its band's bottom edge into the next band,
   which clears it with the sibling padding rules below. */
.rye-cross {
  /* P3 (R5), continued: flow-root keeps the panel's negative bottom
     margin INSIDE the band. Without a BFC the last child's -64px (mobile
     -48px) collapses through the padding-bottom-less band and the panel
     hangs exactly level with the band's edge (hang 0); with it the band
     bottom sits 64px (48px mobile) above the panel's bottom edge and the
     hang paints per plan row 9 on the desktop AND tablet shapes. */
  display: flow-root;
  position: relative;
  overflow: visible;
  padding: 56px 0 0;
}
.rye-cross--photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.rye-cross--photo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--rye-veil);
}
.rye-cross--deep {
  background-color: var(--rye-hearth-deep);
  background-image: radial-gradient(circle at 50% 0%, rgba(176, 106, 60, 0.10), rgba(176, 106, 60, 0) 60%);
}
.rye-cross__panel {
  position: relative;
  z-index: 20;
  max-width: none;
  margin: 0 16px -48px;
  padding: 32px 36px 36px;
  background: var(--rye-paper);
  color: var(--rye-ink);
  border: 1px solid rgba(37, 26, 18, 0.18);
  font-family: var(--rye-font-body);
}
.rye-cross__panel--left {
  margin-left: 16px;
  margin-right: auto;
}
.rye-cross__panel--right {
  margin-right: 16px;
  margin-left: auto;
}

/* The band's bare photo overline rides the veil, top left; the panel's
   own overline and the supplier list re-ink on the parchment. */
.rye-cross .rye-overline {
  position: absolute;
  top: 40px;
  left: clamp(20px, 4vw, 48px);
  z-index: 2;
  align-items: flex-start;
  margin-bottom: 0;
}
.rye-cross .rye-overline::before { display: none; }
.rye-cross .rye-overline .rye-overline-label { color: var(--rye-bone); }
.rye-cross__panel .rye-overline { align-items: flex-start; }
.rye-cross__panel .rye-overline::before { display: none; }
.rye-cross__panel .rye-overline-label { color: var(--rye-ink); }
.rye-cross__panel h2 {
  font-family: var(--rye-font-display);
  font-weight: 520;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  line-height: 1.2;
  color: var(--rye-ink);
  margin: 0 0 12px;
}
.rye-cross__panel .rye-suppliers {
  list-style: none;
  margin: 0 0 1.1em;
  padding: 0;
}
.rye-cross__panel .rye-suppliers li {
  display: flex;
  align-items: center;
  gap: 10px;
}
.rye-cross__panel .rye-suppliers .rye-orn__d {
  width: 6px;
  height: 6px;
}

/* The crossing's call to action: the shipped .rye-btn inverts to the
   ink fill on the parchment; the hover lifts it to the raised hearth
   tint. */
.rye-cross__panel .rye-btn {
  margin-top: 10px;
  background: var(--rye-ink);
  color: var(--rye-bone);
}
.rye-cross__panel .rye-btn:hover { background: var(--rye-hearth); }

/* THE CROSS clearances: the panel's hanging lower 64px (48px mobile)
   clears into the next band, which the sibling rules push down. The
   widget band pays the clearance in its outer margin (the panel section
   keeps its plan paddings); the quote and menu-body bands pay it in
   padding-top. */
.rye-cross + .rye-widget { margin-top: 72px; }
.rye-cross + .rye-quote,
.rye-cross + .rye-menu-body { padding-top: 72px; }

/* The crossing breakpoint step, TABLET (P1 fix, R5): tablet picks up
   the side clamps and the 560px box. The desktop step lives in the
   desktop block at the file end (cascade order: every 641px block must
   come BEFORE its 901px competitor, or the tablet byte shades the
   desktop one at >= 901: the R4 P1 inversion this move retires; the
   floors are gone per the P3 note on the base rule). */
@media (min-width: 641px) {
  .rye-cross__panel {
    max-width: 560px;
    margin-bottom: -48px;
  }
  .rye-cross__panel--left { margin-left: clamp(24px, 8vw, 96px); }
  .rye-cross__panel--right { margin-right: clamp(24px, 8vw, 96px); }
  .rye-cross + .rye-widget { margin-top: 96px; }
  .rye-cross + .rye-quote,
  .rye-cross + .rye-menu-body { padding-top: 96px; }
}

/* Mechanism 8: the reservation widget panel: parchment paper surface,
   ink text, the badge on its top edge, the four honest text columns
   (zero form controls), the two footnotes, and the ONE wide filled
   call CTA. The widget is the Home band and the Reservations funnel
   shell alike. Mobile paddings are the mobile-first judgment; the
   desktop paddings are the plan's values. */
.rye-widget {
  position: relative;
  z-index: 20;
  max-width: 1080px;
  margin: 64px auto 32px;
  padding: 32px 20px 28px;
  background: var(--rye-paper);
  color: var(--rye-ink);
  border: 1px solid rgba(37, 26, 18, 0.18);
  font-family: var(--rye-font-body);
}
.rye-widget__title {
  font-family: var(--rye-font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.875rem, 3vw, 2.5rem);
  line-height: 1.2;
  color: var(--rye-ink);
  margin: 0 0 10px;
}
.rye-widget__cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-top: 36px;
  align-items: start;
}
.rye-widget__label {
  display: block;
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rye-ink);
  border-bottom: 1px solid var(--rye-copper);
  padding-bottom: 8px;
  margin-bottom: 12px;
}
.rye-widget__line {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--rye-ink);
}
.rye-widget__line a {
  color: var(--rye-ink);
  text-decoration: underline;
  text-decoration-color: var(--rye-copper);
  text-underline-offset: 3px;
}
.rye-widget__foot {
  margin-top: 32px;
  font-size: 0.875rem;
}
.rye-widget__foot-line { margin: 0; }

/* The ONE wide filled call CTA; ink on parchment, full width, 56px
   target. */
.rye-widget__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 56px;
  margin-top: 32px;
  padding: 0 24px;
  background: var(--rye-ink);
  color: var(--rye-bone);
  border-radius: 6px;
  font-weight: 700;
  font-size: 0.9375rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
}
.rye-widget__cta:hover { background: var(--rye-hearth); }

/* Focus rings for the surfaces that sit outside the shell and chrome
   scopes. */
.rye-cross__panel a:focus-visible,
.rye-widget__cta:focus-visible,
.rye-widget__line a:focus-visible {
  outline: 2px solid var(--rye-copper-bright);
  outline-offset: 2px;
}

/* The Reservations funnel inside the widget shell: the shipped step
   rows keep their semantics; the numbers take the widget-label
   treatment through this shell scope and the text re-inks on the
   parchment. Zero form controls. */
.rye-widget .rye-step-number {
  display: inline-block;
  font-family: var(--rye-font-body);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rye-ink);
  border-bottom: 1px solid var(--rye-copper);
  padding-bottom: 8px;
}
.rye-widget .rye-step-number::after { display: none; }
.rye-widget .rye-step-text h3,
.rye-widget .rye-step-text p {
  color: var(--rye-ink);
}

/* Round 14/4: THE ROOM mosaic (the mosaic authority:
   2026-10-11-spec14-layout-plan-4-room-mosaic.md). One restrained
   asymmetric set: the anchor room image at 62 percent of a 1020px
   column, the two-up companion row beneath it (pass 42, wood 32,
   staggered 64px), the captions attached in-figure with the ONE modest
   anchor overlap (32px desktop, 20px mobile). Nothing full-bleed, no
   equal columns, no repeat() grid, no tile tokens. The imgs keep the
   shipped .rye-band-img lead byte and re-declare their sizing under
   this scope; the crops are the three single-line rules the census
   pins. */
.rye-mosaic {
  position: relative;
  max-width: none;
  margin: 0 auto;
  padding: 24px 16px 16px;
  font-family: var(--rye-font-body);
}
.rye-mosaic__set { margin: 0; }
.rye-mosaic .rye-band-img {
  display: block;
  width: 100%;
  /* P2 (R5): height auto. Without it the imgs' height attributes beat
     the aspect-ratio crop lines and the mosaic paints tall crops (the
     user's too-big room images). The attributes stay byte-identical in
     the fleet census; the crop is css-law now. */
  height: auto;
  object-fit: cover;
  object-position: center;
  border-radius: 8px;
}
.rye-mosaic__set--anchor .rye-band-img { aspect-ratio: 4 / 3; }
.rye-mosaic__set--pass .rye-band-img { aspect-ratio: 3 / 2; }
.rye-mosaic__set--wood .rye-band-img { aspect-ratio: 4 / 5; }

/* The caption furniture (the renamed band caption): parchment plate,
   ink text, hairline-warm border, attached to its own image. Companion
   captions sit flush under their own images; only the anchor caption
   crosses its image's bottom edge. */
.rye-caption {
  background: var(--rye-paper);
  color: var(--rye-ink);
  border: 1px solid rgba(37, 26, 18, 0.18);
  border-radius: 6px;
  padding: 16px 22px 18px;
  font-size: 0.9375rem;
  line-height: 1.6;
}
.rye-mosaic__row { display: block; margin: 40px 0 0; }
.rye-mosaic__set--anchor { width: 100%; }
.rye-mosaic__row .rye-mosaic__set--pass { width: 78%; margin: 0; }
.rye-mosaic__row .rye-mosaic__set--wood { width: 66%; margin: 40px 0 0 auto; }
.rye-mosaic__set--anchor .rye-caption {
  position: relative;
  z-index: 2;
  width: 88%;
  max-width: 340px;
  margin: -20px 0 0 16px;
}
.rye-mosaic__row .rye-caption {
  width: 100%;
  margin-top: 10px;
}
.rye-mosaic .rye-band-title { color: var(--rye-ink); }
.rye-mosaic .rye-band-line { color: var(--rye-ink); }

/* The mosaic breakpoint steps, TABLET (P1 fix wording): tablet opens
   the shell to 1020px, the two-up row (pass 46 / wood 34, the 48px
   stagger, the 24 percent row indent) and the 28px overlap; the
   desktop column table (62/42/32, the 56px/34 percent row, the 64px
   stagger, the 32px overlap) lives in the desktop block at the file
   end, AFTER this block, so the desktop byte wins at >= 901. */
@media (min-width: 641px) {
  .rye-mosaic {
    max-width: 1020px;
    padding: 32px 20px 24px;
  }
  .rye-mosaic__row {
    display: flex;
    align-items: flex-start;
    gap: 4%;
    margin: 48px 0 0 24%;
  }
  .rye-mosaic__set--anchor { width: 68%; }
  .rye-mosaic__row .rye-mosaic__set--pass { width: 46%; flex: none; }
  .rye-mosaic__row .rye-mosaic__set--wood { width: 34%; flex: none; margin: 48px 0 0; }
  .rye-mosaic__set--anchor .rye-caption { margin: -28px 0 0 32px; }
  .rye-hero__panel { max-width: 560px; margin-left: 48px; }
  .rye-tiles {
    grid-template-columns: 58% 42%;
    padding-top: 56px;
  }
  .rye-tiles .rye-tiles__display {
    margin: -28px 0 0 5%;
    font-size: clamp(40px, 4.6vw, 64px);
  }
  .rye-tile--bar { margin-top: 72px; padding-right: 48px; }
  .rye-tile--bar::before { width: calc(100% - 48px); }
  .rye-widget { padding: 56px 40px 40px; }
  .rye-widget__cols { grid-template-columns: repeat(2, 1fr); }
  .rye-badge {
    width: 96px;
    height: 96px;
    font-size: 44px;
  }
  .rye-badge--intro,
  .rye-badge--widget {
    top: -48px;
  }
  .rye-tickets__cell { min-height: 52px; padding: 0 14px; }
  .rye-tickets__cell--word { flex: 0 1 auto; padding-inline: 14px; }
  .rye-tickets__cell--link { display: flex; }
  .rye-hero__ctas {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .rye-hero__ctas .rye-btn { width: auto; }
}

/* The ticket strip's desktop step (plan 1 section 3): 56px cells at
   22px cell padding and 26px wordmark padding, the values the strip
   arithmetic and the rail stick line are keyed to. */
@media (min-width: 901px) {
  .rye-tickets__cell { min-height: 56px; padding: 0 22px; }
  .rye-tickets__cell--word { padding-inline: 26px; }
}

/* The one new transition in this round stops under reduced motion
   (the outlined buttons ride the shipped .rye-btn transition and the
   standing reduced-motion stop above). */
@media (prefers-reduced-motion: reduce) {
  .rye-tickets__cell--link {
    transition: none;
  }
}

/* Round 14/3, the R3b view-swap wiring (additive; the plan-mandated
   scope completions the four leaf views rely on): the statement-scale
   panel, the hero panel's desktop step, the crossing panels' prose
   scopes, the tiles grid placements, and the parchment ink registers
   on the widget and kitchen notes. */

/* The statement-scale panel (Menu, The Room, Reservations pageheroes
   ride the canonical panel class at the plan's smaller scale): 560px,
   the plan's padding, offset left (16px mobile, 48px tablet via the
   shared tablet step, 96px desktop), content on its own left rail. */
.rye-pagehero .rye-hero__panel {
  max-width: 560px;
  padding: 28px 36px 34px;
  margin: 16px 0 40px 16px;
  text-align: left;
}
.rye-pagehero .rye-hero__panel .rye-overline { align-items: flex-start; }

/* The crossing panels sit outside the shells, so their prose rhythm
   re-declares here and the panel overline rides in flow at the
   panel's top-left (the band-level absolute overline placement is for
   overlines that ride a photo, not for the panel's ink overlines);
   the statement-lead line re-inks from bone to ink on paper. */
.rye-cross__panel .rye-overline {
  position: static;
  top: auto;
  left: auto;
}
.rye-cross__panel p { margin: 0 0 1.1em; }
.rye-cross__panel .rye-statement-lead { color: var(--rye-ink); }

/* The widget's overline rides the parchment register (left-aligned,
   bare, ink) and the funnel's step anchors keep the demo focus ring
   inside the shell-less widget. */
.rye-widget .rye-overline { align-items: flex-start; }
.rye-widget .rye-overline::before { display: none; }
.rye-widget .rye-overline-label { color: var(--rye-ink); }
.rye-widget .rye-steps a:focus-visible {
  outline: 2px solid var(--rye-copper-bright);
  outline-offset: 2px;
}

/* The kitchen notes overline label carries the parchment ink too. */
.rye-notes .rye-overline-label { color: var(--rye-ink); }

/* The tiles grid placements (the append above pins them explicit and
   the pins complete here so the DOM order cannot equalize): the
   display spans both columns on row 1, the two tiles share row 2 in
   the 58/42 columns; mobile is the single-column auto flow. The
   display's bottom margin is the fix space the build note names: with
   the bar tile's 112px offset, the negative margin makes the glyph
   box cross the tile's top edge by the plan's 28px. */
@media (min-width: 641px) {
  .rye-tiles .rye-tiles__display {
    grid-column: 1 / -1;
    margin-bottom: -140px;
  }
  .rye-tile--bar {
    grid-column: 1;
    grid-row: 2;
  }
  .rye-tile--table {
    grid-column: 2;
    grid-row: 2;
  }
}

/* The hero panel's desktop step (the plan's verbatim values; the
   tablet step rides the shared tablet block above). */
@media (min-width: 901px) {
  .rye-hero .rye-hero__panel {
    max-width: 620px;
    padding: 44px 52px 48px;
    margin-top: clamp(96px, 16vh, 152px);
    margin-bottom: clamp(48px, 9vh, 88px);
    margin-left: clamp(24px, 8vw, 96px);
  }
  .rye-pagehero .rye-hero__panel { margin-left: 96px; }
}

/* THE DESKTOP STEP BLOCK, R5 (P1 fix): the appended 901px block moves
   to the file end so it sources AFTER every 641px competitor and paints
   at >= 901 (the R4 P1 inversion: the same-specificity tablet bytes at
   1726 shaded this block's 62/32/-32, repeat(4) and 112 values). The
   cross min-height floor is gone per the P3 note on the base rule; the
   other values are byte-identical to the R3a append. */
@media (min-width: 901px) {
  .rye-cross {
    padding: 56px 0 0;
  }
  .rye-cross__panel { margin-bottom: -64px; }
  .rye-band--hero {
    margin-top: calc(-1 * var(--rye-overlap-strip));
    padding-top: var(--rye-overlap-strip);
  }
  .rye-tile--bar { margin-top: 112px; }
  .rye-tile--table { margin-left: -32px; }
  /* The desktop display crossing, re-anchored (P1 completion, R5): the
     R3b -140px grid tuck is floor-inert in paint (the auto row floors at
     zero because the display's negative-margin margin-box contribution is
     negative, so the tiles row never rode up and the glyph box never
     crossed). The transform realizes the plan row 8 shape directly: the
     display's painted box crosses tile A's top edge by the plan's 28px
     (bar.top - (display.bottom natural) + 28). Tablet/mobile keep their
     own registers untouched. */
  .rye-tiles .rye-tiles__display { transform: translateY(97px); }
  .rye-widget { padding: 64px 56px 48px; }
  .rye-widget__cols {
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
  }
  .rye-mosaic { padding: 40px 24px 32px; }
  .rye-mosaic__row { margin: 56px 0 0 34%; }
  .rye-mosaic__set--anchor { width: 62%; }
  .rye-mosaic__row .rye-mosaic__set--pass { width: 42%; }
  .rye-mosaic__row .rye-mosaic__set--wood { width: 32%; margin-top: 64px; }
  .rye-mosaic__set--anchor .rye-caption {
    margin: -32px 0 0 40px;
  }
}