/* 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;
  --display: Unbounded, system-ui, sans-serif; --label: Outfit, system-ui, 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%; }
body { background: var(--bg); color: var(--text); font: 450 17px/1.5 Outfit, system-ui, 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; }
.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, system-ui, 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; }
.sb { height: calc(58 * var(--pt)); padding: calc(19 * var(--pt)) calc(46 * var(--pt)) 0; font: 600 calc(17 * var(--pt)) system-ui, sans-serif; position: relative; z-index: 2; }
.scr .cn { position: absolute; width: calc(52 * var(--pt)); height: auto; top: calc(12 * var(--pt)); left: calc(12 * var(--pt)); z-index: 2; }

/* app card: 16pt radius, photo, canister, name over a dark bottom fade */
.rcm { position: relative; overflow: hidden; border-radius: calc(16 * var(--pt)); color: #fff; }
.rcm::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 45%, rgb(12 10 8 / .78)); }
.rcm > b, .rcm > small { position: absolute; z-index: 2; left: calc(16 * var(--pt)); }
.rcm > b { bottom: calc(14 * var(--pt)); right: calc(10 * var(--pt)); font: 800 calc(16 * var(--pt))/1.1 Unbounded, sans-serif; letter-spacing: -.02em; }
.rcm .ht { position: absolute; z-index: 2; right: calc(12 * var(--pt)); top: calc(12 * var(--pt)); width: calc(46 * var(--pt)); aspect-ratio: 1; border-radius: 50%; background: rgb(30 28 26 / .7); }

