/* ═══════════════════════════════════════════════════════════════════════════
   AMA — a kitchen that cooks the way it is cooked at home

   MOBILE FIRST, AND WHY IT IS WRITTEN THIS WAY
   Everything above the first media query is the phone. The wide-screen rules
   are additions, in `min-width` blocks, and they only ever add.

   This is not a style preference. Written the other way round — desktop first,
   phone as a `max-width` correction at the bottom — the phone gets the wide
   layout minus a patch, and every value that was never patched leaks through
   at the wrong size. That is exactly what happened here: three grid columns
   declared `minmax(16rem,1fr)` were fine at 1440 and pushed 86px of text off
   the right edge of a 390px screen, where it was invisibly clipped mid-word.
   Nobody looking at the desktop view could have seen it. In this order the
   phone value is the one you cannot forget to write, because it is the only
   one that is required.

   The audience makes it the correct order twice over: most visits are from a
   phone, and the readers are over 65.

   COLOUR ROLES
     Deep teal   #1B4B51 / #27676E   the main colour. Most of the page is this.
     Terracotta  #B75D40             secondary — buttons, marks, emphasis
     Cream       #E7DBCA / #FAF5EC   the neutral base, and the light sections
     Mustard     #D9A239             accent — ornament, rules, the price
     Olive       #676E45             accent — ornament, small marks

   WHAT EACH COLOUR MAY CARRY, MEASURED
   Text on the teal ground:
     cream-lighter on deep teal  10.4 : 1   ← body text
     mustard-soft  on deep teal   6.7 : 1   ← headings
     white         on deep teal  11.5 : 1
   Text on the cream ground:
     ink           on cream      11.2 : 1   ← body text
     deep teal     on cream       8.1 : 1   ← headings
     rust          on cream       3.7 : 1   ← large type only, never body
     mustard       on cream       1.8 : 1   ← never carries text at all
   White on terracotta is 5.2 : 1, which is what makes the buttons legal.

   Teal-dominant is the more legible arrangement, not just the warmer one:
   light text on deep teal clears 10 : 1 without effort, where the same
   sentence on cream has to be fought up to 7 : 1.

   READERS ARE OVER 65, so: 20px base, everything in rem, 60px minimum touch
   targets, no prose below 19px at any width, nothing behind a hover, no
   motion that moves what is being read. The ornament is decoration only — it
   never carries meaning, and it sits at low opacity behind text that is
   already at full contrast.

   THE BREAKPOINTS, and what each one is for. They are in `em`, which inside a
   media query means the browser's own initial size — never the root size this
   stylesheet sets, and never the one the text-size buttons set. So growing
   the text does not jump the layout to a different one, which it would if
   these were written in rem-of-the-page or in px against a zoomed viewport.
     40em   640px   one column becomes two; the phone bar gives way to the
                    header; the plate goes back to its full margins
     52em   832px   the hero takes its two columns and the photograph moves
                    back beside the words
     56.25em 900px  the braid down the outer edges of the page
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  /* ── the five, as given ────────────────────────────────────────────────
     terracotta #B75D40 · mustard #D9A239 · teal #27676E
     olive      #676E45 · cream   #E7DBCA
     Everything below is one of those five, or a step darker or lighter of
     one, derived only where a measured contrast made it necessary. */
  --terracotta:#B75D40;      /* the frame. Carries no text, so it can stay bright */
  --terracotta-btn:#9C4930;  /* buttons: white on this is 6.2:1, on the bright one 4.5 */
  --terracotta-deep:#7E3A26; /* the pressed state, and the shadow under a button */

  --teal:#27676E;            /* as given */
  --teal-deep:#1B4B51;       /* the inner panel: cream on it is 8.9:1 */
  --teal-deepest:#14383D;    /* header and footer */

  --mustard:#D9A239;         /* as given. Never carries text — 1.9:1 on cream */
  --mustard-soft:#EBC47E;    /* headings on the teal: 5.9:1 */

  --olive:#676E45;           /* as given */
  --olive-pale:#A3AC81;      /* marks and borders on the teal, never text */

  --cream:#E7DBCA;           /* as given — the ground */
  --cream-light:#F2E9DC;
  --cream-lighter:#FAF5EC;   /* cards, and text on the teal at 8.9:1 */

  --ink:#2A2118;             /* body text on cream: 13.1:1 */
  --ink-soft:#4A3E30;        /*                      8.6:1 */

  --serif:"Lora",Georgia,"Times New Roman",serif;
  --sans:"Source Sans 3","Segoe UI",-apple-system,BlinkMacSystemFont,Helvetica,Arial,sans-serif;

  --wrap:64rem;
  --radius:18px;

  /* the height the fixed bar at the foot of a phone screen occupies, so that
     the page bottom and every scroll target can be told to clear it */
  /* The height the fixed bar at the foot of a phone screen occupies, so the
     page bottom and every scroll target can be told to clear it. */
  --bar:4.4rem;

  /* ── ornament ────────────────────────────────────────────────────────────
     The patterns (--pat-lattice, -latticeGold, -latticePanel, -chain, -fringe
     and -fringeB/R/V) are defined in assets/patterns.css, which is GENERATED.
     The readable SVG for each one lives in tools/build-patterns.mjs — edit
     there, then run `node tools/build-patterns.mjs`. Never edit patterns.css
     by hand.

     -latticeGold and -latticePanel are the same drawing; the panel one holds
     its stones at a third, because that is the copy of it with reading on
     top of it. Header, footer, bottom bar and the cream ground keep theirs. */
}

*,*::before,*::after{box-sizing:border-box}
html{font-size:125%;-webkit-text-size-adjust:100%}   /* 20px base */

