/* ==========================================================================
   cooking.ito.com — "The Kitchen Ledger"
   Warm ink-on-paper editorial system. Fraunces (display) + Newsreader (text).
   Single self-contained stylesheet: tokens, reset, legacy grid shim,
   chrome, and per-surface components. Replaces the old foundation.css /
   joi.css / simply.css / cooking.css stack.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* paper + ink — cool airy white with deep blue-slate ink */
  --paper:        #f7fafc;
  --paper-high:   #ffffff;   /* raised cards */
  --paper-deep:   #e8f1f7;   /* wells, ingredient card */
  --ink:          #16303f;
  --ink-soft:     #47637a;
  --ink-faint:    #7d94a6;

  /* brand — the site's sky blue, plus the logo's marker orange */
  --accent:      #0e6ba8;
  --accent-deep: #094e7e;
  --tangerine:   #e87511;   /* "Cooking" orange from the logo */
  --butter:      #e9a832;   /* rating stars */

  /* header sky band, inherited from the original design */
  --sky-a: #ffffff;
  --sky-b: #cfe6f3;
  --sky-c: #7db9dc;

  /* lines */
  --rule:      #c9dae6;
  --rule-soft: #dfeaf2;

  /* type */
  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-text:    "Newsreader", "Iowan Old Style", Georgia, serif;

  /* rhythm */
  --wrap: 1200px;
  --measure: 66ch;
  --radius: 10px;
  --radius-lg: 16px;
  --shadow-card: 0 1px 2px rgba(38, 34, 26, .07), 0 6px 24px -12px rgba(38, 34, 26, .28);
  --shadow-pop:  0 2px 4px rgba(38, 34, 26, .1), 0 18px 44px -16px rgba(38, 34, 26, .38);

  --speed: .22s;
  --ease: cubic-bezier(.33, 1, .5, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper:        #101c25;
    --paper-high:   #16242f;
    --paper-deep:   #0b141b;
    --ink:          #dbe8f1;
    --ink-soft:     #9cb4c5;
    --ink-faint:    #6a8294;
    --accent:      #5db2e8;
    --accent-deep: #8bcaf3;
    --tangerine:   #f5964a;
    --sky-a: #101c25;
    --sky-b: #14293a;
    --sky-c: #1c3f58;
    --rule:      #29404f;
    --rule-soft: #1f3340;
    --shadow-card: 0 1px 2px rgba(0, 0, 0, .4), 0 6px 24px -12px rgba(0, 0, 0, .7);
    --shadow-pop:  0 2px 4px rgba(0, 0, 0, .5), 0 18px 44px -16px rgba(0, 0, 0, .8);
  }
}

/* --------------------------------------------------------------------------
   2. RESET + BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 1.125rem;            /* 18px — recipes are read at arm's length */
  line-height: 1.65;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  position: relative;
}

/* paper grain */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 999;
  pointer-events: none;
  opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

img, video { max-width: 100%; height: auto; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 640;
  line-height: 1.12;
  margin: 1.6em 0 .5em;
  letter-spacing: -0.01em;
}
h1 { font-size: 2.6rem; }
h2 { font-size: 1.9rem; }
h3 { font-size: 1.45rem; }
h4 { font-size: 1.2rem; }
h5, h6 { font-size: 1rem; }

p, ul, ol { margin: 0 0 1em; }

a {
  color: var(--accent);
  text-decoration: none;
  transition: color var(--speed) var(--ease);
}
a:hover { color: var(--accent-deep); }

.content a,
.prose a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent);
  text-underline-offset: 3px;
}
.content a:hover, .prose a:hover { text-decoration-color: currentColor; }

hr {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 3rem 0 2.5rem;
}

blockquote {
  margin: 1.5em 0;
  padding: .2em 0 .2em 1.2em;
  border-left: 3px solid var(--accent);
  color: var(--ink-soft);
  font-style: italic;
}

table { border-collapse: collapse; margin: 1.5em 0; }
th, td { border: 1px solid var(--rule); padding: 6px 14px; text-align: left; }
th { font-family: var(--font-display); font-weight: 600; background: var(--paper-deep); }

pre {
  font: 14px/1.5 ui-monospace, Menlo, monospace;
  background: var(--paper-deep);
  border-radius: var(--radius);
  padding: 12px 16px;
  overflow-x: auto;
}

::selection { background: color-mix(in srgb, var(--accent) 24%, transparent); }

