/* Flavor Folio site styles.
 *
 * Design tokens come from the vendored design-system export in tokens/ -
 * never hard-code a colour, radius or duration that has a token.
 *
 * Naming: `ds-*` classes reimplement a design-system component (Button, Chip,
 * Eyebrow) in plain CSS. `ff-*` classes are site layout and page sections.
 */

/* ------------------------------------------------------------------ *
 * Page-level resets
 * ------------------------------------------------------------------ */

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg-page);
  color: var(--text-primary);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--text-brand); text-decoration: none; }
a:hover { color: var(--ff-olive-600); text-decoration: underline; }

[hidden] { display: none !important; }

/* Screenshot drop-shadows are tuned per theme, so they ride along with the
 * theme tokens rather than being repeated at each call site. */
:root,
[data-theme="light"] {
  --ff-shadow-phone: drop-shadow(0 18px 40px rgba(31, 36, 28, .14));
  --ff-shadow-inset: drop-shadow(0 12px 28px rgba(31, 36, 28, .16));
}

[data-theme="dark"] {
  --ff-shadow-phone: drop-shadow(0 18px 40px rgba(0, 0, 0, .45));
  --ff-shadow-inset: drop-shadow(0 12px 28px rgba(0, 0, 0, .45));
}

/* ------------------------------------------------------------------ *
 * Design-system components
 * ------------------------------------------------------------------ */

.ds-eyebrow {
  font: 400 var(--text-eyebrow) / 1 var(--font-ui);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-secondary);
}

.ds-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font: 400 17px / 1 var(--font-ui);
  cursor: pointer;
  transition:
    background var(--dur-base) var(--ease-standard),
    transform var(--dur-fast) var(--ease-standard);
}

.ds-btn:active:not([disabled]) { transform: scale(var(--press-scale)); }
.ds-btn[disabled] { cursor: default; opacity: .45; }
.ds-btn:hover { text-decoration: none; }

.ds-btn--sm { height: var(--control-h-sm); padding: 0 14px; font-size: 15px; }
.ds-btn--md { height: var(--control-h-md); padding: 0 18px; font-size: 17px; }
.ds-btn--lg {
  height: var(--control-h-lg);
  padding: 0 28px;
  font-size: 20px;
  border-radius: var(--radius-md);
}

.ds-btn--primary {
  background: var(--action-primary);
  color: var(--action-primary-text);
}
.ds-btn--primary:hover {
  background: var(--action-primary-hover);
  color: var(--action-primary-text);
}

.ds-btn--secondary {
  background: var(--bg-card);
  color: var(--text-primary);
  border-color: var(--border-strong);
}
.ds-btn--secondary:hover { background: var(--bg-sunken); color: var(--text-primary); }

.ds-btn--ghost { background: transparent; color: var(--text-brand); }
.ds-btn--ghost:hover { background: var(--bg-sunken); color: var(--text-brand); }

.ds-btn__icon { display: inline-block; flex: none; }

.ds-chip {
  height: 40px;
  padding: 0 20px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  font: 400 15px / 1 var(--font-ui);
  background: transparent;
  color: var(--text-primary);
  cursor: pointer;
  transition: background var(--dur-base) var(--ease-standard);
}

.ds-chip:hover { background: var(--bg-sunken); }

.ds-chip[aria-pressed="true"] {
  background: var(--action-primary);
  color: var(--action-primary-text);
  border-color: transparent;
}

/* A selected chip does not react to hover - it is already at full emphasis. */
.ds-chip[aria-pressed="true"]:hover { background: var(--action-primary); }

/* ------------------------------------------------------------------ *
 * Shell: page, header, footer
 * ------------------------------------------------------------------ */

.ff-page {
  width: 100%;
  background: var(--bg-page);
  color: var(--text-primary);
  font: 400 17px / 1.5 var(--font-body);
  overflow-x: hidden;
}

.ff-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(248, 244, 236, .92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-subtle);
}

.ff-header__inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 40px);
  height: 74px;
  display: flex;
  align-items: center;
  gap: 32px;
}

.ff-wordmark {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font: 400 var(--text-wordmark-nav) / 1 var(--font-display);
  letter-spacing: var(--tracking-wordmark-nav);
  color: var(--text-brand);
}
.ff-wordmark:hover { text-decoration: none; }

.ff-nav {
  flex: 1;
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.4vw, 30px);
  justify-content: flex-end;
}

.ff-nav__link {
  background: none;
  border: 0;
  border-bottom: 1px solid transparent;
  padding: 4px 0;
  cursor: pointer;
  font: 400 16px / 1 var(--font-body);
  color: var(--text-primary);
}
.ff-nav__link:hover { color: var(--text-brand); text-decoration: none; }

.ff-nav__link--active {
  color: var(--text-brand);
  border-bottom-color: var(--accent);
}

/* Pages the site map calls for but that have not been built yet. */
.ff-nav__link--unbuilt { cursor: default; color: var(--text-tertiary); }


/* ------------------------------------------------------------------ *
 * Layout primitives
 * ------------------------------------------------------------------ */

/* Full-bleed colour band. */
.ff-band--sunken { background: var(--bg-sunken); }
.ff-band--dark { background: var(--bg-page); color: var(--text-primary); }

/* Centred column. Sections below set their own vertical padding. */
.ff-container {
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(48px, 6vw, 90px) clamp(20px, 4vw, 40px);
}

.ff-container--rule { border-top: 1px solid var(--border-subtle); }

/* Two-up grid that collapses to one column. `--col` is the point at which a
 * second column stops fitting; `--gap` and `--align` tune individual uses. */
.ff-split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--col, 300px), 1fr));
  gap: var(--gap, clamp(32px, 5vw, 64px));
  align-items: var(--align, center);
}

.ff-split > * { min-width: 0; }

/* Puts the artwork above the prose on a phone, beside it on a desktop. */
@media (min-width: 701px) {
  .ff-media-first { order: -1; }
}

