/* ============================================================================
   FARRO, the homepage only (index.html links it after farro.css and scene.css).
   Built 2026-10-02 around the scroll scene. It adds homepage classes and a few
   homepage-scoped rules (`.home ...`); it never redefines a token or a shared
   class for the other pages. Colours, radii, shadows and type all come from
   farro.css's tokens.
   ========================================================================== */

/* ------------------------------------------------- the nav over the scene -- */
/* The scene starts under the nav, so its first frame is the pinned frame; the
   nav leaves while the scene holds the screen (scene.js toggles .is-scene on
   <html>), shadow and all, so no grey band is left across the scene's top. */
.home main > .sc:first-child { margin-top: -74px; }
.home .nav {
  transition: transform var(--t-move) var(--e-out),
              background-color var(--t-move) var(--e-out),
              box-shadow var(--t-move) var(--e-out);
}
.is-scene .nav, .is-scene .nav .btn-ink { box-shadow: none; }
/* below 900 farro.css hides the nav's "Get Farro"; on the homepage it stays beside the menu, so a phone is one tap
   from the badges at any point of the page (critic r1 M4) */
@media (max-width: 900px) {
  .home .nav .btn-ink { display: inline-flex; margin-inline-start: auto; }
  .home .nav-toggle { margin-inline-start: 0; } /* the button takes the free space, the menu sits after it */
}

/* the anchors other pages link to land under the nav, not behind it */
.home #features, .home #faq, .home #get { scroll-margin-top: 74px; }

/* ------------------------------------------------------ the hero (scene head) */
.hero-h1 { max-width: 13ch; }
.hero-lead {
  margin-top: var(--sp-5);
  max-width: 30ch;
  font-size: clamp(1.12rem, 1.5vw, 1.32rem);
  line-height: 1.42;
  font-weight: 500;
  font-variation-settings: "opsz" 18;
  color: var(--ink);
}
.hero-stores { margin-top: var(--sp-6); }

/* still (no JS, reduced motion): the head and the three steps beside the finished list */
.sc:not(.is-live) .sc-pin { padding-top: calc(74px + clamp(40px, 7vh, 72px)); }
.sc:not(.is-live) .sc-beats { margin-top: var(--sp-7); }
.sc-beat__t { font-weight: 700; }

/* live, desk: three lines in the head column, "shopping list again." whole on the last one, so the marker is one bar */
@media (min-width: 1000px) {
  .sc.is-live .hero-h1 { font-size: calc(var(--hw) / 10.2); line-height: 1; max-width: none; }
}

/* below 1000 the head sits inside the pinned stage above the phone, as on a desk, and leaves as the first step arrives
   (scene.js [farro]); the portfolio let it scroll away above the stage, which left a phone's first screen without the
   product. The phone gives the head its room, with air between the badges and the phone */
@media (max-width: 999px) {
  .sc .hero-h1 { max-width: 15ch; }
  .home .sc { --ph: min(calc(100svh - 380px), 560px, calc(56vw * 1341 / 620)); }
  .home .sc.is-live .sc-pin { height: 100svh; overflow: hidden; }
  .home .sc.is-live .sc-stage { position: absolute; inset: 0; height: auto; }
  .home .sc.is-live .sc-hero { position: absolute; z-index: 2; left: 0; right: 0; top: 0; width: auto; transform: none; padding: calc(74px + 22px) var(--gx) 0; }
  .home .sc.is-live .hero-lead { margin-top: var(--sp-4); }
  .home .sc.is-live .hero-stores { margin-top: var(--sp-5); }
  /* the phone moves on both axes below 1000: centred when it stands alone (scene.js [farro], --sx --sy) */
  .home .sc.is-live .sc-device { transform: translate(var(--sx, 0px), var(--sy, 0px)); }
}
@media (max-width: 460px) {
  .hero-stores { flex-wrap: nowrap; gap: 10px; }
  .hero-stores .store-badge img { height: 46px; }
}

/* ------------------------------------------ the list follows (interactive) -- */
/* Two of the app's own screens, rebuilt so they can be touched: the week as its day cards (white, today gold, an
   emptied day dashed like the app's Thursday) and the list as its aisle cards, both on the app's cream. */
