/*
Theme Name: Fuji Cookbook
Theme URI: https://fujicookbook.grovehouse.xyz/
Author: Zachary Grimshaw
Author URI: https://github.com/zgrimz
Description: The Fuji Cookbook website as a Twenty Twenty-Five child theme: warm paper, three inks, one green, Inter and Source Serif 4, and an opt-in dark theme the visitor picks from the header. Ships the landing page's sections as block patterns.
Template: twentytwentyfive
Requires at least: 6.7
Tested up to: 7.0
Requires PHP: 7.4
Version: 1.2.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: fuji-cookbook
*/

/* ---------- Tokens ----------
   Light is the default: the app's own palette from the Fuji Cookbook design
   system. The light values of the palette live in theme.json, where the
   editor's color pickers can see them; the tokens here are the ones a color
   picker has no use for (shadows, rings, the heading ink). Dark is opt-in,
   whatever the visitor's system setting: the header toggle sets
   data-theme="dark" on <html>, and the block below swaps every palette color
   by redefining WordPress's own preset variables, so any block colored from
   the palette follows the theme without knowing it exists.

   Every text value is checked against its theme's paper for WCAG AA (4.5:1
   for body copy), with room to spare for the small grey text. */
:root{
  color-scheme:light;

  --fc-gutter:32px;
  --fc-section-space:96px;

  --fc-text-display:#201D17;            /* 14.7:1 — headings */
  --fc-accent-hi:#245A3D;               /* hover deepens on paper */
  --fc-accent-ring:rgba(46,107,74,.45);
  --fc-on-accent-line:rgba(255,255,255,.55);
  --fc-on-accent-wash:rgba(255,255,255,.12);
  --fc-gold-fill-hi:#C68A45;
  --fc-on-gold:#201D17;
  --fc-hairline-soft:#E7DFCF;

  /* Surfaces whose treatment changes with the theme, not just their color. */
  --fc-card-shadow:0 1px 2px rgba(41,33,15,.04);
  --fc-card-raised:#FBF8F2;
  --fc-frame-border:#DDD3BF;
  --fc-frame-shadow:0 20px 60px -24px rgba(41,33,15,.35);

  /* Twenty Twenty-Five's own color names, pointed at this palette, so the
     parent theme's patterns and templates pick up the brand. */
  --wp--preset--color--accent-1:var(--wp--preset--color--accent-soft);
  --wp--preset--color--accent-2:var(--wp--preset--color--gold-fill);
  --wp--preset--color--accent-3:var(--wp--preset--color--accent);
  --wp--preset--color--accent-4:var(--wp--preset--color--ink-3);
  --wp--preset--color--accent-5:var(--wp--preset--color--card);
  --wp--preset--color--accent-6:var(--wp--preset--color--hairline);
}

/* Dark, opt-in through the header toggle. Repeated on body in case
   WordPress declares its presets there rather than on :root. */
:root[data-theme="dark"],
:root[data-theme="dark"] body{
  color-scheme:dark;

  --wp--preset--color--base:#0E0D0B;
  --wp--preset--color--base-sunk:#0A0A08;              /* ink-3 5.8:1 on it */
  --wp--preset--color--card:rgba(244,239,228,.025);
  --wp--preset--color--contrast:#F4EFE4;               /* 16.9:1 — body */
  --wp--preset--color--ink-2:rgba(244,239,228,.62);    /*  6.9:1 — lede */
  --wp--preset--color--ink-3:rgba(244,239,228,.56);    /*  5.8:1 — captions */
  --wp--preset--color--ink-4:rgba(244,239,228,.50);    /*  4.8:1 — small print */
  --wp--preset--color--accent:#86D5AC;                 /* 11.2:1 */
  --wp--preset--color--accent-soft:#1A2A21;
  --wp--preset--color--on-accent:#0E0D0B;
  --wp--preset--color--gold:#C9A15A;                   /*  8.1:1 */
  --wp--preset--color--gold-fill:#C9A15A;
  --wp--preset--color--hairline:rgba(244,239,228,.12);

  --fc-text-display:#F7F3EA;                           /* 17.5:1 — headings */
  --fc-accent-hi:#9FE0BE;
  --fc-accent-ring:rgba(134,213,172,.5);
  --fc-on-accent-line:rgba(14,13,11,.45);
  --fc-on-accent-wash:rgba(14,13,11,.08);
  --fc-gold-fill-hi:#D9B472;
  --fc-on-gold:#0E0D0B;
  --fc-hairline-soft:rgba(244,239,228,.10);

  --fc-card-shadow:none;
  --fc-card-raised:#1A1814;
  --fc-frame-border:var(--wp--preset--color--hairline);
  --fc-frame-shadow:0 40px 90px -40px rgba(0,0,0,.9);
}

@media (max-width:700px){
  :root{--fc-gutter:20px;--fc-section-space:64px;}
}

/* Twenty Twenty-Five's color classes, for its patterns. */
.has-accent-1-color{color:var(--wp--preset--color--accent-1) !important;}
.has-accent-2-color{color:var(--wp--preset--color--accent-2) !important;}
.has-accent-3-color{color:var(--wp--preset--color--accent-3) !important;}
.has-accent-4-color{color:var(--wp--preset--color--accent-4) !important;}
.has-accent-5-color{color:var(--wp--preset--color--accent-5) !important;}
.has-accent-6-color{color:var(--wp--preset--color--accent-6) !important;}
.has-accent-1-background-color{background-color:var(--wp--preset--color--accent-1) !important;}
.has-accent-2-background-color{background-color:var(--wp--preset--color--accent-2) !important;}
.has-accent-3-background-color{background-color:var(--wp--preset--color--accent-3) !important;}
.has-accent-4-background-color{background-color:var(--wp--preset--color--accent-4) !important;}
.has-accent-5-background-color{background-color:var(--wp--preset--color--accent-5) !important;}
.has-accent-6-background-color{background-color:var(--wp--preset--color--accent-6) !important;}
.has-accent-6-border-color{border-color:var(--wp--preset--color--accent-6) !important;}

/* ---------- Base ---------- */
/* Widths include padding and border, as on the static site. Scoped to the
   page itself so WordPress's admin bar keeps its own sizing. */
.wp-site-blocks *,.wp-site-blocks *::before,.wp-site-blocks *::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  /* Every block of text rebalances its last lines, so a single word is
     never left on a line of its own. Headings balance instead. */
  text-wrap:pretty;
}
h1,h2,h3,h4,h5,h6{text-wrap:balance;}
/* Source Serif 4 picks its optical size from the font size, and past ~32px
   its display cuts thin to hairlines that read lighter than the app's New
   York. The big headings hold the 32 cut instead. */
h1,h2{font-variation-settings:"opsz" 32;}
a{transition:color .18s ease, background-color .18s ease, border-color .18s ease;}
:focus-visible{outline:2px solid var(--wp--preset--color--accent);outline-offset:3px;border-radius:6px;}
/* Twenty Twenty-Five outlines anything focused, even by a click or tap;
   the ring above is for keyboard focus only. */
:where(.wp-site-blocks) :focus:not(:focus-visible){outline:none;}
strong{font-weight:600;}

/* Block themes start each top-level part (header, main, footer) a block gap
   apart; the sections here carry their own spacing. */
.wp-site-blocks > *{margin-block-start:0;}

/* Visually hidden, still read by assistive tech. */
.screen-reader-text{
  position:absolute !important;width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
  word-wrap:normal !important;
}
/* A hidden heading takes no room, so what follows it starts flush. */
:root .screen-reader-text + *{margin-block-start:0;}
.skip-link.screen-reader-text:focus{
  clip:auto;clip-path:none;width:auto;height:auto;margin:0;
  top:0;left:0;z-index:100000;
  padding:10px 16px;border-radius:0 0 10px 0;
  background:var(--wp--preset--color--accent);color:var(--wp--preset--color--on-accent);
  font-weight:600;text-decoration:none;
}

/* ---------- Header ---------- */
.fc-masthead{padding-top:20px;padding-bottom:20px;}
.fc-masthead-inner{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.fc-masthead-inner.fc-masthead-inner > *{margin:0;}
.fc-wordmark{margin:0;}
.fc-wordmark a{
  display:flex;align-items:center;gap:12px;min-height:44px;
  white-space:nowrap;
}
/* The app's green tile, drawn beside the site title. */
.fc-wordmark a::before{
  content:"";flex:none;
  width:13px;height:13px;border-radius:4px;
  background:var(--wp--preset--color--accent);
}

/* Theme toggle. Hidden until its script runs, since it does nothing
   without it. Lucide's sun and moon at their 2px stroke; it shows the
   theme a press switches to: the moon in light, the sun in dark. */
.fc-theme-toggle{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:44px;height:44px;padding:0;margin:0;
  border:1px solid var(--wp--preset--color--hairline);border-radius:999px;
  background:transparent;color:var(--wp--preset--color--ink-2);
  cursor:pointer;
}
.fc-theme-toggle[hidden]{display:none;}
.fc-theme-toggle:hover{color:var(--wp--preset--color--accent);}
.fc-theme-toggle svg{width:20px;height:20px;}
.fc-theme-toggle .fc-icon-sun,
.fc-theme-toggle[aria-pressed="true"] .fc-icon-moon{display:none;}
.fc-theme-toggle[aria-pressed="true"] .fc-icon-sun{display:block;}
/* The editor has no script to unhide it. */
.editor-styles-wrapper .fc-theme-toggle[hidden]{display:inline-flex;}

/* Menu: a Navigation block whose links are written into the header part.
   Changing them in the Site Editor saves them as a menu. Below 760px the
   links move to a full-screen sheet behind a menu button. */
.fc-masthead-inner.fc-masthead-inner > .fc-wordmark{margin-right:auto;}
/* The links take the nav's color: WordPress sets them to inherit. */
.fc-nav{font-size:15px;font-weight:500;line-height:1.2;color:var(--wp--preset--color--ink-2);}
.fc-nav.fc-nav .wp-block-navigation__container{gap:28px;}
.fc-nav .wp-block-navigation-item__content{display:flex;align-items:center;min-height:44px;}
.fc-nav.fc-nav .wp-block-navigation-item__content:hover{color:var(--wp--preset--color--accent);}
@media (min-width:760px){
  .fc-masthead-inner.fc-masthead-inner > .fc-nav{margin-right:12px;}
}

/* The menu and close buttons, drawn like the theme toggle, with Lucide's
   menu and x icons. */
.fc-nav .wp-block-navigation__responsive-container-open,
.fc-nav .wp-block-navigation__responsive-container-close{
  align-items:center;justify-content:center;
  width:44px;height:44px;
  border:1px solid var(--wp--preset--color--hairline);border-radius:999px;
  color:var(--wp--preset--color--ink-2);
}
.fc-nav .wp-block-navigation__responsive-container-close{display:flex;}
.fc-nav .wp-block-navigation__responsive-container-open:hover,
.fc-nav .wp-block-navigation__responsive-container-close:hover{color:var(--wp--preset--color--accent);}
.fc-nav .wp-block-navigation__responsive-container-open svg,
.fc-nav .wp-block-navigation__responsive-container-close svg{display:none;}
.fc-nav .wp-block-navigation__responsive-container-open::before,
.fc-nav .wp-block-navigation__responsive-container-close::before{
  content:"";width:20px;height:20px;
  background:currentColor;
  -webkit-mask:var(--fc-icon) center / contain no-repeat;
  mask:var(--fc-icon) center / contain no-repeat;
}
.fc-nav .wp-block-navigation__responsive-container-open{
  --fc-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 6h16M4 12h16M4 18h16'/%3E%3C/svg%3E");
}
.fc-nav .wp-block-navigation__responsive-container-close{
  --fc-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E");
}

/* The sheet. Its top row lines up with the header's, so the close button
   lands where the menu button was. */
.fc-nav .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay){
  padding:20px var(--fc-gutter) 48px;
}
/* Full-width rows, though the block is right-aligned in the header. */
.fc-nav .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) .wp-block-navigation__responsive-container-content{
  padding-top:76px;align-items:stretch;
}
.fc-nav.fc-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container{
  gap:0;align-items:stretch;
  border-top:1px solid var(--wp--preset--color--hairline);
}
.fc-nav.fc-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item{
  align-items:stretch;
  border-bottom:1px solid var(--wp--preset--color--hairline);
}
.fc-nav.fc-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content{
  padding:14px 0;
  font-family:var(--wp--preset--font-family--source-serif-4);
  font-size:1.75rem;font-weight:600;
  color:var(--fc-text-display);
}
.fc-nav.fc-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover{
  color:var(--wp--preset--color--accent);
}