/* An anchor must not land under the fixed bar at the foot of the screen, and
   on a wide screen must not land under the sticky header. Set on the scroll
   container so it applies to every target, including ones added later. */
html{scroll-padding-bottom:calc(var(--bar) + 1rem)}

/* ── LAYER 1 · the ground ────────────────────────────────────────────────
   Cream, printed all over with the tile. Everything else is set on top of
   this and never covers all of it — the cream showing between the panels is
   what makes the page read as layers rather than as stripes. */
body{
  margin:0;background:var(--cream-light);color:var(--ink);
  font-family:var(--sans);font-size:1rem;line-height:1.65;
  -webkit-font-smoothing:antialiased;position:relative;
  padding-bottom:var(--bar);          /* clears the phone bar; removed at 40em */
  overflow-x:hidden;                  /* a belt to the braces below */
}
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:var(--pat-lattice);background-size:72px 72px;opacity:.62;
}
body > *{position:relative;z-index:1}
img{max-width:100%;display:block}
:focus-visible{outline:4px solid var(--mustard);outline-offset:3px;border-radius:6px}

.wrap{width:min(var(--wrap),100% - 2.5rem);margin-inline:auto;position:relative;z-index:2}
.narrow{max-width:38rem}

.skip{
  position:absolute;left:1rem;top:-6rem;z-index:100;
  background:var(--mustard);color:var(--ink);padding:1rem 1.5rem;border-radius:0 0 12px 12px;
  text-decoration:none;font-weight:700;transition:top .2s;
}
.skip:focus{top:0}

/* ══════════ type ══════════
   Every size starts at the phone value and grows with the viewport. The lower
   bound of each clamp is therefore a real decision rather than a leftover: it
   is the size the sentence is read at on the screen most people will use.

   Nothing here goes below .95rem — 19px — for anything that is a sentence.
   The two exceptions are the standing tagline under the name and the TODAY
   badge, which are labels, and they stop at 16px. */
h1,h2,h3{font-family:var(--serif);font-weight:600;line-height:1.15;margin:0 0 .6em}
h1{font-size:clamp(1.7rem,5.5vw,3.5rem);letter-spacing:-.015em}
h2{font-size:clamp(1.7rem,3.6vw,2.5rem)}
h3{font-size:clamp(1.2rem,2.2vw,1.55rem)}
p{margin:0 0 1.1em;max-width:34em}
.lead{font-size:clamp(1.1rem,1.9vw,1.4rem);line-height:1.55}
strong{font-weight:600}

/* on the teal ground */
.on-dark{color:var(--cream-lighter)}
.on-dark h2,.on-dark h3{color:var(--mustard-soft)}
.on-dark p{color:#F0E7D9}
.on-dark a{color:var(--mustard-soft)}

/* on the cream ground */
.on-cream{background:transparent;color:var(--ink)}
.on-cream h2,.on-cream h3{color:var(--teal-deep)}
.on-cream p{color:var(--ink-soft)}
.on-cream a{color:var(--teal-deep)}

/* ══════════ ornament ══════════ */
section{padding:clamp(1.6rem,6vw,5rem) 0;position:relative}

/* ── LAYER 2 · the plate ─────────────────────────────────────────────────
   One panel, not two. The teal and the terracotta are not a thing and the
   thing around it — they are one enamelled surface with a terracotta rim, the
   way a cloisonné plate is. Nothing is stacked and nothing shows through
   anything: a single plate, the lattice laid over it in gold, and the lobed
   band running round all four edges.

   ON A PHONE the rim thins to 12px and the reading starts 34px in. The frame
   is the identity, so it stays — but a mount sized for a 1440px window eats a
   fifth of a 390px one, and the heading starts breaking after three words. */
.panel{
  /* How far the terracotta soaks in. The reading has to begin OUTSIDE this,
     or the warm colour is behind the words — at a rim of 122px with the text
     starting at 80px, 16% of the background behind body text measured under
     the contrast floor. Rim, vertical padding and the width of the wrap are
     one set of three numbers and have to move together. */
  --rim:.6rem;
  /* The extra light some panels want, as a layer rather than as a second copy
     of this whole background. The hero used to restate all eleven layers just
     to add one radial, so for months every edit to the plate silently missed
     it — twice that shipped as a visible bug. A panel that wants its own light
     now sets this one property. */
  --plate-light:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0));

  position:relative;isolation:isolate;overflow:hidden;
  width:min(68rem,100% - 1.6rem);
  margin:1.2rem auto;
  padding:2.1rem 0;
  color:var(--cream-lighter);
  border-radius:34px;
  background:
    /* the lobed band, running all four edges, each hanging inward */
    var(--pat-fringe)  left top/60px 18px repeat-x,
    var(--pat-fringeB) left bottom/60px 18px repeat-x,
    var(--pat-fringeV) left top/18px 60px repeat-y,
    var(--pat-fringeR) right top/18px 60px repeat-y,
    /* the lattice, over the whole plate — the panel variant, whose stones are
       held down because there is reading underneath them */
    var(--pat-latticePanel) center/72px 72px repeat,
    /* Solid terracotta to --rim and then teal, with nothing in between. Two
       stops at the same position is how a hard edge is written in a gradient;
       there is no fade to get wrong and no muddy band where the two colours
       average into brown. Four of them, one per edge, make the frame — and
       because they are gradients rather than a border, the lattice above runs
       across the join without a seam.

       Four edge gradients rather than one radial: a radial sized to a wide box
       gives an ellipse, so the warm colour floods the middle where the reading
       is and leaves the corners bare. Measured, that put 2.4% of the
       background behind body text under the contrast floor.

       The stops are --rim itself, not percentages. A percentage stop in a
       linear-gradient is measured along the WHOLE box, not along the distance
       to the last stop — so `.4 30%` on a 900px-tall panel meant 270px, the
       browser then had to push the 115px end-stop out past it to keep the
       stops in order, and the terracotta smeared across the entire plate. It
       looked like a colour choice. It was an arithmetic error, and it took
       measuring the render to see it at all. */
    linear-gradient(to bottom,var(--terracotta) 0,var(--terracotta) var(--rim),rgba(183,93,64,0) var(--rim)),
    linear-gradient(to top,   var(--terracotta) 0,var(--terracotta) var(--rim),rgba(183,93,64,0) var(--rim)),
    linear-gradient(to right, var(--terracotta) 0,var(--terracotta) var(--rim),rgba(183,93,64,0) var(--rim)),
    linear-gradient(to left,  var(--terracotta) 0,var(--terracotta) var(--rim),rgba(183,93,64,0) var(--rim)),
    var(--plate-light),
    #143B41;
  box-shadow:
    0 26px 54px -26px rgba(20,56,61,.8),
    0 0 0 1px rgba(242,220,172,.34) inset;
}
/* the inner element is only a place to put padding — the surface is one */
.panel-inner{position:relative;z-index:1;background:none;box-shadow:none;padding:0}

