@font-face{font-family:'Space Grotesk';src:url(fonts/spacegrotesk.woff2) format('woff2-variations');font-weight:400 700;font-display:swap;font-style:normal}

:root{
  --paper:#fbfaf7;
  --ink:#17181a;
  --quiet:#565a5e;
  --rule:#d9d6ce;
  --hot:#1f5130;
  /* sampled off the hand-written price sticker in img/snacks.jpg */
  --tag:#f6b512;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html,body{overflow-x:clip}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:'Space Grotesk',system-ui,sans-serif;font-size:17px;line-height:1.6;
}
.skip{position:absolute;left:-9999px;padding:10px 14px}
.skip:focus{left:12px;top:12px;z-index:60;background:var(--ink);color:var(--paper);padding:10px 14px}
:focus-visible{outline:3px solid var(--hot);outline-offset:3px}

.mockup{
  max-width:none;margin:0;padding:9px 20px;background:var(--ink);color:#f1efe9;
  font-size:13.5px;line-height:1.45;text-align:center;
}
.mockup b{font-weight:700}

/* the door sign: pinned status strip, not a nav */
.sign{
  position:sticky;top:0;z-index:30;
  display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 26px;
  padding:11px 24px;background:var(--hot);color:#fff;
}
.sign .open{font-weight:700;font-size:16px;letter-spacing:.02em}
.sign .hrs{font-size:15px;color:#cfe2d6}
.sign a{margin-left:auto;color:#fff;font-weight:700;font-size:17px;text-decoration:underline;text-underline-offset:4px;padding-block:5px}

.intro{padding:34px 24px 26px;max-width:60rem}
.intro .name{margin:0 0 18px;font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--quiet);font-weight:700}
.intro .name a{color:inherit;text-decoration:none;display:inline-block;padding-block:7px}
h1{font-size:clamp(38px,5.7vw,84px);line-height:1.02;font-weight:700;letter-spacing:-.035em;margin:0 0 18px;max-width:15ch}
.intro p{margin:0 0 10px;max-width:60ch;color:var(--quiet)}

/* ---------------------------------------------------------------------
   THE PRICE STICKER. The one shape on this page is taken from the shop's
   own: a square-cut yellow tag with the bottom right corner torn off the
   roll. No radius anywhere, because nothing in a grocery is rounded.
   Used three times: the shop name, the counter, the phone number.
   --------------------------------------------------------------------- */
.tag{
  display:inline-block;background:var(--tag);color:#17181a;
  padding:6px 15px 6px 12px;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 11px),calc(100% - 11px) 100%,0 100%);
}

/* the first screen: words left, a photograph running off the right edge */
.intro.lead{
  max-width:none;display:grid;align-items:start;
  grid-template-columns:minmax(0,1fr) 52vw;
  gap:0 40px;padding:30px 0 34px 24px;
}
.lead-words{padding-right:8px;padding-top:6px}
.lead-words .name{margin-bottom:22px;letter-spacing:.16em}
.lead-shot{margin:0;position:relative}
.lead-shot img{
  display:block;width:100%;height:calc(100vh - 160px);min-height:420px;
  object-fit:cover;object-position:52% 42%;
}
.lead-shot figcaption{
  max-width:44ch;color:var(--quiet);
  padding:10px 24px 0 0;font-size:13.5px;line-height:1.45;
}

/* a photograph in the aisle's own right rail, under the note. These shots
   are close ups, so they want to be small and specific, not full width. */
.aisle.shot{grid-template-columns:5.5rem minmax(0,1fr) minmax(0,17rem)}
.aisle .rail{margin:12px 0 2px;grid-column:3}
.aisle .rail img{display:block;width:100%;height:190px;object-fit:cover}
.aisle .rail figcaption{font-size:13px;line-height:1.45;color:var(--quiet);padding-top:8px}

/* full-bleed photograph bands, breaking both edges */
.band{margin:0;width:100vw;margin-left:calc(50% - 50vw)}
.band img{display:block;width:100%;height:clamp(280px,44vh,440px);object-fit:cover}
.band figcaption{
  padding:10px 24px 0;font-size:13.5px;color:var(--quiet);max-width:70ch;
}
.band.wide img{height:clamp(200px,30vh,320px);object-position:50% 46%}

