/* ==========================================================================
   Korean Dad, "taped-up storefront window"
   Warm paper ground, heavy ink display type, one gochujang red, and a
   per-kitchen accent that changes as the week rotates.
   ========================================================================== */

:root {
  --ink:        #17150f;
  --ink-soft:   #4a4437;
  --ink-faint:  #8b8271;
  --paper:      #f4ecdd;
  --paper-2:    #ece0cb;
  --paper-3:    #e2d3b8;
  --red:        #c33227;
  --red-deep:   #8e1f19;
  --jade:       #2e5e4e;
  --accent:     var(--red);

  --rule: 1px solid var(--ink);
  --shadow-hard: 5px 5px 0 var(--ink);
  --shadow-soft: 3px 3px 0 rgba(23, 21, 15, .18);

  --display: "Bricolage Grotesque", "Arial Black", sans-serif;
  --body: "Newsreader", Georgia, "Times New Roman", serif;

  --gap: clamp(1rem, 3vw, 2.25rem);
  --pad: clamp(1.25rem, 5vw, 4.5rem);
  --measure: 62ch;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
  margin: 0;
  overflow-x: clip;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: clamp(1.02rem, .55vw + .92rem, 1.16rem);
  line-height: 1.6;
  font-optical-sizing: auto;
}

/* Paper grain. One fixed layer over everything, cheap and non-interactive. */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  opacity: .38; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

h1, h2, h3, h4 { font-family: var(--display); font-weight: 800; line-height: .94; letter-spacing: -.03em; margin: 0; }
p { margin: 0 0 1em; }
a { color: inherit; text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--red-deep); }
:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }
img, svg { max-width: 100%; }

/* Small letterspaced caps, used for every label, tag and eyebrow on the site. */
.label {
  font-family: var(--display);
  font-weight: 700; font-size: .68rem;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-soft);
}

.skip {
  position: absolute; left: -9999px;
  background: var(--ink); color: var(--paper); padding: .7rem 1.1rem; z-index: 10000;
}
.skip:focus { left: 1rem; top: 1rem; }

.wrap { width: min(1180px, 100%); margin-inline: auto; padding-inline: var(--pad); }

/* ------------------------------------------------------------- masthead -- */

.masthead {
  border-bottom: 2px solid var(--ink);
  background: var(--paper);
  position: sticky; top: 0; z-index: 50;
}
.masthead__inner {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: .75rem var(--gap); padding-block: .85rem;
}
.wordmark {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(1.4rem, 2.2vw, 1.75rem);
  letter-spacing: -.045em; text-decoration: none; line-height: 1;
  display: inline-flex; align-items: baseline; gap: .45rem;
}
.wordmark span { font-size: .62em; color: var(--red); letter-spacing: 0; }
.masthead nav { margin-left: auto; display: flex; flex-wrap: wrap; gap: 1.15rem; }
.masthead nav a {
  font-family: var(--display); font-weight: 600; font-size: .8rem;
  letter-spacing: .14em; text-transform: uppercase; text-decoration: none;
  padding-bottom: 2px; border-bottom: 2px solid transparent;
}
.masthead nav a:hover { border-color: var(--ink); }
.masthead nav a[aria-current="page"] { border-color: var(--red); color: var(--red-deep); }

/* ----------------------------------------------------------------- hero -- */

.hero { padding-block: clamp(2.5rem, 7vw, 5.5rem) clamp(2rem, 5vw, 3.5rem); }
.hero__eyebrow { display: flex; align-items: center; gap: .8rem; margin-bottom: 1.4rem; }
.hero__eyebrow::after { content: ""; flex: 1; height: 1px; background: var(--ink-faint); }

