/* ============================================================================
   THE PUBLIC PAGES' OWN LOOK — 18 October 2026
   about.html (Our story), what-we-bake.html, how-to-start.html and
   where-we-deliver.html, and nothing else.

   Mo, shown the draft website as an artifact, then the landing screen's row of
   buttons: "change about us to our story and what we bake how to start where we
   deliver as buttons and if they press it it shows what u showed me in the
   artifact". So this is that draft's stylesheet, with the two things that were
   never part of a website taken out: the "Draft · not public yet" bar and the
   "Notes for Mo" page.

   ONE STYLESHEET FOR FOUR PAGES, unlike contact.html and tasting.html, which
   each carry their own <style>. Four copies of 300 lines is four chances to
   change three of them. The header and the footer ARE written out in each page
   (there is no build step here), so those are "change one, change all four".

   THE APP DOES NOT READ THIS FILE. index.html is the whole application and has
   its own stylesheet; nothing here can reach the ordering screens.

   ALWAYS LIGHT, WHATEVER THE COMPUTER IS SET TO (18 Oct 2026). The first copy
   followed the computer's dark mode, as the draft did. Mo, on a laptop set to
   dark: "why is it dark ?". The landing screen, contact.html and the whole app
   are light only, so these four pages were the one dark corner of the bakery's
   site. color-scheme:light keeps the browser's own scrollbars and controls light
   too. Do not add a prefers-color-scheme block back without asking him.
   ============================================================================ */
:root{
  --paper:#fffdf9;      /* page */
  --crust:#f5ebdd;      /* bands */
  --ink:#2a1a10;        /* text */
  --muted:#6e5d50;      /* secondary text */
  --brand:#7c3f14;      /* M&J brown, the app's --brand */
  --accent:#d97706;     /* M&J amber, the app's --accent */
  --line:#e8dccb;
  --tile:#ffffff;       /* photos are shot on white */
  --on-accent:#ffffff;
  --map-land:#efe2cf;
  --map-zone:rgba(217,119,6,.18);
  --font-display:"Young Serif", Georgia, "Times New Roman", serif;
  --font-body:"Libre Franklin", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono:"DM Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  color-scheme:light;
}

*{box-sizing:border-box}
body{background:var(--paper);color:var(--ink);font-family:var(--font-body);font-size:17px;line-height:1.6;margin:0}
a{color:var(--brand)}
/* A phone number is one thing to read and one thing to tap: never "919-" on one
   line and "463-0005" on the next. */
a[href^="tel:"]{white-space:nowrap}
img{max-width:100%;display:block}
.in{max-width:1120px;margin:0 auto;padding-left:max(16px, env(safe-area-inset-left, 0px));padding-right:max(16px, env(safe-area-inset-right, 0px))}
h1,h2,h3{font-family:var(--font-display);font-weight:400;color:var(--ink);text-wrap:balance;margin:0}
h2{font-size:clamp(28px,3.6vw,40px);line-height:1.15;letter-spacing:-.3px}
h3{font-size:22px;line-height:1.2}
p{margin:0}
.eyebrow{font-family:var(--font-mono);font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--brand)}
.lede{color:var(--muted);max-width:62ch}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:4px}
.ribbon{height:6px;background:repeating-linear-gradient(90deg,var(--accent) 0 40px,var(--brand) 40px 80px)}

/* header: the name on the left, ONE button on the right, exactly as tasting.html
   has it (Mo, 18 Oct 2026). There was a menu of all four pages here for an hour;
   he wanted each page on its own with only the way back. The row never wraps, so
   the button stays top right on a 360px phone too: the name shrinks a little and
   its small line under it may take two lines instead. */