/* small-caps serif label — the ledger voice */
.eyebrow, .sup-head {
  font-family: var(--font-display);
  font-size: .78rem;
  font-weight: 620;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent);
}
.sup-head a { color: inherit; }

/* legacy hook: '.marker' once meant Permanent Marker. It now speaks
   in the house display italic instead of a felt-tip pen. */
.marker {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 620;
  letter-spacing: 0;
}

/* --------------------------------------------------------------------------
   3. LEGACY GRID SHIM
   The layouts historically used Foundation's row/columns grid. This is a
   minimal stand-in so any not-yet-rewritten template keeps its shape.
   -------------------------------------------------------------------------- */
.row {
  max-width: var(--wrap);
  margin: 0 auto;
  display: flex;
  flex-flow: row wrap;
  padding: 0 20px;
}
.row .row { padding: 0; margin: 0 -10px; max-width: none; }
.column, .columns { flex: 1 1 0; min-width: 0; padding: 0 10px; }

.small-1  { flex: 0 0 8.333%;  max-width: 8.333%; }
.small-2  { flex: 0 0 16.666%; max-width: 16.666%; }
.small-3  { flex: 0 0 25%;     max-width: 25%; }
.small-4  { flex: 0 0 33.333%; max-width: 33.333%; }
.small-5  { flex: 0 0 41.666%; max-width: 41.666%; }
.small-6  { flex: 0 0 50%;     max-width: 50%; }
.small-7  { flex: 0 0 58.333%; max-width: 58.333%; }
.small-8  { flex: 0 0 66.666%; max-width: 66.666%; }
.small-9  { flex: 0 0 75%;     max-width: 75%; }
.small-10 { flex: 0 0 83.333%; max-width: 83.333%; }
.small-11 { flex: 0 0 91.666%; max-width: 91.666%; }
.small-12 { flex: 0 0 100%;    max-width: 100%; }

@media (min-width: 40em) {
  .medium-1  { flex: 0 0 8.333%;  max-width: 8.333%; }
  .medium-2  { flex: 0 0 16.666%; max-width: 16.666%; }
  .medium-3  { flex: 0 0 25%;     max-width: 25%; }
  .medium-4  { flex: 0 0 33.333%; max-width: 33.333%; }
  .medium-5  { flex: 0 0 41.666%; max-width: 41.666%; }
  .medium-6  { flex: 0 0 50%;     max-width: 50%; }
  .medium-7  { flex: 0 0 58.333%; max-width: 58.333%; }
  .medium-8  { flex: 0 0 66.666%; max-width: 66.666%; }
  .medium-9  { flex: 0 0 75%;     max-width: 75%; }
  .medium-10 { flex: 0 0 83.333%; max-width: 83.333%; }
  .medium-12 { flex: 0 0 100%;    max-width: 100%; }
}
@media (min-width: 64em) {
  .large-1  { flex: 0 0 8.333%;  max-width: 8.333%; }
  .large-2  { flex: 0 0 16.666%; max-width: 16.666%; }
  .large-3  { flex: 0 0 25%;     max-width: 25%; }
  .large-4  { flex: 0 0 33.333%; max-width: 33.333%; }
  .large-5  { flex: 0 0 41.666%; max-width: 41.666%; }
  .large-6  { flex: 0 0 50%;     max-width: 50%; }
  .large-7  { flex: 0 0 58.333%; max-width: 58.333%; }
  .large-8  { flex: 0 0 66.666%; max-width: 66.666%; }
  .large-9  { flex: 0 0 75%;     max-width: 75%; }
  .large-10 { flex: 0 0 83.333%; max-width: 83.333%; }
  .large-12 { flex: 0 0 100%;    max-width: 100%; }
}
@media (max-width: 39.99em) {
  .columns[class*="large-"], .columns[class*="medium-"] { flex-basis: 100%; max-width: 100%; }
  .columns[class*="small-"]:not(.small-12) { }
}
.text-right { text-align: right; }
.is-hidden { display: none !important; }

/* --------------------------------------------------------------------------
   4. HEADER
   -------------------------------------------------------------------------- */
.site-header {
  border-bottom: 2px solid var(--ink);
  /* the sky band — a refined take on the original header gradient */
  background: linear-gradient(105deg, var(--sky-a) 34%, var(--sky-b) 68%, var(--sky-c) 100%);
  position: relative;
}
/* twin hairline under the ink rule — the ledger double rule */
.site-header::after {
  content: "";
  display: block;
  position: absolute;
  left: 0; right: 0; bottom: -5px;
  border-bottom: 1px solid var(--rule);
}

