/* Still Learning to Cook — the kitchen's "paper cutout" room.
   The sitewide navy header and footer stay. Everything inside main.kitchen is bright and flat.
   One deliberate light look (the kitchen wall), so no dark variant. Buttons use Mike's gold. */
.kitchen {
  --chalk: #f0f6ff; --frost: #e1edff; --paper: #ffffff; --ink: #111118; --ink-soft: #4a4f5c;
  --red: #ff4141; --yellow: #ffda00; --sky: #91d8ec; --pink: #ffbac4; --green: #16ab59;
  --k-gold: #D4AF37; --k-gold-dark: #8C6D1F; --k-navy: #0A192F;
  --k-serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --k-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --k-mono: 'Martian Mono', ui-monospace, Menlo, Consolas, monospace;
  color-scheme: light;
  background: var(--chalk); color: var(--ink);
  font-family: var(--k-sans); line-height: 1.5;
}
.kitchen ::selection { background: var(--yellow); color: var(--ink); }
.kitchen :focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.kitchen h1, .kitchen h2, .kitchen h3 { font-family: var(--k-serif); font-weight: 400; color: var(--ink); text-wrap: balance; margin: 0; }
.kitchen .wrap { max-width: 1120px; margin: 0 auto; padding-inline: 20px; }

