/* =============================================================
   SIGNA CAFE · 2026 homepage · Concept B
   Mobile-first · Editorial + scrapbook
============================================================= */

:root{
  /* Brand colours — from Signa_colors.pdf */
  --black:   #000000;
  --white:   #FFFEF9;
  --red:     #EB3300;
  --gray:    #C8C9C7;

  --ink:     #000000;
  --paper:   #FFFEF9;

  /* Scrapbook accents (B-only, inside stickers) */
  --st-pink:   #FF7AC2;
  --st-sky:    #6BB6F0;
  --st-sage:   #A8C28A;
  --st-violet: #B589F0;
  --st-mustard:#E9C04A;

  --display: "Anton", "Helvetica Neue Condensed", "Impact", sans-serif;
  --sans:    "Onest", -apple-system, BlinkMacSystemFont, "Helvetica Neue", system-ui, sans-serif;
  --hand:    "Caveat", "Comic Sans MS", cursive;
  --mono:    "JetBrains Mono", ui-monospace, Menlo, monospace;

  --tile: 44px;
  --safe-bottom: max(env(safe-area-inset-bottom, 0px), 0px);
  --bottom-cta-h: 64px;
  --pad-x: clamp(20px, 5vw, 56px);
  --max: 1440px;
}

*{ box-sizing: border-box; margin: 0; padding: 0;}
html, body{ background: var(--paper); color: var(--ink);}
html{ -webkit-text-size-adjust: 100%; scroll-behavior: smooth;}
body{
  font-family: var(--sans);
  font-weight: 350;
  font-size: 16px;
  line-height: 1.55;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  min-height: 100vh;
  /* THE Signa tile pattern — applied to whole page on light surfaces.
     Dark sections (.brand-sec, .foot-sec, .sig-sec) cover it with solid bg. */
  background-color: var(--paper);
  background-image:
    linear-gradient(to right,
      rgba(255,255,255,0.5) 0px,
      transparent 2px,
      transparent calc(var(--tile) - 2px),
      rgba(0,0,0,0.15) var(--tile)
    ),
    linear-gradient(to bottom,
      rgba(255,255,255,0.5) 0px,
      transparent 2px,
      transparent calc(var(--tile) - 2px),
      rgba(0,0,0,0.15) var(--tile)
    ),
    radial-gradient(ellipse 40% 100% at var(--light-x, 30%) var(--light-y, 50%),
      rgba(255,255,255,1),
      rgba(0,0,0,0.10)
    );
  background-size: var(--tile) var(--tile), var(--tile) var(--tile), 100% 100%;
  background-repeat: repeat, repeat, no-repeat;
  background-attachment: fixed, fixed, fixed;
}
::selection{ background: var(--red); color: var(--paper);}
img{ display: block; max-width: 100%;}
a{ color: inherit; text-decoration: none;}
button{ font: inherit; color: inherit; cursor: pointer;}

/* =============================================================
   THE SIGNA TILE PATTERN
============================================================= */
.tile-bg{
  background-color: var(--paper);
  background-image:
    linear-gradient(to right,
      rgba(255,255,255,0.5) 0px,
      transparent 2px,
      transparent calc(var(--tile) - 2px),
      rgba(0,0,0,0.15) var(--tile)
    ),
    linear-gradient(to bottom,
      rgba(255,255,255,0.5) 0px,
      transparent 2px,
      transparent calc(var(--tile) - 2px),
      rgba(0,0,0,0.15) var(--tile)
    ),
    radial-gradient(ellipse 40% 100% at var(--light-x, 30%) var(--light-y, 50%),
      rgba(255,255,255,1),
      rgba(0,0,0,0.10)
    );
  background-size: var(--tile) var(--tile), var(--tile) var(--tile), 100% 100%;
  background-repeat: repeat, repeat, no-repeat;
}

/* =============================================================
   TYPOGRAPHY UTILS
============================================================= */
.display{
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  line-height: 0.86;
}
.mono{
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.hand{
  font-family: var(--hand);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}
.red{ color: var(--red);}
.crossed{
  position: relative;
  color: rgba(0,0,0,.35);
  display: inline-block;
}
.crossed::after{
  content: "";
  position: absolute;
  left: -3%; right: -3%; top: 48%;
  height: 4px;
  background: var(--red);
  transform: rotate(-2.5deg);
}

/* =============================================================
   HEADER
============================================================= */
.signa-header{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 60;
  background: rgba(255,254,249,.86);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid rgba(0,0,0,.08);
}
.signa-header-row{
  height: 56px;
  padding: 0 var(--pad-x);
  display: flex; align-items: center; justify-content: space-between;
  max-width: var(--max);
  margin: 0 auto;
}
.signa-mark{
  display: flex; align-items: center; gap: 10px;
}
.signa-mark .star{
  width: 18px; height: 18px;
  background: var(--ink);
  -webkit-mask: url('../assets/star.png') center/contain no-repeat;
          mask: url('../assets/star.png') center/contain no-repeat;
}
.signa-mark .name{
  font-family: var(--display);
  font-size: 22px;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}
.signa-header nav{ display: none;}
.signa-header .burger{
  width: 40px; height: 40px;
  border: 1px solid var(--ink);
  border-radius: 50%;
  display: grid; place-items: center;
  background: transparent;
}
.signa-header .burger span{
  display: block;
  width: 14px; height: 1.6px;
  background: var(--ink);
  position: relative;
}
.signa-header .burger span::before,
.signa-header .burger span::after{
  content: "";
  position: absolute; left: 0; width: 14px; height: 1.6px;
  background: var(--ink);
}
.signa-header .burger span::before{ top: -5px;}
.signa-header .burger span::after { top:  5px;}

@media (min-width: 900px){
  .signa-header-row{ height: 64px;}
  .signa-header nav{ display: flex; gap: 26px;}
  .signa-header nav a{
    font-family: var(--mono); font-size: 11px;
    letter-spacing: 0.08em; text-transform: uppercase;
    color: rgba(0,0,0,.65);
    transition: color .2s;
  }
  .signa-header nav a:hover{ color: var(--ink);}
  .signa-header .burger{ display: none;}
  .signa-header .desk-cta{
    display: inline-flex; align-items: center;
    font-family: var(--mono); font-size: 11px;
    letter-spacing: .08em; text-transform: uppercase;
    background: var(--red); color: var(--paper);
    padding: 10px 16px; border-radius: 999px;
  }
}
.signa-header .desk-cta{ display: none;}

/* Language toggle */
.lang-toggle{
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid rgba(0,0,0,.18);
  border-radius: 999px;
  background: var(--paper);
  margin-left: 8px;
}
.lang-btn{
  appearance: none;
  border: none;
  background: transparent;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 9px;
  border-radius: 999px;
  color: rgba(0,0,0,.5);
  cursor: pointer;
  transition: background .2s, color .2s;
  line-height: 1;
}
.lang-btn:hover{ color: var(--ink);}
.lang-btn.active{
  background: var(--ink);
  color: var(--paper);
}
@media (max-width: 540px){
  .lang-toggle{ margin-left: 4px; padding: 2px;}
  .lang-btn{ padding: 4px 7px; font-size: 9px;}
}

/* =============================================================
   SECTION BASE
============================================================= */
.s-section{
  position: relative;
  padding-left: var(--pad-x);
  padding-right: var(--pad-x);
  max-width: var(--max);
  margin: 0 auto;
}
.s-section.full-bleed{
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}
.s-label{
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(0,0,0,.55);
  display: flex; align-items: center; gap: 10px;
}
.s-label .dot{
  width: 6px; height: 6px; background: var(--red); border-radius: 50%;
}
.s-label .ix{
  font-family: var(--display);
  font-size: 14px;
  letter-spacing: -0.01em;
  color: var(--ink);
}

/* =============================================================
   HERO
============================================================= */
.hero-sec{
  min-height: 100svh;
  padding-top: 84px;
  padding-bottom: calc(var(--bottom-cta-h) + 28px);
  display: flex; flex-direction: column;
  gap: 8px;
}
.hero-meta{
  display: flex; justify-content: space-between; align-items: baseline;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(0,0,0,.12);
}
.hero-meta b{ color: var(--ink); font-weight: 600;}
.hero-headline{
  margin-top: 24px;
  font-family: var(--display);
  font-size: clamp(56px, 14vw, 180px);
  line-height: 0.9;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--ink);
  position: relative;
}
.hero-headline .r{ color: var(--red);}
.hero-headline .scribble{
  font-family: var(--hand);
  font-weight: 600;
  text-transform: none;
  font-size: 0.22em;
  letter-spacing: 0;
  color: var(--red);
  position: absolute;
  line-height: 1;
  transform: rotate(-6deg);
  pointer-events: none;
}
.hero-headline .scribble.s1{ top: 0; right: 4%;}
.hero-headline .scribble.s2{ bottom: -8px; left: 8%; color: var(--ink); transform: rotate(-2deg);}
.hero-stamp{
  margin-top: 24px;
  display: flex; align-items: center; gap: 14px;
}
.hero-stamp .star-big{
  width: 60px; height: 60px;
  background: var(--ink);
  -webkit-mask: url('../assets/star.png') center/contain no-repeat;
          mask: url('../assets/star.png') center/contain no-repeat;
}
.hero-stamp .stamp-text{
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(0,0,0,.7);
  line-height: 1.4;
}
.hero-stamp .stamp-text b{ color: var(--ink); font-weight: 600;}

