/* StoveTab. Tokens come from the StoveTab redesign handoff (Claude Design); see docs/design/README.md. */
/* Newsreader and Hanken Grotesk (SIL Open Font License 1.1), self-hosted from app/assets/fonts: Google Fonts'
   variable files, Latin and Latin Extended only. No third-party stylesheet blocking the first paint. */
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("/assets/hanken-grotesk-latin-ext-c2a3301f.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("/assets/hanken-grotesk-latin-62d0893d.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Newsreader"; font-style: italic; font-weight: 400 500; font-display: swap; src: url("/assets/newsreader-italic-latin-ext-e778c051.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Newsreader"; font-style: italic; font-weight: 400 500; font-display: swap; src: url("/assets/newsreader-italic-latin-fd8d4ba4.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Newsreader"; font-style: normal; font-weight: 400 500; font-display: swap; src: url("/assets/newsreader-latin-ext-c601fd27.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Newsreader"; font-style: normal; font-weight: 400 500; font-display: swap; src: url("/assets/newsreader-latin-fe979712.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
:root {
  --paper: #F7F2EA; --card: #FFFCF7; --linen: #EFE7DA; --rule: #E3D8C8; --rule-strong: #D9CDBB; --dash: #C9BBA7;
  --ink: #2A211C; --on-ink: #F7F2EA; --ink-soft: #4A3E35; --muted: #6E6157;
  --persimmon: #A9482A; --persimmon-hover: #8C3A20; --on-persimmon: #FFFCF7; --persimmon-soft: #F6E3D8;
  --honey: #E8B04A; --honey-bg: #F6E7C1; --honey-ink: #7A4E0E; /* now, always with a second cue */
  --sage: #4F6B4A; --sage-bg: #E4EADF; --sage-ink: #3E5639; /* done, always with a second cue */
  /* Cast iron never flips with the theme. */
  --iron: #231C17; --iron-edge: #231C17; --on-iron: #F3EADD; --on-iron-2: #D8CBBB; --on-iron-3: #BFB1A2;
  --iron-rule: #3A2F27; --iron-rule-2: #5A4B3F; --iron-honey: #E8C27A; --iron-link: #F0A98F;
  --placeholder: repeating-linear-gradient(135deg, #E9DFD0 0 10px, #E1D5C3 10px 20px);
  --font-display: "Newsreader", Georgia, serif;
  --font-sans: "Hanken Grotesk", system-ui, sans-serif;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-12: 48px;
  --radius-sm: 6px; --radius-input: 12px; --radius-md: 14px; --radius-lg: 18px; --radius-xl: 22px; --radius-pill: 999px;
  color-scheme: light dark;
}
/* Not in the handoff (light only): built from cast iron, every text pair at 4.5:1 or better. */
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #191410; --card: #231C17; --linen: #30261F; --rule: #3A2F27; --rule-strong: #5A4B3F; --dash: #5A4B3F;
    --ink: #F3EADD; --on-ink: #231C17; --ink-soft: #D8CBBB; --muted: #BFB1A2;
    --persimmon: #F0A98F; --persimmon-hover: #F6C2AE; --on-persimmon: #1C1612; --persimmon-soft: #3D2419;
    --honey-bg: #3D2F14; --honey-ink: #E8C27A;
    --sage: #A9C29F; --sage-bg: #2A3526; --sage-ink: #C5D8BD;
    --iron-edge: #3A2F27; /* so a cast-iron block doesn't melt into a dark page */
    --placeholder: repeating-linear-gradient(135deg, #30261F 0 10px, #3A2F27 10px 20px);
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 16px/24px var(--font-sans); }
img { max-width: 100%; height: auto; } /* width and height attributes only reserve the shape */
a { color: var(--persimmon); }
a:hover { color: var(--persimmon-hover); }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--persimmon); outline-offset: 2px; }
h1, h2, h3, p { margin: 0; }
[hidden] { display: none !important; } /* component display rules must never un-hide an element */

.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muted { color: var(--muted); }
.ink { color: var(--ink); }
.small { font-size: 13px; line-height: 18px; }
.strong { font-weight: 600; }
.persimmon { color: var(--persimmon); }
.display { font: 400 48px/52px var(--font-display); letter-spacing: -.01em; text-wrap: balance; }
.title { font: 500 26px/32px var(--font-display); }
.lede { font-size: 17px; line-height: 26px; color: var(--muted); }
.eyebrow { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 0 0 var(--space-2); }
.eyebrow--sage { color: var(--sage); }
.eyebrow--persimmon { color: var(--persimmon); }
.stack { display: flex; flex-direction: column; gap: var(--space-2); }
.row-between { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-2); }
@media (max-width: 600px) { .display { font-size: 34px; line-height: 40px; } }

.brand { display: inline-flex; align-items: center; text-decoration: none; }
/* The watercolour pot and the traced SVG wordmark, in the artwork's proportions (the word is .647 of the pot's
   height and sits .109 above its base). Sized from --logo; the word follows the text colour. */
.logo { --logo: 22px; --logo-pot: calc(var(--logo) * 2); display: inline-flex; align-items: flex-end; gap: calc(var(--logo-pot) * .027); color: #5E361A; }
.logo__pot { display: block; height: var(--logo-pot); width: auto; }
.logo__word { display: block; height: calc(var(--logo-pot) * .647); width: calc(var(--logo-pot) * 2.971); margin-bottom: calc(var(--logo-pot) * .109); }
.logo--on-iron { color: var(--on-iron); }
@media (prefers-color-scheme: dark) { .logo { color: var(--ink); } }
.icon { flex: none; vertical-align: -.15em; }

.button { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 44px; padding: 0 var(--space-4);
  border: 0; border-radius: var(--radius-pill); background: var(--persimmon); color: var(--on-persimmon); font-family: inherit; font-weight: 600; font-size: 15px; text-decoration: none; cursor: pointer; }
.button:hover { background: var(--persimmon-hover); color: var(--on-persimmon); }
.button--big { min-height: 60px; font-size: 17px; width: 100%; }
.button--grow { flex: 1 1 auto; }
.button--ghost { background: transparent; color: var(--ink); border: 1px solid var(--ink); border-radius: var(--radius-pill); }
.button--ghost:hover { background: var(--card); color: var(--ink); }
.link-button { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: var(--space-1); color: var(--persimmon); font-size: 13px; font-weight: 600; min-height: 32px; }
.link-button:focus-visible { outline: 2px solid var(--persimmon); outline-offset: 2px; }
.link-button--muted { color: var(--muted); font-size: 14px; min-height: 44px; }
.button--pill { min-height: 54px; padding: 0 26px; font-size: 16px; }
/* An input and its button on one line, wrapping on a phone. */
.inline-form { display: flex; flex-wrap: wrap; gap: 10px 12px; }
.inline-form .input { flex: 1 1 240px; min-width: 0; }

/* Website */
.wrap { max-width: 1320px; margin: 0 auto; padding: 0 28px; }
@media (max-width: 600px) { .wrap { padding: 0 var(--space-4); } }
.site-header { border-bottom: 1px solid var(--rule); }
.site-header__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) 28px; padding-top: 14px; padding-bottom: 14px; }
.site-nav { display: flex; gap: 22px; font-size: 15px; font-weight: 600; overflow-x: auto; scrollbar-width: none; }
.site-nav__link { flex: none; display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); text-decoration: none; border-bottom: 2px solid transparent; }
.site-nav__link[aria-current="page"] { border-bottom-color: var(--persimmon); }
.search { flex: 1 1 240px; position: relative; }
.search .icon { position: absolute; left: 18px; top: 13px; color: var(--muted); }
.search input { width: 100%; height: 44px; border: 1px solid var(--rule-strong); border-radius: var(--radius-pill); padding: 0 20px 0 44px; background: var(--card); color: var(--ink); font: inherit; font-size: 15px; }
.search input::placeholder { color: var(--muted); }
.site-actions { display: flex; align-items: center; gap: var(--space-3); font-size: 15px; font-weight: 600; }
.site-actions__link { color: var(--ink); text-decoration: none; }
.page { padding-top: var(--space-12); padding-bottom: 72px; display: flex; flex-direction: column; gap: var(--space-6); }
.site-footer { background: var(--iron); border-top: 1px solid var(--iron-edge); color: var(--on-iron-2); }
.site-footer__row { padding-top: 40px; padding-bottom: 40px; display: flex; flex-wrap: wrap; gap: var(--space-6) 32px; justify-content: space-between; align-items: flex-start; }
.site-footer__about { max-width: 420px; display: flex; flex-direction: column; gap: 10px; font-size: 14px; line-height: 21px; }
.site-footer__links { display: flex; flex-wrap: wrap; column-gap: 22px; font-size: 14px; }
.site-footer__links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--on-iron); text-decoration: none; }
.site-footer__links a:hover { color: var(--iron-link); }
.site-footer__legal { flex-basis: 100%; font-size: 13px; color: var(--on-iron-3); }
.site-footer__legal a { color: var(--on-iron-2); }
.legal { max-width: 720px; }
.legal h2 { font: 500 22px/28px var(--font-display); margin: var(--space-6) 0 var(--space-2); }
.legal li + li { margin-top: var(--space-2); }
.intro { display: flex; flex-direction: column; gap: var(--space-2); max-width: 720px; }
.back { font-size: 15px; font-weight: 600; text-decoration: none; align-self: flex-start; }