.home .s-ink .hl { color: inherit; } /* farro.css paints .hl words ink, which on ink is nothing */
.follow-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 40px);
  align-items: start;
}
.follow-copy { grid-column: 1 / -1; margin-bottom: var(--sp-5); }
.follow-copy .t-lead { margin-top: var(--sp-4); color: var(--on-ink-soft); max-width: 40ch; }

.wk, .ls {
  background: var(--page);
  color: var(--ink);
  border-radius: var(--r-card);
  padding: 6px 14px 16px;
  box-shadow: var(--sh-raised);
}
.wk-h, .ls-top {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 14px 4px 10px;
}
.wk-h > span:first-child, .ls-h { font-size: 1.2rem; font-weight: 700; letter-spacing: -.02em; font-variation-settings: "opsz" 24; }

.wk-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.wk-dayc {
  background: var(--sheet);
  border-radius: 12px;
  padding: 12px 6px 6px;
  transition: background-color var(--t-state) var(--e-out);
}
.wk-dayc--today { background: var(--gold); }
/* a day with every meal taken off looks like the app's empty day: dashed, on the cream */
.wk.is-live .wk-dayc:not(:has(.wk-meal[aria-pressed="true"])) { background: transparent; outline: 1.5px dashed var(--outline); outline-offset: -1.5px; }
.wk-day { padding: 0 10px 2px; font-size: .9rem; font-weight: 600; color: var(--muted); display: flex; align-items: center; gap: 8px; }
.wk-dayc--today .wk-day { color: var(--muted-gold); }
.wk-today { font-size: .66rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); background: var(--ink); border-radius: var(--r-pill); padding: 3px 8px; }
.wk-meal {
  appearance: none; border: 0; background: none; font: inherit; color: inherit; text-align: left;
  width: 100%; min-height: 56px; padding: 6px 10px;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 12px; align-items: center;
  border-radius: 10px;
  cursor: default;
}
.wk.is-live .wk-meal { cursor: pointer; }
.wk-meal:focus-visible { outline-offset: -3px; } /* inside the row, so the ring never cuts the day's label */
.wk.is-live .wk-meal:hover { background: rgba(3, 24, 38, .04); }
.wk-d { display: none; }
.wk-name {
  grid-column: 1; justify-self: start;
  font-size: 1.12rem; font-weight: 700; letter-spacing: -.02em; font-variation-settings: "opsz" 24;
  /* the strike is drawn, so it can travel along the words when a meal comes off; the box is the words' own width */
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat; background-position: 0 58%; background-size: 0% 2px;
  transition: background-size var(--t-move) var(--e-out), color var(--t-state) var(--e-out);
}
.wk-meta { grid-column: 1; font-size: .9rem; font-weight: 500; color: var(--muted); }
.wk-dayc--today .wk-meta { color: var(--muted-gold); }
/* each meal carries a switch, the control everyone already knows: on = on the week. It shows only once home.js runs,
   so nothing looks pressable that is not. When the section enters the view, Monday's switch flips off once by itself,
   the list answers, and it flips back (home.js): one move, then the week is the visitor's. No hand, no label, no pulse:
   the references use a familiar control plus one move (D-affordance-references.md) */
.wk-ck {
  grid-column: 2; grid-row: 1 / span 2;
  display: none; position: relative; width: 46px; height: 28px; border-radius: var(--r-pill);
  background: var(--ink);
  transition: background-color var(--t-state) var(--e-out), box-shadow var(--t-state) var(--e-out);
}
.wk-ck::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--gold); transform: translateX(18px);
  transition: transform var(--t-move) var(--e-out), background-color var(--t-state) var(--e-out);
}
.wk.is-live .wk-ck { display: block; }
.wk.is-live .wk-meal:hover .wk-ck { box-shadow: 0 0 0 4px rgba(3, 24, 38, .10); }
.wk-meal[aria-pressed="false"] .wk-name { color: var(--muted); background-size: 100% 2px; }
.wk-dayc--today .wk-meal[aria-pressed="false"] .wk-name { color: var(--muted-gold); }
.wk-meal[aria-pressed="false"] .wk-ck { background: transparent; box-shadow: inset 0 0 0 1.5px var(--outline); }
.wk-meal[aria-pressed="false"] .wk-ck::after { transform: translateX(0); background: var(--outline); }
/* now you: after the demonstration the next meal's switch (Tuesday) calls for the finger until the visitor's first own
   tap: a clear ink ring leaves the switch and fades (2 px to 12 px out), and the knob itself leans a few px towards
   off and comes back, so the control says "slide me". One element, a 1.9 s loop with a rest in it. home.js sets
   .is-invite once and removes it for good, and never sets it with reduced motion */