.top .in{display:flex;align-items:center;justify-content:space-between;gap:14px;padding-block:18px;flex-wrap:nowrap}
.mark{font-family:var(--font-display);font-size:clamp(24px,6.4vw,30px);color:var(--brand);line-height:1;min-width:0}
.mark small{display:block;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:6px}
.back{font-size:14px;font-weight:600;color:var(--brand);text-decoration:none;border:1px solid var(--line);
  border-radius:999px;padding:9px 17px;white-space:nowrap;background:var(--paper)}
.back:hover{background:var(--crust)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--font-body);font-weight:600;font-size:16px;
  border-radius:999px;padding:13px 22px;text-decoration:none;border:2px solid transparent;cursor:pointer;line-height:1.1}
.btn.primary{background:var(--accent);color:var(--on-accent)}
.btn.primary:hover{filter:brightness(1.06)}

section{padding-block:72px}
section.tight{padding-block:48px 72px}
section .cta{margin-top:34px}
.head{display:flex;flex-direction:column;gap:12px;margin-bottom:34px;max-width:720px}
.cta{display:flex;gap:12px;flex-wrap:wrap}
.call{margin-top:16px;color:var(--muted);font-size:15px}
.call b{color:var(--ink);font-weight:600;user-select:all}
.call a{color:var(--ink);font-weight:600;text-decoration:none}

/* a page's heading band */
.page-head{background:var(--crust);border-bottom:1px dashed var(--brand)}
.page-head .in{padding-block:44px 40px;display:flex;flex-direction:column;gap:12px}
.page-head h1{font-size:clamp(32px,4.6vw,52px);line-height:1.08;letter-spacing:-.6px;max-width:20ch}

/* what we bake */
.shelf{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px}
.card{display:flex;flex-direction:column;gap:12px;min-width:0}
/* THE PHOTOS ARE THE MENU'S CUT-OUTS, SHOWN WHOLE (18 Oct 2026). Mo: "we have to fix
   these photos". The draft's photos were square and wide, in tall 4:5 boxes with
   object-fit:cover, so the loaf lost its end, the cookie half of itself and the
   brownie its corners. A cut-out on the menu's own cream (--imgbg, #ECE6DA in the
   app) with object-fit:contain cannot be cropped, whatever shape the box is, and
   every card matches what a customer later sees on the menu. */