/* the aisles */
.aisle{
  display:grid;grid-template-columns:5.5rem minmax(0,1fr) minmax(0,17rem);
  gap:8px 30px;align-items:start;
  padding:24px;border-top:1px solid var(--rule);
}
.aisle:first-of-type{border-top:3px solid var(--ink)}
.aisle .n{
  margin:0;font-size:58px;line-height:.86;font-weight:700;letter-spacing:-.05em;
  font-variant-numeric:tabular-nums;
}
.aisle .n span{display:block;font-size:11.5px;line-height:1.3;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--quiet);margin-top:8px}
.aisle .stock{margin:0;font-size:19px;line-height:1.5}
.aisle .say{margin:0;font-size:15px;line-height:1.55;color:var(--quiet);border-left:3px solid var(--rule);padding-left:14px}
.aisle .say b{color:var(--ink)}
/* the tenth band: the meat counter, inverted, with the case behind it */
.counter{background:#eff2ec;border-top:3px solid var(--ink);border-bottom:3px solid var(--ink);padding-bottom:4px}
.counter-body{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,17rem) 20rem;
  gap:10px 30px;align-items:start;align-content:start;grid-auto-rows:min-content;padding:24px;
}
.counter .n{margin:0;grid-column:1/3;font-size:30px;font-weight:700;letter-spacing:-.02em;line-height:1.05}
.counter .stock{margin:0;font-size:21px;line-height:1.45;font-weight:700}
.counter .say{margin:0;font-size:15px;line-height:1.55;color:var(--quiet);border-left:3px solid #cfd6c9;padding-left:14px}
.counter .say a{color:var(--ink)}
.counter-shot{margin:0;grid-column:3;grid-row:1/4}
.counter-shot img{display:block;width:100%;height:330px;object-fit:cover;object-position:50% 38%}
.counter-shot figcaption{font-size:13px;color:var(--quiet);padding-top:8px;line-height:1.45}

.tail{padding:30px 24px 10px;max-width:62rem}
h2{font-size:22px;font-weight:700;letter-spacing:-.015em;margin:0 0 8px}
.tail p{margin:0 0 12px;max-width:60ch}
.tail a{color:var(--ink)}
.big{
  margin-top:12px;font-size:clamp(24px,2.4vw,34px);font-weight:700;color:#17181a;
  text-decoration:none;padding:10px 22px 10px 18px;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 15px),calc(100% - 15px) 100%,0 100%);
}
.big:hover,.big:focus-visible{color:#17181a;background:#ffcb3d}

footer{padding:26px 24px 44px;border-top:1px solid var(--rule);margin-top:22px}
footer nav{display:flex;gap:22px;flex-wrap:wrap;margin-bottom:12px}
footer nav a{color:var(--ink);padding-block:6px}
footer p{font-size:13.5px;color:var(--quiet);max-width:74ch;margin:0}

/* interior */
.cuts{padding:6px 24px 26px;max-width:62rem}
.cuts .cut{display:grid;grid-template-columns:1fr auto;gap:4px 26px;align-items:baseline;padding:14px 0;border-top:1px solid var(--rule)}
.cuts .cut:last-child{border-bottom:1px solid var(--rule)}
.cuts h3,.cuts h2.ch{margin:0;font-size:18px;font-weight:700;letter-spacing:0}
.cuts .cut p{grid-column:1/-1;margin:2px 0 0;color:var(--quiet);font-size:15.5px;max-width:62ch}
.cuts .price{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.steps{padding:6px 24px 26px;max-width:56rem;counter-reset:s}
.steps li{margin:0 0 16px;max-width:60ch}
.steps li b{display:block}

@media (max-width:1080px){
  .counter-body{grid-template-columns:minmax(0,1fr) 17rem}
  .counter .n{grid-column:1/-1}
  .counter-shot{grid-column:2;grid-row:2/4;align-self:start}
}
@media (max-width:900px){
  .aisle,.aisle.shot{grid-template-columns:4.6rem 1fr}
  .aisle .say{grid-column:2}
  .aisle .rail{grid-column:2;max-width:22rem}
  .intro.lead{grid-template-columns:1fr;gap:26px;padding:32px 24px 30px}
  .lead-shot img{height:52vh;min-height:300px}
  .lead-shot figcaption{position:static;max-width:64ch;padding:10px 0 0}
  .counter-body{grid-template-columns:1fr}
  .counter-shot{grid-column:1;grid-row:auto;max-width:22rem}
}
@media (max-width:560px){
  .sign,.intro,.aisle,.tail,footer,.cuts,.steps,.counter-body{padding-left:16px;padding-right:16px}
  .intro.lead{padding-top:26px}
  .sign a{margin-left:0}
  .aisle,.aisle.shot{grid-template-columns:1fr;gap:10px}
  .aisle .n{font-size:44px}
  .aisle .say{grid-column:1}
  .aisle .rail{grid-column:1;max-width:none}
  .aisle .rail img{height:210px}
  .band figcaption{padding-left:16px;padding-right:16px}
  .band img{height:clamp(230px,38vh,320px)}
}


/* =======================================================================
   MOTION, added 2026-08-02 during the fleet repair.
   The fleet measured 0 to 5 transitioned elements against a floor of 20 in
   references/motion.md, which is the largest part of what reads as "there is
   no CSS on this page". Tokens below are this site's own.
   ======================================================================= */

a, button, summary,
li, dt, dd, tr, th, td,
figure, figcaption {
  transition: color .16s ease, background-color .18s ease,
              border-color .18s ease, opacity .18s ease,
              transform .22s cubic-bezier(.2,.7,.3,1);
}

a:hover { color: var(--hot); }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--hot); outline-offset: 3px;
}