.wk-ck { --kx: 18px; }
.wk.is-invite .wk-meal[data-meal="tue"] .wk-ck { animation: wk-ring 1.9s var(--e-out) infinite; }
.wk.is-invite .wk-meal[data-meal="tue"] .wk-ck::after { animation: wk-nudge 1.9s var(--e-out) infinite; }
@keyframes wk-ring {
  0% { box-shadow: 0 0 0 2px rgba(3, 24, 38, .55); }
  60%, 100% { box-shadow: 0 0 0 12px rgba(3, 24, 38, 0); }
}
@keyframes wk-nudge {
  0%, 45%, 100% { transform: translateX(var(--kx)); }
  18% { transform: translateX(calc(var(--kx) - 7px)); }
}
@media (prefers-reduced-motion: reduce) {
  .wk.is-invite .wk-meal[data-meal="tue"] .wk-ck, .wk.is-invite .wk-meal[data-meal="tue"] .wk-ck::after { animation: none; }
}
.wk-reset {
  appearance: none; border: 0; background: none; font: inherit; cursor: pointer;
  min-height: 44px; margin-block: -12px; padding: 0 4px;
  font-size: .92rem; font-weight: 700; color: var(--ink); text-decoration: underline; text-underline-offset: 3px;
}
.wk-reset[hidden] { display: none; }

/* the list: the app's aisle cards, every line able to close */
.ls-sum { font-size: .95rem; font-weight: 600; color: var(--muted); white-space: nowrap; }
.ls-aisle, .ls-row { display: grid; grid-template-rows: 1fr; transition: grid-template-rows var(--t-move) var(--e-out), opacity var(--t-state) var(--e-out); }
.ls-aisle > .ls-in, .ls-row > .ls-in { min-height: 0; overflow: hidden; }
.ls-aisle.is-out, .ls-row.is-out { grid-template-rows: 0fr; opacity: 0; }
.ls-a {
  padding: 12px 6px 6px;
  font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted);
}
.ls-card { background: var(--sheet); border-radius: 12px; padding: 2px 0; }
.ls-row > .ls-in {
  display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 12px;
  padding: 0 14px; /* the height comes from the name's padding: a min-height here would stop the row from closing */
}
.ls-box { width: 20px; height: 20px; border-radius: 6px; box-shadow: inset 0 0 0 2px var(--outline); }
.ls-name { font-size: 1.04rem; line-height: 22px; padding-block: 11px; font-weight: 600; letter-spacing: -.01em; }
.ls-q, .ls-n { display: inline-grid; overflow: hidden; vertical-align: bottom; }
.ls-q { justify-self: end; font-weight: 600; color: var(--ink-soft); font-variant-numeric: tabular-nums; border-radius: 6px; padding: 0 6px; margin-right: -6px; }
.ls-q > span, .ls-n > span { grid-area: 1 / 1; text-align: right; }
.ls-q.is-new { animation: ls-mark 900ms var(--e-out); }
@keyframes ls-mark { 0%, 35% { background: var(--gold); color: var(--ink); } 100% { background: transparent; } }
.ls-empty { padding: 18px 6px 8px; color: var(--muted); font-weight: 600; }

