/* corner deli landing page. Mobile first. Colours come from tokens.css. */

html{scroll-behavior:smooth}
body{margin:0;background:var(--ds-offwhite);color:var(--ds-black);font-family:var(--ds-font);-webkit-font-smoothing:antialiased}
a{color:var(--ds-black)}
a:hover{color:var(--ds-red)}
button{font:inherit;color:inherit}
a:focus-visible,button:focus-visible{outline:3px solid var(--ds-red);outline-offset:3px}

@keyframes deliSlideIn{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes deliMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
}

/* shared */
.section{max-width:var(--ds-max);margin:0 auto;padding:var(--ds-section-gap) var(--ds-gutter) 0}
.label{margin:0;font-size:13px;font-weight:600;letter-spacing:0.08em;color:var(--ds-muted)}
.lead{margin:0;font-size:clamp(24px,3.2vw,32px);font-weight:300;line-height:1.3;letter-spacing:-0.01em}
.stack-8{display:flex;flex-direction:column;gap:8px}
.stripes{background:repeating-linear-gradient(135deg,var(--ds-stripe) 0 8px,var(--ds-line) 8px 16px)}
.photo-tag{font:11px ui-monospace,Menlo,monospace;color:var(--ds-muted);background:rgba(255,255,255,0.85);padding:2px 6px;border-radius:2px}

/* 1 hero: three panels, slanted cuts. Stacked bands on phone, columns from 720px. */
.hero{padding:6px;display:grid;gap:6px;grid-template-columns:minmax(0,1fr)}
.hero-panel{position:relative;display:block;min-height:clamp(180px,30vh,560px);overflow:hidden;text-decoration:none;color:var(--ds-black);animation:deliSlideIn .8s ease both}
.hero-panel:hover{color:var(--ds-black)}
/* Hero photos are placeholders. To swap one, see tools/make-images.ps1. */
.hero-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.hero-panel--smallgoods .hero-photo img{filter:brightness(.62)} /* same as the design's 38% black overlay */
.hero-panel--antipasto{clip-path:polygon(0 0,100% 0,100% calc(100% - 28px),0 100%)}
.hero-panel--smallgoods{display:flex;align-items:center;justify-content:center;min-height:clamp(240px,34vh,560px);color:var(--ds-white);container-type:inline-size;clip-path:polygon(0 28px,100% 0,100% calc(100% - 28px),0 100%);margin:-28px 0 0;animation-delay:.08s}
.hero-panel--smallgoods:hover{color:var(--ds-white)}
.hero-panel--cheese{clip-path:polygon(0 28px,100% 0,100% 100%,0 100%);margin:-28px 0 0;animation-delay:.16s}
.hero-key{position:absolute;left:24px;top:24px;width:56px;height:6px}
.hero-key--white{background:var(--ds-white)}
.hero-key--black{background:var(--ds-black);outline:1px solid rgba(255,255,255,0.35)}
.hero-key--red{background:var(--ds-red)}
.hero-label{position:absolute;left:24px;bottom:24px;font-size:14px;font-weight:600;letter-spacing:0.08em;color:var(--ds-white);text-shadow:0 1px 6px rgba(0,0,0,0.5);background:rgba(0,0,0,.55);padding:.15em .6em;border-radius:999px;backdrop-filter:none} /* step 9: a dark pill so the label reads on any photo */
/* step 9: the keyboard ring sits inside the panel, where the slanted cut cannot trim it. The panel's own outline would paint under
   the photo (the photo is positioned), so the ring is a positioned layer on top: 3px red, 3 to 6px in from the edge, as outline-offset:-6px would be. */
.hero-panel:focus-visible{outline:none}
.hero-panel:focus-visible::after{content:"";position:absolute;inset:3px;border:3px solid var(--ds-red);pointer-events:none}
/* step 9: the wordmark h1 is no longer inside the smallgoods link. It is laid over that panel's grid cell, covering exactly the
   panel's box (the panel's negative margin is mirrored by top/left), so it renders where it did; pointer-events:none keeps the panel
   tappable underneath. It is its own size container, the same width as the panel, so 17cqi below is unchanged. It slides in with the panel. */
