/*
 * Dinejot marketing site styles (single file, no JavaScript, no build step).
 * Warm Kitchen brand: cream background, ink text, paprika primary, butter accent.
 *
 * SERVED THROUGH PROPSHAFT, from app/assets/stylesheets. The layout links it
 * with stylesheet_link_tag "site", so the URL carries a content digest and can
 * be cached immutably for a year. There is no manual "?v=N" to remember to bump:
 * editing this file changes the digest, which changes the URL.
 *
 * Fonts are self hosted below, from app/assets/fonts (named in
 * config/initializers/assets.rb, so each file's logical path is its bare
 * filename and Propshaft rewrites the url() references here to fingerprinted
 * ones at compile time). Fraunces and Inter are both licensed under the SIL Open
 * Font License 1.1 (OFL); the full license for each ships alongside the fonts.
 *   Fraunces: Copyright 2018 The Fraunces Project Authors.
 *   Inter:    Copyright 2020 The Inter Project Authors.
 *
 * WOFF2, subset to Latin and Latin Extended plus the handful of symbols this
 * site renders (the breadcrumb chevron, the play triangle, the admin arrows).
 * The four TrueType originals were 831 KB together and the four woff2 files are
 * 123 KB, which is the single largest byte saving available on any page here.
 * The catalog is pure ASCII and the published locales are Latin script, so
 * nothing on the site falls outside the subset. Regenerate with pyftsubset if a
 * non Latin locale is ever published; see docs.
 *
 * font-display: swap on all four. Text paints immediately in the fallback and
 * reflows to the webfont when it arrives, so a slow font never leaves the page
 * blank. The fallback stacks in --body-font and --display-font are metrically
 * close enough that the swap does not shove the layout around.
 */

@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/Fraunces_400Regular-cba13579.woff2") format("woff2");
}
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/Fraunces_600SemiBold-b31fc77f.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/Inter_400Regular-4facb4c4.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/Inter_600SemiBold-1416da2f.woff2") format("woff2");
}

:root {
  --cream: #faf3e7;
  --cream-2: #f3e7d2;
  --paper: #fffaf0;
  --ink: #2b1d16;
  --ink-soft: #6b5647;
  --paprika: #d9482b;
  --paprika-dark: #c13a1c;
  --butter: #f0c948;
  --line: #e6d8c1;
  --radius: 18px;
  --wrap: 1080px;
  --body-font: "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --display-font: "Fraunces", Georgia, "Times New Roman", serif;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* Defensive only. Every row below is built to fit; this keeps a future
     overlong word from dragging the whole document wide on a phone. */
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--body-font);
  font-size: 18px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 {
  font-family: var(--display-font);
  font-weight: 600;
  line-height: 1.12;
  margin: 0 0 0.4em;
  letter-spacing: -0.01em;
}

p {
  margin: 0 0 1em;
}

