/* Perfect Photos — site styles. Light and dark, responsive down to 320 px. */

:root {
  --bg: #ffffff;
  --bg-2: #f5f5f7;
  --ink: #1d1d1f;
  --ink-2: #6e6e73;
  --line: rgba(0, 0, 0, .12);
  --accent: #0a66ff;
  --shot-edge: rgba(0, 0, 0, .1);
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Segoe UI", Roboto, Arial, sans-serif;
  --serif: ui-serif, "New York", Georgia, "Times New Roman", serif;
  --max: 1320px;
  --pad: clamp(20px, 5vw, 64px);
  --header-h: 56px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #000000;
    --bg-2: #111112;
    --ink: #f5f5f7;
    --ink-2: #a1a1a6;
    --line: rgba(255, 255, 255, .16);
    --accent: #3d8bff;
    --shot-edge: rgba(255, 255, 255, .14);
  }
}
:root[data-theme="dark"] {
  --bg: #000000;
  --bg-2: #111112;
  --ink: #f5f5f7;
  --ink-2: #a1a1a6;
  --line: rgba(255, 255, 255, .16);
  --accent: #3d8bff;
  --shot-edge: rgba(255, 255, 255, .14);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--header-h); }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--sans); font-size: 17px; line-height: 1.5; letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p { margin: 0 0 1em; }
h1, h2, h3 { margin: 0; font-weight: 600; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.wrap { max-width: var(--max); margin-inline: auto; padding-inline: var(--pad); }
.skip { position: absolute; left: 12px; top: -48px; z-index: 100; padding: 8px 12px; background: var(--ink); color: var(--bg); border-radius: 8px; }
.skip:focus { top: 10px; }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; height: var(--header-h); background: var(--bg); border-bottom: 1px solid transparent; transition: border-color .2s; }
.site-header.scrolled { border-bottom-color: var(--line); }
.site-header .wrap { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; font-size: 16px; text-decoration: none; }
.brand img { width: 26px; height: 26px; }
.site-header nav { display: flex; align-items: center; gap: 28px; font-size: 14px; }
.site-header nav a { text-decoration: none; color: var(--ink-2); }
.site-header nav a:hover, .site-header nav a[aria-current="page"] { color: var(--ink); }
.site-header .nav-links { display: contents; }
@media (max-width: 760px) { .site-header .nav-links { display: none; } }

.button {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px;
  border-radius: 999px; background: var(--accent); color: #fff; font-weight: 500; font-size: 17px; text-decoration: none;
  border: 0; cursor: pointer; transition: filter .15s;
}
.button:hover { filter: brightness(1.08); }
.site-header nav a.button, .button.small { min-height: 32px; padding: 0 14px; font-size: 14px; color: #fff; }
.more { color: var(--accent); text-decoration: none; }
.more:hover { text-decoration: underline; }

/* ---------- Sections ---------- */
section { padding: clamp(96px, 12vw, 168px) 0 0; }
.intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px clamp(24px, 5vw, 80px); padding-top: 22px; border-top: 1px solid var(--line); margin-bottom: clamp(48px, 6vw, 80px); }
.intro h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(36px, 4.2vw, 62px); line-height: 1.04; letter-spacing: -0.02em; max-width: 13em; }
.intro p { font-size: clamp(18px, 1.4vw, 21px); line-height: 1.45; color: var(--ink-2); margin: 0; max-width: 32em; }
.intro p + p { margin-top: 1em; }
@media (max-width: 800px) { .intro { grid-template-columns: 1fr; } }

.caption { margin-top: 14px; font-size: 15px; line-height: 1.45; color: var(--ink-2); }
.caption b { color: var(--ink); font-weight: 600; }
.look { font-family: var(--serif); font-style: italic; color: var(--ink); }

/* App screenshots, shown flat with the screen's own corner radius. */
.shot { display: block; width: 100%; aspect-ratio: 1320 / 2868; height: auto; border-radius: 12.5% / 5.75%; background: var(--bg-2); box-shadow: 0 0 0 1px var(--shot-edge); object-fit: cover; }
.shot-ipad { display: block; width: 100%; aspect-ratio: 2752 / 2064; height: auto; border-radius: 1.6% / 2.1%; background: var(--bg-2); box-shadow: 0 0 0 1px var(--shot-edge); }

.row { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 36px); }
.row figure { margin: 0; }
@media (max-width: 900px) {
  .row {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: calc(-1 * var(--pad)); padding-inline: var(--pad); scroll-padding-inline: var(--pad); gap: 16px;
  }
  .row::-webkit-scrollbar { display: none; }
  .row figure { flex: 0 0 min(62vw, 280px); scroll-snap-align: start; }
}
.caption .n { color: var(--ink); font-weight: 600; margin-right: 4px; }

