/* ═══════════════════════════════════════════════════════════════════
   La Churreria — Coffee Shop
   Mobile-first build of the "Brunch Menu — Letter" design.
   Palette + finish locked to the design's saved tweak state:
   peach palette · espresso prices @600 · square 110px photos ·
   compact density (12px row gap) · paper grain · italic title accent
   ═══════════════════════════════════════════════════════════════════ */

/* ── Self-hosted fonts (latin subset, woff2) ────────────────────────
   Instrument Serif ships a single weight; the 600/700 used below are
   synthesised by the browser, exactly as they were via Google Fonts.
   DM Sans and JetBrains Mono are variable fonts covering their ranges. */
@font-face{
  font-family:"Instrument Serif";
  font-style:normal;font-weight:400;font-display:swap;
  src:url("assets/fonts/instrument-serif-400-normal.woff2") format("woff2");
}
@font-face{
  font-family:"Instrument Serif";
  font-style:italic;font-weight:400;font-display:swap;
  src:url("assets/fonts/instrument-serif-400-italic.woff2") format("woff2");
}
@font-face{
  font-family:"DM Sans";
  font-style:normal;font-weight:100 1000;font-display:swap;
  src:url("assets/fonts/dm-sans-normal.woff2") format("woff2");
}
@font-face{
  font-family:"JetBrains Mono";
  font-style:normal;font-weight:400 600;font-display:swap;
  src:url("assets/fonts/jetbrains-mono-normal.woff2") format("woff2");
}

:root{
  /* Peach palette */
  --bg: #f5d6b4;
  --bg-2: #f1c393;
  --ink: #2a1a14;
  --ink-soft: color-mix(in oklab, var(--ink) 62%, transparent);
  --rule: color-mix(in oklab, var(--ink) 18%, transparent);
  --cream: #fbeed9;
  --accent: #b13a1e;
  --dot: #b13a1e;
  /* Tweaked finish */
  --price-ink: #5a342a;      /* espresso */
  --price-weight: 600;
  --photo-size: 96px;        /* 110px from tablet up */
  --row-gap: 12px;           /* compact density */
  --logo-gold: #AB7110;      /* flower mark renders in its own amber */
  --bench: #3a322c;          /* dark workbench behind the sheets */
}

*{box-sizing:border-box}

html{scroll-behavior:smooth}

html,body{margin:0;padding:0;background:var(--bench);color:var(--ink);
  font-family:"DM Sans","Helvetica Neue",sans-serif;
  -webkit-font-smoothing:antialiased;text-rendering:geometricPrecision}

body{min-height:100vh;display:flex;flex-direction:column;align-items:center;
  gap:20px;padding:0 0 32px}

main{display:flex;flex-direction:column;align-items:center;gap:20px;width:100%}

/* ── Sticky section nav ────────────────────────────────────────────── */
.menubar{position:sticky;top:0;z-index:50;width:100%;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 16px;
  background:color-mix(in oklab, var(--bench) 88%, transparent);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(250,238,217,.14)}
.menubar-brand{display:flex;align-items:center;gap:9px;text-decoration:none;
  color:var(--cream);white-space:nowrap}
.menubar-brand img{display:block;width:22px;height:23px}
.menubar-brand span{font-family:"Instrument Serif",serif;font-size:19px;
  letter-spacing:-.01em;line-height:1}
.menubar-brand em{font-style:italic;color:var(--accent)}
.menubar-links{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none}
.menubar-links::-webkit-scrollbar{display:none}
.menubar-links a{font-family:"JetBrains Mono",monospace;font-size:10px;
  letter-spacing:.14em;text-transform:uppercase;text-decoration:none;
  color:color-mix(in oklab, var(--cream) 72%, transparent);
  padding:6px 8px;border-radius:999px;white-space:nowrap;
  transition:color .15s,background .15s}
.menubar-links a:hover,.menubar-links a:focus-visible{color:var(--cream);
  background:rgba(250,238,217,.08)}
/* Visit leaves the site (Google Maps) — mark it as outbound */
.menubar-visit::after{content:"↗";margin-left:4px;font-size:9px;
  vertical-align:1px;opacity:.7}
@media (max-width: 479px){
  .menubar-brand span{display:none}
  /* tighten so all five links + the outbound arrow fit without clipping */
  .menubar-links{gap:2px}
  .menubar-links a{padding:6px 5px}
}

[id]{scroll-margin-top:64px}