.hero-cta-stack{
  margin-top: auto;
  padding-top: 36px;
  display: flex; flex-direction: column; gap: 8px;
}
.hero-cta-stack .h-note{
  font-family: var(--hand);
  font-size: 22px;
  color: var(--ink);
  align-self: flex-start;
  transform: rotate(-1.5deg);
  margin-bottom: 4px;
}
.h-btn{
  height: 56px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 22px;
  border-radius: 28px;
  font-family: var(--mono);
  font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
  font-weight: 500;
  background: var(--ink); color: var(--paper);
  border: none;
  text-align: left;
  transition: transform .15s, opacity .15s;
}
.h-btn:active{ transform: scale(0.985);}
.h-btn.red{ background: var(--red); color: var(--paper);}
.h-btn.outline{ background: transparent; color: var(--ink); border: 1.5px solid var(--ink);}
.h-btn.outline.subtle{
  height: 48px;
  font-size: 11px;
  letter-spacing: 0.08em;
  border-width: 1.5px;
  color: var(--ink);
  border-color: var(--ink);
  background: var(--paper);
  margin-top: 4px;
  font-weight: 600;
  position: relative;
}
.h-btn.outline.subtle::before{
  content: "";
  width: 6px; height: 6px;
  background: var(--red);
  border-radius: 50%;
  margin-right: 10px;
  display: inline-block;
  flex-shrink: 0;
}
.h-btn.outline.subtle:hover{
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.h-btn.outline.subtle:hover::before{
  background: var(--red);
  box-shadow: 0 0 0 3px rgba(235,51,0,.3);
}
.h-btn .arr{ font-size: 16px; opacity: .8;}

@media (min-width: 900px){
  .hero-sec{
    min-height: 100svh;
    padding-top: 100px;
    padding-bottom: 72px;
    display: grid;
    grid-template-columns: 7fr 5fr;
    gap: 56px;
    align-items: end;
  }
  .hero-sec > .hero-meta{ grid-column: 1 / -1;}
  .hero-headline{ font-size: clamp(120px, 11vw, 200px);}
  .hero-cta-stack{ grid-column: 2; padding-top: 0;}
  .hero-left{ grid-column: 1;}
}

/* =============================================================
   BRAND / BERNARD
============================================================= */
.brand-sec{
  min-height: 100svh;
  background: var(--ink);
  color: var(--paper);
  position: relative;
  overflow: hidden;
  display: flex; flex-direction: column;
  gap: 24px;
  padding: 84px var(--pad-x) calc(var(--bottom-cta-h) + 60px);
}
/* Dark grid layer */
.brand-sec::before{
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(rgba(255,254,249,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,254,249,.07) 1px, transparent 1px);
  background-size: var(--tile) var(--tile);
}

/* Bernard — absolutely positioned, full block height, anchored RIGHT,
   pushed partially off-screen so he peeks from the right edge. */
.brand-image{
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image: url('../assets/bernard.webp');
  background-size: auto 100%;
  background-position: calc(100% + 14vw) 50%;
  background-repeat: no-repeat;
  pointer-events: none;
}

/* Content always above Bernard */
.brand-label,
.brand-content{
  position: relative;
  z-index: 2;
}
.brand-content{
  margin-top: auto;
}
.brand-label{
  font-family: var(--mono);
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: rgba(255,254,249,.65);
}
.brand-label b{ color: var(--paper); font-weight: 600;}
.brand-quote{
  margin-top: auto;
  font-family: var(--display);
  font-size: clamp(40px, 11vw, 96px);
  line-height: 0.88;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  color: var(--paper);
  max-width: 14ch;
}
.brand-quote .r{ color: var(--red);}
.brand-cite{
  margin-top: 18px;
  font-family: var(--mono);
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: rgba(255,254,249,.55);
}

@media (min-width: 900px){
  .brand-sec{
    padding: 120px var(--pad-x) 100px;
  }
  .brand-image{
    background-position: calc(100% + 6vw) 50%;
  }
  .brand-quote{ font-size: clamp(48px, 6.5vw, 88px); max-width: 18ch;}
  .brand-content{ max-width: 60%;}
}

/* =============================================================
   MENU
============================================================= */
.menu-sec{
  padding-top: 80px;
  padding-bottom: 100px;
  position: relative;
}
.menu-head{
  display: flex; flex-direction: column; gap: 16px;
  padding-bottom: 20px;
}
.menu-title{
  font-family: var(--display);
  font-size: clamp(40px, 10vw, 76px);
  line-height: 0.92; letter-spacing: -0.02em;
  text-transform: uppercase;
}
.menu-title .r{ color: var(--red);}
.menu-pills{
  display: flex; gap: 8px;
  padding: 8px 0 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.menu-pills::-webkit-scrollbar{ display: none;}
.menu-pill{
  flex: 0 0 auto;
  scroll-snap-align: start;
  font-family: var(--mono);
  font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  padding: 10px 16px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  transition: background .15s, color .15s;
}
.menu-pill.active{
  background: var(--ink); color: var(--paper);
}
.menu-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.menu-card{
  position: relative;
  aspect-ratio: 3/4;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(0,0,0,.05);
  background-size: cover;
  background-position: center;
  border: none;
  text-align: left;
  cursor: pointer;
  transition: transform .15s;
}
.menu-card:active{ transform: scale(0.985);}
.menu-card.accent{
  background: var(--red);
}
.menu-card.accent::before{
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,254,249,.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,254,249,.10) 1px, transparent 1px);
  background-size: var(--tile) var(--tile);
}
.menu-card .ovl{
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 35%, rgba(0,0,0,.55) 65%, rgba(0,0,0,.88) 100%);
}
.menu-card.accent .ovl{ background: linear-gradient(180deg, transparent 25%, rgba(0,0,0,.4) 55%, rgba(0,0,0,.75) 100%);}
.menu-card .cap{
  position: absolute; left: 14px; right: 14px; bottom: 12px;
  color: var(--paper);
  font-family: var(--sans);
  display: flex; flex-direction: column; gap: 4px;
}
.menu-card .cap .title{
  font-weight: 600;
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: -0.005em;
}
.menu-card .cap .desc{
  font-weight: 400;
  font-size: 12px;
  line-height: 1.35;
  opacity: 0.85;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.menu-card .price{
  font-family: var(--mono);
  font-size: 11px; letter-spacing: .06em;
  margin-top: 2px;
  text-transform: uppercase;
  opacity: 0.95;
  font-weight: 500;
}
@media (max-width: 768px){
  .menu-card .cap .title{ font-size: 14px; }
  .menu-card .cap .desc{ font-size: 11px; -webkit-line-clamp: 2; }
  .menu-card .price{ font-size: 10px; }
}
.menu-card .badge{
  position: absolute; top: 10px; left: 10px;
  font-family: var(--mono);
  font-size: 9px; letter-spacing: .08em; text-transform: uppercase;
  padding: 4px 8px;
  background: var(--paper); color: var(--ink);
  border-radius: 4px;
}
.menu-card.accent .badge{
  background: var(--ink); color: var(--paper);
}
.menu-foot{
  margin-top: 22px;
  display: flex; justify-content: space-between; align-items: center;
}
.menu-foot a{
  font-family: var(--mono);
  font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  padding: 14px 22px;
  background: var(--ink); color: var(--paper);
  border-radius: 999px;
}
.menu-foot .h-note{
  font-family: var(--hand);
  font-size: 22px;
  color: var(--ink);
  transform: rotate(-2deg);
}

@media (min-width: 700px){
  .menu-grid{ grid-template-columns: repeat(3, 1fr);}
}
@media (min-width: 1100px){
  .menu-grid{ grid-template-columns: repeat(4, 1fr);}
  .menu-head{ flex-direction: row; justify-content: space-between; align-items: end;}
  .menu-pills{ padding: 0; overflow: visible;}
}

/* =============================================================
   SIGNATURE — horizontal swipe carousel
============================================================= */
.sig-sec{
  padding-top: 80px;
  padding-bottom: 80px;
  background: var(--ink);
  color: var(--paper);
  position: relative;
  overflow: hidden;
}
.sig-sec::before{
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(rgba(255,254,249,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,254,249,.07) 1px, transparent 1px);
  background-size: var(--tile) var(--tile);
}
.sig-sec > *{ position: relative; z-index: 1;}
.sig-head{
  padding: 0 var(--pad-x);
}
.sig-title{
  font-family: var(--display);
  font-size: clamp(40px, 10vw, 80px);
  line-height: 0.92; letter-spacing: -0.02em;
  text-transform: uppercase;
  margin-top: 16px;
}
.sig-title .r{ color: var(--red);}
.sig-rail{
  margin-top: 24px;
  display: flex;
  gap: 12px;
  padding: 0 var(--pad-x);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.sig-rail::-webkit-scrollbar{ display: none;}
.sig-slide{
  flex: 0 0 80vw;
  max-width: 480px;
  scroll-snap-align: start;
  position: relative;
  aspect-ratio: 3/4;
  border-radius: 14px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-color: #222;
}
.sig-slide .ovl{
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.15) 0%, transparent 30%, rgba(0,0,0,.85) 100%);
}
.sig-slide .top-lbl{
  position: absolute; top: 16px; left: 16px;
  font-family: var(--mono);
  font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--paper);
}
.sig-slide .top-lbl b{ color: var(--red); font-weight: 600;}
.sig-slide .cap{
  position: absolute; bottom: 20px; left: 18px; right: 18px;
  color: var(--paper);
}
.sig-slide .cap h3{
  font-family: var(--display);
  font-size: clamp(26px, 5.5vw, 44px);
  line-height: 0.96; letter-spacing: -0.015em;
  text-transform: uppercase;
}
.sig-slide .cap .meta{
  margin-top: 6px;
  font-family: var(--mono);
  font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  opacity: 0.75;
}
.sig-progress{
  margin-top: 18px;
  padding: 0 var(--pad-x);
  display: flex; justify-content: space-between; align-items: center; gap: 14px;
}
.sig-dots{
  display: flex; gap: 6px;
  flex: 1;
}
.sig-dots span{
  flex: 1; max-width: 32px;
  height: 2px; background: rgba(255,254,249,.25); border-radius: 1px;
  transition: background .25s;
}
.sig-dots span.on{ background: var(--red);}
.sig-count{
  font-family: var(--mono); font-size: 11px; letter-spacing: .08em;
  color: rgba(255,254,249,.65);
}

@media (min-width: 900px){
  .sig-slide{ flex: 0 0 36vw; max-width: 540px;}
}

/* =============================================================
   EXPERIENCE — tile mosaic
============================================================= */
.exp-sec{
  padding-top: 80px;
  padding-bottom: 100px;
}
.exp-head{ padding-bottom: 18px;}
.exp-title{
  font-family: var(--display);
  font-size: clamp(36px, 8vw, 64px);
  line-height: 0.94; letter-spacing: -0.02em;
  text-transform: uppercase;
  margin-top: 16px;
}
.exp-title .r{ color: var(--red);}
.exp-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(150px, 1fr);
  gap: 6px;
}
.exp-cell{
  position: relative;
  background-color: rgba(0,0,0,.06);
  background-size: cover; background-position: center;
  border-radius: 8px;
  overflow: hidden;
}
.exp-cell.red{ background-color: var(--red);}
.exp-cell.ink{
  background-color: var(--ink); color: var(--paper);
}
.exp-cell.ink::before{
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,254,249,.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,254,249,.10) 1px, transparent 1px);
  background-size: var(--tile) var(--tile);
}
.exp-cell .lbl{
  position: absolute; top: 10px; left: 10px;
  font-family: var(--mono);
  font-size: 9px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--paper);
  background: rgba(0,0,0,.4); padding: 3px 7px;
  border-radius: 3px;
}
.exp-cell.red .lbl,
.exp-cell.ink .lbl{
  background: transparent;
}
.exp-star{
  width: 60%; height: 60%;
  position: absolute; left: 20%; top: 20%;
  background: var(--paper);
  -webkit-mask: url('../assets/star.png') center/contain no-repeat;
          mask: url('../assets/star.png') center/contain no-repeat;
}
.exp-cell.ink .exp-star{ background: var(--paper);}
.exp-cell.red .exp-star{ background: var(--paper);}

/* Layout — mobile mosaic */
.exp-grid > .c1{ grid-column: 1 / 3; grid-row: 1 / 3;}
.exp-grid > .c2{ grid-column: 3 / 4; grid-row: 1 / 3;}
.exp-grid > .c3{ grid-column: 1 / 2; grid-row: 3 / 4;}
.exp-grid > .c4{ grid-column: 2 / 4; grid-row: 3 / 5;}
.exp-grid > .c5{ grid-column: 1 / 2; grid-row: 4 / 6;}
.exp-grid > .c6{ grid-column: 2 / 3; grid-row: 5 / 6;}
.exp-grid > .c7{ grid-column: 3 / 4; grid-row: 5 / 7;}
.exp-grid > .c8{ grid-column: 1 / 3; grid-row: 6 / 7;}

@media (min-width: 900px){
  .exp-grid{
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: minmax(180px, 1fr);
  }
  .exp-grid > .c1{ grid-column: 1 / 3; grid-row: 1 / 3;}
  .exp-grid > .c2{ grid-column: 3 / 5; grid-row: 1 / 2;}
  .exp-grid > .c3{ grid-column: 5 / 7; grid-row: 1 / 3;}
  .exp-grid > .c4{ grid-column: 3 / 5; grid-row: 2 / 4;}
  .exp-grid > .c5{ grid-column: 1 / 3; grid-row: 3 / 4;}
  .exp-grid > .c6{ grid-column: 5 / 6; grid-row: 3 / 4;}
  .exp-grid > .c7{ grid-column: 6 / 7; grid-row: 3 / 4;}
  .exp-grid > .c8{ grid-column: 1 / 5; grid-row: 4 / 5;}
}