.hero{position:relative}
.wordmark-hero{position:absolute;grid-row:2/3;grid-column:1/2;top:-28px;right:0;bottom:0;left:0;margin:0;display:grid;align-content:center;justify-content:center;justify-items:center;line-height:1;text-align:center;padding:0;color:var(--ds-white);container-type:inline-size;pointer-events:none;animation:deliSlideIn .8s ease both;animation-delay:.08s}
.wordmark-hero .wm-name{font-weight:700;font-size:clamp(36px,17cqi,96px);letter-spacing:-0.02em;white-space:nowrap}
.wordmark-hero .wm-stall{font-weight:400;font-size:clamp(14px,2vw,20px);letter-spacing:0.12em;margin-top:12px}
/* step 9: a shorter hero on phones, so the hours pill shows on the first screen. The whole hero is clamp(420px,62vh,560px) tall below
   720px. It is 6px padding top and bottom, two 6px gaps and two 28px overlaps (the slanted cuts), so the three bands share that height
   plus 32px, in their old 30:34:30 proportion. Desktop keeps the vh min-heights above. */
@media (max-width:719.98px){
  .hero{--hero-h:clamp(420px,62vh,560px)}
  .hero-panel{min-height:calc((var(--hero-h) + 32px) * 30 / 94)}
  .hero-panel--smallgoods{min-height:calc((var(--hero-h) + 32px) * 34 / 94)}
}
@media (min-width:720px){
  .hero{grid-template-columns:repeat(3,minmax(0,1fr))}
  .hero-panel--antipasto{clip-path:polygon(0 0,100% 0,calc(100% - 40px) 100%,0 100%)}
  .hero-panel--smallgoods{clip-path:polygon(40px 0,100% 0,calc(100% - 40px) 100%,0 100%);margin:0 0 0 -40px}
  .wordmark-hero{grid-row:1/2;grid-column:2/3;top:0;left:-40px}
  .hero-panel--cheese{clip-path:polygon(40px 0,100% 0,100% 100%,0 100%);margin:0 0 0 -40px}
}

/* 2 hours */
.hours{padding-top:clamp(40px,7vw,80px);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:clamp(24px,4vw,48px);align-items:start}
.hours-now{display:flex;flex-direction:column;gap:16px}
.status-pill{display:inline-flex;align-self:flex-start;align-items:center;gap:10px;min-height:40px;padding:0 16px;border-radius:999px;background:var(--ds-white);color:var(--ds-black);border:1px solid var(--ds-black);font-size:16px;font-weight:600}
.status-pill[hidden]{display:none}
.status-dot{width:9px;height:9px;border-radius:50%;background:var(--ds-red)}
.status-pill.is-open{background:var(--ds-black);color:var(--ds-white)}
.status-pill.is-open .status-dot{background:var(--ds-open)}
.status-text{margin:0;font-size:clamp(34px,6vw,56px);font-weight:700;line-height:1.05;letter-spacing:-0.02em;text-wrap:pretty}
.hours-where{margin:0;font-size:17px;line-height:1.5;color:var(--ds-body);max-width:44ch}
.week{width:100%;border-collapse:collapse;font-size:17px;line-height:1.4}
.week tr{border-top:1px solid var(--ds-line)}
.week td{padding:12px 0}
.week td:first-child{width:40%}
.week .is-closed{color:var(--ds-muted)}
.week .is-today{font-weight:700}

/* 3 marquee: the run-on strip */
.strip{margin:var(--ds-section-gap) 0 0;background:var(--ds-white);border-top:1px solid var(--ds-line);border-bottom:1px solid var(--ds-line);padding:16px 0;overflow:hidden;white-space:nowrap}
.strip-track{display:inline-flex;animation:deliMarquee 60s linear infinite;font-size:clamp(28px,5vw,48px);line-height:1;letter-spacing:-0.01em}
/* step 9: the strip pauses on hover, and a tap, click, Enter or Space toggles it (js/site.js adds .paused) */
.strip:hover .strip-track,.strip.paused .strip-track{animation-play-state:paused}
.strip:focus-visible{outline:3px solid var(--ds-red);outline-offset:-3px}
.strip b{font-weight:700}
.strip i{font-style:normal;font-weight:300}