.site-header .bar {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 18px 20px 14px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.wordmark { display: block; line-height: 0; }
.wordmark img {
  width: 140px;
  height: auto;
  transition: transform var(--speed) var(--ease);
}
.wordmark:hover img { transform: scale(1.03); }
@media (max-width: 47.99em) {
  .wordmark img { width: 112px; }
}
@media (prefers-color-scheme: dark) {
  /* the logo is dark-on-light artwork; float it on a small light plate */
  .wordmark img {
    background: #f4f7fa;
    padding: 5px 9px;
    border-radius: var(--radius);
  }
}

/* nav */
.site-nav { margin-left: auto; }
.site-nav ul.menu {
  list-style: none;
  display: flex;
  gap: .25rem;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}
.site-nav a {
  display: block;
  font-family: var(--font-display);
  font-size: .86rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding: .45rem .65rem .35rem;
  border-bottom: 2px solid transparent;
  transition: color var(--speed) var(--ease), border-color var(--speed) var(--ease);
}
.site-nav a:hover { color: var(--accent); border-bottom-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.site-nav li.active a { color: var(--ink); border-bottom-color: var(--accent); }

/* mobile disclosure */
.nav-toggle-box { display: none; }
.nav-toggle {
  display: none;
  font-family: var(--font-display);
  font-size: .86rem;
  font-weight: 640;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink);
  border: 1px solid var(--rule);
  background: var(--paper-high);
  border-radius: 999px;
  padding: .45rem 1rem .4rem;
  cursor: pointer;
  user-select: none;
  align-self: center;
}
.nav-toggle::after { content: "☰"; margin-left: .5em; letter-spacing: 0; }

@media (max-width: 47.99em) {
  .site-header .bar { padding-block: 12px 10px; align-items: center; }
  .nav-toggle { display: inline-block; }
  .site-nav {
    flex-basis: 100%;
    display: grid;
    grid-template-rows: 0fr;
    overflow: hidden;
    transition: grid-template-rows .3s var(--ease);
  }
  .site-nav > ul.menu { min-height: 0; }
  .nav-toggle-box:checked ~ .site-nav { grid-template-rows: 1fr; }
  .nav-toggle-box:checked ~ .nav-toggle { color: var(--accent); border-color: var(--accent); }
  .nav-toggle-box:checked ~ .nav-toggle::after { content: "✕"; }
  .site-nav ul.menu {
    flex-direction: column;
    gap: 0;
    padding: .4rem 0 .6rem;
  }
  .site-nav a {
    font-size: 1rem;
    padding: .55rem .2rem;
    border-bottom: 1px solid var(--rule-soft);
  }
  .site-nav li:last-child a { border-bottom: none; }
  .site-nav li.active a { border-bottom-color: var(--rule-soft); }
}

/* --------------------------------------------------------------------------
   5. PAGE SCAFFOLD + HEADERS
   -------------------------------------------------------------------------- */
main.site-main { display: block; padding: 2.2rem 0 4rem; }

.page-header { margin: .8rem 0 1.6rem; }
.page-header .title,
.page-header h1 {
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 5.5vw, 3.4rem);
  font-weight: 760;
  letter-spacing: -.02em;
  line-height: 1.04;
  margin: .25rem 0 .4rem;
  text-wrap: balance;
}
.page-header .source {
  font-size: 1rem;
  color: var(--ink-soft);
  font-style: italic;
  margin: .3rem 0;
}
.sub-title { color: var(--ink-soft); font-size: .95rem; }

/* tag chips */
.tags a {
  display: inline-block;
  font-family: var(--font-display);
  font-size: .74rem;
  font-weight: 620;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: var(--paper-high);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: .18rem .7rem .12rem;
  margin: .15rem .25rem .15rem 0;
  transition: all var(--speed) var(--ease);
}
.tags a:hover {
  color: var(--paper-high);
  background: var(--accent);
  border-color: var(--accent);
  transform: translateY(-1px);
}

/* rating stars */
.stars-inline {
  color: var(--butter);
  letter-spacing: .1em;
  font-size: 1rem;
  -webkit-text-stroke: .5px color-mix(in srgb, var(--ink) 55%, transparent);
}

.content { max-width: none; }
.content > p, .content > ul, .content > ol, .prose > p { max-width: var(--measure); }