.card figure{margin:0;background:#ece6da;border-radius:12px;overflow:hidden;aspect-ratio:1/1;max-width:100%;border:1px solid var(--line)}
.card img{width:100%;height:100%;object-fit:contain;padding:6%;box-sizing:border-box}
.card p{color:var(--muted);font-size:15px;line-height:1.5}
@media (max-width:1000px){ .shelf{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:640px){ .shelf{grid-template-columns:1fr 1fr;gap:14px} .card h3{font-size:19px}
  .shelf .card:nth-child(5):last-child{grid-column:1 / -1}
  .shelf .card:nth-child(5):last-child figure{aspect-ratio:2/1} }
/* THE SMALLER LISTS ARE A WRAPPING ROW, NOT A GRID (18 Oct 2026). A three-column
   grid with five cards left a hole in its last row, and the dividing line under
   that row stopped two thirds of the way across (Mo: "can u fix this pls"). How
   many cards there are is decided by the live menu, so no fixed count of columns
   can be right. Each card is a third of the row and GROWS: whatever is left on
   the last row (one card, or two) stretches to the edge, and its line with it. */
.more{margin-top:44px;display:flex;flex-wrap:wrap;border-top:1px solid var(--line)}
.more div{flex:1 1 30%;padding:20px 20px 20px 0;border-bottom:1px solid var(--line);min-width:0}
.more h3{font-size:19px;margin-bottom:6px}
.more p{color:var(--muted);font-size:15px;line-height:1.5}
@media (max-width:860px){ .more div{flex-basis:45%} }
@media (max-width:520px){ .more div{flex-basis:100%;padding-right:0} }
.special{margin-top:26px;color:var(--muted);font-size:15px;max-width:62ch}
.special b{color:var(--ink);font-weight:600}
/* A card whose products are all off the live menu is hidden, not emptied. */
[hidden]{display:none !important}

/* how to start */
.band{background:var(--crust)}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;counter-reset:s}
.steps li{counter-increment:s;display:flex;flex-direction:column;gap:10px;min-width:0;padding-top:18px;border-top:2px solid var(--brand)}
.steps li::before{content:"Step " counter(s);font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--brand)}
.steps p{color:var(--muted);font-size:15.5px}
@media (max-width:900px){ .steps{grid-template-columns:1fr 1fr} }
@media (max-width:520px){ .steps{grid-template-columns:1fr} }
.who{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}
.who span{border:1px solid var(--line);border-radius:999px;padding:8px 16px;font-size:15px;background:var(--paper)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
@media (max-width:860px){ .split{grid-template-columns:1fr;gap:36px} }
.facts{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:10px}
.facts li{max-width:60ch}

/* where we deliver */
.deliver .in{display:grid;grid-template-columns:.9fr 1.1fr;gap:48px;align-items:center}
@media (max-width:860px){ .deliver .in{grid-template-columns:1fr;gap:28px} }
.map{position:relative;min-width:0}
.map svg{width:100%;height:auto;display:block}
.map .state{fill:var(--map-land);stroke:var(--brand);stroke-width:1.2;stroke-linejoin:round}
.map .zone{fill:var(--map-zone);stroke:var(--accent);stroke-width:1.5;stroke-dasharray:4 4}
.map .home{fill:var(--brand);stroke:var(--paper);stroke-width:2}
.map .pin{position:absolute;transform:translate(0,-50%);font-size:13.5px;line-height:1.25;white-space:nowrap}
.map .pin b{display:block;font-family:var(--font-mono);font-weight:500;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--brand)}
.map .pin.mid{transform:translate(-50%,0);text-align:center}
/* AREAS ONLY: no drawn routes and no dot per town (18 Oct 2026). A label can end at
   its point or sit above it. */
.map .pin.end{transform:translate(-100%,-50%);text-align:right}
.map .pin.above{transform:translate(-50%,-100%)}
/* The names are placed in % of the drawing, so they sit in a box the legend is not in. */
.map .mapbox{position:relative}
.map .legend{margin-top:10px;font-size:13.5px;color:var(--muted);display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px}
.map .key{display:inline-block;width:12px;height:12px;border-radius:50%;background:var(--brand);border:2px solid var(--paper);box-shadow:0 0 0 1px var(--brand)}
.map .key.zone{width:14px;height:14px;background:var(--map-zone);border:1.5px dashed var(--accent);box-shadow:none;margin-left:10px}
/* On a phone the map is too small for six names, and the list above it already
   names every area: the circles and the legend stay, the names go. */
@media (max-width:600px){ .map .pin{display:none} }
.towns{display:flex;flex-direction:column;gap:14px;margin-top:22px}
.towns div{display:flex;flex-direction:column;gap:2px}
.towns b{font-weight:600}
.towns span{color:var(--muted);font-size:15px}

/* our story */
.story-rows{display:flex;flex-direction:column;gap:44px}
.story-rows .row{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:40px;align-items:start;margin:0}
.story-rows img{border-radius:14px;width:100%;height:auto}
.story-rows .copy{display:flex;flex-direction:column;gap:14px;min-width:0}
.story-rows .copy p{max-width:62ch}
.story-rows h2{font-size:clamp(24px,3vw,32px)}
@media (max-width:760px){ .story-rows .row{grid-template-columns:1fr;gap:18px} .story-rows img{max-width:460px} }

footer{padding-block:26px;color:var(--muted);font-size:14px;border-top:1px solid var(--line)}
footer .in{display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:space-between}
footer .flinks{display:flex;flex-wrap:wrap;gap:6px 16px}
footer a{color:var(--muted)}
@media (prefers-reduced-motion: no-preference){ .btn{transition:filter .15s, background .15s} }