/* WordPress collapses the menu below 600px; the links need about 760. */
@media (max-width:759px){
  .fc-nav .wp-block-navigation__responsive-container-open:not(.always-shown){display:flex;}
  .fc-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open){display:none;}
  /* The menu button goes in the corner, where the sheet's close button
     appears, with the theme toggle beside it. */
  .fc-masthead-inner > .fc-nav{order:1;}
}

/* ---------- Buttons ---------- */
.wp-block-button__link{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:56px;text-align:center;
}
.wp-block-button__link:active{transform:translateY(1px);}
/* Icons drawn with a mask, so they take the button's text color. Add one by
   giving the Button block its class under Advanced > Additional CSS class(es). */
.fc-icon-github .wp-block-button__link::before,
.fc-icon-coffee .wp-block-button__link::before,
.fc-icon-mail .wp-block-button__link::before{
  content:"";flex:none;width:20px;height:20px;
  background:currentColor;
  -webkit-mask:var(--fc-icon) center / contain no-repeat;
  mask:var(--fc-icon) center / contain no-repeat;
}
.fc-icon-github{
  --fc-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z'/%3E%3C/svg%3E");
}
.fc-icon-coffee{
  --fc-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 9h13v5.5a5 5 0 0 1-5 5h-3a5 5 0 0 1-5-5V9Z'/%3E%3Cpath d='M16.5 10.5h1.75a2.75 2.75 0 0 1 0 5.5H16.5'/%3E%3Cpath d='M8 3v2.5M12 3v2.5'/%3E%3C/svg%3E");
}
.fc-icon-coffee .wp-block-button__link::before{width:19px;height:19px;}
/* Lucide's mail, as on v0's "Email me at launch". */
.fc-icon-mail{
  --fc-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7'/%3E%3C/svg%3E");
}

/* Outline: the second ask on paper, card-colored so it never competes with
   the badge. The colors are in theme.json; this is its hover. */
.wp-block-button.is-style-outline .wp-block-button__link{box-shadow:var(--fc-card-shadow);}
.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-button.is-style-outline .wp-block-button__link:focus-visible{
  background:var(--wp--preset--color--card);
  border-color:var(--fc-accent-ring);
  color:var(--wp--preset--color--accent);
}
/* Quiet: the same, with ink text, for the tip jar, a different kind of ask. */
.wp-block-button.is-style-fc-quiet .wp-block-button__link{
  min-height:48px;
  background:var(--wp--preset--color--card);
  border-color:var(--wp--preset--color--hairline);
  color:var(--wp--preset--color--contrast);
  box-shadow:var(--fc-card-shadow);
}
.wp-block-button.is-style-fc-quiet .wp-block-button__link:hover,
.wp-block-button.is-style-fc-quiet .wp-block-button__link:focus-visible{
  background:var(--wp--preset--color--card);
  border-color:var(--fc-accent-ring);
  color:var(--wp--preset--color--contrast);
}
/* On green: an outline for the solid green band. */
.wp-block-button.is-style-fc-on-accent .wp-block-button__link{
  background:transparent;
  border-color:var(--fc-on-accent-line);
  color:var(--wp--preset--color--on-accent);
}
.wp-block-button.is-style-fc-on-accent .wp-block-button__link:hover,
.wp-block-button.is-style-fc-on-accent .wp-block-button__link:focus-visible{
  background:var(--fc-on-accent-wash);
  color:var(--wp--preset--color--on-accent);
}

/* App Store badge: Apple's own artwork, served from Apple's marketing
   toolbox, which the brand guidelines say not to redraw or recolor. Shown
   at the 56px button height (Apple's minimum is 40px). */
.wp-block-image.fc-store-badge{flex:none;margin:0;line-height:0;}
.wp-block-image.fc-store-badge a{display:inline-block;border-radius:9px;}
.wp-block-image.fc-store-badge img{width:168px;height:56px;}

.fc-cta-row{
  display:flex;align-items:center;flex-wrap:wrap;gap:12px 14px;
}
.fc-cta-row.fc-cta-row > *{margin:0;}
/* The GitHub button beside the badge. On phones it takes the badge's own
   168 x 56 so the two read as a matched pair, and only the short label
   fits that width. */
.fc-btn-github .fc-label-short{display:none;}
@media (max-width:559px){
  .fc-btn-github .wp-block-button__link{width:168px;padding:0 16px;}
  .fc-btn-github .fc-label-full{display:none;}
  .fc-btn-github .fc-label-short{display:inline;}
}

/* ---------- Shared type ---------- */
.is-style-fc-eyebrow{
  font-size:13px;font-weight:600;line-height:1.35;
  letter-spacing:.1em;text-transform:uppercase;
  color:var(--wp--preset--color--ink-3);
}
:root .is-style-fc-eyebrow + *{margin-block-start:16px;}
.is-style-fc-lede{
  font-size:clamp(1.0625rem, .3vw + 1rem, 1.125rem);
  line-height:1.55;color:var(--wp--preset--color--ink-2);max-width:40em;
}
:root .is-style-fc-lede + .is-style-fc-lede{margin-block-start:16px;}
.is-style-fc-note{
  font-size:15px;line-height:1.5;color:var(--wp--preset--color--ink-3);
}
/* Small print: the footer's legal grey, a size below it, so it reads as a
   disclaimer rather than more of the section. */
.is-style-fc-footnote{
  font-size:12px;line-height:1.5;color:var(--wp--preset--color--ink-4);
}
:root * + .is-style-fc-footnote{margin-block-start:16px;}
.is-style-fc-sans{
  font-family:var(--wp--preset--font-family--inter);
  font-size:16px;font-weight:600;line-height:1.35;letter-spacing:normal;
  color:var(--wp--preset--color--contrast);
  font-variation-settings:normal;
}

/* A heading's second line: a step down in size, set in the serif's italic
   in the accent green, the way a cookbook sets a subtitle. */
.fc-sub{
  display:block;margin-top:.12em;
  font-size:.75em;font-weight:400;font-style:italic;
  color:var(--wp--preset--color--accent);
}
/* Keeps a sentence of a heading together: when the whole heading won't fit
   on one line, it breaks between the sentences rather than inside one. */
.fc-phrase{display:inline-block;}
.fc-title-lg{font-size:clamp(2rem, 3.2vw + 1.1rem, 3.125rem);line-height:1.06;}
.fc-section-head{max-width:720px;}
/* A small serif heading, for the tip jar: a single ask rather than a full
   argument. */
h2.fc-minor-title{
  font-size:26px;line-height:1.2;letter-spacing:-.01em;
  font-variation-settings:normal;
}

/* ---------- Bands and cards ---------- */
.fc-section{padding-top:var(--fc-section-space);padding-bottom:var(--fc-section-space);}
.is-style-fc-band-sunk{
  background:var(--wp--preset--color--base-sunk);
  border-top:1px solid var(--wp--preset--color--hairline);
  border-bottom:1px solid var(--wp--preset--color--hairline);
}
.is-style-fc-band-card{
  background:var(--wp--preset--color--card);
  border-top:1px solid var(--wp--preset--color--hairline);
  border-bottom:1px solid var(--wp--preset--color--hairline);
}
.is-style-fc-band-accent{
  background:var(--wp--preset--color--accent);
  color:var(--wp--preset--color--on-accent);
}
.is-style-fc-band-accent :is(h1,h2,h3,h4,h5,h6),
.is-style-fc-band-accent a:not(.wp-element-button){color:inherit;}
/* The page's accent ring would vanish on its own color. */
.is-style-fc-band-accent :focus-visible{outline-color:var(--wp--preset--color--on-accent);}
/* Sections stack edge to edge; each carries its own padding. */
:root .wp-block-post-content > :is(.fc-hero,.fc-section,.fc-tip,.fc-doc,.is-style-fc-band-sunk,.is-style-fc-band-card,.is-style-fc-band-accent){
  margin-block-start:0;
}

.is-style-fc-card{
  padding:22px;
  background:var(--wp--preset--color--card);
  border:1px solid var(--wp--preset--color--hairline);border-radius:18px;
  box-shadow:var(--fc-card-shadow);
}
.is-style-fc-card p{font-size:15px;line-height:1.55;color:var(--wp--preset--color--ink-2);}
:root .is-style-fc-card > .wp-block-heading + p{margin-block-start:6px;}

/* Device frame for the app's screenshots. */
.wp-block-image.is-style-fc-frame{margin:0;}
.wp-block-image.is-style-fc-frame img{
  width:100%;
  border-radius:38px;
  border:1px solid var(--fc-frame-border);
  background:var(--wp--preset--color--base-sunk);
  box-shadow:var(--fc-frame-shadow);
}
/* No frame border: the Kitchen's own screens are dark, so they read as a
   device on the paper without one. */
