/* citus.studio/camera - Variant D "Type-led"
   Typography is the structure. Nohemi Black H2s, huge, uppercase, tightly tracked,
   sitting on a hairline that runs the full content width of their section. Nohemi
   Light H3s. Nohemi Regular body. Photographs are precise and small: never wider
   than 720px on desktop, always framed 4:5 or 5:4 with a 1px --line border and a
   small Nohemi Light caption. Film boxes are typographic tiles: the look name huge
   in Nohemi Black filling the tile, the photograph behind at 40% opacity, the pack
   name small underneath. Yellow appears in exactly three places: the waitlist pill
   (from base.css), the active chip, and the six Film Stock tiles' top rule. Ground
   #050506 throughout, no light section anywhere.

   Desktop scheme (own design, same discipline as A1/A2/A3): a "composed reading
   column". Text-forward sections (pair copy, highlights, recipe, FAQ,
   footer) sit in a disciplined 900px column, a comfortable measure for
   Nohemi Regular body copy under a headline that is deliberately much wider than
   the words need, so the type itself carries the page's presence. The two
   image-dense sections (looks, photographs) widen to a 1320px canvas so their
   horizontal rows and masonry have real room, with arrow controls revealed at
   desktop widths. Nothing is the phone layout stretched: every section composes
   its own grid at >=860px. */

/* ---------- Base overrides: base.css sets uppercase everywhere by default. D
   keeps that only for H2s, chips, nav and buttons; reading copy is sentence case. */
h3, p, li, dd, dt, figcaption, .recipe-lines, .pack, .measured, .credit,
.definition, .placeholder-note, .pending, .done-line, .answer {
  text-transform: none;
  letter-spacing: .01em;
}

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.main { position: relative; z-index: 2; }

/* ---------- Hero definition paragraph ---------- */
.definition {
  margin-top: 10px; font-size: 13px; line-height: 1.5; color: var(--dim);
  max-width: 32ch; text-align: center;
}

/* ---------- Stage: 88svh with a floor on very short viewports (S0) ---------- */
.stage { height: max(88svh, 560px); min-height: 0; overflow: hidden; }

/* ---------- Vertical rhythm ---------- */
:root { --content: 900px; --content-wide: 1320px; --rhythm: 80px; }
.section { margin-top: var(--rhythm); padding: 0 20px; max-width: var(--content); margin-left: auto; margin-right: auto; }
.section.wide { max-width: var(--content-wide); }
#pair.section { margin-top: 0; padding-top: 0; }
footer#footer.section { margin-top: var(--rhythm); padding-bottom: 70px; max-width: var(--content); }
@media (min-width: 860px) {
  :root { --rhythm: 140px; }
  .section { padding: 0 40px; }
}
@media (max-width: 390px) {
  .section { padding: 0 16px; }
}

/* ---------- Headings: type is the structure ---------- */
h2.h2 {
  display: block; width: 100%;
  font-family: "Nohemi", sans-serif; font-weight: 900;
  font-size: clamp(30px, 9.5vw, 44px); line-height: .94;
  letter-spacing: -.01em; color: var(--bright);
  text-transform: uppercase;
  padding-bottom: 18px; margin-bottom: 20px;
  border-bottom: 1px solid var(--line);
}
h3.h3 {
  font-family: "Nohemi", sans-serif; font-weight: 300;
  font-size: 18px; line-height: 1.35; letter-spacing: .01em;
  color: var(--dim); margin-bottom: 30px; max-width: 46ch;
}
p, li, .answer { font-family: "Nohemi", sans-serif; font-weight: 400; font-size: 16px; line-height: 1.6; }
@media (min-width: 860px) {
  h2.h2 { font-size: clamp(56px, 7.2vw, 104px); letter-spacing: -.02em; padding-bottom: 26px; margin-bottom: 34px; }
  h3.h3 { font-size: 22px; margin-bottom: 40px; }
}

/* ---------- Placeholder labels ---------- */
.placeholder-note {
  display: block; font-size: 11px; font-weight: 400; color: var(--faint);
  letter-spacing: .06em; margin-top: 8px;
}
.placeholder-note b { color: var(--faint); font-weight: 700; }

/* ---------- Hamburger + menu sheet ---------- */
.menu-btn {
  position: fixed; top: 22px; right: 16px; z-index: 91;
  width: 54px; height: 54px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--pill); background: var(--glass);
  -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid var(--line); color: var(--bright);
}
.menu-btn:hover { background: var(--glass-hi); }
.menu-btn svg { width: 18px; height: 18px; }
@media (max-width: 640px) { .menu-btn { top: 14px; right: 12px; width: 48px; height: 48px; } }