/* ---------- Before / after ---------- */
.compare {
  position: relative; overflow: hidden; isolation: isolate; background: var(--bg-2);
  user-select: none; -webkit-user-select: none; touch-action: pan-y; aspect-ratio: var(--ar, 3 / 2);
}
.compare img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.compare .before { clip-path: inset(0 calc(100% - var(--pos, 50%)) 0 0); }
.compare .handle { position: absolute; top: 0; bottom: 0; left: var(--pos, 50%); z-index: 2; width: 0; pointer-events: none; }
.compare .handle::before { content: ""; position: absolute; top: 0; bottom: 0; left: -1px; width: 2px; background: #fff; box-shadow: 0 0 6px rgba(0, 0, 0, .3); }
.compare .knob {
  position: absolute; top: 50%; left: 0; transform: translate(-50%, -50%); width: 40px; height: 40px; border-radius: 50%;
  background: #fff; color: #1d1d1f; display: grid; place-items: center; box-shadow: 0 2px 10px rgba(0, 0, 0, .3);
}
.compare .knob svg { width: 18px; height: 18px; }
.compare .label { position: absolute; top: 12px; z-index: 2; padding: 3px 8px; border-radius: 6px; background: rgba(0, 0, 0, .42); font-size: 12px; font-weight: 500; color: #fff; pointer-events: none; transition: opacity .2s; }
.compare .label.l { left: 12px; }
.compare .label.r { right: 12px; }
.compare input[type="range"] { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none; }
.compare input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 44px; height: 2000px; }
.compare input[type="range"]::-moz-range-thumb { width: 44px; height: 2000px; border: 0; background: transparent; }
.compare input[type="range"]:focus-visible ~ .handle .knob { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ---------- Presets ---------- */
.presets { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(28px, 7vw, 120px); align-items: start; }
.preset-photo { position: relative; margin: 0; aspect-ratio: 2 / 3; width: min(560px, 46vw, calc((100svh - var(--header-h) - 48px) * 2 / 3)); background: var(--bg-2); overflow: hidden; cursor: pointer; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: pan-y; }
.preset-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.preset-photo .layer { animation: wipe .7s cubic-bezier(.3, .7, .2, 1) both; }
@keyframes wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes fade { from { opacity: 0; } }
.preset-photo .orig { z-index: 2; opacity: 0; transition: opacity .15s; }
.preset-photo.holding .orig { opacity: 1; }
.preset-photo .state { position: absolute; left: 16px; bottom: 14px; z-index: 3; color: #fff; font-size: 14px; text-shadow: 0 1px 8px rgba(0, 0, 0, .5); pointer-events: none; }
.preset-photo .state .o { display: none; }
.preset-photo.holding .state .o { display: inline; }
.preset-photo.holding .state .r { display: none; }
.preset-side { min-width: 0; position: sticky; top: calc(var(--header-h) + 24px); }
.photos { display: flex; gap: 8px; margin-bottom: 36px; }
.photos button { width: 52px; height: 52px; padding: 0; border: 0; border-radius: 6px; overflow: hidden; cursor: pointer; background: var(--bg-2); opacity: .45; transition: opacity .15s; }
.photos button img { width: 100%; height: 100%; object-fit: cover; }
.photos button:hover { opacity: .8; }
.photos button[aria-pressed="true"] { opacity: 1; box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--ink); }
.groups { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 28px clamp(28px, 4vw, 56px); }
.group h3 { font-size: 13px; font-weight: 500; color: var(--ink-2); margin-bottom: 10px; }
.group ul { list-style: none; margin: 0; padding: 0; }
.group button {
  display: block; padding: 5px 0; border: 0; background: none; cursor: pointer; text-align: left;
  font-size: 19px; letter-spacing: -0.015em; color: var(--ink-2); transition: color .12s;
}
.group button:hover { color: var(--ink); }
.group button[aria-pressed="true"] { color: var(--ink); text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1.5px; }
.preset-about { margin-top: 36px; padding-top: 18px; border-top: 1px solid var(--line); min-height: 7.5em; }
.preset-about .look { display: block; font-size: 30px; line-height: 1.15; margin-bottom: 6px; }
.preset-about p { margin: 0; font-size: 18px; color: var(--ink-2); }
.fineprint { margin-top: 18px; font-size: 13px; color: var(--ink-2); }
@media (max-width: 900px) {
  .presets { grid-template-columns: minmax(0, 1fr); }
  .preset-photo { width: min(100%, 520px); }
  .preset-side { position: static; }
}
@media (max-width: 560px) { .groups { grid-template-columns: 1fr 1fr; } .group button { font-size: 17px; } }

/* ---------- Clean up ---------- */
.pairs { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2.4vw, 32px); }
.pairs figure { margin: 0; }
@media (max-width: 800px) { .pairs { grid-template-columns: 1fr; } }

/* ---------- Editor ---------- */
.details { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 32px); margin-top: clamp(56px, 7vw, 96px); }
.details figure { margin: 0; }
.details .crop { aspect-ratio: 10 / 7; overflow: hidden; background: var(--bg-2); border-radius: 18px; box-shadow: 0 0 0 1px var(--shot-edge); }
.details .crop img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 800px) { .details { grid-template-columns: 1fr; } }