a {
  color: var(--paprika-dark);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

a:hover {
  color: var(--paprika);
}

sup a {
  text-decoration: none;
  font-size: 0.7em;
  padding-left: 2px;
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 24px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: #fff;
  padding: 10px 16px;
  border-radius: 0 0 12px 0;
  z-index: 20;
}
.skip-link:focus {
  left: 0;
}

:focus-visible {
  outline: 3px solid var(--paprika);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Header */
.site-header {
  border-bottom: 1px solid var(--line);
  /* Nearly opaque: at 88% the hero headline ghosted through the sticky bar as
     the page scrolled under it. */
  background: color-mix(in srgb, var(--cream) 96%, transparent);
  position: sticky;
  top: 0;
  z-index: 10;
  backdrop-filter: saturate(1.2) blur(6px);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 64px;
  gap: 12px;
}
.site-header__inner > * {
  min-width: 0;
}
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  font-family: var(--display-font);
  font-weight: 600;
  font-size: 1.25rem;
  color: var(--ink);
  text-decoration: none;
}
.wordmark__dot {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  display: inline-block;
  background: url("/assets/brand-icon-c8ca07ba.svg") center / cover no-repeat;
}
.site-nav {
  display: flex;
  align-items: center;
  gap: 22px;
  font-size: 0.98rem;
  font-weight: 600;
  flex-shrink: 0;
}
.site-nav a {
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.site-nav a:hover {
  color: var(--paprika);
}

/* Small screens: the section links would push the header wider than the
   viewport, so they collapse and Sign in carries the header on its own.
   Features and Pricing are a scroll away on the page itself, and Support
   is still linked from the footer. */
@media (max-width: 599px) {
  .site-nav__link {
    display: none;
  }
  .wordmark {
    font-size: 1.15rem;
  }
}

/* Signed-in user menu. A NATIVE <details> disclosure: this site ships no
   JavaScript, so the browser's own open/close drives the dropdown (click the
   trigger to toggle, click away or press Escape to close). Like Sign in it never
   collapses, so it stays reachable at every width. Built on the Warm Kitchen
   tokens; the site has one intentional light palette (the header is always
   cream, in OS light and dark alike), so the menu matches it in both. */
.user-menu {
  position: relative;
  flex-shrink: 0;
}
.user-menu__trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px 4px 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  max-width: 46vw;
  /* Strip the browser's default disclosure triangle; the caret span replaces it. */
  list-style: none;
}
.user-menu__trigger::-webkit-details-marker {
  display: none;
}
.user-menu__trigger:hover {
  border-color: var(--paprika);
}
.user-menu__trigger:focus-visible {
  outline: 3px solid var(--paprika);
  outline-offset: 2px;
}
.user-menu__avatar {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 50%;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--paprika);
  color: #fff;
}
.user-menu__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.user-menu__initial {
  font-family: var(--display-font);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1;
}
.user-menu__name {
  font-weight: 600;
  font-size: 0.95rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.user-menu__caret {
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  border-right: 2px solid var(--ink-soft);
  border-bottom: 2px solid var(--ink-soft);
  transform: rotate(45deg);
  transition: transform 0.15s ease;
}
.user-menu[open] .user-menu__caret {
  transform: rotate(225deg);
}
.user-menu__panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 20;
  min-width: 184px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 12px 28px rgba(43, 29, 22, 0.16);
}
/* button_to wraps the sign-out button in a form; keep it flush in the panel. */
.user-menu__form {
  margin: 0;
}
.user-menu__item {
  display: block;
  width: 100%;
  padding: 10px 12px;
  border: none;
  border-radius: 9px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-weight: 600;
  font-size: 0.95rem;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.user-menu__item:hover,
.user-menu__item:focus-visible {
  background: var(--cream-2);
  color: var(--paprika-dark);
}
.user-menu__signout {
  color: var(--paprika-dark);
}
/* Admin section inside the user menu (admins only). */
.user-menu__divider {
  height: 1px;
  margin: 4px 6px;
  background: var(--line);
}
.user-menu__label {
  padding: 4px 12px 2px;
  color: var(--ink-soft);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
@media (prefers-reduced-motion: reduce) {
  .user-menu__caret {
    transition: none;
  }
}

/* Hero */
.hero {
  background: var(--cream);
  padding: clamp(40px, 8vw, 96px) 0 clamp(32px, 5vw, 56px);
}
.hero__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: center;
}
/* The art follows the copy at every width. On a phone a full height phone
   frame ahead of the headline pushed "Continue with Google" past the fold, so
   the words and the one live action come first and the product sits just under
   them; on desktop the same order puts the frame in the right hand column. */
.hero__art {
  order: 1;
  display: flex;
  justify-content: center;
}

/* Phone frame: a bezel drawn in CSS around a plain PNG screenshot, so the
   product art costs one image and no JavaScript. The image carries its own
   width/height attributes, so the box is reserved before it loads. */
.phone {
  width: clamp(210px, 58vw, 300px);
  padding: 9px;
  background: var(--ink);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 34px;
  box-shadow: 0 22px 50px rgba(43, 29, 22, 0.26);
}
.phone--small {
  width: clamp(180px, 50vw, 232px);
  padding: 7px;
  border-radius: 28px;
}
.phone__screen {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 26px;
  background: var(--cream);
}
.phone--small .phone__screen {
  border-radius: 21px;
}

.hero__title {
  font-size: clamp(2.6rem, 7vw, 4.4rem);
  margin-bottom: 0.2em;
}
.hero__lede {
  font-size: clamp(1.1rem, 2.4vw, 1.4rem);
  color: var(--ink-soft);
  max-width: 40ch;
}
.hero__note {
  color: var(--ink-soft);
  font-size: 0.95rem;
  margin-top: 14px;
}

/* The live action. A single anchor now (the sign-in POST moved to /account so
   this page could go back to being cacheable), so nothing here needs the form
   reset the old button_to wanted. */
.hero__actions {
  margin-top: 28px;
}
.hero__actions-note {
  color: var(--ink-soft);
  font-size: 0.95rem;
  max-width: 42ch;
  margin: 12px 0 0;
}

/* Store badges: inert placeholders until the apps ship, so they are drawn as
   dashed outlines in soft ink. Nothing here looks like the solid button that
   actually does something. */
.store-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}
.store-badges--center {
  justify-content: center;
}
.store-badge {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  padding: 9px 18px;
  min-width: 168px;
  background: transparent;
  color: var(--ink-soft);
  border-radius: 12px;
  border: 1px dashed color-mix(in srgb, var(--ink-soft) 45%, transparent);
  line-height: 1.2;
  cursor: default;
  user-select: none;
}
/* The live badge. Solid and tappable so the difference from the dashed
   "coming soon" placeholder beside it is obvious at a glance. It stays ink
   rather than paprika: "Continue with Google" is the one primary action in the
   hero, and two solid paprika targets would compete. */
a.store-badge--live {
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
  cursor: pointer;
  text-decoration: none;
  user-select: auto;
  transition: background 0.15s ease, transform 0.15s ease;
}
a.store-badge--live:hover {
  background: color-mix(in srgb, var(--ink) 86%, #fff);
}
a.store-badge--live:active {
  transform: translateY(1px);
}
/* The global focus ring rounds to 4px; match the badge so the ring hugs it. */
a.store-badge--live:focus-visible {
  border-radius: 12px;
}
@media (prefers-reduced-motion: reduce) {
  a.store-badge--live {
    transition: none;
  }
  a.store-badge--live:active {
    transform: none;
  }
}

.store-badge__kicker {
  font-size: 0.66rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.9;
}
.store-badge__name {
  font-family: var(--display-font);
  font-weight: 600;
  font-size: 1.15rem;
}

/* Sections */
.section-title {
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  text-align: center;
  margin-bottom: clamp(24px, 5vw, 48px);
}

/* Alternating bands, each opened by a hairline, so the page reads as
   distinct rooms rather than one continuous scroll. */
.features,
.pricing,
.cta {
  border-top: 1px solid var(--line);
}

.features {
  background: var(--cream-2);
  padding: clamp(36px, 6vw, 72px) 0 clamp(48px, 9vw, 96px);
}
.feature-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
.feature {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 26px 22px;
  box-shadow: 0 1px 0 rgba(43, 29, 22, 0.03);
}
.feature__title {
  font-size: 1.4rem;
  color: var(--paprika-dark);
}
.feature p {
  color: var(--ink);
  font-size: 16.5px;
  margin-bottom: 0;
}

/* Pricing */
.pricing {
  background: var(--cream);
  padding: clamp(48px, 9vw, 96px) 0;
}
.plan-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  max-width: 760px;
  margin: 0 auto;
}
/* Both cards open with a real trial badge of the same height, so the names and
   the prices sit on one line across the pair with no reserved spacer needed. */