.hero h1 {
  font-size: clamp(2.4rem, 9.5vw, 8.2rem);
  overflow-wrap: break-word;
  letter-spacing: -.05em;
  margin-bottom: .35em;
}
.hero h1 em {
  font-style: normal; color: var(--red);
  /* The one truly loud move: a hand-drawn underline under the promise. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8 C 40 3, 80 10, 120 5 S 180 4, 198 7' stroke='%23c33227' stroke-width='3' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: 0 100%; background-size: 100% .2em;
  padding-bottom: .14em;
}
@media (max-width: 680px) { .hero__br { display: none; } }
.hero__lede { max-width: 46ch; font-size: 1.12em; color: var(--ink-soft); }

.hero__grid {
  display: grid; gap: var(--gap);
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  align-items: end;
}
@media (max-width: 820px) { .hero__grid { grid-template-columns: 1fr; } }

/* -------------------------------------------------------- today's panel -- */

.today {
  position: relative;
  border: 2px solid var(--ink);
  background: var(--paper-2);
  padding: 1.5rem 1.5rem 1.35rem;
  box-shadow: var(--shadow-hard);
}
.today::before {
  /* strip of tape, top-left */
  content: ""; position: absolute; top: -13px; left: 22px;
  width: 92px; height: 26px; transform: rotate(-4deg);
  background: rgba(226, 211, 184, .82);
  border-left: 1px dashed rgba(23,21,15,.28); border-right: 1px dashed rgba(23,21,15,.28);
}
.today__date { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .25rem 1rem; margin-bottom: .6rem; }
.today__kitchen {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(1.7rem, 4vw, 2.5rem); line-height: .95;
  letter-spacing: -.04em; color: var(--accent);
}
.today__cuisine { font-style: italic; color: var(--ink-soft); margin-bottom: .8rem; }
.today__hours { font-family: var(--display); font-weight: 700; font-size: 1.05rem; letter-spacing: -.01em; }
.today__stack + .today__stack { margin-top: 1rem; padding-top: 1rem; border-top: 1px dashed var(--ink-faint); }

/* The stamp. Rotated, hollow, deliberately imperfect. */
.stamp {
  display: inline-block; align-self: flex-start;
  max-width: 100%; transform: rotate(-2deg); transform-origin: left center;
  border: 3px double var(--red); color: var(--red);
  font-family: var(--display); font-weight: 800;
  font-size: .74rem; letter-spacing: .16em; text-transform: uppercase;
  padding: .3rem .65rem; opacity: .92;
}
.stamp--dark { border-color: var(--ink-faint); color: var(--ink-faint); }

/* ---------------------------------------------------------- week strip -- */

.strip { padding-block: clamp(2rem, 5vw, 3.5rem); }
.strip__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 1rem; margin-bottom: 1.75rem; }
.strip__head h2 { font-size: clamp(1.6rem, 4vw, 2.4rem); }
.strip__head .label { margin-left: auto; }