/* =============================================================
   ORDER
============================================================= */
.order-sec{
  padding-top: 80px;
  padding-bottom: 80px;
  position: relative;
  /* Reserve right space for the parallax pizza at all viewport sizes */
  padding-right: clamp(110px, 22vw, 320px);
}
@media (min-width: 900px){
  .order-sec{ padding-right: clamp(220px, 26vw, 380px);}
}
.order-title{
  font-family: var(--display);
  font-size: clamp(48px, 11vw, 88px);
  line-height: 0.94; letter-spacing: -0.02em;
  text-transform: uppercase;
  margin-top: 16px;
}
.order-title .r{ color: var(--red);}
.order-stack{
  margin-top: 28px;
  display: flex; flex-direction: column; gap: 8px;
}
.order-card{
  position: relative;
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 24px;
  border: 1px solid var(--ink);
  border-radius: 18px;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 600;
  font-size: 17px; line-height: 1.2;
  letter-spacing: -0.005em;
  text-transform: none;
  transition: transform .15s, background .15s, color .15s;
}
.order-card:active{ transform: scale(0.99);}
.order-card.red{
  background: var(--red); color: var(--paper); border-color: var(--red);
}
.order-card.solid{
  background: var(--ink); color: var(--paper);
}
.order-card .meta{
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 400;
  opacity: 0.7;
  margin-top: 4px;
}
.order-card .arr{
  font-family: var(--sans);
  font-size: 22px;
  font-weight: 500;
  opacity: 0.9;
}
.order-note{
  margin-top: 20px;
  font-family: var(--mono);
  font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  color: rgba(0,0,0,.6);
  text-align: center;
}

/* =============================================================
   LOCATION
============================================================= */
.loc-sec{
  padding-top: 80px;
  padding-bottom: 100px;
}
.loc-title{
  font-family: var(--display);
  font-size: clamp(40px, 10vw, 76px);
  line-height: 0.94; letter-spacing: -0.02em;
  text-transform: uppercase;
  margin-top: 16px;
}
.loc-title .r{ color: var(--red);}
.loc-map{
  margin-top: 24px;
  position: relative;
  height: 240px;
  border-radius: 14px;
  overflow: hidden;
  border: 1.5px solid var(--ink);
  background:
    radial-gradient(circle at var(--pin-x, 60%) var(--pin-y, 50%), var(--red) 0 8px, transparent 9px),
    radial-gradient(circle at var(--pin-x, 60%) var(--pin-y, 50%), rgba(235,51,0,.18) 0 24px, transparent 25px),
    repeating-linear-gradient(45deg, rgba(0,0,0,.08) 0 1px, transparent 1px 16px),
    repeating-linear-gradient(-45deg, rgba(0,0,0,.04) 0 1px, transparent 1px 32px),
    var(--paper);
}
.loc-map .pin-lbl{
  position: absolute;
  left: 60%; top: 50%;
  transform: translate(-50%, -120%);
  font-family: var(--mono);
  font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
  background: var(--ink); color: var(--paper);
  padding: 4px 8px;
  border-radius: 4px;
  white-space: nowrap;
}
.loc-map .pin-lbl::after{
  content: ""; position: absolute;
  left: 50%; bottom: -4px;
  transform: translateX(-50%) rotate(45deg);
  width: 6px; height: 6px;
  background: var(--ink);
}
.loc-map .corner{
  position: absolute; bottom: 12px; right: 12px;
  font-family: var(--mono);
  font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
  color: rgba(0,0,0,.55);
  background: var(--paper);
  padding: 4px 8px;
  z-index: 2;
}

/* Google Maps iframe variant — overrides CSS-only decorative map */
.loc-map.loc-map-google{
  height: 360px;
  background: var(--paper);
}
.loc-map.loc-map-google iframe{
  filter: grayscale(0.15) contrast(1.02);
}
@media (max-width: 768px){
  .loc-map.loc-map-google{ height: 260px; }
}

/* "Get directions" red CTA between map and meta rows */
.loc-directions-btn{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 16px 0 8px;
  padding: 16px 24px;
  background: var(--red);
  color: var(--paper);
  border-radius: 14px;
  text-decoration: none;
  font-family: "Anton", sans-serif;
  font-size: 18px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 600;
  box-shadow: 0 4px 0 rgba(0,0,0,0.85);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.loc-directions-btn:hover,
.loc-directions-btn:focus-visible{
  background: #FF4A1F;
  transform: translateY(-2px);
  box-shadow: 0 6px 0 rgba(0,0,0,0.85);
}
.loc-directions-btn:active{
  transform: translateY(2px);
  box-shadow: 0 2px 0 rgba(0,0,0,0.85);
}
.loc-directions-btn .loc-dir-icon{
  font-size: 22px;
  line-height: 1;
}
.loc-directions-btn .loc-dir-arr{
  font-size: 18px;
  transition: transform 0.15s ease;
}
.loc-directions-btn:hover .loc-dir-arr{
  transform: translateX(5px);
}
@media (max-width: 768px){
  .loc-directions-btn{
    font-size: 15px;
    padding: 14px 18px;
    gap: 10px;
  }
}

.loc-meta{
  margin-top: 24px;
  display: flex; flex-direction: column;
}
.loc-row{
  display: grid;
  grid-template-columns: 96px 1fr auto;
  gap: 14px;
  padding: 14px 0;
  border-top: 1px solid rgba(0,0,0,.15);
  align-items: baseline;
}
.loc-row:first-child{ border-top: none;}
.loc-row .lbl{
  font-family: var(--mono);
  font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
  color: rgba(0,0,0,.55);
}
.loc-row .val{
  font-family: var(--sans);
  font-weight: 500;
  font-size: 15px;
}
.loc-row .arr{
  font-family: var(--mono); font-size: 12px;
  color: var(--red);
}

@media (min-width: 900px){
  .loc-sec{ display: grid; grid-template-columns: 5fr 7fr; gap: 56px; align-items: end;}
  .loc-sec > .s-label, .loc-sec > .loc-title{ grid-column: 1;}
  .loc-sec > .loc-meta{ grid-column: 1;}
  .loc-sec > .loc-map{
    grid-column: 2;
    grid-row: 1 / span 3;
    height: 100%;
    min-height: 420px;
    margin-top: 0;
  }
}

/* =============================================================
   FEEDBACK
============================================================= */
.fb-sec{
  padding-top: 80px;
  padding-bottom: 100px;
}
.fb-title{
  font-family: var(--display);
  font-size: clamp(40px, 10vw, 76px);
  line-height: 0.94; letter-spacing: -0.02em;
  text-transform: uppercase;
  margin-top: 16px;
}
.fb-title .r{ color: var(--red);}
.fb-sub{
  margin-top: 14px;
  color: rgba(0,0,0,.6);
  font-size: 15px;
  max-width: 44ch;
  line-height: 1.5;
}
.fb-grid{
  margin-top: 32px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.fb-card{
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 24px 26px 22px;
  border: 1px solid var(--ink);
  border-radius: 18px;
  background: var(--paper);
  color: var(--ink);
  transition: transform .35s cubic-bezier(.2,.7,.2,1), background .25s, color .25s, border-color .25s;
}
.fb-card:hover{
  transform: translateY(-3px);
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.fb-card.primary{
  background: var(--red);
  color: var(--paper);
  border-color: var(--red);
}
.fb-card.primary:hover{
  background: var(--ink);
  border-color: var(--ink);
}

.fb-stars{
  font-size: 18px;
  letter-spacing: 3px;
  line-height: 1;
  margin-bottom: 16px;
  font-family: "Georgia", "Times New Roman", serif;
  display: flex; align-items: baseline; gap: 0;
}
.fb-stars.complain{ color: rgba(0,0,0,.25);}
.fb-stars.complain .filled{ color: var(--red);}
.fb-card:hover .fb-stars.complain{ color: rgba(255,254,249,.3);}
.fb-card:hover .fb-stars.complain .filled{ color: var(--red);}
.fb-stars.love{ color: var(--paper);}
.fb-stars.suggest{
  font-family: var(--sans);
  letter-spacing: 1px;
  font-weight: 700;
  color: var(--ink);
}
.fb-card:hover .fb-stars.suggest{ color: var(--paper);}

.fb-card h3{
  font-family: var(--display);
  font-size: clamp(26px, 5vw, 36px);
  line-height: 0.96;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.fb-card p{
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 18px;
  opacity: 0.85;
}
.fb-cta{
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-bottom: 1px solid currentColor;
  padding-bottom: 3px;
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 6px;
}
.fb-cta .arr{
  transition: transform .35s cubic-bezier(.2,.7,.2,1);
  display: inline-block;
}
.fb-card:hover .fb-cta .arr{ transform: translateX(4px);}

@media (min-width: 700px){
  .fb-grid{ flex-direction: row;}
  .fb-card{ flex: 1; min-width: 0;}
}

/* =============================================================
   FOOTER
============================================================= */
.foot-sec{
  margin-top: 24px;
  background: var(--ink);
  color: var(--paper);
  padding: 56px var(--pad-x) calc(var(--bottom-cta-h) + 28px);
  min-height: 80svh;
  display: flex; flex-direction: column;
  position: relative;
}
.foot-sec::before{
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(rgba(255,254,249,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,254,249,.07) 1px, transparent 1px);
  background-size: var(--tile) var(--tile);
}
.foot-sec > *{ position: relative; z-index: 1;}
.foot-mark{
  font-family: var(--display);
  font-size: clamp(72px, 22vw, 240px);
  line-height: 0.86; letter-spacing: -0.03em;
  text-transform: uppercase;
  margin-top: auto;
  margin-bottom: 32px;
}
.foot-mark .r{ color: var(--red);}
.foot-links{
  display: flex; flex-direction: column;
  border-top: 1px solid rgba(255,254,249,.18);
}
.foot-row{
  display: flex; justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255,254,249,.18);
  font-family: var(--mono);
  font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
}
.foot-row .lbl{ color: rgba(255,254,249,.55);}
.foot-row .val{ color: var(--paper);}
.foot-bottom{
  margin-top: 24px;
  display: flex; justify-content: space-between;
  font-family: var(--mono);
  font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
  color: rgba(255,254,249,.5);
}

/* =============================================================
   BOTTOM STICKY CTA
============================================================= */
.bottom-cta{
  position: fixed;
  left: 8px; right: 8px;
  bottom: calc(8px + var(--safe-bottom));
  z-index: 55;
  height: var(--bottom-cta-h);
  background: var(--ink);
  color: var(--paper);
  border-radius: 32px;
  padding: 6px;
  display: grid;
  grid-template-columns: auto 1fr 1fr;
  gap: 6px;
  align-items: stretch;
  transform: translateY(0);
  transition: transform .35s cubic-bezier(.2,.7,.2,1), opacity .25s;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
.bottom-cta.hidden{ transform: translateY(150%); opacity: 0; pointer-events: none;}
.bottom-cta .b-logo{
  width: 52px;
  display: grid; place-items: center;
  font-family: var(--display);
  font-size: 18px;
  letter-spacing: -0.01em;
}
.bottom-cta .b-logo .star-bs{
  width: 20px; height: 20px;
  background: var(--paper);
  -webkit-mask: url('../assets/star.png') center/contain no-repeat;
          mask: url('../assets/star.png') center/contain no-repeat;
  animation: star-pulse-spin 5s cubic-bezier(0.65, 0, 0.35, 1) infinite;
  transform-origin: 50% 50%;
}
@keyframes star-pulse-spin{
  0%, 30%   { transform: rotate(0deg);}
  70%, 100% { transform: rotate(360deg);}
}
.bottom-cta .b-btn{
  display: flex; align-items: center; justify-content: center;
  background: transparent;
  color: var(--paper);
  border: none;
  border-radius: 26px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .08em; text-transform: uppercase;
  font-weight: 600;
}
.bottom-cta .b-btn.red{ background: var(--red);}

@media (min-width: 900px){
  .bottom-cta{
    left: auto; right: 16px; bottom: 16px;
    width: 440px;
  }
}

/* =============================================================
   SCRAPBOOK LAYER — stickers + caveat
============================================================= */
.scrap-layer{
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
}
.scrap-layer.over{ z-index: 4;}
.sticker{
  position: absolute;
  pointer-events: none;
  user-select: none;
  display: block;
  line-height: 0;
  transform: rotate(var(--rot, 0deg));
  animation: sticker-float 6.5s ease-in-out infinite;
  animation-delay: var(--delay, 0s);
  will-change: transform;
}
.sticker img,
.sticker svg{
  display: block;
  width: 100%; height: auto;
}
.sticker.tape{
  background:
    linear-gradient(90deg, rgba(0,0,0,.06) 0 4px, transparent 4px) repeat-y left,
    linear-gradient(90deg, rgba(0,0,0,.06) 0 4px, transparent 4px) repeat-y right;
  background-color: rgba(255,254,249,.85);
  border: 1px solid rgba(0,0,0,.1);
  height: 22px;
  width: 80px;
}

/* Caveat scribble (text annotations) */
.scribble-note{
  font-family: var(--hand);
  font-weight: 600;
  font-size: 22px;
  color: var(--ink);
  line-height: 1;
  position: absolute;
  pointer-events: none;
  transform: rotate(var(--rot, -2deg));
  animation: note-wobble 7.5s ease-in-out infinite;
  animation-delay: var(--delay, 0s);
  will-change: transform;
  /* Paper backdrop so the note stays readable on red / black surfaces */
  background: var(--paper);
  padding: 4px 10px 6px;
  border-radius: 4px;
  box-shadow: 2px 2px 0 rgba(0,0,0,.12);
  white-space: nowrap;
}
.scribble-note.red{ color: var(--red);}

/* When scrapbook off, hide everything in layer */
body.scrap-off .scrap-layer{ display: none;}
body.scrap-off .scribble-note{ display: none;}
body.scrap-off .crossed{ color: inherit;}
body.scrap-off .crossed::after{ display: none;}
body.scrap-off .hand-only{ display: none;}

/* =============================================================
   PARALLAX DECORATIONS — food items drifting in margins
============================================================= */
.parallax{
  position: absolute;
  pointer-events: none;
  user-select: none;
  transform: translate3d(0, calc(var(--scroll-y, 0px) * var(--speed, -0.15)), 0) rotate(var(--rot, 0deg));
  will-change: transform;
  /* Lower than tile content z=1 but above section bg */
}
.parallax img{
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 30px 60px rgba(0,0,0,.22));
}
.parallax-spin img{
  animation: parallax-spin 40s linear infinite;
  transform-origin: center;
}
@keyframes parallax-spin{
  to { transform: rotate(360deg);}
}

/* Signature & menu — ensure content sits above parallax */
.menu-grid, .menu-head, .menu-foot,
.sig-head, .sig-rail, .sig-progress{
  position: relative;
  z-index: 2;
}

/* On narrow phones, scale down parallax peek so it doesn't crowd */
@media (max-width: 540px){
  .parallax{ opacity: 0.88;}
}

/* =============================================================
   HERO VARIANTS B / C / D — selectable from Tweaks
============================================================= */

/* === Variant B — Dotted Sigma wordmark === */
.hero-sec.v-b .hero-b-wordmark{
  margin: 28px 0 16px;
  display: block;
}
.hero-sec.v-b .hero-b-wordmark img{
  width: 100%;
  max-width: 760px;
  height: auto;
  display: block;
}
.hero-sec.v-b .hero-b-tag{
  font-family: var(--display);
  font-size: clamp(28px, 7vw, 64px);
  letter-spacing: -0.02em;
  text-transform: uppercase;
  line-height: 0.96;
  margin-bottom: 8px;
}
.hero-sec.v-b .hero-b-tag .r{ color: var(--red);}

/* === Variant C — Full-bleed photo === */
.hero-sec.v-c{
  min-height: 100svh;
  padding: 0;
  position: relative;
  color: var(--paper);
  overflow: hidden;
  display: block;
  max-width: none;
  margin: 0;
}
.hero-sec.v-c .hero-c-bg{
  position: absolute; inset: -7%;
  background: url('../assets/hero-interior.webp') center/cover no-repeat;
  z-index: 0;
  transform: scale(1.06) translate(calc(var(--px, 0) * -18px), calc(var(--py, 0) * -18px));
  transition: transform 0.35s cubic-bezier(.2,.7,.2,1);
  will-change: transform;
}
.hero-sec.v-c .hero-c-overlay{
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.34) 0%, rgba(0,0,0,.08) 30%, rgba(0,0,0,.14) 60%, rgba(0,0,0,.72) 100%);
  z-index: 1;
}
.hero-sec.v-c .hero-c-content{
  position: relative;
  z-index: 2;
  padding: 88px var(--pad-x) calc(56px + 32px);
  min-height: 100svh;
  display: flex; flex-direction: column;
  max-width: var(--max);
  margin: 0 auto;
}

/* Reviews strip — pinned to the bottom edge of the hero, full-bleed */
.hero-sec.v-c .hero-c-reviews{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 3;
  display: flex; align-items: center; justify-content: center;
  gap: 14px;
  padding: 16px var(--pad-x);
  background: rgba(0,0,0,.82);
  backdrop-filter: blur(6px);
  border-top: 1px solid rgba(255,254,249,.14);
  color: var(--paper);
  text-decoration: none;
  font-family: var(--mono);
  font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  transition: background .25s;
  flex-wrap: wrap;
}
.hero-sec.v-c .hero-c-reviews:hover{ background: var(--red);}
.hero-sec.v-c .hero-c-reviews-stars{
  font-family: "Georgia", serif; font-size: 16px; letter-spacing: 3px; color: #FFC844; line-height: 1;
}
.hero-sec.v-c .hero-c-reviews-score{
  font-family: var(--display); font-size: 22px; letter-spacing: -0.02em; line-height: 1;
}
.hero-sec.v-c .hero-c-reviews-on{ color: rgba(255,254,249,.72);}
.hero-sec.v-c .hero-c-reviews:hover .hero-c-reviews-on{ color: var(--paper);}
.hero-sec.v-c .hero-c-reviews-div{ width: 1px; height: 14px; background: rgba(255,254,249,.3);}
.hero-sec.v-c .hero-c-reviews-count{ color: rgba(255,254,249,.72);}
.hero-sec.v-c .hero-c-reviews:hover .hero-c-reviews-count{ color: var(--paper);}
.hero-sec.v-c .hero-c-reviews-arr{ font-family: var(--sans); transition: transform .25s;}
.hero-sec.v-c .hero-c-reviews:hover .hero-c-reviews-arr{ transform: translateX(4px);}

/* Top strip */
.hero-sec.v-c .hero-c-top{
  display: flex; justify-content: space-between; align-items: center;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255,254,249,.28);
  color: rgba(255,254,249,.78);
  font-size: 11px;
  letter-spacing: .08em;
}
.hero-sec.v-c .hero-c-rating{ color: var(--paper); font-weight: 600;}