.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  /* Top aligned, not centred: the two cards stretch to a shared height and the
     descriptions wrap to different depths, so centring slid the shorter card's
     name and price a few pixels down the page. */
  justify-content: flex-start;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px;
  text-align: center;
}
.plan--feature {
  border-color: var(--paprika);
  box-shadow: 0 12px 30px rgba(217, 72, 43, 0.12);
}
.plan__badge {
  display: inline-block;
  align-self: center;
  margin: 0 0 12px;
  padding: 5px 14px;
  /* Fixed line box, so the reserved row below is exactly this tall. */
  line-height: 20px;
  height: 30px;
  border-radius: 999px;
  background: var(--butter);
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.plan__name {
  font-size: 1.7rem;
  color: var(--paprika-dark);
}
.plan__price {
  margin: 0 0 2px;
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
}
.plan__amount {
  font-family: var(--display-font);
  font-weight: 600;
  font-size: 2.4rem;
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.plan__period {
  color: var(--ink-soft);
  font-size: 0.98rem;
}
.plan__alt {
  margin: 0 0 2px;
  color: var(--ink-soft);
  font-size: 0.95rem;
}
/* The page leads with the yearly number, so it has to say plainly that yearly
   is the cheaper way to buy. The figures are the two prices on this card:
   $4.99 every week is $259.48 a year against $39.99, and $7.99 every week is
   $415.48 against $59.99. */
.plan__save {
  margin: 0 0 14px;
  color: var(--paprika-dark);
  font-size: 0.9rem;
  font-weight: 600;
}
.plan__desc {
  color: var(--ink-soft);
  margin-bottom: 0;
}
.pricing__terms {
  max-width: 60ch;
  margin: 28px auto 0;
  text-align: center;
  color: var(--ink-soft);
  font-size: 0.9rem;
}

/* The hub shortlist band on the landing page. It used to borrow .features, which
   gave it that section's cream-2 surface and left it sitting against the cta
   band in the same colour, so the page ended in one undivided block. Its own
   class puts it back in the alternation (hero cream, features cream-2, pricing
   cream, shortlist cream-2, cta cream) and lets its lede keep a readable
   measure instead of running the full 1080px. */
.hub-shortlist {
  background: var(--cream-2);
  border-top: 1px solid var(--line);
  padding: clamp(36px, 6vw, 72px) 0 clamp(40px, 7vw, 80px);
}
.hub-shortlist__lede {
  max-width: 58ch;
  margin: -8px auto clamp(22px, 4vw, 34px);
  text-align: center;
  color: var(--ink-soft);
}
.hub-shortlist__all {
  margin: 18px 0 0;
  text-align: center;
  font-weight: 600;
}

/* CTA */
.cta {
  background: var(--cream);
  padding: clamp(48px, 9vw, 96px) 0;
  text-align: center;
}
.cta p {
  color: var(--ink-soft);
  max-width: 46ch;
  margin-inline: auto;
}
.cta__art {
  display: flex;
  justify-content: center;
  margin-top: clamp(28px, 5vw, 44px);
}
/* The closing shot is a crop of the day's card list rather than a whole
   screen, so it is mounted as a card. A device bezel around a landscape crop
   would read as a second phone lying on its side. */
.shot-card {
  width: min(100%, 420px);
  padding: 10px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: 0 16px 36px rgba(43, 29, 22, 0.16);
}
.shot-card__img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
}

/* Legal + support pages */
.legal {
  padding: clamp(40px, 7vw, 80px) 0 clamp(56px, 8vw, 96px);
}
.legal__inner {
  max-width: 760px;
}
.legal__title {
  font-size: clamp(2.2rem, 5vw, 3.2rem);
}
.legal__meta {
  color: var(--ink-soft);
  font-size: 0.95rem;
  margin-top: -0.4em;
}
.legal h2 {
  font-size: 1.5rem;
  margin-top: 1.8em;
  color: var(--paprika-dark);
}
.legal ul {
  padding-left: 1.2em;
}
.legal li {
  margin-bottom: 0.6em;
}
.legal__links {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  margin-top: 2.4em;
  padding-top: 1.4em;
  border-top: 1px solid var(--line);
  font-weight: 600;
}

.faq__item {
  border-top: 1px solid var(--line);
  padding: 18px 0;
}
.faq__item:last-of-type {
  border-bottom: 1px solid var(--line);
}
.faq__q {
  font-size: 1.2rem;
  margin-bottom: 0.4em;
}
.faq__item p {
  color: var(--ink);
  margin-bottom: 0;
}

/* Footer */
.site-footer {
  background: var(--ink);
  color: #f4ece0;
  padding: 44px 0;
}
.site-footer__inner {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.site-footer__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--display-font);
  font-weight: 600;
  font-size: 1.3rem;
  margin: 0;
  color: #fff;
}
/* The app icon, at signature size. It used to headline the hero; a product
   screenshot does that now. */
.footer-mark {
  display: inline-flex;
  flex-shrink: 0;
}
.footer-mark .brand-mark {
  display: block;
  width: 34px;
  height: 34px;
}
.site-footer__nav {
  display: flex;
  gap: 8px 22px;
  flex-wrap: wrap;
  font-weight: 600;
  margin: -6px 0;
}
/* Comfortable thumb targets: 44px tall, gaps kept wide enough that the
   boxes never touch. */
.site-footer__nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--butter);
  text-decoration: none;
}
.site-footer__nav a:hover {
  color: #fff;
}
.site-footer__note,
.site-footer__copy {
  margin: 0;
  color: rgba(244, 236, 224, 0.72);
  font-size: 0.9rem;
}