/* Artwork that should always follow the prose, at any width. */
.ff-media-last { order: 2; }

.ff-media { display: flex; justify-content: center; }

/* ------------------------------------------------------------------ *
 * Type
 * ------------------------------------------------------------------ */

.ff-h1 {
  margin: 18px 0 0;
  font: 400 clamp(38px, 5.4vw, 62px) / 1.08 var(--font-display);
  letter-spacing: -.015em;
  text-wrap: pretty;
}

.ff-h1--collect {
  max-width: 22em;
  font-size: clamp(36px, 5vw, 58px);
}

.ff-h2 {
  margin: 18px 0 0;
  font: 400 clamp(30px, 3.8vw, 46px) / 1.1 var(--font-display);
  letter-spacing: -.01em;
  text-wrap: pretty;
}

.ff-h2--sm {
  margin: 16px 0 0;
  font-size: clamp(28px, 3.4vw, 40px);
  line-height: 1.12;
}

.ff-h2--xs {
  margin: 16px 0 0;
  font-size: clamp(26px, 3vw, 36px);
  line-height: 1.14;
}

.ff-h2--flush { margin: 0; }

/* Measure limits for the longer headings. */
.ff-h2--narrow { max-width: 16em; }
.ff-h2--wide { max-width: 24em; }

.ff-h3 {
  margin: 10px 0 0;
  font: 400 21px / 1.24 var(--font-display);
  text-wrap: pretty;
}

/* The opening paragraph under a heading. */
.ff-lede {
  margin: 18px 0 0;
  max-width: 30em;
  font: 400 18px / 1.5 var(--font-body);
  color: var(--text-secondary);
  text-wrap: pretty;
}

.ff-lede--hero {
  margin: 20px 0 0;
  font-size: clamp(17px, 1.5vw, 19px);
}

.ff-lede--narrow { max-width: 28em; }

/* A small line of supporting detail, usually under a button or a list. */
.ff-aside {
  margin: 18px 0 0;
  font: 400 15px / 1.4 var(--font-body);
  color: var(--text-secondary);
}

.ff-aside--loose { margin: 22px 0 0; max-width: 30em; line-height: 1.5; }
.ff-aside--list { margin: 24px 0 0; line-height: 1.5; }

/* A pulled-out line with a rule down its left edge. */
.ff-note {
  margin: 22px 0 0;
  max-width: 30em;
  padding-left: 14px;
  border-left: 2px solid var(--accent);
  font: 400 16px / 1.5 var(--font-body);
  color: var(--text-primary);
  text-wrap: pretty;
}

.ff-note--lg { margin: 24px 0 0; font-size: 17px; line-height: 1.55; }

/* Body copy that follows a heading without being the lede. */
.ff-prose {
  margin: 16px 0 0;
  max-width: 30em;
  font: 400 17px / 1.55 var(--font-body);
  color: var(--text-secondary);
  text-wrap: pretty;
}

.ff-prose--sm { font-size: 16px; }


.ff-chips {
  margin-top: 26px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.ff-chips--tight { margin-top: 24px; }


.ff-cta { padding: clamp(48px, 6vw, 84px) clamp(20px, 4vw, 40px); }

.ff-cta__grid { --col: 280px; --gap: clamp(28px, 4vw, 56px); }

.ff-cta__action { display: flex; justify-content: flex-start; }

.ff-cta__lede {
  margin: 16px 0 0;
  max-width: 28em;
  font: 400 17px / 1.5 var(--font-body);
  color: var(--text-secondary);
}

.ff-cta__backlink {
  margin: 16px 0 0;
  font: 400 15px / 1.5 var(--font-body);
  color: var(--text-secondary);
}

/* A text button that reads as a link. */
.ff-linkbutton {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font: inherit;
  color: var(--text-brand);
  text-decoration: underline;
}


/* ------------------------------------------------------------------ *
 * Blog
 *
 * Two pages: the index (shared with every tag hub) and an article. The
 * article body is rendered from Markdown, so unlike the rest of the site its
 * elements carry no classes - `.ff-article__body` styles them by tag.
 * ------------------------------------------------------------------ */

.ff-blog-hero { padding-bottom: clamp(28px, 3vw, 40px); }
.ff-blog-hero__lede { max-width: 34em; }

/* Tag filters. These are links rather than buttons, so they take the chip
 * look from a modifier instead of from [aria-pressed]. */
.ff-blog-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}

.ff-blog-tags .ds-chip {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.ff-blog-tags .ds-chip:hover { text-decoration: none; color: var(--text-primary); }

.ds-chip--on {
  background: var(--action-primary);
  color: var(--action-primary-text);
  border-color: transparent;
}
.ff-blog-tags .ds-chip--on:hover {
  background: var(--action-primary);
  color: var(--action-primary-text);
}

/* ----------------------------------------------------------- Post cards */

.ff-postgrid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: clamp(28px, 3.4vw, 44px);
}

.ff-postcard {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.ff-postcard__link {
  color: inherit;
  text-decoration: none;
  display: block;
}
.ff-postcard__link:hover { color: inherit; text-decoration: none; }
.ff-postcard__link:hover .ff-postcard__title { color: var(--text-brand); }

.ff-postcard__img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  margin-bottom: 18px;
}

.ff-postcard__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
  font: 400 14px / 1 var(--font-ui);
  color: var(--text-tertiary);
}

.ff-postcard__flag {
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  color: var(--text-secondary);
}

.ff-postcard__title {
  margin: 10px 0 0;
  font: 400 21px / 1.25 var(--font-display);
  color: var(--text-primary);
  text-wrap: pretty;
  transition: color var(--dur-base) var(--ease-standard);
}

.ff-postcard__desc {
  margin: 10px 0 0;
  font: 400 16px / 1.55 var(--font-body);
  color: var(--text-secondary);
  text-wrap: pretty;
}