/* --------------------------------------------------------------------------
   6. RECIPE PAGE
   -------------------------------------------------------------------------- */
#recipe .page-header { margin-bottom: 1rem; }

/* hero */
#big-photo { margin-bottom: 2.2rem; }
#big-photo img {
  width: 100%;
  max-height: 58vh;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  animation: heroIn .7s var(--ease) both;
}
@keyframes heroIn {
  from { opacity: 0; transform: scale(1.015); }
  to   { opacity: 1; transform: none; }
}

/* body grid: prose left, rail right */
.recipe-body {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 20px;
  display: grid;
  gap: 0 3.5rem;
  grid-template-columns: minmax(0, 1fr);
}
/* single-column (mobile) reading order: description, ingredients first,
   then the steps, then the rail — the order a cook actually needs */
@media (max-width: 55.99em) {
  .r-description { order: -3; }
  .r-ingredients { order: -2; }
  .r-notes, .r-directions { order: 0; }
  .r-rail { order: 1; }
}
@media (min-width: 56em) {
  .recipe-body {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
    grid-template-areas:
      "desc  ing"
      "notes ing"
      "dirs  rail"
      ".     rail";
    grid-template-rows: auto auto auto 1fr;
  }
  .r-description { grid-area: desc; }
  .r-notes       { grid-area: notes; }
  .r-directions  { grid-area: dirs; }
  .r-ingredients { grid-area: ing; align-self: start; }
  .r-rail        { grid-area: rail; }
}

section.r-description, section.r-notes, section.r-directions {
  max-width: var(--measure);
  margin-bottom: 1.4rem;
  animation: riseIn .55s var(--ease) both;
}
section.r-notes { animation-delay: .06s; }
section.r-directions { animation-delay: .1s; }

.r-head {
  font-family: var(--font-display);
  font-size: .82rem;
  font-weight: 680;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink);
  border-bottom: 2px solid var(--ink);
  padding-bottom: .45rem;
  margin: 0 0 1rem;
  position: relative;
}
.r-head::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -5px;
  border-bottom: 1px solid var(--rule);
}

/* step numbers on directions/notes paragraphs of Joi's recipes */
.mine .r-directions { counter-reset: step; }
.mine .r-directions > p {
  counter-increment: step;
  position: relative;
  padding-left: 2.6rem;
  min-height: 2rem;
}
.mine .r-directions > p::before {
  content: counter(step);
  position: absolute;
  left: 0; top: .05em;
  width: 1.7rem; height: 1.7rem;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .85rem;
  color: var(--accent);
  border: 1.5px solid color-mix(in srgb, var(--accent) 55%, transparent);
  border-radius: 50%;
}

/* ingredients card */
section.r-ingredients {
  background: var(--paper-deep);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: 1.4rem 1.5rem 1rem;
  box-shadow: var(--shadow-card);
  margin-bottom: 2rem;
  animation: riseIn .55s var(--ease) .12s both;
}
@media (min-width: 56em) {
  section.r-ingredients { position: sticky; top: 1.2rem; max-height: calc(100vh - 2.4rem); overflow: auto; }
}
.r-ingredients .r-head { border-color: var(--accent); color: var(--accent); }
.r-ingredients .r-head::after { border-color: color-mix(in srgb, var(--accent) 30%, transparent); }
.r-ingredients ul { list-style: none; margin: 0; padding: 0; }
.r-ingredients li {
  padding: .5rem 0 .45rem;
  border-bottom: 1px solid var(--rule-soft);
  font-size: 1rem;
  line-height: 1.45;
}
.r-ingredients li:last-child { border-bottom: none; }

