/* Wheat Penny — round 3, identity built on the photographs first.
   Palette: Dana and Curt's own artifacts still rule the hues (the butter wall
   she painted, the penny copper he painted the trim, her chalkboard, his
   printed cream board). What the five archival frames were allowed to correct
   is the NEUTRALS — sampled with palette.py, tonal ends of the colour frames:
       shadow #5f3c23 / mid #987752 / light #c7c2b3, and the coin's own #a55c3c.
   So: --ground and --muted moved onto the photographs' warm shadow, --muted-lt
   onto their light, --copper-lift onto the real coin. Butter and copper did
   not move; an artifact outranks a swatch.
   Two faces, one stated relationship: Dana's hand (Shantell) over
   Curt's printed board (Public Sans). One radius. */

:root{
  --cream:#FAF4E6;      /* printed menu-board paper */
  --butter:#F3D98F;     /* the wall Dana painted */
  --chalk:#2B2B26;      /* the chalkboard */
  --ink:#2C2418;        /* char ink */
  --copper:#8A4A20;     /* the trim Curt painted */
  --copper-lift:#C58A55;/* the real 1944 cent's own #a55c3c, lifted to clear AA on the ground */
  --ground:#23170D;     /* SAMPLED: the shadow end of every photograph */
  --muted:#5E452C;      /* SAMPLED: the bakehouse shadow #5f3c23, held to AA on cream */
  --muted-lt:#D3C8B3;   /* SAMPLED: the photographs' light #c7c2b3 */
  --r:12px;
  --hand:'Shantell Sans','Segoe Print','Comic Sans MS',cursive;
  --print:'Public Sans','Segoe UI',Arial,sans-serif;
  --w:1200px;
  /* Texture is a material, not an effect: one grain, two strengths.
     Over darks it also raises apparent contrast, which is the real reason. */
  --noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  /* Vertical rhythm (local trade / neighborhood shop, ABAB surfaces carry the
     alternation): tight glues grouped content, base is the walking beat,
     grand (1.7x) is spent twice: before the penny story, before "Come see us". */
  --beat-tight:28px;
  --beat-base:112px;
  --beat-grand:190px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
}
[id]{scroll-margin-top:96px}
body{
  margin:0;
  font-family:var(--print);
  font-size:16px;line-height:1.6;
  color:var(--ink);background:var(--cream);
}
img,svg{max-width:100%;height:auto}
a{color:var(--copper)}
a:focus-visible,button:focus-visible{outline:3px solid var(--copper);outline-offset:2px;border-radius:4px}
.wrap{max-width:var(--w);margin:0 auto;padding:0 24px}

.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--cream);padding:10px 16px;z-index:99;border-radius:0 0 var(--r) 0}
.skip:focus{left:0}

