/* agicook — AI SLOP KITCHEN.
 *
 * A standalone design, loaded only on /kitchen/ pages, and deliberately nothing
 * like the rest of the site. The brief (Captain, 2026-08-31): Bourdain crossed
 * with AI slop, and make it silly. So: the pass at 1am — grease-dark, all mono,
 * kitchen dupes on real ticket paper — wearing the visual tics of generated
 * garbage: acid cyan, hot magenta, sparkle emoji, a rubber stamp, and a marquee
 * that will not shut up.
 *
 * Rev 5 of the spec still holds underneath the joke: every AI image is its own
 * style, so the wall crops to squares to read as a wall and the dish page shows
 * the picture whole.
 */

:root {
  --k-bg:      #0d0c0a;   /* the floor at the end of service */
  --k-panel:   #17150f;
  --k-paper:   #f3ead2;   /* dupe paper */
  --k-ink:     #1a1712;   /* what you write on it */
  --k-text:    #f7f0e2;
  --k-muted:   #9b8f7c;
  --k-rule:    #2e281d;
  --k-hot:     #ff4d1f;   /* flame */
  --k-acid:    #00e6c3;   /* the colour of a model that is very confident */
  --k-slop:    #ff2d95;   /* and wrong */
  --k-display: "Bricolage Grotesque", system-ui, sans-serif;
  --k-mono:    "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --k-serif:   "Newsreader", Georgia, serif;
  color-scheme: dark;
}

body {
  background: var(--k-bg);
  color: var(--k-text);
  font-family: var(--k-mono);
  /* grease and grain */
  background-image:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(255,77,31,0.16), transparent 70%),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.014) 0 1px, transparent 1px 3px);
}

/* the site footer inherits light-theme variables — repaint it */
.foot { border-top-color: var(--k-rule); color: var(--k-muted); }
.foot a { color: var(--k-muted); }
.foot a:hover { color: var(--k-acid); }

/* THE FIX: an author rule of display:block beats the UA's [hidden]{display:none}.
   The search set hidden correctly and nothing moved. Belt and braces, here. */
[hidden] { display: none !important; }

.k-wrap { max-width: 84rem; margin: 0 auto; padding: 0 clamp(1rem, 4vw, 2.5rem); }

/* ---------- the sign over the door ---------- */

.k-head { padding: clamp(2rem, 6vw, 4rem) 0 0; }

.k-back-brand {
  display: inline-block;
  font-family: var(--k-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--k-muted);
  text-decoration: none;
  border: 1px solid var(--k-rule);
  padding: 0.3rem 0.6rem;
}
.k-back-brand:hover { color: var(--k-acid); border-color: var(--k-acid); }

.k-title {
  font-family: var(--k-display);
  font-weight: 800;
  font-size: clamp(2.6rem, 11.5vw, 8rem);
  line-height: 0.84;
  letter-spacing: -0.045em;
  text-transform: uppercase;
  margin: 1.3rem 0 0;
  text-shadow: 0.055em 0.045em 0 var(--k-slop), 0.105em 0.09em 0 var(--k-acid);
}
.k-title em { font-style: normal; color: var(--k-hot); }

/* the tagline no model could resist writing */
.k-lede {
  font-family: var(--k-mono);
  font-size: clamp(0.85rem, 1.6vw, 1rem);
  line-height: 1.65;
  color: var(--k-muted);
  max-width: 44rem;
  margin: 1.6rem 0 0;
}
.k-lede strong { color: var(--k-text); font-weight: 500; }

/* ---------- the order board ---------- */

.k-search {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  max-width: 44rem;
  margin: 2.2rem 0 0;
  padding: 0.85rem 1rem;
  background: var(--k-panel);
  border: 1px dashed var(--k-rule);
}
.k-search:focus-within { border-color: var(--k-acid); border-style: solid; }
.k-search svg { flex: none; width: 1rem; height: 1rem; stroke: var(--k-muted); fill: none; stroke-width: 2; }
.k-search:focus-within svg { stroke: var(--k-acid); }

#k-q {
  flex: 1; min-width: 0;
  background: none; border: 0; outline: 0;
  color: var(--k-text);
  font-family: var(--k-mono);
  font-size: 0.95rem;
}
#k-q::placeholder { color: var(--k-muted); opacity: 0.7; }

.k-kbd {
  flex: none;
  font-family: var(--k-mono);
  font-size: 0.65rem;
  color: var(--k-muted);
  border: 1px solid var(--k-rule);
  padding: 0.12rem 0.38rem;
}
.k-search:focus-within .k-kbd { visibility: hidden; }

.k-count {
  margin: 1.1rem 0 0;
  font-family: var(--k-mono);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--k-muted);
}
.k-count b { color: var(--k-hot); font-weight: 500; }

.k-empty {
  margin: 3rem 0 6rem;
  font-family: var(--k-display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(1.4rem, 4vw, 2.4rem);
  letter-spacing: -0.02em;
  color: var(--k-muted);
}
.k-empty span { color: var(--k-slop); }
.k-empty small {
  display: block;
  margin-top: 0.6rem;
  font-family: var(--k-mono);
  font-weight: 400;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--k-muted);
  text-transform: none;
}

