/* ==========================================================================
   Everyday Macros — Miranda's Kitchen
   Brand: Lora (display) + Work Sans (text/labels)
   ========================================================================== */

:root {
  --ink:        #262220;  /* near-black text */
  --ink-muted:  #5c5551;  /* secondary headings */
  --ink-label:  #8a8177;  /* small-caps labels */
  --rule:       #d8d2cb;  /* hairlines */
  --paper:      #ffffff;  /* page background */

  --serif: "Lora", Georgia, "Times New Roman", serif;
  --sans:  "Work Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --measure: 62ch;
  --gutter: clamp(1.5rem, 5vw, 4rem);
  --max: 1120px;
}

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.7;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

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

/* ---------- typography ---------------------------------------------------- */

h1, h2, h3 { font-family: var(--serif); font-weight: 500; margin: 0; }

h1 {
  font-size: clamp(3rem, 11vw, 6.5rem);
  line-height: 0.95;
  letter-spacing: -0.015em;
  text-transform: uppercase;
}

h2 {
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

h3 { font-size: 1.3125rem; line-height: 1.3; }

p { margin: 0 0 1.15em; max-width: var(--measure); }
p:last-child { margin-bottom: 0; }

a { color: inherit; }

/* letterspaced small-caps label — the cookbook's signature device */
.label {
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-label);
  margin: 0;
  /* labels are short — never inherit the paragraph measure, or the box ends up
     narrower than its container and centred text sits left of centre */
  max-width: none;
}

.lede {
  font-family: var(--serif);
  font-size: clamp(1.125rem, 2.2vw, 1.5rem);
  line-height: 1.55;
  color: var(--ink-muted);
  text-wrap: pretty;
}

.hairline {
  width: 68px; height: 1px;
  background: var(--rule);
  border: 0;
  margin: 2rem auto;
}

/* ---------- layout ------------------------------------------------------- */

.wrap {
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

section { padding-block: clamp(4rem, 9vw, 8rem); }
.rule-top { border-top: 1px solid var(--rule); }

.center { text-align: center; }
.center p { margin-inline: auto; }

/* ---------- header ------------------------------------------------------- */

.site-head {
  padding-block: 1.75rem;
  border-bottom: 1px solid var(--rule);
}
.site-head .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.wordmark {
  font-family: var(--sans);
  font-size: 0.8125rem;   /* 13px — 2px up from the other small-caps labels */
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink);
}
.nav-buy {
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-muted);
  border-bottom: 1px solid var(--rule);
  padding-bottom: 2px;
  transition: color .25s ease, border-color .25s ease;
}
.nav-buy:hover { color: var(--ink); border-color: var(--ink); }

/* ---------- hero --------------------------------------------------------- */

.hero {
  text-align: center;
  padding-block: clamp(3rem, 7vw, 5.5rem) clamp(3.5rem, 8vw, 6rem);
}

.hero-mark {
  /* Bowl.png carries deliberate asymmetric margin so the bowl — not the sprig —
     lands on the page centre. Never trim it. The canvas is ~83% artwork, so this
     width is sized up so the drawing itself renders at ~275px. */
  width: min(333px, 63vw);
  margin: 0 auto clamp(2rem, 5vw, 3.25rem);
  opacity: .92;
}

.hero .label {
  margin-bottom: 1.25rem;
  font-size: 0.875rem;
  letter-spacing: 0.3em;
  color: var(--ink-muted);
}

.hero h1 + .hairline { margin-block: clamp(1.5rem, 4vw, 2.25rem); }

.hero-sub {
  font-family: var(--serif);
  font-size: clamp(1.125rem, 2.6vw, 1.625rem);
  line-height: 1.45;
  color: var(--ink);
  margin: 0 auto 0.75rem;
  max-width: 34ch;
  text-wrap: balance;
}

.hero-byline {
  font-family: var(--serif);
  font-style: italic;
  color: var(--ink-label);
  margin: 0 auto;
}

.hero-tags {
  margin-top: clamp(2.5rem, 6vw, 4rem);
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
}
.hero-tags .label { display: inline-flex; align-items: center; gap: 1.25rem; }
.hero-tags .label::after { content: "•"; letter-spacing: 0; color: var(--rule); }
.hero-tags .label:last-child::after { content: none; }