.wp-block-image.is-style-fc-shot{margin:0;display:flex;flex-direction:column;gap:16px;}
.wp-block-image.is-style-fc-shot img{
  width:100%;max-width:260px;margin:0 auto;
  border-radius:30px;
  box-shadow:var(--fc-frame-shadow);
}
.wp-block-image.is-style-fc-shot .wp-element-caption{
  margin:0;font-size:16px;line-height:1.4;
  color:var(--wp--preset--color--ink-3);text-align:center;text-wrap:balance;
}

/* Slot badge, as the app draws C1 to C7. */
.fc-slot{
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:8px;
  background:var(--wp--preset--color--accent-soft);color:var(--wp--preset--color--accent);
  font-size:13px;font-weight:700;line-height:1;
  font-variant-numeric:tabular-nums;
}

/* Text and picture side by side from 900px, stacked below it with the text
   first. */
.fc-split{display:grid;gap:56px;align-items:center;}
.fc-split.fc-split > *{margin:0;}

/* ---------- Hero ---------- */
.fc-hero{
  display:grid;gap:56px;align-items:center;
  padding-top:48px;padding-bottom:88px;
}
.fc-hero.fc-hero > *{margin:0;}
.fc-hero h1 .fc-sub{margin-top:.12em;}
.fc-hero-copy > .is-style-fc-lede{
  margin-top:24px;
  font-size:clamp(1.0625rem, .6vw + .95rem, 1.25rem);
  line-height:1.5;max-width:34em;
}
.fc-hero-copy > .fc-cta-row{margin-top:32px;}
.fc-hero-copy > .is-style-fc-note{margin-top:16px;}

/* The phone, with the push result card hanging off its lower left. The
   left and bottom padding is the room the card hangs into. */
.fc-hero-visual{
  position:relative;justify-self:center;
  width:min(100%, 330px);
  padding:0 0 28px 40px;
}
.fc-hero-visual.fc-hero-visual > *{margin:0;}
.fc-pushed{
  position:absolute;left:0;bottom:0;
  display:flex;align-items:center;gap:12px;
  max-width:250px;padding:14px 20px 14px 14px;
  background:var(--fc-card-raised);
  border:1px solid var(--wp--preset--color--hairline);border-radius:18px;
  box-shadow:var(--fc-frame-shadow);
}
.fc-pushed .fc-slot{width:40px;height:40px;flex:none;font-size:15px;}
.fc-pushed-name{
  display:block;
  font-family:var(--wp--preset--font-family--source-serif-4);
  font-size:17px;font-weight:600;line-height:1.25;
  color:var(--fc-text-display);
}
.fc-pushed-status{
  display:flex;align-items:center;gap:5px;margin-top:2px;
  font-size:13px;line-height:1.3;color:var(--wp--preset--color--ink-3);
}
.fc-pushed-status svg{width:14px;height:14px;flex:none;color:var(--wp--preset--color--accent);}

/* ---------- How it works ----------
   Find, test, push: three across from 760px, stacked below it. */
.fc-steps{
  padding:32px 0;
  display:grid;gap:24px 40px;
  grid-template-columns:1fr;
}
.fc-steps.fc-steps > *{margin:0;}
/* The badge sits beside the heading; the text hangs under the heading. */
.fc-step{
  display:grid;grid-template-columns:28px minmax(0, 1fr);gap:0 12px;
  align-items:center;align-content:start;
}
.fc-step.fc-step > *{margin:0;}
.fc-step .fc-slot{width:28px;height:28px;}
.fc-step.fc-step > p:not(.fc-slot){
  grid-column:2;margin-top:4px;
  font-size:15px;line-height:1.45;color:var(--wp--preset--color--ink-2);
}

/* ---------- Your library ---------- */
.fc-library-shot{justify-self:center;width:min(100%, 270px);}
.fc-library-shot .wp-block-image.is-style-fc-frame img{border-radius:36px;}
/* Two columns once each card can be 300px wide, one below that. The
   min() / max() pair caps it at two, so four cards never split 3 + 1. */
.fc-ways{
  display:grid;gap:10px;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, max(300px, calc(50% - 5px))), 1fr));
}
:root .fc-ways{margin-block-start:28px;}
.fc-ways.fc-ways > *{margin:0;}
.fc-ways .is-style-fc-card{padding:16px 18px;}
:root .fc-ways .is-style-fc-card > .wp-block-heading + p{margin-block-start:2px;}
.fc-ways .is-style-fc-card p{line-height:1.45;}

/* ---------- Push to your camera ----------
   A chapter as the app's Chapters list draws it, plus the push bar from
   its detail screen. */
.fc-chapter{
  justify-self:center;width:100%;max-width:440px;
  display:flex;flex-direction:column;gap:14px;
  padding:20px;
  background:var(--wp--preset--color--base);
  border:1px solid var(--wp--preset--color--hairline);border-radius:18px;
}
.fc-chapter-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;}
.fc-chapter-name{
  font-family:var(--wp--preset--font-family--source-serif-4);
  font-size:22px;font-weight:600;line-height:1.2;
  color:var(--fc-text-display);
}
.fc-chapter-meta{font-size:13px;color:var(--wp--preset--color--ink-3);white-space:nowrap;}
.fc-slots{display:grid;grid-template-columns:repeat(7, minmax(0, 1fr));gap:6px;}
.fc-slots .fc-slot{aspect-ratio:1;}
/* Cut to two lines with an ellipsis, as the app cuts it. */
.fc-chapter-recipes{
  margin:0;
  font-size:15px;line-height:1.5;color:var(--wp--preset--color--ink-3);
  display:-webkit-box;-webkit-box-orient:vertical;
  -webkit-line-clamp:2;line-clamp:2;overflow:hidden;
}
.fc-push-bar{
  padding:14px;border-radius:14px;
  background:var(--wp--preset--color--accent);color:var(--wp--preset--color--on-accent);
  text-align:center;font-size:16px;font-weight:600;line-height:1.2;
}

/* ---------- Test Kitchen ---------- */
.fc-dishes{display:grid;gap:16px;}
:root .fc-dishes{margin-block-start:48px;}
.fc-dishes.fc-dishes > *{margin:0;}

/* ---------- Why it's free ----------
   Boxes are at least 300px wide: any narrower and "Your recipes, on your
   phone" wraps to two lines, starting its text a line below the others. */
.fc-cards{
  display:grid;gap:16px;
  grid-template-columns:repeat(auto-fit, minmax(min(300px, 100%), 1fr));
}
:root .fc-cards{margin-block-start:40px;}
.fc-cards.fc-cards > *{margin:0;}

/* ---------- Open source ----------
   Two repositories, each a whole-card link. They borrow GitHub's own repo
   card (the mark, the name, a Public badge) and sit flat on the paper with
   a tighter corner, so they read as links out to GitHub rather than as
   more of the page's own cards. */
.fc-repos{
  display:grid;gap:16px;
  grid-template-columns:repeat(auto-fit, minmax(min(360px, 100%), 1fr));
}
:root .fc-repos{margin-block-start:32px;}
.fc-repos.fc-repos > *{margin:0;}
.fc-repo{
  position:relative;
  display:flex;flex-direction:column;gap:10px;
  padding:20px 22px;
  border:1px solid var(--fc-frame-border);border-radius:10px;
  color:var(--wp--preset--color--contrast);
  container-type:inline-size;
}
.fc-repo.fc-repo > *{margin:0;}
.fc-repo:hover,.fc-repo:focus-within{
  background:var(--wp--preset--color--card);border-color:var(--fc-accent-ring);
}
.fc-repo:has(a:focus-visible){outline:2px solid var(--wp--preset--color--accent);outline-offset:3px;}
.fc-repo-name{
  display:flex;align-items:center;gap:10px;
  font-size:17px;font-weight:600;line-height:1.3;
}
/* GitHub's mark, before the name. */
.fc-repo-name::before{
  content:"";flex:none;width:20px;height:20px;
  background:var(--wp--preset--color--contrast);
  -webkit-mask:var(--fc-icon) center / contain no-repeat;
  mask:var(--fc-icon) center / contain no-repeat;
}
.fc-repo-name a{flex:1;min-width:0;color:var(--wp--preset--color--accent);overflow-wrap:break-word;}
.fc-repo-name a:focus-visible{outline:none;}
/* The name's link covers the whole card. */
.fc-repo-name a::after{content:"";position:absolute;inset:0;border-radius:10px;}
.fc-repo:hover .fc-repo-name a,
.fc-repo-name a:focus-visible{text-decoration:underline;text-underline-offset:3px;}
/* The Public badge, after the name. */
.fc-repo-name::after{
  content:"Public";flex:none;padding:0 8px;
  border:1px solid var(--fc-frame-border);border-radius:999px;
  font-size:12px;font-weight:500;line-height:20px;color:var(--wp--preset--color--ink-3);
}
.fc-repo-desc{font-size:15px;line-height:1.55;color:var(--wp--preset--color--ink-2);}
.fc-repo-meta{
  margin-top:auto !important;padding-top:2px;
  display:flex;flex-wrap:wrap;gap:4px 16px;
  font-size:13px;font-weight:500;color:var(--wp--preset--color--ink-3);
}
/* Keep the header on one line as the card narrows: below ~272px the longer
   name and the badge no longer fit side by side, so the badge goes. */
@container (max-width:279px){.fc-repo-name::after{display:none;}}
.fc-notes{max-width:760px;}
:root .fc-notes{margin-block-start:32px;}
.fc-notes p{font-size:15px;line-height:1.6;color:var(--wp--preset--color--ink-2);}
:root .fc-notes > p + p{margin-block-start:16px;}

/* ---------- Get cooking ---------- */
.fc-closer{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  padding-top:88px;padding-bottom:88px;
}
.fc-closer.fc-closer > *{margin:0;}
.fc-closer h2{
  font-size:clamp(2.25rem, 3.4vw + 1.3rem, 3.5rem);
  line-height:1.05;letter-spacing:-.02em;
}
.fc-closer.fc-closer > p{margin-top:16px;font-size:18px;line-height:1.5;}
.fc-closer.fc-closer > .fc-cta-row{justify-content:center;margin-top:28px;}

/* ---------- Tip the cook ---------- */
.fc-tip{padding-top:72px;padding-bottom:72px;}
.fc-tip.fc-tip > *{margin:0;}
.fc-tip p{
  font-size:16px;line-height:1.6;color:var(--wp--preset--color--ink-2);
  max-width:40em;
}
:root .fc-tip h2 + p{margin-block-start:8px;}
.fc-tip.fc-tip > .wp-block-buttons{margin-top:24px;}