.menu-sheet {
  position: fixed; inset: 0; z-index: 220; display: none;
  background: rgba(5,5,6,.95);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.menu-sheet.open { display: block; }
.menu-sheet .sheet-inner {
  position: relative; height: 100%; overflow-y: auto;
  padding: 100px 28px 60px; max-width: 560px; margin: 0 auto;
}
.menu-sheet .close {
  position: fixed; top: 22px; right: 16px; z-index: 221;
  width: 54px; height: 54px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--pill); background: var(--glass); border: 1px solid var(--line); color: var(--bright);
}
@media (max-width: 640px) { .menu-sheet .close { top: 14px; right: 12px; width: 48px; height: 48px; } }
.menu-sheet nav { display: flex; flex-direction: column; gap: 0; }
.menu-sheet nav a {
  display: block; padding: 18px 4px; font-family: "Nohemi", sans-serif;
  font-weight: 900; font-size: 26px; letter-spacing: -.01em; text-transform: uppercase;
  color: var(--bright); border-bottom: 1px solid var(--line);
}
.menu-sheet nav a:hover { color: var(--accent); }
.menu-sheet .group + .group { margin-top: 30px; }
.menu-sheet .group.small a { font-size: 15px; font-weight: 400; text-transform: none; color: var(--dim); padding: 13px 4px; }
.menu-sheet .pause-wrap { margin-top: 32px; }

/* ---------- Pause motion button ---------- */
.pause-motion {
  display: inline-flex; align-items: center; height: 44px; padding: 0 20px;
  border-radius: var(--pill); background: var(--glass); border: 1px solid var(--line);
  color: var(--bright); font-family: "Nohemi", sans-serif; font-weight: 400; font-size: 13px;
  text-transform: uppercase; letter-spacing: .06em;
}
.pause-motion:hover { background: var(--glass-hi); }
.pause-motion[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }

/* ---------- Laurels (empty, for later) ---------- */
.laurels { display: none; }