/* ---------- the wall of tickets ---------- */

.k-wall {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  grid-auto-flow: dense;
  gap: 0.9rem;
  margin: 1.5rem 0 0;
}

.k-tile {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--k-panel);
  border: 1px solid var(--k-rule);
  text-decoration: none;
  color: var(--k-text);
  transition: transform 0.18s ease, border-color 0.18s ease;
}
.k-tile:nth-child(3n)   { transform: rotate(-0.5deg); }
.k-tile:nth-child(4n+1) { transform: rotate(0.4deg); }
.k-tile:hover, .k-tile:focus-visible { transform: rotate(0deg) scale(1.012); border-color: var(--k-hot); z-index: 3; }

.k-tile img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(1.15) contrast(1.05);
  transition: transform 0.5s cubic-bezier(0.2,0.7,0.3,1), filter 0.3s;
}
.k-tile:hover img { transform: scale(1.07); filter: saturate(1.45) contrast(1.1); }

/* the dupe number, stencilled like a ticket off the printer */
.k-no {
  position: absolute; top: 0; left: 0; z-index: 2;
  font-family: var(--k-mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--k-ink);
  background: var(--k-paper);
  padding: 0.22rem 0.5rem;
}

/* the sticker every generated image wishes it had */
.k-slopmark {
  position: absolute; top: 0.55rem; right: 0.5rem; z-index: 2;
  font-family: var(--k-mono);
  font-size: 0.55rem;
  letter-spacing: 0.12em;
  color: var(--k-acid);
  border: 1px solid var(--k-acid);
  padding: 0.1rem 0.3rem;
  transform: rotate(6deg);
  background: rgba(13,12,10,0.6);
}

.k-tile-body {
  position: absolute; inset: auto 0 0 0; z-index: 2;
  padding: 3rem 0.85rem 0.8rem;
  background: linear-gradient(to top, rgba(7,6,5,0.96) 25%, rgba(7,6,5,0.6) 58%, transparent);
}
.k-tile h3 {
  margin: 0;
  font-family: var(--k-display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 1rem;
  line-height: 1.1;
  letter-spacing: -0.015em;
}
.k-tile:hover h3 { color: var(--k-hot); }
.k-tile .k-meta { margin: 0.35rem 0 0; }

.k-meta {
  font-family: var(--k-mono);
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--k-muted);
  display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
}
.k-meta .sep { opacity: 0.4; }

/* who invented the dish. a tag, not a verdict — the spec cut verdicts. */
.k-model {
  font-family: var(--k-mono);
  font-size: 0.6rem;
  letter-spacing: 0.06em;
  color: var(--k-ink);
  background: var(--k-acid);
  padding: 0.12rem 0.4rem;
  white-space: nowrap;
}

@media (min-width: 46rem) {
  .k-wall > .k-tile--feature { grid-column: span 2; grid-row: span 2; }
  .k-wall > .k-tile--feature h3 { font-size: 1.7rem; }
  .k-wall > .k-tile--feature .k-tile-body { padding: 4.5rem 1.2rem 1.1rem; }
  .k-wall > .k-tile--feature .k-no { font-size: 0.72rem; padding: 0.3rem 0.7rem; }
}

/* ---------- one dish ---------- */

.k-dish { max-width: 46rem; margin: 0 auto; padding: 0 clamp(1rem, 4vw, 2.5rem) 2rem; }
.k-dish-head { padding: 2.2rem 0 0; }

.k-dish h1 {
  font-family: var(--k-display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(1.9rem, 6vw, 3.3rem);
  line-height: 0.98;
  letter-spacing: -0.035em;
  margin: 1.1rem 0 0.9rem;
}

/* the AI image: whole and uncropped here — the wall crops, the dish does not */
.k-ai { position: relative; margin: 2rem 0 0; }
.k-ai img {
  display: block; margin: 0 auto;
  max-width: 100%; max-height: 76vh;
  width: auto; height: auto;
  border: 1px solid var(--k-rule);
}
.k-stamp {
  position: absolute; top: 1rem; right: 1rem;
  font-family: var(--k-mono);
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--k-slop);
  border: 2px solid var(--k-slop);
  padding: 0.3rem 0.55rem;
  transform: rotate(-9deg);
  background: rgba(10,8,7,0.88);
  box-shadow: 0 2px 12px rgba(0,0,0,0.55);
  text-align: center;
  line-height: 1.3;
}
.k-ai figcaption {
  margin: 0.7rem 0 0;
  font-family: var(--k-mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--k-muted);
  text-align: center;
}

.k-label {
  display: flex; align-items: center; gap: 0.9rem;
  margin: 2.8rem 0 1.1rem;
  padding-bottom: 0.45rem;
  border-bottom: 1px solid var(--k-rule);
  font-family: var(--k-mono);
  font-size: 0.64rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--k-hot);
}
.k-label > :last-child { margin-left: auto; color: var(--k-muted); }
.k-label > :only-child { margin-left: 0; }