/* ── The paper sheets ──────────────────────────────────────────────── */
.sheet{
  position:relative;
  width:100%;
  max-width:816px; /* US Letter width */
  background:
    radial-gradient(120% 80% at 10% 0%, var(--bg-2) 0%, transparent 55%),
    radial-gradient(110% 90% at 100% 100%, color-mix(in oklab,var(--bg-2) 70%,var(--accent) 8%) 0%, transparent 60%),
    var(--bg);
  box-shadow:0 30px 80px -20px rgba(0,0,0,.45),
             0 8px 24px -8px rgba(0,0,0,.35);
  overflow:hidden;
  color:var(--ink);
}

/* paper grain, confined to each sheet */
.sheet::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.15 0 0 0 0 0.1 0 0 0 0 0.08 0 0 0 0.5 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.25'/></svg>");
  mix-blend-mode:multiply;opacity:.5;
}

.page{position:relative;z-index:1;
  padding:32px 20px 28px;
  display:flex;flex-direction:column;}

/* ── Hero ──────────────────────────────────────────────────────────── */
.hero{display:flex;flex-direction:column;align-items:flex-start;
  gap:14px;margin-bottom:18px}
.hero .brand-mark{width:64px;height:64px;flex:0 0 auto;display:block;
  color:var(--accent)}
h1.title{font-family:"Instrument Serif",serif;font-weight:400;
  font-size:clamp(52px, 12vw, 86px);line-height:.88;letter-spacing:-.02em;
  margin:0;color:var(--ink);text-wrap:balance}
h1.title em{font-style:italic;color:var(--accent)}
.subtitle{font-family:"JetBrains Mono",monospace;font-size:13px;
  letter-spacing:.32em;text-transform:uppercase;color:var(--ink-soft);
  margin-top:10px;display:flex;align-items:center;gap:10px}
.subtitle::before,.subtitle::after{content:"";flex:0 0 22px;height:1px;
  background:color-mix(in oklab,var(--ink) 30%,transparent)}
.subtitle::after{flex:1 1 auto}
.hero-meta{font-family:"JetBrains Mono",monospace;font-size:11px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);
  line-height:1.7;white-space:nowrap}
.hero-meta b{color:var(--ink);font-weight:500;display:block;
  font-family:"Instrument Serif",serif;font-style:italic;font-size:19px;
  letter-spacing:0;text-transform:none;margin-top:2px}

/* ── Section header ────────────────────────────────────────────────── */
.sect-head{display:flex;align-items:baseline;justify-content:space-between;
  gap:12px;margin:0 0 8px;border-bottom:1px solid var(--rule);padding-bottom:8px}
.sect-head h2{font-family:"Instrument Serif",serif;font-weight:400;
  font-size:28px;letter-spacing:-.01em;margin:0;font-style:italic}
.sect-head .count{font-family:"JetBrains Mono",monospace;font-size:11px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}
.sect-head .count-right{text-align:right}

/* ── Plates ────────────────────────────────────────────────────────── */
.items{display:grid;grid-template-columns:1fr;
  row-gap:calc(var(--row-gap) + 2px)}
.item{display:flex;align-items:flex-start;gap:14px;
  padding-bottom:var(--row-gap);border-bottom:1px dashed var(--rule)}
.items .item:last-child{border-bottom:0;padding-bottom:0}

.item .photo{flex:0 0 var(--photo-size);
  width:var(--photo-size);height:calc(var(--photo-size) * 1.1);display:block;
  object-fit:cover;
  box-shadow:0 1px 0 rgba(255,255,255,.4) inset,
    0 8px 18px -12px rgba(42,18,10,.35),
    0 1px 3px -1px rgba(42,18,10,.18);
  background:color-mix(in oklab, var(--cream) 70%, var(--bg) 30%)}
.item .photo-05{object-position:50% 72%}

.item .body{flex:1 1 auto;display:flex;flex-direction:column;
  min-width:0;align-self:stretch}
.item .body:not(:has(.tag)){padding-top:19.6px}
.item .head{display:flex;align-items:baseline;justify-content:space-between;
  gap:8px;margin-top:-1px}