/* Dana's underline: one hand stroke, copper on light, chalk on dark */
.u{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 10' preserveAspectRatio='none'%3E%3Cpath d='M4 7C40 3.5 98 3 132 4.5c26 1 48 2 64 1' fill='none' stroke='%238A4A20' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:0 100%;background-size:100% .16em;
  padding-bottom:.14em;
}
.dk .u{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 10' preserveAspectRatio='none'%3E%3Cpath d='M4 7C40 3.5 98 3 132 4.5c26 1 48 2 64 1' fill='none' stroke='%23FAF4E6' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* ---------- for-sale banner ---------- */
.forsale{background:var(--ink);color:var(--cream)}
.forsale-in{display:flex;gap:16px;align-items:baseline;justify-content:space-between;padding:9px 24px;flex-wrap:wrap}
.forsale p{margin:0;font-size:14px}
.forsale a{color:var(--copper-lift)}

/* ---------- header ---------- */
.site-head{background:var(--cream);border-bottom:2px solid var(--ink);position:relative;z-index:5}
.head-in{display:flex;align-items:center;gap:20px;padding:14px 24px}
.mark{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-family:var(--hand);font-weight:700;font-size:20px}
.mark svg{flex:none}
.nav{display:flex;gap:22px;margin-left:auto}
.nav a{color:var(--ink);text-decoration:none;font-weight:600;font-size:15px}
.nav a:hover{color:var(--copper);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px}
.head-cta{display:flex;align-items:center;gap:16px}
.tel{font-weight:600;font-size:15px;color:var(--ink);text-decoration:none;white-space:nowrap}
.tel:hover{color:var(--copper)}
.btn{
  display:inline-block;font-family:var(--print);font-weight:600;font-size:15px;
  padding:10px 20px;border-radius:var(--r);text-decoration:none;white-space:nowrap;
  border:2px solid var(--copper);
}
.btn-solid{background:var(--copper);color:var(--cream)}
.btn-solid:hover{background:#6F3A17;border-color:#6F3A17}
.btn-solid:active{transform:translateY(1px)}
.btn-lg{font-size:16px;padding:13px 26px}
.menu{display:none;background:none;border:2px solid var(--ink);border-radius:var(--r);padding:8px 10px;cursor:pointer}
.menu span{display:block;width:20px;height:2px;background:var(--ink);margin:4px 0}

/* ---------- hero: a photograph of the trade's real world ----------
   Composition (identity-first sec 7): background is a photograph, noise over
   it, vignette pulling to the centre, and a scrim that guarantees the copy
   column never lands on the oven mouth or a white apron. The scattered
   assets sit in their own column and never cross into the text. */
.hero{position:relative;isolation:isolate;overflow:hidden;background:var(--ground);color:var(--cream);border-bottom:2px solid var(--ink)}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-img{width:100%;height:100%;object-fit:cover;object-position:60% 46%;display:block}
/* the margin of safety, in one gradient: left 55% of the frame is ground */
.hero-bg::before{content:"";position:absolute;inset:0;background:
  linear-gradient(97deg,rgba(35,23,13,.95) 0%,rgba(35,23,13,.93) 30%,rgba(35,23,13,.86) 48%,
  rgba(35,23,13,.62) 64%,rgba(35,23,13,.34) 82%,rgba(35,23,13,.22) 100%)}
/* vignette the edges to pull the eye to the centre */
.hero-bg::after{content:"";position:absolute;inset:0;background:
  radial-gradient(125% 105% at 52% 44%,rgba(35,23,13,0) 38%,rgba(35,23,13,.30) 72%,rgba(35,23,13,.68) 100%)}
.hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background-image:var(--noise);background-size:180px 180px;opacity:.16;mix-blend-mode:overlay}
/* hero→first section is glued at ~0.5x base (36 + 20 below), never a full beat */
.hero-in{position:relative;z-index:2;display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center;padding-top:80px;padding-bottom:64px}
.hero-copy{max-width:36em}
.hero h1{text-shadow:0 2px 18px rgba(35,23,13,.55)}
/* Dana's underline goes butter on the photograph: the wall survives as accent */
.hero .u{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 10' preserveAspectRatio='none'%3E%3Cpath d='M4 7C40 3.5 98 3 132 4.5c26 1 48 2 64 1' fill='none' stroke='%23F3D98F' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E")}
.hero .lede{color:var(--cream)}
.est{margin:0 0 14px;font-size:14px;font-weight:600;letter-spacing:.02em;color:var(--muted);text-transform:uppercase}
.hero .est{color:var(--butter)}
.hero .lede-c{color:var(--muted-lt)}
.hero-alt{color:var(--cream)}
.hero-alt:hover{color:var(--butter)}
h1{
  font-family:var(--hand);font-weight:700;
  font-size:clamp(34px,5.2vw,54px);line-height:1.12;
  margin:0 0 18px;letter-spacing:-.01em;
}
.lede{font-size:19px;max-width:34em;margin:0 0 12px}
.lede-c{font-size:15px;color:var(--muted);margin:0 0 18px}
/* buttons sit at least 2x the heading-to-subtext distance below the subtext */
.hero-act{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin:44px 0 0}
.hero-alt{font-weight:600;color:var(--ink)}
.hero-alt:hover{color:var(--copper)}
.hero-art{position:relative;justify-self:end;width:min(100%,360px);filter:drop-shadow(0 22px 34px rgba(20,12,6,.55))}
.hero-art .aframe{display:block;width:100%;transform:rotate(2deg)}
/* the coin mark, rhymed here in Dana's butter yellow so it reads on the photo */
.hero-art .stamp{position:absolute;right:-10px;top:-34px;width:104px;transform:rotate(-9deg);color:var(--butter)}

/* ---------- shared section bits ---------- */
.sec{padding:calc(var(--beat-base)/2) 0}
/* the board sits glued under the butter wall, like the A-frame under the window */
#board{padding-top:20px}
/* grand pauses, spent BEFORE the payoff: the penny origin story, then the close */
#penny{padding-top:calc(var(--beat-grand) - var(--beat-base)/2)}
#visit{padding-top:calc(var(--beat-grand) - var(--beat-base)/2);padding-bottom:36px}
h2{
  font-family:var(--hand);font-weight:700;
  font-size:clamp(27px,3.2vw,36px);line-height:1.2;margin:0 0 14px;
}
h3{font-family:var(--print);font-weight:600;font-size:16px;text-transform:uppercase;letter-spacing:.06em;margin:0 0 14px}
.sec-head{max-width:44em}
.sec-head p{margin:0}
.fine{font-size:14px;color:var(--muted)}
.dk .fine{color:var(--muted-lt)}
.aside-c{font-size:14px;color:var(--muted);font-style:normal}
.dk .aside-c{color:var(--muted-lt)}

/* menu lists (Curt's dot leaders, kept from round 1) */
.menu-list{list-style:none;margin:0;padding:0}
.menu-list li{display:flex;align-items:baseline;gap:10px;padding:6px 0} /* density zone: menu rows run a micro-beat */
.mi-name{font-weight:600}
.mi-name em{display:block;font-style:normal;font-weight:400;font-size:14px;color:var(--muted)}
.dk .mi-name em{color:var(--muted-lt)}
.mi-dots{flex:1;border-bottom:2px dotted currentColor;opacity:.45;transform:translateY(-4px);min-width:24px}
.mi-price{font-weight:600;font-variant-numeric:tabular-nums}
.mi-out .mi-name>span:first-child{text-decoration:line-through;text-decoration-thickness:2px}
.mi-flag{font-family:var(--hand);font-weight:700;font-size:14px;color:var(--copper-lift);white-space:nowrap}

/* ---------- inverted section: photograph as the ground, stronger noise ----
   The bake-schedule board deliberately does NOT get this treatment: it is the
   page's density zone and stays a clean chalkboard. Only #penny inverts. */
.photo-sec{position:relative;isolation:isolate;overflow:hidden;background:var(--ground)}
.photo-bg{position:absolute;inset:0;z-index:0}
.photo-bg img{width:100%;height:100%;object-fit:cover;object-position:50% 44%;display:block}
.photo-bg::before{content:"";position:absolute;inset:0;background:
  linear-gradient(93deg,rgba(35,23,13,.93) 0%,rgba(35,23,13,.86) 46%,rgba(35,23,13,.90) 100%)}
.photo-bg::after{content:"";position:absolute;inset:0;background:
  radial-gradient(120% 110% at 46% 50%,rgba(35,23,13,0) 34%,rgba(35,23,13,.40) 70%,rgba(35,23,13,.78) 100%)}
.photo-sec::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background-image:var(--noise);background-size:180px 180px;opacity:.30;mix-blend-mode:overlay}
.photo-sec>.wrap{position:relative;z-index:2}

/* ---------- the board (chalkboard) ---------- */
.dk{background:var(--chalk);color:var(--cream)}
.dk a{color:var(--copper-lift)}
.board-wrap{position:relative}
.board-sprig{position:absolute;width:74px;opacity:.9}
.sprig-tl{right:6px;top:-10px;transform:rotate(24deg)}
.sprig-br{right:-6px;bottom:-14px;transform:rotate(160deg)}
/* the bake-schedule board is the page's density zone: everything on it groups tight */
.board-cols{display:grid;grid-template-columns:1fr 1fr;gap:16px 56px;margin-top:var(--beat-tight)}
.board-note{margin:20px 0 0;font-family:var(--hand);font-weight:700;font-size:19px}
.hold{border:2px solid var(--copper-lift);border-radius:var(--r);padding:18px 22px;margin-top:var(--beat-tight);max-width:46em}
.hold p{margin:0}
.hold .hold-h{font-family:var(--hand);font-weight:700;font-size:19px;margin-bottom:6px;color:var(--copper-lift)}

/* ---------- photographic assets ----------
   Scatter rule: the larger frame sits lower, the smaller one on top, and a
   margin of safety is kept around every copy block — nothing crosses in. */
.ph{margin:0;line-height:0;border:2px solid var(--ink);border-radius:var(--r);
  overflow:hidden;background:var(--ground);box-shadow:0 18px 34px rgba(35,23,13,.26)}
.ph img{display:block;width:100%;height:auto}

/* ---------- pastry case ---------- */
.case-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:64px;align-items:start}
.case-art{position:relative;padding:44px 0 0 0}
.case-art .ph-lg{width:88%;margin-left:auto;transform:rotate(1.6deg)}
.case-art .ph-sm{position:absolute;left:0;top:0;width:46%;transform:rotate(-4deg);z-index:2}
.case-note{font-family:var(--hand);font-weight:700;font-size:19px;margin:22px 0 6px}