.k-plates { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 0.6rem; }
.k-plates figure { margin: 0; }
.k-plates img { display: block; width: 100%; aspect-ratio: 1/1; object-fit: cover; border: 1px solid var(--k-rule); }
.k-plates:has(> figure:only-child) img {
  aspect-ratio: auto;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 62vh;
  margin: 0 auto;
}

/* the recipe, printed on the dupe — read across a worktop, with wet hands */
.k-recipe {
  position: relative;
  background: var(--k-paper);
  color: var(--k-ink);
  padding: clamp(1.4rem, 4vw, 2.4rem);
  font-family: var(--k-mono);
  font-size: 0.94rem;
  line-height: 1.85;
  box-shadow: 0 12px 40px rgba(0,0,0,0.5);
  /* torn off the printer */
  clip-path: polygon(0 8px, 3% 0, 6% 8px, 9% 0, 12% 8px, 15% 0, 18% 8px, 21% 0, 24% 8px,
    27% 0, 30% 8px, 33% 0, 36% 8px, 39% 0, 42% 8px, 45% 0, 48% 8px, 51% 0, 54% 8px,
    57% 0, 60% 8px, 63% 0, 66% 8px, 69% 0, 72% 8px, 75% 0, 78% 8px, 81% 0, 84% 8px,
    87% 0, 90% 8px, 93% 0, 96% 8px, 99% 0, 100% 8px, 100% 100%, 0 100%);
}
.k-recipe > :first-child { margin-top: 0; }
.k-recipe > :last-child { margin-bottom: 0; }
.k-recipe p { margin: 0 0 1.1rem; }
.k-recipe strong {
  font-family: var(--k-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  color: #a8250b;
}
.k-recipe ul, .k-recipe ol { margin: 0 0 1.1rem; padding-left: 1.3rem; }
.k-recipe li { margin-bottom: 0.45rem; }
.k-recipe h2, .k-recipe h3 {
  font-family: var(--k-display); font-weight: 800; text-transform: uppercase;
  margin: 1.7rem 0 0.6rem; font-size: 1.05rem; letter-spacing: -0.01em;
}
.k-recipe a { color: #a8250b; }

/* her voice, at the end — the only place on the page that stops shouting */
.k-notes {
  padding-left: 1.3rem;
  border-left: 3px solid var(--k-hot);
  white-space: pre-line;
  font-family: var(--k-serif);
  font-size: 1.16rem;
  line-height: 1.65;
  color: var(--k-text);
}

.k-back {
  display: inline-block;
  margin: 3rem 0 0;
  font-family: var(--k-mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--k-muted);
  text-decoration: none;
  border: 1px solid var(--k-rule);
  padding: 0.45rem 0.75rem;
}
.k-back:hover { color: var(--k-hot); border-color: var(--k-hot); }

@media (prefers-reduced-motion: reduce) {
  .k-tile, .k-tile img { transition: none; }
  .k-tile:nth-child(3n), .k-tile:nth-child(4n+1) { transform: none; }
}

/* a dish that is cooked but has no image yet — the gap between the pan and the
   model. "working" is what a kitchen says about a ticket already fired. */
.k-tile--working { border-style: dashed; border-color: #3d3325; }
.k-tile--working:hover { border-style: solid; }
.k-working {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--k-mono);
  font-size: 0.68rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--k-muted);
  opacity: 0.55;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,0.018) 0 8px, transparent 8px 16px);
}
.k-tile--working:hover .k-working { color: var(--k-hot); opacity: 0.9; }

/* A note from a crew member — not the Captain. Her table notes are serif and
   warm; this is mono and cooler, and it is signed, so the two voices can never
   be mistaken for each other. */
.k-crew-note {
  padding: 1.1rem 1.25rem;
  border: 1px dashed var(--k-rule);
  border-left: 3px solid var(--k-acid);
  background: rgba(0,230,195,0.035);
  font-family: var(--k-mono);
  font-size: 0.86rem;
  line-height: 1.75;
  white-space: pre-line;
  color: var(--k-text);
}
.k-crew-note .k-sig {
  margin: 0.9rem 0 0;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--k-acid);
  white-space: normal;
}

/* ---------- sharing ---------- */

.k-share { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 2.6rem 0 0; }

.k-btn {
  display: block;
  text-align: left;
  padding: 0.6rem 0.9rem;
  background: var(--k-panel);
  border: 1px solid var(--k-rule);
  color: var(--k-text);
  font-family: var(--k-mono);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.k-btn small {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: none;
  color: var(--k-muted);
}
.k-btn:hover { border-color: var(--k-acid); color: var(--k-acid); }
.k-btn:hover small { color: var(--k-acid); }
.k-btn--hot:hover { border-color: var(--k-hot); color: var(--k-hot); }
.k-btn--hot:hover small { color: var(--k-hot); }
.k-btn.is-done { border-color: var(--k-hot); color: var(--k-hot); }
.k-btn.is-done small { color: var(--k-hot); }