/* the right rail (meal notes + backlinks) */
.r-rail { animation: riseIn .55s var(--ease) .18s both; }
.r-rail .meals, .r-rail .r-backlinks {
  border-top: 2px solid var(--ink);
  padding-top: .8rem;
  margin-bottom: 2rem;
}
.r-rail h6, .r-rail h4 {
  margin: 0 0 .6rem;
  font-size: .78rem;
  font-weight: 660;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.r-rail .meals ul { list-style: none; margin: 0; padding: 0; }
.r-rail .meals li { margin: 0 0 .7rem; }
.r-rail .meals a { display: block; line-height: 1.35; font-size: .95rem; color: var(--ink-soft); }
.r-rail .meals a strong { color: var(--accent); font-weight: 600; display: block; }
.r-rail .meals a:hover strong { color: var(--accent-deep); }

.r-backlinks .related-group a { display: block; margin-bottom: 1rem; }
.r-backlinks .related-title { margin: 0; font-family: var(--font-display); font-weight: 640; font-size: 1rem; color: var(--accent); }
.r-backlinks .related-excerpt { margin: .1rem 0 0; font-size: .85rem; color: var(--ink-soft); }

/* recipe meta strip under the title */
.recipe-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .3rem 1.1rem;
  padding: .6rem 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  margin: 1rem 0 0;
  font-size: .92rem;
  color: var(--ink-soft);
}
.recipe-meta .mine-badge {
  font-family: var(--font-display);
  font-size: .74rem;
  font-weight: 680;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--paper-high);
  background: var(--tangerine);
  border-radius: 999px;
  padding: .2rem .7rem .14rem;
}

/* copyright note becomes a quiet footnote */
#copyright {
  max-width: var(--wrap);
  margin: 3.5rem auto 0;
  padding: 0 20px;
}
#copyright .box {
  border-top: 1px solid var(--rule);
  padding-top: 1rem;
  font-size: .85rem;
  color: var(--ink-faint);
  max-width: var(--measure);
}
#copyright h6 { margin: 0 0 .3rem; font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-faint); }
#copyright blockquote { border: none; margin: .4rem 0; padding: 0; font-style: italic; }
#copyright p { margin: .3rem 0; }

@keyframes riseIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   7. HOME — meal notes feed + recent recipes rail
   -------------------------------------------------------------------------- */
.meal-notes-feed .note {
  margin-bottom: 2.6rem;
  animation: riseIn .55s var(--ease) both;
}
.meal-notes-feed .note:nth-child(3) { animation-delay: .07s; }
.meal-notes-feed .note:nth-child(4) { animation-delay: .14s; }

.meal-notes-feed a.title {
  display: block;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  background: var(--paper-high);
  border: 1px solid var(--rule-soft);
  transition: transform var(--speed) var(--ease), box-shadow var(--speed) var(--ease);
}
.meal-notes-feed a.title:hover { transform: translateY(-3px); box-shadow: var(--shadow-pop); }

.meal-notes-feed .has_photo { position: relative; aspect-ratio: 16 / 9; }

.meal_title_block { padding: .9rem 1.2rem .9rem; }
.has_photo .meal_title_block {
  position: absolute;
  inset: auto 0 0 0;
  background: linear-gradient(to top, rgba(16, 13, 8, .82), rgba(16, 13, 8, .55) 60%, transparent);
  color: #f6f1e6;
  padding-top: 2.4rem;
}
.meal-notes-feed .note h5 {
  margin: 0 0 .15rem;
  font-size: 1.45rem;
  font-weight: 700;
  letter-spacing: -.015em;
  line-height: 1.1;
}
.has_photo h5 { color: #fdfaf2; }
.meal-notes-feed .note strong {
  font-weight: 500;
  font-size: .85rem;
  font-family: var(--font-display);
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .85;
}
.meal-notes-feed .note em {
  font-style: italic;
  font-size: .9rem;
  opacity: .8;
  line-height: 1.45;
  display: inline-block;
}
.meal-notes-feed .note > p, .meal-notes-feed .note > .excerpt { margin-top: .8rem; color: var(--ink-soft); }

/* section heads on home */
.home-h {
  display: flex;
  align-items: baseline;
  gap: .8rem;
  border-bottom: 2px solid var(--ink);
  padding-bottom: .5rem;
  margin: 0 0 1.4rem;
  position: relative;
}
.home-h::after { content: ""; position: absolute; left: 0; right: 0; bottom: -5px; border-bottom: 1px solid var(--rule); }
.home-h h4, .meal-notes-feed > h4 { margin: 0; font-size: 1.05rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 680; }
.meal-notes-feed > h4 {
  border-bottom: 2px solid var(--ink);
  padding-bottom: .5rem;
  margin-bottom: 1.4rem;
}
.meal-notes-feed > h4 a { color: var(--ink); }
.meal-notes-feed > h4 a:hover { color: var(--accent); }
.meal-notes-feed > h4 em { color: var(--accent); font-style: normal; }

/* cartouches (small recipe cards in rails) */
a.recip-figure {
  display: grid;
  grid-template-columns: 86px 1fr;
  gap: .9rem;
  align-items: center;
  margin: 0 0 1.1rem;
  color: var(--ink);
}
.recip-thumb {
  aspect-ratio: 1;
  height: auto !important;
  width: 86px !important;
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  transition: transform var(--speed) var(--ease);
}
a.recip-figure:hover .recip-thumb { transform: scale(1.05) rotate(-1.2deg); }
.recip-caption {
  font-family: var(--font-display);
  font-weight: 620;
  font-size: 1.02rem;
  line-height: 1.25;
}
a.recip-figure:hover .recip-caption { color: var(--accent); }
.recip-caption em {
  display: block;
  font-family: var(--font-text);
  font-weight: 400;
  font-style: italic;
  font-size: .82rem;
  color: var(--ink-faint);
  margin-top: .15rem;
}

/* --------------------------------------------------------------------------
   8. RECIPE CARD GRID (featured page "stamps")
   -------------------------------------------------------------------------- */
.recipes-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
  gap: 1.6rem 1.4rem;
  margin: .5rem 0 2rem;
}
.recipes-list .recipe-box {
  margin: 0; padding: 0; border: none; display: block;
  animation: riseIn .5s var(--ease) both;
}
.recipes-list .recipe-box:nth-child(6n+2) { animation-delay: .05s; }
.recipes-list .recipe-box:nth-child(6n+3) { animation-delay: .1s; }
.recipes-list .recipe-box:nth-child(6n+4) { animation-delay: .15s; }
.recipes-list .recipe-box:nth-child(6n+5) { animation-delay: .2s; }
.recipes-list .recipe-box:nth-child(6n+6) { animation-delay: .25s; }

