/* ==========================================================================
   Don't Cook That — dontcookthat.com
   Design system v1 · 2026-08-21
   Deliberately NOT the house parchment/serif look. Bright, rounded, modern.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Surfaces */
  --cream:      #FFF6EC;   /* page background — warm, not clinical white */
  --cream-deep: #FFEEDD;   /* alternating band */
  --card:       #FFFFFF;
  --paper:      #FDF3E0;   /* the "period text" card — the only nod to the archive */

  /* Ink */
  --ink:        #221A2E;   /* deep plum-black. Never use pure #000 */
  --ink-soft:   #6B6280;
  --ink-faint:  #A79FB8;

  /* Brand */
  --tomato:     #FF4438;   /* the "DON'T". Primary action + alarm */
  --tomato-dk:  #D62A20;
  --yolk:       #FFC93C;
  --mint:       #16C7A8;
  --grape:      #7C5CFC;
  --bubblegum:  #FF6FA5;
  --sky:        #4CC3FF;

  /* Hazard families (chips, card tops, filter pills) */
  --haz-poison: var(--grape);      /* Poison Pantry     — DANGEROUS      */
  --haz-gross:  var(--mint);       /* Frankly Gross     — GROSS          */
  --haz-science:var(--sky);        /* Bad Science       — UNSAFE_METHOD  */
  --haz-doctor: var(--bubblegum);  /* Doctor's Orders   — QUACK_MEDICAL  */
  --haz-weird:  var(--yolk);       /* Just Plain Weird  — OUTDATED_FUN   */

  /* Type */
  --display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --ui: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --period: 'Iowan Old Style', 'Hoefler Text', Georgia, serif;

  /* Shape */
  --r-sm: 10px;
  --r:    18px;
  --r-lg: 28px;
  --r-xl: 40px;

  /* Elevation — soft and warm, never grey */
  --lift-1: 0 2px 6px rgba(34,26,46,.06);
  --lift-2: 0 8px 20px rgba(34,26,46,.09);
  --lift-3: 0 16px 40px rgba(34,26,46,.13);

  /* Rhythm */
  --gut: clamp(1.25rem, 4vw, 2.5rem);
  --maxw: 1140px;
}

/* Display face gets the playful axes; body face stays neutral. */
.fr, h1, h2, h3, .wordmark, .display {
  font-variation-settings: 'SOFT' 40, 'WONK' 1, 'opsz' 90;
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--ui);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.02em;
  margin: 0 0 .5em;
}
h1 { font-size: clamp(2.6rem, 6.5vw, 4.6rem); }
h2 { font-size: clamp(1.9rem, 4vw, 2.9rem); }
h3 { font-size: clamp(1.25rem, 2.2vw, 1.6rem); letter-spacing: -0.015em; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--tomato-dk); text-underline-offset: 3px; text-decoration-thickness: 2px; }
a:hover { color: var(--tomato); }

img { max-width: 100%; display: block; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gut); }
.wrap-narrow { max-width: 760px; margin: 0 auto; padding: 0 var(--gut); }

.skip {
  position: absolute; left: -9999px; top: 0; background: var(--ink); color: #fff;
  padding: .7rem 1.1rem; border-radius: 0 0 var(--r-sm) 0; z-index: 99;
}
.skip:focus { left: 0; }

:focus-visible {
  outline: 3px solid var(--grape);
  outline-offset: 3px;
  border-radius: 4px;
}

/* --------------------------------------------------------------------------
   3. Masthead
   -------------------------------------------------------------------------- */
.masthead {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255,246,236,.88);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 2px solid rgba(34,26,46,.07);
}
.masthead-in {
  max-width: var(--maxw); margin: 0 auto; padding: .7rem var(--gut);
  display: flex; align-items: center; gap: 1.4rem;
}

/* Wordmark: DON'T sits in a red blob, the rest is plain ink. */
.wordmark {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--display); font-weight: 900;
  font-size: 1.35rem; letter-spacing: -0.03em;
  color: var(--ink); text-decoration: none; white-space: nowrap;
}
.wordmark .mark { width: 30px; height: 30px; flex: none; }
.wordmark .dont {
  background: var(--tomato); color: #fff;
  padding: .05em .38em .12em; border-radius: 8px;
  transform: rotate(-2.5deg); display: inline-block;
}
.wordmark:hover .dont { transform: rotate(-2.5deg) scale(1.04); }
.wordmark .dont, .wordmark:hover { transition: transform .18s ease; }

