:root {
  --ink: #1d2b28; --muted: #60706a; --paper: #f7f6f1; --surface: #fffefa; --surface-muted: #f0eee6; --line: #d9dbd2; --accent: #c95a38; --accent-dark: #9f3d22; --accent-soft: #f8dfd5; --sage: #dceae0; --shadow: 0 14px 32px rgba(29,43,40,.07); --radius: 14px;
  --shell-width: 1120px; --component-width: 100%; color-scheme: light; font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-synthesis: none;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-size: 1rem; line-height: 1.65; }
a { color: inherit; } img { display: block; max-width: 100%; } button, input, select { font: inherit; } button, input, select, summary, a { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid #2d7f72; outline-offset: 3px; }
.skip-link { position: fixed; z-index: 30; top: .75rem; left: .75rem; padding: .6rem 1rem; transform: translateY(-160%); border-radius: 8px; background: var(--ink); color: #fff; }
.skip-link:focus { transform: none; }
.site-header { position: sticky; z-index: 20; top: 0; border-bottom: 1px solid rgba(217,219,210,.88); background: rgba(247,246,241,.94); backdrop-filter: blur(12px); }
.header-inner, .footer-inner, .shell { width: min(var(--shell-width), calc(100% - 2rem)); margin-inline: auto; }
.header-inner { display: flex; min-height: 66px; align-items: center; justify-content: space-between; gap: 1rem; }
.brand { display: inline-flex; align-items: center; gap: .5rem; color: var(--ink); font-size: 1.1rem; font-weight: 820; letter-spacing: -.035em; text-decoration: none; }
.brand-mark { width: 28px; height: 28px; flex: 0 0 28px; border-radius: 7px; }
.desktop-nav { display: none; }.desktop-nav a { color: var(--muted); font-size: .9rem; font-weight: 720; text-decoration: none; }.desktop-nav a:hover { color: var(--accent-dark); }
.search-trigger { display: inline-grid; width: 38px; min-height: 38px; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); text-decoration: none; }.search-trigger:hover { border-color: #aeb8b0; background: var(--surface); }.search-trigger svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-width: 2; }.search-trigger span { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }.mobile-search-link { display: block; padding: .65rem .75rem; border-top: 1px solid var(--line); color: var(--accent-dark); font-weight: 750; text-decoration: none; }.search-results { max-width: 100%; }.search-results ul { display: grid; gap: .75rem; margin: 0; padding: 0; list-style: none; }.search-results a { display: grid; gap: .2rem; padding: 1rem 1.15rem; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: inherit; text-decoration: none; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }.search-results a:hover, .search-results a:focus-visible { border-color: #aeb8b0; box-shadow: 0 8px 20px rgba(29,43,40,.06); transform: translateY(-1px); }.search-results strong { font-size: 1rem; }.search-results span, .search-empty { color: var(--muted); font-size: .9rem; line-height: 1.45; }.search-empty { margin: 0; padding: 1rem 0; }.search-page { max-width: 900px; padding: clamp(1.25rem, 3vw, 2rem); border: 1px solid var(--line); border-radius: 18px; background: var(--surface); }.search-page-form { display: grid; gap: .5rem; }.search-page-form label { font-size: .9rem; font-weight: 780; }.search-page-form > div { display: flex; gap: .6rem; }.search-page-form input { width: 100%; min-height: 50px; padding: .65rem .8rem; border: 1px solid #bfc7bd; border-radius: 9px; background: #fff; }.search-page-form button { min-height: 50px; padding: .6rem 1rem; border: 1px solid var(--ink); border-radius: 9px; background: var(--ink); color: #fff; cursor: pointer; font-weight: 760; }.search-page-status { margin: 1.25rem 0 0; color: var(--muted); font-size: .92rem; }.search-page-results { margin-top: 1rem; }
.search-page-results { max-width: 100%; }.search-page-results ul { display: grid; gap: .75rem; margin: 0; padding: 0; list-style: none; }.search-page-results a { display: grid; gap: .2rem; padding: 1rem 1.15rem; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: inherit; text-decoration: none; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }.search-page-results a:hover, .search-page-results a:focus-visible { border-color: #aeb8b0; box-shadow: 0 8px 20px rgba(29,43,40,.06); transform: translateY(-1px); }.search-page-results strong { font-size: 1rem; }.search-page-results span { color: var(--muted); font-size: .9rem; line-height: 1.45; }
.search-page { width: 100%; max-width: none; }
.header-actions { display: flex; align-items: center; gap: .5rem; }.mobile-menu { position: relative; }.mobile-menu summary { cursor: pointer; list-style: none; padding: .42rem .7rem; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); font-size: .9rem; font-weight: 750; }.mobile-menu summary::-webkit-details-marker { display: none; }
.mobile-nav { display: none; padding: .45rem; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow); }.mobile-nav a { padding: .65rem .75rem; border-radius: 7px; font-weight: 700; text-decoration: none; }.mobile-nav a:hover { background: var(--surface-muted); }
.shell { min-height: 65vh; padding-block: 1.25rem 4rem; }.breadcrumbs { margin-bottom: 1.15rem; color: var(--muted); font-size: .84rem; }.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0; padding: 0; list-style: none; }.breadcrumbs li:not(:last-child)::after { content: "/"; margin-left: .35rem; color: #a0aaa4; }.breadcrumbs a { text-underline-offset: 3px; }
h1, h2, h3 { margin-top: 0; color: var(--ink); letter-spacing: -.04em; text-wrap: balance; } h1 { margin-bottom: .9rem; font-size: clamp(2.25rem, 5.2vw, 4.35rem); line-height: 1.02; }h2 { margin-bottom: .7rem; font-size: clamp(1.45rem, 3vw, 2.05rem); line-height: 1.15; }h3 { line-height: 1.25; }
.eyebrow { display: block; margin-bottom: .55rem; color: var(--accent-dark); font-size: .74rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.hero { display: grid; overflow: hidden; border-radius: 20px; background: var(--ink); color: #fff; }.hero-copy { align-self: center; padding: clamp(1.75rem, 5vw, 4rem); }.hero-copy h1 { color: #fff; }.hero-copy > p, .page-intro > p { margin: 0; color: var(--muted); font-size: 1.04rem; }.hero-copy > p { margin-bottom: 1.5rem; color: #d4ddd7; }.hero-media { display: block; width: 100%; min-width: 0; min-height: 230px; overflow: hidden; }
.hero img { width: 100%; min-width: 100%; height: 100%; min-height: 230px; justify-self: end; object-fit: cover; object-position: right center; }
.button { display: inline-flex; min-height: 46px; align-items: center; padding: .65rem 1rem; border-radius: 9px; background: var(--accent); color: #fff; font-size: .94rem; font-weight: 800; text-decoration: none; transition: background .18s ease, transform .18s ease; }.button:hover { background: var(--accent-dark); transform: translateY(-1px); }.button-secondary { background: var(--ink); }.button-secondary:hover { background: #364944; }.directory-link { margin: 1.2rem 0 0; }
section + section { margin-top: clamp(2rem, 4vw, 3.25rem); }.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 1.15rem; }.section-heading h2, .section-heading p { margin-bottom: 0; }
.card-grid { display: grid; gap: .75rem; }.card { position: relative; display: grid; min-height: 116px; align-content: start; gap: .28rem; padding: 1rem 2.5rem 1rem 1rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); text-decoration: none; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }.card:hover { transform: translateY(-2px); border-color: #b3bbb3; box-shadow: 0 10px 24px rgba(29,43,40,.07); }.card span { font-size: 1rem; font-weight: 790; line-height: 1.32; }.card small { color: var(--muted); font-size: .88rem; line-height: 1.45; }.card b { position: absolute; top: 50%; right: 1rem; color: var(--accent); font-size: 1.2rem; transform: translateY(-50%); }
.conversion-groups { display: grid; gap: clamp(2.4rem, 5vw, 4rem); }.conversion-group + .conversion-group { margin-top: 0; }.group-heading { display: grid; gap: .25rem; margin-bottom: .85rem; }.group-heading h2, .group-heading p { margin: 0; }.group-heading p { color: var(--muted); }
.accuracy { display: grid; gap: 1rem; padding: clamp(1.4rem, 4vw, 2.25rem); border-left: 4px solid var(--accent); border-radius: 0 14px 14px 0; background: var(--sage); }.accuracy p { margin: 0; }
.page-intro { max-width: none; padding-block: clamp(1.1rem, 2.5vw, 2rem) .25rem; }.page-intro h1 { margin-bottom: .9rem; font-size: clamp(2.25rem, 4.5vw, 3.75rem); }
.primary-media { width: 100%; max-width: var(--component-width); margin: 0 0 1.5rem; padding: .75rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); overflow: hidden; }
.primary-media img { display: block; width: 100%; height: auto; border-radius: calc(var(--radius) - 4px); background: var(--surface-muted); }
.primary-media figcaption { margin: .65rem .25rem .1rem; color: var(--muted); font-size: .82rem; line-height: 1.5; }

/* Single-image SVGs fit by default; complex diagrams may have a reviewed portrait art direction. */
.primary-media-viewport { width: 100%; max-width: 100%; overflow: clip; border-radius: calc(var(--radius) - 4px); }
.primary-media-viewport picture { display: block; width: 100%; }
.primary-media-viewport img { display: block; width: 100%; max-width: 100%; height: auto; }
.primary-media-mobile-help { display: none; }
.primary-media-mobile-help a { color: var(--accent-dark); font-weight: 750; text-underline-offset: 3px; }
@media (max-width: 699px) {
  .primary-media-mobile-help { display: block; margin-top: .55rem; }
}
.content-prose, .hub-journey, .page-guide .page-intro, .page-guide .editorial-block, .page-guide .plain-panel, .page-utility .page-intro, .page-utility .editorial-block { width: 100%; }.tool-intro { padding-bottom: .25rem; }.plain-panel { padding: 0 0 0 1.1rem; border-left: 2px solid var(--line); background: transparent; }.plain-panel p:last-child { margin-bottom: 0; color: var(--muted); }.editorial-block p { color: var(--muted); overflow-wrap: anywhere; }.editorial-block p + p { margin-top: 1rem; }.guide-directory-group, .home-journey { display: grid; gap: 1rem; }.guide-directory-group .card-grid, .home-journey .card-grid { max-width: var(--component-width); }.page-guide .conversion-table, .page-guide .examples, .page-guide .measurement-notes, .page-guide .related, .page-ingredient-hub .conversion-table, .page-ingredient-hub .related { max-width: var(--component-width); }.text-link, .reverse-link { color: var(--accent-dark); font-weight: 780; text-underline-offset: 3px; }
.hub-journey { padding: clamp(1.2rem, 3vw, 1.75rem); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-muted); }.hub-journey h2, .contact-panel h2, .policy-summary h2 { font-size: clamp(1.3rem, 2vw, 1.65rem); }.hub-journey p, .contact-panel p, .about-statement p { margin: 0; color: var(--muted); }
.hub-journey p { color: #52625c; }.contact-panel { width: 100%; max-width: none; padding: clamp(1.35rem, 4vw, 2.25rem); border: 1px solid var(--line); border-radius: 18px; background: var(--surface); box-shadow: var(--shadow); }.contact-panel h2 { margin-bottom: .65rem; overflow-wrap: anywhere; }.contact-panel h2 a { color: var(--accent-dark); text-underline-offset: 4px; }.policy-summary { width: 100%; max-width: none; padding: clamp(1.25rem, 3vw, 1.75rem); border-radius: var(--radius); background: var(--sage); }.policy-summary ul { display: grid; gap: .45rem; margin: 0; padding-left: 1.2rem; }.about-statement { width: 100%; max-width: none; padding: 1.15rem 1.25rem; border-left: 4px solid var(--accent); background: var(--accent-soft); font-size: 1.08rem; }.home-journey { padding-block: .5rem; }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); } table { width: 100%; border-collapse: collapse; text-align: left; } th, td { padding: .82rem 1rem; border-bottom: 1px solid var(--line); white-space: nowrap; } tbody tr:last-child td { border-bottom: 0; } tbody tr:nth-child(even) { background: rgba(240,238,230,.45); } th { background: var(--surface-muted); color: #4f5d57; font-size: .76rem; letter-spacing: .06em; text-transform: uppercase; }
.tool-card { display: grid; gap: 1rem; max-width: none; padding: clamp(1.15rem, 3vw, 1.75rem); border: 1px solid #d2d5cb; border-radius: 18px; background: var(--surface); box-shadow: var(--shadow); }.field { display: grid; gap: .38rem; }.field label { font-size: .86rem; font-weight: 790; }.field small { color: var(--muted); font-size: .78rem; line-height: 1.35; }.field input, .field select { width: 100%; min-height: 48px; padding: .62rem .72rem; border: 1px solid #bfc7bd; border-radius: 8px; background: #fff; color: var(--ink); }.field input:focus, .field select:focus { border-color: #2d7f72; outline: 3px solid rgba(45,127,114,.16); }
.swap { width: 46px; min-height: 46px; align-self: end; border: 1px solid var(--line); border-radius: 50%; background: var(--surface-muted); color: var(--ink); cursor: pointer; font-size: 1.15rem; font-weight: 800; }.swap:hover { background: var(--sage); }
.result { display: flex; min-height: 104px; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.2rem; border-radius: 12px; background: var(--ink); color: #fff; font-size: clamp(1.3rem, 3vw, 1.9rem); font-weight: 820; line-height: 1.25; }.result-copy { min-width: 0; }.result small { display: block; margin-bottom: .2rem; color: #bfcec4; font-size: .72rem; font-weight: 760; letter-spacing: .075em; text-transform: uppercase; }.result strong { display: block; font: inherit; }.result ul { display: grid; gap: .2rem; margin: .8rem 0 0; padding: .7rem 0 0; border-top: 1px solid rgba(255,255,255,.18); color: #d5e0d9; font-size: .92rem; font-weight: 620; line-height: 1.4; list-style: none; }.copy-result { flex: 0 0 auto; min-height: 40px; padding: .5rem .72rem; border: 1px solid rgba(255,255,255,.32); border-radius: 8px; background: transparent; color: #fff; cursor: pointer; font-size: .8rem; font-weight: 780; }.copy-result:hover { background: rgba(255,255,255,.1); }.conversion-direction { display: flex; min-height: 48px; align-items: center; justify-content: center; gap: .5rem; padding: .6rem .75rem; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-muted); color: #52625c; font-size: .88rem; font-weight: 720; text-align: center; }
.note, .conversion-table { max-width: none; }.note { color: var(--muted); font-size: .9rem; }.quick-answer, .method, .examples, .measurement-notes, .faq { width: 100%; max-width: none; }.quick-answer { padding: 1.15rem 1.2rem; border-left: 4px solid var(--accent); background: var(--accent-soft); }.method { padding: 1.15rem 0 0; border-top: 1px solid var(--line); }.examples, .measurement-notes, .faq { padding: 1.2rem 0 0; border-top: 1px solid var(--line); }.quick-answer h2, .method h2, .examples h2, .measurement-notes h2, .faq h2, .conversion-table h2 { margin-bottom: .55rem; font-size: 1.3rem; }.quick-answer p, .method p, .measurement-notes p, .faq p { margin: 0; color: var(--muted); }
.quick-answer p { color: #52625c; }.measurement-notes p + p { margin-top: .7rem; }.examples ul { display: grid; gap: .45rem; margin: 0; padding-left: 1.15rem; color: var(--muted); }.faq h3 { margin: 0 0 .35rem; font-size: 1rem; }.reverse-link { display: inline-block; margin-top: .85rem; }.related { display: grid; gap: 2rem; padding-top: .25rem; }.related h2 { font-size: 1.3rem; }.related .card { min-height: 100px; }
.common-exact-conversions { padding-top: 1.2rem; border-top: 1px solid var(--line); }.common-exact-conversions h2 { margin-bottom: .65rem; font-size: 1.3rem; }.common-exact-conversions ul { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; list-style: none; }.common-exact-conversions a { display: block; padding: .45rem .65rem; border: 1px solid var(--line); border-radius: .45rem; color: var(--accent-dark); font-size: .9rem; font-weight: 720; text-decoration: none; }.common-exact-conversions a:hover { border-color: var(--accent); background: var(--accent-soft); text-decoration: underline; }.common-exact-conversions a:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 45%, transparent); outline-offset: 2px; }
.back-to-top-wrap { display: flex; justify-content: flex-end; margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: 1rem; border-top: 1px solid var(--line); }.back-to-top { display: inline-flex; align-items: center; gap: .45rem; color: var(--accent-dark); font-size: .88rem; font-weight: 780; text-decoration-thickness: 1px; text-underline-offset: 4px; }.site-footer { border-top: 1px solid #3e514a; background: var(--ink); color: #d9e4dc; }.footer-inner { display: grid; gap: 1.75rem; padding-block: 2.3rem 1.65rem; }.footer-brand-block { max-width: 330px; }.brand-footer { color: #fff; }.footer-inner p { margin: .35rem 0 0; }.footer-nav { display: grid; align-content: start; justify-items: start; gap: .45rem; }.footer-nav strong { margin-bottom: .1rem; color: #fff; font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; }.footer-nav a { font-size: .9rem; font-weight: 700; text-underline-offset: 3px; }.fine-print { margin-top: 0 !important; padding-top: 1.2rem; border-top: 1px solid #3e514a; color: #aec1b5; font-size: .8rem; }
@media (min-width: 700px) { .desktop-nav { display: flex; gap: 1.3rem; margin-left: auto; }.mobile-menu, .mobile-nav { display: none; }.hero { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); min-height: 420px; }.card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.accuracy { grid-template-columns: .8fr 1.2fr; align-items: center; }.tool-card { grid-template-columns: minmax(140px, .8fr) minmax(190px, 1fr) 46px minmax(190px, 1fr); align-items: end; }.tool-card[data-converter="fixed"], .tool-card[data-converter="scaling"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }.tool-card[data-converter="fixed"] { grid-template-columns: minmax(180px, 1fr) 46px minmax(220px, 1fr); align-items: start; }.tool-card[data-converter="fixed"] .swap, .tool-card[data-converter="fixed"] .conversion-direction { align-self: start; margin-top: 1.65rem; }.tool-card[data-converter="fixed"] .result { grid-column: 1 / -1; }.tool-card[data-converter="ingredient"] { grid-template-columns: minmax(140px, .7fr) minmax(260px, 1.3fr); }.tool-card[data-converter="butter"], .tool-card[data-converter="measurement"] { align-items: start; }.tool-card[data-converter="butter"] .swap, .tool-card[data-converter="measurement"] .swap { align-self: start; margin-top: 1.65rem; }.tool-card[data-converter="measurement"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }.tool-card[data-converter="measurement"] .result, .tool-card[data-converter="ingredient"] .result, .tool-card[data-converter="scaling"] .result, .result { grid-column: 1 / -1; }.related { grid-template-columns: 1fr 1fr; }.related .card-grid { grid-template-columns: 1fr; }.footer-inner { grid-template-columns: minmax(0,1.35fr) minmax(150px,.8fr) minmax(170px,.85fr); align-items: start; column-gap: clamp(2rem,5vw,4.5rem); }.fine-print { grid-column: 1 / -1; } }
@media (max-width: 699px) { .header-inner { position: relative; justify-content: flex-start; padding-block: .45rem; }.header-actions { margin-left: auto; }.mobile-nav { position: absolute; top: calc(100% + .5rem); right: 0; left: 0; width: 100%; }.header-inner:has(.mobile-menu[open]) .mobile-nav { display: grid; }.footer-inner { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1.35rem 1.1rem; padding-block: 1.75rem 1.25rem; }.footer-brand-block,.fine-print { grid-column: 1 / -1; }.footer-brand-block { max-width: none; }.footer-nav { gap: .35rem; }.footer-nav a { font-size: .88rem; }.fine-print { padding-top: 1rem; line-height: 1.5; } }
@media (min-width: 700px) { .related > div:only-child { grid-column: 1 / -1; }.related > div:only-child .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.tool-card.ingredient-reference { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 980px) { .card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }.tool-card[data-converter="measurement"] { grid-template-columns: minmax(125px, .7fr) minmax(135px, .7fr) minmax(160px, 1fr) 46px minmax(160px, 1fr); }.related > div:only-child .card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 480px) { .header-inner, .footer-inner, .shell { width: min(100% - 1.25rem, var(--shell-width)); }.page-intro { padding-top: 1.15rem; }.result { align-items: stretch; flex-direction: column; }.copy-result { align-self: flex-start; }.search-page-form > div { flex-direction: column; }.search-page-form button { width: 100%; } th, td { padding: .72rem .8rem; } }
@media (min-width: 700px) { .tool-card { align-items: start; }.tool-card > .swap { align-self: start; margin-top: 1.65rem; } }
/* On wide screens, give reference tables and tools more room without overly long reading lines. */
@media (min-width: 992px) {
  .page-intro > p,
  .content-prose > p,
  .editorial-block > p,
  .plain-panel > p,
  .quick-answer > p,
  .method > p,
  .measurement-notes > p,
  .faq p,
  .hub-journey > p,
  .examples li {
    max-width: 88ch;
  }
}
/* Work visual audit 2026-10-17: scoped hero legibility and listing navigation. */
.hero-copy { min-width: 0; }
.hero-copy h1 { max-width: 100%; overflow-wrap: anywhere; }
.hero .eyebrow { color: #f4b79f; }
.button { background: #b44c2a; }
.desktop-nav a[aria-current] { color: var(--accent-dark); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .4em; }
.mobile-nav a[aria-current] { background: var(--sage); color: var(--ink); font-weight: 800; }
.page-listing .hub-journey + .conversion-groups { margin-top: clamp(2rem, 4vw, 3.25rem); }
@media (min-width: 700px) {
  .hero-copy h1 { font-size: clamp(1.9rem, 3.85vw, 3.25rem); }
}
@media (min-width: 980px) {
  .tools-directory .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; } }


/* Butter: show a short measuring-method link without hiding the converter. */
.butter-guide-shortcut { display: inline-block; width: fit-content; max-width: min(100%, var(--component-width)); margin: 0 0 .1rem; font-size: .89rem; font-weight: 725; line-height: 1.4; color: var(--accent-dark); overflow-wrap: anywhere; text-underline-offset: 3px; }
.butter-guide-shortcut + section[aria-label="Ingredient calculator"] { margin-top: .5rem; }
/* Butter alone: provide optional context-specific measuring advice directly after its calculator. */
.butter-decision-guide { width: 100%; max-width: var(--component-width); padding: clamp(.85rem, 2.5vw, 1.3rem); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-muted); }
.butter-decision-guide h2 { margin: 0 0 .7rem; font-size: clamp(1.1rem, 2.5vw, 1.4rem); }
.butter-decision-guide ol { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.butter-decision-guide li { min-width: 0; padding: 0; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); overflow-wrap: anywhere; }
.butter-decision-guide details { width: 100%; }
.butter-decision-guide summary { display: flex; align-items: center; justify-content: space-between; gap: .75rem; min-height: 46px; padding: .55rem .72rem; cursor: pointer; font-size: .9rem; font-weight: 750; line-height: 1.3; list-style: none; }
.butter-decision-guide summary::-webkit-details-marker { display: none; }
.butter-decision-guide summary::after { content: "+"; flex: 0 0 auto; color: var(--accent-dark); font-size: 1.1rem; }
.butter-decision-guide details[open] summary::after { content: "−"; }
.butter-decision-guide summary:focus-visible { outline: 3px solid var(--accent-dark); outline-offset: -3px; border-radius: 9px; }
.butter-decision-guide details > p { margin: 0; padding: 0 .72rem .72rem; color: var(--muted); font-size: .86rem; line-height: 1.5; }
.butter-decision-guide > p { margin: .65rem 0 0; font-size: .88rem; }
.butter-decision-guide a { color: var(--accent-dark); font-weight: 750; }
/* The following figure is not a section: generic section + section spacing cannot separate the two cards. */
.butter-decision-guide + .primary-media { margin-top: clamp(1rem, 2vw, 1.5rem); }
@media (min-width: 800px) { .butter-decision-guide ol { grid-template-columns: repeat(3,minmax(0,1fr)); } }
.recipe-list-panel { max-width: var(--component-width); }.recipe-list-panel > p { color: var(--muted); line-height: 1.55; }.tool-card.recipe-list-tool { grid-template-columns: minmax(0, 1fr); align-items: stretch; gap: .9rem; }.recipe-list-yields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }.recipe-list-tool .field { min-width: 0; }.recipe-list-tool textarea { display: block; width: 100%; min-height: 8rem; padding: .7rem .75rem; border: 1px solid #bfc7bd; border-radius: 8px; background: #fff; color: var(--ink); font: inherit; line-height: 1.55; resize: vertical; }.recipe-list-tool textarea:focus { border-color: #2d7f72; outline: 3px solid rgba(45,127,114,.16); }.recipe-list-tool textarea[readonly] { background: #f3f5ef; }.recipe-scale-submit { min-height: 48px; justify-self: start; padding: .7rem 1.1rem; border: 0; border-radius: 8px; background: var(--ink); color: #fff; font: inherit; font-weight: 750; cursor: pointer; }.recipe-scale-submit:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }.recipe-scale-status { margin: 0; font-weight: 700; }.recipe-scale-warnings { margin: 0; padding-left: 1.25rem; color: #863f2d; line-height: 1.5; }.recipe-scale-warnings:empty { display: none; } @media (max-width: 480px) { .recipe-list-yields { grid-template-columns: minmax(0, 1fr); } .recipe-scale-submit { width: 100%; } }



/* Shared reader spacing: section + section was already separated, but editorial
   sections touching a figure, zero-margin intro paragraphs, and nested source
   tables had no matching rhythm. Keep these rules across page types, not URL12. */
.page-intro > p + p {
  margin-top: .9rem;
}
#main > section + figure.primary-media {
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
}
#main > figure.primary-media + section {
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
}
.measurement-notes > .conversion-table {
  margin-block: clamp(1.15rem, 2.2vw, 1.65rem);
}