/* Live hours on the dark hero — readable */
.hero-sec.v-c .hero-c-hours .open-status{ color: var(--paper);}
.hero-sec.v-c .hero-c-hours .open-edge{ color: rgba(255,254,249,.6);}
.hero-sec.v-c .hero-c-hours .open-track{ background: rgba(255,254,249,.22);}
.hero-sec.v-c .hero-c-hours .open-pin{ border-color: var(--ink);}
.hero-sec.v-c .hero-c-hours .open-pin-label{ background: var(--ink); border: 1px solid rgba(255,254,249,.2);}

/* Variant C has its own hours strip — hide the floating header timer */
body.hero-c-active .header-open-status.hero-overlay{ display: none !important;}

/* Middle — eyebrow + title + blurb, vertically centered */
.hero-sec.v-c .hero-c-mid{
  margin: auto 0;
  display: flex; flex-direction: column;
  align-items: flex-start;
}
.hero-sec.v-c .hero-c-eyebrow{
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--mono);
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--paper);
  padding: 8px 14px 8px 10px;
  border: 1px solid rgba(255,254,249,.3);
  border-radius: 999px;
  background: rgba(0,0,0,.25);
  backdrop-filter: blur(4px);
  margin-bottom: 22px;
  opacity: 0;
  animation: hero-c-rise .8s cubic-bezier(.2,.7,.2,1) .1s forwards;
}
.hero-sec.v-c .hero-c-star{
  width: 16px; height: 16px;
  background: var(--red);
  -webkit-mask: url('../assets/star.png') center/contain no-repeat;
          mask: url('../assets/star.png') center/contain no-repeat;
  animation: star-spin 24s linear infinite;
}
.hero-sec.v-c .hero-c-title{
  font-family: var(--display);
  font-size: clamp(60px, 12.5vw, 188px);
  line-height: 0.84;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}
.hero-sec.v-c .hero-c-title .l{
  display: block;
  opacity: 0;
  transform: translateY(40px);
  animation: hero-c-rise .9s cubic-bezier(.2,.7,.2,1) forwards;
}
.hero-sec.v-c .hero-c-title .l1{ animation-delay: .18s;}
.hero-sec.v-c .hero-c-title .l2{ animation-delay: .30s;}
.hero-sec.v-c .hero-c-title .l3{ animation-delay: .42s;}
.hero-sec.v-c .hero-c-title .r{ color: var(--red);}
@keyframes hero-c-rise{
  to { opacity: 1; transform: none;}
}
.hero-sec.v-c .hero-c-blurb{
  margin-top: 22px;
  max-width: 40ch;
  font-size: 16px;
  line-height: 1.5;
  color: rgba(255,254,249,.82);
  opacity: 0;
  animation: hero-c-rise .9s cubic-bezier(.2,.7,.2,1) .56s forwards;
}

/* Bottom — CTAs + scroll cue */
.hero-sec.v-c .hero-c-bottom{
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px;
  opacity: 0;
  animation: hero-c-rise .9s cubic-bezier(.2,.7,.2,1) .68s forwards;
}
.hero-sec.v-c .hero-c-ctas{
  display: flex; flex-direction: row; flex-wrap: wrap; gap: 8px;
  max-width: 540px;
}
.hero-sec.v-c .hero-c-ctas .h-btn{
  min-width: 150px;
}
.hero-sec.v-c .h-btn.paper{
  background: var(--paper); color: var(--ink);
  border: none;
}
.hero-sec.v-c .h-btn.outline-paper{
  background: rgba(0,0,0,.2);
  color: var(--paper);
  border: 1.5px solid var(--paper);
}
.hero-sec.v-c .hero-c-scroll{
  display: none;
  flex-direction: column; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: rgba(255,254,249,.7);
  padding-bottom: 6px;
}
.hero-sec.v-c .hero-c-scroll-line{
  width: 1px; height: 48px;
  background: linear-gradient(rgba(255,254,249,.7), transparent);
  position: relative; overflow: hidden;
}
.hero-sec.v-c .hero-c-scroll-line::after{
  content: ""; position: absolute; top: -50%; left: 0;
  width: 100%; height: 50%;
  background: var(--paper);
  animation: hero-c-scrollcue 2s ease-in-out infinite;
}
@keyframes hero-c-scrollcue{
  0%   { transform: translateY(-100%);}
  100% { transform: translateY(300%);}
}