.masthead nav { margin-left: auto; display: flex; align-items: center; gap: .3rem; }
.masthead nav a {
  font-weight: 700; font-size: .95rem; color: var(--ink);
  text-decoration: none; padding: .45rem .8rem; border-radius: 999px;
}
.masthead nav a:hover { background: rgba(124,92,252,.12); color: var(--ink); }
.masthead nav a[aria-current="page"] { background: var(--ink); color: var(--cream); }

/* Mobile menu. details/summary so it works with JS off. */
.navmenu { display: none; margin-left: auto; position: relative; }
.navmenu > summary {
  list-style: none; cursor: pointer; line-height: 1; font-size: 1.3rem;
  padding: .45rem .7rem; border-radius: 12px; background: var(--ink); color: var(--cream);
}
.navmenu > summary::-webkit-details-marker { display: none; }
.navmenu[open] > summary { background: var(--tomato); }
.navmenu-panel {
  position: absolute; right: 0; top: calc(100% + .55rem); min-width: 200px;
  background: var(--card); border-radius: var(--r); box-shadow: var(--lift-3);
  padding: .45rem; display: flex; flex-direction: column;
}
.navmenu-panel a {
  padding: .62rem .85rem; border-radius: 11px; font-weight: 700;
  color: var(--ink); text-decoration: none;
}
.navmenu-panel a:hover { background: rgba(124,92,252,.12); }
.navmenu-panel a[aria-current="page"] { background: var(--ink); color: var(--cream); }

/* --------------------------------------------------------------------------
   4. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--ui); font-weight: 800; font-size: 1rem;
  padding: .78rem 1.5rem; border-radius: 999px;
  text-decoration: none; border: 2px solid transparent; cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn-primary { background: var(--tomato); color: #fff !important; box-shadow: var(--lift-2); }
.btn-primary:hover { background: var(--tomato-dk); transform: translateY(-2px); box-shadow: var(--lift-3); }
.btn-ghost { background: transparent; color: var(--ink) !important; border-color: rgba(34,26,46,.22); }
.btn-ghost:hover { background: var(--ink); color: var(--cream) !important; border-color: var(--ink); }
.btn-sm { padding: .5rem 1rem; font-size: .9rem; }

/* --------------------------------------------------------------------------
   5. Hazard chips
   -------------------------------------------------------------------------- */