.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip { display: inline-flex; align-items: center; min-height: 38px; padding: 0 var(--space-4); border-radius: var(--radius-pill); border: 1px solid var(--rule-strong);
  background: var(--card); color: var(--ink); font-size: 14px; font-weight: 500; text-decoration: none; }
.chip:hover { color: var(--ink); border-color: var(--muted); }
.chip[aria-current="page"] { border-color: var(--ink); background: var(--ink); color: var(--on-ink); }

.section { display: flex; flex-direction: column; gap: 22px; margin-top: 32px; }
.section__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-1) var(--space-6); }
.section__title { font: 400 32px/36px var(--font-display); }

.hero { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); background: var(--iron); border: 1px solid var(--iron-edge); color: var(--on-iron); border-radius: var(--radius-xl); overflow: hidden; }
.hero__media { min-height: 420px; position: relative; background: var(--placeholder); }
.hero__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; aspect-ratio: auto; }
.hero__body { padding: 48px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: var(--space-4); }
.hero__eyebrow { margin: 0; color: var(--iron-honey); letter-spacing: .1em; }
.hero__title { font: 400 56px/58px var(--font-display); text-wrap: balance; }
.hero__lede { font-size: 19px; line-height: 30px; color: var(--on-iron-2); }
.hero__credit { font-size: 13px; color: var(--on-iron-3); }
@media (max-width: 600px) { .hero__body { padding: var(--space-6); } .hero__title { font-size: 40px; line-height: 44px; } .hero__media { min-height: 280px; } }
/* The same split card on paper: the empty Boards and My recipes tabs. */
.hero--paper { grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr)); background: var(--card); border-color: var(--rule); color: var(--ink); }
.hero--paper .hero__media { min-height: 440px; }
.hero--paper .hero__media .mosaic { position: absolute; inset: 0; height: auto; border-radius: 0; }
.hero--paper .hero__body { padding: 48px 52px; gap: 18px; }
.hero--paper .hero__eyebrow { color: var(--persimmon); letter-spacing: .12em; }
.hero--paper .hero__title { font-size: 44px; line-height: 48px; }
.hero--paper .hero__lede { max-width: 480px; font-size: 17px; line-height: 27px; color: var(--ink-soft); }
.hero--paper .inline-form, .hero--paper .starters { align-self: stretch; }
.hero--paper .input { background: var(--paper); }
@media (max-width: 600px) { .hero--paper .hero__media { min-height: 260px; } .hero--paper .hero__body { padding: var(--space-6); } .hero--paper .hero__title { font-size: 34px; line-height: 40px; } }
.starters { display: flex; flex-direction: column; gap: 10px; padding-top: var(--space-2); font-size: 14px; }
.starters__form { margin: 0; }
.starters .chip { min-height: 40px; background: var(--paper); border-color: var(--rule); font-family: inherit; font-size: 14px; cursor: pointer; }
.checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 15px; line-height: 22px; }
.checks li { display: flex; gap: 10px; }
.checks li::before { content: "✓"; color: var(--sage); }
.button--paper { background: var(--on-iron); color: var(--iron); }
.button--paper:hover { background: #fff; color: var(--iron); }

.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-6); }
.tiles--boards { grid-template-columns: repeat(auto-fill, minmax(min(100%, 520px), 1fr)); gap: 36px 28px; }
.tiles--boards .mosaic { height: 340px; border-radius: 20px; }
.tiles--boards .tile__title { margin-top: 10px; font: 400 28px/32px var(--font-display); }
.tiles--boards .tile .muted { font-size: 15px; }
@media (max-width: 600px) { .tiles--boards .mosaic { height: 260px; } }
.tile { display: flex; flex-direction: column; gap: 4px; color: var(--ink); text-decoration: none; }
.tile:hover { color: var(--ink); }
.tile__title { margin-top: 8px; font: 500 21px/25px var(--font-display); }
.mosaic { height: 190px; display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); grid-template-rows: 1fr 1fr; gap: 4px; border-radius: var(--radius-lg); overflow: hidden; }
.mosaic__photo { width: 100%; height: 100%; min-height: 0; object-fit: cover; aspect-ratio: auto; background: var(--placeholder); }
.mosaic > :first-child { grid-row: 1 / 3; }
/* The last row of a 2-column grid: make another. */
.tile-new { grid-column: 1 / -1; padding: 32px 36px; border: 1.5px dashed var(--dash); border-radius: var(--radius-xl); display: flex; flex-wrap: wrap; align-items: center; gap: 20px 40px; color: var(--ink); }
.tile-new__text { flex: 1 1 320px; display: flex; flex-direction: column; gap: 6px; }
.tile-new__title { font: 400 30px/34px var(--font-display); }
.tile-new__action { flex: 1 1 420px; }
@media (max-width: 600px) { .tile-new { padding: var(--space-6); } }