/* the reading starts past the rim, so no word ever sits on the warm colour */
.panel-inner > .wrap{position:relative;z-index:1;width:min(76rem,100% - 3.4rem)}

/* ── sections that sit straight on the cream ground ──────────────────────
   The ground is patterned and body text has to sit on it. A wide, soft veil of
   cream under each block of reading keeps the lattice behind the words — the
   measured 11 : 1 is against flat cream, and a line of ornament crossing a
   letter costs more of that than the number suggests. */
.on-ground{position:relative;background:transparent;color:var(--ink)}
.on-ground::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(80% 60% at 30% 30%,
    rgba(250,245,236,.94) 0%,rgba(250,245,236,.7) 45%,rgba(250,245,236,0) 100%);
}
/* A section on the cream has no frame and no mount, so on its own its text
   would start well inboard of the text in the panel above it. This lines the
   two up: same outer width as a panel, and an inset equal to the rim plus the
   panel's own gutter. The two numbers move together at every breakpoint. */
.on-ground > .wrap{
  position:relative;z-index:1;
  width:min(68rem,100% - 1.6rem);
  padding-inline:1.7rem;
}
.on-ground h2{color:var(--terracotta-deep)}      /* 7.5:1 — warm, and still safe */
.on-ground h3{color:var(--teal-deep)}
.on-ground p{color:var(--ink-soft)}

.patterned{position:relative;overflow:hidden}
.patterned::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:var(--pat-latticeGold);background-size:72px 72px;
}
.on-cream.patterned::before{background-image:var(--pat-lattice);background-size:72px 72px}

/* the woven band that separates one room from the next */
.rule-band{height:22px;background:var(--pat-fringe) repeat-x center/60px 18px;opacity:.9;
  width:min(76rem,100% - 2.2rem);margin:0 auto}

/* a short band used inside a section, under a heading.
   The rule under a heading uses the UPWARD band — domes standing on a line,
   like a row of covered dishes. The downward one is the same drawing hanging
   the other way, and it reads as a fringe rather than as a row of lids. */
.flourish{width:9rem;height:18px;background:var(--pat-fringeB) repeat-x left bottom/60px 18px;margin:.3rem 0 1.4rem}
.flourish.center{margin-inline:auto}

/* ══════════ header ══════════
   The same two layers as everything else: a teal ground with the fine texture
   printed on it, closed with a woven kilim edge rather than a drawn line.

   On a phone it scrolls away. A sticky header carrying the name and a button
   costs a fifth of the screen and still wraps, and the way out has moved to
   the bar at the foot of the screen, where a thumb already is. */
header{
  position:relative;z-index:40;
  background:
    radial-gradient(120% 180% at 12% 0%,rgba(39,103,110,.75),rgba(39,103,110,0) 70%),
    var(--teal-deepest);
  box-shadow:0 6px 24px -8px rgba(20,56,61,.55);
}
header::before{                       /* the texture */
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:var(--pat-latticeGold);background-size:52px 52px;
}
header::after{                        /* the woven edge */
  content:"";position:absolute;left:0;right:0;bottom:-16px;height:16px;z-index:2;
  background:var(--pat-fringe) repeat-x left top/52px 16px;
}
header .bar{position:relative;z-index:1}
.bar{
  width:min(76rem,100% - 2.2rem);
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.6rem 0;flex-wrap:wrap;
}
.logo{
  font-family:var(--serif);font-weight:600;font-size:1.6rem;letter-spacing:.12em;
  color:var(--cream-lighter);text-decoration:none;
  display:flex;align-items:center;gap:.7rem;white-space:nowrap;
}
.logo svg{flex:none}
/* The name never breaks; the standing line under it may. At 320px the two
   together are 50px wider than the screen, and a name that wraps is a
   different name — so the wrapping is spent on the line that can afford it. */
.logo .sub{
  display:block;white-space:normal;
  font-family:var(--sans);font-size:.8rem;font-weight:600;
  letter-spacing:.1em;color:var(--mustard-soft);margin-top:-.1rem;
}
/* the header's own help button belongs to the wide layout; on a phone the
   same object is in the bar at the foot of the screen, in the same words */
.bar .help-link{display:none}

/* ══════════ get help ══════════
   Sits exactly where a telephone number would have, and behaves the same:
   always present, never moving, never folding into a menu. */
