/* Kitchen Table palette, ported onto the v3 layout.
   ---------------------------------------------------------------------------
   Loaded after styles.css. Almost everything is done by re-pointing the tokens
   the layout already reads; the handful of rules at the bottom exist only
   because those values were written as literal hex in the original stylesheet
   and cannot be reached any other way.

   Colours are v1's, verbatim: cream ground, deep olive serif, plum as the one
   hot accent. The names below keep the v3 spelling (--forest, --terra) so the
   layout does not have to be rewritten -- only what they point at changes. */

:root{
  /* grounds */
  --bg:#F3EEE1;
  --cream:#F3EEE1;
  --paper:#FFFCF4;
  --paper-2:#EAE3D2;

  /* ink */
  --ink:#3D4433;
  --muted:#6E7560;
  --line:rgba(56,72,40,.16);

  /* the olive that replaces v3's forest green */
  --forest:#4F7322;
  --forest-deep:#2F3D20;
  --moss:#6E7560;

  /* the one hot accent: plum, used sparingly -- scroll bar, active dot,
     the italic half of a headline */
  --terra:#874D74;
  --gold:#B8860B;

  --shadow:0 20px 48px rgba(56,72,40,.20);
  --radius:8px;

  /* v1's serif. The body face stays a system sans: the serif is the voice,
     not the whole page. */
  --display:'Iowan Old Style','Palatino Linotype',Palatino,Georgia,'Times New Roman',serif;
}

/* The body ground is painted with two literal-rgba washes in styles.css that
   were mixed for the green palette; re-mix them for cream. */
body{
  background:
    radial-gradient(circle at 84% 8%,rgba(184,134,11,.13),transparent 22rem),
    radial-gradient(circle at 5% 32%,rgba(79,115,34,.11),transparent 24rem),
    var(--cream);
}

/* The paper grain sits at .22 opacity over a dark green in the original.
   On cream that reads as dirt, so it is lightened. */
body::before{opacity:.13}

/* --- values written as literal hex in styles.css --- */