.week {
  display: grid; gap: .9rem;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  list-style: none; margin: 0; padding: 0;
}
@media (max-width: 1080px) { .week { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 720px)  { .week { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 430px)  { .week { grid-template-columns: 1fr; } }

.day {
  --accent: var(--ink-faint);
  position: relative;
  display: flex; flex-direction: column; gap: .35rem;
  min-height: 9.5rem; padding: .85rem .8rem 1rem;
  background: var(--paper-2);
  border: 1.5px solid var(--ink);
  box-shadow: var(--shadow-soft);
  transition: transform .18s ease, box-shadow .18s ease;
}
/* Each card sits a hair off-square, like it was taped up by hand. */
.day:nth-child(odd)  { transform: rotate(-.5deg); }
.day:nth-child(even) { transform: rotate(.45deg); }
.day:nth-child(3n)   { transform: rotate(.8deg); }
.day:hover, .day:focus-within { transform: rotate(0) translateY(-4px); box-shadow: var(--shadow-hard); }

.day__top { display: flex; align-items: baseline; justify-content: space-between; gap: .4rem; padding-bottom: .45rem; border-bottom: 1px solid var(--ink); }
.day__name { font-family: var(--display); font-weight: 800; font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; }
.day__date { font-family: var(--display); font-size: .72rem; color: var(--ink-faint); }

.day__kitchen { font-family: var(--display); font-weight: 800; font-size: 1.02rem; line-height: 1.05; letter-spacing: -.025em; color: var(--accent); }
.day__kitchen a { text-decoration: none; }
.day__kitchen a:hover { text-decoration: underline; }
.day__cuisine { font-size: .82rem; font-style: italic; color: var(--ink-soft); }
.day__hours { font-size: .78rem; font-family: var(--display); font-weight: 600; color: var(--ink-soft); }
.day__note { font-size: .74rem; color: var(--ink-faint); }
.day__slot + .day__slot { margin-top: .55rem; padding-top: .55rem; border-top: 1px dashed var(--ink-faint); }
.day__dark { margin-top: .15rem; font-size: .8rem; font-style: italic; color: var(--ink-faint); }

.day--today { background: var(--paper); border-width: 2.5px; box-shadow: var(--shadow-hard); transform: rotate(0) !important; }
.day--today::after {
  content: "TODAY"; position: absolute; top: -.6rem; right: -.5rem;
  background: var(--red); color: var(--paper);
  font-family: var(--display); font-weight: 800; font-size: .6rem;
  letter-spacing: .14em; padding: .22rem .45rem; transform: rotate(4deg);
}
.day--past { opacity: .58; }
.day--changed .day__top { border-bottom-style: dashed; }
.day__flag { font-size: .68rem; color: var(--red-deep); font-family: var(--display); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }

/* ------------------------------------------------------------ sections -- */

.band { border-top: 2px solid var(--ink); }
.band--ink { background: var(--ink); color: var(--paper); }
.band--ink .label { color: var(--paper-3); }
.band--ink a { color: var(--paper); }
.band--ink h2 { color: var(--paper); }
/* Buttons keep their own dark text on the dark band (the link rule above
   would otherwise turn it cream on a cream button), and swap their dark
   border and shadow for light ones so the edge still shows. */
.band--ink .btn, .band--ink .btn:hover { color: var(--ink); border-color: var(--paper); }
.band--ink .btn { box-shadow: 3px 3px 0 var(--paper-3); }
.band--ink .btn:hover { box-shadow: 1px 1px 0 var(--paper-3); }
/* The QR card is a light card; on the dark band it keeps its own dark text. */
.band--ink .qr-card { color: var(--ink); margin-inline: auto; box-shadow: 6px 6px 0 var(--paper-3); }
.band--ink .qr-card h2 { color: var(--ink); }
.band--ink .qr-card .label { color: var(--ink-soft); }

.section { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.section__title { font-size: clamp(1.8rem, 5vw, 3rem); margin-bottom: .8rem; }
.prose { max-width: var(--measure); }
.prose p { font-size: 1.05em; }
.prose p:first-of-type::first-letter {
  float: left; font-family: var(--display); font-weight: 800;
  font-size: 3.4em; line-height: .78; padding: .06em .1em 0 0; color: var(--red);
}

.cols { display: grid; gap: var(--gap); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
@media (max-width: 860px) { .cols { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------- roster -- */

.roster { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.roster li { display: grid; grid-template-columns: auto 1fr; gap: .9rem; align-items: start; padding: .95rem 0; border-bottom: 1px dashed var(--ink-faint); }
.roster li:first-child { border-top: 1px dashed var(--ink-faint); }
.roster__dot { width: .8rem; height: .8rem; margin-top: .45rem; border-radius: 50%; background: var(--accent); }
.roster__name { font-family: var(--display); font-weight: 800; font-size: 1.08rem; letter-spacing: -.02em; }
.roster__meta { font-size: .82rem; color: var(--ink-soft); font-style: italic; }
.roster__blurb { font-size: .9rem; color: var(--ink-soft); margin-top: .2rem; }

/* ----------------------------------------------------------------- menu -- */

.menu-nav { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2rem; }
.menu-nav a {
  --accent: var(--ink);
  font-family: var(--display); font-weight: 700; font-size: .74rem;
  letter-spacing: .1em; text-transform: uppercase; text-decoration: none;
  padding: .45rem .8rem; border: 1.5px solid var(--ink); background: transparent;
}
.menu-nav a:hover { background: var(--paper-3); }
.menu-nav a[aria-current="true"] { background: var(--accent); border-color: var(--accent); color: var(--paper); }

.menu-head { border-bottom: 2px solid var(--ink); padding-bottom: 1.25rem; margin-bottom: 2.25rem; }
.menu-head h1 { font-size: clamp(2.4rem, 8vw, 5rem); color: var(--accent); }
.menu-head p { margin: .7rem 0 0; max-width: 52ch; color: var(--ink-soft); font-style: italic; }

.menu-section { margin-bottom: 2.75rem; break-inside: avoid; }
.menu-section > h2 {
  font-size: 1.35rem; letter-spacing: .04em; text-transform: uppercase;
  display: flex; align-items: center; gap: .9rem; margin-bottom: .35rem;
}
.menu-section > h2::after { content: ""; flex: 1; height: 2px; background: var(--ink); }
.menu-section__note { font-size: .85rem; font-style: italic; color: var(--ink-faint); margin-bottom: 1.1rem; }

.dish { display: grid; grid-template-columns: 1fr auto; column-gap: .5rem; padding: .7rem 0; border-bottom: 1px dotted var(--ink-faint); }
.dish__name { font-family: var(--display); font-weight: 700; font-size: 1.05rem; letter-spacing: -.015em; }
.dish__price { font-family: var(--display); font-weight: 700; font-size: 1.02rem; white-space: nowrap; }
.dish__desc { grid-column: 1 / -1; font-size: .92rem; color: var(--ink-soft); max-width: 56ch; margin-top: .15rem; }
.dish__tags { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .45rem; }
.tag {
  font-family: var(--display); font-weight: 600; font-size: .62rem;
  letter-spacing: .12em; text-transform: uppercase;
  border: 1px solid var(--ink-faint); color: var(--ink-soft);
  padding: .12rem .4rem;
}
.dish--out { opacity: .5; }
.dish--out .dish__name { text-decoration: line-through; }

/* ------------------------------------------------------------------ qr -- */

.qr-card {
  border: 3px solid var(--ink); background: var(--paper);
  padding: clamp(1.5rem, 4vw, 2.5rem); text-align: center;
  max-width: 26rem; box-shadow: var(--shadow-hard);
}
.qr-card__mark { width: min(15rem, 62vw); margin-inline: auto; }
.qr-card__mark svg { display: block; width: 100%; height: auto; }
.qr-card h2 { font-size: 2rem; margin-bottom: .2rem; }
.qr-card__cta { font-family: var(--display); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: .8rem; margin-top: 1.1rem; }
.qr-card__url { font-size: .78rem; color: var(--ink-faint); word-break: break-all; margin-top: .35rem; }

/* -------------------------------------------------------------- buttons -- */

.btn {
  display: inline-block; cursor: pointer;
  font-family: var(--display); font-weight: 700; font-size: .78rem;
  letter-spacing: .12em; text-transform: uppercase; text-decoration: none;
  padding: .65rem 1.1rem; border: 2px solid var(--ink); background: var(--paper);
  color: var(--ink); box-shadow: 3px 3px 0 var(--ink); transition: transform .12s ease, box-shadow .12s ease;
}
.btn:hover { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); color: var(--ink); }
.btn--solid { background: var(--red); border-color: var(--red-deep); color: var(--paper); box-shadow: 3px 3px 0 var(--red-deep); }
.btn--solid:hover { color: var(--paper); box-shadow: 1px 1px 0 var(--red-deep); }
.btn--ghost { box-shadow: none; border-width: 1.5px; }
.btn--ghost:hover { transform: none; background: var(--paper-3); box-shadow: none; }
.btn--sm { font-size: .66rem; padding: .35rem .6rem; box-shadow: 2px 2px 0 var(--ink); }
.btn-row { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; }

/* --------------------------------------------------------------- footer -- */

.footer { border-top: 2px solid var(--ink); background: var(--ink); color: var(--paper); padding-block: clamp(2.25rem, 5vw, 3.5rem); }
.footer a { color: var(--paper); }
.footer__grid { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.footer h3 { font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: var(--paper-3); margin-bottom: .7rem; }
.footer p, .footer li { font-size: .92rem; color: var(--paper-2); }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.footer__mark { font-family: var(--display); font-weight: 800; font-size: 1.8rem; letter-spacing: -.04em; line-height: 1; margin-bottom: .5rem; }
.footer__mark span { color: var(--red); }
.footer__base { margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid rgba(244,236,221,.25); display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; font-size: .78rem; color: var(--paper-3); }
.footer__base a { color: var(--paper-3); }

/* ---------------------------------------------------------------- admin -- */

.admin-bar { background: var(--jade); color: var(--paper); font-size: .8rem; }
.admin-bar .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.25rem; padding-block: .55rem; }
.admin-bar a, .admin-bar button { color: var(--paper); }
.admin-bar__links { display: flex; flex-wrap: wrap; gap: 1rem; margin-left: auto; }
.admin-bar__links a { font-family: var(--display); font-weight: 600; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; }
.admin-bar__links a:hover, .admin-bar__links a[aria-current="page"] { text-decoration: underline; }
.linkbtn { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; font-family: var(--display); font-weight: 600; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; text-decoration: underline; }

.panel { border: 1.5px solid var(--ink); background: var(--paper-2); padding: clamp(1rem, 3vw, 1.75rem); margin-bottom: 1.5rem; }
.panel > h2 { font-size: 1.3rem; margin-bottom: .3rem; }
.panel__hint { font-size: .85rem; color: var(--ink-soft); font-style: italic; margin-bottom: 1.1rem; }

.field { display: grid; gap: .3rem; margin-bottom: 1rem; }
.field > span { font-family: var(--display); font-weight: 700; font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
input[type="text"], input[type="password"], input[type="url"], input[type="date"], input[type="email"], select, textarea {
  font-family: var(--body); font-size: 1rem; color: var(--ink);
  background: var(--paper); border: 1.5px solid var(--ink); padding: .5rem .6rem; width: 100%;
}
textarea { line-height: 1.55; resize: vertical; }
input[type="color"] { border: 1.5px solid var(--ink); background: var(--paper); height: 2.4rem; width: 3.5rem; padding: .2rem; }
.check { display: flex; align-items: center; gap: .5rem; font-size: .9rem; }
.check input { width: 1.05rem; height: 1.05rem; accent-color: var(--red); }

.grid-2 { display: grid; gap: 0 1rem; grid-template-columns: 1fr 1fr; }
.grid-3 { display: grid; gap: 0 1rem; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 700px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }

.row {
  display: grid; gap: .4rem .75rem; align-items: end;
  grid-template-columns: 2fr 3fr 1fr auto;
  padding: .75rem; margin-bottom: .5rem;
  background: var(--paper); border: 1px solid var(--paper-3);
}
.row .field { margin-bottom: 0; }
@media (max-width: 820px) { .row { grid-template-columns: 1fr; } }

.editor-section { border: 1.5px solid var(--ink); background: var(--paper); padding: 1rem; margin-bottom: 1.25rem; }
.editor-section__head { display: grid; gap: .5rem .75rem; grid-template-columns: 1fr 1.5fr auto; align-items: end; padding-bottom: .85rem; margin-bottom: .85rem; border-bottom: 1.5px solid var(--ink); }
@media (max-width: 820px) { .editor-section__head { grid-template-columns: 1fr; } }

.notice { border: 1.5px solid var(--ink); border-left-width: 6px; padding: .85rem 1rem; margin-bottom: 1.5rem; font-size: .92rem; }
.notice--ok { border-left-color: var(--jade); background: #e7efe6; }
.notice--warn { border-left-color: var(--red); background: #f6e3df; }
.notice strong { font-family: var(--display); }

.sticky-save {
  position: sticky; bottom: 0; z-index: 20;
  display: flex; flex-wrap: wrap; gap: .75rem; align-items: center;
  background: var(--paper); border-top: 2px solid var(--ink);
  padding: .85rem 0; margin-top: 1rem;
}

.stat-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
.stat { border: 1.5px solid var(--ink); background: var(--paper); padding: .9rem 1rem; }
.stat__n { font-family: var(--display); font-weight: 800; font-size: 2rem; line-height: 1; letter-spacing: -.04em; }

/* ----------------------------------------------------------------- misc -- */

.center { text-align: center; }
.muted { color: var(--ink-soft); }
.small { font-size: .85rem; }
.stack > * + * { margin-top: 1rem; }

@media print {
  body::before, .masthead, .footer, .admin-bar, .no-print { display: none !important; }
  body { background: #fff; }
  .qr-card { box-shadow: none; margin-inline: auto; }
  .day { box-shadow: none; transform: none !important; }
  a { text-decoration: none; }
}