.hero-cta { margin-top: clamp(2.5rem, 6vw, 3.5rem); }

/* Staggered page-load reveal. Gated on .anim like the scroll reveals, so the
   hero is never hidden behind an animation that might not run — with JS off,
   these elements are simply visible. */
@media (prefers-reduced-motion: no-preference) {
  .anim .reveal { animation: rise 1s cubic-bezier(.22,.68,.15,1) both; }
  .anim .reveal:nth-child(1) { animation-delay: .08s; }
  .anim .reveal:nth-child(2) { animation-delay: .15s; }
  .anim .reveal:nth-child(3) { animation-delay: .25s; }
  .anim .reveal:nth-child(4) { animation-delay: .35s; }
  .anim .reveal:nth-child(5) { animation-delay: .45s; }
  .anim .reveal:nth-child(6) { animation-delay: .55s; }
  .anim .reveal:nth-child(7) { animation-delay: .65s; }
}

/* ---------- scroll reveals ----------------------------------------------- */
/* Gated on .anim, which a tiny inline script adds to <html>. With JS off nothing
   is ever hidden, so the page is fully readable either way.

   Keyframe animations, not transitions: animation-fill-mode pins the end state,
   so a reveal can't stall partway and leave half-faded text. Removing .in resets
   the element, which is what lets a section replay when you scroll back to it.

   Per-child delay comes from --d, set in JS from each child's real position, so
   the wave follows the layout at any column count. */

@media (prefers-reduced-motion: no-preference) {
  .anim .fx,
  .anim .fx-stagger > * { opacity: 0; }

  .anim .fx.in { animation: rise .8s cubic-bezier(.22,.68,.15,1) both; }

  .anim .fx-stagger.in > * {
    animation: rise .8s cubic-bezier(.22,.68,.15,1) both;
    animation-delay: var(--d, 0s);
  }

  /* the sample pages get a touch of scale, like sheets settling onto a table */
  .anim .pages.fx-stagger.in > * {
    animation-name: settle;
    animation-duration: .9s;
  }

  /* thirty recipe names — keep their travel short so the wave stays quiet */
  .anim .index-grid.fx-stagger.in > * {
    animation-name: riseShort;
    animation-duration: .6s;
  }

  /* the hairline draws itself outward */
  .anim .fx .hairline,
  .anim .fx-stagger .hairline { width: 0; }
  .anim .fx.in .hairline,
  .anim .fx-stagger.in .hairline {
    animation: draw .9s cubic-bezier(.22,.68,.15,1) .2s both;
  }

  @keyframes draw {
    from { width: 0; }
    to   { width: 68px; }
  }

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

  @keyframes settle {
    from { opacity: 0; transform: translateY(24px) scale(.985); }
    to   { opacity: 1; transform: none; }
  }
}

/* ---------- buttons ------------------------------------------------------ */

.btn {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 1.0625rem 2.25rem;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  cursor: pointer;
  white-space: nowrap;   /* a button label never breaks onto a second line */
  transition: background .28s ease, color .28s ease, border-color .28s ease;
}
.btn:hover { background: var(--paper); color: var(--ink); }

.btn-quiet {
  background: transparent;
  color: var(--ink);
  border-color: var(--rule);
}
.btn-quiet:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.btn-block { display: block; width: 100%; text-align: center; }

/* header-sized button */
.btn-sm {
  font-size: 0.625rem;
  letter-spacing: 0.18em;
  padding: 0.7rem 1.25rem;
}

/* ---------- three-up value props ---------------------------------------- */

.trio {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(2rem, 5vw, 3.5rem);
  margin-top: clamp(2.5rem, 6vw, 4rem);
}
.trio > div { border-top: 1px solid var(--rule); padding-top: 1.5rem; }
.trio .num {
  font-family: var(--serif);
  font-size: 0.9375rem;
  color: var(--ink-label);
  display: block;
  margin-bottom: 0.75rem;
}
.trio h3 { margin-bottom: .5rem; }
.trio p { font-size: 0.9375rem; color: var(--ink-muted); max-width: 34ch; }