/* ---------- cakes ---------- */
.sec-cakes{padding:calc(var(--beat-base)/2) 0}
.cake-panel{
  background:var(--butter);border:2px solid var(--ink);border-radius:var(--r);
  padding:48px;display:grid;grid-template-columns:.8fr 1.2fr;gap:48px;align-items:center;
}
.cake-act{margin:24px 0 10px;display:flex;gap:20px;align-items:center;flex-wrap:wrap}

/* ---------- penny ---------- */
.penny-grid{display:grid;grid-template-columns:.75fr 1.25fr;gap:56px;align-items:center}
.penny-coin{position:relative;justify-self:center;width:min(100%,300px);aspect-ratio:1/1.06}
.coin-w{position:absolute;display:block;filter:drop-shadow(0 16px 26px rgba(15,8,3,.6))}
/* larger element lower, smaller on top */
.coin-a{left:0;bottom:0;width:76%;transform:rotate(-7deg)}
.coin-b{right:0;top:0;width:54%;transform:rotate(11deg);z-index:2}
.coin{display:block;width:100%;height:auto}
.penny-deal{
  font-family:var(--hand);font-weight:700;font-size:19px;
  border-left:4px solid var(--copper-lift);padding-left:18px;margin-top:24px;
}
.stamp-txt{font-family:var(--print);font-weight:600;font-size:22px;letter-spacing:.14em;fill:currentColor}