.ff-postcard__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin: 14px 0 0;
  font: 400 14px / 1 var(--font-ui);
}
.ff-postcard__tag { color: var(--text-tertiary); }
.ff-postcard__tag:hover { color: var(--text-brand); }

/* Drafts only render at all when BLOG_SHOW_DRAFTS is on, and then they should
 * be impossible to mistake for something that is live. */
.ff-postcard--draft { opacity: .72; }

.ff-postgrid--compact { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }

/* -------------------------------------------------------------- Paging */

.ff-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: clamp(40px, 5vw, 64px);
  padding-top: 26px;
  border-top: 1px solid var(--border-subtle);
  font: 400 15px / 1 var(--font-ui);
}
.ff-pager__count { color: var(--text-tertiary); margin-left: auto; margin-right: auto; }

/* ------------------------------------------------------------- Article */

.ff-article__head { padding-bottom: clamp(24px, 3vw, 36px); }
.ff-article__back { margin: 0 0 26px; font: 400 15px / 1 var(--font-ui); }

.ff-article__draft {
  display: inline-block;
  margin: 0 0 18px;
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  color: var(--text-secondary);
  font: 400 14px / 1 var(--font-ui);
}

.ff-article__title { max-width: 18em; }
.ff-article__lede { max-width: 34em; }

.ff-article__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 24px 0 0;
  font: 400 15px / 1 var(--font-ui);
  color: var(--text-tertiary);
}

.ff-article__tags { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 0; }
.ff-article__tags .ds-chip { display: inline-flex; align-items: center; text-decoration: none; }
.ff-article__tags .ds-chip:hover { text-decoration: none; color: var(--text-primary); }

.ff-article__hero { padding-top: 0; padding-bottom: clamp(24px, 3vw, 40px); }
.ff-article__hero img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
}

/* --------------------------------------------- Article body (Markdown) */

/* A measure narrow enough to read, left-aligned with the title above it
 * rather than centred - every other page on the site starts at the same
 * left edge and the article should not be the exception. */
.ff-article__body {
  padding-top: 0;
  font: 400 18px / 1.65 var(--font-body);
  color: var(--text-secondary);
}

.ff-article__body > * { max-width: 40em; }

.ff-article__body > :first-child { margin-top: 0; }

.ff-article__body h2 {
  margin: clamp(36px, 4vw, 54px) 0 0;
  font: 400 var(--text-h2) / var(--text-h2-lh) var(--font-display);
  color: var(--text-primary);
  text-wrap: pretty;
}

.ff-article__body h3 {
  margin: clamp(28px, 3vw, 38px) 0 0;
  font: 400 20px / 1.3 var(--font-display);
  color: var(--text-primary);
  text-wrap: pretty;
}

.ff-article__body p,
.ff-article__body ul,
.ff-article__body ol { margin: 18px 0 0; text-wrap: pretty; }

.ff-article__body li { margin-top: 8px; }
.ff-article__body li::marker { color: var(--text-tertiary); }

.ff-article__body img {
  width: 100%;
  margin: clamp(28px, 3vw, 40px) 0 0;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
}

.ff-article__body blockquote {
  margin: clamp(28px, 3vw, 38px) 0 0;
  padding-left: 22px;
  border-left: 2px solid var(--accent);
  color: var(--text-primary);
}

.ff-article__body hr {
  margin: clamp(36px, 4vw, 54px) 0 0;
  border: 0;
  border-top: 1px solid var(--border-subtle);
}

.ff-article__body code {
  padding: 2px 6px;
  border-radius: var(--radius-xs);
  background: var(--bg-sunken);
  font-size: .9em;
}

.ff-article__body pre {
  margin: 24px 0 0;
  padding: 18px 20px;
  overflow-x: auto;
  border-radius: var(--radius-md);
  background: var(--bg-sunken);
}
.ff-article__body pre code { padding: 0; background: none; }

.ff-article__body table {
  width: 100%;
  margin: 24px 0 0;
  border-collapse: collapse;
  font-size: 16px;
}
.ff-article__body th,
.ff-article__body td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--border-subtle);
}
.ff-article__body th { color: var(--text-primary); font-weight: 400; }

.ff-article__related { padding-block: clamp(40px, 5vw, 70px); }
.ff-article__related .ff-postgrid { margin-top: 30px; }


/* --------------------------------------------------- Article pictures */

/* A generated cover is artwork sized to the frame exactly, so it needs no
 * border to sit against the page the way a photograph does. */
.ff-article__hero--cover { border-color: transparent; }

/* Figures. Every standalone image in a post body becomes one - see
 * `_figures()` in app/blog.py - so the spacing is set once here. */
.ff-article__body figure {
  margin: clamp(30px, 3.4vw, 46px) 0 0;
  max-width: 100%;
}

.ff-article__body figure img { margin: 0; }

.ff-article__body figcaption {
  margin-top: 12px;
  font: 400 15px / 1.5 var(--font-ui);
  color: var(--text-tertiary);
  text-wrap: pretty;
}

/* A phone screenshot is tall, and at full column width it would push the rest
 * of the post off the screen. Mark one up as `{: .shot }` and it is centred at
 * a sensible height instead. */
.ff-article__body figure:has(.shot) { display: flex; flex-direction: column; align-items: center; }
.ff-article__body .shot {
  width: auto;
  max-height: 620px;
  border: 0;
  border-radius: var(--radius-lg);
  filter: var(--ff-shadow-phone);
}
.ff-article__body figure:has(.shot) figcaption { text-align: center; }