/* Hero */
.k-hero { position: relative; overflow: hidden; }
.k-shape { position: absolute; z-index: 0; pointer-events: none; }
.k-hero .wrap { position: relative; z-index: 1; padding-block: 72px 60px; }
.k-hero.center .wrap { text-align: center; max-width: 820px; }
.k-badge { display: inline-flex; align-items: center; gap: 8px; background: var(--paper); border: 1px solid var(--frost); border-radius: 999px; padding: 6px 14px; font-family: var(--k-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; box-shadow: 0 2px 0 0 var(--ink); color: var(--ink); text-decoration: none; }
.k-badge i { width: 10px; height: 10px; border-radius: 50%; background: var(--green); }
.k-hero h1 { font-size: clamp(2.4rem, 6.5vw, 5rem); line-height: 1; letter-spacing: -.035em; margin-top: 22px; }
.k-hero:not(.center) h1 { max-width: 17ch; }
.k-hero h1 small { display: block; font-style: italic; font-size: .42em; letter-spacing: -.01em; margin-top: 12px; color: var(--ink-soft); }
.k-lede { font-size: clamp(1.05rem, 2vw, 1.22rem); max-width: 56ch; margin: 20px 0 0; color: var(--ink); }
.k-hero.center .k-lede { margin-inline: auto; }
.k-credit { margin-top: 12px; font-family: var(--k-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); }

/* Buttons: pill shape, Mike's gold, sticker shadow */
.k-btns { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 28px; }
.k-hero.center .k-btns { justify-content: center; }
.k-btn { border-radius: 48px; padding: 12px 22px; font: 500 1rem/1.2 var(--k-sans); text-decoration: none; display: inline-flex; gap: 8px; align-items: center; border: 0; cursor: pointer; transition: transform .12s ease, box-shadow .12s ease; }
.k-btn.gold { background: var(--k-gold); color: var(--k-navy); box-shadow: 0 4px 0 0 var(--k-gold-dark); }
.k-btn.ink { background: var(--ink); color: #fff; box-shadow: 0 4px 0 0 var(--k-gold); }
@media (hover: hover) and (pointer: fine) { .k-btn:hover { transform: translateY(-1px); } }
.k-btn:active { transform: translateY(4px); box-shadow: none; }

/* Sections */
.k-sec { padding-block: 56px; }
.k-kicker { font-family: var(--k-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft); margin: 0 0 8px; }
.k-sec h2 { font-size: clamp(1.8rem, 4vw, 2.5rem); letter-spacing: -.025em; line-height: 1.05; }
.k-head { margin-bottom: 28px; }

/* Recipe index cards */
.k-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 20px; }
.k-grid:not(.solo) .k-art { aspect-ratio: 16 / 9; }
.k-grid.solo { grid-template-columns: 1fr; }
.k-card { background: var(--paper); border: 1px solid var(--frost); border-radius: 24px; padding: 18px; box-shadow: 0 3px 0 0 var(--ink); display: grid; gap: 16px; color: var(--ink); text-decoration: none; transition: transform .15s ease, box-shadow .15s ease; min-width: 0; align-content: start; }
@media (hover: hover) and (pointer: fine) { .k-card:hover { transform: translateY(-2px); box-shadow: 0 5px 0 0 var(--ink); } }
.k-grid.solo .k-card { grid-template-columns: minmax(0, 340px) minmax(0, 1fr); align-items: center; gap: 28px; padding: 22px; }
@media (max-width: 700px) { .k-grid.solo .k-card { grid-template-columns: 1fr; } }
.k-art { aspect-ratio: 4 / 3; max-width: 100%; border-radius: 16px; position: relative; overflow: hidden; }
.k-art svg { position: absolute; }
.k-card h3 { font-size: clamp(1.4rem, 2.6vw, 2rem); letter-spacing: -.02em; line-height: 1.1; }
.k-card p { margin: 0; }
.k-meta { font-family: var(--k-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .03em; color: var(--ink-soft); display: flex; gap: 6px 14px; flex-wrap: wrap; }
.k-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.k-tag { font-family: var(--k-mono); font-size: 10px; text-transform: uppercase; background: var(--frost); border-radius: 999px; padding: 4px 10px; }
.k-card .go { font-weight: 500; }

/* Recipe page: stat strip */
.k-facts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.k-fact { background: var(--paper); border-radius: 16px; padding: 10px 16px; box-shadow: 0 2px 0 0 var(--ink); display: grid; gap: 2px; min-width: 92px; }
.k-fact b { font: 400 1.6rem/1.1 var(--k-serif); font-variant-numeric: tabular-nums; }
.k-fact span { font-family: var(--k-mono); font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); }
.k-fact.hi { background: var(--yellow); }
.k-facts-note { width: 100%; font-size: .85rem; color: var(--ink-soft); margin: 4px 0 0; }

/* Recipe page: two-column body */
.k-body { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px; align-items: start; }
@media (max-width: 860px) { .k-body { grid-template-columns: 1fr; } }
.k-panel { background: var(--paper); border: 1px solid var(--frost); border-radius: 24px; padding: 24px; box-shadow: 0 3px 0 0 var(--ink); min-width: 0; }
.k-panel h2 { font-size: 1.8rem; }
.k-panel h3 { font-size: 1.15rem; margin-top: 22px; }
.k-checks { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 8px; }
.k-checks label { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; cursor: pointer; }
.k-checks input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--green); }
.k-checks input:checked + span { text-decoration: line-through; color: var(--ink-soft); }

.k-steps { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 14px; counter-reset: step; }
.k-steps li { display: grid; grid-template-columns: 36px 1fr; gap: 14px; align-items: start; }
.k-steps .n { font-family: var(--k-mono); font-size: 13px; background: var(--ink); color: #fff; border-radius: 999px; width: 32px; height: 32px; display: grid; place-items: center; }
.k-steps b { display: block; font-weight: 500; }
.k-steps p { margin: 2px 0 0; }

.k-cards2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 14px; }
.k-note { background: var(--paper); border-radius: 16px; padding: 16px 18px; box-shadow: 0 2px 0 0 var(--ink); }
.k-note b { display: block; font-family: var(--k-serif); font-weight: 400; font-size: 1.2rem; }
.k-note p { margin: 4px 0 0; }

.k-band { background: var(--yellow); }
.k-band .k-note { background: var(--paper); }