/* 5 at the counter */
.counter{display:flex;flex-direction:column;gap:20px}
.counter .lead{text-wrap:pretty;max-width:36ch}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(45%,300px),1fr));gap:12px}
@media (min-width:900px){.cards{grid-template-columns:repeat(4,minmax(0,1fr))}} /* eight cards: 4 + 4 on desktop */
.cards .card{scroll-margin-top:16px;background:var(--ds-white);border:1px solid var(--ds-line);border-radius:var(--ds-radius);overflow:hidden;display:flex;flex-direction:column}
.card-btn{all:unset;display:flex;flex-direction:column;cursor:pointer;text-align:left;width:100%}
.card-btn:focus-visible{outline:3px solid var(--ds-red);outline-offset:-3px}
.card-photo{display:flex;aspect-ratio:4/3;align-items:flex-end;justify-content:space-between;padding:10px;box-sizing:border-box;width:100%}
.card-icon{width:40px;height:40px;background:var(--ds-white);border-radius:var(--ds-radius);display:inline-flex;align-items:center;justify-content:center;flex:none}
.card-body{padding:14px 14px 16px;display:flex;flex-direction:column;gap:4px;width:100%;box-sizing:border-box}
.card-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.card-name{font-weight:700;font-size:clamp(17px,2.4vw,20px);letter-spacing:-0.01em;line-height:1.2}
.card-plus{font-size:22px;font-weight:300;line-height:1;display:inline-block;transition:transform .25s}
.card-btn[aria-expanded="true"] .card-plus{transform:rotate(45deg)}
.card-line{font-size:15px;font-weight:300;line-height:1.4;color:var(--ds-body)}
.card-list{margin:0 14px 16px;padding:10px 0 0;list-style:none;display:flex;flex-direction:column;gap:6px;font-size:15px;line-height:1.35;border-top:1px solid var(--ds-line)}
.card-list[hidden]{display:none}

/* 6 only here */
.only{display:flex;flex-direction:column;gap:20px}
.only-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:12px}
.only-item{display:flex;gap:14px;align-items:center;background:var(--ds-white);border:1px solid var(--ds-line);border-radius:var(--ds-radius);padding:12px}
.only-photo{width:88px;height:88px;flex:none;border-radius:var(--ds-radius);display:flex;align-items:center;justify-content:center;font:10px ui-monospace,Menlo,monospace;color:var(--ds-muted);text-align:center}
.only-text{display:flex;flex-direction:column;gap:4px}
.only-name{font-weight:700;font-size:19px;letter-spacing:-0.01em}
.only-line{font-size:15px;font-weight:300;color:var(--ds-body);line-height:1.4}

/* 7 story */
.story{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:clamp(24px,4vw,48px);align-items:center}
.story-photo{aspect-ratio:4/3;border-radius:var(--ds-radius);background:repeating-linear-gradient(135deg,var(--ds-stripe) 0 10px,var(--ds-line) 10px 20px);display:flex;align-items:flex-end;padding:12px;box-sizing:border-box}
.story-photo .photo-tag{font-size:12px;padding:4px 8px}
.story-text{display:flex;flex-direction:column;gap:16px}
.story .lead{font-size:clamp(24px,3.2vw,34px);text-wrap:pretty}

/* 8 platters: coming soon. An ordering link drops into .platters-actions later. */
.platters-panel{background:var(--ds-timber);border-radius:var(--ds-radius);padding:clamp(24px,4vw,40px);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:24px;align-items:center}
.platters-text{display:flex;flex-direction:column;gap:10px}
.platters-text .label{color:var(--ds-body)}
.platters-text .lead{font-size:clamp(22px,3vw,30px);text-wrap:pretty}
.platters-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-start}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;font-weight:600;font-size:17px;border-radius:var(--ds-radius);text-decoration:none}
.btn--soon{background:var(--ds-offwhite);color:var(--ds-muted);border:2px solid transparent}
.btn--outline{background:transparent;color:var(--ds-black);border:2px solid var(--ds-black)}
.btn--outline:hover{background:var(--ds-black);color:var(--ds-white)}

