/* The recipe site: a cookbook on warm paper, in tomato, basil and saffron.
   Each step kind has its own colour (--k, with a soft tint --ks), used for
   step numbers, labels, timer tags and the cook mode header.

   Layout is fluid from a phone to a wide desktop: bands run edge to edge,
   content sits in .wrap, type scales with clamp(), and wider screens get
   grids (weeks, dishes) and two columns (recipe, cook mode). */
:root {
  --paper: #fbf5ea; --ink: #2b211c; --ink-2: #73665b; --rule: #e2d5bf;
  --tomato: #c8442b; --basil: #3f7d3a; --saffron: #e2a22a; --sea: #2d6a8e;
  --band: var(--tomato); --band-ink: #fff4e6; --band-dot: var(--saffron);
  --serif: "Fraunces", Georgia, serif; --sans: "Instrument Sans", system-ui, -apple-system, sans-serif;
  --k: var(--tomato); --ks: #f6dccf;
  --gutter: clamp(20px, 5vw, 64px);
  --max: 1180px;
}
.k-prep { --k: #3f7d3a; --ks: #dbe8d3; }
.k-cook { --k: #c8442b; --ks: #f6dccf; }
.k-simmer { --k: #2d6a8e; --ks: #d6e5ef; }
.k-bake { --k: #a8452f; --ks: #f1d6cc; }
.k-preheat { --k: #b76a1e; --ks: #f5e0c6; }
.k-rest { --k: #6d5f8c; --ks: #e3def0; }
.k-assemble { --k: #4f7f86; --ks: #d8e8ea; }
.k-serve { --k: #c2840f; --ks: #f7e6bf; }
.d-0 { --d: var(--tomato); --ds: #f6dccf; --dt: var(--tomato); }
.d-1 { --d: var(--basil); --ds: #dbe8d3; --dt: var(--basil); }
.d-2 { --d: var(--saffron); --ds: #f7e6bf; --dt: #8a5f0c; }
.d-3 { --d: var(--sea); --ds: #d6e5ef; --dt: var(--sea); }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: clamp(16px, 0.25vw + 15px, 18px)/1.55 var(--sans); }
a { color: inherit; }
.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding-inline: var(--gutter); }
main.wrap { padding-bottom: calc(clamp(40px, 6vw, 96px) + env(safe-area-inset-bottom)); }

.band { background: var(--band); color: var(--band-ink); padding: calc(clamp(28px, 5vw, 72px) + env(safe-area-inset-top)) 0 clamp(26px, 4vw, 56px); position: relative; overflow: hidden; }
.band::after { content: ""; position: absolute; right: calc(-1 * clamp(40px, 6vw, 120px)); top: calc(-1 * clamp(40px, 6vw, 120px)); width: clamp(170px, 30vw, 460px); aspect-ratio: 1; border-radius: 50%; background: var(--band-dot); opacity: .9; }
.band > * { position: relative; z-index: 1; }
.band.dish { background: var(--d); }
.band.dish.d-2 { --band-ink: #2b211c; --band-dot: var(--tomato); }
.back { font: 500 14px var(--sans); text-decoration: none; opacity: .9; }
.back:hover { opacity: 1; text-decoration: underline; }
.kicker { font: 600 clamp(11px, 0.2vw + 10px, 13px) var(--sans); letter-spacing: .16em; text-transform: uppercase; }
h1 { font: 400 clamp(38px, 4.2vw + 18px, 84px)/1.02 var(--serif); letter-spacing: -.025em; margin: 10px 0 0; font-variation-settings: "opsz" 144; max-width: 18ch; text-wrap: balance; }
.range { font: italic 300 clamp(21px, 1.2vw + 16px, 32px)/1.25 var(--serif); margin-top: 8px; }
.meta { font: 500 13px var(--sans); margin-top: 18px; letter-spacing: .04em; opacity: .9; }
.lede { font: 400 clamp(16px, 0.5vw + 14px, 21px)/1.5 var(--sans); margin: 14px 0 0; opacity: .9; max-width: 50ch; }

/* Index of weeks */
.weeks { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 0 clamp(24px, 3vw, 48px); padding-top: 12px; }
.week-link { display: block; padding: 24px 0; border-bottom: 1px solid var(--rule); text-decoration: none; }
.week-link .range { color: var(--ink); font-size: clamp(22px, 0.8vw + 18px, 28px); }
.week-link:hover .range { color: var(--tomato); }
.week-link ul { list-style: none; padding: 0; margin: 10px 0 0; }
.week-link li { display: flex; gap: 10px; align-items: baseline; padding: 3px 0; color: var(--ink-2); }
.week-link li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--d); flex: none; transform: translateY(-1px); }
.empty { font: italic 300 20px var(--serif); color: var(--ink-2); padding: 28px 0; }

/* A week's dishes: a list on a phone, cards side by side on wider screens */
.dishes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 0 clamp(24px, 3vw, 40px); padding-top: 8px; }
.dish-card { display: grid; grid-template-columns: 56px 1fr; gap: 8px; padding: 24px 0; border-bottom: 1px solid var(--rule); text-decoration: none; }
.no { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font: 400 21px/1 var(--serif); color: #fff; background: var(--d); }
.dish-card h2 { font: 500 clamp(22px, 0.6vw + 19px, 28px)/1.15 var(--serif); margin: 0; letter-spacing: -.01em; }
.dish-card:hover h2 { color: var(--dt); }
.dish-card p { margin: 8px 0 0; font-size: 15px; color: var(--ink-2); line-height: 1.45; }
.facts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.facts span { font: 600 11px var(--sans); letter-spacing: .08em; text-transform: uppercase; padding: 4px 9px; border-radius: 999px; background: var(--ds); color: var(--dt); }
.kinds { display: flex; gap: 3px; margin-top: 14px; }
.kinds i { height: 4px; flex: 1; border-radius: 2px; background: var(--k); }
@media (min-width: 760px) {
  .dish-card { grid-template-columns: 1fr; align-content: start; gap: 16px; padding: 32px 0 28px; border-bottom: 0; border-top: 4px solid var(--d); }
  .no { width: 52px; height: 52px; font-size: 24px; }
}

/* A recipe: one column on a phone; ingredients beside the method on wider
   screens, kept in view while scrolling the method */
.recipe { display: grid; gap: 0 clamp(40px, 5vw, 88px); padding-top: clamp(20px, 3vw, 40px); }
@media (min-width: 900px) {
  .recipe { grid-template-columns: minmax(320px, 400px) 1fr; align-items: start; }
  .recipe aside { position: sticky; top: 24px; max-height: calc(100vh - 48px); overflow-y: auto; scrollbar-width: thin; padding-bottom: 16px; }
  .recipe .method-col h3:first-child { margin-top: 0; }
}
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 8px; margin-bottom: 16px; }
.stats div { padding: 12px 14px; border-radius: 14px; background: var(--ks); }
.stats b { display: block; font: 400 clamp(26px, 0.6vw + 23px, 32px)/1 var(--serif); }
.stats b small { font: 400 14px var(--serif); }
.stats span { font: 600 10px var(--sans); letter-spacing: .14em; text-transform: uppercase; opacity: .75; }
.cta { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 17px 22px; border-radius: 999px; background: var(--ink); color: var(--paper); font: 600 16px var(--sans); text-decoration: none; transition: transform .15s; }
.cta:hover { transform: translateY(-1px); }
.cta i { font-style: normal; font-family: var(--serif); font-size: 20px; }
h3 { font: 400 clamp(26px, 0.8vw + 22px, 34px) var(--serif); margin: 32px 0 6px; letter-spacing: -.01em; }
h3 small { font: 600 11px var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); margin-left: 8px; white-space: nowrap; }
h4 { font: 600 11px var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); margin: 20px 0 2px; }
.equipment { color: var(--ink-2); margin: 0; }
.ing { list-style: none; margin: 0; padding: 0; }
.ing li { border-bottom: 1px dotted var(--rule); }
.ing label { display: grid; grid-template-columns: 22px 6.4em 1fr; gap: 8px; align-items: baseline; padding: 11px 0; font-size: 15.5px; cursor: pointer; }
.ing.no-amounts label { grid-template-columns: 22px 1fr; }
.ing input { appearance: none; width: 17px; height: 17px; margin: 0; border: 1.5px solid var(--ink-2); border-radius: 4px; transform: translateY(3px); cursor: pointer; }
.ing input:checked { background: var(--basil); border-color: var(--basil); }
.ing input:checked ~ * { color: var(--ink-2); }
.ing input:checked ~ span .n { text-decoration: line-through; text-decoration-color: var(--rule); }
.amt { font: 500 15.5px var(--serif); text-align: right; padding-right: 6px; white-space: nowrap; color: var(--tomato); font-variant-numeric: tabular-nums; }
.prep { color: var(--ink-2); font-style: italic; font-family: var(--serif); }
.home { font: 600 10px var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--basil); border: 1px solid currentColor; border-radius: 4px; padding: 1px 5px; margin-left: 6px; white-space: nowrap; font-style: normal; }
.method { list-style: none; padding: 0; margin: 0; }
.method li { display: grid; grid-template-columns: clamp(46px, 4vw, 64px) 1fr; padding: clamp(18px, 2vw, 26px) 0; border-bottom: 1px solid var(--rule); }
.method .num { font: 400 clamp(34px, 1.5vw + 26px, 52px)/0.9 var(--serif); font-variation-settings: "opsz" 144; color: var(--k); }
.kind { font: 600 11px var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--k); }
.kind span { color: var(--ink-2); }
.method p { margin: 4px 0 0; font-size: clamp(16px, 0.4vw + 15px, 19px); max-width: 62ch; }
.tag { display: inline-block; margin-top: 8px; font: italic 400 14px var(--serif); padding: 3px 10px; border-radius: 999px; background: var(--ks); color: var(--k); }
.notes { margin-top: 26px; padding: 16px 18px; border-radius: 14px; background: #dbe8d3; font: italic 300 17px/1.45 var(--serif); white-space: pre-line; }

/* Cook mode: the header takes the colour of the step's kind, running
   timers sit in it, and the controls stay at the bottom. On wide screens
   the step's text and its ingredients sit side by side. */
body.cook { height: 100dvh; overflow: hidden; }
#app { display: flex; flex-direction: column; height: 100dvh; }
.cook-top { background: var(--k); color: var(--band-ink); padding: calc(14px + env(safe-area-inset-top)) 0 16px; transition: background .3s; }
.cook-top.k-serve, .cook-top.k-preheat { --band-ink: #fffaf0; }
.bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; font: 600 11px var(--sans); letter-spacing: .14em; text-transform: uppercase; }
.bar a { text-decoration: none; }
.bar .x { font: 300 26px/1 var(--serif); text-transform: none; letter-spacing: 0; width: 28px; }
.bar strong { flex: 1; text-align: center; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar .title { display: none; }
@media (min-width: 760px) { .bar .title { display: inline; font: 400 18px var(--serif); letter-spacing: 0; text-transform: none; margin-right: 16px; } .bar strong { text-align: left; } }
.progress { display: flex; gap: 4px; margin-top: 12px; }
.progress i { flex: 1; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .25); }
.progress i.done { background: rgba(255, 255, 255, .6); }
.progress i.now { background: var(--band-ink); }
.timers { display: flex; gap: 10px; margin-top: 14px; overflow-x: auto; scrollbar-width: none; }
.timers:empty { display: none; }
.tm { flex: none; min-width: 150px; display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 10px; border-radius: 14px; background: var(--paper); color: var(--ink); }
.tm svg { flex: none; }
.tm b { display: block; font: 400 22px/1 var(--serif); font-variant-numeric: tabular-nums; }
.tm span { font: 600 10px var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.tm button { margin-left: auto; min-width: 34px; height: 34px; border-radius: 10px; border: 0; background: var(--ks); color: var(--k); font: 600 13px var(--sans); cursor: pointer; }
.tm.ringing { background: var(--saffron); animation: pulse 1s infinite; }
.tm.ringing span { color: var(--ink); }
.tm.ghost { background: transparent; border: 1.5px dashed currentColor; color: var(--band-ink); }
.tm.ghost span { color: inherit; opacity: .85; }
@keyframes pulse { 50% { transform: scale(1.04); } }
@media (prefers-reduced-motion: reduce) { .tm.ringing { animation: none; } .cook-top { transition: none; } }
.cook-body { flex: 1; overflow-y: auto; }
#step { padding-top: clamp(22px, 4vw, 56px); padding-bottom: 12px; display: grid; gap: 0 clamp(40px, 5vw, 88px); }
@media (min-width: 900px) {
  #step { grid-template-columns: minmax(0, 3fr) minmax(280px, 2fr); align-items: start; }
  #step .side { padding-top: 34px; }
  #step.overview .side { padding-top: 0; }
}
.pill { display: inline-block; font: 600 11px var(--sans); letter-spacing: .16em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; color: #fff; background: var(--k); }
.big { font: 400 clamp(28px, 2.4vw + 18px, 52px)/1.2 var(--serif); letter-spacing: -.015em; margin: 14px 0 18px; font-variation-settings: "opsz" 72; max-width: 24ch; text-wrap: pretty; }
.uses { list-style: none; padding: 0; margin: 0; }
.uses li { display: flex; gap: 10px; padding: 8px 0; font-size: clamp(16px, 0.4vw + 15px, 19px); border-bottom: 1px dotted var(--rule); }
.uses li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; margin-top: .6em; flex: none; background: var(--k); }
.aside { margin-top: 16px; font: italic 300 clamp(16px, 0.5vw + 14px, 20px)/1.4 var(--serif); color: var(--ink-2); }
.waits { margin-top: 16px; padding: 10px 14px; border-radius: 12px; background: var(--ks); font-size: 15px; }
.waits b { font-variant-numeric: tabular-nums; }
.next-up { margin-top: 22px; padding-top: 12px; border-top: 1px solid var(--rule); color: var(--ink-2); font-size: 14px; }
.next-up b { display: block; font: 600 11px var(--sans); letter-spacing: .14em; text-transform: uppercase; margin-bottom: 2px; }
.cook-foot { padding: 12px 0 calc(18px + env(safe-area-inset-bottom)); border-top: 1px solid var(--rule); }
.cook-foot .wrap { display: grid; gap: 10px; }
@media (min-width: 760px) { .cook-foot .wrap { grid-template-columns: 1fr auto; align-items: stretch; } .cook-foot .nav { min-width: 360px; } }
#go:empty { display: none; }
.go { width: 100%; height: 100%; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 18px 22px; border-radius: 18px; border: 0; color: #fff; background: var(--k); font: 600 16px var(--sans); text-align: left; cursor: pointer; }
.go small { font: italic 400 15px var(--serif); opacity: .9; white-space: nowrap; }
.go:disabled { opacity: .55; cursor: default; }
.nav { display: grid; grid-template-columns: 1fr 2fr; gap: 10px; }
.nav button { padding: 15px; border-radius: 14px; border: 1.5px solid var(--ink); background: transparent; font: 600 15px var(--sans); color: var(--ink); cursor: pointer; }
.nav button.next { background: var(--ink); color: var(--paper); }
.nav button:disabled { opacity: .35; cursor: default; }