/* ---------- Everything else ---------- */
.everything { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.35fr); gap: 32px clamp(16px, 2.4vw, 36px); align-items: start; }
.everything figure { margin: 0; }
.facts { display: grid; gap: 26px; padding-left: clamp(0px, 3vw, 40px); }
.facts h3, .points h3 { font-size: 17px; margin-bottom: 6px; letter-spacing: -0.015em; }
.facts p, .points p { margin: 0; color: var(--ink-2); font-size: 16px; }
@media (max-width: 900px) {
  .everything { grid-template-columns: 1fr 1fr; }
  .facts { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; padding: 16px 0 0; }
}
@media (max-width: 560px) { .facts { grid-template-columns: 1fr; } }

/* ---------- Privacy ---------- */
.points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px clamp(24px, 4vw, 56px); }
.after-points { margin: 40px 0 0; color: var(--ink-2); }
.after-points a { color: var(--accent); }
@media (max-width: 900px) { .points { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .points { grid-template-columns: 1fr; } }

/* ---------- Pricing ---------- */
.plans { display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(24px, 5vw, 80px); }
.plan { padding: 24px 0 8px; border-top: 2px solid var(--ink); display: flex; flex-direction: column; }
.plan h3 { font-size: 26px; letter-spacing: -0.025em; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.plan h3 small { font-size: 14px; font-weight: 500; color: var(--ink-2); }
.plan .allow { margin: 4px 0 22px; color: var(--ink-2); font-size: 17px; }
.plan .price { font-size: 44px; font-weight: 600; letter-spacing: -0.04em; line-height: 1; }
.plan .price span { font-size: 16px; font-weight: 400; letter-spacing: -0.01em; color: var(--ink-2); margin-left: 6px; }
.plan .alt { margin: 10px 0 22px; color: var(--ink-2); font-size: 15px; }
.plan ul { margin: 0 0 28px; padding-left: 18px; color: var(--ink-2); font-size: 16px; }
.plan li { margin-bottom: 6px; }
.packs { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px 32px; margin-top: 32px; padding: 22px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.packs p { margin: 0; font-size: 17px; }
.packs p span { color: var(--ink-2); }
.packs ul { display: flex; flex-wrap: wrap; gap: 8px 28px; list-style: none; margin: 0; padding: 0; font-size: 17px; }
.packs li b { font-weight: 600; }
.notes { margin-top: 20px; font-size: 13px; color: var(--ink-2); max-width: 70em; }
.pricing-cta { margin-top: 36px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.pricing-cta span { color: var(--ink-2); font-size: 15px; }
@media (max-width: 760px) { .plans { grid-template-columns: 1fr; gap: 24px; } }

/* ---------- FAQ ---------- */
.faq-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px clamp(24px, 5vw, 80px); padding-top: 22px; border-top: 1px solid var(--line); }
.faq-wrap h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(36px, 4.2vw, 62px); line-height: 1.04; letter-spacing: -0.02em; }
.faq details + details { border-top: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; padding: 18px 40px 18px 0; position: relative; font-size: 19px; font-weight: 500; letter-spacing: -0.015em; }
.faq details:first-child summary { padding-top: 4px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-52%); font-size: 24px; font-weight: 300; color: var(--ink-2); }
.faq details:first-child summary::after { top: calc(50% - 7px); }
.faq details[open] summary::after { content: "–"; }
.faq .answer { padding: 0 0 22px; max-width: 44em; color: var(--ink-2); font-size: 17px; }
.faq .answer p:last-child { margin: 0; }
.faq a { color: var(--accent); }
@media (max-width: 800px) { .faq-wrap { grid-template-columns: 1fr; } }

/* ---------- Closing ---------- */
.closing { padding: clamp(120px, 14vw, 200px) 0 clamp(80px, 10vw, 140px); text-align: center; }
.closing img { width: 88px; height: 88px; margin: 0 auto 24px; }
.closing h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(36px, 4.2vw, 62px); line-height: 1.04; letter-spacing: -0.02em; margin-bottom: 12px; }
.closing p { color: var(--ink-2); font-size: 19px; margin-bottom: 28px; }

/* ---------- Footer ---------- */
.site-footer { padding: 28px 0 48px; border-top: 1px solid var(--line); font-size: 13px; color: var(--ink-2); }
.site-footer .wrap { display: grid; gap: 14px; }
.site-footer .top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.site-footer a { text-decoration: none; }
.site-footer a:hover { color: var(--ink); text-decoration: underline; }
.site-footer .legal-note { margin: 0; max-width: 90ch; font-size: 12px; line-height: 1.55; }
.site-footer .legal-note a { text-decoration: underline; }