/* the four promise tiles and the story photo's backing colour */
.promise-grid article{background:#2F3D20}
.story-photo{background:#3A4A28}

/* gold-on-dark labels: brass rather than the green palette's amber */
.promise-grid span,
.visit-section .eyebrow,
.visit-card span,
.story-year{color:#D8C48A}
.visit-copy h2 em{color:#D8C48A}

/* body copy inside the hero and the menu band */
.hero-intro{color:#4E563F}
.menu-section{background:#EAE3D2}

/* the search field's highlight flash when a dish is jumped to */
@keyframes item-highlight{0%,100%{background:var(--paper)}45%{background:#EFE4C9}}

/* Serif wants a little more room than the sans it replaces, and v1 sets its
   headings looser than v3 did. */
.hero h1,.section-heading h2,.anatomy-heading h2,.story-copy h2,
.burger-intro h2,.menu-heading h2,.faq-heading h2,.visit-copy h2{
  font-weight:600;
  letter-spacing:-.022em;
}
.hero h1{line-height:.92}
.hero-script,.section-heading h2 em,.story-copy h2 em,
.menu-heading h2 em,.burger-intro h2 em{font-style:italic}

/* v1 rounds its cards softly rather than the 24-30px pills v3 uses */
.signature-card,.craft-card,.anatomy-figure,.burger-figure,
.visit-card,.menu-item,.reviews-grid blockquote{border-radius:8px}
.promise-grid{border-radius:8px}


/* ============================================================
   Blocks the combined page adds
   ============================================================ */

/* --- the candidate label --------------------------------- */
/* These three pages exist to be compared, so each says which one it is.
   It is deliberately ugly-simple and sits clear of the header; it comes off
   the moment a candidate is chosen. */
.option-badge{
  position:fixed;left:14px;bottom:14px;z-index:80;margin:0;
  padding:7px 14px;border-radius:999px;
  background:var(--forest-deep);color:#F3EEE1;
  font-size:.68rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  box-shadow:0 8px 22px rgba(56,72,40,.28);pointer-events:none;
}
@media (max-width:900px){.option-badge{left:10px;bottom:10px;font-size:.6rem;padding:6px 11px}}

/* --- six kitchen rules ----------------------------------- */
/* One block replacing three that overlapped: the scrolling values strip, the
   four-promise grid and the rules list. Three across on a wide screen so the
   whole set is one glance rather than a scroll. */
.rules-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  margin:0;padding:0;list-style:none;
  background:var(--line);border:1px solid var(--line);border-radius:8px;overflow:hidden;
}
.rules-grid li{padding:26px 24px 28px;background:var(--paper)}
.rules-grid h3{
  margin:0 0 8px;font-family:var(--display);font-weight:600;
  font-size:1.24rem;letter-spacing:-.02em;color:var(--forest-deep);
}
.rules-grid p{margin:0;color:var(--muted);font-size:.9rem;line-height:1.6}
.rules-grid .em{font-weight:700;color:var(--forest);font-style:normal}
@media (max-width:900px){.rules-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.rules-grid{grid-template-columns:1fr}}

/* --- the bowl diagram, now a strip inside the menu -------- */
/* It lost its own screen in the trim. Beside its caption it costs a third of
   the height it did and still shows every label on the bowl. */
.menu-feature{
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(240px,.62fr);
  gap:30px;align-items:center;margin:0 0 34px;padding:20px;
  background:var(--paper);border:1px solid var(--line);border-radius:10px;
}
.menu-feature picture{display:block}
.menu-feature img{display:block;width:100%;height:auto;border-radius:6px}
.menu-feature figcaption{display:grid;gap:12px;justify-items:start}
.menu-feature figcaption span{
  color:var(--forest);font-size:.65rem;font-weight:900;
  letter-spacing:.16em;text-transform:uppercase;
}
.menu-feature figcaption strong{
  font-family:var(--display);font-weight:600;font-size:1.6rem;
  line-height:1.1;letter-spacing:-.025em;
}
@media (max-width:780px){
  .menu-feature{grid-template-columns:1fr;gap:18px;padding:14px}
  .menu-feature figcaption strong{font-size:1.3rem}
}

/* --- fitting the rules block into a pinned screen --------- */
@media (min-width:901px){
  .pin>.rules-section .section-heading{margin-bottom:30px}
  .pin>.rules-section .rules-grid li{padding:20px 20px 22px}
  .pin>.rules-section .rules-grid h3{font-size:1.12rem}
}

/* --- variant b: nothing pins, the page runs continuously --- */
/* With no pin the sections set their own rhythm, and v3's padding was tuned
   for panels that each owned a screen. Continuous scroll wants it tighter, or
   the page reads as a series of empty rooms. */
.variant-b .section{padding:clamp(64px,7vw,96px) 0}
.variant-b .story-section{padding-block:clamp(64px,7vw,96px)}
.variant-b .menu-section{padding-block:clamp(64px,7vw,96px)}
.variant-b .visit-section{padding-top:clamp(64px,7vw,96px);min-height:0}
.variant-b .faq-section{padding-bottom:clamp(64px,7vw,96px)}
.variant-b .reviews-section{padding-block:clamp(48px,6vw,80px)}
.variant-b .hero{min-height:92svh}
/* the dot rail is a pacing device for held panels; a continuous page has the
   header nav for the same job */
.variant-b .dots{display:none}

/* The serif sets taller than the sans it replaced, which pushed the craft
   cards 25px past the screen they are held on. The photographs give the
   height back. */
@media (min-width:901px){
  .pin>.craft-section .craft-card,
  .pin>.craft-section .craft-card-large{grid-template-rows:172px auto}
  .pin>.craft-section .craft-body{padding:18px 22px 22px}
}

/* --- reviews and questions, one screen ------------------- */
/* Apart, these were the two emptiest panels on the page. Side by side they
   fill a screen and cost one instead of two. */
.social-section{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(40px,6vw,86px);align-items:start;
}
.social-col>header{margin-bottom:24px}
.social-section h2{
  margin:0;font-family:var(--display);font-weight:600;
  font-size:clamp(2.4rem,4vw,3.7rem);line-height:.95;letter-spacing:-.03em;
}
.social-section h2 em{color:var(--terra);font-style:italic}
.social-section h3{
  margin:0;font-family:var(--display);font-weight:600;
  font-size:clamp(1.9rem,2.7vw,2.5rem);line-height:1;letter-spacing:-.025em;
}
.social-reviews blockquote{
  margin:0 0 16px;padding:22px 24px;
  background:var(--paper);border:1px solid var(--line);border-radius:8px;
}
.social-reviews blockquote p{margin:10px 0 14px;line-height:1.6}
.social-reviews footer{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline}
.social-reviews footer strong{font-weight:700;font-size:.9rem}
.social-reviews footer span{color:var(--muted);font-size:.76rem}
.social-faq .faq-list{border-top:1px solid var(--line)}
@media (max-width:900px){
  .social-section{grid-template-columns:1fr;gap:44px}
}

/* --- quote attribution ----------------------------------- */
/* The story quote is not the café's own writing: it is printed on page 2 of
   their menu under this name. The credit is set small and upright so it reads
   as a source line rather than part of the quote. */
.story-copy blockquote cite{
  display:block;margin-top:14px;
  font-family:var(--sans);font-style:normal;font-weight:700;
  font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  color:#D8C48A;
}
.story-copy blockquote cite::before{content:'\2014\00a0'}


/* ---- the owner's three favourites, 2026-09-02 ----------------------------
   Three cards, not four, and the first is wider because it is his number
   one. visibility rather than display keeps the header grid from jumping
   when the order button arrives. */
.start-section .signature-grid,
.pin>.start-section .signature-grid{grid-template-columns:1.34fr 1fr 1fr}
.start-section .signature-card-wide,
.pin>.start-section .signature-card-wide{grid-column:auto}

.site-header.cta-managed .header-cta{
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .34s var(--ease),transform .34s var(--ease),visibility .34s
}
.site-header.cta-managed.past-hero .header-cta{
  opacity:1;visibility:visible;transform:none
}

/* ---- the phone card carousel could not be scrolled, 2026-09-02 ----------
   Not a palette rule, so it survives the return to cream. .pin is a grid and
   its implicit column is `auto`, which sizes to MAX-CONTENT. The Start-here
   cards are a horizontal flex track, so that column measured 1034px inside a
   390px pin: overflow:hidden cut the last card off and the track had only
   28px of its own scroll left. minmax(0,1fr) caps the column at the pin's
   width and hands the overflow back to the carousel, where it belongs. */
.pin{grid-template-columns:minmax(0,1fr)}

/* ---- legibility of the secondary ink, 2026-09-03 ------------------------
   Measured on the rendered composite, not read off the hex. --muted at
   #6E7560 reached only 3.75:1 against the darkest ground body copy lands on
   (#EAE3D2, the menu band) and 4.14:1 on the page ground -- under the 4.5
   needed at 16px and below. It carries every section intro, the hero stat
   labels and the photo captions, so it is not decorative text.

   Both replacements keep the same hue and saturation; only lightness moves,
   so the palette he picked is unchanged. Each is checked against all three
   grounds -- #FFFCF4 card, #F3EEE1 page, #EAE3D2 menu band -- and the worst
   case is the number quoted. */
:root{
  --muted:#606654;   /* was #6E7560, worst case 3.75 -> 4.66 */
  --forest:#4C6E21;  /* was #4F7322, worst case 4.31 -> 4.61 */
}

/* ---- three more measured contrast failures, 2026-09-03 -----------------
   All three predate the dark experiment; they were only found because the
   sweep was finally run against this palette too.

   .story-year is a SOLID BRASS DISC. It was picking up the brass ink meant
   for gold-on-dark labels, so it was brass on brass at 1.89:1 -- the "Est."
   line was effectively invisible and only the 40px year read at all. */
.story-year{color:#202916}          /* 1.89 -> 4.64 on #B8860B */

/* The two washed-out lines on the dark Visit panel. The sign-off is
   decorative but it is still a sentence, and the payment line is the one
   place the service charge is stated. */
.visit-signoff{color:#B7BAAE}       /* 2.93 -> 5.89 on #2F3D20 */
.visit-card>p{color:#C6C9BE}        /* 3.94 -> 5.30 measured on the card */
/* The card is not the flat panel: it lays rgba(255,255,255,.06) over it,
   so a value computed against #2F3D20 alone came out a third of a point
   short in the real composite. This one is measured on the card. */

/* The two lines off the printed menu, on the last screen. Quieter than the
   payment line above them: they are legal small print, not information. */
.visit-terms{margin-top:14px!important;color:rgba(255,255,255,.42)!important;font-size:.66rem!important;line-height:1.75!important}

/* Shown only when the dish list has rows below its fold. */
.menu-scroll-hint{color:var(--forest)!important;font-weight:800!important;font-style:normal!important}

/* The social links are buttons now, so the plain-text styling is gone. Both
   extra rows sit closer than the default 38px so the four read as one list. */
.visit-actions-social,.visit-actions-second{margin-top:10px!important}

/* His running order puts the social line between the two button rows, so the
   second row needs its own top gap rather than the default 38px. */
.visit-actions-second{margin-top:18px!important}