.wall { columns: 4 260px; column-gap: 22px; }
.wall .card { break-inside: avoid; margin-bottom: var(--space-6); }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-6); }
.card { position: relative; display: flex; flex-direction: column; gap: 10px; }
.card__media { position: relative; }
.card__link { display: block; color: var(--ink); text-decoration: none; }
.card__link:hover { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.card__photo { display: block; width: 100%; height: auto; min-height: 160px; border-radius: var(--radius-lg); background: var(--placeholder); object-fit: cover; }
.grid .card__photo { height: 200px; }
.grid--wide { grid-template-columns: repeat(auto-fill, minmax(min(100%, 520px), 1fr)); gap: 28px; }
.grid--wide .card__photo { height: 300px; }
.grid--wide .upload-card { align-items: stretch; }
.card__body { display: flex; flex-direction: column; gap: var(--space-1); }
.card__body strong { color: var(--ink); font-weight: 600; }
.card__title { font: 500 21px/25px var(--font-display); }
.photo--empty { background: var(--placeholder); aspect-ratio: 4 / 3; }
.empty { padding: var(--space-12) 0; display: flex; flex-direction: column; gap: var(--space-2); }
.board-card, .upload-card { display: flex; flex-direction: column; gap: var(--space-2); align-items: flex-start; }
.board-edit { display: flex; flex-direction: column; gap: var(--space-3); }
.board-edit[open] summary { margin-bottom: var(--space-2); }
.board-edit .input { flex: 1 1 200px; max-width: 360px; }

.spotlight { margin-top: 32px; padding: 40px; display: flex; flex-wrap: wrap; align-items: center; gap: 40px; border-radius: var(--radius-xl); background: var(--linen); }
.spotlight__portrait { width: 180px; height: 180px; flex: none; border-radius: var(--radius-pill); object-fit: cover; aspect-ratio: auto; }
.spotlight__body { flex: 1 1 320px; display: flex; flex-direction: column; gap: var(--space-2); }
.spotlight__body .eyebrow { margin: 0; }
.spotlight__note { font: italic 400 17px/27px var(--font-display); color: var(--ink-soft); }
.spotlight .row { margin-top: var(--space-2); }

.recipe { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: var(--space-12); align-items: start; }
.recipe__media { margin: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.recipe__frame { position: relative; }
.recipe__photo { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-xl); background: var(--placeholder); }
.recipe__info { min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.recipe__title { font: 400 54px/58px var(--font-display); text-wrap: pretty; overflow-wrap: anywhere; }
@media (max-width: 600px) { .recipe__title { font-size: 40px; line-height: 44px; } }
.recipe__description { font: italic 400 19px/30px var(--font-display); color: var(--ink-soft); }
.credit { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 12px 14px; background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius-md); font-size: 14px; color: var(--muted); }
.credit strong { color: var(--ink); }
.credit__who { flex: 1 1 180px; min-width: 0; display: flex; flex-direction: column; overflow-wrap: anywhere; }
.credit__initial { flex-shrink: 0; width: 48px; height: 48px; border-radius: var(--radius-pill); background: var(--linen); color: var(--persimmon); display: flex; align-items: center; justify-content: center; font: italic 400 24px/1 var(--font-display); }
.facts { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: var(--space-4); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: var(--space-4) 0; }
.facts dt { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.facts dd { margin: var(--space-1) 0 0; font: 400 24px/30px var(--font-display); }
.tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.tag { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border-radius: var(--radius-pill); background: var(--linen); font-size: 14px; }
.more { display: flex; flex-direction: column; gap: 22px; margin-top: 40px; }
.callout { position: relative; padding: 18px 18px 18px 52px; border-radius: var(--radius-lg); background: var(--linen); font-size: 15px; line-height: 22px; }
.callout__mark { position: absolute; left: 16px; top: 8px; font: 400 56px/1 var(--font-display); color: var(--persimmon); }
.board-picker { position: relative; }
.board-picker summary { list-style: none; cursor: pointer; }
.board-picker summary::-webkit-details-marker { display: none; }
.board-picker__pop { position: absolute; left: 0; top: calc(100% + 8px); z-index: 10; width: min(340px, calc(100vw - 32px)); min-height: 80px; padding: var(--space-3); background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius-lg); box-shadow: 0 16px 32px -20px rgba(42, 33, 28, .4); }
.picker { list-style: none; margin: 0 0 var(--space-2); padding: 0; display: flex; flex-direction: column; gap: 2px; }
.picker form { margin: 0; }
.picker__row { width: 100%; display: flex; align-items: center; gap: 10px; padding: 6px; border: 0; border-radius: 10px; background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.picker__row:hover { background: var(--paper); }
.picker__thumb { width: 40px; height: 40px; flex: none; border-radius: 8px; object-fit: cover; aspect-ratio: auto; }
.picker__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.picker__check { width: 24px; height: 24px; flex: none; border-radius: var(--radius-pill); border: 1.5px solid var(--rule-strong); color: transparent; display: flex; align-items: center; justify-content: center; }
.picker__check.is-on { background: var(--sage); border-color: var(--sage); color: var(--paper); }
.picker__new { display: flex; gap: var(--space-2); margin-bottom: var(--space-2); }
.picker__new .input { flex: 1; min-width: 0; height: 40px; }
.recipe__action { margin: 0; }

.how { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.how__step { display: flex; gap: var(--space-4); align-items: flex-start; }
.how__step h2 { font: italic 400 21px/26px var(--font-display); }
.how__n { width: 36px; height: 36px; flex: none; border-radius: var(--radius-pill); background: var(--linen); color: var(--persimmon); display: flex; align-items: center; justify-content: center; font: 500 18px/1 var(--font-display); }
.badge { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; padding: 5px 12px; border-radius: var(--radius-pill); background: var(--sage-bg); color: var(--sage-ink); font-size: 13px; font-weight: 600; }
.welcome { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: var(--space-12); align-items: center; }
.welcome__text { display: flex; flex-direction: column; gap: 22px; }
.welcome__art { position: relative; margin: 0; }
.welcome__photo { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-xl); }
.welcome__panel { position: absolute; right: 18px; bottom: 18px; width: min(260px, calc(100% - 36px)); }
.now__mini { font: 400 18px/25px var(--font-display); }

/* Our promise to cooks (/authors) */
.sections { display: flex; flex-direction: column; gap: 72px; }
.promise-hero__text { max-width: 860px; display: flex; flex-direction: column; gap: 22px; }
.promise-hero .eyebrow { margin: 0; }
.promise-hero__title { font: 400 68px/70px var(--font-display); text-wrap: balance; }
@media (max-width: 700px) { .promise-hero__title { font-size: 44px; line-height: 48px; } }
.authors { background: var(--iron); border: 1px solid var(--iron-edge); color: var(--on-iron); border-radius: var(--radius-xl); padding: 56px; display: flex; flex-direction: column; gap: 32px; }
@media (max-width: 600px) { .authors { padding: var(--space-6); } }
.authors__title { font: 400 44px/48px var(--font-display); }
.promises { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 32px 40px; }
.promises li { display: flex; gap: var(--space-4); }
.promises__n { flex: none; width: 36px; font: italic 400 40px/44px var(--font-display); color: var(--iron-honey); }
.promises h3 { font: 500 21px/26px var(--font-display); margin-bottom: 6px; }
.promises p { color: var(--on-iron-2); }
.lives, .contacts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: var(--space-6); }
.lives__card, .contact { padding: 32px; border-radius: var(--radius-xl); background: var(--card); border: 1px solid var(--rule); display: flex; flex-direction: column; gap: var(--space-3); }
.lives__card--ink, .contact--ink { background: var(--iron); border-color: var(--iron-edge); color: var(--on-iron); }
.contact--ink a { color: var(--iron-link); }
.ticks { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.roads { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; border-top: 1px solid var(--rule); }
.roads li { display: flex; flex-wrap: wrap; gap: 8px 48px; padding: 28px 0; border-bottom: 1px solid var(--rule); }
.roads h3 { flex: 0 1 300px; font: italic 400 30px/34px var(--font-display); color: var(--persimmon); }
.roads p { flex: 1 1 420px; font-size: 18px; line-height: 28px; color: var(--ink-soft); }
.beside { margin: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.beside__window { border: 1px solid var(--rule); border-radius: var(--radius-md); background: var(--card); overflow: hidden; }
.beside__bar { padding: 10px var(--space-4); border-bottom: 1px solid var(--rule); background: var(--paper); }
.beside__url { display: flex; align-items: center; height: 28px; padding: 0 14px; border: 1px solid var(--rule); border-radius: var(--radius-pill); background: var(--card); font-size: 13px; color: var(--muted); }
.beside__body { display: flex; flex-wrap: wrap; }
.beside__page { flex: 1 1 380px; padding: var(--space-6); display: flex; flex-direction: column; gap: 14px; }
.beside__panel { flex: 1 1 260px; max-width: 320px; border-left: 1px solid var(--rule); background: var(--paper); padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.beside__block { height: 120px; border-radius: 10px; background: var(--persimmon-soft); display: flex; align-items: center; justify-content: center; font-size: 13px; color: var(--muted); }
.beside__block--ad { height: 64px; background: none; border: 1px dashed var(--muted); }
.beside__lines { display: flex; flex-direction: column; gap: 6px; }
.beside__lines span { height: 10px; border-radius: 4px; background: var(--rule); }
.beside__lines span:nth-child(2) { width: 88%; }
.beside__lines span:nth-child(3) { width: 66%; }
/* saffron = now, always with the NOW label */
.beside__now { outline: 3px solid var(--honey); outline-offset: 4px; border-radius: 4px; background: var(--honey-bg); }
.beside__card { background: var(--card); border: 1px solid var(--rule); border-radius: 10px; padding: 12px; display: flex; flex-direction: column; gap: 6px; }
.beside__caption { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-6); font-size: 15px; line-height: 22px; }
@media (max-width: 700px) { .beside__panel { max-width: none; border-left: 0; border-top: 1px solid var(--rule); } }

/* Accounts */
.auth { max-width: 460px; display: flex; flex-direction: column; gap: var(--space-4); }
.panel .auth { max-width: none; height: 100%; overflow-y: auto; padding: var(--space-6) var(--space-4); }
.auth__title { font: 400 44px/48px var(--font-display); }
.auth--card { align-self: center; width: 100%; padding: 32px; border-radius: var(--radius-xl); background: var(--linen); }
.auth--card .input { background: var(--card); }
.panel .auth--card { border-radius: 0; background: none; }
.auth__form { display: flex; flex-direction: column; gap: var(--space-2); font-weight: 600; font-size: 14px; }
.input { height: 52px; border: 1px solid var(--rule-strong); border-radius: var(--radius-input); padding: 0 14px; background: var(--card); color: var(--ink); font: inherit; font-size: 16px; font-weight: 400; }
.input--code { height: 64px; border: 2px solid var(--persimmon); font: 500 32px/1 var(--font-display); letter-spacing: .4em; text-align: center; font-variant-numeric: tabular-nums; }
textarea.input { height: auto; padding: 12px 14px; line-height: 22px; }
.auth__form .button { margin-top: var(--space-2); }
.alert { padding: 10px 14px; border-radius: var(--radius-sm); background: var(--persimmon-soft); color: var(--persimmon); font-weight: 600; font-size: 14px; }
.flash { padding: 10px 14px; border-radius: var(--radius-sm); background: var(--card); border: 1px solid var(--rule); font-weight: 600; font-size: 14px; align-self: flex-start; }
.avatar { width: 36px; height: 36px; border-radius: var(--radius-pill); background: var(--persimmon-soft); color: var(--persimmon); display: inline-flex; align-items: center; justify-content: center; font-weight: 600; }
.account-menu { position: relative; }
.account-menu summary { list-style: none; cursor: pointer; }
.account-menu summary::-webkit-details-marker { display: none; }
.account-menu__list { position: absolute; right: 0; top: calc(100% + 8px); z-index: 10; min-width: 220px; background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius-md); padding: var(--space-4); display: flex; flex-direction: column; gap: 12px; font-weight: 600; box-shadow: 0 8px 24px rgb(0 0 0 / .08); }
.account-menu__list a { color: var(--ink); text-decoration: none; }
.account-menu__list form { margin: 0; }

.favorite form { margin: 0; }
.favorite__button { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: var(--radius-pill); border: 1px solid var(--rule);
  background: var(--card); color: var(--ink); font: inherit; font-size: 14px; font-weight: 600; text-decoration: none; cursor: pointer; white-space: nowrap; }
.favorite__button:hover { color: var(--ink); border-color: var(--muted); }
.favorite__button.is-saved { border-color: var(--persimmon); background: var(--persimmon); color: var(--on-persimmon); }
.favorite__button.is-saved .icon { fill: currentColor; }
.favorite__button { gap: 6px; }
.cook-head .favorite__button.is-saved { background: var(--card); border-color: var(--rule); color: var(--persimmon); }
.card { position: relative; }
.favorite--card { position: absolute; top: 10px; right: 10px; }
.favorite--card .favorite__button { border-color: transparent; }
.favorite--card .favorite__button.is-saved { border-color: var(--persimmon); }
.recipe__actions, .recipe__owner, .row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.recipe__owner form { margin: 0; }
.yours { display: flex; flex-direction: column; gap: var(--space-4); padding: 18px; background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius-lg); }
.stars-form { display: flex; flex-direction: column; gap: 4px; }
.stars { display: flex; }
.star { width: 40px; height: 40px; border: 0; background: none; padding: 0; font-size: 28px; line-height: 1; color: var(--rule); cursor: pointer; }
.star.is-on { color: var(--persimmon); }
.stars:hover .star { color: var(--persimmon); }
.stars .star:hover ~ .star { color: var(--rule); }
.note-form { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: 14px; }
.note-form .button { align-self: flex-start; }
.share { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.share__button { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 16px; border-radius: var(--radius-pill); border: 1px solid var(--rule);
  background: var(--card); color: var(--ink); font: inherit; font-size: 14px; font-weight: 600; text-decoration: none; cursor: pointer; }
.share__button:hover { color: var(--ink); border-color: var(--muted); }
.tabs { display: flex; gap: var(--space-2); overflow-x: auto; scrollbar-width: none; } /* one row; scrolls sideways on a phone */
.tab { flex: none; display: inline-flex; align-items: center; height: 42px; padding: 0 18px; border-radius: var(--radius-pill); color: var(--muted); font-size: 15px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.tab:hover { color: var(--ink); }
.tab[aria-current="page"] { background: var(--ink); color: var(--on-ink); }
.cooked { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; max-width: 860px; }
.cooked__item { display: flex; flex-wrap: wrap; gap: var(--space-6); padding: var(--space-6) 0; border-bottom: 1px solid var(--rule); }
.cooked__date { width: 96px; flex: none; display: flex; flex-direction: column; }
.cooked__day { font: 400 34px/38px var(--font-display); }
.cooked__photo { width: 140px; height: 140px; flex-shrink: 0; object-fit: cover; aspect-ratio: auto; border-radius: var(--radius-md); background: var(--placeholder); }
.cooked__body { flex: 1 1 260px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cooked__title { font: 500 21px/25px var(--font-display); color: var(--ink); text-decoration: none; }
.cooked__note { font: italic 400 17px/25px var(--font-display); color: var(--ink-soft); }
.upload { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: var(--space-12); align-items: start; }
.upload > .upload-form { grid-column: span 1; }
@media (min-width: 900px) { .upload { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); } .upload__intro { position: sticky; top: 28px; } }
.upload-form { display: flex; flex-direction: column; gap: var(--space-2); padding: 28px; background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius-lg); font-weight: 600; font-size: 14px; min-width: 0; }
.upload-form__top { display: flex; flex-wrap: wrap; gap: var(--space-6); margin-bottom: var(--space-4); }
.upload-form__photo { flex: 0 0 200px; height: 200px; border: 1.5px dashed var(--dash); border-radius: var(--radius-md); background: var(--card); display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 8px; text-align: center; color: var(--muted); font-weight: 400; cursor: pointer; overflow: hidden; position: relative; }
.upload-form__photo:focus-within { outline: 2px solid var(--persimmon); outline-offset: 2px; }
.upload-form__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .35; }
.upload-form__photo span { position: relative; }
.upload-form__fields { flex: 1 1 300px; display: flex; flex-direction: column; gap: var(--space-2); }
.upload-form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.upload-form__row div { display: flex; flex-direction: column; gap: var(--space-2); }
.upload-form textarea.input { margin-bottom: var(--space-4); }
.upload-form__visibility { border: 0; padding: 0; margin: 0 0 var(--space-4); display: flex; flex-direction: column; gap: 12px; }
.upload-form__visibility label { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border: 1px solid var(--rule); border-radius: var(--radius-md); font-weight: 400; font-size: 15px; cursor: pointer; }
.upload-form__visibility label:has(input:checked) { border: 2px solid var(--ink); padding: 11px; }
.full-recipe { display: flex; flex-wrap: wrap; gap: var(--space-12); margin-top: var(--space-6); }
.full-recipe__col { flex: 1 1 300px; min-width: 0; }
.full-recipe__col:last-child { flex-basis: 480px; }
.full-recipe__ingredients { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.full-recipe__steps { margin: 0; padding-left: 1.4em; display: flex; flex-direction: column; gap: 14px; font-size: 17px; line-height: 26px; }
.shared { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: var(--space-12); align-items: center; padding: var(--space-12); background: var(--iron); border: 1px solid var(--iron-edge); color: var(--on-iron); border-radius: var(--radius-xl); }
@media (max-width: 600px) { .shared { padding: var(--space-6); } }
.shared__photo { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-lg); background: var(--iron-rule); }
.shared__info { min-width: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.shared .eyebrow { margin: 0; color: var(--iron-honey); }
.shared .muted { color: var(--on-iron-3); }
.shared a:not(.button):not(.share__button) { color: var(--iron-link); }
.shared .credit { background: transparent; border-color: var(--iron-rule-2); color: var(--on-iron-2); }
.shared .credit strong { color: var(--on-iron); }
.shared .credit__initial { background: var(--iron-rule); color: var(--iron-link); }
.shared__stars { font-size: 24px; color: var(--honey); }

/* Extension panel (cook mode and idle), 360 to 480 wide. The header and footer stay; one tab scrolls between them. */
.panel { height: 100vh; height: 100dvh; overflow: hidden; }
.cook { height: 100vh; height: 100dvh; display: flex; flex-direction: column; }
.cook__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: var(--space-6) 22px; display: flex; flex-direction: column; gap: var(--space-6); } /* idle panel */
.panel-footer { margin-top: auto; border-top: 1px solid var(--rule); padding-top: var(--space-2); }
.cook__flash { flex: none; margin: 10px 18px 0; align-self: stretch; }

.cook-head { flex: none; padding: 14px 18px 12px; display: flex; flex-direction: column; gap: 12px; border-bottom: 1px solid var(--rule); }
.cook-head__who { display: flex; align-items: center; gap: 10px; }
.cook-head__initial { width: 28px; height: 28px; flex: none; border-radius: var(--radius-pill); background: var(--linen); color: var(--persimmon); display: flex; align-items: center; justify-content: center; font: italic 400 15px/1 var(--font-display); }
.cook-head__byline { flex: 1 1 auto; min-width: 0; font-size: 13px; line-height: 17px; color: var(--muted); overflow-wrap: anywhere; }
.cook-head__byline strong { color: var(--ink); }
.cook-head__recipe { display: flex; align-items: center; gap: 12px; }
.cook-head__photo { width: 56px; height: 56px; flex: none; border-radius: 10px; object-fit: cover; aspect-ratio: auto; background: var(--rule); }
.cook-head__title { font: 500 22px/26px var(--font-display); text-wrap: pretty; }
.cook-head .favorite__button { width: 36px; min-height: 36px; padding: 0; justify-content: center; color: var(--persimmon); }
.cook-head .favorite__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.cook-tabs { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.cook-tab { flex: none; height: 30px; padding: 0 12px; border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--muted); font-size: 13px; font-weight: 600; }
.cook-tab[aria-selected="true"] { background: var(--ink); color: var(--on-ink); }
.icon-toggle { flex: none; width: 36px; height: 36px; padding: 0; border-radius: var(--radius-pill); border: 1px solid var(--rule); background: var(--card); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.icon-toggle[aria-pressed="true"] { border-color: var(--persimmon); background: var(--persimmon-soft); color: var(--persimmon); }
/* Tooltips on the panel's icon buttons: CSS, so they show at once, on keyboard focus too, inside the side panel. */
.cook-head [data-tip] { position: relative; }
.cook-head [data-tip]:is(:hover, :focus-visible)::after { content: attr(data-tip); position: absolute; top: calc(100% + 6px); right: 0; z-index: 10; width: max-content; max-width: 220px; padding: 6px 10px; border-radius: 8px; background: var(--ink); color: var(--on-ink); font: 500 13px/1.35 system-ui, sans-serif; text-align: left; white-space: normal; pointer-events: none; }

.cook-panel { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 22px 22px 18px; display: flex; flex-direction: column; gap: 18px; }
.cook-panel__title { font: 500 28px/32px var(--font-display); }
.cook-panel a.strong, .cook__body a.strong { text-decoration: none; }
.cook-panel__foot { position: sticky; bottom: -18px; z-index: 1; margin: auto -22px -18px; padding: 12px 18px 16px; border-top: 1px solid var(--rule); background: var(--paper); display: flex; flex-direction: column; gap: 8px; }
.cook-panel__foot > .button { min-height: 52px; font-size: 16px; }
.cook.is-finished[data-tab="cook"] .cook-head { display: none; } /* the finish hero takes over */
.cook-section { display: flex; flex-direction: column; gap: var(--space-2); }
.cook-section .eyebrow { margin: 0; }
.cook__credit { margin-top: auto; font-size: 12px; line-height: 16px; color: var(--muted); }
.cook-settings { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }

/* The Cook tab: the current step, large enough to read from the stove */
.now { flex: 1 0 auto; display: flex; flex-direction: column; gap: 18px; }
.now__top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.now__count { margin: 0; display: flex; align-items: center; gap: var(--space-2); color: var(--honey-ink); letter-spacing: .08em; }
.now__label { padding: 3px 8px; border-radius: 4px; background: var(--honey-bg); } /* honey never stands alone: it says NOW */
.now__all { border: 0; background: none; padding: 0; color: var(--muted); font-size: 13px; text-decoration: underline; text-underline-offset: 3px; }
.now__section { font: italic 400 17px/22px var(--font-display); color: var(--ink-soft); }
.now__text { font: 400 27px/37px var(--font-display); text-wrap: pretty; overflow-wrap: anywhere; }
.now__uses { background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius-md); padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.now__uses .eyebrow, .now__next .eyebrow { margin: 0; letter-spacing: .08em; }
.now__uses ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.now__uses li { display: flex; gap: 12px; align-items: baseline; font-size: 16px; line-height: 22px; }
.now__uses strong { flex: none; min-width: 92px; font-weight: 600; }
.now__next { margin-top: auto; display: flex; flex-direction: column; gap: 4px; padding-top: 14px; border-top: 1px dashed var(--rule-strong); }
.now__next p { font-size: 15px; line-height: 22px; color: var(--muted); }
.timer-button { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; padding: 0 18px; border: 1px solid var(--ink); border-radius: var(--radius-pill); background: transparent; color: var(--ink); font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.timer-button.is-running { background: var(--honey-bg); border-color: #E8C27A; color: var(--honey-ink); }
.choice { display: flex; align-self: flex-start; padding: 3px; border-radius: var(--radius-pill); background: var(--linen); }
.choice__option { min-height: 30px; padding: 0 14px; border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--ink); font-size: 13px; font-weight: 600; }
.choice__option[aria-pressed="true"] { background: var(--card); }

.cook__foot { flex: none; padding: 12px 18px 16px; border-top: 1px solid var(--rule); background: var(--paper); display: flex; flex-direction: column; gap: 12px; }
.cook[data-tab="prep"] .cook__foot, .cook[data-tab="notes"] .cook__foot, .cook[data-tab="ask"] .cook__foot { display: none; }
.cook__nav { display: flex; gap: var(--space-2); }
.cook__nav .button { min-height: 52px; font-size: 16px; }
.cook__nav .button--ghost:disabled { color: #B5A898; border-color: var(--rule); cursor: default; background: transparent; }
.dots { display: flex; gap: 3px; }
.dot { flex: 1; height: 5px; border-radius: var(--radius-pill); background: var(--rule); }
.dot.is-done { background: var(--sage); }
.dot.is-now { background: var(--honey); }
.progress { height: 5px; border-radius: var(--radius-pill); background: var(--rule); overflow: hidden; }
.progress__bar { height: 100%; width: 0; background: var(--sage); transition: width .15s ease; }
.button--small { min-height: 36px; padding: 0 14px; font-size: 13px; }

.stepper { display: inline-flex; align-items: center; height: 36px; border: 1px solid var(--rule); border-radius: var(--radius-pill); background: var(--card); }
.stepper__btn { width: 36px; display: flex; align-items: center; justify-content: center; color: var(--ink); font-size: 17px; text-decoration: none; }
.stepper__btn:hover { color: var(--persimmon); }
.stepper__btn[aria-disabled="true"] { pointer-events: none; color: var(--muted); }
.stepper__value { min-width: 74px; text-align: center; font-size: 14px; font-weight: 600; }

.timers { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.timers:empty { display: none; }
.cook > .timers { flex: none; padding: 10px 18px; border-bottom: 1px solid var(--rule); }
.timer { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); min-height: 44px; padding: 0 var(--space-2) 0 var(--space-4);
  border-radius: var(--radius-pill); background: var(--honey-bg); color: var(--honey-ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.timer.is-ringing { background: var(--persimmon); color: var(--on-persimmon); animation: ring 1s ease-in-out infinite; }
.timer__close { min-height: 32px; padding: 0 12px; border: 0; border-radius: var(--radius-pill); background: transparent; color: inherit; font-weight: 600; text-decoration: underline; }
@keyframes ring { 50% { opacity: .75; } }

.steps, .ingredients { list-style: none; margin: 0; padding: 0; }
.ingredients__group { margin: 12px 0 2px; font: italic 400 17px/22px var(--font-display); color: var(--ink-soft); }
.ingredients__group:first-child { margin-top: 0; }
.ingredient { display: flex; gap: 12px; align-items: baseline; padding: 9px 10px; border-bottom: 1px solid var(--rule); font-size: 15px; line-height: 21px; }
.ingredient__amount { flex: none; min-width: 96px; font-weight: 600; }
.ingredient__name { min-width: 0; overflow-wrap: anywhere; }
.ingredient.is-now { background: var(--honey-bg); border-color: transparent; border-radius: 10px; }
.ingredient.is-now + .ingredient.is-now { margin-top: 6px; }
.ingredient.is-now .ingredient__name { font-weight: 600; }
.ingredient.is-used { color: var(--muted); text-decoration: line-through; }
.all-steps { align-items: center; margin-top: var(--space-2); }
.all-steps .eyebrow { margin: 0; }
.steps { display: flex; flex-direction: column; }
.steps__section { padding: 10px 0 2px; font: italic 400 17px/22px var(--font-display); color: var(--ink-soft); }
.step { display: flex; gap: 10px; align-items: flex-start; padding: 10px 6px; border-bottom: 1px solid var(--rule); }
.step__body { min-width: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.step .step__timer { display: none; } /* the Cook tab shows a copy */
.step__text { all: unset; cursor: pointer; font-size: 15px; line-height: 22px; overflow-wrap: anywhere; }
.step__text:focus-visible { outline: 2px solid var(--persimmon); outline-offset: 2px; }
.step__n { font-weight: 600; }
.step.is-done .step__text { color: var(--muted); text-decoration: line-through; }
.step.is-now { background: var(--honey-bg); border-color: transparent; border-radius: 10px; }
.check { flex-shrink: 0; width: 22px; height: 22px; padding: 0; border-radius: 7px; border: 1.5px solid var(--rule-strong); background: var(--card); color: transparent;
  display: flex; align-items: center; justify-content: center; position: relative; }
.check::after { content: ""; position: absolute; inset: -11px; } /* 44px touch target */
.step.is-done .check { background: var(--sage); border-color: var(--sage); color: var(--paper); }

/* Finished */
.finished { flex: 1 0 auto; margin: -22px -22px 0; display: flex; flex-direction: column; gap: 18px; }
.finished > :not(.finished__hero) { margin-left: 22px; margin-right: 22px; }
.finished__hero { position: relative; height: 220px; display: flex; align-items: flex-end; background: var(--iron); overflow: hidden; }
.finished__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; aspect-ratio: auto; }
.finished__hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 30%, rgba(35, 28, 23, .82)); }
.finished__words { position: relative; z-index: 1; padding: 18px 22px; display: flex; flex-direction: column; gap: 4px; color: var(--on-iron); }
.finished__byline { font-size: 13px; font-weight: 600; }
.finished__text { font: 400 30px/34px var(--font-display); }
.finished .stack { padding-top: 14px; border-top: 1px solid var(--rule); }
.finished .eyebrow { margin: 0; font-size: 13px; letter-spacing: 0; text-transform: none; color: var(--ink); }
.finished .share { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); }
.finished .share__button { padding: 0 8px; }
.finish-form { display: flex; flex-direction: column; gap: 10px; font-weight: 600; font-size: 13px; }
.star-input { border: 0; margin: 0; padding: 0; display: flex; flex-direction: row-reverse; justify-content: flex-end; }
.star-input input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.star-input label { font-size: 36px; line-height: 44px; width: 34px; text-align: center; color: var(--rule-strong); cursor: pointer; }
.star-input input:checked ~ label, .star-input label:hover, .star-input label:hover ~ label { color: var(--persimmon); }
.star-input input:focus-visible + label { outline: 2px solid var(--persimmon); outline-offset: -4px; border-radius: var(--radius-sm); }
.finish-form .input { height: auto; min-height: 52px; font-size: 16px; }
.finish-form__hint { font-weight: 400; margin-top: -4px; }
.photo-tile { position: relative; display: flex; align-items: center; gap: 10px; margin: 8px 0; font-size: 13px; line-height: 18px; font-weight: 400; cursor: pointer; }
.photo-tile__box { width: 66px; height: 66px; flex: none; border: 1.5px dashed var(--dash); border-radius: var(--radius-md); color: var(--muted); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.photo-tile__box img { width: 100%; height: 100%; object-fit: cover; }
.photo-tile:focus-within .photo-tile__box { outline: 2px solid var(--persimmon); outline-offset: 2px; }
.board-chips { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.board-chips legend { padding: 0 0 8px; font-size: 13px; font-weight: 600; }
.board-chip { display: inline-flex; cursor: pointer; }
.board-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.board-chip span { display: inline-flex; align-items: center; min-height: 38px; padding: 0 14px; border-radius: var(--radius-pill); border: 1px solid var(--rule-strong); background: var(--card); font-size: 14px; font-weight: 600; }
.board-chip input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.board-chip input:checked + span::before { content: "✓ "; white-space: pre; }
.board-chip input:focus-visible + span { outline: 2px solid var(--persimmon); outline-offset: 2px; }
.board-new { display: contents; }
.board-new summary { list-style: none; display: inline-flex; align-items: center; min-height: 38px; padding: 0 14px; border-radius: var(--radius-pill); border: 1px solid var(--rule-strong); background: var(--card); font-size: 14px; font-weight: 600; cursor: pointer; }
.board-new summary::-webkit-details-marker { display: none; }
.board-new[open] summary { display: none; }
.board-new .input { flex: 1 1 100%; min-height: 44px; height: 44px; }
.my-note { padding: 10px 12px; border-radius: 10px; background: var(--linen); font-size: 13px; line-height: 18px; }

.mini-card { display: flex; gap: 14px; padding: 6px 0; color: var(--ink); text-decoration: none; }
.mini-card:hover { color: var(--ink); }
.idle__title { font: italic 400 20px/26px var(--font-display); }
.cook__body > .logo { --logo: 20px; }
.note h2 { font: 500 19px/24px var(--font-display); }
.cook__body > .note { margin-top: auto; }
.cook__body > .note + .panel-footer { margin-top: 0; }
.mini-card__photo, .mini-card .photo--empty { width: 84px; height: 84px; flex-shrink: 0; object-fit: cover; border-radius: 10px; background: var(--rule); aspect-ratio: auto; }
.mini-card__body { display: flex; flex-direction: column; justify-content: center; gap: var(--space-1); }
.mini-card__title { font: 500 18px/22px var(--font-display); }
.note { background: var(--linen); border-radius: var(--radius-md); padding: var(--space-4); }

@media (prefers-reduced-motion: reduce) { .timer.is-ringing { animation: none; } .progress__bar { transition: none; } }

/* Admin: review queue */
.review-site { display: flex; flex-direction: column; gap: var(--space-4); padding-top: var(--space-6); border-top: 1px solid var(--rule); }
.review-site__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-4); }
.review-site__host { font: 500 22px/28px var(--font-display); margin: 0; }
.review-site__actions, .review-item__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.review-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.review-item { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; gap: var(--space-4); padding: var(--space-2); background: var(--card); border: 1px solid var(--rule); border-radius: 12px; }
.review-item__img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; background: var(--rule); }
.review-item__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.review-item__name { font-weight: 600; color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.review-item__name:hover { color: var(--persimmon); }
.review-item__note { font-size: 13px; color: var(--persimmon); }
@media (max-width: 560px) { .review-item { grid-template-columns: 48px minmax(0, 1fr); } .review-item__img { width: 48px; height: 48px; } .review-item__actions { grid-column: 1 / -1; } }

/* Notes tab */
.chip-toggle { min-height: 32px; padding: 0 12px; border-radius: var(--radius-pill); border: 1px solid var(--rule); background: var(--card); color: var(--ink); font-family: inherit; font-size: 13px; font-weight: 600; line-height: 1; cursor: pointer; }
.author-notes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font: italic 400 19px/27px var(--font-display); color: var(--ink-soft); }
.author-notes__heading { margin-top: 6px; font: 600 14px/20px var(--font-sans); color: var(--ink); }
.nutrition { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(62px, 1fr)); gap: var(--space-3) var(--space-2); padding: 14px; background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius-md); }
.nutrition div { display: flex; flex-direction: column; min-width: 0; }
.nutrition dd { margin: 2px 0 0; font-size: 16px; line-height: 22px; font-weight: 600; white-space: nowrap; }
.nutrition dt { font-size: 12px; line-height: 16px; color: var(--muted); }
.tools { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.tools li { padding: 6px 12px; border-radius: var(--radius-pill); background: var(--linen); font-size: 14px; }

/* Units: As written · Metric · US */
.segmented { display: inline-flex; height: 36px; padding: 3px; border-radius: var(--radius-pill); background: var(--linen); }
.segmented__option { display: flex; align-items: center; padding: 0 10px; border-radius: var(--radius-pill); font-size: 13px; font-weight: 600; color: var(--ink); text-decoration: none; }
.segmented__option[aria-current="true"] { background: var(--card); }
.segmented__option:focus-visible { outline: 2px solid var(--persimmon); outline-offset: -2px; }
.scale-note { padding: 10px 12px; border-radius: 10px; background: var(--honey-bg); color: var(--honey-ink); font-size: 13px; line-height: 18px; }
.list-row { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: 10px 14px; border: 1px solid var(--rule); border-radius: var(--radius-md); background: var(--card); color: var(--ink); font: inherit; text-align: left; text-decoration: none; cursor: pointer; }
.list-row:hover strong { color: var(--persimmon); }
.list-row__form { margin: 0; }
.list-row__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.list-row__text strong { font-size: 15px; }
.list-row__icon { flex: none; color: var(--muted); font-size: 18px; }

/* Get ready: prep checklist */
.prep { padding-bottom: 18px; }
.prep__progress { display: flex; align-items: center; gap: 12px; }
.prep__progress .progress { flex: 1; }
.prep__count { flex: none; font-size: 13px; font-weight: 600; color: var(--sage); }
.prep-item { display: flex; gap: 12px; align-items: flex-start; padding: 8px 0; font-size: 16px; line-height: 21px; cursor: pointer; }
.prep-item input { appearance: none; flex: none; width: 22px; height: 22px; margin: 0; border: 1.5px solid var(--rule-strong); border-radius: 7px; background: var(--card) center / 14px no-repeat; cursor: pointer; }
.prep-item input:checked { border-color: var(--sage); background-color: var(--sage); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }
.prep-item input:focus-visible { outline: 2px solid var(--persimmon); outline-offset: 2px; }
.prep-item:has(input:checked) span { color: var(--muted); text-decoration: line-through; }

/* Shopping list */
.list-added { margin: 0 0 var(--space-2); }
.list-aisle__title { margin-bottom: 4px; font: italic 400 22px/28px var(--font-display); }
.list-layout { display: flex; flex-wrap: wrap; gap: var(--space-12); align-items: flex-start; }
.list-aisles { flex: 999 1 560px; min-width: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 520px), 1fr)); gap: 28px 40px; }
.list-aisle .eyebrow { margin: 0 0 4px; }
.list-items { list-style: none; margin: 0; padding: 0; }
.list-item__form { margin: 0; }
.list-item__toggle { width: 100%; display: flex; gap: 12px; align-items: flex-start; padding: 9px 0; border: 0; border-bottom: 1px solid var(--rule); background: none; color: var(--ink); font: inherit; font-size: 16px; line-height: 22px; text-align: left; cursor: pointer; }
.list-item__box { flex: none; width: 24px; height: 24px; border-radius: 7px; border: 1.5px solid var(--rule-strong); background: var(--card); display: flex; align-items: center; justify-content: center; color: var(--paper); }
.list-item.is-checked .list-item__box { border-color: var(--sage); background: var(--sage); }
.list-item.is-checked .list-item__text { color: var(--muted); text-decoration: line-through; }
.list-item__from { display: block; font-size: 13px; color: var(--muted); }
.list-recipes { flex: 1 1 280px; min-width: 0; padding: 20px; background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius-lg); display: flex; flex-direction: column; gap: var(--space-2); }
.list-recipe { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-2); padding: 10px 0; border-bottom: 1px solid var(--rule); }