@media (max-width: 899px) {
  .follow-grid { grid-template-columns: 1fr; }
  .follow-copy { margin-bottom: var(--sp-3); }
}
/* on a phone the week is a row of meals you tap, so the list sits right under your thumb */
@media (max-width: 699px) {
  .wk { padding: 4px 12px 14px; }
  .wk-list { display: flex; flex-wrap: wrap; gap: 8px; }
  .wk-dayc, .wk-dayc--today { display: contents; }
  .wk-day, .wk-meta { display: none; }
  .wk-ck { width: 38px; height: 24px; --kx: 14px; }
  .wk-ck::after { width: 18px; height: 18px; transform: translateX(14px); }
  .wk-meal {
    width: auto; min-height: 44px; padding: 6px 8px 6px 6px; gap: 8px;
    display: inline-flex; align-items: center;
    background: var(--sheet); border-radius: var(--r-pill);
  }
  .wk-dayc--today .wk-meal { background: var(--gold); }
  .wk.is-live .wk-meal:hover { background: var(--sheet); }
  .wk.is-live .wk-dayc--today .wk-meal:hover { background: var(--gold); }
  .wk-d { display: inline-block; font-size: .78rem; font-weight: 700; color: var(--muted); padding: 4px 8px; border-radius: var(--r-pill); background: var(--page); }
  .wk-dayc--today .wk-d { background: var(--ink); color: var(--gold); }
  .wk-name { font-size: .98rem; font-weight: 600; }
  .wk-meal[aria-pressed="false"] { background: transparent; box-shadow: inset 0 0 0 1.5px var(--outline); }
  .wk.is-live .wk-dayc--today .wk-meal[aria-pressed="false"] { background: transparent; }
  .wk-meal[aria-pressed="false"] .wk-name, .wk-dayc--today .wk-meal[aria-pressed="false"] .wk-name { color: var(--muted); }
  .ls-name { padding-block: 9px; }
}

/* --------------------------------------------------------- the recipes ---- */
.keep-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(40px, 7vw, 120px);
  align-items: start;
}
.keep-shot { position: sticky; top: 110px; justify-self: center; }
/* the phone as on the scene: an ink body around the screen, the radii in the same proportion to the height
   (0.068 outside, 0.058 inside), written as percentages so it scales whole */
.keep-phone {
  width: clamp(240px, 26vw, 330px);
  padding: 2.83%;
  background: var(--ink);
  border-radius: 14.26% / 6.8%;
  box-shadow: 0 2px 4px rgba(107, 74, 18, .10), 0 30px 70px -20px rgba(107, 74, 18, .40);
}
.keep-phone img { display: block; width: 100%; height: auto; border-radius: 12.9% / 5.96%; }
.keep-body { margin-top: var(--sp-6); display: grid; gap: var(--sp-5); max-width: 36em; }
.keep-body p { font-size: clamp(1.06rem, 1.3vw, 1.18rem); line-height: 1.6; color: var(--ink); }
.keep-body .keep-last { font-size: clamp(1.25rem, 1.9vw, 1.6rem); line-height: 1.3; font-weight: 700; letter-spacing: -.02em; font-variation-settings: "opsz" 36; }

/* on a phone the picture comes right after the heading, not after a screen and a half of text (critic r1 S10) */
@media (max-width: 899px) {
  .keep-grid { grid-template-columns: 1fr; gap: var(--sp-6); }
  .keep-copy { display: contents; }
  .keep-copy > h2 { order: 1; }
  .keep-shot { position: static; order: 2; }
  .keep-body { order: 3; margin-top: 0; }
  .keep-phone { width: min(280px, 66vw); }
}

/* ------------------------------------------------------- kitchen notes ---- */
.notes-head { text-align: center; margin-bottom: var(--sp-6); }
.notes-head .t-lead { margin-inline: auto; margin-top: var(--sp-4); }
.notes-more { text-align: center; margin-top: var(--sp-6); }
/* the dish with its photograph takes the left, the two guides stack on the right, so no card is half empty white
   (critic r1 M3); build.py writes the dish first, by job */
@media (min-width: 768px) {
  .home .notes .post-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
  .home .notes .post-card[data-kind="recipe"] { grid-row: span 2; }
}
/* the card meta in farro.css is --outline (3.05:1, decorative grey); on the homepage it is read, so --muted (4.90:1) */
.home .post-card .meta { color: var(--muted); }

/* ---------------------------------------------------------------- faq ---- */
.faq-band { padding-top: 0; }
.faq-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.faq-grid > h2 { position: sticky; top: 110px; }
@media (max-width: 899px) {
  .faq-grid { grid-template-columns: 1fr; gap: var(--sp-6); }
  .faq-grid > h2 { position: static; }
}

/* ------------------------------------------------------------- the ask ---- */
/* farro.css lights the final gold room with a white radial glow; on this page the gold stays gold to the footer
   (critic r1 S9, design-critique §0) */
.home .cta-final::before { display: none; }

/* a small laptop: the head column is about 350 px, so the badges go down to 48 px tall to stay in one row (critic r2 S5) */
@media (min-width: 1000px) and (max-width: 1199px) {
  .hero-stores { flex-wrap: nowrap; gap: 10px; }
  .hero-stores .store-badge img { height: 48px; }
}