/* Current app showcase. All screenshot pixels come from the native captures. */
.ff-wrap { width: min(1180px, calc(100% - 80px)); margin-inline: auto; }
.ff-title, .ff-heading { font-weight: 400; letter-spacing: -.035em; text-wrap: balance; }
.ff-title { font-size: clamp(44px, 5.4vw, 74px); line-height: 1.04; margin: 24px 0; }
.ff-heading { font-size: clamp(34px, 3.8vw, 52px); line-height: 1.08; margin: 20px 0 24px; }
.ff-body { font-size: 21px; line-height: 1.55; margin: 0 0 24px; }
.ff-detail { font-size: 16px; line-height: 1.5; color: var(--text-secondary); margin: 20px 0; }
.ff-text-link { display: inline-flex; align-items: center; gap: 12px; font-size: 18px; text-underline-offset: 5px; }
.ff-text-link svg { transition: transform var(--dur-base) var(--ease-standard); }
.ff-text-link:hover svg { transform: translateX(4px); }
.ff-section { color: var(--text-primary); padding-block: 100px; scroll-margin-top: var(--ff-header-offset, 150px); }
.ff-section--sunken { background: var(--bg-sunken); }
.ff-section--dark { background: var(--bg-page); }
.ff-section .ds-eyebrow, .ff-intro .ds-eyebrow, .ff-page-intro .ds-eyebrow { line-height: 1.4; }
.ff-feature { display: grid; grid-template-columns: 1fr 1fr; gap: 90px; align-items: center; }
.ff-feature__copy { max-width: 490px; }
.ff-feature--reverse .ff-feature__copy { order: 2; }
.ff-feature__media { display: flex; align-items: center; justify-content: center; gap: 24px; min-width: 0; }
.ff-feature__media > [data-tab-panel] { width: 100%; }
.ff-feature__points { padding: 0; list-style: none; margin: 24px 0; }
.ff-feature__points li { padding: 12px 0 12px 24px; border-bottom: 1px solid var(--border-subtle); position: relative; font-size: 18px; line-height: 1.45; }
.ff-feature__points li::before { content: '↗'; color: var(--text-brand); position: absolute; left: 0; }
.ff-feature .ff-chips { margin-top: 28px; gap: 8px; }
.ff-feature .ds-chip { padding-inline: 18px; }
.ff-capture { margin: 0; min-width: 0; width: 100%; max-width: 270px; margin-inline: auto; }
.ff-capture img { width: 100%; height: auto; border: 1px solid var(--border-strong); border-radius: 30px; box-sizing: border-box; background: var(--bg-card); }
.ff-capture figcaption { text-align: center; font-size: 13px; line-height: 1.4; color: var(--text-secondary); margin-top: 14px; }
.ff-capture--ipad { max-width: 820px; }
.ff-capture--ipad img { border-radius: var(--radius-lg); }
.ff-feature--pair .ff-feature__media { gap: 16px; }
.ff-feature--pair .ff-capture { width: calc(50% - 8px); }
.ff-feature--pair .ff-capture:nth-child(2) { margin-top: 70px; }
.ff-feature--tablet { grid-template-columns: .7fr 1.3fr; gap: 54px; }
.ff-feature--tablet .ff-feature__copy { order: 0; }
.ff-feature--trio { grid-template-columns: 1fr; gap: 48px; }
.ff-feature--trio .ff-feature__copy { order: 0; max-width: 710px; text-align: center; margin-inline: auto; }
.ff-feature--trio .ff-feature__media { gap: 48px; max-width: 900px; width: 100%; margin-inline: auto; align-items: start; }
.ff-feature--trio .ff-capture { flex: 1; }
.ff-feature--trio .ff-feature__points { text-align: left; }
.ff-feature--text { grid-template-columns: 1fr; }
.ff-feature--text .ff-feature__copy { max-width: 800px; }
.ff-privacy-note { display: grid; grid-template-columns: 1fr 1fr; gap: 90px; }
.ff-privacy-note .ff-body { padding-top: 26px; }

/* The overlapping covers evoke a cookbook without inventing any app UI. */
.ff-intro { display: grid; grid-template-columns: 1.02fr 1fr; gap: 72px; align-items: center; padding-block: 80px 90px; min-height: 640px; }
.ff-intro__copy { position: relative; z-index: 1; }
.ff-intro__lede { max-width: 470px; color: var(--text-secondary); }
.ff-intro__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; margin-top: 32px; }
.ff-intro .ds-btn { border-radius: var(--radius-pill); font-size: 19px; }
.ff-platform { margin-top: 24px; font-size: 14px; }
.ff-platform-link { font-size: 15px; }
.ff-intro__screens { min-width: 0; position: relative; display: flex; align-items: center; justify-content: center; gap: 0; padding-block: 24px; }
.ff-intro__screens::before { content: ''; position: absolute; inset: 13% -6% 13%; border-radius: 50%; background: var(--accent-soft); }
.ff-intro__screens .ff-capture { width: 53%; max-width: 275px; position: relative; margin: 0; }
.ff-intro__screens .ff-capture:first-child { transform: translateY(-22px) rotate(-6deg); z-index: 1; margin-right: -28px; }
.ff-intro__screens .ff-capture:last-child { transform: translateY(28px) rotate(6deg); }
.ff-intro__screens img { box-shadow: var(--shadow-float); }
.ff-journey { display: grid; grid-template-columns: repeat(4, 1fr); padding: 26px 0; border-top: 1px solid var(--border-strong); gap: 28px; }
.ff-journey a { display: flex; align-items: center; gap: 10px; font-size: 17px; color: var(--text-primary); }
.ff-journey a span { font-size: 12px; color: var(--text-secondary); }
.ff-journey svg { margin-left: auto; flex: none; }
.ff-page-intro { padding-block: 90px 80px; }
.ff-page-intro .ff-title { max-width: 900px; }
.ff-page-intro .ff-body { max-width: 650px; color: var(--text-secondary); }