/* ---------- visit ---------- */
.visit-band{margin:32px 0 0}
.visit-band img{max-height:300px;object-fit:cover;object-position:50% 52%}
.visit-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:44px;margin-top:36px}
.visit-big{font-size:19px;font-weight:600;margin:0 0 10px}
.visit-big a{color:var(--ink)}
.visit-big a:hover{color:var(--copper)}
.hours{margin:0}
.hours div{display:flex;justify-content:space-between;gap:14px;padding:7px 0;border-bottom:1px solid rgba(92,74,51,.28)}
.hours dt{font-weight:600}
.hours dd{margin:0;font-variant-numeric:tabular-nums}

/* ---------- footer ---------- */
.site-foot{background:var(--ink);color:var(--cream);padding:52px 0 30px}
.site-foot a{color:var(--copper-lift)}
.foot-in{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px}
.foot-h{font-weight:600;text-transform:uppercase;letter-spacing:.06em;font-size:14px;margin:0 0 10px;color:var(--muted-lt)}
.foot-in p{margin:0 0 8px;font-size:15px}
.foot-brand .mark{color:var(--cream);margin-bottom:12px}
.foot-credits{margin-top:40px;padding-top:22px;border-top:1px solid rgba(250,244,230,.22)}
.credit-note{margin:0 0 12px;font-size:14px;color:var(--muted-lt);max-width:62em}
.credits{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:8px 40px}
.credits li{font-size:13px;line-height:1.5;color:var(--muted-lt)}
.credits cite{font-style:italic}
@media (max-width:860px){.credits{grid-template-columns:1fr}}
.foot-fine{margin-top:28px;padding-top:18px;border-top:1px solid rgba(250,244,230,.22)}
.foot-fine p{margin:0;font-size:14px;color:var(--muted-lt)}