/* ---------- Footer ---------- */
.fc-colophon{border-top:1px solid var(--fc-hairline-soft);}
.fc-colophon-inner{
  padding-top:40px;padding-bottom:56px;
  font-size:14px;font-weight:500;line-height:1.4;
  color:var(--wp--preset--color--ink-3);
}
.fc-colophon-inner.fc-colophon-inner > *{margin:0;}
.fc-credit{color:var(--wp--preset--color--contrast);}
/* The credit and the social icons share the footer's first row, the icons
   right after the credit, wrapping under it on a narrow screen. Logos
   only, in the footer's grey rather than each network's colour, so they sit
   quietly beside the small print; green on hover, as the links are. */
.fc-colophon-top{display:flex;align-items:center;flex-wrap:wrap;gap:4px 24px;}
.fc-colophon-top.fc-colophon-top > *{margin:0;}
/* The icons' 44px tap areas reach past the row, so each glyph lines up
   with the text edge. */
.fc-colophon .wp-block-social-links.fc-social{gap:4px;margin:-10px;padding:0;}
.fc-colophon .wp-block-social-links.fc-social.is-style-logos-only .wp-social-link{
  color:var(--wp--preset--color--ink-2);background:none;
}
.fc-colophon .wp-block-social-links.fc-social .wp-social-link a{display:flex;padding:10px;}
.fc-colophon .wp-block-social-links.fc-social .wp-social-link svg{width:22px;height:22px;}
.fc-colophon .wp-block-social-links.fc-social.is-style-logos-only .wp-social-link:hover{color:var(--wp--preset--color--accent);transform:none;}
/* v1's heart, drawn rather than typed: the ♥ character isn't in the
   self-hosted Inter subset, and some systems show it as a red emoji. */
.fc-heart{
  display:inline-block;width:1em;height:1em;vertical-align:-.14em;
  fill:var(--wp--preset--color--accent);
}
/* Privacy links, grouped by what they cover: the website first, then the
   app. The larger gap sets them apart from the personal credit. */
.fc-colophon-inner.fc-colophon-inner > .fc-footer-links{
  margin-top:32px;
  display:flex;flex-wrap:wrap;gap:8px 32px;
}
.fc-link-group{display:flex;gap:10px;}
.fc-link-group ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;}
/* The second value keeps screen readers from saying "middle dot". */
.fc-link-group li + li::before{
  content:"\00B7";content:"\00B7" / "";
  padding:0 8px;color:var(--wp--preset--color--ink-4);
}
.fc-link-group [hidden]{display:none;}
@media (max-width:359px){
  .fc-link-group ul{gap:4px 16px;}
  .fc-link-group li + li::before{content:none;}
}
/* Small print recedes by size and weight, not by dropping toward the
   4.5:1 contrast floor. */
.fc-colophon-inner.fc-colophon-inner > .fc-legal{
  margin-top:16px;max-width:78ch;
  font-size:13px;font-weight:400;line-height:1.65;
  color:var(--wp--preset--color--ink-4);
}

/* ---------- Documents (the privacy policies) ---------- */
.fc-doc{padding-bottom:96px;}
.fc-doc.fc-doc > *{margin:0;}
.fc-doc-head{padding-top:96px;max-width:800px;}
.fc-doc-head.fc-doc-head > *{margin:0;}
.fc-doc-head h1{
  font-size:clamp(2.25rem, 4.2vw, 3.5rem);
  line-height:1.04;
}
.fc-doc-head.fc-doc-head > .is-style-fc-eyebrow{margin-bottom:16px;}
.fc-doc-meta{
  display:flex;flex-wrap:wrap;gap:10px 28px;
  font-size:14px;font-weight:500;line-height:1.4;color:var(--wp--preset--color--ink-3);
}
.fc-doc-head.fc-doc-head > .fc-doc-meta{margin-top:26px;}
.fc-doc-meta.fc-doc-meta > *,
.fc-doc-meta.fc-doc-meta > * > *{margin:0;}
.fc-doc-meta-label{
  display:block;margin-bottom:6px !important;
  font-size:11px;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--wp--preset--color--ink-4);
}
.fc-doc-meta-value{color:var(--wp--preset--color--contrast);}
.fc-doc-lede{
  font-size:clamp(1.0625rem, .6vw + .95rem, 1.1875rem);
  line-height:1.6;color:var(--wp--preset--color--ink-2);max-width:640px;
}
.fc-doc-head.fc-doc-head > .fc-doc-lede{margin-top:34px;}
.fc-doc-head.fc-doc-head > .fc-doc-lede + .fc-doc-lede{margin-top:16px;}

/* Contents */
.fc-doc.fc-doc > .fc-contents{
  margin-top:56px;padding:28px 0;
  border-top:1px solid var(--fc-hairline-soft);
  border-bottom:1px solid var(--fc-hairline-soft);
}
.fc-contents.fc-contents > *{margin:0;}
.fc-contents h2{
  margin-bottom:22px !important;
  font-family:var(--wp--preset--font-family--inter);
  font-size:13px;font-weight:600;line-height:1;
  letter-spacing:.13em;text-transform:uppercase;color:var(--wp--preset--color--ink-3);
  font-variation-settings:normal;
}
.fc-contents ol{
  list-style:none;margin:0;padding:0;
  columns:2;column-gap:48px;
  max-width:820px;
}
.fc-contents li{break-inside:avoid;margin-top:0;margin-bottom:11px;font-size:15px;line-height:1.45;}
.fc-contents li a{color:var(--wp--preset--color--contrast);}
.fc-contents li a:hover,.fc-contents li a:focus-visible{color:var(--wp--preset--color--gold);}
.fc-num{font-variant-numeric:tabular-nums;}
.fc-contents .fc-num{display:inline-block;min-width:1.9em;color:var(--wp--preset--color--ink-4);}

/* Sections */
.fc-doc-section{padding-top:64px;max-width:72ch;}
.fc-doc.fc-doc > .fc-doc-section + .fc-doc-section{
  margin-top:64px;
  border-top:1px solid var(--fc-hairline-soft);
}
.fc-doc-section.fc-doc-section > *{margin:0;}
.fc-doc-section h2{
  font-size:clamp(1.5rem, .9vw + 1.25rem, 2rem);
  letter-spacing:-.02em;line-height:1.15;
  font-variation-settings:normal;
}
.fc-doc-section h2 .fc-num{
  color:var(--wp--preset--color--ink-4);font-family:var(--wp--preset--font-family--inter);
  font-size:.62em;font-weight:600;letter-spacing:.04em;
  margin-right:.35em;
}
.fc-doc-section p{font-size:16px;line-height:1.7;color:var(--wp--preset--color--ink-2);}
.fc-doc-section.fc-doc-section > p{margin-top:18px;}
.fc-doc-section.fc-doc-section > h2 + p{margin-top:16px;}
.fc-doc-section strong{color:var(--wp--preset--color--contrast);}
.fc-doc-section code{font-family:var(--wp--preset--font-family--monospace);font-size:.88em;}

/* Lists: dots, and rules (the short version's green-ruled claims). Their
   grid gap spaces the items, in place of the parent theme's top margin. */
.wp-block-list:is(.is-style-fc-dots,.is-style-fc-rules) li{margin-top:0;}
.wp-block-list.is-style-fc-dots{
  list-style:none;padding:0;
  display:grid;gap:14px;
}
.wp-block-list.is-style-fc-dots li{
  position:relative;padding-left:26px;
  font-size:16px;line-height:1.65;color:var(--wp--preset--color--ink-2);
}
.wp-block-list.is-style-fc-dots li::before{
  content:"";position:absolute;left:5px;top:.66em;
  width:5px;height:5px;border-radius:50%;
  background:var(--wp--preset--color--ink-4);
}
.wp-block-list.is-style-fc-dots li strong{color:var(--wp--preset--color--contrast);}
.wp-block-list.is-style-fc-rules{
  list-style:none;padding:0;
  display:grid;gap:22px;
}
.wp-block-list.is-style-fc-rules li{
  padding-left:20px;border-left:2px solid var(--wp--preset--color--accent);
  font-size:17px;line-height:1.65;color:var(--wp--preset--color--ink-2);
}
.wp-block-list.is-style-fc-rules li strong{color:var(--fc-text-display);}
.fc-doc-section.fc-doc-section > .is-style-fc-dots{margin:20px 0 0;}
/* A list nested inside Dots or Steps (Tab in a list item) has no style of
   its own, so it takes the dots here instead of the browser's own markers
   and indent. */
.wp-block-list:is(.is-style-fc-dots,.is-style-fc-steps) .wp-block-list{
  list-style:none;margin:14px 0 0;padding:0;
  display:grid;gap:14px;
}
.wp-block-list.is-style-fc-steps li li{
  position:relative;margin-top:0;padding-left:26px;
}
.wp-block-list.is-style-fc-steps li li::before{
  content:"";position:absolute;left:5px;top:.66em;
  width:5px;height:5px;border-radius:50%;
  background:var(--wp--preset--color--ink-4);
}
.fc-doc-section.fc-doc-section > .is-style-fc-rules{margin-top:24px;}

/* Tables */
.fc-doc-section.fc-doc-section > .wp-block-table{margin-top:22px;}
.fc-doc-section .wp-block-table table{
  width:100%;border-collapse:collapse;
  font-size:15px;line-height:1.55;color:var(--wp--preset--color--ink-2);
}
.fc-doc-section .wp-block-table thead{border:0;}
.fc-doc-section .wp-block-table :is(th,td){border:0;}
.fc-doc-section .wp-block-table th{
  text-align:left;vertical-align:bottom;
  padding:0 18px 10px 0;
  font-size:11px;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--wp--preset--color--ink-4);
  border-bottom:1px solid var(--wp--preset--color--hairline);
}
.fc-doc-section .wp-block-table td{
  vertical-align:top;padding:14px 18px 14px 0;
  border-bottom:1px solid var(--fc-hairline-soft);
}
.fc-doc-section .wp-block-table td:first-child{white-space:nowrap;color:var(--wp--preset--color--contrast);}
.fc-doc-section .wp-block-table td:last-child{white-space:nowrap;padding-right:0;}
.fc-doc-section .wp-block-table table.has-fixed-layout{table-layout:auto;}

/* Contact card. The gold rule marks it as the one place to act. */
.is-style-fc-contact{
  padding:24px 26px;
  background:var(--wp--preset--color--card);
  border:1px solid var(--wp--preset--color--hairline);
  border-left:2px solid var(--wp--preset--color--gold);
  border-radius:18px;
  box-shadow:var(--fc-card-shadow);
  max-width:520px;
}
.is-style-fc-contact.is-style-fc-contact > *{margin:0;}
.fc-doc-section.fc-doc-section > .is-style-fc-contact{margin-top:24px;}
.fc-contact-who{
  font-family:var(--wp--preset--font-family--source-serif-4);font-size:17px !important;font-weight:600;
  letter-spacing:-.01em;color:var(--fc-text-display) !important;
}
/* In a policy the name keeps the 18px a paragraph gets there, as on the
   static site. */