.help-link{
  display:inline-flex;align-items:center;gap:.6rem;
  min-height:60px;padding:.5rem 1.4rem;border-radius:999px;
  background:var(--terracotta-btn);color:#fff;text-decoration:none;
  font-size:1.15rem;font-weight:700;white-space:nowrap;
  box-shadow:0 3px 0 var(--terracotta-deep);
}
.help-link:hover,.help-link:focus-visible{background:var(--terracotta-deep);box-shadow:0 3px 0 var(--terracotta-deep);color:#fff}

.help-cards{display:grid;gap:.9rem;margin:1.6rem 0 0;grid-template-columns:1fr}
/* On a phone the icon sits beside the TITLE and the sentence runs the full
   width of the card underneath. Beside the whole block it left 230px for a
   40-word explanation, which came out nine lines tall and made three cards
   into two screens. `display:contents` on the text wrapper lets the two parts
   of it become grid items in their own right, so no markup had to change. */
.help-card{
  display:grid;grid-template-columns:auto 1fr;
  column-gap:.9rem;row-gap:.45rem;align-items:center;text-align:left;
  padding:1.2rem;border-radius:var(--radius);
  background:var(--cream-lighter);color:var(--ink);
  border:2px solid rgba(235,196,126,.5);text-decoration:none;
  font:inherit;cursor:pointer;width:100%;
}
.help-text{display:contents}
.help-text b{grid-column:2}
.help-text span{grid-column:1 / -1}
.help-card:hover,.help-card:focus-visible{border-color:var(--mustard);background:#fff}
.help-icon{
  flex:none;width:3.2rem;height:3.2rem;border-radius:50%;
  background:var(--mustard);color:var(--terracotta-deep);
  display:grid;place-items:center;border:3px solid var(--terracotta-btn);
}
.help-icon svg{width:1.7rem;height:1.7rem}
.help-text b{display:block;font-family:var(--serif);font-size:1.2rem;color:var(--teal-deep);margin-bottom:.25rem}
.help-text span{display:block;font-size:1rem;line-height:1.6;color:var(--ink-soft)}

/* text size, on the page. Browser zoom exists; a great many readers over 65
   do not know that it does, and will squint instead. */
.textsize{
  display:flex;align-items:center;flex-wrap:wrap;gap:.7rem;margin-top:2rem;
  padding:1rem 1.2rem;border-radius:var(--radius);
  background:rgba(250,245,236,.1);border:1px solid rgba(235,196,126,.34);
}
.textsize-label{font-weight:700;margin-right:.3rem;color:var(--mustard-soft);width:100%}
.textsize button{
  flex:1 1 auto;min-height:60px;padding:.5rem 1rem;border-radius:12px;cursor:pointer;
  display:inline-flex;align-items:baseline;justify-content:center;gap:.5rem;
  font-family:var(--sans);font-size:1rem;font-weight:600;
  background:transparent;color:var(--cream-lighter);
  border:2px solid rgba(235,196,126,.5);
}
.textsize button[aria-pressed="true"]{background:var(--mustard);color:var(--ink);border-color:var(--mustard)}

.hand-off{margin-top:1.6rem;padding-top:1.4rem;
  background:var(--pat-fringe) repeat-x left top/60px 18px;
  font-size:1rem;color:var(--ink-soft)}
.link-btn{
  display:block;margin-top:.5rem;padding:.6rem 0;min-height:60px;
  background:none;border:0;cursor:pointer;
  font:inherit;font-weight:700;color:var(--terracotta-deep);
  text-decoration:underline;text-underline-offset:5px;text-align:left;
}
.link-btn:hover,.link-btn:focus-visible{color:var(--terracotta-deep)}

/* ══════════ buttons ══════════
   Full width on a phone, and stacked. A row of two buttons on a 390px screen
   gives each of them about 150px, which is not enough for "Start this week"
   to stay on one line — and a two-line label inside a button reads as a
   paragraph that happens to be coloured. */
.btn{
  display:flex;align-items:center;justify-content:center;gap:.7rem;
  width:100%;min-height:66px;padding:.8rem 1rem;border-radius:14px;
  font-family:var(--sans);font-size:1.15rem;font-weight:700;text-align:center;
  text-decoration:none;border:3px solid transparent;cursor:pointer;
}
.btn-primary{background:var(--terracotta-btn);color:#fff;box-shadow:0 4px 0 var(--terracotta-deep)}
.btn-primary:hover,.btn-primary:focus-visible{background:var(--terracotta-deep);box-shadow:0 4px 0 #7E3A26;color:#fff}
.btn-ghost{background:transparent;color:var(--mustard-soft);border-color:var(--mustard)}
.btn-ghost:hover,.btn-ghost:focus-visible{background:var(--mustard);color:var(--ink)}
.btn-row{display:grid;gap:.8rem;margin-top:.6rem}

/* ══════════ hero ══════════
   On a phone the whole point of this section is that the name, one sentence
   and the first real action fit on the first screen. Measured at 390 × 844
   with the bar at the foot of the screen accounted for, the primary button
   lands with room to spare. Anything added here has to be checked against
   that, because a first screen with nothing to do on it is the commonest way
   a page like this loses somebody. */
/* the first plate starts a little tighter than the rest, because everything it
   costs at the top is paid for at the bottom by the action falling off the
   screen */
.hero{
  --plate-light:radial-gradient(70% 80% at 22% 16%,#1B5158 0%,rgba(27,81,88,0) 70%);
  margin-top:.8rem;padding-top:.8rem;
}
.hero-grid{display:grid;gap:1.6rem}
.hero h1{max-width:16ch;color:var(--cream-lighter)}
.hero .lead{max-width:30ch;color:#F0E7D9;font-size:clamp(1rem,2.2vw,1.55rem);line-height:1.45}
.hero .meaning{
  font-family:var(--serif);font-style:italic;font-size:1rem;
  color:var(--mustard-soft);margin:0 0 .35rem;
}
.hero h1{margin-bottom:.35em}
.hero .lead{margin-bottom:.45em}
/* On a phone this is the last thing between the sentence and the button, so
   it is sized to sit on one line. Wrapped, it cost 66px — the difference
   between the first screen ending on an action and ending on a price.

   Sized, not forced. `white-space:nowrap` did hold the line, and at the
   largest text setting it then became a 370px word inside a 258px column: a
   grid item's automatic minimum is its longest unbreakable run, so the whole
   hero grew wider than the screen and the right-hand edge of every line in it
   was clipped. One property, and only at 132% — which is the setting the
   readers who most need it will be using. */
.price-note{
  display:inline-block;margin-top:.5rem;padding:.5rem .9rem;border-radius:12px;
  background:var(--mustard);color:var(--ink);font-weight:700;font-size:.95rem;
}
/* The photograph follows the words on a phone, and sits beside them at 52em.
   `order` rather than a different DOM order, so the reading order and the tab
   order stay the one the markup states. */
.hero-text{order:1;min-width:0}
.photo-frame{order:2}

/* ── the photograph, in an arch ──────────────────────────────────────────
   The frame is the ornament here, so the picture itself can be an ordinary
   honest photograph of the food. Drop assets/hero.jpg in and it appears;
   until then the frame holds a warm ground so nothing looks broken. */
.photo-frame{
  position:relative;padding:12px;justify-self:center;
  width:min(20rem,100%);
  border-radius:999px 999px 24px 24px;
  background:linear-gradient(160deg,var(--mustard) 0%,var(--terracotta-btn) 55%,var(--olive) 100%);
  box-shadow:0 24px 46px -20px rgba(0,0,0,.6);
}
.photo{
  aspect-ratio:4/5;max-height:30rem;border-radius:999px 999px 14px 14px;
  background:
    var(--pat-latticePanel) center/72px 72px,
    radial-gradient(70% 55% at 50% 32%,rgba(235,196,126,.42),rgba(235,196,126,0) 70%),
    linear-gradient(165deg,var(--teal) 0%,var(--teal-deepest) 100%);
  background-image:url("assets/hero.jpg"),var(--pat-latticePanel),
    radial-gradient(70% 55% at 50% 32%,rgba(235,196,126,.42),rgba(235,196,126,0) 70%),
    linear-gradient(165deg,var(--teal) 0%,var(--teal-deepest) 100%);
  background-size:cover,72px 72px,cover,cover;
  background-position:center;background-repeat:no-repeat,repeat,no-repeat,no-repeat;
}
/* beads where the arch meets the base */
.photo-frame::before,.photo-frame::after{
  content:"";position:absolute;bottom:-9px;width:18px;height:18px;border-radius:50%;
  background:var(--mustard);border:2px solid var(--terracotta-btn);
}
.photo-frame::before{left:14%}
.photo-frame::after{right:14%}

/* ══════════ the week ══════════
   TODAY IN FULL, THE REST AS A LIST, AND THE WEEK ROLLED TO START AT TODAY.
   Seven full cards is three phone screens of scrolling in the middle of the
   page, and the question almost everybody opens this page with is "what is it
   today". So today's meal keeps its description, the other six are a plain
   list of day and dish, and the list runs forward from today rather than from
   Monday — on a Saturday, Monday is six days away and it was the first thing
   on the page.

   The rolling is app.js, as one `order` per card; the compacting is here. The
   markup stays Monday to Sunday either way, so a screen reader and the tab key
   still meet the week in the order of the week — only the visual sequence
   turns.

   With no JavaScript: Monday to Sunday, all seven in full. Longer, and
   complete. Nothing is hidden behind a control that has to work. */
.days{
  display:flex;flex-direction:column;gap:.6rem;
  margin:1.6rem 0 0;padding:0;list-style:none;
}
.day{
  position:relative;background:var(--cream-lighter);color:var(--ink);
  border-radius:var(--radius);padding:.9rem 1.1rem;
  border:2px solid rgba(27,75,81,.16);
}
.day .name{
  font-size:.9rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--olive);margin:0 0 .2rem;
}
.day h3{margin:0;font-size:1.2rem;color:var(--teal-deep)}
.js .day p:not(.name){display:none}             /* the compact row — see app.js */
/* A whole small motif in the corner, not a cropped piece of the wallpaper —
   a fragment of a repeating tile reads as a smudge rather than as ornament.
   Dropped from the one-line rows only: a 22px ornament beside a single line of
   type is not decoration, it is something else in the way. */
.day::after{
  content:"";display:block;position:absolute;right:1rem;top:1rem;width:22px;height:22px;
  opacity:.55;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23AE5238' stroke-width='1.3'%3E%3Cpath d='M12 2c3.4 4.6 5 6 10 10-5 4-6.6 5.4-10 10-3.4-4.6-5-6-10-10 5-4 6.6-5.4 10-10Z'/%3E%3Ccircle cx='12' cy='12' r='2.1'/%3E%3C/g%3E%3C/svg%3E") no-repeat center/contain;
}

/* and today, in full */
.day[data-today]{
  padding:1.4rem 1.4rem 1.5rem;
  border-color:var(--terracotta-btn);box-shadow:0 0 0 4px rgba(183,93,64,.25);
}
.day[data-today] .name{color:var(--terracotta-deep);margin-bottom:.4rem}
.day[data-today] h3{font-size:1.35rem;margin-bottom:.4rem}
.day[data-today] p:not(.name){display:block;margin:0;font-size:1rem;color:var(--ink-soft);max-width:none}
.js .day:not([data-today])::after{display:none}
.today-tag{
  display:inline-block;margin-left:.5rem;padding:.15rem .6rem;border-radius:999px;
  background:var(--terracotta-btn);color:#fff;font-size:.8rem;letter-spacing:.08em;vertical-align:middle;
}

/* ══════════ steps ══════════ */
.steps{display:grid;gap:1.3rem;padding:0;margin:1.8rem 0 0;list-style:none;grid-template-columns:1fr}
.step{display:flex;gap:1rem;align-items:flex-start}
.step .n{
  flex:none;width:3rem;height:3rem;border-radius:50%;
  background:var(--mustard);color:var(--ink);border:3px solid var(--terracotta-btn);
  display:grid;place-items:center;font-family:var(--serif);font-size:1.35rem;font-weight:700;
}
.step > div{min-width:0}     /* see .help-text — the same rule, the same reason */
.step h3{margin:.2rem 0 .3rem}
.step p{margin:0}

/* ══════════ what is in it ══════════ */
.plate{display:grid;gap:.9rem;grid-template-columns:1fr;margin-top:1.6rem;padding:0;list-style:none}
.plate li{
  background:rgba(250,245,236,.06);border-radius:var(--radius);padding:1.2rem;
  border:1px solid rgba(235,196,126,.28);border-left:8px solid var(--olive-pale);
}
.plate li:nth-child(2){border-left-color:var(--terracotta-btn)}
.plate li:nth-child(3){border-left-color:var(--olive-pale)}
.plate li:nth-child(4){border-left-color:var(--mustard)}
.plate h3{margin:0 0 .35rem;font-size:1.2rem}
.plate p{margin:0;font-size:1rem;max-width:none}

/* ══════════ questions ══════════ */
.qa{margin-top:1.6rem}
.qa details{
  background:var(--cream-lighter);border:2px solid rgba(27,75,81,.16);
  border-radius:var(--radius);margin-bottom:.7rem;
}
.qa summary{
  cursor:pointer;list-style:none;padding:1rem 1.2rem;min-height:60px;
  display:flex;align-items:center;justify-content:space-between;gap:.8rem;
  font-family:var(--serif);font-size:1.15rem;font-weight:600;color:var(--teal-deep);
}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+";font-size:1.9rem;line-height:1;color:var(--terracotta-btn);flex:none}
.qa details[open] summary::after{content:"–"}
.qa .a{padding:0 1.2rem 1.2rem}
.qa .a p{margin:0;color:var(--ink-soft)}

/* ══════════ order ══════════ */
.order-card{
  background:var(--cream-lighter);border-radius:22px;padding:clamp(1.2rem,3.5vw,2.6rem);
  color:var(--ink);border:3px solid var(--mustard);
}
.on-dark .order-card h3{color:var(--teal-deep)}
.on-dark .order-card p{color:var(--ink-soft)}
.on-dark .order-card strong,.on-dark .order-card label{color:var(--ink)}
.on-dark .order-card a{color:var(--terracotta-deep)}

form{margin-top:1.4rem}
.field{margin-bottom:1.2rem}
label{display:block;font-weight:700;margin-bottom:.4rem;font-size:1.05rem}
.hint{display:block;font-weight:400;color:var(--ink-soft);font-size:.95rem;margin-top:.15rem}
input,textarea,select{
  width:100%;min-height:60px;padding:.9rem 1rem;
  font-family:var(--sans);font-size:1.05rem;color:var(--ink);
  background:#fff;border:2px solid rgba(27,75,81,.35);border-radius:12px;
}
textarea{min-height:7rem;resize:vertical}
input:focus,textarea:focus,select:focus{border-color:var(--teal);outline:none;box-shadow:0 0 0 4px rgba(39,103,110,.28)}

/* ══════════ footer ══════════
   The foot of the page is the head of it upside down: the same teal ground,
   the same fine texture, and the same woven edge — flipped, so its teeth point
   up into the page instead of down. A drawn rule would have closed the page
   with a line; this closes it with a seam. */
footer{
  position:relative;overflow:hidden;
  padding:2.6rem 0 2rem;color:#E3DACB;
  background:
    radial-gradient(120% 180% at 88% 100%,rgba(39,103,110,.7),rgba(39,103,110,0) 70%),
    var(--teal-deepest);
}
footer::before{                       /* the texture */
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:var(--pat-latticeGold);background-size:52px 52px;
}
footer::after{                        /* the woven edge, mirrored */
  content:"";position:absolute;left:0;right:0;top:0;height:16px;z-index:2;
  background:var(--pat-fringe) repeat-x left top/52px 16px;
  transform:scaleY(-1);
}
footer > .wrap{position:relative;z-index:1}
footer a{
  color:var(--mustard-soft);
  display:inline-block;padding:.55rem 0;    /* a 22px line is not a tap target */
}
.foot-grid{display:grid;gap:1.4rem;grid-template-columns:1fr}
footer h3{color:var(--mustard-soft);font-size:1.15rem;margin-bottom:.5rem}
footer p{color:#E3DACB;margin-bottom:.4rem}
.legal{
  margin-top:2rem;padding-top:1.6rem;font-size:.95rem;color:#D8CFC0;
  background:var(--pat-fringe) repeat-x left top/60px 18px;
}

/* ══════════ the bar at the foot of a phone screen ══════════
   The header scrolls away on a phone, so this takes over: the three places
   anybody actually comes here for, fixed where a thumb already is.

   WHY THREE AND NOT ONE. A single Get-help button was the whole bar, which
   meant the one thing always within reach was the thing you press when
   something has gone wrong — and the thing they came to do was somewhere down
   a page sixteen screens long. Order comes first because it is the point of
   the site; Get help stays on the right, in the same words as the header
   button, because the rule that matters most for this reader is that it never
   relocates.

   Text under every icon, never an icon alone. An unlabelled pictogram is a
   guess, and guessing is exactly what this audience will not do — they will
   stop instead. Each target is a third of the screen and at least 66px tall,
   which is above the 60px this page holds itself to and well above the 44px
   the guidelines ask for. */
.tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:50;
  display:flex;align-items:stretch;
  background:var(--pat-latticeGold) left top/52px 52px,var(--terracotta-btn);
  box-shadow:0 -4px 18px rgba(0,0,0,.4);
  /* NO env(safe-area-inset-bottom) anywhere in here. It was added twice at
     first — on this element and again inside every link — which on a real
     handset made a 74px bar 123px tall. Removing one instance left 94px, and
     the remaining one was wrong too: an inset only has to be paid when the
     viewport is allowed into the unsafe area, which takes `viewport-fit=cover`
     in the meta viewport. This page does not ask for that, so the browser has
     already inset the viewport and every pixel of padding added here is spent
     twice. Measured on the handset, not in a simulator — a desktop browser
     reports the inset as 0 and this looked perfect all the way through.

     If the meta viewport ever gains `viewport-fit=cover`, this is the one
     place the inset goes back: on the fixed element, never inside it. */
}
/* the same woven edge as the header and the footer, mirrored, so the three
   bars of the page are recognisably the same object */
.tabbar::before{
  content:"";position:absolute;left:0;right:0;top:0;height:16px;
  background:var(--pat-fringe) repeat-x left top/52px 16px;
  transform:scaleY(-1);
}
.tabbar a{
  position:relative;z-index:1;flex:1 1 0;min-width:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.15rem;
  min-height:3.4rem;padding:.45rem .3rem .4rem;
  color:#fff;text-decoration:none;text-align:center;
  font-size:.9rem;font-weight:700;line-height:1.2;
}
.tabbar a + a{box-shadow:inset 1px 0 0 rgba(255,255,255,.22)}
.tabbar svg{width:24px;height:24px;flex:none}
.tabbar a:active{background:rgba(0,0,0,.22)}

/* ═══════════════════════════════════════════════════════════════════════════
   23.5em · 376px — a little more room for the type

   The base above is written for a 320–375px screen, which is the smallest
   thing this page has to work on and the one where the first screen is hardest
   to win. Measured on a 360 × 740 handset, these four sizes are the difference
   between the primary button landing above the bar at the foot of the screen
   and landing 37px below it. Everything from a 390 upward gets the roomier
   set back.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width:23.5em){
  h1{font-size:clamp(1.85rem,5.5vw,3.5rem)}
  .hero .lead{font-size:clamp(1.05rem,2.2vw,1.55rem);line-height:1.5}
  .hero .meaning{font-size:1.1rem}
  .price-note{font-size:1rem;padding:.5rem 1rem;margin-top:.6rem}
  .btn-row{margin-top:.9rem}
}

/* ═══════════════════════════════════════════════════════════════════════════
   40em · 640px — one column becomes two, and the plate takes its full margins
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width:40em){
  body{padding-bottom:0}
  html{scroll-padding-bottom:0}
  .tabbar{display:none}

  header{position:sticky;top:0}
  .bar .help-link{display:inline-flex}
  .bar{padding:.85rem 0}
  .logo{font-size:1.9rem;letter-spacing:.14em}
  .logo .sub{letter-spacing:.24em;margin-top:-.15rem}

  /* the header is sticky again, so a link to #week must stop clear of it */
  section[id]{scroll-margin-top:7rem}
  section{padding:clamp(3rem,6vw,5rem) 0}

  /* Rim, vertical padding and the width of the wrap — the three that move
     together, and the two insets that hold the panel text and the ground text
     on the same line.

     They scale with the viewport rather than stepping. A hard step at 640px
     handed a 700px tablet the full 220px inset, which left 340px of text
     inside a 620px panel and made the page TALLER than the phone version of
     itself. The clamps reach the tuned wide-screen numbers — 80px outside the
     plate, 220px inside it, 110px on the ground — at 900px and hold them from
     there up, so 1440 is unchanged to the pixel and nothing below it falls off
     a cliff.

     The two insets are one number in two places: the ground's padding is half
     the panel's inner inset, which is what keeps a heading on the cream in
     line with a heading on the teal. Change one and the other has to move. */
  .panel{
    --rim:clamp(1.3rem,2.8vw,2.5rem);
    width:min(68rem,100% - clamp(1.6rem,8.9vw,4rem));
    margin:clamp(2.4rem,5vw,4.4rem) auto;
    padding:clamp(3.8rem,7.4vw,6.6rem) 0;
  }
  .panel-inner > .wrap{width:min(76rem,100% - clamp(3.4rem,25vw,11rem))}
  .on-ground > .wrap{
    width:min(68rem,100% - clamp(1.6rem,8.9vw,4rem));
    padding-inline:clamp(1.7rem,12.5vw,5.5rem);
  }

  .flourish{width:11rem;margin:.3rem 0 1.7rem}

  /* Every one of these minimums is written `minmax(min(Xrem,100%),1fr)`. The
     bare `minmax(Xrem,1fr)` is the bug this whole rewrite started from: the
     track cannot go below X, so on a narrow container the grid simply grows
     past it and the overflow is clipped rather than reported. `min(X,100%)`
     lets the track collapse to the container when it has to. */
  .plate{gap:1.2rem;margin-top:2rem;
    grid-template-columns:repeat(auto-fit,minmax(min(11.5rem,100%),1fr))}
  .plate li{padding:1.5rem}
  .plate p{font-size:.98rem}

  .steps{gap:1.7rem;margin-top:2.4rem;
    grid-template-columns:repeat(auto-fit,minmax(min(16rem,100%),1fr))}
  .step{gap:1.1rem}
  .step .n{width:3.4rem;height:3.4rem;font-size:1.5rem}
  .step h3{margin-top:.3rem}

  .help-cards{gap:1.1rem;margin-top:2rem;
    grid-template-columns:repeat(auto-fit,minmax(min(17rem,100%),1fr))}
  /* back to the icon beside the whole block, where there is width for it */
  .help-card{display:flex;gap:1.1rem;align-items:flex-start;padding:1.5rem}
  .help-text{display:block;min-width:0}
  .help-text b,.help-text span{grid-column:auto}
  .help-text span{font-size:.98rem}

  form{margin-top:1.6rem}
  .field{margin-bottom:1.3rem}

  .qa{margin-top:2rem}
  .qa details{margin-bottom:.9rem}
  .qa summary{padding:1.2rem 1.4rem;font-size:1.2rem}
  .qa .a{padding:0 1.4rem 1.3rem}

  .btn{width:auto;padding:.8rem 2rem;display:inline-flex}
  .btn-row{display:flex;flex-wrap:wrap;gap:1rem;margin-top:1.8rem}
  .hero h1{margin-bottom:.6em}

  .textsize{margin-top:2.2rem}
  .textsize-label{width:auto}
  .textsize button{flex:0 0 auto;padding:.5rem 1.2rem}

  .foot-grid{gap:2rem;grid-template-columns:repeat(auto-fit,minmax(min(15rem,100%),1fr))}
  footer{padding:3.4rem 0 2.4rem}
  .legal{margin-top:2.6rem;padding-top:1.8rem;font-size:.92rem}

  .hero{margin-top:clamp(2.4rem,5vw,4.4rem);padding-top:clamp(3.8rem,7.4vw,6.6rem)}
  .hero .lead{line-height:1.55}
  .hero .meaning{font-size:1.15rem;margin-bottom:1.2rem}
  .hero h1{margin-bottom:.6em}
  .hero .lead{margin-bottom:1.1em}
  .price-note{margin-top:1.5rem;padding:.75rem 1.3rem;font-size:1.1rem}
}

/* ═══════════════════════════════════════════════════════════════════════════
   52em · 832px — the photograph moves back beside the words
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width:52em){
  .hero-grid{
    gap:clamp(2rem,4vw,3.4rem);align-items:center;
    grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  }
  .photo-frame{width:min(24rem,100%);justify-self:end}
}

/* ═══════════════════════════════════════════════════════════════════════════
   56.25em · 900px — the braid down the outer edges of the page
   A phone has no margin to spend on it, which is the only reason it is here
   and not in the base.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width:56.25em){
  /* The week goes back to a grid of seven equal cards, all in full — here and
     not at 40em, because this is the first width at which the grid actually
     returns two columns. Given one column it would be seven full cards stacked,
     which is three screens of scrolling and strictly worse than the list. */
  .days{display:grid;gap:1.1rem;margin-top:2rem;
    grid-template-columns:repeat(auto-fit,minmax(min(14rem,100%),1fr))}
  .day{padding:1.5rem 1.5rem 1.6rem}
  .day[data-today]{padding:1.5rem 1.5rem 1.6rem}
  .day .name{font-size:.95rem;letter-spacing:.14em;margin-bottom:.4rem}
  .day h3{font-size:1.35rem;margin-bottom:.4rem}
  /* `.js` repeated here on purpose: the rule it has to beat also carries it,
     and a media query does not raise specificity. Without it the descriptions
     stayed hidden on a 1440px screen and the whole page came up 223px short —
     which looked like nothing at all until the heights were compared. */
  .js .day p:not(.name),.day p:not(.name),.day[data-today] p:not(.name){
    display:block;margin:0;font-size:.98rem;color:var(--ink-soft);max-width:none}
  .js .day:not([data-today])::after{display:block}   /* every card again */
  .today-tag{letter-spacing:.1em}

  body::after{
    content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
    background-image:var(--pat-chain),var(--pat-chain);
    background-size:28px 56px,28px 56px;
    background-position:left top,right top;
    background-repeat:repeat-y,repeat-y;
    opacity:.5;
  }
}

/* ══════════ the light ══════════
   A single soft wash of gold over everything — the page lit from above rather
   than a set of surfaces printed in gold. It sits above the fixed header and
   the bottom bar too, so nothing is outside the light.

   Six per cent, and no higher, because the veil sits over the text as well as
   the ground and compresses the two toward each other. Measured at 6%: cream
   on the teal panel falls 8.9 → 7.9, ink on cream 13.1 → 11.4, white on a
   button 6.2 → 5.5. All still clear of the 7:1 this page aims at for body.

   Plain alpha, not mix-blend-mode. A blend mode across a fixed full-viewport
   layer makes the compositor re-blend the whole screen on every scroll, and
   this page has to stay smooth on an eight-year-old tablet. */
html::after{
  content:"";position:fixed;inset:0;z-index:60;pointer-events:none;
  background:radial-gradient(125% 95% at 50% -12%,
    rgba(217,162,57,.10) 0%,
    rgba(217,162,57,.055) 55%,
    rgba(217,162,57,.038) 100%);
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* the confirmation the share button leaves behind, when there is no share sheet */
.share-said{display:block;margin-top:.6rem;font-weight:600;color:var(--teal-deep)}