.item .name{font-family:"Instrument Serif",serif;
  line-height:1.05;letter-spacing:-.01em;color:var(--ink);
  display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.item .name .dish{font-family:"Instrument Serif",serif;
  font-size:22px;line-height:1.05;letter-spacing:-.01em;color:var(--ink)}
.item .num{font-family:"JetBrains Mono",monospace;font-size:10px;
  color:var(--ink-soft);letter-spacing:.14em;margin-right:3px;
  transform:translateY(-2px);display:inline-block}
.item .tag{font-family:"JetBrains Mono",monospace;font-size:12.6px;
  letter-spacing:.14em;text-transform:uppercase;
  color:oklch(0.55 0.19 28);display:inline-block;width:fit-content;
  margin-bottom:4px;
  border:1px solid oklch(0.55 0.19 28 / .55);
  background:oklch(0.55 0.19 28 / .06);
  border-radius:999px;padding:2px 6px 1.5px;line-height:1;
  white-space:nowrap}
.item .desc{font-size:12px;line-height:1.5;
  color:var(--ink-soft);margin:4px 0 0;text-wrap:pretty}
.item .price{font-family:"Instrument Serif",serif;font-size:18px;
  font-weight:var(--price-weight);color:var(--price-ink);
  font-variant-numeric:tabular-nums;font-style:italic;white-space:nowrap}

/* dish descriptions — serif finish from the design */
.desc.desc-serif{font-weight:600;font-size:16.1px;line-height:1.5;
  font-family:"Instrument Serif",serif;color:#373535}
.desc.desc-serif div{color:#373535}
.desc.desc-serif span{color:#373535}

/* Avocado Toast "with eggs" option row */
.opt-row{margin:0;display:flex;align-items:baseline;
  justify-content:space-between;gap:5px;padding-left:21px}
.opt-row .opt-name{font-family:"JetBrains Mono",monospace;font-size:15px;
  letter-spacing:.03em;color:var(--ink-soft);font-weight:500}
.opt-price{font-family:"Instrument Serif",serif;font-style:italic;
  font-size:16.1px;color:var(--price-ink);font-weight:600}

/* Chilaquiles choices */
.choice-cols{display:grid;grid-template-columns:1fr 1fr;gap:14px;
  margin-top:0;line-height:1.3}
.choice-label{font-weight:600;font-size:13.8px;margin:0 0 3px}
.choice-list{margin:0;padding-left:14px;list-style:disc}
.choice-list li{font-family:"Instrument Serif",serif;font-size:16px;
  font-weight:600;color:#373535}
.choice-list li.choice-split{display:flex;justify-content:space-between;gap:6px}
.choice-list li.choice-split .opt-price{color:var(--ink)}

/* ── Add-ons ───────────────────────────────────────────────────────── */
.addons-wrap{padding-top:26px}
.addons{display:grid;grid-template-columns:1fr;
  column-gap:24px;row-gap:4px}
.addon{display:flex;align-items:baseline;justify-content:space-between;
  gap:10px;padding:6px 0;border-bottom:1px dotted var(--rule);
  font-size:13px}
.addon .a-name{color:var(--ink)}
.addon .a-price{font-family:"JetBrains Mono",monospace;font-size:14px;font-weight:600;
  color:var(--ink-soft);letter-spacing:.04em}

/* ── Footer / QR ───────────────────────────────────────────────────── */
footer.foot{margin-top:26px;padding-top:16px;border-top:1px solid var(--rule);
  display:flex;flex-direction:column;gap:18px;align-items:center;
  text-align:center;
  font-family:"JetBrains Mono",monospace;font-size:10px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
footer.foot .stars{letter-spacing:.4em;color:var(--accent);text-align:center}
footer.foot .addr{font-size:11px;font-weight:600;letter-spacing:.08em;
  color:var(--ink);line-height:1.5;
  text-decoration:none;display:inline-block;
  transition:color .15s,text-decoration-color .15s}
footer.foot a.addr:hover,footer.foot a.addr:focus-visible{color:var(--accent);
  text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:3px;
  text-decoration-color:color-mix(in oklab,var(--accent) 45%,transparent)}
footer.foot .qr{display:flex;align-items:center;justify-content:center;
  gap:10px;text-align:right}
footer.foot .qr .qr-cap{display:flex;flex-direction:column;gap:2px;
  line-height:1.4;font-size:10px;letter-spacing:.14em;color:var(--ink-soft)}
footer.foot .qr .qr-cap b{color:var(--ink);font-family:"Instrument Serif",serif;
  font-style:italic;font-size:16px;letter-spacing:0;text-transform:none;
  font-weight:400}
footer.foot .qr img{width:58px;height:58px;display:block;
  background:var(--cream);padding:4px;border-radius:6px;
  box-shadow:0 1px 0 rgba(255,255,255,.5) inset,0 4px 10px -6px rgba(42,18,10,.4)}

.qr-inline{display:flex;align-items:center;gap:10px;margin-top:auto;padding-top:14px}
.page-qr{order:4;justify-content:flex-start;margin-top:26px;padding-top:0}
.qr-inline .qr-cap{display:flex;flex-direction:column;gap:2px;
  line-height:1.4;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-soft);
  font-family:"JetBrains Mono",monospace}
.qr-inline .qr-cap b{color:var(--ink);font-family:"Instrument Serif",serif;
  font-style:italic;font-size:16px;letter-spacing:0;text-transform:none;
  font-weight:400}
.qr-inline img{width:58px;height:58px;display:block;
  background:var(--cream);padding:4px;border-radius:6px;
  box-shadow:0 1px 0 rgba(255,255,255,.5) inset,0 4px 10px -6px rgba(42,18,10,.4)}

/* ── Sheet 2 — Churros · Sweets · Drinks ───────────────────────────── */
.page-2 .hero{flex-direction:row;align-items:center;
  justify-content:flex-end;gap:8px;margin-bottom:10px}
.page-2 .brand-mark{width:52px;height:52px;flex:0 0 52px;order:2}
.page-2 .hero-fresh{order:1;
  font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-soft)}

.menu-cols{display:flex;flex-direction:column;gap:4px;flex:1 1 auto}
.menu-col{display:flex;flex-direction:column;gap:26px}
/* the design's page order: churros → sweets → drinks → qr */
.churros-band{order:1}
.sweets-band{order:2}
.drinks-band{order:3;margin-top:26px}

.page-2 .sect-head{margin:0 0 5px;padding-bottom:4px}
.page-2 .plist .prow .pprice{font-size:19px}
.page-2 table.ptable td.dprice{font-size:18px}
.page-2 table.ptable td.dprice.na{font-size:16px}

.drinks-cols{display:grid;grid-template-columns:1fr;row-gap:22px;align-items:start}
.drinks-cols>div{display:flex;flex-direction:column;gap:6px}
.churros-cols{display:grid;grid-template-columns:1fr;row-gap:6px;align-items:start}
.sweets-band{display:grid;grid-template-columns:1fr;row-gap:22px;align-items:start;
  margin-top:24px;padding-top:14px;border-top:1px dashed var(--rule)}
.churros-band .sauces-grid{grid-template-columns:repeat(2,auto);column-gap:18px;row-gap:4px}
.churros-band .sauces-row{border-bottom:0;padding-bottom:0}

.subhead{display:flex;align-items:baseline;gap:8px;margin:10px 0 6px}
.drinks-cols .subhead{margin:0 0 2px}
.churros-band .sauces-row{margin:18px 0 0}
.churros-band .plist .prow{padding:4.5px 0}
.drinks-band table.ptable td{padding:4px 0}
.subhead h3{font-family:"Instrument Serif",serif;font-style:italic;
  font-weight:400;font-size:24px;letter-spacing:-.01em;margin:0;
  color:var(--ink)}
.subhead .ln{flex:1 1 auto;height:1px;
  background:color-mix(in oklab,var(--ink) 22%,transparent)}
.subgroup{margin-bottom:12px}
.subgroup:last-child{margin-bottom:0}
.subgroup-label{font-family:"JetBrains Mono",monospace;font-size:9px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);
  margin:0 0 1px}

/* simple two-col price list (name ... price) */
.plist{display:flex;flex-direction:column}
.plist .prow{display:flex;align-items:baseline;justify-content:space-between;
  gap:10px;padding:5px 0;border-bottom:1px dashed var(--rule)}
.plist .prow:last-child{border-bottom:0}
.plist .prow .pname{font-family:"Instrument Serif",serif;font-size:20px;
  font-weight:700;color:var(--ink);line-height:1.15}
.plist .prow .pdesc{display:block;font-family:"DM Sans",sans-serif;
  font-size:11px;color:#000000;font-weight:400;margin-top:1px}
.plist .prow .pprice{font-family:"Instrument Serif",serif;font-style:italic;font-weight:700;
  font-size:16px;color:var(--ink);white-space:nowrap;
  font-variant-numeric:tabular-nums}

/* sized price table (S/M/L columns) */
table.ptable{width:100%;border-collapse:collapse}
table.ptable th{font-family:"JetBrains Mono",monospace;font-size:8px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);
  text-align:right;font-weight:500;padding:0 0 4px;white-space:nowrap}
table.ptable th:first-child{text-align:left}
table.ptable td{padding:3px 0;border-bottom:1px dashed var(--rule);
  vertical-align:top}
table.ptable tr:last-child td{border-bottom:0}
table.ptable td.dname{text-align:left;font-family:"Instrument Serif",serif;
  font-size:20px;font-weight:700;color:var(--ink);line-height:1.2}
table.ptable td.dname .flavors{display:block;font-family:"DM Sans",sans-serif;
  font-size:11px;letter-spacing:.01em;color:#000000;
  margin-top:2px;font-weight:400}
table.ptable td.dprice{text-align:right;font-family:"Instrument Serif",serif;
  font-style:italic;font-size:15px;font-weight:700;color:var(--ink);white-space:nowrap;
  font-variant-numeric:tabular-nums;padding-left:10px}
table.ptable td.dprice.na{color:var(--ink-soft);font-style:normal;
  font-family:"JetBrains Mono",monospace;font-size:13px}

.sauces-row{margin:0 0 16px;padding-bottom:12px;
  border-bottom:1px dashed var(--rule)}
.sauces-row .sauces-label{font-family:"JetBrains Mono",monospace;
  font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-soft);display:block;margin-bottom:7px}
.sauces-grid{display:grid;grid-template-columns:repeat(2,auto);
  column-gap:16px;row-gap:5px}
.sauces-grid span{font-family:"Instrument Serif",serif;font-style:normal;
  font-size:20px;font-weight:500;color:var(--ink);position:relative;padding-left:11px;
  white-space:nowrap}
.sauces-grid span::before{content:"·";position:absolute;left:0;
  color:var(--accent);font-style:normal}

.breadlist{display:flex;flex-wrap:wrap;gap:8px 16px;margin:0 0 10px}
.breadlist span{font-family:"Instrument Serif",serif;font-size:20px;
  font-weight:500;color:var(--ink);position:relative;padding-left:12px}
.breadlist span::before{content:"·";position:absolute;left:0;
  color:var(--accent)}

/* ═══ Tablet and up ═════════════════════════════════════════════════ */
@media (min-width: 640px){
  :root{--photo-size:110px}
  body{gap:32px;padding:0 16px 32px}
  main{gap:32px}
  .menubar{margin:0 -16px;width:calc(100% + 32px)}
  .page{padding:44px 40px 40px}

  .hero{display:grid;grid-template-columns:auto 1fr auto;align-items:end;
    gap:14px;margin-bottom:10px}
  .hero .brand-mark{width:78px;height:78px;flex:0 0 78px;
    transform:translateY(-10px)}
  .hero-meta{text-align:right}

  .items{grid-template-columns:1fr 1fr;column-gap:28px;
    row-gap:calc(var(--row-gap) + 2px);grid-auto-rows:1fr}
  .item{padding-bottom:var(--row-gap)}
  .items .item:nth-last-child(-n+2){border-bottom:0;padding-bottom:0}

  .addons{grid-template-columns:repeat(3,1fr)}

  footer.foot{display:grid;grid-template-columns:1fr auto 1fr;gap:18px;
    align-items:center;text-align:left;margin-top:22px;padding-top:14px}
  footer.foot .qr{justify-content:flex-end}

  .page-2 .hero{display:grid;grid-template-columns:1fr auto;align-items:center;
    row-gap:2px;margin-bottom:4px}
  .page-2 .brand-mark{grid-column:2;grid-row:1;justify-self:end;transform:none}
  .page-2 .hero-fresh{grid-column:2;grid-row:2;justify-self:end;margin-top:0}

  .drinks-cols{grid-template-columns:1fr 1fr;column-gap:34px}
  .churros-cols{grid-template-columns:1.05fr 1fr;column-gap:34px}
  .sweets-band{grid-template-columns:1.05fr 1fr;column-gap:34px;
    margin-top:18px;padding-top:8px}
  .sauces-grid{grid-template-columns:repeat(2,auto)}
}

@media (min-width: 900px){
  .page{padding:52.8px 57.6px 48px} /* 0.55in 0.6in 0.5in */
}

/* ═══ Print — restore the letter menu ═══════════════════════════════ */
@page{size:Letter portrait;margin:0}
@media print{
  html,body{background:#fff !important;padding:0;display:block}
  .menubar{display:none !important}
  main{display:block}
  .sheet{box-shadow:none;margin:0 auto;width:8.5in;max-width:none;
    break-after:page}
  .sheet::before{opacity:.35}
}