.fc-doc-section .is-style-fc-contact.is-style-fc-contact > .fc-contact-who{margin-top:18px;}
.is-style-fc-contact.is-style-fc-contact > .fc-contact-mail{margin-top:10px;font-size:16px;font-weight:500;line-height:1.5;}
.is-style-fc-contact.is-style-fc-contact > .fc-contact-note{
  margin-top:16px;
  font-size:14px;line-height:1.6;color:var(--wp--preset--color--ink-3);
}
/* Subheads inside a section, a step down from its h2. */
.fc-doc-section h3{
  font-size:1.25rem;line-height:1.3;letter-spacing:-.01em;
  font-variation-settings:normal;
}
.fc-doc-section.fc-doc-section > h3{margin-top:36px;}
.fc-doc-section.fc-doc-section > h3 + p{margin-top:10px;}

/* Steps: an ordered list numbered with the app's slot badge, so a numbered
   step reads like a C1 to C7 slot. */
.wp-block-list.is-style-fc-steps{
  list-style:none;padding:0;counter-reset:fc-step;
  display:grid;gap:18px;
}
.wp-block-list.is-style-fc-steps > li{
  counter-increment:fc-step;
  position:relative;margin-top:0;padding-left:44px;
  font-size:16px;line-height:1.65;color:var(--wp--preset--color--ink-2);
}
.wp-block-list.is-style-fc-steps > li::before{
  content:counter(fc-step);
  position:absolute;left:0;top:-1px;
  display:flex;align-items:center;justify-content:center;
  width:28px;height:28px;border-radius:8px;
  background:var(--wp--preset--color--accent-soft);color:var(--wp--preset--color--accent);
  font-size:13px;font-weight:700;line-height:1;
  font-variant-numeric:tabular-nums;
}
.wp-block-list.is-style-fc-steps li strong{color:var(--wp--preset--color--contrast);}
.fc-doc-section.fc-doc-section > .is-style-fc-steps{margin-top:24px;}

/* Callout: a tip or warning beside the text. The contact card's shape, with
   the rules list's green rule, since it informs rather than asks. */
.is-style-fc-callout{
  padding:18px 22px;
  background:var(--wp--preset--color--card);
  border:1px solid var(--wp--preset--color--hairline);
  border-left:2px solid var(--wp--preset--color--accent);
  border-radius:18px;
  box-shadow:var(--fc-card-shadow);
}
.is-style-fc-callout.is-style-fc-callout > *{margin:0;}
.is-style-fc-callout.is-style-fc-callout > * + *{margin-top:10px;}
.is-style-fc-callout p{font-size:15px;line-height:1.6;color:var(--wp--preset--color--ink-2);}
.is-style-fc-callout strong{color:var(--wp--preset--color--contrast);}
.fc-doc-section.fc-doc-section > .is-style-fc-callout{margin-top:24px;}

/* ---------- Recipes ----------
   The app's recipe screen, in its order: the photo, the name and who wrote
   it, then the parameters. On a wide page the parameters sit beside the
   story, the way a cookbook sets the ingredients beside the method. */

/* The photo cropped to a wide card and rounded, as the app shows it, and
   never taller than most of the screen, so the name shows below it. */
.fc-doc.fc-doc > .fc-recipe-photo{margin-top:48px;}
.wp-block-image.fc-recipe-photo img{
  display:block;width:100%;height:auto;
  aspect-ratio:16 / 9;max-height:min(62vh, 600px);object-fit:cover;
  border-radius:22px;
  background:var(--wp--preset--color--base-sunk);
}
.fc-recipe-photo + .fc-doc-head{padding-top:48px;}
/* "Recipe by", as the app sets it under the name. */
.fc-doc-head.fc-doc-head > .fc-recipe-by{
  margin-top:12px;
  font-size:clamp(1.0625rem, .4vw + 1rem, 1.1875rem);font-weight:600;line-height:1.4;
  color:var(--wp--preset--color--ink-3);
}
.fc-doc-head.fc-doc-head > .fc-recipe-by + .fc-doc-lede{margin-top:24px;}

.fc-doc.fc-doc > .fc-recipe-spread{
  display:grid;gap:56px;
  margin-top:56px;padding-top:56px;
  border-top:1px solid var(--fc-hairline-soft);
}
.fc-recipe-spread.fc-recipe-spread > *,
.fc-recipe-params.fc-recipe-params > *{margin:0;}

/* The label over the list: the app's tracked caps. */
.fc-recipe-label.fc-recipe-label{
  font-family:var(--wp--preset--font-family--inter);
  font-size:13px;font-weight:600;line-height:1.2;
  letter-spacing:.13em;text-transform:uppercase;color:var(--wp--preset--color--ink-3);
  font-variation-settings:normal;
}
.fc-recipe-params.fc-recipe-params > .fc-recipe-label + *{margin-top:14px;}

/* Recipe settings: the app's grouped list, a setting and its value to a
   row. */
.wp-block-table.is-style-fc-settings{
  margin:0;overflow:hidden;
  background:var(--wp--preset--color--card);
  border:1px solid var(--wp--preset--color--hairline);border-radius:18px;
  box-shadow:var(--fc-card-shadow);
}
.wp-block-table.is-style-fc-settings table{
  width:100%;border-collapse:collapse;
  font-size:15px;line-height:1.4;
}
.wp-block-table.is-style-fc-settings :is(thead,tbody,tfoot,tr,th,td){border:0;}
.wp-block-table.is-style-fc-settings td{
  padding:14px 20px;vertical-align:baseline;
  border-top:1px solid var(--fc-hairline-soft);
}
.wp-block-table.is-style-fc-settings tr:first-child td{border-top:0;}
.wp-block-table.is-style-fc-settings td:first-child{color:var(--wp--preset--color--ink-3);padding-right:8px;}
.wp-block-table.is-style-fc-settings td:last-child{
  text-align:right;padding-left:8px;
  font-weight:600;color:var(--wp--preset--color--contrast);
  font-variant-numeric:tabular-nums;
}
.fc-doc-section.fc-doc-section > .is-style-fc-settings{margin-top:22px;}

/* The story: the documents' sections, stacked in their column. */
.fc-recipe-story.fc-recipe-story > .fc-doc-section{padding-top:0;max-width:72ch;}
.fc-recipe-story.fc-recipe-story > .fc-doc-section + .fc-doc-section{
  margin-top:48px;padding-top:48px;
  border-top:1px solid var(--fc-hairline-soft);
}

/* Sample photos take the page's width. */
.fc-doc.fc-doc > .fc-recipe-gallery{
  max-width:none;margin-top:64px;
  border-top:1px solid var(--fc-hairline-soft);
}
.fc-doc-section.fc-doc-section > .wp-block-gallery{margin-top:24px;}
.fc-doc-section .wp-block-gallery img{border-radius:14px;}

.fc-doc-section.fc-doc-section > .fc-doc-foot{
  margin-top:64px;padding-top:28px;
  border-top:1px solid var(--fc-hairline-soft);
  font-size:14px;font-weight:500;line-height:1.5;color:var(--wp--preset--color--ink-3);
}

/* ---------- Editor ----------
   The whole-page patterns carry the page's title as a Title block, so the
   editor's own title field above them would be a second copy of it. It's
   hidden while one of them is on the page; the Title block edits the same
   title. Matches nothing on the site itself. */
.editor-styles-wrapper:has(.fc-doc-head, .fc-hero) > .editor-visual-editor__post-title-wrapper{display:none;}

/* ---------- Responsive ---------- */
@media (min-width:900px){
  .fc-hero{grid-template-columns:minmax(0, 1fr) 330px;}
  /* Screenshot on the left; it stays second in the source so the text is
     read first. */
  .fc-split-library{grid-template-columns:270px minmax(0, 1fr);}
  .fc-split-library .fc-library-shot{grid-column:1;grid-row:1;}
  .fc-split-push{grid-template-columns:minmax(0, 1fr) 400px;}
  /* The parameters beside the story, as a cookbook sets the ingredients
     beside the method. */
  .fc-recipe-spread{grid-template-columns:360px minmax(0, 1fr);gap:64px;align-items:start;}
}
@media (min-width:760px){
  .fc-steps{grid-template-columns:repeat(3, minmax(0, 1fr));}
  .fc-dishes{grid-template-columns:repeat(3, minmax(0, 1fr));}
}
@media (min-width:760px) and (max-width:960px){
  .wp-block-image.is-style-fc-shot img{border-radius:clamp(20px, 3vw, 30px);}
  .wp-block-image.is-style-fc-shot .wp-element-caption{font-size:15px;}
}
@media (max-width:700px){
  .fc-masthead{padding-top:16px;padding-bottom:12px;}
  .fc-nav .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay){padding-top:16px;}
  .fc-hero{gap:48px;padding-top:24px;padding-bottom:64px;}
  /* At this width the headline wraps to more lines, and the 1.04
     line-height tuned for the wide layout crowds the ascenders and
     descenders between them. */
  .fc-hero h1{line-height:1.08;}
  .fc-hero h1 .fc-sub,
  .wp-block-heading .fc-sub{margin-top:.32em;}
  .fc-hero-copy > .is-style-fc-lede{margin-top:18px;}
  .fc-hero-copy > .fc-cta-row{margin-top:24px;}
  .fc-split{gap:44px;}
  :root .fc-dishes{margin-block-start:32px;}
  :root .fc-cards{margin-block-start:32px;}
  .fc-closer{padding-top:64px;padding-bottom:64px;}
  .fc-tip{padding-top:56px;padding-bottom:56px;}

  .fc-doc{padding-bottom:64px;}
  .fc-doc-head{padding-top:56px;}
  .fc-doc-head h1{line-height:1.08;}
  .fc-doc-meta{gap:16px 24px;}
  .fc-doc.fc-doc > .fc-contents{margin-top:40px;}
  .fc-contents ol{columns:1;}
  .fc-doc-section{padding-top:48px;}
  .fc-doc.fc-doc > .fc-doc-section + .fc-doc-section{margin-top:48px;}
  .wp-block-list.is-style-fc-rules li{font-size:16px;}
  .is-style-fc-contact{padding:20px;}
  .fc-doc.fc-doc > .fc-recipe-photo{margin-top:16px;}
  .wp-block-image.fc-recipe-photo img{border-radius:18px;}
  .fc-recipe-photo + .fc-doc-head{padding-top:32px;}
  .fc-doc.fc-doc > .fc-recipe-spread{margin-top:40px;padding-top:40px;gap:48px;}
  .fc-recipe-story.fc-recipe-story > .fc-doc-section + .fc-doc-section{margin-top:40px;padding-top:40px;}
  .fc-doc.fc-doc > .fc-recipe-gallery{margin-top:48px;}
  .wp-block-table.is-style-fc-settings td{padding:13px 16px;}

  /* The cookie table's rows as labelled blocks; the header row is kept for
     screen readers only. */
  .fc-cookie-table thead{
    position:absolute;width:1px;height:1px;overflow:hidden;
    clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
  }
  .fc-cookie-table tr{display:block;padding:14px 0;border-bottom:1px solid var(--fc-hairline-soft);}
  .fc-cookie-table tr:first-child{border-top:1px solid var(--wp--preset--color--hairline);}
  .fc-doc-section .fc-cookie-table td{display:block;padding:2px 0;border:0;white-space:normal;}
  .fc-doc-section .fc-cookie-table td:first-child{margin-bottom:4px;}
  .fc-cookie-table td:nth-child(n+2)::before{font-weight:600;color:var(--wp--preset--color--ink-3);}
  .fc-cookie-table td:nth-child(2)::before{content:"Set by: ";}
  .fc-cookie-table td:nth-child(3)::before{content:"Purpose: ";}
  .fc-cookie-table td:nth-child(4)::before{content:"Lasts: ";}
}
@media (min-width:701px) and (max-width:900px){
  .fc-doc-head{padding-top:72px;}
}

