/* 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; --gap: 10px; --m: 20px; --hh: 60px;
}
* { 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: 10px 14px; font-weight: 700; }
.skip:focus { top: 12px; }
.wrap { max-width: 1320px; margin: 0 auto; padding: 0 var(--m); }
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: -4px; }

/* 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: 22px; height: 60px; flex-wrap: wrap; }
.brand { min-height: 44px; color: var(--ink); display: flex; align-items: center; gap: 9px; font: 800 17px var(--display); letter-spacing: -.03em; text-decoration: none; }
.brand img { border-radius: 7px; }
.nav { display: flex; gap: 4px; 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 8px; }
.nav a:hover, .nav a[aria-current] { color: var(--text); }
.top .tools { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.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: 12px var(--m) 14px; }
.hsearch .wrap { display: flex; gap: 8px; 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 14px; }
/* 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: 10px; border-radius: 7px; }
.badge img { width: 120px; height: 40px; }
.badge.lg { margin: 13px; 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: 8px; height: 48px; padding: 0 22px; border-radius: 999px; 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 8px; }
  .top .brand { margin-right: auto; }
  .nav { margin-right: -8px; }
  .nav a { padding: 0 7px; }
  .top.full { --hh: 104px; }
  .top.full .wrap { height: auto; padding-top: 8px; }
  .top.full .tools { height: 44px; }
  .top.full .nav { order: 3; width: 100%; margin: 0 -8px; }
}
@media (max-width: 359px) { .top .brand { font-size: 0; gap: 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: 6px; align-items: center; }
.can { width: clamp(34px, 16cqw, 46px); height: auto; aspect-ratio: 1; }
.rc-shelf .badges { top: 6px; left: 6px; }
.rc-shelf .can, .rc-tall .can, .rc-stack .can, .rc-hero .can, .rc-pick .can { width: 42px; height: 42px; }
.rc-tall .badges, .rc-stack .badges { top: 10px; left: 10px; }
.rc-hero .badges, .rc-pick .badges { top: 12px; left: 12px; }
.ord { font: 700 12px/22px var(--label); padding: 0 7px; border-radius: 99px; background: rgb(23 23 22 / .72); }
.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); }

/* Placeholder artwork, drawn like the app's RecipeArtwork + RecipeCoverRules. */
.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)); }
.art::before { content: ""; position: absolute; inset: 0;
  --s: max(6.4px, calc((100cqw + 100cqh) / 33.94)); /* app: max(9, (w+h)/24) along x, so /√2 across the 45° rule */
  background: repeating-linear-gradient(45deg,
    rgb(255 255 255 / .22) 0 2.5px, transparent 0 var(--s),
    rgb(255 255 255 / .09) 0 calc(var(--s) + 1px), transparent 0 calc(var(--s) * 2),
    rgb(255 255 255 / .09) 0 calc(var(--s) * 2 + 1px), transparent 0 calc(var(--s) * 3),
    rgb(255 255 255 / .09) 0 calc(var(--s) * 3 + 1px), transparent 0 calc(var(--s) * 4)); }
img.art { width: 100%; height: 100%; object-fit: cover; }
img.art::before { content: none; }
.eg { position: absolute; z-index: 3; top: 12px; right: 12px; font: 600 11px/28px var(--label); letter-spacing: .03em; color: #fff;
  padding: 0 10px; border-radius: 99px; background: rgb(23 23 22 / .72); }

/* ---------- Sections ---------- */
section { padding: 56px 0; }
.sh { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
.sh h2 { font-size: clamp(24px, 3.2vw, 34px); }
.sh .more { margin-left: auto; }

/* Intro + Discover mosaic */
.intro { padding: 30px 0 0; }
.intro .ihead { display: grid; gap: 10px 40px; 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: 22px; border-bottom: 1px solid var(--rule); margin: 30px 0 14px; }
.tabs a { position: relative; text-decoration: none; font-size: 15px; font-weight: 500; color: var(--dim); padding: 8px 0 10px; }
.tabs a[aria-current] { color: var(--text); font-weight: 700; }
.tabs a[aria-current]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--accent); }
.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: 8px; }
  .mosaic { grid-template-columns: 2.2fr 1fr 1fr; grid-template-rows: 268px 268px; gap: 14px; }
  .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: 14px; 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) 6px; 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: 14px; }
}
.dated { display: grid; gap: 8px; }
.dated time { padding-left: 4px; }