/* Responsive */
@media (min-width: 720px) {
  .hero__inner {
    grid-template-columns: 1.05fr 0.95fr;
  }
  .feature-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  /* Two lines of title on every card, wrapped or not, so the paragraphs below
     start on one level instead of stepping down card by card. */
  .feature__title {
    min-height: 2.24em;
  }
  /* Six cards in two columns leaves the lead and the tail card wide, which
     keeps every row full instead of stranding one card on its own. */
  .feature:first-child,
  .feature:last-child {
    grid-column: 1 / -1;
  }
  /* Those two span the full width and share a row with nobody, so they have no
     neighbour to line up with and keep their natural title height. */
  .feature:first-child .feature__title,
  .feature:last-child .feature__title {
    min-height: 0;
  }
  .plan-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 980px) {
  .feature-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  /* Six cards land as two clean rows of three, so nothing needs to span. */
  .feature:first-child,
  .feature:last-child {
    grid-column: auto;
  }
  /* Back in a shared row, so back to the reserved two line title. */
  .feature:first-child .feature__title,
  .feature:last-child .feature__title {
    min-height: 2.24em;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* Sign-in header link: quiet by default, a small pill on wider screens. */
.site-nav__signin {
  color: var(--paprika-dark);
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
@media (min-width: 720px) {
  .site-nav__signin {
    padding: 6px 14px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--paper);
  }
  .site-nav__signin:hover {
    border-color: var(--paprika);
    color: var(--paprika);
  }
}

/* Account + sign-in page */
.account {
  padding: clamp(40px, 7vw, 80px) 0 clamp(56px, 8vw, 96px);
}
.account__inner {
  max-width: 620px;
}
.account__title {
  font-size: clamp(2rem, 5vw, 3rem);
  margin-bottom: 0.6em;
}
.account__lede {
  color: var(--ink-soft);
  font-size: 1.05rem;
}
.account__fineprint {
  color: var(--ink-soft);
  font-size: 0.9rem;
  margin: 0;
}
.account__back {
  color: var(--ink-soft);
  font-size: 0.95rem;
  margin-top: 24px;
}

.account-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 28px;
  margin-bottom: 20px;
  box-shadow: 0 1px 0 rgba(43, 29, 22, 0.03);
}
.account-card--signin {
  text-align: center;
  padding: 34px 28px;
}
.account-card--quiet {
  background: var(--cream);
}
.account-card--empty {
  background: var(--cream-2);
}
.account-card__kicker {
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  color: var(--ink-soft);
  margin: 0 0 0.35em;
}
.account-card__name {
  font-size: 1.7rem;
  margin: 0 0 0.3em;
  color: var(--paprika-dark);
}
.account-card__plan {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0;
}
.account-card__status {
  color: var(--ink-soft);
  font-size: 0.95rem;
}
.account-card__note {
  color: var(--ink-soft);
  font-size: 0.9rem;
  margin: 14px 0 0;
}

.account-tag {
  display: inline-block;
  font-size: 0.74rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--ink-soft);
  background: var(--cream);
}
.account-tag--plan {
  color: var(--paprika-dark);
  border-color: var(--paprika);
  background: color-mix(in srgb, var(--paprika) 8%, var(--paper));
}
.account-tag--claimed {
  color: #3f6b2f;
  border-color: #cfe0bf;
  background: #eef5e6;
}

.member-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.member {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
}
.member:first-child {
  border-top: none;
}
.member__name {
  font-weight: 600;
}

.account-actions {
  margin-top: 8px;
}

/* Buttons */
.btn-signin,
.btn-signout,
.btn-cta {
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  border-radius: 12px;
  border: 1px solid transparent;
  padding: 13px 22px;
}
.btn-signin {
  display: inline-block;
  width: 100%;
  max-width: 320px;
  margin: 8px 0 22px;
  font-size: 1.05rem;
  background: var(--paprika);
  border-color: var(--paprika);
  color: #fff;
}
.btn-signin:hover {
  background: var(--paprika-dark);
}
.btn-signout {
  background: var(--paper);
  border-color: var(--line);
  color: var(--ink);
}
.btn-signout:hover {
  border-color: var(--paprika);
  color: var(--paprika);
}
/* The landing page's primary call to action: the only solid, tappable thing in
   the hero, against dashed placeholder badges. An <a>, not a <button>, so it
   needs the centring and the underline reset a button would have given free. */
.btn-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 320px;
  min-height: 52px;
  font-size: 1.05rem;
  text-align: center;
  text-decoration: none;
  background: var(--paprika);
  border-color: var(--paprika);
  color: #fff;
  box-shadow: 0 10px 24px rgba(193, 58, 28, 0.22);
  transition: background 0.15s ease, transform 0.15s ease;
}
.btn-cta:hover {
  background: var(--paprika-dark);
  color: #fff;
}
.btn-cta:active {
  transform: translateY(1px);
}
@media (prefers-reduced-motion: reduce) {
  .btn-cta {
    transition: none;
  }
  .btn-cta:active {
    transform: none;
  }
}
/* button_to wraps its button in a form; keep that form inline with no gap. */
.account form,
.account-card--signin form {
  margin: 0;
}

/* ==========================================================================
   Admin dish catalog: the reusable dish card + grid, and the per-dish edit
   form. Built on the Warm Kitchen tokens (:root above). The card carries no
   admin-only styling so the future public catalog can reuse it verbatim.
   ========================================================================== */

/* One-line note under the index header: edits are live DB changes a reseed can
   overwrite. */