/* ==========================================================================
   The home page, 2026 redesign
   --------------------------------------------------------------------------
   The new landing page (the Landing page pattern and its sections) uses its
   own classes, fc-home-*, plus components only it has (bench, cable, slot
   panel, sim chip, route, Kitchen band, included table). Nothing here
   restyles the classes a page built from the earlier landing page uses, so
   a site can update the theme while its current home page stays as it is,
   and switch to a page built from the new pattern when it's ready.
   ========================================================================== */

/* ---------- Hero: the bench ----------
   The headline centred over a workbench: the phone on the left, a USB
   cable, and the camera's custom slots on the right, with Lua de Mel
   written to C3. The bench is cut off by the section's lower edge, as if
   the page were the bench top. */
.fc-home-hero{
  padding-top:56px;padding-bottom:0;
  border-bottom:1px solid var(--wp--preset--color--hairline);
}
.fc-home-hero.fc-home-hero > *{margin-block:0;}
.fc-home-hero-copy{display:flex;flex-direction:column;align-items:center;text-align:center;}
.fc-home-hero-copy.fc-home-hero-copy > *{margin:0;}
.fc-home-hero h1{
  max-width:13em;
  font-size:clamp(2.5rem, 4.4vw + 1rem, 4.5rem);
  line-height:1.02;letter-spacing:-.028em;
}
.fc-home-hero-copy > .is-style-fc-lede{
  margin-top:24px;max-width:36em;
  font-size:clamp(1.0625rem, .6vw + .95rem, 1.25rem);line-height:1.5;
}
.fc-home-hero-copy strong{color:var(--fc-text-display);}
.fc-home-hero-copy > .fc-cta-row{margin-top:32px;justify-content:center;}
.fc-home-hero-copy > .is-style-fc-note{margin-top:16px;}

.fc-bench{
  --fc-bench-h:clamp(380px, 33vw, 450px);
  display:grid;align-items:start;
  grid-template-columns:minmax(0, 300px) minmax(0, 1fr);
  max-width:1000px;height:var(--fc-bench-h);
  margin-top:56px !important;margin-inline:auto !important;
  overflow:hidden;
}
.fc-bench.fc-bench > *{margin:0;}
/* The cable and the slot panel, one element from the HTML block. */
.fc-bench-rig{display:grid;grid-template-columns:minmax(64px, 1fr) minmax(0, 430px);align-items:start;min-width:0;}
.fc-bench-rig > *{margin:0;}
/* A page built from the first 1.2.0 pattern has the cable and the panel
   straight in the bench, without the wrapper: give it the three columns it
   was built for. */
.fc-bench:has(> .fc-cable){grid-template-columns:minmax(0, 300px) minmax(64px, 1fr) minmax(0, 430px);}
@media (max-width:759px){.fc-bench:has(> .fc-cable){grid-template-columns:1fr;}}
.fc-bench-phone .wp-block-image.is-style-fc-frame img{box-shadow:0 24px 60px -30px rgba(41,33,15,.4);}

/* The cable: one dotted green line with a node at each end. Its ends sit
   at the phone's middle and at C3's row. */
.fc-cable{position:relative;height:340px;}
.fc-cable svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;}
.fc-cable path{
  fill:none;stroke:var(--wp--preset--color--accent);stroke-width:3;
  stroke-linecap:round;stroke-dasharray:.1 9;vector-effect:non-scaling-stroke;
}
.fc-cable::before,.fc-cable::after{
  content:"";position:absolute;width:12px;height:12px;border-radius:50%;
  background:var(--wp--preset--color--accent);
  box-shadow:0 0 0 4px var(--wp--preset--color--base);
}
.fc-cable::before{left:-6px;top:calc(82% - 6px);}
.fc-cable::after{right:-6px;top:calc(65% - 6px);}
.fc-cable-label{
  position:absolute;left:50%;top:calc(73.5% - 32px);transform:translateX(-50%);
  font-size:12px;font-weight:600;letter-spacing:.1em;
  color:var(--wp--preset--color--ink-3);
}

/* The camera's custom slots, in the app's grouped-list shape. */
.fc-camera{
  padding:20px 20px 8px;
  background:var(--fc-card-raised);
  border:1px solid var(--wp--preset--color--hairline);border-radius:22px;
  box-shadow:0 24px 60px -34px rgba(41,33,15,.35);
}
.fc-camera-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding-bottom:12px;}
.fc-camera-title{
  font-family:var(--wp--preset--font-family--source-serif-4);
  font-size:22px;font-weight:600;line-height:1.2;color:var(--fc-text-display);
}
.fc-camera-meta{font-size:13px;color:var(--wp--preset--color--ink-3);white-space:nowrap;}
.fc-camera-slots{list-style:none;margin:0;padding:0;}
.fc-camera-slots li{
  display:grid;grid-template-columns:40px minmax(0, 1fr);column-gap:14px;align-items:center;
  margin:0;padding:10px 0;
  border-top:1px solid var(--fc-hairline-soft);
}
.fc-camera-slots li > *{grid-column:2;min-width:0;}
.fc-camera-slots .fc-slot{grid-column:1;grid-row:1 / span 3;width:40px;height:32px;}
.fc-camera-name{
  overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
  font-family:var(--wp--preset--font-family--source-serif-4);
  font-size:17px;font-weight:600;line-height:1.25;color:var(--fc-text-display);
}
.fc-camera-slots li.is-pushed{
  margin-inline:-12px;padding-inline:12px;
  border-top-color:transparent;border-radius:14px;
  background:var(--wp--preset--color--accent-soft);
}
.fc-camera-slots li.is-pushed + li{border-top-color:transparent;}
.fc-camera-slots li.is-pushed .fc-slot{background:var(--wp--preset--color--accent);color:var(--wp--preset--color--on-accent);}
.fc-camera-status{
  display:flex;align-items:center;gap:5px;margin-top:4px;
  font-size:13px;font-weight:600;line-height:1.3;color:var(--wp--preset--color--accent);
}
.fc-camera-status svg{width:14px;height:14px;flex:none;}

/* Film simulation chip: the app's family swatch beside the simulation's
   name. Colors from the app's Theme.swift; data, never decoration. */