/* ---------- Pair section: side by side at every width (S2/S3) ---------- */
.pair-figure { margin: 0; }
.pair-images { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.pair-half { position: relative; overflow: hidden; background: #0a0a0b; aspect-ratio: 4 / 5; border: 1px solid var(--line); }
.pair-half img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pair-tag {
  position: absolute; left: 8px; bottom: 8px; z-index: 2;
  font-family: "Nohemi", sans-serif; font-size: 9px; letter-spacing: .08em; font-weight: 400;
  color: var(--bright); background: rgba(0,0,0,.6); padding: 4px 8px;
}
figcaption.pair-caption { margin-top: 10px; font-size: 13px; line-height: 1.4; color: var(--text); max-width: 60ch; }
.credit { margin-top: 4px; font-size: 11px; color: var(--faint); }
#pair .pair-head { margin-top: 20px; margin-bottom: 0; }
#pair h2.h2 { font-size: clamp(22px, 6.5vw, 32px); padding-bottom: 8px; margin-bottom: 4px; }
#pair h3.h3 { margin-bottom: 0; font-size: clamp(13px, 3.2vw, 16px); }
#pair .lede { margin-top: 10px; font-size: 15px; line-height: 1.55; color: rgba(242,237,228,.82); max-width: 60ch; }
@media (max-width: 640px) {
  /* S2: the whole pair section, top edge to end of paragraph, stays under 560px */
  figcaption.pair-caption { margin-top: 8px; font-size: 12.5px; }
  .credit { margin-top: 3px; font-size: 10px; }
  .placeholder-note { margin-top: 4px; }
  #pair .pair-head { margin-top: 14px; }
  #pair h2.h2 { font-size: 17px; padding-bottom: 5px; margin-bottom: 3px; border-bottom-color: var(--line); }
  #pair h3.h3 { font-size: 11px; margin-bottom: 0; }
  #pair .lede { margin-top: 7px; font-size: 13px; line-height: 1.42; }
}
@media (min-width: 860px) {
  .pair-images { gap: 8px; max-width: 700px; }
  #pair h2.h2 { font-size: clamp(28px, 3.4vw, 40px); }
}

/* ---------- Highlights: band capped 200px on phones (S3) ---------- */
.highlights-body { display: flex; flex-direction: column; gap: 30px; }
.facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 30px; }
.fact .num { font-family: "Nohemi", sans-serif; font-weight: 900; font-size: clamp(30px, 9vw, 40px); color: var(--bright); line-height: 1; }
.fact .lbl { margin-top: 6px; font-size: 11.5px; color: var(--dim); max-width: 20ch; }
.highlights-list { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.highlights-list li { font-size: 14.5px; color: var(--text); position: relative; padding-left: 16px; }
.highlights-list li::before { content: ""; position: absolute; left: 0; top: 8px; width: 4px; height: 4px; border-radius: 50%; background: var(--faint); }
.highlights-photo { position: relative; }
.highlights-photo img { width: 100%; height: 200px; object-fit: cover; display: block; border: 1px solid var(--line); }
.highlights-photo .placeholder-note { margin-top: 6px; }
@media (min-width: 860px) {
  .highlights-body { flex-direction: row; align-items: flex-start; gap: 50px; }
  .highlights-text { flex: 1; min-width: 0; }
  .facts { gap: 30px; }
  .fact .num { font-size: 48px; }
  .highlights-photo { flex: none; width: 300px; }
  .highlights-photo img { height: auto; aspect-ratio: 4 / 5; }
}

/* ---------- Photographs (masonry) ---------- */
#photographs { content-visibility: auto; contain-intrinsic-size: auto 4000px; }
.masonry { columns: 2; column-gap: 6px; }
.masonry figure { break-inside: avoid; margin-bottom: 6px; border: 1px solid var(--line); border-radius: 0; box-shadow: none; }
.masonry figure img { width: 100%; height: auto; filter: none; }
.masonry figure:hover img { filter: none; transform: none; }
.masonry figcaption { font-family: "Nohemi", sans-serif; font-weight: 300; text-transform: uppercase; }
@media (min-width: 640px) { .masonry { columns: 3; } }
@media (min-width: 900px) { .masonry { columns: 4; column-gap: 8px; } .masonry figure { margin-bottom: 8px; } }
@media (min-width: 1240px) { .masonry { columns: 5; } }

/* ---------- FAQ (section #questions) ---------- */
.faq-list { max-width: 720px; }
.faq-list details { border-bottom: 1px solid var(--line); padding: 18px 0; }
.faq-list summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary h3 { font-family: "Nohemi", sans-serif; font-weight: 400; font-size: 17px; color: var(--bright); margin: 0; }
.faq-list summary .plus { font-size: 20px; color: var(--dim); flex: none; }
.faq-list details[open] summary .plus { transform: rotate(45deg); }
.faq-list .answer { margin-top: 12px; font-size: 14.5px; line-height: 1.65; color: rgba(242,237,228,.78); max-width: 64ch; }

/* ---------- Footer ---------- */
.footer-links { display: flex; flex-wrap: wrap; gap: 8px 10px; margin-bottom: 22px; }
.footer-links a {
  display: inline-flex; align-items: center; height: 34px; padding: 0 14px;
  border: 1px solid var(--line); font-family: "Nohemi", sans-serif; font-size: 12px; color: var(--dim);
}
.footer-links a:hover { color: var(--bright); border-color: rgba(255,255,255,.3); }
.footer-contact { display: flex; gap: 18px; flex-wrap: wrap; margin-bottom: 16px; }
.footer-contact p { font-size: 13px; color: var(--text); text-transform: none; letter-spacing: .01em; }
.footer-made, .footer-updated { font-size: 12px; color: var(--faint); margin-bottom: 4px; }
.footer-pause { margin-top: 22px; }
.appstore { display: none; }

/* S5 (round 2): cookie note is static in the footer, not a fixed bubble. Cancel
   every fixed-positioning value base.css gives .cookie, keep colour/radius/glass. */
.cookie {
  position: static; left: auto; bottom: auto; transform: none; z-index: auto;
  width: auto; max-width: 460px; margin: 26px 0 0; flex-wrap: wrap;
}
.cookie.hide { transform: none; }
@media (max-width: 640px) { .cookie { width: 100%; max-width: none; } }

/* ---------- Utility ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* faint grey lifted to pass 4.5:1 on black (matches the fix already applied to A) */
:root { --faint: #8b8680; }

/* Fable fix 28 Sep: anchors land under the fixed top bar without this */
section[id], footer[id], details[id] { scroll-margin-top: 96px; }

/* Step 1 (Leon, 28 Sep): shorter definition, larger; larger tagline */
.stage .sub { font-size: clamp(16px, 4.3vw, 19px); letter-spacing: .04em; margin-top: 18px; color: var(--text); white-space: normal; }
.stage .definition { font-size: 16px; line-height: 1.45; max-width: 30ch; margin-top: 14px; color: var(--dim); }
@media (min-width: 900px) {
  .stage .sub { font-size: clamp(20px, 1.7vw, 25px); letter-spacing: .03em; margin-top: 24px; }
  .stage .definition { font-size: 19px; line-height: 1.45; max-width: 34ch; margin-top: 16px; }
}

/* Step 2 (Leon, 29 Sep): the first page is a showcase; no labels, no credits; bigger headings; page two sits lower */
#pair .showcase { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 0; }
#pair .show { aspect-ratio: 4 / 5; overflow: hidden; background: #0a0a0b; border: 1px solid var(--line); }
#pair .show img { width: 100%; height: 100%; object-fit: cover; display: block; }
#pair .show:nth-child(n+3) { display: none; }
#pair .pair-head { margin-top: 26px; }
#pair h2.h2 { font-size: clamp(30px, 8.6vw, 46px); padding-bottom: 10px; margin-bottom: 6px; }
#pair h3.h3 { font-size: clamp(17px, 4.6vw, 24px); margin-bottom: 0; }
#pair .lede { margin-top: 12px; font-size: 16px; line-height: 1.5; }
#looks.section { margin-top: 130px; }
@media (max-width: 640px) {
  #pair .pair-head { margin-top: 24px; }
  #pair h2.h2 { font-size: 30px; padding-bottom: 8px; margin-bottom: 4px; }
  #pair h3.h3 { font-size: 17px; }
  #pair .lede { margin-top: 10px; font-size: 15px; line-height: 1.5; }
}
@media (min-width: 900px) {
  #pair .showcase { grid-template-columns: repeat(4, 1fr); gap: 10px; width: min(1320px, calc(100vw - 48px)); margin-left: 50%; transform: translateX(-50%); }
  #pair .show:nth-child(n+3) { display: block; }
  #pair .pair-head { margin-top: 40px; }
  #pair h2.h2 { font-size: clamp(40px, 4.2vw, 60px); padding-bottom: 12px; }
  #pair h3.h3 { font-size: 24px; }
  #pair .lede { font-size: 18px; line-height: 1.55; }
  #looks.section { margin-top: 230px; }
}

/* Step 3 (Leon, 29 Sep): the four chosen frames; phone shows the two marked .m; text as wide as the image band; second paragraph */
#pair .show { display: none; }
#pair .show.m { display: block; }
#pair .lede-cols { margin-top: 12px; }
#pair .lede-cols .lede { margin-top: 0; }
#pair .lede-cols .lede + .lede { margin-top: 14px; }
@media (min-width: 900px) {
  #pair .show, #pair .show.m { display: block; }
  #pair .pair-head, #pair .lede-cols { width: min(1320px, calc(100vw - 48px)); margin-left: 50%; transform: translateX(-50%); }
  #pair .lede-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; margin-top: 18px; }
  #pair .lede-cols .lede + .lede { margin-top: 0; }
  #pair .lede { max-width: none; }
}

/* Step 4 (Leon, 29 Sep): double the gaps between the frames; text columns follow the image columns */
#pair .showcase { gap: 12px; }
@media (min-width: 900px) {
  #pair .showcase { gap: 20px; }
  #pair .lede-cols { gap: 20px; }
}

/* Step 5 (Leon, 29 Sep): the longer hero text sits one size smaller on phones */
@media (max-width: 640px) { .stage .definition { font-size: 15px; line-height: 1.42; max-width: 34ch; } }

/* Step 6 (Leon, 29 Sep): desktop hero, wider text, bigger title and subtitle; phone hero text justified */
@media (min-width: 900px) {
  .stage h1.title { font-size: clamp(64px, 7.4vw, 118px); }
  .stage .sub { font-size: clamp(24px, 2.1vw, 31px); margin-top: 26px; }
  .stage .definition { max-width: 50ch; font-size: 19px; }
}
@media (max-width: 640px) {
  .stage .definition { text-align: justify; text-align-last: center; hyphens: auto; }
}
@media (max-width: 640px) { .stage .definition { hyphens: manual; text-align-last: auto; } }

/* step 8: the looks page carries two paragraphs, set like the ones on page 1 */
#looks .lede-cols, #recipe .lede-cols { margin-top: 12px; margin-bottom: 34px; }
#looks .lede, #recipe .lede { font-size: 16px; line-height: 1.5; color: rgba(242,237,228,.82); margin: 0; }
#looks .lede + .lede, #recipe .lede + .lede { margin-top: 14px; }
@media (max-width: 640px) {
  #looks .lede, #recipe .lede { font-size: 15px; }
}
@media (min-width: 900px) {
  #looks .lede-cols, #recipe .lede-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; margin-top: 18px; margin-bottom: 48px; }
  #looks .lede + .lede, #recipe .lede + .lede { margin-top: 0; }
  #looks .lede, #recipe .lede { font-size: 18px; line-height: 1.55; max-width: none; }
}

/* step 9: one text band for the whole page, page 1 is the guide */
.section, .section.wide, footer#footer.section { max-width: var(--content); }
@media (min-width: 900px) {
  .section, .section.wide, footer#footer.section { max-width: none; width: min(1320px, calc(100vw - 48px)); padding-left: 0; padding-right: 0; }
  #pair .showcase, #pair .pair-head, #pair .lede-cols { width: 100%; margin-left: 0; transform: none; }
}
@media (min-width: 900px) { #looks .lede-cols, #recipe .lede-cols { gap: 20px; } }

/* step 10 (Leon, 1 Oct, revised): the looks gallery. 12 frames drawn from a pool
   of 43 (page.js), clean by default; hovering, tapping or focusing a frame slides up
   the app's look bubble with the look in yellow and the pack in white.
   No cropping: every tile has its frame's own aspect ratio. page.js packs the 12
   into --lg-cols columns (4 columns of 3 on desktop, 3 of 4 on tablets; phones under 600px
   show 6 frames, 2 columns of 3), keeps
   them in draw order inside each column, and gives each column the width that
   makes every column end on the same line, so the 12 fill a clean rectangle the
   width of the band with no holes. Tiles are placed absolutely from that layout,
   so a rotation swaps frames in place.
   Gaps and borders follow the page 1 showcase (#pair .showcase: 12px phone, 20px
   desktop, 1px --line border, square corners). */
.looks-gallery { --lg-gap: 12px; --lg-cols: 2; }
@media (min-width: 600px) { .looks-gallery { --lg-cols: 3; } }
@media (min-width: 900px) { .looks-gallery { --lg-gap: 20px; --lg-cols: 4; } }
.lg-grid { position: relative; width: 100%; }
.lg-tile {
  position: absolute; margin: 0; overflow: hidden;
  background: #0a0a0b; border: 1px solid var(--line); border-radius: 0;
  -webkit-tap-highlight-color: transparent;
}
.lg-tile img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.lg-tile img.lg-in { opacity: 0; }
.lg-tile img.lg-in.lg-shown { opacity: 1; }
/* during a swap the tile eases to the new frame's shape; the two frames share it */
.lg-grid.lg-swapping .lg-tile img { object-fit: cover; }
@media (prefers-reduced-motion: no-preference) {
  .lg-tile img { transition: opacity 1.4s cubic-bezier(.4, 0, .2, 1); }
  .lg-grid.lg-swapping, .lg-grid.lg-swapping .lg-tile {
    transition: left 1.4s cubic-bezier(.4, 0, .2, 1), top 1.4s cubic-bezier(.4, 0, .2, 1),
      width 1.4s cubic-bezier(.4, 0, .2, 1), height 1.4s cubic-bezier(.4, 0, .2, 1);
  }
}
/* without scripts: plain columns, still uncropped */
.lg-grid.lg-static { columns: var(--lg-cols); column-gap: var(--lg-gap); }
.lg-grid.lg-static .lg-tile { position: relative; break-inside: avoid; margin-bottom: var(--lg-gap); }
.lg-grid.lg-static .lg-tile img { position: static; height: auto; }
@media (max-width: 599px) { .lg-grid.lg-static .lg-tile:nth-child(n+7) { display: none; } }

/* The bubble is the app's own in-photo capsule, copied from SwiftUI:
   shape, fill, hairline and shadow from CloudPreviewBadge and the recipeChip in
   UI/Gallery/LibraryGalleryView.swift (Capsule, .ultraThinMaterial, stroke
   white 0.15 at 0.5pt, shadow black 0.35 radius 8 y 2), height and padding from
   shopFloatingButton in UI/Drawer/BasicDrawerView.swift (30pt tall, 12pt side
   padding, 6pt spacing), type from the look chip in UI/Drawer/FilterStripView.swift
   (system font, bold 9pt, tracking 1.5, capitals). The yellow is SwiftUI
   Color.yellow in dark mode (#FFD60A), which the app uses for every look name;
   the pack is white 0.85 as in the shop bubble label. Motion: the app's
   .move(edge: .bottom) + opacity, spring response 0.4 damping 0.85
   (Theme.overlaySpring), as an ease-out curve; Reduce Motion is a 0.16s fade
   (Theme rmFade). The tile clips it, so it rises out of the frame's lower edge. */
.lg-bubble {
  --lg-app-yellow: #ffd60a;
  position: absolute; left: 0; right: 0; bottom: 12px; z-index: 2;
  margin: 0 auto; width: max-content;
  display: flex; align-items: center; gap: 4px;
  height: 26px; padding: 0 9px; max-width: calc(100% - 12px);
  border-radius: 999px;
  background: rgba(28, 28, 30, .52);
  -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
  border: .5px solid rgba(255, 255, 255, .15);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Helvetica Neue", Arial, sans-serif;
  font-size: 9px; line-height: 1; letter-spacing: .09em; text-transform: uppercase;
  white-space: nowrap; pointer-events: none;
  opacity: 0; transform: translateY(calc(100% + 14px));
}
.lg-bubble .lg-look { color: var(--lg-app-yellow); font-weight: 700; }
.lg-bubble .lg-sep { color: rgba(255, 255, 255, .35); font-weight: 400; }
.lg-bubble .lg-pack { color: rgba(255, 255, 255, .85); font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 900px) {
  .lg-bubble { bottom: 16px; height: 32px; padding: 0 13px; gap: 6px; font-size: 12px; letter-spacing: .14em; max-width: calc(100% - 16px); }
}
@media (prefers-reduced-motion: no-preference) {
  .lg-bubble { transition: transform .42s cubic-bezier(.22, 1, .36, 1), opacity .3s cubic-bezier(.22, 1, .36, 1); }
}
@media (prefers-reduced-motion: reduce) {
  .lg-bubble { transform: none; transition: opacity .16s ease-out; }
}
@media (hover: hover) {
  .lg-tile:hover .lg-bubble { opacity: 1; transform: none; }
}
.lg-tile:focus-visible .lg-bubble,
.lg-tile.open .lg-bubble { opacity: 1; transform: none; }
.lg-tile:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* step 11 (Leon, 2 Oct): the recipe gallery. An auto sliding strip of the frames
   that carry a recipe (page.js), under the two Recipe paragraphs, replacing the
   single photo and its card. Desktop: a filmstrip, every frame the same height,
   widths following each frame's own ratio, so nothing is cropped or letterboxed;
   the height is set so three 3:4 frames fill the band exactly (most of the set is
   3:4, so three show at rest; a square or landscape frame simply takes more width).
   Phone: one frame plus about 15% of the next, every slide the same width, frames
   uncropped and centred in a row as tall as a 3:4 frame. Gaps as the rest of the
   page: 20px desktop, 12px phone. Hover, keyboard focus or a tap slides up a
   small card in the Looks bubble material with the look, the pack and the
   recipe lines. */
.recipe-gallery {
  --rg-gap: 12px;
  --rg-w: calc((100cqw - var(--rg-gap)) / 1.15);
  --rg-h: calc((var(--rg-w) - 2px) * 4 / 3 + 2px);
  container-type: inline-size; position: relative;
}
.rg-viewport { overflow: hidden; touch-action: pan-y; outline-offset: 4px; }
.rg-track {
  list-style: none; margin: 0; padding: 0;
  display: flex; gap: var(--rg-gap); align-items: center;
  will-change: transform;
}
.rg-track.rg-anim { transition: transform .7s cubic-bezier(.65, 0, .35, 1); }
.rg-slide {
  flex: none; width: var(--rg-w); height: var(--rg-h);
  display: flex; align-items: center; justify-content: center;
}
.rg-frame {
  position: relative; margin: 0; overflow: hidden; width: 100%;
  border: 1px solid var(--line); background: #0a0a0b; border-radius: 0;
  -webkit-tap-highlight-color: transparent;
}
.rg-frame img { display: block; width: 100%; height: auto; -webkit-user-drag: none; user-select: none; }
.rg-frame:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
@media (min-width: 900px) {
  .recipe-gallery {
    --rg-gap: 20px;
    --rg-h: calc(((100cqw - 2 * var(--rg-gap)) / 3 - 2px) * 4 / 3 + 2px);
  }
  .rg-slide { width: auto; height: var(--rg-h); }
  .rg-frame { width: auto; height: 100%; }
  .rg-frame img { width: auto; height: 100%; }
}
/* without scripts: the first frames side by side */
.rg-track.rg-static { overflow-x: auto; }

.rg-arrow {
  position: absolute; top: 50%; z-index: 3; width: 40px; height: 40px; margin-top: -20px;
  display: none; align-items: center; justify-content: center;
  border-radius: 50%; border: 1px solid var(--line); color: var(--bright);
  background: rgba(28, 28, 30, .52);
  -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
  font-size: 22px; line-height: 1; letter-spacing: 0;
}
.rg-arrow:hover { background: rgba(48, 48, 52, .62); }
.rg-arrow.prev { left: 12px; }
.rg-arrow.next { right: 12px; }
@media (min-width: 900px) { .rg-arrow { display: inline-flex; } }

/* the recipe card: same material and type as the Looks bubble (step 10) */
.rg-bubble {
  --rg-app-yellow: #ffd60a;
  position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 2;
  max-height: calc(100% - 20px); overflow: hidden;
  padding: 10px 12px 8px; border-radius: 12px;
  background: rgba(28, 28, 30, .6);
  -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
  border: .5px solid rgba(255, 255, 255, .15);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Helvetica Neue", Arial, sans-serif;
  text-align: left; pointer-events: none;
  opacity: 0; transform: translateY(calc(100% + 14px));
}
@media (min-width: 900px) {
  .rg-bubble { left: 14px; right: auto; bottom: 14px; width: max-content; max-width: min(55%, calc(100% - 28px)); max-height: calc(100% - 28px); }
}
.rg-head { display: flex; gap: 5px; align-items: baseline; font-size: 10px; line-height: 1.2; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.rg-head .lg-look { color: var(--rg-app-yellow); font-weight: 700; }
.rg-head .lg-sep { color: rgba(255, 255, 255, .35); }
.rg-head .lg-pack { color: rgba(255, 255, 255, .85); font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.rg-lines {
  margin: 7px 0 0; font-family: inherit; font-size: 10.5px; line-height: 1.5; font-weight: 500;
  color: rgba(255, 255, 255, .88); letter-spacing: .02em; text-transform: none;
  font-variant-numeric: tabular-nums;
}
@media (min-width: 900px) {
  .rg-head { font-size: 11px; letter-spacing: .12em; }
  .rg-lines { font-size: 11px; }
}
@media (prefers-reduced-motion: no-preference) {
  .rg-bubble { transition: transform .42s cubic-bezier(.22, 1, .36, 1), opacity .3s cubic-bezier(.22, 1, .36, 1); }
}
@media (prefers-reduced-motion: reduce) {
  .rg-bubble { transform: none; transition: opacity .16s ease-out; }
}
@media (hover: hover) {
  .rg-frame:hover .rg-bubble { opacity: 1; transform: none; pointer-events: auto; }
}
.rg-frame:focus-visible .rg-bubble,
.rg-frame:has(:focus-visible) .rg-bubble,
.rg-frame.open .rg-bubble,
.rg-viewport:focus-visible .rg-current .rg-bubble { opacity: 1; transform: none; pointer-events: auto; }

/* step 12 (Leon, 2 Oct): Questions is now FAQ and spans the band like the other
   pages. Desktop: two independent stacks of question rows, 20px apart, like the
   paragraph blocks on The Looks and The Recipe, so an open answer in one column
   never moves the other. Phone: one stack. Rows, rules and the plus toggle as before. */
.faq-list { max-width: none; }
.faq-list .answer { max-width: none; }
@media (min-width: 900px) {
  .faq-list { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
}

/* step 13 (Leon, 17 Oct): Before and after, between The Recipe and Photographs.
   Two paragraphs set like The Looks and The Recipe. Five comparison frames, each
   the ProRAW file rendered flat (left) under the Citus frame (right), the Citus
   frame clipped at a hairline the viewer drags (page.js). Frames follow the page:
   1px --line border, square corners, #0a0a0b behind. The line is a white hairline
   with a glass knob; the two labels are small Nohemi capitals on the same glass as
   the menu button. Desktop: two per row, the landscape E100 alone on the last row
   at full width; phones: one per row. Gaps 12px phone, 20px desktop. */
#before-after .lede-cols { margin-top: 12px; margin-bottom: 34px; }
#before-after .lede { font-size: 16px; line-height: 1.5; color: rgba(242,237,228,.82); margin: 0; }
#before-after .lede + .lede { margin-top: 14px; }
@media (max-width: 640px) { #before-after .lede { font-size: 15px; } }
@media (min-width: 900px) {
  #before-after .lede-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 18px; margin-bottom: 48px; }
  #before-after .lede + .lede { margin-top: 0; }
  #before-after .lede { font-size: 18px; line-height: 1.55; max-width: none; }
}

.ba-grid { display: grid; grid-template-columns: 1fr; gap: 28px 12px; }
@media (min-width: 700px) { .ba-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .ba-grid { gap: 36px 20px; } }
.ba { margin: 0; min-width: 0; }
.ba.ba-wide { grid-column: 1 / -1; }

.ba-stage {
  --ba-pos: 50%;
  position: relative; display: block; overflow: hidden;
  aspect-ratio: var(--ba-ar, 3 / 4);
  background: #0a0a0b; border: 1px solid var(--line); border-radius: 0;
  cursor: ew-resize; touch-action: pan-y;
  -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
}
.ba-stage:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ba-stage img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
  pointer-events: none; -webkit-user-drag: none;
}
.ba-stage .ba-after { clip-path: inset(0 0 0 var(--ba-pos)); }
.ba-line { position: absolute; top: 0; bottom: 0; left: var(--ba-pos); width: 0; z-index: 2; pointer-events: none; }
.ba-line::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: -.5px; width: 1px;
  background: rgba(242, 237, 228, .92); box-shadow: 0 0 6px rgba(0, 0, 0, .45);
}
.ba-knob {
  position: absolute; top: 50%; left: 0; width: 42px; height: 42px;
  transform: translate(-50%, -50%);
  display: flex; align-items: center; justify-content: center; gap: 6px;
  border-radius: var(--pill); color: var(--bright);
  background: rgba(28, 28, 30, .52);
  -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
  border: .5px solid rgba(255, 255, 255, .2);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
  font-size: 18px; line-height: 1; letter-spacing: 0;
}
.ba-stage.ba-dragging .ba-knob { background: rgba(48, 48, 52, .62); }
.ba-tag {
  position: absolute; bottom: 12px; z-index: 3;
  display: inline-flex; align-items: center; height: 24px; padding: 0 10px;
  border-radius: var(--pill);
  background: rgba(28, 28, 30, .52);
  -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
  border: .5px solid rgba(255, 255, 255, .15);
  font-family: "Nohemi", sans-serif; font-weight: 400; font-size: 9.5px; line-height: 1;
  letter-spacing: .14em; text-transform: uppercase; color: var(--bright);
  white-space: nowrap; pointer-events: none;
}
.ba-tag-l { left: 12px; }
.ba-tag-r { right: 12px; }
@media (min-width: 900px) {
  .ba-tag { bottom: 16px; height: 28px; padding: 0 13px; font-size: 11px; }
  .ba-tag-l { left: 16px; }
  .ba-tag-r { right: 16px; }
  .ba-knob { width: 48px; height: 48px; }
}
figcaption.ba-caption { margin-top: 10px; font-size: 13px; line-height: 1.45; color: var(--dim); max-width: 70ch; }
@media (min-width: 900px) { figcaption.ba-caption { font-size: 14px; } }
@media (prefers-reduced-motion: no-preference) {
  .ba-stage.ba-ease .ba-after { transition: clip-path .32s cubic-bezier(.22, 1, .36, 1); }
  .ba-stage.ba-ease .ba-line { transition: left .32s cubic-bezier(.22, 1, .36, 1); }
}

/* launch day: the App Store pill that replaces the waitlist form (tools/launch-button.sh) */
#store { width: auto; gap: 10px; padding-right: 8px; }
#store a.btn-white { display: inline-flex; align-items: center; justify-content: center; height: 44px; padding: 0 22px; line-height: 1; white-space: nowrap; text-decoration: none; }

/* responsive images (tools/optimize-images.py): <picture> adds no box, so every rule written for the <img> still lays it out */
picture { display: contents; }
/* hero prints: no image fetch before app.js has sized and placed them (it adds .sized); the prints are transparent until then anyway */
.world:not(.sized) .print img { display: none; }