.dh { display: flex; justify-content: space-between; align-items: center; padding: calc(4 * var(--pt)) calc(20 * var(--pt)) 0; }
.dh b { font: 900 calc(34 * var(--pt)) Unbounded, sans-serif; letter-spacing: -.04em; }
.dh span { background: #C2410C; color: #fff; font-weight: 700; padding: calc(10 * var(--pt)) calc(20 * var(--pt)); border-radius: 99px; }
.srch { margin: calc(16 * var(--pt)) calc(20 * var(--pt)) 0; background: #fff; border-radius: calc(16 * var(--pt)); padding: calc(15 * var(--pt)) calc(18 * var(--pt)); color: #6E6A62; font-size: calc(17 * var(--pt)); }
.tabs2 { display: flex; gap: calc(26 * var(--pt)); margin: calc(18 * var(--pt)) calc(20 * var(--pt)) calc(14 * var(--pt)); font-size: calc(17 * var(--pt)); color: #77726A; border-bottom: 1px solid #E2DCD2; padding-bottom: calc(8 * var(--pt)); }
.tabs2 b { color: #1A1917; text-decoration: underline 3px #E8602E; text-underline-offset: calc(13 * var(--pt)); }
.s-disc .hero { margin: 0 calc(20 * var(--pt)); height: calc(228 * var(--pt)); }
.s-disc .hero > b { bottom: calc(40 * var(--pt)); font-size: calc(28 * var(--pt)); }
.s-disc .hero > small { bottom: calc(16 * var(--pt)); font-size: calc(14 * var(--pt)); opacity: .85; }
.g2 { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: calc(146 * var(--pt)) calc(146 * var(--pt)); gap: calc(14 * var(--pt)); margin: calc(14 * var(--pt)) calc(20 * var(--pt)) 0; }
.g2 .tall { grid-row: 1 / 3; }
.g2 .rcm:not(.tall) > b { font-size: calc(13 * var(--pt)); }

.dhero { position: relative; height: 57%; color: #fff; }
.dhero > img:first-child { position: absolute; inset: 0; object-position: 50% 100%; }
.dhero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgb(0 0 0 / .25), transparent 25% 50%, rgb(14 11 8 / .55) 70%, rgb(14 11 8 / .92)); }
.dhero > * { z-index: 2; }
.dhero > :first-child { z-index: 0; } /* photo or artwork under the fade */
.dhero .bk { position: absolute; left: calc(22 * var(--pt)); top: calc(66 * var(--pt)); width: calc(52 * var(--pt)); height: calc(52 * var(--pt)); border-radius: 50%; background: rgb(255 255 255 / .3); display: grid; place-items: center; font: 400 calc(34 * var(--pt))/1 system-ui; font-style: normal; }
.dhero .cn { top: calc(132 * var(--pt)); left: calc(20 * var(--pt)); }
.dhero > b, .dhero > small { position: absolute; left: calc(22 * var(--pt)); }
.dhero > b { bottom: calc(52 * var(--pt)); font: 800 calc(31 * var(--pt))/1 Unbounded, sans-serif; letter-spacing: -.03em; }
.dhero > small { bottom: calc(22 * var(--pt)); font-size: calc(17 * var(--pt)); }
.dchips { display: grid; grid-template-columns: 1fr 1fr; gap: calc(12 * var(--pt)); margin: calc(18 * var(--pt)) calc(20 * var(--pt)); }
.dchips div { background: #E9E5DE; border-radius: calc(18 * var(--pt)); padding: calc(12 * var(--pt)) calc(16 * var(--pt)); display: grid; }
.dchips .ok { background: #DCE8DE; }
.dchips small { font-size: calc(12 * var(--pt)); letter-spacing: .08em; text-transform: uppercase; color: #6E6A62; }
.dchips b { font: 800 calc(17 * var(--pt)) Unbounded, sans-serif; }
.shd { display: flex; justify-content: space-between; align-items: baseline; margin: 0 calc(20 * var(--pt)); }
.shd b { font: 800 calc(22 * var(--pt)) Unbounded, sans-serif; letter-spacing: -.03em; }
.shd small { color: #6E6A62; }

.ah { display: flex; justify-content: space-between; align-items: center; margin: calc(6 * var(--pt)) calc(20 * var(--pt)) calc(18 * var(--pt)); }
.ah i { font-style: normal; width: calc(48 * var(--pt)); aspect-ratio: 1; border-radius: 50%; background: #fff; display: grid; place-items: center; font-size: calc(26 * var(--pt)); }
.ah span { text-transform: uppercase; font-weight: 700; letter-spacing: .04em; color: #6E6A62; }
.s-apply .wide { margin: 0 calc(20 * var(--pt)); height: calc(250 * var(--pt)); }
.s-apply .wide > b { bottom: calc(46 * var(--pt)); font-size: calc(30 * var(--pt)); }
.s-apply .wide > small { bottom: calc(20 * var(--pt)); font-weight: 600; }
.slot { margin: calc(18 * var(--pt)) calc(20 * var(--pt)); background: #F7DCD3; border-radius: calc(18 * var(--pt)); padding: calc(14 * var(--pt)) calc(20 * var(--pt)); color: #9A3412; display: grid; }
.slot b { font: 800 calc(26 * var(--pt))/1.15 Unbounded, sans-serif; letter-spacing: -.02em; }
.chk { margin: 0 calc(20 * var(--pt)); background: #C2410C; color: #fff; text-align: center; font-weight: 700; font-size: calc(18 * var(--pt)); padding: calc(18 * var(--pt)); border-radius: 99px; }

/* 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, 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; }
.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; }
.ap h1, .ap .sh h2 { font: 900 clamp(40px, 11.6vw, 76px)/.9 var(--display); letter-spacing: -.05em; text-transform: uppercase; }
.ap h1 { font-size: 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; }

/* Filter screen (DiscoverView's filter sheet) */
.fh { display: flex; justify-content: space-between; align-items: center; padding: calc(6 * var(--pt)) calc(20 * var(--pt)) calc(14 * var(--pt)); }
.fh b { font: 900 calc(28 * var(--pt)) Unbounded, sans-serif; letter-spacing: -.04em; }
.fh span { color: #C2410C; font-weight: 700; font-size: calc(17 * var(--pt)); }
.ft { display: flex; justify-content: space-between; align-items: center; margin: 0 calc(20 * var(--pt)); background: #fff; border-radius: calc(16 * var(--pt)); padding: calc(16 * var(--pt)); font-weight: 750; }
.ft i { width: calc(51 * var(--pt)); height: calc(31 * var(--pt)); border-radius: 99px; background: #1F8A7A; position: relative; }
.ft i::after { content: ""; position: absolute; right: calc(2 * var(--pt)); top: calc(2 * var(--pt)); width: calc(27 * var(--pt)); aspect-ratio: 1; border-radius: 50%; background: #fff; }
.fg { margin: calc(20 * var(--pt)) calc(20 * var(--pt)) calc(10 * var(--pt)); font: 800 calc(18 * var(--pt)) Unbounded, sans-serif; letter-spacing: -.02em; }
.fc2 { display: flex; flex-wrap: wrap; gap: calc(8 * var(--pt)); margin: 0 calc(20 * var(--pt)); }
.fc2 span { display: inline-flex; align-items: center; gap: calc(6 * var(--pt)); background: #fff; border: 1px solid #E2DCD2; border-radius: 99px; padding: calc(8 * var(--pt)) calc(14 * var(--pt)); font-size: calc(15 * var(--pt)); font-weight: 600; }
.fc2 img { width: calc(24 * var(--pt)); height: auto; }
.fc2 .on { background: #C2410C; border-color: #C2410C; color: #fff; }

/* 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 { font-size: 112px; }
  .ap .sh h2 { font-size: 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: brand row with the App Store badge, four plain columns, a muted base line */
footer { background: var(--bg2); border-top: 1px solid var(--rule); padding: var(--section-gap) 0 var(--space-6); margin-top: var(--section-gap); color: var(--dim); font-size: 15px; }
footer .wrap { display: grid; gap: var(--space-6); }
.fbrand { display: grid; justify-items: start; gap: var(--space-4); }
.fbrand .brand { font-size: 20px; gap: var(--space-3); }
.fbrand .brand img { border-radius: 9px; }
.fbrand .badge { margin: 0; }
.fsocial { display: flex; align-items: center; gap: var(--space-3); }
/* 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: 1fr 1fr; gap: var(--space-6) var(--space-5); }
@media (min-width: 800px) { .fcols { grid-template-columns: repeat(4, 1fr); } }
footer h2 { font: 650 14px/1.3 var(--label); letter-spacing: 0; color: var(--text); margin-bottom: var(--space-2); }
footer ul { list-style: none; padding: 0; }
footer li a { display: inline-flex; align-items: center; min-height: 40px; }
@media (min-width: 800px) { footer li a { min-height: 34px; } }
footer a { color: var(--dim); text-decoration: none; }
footer a:hover { color: var(--text); text-decoration: underline; }
.fbase { display: flex; flex-wrap: wrap; align-items: center; gap: 2px var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--rule); font-size: 13px; }
.fbase a { display: inline-flex; align-items: center; min-height: 32px; }
.fbase p { flex-basis: 100%; }
.langs { display: inline-flex; align-items: center; white-space: nowrap; }
.langs [aria-current] { font-weight: 600; }
/* 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 ---------- */
/* Stores and Instagram as one matched group under the logo: all 40px, same corner and hairline. */
.fsocial { flex-wrap: wrap; }
.gplay { display: block; border-radius: 8.4px; }
.gplay img { display: block; width: 134px; height: 40px; }
.fbrand .badge { margin: 0; }
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; }