/* ---------- look inside ------------------------------------------------- */

.pages {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(1.5rem, 4vw, 2.5rem);
  margin-top: clamp(2.5rem, 6vw, 4rem);
  align-items: start;
}
.sheet {
  margin: 0;
  border: 1px solid var(--rule);
  background: var(--paper);
  box-shadow: 0 1px 2px rgba(38,34,32,.04), 0 12px 32px -18px rgba(38,34,32,.22);
  transition: transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s ease;
}
.sheet:hover {
  transform: translateY(-6px);
  box-shadow: 0 1px 2px rgba(38,34,32,.05), 0 22px 46px -20px rgba(38,34,32,.28);
}
/* The sample pages are painted as backgrounds rather than <img> elements: there is
   no image node to drag onto the desktop, and no "Save image as" in the context
   menu. A determined visitor can still pull the file out of the network tab. */
.sheet-page {
  aspect-ratio: 772 / 1000;
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
}

.sheet figcaption {
  font-family: var(--sans);
  font-size: 0.625rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-label);
  text-align: center;
  padding: 0.9rem 1rem 1.05rem;
  border-top: 1px solid var(--rule);
}

/* ---------- recipe index ------------------------------------------------ */

.index-grid {
  columns: 3 200px;
  column-gap: clamp(1.5rem, 4vw, 3rem);
  margin-top: clamp(2rem, 5vw, 3rem);
  padding: 0;
  list-style: none;
}
.index-grid li {
  break-inside: avoid;
  font-family: var(--serif);
  font-size: 1.0625rem;
  padding: .55rem 0;
  border-bottom: 1px solid var(--rule);
  color: var(--ink-muted);
}

/* Tuned so the line breaks after "on the right," on a wide screen. */
.lede--inside { max-width: 35rem; }

.footnote { font-size: 0.875rem; color: var(--ink-label); margin-top: 2rem; }

/* ---------- pricing ----------------------------------------------------- */

.tiers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(1.25rem, 3vw, 2rem);
  margin-top: clamp(2.5rem, 6vw, 4rem);
  align-items: stretch;
}

.tier {
  border: 1px solid var(--rule);
  padding: clamp(1.75rem, 4vw, 2.5rem);
  display: flex;
  flex-direction: column;
  text-align: center;
  position: relative;
  background: var(--paper);
}
.tier--feature { border-color: var(--ink); }
.tier--feature .flag {
  position: absolute;
  top: 0; left: 50%;
  transform: translate(-50%, -50%);
  background: var(--paper);
  padding-inline: .85rem;
  font-family: var(--sans);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
}

.tier h3 { font-size: 1.5rem; margin-bottom: .35rem; }
.tier .tier-kind { margin-bottom: 1.5rem; }

.price {
  font-family: var(--serif);
  font-size: clamp(2.5rem, 6vw, 3.25rem);
  line-height: 1;
  letter-spacing: -0.02em;
  display: block;
}
.price-note {
  font-size: 0.8125rem;
  color: var(--ink-label);
  margin-top: .6rem;
}

.tier ul {
  list-style: none;
  padding: 0;
  margin: 1.75rem 0 2rem;
  border-top: 1px solid var(--rule);
  text-align: left;
}
.tier li {
  font-size: 0.9375rem;
  color: var(--ink-muted);
  padding: .7rem 0;
  border-bottom: 1px solid var(--rule);
}
.tier .btn { margin-top: auto; }

.pay-note { font-size: 0.8125rem; color: var(--ink-label); margin-top: 2.5rem; text-align: center; }

/* ---------- faq --------------------------------------------------------- */