.admin-note {
  margin: 0 0 20px;
  padding: 10px 14px;
  font-size: 0.9rem;
  color: var(--ink-soft);
  background: color-mix(in srgb, var(--butter) 16%, var(--paper));
  border: 1px solid var(--line);
  border-left: 4px solid var(--butter);
  border-radius: 10px;
}

/* Responsive card grid: a clean 3-4 columns on desktop, collapsing on phones. */
.dish-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 18px;
  margin: 8px 0 24px;
}

/* The reusable dish card. As an <a> it lifts on hover; as a <div> it is static. */
.dish-card {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  color: var(--ink);
  text-decoration: none;
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}
a.dish-card:hover {
  transform: translateY(-2px);
  border-color: var(--paprika);
  box-shadow: 0 12px 28px rgba(43, 29, 22, 0.12);
}
a.dish-card:focus-visible {
  outline: 3px solid var(--paprika);
  outline-offset: 2px;
}

/* The media slot. A REAL photo gets a 3:2 frame (none of the 843 dishes has one
   yet, but the frame is ready and declares its own box, so the day they arrive
   nothing on the page shifts). With no photo the band is deliberately much
   shorter: a 3:2 hole holding one emoji is what turned a page of 48 cards into a
   field of empty yellow rectangles with a little text underneath. */
.dish-card__photo {
  aspect-ratio: 3 / 2;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Butter gradient fallback behind the cuisine emoji, mirroring the mobile app. */
  background: linear-gradient(135deg, var(--butter), color-mix(in srgb, var(--butter) 35%, var(--paper)));
}
.dish-card__photo--placeholder {
  aspect-ratio: auto;
  height: 84px;
  /* A soft, off centre wash rather than a flat diagonal: at four cards across,
     nineteen cuisines repeat their tile constantly, so the band has to read as
     texture behind the name instead of as the subject of the card. */
  background:
    radial-gradient(120% 160% at 22% -40%, color-mix(in srgb, var(--butter) 92%, #fff) 0%,
      color-mix(in srgb, var(--butter) 42%, var(--paper)) 78%);
  border-bottom: 1px solid color-mix(in srgb, var(--butter) 55%, var(--line));
}
.dish-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.dish-card__emoji {
  font-size: 2.1rem;
  line-height: 1;
  /* The tile is decoration, not the subject; it sits back behind the name. */
  opacity: 0.92;
  filter: drop-shadow(0 2px 3px rgba(43, 29, 22, 0.14));
}

.dish-card__body {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 13px 16px 16px;
}
.dish-card__name {
  font-family: var(--display-font);
  font-size: 1.15rem;
  line-height: 1.22;
  margin: 0;
  /* Cancels the -0.01em the shared heading rule applies; at card size the tighter
     tracking made two word names look cramped. */
  letter-spacing: 0;
}
/* The cuisine reads as an eyebrow ABOVE the name now, the same shape the recipe
   page uses over its h1, so a card and the page it opens are recognisably the
   same design rather than two different ideas about the same dish. */
.dish-card__cuisine {
  order: -1;
  margin: 0;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--paprika);
}

/* How long, how much work, how hot: one muted line, middot separated. */
.dish-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 6px;
  margin: 1px 0 2px;
  font-size: 0.86rem;
  color: var(--ink-soft);
}
.dish-card__meta-item + .dish-card__meta-item::before {
  content: "\00B7";
  padding-right: 6px;
  color: color-mix(in srgb, var(--ink-soft) 55%, transparent);
}

/* Diet and health tags share ONE quiet weight. They used to be three different
   fills competing at the same size, which made a well tagged dish look like a
   warning label. Paprika is now reserved for the one row that is genuinely a
   caution, the allergen line below. */
.dish-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.dish-tag {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--line);
  white-space: nowrap;
}
.dish-tag--diet,
.dish-tag--health {
  background: color-mix(in srgb, var(--cream-2) 55%, var(--paper));
  color: var(--ink-soft);
}
.dish-tag--allergen {
  background: color-mix(in srgb, var(--paprika) 10%, var(--paper));
  border-color: color-mix(in srgb, var(--paprika) 30%, var(--line));
  color: var(--paprika-dark);
}

/* "Contains dairy, gluten". The label is not decoration: without it the pills
   beside it read equally well as "free from". */
.dish-card__contains {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  margin: 1px 0 0;
}
.dish-card__contains-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--paprika-dark);
}

.dish-card__season {
  margin: 3px 0 0;
  font-size: 0.78rem;
  color: var(--ink-soft);
  font-weight: 600;
}

/* Disabled pager buttons (first/last page). */
.pager .btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: default;
  pointer-events: none;
}

/* --- Per-dish edit form --------------------------------------------------- */

.dish-form {
  max-width: 760px;
}
.form-group {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--paper);
  padding: 18px 20px 22px;
  margin: 0 0 22px;
}
.form-group > legend {
  font-family: var(--display-font);
  font-weight: 600;
  font-size: 1.15rem;
  padding: 0 8px;
  color: var(--ink);
}

.field {
  display: block;
  margin: 0 0 16px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink-soft);
}
.field:last-child { margin-bottom: 0; }
.field__label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink-soft);
}
.field input[type="text"],
.field input[type="url"],
.field input[type="number"],
.field select,
.field textarea {
  display: block;
  width: 100%;
  margin-top: 6px;
  font: inherit;
  font-weight: 400;
  font-size: 0.95rem;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
}
.field textarea {
  resize: vertical;
  line-height: 1.5;
}
.field--check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 400;
  color: var(--ink);
}
.field--check input { margin: 0; }

/* Checkbox vocab groups: an inline, wrapping set of "check + label" pairs. */
.vocab-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
}
.vocab-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 400;
  color: var(--ink);
  font-size: 0.9rem;
}
.vocab-check label { margin: 0; cursor: pointer; }