.k-grocery { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: 14px; }
.k-grocery .k-panel { padding: 18px 20px; }
.k-grocery h3 { font-family: var(--k-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; margin: 0; color: var(--ink-soft); }

.k-back { padding-block: 0 64px; }

@media print {
  .site-header, footer, .k-shape, .k-btns, .k-back, #drawer-scrim, #mobile-drawer { display: none !important; }
  .kitchen { background: #fff; }
  .k-panel, .k-note, .k-fact, .k-card { box-shadow: none; border: 1px solid #ccc; }
  .k-band { background: #fff; }
  .k-sec { padding-block: 16px; }
}
.k-grid:not(.solo) .k-card h3 { font-size: clamp(1.3rem, 2vw, 1.6rem); }
.k-art.photo { background: var(--frost); }
.k-art.photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.k-photo .wrap { padding-block: 0 8px; }
.k-photo img { display: block; width: 100%; max-width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 24px; border: 1px solid var(--frost); box-shadow: 0 3px 0 0 var(--ink); }

/* Recipe filter chips */
.k-card[hidden] { display: none; }
.k-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: -8px 0 24px; }
.k-chip { font: 500 .95rem/1.2 var(--k-sans); color: var(--ink); background: var(--paper); border: 1px solid var(--frost); border-radius: 999px; padding: 8px 14px; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; box-shadow: 0 2px 0 0 var(--ink); transition: transform .12s ease, box-shadow .12s ease, background .12s ease; }
@media (hover: hover) and (pointer: fine) { .k-chip:hover { transform: translateY(-1px); box-shadow: 0 3px 0 0 var(--ink); } }
.k-chip:active { transform: translateY(2px); box-shadow: none; }
.k-chip small { font-family: var(--k-mono); font-size: 10px; background: var(--frost); border-radius: 999px; padding: 2px 7px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.k-chip[aria-pressed="true"] { background: var(--k-gold); border-color: var(--k-gold); color: var(--k-navy); box-shadow: 0 3px 0 0 var(--k-gold-dark); }
.k-chip[aria-pressed="true"] small { background: rgba(255,255,255,.55); color: var(--k-navy); }
.k-count { font-family: var(--k-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); margin-left: auto; }
.k-tag.on { background: var(--yellow); }
@media (max-width: 560px) { .k-count { margin-left: 0; width: 100%; } }
@media print { .k-filters { display: none; } }

/* Coach's note on a recipe page: a small paper note in Mike's words */
.k-coach { margin: 22px 0 0; max-width: 46ch; background: var(--paper); border: 1px solid var(--frost); border-radius: 16px; padding: 14px 18px; box-shadow: 0 3px 0 0 var(--ink); transform: rotate(-1deg); display: grid; gap: 6px; }
.k-coach blockquote { margin: 0; font: italic 400 1.15rem/1.4 var(--k-serif); color: var(--ink); }
.k-coach figcaption { font-family: var(--k-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--k-gold-dark); }
@media (prefers-reduced-motion: reduce) { .k-coach { transform: none; } }
@media print { .k-coach { transform: none; box-shadow: none; } }

/* Recipe story: optional story: ['…'] in data/recipes.js, Mike's words. */
.k-story { margin-top: 20px; max-width: 62ch; display: grid; gap: 10px; }
.k-story p { margin: 0; }

/* Team-dinner snapshot under the hero (Mike approved Oct 20). A taped photo, tilted a touch. */
.k-snap { margin: 36px auto 0; max-width: 300px; background: #fff; padding: 10px 10px 14px; box-shadow: 4px 4px 0 var(--ink, #0A192F); transform: rotate(-2deg); }
.k-snap img { display: block; width: 100%; height: auto; }
.k-snap figcaption { margin-top: 8px; font-size: .9rem; color: var(--ink-soft, #4A5363); }

/* Small "AI image" tag on AI-made recipe photos (rules/legal.md, Mike Oct 27: very small) */
.k-photo-box { position: relative; }
.k-ai { position: absolute; right: 8px; bottom: 8px; padding: 1px 5px; border-radius: 4px; background: rgba(10, 25, 47, .55); color: #fff;
  font-family: var(--k-mono); font-size: 9px; line-height: 1.4; letter-spacing: .04em; text-transform: uppercase; pointer-events: none; }
.k-photo .k-ai { right: 12px; bottom: 16px; }