.recipes-list a.recipe-item {
  display: block;
  color: var(--ink);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--paper-high);
  border: 1px solid var(--rule-soft);
  box-shadow: var(--shadow-card);
  transition: transform var(--speed) var(--ease), box-shadow var(--speed) var(--ease);
  height: 100%;
}
.recipes-list a.recipe-item:hover { transform: translateY(-4px); box-shadow: var(--shadow-pop); }

.recipes-list .recipe-img {
  display: block; width: auto; padding: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--paper-deep);
}
.recipes-list .recipe-img img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .45s var(--ease);
}
.recipes-list a.recipe-item:hover .recipe-img img { transform: scale(1.06); }

.recipes-list .recipe-deets { display: block; width: auto; padding: .75rem .95rem .9rem; }
.recipe-name {
  font-family: var(--font-display);
  font-weight: 640;
  font-size: 1.05rem;
  line-height: 1.22;
  letter-spacing: -.01em;
}

/* --------------------------------------------------------------------------
   9. INDEX / TAG PAGES
   -------------------------------------------------------------------------- */
body.recipe_index h4, body.tag_index h4, .index-block h4 {
  font-size: 1.35rem;
  border-bottom: 1px solid var(--rule);
  padding-bottom: .3rem;
}
body.recipe_index ul, .index-block ul { list-style: none; padding: 0; margin: 0 0 2rem; }
body.recipe_index ul li { padding: .18rem 0; }

/* --------------------------------------------------------------------------
   10. NOTE PAGES
   -------------------------------------------------------------------------- */
body.note .content { max-width: var(--measure); }
body.note .content img {
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  margin: .4rem 0 1rem;
}
body.note .content h1, body.note .content h2, body.note .content h3 { font-size: 1.6rem; }

/* meal notes sidebar (recipe pages) + meals lists reused elsewhere */
.meals { margin-bottom: 2rem; }
.meals ul { list-style: none; margin: .6rem 0 0; padding: 0; }
.meals ul li { margin-bottom: .8rem; }
.meals ul li a { display: block; line-height: 1.4; font-size: .95rem; color: var(--ink-soft); }
.meals ul li a strong { color: var(--accent); font-weight: 600; }

/* --------------------------------------------------------------------------
   11. FOOTER
   -------------------------------------------------------------------------- */
footer.site-footer {
  margin-top: 4rem;
  border-top: 2px solid var(--ink);
  position: relative;
}
footer.site-footer::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 3px;
  border-top: 1px solid var(--rule);
}
footer.site-footer .bar {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 1.4rem 20px 2.2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: .9rem;
  color: var(--ink-soft);
}
footer.site-footer a { color: var(--ink-soft); }
footer.site-footer a:hover { color: var(--accent); }
#joi-ito-portrait img { border-radius: 50%; vertical-align: middle; }
#joi-contact { margin-left: .5rem; font-family: var(--font-display); font-weight: 600; }
#license img { height: 30px; width: auto; opacity: .75; border-radius: 4px; }