/* Browse by film: the app's canisters */
.films { display: grid; grid-auto-flow: column; grid-auto-columns: 112px; gap: 8px; overflow-x: auto; margin: 0 calc(var(--m) * -1); padding: 0 var(--m) 4px; scrollbar-width: none; list-style: none; }
.films a { display: grid; justify-items: center; gap: 6px; padding: 14px 6px 12px; 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. */
.app { position: relative; z-index: 1; overflow-x: clip; background: #F1E9DD; color: var(--ink); padding: 30px 0 0; border-block: 1px solid #E4D8C6; }
.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); padding-bottom: 22px; margin-top: -4px; }
.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: aluminium unibody in Cosmic Orange, thin black border, 440x956pt screen, Dynamic Island */
.ip { --w: 236px; width: var(--w); padding: calc(var(--w) * .022); border-radius: calc(var(--w) * .164);
  background: linear-gradient(140deg, #F39250 0%, #E8742A 22%, #D9631F 55%, #C8561C 80%, #E07A3A 100%);
  box-shadow: inset 0 0 0 1px rgb(255 212 170 / .6), inset 0 0 0 2.5px rgb(140 50 8 / .25),
    0 46px 50px -30px rgb(74 34 8 / .5), 0 14px 22px -12px rgb(74 34 8 / .35); }
.ip::before, .ip::after { content: ""; position: absolute; width: 3px; border-radius: 2px; }
.ip::before { right: -2.5px; top: 25%; height: 36%; /* side button, Camera Control */
  background: linear-gradient(#D25E1E 0 36%, transparent 36% 74%, #D25E1E 74%); }
.ip::after { left: -2.5px; top: 17%; height: 30%; /* Action button, volume up, volume down */
  background: linear-gradient(#D25E1E 0 16%, transparent 16% 30%, #D25E1E 30% 60%, transparent 60% 68%, #D25E1E 68%); }
.bz { container-type: inline-size; background: #0B0B0C; padding: calc(var(--w) * .03); border-radius: calc(var(--w) * .142); }
.scr { position: relative; overflow: hidden; aspect-ratio: 440 / 956; border-radius: calc(var(--w) * .112);
  --pt: calc(100cqw / 440); background: #F7F2E9; color: #1A1917; font: 500 calc(15 * var(--pt))/1.25 Outfit, sans-serif; }
.scr::after { content: ""; position: absolute; left: 50%; top: calc(11 * var(--pt)); width: calc(126 * var(--pt)); height: calc(37 * var(--pt));
  translate: -50% 0; border-radius: 99px; background: #000; z-index: 9; }
.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; }
}

/* Guides + rumours */
.reads .wrap { display: grid; gap: 44px; }
.guide { display: block; text-decoration: none; }
.guide .rc { aspect-ratio: 16 / 9; max-height: 320px; width: 100%; }
.guide .nm { -webkit-line-clamp: 3; font-size: clamp(22px, 5.6cqw, 34px); }
.glist { list-style: none; padding: 0; margin-top: 8px; }
.glist li { border-bottom: 1px solid var(--rule); }
.glist a { display: grid; gap: 2px; padding: 14px 0; text-decoration: none; }
.glist b { font-weight: 650; font-size: 17px; line-height: 1.3; }
.glist a:hover b { text-decoration: underline; }
.guides { max-width: 760px; }
.rlist { list-style: none; padding: 0; border-top: 1px solid var(--ink); }
.rlist li { display: grid; grid-template-columns: 80px 1fr; gap: 4px 14px; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.rlist a { font-weight: 600; text-decoration: none; padding: 9px 0; margin: -9px 0; } /* 44px hit area, same layout */
.rlist a:hover { text-decoration: underline; }
.rlist .rate { grid-column: 2; }
@media (min-width: 900px) { .reads .wrap { grid-template-columns: 1.1fr 1fr; gap: 60px; } }
/* Guides alone (rumours off): the cover and the list side by side instead of one half-empty column */
@media (min-width: 900px) { .reads .wrap:has(> .solo) { grid-template-columns: 1fr; } .solo { display: grid; grid-template-columns: 1.1fr 1fr; gap: 0 60px; align-items: start; } .solo > .sh { grid-column: 1 / -1; } .solo .glist { margin-top: 0; } }

footer { border-top: 1px solid var(--rule); padding: 36px 0 48px; color: var(--dim); font-size: 14px; }
footer .wrap { display: grid; gap: 14px; }
footer nav { display: flex; flex-wrap: wrap; margin-left: -9px; }
footer nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 9px; }
footer a { text-decoration: none; }
footer a:hover { color: var(--text); }

/* ---------- Recipes page ---------- */
.lhead { padding: 34px 0 6px; }
.lhead .wrap { display: flex; align-items: end; gap: 16px; flex-wrap: wrap; }
.lhead h1 { font-size: clamp(30px, 5vw, 56px); }
@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: 12px 0 10px; border-bottom: 1px solid var(--rule); }
.fbar .wrap { display: grid; gap: 10px; }
.fline { display: flex; align-items: center; gap: 10px; }
.seg { display: flex; padding: 3px; border-radius: 999px; 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 14px; line-height: 34px; border-radius: 999px; 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 16px; border-radius: 999px; border: 1px solid var(--line); background: none; font-weight: 600; cursor: pointer; display: flex; gap: 8px; 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: 8px; 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: 6px; height: 40px; padding: 0 14px 0 6px; border-radius: 999px; 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: 14px; }
.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: 6px; }
#active:empty { display: none; }
#active button { height: 32px; padding: 0 12px; border-radius: 999px; 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: 14px; }
.sheet label, .sheet legend { display: grid; gap: 4px; 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 12px; font: 500 15px Outfit; color: var(--text); }
.sheet fieldset { border: 0; padding: 0; }
.sheet fieldset .seg { margin-top: 4px; 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: 10px 20px 24px; 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: 10px; }
  .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: 14px; } }
.results { padding: 20px 0 64px; }
.empty { padding: 40px 0; display: grid; gap: 12px; justify-items: start; }
.empty h2 { font-size: 24px; }

/* ---------- Recipe page ---------- */
.crumbs { padding: 16px 0; font-size: 14px; color: var(--dim); }
.crumbs ol { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.crumbs li + li::before { content: "/"; margin-right: 6px; 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: 8px var(--m) 0; font: 500 12px var(--label); color: var(--dim); }
.pg { position: absolute; z-index: 3; right: 12px; top: calc(125vw - 40px); font: 700 12px/26px var(--label); padding: 0 9px; border-radius: 99px; background: rgb(0 0 0 / .7); color: #fff; }
.rtitle { display: grid; gap: 12px; padding: 22px 0 8px; }
.rtitle .can { width: 52px; height: 52px; }
.rtitle h1 { font-size: clamp(34px, 6vw, 76px); }
.rtitle .sub { font-size: 19px; color: var(--dim); max-width: 32em; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tags a { font-size: 14px; padding: 4px 12px; border-radius: 99px; border: 1px solid var(--line); text-decoration: none; }
.tags a:hover { background: var(--bg2); }
.rcols { display: grid; gap: 28px; padding: 18px 0 40px; }
.panel { background: var(--paper); color: var(--ink); border-radius: var(--r-hero); padding: 20px; border: 1px solid var(--rule); }
.phead { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.phead h2 { font-size: 20px; white-space: nowrap; }
.phead .meta { color: var(--soft); }
.phead button { margin-left: auto; height: 38px; padding: 0 16px; border-radius: 99px; border: 1px solid var(--ink); background: none; font-weight: 650; cursor: pointer; color: var(--ink); }
.sets div { display: flex; justify-content: space-between; gap: 16px; padding: 11px 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: 10px; }
.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; }
.lk { display: inline-flex; align-items: center; gap: 4px; font: 600 12px/1 Outfit; color: rgb(255 255 255 / .85); font-variant-numeric: tabular-nums; }
.lk svg { width: 13px; height: 13px; }
.rtitle .lk { font-size: 14px; color: var(--soft); }
.rtitle .lk 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: 10px; padding: 18px; border-radius: var(--r-card); background: var(--surface); display: grid; gap: 14px; }
.cta p { color: var(--soft); font-size: 15px; }
.cta .getrow { gap: 12px; }
.cta .btn { background: var(--accent-ink); color: #fff; }
.qrrow { display: none; align-items: center; gap: 12px; font-size: 14px; color: var(--soft); }
.side { display: grid; gap: 30px; align-content: start; }
.side h2 { font-size: 22px; margin-bottom: 10px; }
.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: 12px; padding: 10px 0; border-bottom: 1px solid var(--rule); font-size: 15px; }
.compat li span { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.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: 14px; 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: 8px 2px 0; }
  .pg { top: 12px; right: auto; left: 12px; }
  .shot .eg { top: 12px; }
  .rtitle { grid-template-columns: auto 1fr; align-items: center; column-gap: 18px; padding-top: 30px; }
  .rtitle .sub, .rtitle .tags, .rtitle .lk { grid-column: 2; }
  .rcols { grid-template-columns: 1fr minmax(380px, 460px); gap: 56px; }
  .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 ---------- */
.ahead { padding: 10px 0 0; }
.ahead .rc { height: min(62vh, 560px); border-radius: var(--r-hero); }
.ahead .txt { left: clamp(16px, 4vw, 44px); right: clamp(16px, 4vw, 44px); bottom: clamp(18px, 4vw, 44px); gap: 10px; }
.ahead .nm { font-size: clamp(36px, 8cqw, 96px); -webkit-line-clamp: 3; }
.ahead .sim { font-size: 17px; white-space: normal; max-width: 34em; }
.byline { padding: 14px 0 0; }
.reading { background: var(--paper); color: var(--ink); margin-top: 36px; padding: 48px 0 64px; border-top: 1px solid var(--rule); }
.col { max-width: 720px; margin: 0 auto; padding: 0 var(--m); font-size: 19px; line-height: 1.6; }
.col > p { margin-bottom: 20px; }
.toc ol { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; list-style: none; counter-reset: t; margin: 6px 0 36px; }
.toc li { counter-increment: t; }
.toc a { display: block; font-size: 15px; font-weight: 600; padding: 6px 14px; border-radius: 99px; background: var(--surface); text-decoration: none; }
.toc a::before { content: counter(t) "  "; color: var(--accent-ink); font-family: var(--label); }
.pick { padding: 26px 0 30px; border-top: 1px solid var(--hair); display: grid; gap: 14px; }
.rc-pick { aspect-ratio: 16 / 10; border-radius: var(--r-hero); }
.rc-pick .nm { font-size: clamp(26px, 6cqw, 40px); }
.pick h2 { font-size: 15px; font-family: var(--label); letter-spacing: 0; color: var(--soft); font-weight: 600; }
.pickmeta { display: flex; flex-wrap: wrap; gap: 6px; }
.pickmeta span { font: 500 13px/28px var(--label); padding: 0 10px; border-radius: 8px; background: var(--surface); }
.reading .more { color: var(--accent-ink); }
.inline-app { display: grid; grid-template-columns: 56px 1fr; gap: 6px 16px; align-items: center; padding: 18px 18px 8px; border-radius: var(--r-card); background: var(--bg2); border: 1px solid var(--rule); margin: 6px 0 10px; font-size: 16px; }
.inline-app > img { border-radius: 12px; }
.inline-app a { color: var(--accent-ink); font-weight: 700; }
.inline-app .badge { grid-column: 2; justify-self: start; margin: 0 0 10px; }
.alsogrid { padding: 50px 0 64px; }

@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 10px; font-size: 13px; }
  #fbtn { padding: 0 12px; }
  .fline { gap: 8px; }
}

/* ---------- Production additions (not in the draft) ---------- */
.badge.lg { min-height: 48px; }
.qr { width: 88px; height: 88px; background: #fff; padding: 4px; 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: 28px 24px; display: grid; gap: 12px; 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: 6px; }
.credit a { color: var(--ink); }
.panel .report { font-size: 13px; color: var(--soft); margin-top: 12px; }
.panel .report a { color: var(--soft); }
[data-copy][hidden] { display: none; }

/* Film and camera pages */
.phead2 { padding: 30px 0 10px; display: grid; gap: 10px; }
.phead2 .can { width: 64px; height: 64px; }
.phead2 h1 { font-size: clamp(34px, 6vw, 72px); }
.phead2 p { color: var(--dim); max-width: 36em; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; }
.chips a { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; min-height: 44px; padding: 4px 14px; border-radius: 99px; border: 1px solid var(--line); text-decoration: none; }
.chips a:hover { background: var(--bg2); }
.chips img, .chips .can { width: 30px; height: 30px; }
.chips a:has(img) { padding-left: 8px; }

/* Paper reading band: legal pages, guides index, rumour articles */
.paperband { background: var(--paper); color: var(--ink); padding: 40px 0 64px; 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: 6px 0 22px; }
.prose h2 { font-size: 22px; margin: 34px 0 10px; }
.prose p, .prose ul { margin-bottom: 16px; }
.prose ul { padding-left: 22px; }
.prose li { margin-bottom: 6px; }
.prose a { color: var(--accent-ink); }
.prose code { font: 500 15px var(--label); background: var(--surface); padding: 1px 6px; border-radius: 6px; }
.prose .meta, .paperband .meta { color: var(--soft); }
.col h2 { font-size: 24px; margin: 32px 0 12px; }
.col a { color: var(--accent-ink); }

/* Guides index */

/* Rumours */
.rhead { padding: 30px 0 16px; display: grid; gap: 14px; max-width: 900px; }
.rhead h1 { font-size: clamp(30px, 5vw, 60px); }
.rmeta { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; }
.status { display: inline-flex; align-items: center; gap: 8px; font: 700 13px/30px var(--label); padding: 0 12px; 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: 10px var(--m); text-align: center; font-size: 15px; }
.prose .sources { list-style: none; padding: 0; border-top: 1px solid var(--hair); margin-bottom: 18px; }
.sources li { padding: 10px 0; border-bottom: 1px solid var(--hair); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; }
.scale { background: var(--surface); border-radius: var(--r-card); padding: 16px 18px; font-size: 15px; }
.scale dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin-top: 8px; }
.scale dt { font-weight: 700; }
.rlist .rate { display: flex; gap: 8px; align-items: center; }
.rlist .status { line-height: 24px; font-size: 11px; padding: 0 9px; }

/* App page */
.feats { list-style: none; padding: 0; display: grid; gap: 14px; 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: 18px; }
.feats b { display: block; font: 800 17px/1.2 var(--display); margin-bottom: 6px; }
.feats span { color: var(--dim); font-size: 16px; }

.notfound { padding-top: 60px; padding-bottom: 80px; display: grid; gap: 16px; justify-items: start; }
.notfound h1 { font-size: clamp(36px, 6vw, 64px); }
.notfound p { color: var(--dim); max-width: 32em; }
.soon { padding: 6px var(--m) 72px; display: grid; gap: 12px; justify-items: start; }
.soon p { color: var(--dim); }
.cams { padding: 8px 0 56px; }
.cams section { padding: 14px 0; }
.cams h2.meta, .phead2 h2.meta { font: 600 13px var(--label); letter-spacing: .06em; text-transform: uppercase; color: var(--dim); margin-bottom: 10px; }
.getrow.end { margin-top: 24px; }

/* ---------- 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: 10px; padding-top: 36px; }
.hubmore h2.sh { margin: 18px 0 2px; font-size: 20px; }
.hubs, .faq { padding: 44px 0 0; }
.hubrow { display: grid; gap: 6px; margin-bottom: 14px; }
.hubrow h3.meta { font: 600 13px var(--label); letter-spacing: .06em; text-transform: uppercase; }
.faq .wrap { max-width: 760px; margin-left: 0; }
.faq h3 { font: 650 18px/1.3 var(--label); letter-spacing: 0; margin: 18px 0 4px; }
.faq p { color: var(--dim); }
.faq a { color: var(--accent-ink); }
.faq:last-child { padding-bottom: 56px; }
.hublinks { margin-top: 8px; }
.col ol { padding-left: 1.3em; margin-bottom: 20px; }
.col li { margin-bottom: 6px; }
.tablewrap { overflow-x: auto; margin: 4px 0 20px; }
.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: 10px 12px 10px 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; }
.fhubs { display: flex; flex-wrap: wrap; margin-left: -9px; }
.fhubs a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 9px; }