/* 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}
}