/* fujigraphy.com, from site-design/draft-b3-light. White ground, warm neutrals, hairline rules, one darker orange (#C2410C) for text and buttons.
   Built around one unit: the app's recipe card (16px radius, photo, canister badge, name over a scrim).
   Fonts are subset to Latin and instanced to the weights used (see SITE.md); licences in fonts/*-OFL.txt. */
@font-face { font-family: Unbounded; src: url(/a/fonts/unbounded.80f44545d1.woff2) format("woff2"); font-weight: 700 900; font-display: swap; }
@font-face { font-family: Outfit; src: url(/a/fonts/outfit.421837bfc5.woff2) format("woff2"); font-weight: 400 800; font-display: swap; }

:root {
  /* Light only. Contrast on --bg: text 17:1, dim 6.6:1, accent 5.2:1; on --bg2/--surface: dim >= 6:1, accent >= 4.6:1.
     The accent is the app's #E95F32 darkened to #C2410C for 4.5:1 on light grounds. */
  color-scheme: light;
  --bg: #FFFFFF; --bg2: #F5F3EF; --raised: #EAE6DF; --rule: #E3DED5; --line: #CFC8BC; --text: #191816; --dim: #5C574F;
  --paper: #FFFFFF; --surface: #F7F4EE; --ink: #191816; --soft: #5C574F; --hair: #E3DED5;
  --accent: #C2410C; --accent-ink: #C2410C; --on-ink: #FFFFFF;
  --cjk: system-ui; --display: Unbounded, var(--cjk), sans-serif; --label: Outfit, var(--cjk), sans-serif;
  --r-card: 16px; --r-hero: 22px; --hh: 60px;
  /* One spacing scale for the whole site. Every margin, padding and gap uses these (exceptions listed in polish-run/REPORT.md). */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
  --gutter: 20px;               /* page side margin */
  --section-gap: var(--space-7); /* each section's top and bottom padding: 96px between sections at every width */
  --head-gap: var(--space-4);    /* section heading row to its content */
  --page-top: var(--space-5);    /* header to the first block, identical on every page */
  --gap: var(--space-3);         /* between cards */
  --m: var(--gutter);            /* old name, kept for the existing calc()s */
}
@media (min-width: 900px) { :root { --gap: var(--space-4); } }
* { box-sizing: border-box; margin: 0; }
fieldset { min-width: 0; border: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
/* CJK: Outfit and Unbounded have Latin only. Each CJK page names its script's own system faces (Apple, then Noto on Android
   and Linux, then Windows), so Han and Hangul never fall back to a mismatched default (no Japanese-form Han on zh pages). */
:root:lang(ja) { --cjk: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", Meiryo, system-ui; }
:root:lang(ko) { --cjk: "Apple SD Gothic Neo", "Noto Sans KR", "Noto Sans CJK KR", "Malgun Gothic", system-ui; }
:root:lang(zh-Hans) { --cjk: "PingFang SC", "Noto Sans SC", "Noto Sans CJK SC", "Microsoft YaHei", system-ui; }
:root:lang(zh-Hant) { --cjk: "PingFang TC", "Noto Sans TC", "Noto Sans CJK TC", "Microsoft JhengHei", system-ui; }
:lang(ko) { word-break: keep-all; }
/* Hangul and Han need air: no negative tracking, a taller line in headings (the Latin display type keeps its own). */
:root:is(:lang(ko), :lang(zh)) :is(h1, h2, h3) { letter-spacing: 0; line-height: 1.25; }
body { background: var(--bg); color: var(--text); font: 450 17px/1.5 Outfit, var(--cjk), sans-serif; }
img { max-width: 100%; display: block; }
a { color: inherit; text-underline-offset: 3px; }
button, input, select { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.nw { white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 50; background: var(--ink); color: var(--on-ink); padding: var(--space-3) var(--space-4); font-weight: 700; }
.skip:focus { top: 12px; }
.wrap { max-width: 1320px; margin: 0 auto; padding: 0 var(--gutter); }
/* Header to first block: the same gap on every page type, whatever the first block is */
main > :first-child { padding-top: var(--page-top); }
main > .paperband:first-child { border-top: 0; }
h1, h2, h3 { font-family: var(--display); font-weight: 800; letter-spacing: -.03em; line-height: 1.02; }
.meta { font: 500 13px/1.4 var(--label); letter-spacing: .01em; font-variant-numeric: tabular-nums; color: var(--dim); }
.more { font-weight: 650; color: var(--accent); text-decoration: none; white-space: nowrap; display: inline-flex; align-items: center; min-height: 44px; }
.more:hover { text-decoration: underline; }
.more svg { width: 18px; height: 18px; margin-right: calc(var(--space-1) * -1); }

/* Header */
.top { position: sticky; top: 0; z-index: 20; background: var(--bg); border-bottom: 1px solid var(--rule); }
.top .wrap { display: flex; align-items: center; gap: var(--space-6); height: 60px; flex-wrap: wrap; }
.brand { min-height: 44px; color: var(--ink); display: flex; align-items: center; gap: var(--space-3); font: 800 22px/1 var(--display); letter-spacing: -.03em; text-decoration: none; }
.brand img { border-radius: 7px; }
.nav { display: flex; gap: var(--space-1); font-weight: 550; font-size: 15px; }
.nav a { text-decoration: none; color: var(--dim); display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: 0 var(--space-2); }
.nav a:hover, .nav a[aria-current] { color: var(--text); }
.top .tools { margin-left: auto; display: flex; align-items: center; gap: var(--space-3); }
.s-btn { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: none; display: grid; place-items: center; cursor: pointer; }
.s-btn:hover { background: var(--bg2); }
.hsearch { position: absolute; left: 0; right: 0; top: var(--hh); background: var(--bg); border-bottom: 1px solid var(--rule); padding: var(--space-3) var(--m) var(--space-4); }
.hsearch .wrap { display: flex; gap: var(--space-2); padding: 0; max-width: 640px; }
.hsearch input { flex: 1; min-width: 0; height: 44px; border-radius: 12px; border: 1px solid var(--rule); background: var(--bg2); padding: 0 var(--space-4); }
/* Apple's badge artwork, unmodified. 40px tall minimum; margin keeps clear space of 1/4 the height around it. */
.badge { display: inline-block; flex: none; margin: var(--space-3); border-radius: 7px; }
.badge img { width: 120px; height: 40px; }
.badge.lg { margin: var(--space-3); border-radius: 9px; }
.badge.lg img { width: 150px; height: 50px; }
.getrow > .badge:first-child { margin-left: 0; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); height: 48px; padding: 0 var(--space-5); border-radius: 12px; border: 0; background: var(--accent); color: #fff; font-weight: 700; text-decoration: none; cursor: pointer; }
.btn:hover { background: #9A3412; }
.btn.ghost { background: transparent; color: inherit; border: 1px solid currentColor; }
/* Phones: brand and links share one row. With recipes live (Recipes link + search) the links take a second row. */
@media (max-width: 760px) {
  .top .wrap { gap: 0 var(--space-2); }
  .top .brand { margin-right: auto; }
  .nav { margin-right: calc(var(--space-2) * -1); }
  .nav a { padding: 0 var(--space-2); }
  .top.full { --hh: 104px; }
  .top.full .wrap { height: auto; padding-top: var(--space-2); }
  .top.full .tools { height: 44px; }
  .top.full .nav { order: 3; width: 100%; margin: 0 calc(var(--space-2) * -1); }
}
@media (max-width: 359px) { .top .brand { font-size: 0; gap: 0; } }
/* Desktop: the wordmark alone on the left, links grouped on the right before the App Store badge and search.
   Wordmark 26px against the 32px icon: Unbounded's cap height (~.7em) is ~57% of the icon. Labels never wrap. */
.nav a { white-space: nowrap; }
@media (min-width: 761px) {
  .top .wrap { gap: var(--space-5); flex-wrap: nowrap; }
  .top .brand { font-size: 26px; gap: 14px; }
  .nav { margin-left: auto; }
  .top .tools { margin-left: 0; }
}

/* ---------- The card: mirrors the app (see DONE-v3.md for the source of every number) ---------- */
.rc { position: relative; display: block; overflow: hidden; border-radius: var(--r-card); color: #fff; text-decoration: none;
  isolation: isolate; background: #2a2622; container-type: inline-size; transition: transform .14s ease-out, opacity .14s ease-out; }
.rc:active { transform: scale(.982); opacity: .92; }              /* PressableCardStyle */
.rc:hover .art { transform: scale(1.03); }
.rc-grid { aspect-ratio: 170 / 230; }                              /* RecipeGridCard: 230pt tall in a ~170pt column */
.rc-shelf { aspect-ratio: 176 / 116; }                             /* DiscoverShelfCard */
.rc::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(rgb(0 0 0 / 0) 50%, rgb(0 0 0 / .74)); }
.rc-shelf::after { background: linear-gradient(rgb(0 0 0 / 0) 50%, rgb(0 0 0 / .72)); }
.rc-hero::after, .rc-tall::after, .rc-stack::after, .rc-pick::after { background: linear-gradient(rgb(18 17 15 / 0) 25%, rgb(18 17 15 / .85)); }
.badges { position: absolute; z-index: 2; top: 8px; left: 8px; display: flex; gap: var(--space-2); align-items: center; }
.can { width: clamp(44px, 21cqw, 60px); height: auto; aspect-ratio: 1; } /* 1.3x the original card badge (was clamp(34px, 16cqw, 46px)) */
.rc-shelf .badges { top: 6px; left: 6px; }
.rc-shelf .can, .rc-tall .can, .rc-stack .can, .rc-hero .can, .rc-pick .can { width: 55px; height: 55px; } /* 1.3x the original 42px, every width */
.rc-tall .badges, .rc-stack .badges { top: 10px; left: 10px; }
.rc-hero .badges, .rc-pick .badges { top: 12px; left: 12px; }
.txt { position: absolute; z-index: 2; left: 12px; right: 12px; bottom: 12px; display: flex; flex-direction: column; gap: 3px; }
.nm { font: 800 clamp(17px, 9cqw, 21px)/1.12 var(--display); letter-spacing: -.01em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sim { font: 500 13px/1.25 Outfit; color: rgb(255 255 255 / .78); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rc-shelf .txt { left: 10px; right: 10px; bottom: 9px; }
.rc-shelf .nm, .rc-tall .nm, .rc-stack .nm { font: 700 clamp(15px, 5.5cqw, 19px)/1.2 Outfit; letter-spacing: 0; -webkit-line-clamp: 1; }
.rc-hero .txt, .rc-pick .txt { left: 14px; right: 14px; bottom: 16px; }
.rc-hero .nm, .rc-pick .nm { font-size: clamp(24px, 6.4cqw, 52px); letter-spacing: -.035em; line-height: 1.02; }
.rc-hero .sim { color: rgb(255 253 248 / .78); }

/* No-photo fallback: a plain wash in the recipe's palette (the app mock-ups only; guides and cards always use photos). */
.art { position: absolute; inset: 0; container-type: size; transition: transform .4s ease;
  background: radial-gradient(60% 80% at 72% 18%, rgb(255 255 255 / .2), transparent),
    radial-gradient(70% 90% at 16% 90%, rgb(0 0 0 / .26), transparent),
    linear-gradient(transparent, rgb(0 0 0 / .16)),
    linear-gradient(to bottom right, var(--a), var(--b), var(--c)); }
img.art { width: 100%; height: 100%; object-fit: cover; }
.eg { position: absolute; z-index: 3; top: 12px; right: 12px; font: 600 11px/28px var(--label); letter-spacing: .03em; color: #fff;
  padding: 0 var(--space-3); border-radius: 99px; background: rgb(23 23 22 / .72); }

/* ---------- Sections ---------- */
section { padding: var(--section-gap) 0; }
.sh { display: flex; align-items: last baseline; gap: var(--space-4); margin-bottom: var(--head-gap); }
.sh h2 { font-size: clamp(24px, 3.2vw, 34px); }
.sh .more { margin-left: auto; }

/* Intro + Discover mosaic */
.intro { padding: 0; }
section.intro { padding-bottom: var(--section-gap); }
.intro .ihead { display: grid; gap: var(--space-3) var(--space-7); align-items: end; }
.intro h1 { font-size: clamp(30px, 5.2vw, 64px); max-width: 13ch; }
.intro p { color: var(--dim); max-width: 30em; }
.tabs { display: flex; gap: var(--space-5); box-shadow: inset 0 -1px var(--rule); margin: var(--space-6) 0 var(--space-4); overflow-x: auto; scrollbar-width: none; }
.tabs [role=tablist] { display: flex; gap: var(--space-5); }
.tabs a, .tabs [role=tab] { position: relative; text-decoration: none; font-size: 15px; font-weight: 500; color: var(--dim); padding: var(--space-2) 0 var(--space-3); white-space: nowrap; }
.tabs [role=tab] { border: 0; background: none; cursor: pointer; }
.tabs [role=tab]:hover, .tabs a:hover { color: var(--text); }
.tabs [aria-selected=true] { color: var(--text); font-weight: 700; }
.tabs [aria-selected=true]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--accent); }
html:not(.js) .tabs [role=tab][aria-selected=false] { display: none; } /* no script: Popular only */
.tabs .meta { margin-left: auto; align-self: center; }
.mosaic { display: grid; gap: var(--gap); grid-template-columns: 1fr 1fr; }
.m-hero { grid-column: 1 / -1; }
.m-hero .rc { height: 190px; }
.m-tall .rc { height: 252px; }
.m-stack { display: grid; gap: var(--gap); }
.m-stack .rc { height: 121px; }
@media (min-width: 900px) {
  .intro .ihead { grid-template-columns: 1fr auto; }
  .intro p { text-align: right; max-width: 22em; padding-bottom: var(--space-2); }
  .mosaic { grid-template-columns: 2.2fr 1fr 1fr; grid-template-rows: 268px 268px; gap: var(--space-4); }
  .m-hero { grid-column: 1; grid-row: 1 / 3; }
  .m-hero .rc { height: 100%; border-radius: var(--r-hero); }
  .m-tall { grid-row: 1 / 3; }
  .m-tall .rc { height: 100%; }
  .m-stack { grid-row: 1 / 3; gap: var(--space-4); grid-template-rows: 1fr 1fr; }
  .m-stack .rc { height: 100%; }
}

/* Scroll-snap rows (mobile), grids (desktop) */
.row { display: grid; grid-auto-flow: column; gap: var(--gap); overflow-x: auto; scroll-snap-type: x mandatory;
  margin: 0 calc(var(--m) * -1); padding: 2px var(--m) var(--space-2); scroll-padding: 0 var(--m); scrollbar-width: none; }
.row::-webkit-scrollbar { display: none; }
.row > * { scroll-snap-align: start; }
.row.shelf { grid-auto-columns: 74%; }
.row.port { grid-auto-columns: 44%; }
@media (min-width: 700px) { .row.shelf { grid-auto-columns: 40%; } .row.port { grid-auto-columns: 28%; } }
@media (min-width: 1100px) {
  .row.shelf { grid-auto-columns: calc((100% - 3 * 14px) / 3.4); gap: var(--space-4); }
}
.dated { display: grid; gap: var(--space-2); }
.dated time { padding-left: var(--space-1); }

/* Browse by film: the app's canisters */
.films { display: grid; grid-auto-flow: column; grid-auto-columns: 112px; gap: var(--space-2); overflow-x: auto; margin: 0 calc(var(--m) * -1); padding: 0 var(--m) var(--space-1); scrollbar-width: none; list-style: none; }
.films a { display: grid; justify-items: center; gap: var(--space-2); padding: var(--space-4) var(--space-2) var(--space-3); border-radius: var(--r-card); background: var(--bg2); border: 1px solid transparent; text-decoration: none; text-align: center; height: 100%; }
.films a:hover { background: var(--bg); border-color: var(--line); }
.films img { width: 58px; height: 58px; }
.films b { font-size: 14px; font-weight: 650; line-height: 1.15; }
.films span { font: 500 12px var(--label); color: var(--dim); }
@media (min-width: 1100px) { .films { grid-auto-flow: row; grid-template-columns: repeat(7, 1fr); overflow: visible; margin: 0; padding: 0; } }

/* App promotion: App Store screenshot energy on a light page. Phones are iPhone 17 Pro Max in Cosmic Orange,
   screens are the app's own layouts rebuilt in HTML. Photos come from APP_SECTION_IMAGES in src/site/config.ts and
   only render where that allows; elsewhere each slot shows the app's no-photo artwork (.art). Phones and the settings card
   break the band's top and bottom edges: the band clips x only (overflow-x: clip keeps y visible), so no sideways scroll. */
/* Full-bleed band: the standard gap outside (margin) and one token inside (padding), so its edges sit like any section boundary. */
.app { position: relative; z-index: 1; overflow-x: clip; background: #F1E9DD; color: var(--ink); padding: var(--section-gap) 0; margin-block: var(--section-gap); border-block: 1px solid #E4D8C6; }
main > .app:first-child { margin-top: 0; padding-top: var(--section-gap); }
.app .wrap { display: grid; gap: 14px; }
.apptext { display: contents; }
.app h1, .app h2 { order: 1; font: 900 clamp(56px, 16vw, 104px)/.84 Unbounded, var(--cjk), sans-serif; letter-spacing: -.05em; text-transform: uppercase; margin-top: -6px; }
.app h1 em, .app h2 em { font-style: normal; color: var(--accent-ink); display: block; }
.app .lede { order: 2; color: var(--soft); font-size: 17px; max-width: 24em; }
.stage { order: 3; position: relative; height: 336px; margin: 0 calc(var(--m) * -1); }
.app .getrow { order: 4; position: relative; z-index: 2; }
.app .caps { order: 5; color: var(--soft); margin-top: calc(var(--space-1) * -1); }
.getrow { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.qrbox { display: none; align-items: center; gap: 12px; font-size: 14px; color: var(--soft); }

/* Stage: one 720x488 design box, scaled down on phones */
.st { position: absolute; width: 720px; height: 488px; left: 50%; top: 26px; transform: translateX(-50%) scale(.56); transform-origin: top center; }
.st > * { position: absolute; }

/* iPhone 17 Pro Max in Cosmic Orange: Apple's bezel PNG (1470x3000) over the screen. Its cutout is 1320x2868 px at
   (75, 66), i.e. 440x956pt @3x, with the Dynamic Island baked in. The screen's 55pt corner hides under the bezel. */
.ip { --w: 236px; width: var(--w); aspect-ratio: 1470 / 3000; container-type: inline-size; }
.ip::before { content: ""; position: absolute; inset: .67% 1.97%; border-radius: 14.4% / 7.05%; /* the body's outline in the PNG */
  box-shadow: 0 46px 50px -30px rgb(74 34 8 / .5), 0 14px 22px -12px rgb(74 34 8 / .35); }
.ip picture, .ip .bzl { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.scr { position: absolute; left: 5.102%; top: 2.2%; width: 89.796%; height: 95.6%; overflow: hidden; border-radius: calc(55 * var(--pt));
  box-shadow: 0 0 0 1.5px #000; --pt: calc(89.796cqw / 440); background: #F7F2E9; color: #1A1917; font: 500 calc(15 * var(--pt))/1.25 Outfit, sans-serif; }
.scr img, .fly img { width: 100%; height: 100%; object-fit: cover; }
.st .art { transition: none; }

/* Placement in the 720x488 box. Desktop: band content is 488 tall, so negative tops / bottoms past 488+40 break the band. */
.ip-a { --w: 228px; left: 6px; top: 6px; rotate: -8deg; }
.ip-b { --w: 270px; left: 220px; top: -96px; rotate: 3deg; }
.ip-c { --w: 228px; left: 470px; top: 120px; rotate: 9deg; }
.fly { width: 116px; height: 158px; overflow: hidden; border-radius: 13px; color: #fff; box-shadow: 0 22px 26px -16px rgb(60 30 10 / .5); }
.fly::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 50%, rgb(12 10 8 / .8)); }
.fly b { position: absolute; z-index: 2; left: 10px; right: 8px; bottom: 9px; font: 800 12px/1.1 Unbounded, sans-serif; letter-spacing: -.01em; }
.fly .cn { position: absolute; z-index: 2; top: 7px; left: 7px; width: 28px; height: auto; }
.fc { width: 84px; height: auto; filter: drop-shadow(0 14px 12px rgb(60 30 10 / .35)); }
.far { filter: blur(1.6px) drop-shadow(0 10px 10px rgb(60 30 10 / .25)); opacity: .9; }
.f1 { left: 150px; top: -46px; width: 92px; height: 126px; rotate: -10deg; }
.f2 { left: 640px; top: -36px; rotate: 11deg; z-index: 4; }
.f3 { left: -50px; top: 410px; rotate: -13deg; z-index: 4; }
.c2 { left: 452px; top: -64px; width: 96px; rotate: 16deg; z-index: 6; }
.c3 { left: 20px; top: -34px; width: 46px; rotate: 22deg; }
.pop { z-index: 5; width: 336px; left: 140px; top: 400px; padding: 16px 16px 14px; border-radius: 22px; rotate: -4deg; background: #F7F2E9;
  box-shadow: 0 0 0 1px #E4D8C6, 0 34px 40px -22px rgb(60 30 10 / .5), 0 10px 16px -10px rgb(60 30 10 / .3); }
.pop-h { display: flex; justify-content: space-between; align-items: baseline; margin: 0 2px 10px; }
.pop-h b { font: 800 22px/1.1 Unbounded, sans-serif; letter-spacing: -.03em; }
.pop-h span { font-size: 13px; color: var(--soft); }
.pop dl { margin: 0; background: #fff; border: 1px solid var(--hair); border-radius: 14px; padding: 0 14px; }
.pop dl div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; font-size: 16px; }
.pop dl div + div { border-top: 1px solid var(--hair); }
.pop dt { color: var(--soft); }
.pop dd { margin: 0; font-weight: 700; white-space: nowrap; }

/* Phones: two phones, detail in front */
@media (max-width: 899px) {
  .ip-a, .f1, .c3 { display: none; }
  .ip-b { left: 70px; top: -30px; rotate: -4deg; }
  .ip-c { left: 360px; top: 20px; rotate: 8deg; }
  .pop { left: 40px; top: 330px; width: 380px; rotate: -3deg; }
  .pop-h b { font-size: 26px; } .pop dl div { font-size: 19px; }
  .f2 { left: 560px; top: 330px; rotate: 10deg; }
  .f3 { left: 4px; top: 112px; width: 96px; height: 130px; } /* below the detail phone's back button, above its title */
  .c2 { left: 290px; top: -50px; width: 84px; } /* <= the 96px source at dpr 2 */
}
@media (min-width: 900px) {
  .app { padding: 56px 0; }
  .app .wrap { grid-template-columns: 1fr 720px; grid-template-rows: auto auto auto auto 1fr; column-gap: 48px; row-gap: 0; align-items: start; }
  .apptext { display: flex; flex-direction: column; gap: 20px; grid-row: 1 / -1; }
  .app h1, .app h2 { font-size: 104px; margin-top: 4px; }
  .stage { grid-column: 2; grid-row: 1 / -1; height: 488px; margin: 0; }
  .st { left: 0; top: 0; transform: none; }
  .app .caps { padding: 0; margin-top: 4px; }
  .qrbox { display: flex; }
}

/* Rumours */
.rlist { list-style: none; padding: 0; border-top: 1px solid var(--ink); }
.rlist li { display: grid; grid-template-columns: 80px 1fr; gap: var(--space-1) var(--space-4); padding: var(--space-4) 0; border-bottom: 1px solid var(--rule); }
.rlist a { font-weight: 600; text-decoration: none; padding: var(--space-2) 0; margin: calc(var(--space-2) * -1) 0; } /* 44px hit area, same layout */
.rlist a:hover { text-decoration: underline; }
.rlist .rate { grid-column: 2; }

/* ---------- Recipes page ---------- */
.lhead { padding: 0 0 var(--space-2); }
.lhead .wrap { display: flex; align-items: end; gap: var(--space-3) var(--space-4); flex-wrap: wrap; }
.lhead h1 { font-size: clamp(30px, 5vw, 56px); flex-basis: 100%; }
@media (min-width: 700px) { .lhead .meta { margin-left: auto; } }
#count { white-space: nowrap; }
.fbar { position: sticky; top: var(--hh); z-index: 10; background: var(--bg); padding: var(--space-3) 0 var(--space-3); border-bottom: 1px solid var(--rule); }
.fbar .wrap { display: grid; gap: var(--space-3); }
.fline { display: flex; align-items: center; gap: var(--space-3); }
.seg { display: flex; padding: 3px; border-radius: 12px; background: var(--bg2); box-shadow: inset 0 0 0 1px var(--rule); }
.seg label { position: relative; }
.seg input, .simchip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.seg span { display: block; white-space: nowrap; font-family: Outfit, var(--cjk), sans-serif; letter-spacing: 0; padding: 0 var(--space-4); line-height: 34px; border-radius: 9px; font-size: 14px; font-weight: 600; color: var(--dim); }
.seg input:checked + span { background: var(--ink); color: var(--on-ink); }
.seg input:focus-visible + span, .simchip input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 1px; }
#fbtn { margin-left: auto; height: 40px; padding: 0 var(--space-4); border-radius: 10px; border: 1px solid var(--line); background: none; font-weight: 600; cursor: pointer; display: flex; gap: var(--space-2); align-items: center; }
#fcount:not(:empty) { background: var(--accent); color: #fff; border-radius: 99px; min-width: 22px; line-height: 22px; font-size: 12px; font-weight: 800; }
#sims { display: flex; gap: var(--space-2); overflow-x: auto; margin: 0 calc(var(--m) * -1); padding: 0 var(--m); scrollbar-width: none; }
.simchip { position: relative; flex: none; }
.simchip span { display: flex; align-items: center; gap: var(--space-2); height: 40px; padding: 0 var(--space-4) 0 var(--space-2); border-radius: 10px; border: 1px solid var(--line); background: var(--bg); font-size: 14px; font-weight: 600; white-space: nowrap; }
.simchip span:hover { border-color: var(--ink); }
.simchip:first-child span { padding-left: var(--space-4); }
.simchip input:checked + span { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.can-sm { width: 28px; height: 28px; }
#active { display: flex; flex-wrap: wrap; gap: var(--space-2); }
#active:empty { display: none; }
#active button { height: 32px; padding: 0 var(--space-3); border-radius: 8px; border: 0; background: var(--bg2); box-shadow: inset 0 0 0 1px var(--rule); font-size: 14px; cursor: pointer; }
#active .clear { background: none; color: var(--accent); font-weight: 650; }
.sheet { display: grid; gap: var(--space-4); }
.sheet label, .sheet legend { display: grid; gap: var(--space-1); font: 600 12px var(--label); color: var(--dim); letter-spacing: .03em; }
.sheet select, .sheet input[type=search] { height: 44px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg); padding: 0 var(--space-3); font: 500 15px Outfit; color: var(--text); }
.sheet fieldset { border: 0; padding: 0; }
/* Dropdowns (fg.js): the <select> becomes this button, the same box as the select it replaces. */
.dd-btn { height: 44px; width: 100%; min-width: 0; border-radius: 12px; border: 1px solid var(--line); background: var(--bg) no-repeat right 12px center / 16px
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235C574F' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  padding: 0 36px 0 var(--space-3); font: 500 15px Outfit; color: var(--text); text-align: left; letter-spacing: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.dd-btn:hover { border-color: var(--dim); }
.dd-btn[aria-expanded=true] { border-color: var(--text); }
.dd-btn:focus-visible { outline-offset: 1px; border-radius: 12px; }
.dd-pop { position: absolute; z-index: 60; background: var(--bg); border: 1px solid var(--rule); border-radius: 14px; padding: 6px;
  box-shadow: 0 16px 40px rgb(25 24 22 / .14), 0 2px 8px rgb(25 24 22 / .06); font: 500 15px Outfit; color: var(--text); }
.dd-head { display: none; }
.dd-list { max-height: 326px; overflow-y: auto; overscroll-behavior: contain; outline: none; }
.dd-o { position: relative; display: flex; align-items: center; min-height: 40px; padding: 0 36px 0 12px; border-radius: 9px; cursor: pointer; }
.dd-o.on { background: var(--bg2); }
.dd-o[aria-selected=true] { font-weight: 650; }
.dd-o[aria-selected=true]::after { content: ""; position: absolute; right: 12px; width: 16px; height: 16px; background: var(--accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat; }
.dd-gl { padding: 12px 12px 4px; font: 600 11px var(--label); letter-spacing: .07em; text-transform: uppercase; color: var(--soft); }
.dd-g + .dd-g { margin-top: 4px; border-top: 1px solid var(--rule); }
/* Narrow or touch: a bottom sheet over a backdrop. */
.dd-scrim { position: fixed; inset: 0; z-index: 59; background: rgb(25 24 22 / .4); }
.dd-lock, .dd-lock body { overflow: hidden; }
.dd-pop.dd-sheet { position: fixed; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; max-height: 72vh; border-radius: 20px 20px 0 0; border-width: 1px 0 0;
  padding: 8px var(--space-3) calc(var(--space-3) + env(safe-area-inset-bottom)); animation: dd-up .2s ease-out; }
.dd-pop.dd-sheet::before { content: ""; align-self: center; width: 40px; height: 5px; border-radius: 3px; background: var(--line); margin-bottom: 4px; }
.dd-pop.dd-sheet .dd-head { display: flex; align-items: center; justify-content: space-between; padding: 4px 4px 8px 12px; }
.dd-title { font: 700 18px var(--display); }
.dd-x { width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 22px; background: var(--bg2); cursor: pointer; }
.dd-x svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.dd-pop.dd-sheet .dd-list { max-height: none; flex: 1; }
.dd-pop.dd-sheet .dd-o { min-height: 50px; font-size: 16px; }
.dd-pop[hidden] { display: none !important; }
@keyframes dd-up { from { transform: translateY(24px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .dd-pop.dd-sheet { animation: none; } }
.sheet fieldset .seg { margin-top: var(--space-1); width: max-content; }
.sheet h2 { font-size: 20px; }
#scrim { display: none; }
#fbtn { display: none; }
@media (max-width: 959px) {
  .js #fbtn { display: flex; }
  .sheet .apply { width: 100%; }
  .js .sheet { position: fixed; z-index: 40; left: 0; right: 0; bottom: 0; max-height: 86vh; overflow: auto; background: var(--bg); border-top: 1px solid var(--rule);
    border-radius: 22px 22px 0 0; padding: var(--space-3) var(--space-5) var(--space-5); transform: translateY(105%); transition: transform .25s ease; visibility: hidden; }
  .js .sheet::before { content: ""; justify-self: center; width: 40px; height: 5px; border-radius: 3px; background: var(--line); }
  body.sheet-open .sheet { transform: none; visibility: visible; }
  .sheet-open .fbar { z-index: 30; }
  .sheet-open #scrim { display: block; position: fixed; inset: 0; z-index: 39; background: rgb(25 24 22 / .4); }
}
@media (min-width: 960px) {
  #fbtn, .js #fbtn, .sheet h2 { display: none; }
  .js .sheet .apply { display: none; }
  .sheet { grid-template-columns: 1.4fr repeat(4, 1fr) auto; align-items: end; gap: var(--space-3); }
  .sheet::before { display: none; }
}
.grid { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
@media (min-width: 700px) { .grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-4); } }
.results { padding: var(--space-5) 0 var(--section-gap); }
.empty { padding: var(--space-7) 0; display: grid; gap: var(--space-3); justify-items: start; }
.empty h2 { font-size: 24px; }

/* ---------- Recipe page ---------- */
.crumbs { padding: 0 0 var(--space-4); font-size: 14px; color: var(--dim); }
.crumbs ol { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.crumbs li + li::before { content: "/"; margin-right: var(--space-2); opacity: .6; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--text); text-decoration: underline; }
.gal { display: grid; grid-auto-flow: column; grid-auto-columns: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  margin: 0 calc(var(--m) * -1); gap: 0; }
.shot { position: relative; scroll-snap-align: start; margin: 0; }
.shot .art { position: relative; display: block; aspect-ratio: 4 / 5; }
.shot figcaption { padding: var(--space-2) var(--m) 0; font: 500 12px var(--label); color: var(--dim); }
.pg { position: absolute; z-index: 3; right: 12px; top: calc(125vw - 44px); font: 700 13px/30px var(--label); padding: 0 var(--space-3); border-radius: 99px; background: rgb(0 0 0 / .72); letter-spacing: .02em; color: #fff; }
.rtitle { display: grid; gap: var(--space-3); padding: var(--space-5) 0 var(--space-2); }
/* Film badge on the title line, sized from the title (same em logic as the card badges): the canister art fills ~80% of its
   square, so a 1.05em box puts the canister at about the H1's cap height. */
.rtline { display: flex; align-items: center; gap: .18em; font-size: clamp(34px, 6vw, 76px); }
.rtline .can { width: 1.05em; height: 1.05em; flex: none; margin-left: -.06em; }
.rtitle h1 { font-size: 1em; }
.rtitle .by { font-size: 17px; color: var(--soft); }
.rtitle .by a { color: var(--ink); text-decoration-color: var(--line); }
.rtitle .by a:hover { text-decoration-color: currentColor; }
/* Share pill: at the right end of the row (the content edge) at every width; credit + heart stay left. Hidden without JS (button[hidden]). */
.rtitle .by { display: flex; align-items: center; gap: var(--space-3); min-height: 34px; }
.rtitle .byt { min-width: 0; }
.shp { flex: none; margin-left: auto; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 13px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); color: var(--ink); font: 600 14px/1 var(--label); cursor: pointer; }
.shp[hidden] { display: none; }
.shp:hover { border-color: var(--ink); }
.shp:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.shp svg { flex: none; }
.toast { position: fixed; z-index: 60; left: 50%; bottom: 24px; transform: translate(-50%, 8px); padding: 10px 16px; border-radius: 999px; background: var(--ink); color: #fff; font: 600 14px/1.2 var(--label); opacity: 0; pointer-events: none; transition: opacity .15s, transform .15s; }
.toast.on { opacity: 1; transform: translate(-50%, 0); }
/* Share popup: the app's Frosted card look, dark glass over the blurred page. Native <dialog> (top layer, inert page, Esc).
   Scroll is locked with the scrollbar's gutter kept, so nothing moves sideways (CLS 0). */
html:has(dialog.share-dlg[open]) { overflow: hidden; scrollbar-gutter: stable; }
dialog.share-dlg { margin: auto; padding: 0; border: 1px solid rgb(255 255 255 / .16); border-radius: 28px; color: #fff; background: rgb(24 24 26 / .74);
  -webkit-backdrop-filter: blur(28px) saturate(1.4); backdrop-filter: blur(28px) saturate(1.4); box-shadow: 0 30px 80px rgb(0 0 0 / .35);
  width: min(100vw - 2 * var(--gutter), 420px, (100dvh - 190px) * .8 + 34px); max-height: calc(100dvh - 24px); overflow: auto; overscroll-behavior: contain; }
dialog.share-dlg[open] { animation: drop-in .28s cubic-bezier(.22, 1, .36, 1); }
dialog.share-dlg::backdrop { background: rgb(15 15 16 / .5); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
@media (prefers-reduced-motion: reduce) { dialog.share-dlg[open] { animation: none; } }
.share-dlg-in { display: grid; gap: 14px; padding: 16px; }
.share-dlg-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding-left: 4px; }
.share-dlg h2 { font-size: 20px; letter-spacing: -.02em; }
.share-dlg-x { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgb(255 255 255 / .12); color: #fff; cursor: pointer; }
.share-dlg-x:hover { background: rgb(255 255 255 / .2); }
.share-dlg-x svg { width: 20px; height: 20px; }
.share-dlg-card { aspect-ratio: 4 / 5; border-radius: 18px; overflow: hidden; background: rgb(255 255 255 / .06); }
.share-dlg-card img { display: block; width: 100%; height: 100%; }
.share-dlg-card img:not([src]) { visibility: hidden; }
.share-dlg-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.share-dlg-row:has(> :only-child) { grid-template-columns: 1fr; }
.share-dlg-b { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 12px; border: 1px solid rgb(255 255 255 / .22); border-radius: 999px;
  background: rgb(255 255 255 / .1); color: #fff; font: 600 15px/1.1 var(--label); cursor: pointer; }
.share-dlg-b:hover { background: rgb(255 255 255 / .18); }
.share-dlg-b.on { background: #fff; border-color: #fff; color: #161618; }
.share-dlg-b.on:hover { background: #e9e9ea; }
.share-dlg-x:focus-visible, .share-dlg-b:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.rtitle .sub { font-size: 19px; color: var(--dim); max-width: 32em; }
.tags { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.tags { gap: 2px var(--space-4); }
.tags a { font-size: 15px; color: var(--dim); text-decoration: underline; text-decoration-color: var(--line); padding: var(--space-1) 0; }
.tags a:hover { color: var(--text); text-decoration-color: currentColor; }
.rcols { display: grid; gap: var(--space-6); padding: var(--space-4) 0 var(--section-gap); }
.panel { background: var(--paper); color: var(--ink); border-radius: var(--r-hero); padding: var(--space-5); border: 1px solid var(--rule); }
.phead { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-bottom: var(--space-2); }
.phead h2 { font-size: 20px; white-space: nowrap; }
.phead .meta { color: var(--soft); }
.phead button { margin-left: auto; height: 38px; padding: 0 var(--space-4); border-radius: 10px; border: 1px solid var(--ink); background: none; font-weight: 650; cursor: pointer; color: var(--ink); }
.sets div { display: flex; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) 0; border-bottom: 1px solid var(--hair); }
.sets div:last-child { border: 0; }
.sets div { align-items: center; }
.sets dt, .pop dt { display: flex; align-items: center; gap: var(--space-3); }
.sets dt { color: var(--soft); }
/* Setting icon tile: the app's rounded icon well, washed in the artwork's colour. */
.si { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; color: var(--t);
  background: color-mix(in srgb, var(--t) 13%, transparent); }
.si svg { width: 16px; height: 16px; }
.pop .si { width: 26px; height: 26px; border-radius: 8px; }
.pop .si svg { width: 15px; height: 15px; }
.sets dd { font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.na { font-weight: 450; color: var(--soft); }
#copy-status { font: 600 13px var(--label); color: #237C68; min-height: 1.4em; }
.cta { margin-top: var(--space-3); padding: var(--space-4); border-radius: var(--r-card); background: var(--surface); display: grid; gap: var(--space-4); }
.cta p { color: var(--soft); font-size: 15px; }
.cta .getrow { gap: var(--space-3); }
.cta .btn { background: var(--accent-ink); color: #fff; }
.qrrow { display: none; align-items: center; gap: var(--space-3); font-size: 14px; color: var(--soft); }
.side { display: grid; gap: var(--space-6); align-content: start; }
.side h2 { font-size: 22px; margin-bottom: var(--space-3); }
.notes { font-size: 19px; }
.compat { list-style: none; padding: 0; border-top: 1px solid var(--ink); }
.compat li { display: grid; grid-template-columns: 110px 1fr; gap: var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--rule); font-size: 15px; }
.compat li span { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); }
.compat li.no { color: var(--dim); }
.compat a { text-decoration: none; }
.compat a:hover { text-decoration: underline; }
@media (min-width: 900px) {
  .gal { grid-auto-flow: row; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; gap: var(--space-4); margin: 0; overflow: visible; height: 620px; }
  .shot:first-child { grid-row: 1 / 3; }
  .shot { display: grid; grid-template-rows: 1fr auto; }
  .shot .art { aspect-ratio: auto; border-radius: var(--r-card); overflow: hidden; height: 100%; }
  .shot:first-child .art { border-radius: var(--r-hero); }
  .shot figcaption { padding: var(--space-2) 2px 0; }
  .pg { top: 12px; right: auto; left: 12px; }
  .shot .eg { top: 12px; }
  .rtitle { padding-top: var(--space-6); }
  .rcols { grid-template-columns: 1fr minmax(380px, 460px); gap: var(--space-8); }
  .rcols .panel { grid-column: 2; grid-row: 1 / 3; align-self: start; }
  .qrrow { display: flex; }
}
@media (max-width: 899px) { .shot .art { border-radius: 0; } .shot .eg { top: 12px; } }

/* ---------- Article ---------- */
.byline { padding: var(--space-4) 0 0; }
.reading { background: var(--paper); color: var(--ink); padding: var(--section-gap) 0 var(--space-5); }
.col { max-width: calc(680px + 2 * var(--m)); margin: 0 auto; padding: 0 var(--m); font-size: 18px; line-height: 1.65; }
.col > p { margin-bottom: var(--space-5); }
.alsogrid { padding: var(--section-gap) 0; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; } }
@media (max-width: 699px) {
  .tabs a { white-space: nowrap; }
  .tabs .meta, .tabs a:nth-last-of-type(1) { display: none; }
}
@media (min-width: 960px) { #sims { flex-wrap: wrap; overflow: visible; margin: 0; padding: 0; } }
@media (max-width: 459px) {
  .phead .meta { display: none; }
  .seg span { padding: 0 var(--space-3); font-size: 13px; }
  #fbtn { padding: 0 var(--space-3); }
  .fline { gap: var(--space-2); }
  .fline #count { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } /* still announced */
}

/* ---------- Production additions (not in the draft) ---------- */
.badge.lg { min-height: 48px; }
.qr { width: 88px; height: 88px; background: #fff; padding: var(--space-1); border-radius: 8px; flex: none; box-shadow: inset 0 0 0 1px var(--rule); }
.qrbox .qr { width: 96px; height: 96px; }
.empty-card { background: var(--bg2); border: 1px solid var(--rule); border-radius: var(--r-hero); padding: var(--space-6) var(--space-5); display: grid; gap: var(--space-3); justify-items: start; max-width: 40rem; }
.empty-card h2, .empty-card h3 { font-size: 22px; }
.empty-card p { color: var(--dim); }
.muted { color: var(--dim); }
.gal.n1 .pg, .gal.n0 .pg { display: none; }
@media (min-width: 900px) {
  .gal.n1, .gal.n0 { grid-template-columns: 1fr; grid-template-rows: 1fr; height: min(70vh, 640px); }
  .gal.n2 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; height: 520px; }
  .gal.n2 .shot:first-child { grid-row: auto; }
}
.credit { font-size: 15px; color: var(--soft); margin-top: var(--space-2); }
.credit a { color: var(--ink); }
.panel .prov { font-size: 13px; line-height: 1.45; color: var(--soft); margin-top: var(--space-1); }
.panel .report { font-size: 13px; color: var(--soft); margin-top: var(--space-3); }
.panel .report a { color: var(--soft); }
[data-copy][hidden] { display: none; }

/* Film and camera pages */
.phead2 { padding: 0 0 var(--space-3); display: grid; gap: var(--space-3); }
.phead2 .can { width: 64px; height: 64px; }
.phead2 h1 { font-size: clamp(34px, 6vw, 72px); }
.phead2 p { color: var(--dim); max-width: 36em; }

/* Paper reading band: legal pages, guides index, rumour articles */
.paperband { background: var(--paper); color: var(--ink); padding: var(--section-gap) 0; border-top: 1px solid var(--rule); }
.prose { max-width: 720px; margin: 0 auto; padding: 0 var(--m); font-size: 18px; line-height: 1.65; }
.prose h1 { font-size: clamp(32px, 5vw, 52px); margin: 0 0 var(--space-5); }
.prose h2 { font-size: 22px; margin: var(--space-6) 0 var(--space-3); }
.prose p, .prose ul { margin-bottom: var(--space-4); }
.prose ul { padding-left: var(--space-5); }
.prose li { margin-bottom: var(--space-2); }
.prose a { color: var(--accent-ink); }
.prose code { font: 500 15px var(--label); background: var(--surface); padding: 1px var(--space-2); border-radius: 6px; }
.prose .meta, .paperband .meta { color: var(--soft); }
.legalnote { padding: var(--space-3) var(--space-4); border: 1px solid var(--rule); border-radius: 12px; }
.col h2 { font-size: clamp(22px, 3vw, 26px); line-height: 1.15; margin: var(--space-7) 0 var(--space-3); scroll-margin-top: calc(var(--hh) + 16px); }
.col a { color: var(--accent-ink); }

/* Guides index */

/* Rumours */
.rhead { padding: var(--space-6) 0 var(--space-4); display: grid; gap: var(--space-4); max-width: 900px; }
.rhead h1 { font-size: clamp(30px, 5vw, 60px); }
.rmeta { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); align-items: center; }
.status { display: inline-flex; align-items: center; gap: var(--space-2); font: 700 13px/30px var(--label); padding: 0 var(--space-3); border-radius: 99px; background: var(--bg2); box-shadow: inset 0 0 0 1px var(--rule); }
.status::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.status.s-unconfirmed { color: #7A5000; }
.status.s-likely { color: var(--accent); }
.status.s-confirmed { color: #17654A; }
.status.s-wrong { color: var(--dim); text-decoration: line-through; }
.examplebar { background: #F2C14E; color: #1a1408; font-weight: 700; padding: var(--space-3) var(--m); text-align: center; font-size: 15px; }
.prose .sources { list-style: none; padding: 0; border-top: 1px solid var(--hair); margin-bottom: var(--space-4); }
.sources li { padding: var(--space-3) 0; border-bottom: 1px solid var(--hair); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-1) var(--space-3); }
.scale { background: var(--surface); border-radius: var(--r-card); padding: var(--space-4) var(--space-4); font-size: 15px; }
.scale dl { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-2) var(--space-4); margin-top: var(--space-2); }
.scale dt { font-weight: 700; }
.rlist .rate { display: flex; gap: var(--space-2); align-items: center; }
.rlist .status { line-height: 24px; font-size: 11px; padding: 0 var(--space-2); }

<<<<<<< HEAD
.notfound { padding-top: 60px; padding-bottom: 80px; display: grid; gap: 16px; justify-items: start; }
=======
/* App page */
.feats { list-style: none; padding: 0; display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.feats li { background: var(--bg2); border: 1px solid var(--rule); border-radius: var(--r-card); padding: var(--space-4); }
.feats b { display: block; font: 800 17px/1.2 var(--display); margin-bottom: var(--space-2); }
.feats span { color: var(--dim); font-size: 16px; }

.notfound { padding-bottom: var(--section-gap); display: grid; gap: var(--space-4); justify-items: start; }
>>>>>>> 39b8439 (Site: one spacing scale across every page)
.notfound h1 { font-size: clamp(36px, 6vw, 64px); }
.notfound p { color: var(--dim); max-width: 32em; }
.soon { padding: var(--space-2) var(--gutter) var(--section-gap); display: grid; gap: var(--space-3); justify-items: start; }
.soon p { color: var(--dim); }
.wrap.cams { padding-bottom: var(--section-gap); }
.cams section { padding: var(--space-4) 0; }
.getrow.end { margin-top: var(--space-5); }

/* ---------- SEO run: hub pages, /recipes intro and FAQ, guide tables ---------- */
.lhead .intro { flex-basis: 100%; max-width: 40em; color: var(--dim); }
.phead2 .note { font-size: 15px; }
.hubmore { display: grid; gap: var(--space-3); padding-top: var(--space-6); }
.side .wo { margin-bottom: var(--space-3); }
main > .wrap:last-child > .hubmore { padding-bottom: var(--section-gap); } /* hub without guides: ends the page */
.hubmore h2.sh { margin: var(--space-4) 0 var(--space-1); font-size: 20px; } /* + the grid gap = --head-gap */
.hubs, .faq { padding: var(--section-gap) 0 0; }
.hubs { padding-bottom: var(--section-gap); }
.hubrow { display: grid; gap: var(--space-2); margin-bottom: var(--space-4); }
.hubrow h3 { font: 650 16px/1.3 var(--label); letter-spacing: 0; color: var(--dim); }
.faq .wrap { max-width: 760px; margin-left: 0; }
.faq h3 { font: 650 18px/1.3 var(--label); letter-spacing: 0; margin: var(--space-4) 0 var(--space-1); }
.faq p { color: var(--dim); }
.faq a { color: var(--accent-ink); }
.faq:last-child { padding-bottom: var(--section-gap); }
.hublinks { margin-top: var(--space-2); }
.col ol { padding-left: 1.3em; margin-bottom: var(--space-5); }
.col li { margin-bottom: var(--space-2); }
.tablewrap { overflow-x: auto; margin: var(--space-1) 0 var(--space-5); }
.col table { border-collapse: collapse; font-size: 15px; line-height: 1.4; min-width: 560px; }
.col th, .col td { text-align: left; vertical-align: top; padding: var(--space-3) var(--space-3) var(--space-3) 0; border-bottom: 1px solid var(--hair); }
.col thead th { font: 600 12px var(--label); letter-spacing: .06em; text-transform: uppercase; color: var(--soft); }
.col tbody th { font-weight: 650; white-space: nowrap; }
/* ---------- /app: App Store screenshot sections ----------
   Every section: a two-tone .sh headline, one short line, then an .apbox where .fl elements sit at --x/--y/--w/--r on
   phones and --X/--Y/--W/--R from 900px. Depth: d1 near (sharp, deep shadow), d2 mid, d3 far (blurred, faded).
   .streak is one SVG behind every section, so the line is continuous at every seam; sections have no background. */
.ap { position: relative; overflow-x: clip; }
.streak { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; filter: blur(8px); }
/* The streak is a soft band, not a line: a wide peach glow, an orange body and a brighter core, all blurred, fading
   out at both ends (gradient stops). Opacities keep --dim body text at 4.5:1 on the band's core even unblurred. Widths are screen px (non-scaling stroke). */
.streak .s1 { stroke-width: 84px; opacity: .42; }
.streak .s2 { stroke-width: 48px; opacity: .12; }
.streak .s3 { stroke-width: 18px; opacity: .12; }
.aps { position: relative; z-index: 1; padding: 44px 0 20px; }
.aps .wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; }
/* Headings never run past their text column into the cards: --n (set on .aptext by the page) is the longest Latin word's
   length, and a word is at most ~.9em per letter in Unbounded 900 caps, so the size caps at 100cqi / n / .9 ("SCHLUSS", "EINSTELLUNG"). */
.aptext, .ap-get .wrap { container-type: inline-size; }
.ap h1, .ap .sh h2 { --fs: clamp(40px, 11.6vw, 76px); font: 900 min(var(--fs), 100cqi / var(--n, 1) / .9)/.9 var(--display); letter-spacing: -.05em; text-transform: uppercase; }
.ap h1 { --fs: clamp(60px, 18vw, 128px); line-height: .86; }
.ap h1 em, .ap .sh h2 em { font-style: normal; color: var(--accent-ink); }
.ap h1 em { display: block; }
.ap .sh { margin: 0; }
.aptext { display: grid; gap: 14px; justify-items: start; position: relative; z-index: 2; }
.aptext > p, .ap-get > .wrap > p { color: var(--dim); font-size: 18px; max-width: 26em; }
.appicon { width: 96px; height: 96px; border-radius: 22px; box-shadow: 0 18px 30px -14px rgb(120 50 10 / .45), 0 0 0 1px rgb(0 0 0 / .06); }
.ap .getrow { gap: 18px; }
.ap .badge.lg { margin-block: 0; }

.apbox { position: relative; width: 390px; height: 560px; left: 50%; translate: -50% 0; }
/* .crop: a short box; the phone runs on into the next section and sits above it (.ap clips only x, so no h-scroll). */
.apbox.crop { height: var(--h, 520px); }
.ap-find { z-index: 3; }
.ap-check { z-index: 2; }
.ap-write .apbox { height: 470px; }
.fl { position: absolute; left: var(--x); top: var(--y); width: var(--w); rotate: var(--r); }
.fl .rc, .fl .print { width: 100%; }
.fl .rc .nm { font-size: clamp(13px, 11cqw, 20px); }
.fl .rc .sim { font-size: 11px; }
.fl .ip { --w: 100%; width: 100%; position: relative; }
.ph { z-index: 3; }
.d1 { z-index: 5; filter: drop-shadow(0 22px 22px rgb(70 30 6 / .3)); }
.d2 { z-index: 2; filter: blur(1.2px) drop-shadow(0 12px 12px rgb(70 30 6 / .2)); opacity: .92; }
.d3 { z-index: 1; filter: blur(3px); opacity: .7; }
.print { display: block; aspect-ratio: 4 / 5; position: relative; overflow: hidden; border-radius: 6px; border: 5px solid #fff; background: #fff; }
.tin img { width: 100%; height: auto; }

/* Breakouts */
.pill { display: flex; align-items: center; gap: 12px; background: #fff; border-radius: 99px; padding: 18px 24px; font: 700 22px/1 var(--label); color: var(--soft);
  box-shadow: 0 0 0 1px var(--rule); }
.pill svg { width: 26px; height: 26px; color: var(--accent); flex: none; }
.okb, .done { display: flex; align-items: center; gap: 12px; border-radius: 24px; padding: 16px 20px; background: #DCEFE2; color: #14532D; font: 800 22px/1.05 var(--display); letter-spacing: -.03em; }
.okb small, .done small { display: block; font: 600 15px/1.3 var(--label); letter-spacing: 0; color: #2B5F3D; }
.okb svg, .done svg { flex: none; width: 40px; height: 40px; padding: 8px; border-radius: 50%; background: #16A34A; color: #fff; }
.done { border-radius: 99px; }
.setcard .pop { position: static; width: auto; rotate: none; }
.setcard .pop dl div { font-size: 15px; }
.setcard .pop-h b { font-size: 19px; }
.setcard .pop dd { text-align: right; }
.slots ol { list-style: none; padding: 8px; margin: 0; display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; background: #fff; border-radius: 20px; box-shadow: 0 0 0 1px var(--rule); }
.slots li { display: grid; gap: 4px; align-content: start; padding: 10px 6px; border-radius: 14px; background: var(--bg2); min-width: 0; }
.slots b { font: 900 20px/1 var(--display); letter-spacing: -.04em; }
.slots span { font-size: 10px; line-height: 1.2; color: var(--dim); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.slots .on { background: var(--accent); color: #fff; }
.slots .on span { color: #fff; }

/* Favourites: no phone, cards bleeding off the right edge */
.strip { position: relative; display: flex; gap: 14px; padding: 18px 0 96px; margin-right: calc(var(--m) * -1 - 140px); }
.sv { position: relative; flex: none; width: 160px; }
.sv:nth-child(odd) { rotate: -3deg; } .sv:nth-child(even) { rotate: 3deg; translate: 0 22px; }
.sv .rc { box-shadow: 0 22px 26px -16px rgb(70 30 6 / .45); }
.fav { position: absolute; z-index: 3; top: 10px; right: 10px; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: rgb(23 23 22 / .55); color: #fff; }
.fav svg { width: 18px; height: 18px; fill: #E95F32; stroke: #E95F32; }
.saved { position: absolute; z-index: 6; left: 8px; bottom: 6px; display: flex; align-items: center; gap: 12px; background: var(--ink); color: #fff; border-radius: 99px; padding: 16px 26px 16px 20px; font: 800 20px/1 var(--display); letter-spacing: -.03em; rotate: -4deg; box-shadow: 0 22px 26px -14px rgb(40 20 6 / .5); }
.saved svg { width: 24px; height: 24px; color: #F39250; }

/* Get */
.ap-get { padding: 60px 0 80px; text-align: center; }
.ap-get .wrap { justify-items: center; }
.ap-get .sh { justify-content: center; }
.ap-get .getrow { justify-content: center; }
.fan { display: flex; justify-content: center; align-items: flex-end; height: 170px; }
.fan .fl { position: relative; left: auto; top: auto; margin: 0 -18px; }
.fan .d1 { margin-bottom: 18px; }
.ap-get .appicon { margin-top: -54px; position: relative; z-index: 6; width: 112px; height: 112px; border-radius: 26px; }

@media (min-width: 900px) {
  .aps { padding: 72px 0 30px; }
  .streak { filter: blur(14px); }
  .streak .s1 { stroke-width: 160px; }
  .streak .s2 { stroke-width: 90px; }
  .streak .s3 { stroke-width: 32px; }
  .aps .wrap { grid-template-columns: minmax(0, 1fr) 720px; align-items: center; gap: 40px; }
  .ap-open .wrap { grid-template-columns: minmax(0, 1fr) 720px; }
  .ap-find .wrap, .ap-write .wrap { grid-template-columns: 720px minmax(0, 1fr); }
  .ap-find .aptext, .ap-write .aptext { grid-column: 2; grid-row: 1; }
  .ap-find .apbox, .ap-write .apbox { grid-column: 1; grid-row: 1; }
  .apbox { width: 720px; height: 680px; left: 0; translate: none; }
  .apbox.crop { height: var(--H, 640px); }
  .ap-write .apbox { height: 660px; }
  .fl { left: var(--X); top: var(--Y); width: var(--W); rotate: var(--R); }
  .ap-save .wrap { grid-template-columns: 560px minmax(0, 1fr); }
  .ap h1 { --fs: 112px; }
  .ap .sh h2 { --fs: 64px; }
  .strip { margin-right: calc((100vw - min(100vw, 1320px)) / -2 - var(--m) - 120px); padding: 30px 0 110px 10px; }
  .sv { width: 220px; }
  .ap-get .wrap { grid-template-columns: 1fr; }
  .fan { height: 250px; }
  .ap-get .appicon { width: 128px; height: 128px; border-radius: 30px; }
  .pill { font-size: 30px; padding: 24px 32px; } .pill svg { width: 34px; height: 34px; }
  .okb, .done { font-size: 30px; } .okb svg, .done svg { width: 54px; height: 54px; }
  .slots b { font-size: 30px; } .slots span { font-size: 12px; } .slots li { padding: 14px 10px; }
  .saved { font-size: 26px; left: 30px; bottom: 10px; }
}

/* ---------- Polish run: guide covers and cards, guide pages, link lists, camera cards, footer ---------- */
/* Cover: real recipe photos only. One photo, two side by side, or one large and two stacked. */
.cov { display: grid; gap: 3px; aspect-ratio: 16 / 10; border-radius: var(--r-card); overflow: hidden; background: var(--bg2); }
.cov .art, .rx-ph .art { position: relative; inset: auto; min-height: 0; }
.cov.n2 { grid-template-columns: 1fr 1fr; }
.cov.n3 { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; }
.cov.n3 .art:first-child { grid-row: 1 / 3; }
.gcard { display: grid; gap: var(--space-2); align-content: start; text-decoration: none; color: var(--text); }
.gcard .cov { margin-bottom: var(--space-2); }
.gcard h2, .gcard h3 { font: 700 19px/1.25 var(--label); letter-spacing: -.01em; text-wrap: balance; }
.gcard p { color: var(--dim); font-size: 16px; line-height: 1.4; }
.gcard:hover h2, .gcard:hover h3 { text-decoration: underline; text-decoration-thickness: 2px; }
.gcard:hover .art, .grows a:hover .art, .rx:hover .art { transform: scale(1.03); }
.row.gshelf { grid-auto-columns: 80%; gap: var(--space-4); }
@media (min-width: 700px) { .row.gshelf { grid-auto-columns: calc((100% - 32px) / 2.3); } }
@media (min-width: 1100px) { .row.gshelf { grid-auto-columns: 1fr; gap: var(--space-5); overflow: visible; margin: 0; padding: 0; } }

/* /guides: the seasonal guide large, the rest as rows with a square photo */
.gindex { padding: var(--space-5) 0 var(--section-gap); }
.gindex .wrap { display: grid; gap: var(--space-6); }
.gfeat h2 { font: 800 clamp(26px, 4vw, 40px)/1.06 var(--display); letter-spacing: -.035em; margin-top: var(--space-1); }
.gfeat p { font-size: 18px; }
.grows { list-style: none; padding: 0; border-top: 1px solid var(--rule); }
.grows li { border-bottom: 1px solid var(--rule); }
.grows a { display: grid; grid-template-columns: 96px 1fr; gap: var(--space-4); align-items: center; padding: var(--space-4) 0; text-decoration: none; }
.grows a:not(:has(.cov)) { grid-template-columns: 1fr; }
.grows .cov { aspect-ratio: 1; border-radius: 12px; }
.grows b { display: block; font: 650 17px/1.3 var(--label); }
.grows a > span > span { display: block; color: var(--dim); font-size: 15px; line-height: 1.4; margin-top: 3px; }
.grows a > span > .meta { font-size: 13px; margin-top: var(--space-2); }
.grows a:hover b { text-decoration: underline; }
@media (min-width: 900px) {
  .gindex .wrap { grid-template-columns: 1.35fr 1fr; gap: var(--space-8); align-items: start; }
  .gfeat { position: sticky; top: calc(var(--hh) + 24px); }
  .grows { border-top: 0; }
  .grows li:first-child a { padding-top: 0; }
}

/* Guide page: title column on the reading measure, a wide photo cover, then the article */
.ghead { display: grid; gap: var(--space-4); padding: var(--space-1) 0 0; }
.ghead > :not(.cov) { width: 100%; max-width: 680px; margin-inline: auto; }
.ghead h1 { font-size: clamp(32px, 6vw, 56px); letter-spacing: -.04em; line-height: 1.04; text-wrap: balance; }
.ghead .dek { font-size: clamp(18px, 2.2vw, 21px); line-height: 1.45; color: var(--dim); }
.byline { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-1); }
.byline img { border-radius: 8px; }
.byline > span { display: grid; font-size: 15px; line-height: 1.3; }
.byline .meta { font-size: 14px; }
.ghead .cov { width: 100%; max-width: 1080px; margin: var(--space-4) auto 0; aspect-ratio: 16 / 9; border-radius: var(--r-hero); }
@media (max-width: 699px) { .ghead .cov { aspect-ratio: 4 / 3; margin-inline: calc(var(--m) * -1); width: calc(100% + 2 * var(--m)); border-radius: 0; } }
.toc { margin: var(--space-6) 0 var(--space-2); padding: var(--space-4) var(--space-5) var(--space-4); border-radius: var(--r-card); background: var(--bg2); }
.toc p { font: 700 15px var(--label); margin-bottom: var(--space-1); }
.col .toc ol { margin: 0; padding-left: 1.3em; font-size: 16px; line-height: 1.35; }
.col .toc li { margin: 0; padding: var(--space-2) 0; }
.toc li::marker { color: var(--accent); font: 700 15px var(--label); }
.col .toc a { color: var(--text); text-decoration: none; }
.col .toc a:hover { text-decoration: underline; }
.pick { padding: 0; }
.pick h3 { font: 700 20px/1.3 var(--label); letter-spacing: -.01em; margin: var(--space-6) 0 var(--space-2); scroll-margin-top: calc(var(--hh) + 16px); }
.pick > p { margin-bottom: var(--space-4); }
/* Inline recipe card: three sample photos over the name, film and creator */
.col a.rx { display: grid; gap: var(--space-3); margin: var(--space-4) 0 var(--space-5); padding: var(--space-2) var(--space-2) var(--space-3); border: 1px solid var(--rule); border-radius: var(--r-card); color: var(--text); text-decoration: none; }
.col a.rx:hover { border-color: var(--line); }
.rx-ph { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; border-radius: 10px; overflow: hidden; }
.rx-ph .art { aspect-ratio: 4 / 5; }
.rx-t { display: flex; align-items: center; gap: var(--space-3); padding: 0 var(--space-2); }
.rx-t .can { width: 40px; height: 40px; flex: none; }
.rx-t b { display: block; font: 700 18px/1.25 var(--label); }
.rx-t .meta { display: block; font-size: 14px; }
.rx-t svg { width: 20px; height: 20px; margin-left: auto; color: var(--accent); flex: none; }
.rx:hover b { text-decoration: underline; }
.rxs a.rx { margin: var(--space-3) 0; }
/* App promo at the end of a guide */
.promo { display: grid; grid-template-columns: 64px 1fr; gap: var(--space-4) var(--space-4); align-items: center; margin: var(--space-7) 0 0; padding: var(--space-5); border-radius: var(--r-hero); background: var(--bg2); }
.promo img { border-radius: 14px; }
.col .promo p { margin: 0; font-size: 16px; line-height: 1.45; color: var(--dim); }
.col .promo .promo-t { font: 800 19px/1.2 var(--display); letter-spacing: -.02em; color: var(--text); margin-bottom: var(--space-1); }
.promo .badge { grid-column: 1 / -1; justify-self: start; margin: 2px 0 0; }
@media (min-width: 700px) { .promo { grid-template-columns: 64px 1fr auto; } .promo .badge { grid-column: auto; margin: 0; } }
.related { padding: var(--section-gap) 0; }

/* Link lists (hubs, cameras, films): rows with a chevron, in columns. No pills. */
.links { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); column-gap: var(--space-6); }
.links.two { grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); column-gap: var(--space-5); }
.links.two a { display: grid; grid-template-columns: 1fr auto; column-gap: var(--space-2); align-content: center; min-height: 60px; }
.links.two b { white-space: nowrap; }
.links.two .meta { grid-row: 2; margin: 0; font-size: 13px; }
.links.two svg { grid-column: 2; grid-row: 1 / 3; margin: 0; }
.links li { border-bottom: 1px solid var(--rule); }
.links a { display: flex; align-items: center; gap: var(--space-3); min-height: 52px; padding: var(--space-2) 0; text-decoration: none; }
.links b { font-weight: 600; font-size: 16px; }
.links .meta { margin-left: auto; font-size: 14px; }
.links b + svg { margin-left: auto; }
.links svg { width: 18px; height: 18px; color: var(--dim); flex: none; }
.links img, .links .can { width: 32px; height: 32px; }
.links a:hover b { text-decoration: underline; }
.cams section + section { padding-top: var(--space-6); }
.cams .sh h2 { font-size: clamp(20px, 2.4vw, 24px); }

/* Camera cards: the app's camera-picker photo, the name under it. Scroll row on home, grid on /cameras */
.camrow { list-style: none; grid-auto-columns: 150px; }
.camgrid { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: var(--space-3); }
.cam { display: grid; gap: 2px; align-content: start; height: 100%; padding: var(--space-2) var(--space-2) var(--space-3); border-radius: var(--r-card); background: var(--bg2); border: 1px solid transparent; text-decoration: none; }
.cam:hover { background: var(--bg); border-color: var(--line); }
.cam img { width: 100%; height: auto; aspect-ratio: 4 / 3; margin-bottom: var(--space-2); transition: transform .4s ease; }
.cam:hover img { transform: scale(1.04); }
.cam b { font: 700 16px/1.2 var(--label); padding: 0 var(--space-1); }
.cam .meta { padding: 0 var(--space-1); }
@media (min-width: 1100px) { .camrow { grid-auto-flow: row; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); overflow: visible; margin: 0; padding: 0; } }

/* Footer: one full-width system. Brand and stores on one line, six even link columns, then copyright, contact and the
   nine languages on a hairline base. Paper ground, hairlines, sentence-case labels; nothing hangs off to the left. */
footer.foot { background: var(--bg2); border-top: 1px solid var(--rule); padding: var(--space-7) 0 var(--space-6); margin-top: var(--section-gap); color: var(--dim); font-size: 15px; }
footer a { color: var(--dim); text-decoration: none; }
footer a:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.ftop { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-5) var(--space-6); padding-bottom: var(--space-6); border-bottom: 1px solid var(--rule); }
.fbrand { display: grid; gap: var(--space-2); }
.fbrand .brand { font-size: 22px; gap: var(--space-3); min-height: 0; }
.fbrand .brand:hover { text-decoration: none; }
.fbrand .brand img { border-radius: 9px; }
.fbrand p { font: 500 16px/1.35 var(--label); color: var(--text); }
.fcta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.fcta .badge { margin: 0; }
/* Instagram button: a twin of Apple's badge beside it. Same 40px height, black fill, #a6a6a6 hairline (0.875px at 40px, as in
   the badge artwork) and its ~8.4px corner. Label set like the badge: a small line, then the name in system type. The 44px tap
   target is an invisible ::before, so the visible edge lines up with the footer grid. */
.ig { position: relative; display: inline-flex; align-items: center; gap: var(--space-2); height: 40px; padding: 0 var(--space-3) 0 var(--space-2);
  border-radius: 8.4px; background: #000; color: #fff; box-shadow: inset 0 0 0 0.875px #a6a6a6; text-decoration: none; transition: opacity .15s ease-out; }
.ig:hover { color: #fff; text-decoration: none; opacity: .85; }
.ig::before { content: ""; position: absolute; inset: -2px; }
.ig svg { width: 24px; height: 24px; flex: none; }
.ig span { display: grid; font: 500 17px/1 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif; letter-spacing: -.015em; }
.ig small { font: 500 9px/1.1 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif; letter-spacing: .01em; }
.fcols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6) var(--space-5); padding: var(--space-6) 0; }
@media (min-width: 640px) { .fcols { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .fcols { grid-template-columns: repeat(6, minmax(0, 1fr)); padding: var(--space-7) 0; } }
.fcol h2 { font: 700 13px/1.3 var(--label); letter-spacing: 0; color: var(--text); margin-bottom: var(--space-2); }
.fcol ul { list-style: none; padding: 0; }
.fcol a { display: block; padding: 10px 0; line-height: 1.3; overflow-wrap: anywhere; }
@media (min-width: 640px) { .fcol a { padding: 6px 0; } }
.fcol a { text-wrap: pretty; }
:lang(ja) .fcol a { word-break: auto-phrase; } /* Chrome: break Japanese at phrase boundaries, no one-character orphans */
.fbase { display: grid; gap: var(--space-3) var(--space-6); align-items: center; padding-top: var(--space-5); border-top: 1px solid var(--rule); font-size: 13px; }
@media (min-width: 900px) { .fbase { grid-template-columns: 1fr auto; } }
.fbase a { display: inline-flex; align-items: center; min-height: 32px; }
.fcopy { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--space-2); }
.fnote { grid-column: 1 / -1; max-width: 60em; }
.langs { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-4); }
.langs svg { width: 16px; height: 16px; flex: none; }
.langs [aria-current] { display: inline-flex; align-items: center; min-height: 32px; font-weight: 650; color: var(--text); }
/* 320px phones: filter bar and settings panel fit without sideways scroll */
.rcols > * { min-width: 0; }
@media (max-width: 359px) {
  .panel { padding: var(--space-4) var(--space-4); }
}
.compat span a { padding: 3px 0; }

/* ---------- Hero A + frosted nav (Ankit 12:13) ---------- */
/* Hero: the title alone, one calm line on desktop (balanced two lines on phones), room above and below */
.intro .hero { padding: var(--space-7) var(--gutter) var(--space-2); }
.intro .hero h1 { font-size: clamp(34px, 4.2vw, 60px); max-width: none; text-wrap: balance; }
/* One column at every width (the old intro grid put a paragraph on the right); the subline sits under the H1 on the head gap */
.intro .ihead.hero { grid-template-columns: 1fr; row-gap: var(--space-3); }
.intro .hero p { text-align: left; max-width: 44em; padding: 0; font-size: clamp(17px, 1.5vw, 20px); line-height: 1.45; text-wrap: balance; }

/* Frosted nav: translucent, blurred, hairline only once scrolled; near-opaque where backdrop-filter is unsupported */
.top.frost { background: rgb(255 255 255 / .72); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  border-bottom-color: transparent; transition: box-shadow .2s ease-out, border-color .2s ease-out; }
.top.frost.scrolled { border-bottom-color: var(--rule); box-shadow: 0 8px 24px -16px rgb(25 24 22 / .25); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .top.frost { background: rgb(255 255 255 / .97); } }
.top .tools .badge { margin: 0; }
@media (max-width: 759px) { .top .tools .badge { display: none; } } /* phones: search icon only, the nav already wraps */

/* ---------- Footer store group + "Coming this week" dialog ---------- */
dialog.drop { margin: auto; padding: 0; border: 0; border-radius: var(--r-hero); background: var(--bg); color: var(--text); width: min(100vw - 2 * var(--gutter), 400px);
  box-shadow: 0 32px 80px -24px rgb(25 24 22 / .45), 0 0 0 1px var(--rule); }
dialog.drop[open] { animation: drop-in .28s cubic-bezier(.22, 1, .36, 1); }
dialog.drop::backdrop { background: rgb(25 24 22 / .42); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
@keyframes drop-in { from { opacity: 0; transform: translateY(12px) scale(.98); } }
@media (prefers-reduced-motion: reduce) { dialog.drop[open] { animation: none; } }
.drop-in { position: relative; display: grid; justify-items: start; gap: var(--space-3); padding: var(--space-6) var(--space-5) var(--space-5); }
.drop-icon { border-radius: 14px; margin-bottom: var(--space-1); }
.drop h2 { font-size: clamp(26px, 6vw, 32px); letter-spacing: -.035em; }
.drop p { color: var(--dim); line-height: 1.5; text-wrap: pretty; }
.drop .ig { margin-top: var(--space-2); }
.drop-x { position: absolute; top: var(--space-3); right: var(--space-3); width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--bg2); color: var(--text);
  display: grid; place-items: center; cursor: pointer; }
.drop-x:hover { background: var(--raised); }
.drop-x svg { width: 20px; height: 20px; }

/* Heart badge on homepage cards: the app's like pill, top right (film badge and rank stay top left) */
.hb { position: absolute; z-index: 2; top: 8px; right: 8px; display: flex; align-items: center; justify-content: center; gap: 5px; min-width: 28px; min-height: 28px;
  padding: 0 9px; border-radius: 99px; background: rgb(23 23 22 / .72); color: #fff; font: 700 11px/1 var(--label); font-variant-numeric: tabular-nums; }
.hb:not(:has(b)) { padding: 0; }
.hb svg { width: 14px; height: 14px; stroke-width: 2.4; }
.rc-tall .hb, .rc-stack .hb { top: 10px; right: 10px; }
.rc-hero .hb, .rc-pick .hb { top: 12px; right: 12px; }

/* Recipe page: the same heart badge, inline after "Recipe by". Read-only: liking happens in the app (title says so). */
.hb.inline { position: static; display: inline-flex; vertical-align: middle; margin-left: var(--space-2); cursor: default; }

/* Promo strip (src/site/promo.ts): static, one line of ink above the header. No animation. Dismissed = hidden before paint. */
.ostrip { background: var(--ink); color: var(--on-ink); font: 500 14px/20px var(--label); }
.ostrip .wrap { display: flex; align-items: center; gap: var(--space-2); min-height: 40px; padding-top: 6px; padding-bottom: 6px; }
.ostrip p { margin: 0; flex: 1; text-align: center; }
.ostrip a { color: inherit; text-decoration: none; }
.ostrip a:hover .ostrip-cta, .ostrip a:focus-visible .ostrip-cta { text-decoration-thickness: 2px; }
.ostrip a:focus-visible, .ostrip-x:focus-visible { outline: 2px solid var(--on-ink); outline-offset: 2px; border-radius: 4px; }
.ostrip-cta { margin-left: var(--space-2); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.ostrip-x { flex: none; display: grid; place-items: center; width: 32px; height: 32px; margin-right: -6px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; }
.ostrip-x:hover { background: rgba(255, 255, 255, .14); }
.ostrip-off .ostrip { display: none; }
@media (max-width: 560px) { .ostrip-gbp { display: none; } .ostrip { font-size: 13px; } }