/* --------------------------------------------------------------------------
   12. TOOLTIPS + WIKI-LINK FURNITURE (used by content include)
   -------------------------------------------------------------------------- */
.tooltip { display: inline; position: relative; }
.tooltip .right {
  min-width: 280px; max-width: 340px;
  top: 50%; left: 100%;
  margin-left: 14px;
  transform: translate(0, -50%);
  padding: 12px 16px;
  color: var(--ink);
  background: var(--paper-high);
  border: 1px solid var(--rule);
  font-size: 14px;
  font-weight: 400;
  border-radius: var(--radius);
  position: absolute;
  z-index: 99;
  box-shadow: var(--shadow-pop);
  display: none;
}
.tooltip:hover .right { display: block; }
.tooltip .right i { display: none; }
.right .tooltip-title { font-family: var(--font-display); font-weight: 660; }
.right .tooltip-excerpt { color: var(--ink-soft); font-style: italic; }
@media (max-width: 47.99em) { .tooltip .right { display: none !important; } }

a.no-endpoint-link { color: var(--ink-faint); border-bottom: 1px dotted var(--ink-faint); cursor: default; }
.no-note { color: var(--ink-faint); }

/* sidenotes + margin notes ([[text::rsn]] et al. in the content include).
   Wide screens: floated into the margin, Tufte-style. Narrow screens:
   an inline note card (the old CSS pushed these off-canvas on phones). */
.content { counter-reset: sidenote-counter; }
input.margin-toggle, input.srs-toggle { display: none; }
label.sidenote-number { display: inline; cursor: pointer; }
label.margin-toggle:not(.sidenote-number) { display: none; }
.sidenote-number { counter-increment: sidenote-counter; }
.sidenote-number::after {
  content: counter(sidenote-counter);
  font-size: .68em;
  font-weight: 700;
  color: var(--accent);
  vertical-align: super;
  padding: 0 3px;
}
.sn-left, .sn-right, .mn-left, .mn-right {
  display: block;
  font-size: .85rem;
  line-height: 1.5;
  color: var(--ink-soft);
  background: var(--paper-deep);
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius);
  padding: .7rem .9rem;
  margin: .8rem 0;
}
.sn-left::before, .sn-right::before {
  content: counter(sidenote-counter) " ";
  font-weight: 700;
  font-size: .75em;
  color: var(--accent);
  margin-right: 4px;
}
@media (min-width: 76em) {
  .sn-right, .mn-right {
    float: right; clear: right;
    width: 38%;
    margin: 0 -42% .8rem 1rem;
  }
  .sn-left, .mn-left {
    float: left; clear: left;
    width: 38%;
    margin: 0 1rem .8rem -42%;
  }
}

/* flashcards ([[text::srs]]) — hidden until their toggle is checked */
.srs-svg { stroke: var(--ink-soft); }
label.srs-toggle { display: inline; cursor: pointer; }
.spaced-rep { display: none; }
.srs-toggle:checked + .spaced-rep {
  display: block;
  clear: both;
  margin: 1rem 0;
  padding: .8rem 1rem;
  max-width: 320px;
  background: var(--paper-high);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  overflow-wrap: break-word;
}

/* legacy utility hooks still present in templates */
.bgc-lorange {
  background: transparent;
  padding: 0;
}
.fgc-orange { color: var(--accent); }
.box { background: transparent; }
.last { border: none !important; }

/* dev-only blocks (jekyll dev env) */
.dev-only { color: #8a2b1a; background: color-mix(in srgb, var(--accent) 12%, var(--paper-high)); border-radius: var(--radius); padding: 8px; }
.dev-only.app-ui { color: #5d3f86; }
h6.debug { padding: 5px 10px; background: var(--paper-deep); border-bottom: 1px dashed var(--rule); }

/* --------------------------------------------------------------------------
   13. MOTION SAFETY + PRINT
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

@media print {
  body::before, .site-header, footer.site-footer, .r-rail, #copyright { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .recipe-body { display: block; }
  section.r-ingredients { background: #fff; border: 1px solid #999; box-shadow: none; position: static; max-height: none; }
  #big-photo img { max-height: 3in; border-radius: 0; box-shadow: none; }
  a { color: #000; text-decoration: none; }
}