/* The SAFETY panel: visually distinct, red-accented, flagged safety-critical. */
.safety-panel {
  border: 2px solid var(--paprika);
  background: color-mix(in srgb, var(--paprika) 6%, var(--paper));
}
.safety-panel > legend {
  color: var(--paprika-dark);
}
.safety-panel__note {
  margin: 0 0 16px;
  font-size: 0.85rem;
  color: var(--paprika-dark);
}

.form-errors {
  border: 1px solid var(--paprika);
  background: color-mix(in srgb, var(--paprika) 10%, var(--paper));
  border-radius: 12px;
  padding: 14px 18px;
  margin: 0 0 22px;
  color: var(--paprika-dark);
}
.form-errors__title { margin: 0 0 8px; font-weight: 700; }
.form-errors ul { margin: 0; padding-left: 20px; }

.form-actions {
  display: flex;
  gap: 12px;
  align-items: center;
}
.admin-back {
  color: var(--paprika);
  font-weight: 600;
  text-decoration: none;
}
.admin-back:hover { text-decoration: underline; }

/* --- Public recipe page (/recipes/:slug) --- */
.recipe {
  max-width: 680px;
  padding-top: 40px;
  padding-bottom: 72px;
}
/* The photo frame, for the day photos exist. It declares its own aspect ratio
   and the img declares width and height, so an image arriving late cannot shift
   the text under it. */
.recipe__hero {
  border-radius: 22px;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  display: grid;
  place-items: center;
  margin-bottom: 28px;
  box-shadow: 0 18px 40px rgba(43, 29, 22, 0.12);
}
.recipe__photo { width: 100%; height: 100%; object-fit: cover; display: block; }

/* The head. With no photo (all 843 dishes today) the cuisine tile is a medallion
   beside the title rather than a 400px band above it, so the h1 is the first
   thing painted and the first thing read. */
.recipe__head {
  margin-bottom: 18px;
}
.recipe__head--placeholder {
  display: flex;
  align-items: center;
  gap: 18px;
}
.recipe__mark {
  flex: none;
  width: 76px;
  height: 76px;
  display: grid;
  place-items: center;
  font-size: 34px;
  border-radius: 22px;
  background: radial-gradient(120% 150% at 26% -30%, #f7dd87 0%, #eec13b 78%);
  box-shadow: 0 8px 20px rgba(43, 29, 22, 0.14);
}
.recipe__headline {
  min-width: 0;
}
.recipe__eyebrow {
  color: var(--paprika);
  font-weight: 800;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0 0 6px;
}
.recipe__title {
  font-family: var(--display-font);
  font-size: clamp(2rem, 6vw, 3rem);
  line-height: 1.05;
  color: var(--ink);
  margin: 0;
  letter-spacing: -0.02em;
}
/* Up to eleven of these on a well tagged dish, so they are sized to read as one
   calm band under the lede rather than as eleven buttons. */
.recipe__chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 4px; }
.recipe__chip {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink-soft);
}
.recipe__chip--good { background: #e7eee2; color: #4f6b48; border-color: #d6e2ce; }

/* Section rhythm. The page is nine sections of prose, tables and lists in one
   680px column, and with nothing but a margin between them it read as one long
   scroll. A hairline above each heading turns it into rooms, the same device
   the landing page uses between its bands. The first section sits under the
   chips, so it opens without a rule. */
.recipe__section {
  margin-top: 40px;
  padding-top: 30px;
  border-top: 1px solid var(--line);
}
.recipe__section:first-of-type {
  padding-top: 0;
  border-top: 0;
}
.recipe__h2 {
  font-family: var(--display-font);
  font-size: 1.55rem;
  color: var(--ink);
  margin: 0 0 14px;
}
.recipe__videos { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.recipe__video {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: 14px;
  padding: 14px 16px;
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
}
.recipe__video:hover { border-color: var(--paprika); color: var(--paprika-dark); }
.recipe__video-play {
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 50%;
  background: var(--paprika);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 11px;
}
.recipe__list { margin: 0; padding-left: 1.2em; color: var(--ink); line-height: 1.7; }
.recipe__list li { margin-bottom: 6px; }
.recipe__cta {
  margin-top: 48px;
  background: var(--cream-2);
  border: 1.5px solid var(--line);
  border-radius: 22px;
  padding: 34px 28px;
  text-align: center;
}
.recipe__cta-title { font-family: var(--display-font); font-size: 1.6rem; color: var(--ink); margin: 0 0 10px; }
.recipe__cta-lede { color: var(--ink-soft); margin: 0 auto 22px; max-width: 460px; line-height: 1.5; }
.recipe__disclaimer { margin-top: 40px; color: var(--ink-soft); font-size: 0.85rem; text-align: center; }

/* --- The computed recipe sections -----------------------------------------
   "Serve it with", the allergen matrix, the nutrition bands, the timing prose
   and the three related rails. All of it is body copy first: these sections
   exist to be read and to be crawled, so nothing here hides text behind an
   interaction and every colour is one already defined at the top of this file. */
.recipe__lede {
  font-size: 1.12rem;
  line-height: 1.65;
  color: var(--ink);
  margin: 0 0 18px;
}
.recipe__prose {
  color: var(--ink-soft);
  line-height: 1.7;
  margin: 0 0 16px;
}
.recipe__footnote {
  color: var(--ink-soft);
  font-size: 0.85rem;
  line-height: 1.6;
  margin: 12px 0 0;
}

/* Screen reader only. Used for the facade's "play the video" label, which the
   triangle glyph next to it cannot carry on its own. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* THE COMPOSED PLATE. This is the one section on the site nobody else can
   render, and it used to look like three loose bordered boxes with a link in
   each. It is now framed as ONE object: a warm panel with a paprika edge, the
   role slots laid inside it as a grid so three slots do not become three wide
   near empty rows, and a divider between them so the whole thing reads as a
   plate being composed rather than as a list that happens to be nearby. */
.recipe__plate {
  background: color-mix(in srgb, var(--butter) 9%, var(--paper));
  border: 1px solid color-mix(in srgb, var(--butter) 62%, var(--line));
  /* Overrides the shared section hairline: the panel is its own separation, and
     the paprika edge is what marks this as the section that matters. */
  border-top: 3px solid var(--paprika);
  border-radius: 20px;
  padding: 26px 24px 24px;
}
.recipe__plate .recipe__prose {
  max-width: 56ch;
}
.plate {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: grid;
  gap: 0;
}
.plate__slot {
  padding: 16px 0;
  border-top: 1px solid color-mix(in srgb, var(--butter) 45%, var(--line));
}
.plate__slot:first-child {
  padding-top: 0;
  border-top: 0;
}
.plate__slot:last-child {
  padding-bottom: 0;
}
.plate__role {
  margin: 0 0 10px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--paprika);
}
.plate__dishes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 8px;
}
/* The grid item is the li; without this the anchor inside it keeps its content
   height and two tiles in one row end at different depths the moment one name
   wraps. */