/* One shared, working navigation and footer on every page. */
.ff-header { background: var(--overlay-control); }
.ff-device-notice { background: var(--notice-bg); color: var(--notice-text); border-bottom: 1px solid var(--notice-border); }
.ff-device-notice__inner { display: flex; align-items: center; justify-content: center; gap: 14px; padding-block: 10px; font-size: 17px; line-height: 1.3; white-space: nowrap; }
.ff-device-notice__icon { flex: none; width: 20px; height: 20px; stroke-width: 2; }
.ff-device-notice p { margin: 0; }
.ff-device-notice strong { font-weight: 600; }
.ff-device-notice a { display: inline-flex; align-items: center; gap: 8px; flex: none; color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.ff-device-notice a:hover { color: inherit; text-decoration-thickness: 2px; }
.ff-device-notice a:focus-visible { outline-color: var(--notice-text); }
.ff-device-notice__link-short { display: none; }
.ff-header__inner { max-width: 1180px; box-sizing: content-box; }
.ff-wordmark { white-space: nowrap; }
.ff-brand { display: inline-flex; align-items: center; gap: 12px; flex-shrink: 0; }
.ff-brand__icon { width: 40px; height: 40px; flex: none; border-radius: var(--radius-sm); }
.ff-brand--footer .ff-brand__icon { width: 48px; height: 48px; }
.ff-nav { gap: 24px; }
.ff-nav .ds-btn { margin-left: 8px; }
.ff-nav__link { font-size: 16px; white-space: nowrap; }
.ff-menu-toggle { border: 1px solid var(--border-strong); background: var(--bg-card); color: var(--text-primary); border-radius: var(--radius-pill); padding: 9px 16px; font: inherit; gap: 12px; align-items: center; margin-left: auto; cursor: pointer; }
.ff-menu-toggle:not([hidden]) { display: inline-flex; }
.ff-skip { position: fixed; top: 10px; left: 20px; z-index: 100; transform: translateY(-150%); padding: 12px 20px; background: var(--bg-card); border: 1px solid var(--border-strong); border-radius: var(--radius-md); }
.ff-skip:focus { transform: translateY(0); }
.ff-closing { color: var(--text-primary); padding-block: 80px; background: var(--bg-page); }
.ff-closing__inner { display: flex; align-items: center; justify-content: space-between; gap: 60px; }
.ff-closing .ff-heading { max-width: 680px; margin-top: 0; }
.ff-closing .ff-body { color: var(--text-secondary); max-width: 580px; margin-bottom: 0; }
.ff-closing .ds-btn { flex: none; border-radius: var(--radius-pill); }
.ff-site-footer { padding-block: 45px 28px; border-top: 1px solid var(--border-subtle); }
.ff-site-footer__top { display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.ff-site-footer p { margin: 0; color: var(--text-secondary); }
.ff-site-footer nav { display: flex; gap: 26px; flex-wrap: wrap; padding-block: 30px; }
.ff-site-footer__bottom { border-top: 1px solid var(--border-subtle); padding-top: 22px; display: flex; justify-content: space-between; gap: 32px; font-size: 13px; }
.ff-site-footer__bottom a { white-space: nowrap; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }
main:focus { outline: none; }
main { scroll-margin-top: var(--ff-header-offset, 150px); }

/* Browsable capture library; filtering also works without JavaScript. */
.ff-gallery-section { padding-bottom: 90px; }
.ff-gallery-filters { display: flex; gap: 20px; align-items: end; padding-block: 24px; border-block: 1px solid var(--border-strong); }
.ff-gallery-field { flex: 1; min-width: 0; }
.ff-gallery-filters label { display: block; font-size: 14px; margin-bottom: 8px; color: var(--text-secondary); }
.ff-gallery-filters select { width: 100%; height: 44px; background: var(--bg-card); color: var(--text-primary); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding-inline: 12px; font: inherit; }
.ff-gallery-meta { display: flex; align-items: center; justify-content: space-between; font-size: 14px; padding-block: 8px 20px; }
.ff-gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 52px 32px; }
.ff-gallery--ipad { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ff-gallery-card__image { display: block; padding: 20px; border-radius: var(--radius-xl); background: var(--bg-sunken); transition: background var(--dur-base) var(--ease-standard); }
.ff-gallery-card__image:hover { background: var(--accent-soft); text-decoration: none; }
.ff-gallery-card .ff-capture { max-width: none; }
.ff-gallery-card h2 { font-size: 19px; font-weight: 400; line-height: 1.3; margin: 18px 0 0; }
.ff-gallery-card figcaption { min-height: 36px; }
.ff-gallery-empty { padding-block: 40px; max-width: 600px; }
.ff-credits { max-width: 800px; }
.ff-credits ul { padding-left: 20px; font-size: 15px; }
.ff-credits li { padding-block: 6px; }
.ff-credits .ff-heading { margin-top: 44px; font-size: 32px; }
.ff-faq-list { max-width: 860px; padding-bottom: 80px; }
.ff-faq { border-top: 1px solid var(--border-strong); padding-block: 24px; }
.ff-faq:last-child { border-bottom: 1px solid var(--border-strong); }
.ff-faq summary { font-size: 24px; line-height: 1.3; cursor: pointer; padding-right: 32px; }
.ff-faq p { font-size: 19px; line-height: 1.55; max-width: 760px; color: var(--text-secondary); }
.ff-contact { padding-block: 80px; }
.ff-contact .ff-body { max-width: 650px; }

/* The app's hardware requirement is shared by Home and Support. */
.ff-compatibility { padding-block: 72px; }
.ff-compatibility__intro { max-width: 800px; }
.ff-compatibility__requirement { margin: 32px 0; padding: 20px 24px; border-left: 3px solid var(--accent); background: var(--accent-soft); font-size: 22px; line-height: 1.4; }
.ff-compatibility__devices { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.ff-compatibility__card { padding: 28px 32px; background: var(--bg-card); border: 1px solid var(--border-strong); border-radius: var(--radius-lg); }
.ff-compatibility__status { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--text-brand); font-size: 15px; }
.ff-compatibility h3 { margin: 18px 0; font-size: 30px; line-height: 1.2; font-weight: 400; }
.ff-compatibility ul { margin: 0; padding-left: 20px; }
.ff-compatibility li { padding-block: 5px; font-size: 18px; line-height: 1.5; }
.ff-compatibility__unsupported { display: grid; grid-template-columns: 1fr 2fr; gap: 32px; margin-top: 32px; padding-block: 28px; border-block: 1px solid var(--border-strong); }
.ff-compatibility__unsupported h3 { font-size: 25px; margin: 0; }
.ff-compatibility__unsupported ul { columns: 2; column-gap: 40px; }
.ff-compatibility__unsupported li { break-inside: avoid; }
.ff-compatibility__why { max-width: 800px; margin-block: 28px; }
.ff-compatibility__why h3 { margin: 0 0 10px; font-size: 23px; }
.ff-compatibility__why p { margin: 0; font-size: 18px; line-height: 1.55; }
.ff-compatibility__notes { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 24px; }
.ff-compatibility__notes p { margin: 0; color: var(--text-secondary); font-size: 16px; line-height: 1.55; }
.ff-compatibility__notes strong { color: var(--text-primary); font-weight: 500; }
.ff-compatibility__sources { display: flex; flex-wrap: wrap; gap: 16px 32px; margin-top: 28px; }
.ff-compatibility__sources .ff-text-link { font-size: 16px; }
.ff-compatibility + .ff-faq-list { padding-top: 64px; }

@media (max-width: 1100px) {
  .ff-feature { gap: 48px; }
  .ff-intro { gap: 40px; min-height: 590px; }
  .ff-nav { gap: 18px; }
  .ff-journey { gap: 18px; }
  .ff-journey a { font-size: 15px; }
}
@media (max-width: 1000px) {
  .ff-device-notice__body { display: none; }
  .ff-header__inner { height: auto; min-height: 70px; flex-wrap: wrap; padding-block: 0; gap: 0; }
  .ff-nav { width: 100%; flex-basis: 100%; justify-content: start; flex-wrap: wrap; padding-block: 12px 20px; gap: 22px; }
  .ff-nav__link { min-height: 32px; display: flex; align-items: center; }
  .ff-nav .ds-btn { margin-left: 0; }
  .ff-header__inner > .ff-wordmark { padding-block: 15px; }
  .ff-intro { padding-block: 60px; }
  .ff-intro__actions { gap: 18px; }
  .ff-intro__screens .ff-capture:first-child { margin-right: -20px; }
  .ff-feature--tablet { grid-template-columns: 1fr; }
  .ff-feature--tablet .ff-feature__copy { max-width: 680px; }
  .ff-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 24px; }
  .ff-gallery--ipad { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ff-closing__inner { gap: 32px; }
}
@media (max-width: 700px) {
  .ff-device-notice__inner { gap: 10px; font-size: 15px; }
  .ff-device-notice__icon { width: 18px; height: 18px; }
  .ff-section, main { scroll-margin-top: var(--ff-header-offset, 210px); }
  .ff-compatibility__devices, .ff-compatibility__unsupported, .ff-compatibility__notes { grid-template-columns: 1fr; }
  .ff-compatibility__card { padding: 24px; }
  .ff-compatibility__unsupported { gap: 18px; }
  .ff-compatibility__unsupported ul { columns: 1; }
  .ff-compatibility__notes { gap: 20px; }
  .ff-compatibility__requirement { padding: 18px; font-size: 20px; }
  .ff-header .ff-brand { font-size: 15px; letter-spacing: .18em; gap: 10px; }
  .ff-header .ff-brand__icon { width: 36px; height: 36px; }
  .ff-wrap { width: calc(100% - 40px); }
  .ff-section { padding-block: 64px; }
  .ff-title { font-size: clamp(43px, 10vw, 60px); }
  .ff-heading { font-size: 37px; }
  .ff-body { font-size: 20px; }
  .ff-feature, .ff-privacy-note { grid-template-columns: 1fr; gap: 40px; }
  .ff-feature__copy { max-width: 100%; }
  .ff-feature--reverse .ff-feature__copy { order: 0; }
  .ff-feature--phone .ff-capture { max-width: 280px; }
  .ff-feature--pair .ff-feature__media { max-width: 480px; margin-inline: auto; }
  .ff-feature--trio .ff-feature__copy { text-align: left; }
  .ff-feature--trio .ff-feature__media { gap: 14px; overflow-x: auto; justify-content: start; align-items: start; padding: 0 2px 18px; scroll-snap-type: x mandatory; }
  .ff-feature--trio .ff-capture { flex: 0 0 64%; max-width: 250px; scroll-snap-align: center; }
  .ff-privacy-note .ff-body { padding-top: 0; }
  .ff-intro { grid-template-columns: 1fr; padding-block: 48px 50px; gap: 30px; min-height: 0; }
  .ff-intro .ff-title { max-width: 550px; }
  .ff-intro__screens { max-width: 470px; width: 95%; margin-inline: auto; padding-block: 32px; }
  .ff-intro__screens::before { inset: 13% -2%; }
  .ff-intro__screens .ff-capture { width: 48%; }
  .ff-intro__screens img { border-radius: 25px; }
  .ff-journey { grid-template-columns: 1fr 1fr; padding-block: 20px; gap: 18px 22px; }
  .ff-journey a { font-size: 15px; gap: 7px; }
  .ff-journey svg { width: 14px; }
  .ff-page-intro { padding-block: 56px; }
  .ff-closing { padding-block: 60px; }
  .ff-closing__inner { display: block; }
  .ff-closing .ds-btn { margin-top: 32px; }
  .ff-site-footer__top { align-items: start; flex-direction: column; gap: 18px; }
  .ff-site-footer__bottom { flex-direction: column; gap: 12px; }
  .ff-site-footer nav { column-gap: 24px; row-gap: 16px; }
  .ff-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 16px; }
  .ff-gallery--ipad { grid-template-columns: 1fr; }
  .ff-gallery-filters { flex-wrap: wrap; gap: 16px; }
  .ff-gallery-field { flex: 1 1 calc(50% - 8px); }
  .ff-gallery-filters .ds-btn { flex: 1; }
  .ff-gallery-card__image { padding: 10px; }
  .ff-gallery-card img { border-radius: var(--radius-lg); }
  .ff-gallery-card h2 { font-size: 18px; }
  .ff-gallery-card figcaption { font-size: 12px; }
  .ff-contact { padding-block: 60px; }
}
@media (max-width: 500px) {
  .ff-device-notice__inner { width: calc(100% - 32px); gap: 8px; }
  .ff-device-notice__icon { width: 16px; height: 16px; }
  .ff-device-notice__link-full { display: none; }
  .ff-device-notice__link-short { display: inline; }
  .ff-device-notice a .ds-btn__icon { display: none; }
}
@media (max-width: 400px) {
  .ff-header .ff-brand { font-size: 14px; letter-spacing: .16em; gap: 8px; }
  .ff-header .ff-brand__icon { width: 32px; height: 32px; }
  .ff-menu-toggle { padding-inline: 12px; gap: 8px; }
  .ff-gallery--iphone { grid-template-columns: 1fr; max-width: 280px; margin-inline: auto; }
  .ff-journey a { font-size: 14px; }
  .ff-intro__actions .ff-text-link { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* Keep sticky navigation attached to the viewport, including in Safari. */
.ff-page { overflow-x: clip; }

/* Recipes: a small, photograph-led kitchen notebook. */
.ff-recipes-intro { padding-block: 76px 56px; }
.ff-recipes-intro .ff-title { max-width: 850px; }
.ff-recipes-intro .ff-body { max-width: 660px; color: var(--text-secondary); }
.ff-recipes-collection { padding-bottom: 90px; }
.ff-recipes-collection__head { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; padding-block: 22px 30px; border-top: 1px solid var(--border-strong); }
.ff-recipes-collection__head h2 { font-size: 24px; font-weight: 400; margin: 0; }
.ff-recipes-collection__head p { font-size: 14px; color: var(--text-secondary); margin: 0; }
.ff-recipe-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; list-style: none; margin: 0; padding: 0; }
.ff-recipe-card { min-width: 0; }
.ff-recipe-card > a { display: block; color: var(--text-primary); }
.ff-recipe-card > a:hover { text-decoration: none; }
.ff-recipe-card__photo { overflow: hidden; border-radius: var(--radius-lg); background: var(--bg-sunken); }
.ff-recipe-card__photo img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; transition: transform var(--dur-base) var(--ease-standard); }
.ff-recipe-card a:hover img { transform: scale(1.025); }
.ff-recipe-card__body { padding-top: 22px; }
.ff-recipe-card__meta { display: flex; gap: 12px; margin: 0; font: 400 14px / 1.5 var(--font-ui); color: var(--text-secondary); }
.ff-recipe-card h2 { font-size: clamp(28px, 3vw, 37px); font-weight: 400; line-height: 1.15; letter-spacing: -.025em; margin: 14px 0; text-wrap: balance; }
.ff-recipe-card__summary { font-size: 19px; line-height: 1.55; color: var(--text-secondary); margin: 0; max-width: 520px; }
.ff-recipe-card__link { display: inline-flex; gap: 14px; align-items: center; margin-top: 24px; padding-bottom: 6px; border-bottom: 1px solid var(--border-strong); font-size: 17px; color: var(--text-brand); }
.ff-recipe-head { padding-block: 38px 64px; }
.ff-recipe-back { display: inline-block; font-size: 15px; margin-bottom: 42px; }
.ff-recipe-hero { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.ff-recipe-hero .ff-title { font-size: clamp(38px, 4.4vw, 60px); margin-block: 20px; }
.ff-recipe-hero .ff-body { font-size: 20px; color: var(--text-secondary); }
.ff-recipe-byline { font-size: 14px; margin: 22px 0; color: var(--text-secondary); }
.ff-recipe-hero__photo { margin: 0; min-width: 0; }
.ff-recipe-hero__photo img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius-lg); }
.ff-recipe-hero__photo figcaption { font-size: 12px; line-height: 1.5; color: var(--text-secondary); margin-top: 12px; }
.ff-recipe-meta { display: flex; gap: 28px; flex-wrap: wrap; padding-block: 22px; margin-block: 24px; border-block: 1px solid var(--border-strong); }
.ff-recipe-meta dt { font-size: 13px; color: var(--text-secondary); margin-bottom: 7px; }
.ff-recipe-meta dd { font-size: 22px; margin: 0; }
.ff-recipe-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 20px; }
.ff-recipe-actions .ds-btn { font-size: 17px; border-radius: var(--radius-pill); padding-inline: 22px; }
.ff-recipe-actions > a:not(.ds-btn) { font-size: 15px; text-decoration: underline; text-underline-offset: 4px; }
.ff-recipe-requirement { font-size: 13px; line-height: 1.55; color: var(--text-secondary); max-width: 480px; margin: 18px 0 0; }
.ff-recipe-requirement a { text-decoration: underline; text-underline-offset: 3px; }
.ff-recipe-content { display: grid; grid-template-columns: .8fr 1.35fr; gap: 90px; padding-block: 42px 80px; border-top: 1px solid var(--border-strong); scroll-margin-top: var(--ff-header-offset, 150px); }
.ff-recipe-content .ff-heading { font-size: 36px; margin-block: 0 20px; }
.ff-recipe-ingredients ul { list-style: none; padding: 0; margin: 24px 0; }
.ff-recipe-ingredients li { padding-block: 15px; border-bottom: 1px solid var(--border-subtle); font-size: 19px; line-height: 1.5; }
.ff-recipe-amount { font-weight: 600; }
.ff-recipe-ingredient-note { display: block; font-size: 15px; color: var(--text-secondary); margin-top: 3px; }
.ff-recipe-print { border: 0; border-bottom: 1px solid var(--border-strong); padding: 8px 0; background: none; color: var(--text-brand); font: inherit; font-size: 16px; cursor: pointer; }
.ff-recipe-method ol { list-style: none; padding: 0; margin: 0; }
.ff-recipe-method li { display: flex; gap: 24px; padding-block: 24px; border-bottom: 1px solid var(--border-subtle); scroll-margin-top: var(--ff-header-offset, 150px); }
.ff-recipe-method li:first-child { padding-top: 8px; }
.ff-recipe-step-number { font: 400 13px / 2 var(--font-ui); color: var(--text-secondary); padding-top: 3px; }
.ff-recipe-method li p { font-size: 20px; line-height: 1.6; margin: 0 0 12px; }
.ff-recipe-step-time { font: 400 12px / 1.4 var(--font-ui); display: inline-block; padding: 4px 10px; background: var(--bg-sunken); border-radius: var(--radius-pill); color: var(--text-secondary); }
.ff-recipe-method .ff-detail { font-size: 14px; }
.ff-recipe-notes { margin-top: 36px; padding: 24px 28px; background: var(--bg-sunken); border-radius: var(--radius-md); }
.ff-recipe-notes h2 { margin: 0 0 16px; font-size: 26px; font-weight: 400; }
.ff-recipe-notes p { font-size: 18px; line-height: 1.6; margin: 12px 0 0; }
.ff-recipe-import { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; padding: 48px; margin-bottom: 76px; border-radius: var(--radius-lg); background: var(--accent-soft); scroll-margin-top: var(--ff-header-offset, 150px); }
.ff-recipe-import .ff-heading { font-size: 37px; }
.ff-recipe-import .ff-body { font-size: 19px; }
.ff-recipe-import .ff-detail { font-size: 14px; }
.ff-recipe-import__steps ol { margin: 0; padding-left: 20px; }
.ff-recipe-import__steps li { padding: 0 0 20px 8px; }
.ff-recipe-import__steps li::marker { font-size: 14px; color: var(--text-brand); }
.ff-recipe-import h3 { margin: 0 0 5px; font-size: 20px; font-weight: 400; }
.ff-recipe-import__steps li p { margin: 0; font-size: 16px; line-height: 1.5; }
.ff-recipe-copy label { display: block; font-size: 13px; margin-bottom: 8px; }
.ff-recipe-copy input { box-sizing: border-box; width: 100%; min-width: 0; height: 44px; padding: 8px 12px; font: 400 13px / 1.4 var(--font-ui); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--bg-card); color: var(--text-primary); }
.ff-recipe-copy button { margin-top: 14px; }
.ff-recipe-copy__status { font-size: 14px; margin: 10px 0 0; }
.ff-recipe-copy__status:empty { display: none; }
.ff-recipe-related { padding-bottom: 80px; }
.ff-recipe-related .ff-heading { font-size: 34px; margin-bottom: 32px; }
.ff-recipe-help { padding-top: 60px; }
.ff-recipe-help > .ff-body { max-width: 720px; }
.ff-recipe-help > .ff-recipe-actions { margin-bottom: 48px; }
@media (min-width: 1001px) and (max-width: 1200px) {
  .ff-header__inner { gap: 20px; }
  .ff-nav { gap: 16px; }
  .ff-nav__link { font-size: 15px; }
}
@media (max-width: 1000px) {
  .ff-recipe-hero { gap: 32px; align-items: start; }
  .ff-recipe-content { gap: 48px; }
  .ff-recipe-import { padding: 32px; gap: 40px; }
}
@media (max-width: 700px) {
  .ff-recipes-intro { padding-block: 48px 30px; }
  .ff-recipes-intro .ff-title { font-size: 49px; }
  .ff-recipes-collection { padding-bottom: 56px; }
  .ff-recipes-collection__head { display: block; padding-block: 22px; }
  .ff-recipes-collection__head p { margin-top: 10px; }
  .ff-recipe-grid { grid-template-columns: 1fr; gap: 42px; }
  .ff-recipe-card h2 { font-size: 33px; }
  .ff-recipe-card__summary { font-size: 18px; }
  .ff-recipe-head { padding-block: 28px 42px; }
  .ff-recipe-back { margin-bottom: 30px; }
  .ff-recipe-hero { grid-template-columns: 1fr; gap: 30px; }
  .ff-recipe-hero .ff-title { font-size: 44px; }
  .ff-recipe-meta { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
  .ff-recipe-meta dd { font-size: 20px; }
  .ff-recipe-content { grid-template-columns: 1fr; gap: 42px; padding-block: 32px 48px; }
  .ff-recipe-method li { gap: 18px; }
  .ff-recipe-import { grid-template-columns: 1fr; gap: 24px; padding: 28px 22px; margin-bottom: 48px; }
  .ff-recipe-import .ff-heading { font-size: 32px; }
  .ff-recipe-import .ff-body { font-size: 18px; }
  .ff-recipe-notes { padding: 24px 20px; }
  .ff-recipe-related { padding-bottom: 56px; }
}
@media print {
  .ff-header, .ff-site-footer, .ff-closing, .ff-skip, .ff-recipe-back, .ff-recipe-actions, .ff-recipe-requirement, .ff-recipe-print, .ff-recipe-import, .ff-recipe-related, .ff-recipe-hero__photo { display: none !important; }
  .ff-wrap { width: 100%; }
  .ff-recipe-head { padding: 0; }
  .ff-recipe-hero { display: block; }
  .ff-recipe-hero .ff-title { font-size: 30pt; }
  .ff-recipe-hero .ff-body { font-size: 12pt; }
  .ff-recipe-content { grid-template-columns: 1fr 2fr; gap: 30px; padding-block: 20px; }
  .ff-recipe-content .ff-heading { font-size: 20pt; }
  .ff-recipe-ingredients li, .ff-recipe-method li p, .ff-recipe-notes p { font-size: 11pt; }
  .ff-recipe-method li, .ff-recipe-ingredients li { break-inside: avoid; }
}