/* 9 follow */
.follow{display:flex;flex-direction:column;gap:16px}
.follow-links{display:flex;gap:10px;flex-wrap:wrap}
.btn--quiet{padding:0 20px;background:var(--ds-white);color:var(--ds-black);border:1px solid var(--ds-line)}
.btn--quiet:hover{border-color:var(--ds-black);color:var(--ds-black)}

/* 10 footer */
.footer{max-width:var(--ds-max);margin:var(--ds-section-gap) auto 0;padding:32px var(--ds-gutter) 48px;border-top:3px solid var(--ds-red);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:32px;font-size:15px;line-height:1.5}
.footer a{text-decoration:none}
.footer-col{display:flex;flex-direction:column;gap:6px}
.footer-col--brand{gap:12px}
.footer-col .label{margin-bottom:6px}
.wordmark-foot{display:inline-flex;flex-direction:column;align-items:flex-start;line-height:1}
.wordmark-foot .wm-name{font-weight:700;font-size:28px;letter-spacing:-0.02em}
.wordmark-foot .wm-stall{font-size:12px;letter-spacing:0.1em;margin-top:5px}
.footer-contact{display:flex;flex-direction:column;gap:2px}
.fh-row{display:flex;justify-content:space-between;gap:12px}
.fh-row.is-closed{color:var(--ds-muted)}
.footer-contact a{display:inline-block;min-height:44px;line-height:44px;text-decoration:underline;text-underline-offset:.15em} /* step 9: 44px tall to tap, underlined so they read as links */
.footer-nav a{min-height:44px;display:flex;align-items:center}
.footer-base{grid-column:1/-1;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;border-top:1px solid var(--ds-line);padding-top:16px;font-size:13px;color:var(--ds-muted)}

/* step 5: ?todo view. Only active with ?todo in the address. */
.show-todo [data-todo]{outline:2px dashed #0a7d2c;outline-offset:2px;}
.show-todo img[data-todo]{outline-offset:-6px;} /* the hero panels are clipped, so a photo's outline has to sit inside it. A photo cannot carry a label. */
.show-todo [data-todo]::after{content:"TODO: " attr(data-todo);display:block;font:600 .75rem/1.3 inherit;color:#fff;background:#0a7d2c;padding:.15rem .4rem;margin-top:.25rem;border-radius:2px;text-transform:none;letter-spacing:0;} /* todo-guard-ignore: the word above is the label this view prints, not a thing to confirm */
/* counter cards are small: in this view let the photo and icon grow so both labels can be read, and open the closed product lists so their labels show too */
.show-todo .card-photo{aspect-ratio:auto;height:auto;flex-wrap:wrap;align-items:flex-start;gap:6px;}
.show-todo .card-icon{width:auto;height:auto;padding:6px;flex:1 1 100%;min-width:0;}
.show-todo .card-list[hidden]{display:flex;}

/* step 6: skip link. Off the top of the screen until it is focused, then top left above everything. */
.skip-link{position:fixed;z-index:100;top:0;left:0;transform:translateY(-200%);background:var(--ds-black);padding:14px 18px;font-size:16px;font-weight:600;line-height:1;text-decoration:none}
.skip-link,.skip-link:hover{color:var(--ds-white)}
.skip-link:focus{transform:none}

/* step 6: for text only a screen reader reads. The find us #way rule is scoped to that section and stays as it is. */
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* step 7: preview banner and closure note */
.preview-banner{margin:0;padding:10px 16px;background:var(--ds-black);color:var(--ds-white);font-size:14px;line-height:1.4;text-align:center}
.hours-note{margin:12px 0 0;font-size:17px;line-height:1.5;color:var(--ds-black);font-weight:600}

/* step 8: motion (GSAP + ScrollTrigger). Every rule here is gated on html.js-motion, which motion.js adds only when motion is allowed. */
html.js-motion .hero-photo img{transform-origin:center;scale:1.1}
html.js-motion .cards:not(.is-in) .card{opacity:0}