.plate__dishes > li {
  display: flex;
}
.plate__dish {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 10px;
  padding: 9px 12px;
  background: var(--paper);
  border: 1px solid color-mix(in srgb, var(--butter) 45%, var(--line));
  border-radius: 14px;
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
  transition: border-color 0.12s ease, transform 0.12s ease;
}
.plate__dish:hover {
  border-color: var(--paprika);
  transform: translateY(-1px);
}
.plate__dish:hover .plate__name { color: var(--paprika-dark); }
.plate__mark {
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 11px;
  display: grid;
  place-items: center;
  font-size: 18px;
  background: color-mix(in srgb, var(--butter) 28%, var(--paper));
}
.plate__name { line-height: 1.25; }
.plate__meta { color: var(--ink-soft); font-weight: 400; font-size: 0.82rem; }
@media (prefers-reduced-motion: reduce) {
  .plate__dish { transition: none; }
  .plate__dish:hover { transform: none; }
}

/* THE ALLERGEN MATRIX. Ten rows on every page, present and absent, so a reader
   learns where to look and finds the same shape on the next dish. That content
   rule is deliberate and stays; what changed is that it now READS as a designed
   answer rather than as a dumped table.
     * It sits on paper inside a rounded frame, like every other panel here.
     * The common case (absent) is QUIET: a hairline outline, not a green pill.
       Ten loud green pills gave the non signal all the emphasis on the page.
     * The rare case (present) is LOUD: a paprika flag, a tinted row and a solid
       paprika edge down the left, so the eye lands on it without reading.
     * It scrolls inside its own box rather than dragging the page sideways on a
       phone when the swap column is there. */
.allergens__scroll {
  overflow-x: auto;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 16px;
}
.allergens {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}
.allergens__caption {
  text-align: left;
  color: var(--ink-soft);
  font-size: 0.85rem;
  padding: 14px 16px 10px;
}
.allergens th,
.allergens td {
  text-align: left;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
.allergens tbody tr:last-child th,
.allergens tbody tr:last-child td {
  border-bottom: 0;
}
.allergens thead th {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: color-mix(in srgb, var(--cream-2) 45%, var(--paper));
}
.allergens tbody th { font-weight: 600; color: var(--ink); }
/* With no swaps the table is two columns. The status is pushed to the right edge
   so the ten answers form one clean column to run an eye down, which is the same
   shape the nutrition panel below it uses for the same reason. */
.allergens--two-col thead th:last-child,
.allergens--two-col tbody td {
  text-align: right;
}
.allergens__row--present {
  background: color-mix(in srgb, var(--paprika) 6%, transparent);
}
.allergens__row--present > th:first-child {
  box-shadow: inset 3px 0 0 var(--paprika);
}
.allergens__flag {
  display: inline-block;
  border-radius: 999px;
  padding: 3px 11px;
  font-size: 0.8rem;
  font-weight: 700;
}
.allergens__flag--yes {
  background: var(--paprika);
  color: #fff;
}
.allergens__flag--no {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink-soft);
  font-weight: 600;
}
.allergens__none { color: var(--ink-soft); font-size: 0.85rem; }
.allergens td a { color: var(--paprika-dark); font-weight: 600; }

/* Nutrition, as labelled bands rather than invented numbers. A panel, so it
   reads as the same family of object as the plate and the matrix above it
   rather than as four loose lines of text with rules under them. */
.nutrition {
  margin: 0;
  display: grid;
  gap: 0;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 4px 16px;
}
.nutrition__row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  align-items: baseline;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.nutrition__row:last-child { border-bottom: 0; }
.nutrition__row dt { color: var(--ink-soft); margin: 0; font-size: 0.95rem; }
.nutrition__row dd { margin: 0; color: var(--ink); font-weight: 600; text-align: right; }
.nutrition__audited { color: #4f6b48; }

/* The click to load video facade. Sized by aspect ratio so the poster and the
   iframe that replaces it occupy exactly the same box: pressing play must not
   move the rest of the page. */
.video-facade {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  overflow: hidden;
  background: var(--ink);
  text-decoration: none;
}
.video-facade__poster {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* The hqdefault still is 4:3 with letterbox bars; this crops them off. */
  transform: scale(1.35);
}
.video-facade__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: var(--paprika);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 20px;
  box-shadow: 0 8px 22px rgba(43, 29, 22, 0.4);
}
.video-facade:hover .video-facade__play { background: var(--paprika-dark); }
.video-facade__title {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 26px 16px 12px;
  color: #fff;
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.4;
  background: linear-gradient(rgba(43, 29, 22, 0), rgba(43, 29, 22, 0.85));
}
.video-facade__frame {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: 16px;
  display: block;
}

