/* Fern & Flour, Signature tier. Direction A, "Ledger", selected from two
   initial studies per section 10.

   The shared brand is unchanged: same logo, same plum and sage on cream, same
   Abel and Source Serif 4, same twelve items at the same prices. Section 3
   makes those shared across all five tiers. What this tier develops is the
   composition, the photographic treatment, the decorative system and the
   motion language.

   The decorative system is the working grid itself: four hairline columns, run
   the height of a section, with numbered markers. Headings may break the grid.
   Body copy never does. Nothing is applied on top of the structure.

   Motion language: exactly one decorative sequence, on the home hero, where the
   rules draw in and the heading settles. Everything else moves only to
   acknowledge input. Section 10 forbids the rest, and this stylesheet does not
   contain a parallax, a scroll hijack or a slow entrance. */

@font-face { font-family:'Abel'; src:url('../../shared/fonts/abel-400.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'Source Serif 4'; src:url('../../shared/fonts/source-serif-400.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'Source Serif 4'; src:url('../../shared/fonts/source-serif-600.woff2') format('woff2'); font-weight:600; font-display:swap; }

:root{
  --ink:#121212; --ink-soft:#4A433F; --ink-faint:#6E665F;
  --plum:#A7496D; --plum-deep:#83364F; --plum-wash:#F6EAEF;
  --sage:#818B7E; --sage-deep:#5D6659; --sage-wash:#EDF0EB;
  --cream:#F5EFE6; --warm:#EAE6E1; --paper:#FFFFFF;

  /* Tones derived from the two brand colours rather than added beside them.
     The blushes are the packaging: the bag in the hero, the catering box, the
     stamp on a selected thing. The black is the oven, and only the oven. */
  --cream-hi:#FBF8F3;
  --blush:#E8C4CE; --blush-soft:#F4E4E8; --blush-deep:#D2909F;
  --black:#0D0B0B; --black-soft:#1A1615;
  --ember:#C9763F;          /* the glow inside the oven, from the photograph */

  --rule:color-mix(in srgb,#121212 19%,transparent);
  --rule-mid:color-mix(in srgb,#121212 34%,transparent);
  --rule-light:color-mix(in srgb,#F5EFE6 26%,transparent);
  --rule-light-mid:color-mix(in srgb,#F5EFE6 44%,transparent);
  --rule-ink:#121212;

  /* The serif carries the voice and the sans carries the apparatus. The two
     fonts were the other way round, which made every headline a caption and
     every label shout. Nothing new is loaded: these are the same two files. */
  --display:'Source Serif 4',Georgia,serif;
  --label:'Abel','Arial Narrow',sans-serif;
  --body:'Source Serif 4',Georgia,serif;

  --t--2:.76rem; --t--1:.875rem; --t-0:1.0625rem; --t-1:1.1875rem;
  --t-2:clamp(1.45rem,1.15rem + 1.1vw,2.05rem);
  --t-3:clamp(2rem,1.35rem + 2.6vw,3.2rem);
  --t-4:clamp(2.4rem,1.3rem + 4.4vw,4.2rem);
  --t-5:clamp(2.8rem,1.1rem + 6.6vw,6.5rem);
  /* The headline scale the references run at. Only the hero and the two
     centrepieces are allowed up here. */
  --t-6:clamp(3.1rem,1.2rem + 8.2vw,8rem);

  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px;
  --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px; --s-10:132px;

  --gut:clamp(18px,4.4vw,60px);
  --page:1320px;
  --measure:34ch;
  --article:34rem;

  --ease:cubic-bezier(.2,.75,.2,1);
  --fast:130ms; --mid:240ms;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--body);
     font-size:var(--t-0);line-height:1.65;font-synthesis:none}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
:focus-visible{outline:3px solid var(--plum);outline-offset:3px}
/* Headlines are the serif at 600, set tight. Anything that is apparatus rather
   than voice - a time, a price, a control, a category - asks for .lab below. */
h1,h2,h3,h4{font-family:var(--display);font-weight:600;line-height:1.02;margin:0;
            letter-spacing:-.018em;font-feature-settings:'kern' 1}
h1{line-height:.92}
.lab{font-family:var(--label);font-weight:400;letter-spacing:.2em;text-transform:uppercase;
     font-size:var(--t--2);color:var(--ink-faint);line-height:1.3;display:block}
.lab--ink{color:var(--ink)}
.lab--plum{color:var(--plum-deep)}
.lab--light{color:color-mix(in srgb,#F5EFE6 62%,transparent)}
/* A handwritten aside, the note left on the counter. Used sparingly. */
.note-hand{font-family:var(--display);font-style:italic;font-weight:400;color:var(--plum-deep);
           font-size:var(--t-1);line-height:1.35;letter-spacing:.005em}
p{margin:0}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
    clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:var(--gut);top:-60px;z-index:200;background:var(--ink);color:var(--cream);
      padding:12px 20px;font-family:var(--label);letter-spacing:.06em;transition:top var(--fast) var(--ease)}
.skip:focus{top:12px}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
                       transition-duration:.001ms !important}
}

/* ------------------------------------------------------------ the grid */
/* One container. Four hairline columns, visible, running the section height.
   Everything on a page sits on this, which is what makes it a system rather
   than a decoration. */
.led{position:relative;padding-inline:var(--gut);max-width:var(--page);margin-inline:auto}
.led__rules{position:absolute;inset:0;display:grid;grid-template-columns:repeat(4,1fr);
            pointer-events:none;margin-inline:var(--gut)}
.led__rules i{border-left:1px solid var(--rule)}
.led__rules i:last-child{border-right:1px solid var(--rule)}
.grid{position:relative;display:grid;grid-template-columns:repeat(4,1fr)}
.pad{padding-inline:clamp(12px,1.4vw,20px)}

.num{font-family:var(--label);font-size:var(--t--1);letter-spacing:.2em;
     color:var(--plum-deep);text-transform:uppercase}
.section{padding-block:clamp(var(--s-8),7vw,var(--s-10))}
.section--tight{padding-block:clamp(var(--s-7),5vw,var(--s-8))}
.section--paper{background:var(--paper)}
.section--warm{background:var(--warm)}
.section--sage{background:var(--sage-wash)}
.muted{color:var(--ink-soft)}
.small{font-size:var(--t--1)}
.lead{font-size:var(--t-1);line-height:1.5;color:var(--ink-soft);max-width:var(--measure)}

/* ---------------------------------------------------------- the chrome */
.hdr{border-bottom:1px solid var(--rule-mid);background:var(--cream);position:sticky;top:0;z-index:60}
.hdr__in{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);
         min-height:76px;max-width:var(--page);margin-inline:auto;padding-inline:var(--gut)}
.brand{display:inline-flex;align-items:center;gap:var(--s-3);text-decoration:none;flex:none}
.brand img{width:42px;height:42px}
.brand b{font-family:var(--label);font-size:1.32rem;font-weight:400;letter-spacing:.02em;display:block}
.brand i{font-style:normal;font-size:10px;letter-spacing:.2em;text-transform:uppercase;
         color:var(--ink-soft);display:block;margin-top:1px}
.nav{display:flex;align-items:center;gap:0}
.nav a{min-height:44px;display:inline-flex;align-items:center;padding:0 var(--s-4);
       text-decoration:none;font-family:var(--label);font-size:1rem;letter-spacing:.06em;
       text-transform:uppercase;white-space:nowrap;border-left:1px solid var(--rule);
       transition:color var(--fast) var(--ease)}
.nav a:first-child{border-left:0}
.nav a:hover{color:var(--plum-deep)}
.nav a[aria-current="page"]{color:var(--plum-deep);box-shadow:inset 0 -2px 0 var(--plum)}
.burger{display:none;min-height:44px;min-width:44px;align-items:center;justify-content:center;
        padding:0 var(--s-4);border:1px solid var(--rule-mid);background:transparent;
        font-family:var(--label);letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
.sheet{display:none;border-top:1px solid var(--rule);background:var(--cream)}
.sheet a{min-height:52px;display:flex;align-items:center;padding:0 var(--gut);
         border-bottom:1px solid var(--rule);text-decoration:none;font-family:var(--label);
         font-size:1.08rem;letter-spacing:.08em;text-transform:uppercase}

.btn{min-height:48px;display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);
     padding:0 var(--s-6);border:1px solid var(--ink);background:transparent;color:var(--ink);
     font-family:var(--label);font-size:1.02rem;letter-spacing:.08em;text-transform:uppercase;
     text-decoration:none;cursor:pointer;transition:background var(--fast) var(--ease),color var(--fast) var(--ease)}
.btn:hover{background:var(--ink);color:var(--cream)}
.btn--primary{background:var(--ink);color:var(--cream)}
.btn--primary:hover{background:var(--plum-deep);border-color:var(--plum-deep)}
.btn--ghost{border-color:var(--rule-mid)}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn[disabled]:hover{background:transparent;color:var(--ink)}
.btn--primary[disabled]:hover{background:var(--ink);color:var(--cream)}
.btns{display:flex;flex-wrap:wrap;gap:var(--s-3)}

.ftr{background:var(--ink);color:var(--cream);padding-block:var(--s-8) var(--s-6);margin-top:auto}
.ftr .grid{border-top:1px solid color-mix(in srgb,#F5EFE6 22%,transparent)}
.ftr__c{padding:var(--s-5) clamp(12px,1.4vw,20px) 0;border-left:1px solid color-mix(in srgb,#F5EFE6 18%,transparent)}
.ftr__c:first-child{border-left:0;padding-left:0}
.ftr h2{font-size:var(--t--1);letter-spacing:.2em;text-transform:uppercase;
        color:color-mix(in srgb,#F5EFE6 58%,transparent);font-family:var(--label)}
.ftr p{margin-top:var(--s-3);font-size:var(--t--1);line-height:1.6}
.ftr a{color:inherit;text-underline-offset:4px}
.ftr__note{max-width:var(--page);margin:var(--s-7) auto 0;padding-inline:var(--gut)}
.ftr__note p{border-top:1px solid color-mix(in srgb,#F5EFE6 22%,transparent);padding-top:var(--s-4);
             font-size:var(--t--1);color:color-mix(in srgb,#F5EFE6 70%,transparent);max-width:none}

/* ------------------------------------------------- editorial on grid */
.ed{align-items:start}
.ed h2{grid-column:1 / 2;border-top:2px solid var(--rule-ink);padding-top:var(--s-4);
       padding-right:var(--s-5);font-size:var(--t-2)}
.ed__body{grid-column:2 / 4;border-top:1px solid var(--rule);padding-top:var(--s-4);
          padding-inline:clamp(12px,1.6vw,26px)}
.ed__body p+p{margin-top:var(--s-4)}
.ed__side{grid-column:4 / 5;border-top:1px solid var(--rule);padding-top:var(--s-4);
          padding-left:clamp(12px,1.6vw,26px)}
.ed__side p{font-family:var(--label);font-size:var(--t-2);line-height:1.22;color:var(--plum-deep)}
.figure{margin:0}
.figure img{width:100%;aspect-ratio:16/9;object-fit:cover}
.figure figcaption{margin-top:var(--s-3);font-size:var(--t--1);color:var(--ink-faint);
                   padding-inline:clamp(12px,1.4vw,20px)}
.bleed{padding-inline:0;max-width:none}
.bleed img{width:100%;aspect-ratio:21/9;object-fit:cover}

/* --------------------------------- custom interaction 1: menu detail */
.menu{border-top:1px solid var(--rule-mid)}
.menu__cat{border-bottom:1px solid var(--rule-mid)}
.menu__cat[hidden]{display:none}
.menu__h{font-size:var(--t-2);padding:var(--s-5) 0 var(--s-4)}
.menu__list{border-top:1px solid var(--rule)}
.m-row{display:grid;grid-template-columns:2.2rem 1fr auto;gap:var(--s-4);align-items:baseline;
       width:100%;text-align:left;background:transparent;border:0;border-bottom:1px solid var(--rule);
       padding:var(--s-4) 0;cursor:pointer;font:inherit;color:inherit;
       transition:background var(--fast) var(--ease),padding-inline var(--fast) var(--ease)}
.m-row:hover{background:var(--paper);padding-inline:var(--s-3)}
.m-row[aria-expanded="true"]{background:var(--paper);padding-inline:var(--s-3)}
.m-row[hidden]{display:none}
.m-row__n{font-family:var(--label);font-size:var(--t--2);letter-spacing:.14em;color:var(--ink-faint)}
.m-row__name{font-family:var(--label);font-size:var(--t-2);line-height:1.1}
.m-row__price{font-family:var(--label);font-size:1.08rem;color:var(--plum-deep);white-space:nowrap}
.m-row__sold{font-family:var(--label);font-size:var(--t--2);letter-spacing:.12em;
             text-transform:uppercase;color:var(--ink-faint);border:1px solid var(--rule-mid);padding:5px 10px}

/* The detail is a disclosure, not a modal: it opens in place, keeps the list
   visible, and works with the keyboard without trapping focus. */
.m-detail{border-bottom:1px solid var(--rule);background:var(--paper)}
.m-detail[hidden]{display:none}
.m-detail__in{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:var(--s-6);
              padding:var(--s-6) var(--s-3) var(--s-7)}
.m-detail img{width:100%;aspect-ratio:4/3;object-fit:cover}
.m-detail h3{font-size:var(--t--1);letter-spacing:.2em;text-transform:uppercase;color:var(--plum-deep)}
.m-detail dl{margin:var(--s-4) 0 0;display:grid;grid-template-columns:auto 1fr;gap:var(--s-2) var(--s-5)}
.m-detail dt{font-family:var(--label);font-size:var(--t--1);letter-spacing:.1em;
             text-transform:uppercase;color:var(--ink-faint)}
.m-detail dd{margin:0;font-size:var(--t--1)}
.m-detail__close{margin-top:var(--s-5)}

/* ------------------------------ custom interaction 2: the planner */
.plan{border:1px solid var(--rule-mid);background:var(--paper);margin-top:var(--s-7)}
.plan__steps{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--rule-mid);
             list-style:none;margin:0;padding:0}
.plan__step{padding:var(--s-4) var(--s-5);border-left:1px solid var(--rule);display:flex;
            flex-direction:column;gap:2px;background:var(--warm)}
.plan__step:first-child{border-left:0}
.plan__step b{font-family:var(--label);font-size:var(--t--2);letter-spacing:.18em;
              text-transform:uppercase;color:var(--ink-faint);font-weight:400}
.plan__step span{font-family:var(--label);font-size:1.05rem}
.plan__step[data-state="now"]{background:var(--paper);box-shadow:inset 0 -3px 0 var(--plum)}
.plan__step[data-state="now"] b{color:var(--plum-deep)}
.plan__step[data-state="done"]{background:var(--paper)}
.plan__step[data-state="done"] b::after{content:' \2713'}
.plan__body{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)}
.plan__main{padding:var(--s-6) var(--s-6) var(--s-7);min-width:0}
.plan__side{border-left:1px solid var(--rule-mid);padding:var(--s-6);background:var(--cream);min-width:0}
.plan__panel[hidden]{display:none}
.plan__foot{display:flex;justify-content:space-between;gap:var(--s-4);flex-wrap:wrap;
            border-top:1px solid var(--rule-mid);padding:var(--s-4) var(--s-6);background:var(--warm)}

fieldset{border:0;padding:0;margin:0}
legend{font-family:var(--label);font-size:var(--t-2);padding:0 0 var(--s-2)}
.hint{font-size:var(--t--1);color:var(--ink-soft);margin-top:var(--s-2);max-width:52ch}
.opts{display:grid;gap:var(--s-3);margin-top:var(--s-5)}
.opt{display:grid;grid-template-columns:22px 1fr auto;gap:var(--s-4);align-items:start;
     border:1px solid var(--rule-mid);padding:var(--s-4);cursor:pointer;background:var(--paper);
     transition:border-color var(--fast) var(--ease),background var(--fast) var(--ease)}
.opt:hover{border-color:var(--ink)}
.opt input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--plum)}
.opt b{font-family:var(--label);font-weight:400;font-size:1.16rem;display:block}
.opt span{display:block;font-size:var(--t--1);color:var(--ink-soft);margin-top:2px}
.opt em{font-style:normal;font-family:var(--label);color:var(--plum-deep);white-space:nowrap}
.opt:has(input:checked){border-color:var(--plum);background:var(--plum-wash)}
.opt:has(input:disabled){opacity:.5;cursor:not-allowed}
.opt:has(input:disabled):hover{border-color:var(--rule-mid)}

.field{margin-top:var(--s-5)}
.field label{display:block;font-family:var(--label);font-size:1.02rem;letter-spacing:.06em;
             text-transform:uppercase;margin-bottom:var(--s-2)}
.field input,.field select,.field textarea{
  width:100%;min-height:48px;padding:var(--s-3) var(--s-4);border:1px solid var(--rule-mid);
  background:var(--paper);color:var(--ink);font-family:var(--body);font-size:var(--t-0)}
.field textarea{min-height:110px;resize:vertical;line-height:1.6}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{
  outline:none;border-color:var(--plum);box-shadow:0 0 0 3px color-mix(in srgb,var(--plum) 26%,transparent)}
.field[data-invalid="true"] input,.field[data-invalid="true"] select,.field[data-invalid="true"] textarea{border-color:#B3261E}
.err{display:none;margin-top:var(--s-2);color:#8C1D18;font-size:var(--t--1)}
.field[data-invalid="true"] .err{display:block}
.two{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-4)}

/* the running summary, which has to be visible while you are choosing */
.sum h3{font-size:var(--t--1);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-faint)}
.sum__rows{margin-top:var(--s-4);border-top:1px solid var(--rule)}
.sum__row{display:flex;justify-content:space-between;gap:var(--s-4);padding:var(--s-3) 0;
          border-bottom:1px solid var(--rule);font-size:var(--t--1)}
.sum__row i{font-style:normal;color:var(--ink-soft);display:block;font-size:var(--t--2)}
.sum__row b{font-family:var(--label);font-weight:400;white-space:nowrap}
.sum__tot{display:flex;justify-content:space-between;gap:var(--s-4);padding-top:var(--s-4);
          font-family:var(--label);font-size:1.32rem}
.sum__empty{margin-top:var(--s-4);color:var(--ink-soft);font-size:var(--t--1)}

/* estimate / enquiry / confirmed order are three different things and the
   interface has to stop anyone confusing them */
.tag{display:inline-flex;align-items:center;gap:var(--s-2);font-family:var(--label);
     font-size:var(--t--2);letter-spacing:.16em;text-transform:uppercase;padding:6px 12px;
     border:1px solid currentColor;white-space:nowrap}
.tag--estimate{color:var(--sage-deep)}
.tag--enquiry{color:var(--plum-deep)}
.tag--order{color:var(--ink);background:var(--ink);color:var(--cream);border-color:var(--ink)}
.whatis{margin-top:var(--s-4);border-left:2px solid var(--sage);padding-left:var(--s-4);
        font-size:var(--t--1);color:var(--ink-soft)}
.whatis b{font-family:var(--label);font-weight:400;color:var(--ink);letter-spacing:.04em}

.warn{margin-top:var(--s-5);border:1px solid #E0B4AE;background:#FBECEA;padding:var(--s-4);
      font-size:var(--t--1);color:#6E1B14}
.warn b{display:block;font-family:var(--label);font-weight:400;font-size:1.06rem;
        letter-spacing:.04em;margin-bottom:var(--s-2)}
.warn ul{margin:0;padding-left:1.1em}
.warn li+li{margin-top:var(--s-2)}

.review{border:1px solid var(--rule-mid);margin-top:var(--s-5)}
.review__row{display:grid;grid-template-columns:minmax(120px,.5fr) 1fr auto;gap:var(--s-4);
             padding:var(--s-3) var(--s-4);border-bottom:1px solid var(--rule);align-items:baseline;font-size:var(--t--1)}
.review__row:last-child{border-bottom:0}
.review__row dt{font-family:var(--label);letter-spacing:.1em;text-transform:uppercase;
                color:var(--ink-faint);font-size:var(--t--2)}
.review__row dd{margin:0}
.review__edit{background:none;border:0;padding:4px 8px;font:inherit;font-size:var(--t--2);
              font-family:var(--label);letter-spacing:.12em;text-transform:uppercase;
              color:var(--plum-deep);text-decoration:underline;text-underline-offset:3px;cursor:pointer;
              min-height:32px}

.status-box{display:none;gap:var(--s-3);padding:var(--s-5);border:1px solid;margin-top:var(--s-5)}
.status-box[data-show="true"]{display:flex}
.status-box--busy{background:var(--warm);border-color:var(--rule-mid);color:var(--ink-soft)}
.status-box--bad{background:#FBECEA;border-color:#E0B4AE;color:#6E1B14}
.status-box--ok{background:var(--sage-wash);border-color:#A8C4AC;color:#1E3D24}
.status-box strong{display:block;font-family:var(--label);font-weight:400;font-size:1.18rem;letter-spacing:.03em}
.status-box p{margin-top:var(--s-2);font-size:var(--t--1)}
.spin{width:15px;height:15px;border-radius:50%;border:2px solid var(--plum);border-top-color:transparent;
      animation:spin .7s linear infinite;flex:none;margin-top:4px}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spin{animation:none;border-top-color:var(--plum);opacity:.5}}
.demo-note{margin-top:var(--s-5);border:1px dashed var(--rule-mid);padding:var(--s-4);
           font-size:var(--t--1);color:var(--ink-soft)}
.demo-note b{font-family:var(--label);font-weight:400;letter-spacing:.04em;color:var(--ink)}
.linkish{background:none;border:0;padding:0;font:inherit;color:var(--plum-deep);
         text-decoration:underline;text-underline-offset:3px;cursor:pointer}

/* ---------------------------------------- customer request status */
.track{border:1px solid var(--rule-mid);background:var(--paper);margin-top:var(--s-6)}
.track__head{padding:var(--s-6);border-bottom:1px solid var(--rule-mid);
             display:flex;justify-content:space-between;gap:var(--s-5);flex-wrap:wrap;align-items:flex-start}
.track__head h2{font-size:var(--t-3)}
.track__ref{font-family:var(--label);letter-spacing:.18em;color:var(--ink-faint);font-size:var(--t--1)}
.rail{display:grid;grid-template-columns:repeat(6,1fr);border-bottom:1px solid var(--rule-mid);
      list-style:none;margin:0;padding:0}
.rail__s{padding:var(--s-4) var(--s-3) var(--s-5);border-left:1px solid var(--rule);position:relative}
.rail__s:first-child{border-left:0}
.rail__s b{display:block;font-family:var(--label);font-size:var(--t--2);letter-spacing:.16em;
           color:var(--ink-faint);font-weight:400}
.rail__s span{display:block;margin-top:var(--s-2);font-family:var(--label);font-size:1.02rem;line-height:1.2}
.rail__s[data-state="done"]{background:var(--sage-wash)}
.rail__s[data-state="done"] b{color:var(--sage-deep)}
.rail__s[data-state="now"]{background:var(--ink);color:var(--cream)}
.rail__s[data-state="now"] b{color:color-mix(in srgb,#F5EFE6 70%,transparent)}
.rail__s[data-state="off"]{background:#FBECEA}
.track__now{padding:var(--s-6);border-bottom:1px solid var(--rule)}
.track__now h3{font-size:var(--t-2)}
.track__now p{margin-top:var(--s-3);max-width:56ch;color:var(--ink-soft)}
.await{margin-top:var(--s-5);border-left:2px solid var(--plum);padding-left:var(--s-4)}
.await b{font-family:var(--label);font-weight:400;letter-spacing:.04em;display:block}
.await p{margin-top:var(--s-2);font-size:var(--t--1)}
.track__body{padding:var(--s-6)}

/* ------------------------------------------ the operational studio */
/* Same brand, denser register. It is a working tool, not a brochure. */
.studio{background:var(--warm);min-height:100vh;display:flex;flex-direction:column}
.sbar{background:var(--ink);color:var(--cream);position:sticky;top:0;z-index:60}
.sbar__in{max-width:var(--page);margin-inline:auto;padding:0 var(--gut);display:flex;
          align-items:center;gap:var(--s-5);min-height:60px;flex-wrap:wrap}
.sbar b{font-family:var(--label);font-weight:400;letter-spacing:.14em;text-transform:uppercase;font-size:var(--t--1)}
.sbar nav{display:flex;margin-left:auto}
.sbar nav a{min-height:44px;display:inline-flex;align-items:center;padding:0 var(--s-4);
            color:inherit;text-decoration:none;font-family:var(--label);font-size:var(--t--1);
            letter-spacing:.12em;text-transform:uppercase;border-left:1px solid color-mix(in srgb,#F5EFE6 20%,transparent)}
.sbar nav a[aria-current="page"]{background:var(--cream);color:var(--ink)}
.sbar__exit{color:color-mix(in srgb,#F5EFE6 62%,transparent);font-size:var(--t--1);text-underline-offset:4px}
.swrap{max-width:var(--page);margin-inline:auto;padding:var(--s-6) var(--gut) var(--s-9);width:100%}
.demo-strip{background:var(--plum-wash);border-bottom:1px solid var(--plum);
            padding:var(--s-3) var(--gut);font-size:var(--t--1);color:var(--plum-deep)}
.demo-strip b{font-family:var(--label);font-weight:400;letter-spacing:.06em}
.shead{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--s-5);
       flex-wrap:wrap;padding-bottom:var(--s-4);border-bottom:2px solid var(--rule-ink)}
.shead h1{font-size:var(--t-3)}
.shead p{margin-top:var(--s-2);font-size:var(--t--1);color:var(--ink-soft)}

.filters{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-top:var(--s-5);align-items:center}
.filters button{min-height:44px;padding:0 var(--s-4);border:1px solid var(--rule-mid);background:transparent;
                font-family:var(--label);font-size:var(--t--1);letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
.filters button[aria-pressed="true"]{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.filters label{display:inline-flex;align-items:center;gap:var(--s-2);min-height:44px;
               font-family:var(--label);font-size:var(--t--1);letter-spacing:.06em;text-transform:uppercase}
.filters select{min-height:44px;border:1px solid var(--rule-mid);background:var(--paper);
                font-family:var(--body);font-size:var(--t--1);padding:0 var(--s-3)}

.tbl{width:100%;border-collapse:collapse;margin-top:var(--s-5);background:var(--paper);
     border:1px solid var(--rule-mid);font-size:var(--t--1)}
.tbl caption{text-align:left;padding:var(--s-3) 0;font-size:var(--t--1);color:var(--ink-soft)}
.tbl th,.tbl td{text-align:left;padding:var(--s-3) var(--s-4);border-bottom:1px solid var(--rule);vertical-align:top}
.tbl th{font-family:var(--label);font-weight:400;font-size:var(--t--2);letter-spacing:.16em;
        text-transform:uppercase;color:var(--ink-faint);background:var(--warm);white-space:nowrap}
.tbl tbody tr:hover{background:var(--cream)}
.tbl tbody tr[hidden]{display:none}
.tbl a{font-family:var(--label);font-size:1.02rem;text-underline-offset:3px}
.tbl .mine{border-left:3px solid var(--plum)}
.pill{display:inline-block;font-family:var(--label);font-size:var(--t--2);letter-spacing:.12em;
      text-transform:uppercase;padding:4px 9px;border:1px solid var(--rule-mid);white-space:nowrap}
.pill[data-k="enquiry"]{background:var(--warm)}
.pill[data-k="review"]{background:var(--plum-wash);border-color:var(--plum);color:var(--plum-deep)}
.pill[data-k="quoted"]{background:var(--cream);border-color:var(--ink)}
.pill[data-k="payment"],.pill[data-k="preparation"]{background:var(--sage-wash);border-color:var(--sage-deep);color:var(--sage-deep)}
.pill[data-k="collected"]{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.pill[data-k="declined"]{background:#FBECEA;border-color:#E0B4AE;color:#6E1B14}
.empty{padding:var(--s-8) var(--s-4);text-align:center;color:var(--ink-soft);background:var(--paper);
       border:1px solid var(--rule-mid);border-top:0}
.empty[hidden]{display:none}

.cols{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:var(--s-6);margin-top:var(--s-6);align-items:start}
.card{background:var(--paper);border:1px solid var(--rule-mid)}
.card>h2{font-family:var(--label);font-size:var(--t--1);letter-spacing:.18em;text-transform:uppercase;
         color:var(--ink-faint);padding:var(--s-4) var(--s-5);border-bottom:1px solid var(--rule);background:var(--warm)}
.card__in{padding:var(--s-5)}
.kv{display:grid;grid-template-columns:auto 1fr;gap:var(--s-3) var(--s-5);font-size:var(--t--1)}
.kv dt{font-family:var(--label);font-size:var(--t--2);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint)}
.kv dd{margin:0}
.lines{width:100%;border-collapse:collapse;font-size:var(--t--1)}
.lines td{padding:var(--s-2) 0;border-bottom:1px solid var(--rule)}
.lines td:last-child{text-align:right;font-family:var(--label);white-space:nowrap}
.lines tr:last-child td{border-bottom:0;font-family:var(--label);font-size:1.12rem;padding-top:var(--s-3)}
.lines i{font-style:normal;display:block;color:var(--ink-faint);font-size:var(--t--2)}
.acts{display:flex;flex-wrap:wrap;gap:var(--s-3);padding:var(--s-5);border-top:1px solid var(--rule);background:var(--cream)}
.acts .btn{min-height:44px;font-size:var(--t--1)}
.btn--danger{border-color:#8C1D18;color:#8C1D18}
.btn--danger:hover{background:#8C1D18;color:#fff}
.hist{list-style:none;margin:0;padding:0;font-size:var(--t--1)}
.hist li{display:grid;grid-template-columns:auto 1fr;gap:var(--s-4);padding:var(--s-2) 0;border-bottom:1px solid var(--rule)}
.hist li:last-child{border-bottom:0}
.hist time{font-family:var(--label);font-size:var(--t--2);letter-spacing:.1em;color:var(--ink-faint);white-space:nowrap}
.q-row{display:grid;grid-template-columns:auto 1fr auto;gap:var(--s-5);padding:var(--s-5);
       border-bottom:1px solid var(--rule);align-items:center;background:var(--paper)}
.q-row:last-child{border-bottom:0}
.q-when{font-family:var(--label);font-size:var(--t-2);line-height:1;text-align:center;min-width:76px}
.q-when i{display:block;font-style:normal;font-size:var(--t--2);letter-spacing:.14em;
          text-transform:uppercase;color:var(--ink-faint);margin-top:4px}
.q-need{margin-top:var(--s-2);font-size:var(--t--1);color:var(--ink-soft)}
.q-need b{font-family:var(--label);font-weight:400;color:var(--ink)}

/* ------------------------------------------------------- articles */
.art{max-width:var(--article);margin-inline:auto}
.art>*+*{margin-top:var(--s-5)}
.art h2{font-size:var(--t-2);margin-top:var(--s-7)}
.art-meta{font-family:var(--label);font-size:var(--t--1);letter-spacing:.14em;
          text-transform:uppercase;color:var(--ink-soft)}
.j-row{display:grid;grid-template-columns:2.6rem minmax(0,300px) 1fr;gap:var(--s-5);
       align-items:start;padding:var(--s-6) 0;border-bottom:1px solid var(--rule);text-decoration:none}
.j-row:first-of-type{border-top:1px solid var(--rule-mid)}
.j-row img{width:100%;aspect-ratio:3/2;object-fit:cover}
.j-row h3{font-size:var(--t-2);margin-top:var(--s-3)}
.j-row p{margin-top:var(--s-3);color:var(--ink-soft);max-width:46ch}
.j-row .more{margin-top:var(--s-3);display:inline-block;color:var(--plum-deep);
             text-decoration:underline;text-underline-offset:4px}
.j-row:hover h3{color:var(--plum-deep)}

.facts{border-top:1px solid var(--rule-mid);margin-top:var(--s-7)}
.facts__c{padding:var(--s-5) clamp(12px,1.4vw,20px) var(--s-6);border-left:1px solid var(--rule)}
.facts__c:first-child{border-left:0}
.facts__c dt{font-family:var(--label);font-size:var(--t--2);letter-spacing:.18em;
             text-transform:uppercase;color:var(--ink-faint)}
.facts__c dd{margin:var(--s-3) 0 0;font-size:var(--t-1);line-height:1.45}
.facts__c a{min-height:44px;display:inline-flex;align-items:center;text-underline-offset:4px}

/* ---------------------------------------------------- responsive */
@media (max-width:1040px){
  .nav{display:none}
  .burger{display:inline-flex}
  .sheet[data-open="true"]{display:block}
  .plan__body{grid-template-columns:1fr}
  .plan__side{border-left:0;border-top:1px solid var(--rule-mid)}
  .cols{grid-template-columns:1fr}
  .rail{grid-template-columns:repeat(3,1fr)}
  .rail__s:nth-child(4){border-left:0}
  .rail__s:nth-child(-n+3){border-bottom:1px solid var(--rule)}
}
@media (max-width:820px){
  /* Four columns become two, and the rule system survives as a single left
     rail, which is what the direction document says it does. */
  .led__rules{grid-template-columns:1fr}
  .grid{grid-template-columns:repeat(2,1fr)}
  .hero h1,.hero__say,.hero__num{grid-column:1 / 3}
  .hero__say{margin-top:var(--s-5)}
  .ed h2,.ed__body,.ed__side{grid-column:1 / 3;padding-inline:0}
  .ed__body,.ed__side{border-top:0;padding-top:var(--s-4)}
  .facts__c:nth-child(odd){border-left:0}
  .ftr__c:nth-child(odd){border-left:0;padding-left:0}
  .m-detail__in{grid-template-columns:1fr}
  .j-row{grid-template-columns:2.2rem 1fr}
  .j-row img{grid-column:2}
  .j-row>div{grid-column:2}
  .plan__steps{grid-template-columns:1fr}
  .plan__step{border-left:0;border-bottom:1px solid var(--rule)}
  .two{grid-template-columns:1fr}
}
@media (max-width:560px){
  .grid{grid-template-columns:1fr}
  .hero h1,.hero__say,.hero__num,.ed h2,.ed__body,.ed__side{grid-column:1}
  .facts__c,.ftr__c{border-left:0;padding-left:0;border-bottom:1px solid var(--rule)}
  .rail{grid-template-columns:repeat(2,1fr)}
  .review__row{grid-template-columns:1fr auto}
  .q-row{grid-template-columns:1fr}
  .tbl th:nth-child(4),.tbl td:nth-child(4){display:none}
}


/* A wide table cannot be made narrow, so it scrolls inside a labelled region
   rather than pushing the page sideways. Keyboard users can reach the scroll
   because the region is focusable. */
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tbl-wrap:focus-visible{outline:3px solid var(--plum);outline-offset:2px}
.tbl{min-width:640px}

@media (max-width:560px){
  /* the longest price is "$9.50, or $12.50 with soup", which will not sit
     beside a name at 320px, so it takes its own line */
  .m-row{grid-template-columns:2.2rem 1fr}
  .m-row__price,.m-row__sold{grid-column:2;text-align:left;white-space:normal;justify-self:start}
  .kv{grid-template-columns:1fr}
  .kv dt{margin-top:var(--s-2)}
}

/* ======================================================================
   Production pass.

   The first build of this direction was under-produced: a heading stranded
   in cream, a photograph in a separate band underneath it, five sections of
   the same tone, and a rule grid too faint to be doing any work. Restraint
   and thinness are not the same thing.

   What changed, within what section 10 allows (no extra motion sequences,
   no gradients, no parallax, no scroll hijacking):

   - The hero is one composition: the photograph is the ground and the type
     sits in the grid over it, rather than three things stacked.
   - The page has tonal range. The oven timeline, which is the best thing on
     it, now runs on ink, which gives the page a spine and makes the bars
     read as light rather than as pale boxes.
   - Photography appears at more than one scale: a full-bleed, a pair at
     different crops, and a macro.
   ====================================================================== */

/* ------------------------------------------------- 2. an ink ground */
.on-ink { background: var(--ink); color: var(--cream); }
.on-ink .led__rules i { border-left-color: var(--rule-light); }
.on-ink .led__rules i:last-child { border-right-color: var(--rule-light); }
.on-ink .num { color: #E7B9CB; }
.on-ink .ed h2 { border-top-color: var(--cream); }
.on-ink .ed__body, .on-ink .ed__side { border-top-color: var(--rule-light); }
.on-ink .ed__side p { color: #E7B9CB; }
.on-ink .muted, .on-ink .oven__note { color: color-mix(in srgb, var(--cream) 72%, transparent); }
.on-ink .oven__scale { border-bottom-color: var(--rule-light-mid); }
.on-ink .oven__tick { border-left-color: var(--rule-light); }
.on-ink .oven__tick span { color: color-mix(in srgb, var(--cream) 56%, transparent); }
/* On ink the bars are light rather than pale boxes, which is the difference
   between a chart and a diagram. */
.on-ink .btn { border-color: var(--rule-light-mid); color: var(--cream); }
.on-ink .btn:hover { background: var(--cream); color: var(--ink); }
.on-ink .btn--primary { background: var(--cream); color: var(--ink); border-color: var(--cream); }
.on-ink .btn--primary:hover { background: var(--plum); color: var(--cream); border-color: var(--plum); }

/* ------------------------------------ 3. photography at more than one size */
/* A pair at deliberately different crops: a portrait, and a detail held
   smaller and lower so the two do not read as a row of two boxes. */
.duo { display: grid; grid-template-columns: 1.35fr 1fr; gap: clamp(var(--s-5), 3vw, var(--s-7)); align-items: end; }
.duo figure { margin: 0; }
.duo__tall img { width: 100%; aspect-ratio: 4/5; object-fit: cover; }
.duo__wide img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.duo__wide { padding-bottom: clamp(var(--s-6), 5vw, var(--s-9)); }
.duo figcaption { margin-top: var(--s-3); font-size: var(--t--1); color: var(--ink-faint); }
.on-ink .duo figcaption { color: color-mix(in srgb, var(--cream) 62%, transparent); }

.band { position: relative; overflow: hidden; }
.band img { width: 100%; aspect-ratio: 21/9; object-fit: cover; display: block; }
.band--tall img { aspect-ratio: 16/9; }

/* ------------------------------------------------ 4. the journal, larger */
.j-row { grid-template-columns: 3rem minmax(0, 420px) 1fr; padding-block: clamp(var(--s-6), 4vw, var(--s-8)); }
.j-row h2, .j-row h3 { font-size: var(--t-3); }
.j-row p { font-size: var(--t-0); }

@media (max-width: 1040px) {
  .duo { grid-template-columns: 1fr; align-items: stretch; }
  .duo__wide { padding-bottom: 0; }
}
@media (max-width: 820px) {
  .j-row { grid-template-columns: 2.4rem 1fr; }
  .j-row img, .j-row > div { grid-column: 2; }
}
@media (max-width: 560px) {
}

/* ---- The rule grid, corrected --------------------------------------------
   Two faults, both mine, and both only obvious once the rules were visible
   enough to read at all:

   1. `.led__rules` is absolutely positioned over the whole section, so
      anything that was not itself positioned got painted ON TOP OF. A hairline
      ran down the middle of the owner's portrait and through the journal
      headlines.
   2. It spanned entire sections, including blocks that are not on the four
      column grid: the journal rows, the photograph pairs, the oven timeline.
      A rule that cuts an image in half is not structure, it is noise.

   So the rules are now a background on the grid itself. They are painted
   behind the content by definition, they are exactly as wide and as tall as
   the grid they describe, and they stop where it stops. The hero keeps the
   overlay, because that is the one place they animate and the one place the
   content is deliberately laid over them. */
.grid {
  background-image:
    linear-gradient(to right, var(--rule) 0 1px, transparent 1px),
    repeating-linear-gradient(to right, var(--rule) 0 1px, transparent 1px 25%);
  background-position: right top, left top;
  background-repeat: no-repeat, repeat-x;
  background-size: 1px 100%, 100% 100%;
}
/* Where the children already draw their own dividers, a background would
   double every line. */
.facts .grid, .ftr .grid { background-image: none; }

/* And the overlay, where it is still used, belongs behind the content. */
.led__rules { z-index: 0; }
.led > *:not(.led__rules) { position: relative; z-index: 1; }

/* On ink the grid has to be drawn in light, or it is a dark line on a dark
   ground and the structure disappears exactly where the page is boldest. */
.on-ink .grid {
  background-image:
    linear-gradient(to right, var(--rule-light) 0 1px, transparent 1px),
    repeating-linear-gradient(to right, var(--rule-light) 0 1px, transparent 1px 25%);
}

/* ---- The vertical rules are gone ----------------------------------------
   Twice now they have read as damage rather than as structure: faint
   full-height lines down a photograph look like a rendering artefact, and
   down a column of text they look like a layout that has broken.

   The idea was "the working grid made visible". The honest verdict is that
   the grid does not need to be drawn to be felt: the columns are already
   legible from where things sit, and the horizontal rules over the editorial
   headings and the numbered markers carry the same language without putting
   a line through anyone's face.

   Kept: the horizontal rules, the section numbers, the short dividers between
   cells in a facts strip, which read as a table rather than as a scratch. */
.led__rules { display: none; }
.grid { background-image: none; }
.on-ink .grid { background-image: none; }

/* The one decorative motion sequence is now just the type settling, which is
   still one sequence and still has a static alternative. */

/* ==========================================================================
   A MORNING AT FERN & FLOUR
   ==========================================================================
   The homepage is one continuous morning rather than a stack of sections, so
   each one is built from the physical thing it is describing: the counter, the
   printed day sheet, the oven, a profile, an annotated photograph, a catering
   box, a press sheet. The brand is unchanged - same cream, same plum, same two
   typefaces, same twelve items at the same prices. What changed is that the
   serif now carries the voice and Abel carries the apparatus, and that the
   page can be operated rather than only read.

   Motion here is one of four things and never anything else:
     continuity      - a thing stays the same thing between two states
     transformation  - the page answers a choice the visitor made
     manipulation    - a timeline you scrub, a stage you select
     microfeedback   - a control acknowledging a press
   There is no entrance animation on scroll, nothing floats, and nothing moves
   that the visitor did not ask to move. */

/* ------------------------------------------------ shared small parts */

/* The pink stamp. A selected thing is stamped, the way a bakery marks a
   docket. One shape, used by every chooser on the site. */
.stamp{position:relative}
.stamp[aria-pressed="true"],.stamp[aria-selected="true"]{background:var(--blush-soft);border-color:var(--plum)}
.stamp[aria-pressed="true"]::after,.stamp[aria-selected="true"]::after{
  content:'';position:absolute;left:0;right:0;bottom:-1px;height:3px;background:var(--plum)}

/* A printed label off the counter: the thing that names a product and prices
   it. Used in the hero and on the menu. */
.tagcard{background:var(--cream-hi);border:1px solid var(--rule);padding:var(--s-4) var(--s-5);
         box-shadow:0 1px 0 var(--rule)}
.tagcard b{font-family:var(--display);font-weight:600;font-size:var(--t-1);display:block;letter-spacing:-.01em}
.tagcard p{font-size:var(--t--1);color:var(--ink-soft);margin-top:4px;max-width:34ch}
.tagcard em{font-style:normal;font-family:var(--label);letter-spacing:.1em;color:var(--plum-deep)}

/* Scroll-snapping horizontal rails, used on small screens by the day sheet,
   the oven and the box. Snapping is how a phone gets a timeline. */
.rail-x{display:flex;gap:var(--s-3);overflow-x:auto;scroll-snap-type:x mandatory;
        -webkit-overflow-scrolling:touch;scrollbar-width:thin;padding-bottom:var(--s-2)}
.rail-x>*{scroll-snap-align:start;flex:none}

/* ------------------------------------------------ 1. THE LIVING COUNTER */
/* The ground is the counter photograph, bleeding off the right edge. The
   headline sits on cream at the left and crosses in front of it. The pastry
   you choose is a separate layer in front of both, which is what lets choosing
   recompose the picture rather than recolour a border. */
.counter{position:relative;background:var(--cream);overflow:hidden;
         border-bottom:1px solid var(--rule)}
.counter .sprig{z-index:1;opacity:.34}
.counter__in{position:relative;z-index:2;display:grid;
             grid-template-columns:minmax(0,1.04fr) minmax(0,1fr);
             gap:var(--s-6);align-items:start;
             min-height:clamp(560px,86vh,880px);
             padding-block:clamp(var(--s-7),5.5vw,var(--s-9)) clamp(var(--s-6),4vw,var(--s-8))}
.counter__type{display:flex;flex-direction:column;align-items:flex-start;
               padding-right:clamp(0px,3vw,var(--s-7))}
.counter h1{font-size:var(--t-6);max-width:9ch;margin-top:var(--s-4);text-wrap:balance}
.counter__say{margin-top:var(--s-5);max-width:36ch;color:var(--ink-soft);font-size:var(--t-1)}
.counter .btns{margin-top:var(--s-6)}

/* The photograph. It bleeds past the page gutter on the right, and sits
   slightly low so the headline can cross its top corner. */
.counter__shot{position:absolute;top:0;bottom:0;right:0;width:min(58%,860px);z-index:1}
.counter__shot img{width:100%;height:100%;object-fit:cover;object-position:62% 52%;
                   transition:object-position 600ms var(--ease)}
/* Cream feathered over the left edge of the photograph so the two grounds meet
   without a seam, and the headline never sits on a busy pixel. */
.counter__shot::after{content:'';position:absolute;inset:0;
  background:linear-gradient(97deg,var(--cream) 0%,var(--cream) 12%,
                             color-mix(in srgb,var(--cream) 72%,transparent) 30%,
                             transparent 58%)}

/* The chosen pastry, in front of everything. */
.counter__stage{position:relative;z-index:3;align-self:end;justify-self:center;
                width:min(100%,460px);aspect-ratio:1/.92;display:grid;place-items:center}
.counter__stage img{position:absolute;width:100%;height:100%;object-fit:contain;
                    filter:drop-shadow(0 26px 34px rgba(48,28,18,.24));
                    opacity:0;transform:scale(.94) rotate(-1.5deg);
                    transition:opacity 260ms var(--ease),transform 380ms var(--ease)}
.counter__stage img[data-on="true"]{opacity:1;transform:none}
/* Each pastry is a different object, so each sits differently. This is the
   recomposition: the picture is arranged around whatever you chose. */
.counter[data-bite="bun"] .counter__stage img[data-on="true"]{transform:scale(.93) translateY(-2%)}
.counter[data-bite="cookie"] .counter__stage img[data-on="true"]{transform:scale(.84) translateY(4%)}
.counter[data-bite="bun"] .counter__shot img{object-position:54% 46%}
.counter[data-bite="cookie"] .counter__shot img{object-position:70% 58%}

/* The chooser. Three real products off the menu, priced from the same file. */
.bites{margin-top:var(--s-6);width:100%}
.bites__row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-3);margin-top:var(--s-3)}
.bite{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:var(--s-3);align-items:center;
      text-align:left;padding:var(--s-3);background:var(--cream-hi);
      border:1px solid var(--rule);cursor:pointer;font:inherit;color:inherit;min-width:0;
      transition:background var(--fast) var(--ease),border-color var(--fast) var(--ease),
                 transform var(--fast) var(--ease)}
.bite:hover{border-color:var(--plum);transform:translateY(-2px)}
.bite img{width:clamp(48px,4.4vw,68px);aspect-ratio:1;object-fit:contain;background:transparent}
.bite b{font-family:var(--display);font-weight:600;font-size:var(--t-0);line-height:1.15;letter-spacing:-.01em}
.bite span{font-family:var(--label);letter-spacing:.1em;font-size:var(--t--2);color:var(--plum-deep)}
.counter__label{margin-top:var(--s-4);max-width:42ch}

/* ------------------------------------------------ 2. TODAY, THE DAY SHEET */
/* The printed sheet the bakery works off, not five feature cards. One long
   rule with the day's moments hung on it, and the moment you select shows what
   it looks like. */
.today{background:var(--cream-hi);border-bottom:1px solid var(--rule);
       padding-block:clamp(var(--s-7),5vw,var(--s-9))}
.today__head{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--s-5);flex-wrap:wrap}
.today h2{font-size:var(--t-4);max-width:14ch;margin-top:var(--s-3);text-wrap:balance}
.today__sheet{margin-top:clamp(var(--s-6),3.5vw,var(--s-8));
              background:var(--paper);border:1px solid var(--rule);
              box-shadow:0 1px 0 var(--rule),0 14px 30px -26px rgba(40,26,18,.5)}
.today__rail{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
             list-style:none;margin:0;padding:0;border-bottom:1px solid var(--rule)}
.today__rail li{min-width:0}
.today__m{width:100%;height:100%;display:flex;flex-direction:column;gap:6px;align-items:flex-start;
          text-align:left;padding:var(--s-5) var(--s-4);background:transparent;border:0;
          border-left:1px solid var(--rule);cursor:pointer;font:inherit;color:inherit;
          transition:background var(--fast) var(--ease)}
.today__rail li:first-child .today__m{border-left:0}
.today__m:hover{background:var(--cream)}
.today__m time{font-family:var(--display);font-weight:600;font-size:var(--t-2);line-height:1;
               letter-spacing:-.02em;display:block}
.today__m time sup{font-family:var(--label);font-size:.42em;letter-spacing:.12em;
                   text-transform:uppercase;vertical-align:.55em;margin-left:3px;color:var(--ink-faint)}
.today__m b{font-family:var(--display);font-weight:600;font-size:var(--t-1);letter-spacing:-.012em}
.today__m[aria-selected="true"]{background:var(--blush-soft);box-shadow:inset 0 -3px 0 var(--plum)}
.today__m[aria-selected="true"] time sup{color:var(--plum-deep)}
.today__now{font-family:var(--label);letter-spacing:.16em;text-transform:uppercase;font-size:var(--t--2);
            background:var(--plum);color:var(--cream);padding:3px 9px;display:inline-flex;align-items:center;gap:6px}
.today__now::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--cream)}
.today__panel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);align-items:center;
              gap:clamp(var(--s-5),3vw,var(--s-7));padding:clamp(var(--s-5),3vw,var(--s-7))}
.today__panel[hidden]{display:none}
.today__panel img{width:100%;aspect-ratio:4/3;object-fit:cover}
.today__copy h3{font-size:var(--t-3);max-width:12ch}
.today__copy p{margin-top:var(--s-4);color:var(--ink-soft);max-width:44ch}
.today__copy .lab{margin-bottom:var(--s-3)}

/* ------------------------------------------------ 3. ONE OVEN */
/* The tonal break, and the page's spine. The dark ground is the oven itself.
   The scrubber is the real production order, which is the constraint this
   whole business runs on. */
.oven2{background:var(--black);color:var(--cream);position:relative;overflow:hidden;
       padding-block:clamp(var(--s-8),6vw,var(--s-10))}
.oven2 h2{font-size:var(--t-6);max-width:16ch;text-wrap:balance;color:var(--cream)}
.oven2__head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
             gap:clamp(var(--s-5),4vw,var(--s-8));align-items:end}
.oven2__say{color:color-mix(in srgb,var(--cream) 74%,transparent);max-width:40ch;font-size:var(--t-1)}
.oven2__say b{color:var(--cream);font-weight:400;font-family:var(--display)}

.oven2__stage{position:relative;margin-top:clamp(var(--s-6),4vw,var(--s-8));
              aspect-ratio:21/9;background:var(--black-soft);overflow:hidden}
.oven2__stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
                  opacity:0;transition:opacity 420ms var(--ease)}
.oven2__stage img[data-on="true"]{opacity:1}
/* Measured: the supporting line cleared 4.5:1 by 0.03 against the brightest
   frame in the set, which is not a margin. */
.oven2__stage::after{content:'';position:absolute;inset:0;
  background:linear-gradient(to top,rgba(10,8,8,.93) 0%,rgba(10,8,8,.78) 30%,
                             rgba(10,8,8,.42) 54%,transparent 78%)}
.oven2__read{position:absolute;left:0;right:0;bottom:0;z-index:2;
             padding:clamp(var(--s-5),3vw,var(--s-7));display:grid;
             grid-template-columns:auto minmax(0,1fr);gap:var(--s-5) clamp(var(--s-5),3vw,var(--s-7));align-items:end}
.oven2__time{font-family:var(--display);font-weight:600;font-size:clamp(2.2rem,1rem + 4vw,4.4rem);
             line-height:.9;letter-spacing:-.03em;color:var(--cream);white-space:nowrap}
.oven2__time sup{font-family:var(--label);font-size:.3em;letter-spacing:.14em;text-transform:uppercase;
                 vertical-align:.9em;margin-left:6px;color:#F0C9D7}
.oven2__what h3{font-size:var(--t-2);color:var(--cream)}
.oven2__what p{margin-top:var(--s-2);color:color-mix(in srgb,var(--cream) 76%,transparent);
               max-width:46ch;font-size:var(--t--1)}

/* The scrubber: one rule, a node per stage, draggable and keyboard operable. */
.scrub{margin-top:clamp(var(--s-5),3vw,var(--s-6));position:relative;
       padding-block:var(--s-5) var(--s-3);touch-action:pan-y}
.scrub__line{position:absolute;left:0;right:0;top:calc(var(--s-5) + 9px);height:1px;
             background:color-mix(in srgb,var(--cream) 26%,transparent)}
.scrub__fill{position:absolute;left:0;top:calc(var(--s-5) + 9px);height:1px;background:var(--blush);
             transition:width 300ms var(--ease)}
.scrub__nodes{position:relative;display:flex;justify-content:space-between;list-style:none;margin:0;padding:0}
.scrub__n{background:transparent;border:0;cursor:pointer;font:inherit;color:inherit;
          display:flex;flex-direction:column;align-items:center;gap:var(--s-3);
          padding:0 var(--s-2);min-width:48px;min-height:44px}
.scrub__dot{width:19px;height:19px;border-radius:50%;border:1px solid color-mix(in srgb,var(--cream) 46%,transparent);
            background:var(--black);display:grid;place-items:center;flex:none;
            transition:background var(--fast) var(--ease),border-color var(--fast) var(--ease),
                       transform var(--fast) var(--ease)}
.scrub__dot::after{content:'';width:7px;height:7px;border-radius:50%;background:transparent;transition:background var(--fast)}
.scrub__n:hover .scrub__dot{border-color:var(--blush)}
.scrub__n[aria-selected="true"] .scrub__dot{background:var(--blush);border-color:var(--blush);transform:scale(1.12)}
.scrub__n[aria-selected="true"] .scrub__dot::after{background:var(--black)}
.scrub__n em{font-style:normal;font-family:var(--label);letter-spacing:.12em;text-transform:uppercase;
             font-size:var(--t--2);color:color-mix(in srgb,var(--cream) 60%,transparent);
             white-space:nowrap;text-align:center}
.scrub__n[aria-selected="true"] em{color:var(--cream)}

.oven2__thumbs{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--s-3);
               margin-top:clamp(var(--s-5),3vw,var(--s-6))}
.oven2__thumb{padding:0;border:1px solid transparent;background:transparent;cursor:pointer;
              display:block;text-align:left;color:inherit;font:inherit;min-width:0;
              transition:border-color var(--fast) var(--ease),opacity var(--fast) var(--ease)}
.oven2__thumb img{width:100%;aspect-ratio:4/3;object-fit:cover;opacity:.52;transition:opacity var(--fast) var(--ease)}
.oven2__thumb:hover img{opacity:.82}
.oven2__thumb[aria-selected="true"] img{opacity:1}
.oven2__thumb[aria-selected="true"]{border-color:var(--blush)}
.oven2__thumb b{display:block;font-family:var(--label);letter-spacing:.14em;text-transform:uppercase;
                font-size:var(--t--2);font-weight:400;margin-top:var(--s-2);
                color:color-mix(in srgb,var(--cream) 62%,transparent)}
.oven2__thumb[aria-selected="true"] b{color:var(--cream)}
.oven2__note{margin-top:clamp(var(--s-6),3vw,var(--s-7));max-width:56ch;
             color:color-mix(in srgb,var(--cream) 70%,transparent);font-size:var(--t--1);
             border-top:1px solid color-mix(in srgb,var(--cream) 20%,transparent);padding-top:var(--s-4)}

/* ------------------------------------------------ 4. MARISA */
.marisa{background:var(--cream);padding-block:clamp(var(--s-8),6vw,var(--s-10))}
.marisa__top{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
             gap:clamp(var(--s-6),4vw,var(--s-8));align-items:center}
.marisa__shot{position:relative}
.marisa__shot img{width:100%;aspect-ratio:4/5;object-fit:cover}
.marisa__shot figcaption{margin-top:var(--s-3);font-size:var(--t--1);color:var(--ink-faint)}
.marisa h2{font-size:var(--t-5);max-width:11ch;text-wrap:balance}
.marisa__body{margin-top:var(--s-5);max-width:48ch}
.marisa__body p+p{margin-top:var(--s-4)}
.marisa__pull{margin-top:var(--s-6);border-left:3px solid var(--plum);padding-left:var(--s-5)}
.marisa__pull p{font-family:var(--display);font-weight:600;font-size:var(--t-3);line-height:1.08;
                letter-spacing:-.02em;color:var(--plum-deep);max-width:16ch}

/* The dough. Three states of the same round, cut from one photograph so they
   share a light. This is the bit of the site that is only true of a bakery. */
.dough{margin-top:clamp(var(--s-7),5vw,var(--s-9));border-top:1px solid var(--rule);padding-top:var(--s-6)}
.dough__head{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s-5);flex-wrap:wrap}
.dough__row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-4);margin-top:var(--s-5)}
.dough__s{display:block;width:100%;text-align:left;padding:0 0 var(--s-4);background:transparent;
          border:0;border-top:2px solid var(--rule);cursor:pointer;font:inherit;color:inherit;min-width:0;
          transition:border-color var(--fast) var(--ease)}
.dough__s img{width:100%;aspect-ratio:4/3;object-fit:cover;margin-top:var(--s-4);
              filter:saturate(.92);transition:filter var(--fast) var(--ease),transform var(--mid) var(--ease)}
.dough__s:hover img{filter:none}
.dough__s b{display:block;font-family:var(--label);letter-spacing:.16em;text-transform:uppercase;
            font-size:var(--t--2);font-weight:400;color:var(--ink-faint);padding-top:var(--s-3)}
.dough__s[aria-selected="true"]{border-top-color:var(--plum)}
.dough__s[aria-selected="true"] b{color:var(--plum-deep)}
.dough__s[aria-selected="true"] img{filter:none;transform:scale(1.015)}
.dough__read{margin-top:var(--s-5);border-top:1px solid var(--rule);padding-top:var(--s-5);
             display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);gap:var(--s-5) var(--s-7);align-items:start}
.dough__read h3{font-size:var(--t-2);white-space:nowrap}
.dough__read p{color:var(--ink-soft);max-width:52ch}
.dough__read p em{font-style:normal;color:var(--plum-deep);font-family:var(--display);font-weight:600}

/* ------------------------------------------------ 5. THE CRUMB, ANNOTATED */
/* The photograph stays the subject. The annotations are small, they are
   buttons, and on a phone they are a list under the picture instead of dots
   on top of it. */
.macro{position:relative;background:var(--black)}
.macro__img{position:relative}
.macro__img img{width:100%;aspect-ratio:21/9;object-fit:cover;display:block}
.macro__spot{position:absolute;width:30px;height:30px;border-radius:50%;padding:0;cursor:pointer;
             border:1px solid rgba(255,255,255,.78);background:rgba(20,14,12,.42);
             backdrop-filter:none;color:#fff;display:grid;place-items:center;
             transition:background var(--fast) var(--ease),transform var(--fast) var(--ease)}
.macro__spot::after{content:'';width:7px;height:7px;border-radius:50%;background:#fff}
/* The dot stays 30px because a bigger one covers the crumb it is pointing at.
   The thing you press is 44px: a transparent ring around it. */
.macro__spot::before{content:'';position:absolute;inset:-7px;border-radius:50%}
.macro__spot:hover{background:var(--plum);transform:scale(1.14)}
.macro__spot[aria-expanded="true"]{background:var(--plum);border-color:var(--plum);transform:scale(1.14)}
/* A printed label lying on the photograph, not a gradient across the whole
   width of it. The gradient was transparent exactly where the first line of
   text sat, and cream on a bright crumb measured 1.02:1 - invisible. A bounded
   card is both the museum-label idea and a guaranteed ground: cream on this
   over the brightest pixel in the photograph is 10.7:1. */
.macro__read{position:absolute;left:clamp(16px,4vw,52px);bottom:clamp(16px,4vw,52px);
             max-width:min(46ch,64%);padding:var(--s-5);color:var(--cream);
             background:rgba(10,8,8,.82);border:1px solid rgba(245,239,230,.16)}
.macro__read b{font-family:var(--display);font-weight:600;font-size:var(--t-2);display:block;letter-spacing:-.018em}
.macro__read p{margin-top:var(--s-2);max-width:46ch;color:color-mix(in srgb,var(--cream) 80%,transparent);
               font-size:var(--t--1)}
.macro__list{display:none}

/* ------------------------------------------------ 6. BUILD YOUR BOX */
/* The pink box is the answer, not the interface. The controls are ordinary
   labelled inputs; the box and the receipt are what they do. */
.box{position:relative;overflow:hidden;background:var(--blush-soft);
     padding-block:clamp(var(--s-8),6vw,var(--s-10));border-block:1px solid var(--rule)}
.box h2{font-size:var(--t-5);max-width:8ch;text-wrap:balance}
.box__say{margin-top:var(--s-4);max-width:34ch;color:var(--ink-soft)}
.box__grid{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.25fr) minmax(0,.86fr);
           gap:clamp(var(--s-5),2.6vw,var(--s-7));align-items:start;
           margin-top:clamp(var(--s-6),4vw,var(--s-8))}
.box__ctl{background:var(--cream-hi);border:1px solid var(--rule);padding:var(--s-5)}
.box__ctl .lab{margin-bottom:var(--s-3)}
.box__ctl+.box__ctl{margin-top:var(--s-4)}
.box__packs{display:grid;gap:var(--s-2)}
.box__pack{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px var(--s-4);align-items:baseline}
.box__pack b{grid-column:1}
.box__pack span{grid-column:1}
.box__pack em{grid-column:2;grid-row:1}
.box__pack{text-align:left;padding:var(--s-4);background:var(--paper);border:1px solid var(--rule);
           cursor:pointer;font:inherit;color:inherit;min-height:60px;
           transition:border-color var(--fast) var(--ease),background var(--fast) var(--ease)}
.box__pack:hover{border-color:var(--plum)}
.box__pack b{font-family:var(--display);font-weight:600;font-size:var(--t-0);line-height:1.1;letter-spacing:-.01em}
.box__pack span{font-size:var(--t--2);color:var(--ink-soft);line-height:1.35}
.box__pack em{font-style:normal;font-family:var(--label);letter-spacing:.1em;font-size:var(--t--2);color:var(--plum-deep)}
.box__ctl select{width:100%;min-height:48px;padding:0 var(--s-7) 0 var(--s-3);font-size:var(--t--1);border:1px solid var(--rule);
                 background:var(--paper);color:var(--ink);font-family:var(--body);font-size:var(--t-0);
                 appearance:none;-webkit-appearance:none;cursor:pointer;
                 background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),
                                  linear-gradient(135deg,var(--ink) 50%,transparent 50%);
                 background-position:calc(100% - 22px) 22px,calc(100% - 16px) 22px;
                 background-size:6px 6px,6px 6px;background-repeat:no-repeat}
.box__ctl select:focus-visible{outline:none;border-color:var(--plum);
                 box-shadow:0 0 0 3px color-mix(in srgb,var(--plum) 26%,transparent)}
.box__count{display:flex;align-items:center;gap:var(--s-3)}
.box__count input{flex:1;min-width:0;text-align:center;font-family:var(--display);font-weight:600;
                  font-size:var(--t-2);min-height:48px;border:1px solid var(--rule);background:var(--paper);
                  color:var(--ink);-moz-appearance:textfield}
.box__count input::-webkit-outer-spin-button,.box__count input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.box__step{width:48px;height:48px;flex:none;border:1px solid var(--rule);background:var(--paper);
           cursor:pointer;font-family:var(--label);font-size:1.4rem;line-height:1;color:var(--ink);
           transition:background var(--fast) var(--ease)}
.box__step:hover{background:var(--blush-soft)}

/* The box itself. The lid photograph is the ground; how full it looks is a
   real function of how many people you are feeding. */
/* The fill bar is positioned against the photograph, so the photograph is all
   that may be inside this box. The running "packed for N people" line used to
   live in here too, and on a phone the bar landed on top of it. */
.box__view{position:relative}
.box__view>img{display:block}
.box__view img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.box__fill{position:absolute;left:6%;right:6%;bottom:7%;height:8px;background:color-mix(in srgb,var(--ink) 12%,transparent)}
.box__fill i{display:block;height:100%;background:var(--plum);width:0;transition:width 320ms var(--ease)}
.box__meta{display:flex;justify-content:space-between;gap:var(--s-4);flex-wrap:wrap;
           margin-top:var(--s-3);font-size:var(--t--1);color:var(--ink-soft)}

.box__meta b{font-family:var(--display);font-weight:600;color:var(--ink)}

/* The receipt. Printed, monospaced rhythm, arithmetic shown rather than a
   total to be trusted. */
.receipt{background:var(--paper);border:1px solid var(--rule);padding:var(--s-5);
         box-shadow:0 14px 30px -26px rgba(40,26,18,.6)}
.receipt h3{font-family:var(--label);font-weight:400;letter-spacing:.2em;text-transform:uppercase;
            font-size:var(--t--2);color:var(--ink-faint)}
.receipt__rows{margin-top:var(--s-4);border-top:1px solid var(--rule)}
.receipt__r{display:flex;justify-content:space-between;gap:var(--s-4);padding:var(--s-3) 0;
            border-bottom:1px dotted var(--rule);font-size:var(--t--1)}
.receipt__r i{font-style:normal;color:var(--ink-soft);display:block;font-size:var(--t--2)}
.receipt__r b{font-family:var(--label);font-weight:400;white-space:nowrap;letter-spacing:.04em}
.receipt__d{margin:0}
.receipt__d>summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;
                    align-items:baseline;gap:var(--s-4);min-height:44px;padding-bottom:var(--s-3);
                    border-bottom:1px solid var(--rule)}
.receipt__d>summary::-webkit-details-marker{display:none}
.receipt__d>summary::after{content:'';width:8px;height:8px;flex:none;align-self:center;
                           border-right:1px solid var(--ink-faint);border-bottom:1px solid var(--ink-faint);
                           transform:rotate(45deg) translateY(-2px);transition:transform var(--fast) var(--ease)}
.receipt__d[open]>summary::after{transform:rotate(225deg) translateY(-2px)}
.receipt__tot{display:flex;align-items:baseline;gap:var(--s-3);
              font-family:var(--display);font-weight:600;font-size:var(--t-2);letter-spacing:-.02em}
.receipt__tot span{font-family:var(--label);font-weight:400;font-size:var(--t--2);letter-spacing:.16em;
                   text-transform:uppercase;color:var(--ink-faint)}
.receipt .btn{width:100%;margin-top:var(--s-5)}
.receipt__fine{margin-top:var(--s-4);font-size:var(--t--2);color:var(--ink-faint);line-height:1.5}

/* ------------------------------------------------ 7. THE PRESS SHEET */
/* Three articles at three different weights, the way a printed page would set
   them. Not three identical cards. */
.press{position:relative;overflow:hidden;background:var(--cream);padding-block:clamp(var(--s-8),6vw,var(--s-10))}
.press h2{font-size:var(--t-5);max-width:14ch;text-wrap:balance}
.press__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
             gap:clamp(var(--s-5),3vw,var(--s-7)) clamp(var(--s-4),2.4vw,var(--s-6));
             margin-top:clamp(var(--s-6),4vw,var(--s-8))}
.press__lead{grid-column:1 / 8}
.press__lead img{width:100%;aspect-ratio:3/2;object-fit:cover}
.press__lead h3{font-size:var(--t-4);max-width:15ch;margin-top:var(--s-5);text-wrap:balance}
.press__side{grid-column:8 / 13;display:flex;flex-direction:column;gap:var(--s-5);
             border-top:2px solid var(--rule-ink);padding-top:var(--s-4)}
.press__b{grid-column:1 / 5}
.press__c{grid-column:5 / 9}
.press__b img,.press__c img{width:100%;aspect-ratio:4/3;object-fit:cover}
.press__b h3,.press__c h3{font-size:var(--t-2);margin-top:var(--s-4);max-width:17ch}
.press__more{grid-column:9 / 13;align-self:end;border-top:1px solid var(--rule);padding-top:var(--s-4)}
.press a.press__link{text-decoration:none;display:block;color:inherit}
.press a.press__link:hover h3{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.press__meta{display:flex;gap:var(--s-4);align-items:center;margin-top:var(--s-3)}
.press p.press__stand{margin-top:var(--s-3);color:var(--ink-soft);max-width:40ch}

/* ------------------------------------------------ 8. CLOSING */
.close{position:relative;background:var(--ink);color:var(--cream);overflow:hidden;
       padding-block:clamp(var(--s-8),6vw,var(--s-10))}
.close h2{font-size:var(--t-5);max-width:13ch;color:var(--cream);text-wrap:balance}
.close__grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
             gap:clamp(var(--s-6),4vw,var(--s-8));align-items:end}
.close__facts{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-5);margin-top:var(--s-6)}
.close__facts div{border-top:1px solid color-mix(in srgb,var(--cream) 24%,transparent);padding-top:var(--s-3)}
.close__facts p{margin-top:var(--s-2);color:color-mix(in srgb,var(--cream) 80%,transparent);font-size:var(--t--1)}
.close__facts a{color:inherit}
.close .btns{margin-top:var(--s-6)}
.close .btn--primary{background:var(--cream);color:var(--ink);border-color:var(--cream)}
.close .btn--primary:hover{background:var(--plum);border-color:var(--plum);color:var(--cream)}
.close .btn--ghost{border-color:color-mix(in srgb,var(--cream) 42%,transparent);color:var(--cream)}
.close .btn--ghost:hover{background:var(--cream);color:var(--ink)}
.close__fine{margin-top:clamp(var(--s-6),4vw,var(--s-8));
             border-top:1px solid color-mix(in srgb,var(--cream) 20%,transparent);padding-top:var(--s-4);
             font-size:var(--t--2);color:color-mix(in srgb,var(--cream) 62%,transparent);max-width:74ch}

/* ------------------------------------------------ the morning, narrower */
/* Not the desktop shrunk. Overlapping layers separate, hover becomes tap,
   timelines become things you swipe, and the display type stays large. */

@media (max-width:1080px){
  .box__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .box__view{grid-column:1 / 3;order:-1}
  .oven2__thumbs{grid-template-columns:repeat(3,minmax(0,1fr))}
  .press__lead{grid-column:1 / 13}
  .press__side{grid-column:1 / 13;border-top:0;padding-top:0}
  .press__b{grid-column:1 / 7}
  .press__c{grid-column:7 / 13}
  .press__more{grid-column:1 / 13}
}

@media (max-width:900px){
  /* The counter stops being a layered composition and becomes a stack: type,
     then the pastry you picked, then the chooser. The photograph goes behind
     the whole thing at low contrast rather than beside it. */
  .counter__in{grid-template-columns:minmax(0,1fr);min-height:0;
               padding-block:var(--s-7) var(--s-6);gap:var(--s-5)}
  .counter__type{padding-right:0}
  .counter__shot{width:100%;opacity:.3}
  .counter__shot::after{background:linear-gradient(to bottom,
      color-mix(in srgb,var(--cream) 30%,transparent),var(--cream) 78%)}
  .counter__stage{width:min(100%,340px);justify-self:start;margin-top:var(--s-4)}
  .counter h1{max-width:11ch}

  .today__panel{grid-template-columns:minmax(0,1fr)}
  .today__rail{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
  .today__rail li{scroll-snap-align:start;flex:0 0 min(64vw,240px)}
  .today__m{border-left:1px solid var(--rule)}

  .marisa__top{grid-template-columns:minmax(0,1fr)}
  .marisa__shot img{aspect-ratio:3/2}
  .dough__read{grid-template-columns:minmax(0,1fr);gap:var(--s-3)}
  .dough__read h3{white-space:normal}

  .oven2__head{grid-template-columns:minmax(0,1fr)}
  .oven2__stage{aspect-ratio:3/2}
  .oven2__read{grid-template-columns:minmax(0,1fr);gap:var(--s-3)}
  .oven2__time{font-size:clamp(1.9rem,1rem + 4vw,3rem)}
  /* The scrubber becomes a swipe rail; the dots stay, the labels travel. */
  .scrub__nodes{overflow-x:auto;scroll-snap-type:x mandatory;justify-content:flex-start;gap:var(--s-5);
                -webkit-overflow-scrolling:touch;padding-bottom:var(--s-2)}
  .scrub__n{scroll-snap-align:center;flex:none}
  .scrub__line,.scrub__fill{display:none}
  .oven2__thumbs{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:var(--s-3);
                 -webkit-overflow-scrolling:touch}
  .oven2__thumb{flex:0 0 min(46vw,220px);scroll-snap-align:start}

  .close__grid{grid-template-columns:minmax(0,1fr)}
}

@media (max-width:760px){
  /* Flex rather than one grid column: a grid item's containing block is its own
     row, so a sticky receipt had nowhere to travel and painted over the
     controls instead of following them. In a flex column its parent is the
     whole form, which is what sticky needs. */
  /* Room under the last control for the pinned summary to sit over, so
     nothing is ever permanently trapped beneath it. A sticky bar without this
     leaves the final field unreachable. */
  .box__grid{display:flex;flex-direction:column;padding-bottom:168px}
  .box__view{order:-1}
  /* Clear of Curveball's tier switcher, which is fixed to the bottom of every
     demo page and reserves 92px of body padding here (130px under 560px).
     Pinning to 0 put the running total underneath it. */
  .box__receipt{position:sticky;bottom:100px;z-index:20}
  .receipt{box-shadow:0 -10px 30px -22px rgba(40,26,18,.75)}
  /* Closed, the sticky receipt is a summary bar you can still read past. Open,
     it is the whole arithmetic. JS closes it on small screens on load. */
  .receipt{padding:var(--s-4)}
  .receipt__d>summary{padding-bottom:var(--s-3)}
  .receipt__d[open]{max-height:56vh;overflow:auto}

  .press__b,.press__c{grid-column:1 / 13}
  .today__rail li{flex:0 0 min(72vw,220px)}
}

@media (max-width:640px){
  .bites__row{grid-template-columns:minmax(0,1fr);gap:var(--s-2)}
  .bite{flex-direction:row;align-items:center;gap:var(--s-4);padding:var(--s-3)}
  .bite img{width:74px;aspect-ratio:1;flex:none}
  .bite>div{min-width:0}
  .box__packs{grid-template-columns:minmax(0,1fr)}
  .dough__row{grid-template-columns:minmax(0,1fr);gap:var(--s-3)}
  .dough__s{display:grid;grid-template-columns:96px minmax(0,1fr);gap:var(--s-4);align-items:center;
            border-top-width:2px;padding-bottom:var(--s-3)}
  .dough__s img{margin-top:0;aspect-ratio:1}
  .dough__s b{padding-top:0}

  /* Dots on a photograph are too small to hit and too easy to miss, so on a
     phone the annotations become a plain list under the picture. */
  .macro__spot{display:none}
  .macro__read{position:static;background:var(--black);padding:var(--s-5) var(--gut)}
  .macro__list{display:grid;gap:var(--s-2);padding:0 var(--gut) var(--s-6);background:var(--black)}
  .macro__list button{width:100%;text-align:left;background:transparent;color:var(--cream);
                      border:1px solid color-mix(in srgb,var(--cream) 24%,transparent);
                      padding:var(--s-3) var(--s-4);font:inherit;font-family:var(--label);
                      letter-spacing:.12em;text-transform:uppercase;font-size:var(--t--2);
                      min-height:44px;cursor:pointer}
  .macro__list button[aria-pressed="true"]{background:var(--plum);border-color:var(--plum)}
  .macro__img img{aspect-ratio:16/10}
}

@media (max-width:560px){
  .box__receipt{bottom:138px}
}

@media (max-width:420px){
  .today__rail li{flex:0 0 82vw}
  .box__count input{font-size:var(--t-1)}
}

/* ------------------------------------------------ reduced motion */
/* The global block at the top already kills durations. These are the things
   that would still be wrong without motion: layers that rely on a transition
   to arrive, and the drag affordance on the scrubber. Every interactive state
   still works; it simply arrives rather than travels. */
@media (prefers-reduced-motion:reduce){
  .counter__stage img{transition:none}
  .counter__stage img[data-on="true"]{transform:none}
  .counter[data-bite] .counter__stage img[data-on="true"]{transform:none}
  .counter__shot img{transition:none}
  .bite:hover{transform:none}
  .dough__s[aria-selected="true"] img{transform:none}
  .scrub__n[aria-selected="true"] .scrub__dot{transform:none}
  .macro__spot:hover,.macro__spot[aria-expanded="true"]{transform:none}
  .scrub{touch-action:auto}
}

/* ------------------------------------------------ the page head */
/* One opening for every page, landing on a different ground. The old head
   spread the kicker, the heading and the standfirst across three columns of a
   four-column rule grid, so every page opened like a spreadsheet. */
.phead{padding-block:clamp(var(--s-7),5vw,var(--s-9)) clamp(var(--s-6),4vw,var(--s-8));
       border-bottom:1px solid var(--rule)}
.phead--cream{background:var(--cream-hi)}
.phead--blush{background:var(--blush-soft)}
.phead--ink{background:var(--ink);color:var(--cream);border-bottom-color:transparent}
.phead__in{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);
           gap:clamp(var(--s-5),3.5vw,var(--s-8));align-items:end}
.phead h1{font-size:var(--t-4);max-width:21ch;margin-top:var(--s-3);text-wrap:balance}
.phead--ink h1{color:var(--cream)}
.phead__aside{display:flex;flex-direction:column;gap:var(--s-4)}
.phead__say{color:var(--ink-soft);max-width:40ch}
.phead--ink .phead__say{color:color-mix(in srgb,var(--cream) 78%,transparent)}

/* ------------------------------------------------ the planner, in the box world */
/* The catering page is where an enquiry is actually made, so the planner keeps
   every bit of its logic. What it gains is the box: the same object from the
   homepage, in the same place, answering the same choices. */
.plan{border-color:var(--rule);background:var(--paper)}
.plan__steps{background:var(--cream-hi)}
.plan__step[data-state="now"]{background:var(--paper);box-shadow:inset 0 -3px 0 var(--plum)}
.plan__side{background:var(--blush-soft);border-left-color:var(--rule)}
.plan__box{margin-bottom:var(--s-5)}
.plan__box img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.plan__side .sum h3{color:var(--ink-faint)}
.opt:has(input:checked){border-color:var(--plum);background:var(--blush-soft)}
.opt b{font-family:var(--display);font-weight:600;letter-spacing:-.01em}
.opt em{font-family:var(--label);letter-spacing:.08em;font-size:var(--t--1)}
legend{font-family:var(--display);font-weight:600;font-size:var(--t-2);letter-spacing:-.018em}
.field label{font-family:var(--label);letter-spacing:.16em;font-size:var(--t--2);color:var(--ink-faint)}
.sum__tot{font-family:var(--display);font-weight:600;letter-spacing:-.02em}
.m-row__name{font-family:var(--display);font-weight:600;letter-spacing:-.015em}
.m-row__price{font-family:var(--label);letter-spacing:.06em}
.menu__h{font-family:var(--display);font-weight:600;letter-spacing:-.02em}

@media (max-width:900px){
  .phead__in{grid-template-columns:minmax(0,1fr)}
  .phead h1{max-width:20ch}
}

/* ==========================================================================
   THE PHYSICAL LAYER
   ==========================================================================
   The first pass built the structure and left the art direction out. The
   references are not restrained editorial - they are a bakery's own printed
   matter: a hand-written note on the counter, a torn day sheet, a photograph
   taped down, a rubber stamp, a sprig of fern in the corner. Without those the
   page reads as a well-set magazine rather than as this shop.

   Everything here is decoration and is marked aria-hidden or drawn in CSS, so
   none of it reaches a screen reader, and all of it sits behind or beside
   content rather than on top of it. */

@font-face{font-family:'Parisienne';src:url('../../shared/fonts/parisienne.woff2') format('woff2');
           font-weight:400;font-display:swap}

/* ---------------------------------------------------------- the hand */
/* A note written on the counter. Never used for anything a visitor has to
   read to use the page - only for asides, because a script face at 15px is a
   picture of a sentence more than a sentence. */
.hand{font-family:'Parisienne',cursive;font-weight:400;color:var(--plum-deep);
      line-height:1.25;letter-spacing:.01em;font-size:var(--t-2)}
.hand--sm{font-size:var(--t-1)}
.hand--lg{font-size:var(--t-3);line-height:1.15}
.hand--ink{color:var(--ink-soft)}
.hand--light{color:#F0D7DF}
.hand--tilt{display:inline-block;transform:rotate(-4deg);transform-origin:left center}
.hand--tilt-r{display:inline-block;transform:rotate(3.5deg);transform-origin:left center}
.hand em{font-style:normal}

/* A note pinned somewhere in a composition rather than in the flow. */
.pin{position:absolute;z-index:6;pointer-events:none;max-width:22ch}

/* ------------------------------------------------------- torn paper */
/* A real torn edge rather than a zigzag: turbulence displacing the edge of the
   box, which is what a deckle actually looks like. One filter, reused. */
.torn{position:relative;filter:url(#ff-torn)}
.torn--soft{filter:url(#ff-torn-soft)}

/* A strip of tape holding something down. */
.tape{position:absolute;z-index:5;width:clamp(56px,7vw,104px);height:clamp(20px,2.2vw,30px);
      background:color-mix(in srgb,var(--blush) 62%,transparent);
      border-left:1px solid color-mix(in srgb,var(--ink) 8%,transparent);
      border-right:1px solid color-mix(in srgb,var(--ink) 8%,transparent);
      box-shadow:0 1px 3px rgba(60,40,30,.13);pointer-events:none}
.tape--tl{top:-12px;left:6%;transform:rotate(-5deg)}
.tape--tr{top:-12px;right:7%;transform:rotate(4deg)}
.tape--tc{top:-13px;left:50%;transform:translateX(-50%) rotate(-2deg)}

/* --------------------------------------------------------- botanical */
/* A sprig of fern in the corner, the way the references dress a margin.
   Always behind, always faint, never near text. */
.sprig{position:absolute;z-index:0;pointer-events:none;opacity:.5;color:var(--sage-deep)}
.sprig svg{display:block;width:100%;height:auto}
.sprig--tr{top:-2%;right:-2%;width:clamp(120px,15vw,260px);transform:rotate(14deg)}
.sprig--bl{bottom:-3%;left:-3%;width:clamp(120px,14vw,240px);transform:rotate(-160deg)}
.sprig--tl{top:2%;left:-3%;width:clamp(100px,12vw,200px);transform:rotate(-24deg)}
.sprig--dark{opacity:.3;color:#8FA285}

/* ------------------------------------------------------------ stamp */
/* The rubber stamp the references put in a corner: a ring of type round a
   mark. Pure SVG, so it stays crisp and costs nothing. */
.stamp-badge{position:absolute;z-index:4;width:clamp(78px,9vw,124px);height:auto;
             color:var(--plum-deep);opacity:.82;pointer-events:none}
.stamp-badge svg{display:block;width:100%;height:auto}
.stamp-badge--light{color:#EBC9D3;opacity:.7}

/* ------------------------------------------------------------ icons */
.ico{width:1.5em;height:1.5em;flex:none;stroke:currentColor;fill:none;
     stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.ico--lg{width:2.1em;height:2.1em}

/* A brush stroke under a heading, the way the references underline a name. */
.brushed{position:relative;display:inline-block}
.brushed::after{content:'';position:absolute;left:-1.5%;right:-1.5%;bottom:.02em;height:.16em;
                background:var(--blush-deep);opacity:.85;border-radius:50%/60%;
                transform:rotate(-.5deg)}
.brushed--tight::after{bottom:.06em;height:.1em}

/* A paper card: warm, slightly lifted off the ground, occasionally rotated. */
.paper{background:var(--paper);box-shadow:0 1px 2px rgba(60,40,30,.10),0 14px 34px -24px rgba(60,40,30,.5)}
.paper--tilt{transform:rotate(-1.1deg)}
.paper--tilt-r{transform:rotate(.9deg)}

/* A photograph taped down, with a caption under it. */
.polaroid{position:relative;background:var(--paper);padding:clamp(10px,1.1vw,16px);
          box-shadow:0 1px 2px rgba(60,40,30,.12),0 18px 40px -26px rgba(60,40,30,.6)}
.polaroid img{display:block;width:100%}
.polaroid figcaption{font-family:var(--label);letter-spacing:.14em;text-transform:uppercase;
                     font-size:var(--t--2);color:var(--ink-faint);padding-top:var(--s-3)}

@media (prefers-reduced-motion:reduce){
  .hand--tilt,.hand--tilt-r,.paper--tilt,.paper--tilt-r{transform:none}
}

/* ==========================================================================
   ART DIRECTION PASS
   ==========================================================================
   The structure was right and the dressing was missing. Photography at half
   the scale the references run it at, no hand, no paper, no stamp, no icons -
   which made a warm, decorated bakery read as a cool editorial magazine.
   These are the corrections, section by section. */

/* A pill, which is what the references use for every primary action. */
.btn--pill{border-radius:999px;background:var(--blush-deep);border-color:var(--blush-deep);
           color:var(--ink);padding-inline:var(--s-7);font-family:var(--label);letter-spacing:.14em}
.btn--pill:hover{background:var(--plum);border-color:var(--plum);color:var(--cream)}
.btn--pillghost{border-radius:999px;border-color:var(--rule-mid)}

/* ---------------------------------------------- 1. the counter, dressed */
.counter{isolation:isolate}
.counter h1{font-size:clamp(3.4rem,1rem + 10vw,9.5rem);letter-spacing:-.035em;max-width:8ch}
.counter__shot{width:min(62%,940px)}
/* The pastry is the subject, not a garnish. The references run it at roughly
   a third of the viewport width; it was at a sixth. */
.counter__stage{width:min(112%,620px);justify-self:end;margin-right:clamp(-40px,-2vw,0px);
                z-index:7}
.counter__stage img{filter:drop-shadow(0 34px 44px rgba(48,28,18,.3))}
.counter__in{align-items:center}

/* The chosen bite is stamped pink, the way a bakery marks a docket. */
.bite{border-radius:3px}
.bite[aria-pressed="true"]{background:var(--blush);border-color:var(--blush-deep)}
.bite[aria-pressed="true"] b{color:var(--ink)}
.bite[aria-pressed="true"] span{color:var(--plum-deep)}
.bite__go{margin-left:auto;width:26px;height:26px;border-radius:50%;border:1px solid var(--rule-mid);
          display:grid;place-items:center;flex:none;font-family:var(--label);font-size:.8rem;color:var(--ink-soft)}
.bite[aria-pressed="true"] .bite__go{border-color:var(--plum);color:var(--plum-deep)}
.counter__rule{display:flex;align-items:center;gap:var(--s-5);margin-top:var(--s-6);
               border-top:1px solid var(--rule);padding-top:var(--s-4)}

/* ------------------------------------------------ 2. today, on torn paper */
.today__sheet{background:var(--paper);border:0;box-shadow:0 20px 44px -34px rgba(60,40,30,.75)}
.today__m{gap:var(--s-3)}
.today__m .ico{color:var(--ink-faint);margin-top:2px}
.today__m[aria-selected="true"] .ico{color:var(--plum-deep)}
.today__strip{position:relative}
.today__shot{position:relative;margin-bottom:calc(var(--s-7) * -1.4);z-index:2}
.today__shot img{width:100%;aspect-ratio:16/7;object-fit:cover;display:block}

/* ------------------------------------------------- 4. Marisa, at full height */
/* The portrait carries this section. It was a quarter of the width in a tidy
   two-column grid; in the references it is half the page, floor to ceiling. */
.marisa{position:relative;padding-block:0;overflow:hidden}
.marisa__top{grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);gap:0;align-items:stretch}
.marisa__shot{position:relative;margin:0;min-height:clamp(520px,82vh,900px)}
.marisa__shot img{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;object-fit:cover}
.marisa__shot figcaption{position:absolute;left:var(--s-5);bottom:var(--s-5);margin:0;
                         color:var(--cream);text-shadow:0 1px 10px rgba(20,12,8,.8);max-width:26ch}
.marisa__said{padding:clamp(var(--s-7),5vw,var(--s-9)) 0 clamp(var(--s-7),5vw,var(--s-9))
              clamp(var(--s-6),4vw,var(--s-8));position:relative;z-index:2}
.marisa h2{font-size:clamp(2.8rem,1rem + 7vw,6.4rem);max-width:9ch;letter-spacing:-.035em}
.marisa__pull{border-left:0;padding-left:0;margin-top:var(--s-7)}
.marisa__pull p{font-family:'Parisienne',cursive;font-weight:400;font-size:clamp(1.8rem,.8rem + 3vw,3.4rem);
                line-height:1.15;letter-spacing:.01em;max-width:20ch;color:var(--plum-deep)}
.dough{border-top:0;margin-top:0;padding:0 clamp(var(--s-5),4vw,var(--s-8)) clamp(var(--s-7),5vw,var(--s-9))}
.dough__s{border-top:0;padding:var(--s-4);background:var(--cream-hi);border:1px solid var(--rule);text-align:center}
.dough__s img{margin-top:var(--s-3);border-radius:2px}
.dough__s b{padding-top:0;text-align:center}
.dough__s[aria-selected="true"]{background:var(--blush);border-color:var(--blush-deep)}
.dough__s[aria-selected="true"] b{color:var(--ink)}
.dough__read{border-top:0;background:var(--cream-hi);border:1px solid var(--rule);padding:var(--s-5);
             grid-template-columns:minmax(0,1fr);gap:var(--s-2);text-align:center;justify-items:center}

/* ------------------------------------------------------- 6. the box, bigger */
.box__view img{aspect-ratio:4/3}
/* The photograph and the line under it are one thing. They were two grid
   items, so the line claimed column 2 of the next row and pushed the receipt
   down with it, which left a column standing empty and squeezed the controls
   into a sliver. */
.box__grid{grid-template-columns:minmax(0,1fr) minmax(0,1.55fr) minmax(0,1.05fr);align-items:start}
.box__stage{min-width:0}
.box__pack{border-radius:3px}
.box__pack[aria-pressed="true"]{background:var(--blush);border-color:var(--blush-deep)}
.box__pack{grid-template-columns:auto minmax(0,1fr);align-items:start;gap:2px var(--s-3)}
.box__pack .ico{grid-column:1;grid-row:1 / span 3;color:var(--ink-faint);margin-top:2px}
.box__pack b,.box__pack span,.box__pack em{grid-column:2}
.box__pack em{margin-top:2px}
.box__pack[aria-pressed="true"] .ico{color:var(--plum-deep)}
/* Each receipt line shows the thing it is charging for. */
.receipt__r img{width:34px;height:34px;object-fit:cover;flex:none;border-radius:2px}
.receipt__r{align-items:center;gap:var(--s-3)}
.receipt__r>span:first-child{display:flex;align-items:center;gap:var(--s-3);min-width:0}
.box__feats{display:flex;justify-content:center;gap:clamp(var(--s-5),4vw,var(--s-8));flex-wrap:wrap;
            margin-top:clamp(var(--s-6),4vw,var(--s-7));border-top:1px solid var(--rule);padding-top:var(--s-5)}
.box__feat{display:flex;align-items:center;gap:var(--s-3);font-family:var(--label);letter-spacing:.16em;
           text-transform:uppercase;font-size:var(--t--2);color:var(--ink-soft)}
.box__feat .ico{color:var(--plum-deep)}

/* ---------------------------------------------------- 7. the press sheet */
.press{position:relative}
.press__lead .polaroid{transform:rotate(-1.2deg)}
.press__b .polaroid{transform:rotate(.9deg)}
.press__c .polaroid{transform:rotate(-.7deg)}
.press__link:hover .polaroid{box-shadow:0 1px 2px rgba(60,40,30,.14),0 24px 50px -28px rgba(60,40,30,.7)}
.press__lead h3{margin-top:var(--s-6)}

/* -------------------------------------------------------------- narrower */
@media (max-width:900px){
  .marisa__top{grid-template-columns:minmax(0,1fr)}
  .marisa__shot{min-height:clamp(340px,52vh,520px)}
  .marisa__said{padding:var(--s-7) var(--gut)}
  .dough{padding-inline:var(--gut)}
  .counter__stage{width:min(100%,380px);justify-self:start;margin-right:0}
  .today__shot{margin-bottom:0}
  .sprig--tr,.sprig--bl,.sprig--tl{width:clamp(90px,22vw,150px);opacity:.34}
  .pin{display:none}          /* pinned notes need room; they get it back at 900 */
}
@media (max-width:640px){
  .counter h1{font-size:clamp(2.9rem,1rem + 11vw,4.4rem)}
  .box__pack{grid-template-columns:auto minmax(0,1fr);row-gap:2px}
  .box__pack em{grid-column:2;grid-row:auto}
  .stamp-badge{width:clamp(62px,16vw,84px)}
}