.fc-sim{
  display:inline-flex;align-items:center;gap:6px;margin-top:2px;
  font-size:12.5px;font-weight:500;line-height:1.3;color:var(--wp--preset--color--ink-3);
  white-space:nowrap;
}
.fc-sim::before{content:"";flex:none;width:9px;height:9px;border-radius:2px;background:var(--fc-sim, var(--wp--preset--color--ink-4));}
.fc-sim-provia{--fc-sim:#6B7A8F;}
.fc-sim-velvia{--fc-sim:#B04A45;}
.fc-sim-astia{--fc-sim:#5A87A8;}
.fc-sim-classic-chrome{--fc-sim:#997A40;}
.fc-sim-classic-neg{--fc-sim:#A86B42;}
.fc-sim-nostalgic-neg{--fc-sim:#C79454;}
.fc-sim-pro-neg{--fc-sim:#B88270;}
.fc-sim-eterna{--fc-sim:#5E7A6E;}
.fc-sim-reala-ace{--fc-sim:#78995E;}
.fc-sim-acros{--fc-sim:#47474D;}
.fc-sim-monochrome{--fc-sim:#6E6E70;}
.fc-sim-sepia{--fc-sim:#A88A6B;}

/* ---------- How it works ----------
   Find, test, push: three short steps, a heading and a sentence each. */
.fc-route-band{border-bottom:1px solid var(--wp--preset--color--hairline);}
.fc-home-steps{
  padding:56px 0 60px;
  display:grid;gap:32px 48px;grid-template-columns:1fr;
}
.fc-home-steps.fc-home-steps > *{margin:0;}
.fc-home-step.fc-home-step > *{margin:0;}
.fc-home-step h3{
  font-size:clamp(1.5rem, 1vw + 1.2rem, 1.875rem);line-height:1.1;letter-spacing:-.015em;
}
.fc-home-step.fc-home-step > p{
  margin-top:8px;max-width:22em;
  font-size:16px;line-height:1.5;color:var(--wp--preset--color--ink-2);
}
@media (min-width:760px){
  .fc-home-steps{grid-template-columns:repeat(3, minmax(0, 1fr));}
}

/* Route: two ends and the cable between them, one lane or two (out and
   back). Lanes point the way things travel. Green by default; amber where
   the camera develops photos, as in the app's Kitchen. */
.fc-route{
  --fc-route:var(--wp--preset--color--accent);
  display:grid;grid-template-columns:auto minmax(48px, 1fr) auto;align-items:center;
  padding:18px;
  background:var(--wp--preset--color--base-sunk);
  border-radius:16px;
}
.fc-route.is-amber{--fc-route:var(--wp--preset--color--gold-fill);}
.fc-route-end{
  position:relative;z-index:1;
  display:inline-flex;align-items:center;justify-content:center;
  min-height:34px;padding:0 12px;
  background:var(--wp--preset--color--card);
  border:1px solid var(--wp--preset--color--hairline);border-radius:10px;
  font-size:13px;font-weight:600;line-height:1.2;white-space:nowrap;
  color:var(--wp--preset--color--contrast);
}
.fc-route-end.is-quiet{color:var(--wp--preset--color--ink-3);border-style:dashed;}
.fc-route-end.is-slot{
  min-width:44px;padding:0 10px;border:0;
  background:var(--wp--preset--color--accent);color:var(--wp--preset--color--on-accent);
  font-variant-numeric:tabular-nums;
}
.fc-route-lanes{display:grid;gap:4px;}
.fc-route-lane{
  position:relative;display:block;height:30px;margin:0 -1px;
  background:radial-gradient(circle, var(--fc-route) 1.5px, transparent 1.7px) 0 calc(100% - 6px) / 10px 3px repeat-x;
}
/* The arrowhead at the lane's leading end. */
.fc-route-lane::after{
  content:"";position:absolute;bottom:3px;width:0;height:0;
  border-top:4.5px solid transparent;border-bottom:4.5px solid transparent;
}
.fc-route-lane.is-out::after{right:2px;border-left:7px solid var(--fc-route);}
.fc-route-lane.is-back::after{left:2px;border-right:7px solid var(--fc-route);}
.fc-route-label{
  position:absolute;left:0;right:0;top:0;
  overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
  text-align:center;font-size:11.5px;font-weight:600;line-height:16px;
  color:var(--wp--preset--color--ink-3);
}
/* The Kitchen's own: the two devices and the trip between them, at the
   width of the text above it, straight on the dark paper. Each label starts
   where its trip starts: the RAW files leave from the phone, over the
   outbound line; the JPEGs leave from the camera, under the return line. */
.is-style-fc-band-kitchen .fc-route{--fc-route:var(--fc-kitchen-amber);}
.fc-route.is-large{
  max-width:720px;min-height:0;padding:0;background:none;border:0;border-radius:0;
  grid-template-columns:auto minmax(120px, 1fr) auto;
}
.fc-route.is-large .fc-route-end{
  gap:10px;min-height:48px;padding:0 18px 0 14px;
  background:#2E2921;border:1px solid var(--wp--preset--color--hairline);border-radius:12px;
  font-size:15px;color:var(--wp--preset--color--contrast);
}
/* A device glyph before each end's name: Lucide's smartphone and camera,
   generic shapes, never a particular body. */
.fc-route.is-large .fc-route-end::before{
  content:"";flex:none;width:18px;height:18px;
  background:var(--wp--preset--color--ink-2);
  -webkit-mask:var(--fc-glyph) center / contain no-repeat;
  mask:var(--fc-glyph) center / contain no-repeat;
}
.fc-route.is-large > .fc-route-end:first-child{
  --fc-glyph:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='2' width='14' height='20' rx='2' ry='2'/%3E%3Cpath d='M12 18h.01'/%3E%3C/svg%3E");
}
.fc-route.is-large > .fc-route-end:last-child{
  --fc-glyph:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3l-2.5-3z'/%3E%3Ccircle cx='12' cy='13' r='3'/%3E%3C/svg%3E");
}
.fc-route.is-large .fc-route-lanes{gap:14px;padding:0 4px;}
.fc-route.is-large .fc-route-lane{height:32px;margin:0;}
.fc-route.is-large .fc-route-label{
  left:6px;right:6px;
  font-size:13px;line-height:18px;color:var(--wp--preset--color--ink-2);
}
/* Out: label over the line, from the phone's side. */
.fc-route.is-large .fc-route-lane.is-out{background-position:0 calc(100% - 4px);}
.fc-route.is-large .fc-route-lane.is-out .fc-route-label{top:0;text-align:left;}
.fc-route.is-large .fc-route-lane.is-out::after{bottom:1px;}
/* Back: label under the line, from the camera's side. */
.fc-route.is-large .fc-route-lane.is-back{background-position:0 4px;}
.fc-route.is-large .fc-route-lane.is-back .fc-route-label{top:auto;bottom:0;text-align:right;}
.fc-route.is-large .fc-route-lane.is-back::after{top:1px;bottom:auto;}

/* ---------- Your library ----------
   The four ways in as one grouped list, the way the app lists settings. */
.fc-home-ways{
  overflow:hidden;
  background:var(--wp--preset--color--card);
  border:1px solid var(--wp--preset--color--hairline);border-radius:18px;
  box-shadow:var(--fc-card-shadow);
}
:root .fc-home-ways{margin-block-start:28px;}
.fc-home-ways.fc-home-ways > *{margin:0;}
.fc-way{padding:16px 20px;}
.fc-way + .fc-way{border-top:1px solid var(--fc-hairline-soft);}
.fc-way.fc-way > *{margin:0;}
.fc-way p{margin-top:3px !important;font-size:15px;line-height:1.5;color:var(--wp--preset--color--ink-2);}

/* ---------- Push to your camera ----------
   A green band: everything written to the camera lives on green. A
   chapter as the app's Chapters list draws it, plus the push bar from its
   detail screen, sitting on the band as a sheet of paper. */
.fc-home-chapter{
  justify-self:center;width:100%;max-width:440px;
  display:flex;flex-direction:column;gap:14px;
  padding:22px;
  background:var(--wp--preset--color--base);color:var(--wp--preset--color--contrast);
  border-radius:20px;
  box-shadow:0 30px 70px -34px rgba(10,30,18,.6);
}
.fc-home-chapter .fc-chapter-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;}
.fc-home-chapter .fc-chapter-name{
  font-family:var(--wp--preset--font-family--source-serif-4);
  font-size:24px;font-weight:600;line-height:1.2;
  color:var(--fc-text-display);
}
.fc-home-chapter .fc-chapter-meta{font-size:14px;font-weight:600;color:var(--wp--preset--color--accent);white-space:nowrap;}
.fc-home-chapter .fc-slots{display:grid;grid-template-columns:repeat(7, minmax(0, 1fr));gap:6px;}
.fc-home-chapter .fc-slots .fc-slot{aspect-ratio:4 / 3;}
/* Cut to two lines with an ellipsis, as the app cuts it. */
.fc-home-chapter .fc-chapter-recipes{
  margin:0;
  font-size:15px;line-height:1.5;color:var(--wp--preset--color--ink-3);
  display:-webkit-box;-webkit-box-orient:vertical;
  -webkit-line-clamp:2;line-clamp:2;overflow:hidden;
}
.fc-home-chapter .fc-push-bar{
  padding:15px;border-radius:14px;
  background:var(--wp--preset--color--accent);color:var(--wp--preset--color--on-accent);
  text-align:center;font-size:16px;font-weight:600;line-height:1.2;
}

/* Text on green: the band's own ink, never grey. */
.fc-home-push .is-style-fc-lede{color:inherit;opacity:.9;}
:is(.fc-home-push,.fc-home-close) h2{font-size:clamp(2.25rem, 3vw + 1.2rem, 3.25rem);line-height:1.04;letter-spacing:-.025em;}
.fc-home-push .fc-split-push .is-style-fc-lede{margin-top:20px;}
/* Confirmed, read back, undone: three promises, each ticked. */
.wp-block-list.fc-assurances{
  list-style:none;margin:28px 0 0;padding:0;
  display:grid;gap:14px;max-width:34em;
}
.wp-block-list.fc-assurances li{
  position:relative;margin:0;padding-left:32px;
  font-size:16px;line-height:1.5;
}
.wp-block-list.fc-assurances li::before{
  content:"";position:absolute;left:0;top:1px;width:22px;height:22px;
  background:currentColor;
  -webkit-mask:var(--fc-icon-check) center / contain no-repeat;
  mask:var(--fc-icon-check) center / contain no-repeat;
}
:root{
  --fc-icon-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m8 12.5 2.8 2.8L16.5 9.5'/%3E%3C/svg%3E");
}

/* ---------- Test Kitchen ----------
   The app's own dark paper, in either theme: photos read best on dark,
   and the Kitchen is where photos are made. Amber is its accent, as in
   the app, and the cable runs through it the other way, in amber. */
.is-style-fc-band-kitchen{
  color-scheme:dark;
  --wp--preset--color--contrast:#F0EADC;
  --wp--preset--color--ink-2:#C2BAA8;               /* 8.6:1 on the band */
  --wp--preset--color--ink-3:#B3AA97;               /* 7.4:1 */
  --wp--preset--color--hairline:rgba(240,234,220,.12);
  --fc-text-display:#F7F3EA;
  --fc-kitchen-amber:#D2954C;                       /* 6.6:1 */
  --fc-frame-shadow:0 40px 90px -40px rgba(0,0,0,.9);
  background:#1C1914;color:var(--wp--preset--color--contrast);
}
.is-style-fc-band-kitchen :is(h2,h3){color:var(--fc-text-display);}
.is-style-fc-band-kitchen strong{color:var(--fc-kitchen-amber);}
.is-style-fc-band-kitchen :focus-visible{outline-color:var(--fc-kitchen-amber);}
.is-style-fc-band-kitchen .fc-dishes{position:relative;display:grid;gap:32px;}
:root .is-style-fc-band-kitchen .fc-dishes{margin-block-start:40px;}
.is-style-fc-band-kitchen .fc-dishes.fc-dishes > *{margin:0;position:relative;}
:root .fc-route.is-large{margin-block-start:48px;}

/* ---------- Everything's included ----------
   Why it's free beside every feature, listed in the app's settings table:
   each one included, nothing to pay. */
.fc-split-included{align-items:start;}
.fc-included-head h2{font-size:clamp(2rem, 2.4vw + 1.2rem, 2.75rem);line-height:1.06;letter-spacing:-.02em;}
:root .fc-included-head h2 + .is-style-fc-lede{margin-block-start:20px;}
.fc-included.fc-included > *{margin:0;}
.fc-included.fc-included > .fc-recipe-label + *{margin-top:14px;}
.wp-block-table.fc-included-table.fc-included-table td{padding:15px 22px;}
.wp-block-table.fc-included-table.fc-included-table td:first-child{color:var(--wp--preset--color--contrast);font-size:16px;}
.wp-block-table.fc-included-table.fc-included-table td:last-child{color:var(--wp--preset--color--accent);white-space:nowrap;}
.fc-included.fc-included > .is-style-fc-note{margin-top:18px;max-width:40em;}

/* On a phone the hero's bench starts from a compact phone end instead of
   the screenshot, so the cable and C3 fit in the first screen. */
.fc-bench-source{display:none;}

/* The recipe crossing the cable, and the read-back: "Written" first, then
   "and verified" once the app has checked the camera. At rest the token is
   gone and the row reads in full. */
.fc-cable-token{
  position:absolute;left:100%;top:65%;z-index:1;
  transform:translate(-50%, -50%);opacity:0;
  display:inline-flex;align-items:center;
  padding:6px 12px 6px 10px;
  background:var(--fc-card-raised);
  border:1px solid var(--fc-accent-ring);border-radius:999px;
  box-shadow:0 8px 20px -10px rgba(41,33,15,.4);
  pointer-events:none;
}
.fc-cable-token .fc-sim{margin:0;font-size:13px;font-weight:600;color:var(--fc-text-display);}

/* Dark theme: the writing bands are a deep green field, so they're never
   the brightest thing on a dark page; mint stays for text and accents.
   Inside the paper sheets on the band, green is green again. */
:root[data-theme="dark"] :is(.fc-home-push,.fc-home-close){
  --wp--preset--color--on-accent:#F0EADC;
  --fc-on-accent-line:rgba(240,234,220,.45);
  --fc-on-accent-wash:rgba(240,234,220,.08);
  background:#1D4430;color:#F0EADC;                /* 9.0:1 */
}
:root[data-theme="dark"] :is(.fc-home-push,.fc-home-close) :focus-visible{outline-color:#F0EADC;}
:root[data-theme="dark"] :is(.fc-home-push,.fc-home-close) .fc-home-chapter{--wp--preset--color--on-accent:#0E0D0B;}

/* Browser surfaces, from the palette, on pages built from the new design
   only, so other pages keep the browser's own. */
:root:has(.fc-home-hero){caret-color:var(--wp--preset--color--accent);scrollbar-color:var(--wp--preset--color--ink-4) var(--wp--preset--color--base-sunk);}
:root:has(.fc-home-hero) ::selection{background:var(--wp--preset--color--accent-soft);color:var(--wp--preset--color--contrast);}
:is(.fc-home-push,.fc-home-close) ::selection{background:var(--wp--preset--color--on-accent);color:var(--wp--preset--color--accent);}
.is-style-fc-band-kitchen ::selection{background:var(--fc-kitchen-amber);color:#1C1914;}

/* On a shorter desktop screen the hero tightens, so the cable and C3 still
   land in the first screen. */
@media (min-width:760px) and (max-height:860px){
  .fc-home-hero{padding-top:28px;}
  .fc-home-hero h1{font-size:clamp(2.5rem, 3.4vw + 1rem, 3.75rem);}
  .fc-home-hero-copy > .is-style-fc-lede{margin-top:18px;}
  .fc-home-hero-copy > .fc-cta-row{margin-top:24px;}
  .fc-home-hero .fc-bench{margin-top:32px !important;}
}

/* The bench on a phone: stacked, the phone over the slots with the cable
   running down between them, so the phone stays wide enough to read and
   the slots keep their full names. */
@media (max-width:759px){
  .fc-bench{
    grid-template-columns:1fr;justify-items:center;
    height:auto;overflow:visible;margin-top:40px !important;
  }
  .fc-bench-rig{display:flex;flex-direction:column;align-items:center;width:100%;}
  .fc-bench-phone{
    width:min(78%, 300px);max-height:360px;overflow:hidden;
    -webkit-mask-image:linear-gradient(#000 72%, transparent);mask-image:linear-gradient(#000 72%, transparent);
  }
  .fc-cable{
    width:140px;height:64px;margin-top:-28px !important;
    background:radial-gradient(circle, var(--wp--preset--color--accent) 1.5px, transparent 1.7px) 50% 0 / 3px 12px repeat-y;
  }
  .fc-cable svg,.fc-cable-token{display:none;}
  .fc-cable::before{left:calc(50% - 6px);top:-6px;}
  .fc-cable::after{right:auto;left:calc(50% - 6px);top:auto;bottom:-6px;}
  .fc-cable-label{left:calc(50% + 16px);top:calc(50% - 8px);transform:none;}
  .fc-camera{width:100%;margin-top:6px !important;padding:16px 16px 6px;border-radius:18px;}
  .fc-home-hero{padding-bottom:48px;}
  .fc-home-hero .fc-bench{margin-top:28px !important;}
  .fc-home-hero .fc-bench-phone{display:none;}
  .fc-home-hero .fc-bench-source{
    display:inline-flex;align-items:center;gap:10px;
    padding:9px 14px 9px 12px;
    background:var(--fc-card-raised);
    border:1px solid var(--fc-accent-ring);border-radius:999px;
  }
  .fc-bench-source-label{font-size:13px;font-weight:600;color:var(--wp--preset--color--ink-3);}
  .fc-bench-source .fc-sim{margin:0;font-size:14px;font-weight:600;color:var(--fc-text-display);}
  .fc-home-hero .fc-cable{height:44px;margin-top:6px !important;}
  .fc-home-hero .fc-camera-slots li:first-child{display:none;}
  .fc-home-hero .fc-camera-slots li:nth-child(2){border-top:0;}
  .fc-home-hero .fc-camera-head{padding-bottom:6px;}

  /* The Kitchen's route: both ends on one row, the lanes full width
     under them, so their labels read in full. */
  .fc-route.is-large{
    grid-template-columns:1fr 1fr;row-gap:12px;
  }
  .fc-route.is-large > .fc-route-end:first-child{grid-column:1;grid-row:1;justify-self:start;}
  .fc-route.is-large > .fc-route-end:last-child{grid-column:2;grid-row:1;justify-self:end;}
  .fc-route.is-large .fc-route-lanes{grid-column:1 / -1;grid-row:2;padding:0;}
  .fc-route.is-large .fc-route-end{min-height:42px;padding:0 14px 0 12px;font-size:14px;}
  .fc-camera-slots li{column-gap:12px;padding:10px 0;}
  .fc-camera-slots li.is-pushed{margin-inline:-8px;padding-inline:8px;}
}

/* ---------- Motion ----------
   One grammar, the push: the cable draws from the phone, a recipe travels
   it, the slot settles into green, and the read-back confirms it. In the
   hero it plays on load, where the bench already is; the Chapter and the
   closing slots play once they scroll into view (assets/js/play.js arms
   them while they're off screen). Every element rests finished. */
@media (prefers-reduced-motion:no-preference){
  .fc-home-hero .fc-cable svg{animation:fc-cable-draw 1s cubic-bezier(.16,1,.3,1) .2s backwards;}
  .fc-home-hero .fc-cable-token{animation:fc-token 1.25s cubic-bezier(.65,0,.35,1) .85s;}
  .fc-home-hero .fc-cable::after{animation:fc-node-on .45s cubic-bezier(.16,1,.3,1) 2s backwards;}
  .fc-camera-slots li.is-pushed{animation:fc-row-on .8s cubic-bezier(.16,1,.3,1) 2.05s backwards;}
  .fc-camera-slots li.is-pushed .fc-slot{animation:fc-slot-on .6s cubic-bezier(.16,1,.3,1) 2.05s backwards;}
  .fc-home-hero .fc-camera-status{animation:fc-rise .5s cubic-bezier(.16,1,.3,1) 2.25s backwards;}
  .fc-home-hero .fc-verified,
  .fc-home-hero .fc-camera-status svg{animation:fc-fade .5s cubic-bezier(.16,1,.3,1) 2.85s backwards;}

  /* Armed only until it plays: once .fc-play lands, the finished state is
     the resting one again. */
  .fc-armed:not(.fc-play) .fc-slot{background:transparent;color:transparent;box-shadow:inset 0 0 0 1px var(--wp--preset--color--hairline);}
  .fc-armed:not(.fc-play) .fc-push-bar{opacity:.55;}
  .fc-route.fc-armed:not(.fc-play) .fc-route-lane.is-out{clip-path:inset(-4px 100% -4px 0);}
  .fc-route.fc-armed:not(.fc-play) .fc-route-lane.is-back{clip-path:inset(-4px 0 -4px 100%);}
  .fc-route.fc-play .fc-route-lane.is-out{animation:fc-lane-out .9s cubic-bezier(.16,1,.3,1) .1s backwards;}
  .fc-route.fc-play .fc-route-lane.is-back{animation:fc-lane-back .9s cubic-bezier(.16,1,.3,1) .85s backwards;}
  .fc-play .fc-slot{animation:fc-slot-fill .55s cubic-bezier(.16,1,.3,1) backwards;}
  .fc-play .fc-push-bar{animation:fc-press .5s cubic-bezier(.16,1,.3,1) backwards;}
  .fc-home-chapter.fc-play .fc-slot{animation-delay:calc(.35s + var(--fc-n, 0) * 85ms);}
  .fc-play .fc-slot:nth-child(2),.fc-play li:nth-child(2) .fc-slot{--fc-n:1;}
  .fc-play .fc-slot:nth-child(3),.fc-play li:nth-child(3) .fc-slot{--fc-n:2;}
  .fc-play .fc-slot:nth-child(4),.fc-play li:nth-child(4) .fc-slot{--fc-n:3;}
  .fc-play .fc-slot:nth-child(5),.fc-play li:nth-child(5) .fc-slot{--fc-n:4;}
  .fc-play .fc-slot:nth-child(6),.fc-play li:nth-child(6) .fc-slot{--fc-n:5;}
  .fc-play .fc-slot:nth-child(7),.fc-play li:nth-child(7) .fc-slot{--fc-n:6;}
}
@keyframes fc-cable-draw{from{clip-path:inset(-10px 100% -10px 0);}to{clip-path:inset(-10px 0 -10px 0);}}
@keyframes fc-token{
  0%{left:0;top:82%;opacity:0;}
  10%{opacity:1;}
  50%{top:73.5%;}
  88%{opacity:1;}
  100%{left:100%;top:65%;opacity:0;}
}
@keyframes fc-node-on{from{transform:scale(0);}}
@keyframes fc-row-on{from{background-color:transparent;}}
@keyframes fc-slot-on{from{background-color:var(--wp--preset--color--accent-soft);color:var(--wp--preset--color--accent);}}
@keyframes fc-rise{from{opacity:0;transform:translateY(-4px);}}
@keyframes fc-fade{from{opacity:0;}}
@keyframes fc-slot-fill{from{background-color:transparent;color:transparent;box-shadow:inset 0 0 0 1px var(--wp--preset--color--hairline);transform:scale(.88);}}
@keyframes fc-lane-out{from{clip-path:inset(-4px 100% -4px 0);}to{clip-path:inset(-4px 0 -4px 0);}}
@keyframes fc-lane-back{from{clip-path:inset(-4px 0 -4px 100%);}to{clip-path:inset(-4px 0 -4px 0);}}
@keyframes fc-press{from{opacity:.55;transform:scale(.98);}}

/* Layout for the new home page's splits and spacing, which the committed
   responsive rules above don't know about. */
:root .wp-block-post-content > :is(.fc-home-hero,.fc-route-band,.is-style-fc-band-kitchen){margin-block-start:0;}
.editor-styles-wrapper:has(.fc-home-hero) > .editor-visual-editor__post-title-wrapper{display:none;}
@media (min-width:900px){
  .fc-home-push .fc-split-push{grid-template-columns:minmax(0, 1fr) 440px;gap:72px;}
  .fc-split-included{grid-template-columns:minmax(0, .9fr) minmax(0, 1.1fr);gap:72px;}
  .fc-included-head{position:sticky;top:32px;}
}
@media (max-width:700px){
  .fc-home-hero{padding-top:28px;}
}

@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth;}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}