/* The three related rails. */
.rail { margin-bottom: 26px; }
.rail__title {
  font-family: var(--display-font);
  font-size: 1.15rem;
  color: var(--ink);
  margin: 0 0 4px;
}
.rail__lede { color: var(--ink-soft); font-size: 0.9rem; margin: 0 0 10px; line-height: 1.6; }
.rail__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}
.rail__dish {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "mark name"
    "mark meta";
  align-items: center;
  column-gap: 10px;
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: 14px;
  padding: 11px 13px;
  color: var(--ink);
  text-decoration: none;
}
.rail__dish:hover { border-color: var(--paprika); }
.rail__mark { grid-area: mark; font-size: 20px; }
.rail__name { grid-area: name; font-weight: 600; font-size: 0.92rem; line-height: 1.3; }
.rail__meta { grid-area: meta; color: var(--ink-soft); font-size: 0.78rem; }

/* --- Hub pages ------------------------------------------------------------
   The head term landing pages (/dinner-recipes, /italian-recipes), the
   namespaced intersections (/dinner-recipes/italian) and the browse directory
   at /recipes. Everything here extends the Warm Kitchen tokens already defined
   at the top of this file; no new colour is introduced.
   ------------------------------------------------------------------------- */

.hub {
  padding: 28px 0 64px;
}

/* Breadcrumbs. Shared with the recipe page, which is where they matter most:
   they are the link that stopped every recipe from being an orphan. */
.breadcrumb {
  margin: 0 0 18px;
}
.breadcrumb__list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  font-size: 0.85rem;
  color: var(--ink-soft);
}
.breadcrumb__item + .breadcrumb__item::before {
  content: "\203A";
  padding-right: 6px;
  color: var(--line);
}
.breadcrumb__link {
  color: var(--ink-soft);
  text-decoration: none;
}
.breadcrumb__link:hover {
  color: var(--paprika);
  text-decoration: underline;
}
.breadcrumb__current {
  color: var(--ink);
  font-weight: 600;
}

.hub__head {
  max-width: 720px;
  margin-bottom: 30px;
}
.hub__title {
  font-size: clamp(2rem, 5vw, 2.8rem);
  margin: 0 0 14px;
}
/* 62 characters, not the 720px column's 85. A hub intro is three lines of body
   copy under a big display heading, and at 85 characters the eye loses the start
   of the next line, which is exactly where a visitor decides whether to scroll. */
.hub__intro {
  max-width: 62ch;
  color: var(--ink-soft);
  font-size: 1.05rem;
  line-height: 1.65;
  margin: 0 0 12px;
}
/* The dish count is the page's one hard number, so it gets a chip rather than a
   line of red text that reads as an error. */
.hub__count {
  display: inline-block;
  margin: 0;
  padding: 4px 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--paprika) 9%, var(--paper));
  border: 1px solid color-mix(in srgb, var(--paprika) 24%, var(--line));
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--paprika-dark);
}

.hub__answer {
  margin-top: 34px;
}
.hub__answer-title,
.hub__related-title {
  font-family: var(--display-font);
  font-size: 1.5rem;
  margin: 0 0 14px;
}
.hub__related {
  margin-top: 44px;
}
.hub__more {
  margin: 24px 0 0;
  font-weight: 600;
}

/* Link lists: the related hubs, the browse directory, the footer shortlist and
   the "more like this" block on a recipe page all use this one shape. */
.hub-links {
  margin: 0 0 28px;
}
.hub-links__title {
  font-family: var(--display-font);
  font-size: 1.15rem;
  margin: 0 0 12px;
  color: var(--ink);
}
.hub-links__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 8px;
}
.hub-links__list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 14px;
  color: var(--ink);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 600;
  transition: border-color 0.12s ease, color 0.12s ease;
}
.hub-links__list a:hover {
  border-color: var(--paprika);
  color: var(--paprika-dark);
}
.hub-links__count {
  flex: none;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ink-soft);
  background: var(--cream-2);
  border-radius: 999px;
  padding: 2px 9px;
}

/* Pagination. Every page number is a link, so no page of a large hub sits more
   than one hop from the first, for a reader or for a crawler. */
.pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 26px 0 6px;
}
.pager .btn {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 6px 16px;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 600;
}
.pager a.btn:hover {
  border-color: var(--paprika);
  color: var(--paprika-dark);
}
.pager__pages {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.pager__page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  min-height: 38px;
  padding: 0 8px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 600;
}
.pager__page:hover {
  border-color: var(--paprika);
  color: var(--paprika-dark);
}
.pager__page--current {
  background: var(--paprika);
  border-color: var(--paprika);
  color: #fff;
}
.pager__info {
  color: var(--ink-soft);
  font-size: 0.85rem;
  margin: 0 0 8px;
}

/* The hub shortlist in the footer of every page. Darker surface than the body
   lists, because the footer band is dark. */
.site-footer__hubs {
  width: 100%;
  margin: 4px 0 18px;
}
.site-footer__hubs-lead {
  display: inline-block;
  margin-bottom: 10px;
  color: rgba(244, 236, 224, 0.95);
  font-weight: 600;
}
.site-footer__hub-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
}
.site-footer__hub-list a {
  color: rgba(244, 236, 224, 0.72);
  font-size: 0.9rem;
  text-decoration: none;
}
.site-footer__hub-list a:hover {
  color: #fff;
  text-decoration: underline;
}

/* The "more like this" block on a recipe page sits between the steps and the
   store CTA, so it needs its own breathing room. */
.recipe__related {
  margin-top: 44px;
}