/* rows respond, because a price row you are reading should acknowledge you */
li:hover, dt:hover, dd:hover, tbody tr:hover { background: rgba(23,24,26,.055); }


figure img { transition: transform .45s cubic-bezier(.2,.7,.3,1); }
/* the crop must clip the zoom, or a 100vw band grows the document sideways */
.lead-shot, .band, .counter-shot, .rail { overflow: hidden; }
.lead-shot:hover img, .band:hover img,
.counter-shot:hover img, .rail:hover img { transform: scale(1.02); }

/* reveals. The hidden state exists ONLY under .motion, which an inline head
   script adds when reduced motion is not requested, so no JS means the plain
   document rather than an empty page. */
.motion section, .motion figure, .motion article {
  opacity: 0; transform: translateY(16px);
  transition: opacity .55s ease, transform .55s cubic-bezier(.2,.7,.3,1);
}
.motion section.seen, .motion figure.seen, .motion article.seen {
  opacity: 1; transform: none;
}

/* PEAK: the first list arrives a row at a time, which is the page's own
   content introducing itself in order. */
.motion main li, .motion .wrap li, .motion body > section:first-of-type li {
  animation: peak-row .6s cubic-bezier(.2,.7,.3,1) both;
}
.motion li:nth-child(1) { animation-delay: .05s } .motion li:nth-child(2) { animation-delay: .11s }
.motion li:nth-child(3) { animation-delay: .17s } .motion li:nth-child(4) { animation-delay: .23s }
.motion li:nth-child(5) { animation-delay: .29s } .motion li:nth-child(6) { animation-delay: .35s }
.motion li:nth-child(7) { animation-delay: .41s } .motion li:nth-child(8) { animation-delay: .47s }
@keyframes peak-row { from { opacity: 0; transform: translateY(8px) } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition-duration: .001ms !important;
  }
  .motion section, .motion figure, .motion article { opacity: 1; transform: none; }
}


/* The .fleet-band / .fleet-figs holding pen was removed on 2026-08-04 when
   real photographs arrived. Nothing on the site referenced it any more. */


/* =======================================================================
   HOVER / FOCUS CONTRAST REPAIR, 2026-08-04.
   The unscoped `a:hover{color:var(--accent)}` added with the motion pass
   out-cascades the scoped colours on the dark bar / coloured band, so text
   there turned its own background colour. Scoped back, using colours already
   in this site's token set. No new colours.
   ======================================================================= */
.sign a:hover, .sign a:focus-visible { color: #cfe2d6; }
.skip:hover, .skip:focus:hover { color: var(--paper); }