.chip {
  display: inline-flex; align-items: center; gap: .38rem;
  font-family: var(--ui); font-weight: 800; font-size: .74rem;
  letter-spacing: .06em; text-transform: uppercase;
  padding: .32rem .72rem; border-radius: 999px;
  color: var(--ink); background: var(--chip, var(--yolk));
  text-decoration: none; white-space: nowrap;
}
a.chip:hover { filter: brightness(.94); color: var(--ink); }
.chip--poison  { --chip: var(--haz-poison); color: #fff; }
.chip--gross   { --chip: var(--haz-gross); }
.chip--science { --chip: var(--haz-science); }
.chip--doctor  { --chip: var(--haz-doctor); }
.chip--weird   { --chip: var(--haz-weird); }
/* Outline variant for the filter bar */
.chip--out {
  background: transparent; border: 2px solid var(--chip); color: var(--ink);
  padding: .3rem .7rem;
}
.chip--out[aria-pressed="true"] { background: var(--chip); }
/* Any chip whose fill is dark needs light text once it's pressed. */
.chip--out.chip--poison[aria-pressed="true"],
.chip--out.chip--ondark[aria-pressed="true"] { color: #fff; }

/* --------------------------------------------------------------------------
   6. The Yikes Scale — the site's signature rating device
   -------------------------------------------------------------------------- */
.yikes {
  display: inline-flex; align-items: center; gap: .45rem;
  font-weight: 800; font-size: .8rem; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink-soft);
}
.yikes-dots { display: inline-flex; gap: 3px; }
.yikes-dots span {
  width: 15px; height: 15px; border-radius: 50%;
  background: rgba(34,26,46,.12);
}
.yikes-dots span.on { background: var(--tomato); }
.yikes[data-level="1"] .yikes-dots span.on { background: var(--yolk); }
.yikes[data-level="2"] .yikes-dots span.on { background: var(--yolk); }
.yikes[data-level="3"] .yikes-dots span.on { background: #FF8A3D; }

/* --------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */
.hero { padding: clamp(2.5rem, 7vw, 5rem) 0 clamp(2rem, 5vw, 3.5rem); position: relative; overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.hero h1 { margin-bottom: .35em; }
.hero h1 .hl {
  background: linear-gradient(180deg, transparent 58%, var(--yolk) 58%, var(--yolk) 94%, transparent 94%);
  padding: 0 .06em;
}
.hero-lede { font-size: clamp(1.1rem, 1.7vw, 1.3rem); color: var(--ink-soft); max-width: 34ch; }
.hero-cta { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.6rem; }
.hero-stat { display: flex; gap: 2rem; margin-top: 2.2rem; flex-wrap: wrap; }
.hero-stat b { font-family: var(--display); font-size: 1.9rem; display: block; line-height: 1; }
.hero-stat span { font-size: .82rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }

/* Featured card, slightly tilted like a sticker */
.hero-card { transform: rotate(1.6deg); }
.hero-card:hover { transform: rotate(0deg); }

/* One soft disc sitting behind the featured card. Reads as intentional; two did not. */
.blob { position: absolute; border-radius: 50%; filter: blur(8px); z-index: -1; }
.blob-a { width: 380px; height: 380px; background: var(--yolk); opacity: .38; top: 70px; right: -40px; }

/* --------------------------------------------------------------------------
   8. Recipe cards
   -------------------------------------------------------------------------- */
.card-grid {
  display: grid; gap: 1.4rem;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
}
.rcard {
  background: var(--card); border-radius: var(--r-lg);
  box-shadow: var(--lift-1); text-decoration: none; color: var(--ink);
  display: flex; flex-direction: column; overflow: hidden;
  border: 2px solid rgba(34,26,46,.06);
  transition: transform .18s ease, box-shadow .18s ease;
}
.rcard:hover { transform: translateY(-4px); box-shadow: var(--lift-3); color: var(--ink); }
.rcard-top {
  height: 8px; background: var(--haz-weird);
}
.rcard--poison  .rcard-top { background: var(--haz-poison); }
.rcard--gross   .rcard-top { background: var(--haz-gross); }
.rcard--science .rcard-top { background: var(--haz-science); }
.rcard--doctor  .rcard-top { background: var(--haz-doctor); }
.rcard-body { padding: 1.25rem 1.35rem 1.4rem; display: flex; flex-direction: column; gap: .65rem; flex: 1; }
.rcard h3 { margin: 0; }
.rcard p { font-size: .95rem; color: var(--ink-soft); margin: 0; }
.rcard-foot {
  margin-top: auto; padding-top: .9rem; display: flex; align-items: center;
  justify-content: space-between; gap: .8rem; flex-wrap: wrap;
  border-top: 2px dotted rgba(34,26,46,.1);
}
.rcard-src { font-size: .78rem; color: var(--ink-faint); font-weight: 700; }

/* Big featured variant */
.rcard--feature { border-radius: var(--r-xl); box-shadow: var(--lift-3); }
.rcard--feature .rcard-top { height: 12px; }
.rcard--feature .rcard-body { padding: 1.8rem 1.9rem 2rem; }
.rcard--feature h3 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
.kicker {
  font-size: .74rem; font-weight: 900; letter-spacing: .12em;
  text-transform: uppercase; color: var(--tomato);
}

/* --------------------------------------------------------------------------
   9. Bands & section headers
   -------------------------------------------------------------------------- */
.band { padding: clamp(2.5rem, 6vw, 4.5rem) 0; }
.band--tint { background: var(--cream-deep); }
.band--ink { background: var(--ink); color: var(--cream); }
.band--ink h2, .band--ink h3 { color: var(--cream); }
.band--ink a { color: var(--yolk); }

.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.8rem; }
.sec-head h2 { margin: 0; }
.sec-head p { color: var(--ink-soft); margin: .3rem 0 0; max-width: 52ch; }

/* Wavy divider between bands */
.wave { display: block; width: 100%; height: 46px; }

/* --------------------------------------------------------------------------
   10. Category tiles
   -------------------------------------------------------------------------- */
/* 185px keeps all five hazard tiles on one row at max-width; 200px orphaned the fifth. */
.cat-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(185px, 1fr)); }
.cat {
  border-radius: var(--r-lg); padding: 1.4rem 1.3rem 1.5rem; text-decoration: none; color: var(--ink);
  background: var(--tint); display: flex; flex-direction: column; gap: .35rem; min-height: 158px;
  transition: transform .18s ease;
}
.cat:hover { transform: translateY(-4px) rotate(-1deg); color: var(--ink); }
.cat .emoji { font-size: 1.8rem; line-height: 1; }
.cat h3 { margin: .2rem 0 0; font-size: 1.22rem; }
.cat span { font-size: .86rem; font-weight: 700; color: rgba(34,26,46,.6); margin-top: auto; }
.cat--poison  { --tint: #E9E2FF; }
.cat--gross   { --tint: #D6F7F0; }
.cat--science { --tint: #DCF1FF; }
.cat--doctor  { --tint: #FFE2ED; }
.cat--weird   { --tint: #FFF0C9; }

/* --------------------------------------------------------------------------
   11. Recipe detail page
   -------------------------------------------------------------------------- */
.crumbs { font-size: .85rem; font-weight: 700; color: var(--ink-soft); padding: 1.4rem 0 0; }
.crumbs a { color: var(--ink-soft); text-decoration: none; }
.crumbs a:hover { color: var(--tomato); text-decoration: underline; }

.rec-head { padding: 1rem 0 2rem; }
.rec-head .chips { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1rem; }
.rec-head h1 { max-width: 18ch; }
.rec-dek { font-size: 1.22rem; color: var(--ink-soft); max-width: 46ch; }

.rec-meta {
  display: flex; gap: 1.6rem; flex-wrap: wrap; align-items: center;
  padding: 1rem 1.3rem; background: var(--card); border-radius: var(--r);
  box-shadow: var(--lift-1); margin-top: 1.6rem;
}
.rec-meta div { font-size: .9rem; }
.rec-meta dt { font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); }
.rec-meta dd { margin: .1rem 0 0; font-weight: 700; }

/* Two-column body: period text left, modern commentary right */
.rec-cols { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(1.5rem, 3vw, 2.5rem); align-items: start; }

/* The period text card — the ONE place we let the old house style show */
.period {
  background: var(--paper); border-radius: var(--r-lg); padding: 1.8rem 1.9rem;
  box-shadow: var(--lift-2); border: 1px solid rgba(34,26,46,.08);
  font-family: var(--period); font-size: 1.05rem; line-height: 1.7;
}
.period h2 {
  font-family: var(--ui); font-size: .76rem; font-weight: 900; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-faint); margin-bottom: 1rem;
}
.period .rule { border: 0; border-top: 2px solid rgba(34,26,46,.12); margin: 1.2rem 0; }
.period .cite { font-family: var(--ui); font-size: .84rem; color: var(--ink-soft); }

/* The modern "do not" note */
.dont-note {
  background: #FFE9E7; border-radius: var(--r-lg); padding: 1.6rem 1.7rem;
  border-left: 8px solid var(--tomato);
}
.dont-note h2 {
  font-family: var(--display); font-size: 1.45rem; margin-bottom: .5rem; color: var(--tomato-dk);
}
.dont-note p { font-size: 1rem; }

.factbox {
  background: var(--card); border-radius: var(--r-lg); padding: 1.4rem 1.5rem;
  box-shadow: var(--lift-1); margin-top: 1.2rem;
}
.factbox h3 { font-size: 1.1rem; }
.factbox ul { margin: 0; padding-left: 1.1rem; }
.factbox li { margin-bottom: .45rem; font-size: .95rem; }

/* Source strip — credibility. Always links back to the full book. */
.source-strip {
  display: flex; gap: 1rem; align-items: center; flex-wrap: wrap;
  background: var(--ink); color: var(--cream); border-radius: var(--r-lg);
  padding: 1.2rem 1.5rem; margin-top: 2.5rem;
}
.source-strip p { margin: 0; font-size: .95rem; }
.source-strip strong { color: #fff; }
.source-strip .btn { margin-left: auto; }
.source-strip .btn-ghost { color: var(--cream) !important; border-color: rgba(255,246,236,.4); }
.source-strip .btn-ghost:hover { background: var(--cream); color: var(--ink) !important; }

/* --------------------------------------------------------------------------
   11b. List pages (/15-recipes-you-should-never-cook)
   -------------------------------------------------------------------------- */
.lentries { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.lentry { border-top: 2px solid var(--cream-deep); padding: 1.9rem 0 1.6rem; }
.lentry:first-child { border-top: 0; }
.lentry-head { display: flex; gap: .9rem; align-items: baseline; }
.lentry-head h2 { margin: 0; font-size: clamp(1.35rem, 3.2vw, 1.75rem); line-height: 1.2; }
.lnum {
  font-family: var(--display); font-weight: 900; font-size: 1.5rem;
  color: var(--tomato); line-height: 1; flex: none; min-width: 1.7rem;
  font-variant-numeric: tabular-nums;
}
.lentry > p { margin: .85rem 0 0; font-size: 1.05rem; }

/* The attribution strip under each entry. It is the link to the recipe, so the
   whole row is the target, not just the arrow. */
/* Two fixed rows, not a wrapping flex row. Book titles here run from "Fruit Recipes"
   to "Household Discoveries and Mrs. Curtis's Cook Book", and letting the row wrap on
   its own put the strip at two lines for some entries and three for others, all the
   way down the page. Row 1 is the rating, row 2 is the book and the way in. */
.lsource {
  display: grid; grid-template-columns: 1fr auto; gap: .45rem .9rem; align-items: center;
  margin-top: 1.1rem; padding: .8rem .95rem;
  background: var(--card); border-radius: var(--r-lg); box-shadow: var(--lift-1);
  text-decoration: none; color: inherit;
}
.lsource:hover { box-shadow: var(--lift-2); }
.lsource-meta {
  grid-column: 1 / -1;
  display: flex; gap: .55rem .7rem; align-items: center; flex-wrap: wrap;
}
.lsource-book {
  grid-column: 1; min-width: 0;
  font-family: var(--display); font-style: italic; color: var(--ink-soft); font-size: .95rem;
}
.lsource-go {
  grid-column: 2; justify-self: end;
  font-weight: 800; color: var(--tomato); font-size: .92rem; white-space: nowrap;
}
@media (max-width: 520px) {
  .lsource { grid-template-columns: 1fr; }
  .lsource-go { grid-column: 1; justify-self: start; }
}

/* --------------------------------------------------------------------------
   12. Browse page
   -------------------------------------------------------------------------- */
.filterbar {
  display: flex; gap: .6rem; flex-wrap: wrap; align-items: center;
  padding: 1rem 1.2rem; background: var(--card); border-radius: var(--r);
  box-shadow: var(--lift-1); margin-bottom: 2rem;
}
.filterbar .label {
  font-size: .74rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-faint); margin-right: .3rem;
}

/* --------------------------------------------------------------------------
   13. Newsletter
   -------------------------------------------------------------------------- */
.signup { display: grid; grid-template-columns: 1.1fr .9fr; gap: 2rem; align-items: center; }
.signup form { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1rem; }
.signup input[type="email"] {
  flex: 1 1 240px; font-family: var(--ui); font-size: 1rem;
  padding: .78rem 1.1rem; border-radius: 999px; border: 2px solid rgba(255,246,236,.25);
  background: rgba(255,246,236,.08); color: var(--cream);
}
.signup input::placeholder { color: rgba(255,246,236,.5); }
.signup .fineprint { font-size: .82rem; color: rgba(255,246,236,.55); margin-top: .8rem; }

/* --------------------------------------------------------------------------
   14. Footer
   -------------------------------------------------------------------------- */
.foot { background: var(--cream-deep); padding: 3rem 0 2.2rem; margin-top: 0; }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2rem; }
.foot h4 { font-family: var(--ui); font-size: .76rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); }
.foot ul { list-style: none; padding: 0; margin: 0; }
.foot li { margin-bottom: .45rem; }
.foot a { color: var(--ink); text-decoration: none; font-size: .95rem; font-weight: 600; }
.foot a:hover { color: var(--tomato); text-decoration: underline; }
.foot-legal {
  margin-top: 2.5rem; padding-top: 1.4rem; border-top: 2px solid rgba(34,26,46,.1);
  font-size: .84rem; color: var(--ink-soft); display: flex; gap: 1rem; justify-content: space-between; flex-wrap: wrap;
}

/* The safety line is a real legal need — style it so it reads, not hides. */
.safety-line {
  background: var(--ink); color: var(--cream); text-align: center;
  font-size: .85rem; font-weight: 700; padding: .6rem 1rem;
}
.safety-line span { color: var(--yolk); }

/* --------------------------------------------------------------------------
   15. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .hero-grid, .rec-cols, .signup { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .hero-card { transform: none; }
}
@media (max-width: 620px) {
  body { font-size: 16px; }
  .masthead nav { display: none; }
  .navmenu { display: block; }
  .foot-grid { grid-template-columns: 1fr; }
  .source-strip .btn { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}