/* ---------- illustration hand (one hand: same weights everywhere) ---------- */
.il-line{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.il-lw2{stroke-width:2.8}
.il-faint{opacity:.55}
.il-fill{fill:var(--cream);stroke:none}
.dk .il-fill{fill:var(--chalk)}

/* A-frame chalk lettering */
.af-hand{font-family:var(--hand);font-weight:700;fill:#FAF4E6}
.af-big{font-size:38px;letter-spacing:.02em}
.af-sm{font-size:16px}

/* ---------- motion: TWO NAMED THEMES, REPEATED THE WHOLE WAY DOWN ----------

   THEME 1 — "FIRST PULL".
   Anything entering the viewport rises 14px and clears out of a 6px blur, the
   way a tray comes out of the deck oven and resolves as it cools. It is the
   only entrance on the page: hero copy, the board, the case, the cakes panel,
   the penny, the visit columns and the storefront band all run this one move
   and nothing runs anything else.

   THEME 2 — "CHALK SETTLE".
   Every photograph seats itself. Each frame arrives at scale 1.04 and settles
   to 1 over .9s, and lifts 1.035 again under the cursor — Dana wiping the
   board flat with the heel of her hand, then leaning back in. It runs on the
   hero frame, both case frames, the storefront band and both coins.

   Both themes are opt-IN through the .js class, so with JavaScript dead every
   element is already in its final state and the page is complete. Both are
   switched off entirely under prefers-reduced-motion. */
[data-rise]{opacity:1;transform:none;filter:none}
@media (prefers-reduced-motion:no-preference){
  /* theme 1 — first pull */
  .js [data-rise]{opacity:0;transform:translateY(14px);filter:blur(6px);
    transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.3,1),filter .6s ease}
  .js [data-rise].in{opacity:1;transform:none;filter:blur(0)}

  /* theme 2 — chalk settle */
  .js .ph,.js .visit-band,.js .coin-w{transition:transform .9s cubic-bezier(.2,.7,.3,1)}
  .js [data-rise]:not(.in) .ph-lg{transform:rotate(1.6deg) scale(1.04)}
  .js [data-rise]:not(.in) .ph-sm{transform:rotate(-4deg) scale(1.04)}
  .js .visit-band[data-rise]:not(.in){transform:scale(1.04)}
  .js [data-rise]:not(.in) .coin-a{transform:rotate(-7deg) scale(1.05)}
  .js [data-rise]:not(.in) .coin-b{transform:rotate(11deg) scale(1.05)}
  .ph img,.visit-band img{transition:transform .5s cubic-bezier(.2,.7,.3,1)}
  .ph:hover img,.visit-band:hover img{transform:scale(1.035)}
  .hero-img{animation:settle 1.9s cubic-bezier(.2,.7,.3,1) both}
}
@keyframes settle{from{transform:scale(1.055)}to{transform:scale(1)}}

/* ---------- responsive ---------- */
@media (max-width:960px){
  /* stacked: the copy now covers the whole frame, so the scrim goes all-over */
  .hero-bg::before{background:linear-gradient(180deg,rgba(35,23,13,.92) 0%,rgba(35,23,13,.90) 55%,rgba(35,23,13,.93) 100%)}
  .hero-in{grid-template-columns:1fr;padding-top:52px;padding-bottom:48px;gap:36px}
  .hero-art{justify-self:start;width:min(70%,300px);margin-top:8px}
  .photo-bg::before{background:linear-gradient(180deg,rgba(35,23,13,.92),rgba(35,23,13,.90))}
  .case-grid,.penny-grid{grid-template-columns:1fr;gap:32px}
  .case-art{max-width:380px;padding-top:40px}
  .penny-coin{justify-self:start;width:min(72%,260px)}
  .cake-panel{grid-template-columns:1fr;padding:32px;gap:28px}
  .cake-panel .cake-art{max-width:240px}
  .visit-grid{grid-template-columns:1fr;gap:30px}
  .foot-in{grid-template-columns:1fr;gap:26px}
}
@media (max-width:860px){
  .nav{
    display:none;position:absolute;top:100%;left:0;right:0;background:var(--cream);
    border-bottom:2px solid var(--ink);flex-direction:column;gap:0;padding:8px 24px 16px;
  }
  .nav.open{display:flex}
  /* JavaScript dead: no toggle exists, so the nav is simply always open */
  html:not(.js) .nav{display:flex;position:static;border-bottom:0;padding:6px 0 0}
  html:not(.js) .menu{display:none}
  .nav a{padding:10px 0}
  .menu{display:block}
  .tel{display:none}
  .board-cols{grid-template-columns:1fr}
  .board-sprig{width:52px}
  .sprig-tl{right:12px}
  .sprig-br{right:10px}
}
@media (max-width:480px){
  :root{--beat-tight:22px;--beat-base:80px;--beat-grand:132px}
  .wrap{padding:0 18px}
  .head-in{padding:12px 14px;gap:10px}
  .head-cta{gap:8px}
  .mark{font-size:17px;gap:7px}
  .mark svg{width:28px;height:28px}
  .btn{padding:10px 14px;font-size:14px}
  .btn-lg{font-size:16px;padding:12px 20px}
  .hero-art .stamp{width:78px;top:-16px}
  .hero-in{padding-top:40px;padding-bottom:40px}
  .hero-act{margin-top:34px}
  .case-art .ph-lg{width:84%}
  .case-art .ph-sm{width:50%}
  .visit-band img{max-height:200px}
}