/* ---------- Legal and credits pages ---------- */
.legal { padding: clamp(48px, 7vw, 96px) 0 clamp(64px, 8vw, 120px); }
.legal .head { max-width: 720px; margin: 0 auto 36px; }
.legal .head h1 { font-size: clamp(38px, 5vw, 56px); line-height: 1.04; letter-spacing: -0.035em; margin-bottom: 12px; }
.legal .head .meta { color: var(--ink-2); font-size: 15px; }
.legal .summary { max-width: 720px; margin: 0 auto 36px; padding: 20px 22px; border-radius: 12px; background: var(--bg-2); font-size: 16px; }
.legal .summary strong { font-weight: 600; }
.prose { max-width: 720px; margin-inline: auto; font-size: 17px; line-height: 1.6; color: var(--ink); }
.prose h2 { font-size: 24px; letter-spacing: -0.02em; margin: 44px 0 12px; line-height: 1.25; }
.prose h3 { font-size: 17px; margin: 26px 0 8px; }
.prose p { margin: 0 0 14px; }
.prose ul { margin: 0 0 16px; padding-left: 22px; }
.prose li { margin-bottom: 6px; }
.prose a { color: var(--accent); text-underline-offset: 3px; }
.prose table { width: 100%; border-collapse: collapse; font-size: 15px; margin: 6px 0 20px; }
.prose th, .prose td { text-align: left; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.prose th { font-weight: 600; }
.prose .table-scroll { overflow-x: auto; }
.prose .placeholder { background: #fff3c4; color: #5a4300; padding: 0 4px; border-radius: 4px; font-style: normal; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .prose .placeholder { background: #4a3a00; color: #ffe08a; } }
:root[data-theme="dark"] .prose .placeholder { background: #4a3a00; color: #ffe08a; }

/* ---------- Header over the dark opening ---------- */
.site-header { transition: border-color .2s, background-color .3s, color .3s; }
.site-header.over-dark { background: #000; color: #f5f5f7; border-bottom-color: transparent; }
.site-header.over-dark nav a:not(.button) { color: rgba(245, 245, 247, .72); }
.site-header.over-dark nav a:not(.button):hover { color: #fff; }

/* ---------- Relight: one photo, relit as you scroll ---------- */
.relight { position: relative; height: 520vh; padding: 0; background: #000; color: #f5f5f7; }
.relight-sticky {
  position: sticky; top: var(--header-h); height: calc(100svh - var(--header-h)); overflow: hidden;
  display: grid; grid-template-columns: minmax(300px, 1fr) auto; align-items: center; gap: clamp(32px, 5vw, 96px);
  padding: 0 max(var(--pad), calc((100vw - var(--max)) / 2 + var(--pad)));
}
.relight-photo { position: relative; grid-column: 2; grid-row: 1; width: min(52vw - 40px, (100svh - var(--header-h) - clamp(32px, 6svh, 72px)) * 2 / 3); aspect-ratio: 2 / 3; overflow: hidden; background: #111; }
.relight-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* The wipe runs on transforms only: the frame slides in from the left while its photo slides the
   other way, so the photo stays put and nothing is repainted while you scroll. */
.relight-photo .wipe { position: absolute; inset: 0; overflow: hidden; transform: translate3d(-100%, 0, 0); visibility: hidden; }
.relight-photo .wipe img { transform: translate3d(100%, 0, 0); }
/* Only a photo that is moving gets its own GPU layer; resting photos cost no extra memory. */
.wipe.moving, .wipe.moving img, .dev.moving, .dev.moving img { will-change: transform; }
.relight-photo .wipe.moving::after { content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 2px; background: rgba(255, 255, 255, .9); box-shadow: 0 0 10px 2px rgba(255, 236, 200, .45); }
.relight-copy { grid-column: 1; grid-row: 1; position: relative; align-self: stretch; }
.relight-state {
  position: absolute; left: 0; right: 0; top: 50%; transform: translateY(calc(-50% + 14px)); opacity: 0; visibility: hidden;
  transition: opacity .5s ease, transform .6s cubic-bezier(.2, .7, .2, 1), visibility 0s linear .5s;
}
.relight-state.is-on { opacity: 1; visibility: visible; transform: translateY(-50%); transition: opacity .5s ease, transform .6s cubic-bezier(.2, .7, .2, 1), visibility 0s; }
.relight h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(40px, 4.2vw, 70px); max-width: 9em; text-wrap: balance; line-height: 1.02; letter-spacing: -0.02em; margin-bottom: 22px; }
.relight-state > p { color: rgba(245, 245, 247, .7); font-size: clamp(17px, 1.3vw, 20px); line-height: 1.45; max-width: 24em; margin-bottom: 28px; }
.relight-state .note { font-size: 14px; margin: 16px 0 0; color: rgba(245, 245, 247, .55); }
.relight-state .n { display: block; font-size: 13px; letter-spacing: .08em; color: rgba(245, 245, 247, .5); margin-bottom: 14px; font-variant-numeric: tabular-nums; }
.relight-state .name { font-family: var(--serif); font-style: italic; font-size: clamp(48px, 5.6vw, 92px); line-height: 1; letter-spacing: -0.02em; color: #fff; margin: 0 0 18px; }
.relight-meta { position: absolute; right: 18px; bottom: 16px; z-index: 6; display: grid; justify-items: end; gap: 10px; font-size: 13px; color: rgba(255, 255, 255, .85); text-shadow: 0 1px 8px rgba(0, 0, 0, .6); pointer-events: none; }
.relight-label { font-family: var(--serif); font-style: italic; font-size: 19px; color: #fff; }
.relight-ticks { display: flex; gap: 6px; }
.relight-ticks i { width: 18px; height: 2px; background: rgba(255, 255, 255, .35); transition: background-color .3s; }
.relight-ticks i.on { background: #fff; }
.relight-hint { transition: opacity .4s; }
.relight.past-start .relight-hint, .relight.past-start .relight-label { opacity: 0; }
.relight-label { transition: opacity .4s; }
@media (max-width: 900px), (max-aspect-ratio: 4/5) {
  .relight { height: 480vh; }
  .relight-sticky { display: block; padding: 0; }
  .relight-photo { position: absolute; inset: 0; width: auto; height: auto; aspect-ratio: auto; }
  .relight-photo::after { content: ""; position: absolute; inset: 45% 0 0; z-index: 4; background: linear-gradient(transparent, rgba(0, 0, 0, .78)); pointer-events: none; }
  .relight-copy { position: absolute; left: var(--pad); right: var(--pad); bottom: 36px; top: auto; z-index: 6; height: 300px; }
  .relight-state, .relight-state.is-on { top: auto; bottom: 0; transform: none; }
  .relight-state:not(.is-on) { transform: translateY(12px); }
  .relight h1 { font-size: clamp(38px, 10.5vw, 56px); }
  .relight-state > p { color: rgba(255, 255, 255, .82); }
  .relight-meta { top: 16px; bottom: auto; right: var(--pad); }
  .relight-hint { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .relight { height: auto; }
  .relight-sticky { position: relative; }
  .relight-state { transition: none; }
}

/* ---------- Filmstrip: photos develop as they reach the middle ---------- */
.strip { position: relative; height: 420vh; padding: 0; }
.strip-sticky { position: sticky; top: var(--header-h); height: calc(100svh - var(--header-h)); overflow: hidden; display: flex; flex-direction: column; justify-content: center; gap: clamp(20px, 4svh, 40px); }
.strip-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px clamp(24px, 5vw, 80px); align-items: end; width: 100%; }
.strip-head h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(34px, 3.8vw, 56px); line-height: 1.04; letter-spacing: -0.02em; }
.strip-head p { margin: 0; color: var(--ink-2); font-size: 18px; max-width: 30em; }
.strip-track { display: flex; gap: clamp(16px, 2vw, 28px); padding: 0 0 0 58vw; will-change: transform; }
.print { flex: none; margin: 0; }
.print-img { position: relative; height: min(58svh, 600px); aspect-ratio: var(--ar, 2 / 3); overflow: hidden; background: var(--bg-2); }
.print-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.print-img .dev { position: absolute; inset: 0; overflow: hidden; transform: translate3d(-100%, 0, 0); }
.print-img .dev img { transform: translate3d(100%, 0, 0); }
.print-img .dev.moving::after { content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 1px; background: rgba(255, 255, 255, .85); box-shadow: 0 0 8px 1px rgba(255, 236, 200, .45); }
.print figcaption { margin-top: 12px; font-size: 15px; color: var(--ink-2); max-width: 26em; }
.print figcaption .look { font-size: 19px; margin-right: 6px; }
.strip-note { margin: 0; font-size: 13px; color: var(--ink-2); width: 100%; }
.strip-count { display: none; justify-content: flex-start; padding: 0 var(--pad); align-items: center; gap: 10px; margin: 0; font-size: 14px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.strip-count b { color: var(--ink); font-weight: 600; }
.strip-count .swipe { display: inline-flex; align-items: center; gap: 6px; }
.strip-count .swipe svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; animation: nudge 1.6s ease-in-out infinite; }
@keyframes nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(5px); } }
@media (prefers-reduced-motion: reduce) { .strip-count .swipe svg { animation: none; } }
@media (max-width: 900px) {
  .strip { height: auto; padding-top: clamp(80px, 12vw, 120px); }
  .strip-sticky { position: static; height: auto; overflow: visible; }
  .strip-head { grid-template-columns: 1fr; }
  /* A swipeable row: the photo in the middle is centred and its neighbours show at both edges. */
  .strip-track { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; gap: 12px; padding: 0 calc(50vw - min(36vw, 150px)); transform: none !important; -webkit-overflow-scrolling: touch; }
  .strip-track::-webkit-scrollbar { display: none; }
  .print { scroll-snap-align: center; scroll-snap-stop: always; }
  .print-img { height: min(52svh, 450px); max-width: 78vw; }
  .print figcaption { max-width: 78vw; }
  .strip-count { display: flex; }
}
@media (prefers-reduced-motion: reduce) {
  .strip { height: auto; }
  .strip-sticky { position: static; height: auto; padding-top: 96px; }
  .strip-track { overflow-x: auto; transform: none !important; }
  .print-img .dev, .print-img .dev img { transform: none; }
}

/* ---------- Darkroom (editor) ---------- */
.darkroom { background: #000; color: #f5f5f7; margin-top: clamp(96px, 12vw, 168px); padding-bottom: clamp(96px, 12vw, 160px);
  --ink: #f5f5f7; --ink-2: #a1a1a6; --line: rgba(255, 255, 255, .16); --bg-2: #111112; --shot-edge: rgba(255, 255, 255, .14); }
.darkroom .intro { border-top-color: transparent; }

/* ---------- Film ---------- */
.film { margin: 0; }
.film-frame { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: clamp(8px, 1.2vw, 16px); background: #000; box-shadow: 0 0 0 1px var(--shot-edge); }
.film-frame video { display: block; width: 100%; height: 100%; object-fit: contain; background: #000; }
/* Until it is played, the poster is one big button; then the browser's own controls take over. */
.film-play { position: absolute; inset: 0; z-index: 2; display: block; width: 100%; padding: 0; border: 0; background: #000; cursor: pointer; }
.film-play[hidden] { display: none; }
.film-play img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
.film-play:hover img { transform: scale(1.012); }
.film-play-pill {
  position: absolute; left: 7.8%; top: 75.5%; display: inline-flex; /* under the poster's title */ align-items: center; gap: 10px;
  min-height: 48px; padding: 0 22px 0 18px; border-radius: 999px; background: rgba(255, 255, 255, .94); color: #1d1d1f;
  font-size: 17px; font-weight: 500; box-shadow: 0 8px 30px rgba(0, 0, 0, .35); transition: transform .2s cubic-bezier(.2, .7, .2, 1);
}
.film-play:hover .film-play-pill { transform: scale(1.04); }
.film-play-pill svg { width: 18px; height: 18px; fill: currentColor; }
.film-play-pill .t { color: #6e6e73; font-variant-numeric: tabular-nums; }
@media (max-width: 560px) {
  .film-play-pill { min-height: 36px; gap: 7px; padding: 0 14px 0 12px; font-size: 14px; }
  .film-play-pill svg { width: 14px; height: 14px; }
  .film-play-pill .t { display: none; } /* keeps the pill clear of the poster's photo */
}

/* ---------- HDR: the same photo in SDR and HDR ----------
   Where the screen and browser show HDR, both layers are the gain-map JPEG: the lower one held to
   standard range, the upper one free, and the upper one fades in. Elsewhere the two layers are a
   simulation made with one tone curve, and the caption says so. */
.hdr { margin: 0 auto; width: min(100%, 520px, calc((100svh - var(--header-h) - 200px) * 1024 / 1536)); min-width: min(100%, 280px); }
.hdr-photo {
  position: relative; display: block; width: 100%; aspect-ratio: 1024 / 1536; padding: 0; border: 0; border-radius: 0;
  background: var(--bg-2); overflow: hidden; cursor: pointer; -webkit-tap-highlight-color: transparent;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.hdr-photo picture, .hdr-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hdr-sdr img { dynamic-range-limit: standard; }
.hdr-on img { dynamic-range-limit: no-limit; }
.hdr-on { opacity: 0; transition: opacity .6s cubic-bezier(.45, .05, .55, .95); }
.hdr.is-on .hdr-on { opacity: 1; }
.hdr.no-fade .hdr-on { transition: none; }
.hdr-badge { position: absolute; top: 12px; left: 12px; z-index: 2; padding: 3px 8px; border-radius: 6px; background: rgba(0, 0, 0, .42); font-size: 12px; font-weight: 600; letter-spacing: .04em; color: #fff; pointer-events: none; }
.hdr-badge .h, .hdr.badge-on .hdr-badge .s { display: none; }
.hdr.badge-on .hdr-badge .h { display: inline; }
.hdr-sim { display: none; }
@media not all and (dynamic-range: high) { .hdr-sim { display: inline; } }
.hdr.is-sim .hdr-sim { display: inline; }
.hdr.is-real .hdr-sim { display: none; }
@media (prefers-reduced-motion: reduce) { .hdr-on { transition-duration: .3s; transition-timing-function: ease; } }

/* ---------- Time Capsules: the app's screen in a plain phone frame ----------
   The recording already carries the Dynamic Island, so the frame is only a body, a thin bezel and
   the screen's own corner radius (as on the screenshots above). */
.capsules { margin: 0; }
.capsules-stage { position: relative; width: max-content; margin: 0 auto; }
.phone {
  --pw: min(360px, 72vw, calc((100svh - var(--header-h) - 150px) * .44));
  width: var(--pw); padding: calc(var(--pw) * .03); border-radius: calc(var(--pw) * .1475);
  background: #000; box-shadow: inset 0 0 0 calc(var(--pw) * .007) var(--phone-band), 0 0 0 1px var(--phone-edge);
}
.phone video { display: block; width: 100%; height: auto; aspect-ratio: 660 / 1434; border-radius: 12.5% / 5.75%; background: #000; object-fit: cover; }
.capsules .caption { max-width: 34em; margin-inline: auto; text-align: center; }
.capsules .caption a { color: inherit; text-underline-offset: 3px; }
/* A pause button beside the loop, as moving pictures should have one. */
.loop-toggle {
  position: absolute; left: calc(100% + 14px); bottom: 0; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%;
  display: grid; place-items: center; background: var(--bg-2); color: var(--ink); cursor: pointer; transition: background-color .15s;
}
.loop-toggle[hidden] { display: none; }
.loop-toggle:hover { background: var(--line); }
.loop-toggle svg { width: 16px; height: 16px; fill: currentColor; }
.loop-toggle .i-play, .loop-toggle.paused .i-pause { display: none; }
.loop-toggle.paused .i-play { display: block; }
@media (max-width: 560px) { .loop-toggle { position: static; margin: 12px 0 0 auto; } }
:root { --phone-band: #2c2c2e; --phone-edge: rgba(0, 0, 0, .1); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --phone-band: #3a3a3c; --phone-edge: rgba(255, 255, 255, .14); } }
:root[data-theme="dark"] { --phone-band: #3a3a3c; --phone-edge: rgba(255, 255, 255, .14); }

/* ---------- Preset wheel (the app's detented wheel) ---------- */
.wheel { position: relative; min-width: 0; max-width: 100%; margin: 8px 0 0; user-select: none; -webkit-user-select: none; }
.wheel-groups { display: flex; gap: 18px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 6px; }
.wheel-groups span { transition: color .25s; }
.wheel-groups span.on { color: var(--ink); }
.wheel-track {
  display: flex; list-style: none; margin: 0; padding: 0 50%; overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; cursor: grab; outline-offset: 6px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
}
.wheel-track::-webkit-scrollbar { display: none; }
.wheel-track.dragging { cursor: grabbing; scroll-snap-type: none; }
.wheel-track li {
  flex: none; scroll-snap-align: center; position: relative; padding: 34px 20px 4px; white-space: nowrap;
  font-family: var(--serif); font-style: italic; font-size: 24px; letter-spacing: -0.01em; color: var(--ink-2);
  opacity: calc(1 - var(--dist, 0) * .55); transition: color .2s;
}
.wheel-track li[aria-selected="true"] { color: var(--ink); }
.wheel-track li::before { /* the detent */
  content: ""; position: absolute; top: 8px; left: 50%; width: 1.5px; height: 18px; margin-left: -.75px; background: currentColor;
}
.wheel-track li::after { /* minor ticks between detents */
  content: ""; position: absolute; top: 12px; left: 0; right: 0; height: 10px;
  background: repeating-linear-gradient(90deg, transparent 0 9px, var(--line) 9px 10px);
  -webkit-mask-image: linear-gradient(90deg, #000 42%, transparent 42% 58%, #000 58%); mask-image: linear-gradient(90deg, #000 42%, transparent 42% 58%, #000 58%);
}
.wheel-track li[data-group]:not([data-group=""]) { margin-left: 26px; }
.wheel-track li[data-group="Remaster"] { margin-left: 0; }
.wheel-needle { position: absolute; left: 50%; top: 22px; width: 2px; height: 30px; margin-left: -1px; border-radius: 1px; background: var(--accent); pointer-events: none; }

/* ---------- Contact sheet ---------- */
.sheet {
  max-width: calc(var(--max) - 2 * var(--pad)); margin: 0 auto; width: calc(100% - 2 * var(--pad));
  background: #0c0b0a; color: #e9c48f; padding: 10px 16px; border-radius: 3px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .1), 0 30px 60px -40px rgba(0, 0, 0, .6);
}
.sheet-edge { display: flex; justify-content: space-between; font: 600 10px/1 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .3em; color: rgba(233, 196, 143, .75); padding: 6px 4px; }
.sheet-frames { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 22px 10px; padding: 8px 0; }
.frame { position: relative; margin: 0; }
.frame .fnum { display: block; font: 600 10px/1 ui-monospace, "SF Mono", Menlo, monospace; color: rgba(233, 196, 143, .75); margin-bottom: 6px; }
.frame img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; transition: transform .35s cubic-bezier(.2, .7, .2, 1), filter .35s; }
.frame:hover img { transform: scale(1.03); }
.sheet:hover .frame:not(:hover) img { filter: brightness(.7); }
.frame figcaption { margin-top: 7px; font: 500 11px/1.3 var(--sans); color: rgba(245, 235, 220, .72); }
.grease { position: absolute; left: -14%; top: -2%; width: 128%; height: 106%; overflow: visible; pointer-events: none; }
.grease path { fill: none; stroke: #e2352c; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; opacity: .92;
  stroke-dasharray: 760; stroke-dashoffset: 760; transition: stroke-dashoffset 1.3s cubic-bezier(.5, .1, .3, 1) .2s; }
.sheet.drawn .grease path { stroke-dashoffset: 0; }
@media (max-width: 900px) {
  .sheet { width: auto; margin: 0; border-radius: 0; overflow-x: auto; scrollbar-width: none; }
  .sheet-frames { grid-template-columns: repeat(7, 34vw); }
  .sheet-edge { width: calc(7 * 34vw + 60px); }
}
@media (prefers-reduced-motion: reduce) { .grease path { transition: none; stroke-dashoffset: 0; } }

/* ---------- FAQ motion ---------- */
.faq .answer { overflow: hidden; }

/* ---------- Scroll-driven animations (Safari 26+, Chrome, Edge) ----------
   The browser runs the wipes in step with the scroll on its own compositor thread, so they
   keep the display's full frame rate. Ranges are set per element by the script from the
   layout; browsers without scroll timelines use the script-driven fallback. */
@supports (animation-timeline: view()) {
  .relight { view-timeline: --relight block; }
  .sda .relight-photo .wipe { visibility: visible; will-change: transform; animation: sda-frame cubic-bezier(.45, .05, .55, .95) both; animation-timeline: --relight; animation-range: contain var(--ra, 0%) contain var(--rb, 100%); }
  .sda .relight-photo .wipe img { will-change: transform; animation: sda-photo cubic-bezier(.45, .05, .55, .95) both; animation-timeline: --relight; animation-range: contain var(--ra, 0%) contain var(--rb, 100%); }
  .sda .relight-photo .wipe::after { content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 2px; background: rgba(255, 255, 255, .9); box-shadow: 0 0 10px 2px rgba(255, 236, 200, .45); animation: sda-edge linear both; animation-timeline: --relight; animation-range: contain var(--ra, 0%) contain var(--rb, 100%); }
  @media (min-width: 901px) {
    .strip { view-timeline: --strip block; }
    .sda .strip-track { will-change: transform; animation: sda-track linear both; animation-timeline: --strip; animation-range: contain 0% contain 100%; }
    .sda .print-img .dev { will-change: transform; animation: sda-frame cubic-bezier(.45, .05, .55, .95) both; animation-timeline: --strip; animation-range: contain var(--ra, 0%) contain var(--rb, 100%); }
    .sda .print-img .dev img { will-change: transform; animation: sda-photo cubic-bezier(.45, .05, .55, .95) both; animation-timeline: --strip; animation-range: contain var(--ra, 0%) contain var(--rb, 100%); }
    .sda .print-img .dev::after { content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 1px; background: rgba(255, 255, 255, .85); box-shadow: 0 0 8px 1px rgba(255, 236, 200, .45); animation: sda-edge linear both; animation-timeline: --strip; animation-range: contain var(--ra, 0%) contain var(--rb, 100%); }
  }
}
@keyframes sda-frame { from { transform: translate3d(-100%, 0, 0); } to { transform: translate3d(0, 0, 0); } }
@keyframes sda-photo { from { transform: translate3d(100%, 0, 0); } to { transform: translate3d(0, 0, 0); } }
@keyframes sda-edge { 0% { opacity: 0; } 3% { opacity: 1; } 97% { opacity: 1; } 100% { opacity: 0; } }
@keyframes sda-track { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(calc(var(--travel, 0) * -1px), 0, 0); } }
@media (prefers-reduced-motion: reduce) {
  .sda .relight-photo .wipe, .sda .relight-photo .wipe img, .sda .relight-photo .wipe::after,
  .sda .strip-track, .sda .print-img .dev, .sda .print-img .dev img, .sda .print-img .dev::after { animation: none !important; }
}

.on-narrow { display: none; }
@media (max-width: 900px) { .on-wide { display: none; } .on-narrow { display: inline; } }