@media (min-width: 760px){
  .hero-sec.v-c .hero-c-scroll{ display: flex;}
}
@media (max-width: 760px){
  .hero-sec.v-c .hero-c-bottom{ flex-direction: column; align-items: stretch;}
  .hero-sec.v-c .hero-c-ctas{ flex-direction: column;}
  .hero-sec.v-c .hero-c-ctas .h-btn{ width: 100%;}
}

@media (prefers-reduced-motion: reduce){
  .hero-sec.v-c .hero-c-bg{ animation: none;}
  .hero-sec.v-c .hero-c-title .l,
  .hero-sec.v-c .hero-c-eyebrow,
  .hero-sec.v-c .hero-c-blurb,
  .hero-sec.v-c .hero-c-bottom{ opacity: 1; transform: none; animation: none;}
}

/* === Variant D — Asymmetric === */
.hero-sec.v-d{
  padding-top: 84px;
  padding-bottom: calc(var(--bottom-cta-h) + 28px);
  min-height: 100svh;
}
.hero-sec.v-d .hero-d-grid{
  display: grid; grid-template-columns: 1fr;
  gap: 28px;
  min-height: calc(100svh - 200px);
}
.hero-sec.v-d .hero-d-left{
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 4px;
}
.hero-sec.v-d .hero-d-star{
  width: 56px; height: 56px;
  background: var(--ink);
  -webkit-mask: url('../assets/star.png') center/contain no-repeat;
          mask: url('../assets/star.png') center/contain no-repeat;
  margin-bottom: 8px;
}
.hero-sec.v-d .hero-d-mark{
  font-family: var(--display);
  font-size: clamp(96px, 24vw, 240px);
  line-height: 0.86;
  letter-spacing: -0.035em;
  text-transform: uppercase;
}
.hero-sec.v-d .hero-d-mark .r{ color: var(--red);}
.hero-sec.v-d .hero-d-right{
  display: flex; flex-direction: column; gap: 14px;
}
.hero-sec.v-d .hero-d-tagline{
  font-family: var(--display);
  font-size: clamp(32px, 7vw, 56px);
  line-height: 0.96;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
.hero-sec.v-d .hero-d-tagline .r{ color: var(--red);}
.hero-sec.v-d .hero-d-blurb{
  font-size: 15px;
  line-height: 1.5;
  color: rgba(0,0,0,.7);
  max-width: 42ch;
}

@media (min-width: 900px){
  .hero-sec.v-d .hero-d-grid{
    grid-template-columns: 5fr 7fr;
    gap: 56px;
    align-items: end;
  }
  .hero-sec.v-d .hero-d-left{ align-self: stretch; justify-content: end;}
  .hero-sec.v-d .hero-d-mark{ font-size: clamp(140px, 16vw, 220px);}
}

/* === Variant E — WOW: floating product centerpiece + halo + brand star === */
.hero-sec.v-e{
  min-height: 100svh;
  padding-top: 84px;
  padding-bottom: calc(var(--bottom-cta-h) + 28px);
  position: relative;
  overflow: hidden;
}
.hero-sec.v-e .hero-e-grid{
  display: grid; grid-template-columns: 1fr;
  gap: 24px;
  min-height: calc(100svh - 200px);
}
.hero-sec.v-e .hero-e-text{
  display: flex; flex-direction: column; gap: 18px;
  position: relative; z-index: 2;
}
.hero-sec.v-e .hero-e-title{
  font-family: var(--display);
  font-size: clamp(64px, 16vw, 180px);
  line-height: 0.86;
  letter-spacing: -0.025em;
  text-transform: uppercase;
}
.hero-sec.v-e .hero-e-title .r{ color: var(--red);}
.hero-sec.v-e .hero-e-blurb{
  font-size: 14px;
  line-height: 1.5;
  color: rgba(0,0,0,.7);
  max-width: 42ch;
}
.hero-sec.v-e .hero-e-blurb b{ color: var(--ink); font-weight: 600;}

.hero-sec.v-e .hero-e-stage{
  position: relative;
  width: 100%;
  aspect-ratio: 1/1;
  max-width: 560px;
  margin: 0 auto;
  perspective: 1200px;
  z-index: 1;
}
.hero-sec.v-e .hero-e-product{
  position: absolute;
  inset: 6%;
  width: 88%;
  height: 88%;
  object-fit: contain;
  filter: drop-shadow(0 40px 50px rgba(0,0,0,.32))
          drop-shadow(0 14px 18px rgba(0,0,0,.18));
  animation: hero-e-float 7s ease-in-out infinite;
  transform-origin: 50% 60%;
  z-index: 3;
}
@keyframes hero-e-float{
  0%, 100% { transform: translateY(0) rotate(-3deg) scale(1);}
  50%      { transform: translateY(-14px) rotate(3deg) scale(1.025);}
}
.hero-sec.v-e .hero-e-halo{
  position: absolute;
  inset: -10%;
  background:
    radial-gradient(circle at 50% 55%, rgba(235,51,0,.22) 0%, rgba(235,51,0,.08) 30%, transparent 60%);
  z-index: 0;
  animation: hero-e-halo 5s ease-in-out infinite alternate;
}
@keyframes hero-e-halo{
  from { transform: scale(1); opacity: .9;}
  to   { transform: scale(1.06); opacity: 1;}
}
.hero-sec.v-e .hero-e-star-bg{
  position: absolute;
  width: 78%; height: 78%;
  left: 11%; top: 11%;
  background: var(--red);
  -webkit-mask: url('../assets/star.png') center/contain no-repeat;
          mask: url('../assets/star.png') center/contain no-repeat;
  opacity: 0.18;
  z-index: 1;
  animation: hero-e-star 22s linear infinite;
  transform-origin: center;
}
@keyframes hero-e-star{
  to { transform: rotate(360deg);}
}

@media (min-width: 900px){
  .hero-sec.v-e .hero-e-grid{
    grid-template-columns: 5fr 7fr;
    gap: 56px;
    align-items: center;
  }
  .hero-sec.v-e .hero-e-stage{
    max-width: 720px;
  }
}

.reveal{
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.9s cubic-bezier(.2,.7,.2,1), transform 0.9s cubic-bezier(.2,.7,.2,1);
}
.reveal.in{ opacity: 1; transform: none;}

/* =============================================================
   HEADER OPEN STATUS — two copies, crossfade between hero/header
============================================================= */
.header-open-status{
  display: inline-flex;
  align-items: center;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  pointer-events: auto;
}
/* Copy A — sits naturally inside the header flex row */
.header-open-status.header-slot{
  transition: opacity 0.55s cubic-bezier(.2,.7,.2,1), transform 0.55s cubic-bezier(.2,.7,.2,1);
  opacity: 1;
  transform: translateY(0);
}
body.is-hero-mode .header-open-status.header-slot{
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
}

/* Copy B — overlay on top-right of hero */
.header-open-status.hero-overlay{
  position: fixed;
  top: 78px;
  right: var(--pad-x);
  z-index: 60;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.55s cubic-bezier(.2,.7,.2,1), transform 0.55s cubic-bezier(.2,.7,.2,1);
  pointer-events: none;
}
body.is-hero-mode .header-open-status.hero-overlay{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Mobile — both copies visible: hero-overlay on hero, header-slot when scrolled */
@media (max-width: 720px){
  .header-open-status.header-slot{
    display: inline-flex;
    font-size: 9px;
    transition: opacity 0.55s cubic-bezier(.2,.7,.2,1), transform 0.55s cubic-bezier(.2,.7,.2,1);
  }
  .header-open-status.header-slot .open-track{ max-width: 70px; min-width: 50px;}
  /* In hero state on mobile: hide the header-slot copy (timer lives in overlay) */
  body.is-hero-mode .header-open-status.header-slot{
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
  }
  .header-open-status.hero-overlay{
    top: 78px;
    right: 16px;
    font-size: 9px;
    z-index: 55;
  }
  .header-open-status.hero-overlay .open-track{ max-width: 80px; min-width: 60px;}

  /* Lang toggle slides left to make room for the timer when scrolled past hero */
  .lang-toggle{
    transition: margin 0.55s cubic-bezier(.2,.7,.2,1);
    margin-left: 8px;
  }
  body:not(.is-hero-mode) .lang-toggle{
    margin-left: auto;
    margin-right: 8px;
  }
  body.is-hero-mode .lang-toggle{
    margin-left: auto;
    margin-right: auto;
  }
}

/* =============================================================
   MULTI-PAGE — page hero, prose, nav cards
============================================================= */
.page-hero{
  padding-top: 120px;
  padding-bottom: 40px;
  max-width: var(--max);
  margin: 0 auto;
  padding-left: var(--pad-x);
  padding-right: var(--pad-x);
}
.page-hero-title{
  font-family: var(--display);
  font-size: clamp(56px, 11vw, 140px);
  line-height: 0.9; letter-spacing: -0.025em;
  text-transform: uppercase;
  margin-top: 14px;
}
.page-hero-title .r{ color: var(--red);}
.page-hero-sub{
  margin-top: 18px;
  font-size: 16px; line-height: 1.5;
  color: rgba(0,0,0,.66);
  max-width: 52ch;
}

.prose-sec{
  padding-top: 110px;
  padding-bottom: 72px;
}
.prose-sec.is-dark{ background: var(--ink); color: var(--paper);}
.prose-title{
  font-family: var(--display);
  font-size: clamp(36px, 7vw, 64px);
  line-height: 0.94; letter-spacing: -0.02em;
  text-transform: uppercase;
  margin-top: 14px;
}
.prose-title .r{ color: var(--red);}
.prose-lead{
  margin-top: 18px;
  font-family: var(--display);
  font-size: clamp(20px, 3vw, 30px);
  line-height: 1.12; letter-spacing: -0.01em;
  text-transform: uppercase;
  max-width: 24ch;
}
.prose-body{
  margin-top: 28px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  max-width: 72ch;
}
.prose-body p{
  font-size: 16px; line-height: 1.6;
  color: rgba(0,0,0,.72);
}
.prose-sec.is-dark .prose-body p{ color: rgba(255,254,249,.74);}
@media (min-width: 900px){
  .prose-sec{ display: grid; grid-template-columns: 5fr 7fr; gap: 48px; align-items: start;}
  .prose-sec .s-label{ grid-column: 1; grid-row: 1;}
  .prose-title{ grid-column: 1; grid-row: 2;}
  .prose-lead{ grid-column: 1; grid-row: 3;}
  .prose-body{ grid-column: 2; grid-row: 1 / span 3; margin-top: 0;}
}

/* Nav cards (home → pages) */
.navcards-sec{ padding-top: 64px; padding-bottom: 80px;}
.navcards-grid{
  margin-top: 24px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
.navcard{
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "num title arr" "num sub arr";
  column-gap: 18px; row-gap: 2px;
  align-items: center;
  padding: 28px 30px;
  border: 1px solid var(--ink);
  border-radius: 18px;
  background: var(--paper);
  color: var(--ink);
  text-decoration: none;
  transition: transform .3s cubic-bezier(.2,.7,.2,1), background .25s, color .25s;
}
.navcard:hover{ transform: translateY(-3px); background: var(--ink); color: var(--paper);}
.navcard-num{
  grid-area: num;
  font-family: var(--mono); font-size: 12px; letter-spacing: .08em;
  color: var(--red);
}
.navcard-title{
  grid-area: title;
  font-family: var(--display); font-size: clamp(28px, 5vw, 40px);
  line-height: 1; letter-spacing: -0.015em; text-transform: uppercase;
}
.navcard-sub{
  grid-area: sub;
  font-size: 14px; color: rgba(0,0,0,.6);
}
.navcard:hover .navcard-sub{ color: rgba(255,254,249,.7);}
.navcard-arr{
  grid-area: arr;
  font-size: 24px;
  transition: transform .3s cubic-bezier(.2,.7,.2,1);
}
.navcard:hover .navcard-arr{ transform: translateX(6px);}
@media (min-width: 900px){
  .navcards-grid{ grid-template-columns: repeat(3, 1fr); gap: 10px;}
  .navcard{
    grid-template-columns: 1fr;
    grid-template-areas: "num" "title" "sub" "arr";
    align-content: space-between;
    min-height: 260px;
    align-items: start;
  }
  .navcard-arr{ justify-self: start; margin-top: 18px;}
}

/* =============================================================
   SECTION RAIL — sticky numbered side navigation
============================================================= */
.section-rail{
  position: fixed;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 50;
  display: none;
  pointer-events: none;
}
.section-rail ul{
  list-style: none;
  display: flex; flex-direction: column;
  gap: 2px;
  margin: 0; padding: 0;
}
.section-rail li{ pointer-events: auto;}
.section-rail a{
  display: flex; align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border-radius: 6px;
  text-decoration: none;
  color: rgba(0,0,0,.35);
  transition: color .2s;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.section-rail a:hover{ color: var(--ink);}
.section-rail li.active a{ color: var(--red);}

.rail-num{
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  min-width: 18px;
}
.section-rail li.active .rail-num{ color: var(--red);}
/* Line + label removed from view — numbers only */
.rail-line{ display: none;}
.rail-label{ display: none;}

@media (min-width: 1100px){
  .section-rail{ display: block;}
}

/* When on dark sections, invert colors */
.section-rail.on-dark a{ color: rgba(255,254,249,.4);}
.section-rail.on-dark a:hover{ color: var(--paper);}
.section-rail.on-dark li.active a{ color: var(--paper);}

/* =============================================================
   OPEN STATUS — live indicator with timeline track
============================================================= */
.open-status{
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  white-space: nowrap;
  color: var(--ink);
}
.open-state{ display: inline-flex; align-items: center; gap: 6px;}
.open-dot{
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--gray);
  display: inline-block;
}
.open-status.is-open .open-dot{
  background: #18A35A;
  box-shadow: 0 0 0 0 rgba(24,163,90,.5);
  animation: open-pulse 2s ease-in-out infinite;
}
@keyframes open-pulse{
  0%, 100% { box-shadow: 0 0 0 0 rgba(24,163,90,.5);}
  50%      { box-shadow: 0 0 0 6px rgba(24,163,90,0);}
}
.open-status.is-closed .open-dot{ background: var(--red);}

.open-edge{
  color: rgba(0,0,0,.55);
  font-weight: 500;
  font-size: 10px;
}
.open-track{
  position: relative;
  flex: 1; min-width: 100px; max-width: 220px;
  height: 4px;
  background: rgba(0,0,0,.12);
  border-radius: 2px;
}
.open-track-fill{
  position: absolute; left: 0; top: 0; bottom: 0;
  background: var(--red);
  border-radius: 2px 0 0 2px;
  transition: width 0.5s cubic-bezier(.2,.7,.2,1);
}
.open-status.is-closed .open-track-fill{ background: rgba(0,0,0,.25);}
.open-pin{
  position: absolute; top: 50%; transform: translate(-50%, -50%);
  width: 10px; height: 10px;
  background: var(--ink);
  border-radius: 50%;
  border: 2px solid var(--paper);
  box-shadow: 0 0 0 1px var(--ink);
  transition: left 0.5s cubic-bezier(.2,.7,.2,1);
}
.open-status.is-open .open-pin{ background: var(--red); box-shadow: 0 0 0 1px var(--red);}
.open-pin-label{
  position: absolute; left: 50%; top: calc(100% + 8px);
  transform: translateX(-50%);
  font-family: var(--mono); font-size: 10px; letter-spacing: .05em;
  color: var(--ink);
  background: var(--paper);
  padding: 1px 5px;
  border-radius: 3px;
  white-space: nowrap;
  font-weight: 600;
}
.open-status.is-open .open-pin-label{
  color: var(--red);
}
.open-status.is-compact{ font-size: 10px; gap: 6px;}
.open-status.is-compact .open-track{ max-width: 140px; min-width: 70px;}

/* Dark/inverted variants (footer, etc) */
.brand-sec .open-status,
.foot-sec .open-status{
  color: var(--paper);
}
.brand-sec .open-edge,
.foot-sec .open-edge{ color: rgba(255,254,249,.5);}
.brand-sec .open-track,
.foot-sec .open-track{ background: rgba(255,254,249,.18);}
.brand-sec .open-pin,
.foot-sec .open-pin{ border-color: var(--ink);}
.brand-sec .open-pin-label,
.foot-sec .open-pin-label{ background: var(--ink); border: 1px solid rgba(255,254,249,.2);}

/* =============================================================
   REVIEWS BADGE — Google rating social proof strip
============================================================= */
.rev-badge{
  display: flex; align-items: center; justify-content: center;
  gap: 14px;
  padding: 18px var(--pad-x);
  background: var(--ink);
  color: var(--paper);
  text-decoration: none;
  position: relative;
  transition: background .25s;
  text-align: center;
  flex-wrap: wrap;
}
.rev-badge:hover{ background: var(--red);}
.rev-badge .rev-stars{
  font-family: "Georgia", serif;
  font-size: 18px; letter-spacing: 4px;
  color: #FFC844;
  line-height: 1;
}
.rev-badge .rev-meta{
  display: inline-flex; align-items: baseline; gap: 6px;
  font-family: var(--mono);
  font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
}
.rev-badge .rev-meta b{
  font-family: var(--display);
  font-size: 22px;
  letter-spacing: -0.02em;
  color: var(--paper);
  font-weight: 400;
}
.rev-badge .rev-count{
  color: rgba(255,254,249,.7);
  margin-left: 10px;
  padding-left: 10px;
  border-left: 1px solid rgba(255,254,249,.3);
}
.rev-badge .rev-arr{
  font-family: var(--sans);
  font-size: 14px;
  margin-left: 6px;
  transition: transform .25s;
}
.rev-badge:hover .rev-arr{ transform: translateX(4px);}

/* =============================================================
   PROMOS — daily perks / loyalty
============================================================= */
.promos-sec{
  padding-top: 80px;
  padding-bottom: 100px;
}
.promos-title{
  font-family: var(--display);
  font-size: clamp(40px, 10vw, 76px);
  line-height: 0.94;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin-top: 16px;
}
.promos-title .r{ color: var(--red);}
.promos-sub{
  margin-top: 12px;
  font-size: 15px;
  color: rgba(0,0,0,.65);
  max-width: 46ch;
  line-height: 1.5;
}
.promos-grid{
  margin-top: 32px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
.promo-card{
  position: relative;
  padding: 24px 26px 22px;
  border: 1px solid var(--ink);
  border-radius: 18px;
  background: var(--paper);
  color: var(--ink);
  display: flex; flex-direction: column; gap: 10px;
  transition: transform .35s cubic-bezier(.2,.7,.2,1), background .25s, color .25s;
}
.promo-card:hover{ transform: translateY(-3px);}
.promo-card.primary{
  background: var(--red); color: var(--paper); border-color: var(--red);
}
.promo-card.dark{
  background: var(--ink); color: var(--paper);
}
.promo-card .promo-tag{
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(0,0,0,.55);
  display: inline-block;
  padding: 4px 8px;
  background: rgba(0,0,0,.06);
  border-radius: 4px;
  align-self: flex-start;
}
.promo-card.primary .promo-tag{
  background: rgba(255,254,249,.18); color: rgba(255,254,249,.85);
}
.promo-card.dark .promo-tag{
  background: rgba(255,254,249,.12); color: rgba(255,254,249,.7);
}
.promo-card h3{
  font-family: var(--display);
  font-size: clamp(28px, 6vw, 40px);
  line-height: 0.96;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
.promo-card h3 .r{ color: var(--red);}
.promo-card.primary h3 .r{ color: var(--paper);}
.promo-card.dark h3 .r{ color: var(--red);}
.promo-card h3 span{ color: inherit; opacity: 0.7;}
.promo-card p{
  font-size: 13.5px;
  line-height: 1.5;
  opacity: 0.85;
  margin-top: auto;
}
@media (min-width: 700px){
  .promos-grid{ grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1100px){
  .promos-grid{ grid-template-columns: repeat(4, 1fr); }
}

/* =============================================================
   FAQ — accordion of common questions
============================================================= */
.faq-sec{
  padding-top: 80px;
  padding-bottom: 100px;
}
.faq-title{
  font-family: var(--display);
  font-size: clamp(40px, 10vw, 76px);
  line-height: 0.94;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin-top: 16px;
}
.faq-title .r{ color: var(--red);}
.faq-list{
  margin-top: 32px;
  border-top: 1px solid var(--ink);
}
.faq-row{
  display: grid;
  grid-template-columns: 60px 1fr auto;
  column-gap: 16px;
  row-gap: 0;
  align-items: baseline;
  width: 100%;
  padding: 20px 0;
  border: none;
  border-bottom: 1px solid var(--ink);
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background .2s;
  font: inherit;
  color: inherit;
}
.faq-row:hover{
  background: rgba(0,0,0,.02);
}
.faq-num{
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: rgba(0,0,0,.45);
  align-self: center;
}
.faq-q{
  font-family: var(--display);
  font-size: clamp(20px, 4vw, 28px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  align-self: center;
}
.faq-toggle{
  font-family: var(--display);
  font-size: 32px;
  line-height: 1;
  width: 32px; text-align: center;
  color: var(--red);
  align-self: center;
}
.faq-a{
  grid-column: 2 / 4;
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  color: rgba(0,0,0,.7);
  max-width: 56ch;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height .35s cubic-bezier(.2,.7,.2,1), opacity .25s, padding-top .35s;
  padding-top: 0;
}
.faq-row.is-open .faq-a{
  max-height: 200px;
  opacity: 1;
  padding-top: 12px;
}
@media (max-width: 540px){
  .faq-row{ grid-template-columns: 40px 1fr 30px;}
  .faq-num{ font-size: 10px;}
}

/* Floating stickers — each picks up its rotate via --rot, delay via --delay */
@keyframes sticker-float{
  0%, 100% { transform: rotate(var(--rot, 0deg)) translateY(0);}
  50%      { transform: rotate(calc(var(--rot, 0deg) + 3deg)) translateY(-7px);}
}
@keyframes note-wobble{
  0%, 100% { transform: rotate(var(--rot, -2deg)) translateY(0);}
  50%      { transform: rotate(calc(var(--rot, -2deg) + 1.6deg)) translateY(-3px);}
}

/* Slow brand star rotation */
.hero-stamp .star-big{
  animation: star-spin 32s linear infinite;
  transform-origin: center;
}
@keyframes star-spin{
  to { transform: rotate(360deg);}
}

/* Brand image — subtle ken-burns vertical drift, keeps right-anchored crop */
.brand-image{
  animation: bernard-drift 26s ease-in-out infinite alternate;
  will-change: background-position;
}
@keyframes bernard-drift{
  from { background-position: calc(100% + 14vw) 48%;}
  to   { background-position: calc(100% + 14vw) 54%;}
}

/* Red ambient pulse on key CTAs */
.h-btn.red,
.bottom-cta .b-btn.red,
.order-card.red{
  position: relative;
  animation: red-pulse 4s ease-in-out infinite;
}
@keyframes red-pulse{
  0%, 100% { box-shadow: 0 0 0 0 rgba(235, 51, 0, 0);}
  50%      { box-shadow: 0 0 0 8px rgba(235, 51, 0, 0.18);}
}

/* Arrow translate on hover/focus */
.h-btn .arr,
.order-card .arr,
.menu-foot a,
.loc-row .arr{
  transition: transform .35s cubic-bezier(.2,.7,.2,1);
  display: inline-block;
}
.h-btn:hover .arr,
.order-card:hover .arr,
.loc-row:hover .arr{
  transform: translateX(5px);
}
.menu-foot a:hover{ transform: translateX(2px);}

/* Menu card hover lift */
.menu-card{ transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s;}
.menu-card:hover{ transform: translateY(-3px); box-shadow: 0 12px 28px rgba(0,0,0,.18);}
.menu-card:active{ transform: scale(0.985);}

/* Foot wordmark — letters subtly breathe */
.foot-mark{
  animation: foot-breathe 14s ease-in-out infinite alternate;
}
@keyframes foot-breathe{
  from { letter-spacing: -0.03em;}
  to   { letter-spacing: -0.02em;}
}

@media (prefers-reduced-motion: reduce){
  .reveal{ opacity: 1; transform: none; transition: none;}
  html{ scroll-behavior: auto;}
}

/* =============================================================
   FLOATING SYRNIK — 3D centerpiece with dripping caramel
============================================================= */
.hero-sec.v-a{ position: relative; overflow: visible;}

.syrnik-stage{
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  --mx: 0;
  --my: 0;
  perspective: 1200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* warm caramel halo glow */
.syrnik-halo{
  position: absolute;
  width: min(72vw, 720px);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 45%,
      rgba(255, 198, 110, 0.55) 0%,
      rgba(255, 168, 64, 0.30) 22%,
      rgba(235, 51, 0, 0.08) 48%,
      transparent 70%);
  filter: blur(8px);
  animation: syrnik-halo-pulse 5.2s ease-in-out infinite alternate;
  z-index: 0;
}
@keyframes syrnik-halo-pulse{
  from { transform: scale(0.96); opacity: .85;}
  to   { transform: scale(1.06); opacity: 1;}
}

.syrnik-3d{
  position: relative;
  width: min(58vw, 520px);
  aspect-ratio: 1 / 1.1;
  transform-style: preserve-3d;
  z-index: 1;
}

/* bob: vertical float, the soul of the centerpiece */
.syrnik-bob{
  position: absolute;
  inset: 0;
  animation: syrnik-bob 5.6s ease-in-out infinite;
  transform-style: preserve-3d;
  will-change: transform;
}
@keyframes syrnik-bob{
  0%,100% { transform: translateY(0px);}
  50%     { transform: translateY(-22px);}
}

/* tilt: 3D rotate from cursor + a slow rocking */
.syrnik-tilt{
  position: relative;
  width: 100%; height: 100%;
  transform-style: preserve-3d;
  transform:
    rotateX(calc(8deg + var(--my) * -10deg))
    rotateY(calc(var(--mx) * 18deg));
  transition: transform .25s ease-out;
  animation: syrnik-rock 9s ease-in-out infinite alternate;
}
@keyframes syrnik-rock{
  from { filter: drop-shadow(0 30px 30px rgba(122, 61, 5, 0.28));}
  to   { filter: drop-shadow(0 22px 22px rgba(122, 61, 5, 0.34));}
}

.syrnik-img,
.syrnik-3d-wrap{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  user-select: none;
  -webkit-user-drag: none;
  filter: drop-shadow(0 14px 18px rgba(60, 30, 0, 0.35));
}
.syrnik-canvas{
  width: 100%;
  height: 100%;
  display: block;
}
.syrnik-3d-loading{
  position: absolute;
  inset: 18% 18%;
  border-radius: 50%;
  background: radial-gradient(ellipse at 40% 30%,
    rgba(214,145,72,.45),
    rgba(122,61,5,.25) 60%,
    transparent 80%);
  animation: syrnik-loading-pulse 1.6s ease-in-out infinite alternate;
}
@keyframes syrnik-loading-pulse{
  from { opacity: .4;}
  to   { opacity: .9;}
}

/* (caramel layer removed per request) */

/* Falling drip layer — drips fall from the front bottom edge of the syrnik puck */
.syrnik-drip-layer{
  position: absolute;
  left: 18%;
  right: 18%;
  top: 64%;
  bottom: -32%;
  pointer-events: none;
}
.syrnik-drip{
  position: absolute;
  top: 0;
  width: var(--drip-size);
  height: calc(var(--drip-size) * 1.6);
  transform-origin: top center;
  animation-name: syrnik-drip-fall;
  animation-timing-function: cubic-bezier(.55,.05,.85,.6);
  animation-iteration-count: infinite;
  filter: drop-shadow(0 2px 2px rgba(80, 36, 0, 0.35));
}
.drip-tail{
  position: absolute;
  left: 50%;
  top: -2px;
  width: 32%;
  height: 60%;
  background: linear-gradient(180deg,
    #7A3D05 0%,
    #C77514 50%,
    #E59A2A 100%);
  border-radius: 40% 40% 50% 50% / 30% 30% 70% 70%;
  transform: translateX(-50%);
}
.drip-bead{
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 100%;
  height: 75%;
  background:
    radial-gradient(ellipse at 35% 30%, #FFE6A8 0%, #F6B040 28%, #C77514 65%, #7A3D05 100%);
  border-radius: 50% 50% 50% 50% / 35% 35% 65% 65%;
  transform: translateX(-50%);
  box-shadow:
    inset 1px -2px 3px rgba(255, 220, 140, 0.55),
    inset -1px 2px 3px rgba(70, 30, 0, 0.4);
}

@keyframes syrnik-drip-fall{
  /* form */
  0%   { transform: translateY(-6px) scaleY(0.3);  opacity: 0;}
  8%   { transform: translateY(0px)  scaleY(0.7);  opacity: 1;}
  /* hang & stretch */
  28%  { transform: translateY(4px)  scaleY(1.15); opacity: 1;}
  38%  { transform: translateY(10px) scaleY(1.55); opacity: 1;}
  /* snap — bead detaches and falls fast */
  48%  { transform: translateY(60px) scaleY(1.25); opacity: 1;}
  70%  { transform: translateY(280px) scaleY(1.6); opacity: .95;}
  90%  { transform: translateY(440px) scaleY(1.1); opacity: .6;}
  100% { transform: translateY(520px) scaleY(0.8); opacity: 0;}
}

/* contact shadow on the imaginary ground */
.syrnik-shadow{
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: -6%;
  height: 28px;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.32), rgba(0,0,0,0) 70%);
  filter: blur(6px);
  animation: syrnik-shadow-bob 5.6s ease-in-out infinite;
  z-index: 0;
}
@keyframes syrnik-shadow-bob{
  0%,100% { transform: scale(1, 1);     opacity: .55;}
  50%     { transform: scale(0.78, .8); opacity: .35;}
}

/* Headlines on top, shadow soft so syrnik peeks behind */
.hero-sec.v-a .hero-left{ position: relative; z-index: 2;}
.hero-sec.v-a .hero-cta-stack{ position: relative; z-index: 2;}
.hero-sec.v-a .hero-headline{
  mix-blend-mode: normal;
}

/* On desktop, lift the syrnik up & push it slightly right
   so it sits in the negative space of the headline */
@media (min-width: 900px){
  .syrnik-stage{
    justify-content: flex-end;
    align-items: center;
    padding-right: 4%;
    padding-bottom: 6%;
  }
  .syrnik-3d{
    width: min(46vw, 560px);
  }
}

/* Hide the syrnik on small screens — it would crush the layout */
@media (max-width: 720px){
  .syrnik-stage{ opacity: 0.55;}
  .syrnik-3d{ width: 72vw;}
}

@media (prefers-reduced-motion: reduce){
  .syrnik-bob,
  .syrnik-tilt,
  .syrnik-halo,
  .syrnik-shadow{
    animation: none !important;
  }
  /* Keep drips visible but freeze them mid-fall in their hanging pose
     so users with reduced-motion still see caramel hanging from the syrnik. */
  .syrnik-drip{
    animation-play-state: paused !important;
    animation-delay: -0.35s !important;
  }
}

/* ============================================================
   Full menu CTA — large red button after curated menu sample,
   pushes visitors to the real live menu on signa.dishi.rest
   ============================================================ */
.fullmenu-cta-sec{
  padding: 60px 24px 80px;
  display: flex; justify-content: center;
}
.fullmenu-cta{
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: 36px 56px;
  max-width: 760px; width: 100%;
  background: var(--red); color: var(--paper);
  border-radius: 28px; text-decoration: none;
  box-shadow: 0 8px 0 rgba(0,0,0,0.85);
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
  -webkit-tap-highlight-color: transparent;
}
.fullmenu-cta:hover, .fullmenu-cta:focus-visible{
  background: #FF4A1F;
  transform: translateY(-3px);
  box-shadow: 0 11px 0 rgba(0,0,0,0.85);
}
.fullmenu-cta:active{
  transform: translateY(3px);
  box-shadow: 0 5px 0 rgba(0,0,0,0.85);
}
.fullmenu-kicker{
  font-family: var(--sans);
  font-size: 14px; line-height: 1.4; text-align: center;
  letter-spacing: 0.01em;
  opacity: 0.92;
}
.fullmenu-main{
  display: inline-flex; align-items: center; gap: 18px;
  font-family: "Anton", sans-serif;
  font-size: clamp(28px, 5vw, 44px);
  line-height: 1; letter-spacing: 0.02em;
  text-transform: uppercase;
}
.fullmenu-arr{
  font-size: 0.9em;
  transition: transform 0.18s ease;
}
.fullmenu-cta:hover .fullmenu-arr{ transform: translateX(8px); }
.fullmenu-note{
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  opacity: 0.85;
}
@media (max-width: 768px){
  .fullmenu-cta-sec{ padding: 40px 16px 60px; }
  .fullmenu-cta{ padding: 26px 28px; gap: 10px; }
  .fullmenu-kicker{ font-size: 13px; }
  .fullmenu-main{ gap: 12px; }
  .fullmenu-note{ font-size: 10px; }
}

/* =============================================================
   STORIES — weekly dish essays (/stories, server-rendered PHP)
   Reuses the site tokens only: Anton display, Onest body, mono
   labels, --red accent, --pad-x rhythm. No new colours.
============================================================= */

/* current page in the header nav */
.signa-header nav a.is-current{ color: var(--ink); }
.signa-header nav a.is-current::after{
  content: ""; display: block; height: 1.5px; background: var(--red); margin-top: 3px;
}
/* header lang toggle renders as <a> on server-rendered pages */
.signa-header .lang-toggle a.lang-btn{ display: inline-block; text-decoration: none; }

/* ---------- article ---------- */
main{
  /* Block formatting context. Without it the sheet's top margin collapses through
     main and body, the tile background starts 108px lower and the html paper colour
     shows as a blank band under the fixed header. Only the two PHP pages use <main>. */
  display: flow-root;
}

.story{
  /* A paper sheet on top of the tile grid. Body text at 17px was blending into
     the 44px tiles behind it (owner, 05.09.2026), so the article now sits on the
     same paper-plus-hard-shadow surface the scribble notes already use. */
  box-sizing: border-box;
  max-width: 760px;
  width: calc(100% - 24px);
  margin: 108px auto 0;
  padding: 34px var(--pad-x) 40px;
  background: var(--paper);
  border: 1px solid rgba(0,0,0,.14);
  box-shadow: 2px 2px 0 rgba(0,0,0,.12);
}
.story-crumbs{
  font-family: var(--mono);
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: rgba(0,0,0,.45);
  display: flex; gap: 8px; margin-bottom: 22px;
}
.story-crumbs a:hover{ color: var(--red); }
.story-head .s-label{ margin-bottom: 14px; }
.story-title{
  font-family: var(--display);
  font-size: clamp(34px, 6.4vw, 60px);
  line-height: 1.0; letter-spacing: -0.02em;
  text-transform: uppercase;
  text-wrap: balance;
}
.story-lead{
  margin-top: 20px;
  font-size: clamp(18px, 2.4vw, 22px);
  line-height: 1.45;
  color: rgba(0,0,0,.72);
  border-left: 2px solid var(--red);
  padding-left: 16px;
}
.story-altlang{
  margin-top: 18px;
  font-family: var(--mono);
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
}
.story-altlang a{ color: rgba(0,0,0,.55); }
.story-altlang a:hover{ color: var(--red); }

.story-cover{ margin: 34px 0 0; }
.story-cover img{
  width: 100%; height: auto;
  border: 1px solid rgba(0,0,0,.12);
  object-fit: cover;
}
.story-cover figcaption{
  margin-top: 10px;
  font-family: var(--mono);
  font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  color: rgba(0,0,0,.5);
}
.story-cover figcaption b{ color: var(--ink); font-weight: 500; }
.story-cover figcaption a{ color: var(--red); }

.story-body{ margin-top: 40px; }
.story-body h2{
  font-family: var(--display);
  font-size: clamp(22px, 3.4vw, 30px);
  line-height: 1.06; letter-spacing: -0.015em;
  text-transform: uppercase;
  margin: 44px 0 16px;
}
.story-body h2:first-child{ margin-top: 0; }
.story-body p{
  font-size: 17px; line-height: 1.68;
  color: rgba(0,0,0,.78);
  margin-bottom: 18px;
  max-width: 68ch;
}

/* ---------- fact box ---------- */
.story-facts{
  margin-top: 48px;
  border: 1px solid rgba(0,0,0,.14);
  padding: 24px var(--pad-x) 20px;
  background: rgba(255,254,249,.72);
}
.story-facts h2{
  font-family: var(--mono);
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(0,0,0,.5); font-weight: 400;
  margin-bottom: 14px;
}
.story-facts dl{ display: flex; flex-direction: column; }
.story-facts dl > div{
  display: flex; justify-content: space-between; gap: 20px;
  padding: 10px 0;
  border-top: 1px solid rgba(0,0,0,.1);
  font-family: var(--mono);
  font-size: 12px; letter-spacing: .03em;
}
.story-facts dt{ color: rgba(0,0,0,.5); text-transform: uppercase; font-size: 11px; flex: 0 0 auto; }
.story-facts dd{ text-align: right; color: var(--ink); }

/* ---------- FAQ ---------- */
.story-faq{ margin-top: 48px; }
.story-faq > h2{
  font-family: var(--display);
  font-size: clamp(22px, 3.4vw, 30px);
  text-transform: uppercase; letter-spacing: -0.015em;
  margin-bottom: 18px;
}
.story-faq-item{ border-top: 1px solid rgba(0,0,0,.12); padding: 16px 0; }
.story-faq-item h3{
  font-size: 16px; font-weight: 600; line-height: 1.35; margin-bottom: 6px;
}
.story-faq-item p{ font-size: 15px; line-height: 1.6; color: rgba(0,0,0,.68); }

.story-tags{
  margin-top: 36px; display: flex; flex-wrap: wrap; gap: 8px;
}
.story-tags span{
  font-family: var(--mono);
  font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
  border: 1px solid rgba(0,0,0,.18); border-radius: 999px;
  padding: 5px 11px; color: rgba(0,0,0,.55);
}
.story-meta{
  margin-top: 20px; padding-bottom: 8px;
  font-family: var(--mono);
  font-size: 10px; letter-spacing: .06em; text-transform: uppercase;
  color: rgba(0,0,0,.42);
}

/* ---------- closing CTA ---------- */
.story-cta{
  max-width: 760px; margin: 72px auto 0;
  padding: 34px var(--pad-x);
  background: var(--ink); color: var(--paper);
}
.story-cta h2{
  font-family: var(--display);
  font-size: clamp(24px, 4vw, 36px);
  line-height: 1.02; letter-spacing: -0.02em; text-transform: uppercase;
}
.story-cta p{
  margin-top: 12px; font-size: 15px; line-height: 1.6;
  color: rgba(255,254,249,.74); max-width: 52ch;
}
.story-cta-row{ margin-top: 22px; display: flex; flex-wrap: wrap; gap: 10px; }
.story-cta .h-btn.outline{ color: var(--paper); border-color: rgba(255,254,249,.5); }
.story-cta .h-btn.outline:hover{ background: var(--paper); color: var(--ink); }

/* ---------- related ---------- */
.story-more{ max-width: 1100px; margin: 0 auto; padding: 72px var(--pad-x) 24px; }
.story-more .s-label{ margin-bottom: 20px; }
.story-grid{ display: grid; grid-template-columns: 1fr; gap: 18px; }
.story-card{
  position: relative;
  border: 1px solid rgba(0,0,0,.14);
  padding: 0 0 18px;
  transition: transform .2s, background .2s, color .2s;
}
.story-card img{ width: 100%; height: 180px; object-fit: cover; margin-bottom: 14px; }
.story-card-date,
.story-card-title{ display: block; padding: 0 16px; }
.story-card-date{
  font-family: var(--mono);
  font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
  color: rgba(0,0,0,.45); margin-bottom: 6px;
}
.story-card-title{
  font-family: var(--display);
  font-size: 19px; line-height: 1.08; letter-spacing: -0.01em; text-transform: uppercase;
}
.story-card-arr{ position: absolute; right: 14px; bottom: 14px; color: var(--red); transition: transform .2s; }
.story-card:hover{ transform: translateY(-3px); background: var(--ink); color: var(--paper); }
.story-card:hover .story-card-date{ color: rgba(255,254,249,.6); }
.story-card:hover .story-card-arr{ transform: translateX(5px); }
.story-back{
  margin-top: 28px;
  font-family: var(--mono);
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: rgba(0,0,0,.5);
}
.story-back a:hover{ color: var(--red); }

/* ---------- index ---------- */
.story-index{
  /* Same paper sheet for the list page, so the leads read as well as the posts. */
  box-sizing: border-box;
  width: calc(100% - 24px);
  padding: 8px var(--pad-x) 40px;
  background: var(--paper);
  border: 1px solid rgba(0,0,0,.14);
  box-shadow: 2px 2px 0 rgba(0,0,0,.12);
}
.story-empty{ color: rgba(0,0,0,.55); padding: 40px 0 60px; }
.story-row{ border-top: 1px solid rgba(0,0,0,.14); }
.story-row:last-child{ border-bottom: 1px solid rgba(0,0,0,.14); }
.story-row-link{
  display: grid; grid-template-columns: 1fr; gap: 18px;
  padding: 26px 0;
  transition: opacity .2s;
}
.story-row-img img{
  width: 100%; height: 200px; object-fit: cover;
  border: 1px solid rgba(0,0,0,.1);
}
.story-row-meta{
  display: block;
  font-family: var(--mono);
  font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
  color: rgba(0,0,0,.45); margin-bottom: 10px;
}
.story-row-title{
  font-family: var(--display);
  font-size: clamp(24px, 4vw, 34px);
  line-height: 1.02; letter-spacing: -0.018em; text-transform: uppercase;
  text-wrap: balance;
}
.story-row-lead{
  display: block; margin-top: 12px;
  font-size: 15px; line-height: 1.6; color: rgba(0,0,0,.68);
  max-width: 62ch;
}
.story-row-cta{
  display: inline-block; margin-top: 14px;
  font-family: var(--mono);
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--red);
}
.story-row-link:hover .story-row-cta{ text-decoration: underline; }
.story-row.is-lead .story-row-title{ font-size: clamp(30px, 6vw, 52px); }

/* footer on server-rendered pages: no sticky bottom CTA to clear */
.story-foot{ min-height: 0; padding-bottom: 40px; }

@media (min-width: 760px){
  .story-grid{ grid-template-columns: repeat(3, 1fr); }
  .story-row-link{ grid-template-columns: 300px 1fr; gap: 28px; align-items: start; }
  .story-row-img img{ height: 210px; }
  .story-row.is-lead .story-row-link{ grid-template-columns: 420px 1fr; }
  .story-row.is-lead .story-row-img img{ height: 300px; }
}
@media (min-width: 1000px){
  .story{ margin-top: 130px; }
}

/* ---------- Mobile nav drawer ----------
   The burger used to be a plain link to menu.html, which left /stories
   unreachable from the header on phones. It is a real toggle now. */
.signa-header .burger{
  padding: 0;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.signa-header .burger span,
.signa-header .burger span::before,
.signa-header .burger span::after{
  transition: transform .22s ease, opacity .18s ease;
}
.signa-header .burger.is-open span{ background: transparent;}
.signa-header .burger.is-open span::before{ top: 0; transform: rotate(45deg);}
.signa-header .burger.is-open span::after { top: 0; transform: rotate(-45deg);}

.mobile-nav{
  border-top: 1px solid rgba(0,0,0,.08);
  background: var(--paper);
  padding: 8px var(--pad-x) 18px;
  position: relative;
  z-index: 2;
}
/* .signa-header nav is display:none on phones - the drawer's nav must opt out. */
.signa-header .mobile-nav nav{
  display: flex;
  flex-direction: column;
}
.signa-header .mobile-nav nav a{
  font-family: var(--display);
  font-size: 30px;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  color: var(--ink);
  padding: 12px 0;
  border-bottom: 1px solid rgba(0,0,0,.07);
}
.signa-header .mobile-nav nav a.is-current{ color: var(--red);}
.mobile-nav-cta{
  display: block;
  margin-top: 18px;
  text-align: center;
  font-family: var(--mono); font-size: 12px;
  letter-spacing: .08em; text-transform: uppercase;
  background: var(--red); color: var(--paper);
  padding: 14px 16px; border-radius: 999px;
}
.mobile-nav-veil{
  position: fixed; inset: 0;
  background: rgba(0,0,0,.35);
  z-index: 1;
}
@media (min-width: 900px){
  .mobile-nav, .mobile-nav-veil{ display: none !important;}
}

/* Feed subscription affordance on the stories index. Search engines read the
   <link rel=alternate>; people need something to click. */
.story-subscribe{
  margin-top: 18px;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: .06em; text-transform: uppercase;
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
}
.story-subscribe a{
  color: var(--paper); background: var(--ink);
  padding: 8px 14px; border-radius: 999px;
}
.story-subscribe a:hover{ background: var(--red);}
.story-subscribe span{ color: rgba(0,0,0,.55);}

/* Header overflow on phones: the open/close timeline is 207px wide and was
   pushing the burger off the right edge (row scrollWidth 410 in a 375 viewport),
   so no nav control was reachable at all. The timeline is repeated in the page
   body, so the header copy stands down on narrow screens. */
.signa-header .burger,
.signa-header .lang-toggle,
.signa-header .signa-mark{ flex-shrink: 0;}
@media (max-width: 639px){
  .signa-header .header-open-status{ display: none;}
}

/* The server-rendered pages have no React, so their drawer is a checkbox.
   Same markup and styles, different switch. */
.mnav-toggle{ position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none;}
.signa-header .burger[for]{ cursor: pointer;}
.mnav-toggle:checked ~ .mobile-nav[hidden]{ display: block;}
.mnav-toggle:checked ~ .signa-header-row .burger span{ background: transparent;}
.mnav-toggle:checked ~ .signa-header-row .burger span::before{ top: 0; transform: rotate(45deg);}
.mnav-toggle:checked ~ .signa-header-row .burger span::after { top: 0; transform: rotate(-45deg);}