/* Hands-free: the whole panel is cast iron while you're on a step */
.handsfree { flex: none; display: none; }
.cook.is-handsfree:not(.is-finished)[data-tab="cook"] .handsfree:not([hidden]) { display: flex; flex-direction: column; gap: var(--space-3); padding: 22px 22px 0; }
.cook.is-handsfree:not(.is-finished)[data-tab="cook"] { background: var(--iron); color: var(--on-iron); }
.cook.is-handsfree:not(.is-finished)[data-tab="cook"] .cook-head { border-color: var(--iron-rule); }
.cook.is-handsfree:not(.is-finished)[data-tab="cook"] .cook-head__byline, .cook.is-handsfree:not(.is-finished)[data-tab="cook"] .cook-head__byline strong { color: var(--on-iron-2); }
.cook.is-handsfree:not(.is-finished)[data-tab="cook"] .cook-tab:not([aria-selected="true"]) { color: var(--on-iron-3); }
.cook.is-handsfree:not(.is-finished)[data-tab="cook"] .cook-tab[aria-selected="true"] { background: var(--on-iron); color: var(--iron); }
.cook.is-handsfree:not(.is-finished)[data-tab="cook"] .now__count { color: var(--iron-honey); }
.cook.is-handsfree:not(.is-finished)[data-tab="cook"] .now__label { background: none; padding: 0; }
.cook.is-handsfree:not(.is-finished)[data-tab="cook"] .now__text { font-size: 34px; line-height: 44px; }
.cook.is-handsfree:not(.is-finished)[data-tab="cook"] .now__all, .cook.is-handsfree:not(.is-finished)[data-tab="cook"] .now__next p, .cook.is-handsfree:not(.is-finished)[data-tab="cook"] .cook__credit, .cook.is-handsfree:not(.is-finished)[data-tab="cook"] .eyebrow:not(.now__count) { color: var(--on-iron-3); }
.cook.is-handsfree:not(.is-finished)[data-tab="cook"] .dot:not(.is-done, .is-now) { background: var(--iron-rule-2); }
.cook.is-handsfree:not(.is-finished)[data-tab="cook"] .now__uses { background: transparent; border-color: var(--iron-rule-2); }
.cook.is-handsfree:not(.is-finished)[data-tab="cook"] .timer-button:not(.is-running) { border-color: var(--on-iron-3); color: var(--on-iron); }
.cook.is-handsfree:not(.is-finished)[data-tab="cook"] .cook__foot { background: var(--iron); border-color: var(--iron-rule); }
.cook.is-handsfree:not(.is-finished)[data-tab="cook"] .cook__nav .button--ghost:not(:disabled) { color: var(--on-iron); border-color: var(--iron-rule-2); }
.handsfree a { color: var(--iron-link); }
.handsfree p { font-size: 15px; line-height: 22px; }
.handsfree__mic { width: 52px; height: 52px; border-radius: var(--radius-pill); background: #A9482A; color: #FFFCF7; display: flex; align-items: center; justify-content: center; margin: 18px; box-shadow: 0 0 0 8px rgba(169, 72, 42, .25), 0 0 0 18px rgba(169, 72, 42, .1); }
.handsfree__commands { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.handsfree__commands li { padding: 5px 12px; border: 1px solid var(--iron-rule-2); border-radius: var(--radius-pill); font-size: 13px; }

/* Ask about this recipe */
.ask__thread { display: flex; flex-direction: column; gap: 12px; }
.ask__thread:empty { display: none; }
.ask__exchange { display: flex; flex-direction: column; gap: 6px; }
.ask__question { margin: 0; align-self: flex-end; max-width: 85%; padding: 10px 14px; border-radius: 18px 18px 4px 18px; background: var(--ink); color: var(--on-ink); font-size: 15px; line-height: 21px; overflow-wrap: anywhere; }
.ask__answer { align-self: flex-start; max-width: 92%; padding: 12px 14px; border-radius: 18px 18px 18px 4px; background: var(--card); border: 1px solid var(--rule); font-size: 15px; line-height: 22px; }
.ask__answer p { margin: 0 0 8px; }
.ask__answer p:last-child { margin: 0; }
.ask__answer--note { color: var(--muted); }
.ask__body { flex: 1 0 auto; display: flex; flex-direction: column; gap: 16px; }
.ask__body > .cook-panel__foot { margin-top: 0; }
.ask__thread { flex: 1 0 auto; }
.ask__try { margin-top: auto; }
.ask__try-title { font-size: 13px; font-weight: 400; color: var(--muted); }
.ask__suggestions { display: flex; flex-wrap: wrap; gap: 8px; }
.ask__suggestions .chip-toggle { min-height: 34px; font-weight: 400; font-size: 14px; text-align: left; line-height: 1.3; padding: 6px 12px; }
.ask__row { display: flex; gap: 8px; }
.ask__input { flex: 1; min-width: 0; height: 48px; border-radius: var(--radius-pill); }
.ask__row .button { min-height: 48px; }

.sage { color: var(--sage); }
.auth__back { align-self: flex-start; text-decoration: none; font-size: 14px; }

/* Close your account */
.account { display: flex; flex-wrap: wrap; gap: var(--space-12); align-items: flex-start; }
.account > .auth { flex: 1 1 320px; min-width: 0; overflow-wrap: anywhere; }
/* Your account: one 880px column of cards */
.settings { width: 100%; max-width: 880px; margin: 0 auto; display: flex; flex-direction: column; gap: 32px; }
.settings__head { display: flex; flex-direction: column; gap: var(--space-2); overflow-wrap: anywhere; }
.settings__card { min-width: 0; overflow-wrap: anywhere; padding: 36px 40px; background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius-xl); display: flex; flex-direction: column; gap: 18px; }
.settings__card--row { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 20px 32px; }
.settings__card--row .settings__text { flex: 1 1 360px; }
.settings__card--row form { margin: 0; }
.settings__text { display: flex; flex-direction: column; gap: 6px; }
.settings__title { font: 400 30px/36px var(--font-display); }
.settings__card .input { background: var(--paper); }
.settings__card .auth__form .button { margin-top: 0; }
.settings__close { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: var(--space-2) var(--space-1) 0; font-size: 15px; }
@media (max-width: 600px) { .settings__card { padding: var(--space-6) 20px; } }
.input--big { height: 54px; padding: 0 18px; border-radius: var(--radius-md); font-size: 17px; }
.input--pill { height: 54px; padding: 0 22px; border-radius: var(--radius-pill); }
.token-new { padding: 20px; border-radius: var(--radius-md); background: var(--card); border: 1px solid var(--rule); display: flex; flex-direction: column; gap: 12px; }
.token-new p { margin: 0; }
.tokens { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; border-top: 1px solid var(--rule); }
.tokens li { display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap; padding: 14px 0; border-bottom: 1px solid var(--rule); font-size: 15px; }
.tokens__name { flex: 1 1 240px; display: flex; flex-direction: column; gap: 2px; }
.tokens__revoke { margin: 0; }

/* Code snippets with a Copy button (always dark, like the authors block) */
.snippet { background: var(--iron); border: 1px solid var(--iron-edge); color: var(--on-iron); border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.snippet__head { display: flex; justify-content: space-between; align-items: center; }
.snippet__label { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--on-iron-3); }
.snippet__copy { all: unset; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--iron-link); min-height: 32px; }
.snippet__copy:focus-visible { outline: 2px solid var(--iron-link); outline-offset: 2px; }
.snippet__code { font: 13px/20px ui-monospace, "SF Mono", Menlo, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }

/* /developers */
.how--wide { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 520px), 1fr)); gap: var(--space-6); }
.how--wide > :last-child:nth-child(odd) { grid-column: 1 / -1; }
.how--wide .how__step { flex-direction: column; min-width: 0; padding: var(--space-6); background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius-lg); }
.abilities { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-6); }
.abilities h3 { margin: 0 0 var(--space-1); font-size: 16px; }
.abilities p { margin: 0; }
.developers__foot { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; border-top: 1px solid var(--rule); padding-top: var(--space-6); }

/* Pricing */
.plan { max-width: 440px; display: grid; gap: var(--space-3); padding: var(--space-6); background: var(--card); border-radius: var(--radius-md); }
.plan__name { margin: 0; line-height: 1.3; }
.plan__price { margin: 0; font-size: 40px; font-weight: 600; line-height: 1.2; }
.plan__price .muted { font-size: 17px; font-weight: 400; }
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: var(--space-4); max-width: 920px; align-items: start; }
.plans .plan { max-width: none; }
.plan--pro { outline: 2px solid var(--ink); outline-offset: -2px; }
.plan__list { margin: 0; padding-left: 1.2em; display: grid; gap: var(--space-2); }

/* The app's sheet: at its smaller heights, just the step, the ingredients for it and Back / Next. Pull up for the tabs. */
@media (max-height: 520px) { .is-native .cook-head__who, .is-native .cook-head__recipe, .is-native .cook-tabs { display: none; } .is-native .cook-head { padding: 0; border: 0; } .is-native .now__text { font-size: 24px; line-height: 32px; } }
.app-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 5; display: flex; gap: var(--space-2); padding: 10px var(--space-4) max(10px, env(safe-area-inset-bottom)); background: var(--paper); border-top: 1px solid var(--rule); }
.is-native .page:has(.app-bar) { padding-bottom: 96px; }
.today { display: flex; flex-direction: column; gap: 28px; }
.today > :has(> .resume[hidden]) { display: none; }
.today .section { margin-top: 0; }
.resume { display: flex; flex-direction: column; gap: 4px; padding: 18px; border: 1px solid var(--iron-edge); border-radius: var(--radius-lg); background: var(--iron); color: var(--on-iron); text-decoration: none; }
.resume:hover { color: var(--on-iron); }
.resume .eyebrow { margin: 0; color: var(--iron-honey); }
.resume__title { font: 500 21px/25px var(--font-display); }
.idea { position: relative; display: block; height: 330px; border-radius: var(--radius-xl); overflow: hidden; background: var(--iron); color: var(--on-iron); text-decoration: none; }
.idea__photo { width: 100%; height: 100%; object-fit: cover; aspect-ratio: auto; }
.idea::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 40%, rgba(35, 28, 23, .82)); }
.idea__text { position: absolute; z-index: 1; left: 18px; right: 18px; bottom: 16px; display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.idea__title { font: 500 24px/29px var(--font-display); }

/* Inside the iPhone app: its tab bar replaces the site's menu. */
.is-native .site-nav, .is-native .site-actions { display: none; }