.faq { max-width: 720px; margin-inline: auto; margin-top: clamp(2rem, 5vw, 3rem); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq details:first-of-type { border-top: 1px solid var(--rule); }
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 1.35rem 2.5rem 1.35rem 0;
  font-family: var(--serif);
  font-size: 1.125rem;
  position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
/* Transition colour only. Putting font-weight in a transition leaves it pinned
   at the start value in some engines, and animating weight would reflow the line
   anyway — the weight change should snap. */
.faq summary { transition: color .18s ease; }
.faq summary:hover,
.faq summary:focus-visible,
.faq details[open] > summary { font-weight: 600; color: var(--ink); }
.faq summary::after {
  content: "+";
  position: absolute;
  right: .35rem; top: 50%;
  transform: translateY(-50%);
  font-family: var(--sans);
  font-size: 1.1rem;
  color: var(--ink-label);
  transition: transform .3s ease;
}
.faq details[open] summary::after { content: "–"; }
.faq .answer { padding: 0 2.5rem 1.6rem 0; }
.faq .answer p { font-size: 0.9375rem; color: var(--ink-muted); }

/* ---------- footer ------------------------------------------------------ */

.site-foot {
  border-top: 1px solid var(--rule);
  padding-block: 3rem;
  text-align: center;
}
.site-foot .label + .label { margin-top: .9rem; }
/* one colour for everything in the footer, and no rule under the address */
.site-foot a {
  color: inherit;
  text-decoration: none;
  border-bottom: 0;
  transition: opacity .2s ease;
}
.site-foot a:hover { opacity: .62; }

/* ---------- thank-you page --------------------------------------------- */

.receipt {
  max-width: 620px;
  margin-inline: auto;
  text-align: center;
}
.receipt .steps {
  list-style: none;
  padding: 0;
  margin: clamp(2rem, 5vw, 3rem) 0 0;
  text-align: left;
  border-top: 1px solid var(--rule);
}
.receipt .steps li {
  padding: 1.35rem 0;
  border-bottom: 1px solid var(--rule);
}
.receipt .steps .label { display: block; margin-bottom: .4rem; }
.receipt .steps p { font-size: 0.9375rem; color: var(--ink-muted); margin: 0; }

:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }


/* ==========================================================================
   Mobile
   ========================================================================== */

@media (max-width: 720px) {

  /* --- type scale: bigger headlines on a small screen, not smaller ---
     h1 is capped by viewport width so EVERYDAY still fits on one line on a
     320px phone, where 3.5rem would overflow. */
  h1 { font-size: min(3.5rem, 15vw); }
  h2 { font-size: min(2.125rem, 9vw); }

  /* --- the wordmark stays on one line, tracking gives way before size --- */
  .wordmark {
    letter-spacing: 0.12em;
    white-space: nowrap;
  }

  /* --- the tagline row: keep the first two on one line --- */
  .hero-tags { gap: 0.35rem 0.7rem; }
  .hero-tags .label {
    letter-spacing: 0.14em;
    gap: 0.7rem;
  }
  /* the row breaks 2 + 1 here, so the second item's bullet would dangle at the
     end of the first line with nothing after it */
  .hero-tags .label:nth-child(2)::after { content: none; }

  /* --- no rule between the section heading and the first value prop --- */
  .trio > div:first-child {
    border-top: 0;
    padding-top: 0;
  }

  /* --- sample pages and price cards scroll sideways instead of stacking ---
     Full-bleed: the negative margin cancels the wrap's gutter so cards can
     travel to the screen edge, and the matching padding keeps the first one
     aligned with the text above it. Cards are sized so the next one peeks in,
     which is what tells you the row scrolls. */
  .pages,
  .tiers {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 76%;
    gap: 1rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-left: var(--gutter);
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    padding-bottom: 0.75rem;
    scrollbar-width: none;
  }

  .pages::-webkit-scrollbar,
  .tiers::-webkit-scrollbar { display: none; }

  .pages > *,
  .tiers > * { scroll-snap-align: start; }

  /* narrower cards need the button padding to give way before the label does */
  .tier { padding-inline: 1.25rem; }
  .tier .btn { padding-inline: 1.25rem; }
}

/* Very narrow phones (320px and similar). At the sizes above, HIGH PROTEIN and
   FAMILY FRIENDLY need ~318px and only have 272, so the tagline is tightened
   just here rather than shrinking it on every phone. */
@media (max-width: 360px) {
  .hero-tags { gap: 0.3rem 0.4rem; }
  .hero-tags .label {
    font-size: 0.625rem;
    letter-spacing: 0.08em;
    gap: 0.4rem;
  }
}