/* Lou Ferrand — the contact sheet. One rosy grey ground, brown-black ink, the darkroom's safelight red. */
:root {
  --bg: #ebe5e3;
  --surface: #e1dad7;
  --ink: #2b2622;
  --muted: #6a615d;
  --accent: #b3301c;
  --accent-ink: #ffffff;
  --sheet: #23201d;

  --step-small: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
  --step-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --step-lead: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
  --step-head: clamp(2rem, 1.3rem + 3.2vw, 4rem);
  --step-display: clamp(2.6rem, 6.4vw, 7.4rem);

  --m: clamp(16px, 3.4vw, 48px);
  --gap: 8px;
  --r: 0px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --font: 'General Sans', 'Helvetica Neue', Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
.hero, .work, .how, .sheet, .contact { overflow-x: clip; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 var(--step-body)/1.45 var(--font); overflow-x: clip; }
img, video, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, p, figure, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
button, input { font: inherit; color: inherit; }
.soft { color: var(--muted); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
::selection { background: var(--accent); color: var(--accent-ink); }

h2 { font-weight: 700; font-size: var(--step-head); line-height: 0.95; letter-spacing: -0.02em; }

/* Buttons: one shape on the whole page. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 24px;
  background: var(--accent); color: var(--accent-ink); font-weight: 500; text-decoration: none; border: 0; border-radius: var(--r); cursor: pointer;
  transition: background-color 0.25s, color 0.25s, transform 0.25s var(--ease-out);
}
.btn:hover { background: var(--ink); }
.btn:active { transform: scale(0.97); }
.btn--small { min-height: 44px; padding: 0 18px; }
.btn--line { background: transparent; color: var(--ink); outline: 2px solid var(--ink); outline-offset: -2px; }
.btn--line:hover { background: var(--ink); color: var(--bg); }
.btn--inverse { background: var(--accent-ink); color: var(--accent); }
.btn--inverse:hover { background: var(--ink); color: var(--accent-ink); }
.link { font-weight: 500; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; transition: color 0.2s; }
.link:hover { color: var(--accent); }

/* Nav */
.nav {
  position: fixed; inset: 0 0 auto; z-index: 20; display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 32px;
  padding: 12px var(--m); background: var(--bg); transition: translate 0.4s var(--ease-out);
}
.nav.is-hidden { translate: 0 -100%; }
.nav__mark { font-weight: 700; text-decoration: none; font-size: var(--step-body); }
.nav__links { display: flex; gap: 28px; }
.nav__links a { text-decoration: none; position: relative; }
.nav__links a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px; background: var(--accent); scale: 0 1; transform-origin: left; transition: scale 0.3s var(--ease-out); }
.nav__links a:hover::after, .nav__links a.is-here::after { scale: 1 1; }
.nav__links a.is-here { color: var(--accent); }

/* Hero: the name across the top, the first roll running under it. */
.hero { min-height: 100svh; padding: 112px 0 32px; display: grid; grid-template-rows: auto 1fr auto; gap: 16px; }
.hero__top { margin-bottom: 24px; }
.hero__top { padding: 0 var(--m); display: grid; grid-template-columns: repeat(12, 1fr); gap: 0 20px; align-items: end; }
.hero h1 { grid-column: 1 / 8; font-weight: 700; font-size: clamp(3.2rem, 8.4vw, 9.5rem); line-height: 0.9; letter-spacing: -0.02em; }
.hero h1 > span { display: block; }
.hero__side { grid-column: 8 / 13; max-width: 30em; display: grid; gap: 24px; }
.hero__lead { font-size: var(--step-lead); line-height: 1.3; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: center; }

.roll { overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; align-self: end; cursor: grab; }
.roll::-webkit-scrollbar { display: none; }
.roll.is-drag { cursor: grabbing; scroll-snap-type: none; }
.roll__track { display: flex; gap: 10px; width: max-content; padding: 0 var(--m); }
.shot { flex: none; height: clamp(240px, 44vh, 480px); aspect-ratio: 3 / 2; scroll-snap-align: center; position: relative; }
.shot img { width: 100%; height: calc(100% - 26px); object-fit: cover; filter: brightness(var(--lift, 1.35)) contrast(var(--flat, 0.65)); transition: filter 0.5s; user-select: none; -webkit-user-drag: none; }
.shot figcaption { font-size: var(--step-small); font-weight: 500; color: var(--muted); padding-top: 6px; }
.shot.is-centre figcaption { color: var(--accent); }
/* Each frame is exposed in turn when the page opens: white paper, then the picture. */
html.js .hero .shot::after { content: ''; position: absolute; inset: 0 0 26px; background: #fff; opacity: 1; transition: opacity 1.1s var(--ease-out); transition-delay: calc(var(--i) * 90ms + 200ms); pointer-events: none; }
html.js .hero.is-loaded .shot::after { opacity: 0; }
html.js .hero h1 > span { clip-path: inset(0 0 100% 0); translate: 0 40px; transition: clip-path 1s var(--ease-out), translate 1s var(--ease-out); }
html.js .hero h1 > span + span { transition-delay: 0.12s; }
html.js .hero.is-loaded h1 > span { clip-path: inset(0 0 -10% 0); translate: 0 0; }
.roll__caption { padding: 0 var(--m); font-size: var(--step-small); font-weight: 500; display: flex; gap: 12px; }

/* The develop scene: the clip on the right, the bath timer on the left. */
.develop .scene-stage { min-height: 100svh; padding: 96px var(--m) 48px; display: grid; grid-template-columns: repeat(12, 1fr); gap: 20px; align-items: center; }
.develop__text { grid-column: 1 / 5; display: grid; gap: 24px; align-content: center; }
.timer { display: grid; gap: 6px; margin-top: 16px; }
.timer #timer { font-weight: 700; font-size: var(--step-display); line-height: 0.9; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--accent); }
.timer #bath { font-size: var(--step-body); }
.tray { grid-column: 5 / 13; position: relative; background: var(--accent); padding: clamp(14px, 2vw, 28px); padding-bottom: 0; }
.tray video, .tray__end { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: #ddd; }
.tray__end { display: none; }
.tray figcaption { color: var(--accent-ink); font-size: var(--step-small); padding: 12px 0 14px; }
.develop.is-rest video { display: none; }
.develop.is-rest .tray__end { display: block; }
html:not(.js) .develop video { display: none; }
html:not(.js) .develop .tray__end { display: block; }

/* Statement tiles */
.tiles { padding: 8px; display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: 38svh 38svh auto; gap: var(--gap); }
.tile { overflow: hidden; position: relative; }
.tile--a { grid-column: 1 / 9; grid-row: 1 / 3; background: var(--ink); color: var(--bg); padding: 20px; display: flex; align-items: flex-end; }
.tile--a h2 { font-size: clamp(3rem, 7vw, 8.25rem); line-height: 0.88; }
.tile--a h2 > span { display: block; }
.tile--b { grid-column: 9 / 13; grid-row: 1; background: var(--surface); padding: 20px; display: flex; align-items: flex-end; }
.tile--b span { font-weight: 700; font-size: clamp(3rem, 7vw, 8.25rem); line-height: 0.85; letter-spacing: -0.03em; color: var(--accent); }
.tile--c { grid-column: 9 / 13; grid-row: 2; }
.tile--c img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.1); }
.tile--d { grid-column: 1 / 13; display: grid; grid-template-columns: repeat(12, 1fr); padding: 40px 0 72px; }
.tile--d p { grid-column: 7 / 13; font-size: var(--step-lead); line-height: 1.35; padding-right: 32px; }

/* Work: one slide and its two neighbours, per series. */
.work { padding: 96px 0 40px; }
.work__title { padding: 0 var(--m); margin-bottom: 48px; }
.series + .series { margin-top: clamp(96px, 14vw, 200px); }
.filmstrip {
  display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  padding: 0 13.5vw; cursor: grab;
}
.filmstrip::-webkit-scrollbar { display: none; }
.filmstrip.is-drag { cursor: grabbing; scroll-snap-type: none; }
.slide { flex: none; width: 73vw; aspect-ratio: 1046 / 600; scroll-snap-align: center; overflow: hidden; }
.slide img { width: 100%; height: 100%; object-fit: cover; transition: scale 0.9s var(--ease-out), filter 0.6s; user-select: none; -webkit-user-drag: none; }
.slide:not(.is-centre) img { filter: brightness(1.12) contrast(0.85); scale: 1.06; }
.facts { margin-top: 26px; padding: 0 var(--m); display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px 20px; }
.series__text { grid-column: 2 / 4; max-width: 46ch; }
.series__link { grid-column: 4; justify-self: start; align-self: start; }

/* The contact sheet: the dark paper, six strips, the grease pencil. */
.sheet { padding: 120px var(--m) 96px; }
.sheet__head { display: grid; grid-template-columns: repeat(12, 1fr); gap: 20px; align-items: end; margin-bottom: 48px; }
.sheet__head h2 { grid-column: 1 / 7; }
.sheet__statement { grid-column: 8 / 13; font-size: var(--step-lead); line-height: 1.3; }
.contact-sheet { background: var(--sheet); padding: clamp(16px, 2.4vw, 36px); display: grid; gap: clamp(14px, 1.6vw, 22px); }
.strip { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.cell { position: relative; cursor: pointer; display: block; }
.cell input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.cell img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: filter 0.3s, scale 0.3s var(--ease-out); }
.cell:hover img { filter: brightness(1.15); }
.cell__n { display: block; color: #d9cfc9; font-size: var(--step-small); font-weight: 500; padding-top: 4px; }
.cell__n .soft { color: #a69a93; }
.pencil { position: absolute; inset: -12% -8% auto; width: 116%; height: 124%; pointer-events: none; overflow: visible; }
.pencil path { fill: none; stroke: #e2412a; stroke-width: 4.5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; transition: stroke-dashoffset 0.55s var(--ease-out), opacity 0.1s; }
.cell input:checked ~ .pencil path { stroke-dashoffset: 0; opacity: 1; }
.cell input:checked ~ .cell__n { color: #ff6a52; }
.cell input:focus-visible ~ img { outline: 3px solid #ff6a52; outline-offset: 2px; }
.contact-sheet.has-pick .cell input:not(:checked) ~ img { filter: brightness(0.7); }
.order { margin-top: 24px; display: grid; grid-template-columns: auto 1fr auto; gap: 16px 32px; align-items: center; }
.formats { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.formats legend { float: left; margin-right: 12px; font-weight: 500; align-self: center; line-height: 44px; }
.formats label { position: relative; }
.formats input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.formats span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; background: var(--surface); transition: background-color 0.2s, color 0.2s; }
.formats input:checked + span { background: var(--ink); color: var(--bg); }
.formats input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 2px; }
.order__sum { display: grid; }
.order__sum strong { font-weight: 700; font-size: var(--step-lead); }

/* How: the drag row of moments. */
.how { padding: 96px 0; }
.how__head { padding: 0 var(--m); display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.how__btns { display: flex; gap: 8px; }
.sq { width: 48px; height: 48px; display: grid; place-items: center; background: var(--ink); color: var(--bg); border: 0; cursor: pointer; transition: background-color 0.2s, transform 0.2s; }
.sq:hover { background: var(--accent); }
.sq:active { transform: scale(0.94); }
.sq svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.5; }
.how__bar { margin: 24px var(--m) 40px; height: 6px; background: var(--surface); }
.how__bar span { display: block; height: 100%; width: 100%; background: var(--ink); transform-origin: left; scale: var(--prog, 0.15) 1; }
.how__row { display: flex; gap: 32px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 var(--m); cursor: grab; }
.how__row::-webkit-scrollbar { display: none; }
.how__row.is-drag { cursor: grabbing; scroll-snap-type: none; }
.step { flex: none; width: 300px; scroll-snap-align: start; display: flex; flex-direction: column; }
.step h3 { font-size: var(--step-lead); font-weight: 700; line-height: 1.15; }
.step p { margin-top: 10px; color: var(--muted); min-height: 5.8em; }
.step figure { margin-top: var(--gap, 80px); overflow: hidden; }
.step img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; filter: grayscale(1); transition: scale 0.8s var(--ease-out); user-select: none; -webkit-user-drag: none; }
.step:hover img { scale: 1.05; }

/* Pricing: three formulas in a large table. */
.pricing { padding: 96px var(--m); }
.plans { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: var(--step-lead); }
.plans th, .plans td { text-align: left; vertical-align: top; padding: 20px 18px; font-weight: 400; }
.plans thead th:first-child { width: 34%; padding-left: 0; vertical-align: bottom; }
.plans thead th { vertical-align: bottom; padding-bottom: 28px; }
.plan, .price { display: block; font-size: clamp(1.6rem, 2.8vw, 3rem); line-height: 1.05; letter-spacing: -0.02em; }
.plan { font-weight: 700; }
.per { display: block; font-size: var(--step-body); margin-top: 6px; }
.plans tbody th { padding-left: 0; }
.plans tbody tr:nth-child(odd) { background: var(--surface); }
.plans tbody tr:nth-child(odd) th { padding-left: 16px; }
.plans tbody th { padding-left: 16px; }
.plans .is-pick { background: var(--accent); color: var(--accent-ink); }
.plans thead .is-pick .per { color: var(--accent-ink); }
.plans__cta th { font-size: var(--step-body); }
.plans__cta .btn { width: 100%; }

/* Contact: the safelight-red field. */
.contact { background: var(--accent); color: var(--accent-ink); min-height: 80svh; padding: 48px 0 56px; display: grid; align-content: start; }
.marquee { overflow: hidden; }
.marquee__track { display: flex; gap: 8px; width: max-content; animation: drift 60s linear infinite; }
.marquee img { height: 150px; width: auto; object-fit: cover; filter: grayscale(1) contrast(1.05); }
.marquee .m0 { aspect-ratio: 3 / 4; }
.marquee .m1 { aspect-ratio: 1; }
.marquee .m2 { aspect-ratio: 3 / 2; }
@keyframes drift { to { transform: translateX(-50%); } }
.contact h2 { margin: 72px var(--m) 40px; font-size: clamp(2.4rem, 5vw, 4.5rem); }
.bar { margin: 0 var(--m); display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; height: 96px; }
.bar label { display: block; }
.bar input, .bar button { width: 100%; height: 100%; border: 0; border-radius: var(--r); text-align: center; font-size: 1.125rem; }
.bar input { background: #c9472f; color: var(--accent-ink); transition: background-color 0.2s, color 0.2s; }
.bar input::placeholder { color: #ffe3dc; opacity: 1; }
.bar input:focus { background: var(--accent-ink); color: var(--ink); outline: none; }
.bar input:focus::placeholder { color: var(--muted); }
.bar button { background: var(--ink); color: var(--accent-ink); font-weight: 500; cursor: pointer; transition: background-color 0.2s, color 0.2s; }
.bar button:hover { background: var(--accent-ink); color: var(--accent); }
.contact__small { margin: 12px var(--m) 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; font-size: var(--step-small); }
.contact__small p:last-child { grid-column: 3; }

/* Footer of tiles */
.foot { padding: 8px; display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: 220px 320px auto; gap: var(--gap); }
.ft { background: var(--surface); padding: 20px; display: flex; flex-direction: column; text-decoration: none; overflow: hidden; }
.ft--state { grid-column: 1 / 5; justify-content: space-between; font-size: 1.5rem; line-height: 1.25; }
.ft--state .legal { font-size: var(--step-small); color: var(--muted); }
.ft--nav { grid-column: 5 / 8; }
.ft--nav ul { display: grid; gap: 4px; }
.ft--nav a { text-decoration: none; }
.ft--nav a:hover { color: var(--accent); }
.ft--time { grid-column: 8 / 10; justify-content: space-between; }
.ft--time .big { white-space: nowrap; font-weight: 700; font-size: clamp(1.75rem, 3vw, 3rem); line-height: 1; font-variant-numeric: tabular-nums; }
.ft--mail { grid-column: 10 / 13; justify-content: flex-end; }
.ft--mail a { font-size: 1.25rem; font-weight: 500; text-decoration: none; }
.ft--mail a:hover { color: var(--accent); }
.ft--mark { grid-column: 1 / 9; background: var(--ink); color: var(--bg); align-items: center; justify-content: center; }
.ft--mark span { font-weight: 700; font-size: 9vw; letter-spacing: -0.03em; line-height: 1; white-space: nowrap; }
.ft--go { grid-column: 9 / 13; background: var(--accent); color: var(--accent-ink); justify-content: space-between; transition: background-color 0.3s; }
.ft--go span { font-size: 1.75rem; font-weight: 700; line-height: 1.1; max-width: 9ch; }
.ft--go svg { align-self: flex-end; width: 72px; height: 72px; fill: none; stroke: currentColor; stroke-width: 4; transition: translate 0.4s var(--ease-out); }
.ft--go:hover { background: var(--ink); }
.ft--go:hover svg { translate: 8px -8px; }
.credits { grid-column: 1 / 13; font-size: var(--step-small); color: var(--muted); padding: 16px 12px 8px; max-width: 75ch; }

/* Entrances */
@media (prefers-reduced-motion: no-preference) {
  html.js [data-reveal] > * { opacity: 0; translate: 0 28px; transition: opacity 0.9s var(--ease-out), translate 0.9s var(--ease-out); transition-delay: calc(var(--i, 0) * 80ms); }
  html.js [data-reveal].in > * { opacity: 1; translate: 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  html.js .hero .shot::after { display: none; }
  html.js .hero h1 > span { clip-path: none; translate: none; }
  .marquee__track { animation: none; }
  .pencil path { transition: none; }
}

/* Tablet */
@media (max-width: 1023px) {
  .nav__links { display: none; }
  .nav { grid-template-columns: 1fr auto; }
  .hero h1 { grid-column: 1 / 13; }
  .hero__side { grid-column: 1 / 13; margin-top: 24px; max-width: 40em; }
  .develop .scene-stage { grid-template-columns: 1fr; align-content: center; }
  .develop__text, .tray { grid-column: 1 / -1; }
  .sheet__head h2, .sheet__statement { grid-column: 1 / 13; }
  .order { grid-template-columns: 1fr; }
  .plans { font-size: var(--step-body); }
  .tile--d p { grid-column: 4 / 13; }
}

/* Phone */
@media (max-width: 767px) {
  :root { --m: 16px; }
  .hero { padding-top: 88px; gap: 28px; }
  .hero h1 { font-size: 13.4vw; }
  .shot { height: 46vh; max-height: 300px; }
  .develop .scene-stage { padding-top: 80px; gap: 24px; }
  .timer { margin-top: 0; }
  .tiles { grid-template-columns: 1fr 1fr; grid-template-rows: 46svh auto auto; gap: 6px; padding: 6px; }
  .tile--a { grid-column: 1 / 3; grid-row: 1; }
  .tile--a h2 { font-size: 9.6vw; }
  .tile--b, .tile--c { grid-row: 2; aspect-ratio: 1; grid-column: auto; }
  .tile--b span { font-size: 22vw; }
  .tile--d { grid-column: 1 / 3; grid-template-columns: 1fr; padding: 24px 10px 48px; }
  .tile--d p { grid-column: 1; font-size: 1.125rem; padding: 0; }
  .filmstrip { padding: 0 11vw; gap: 10px; }
  .slide { width: 78vw; aspect-ratio: 4 / 5; }
  .series + .series { margin-top: 64px; }
  .facts { grid-template-columns: 1fr 1fr; }
  .series__text { grid-column: 1 / 3; max-width: none; }
  .series__link { grid-column: 1 / 3; }
  .strip { grid-template-columns: repeat(3, 1fr); }
  .contact-sheet { gap: 14px; }
  .how__btns { display: none; }
  .step { width: 72vw; }
  .step figure { margin-top: calc(var(--gap) / 2.5); }
  .step p { min-height: 0; }
  .plans, .plans thead, .plans thead tr, .plans thead th:first-child { display: block; width: 100%; padding: 0; }
  .plans thead th:not(:first-child), .plans tbody { display: none; }
  .pricing { padding-top: 64px; }
  .contact { min-height: 0; }
  .marquee img { height: 110px; }
  .contact h2 { margin: 48px var(--m) 24px; font-size: 9vw; }
  .bar { grid-template-columns: 1fr; height: auto; }
  .bar input, .bar button { height: 60px; }
  .contact__small { grid-template-columns: 1fr; }
  .contact__small p:last-child { grid-column: 1; }
  .foot { grid-template-columns: 1fr 1fr; grid-template-rows: auto; gap: 6px; padding: 6px; }
  .ft { grid-column: auto; min-height: 150px; }
  .ft--mark { grid-column: 1 / 3; min-height: 160px; }
  .ft--mark span { font-size: 15vw; }
  .ft--go { grid-column: 1 / 3; }
  .ft--state { grid-column: 1 / 3; font-size: 1.125rem; }
  .credits { grid-column: 1 / 3; }
}

/* Phone pricing: one block per formula, built by the script from the table (see ferrand.js); fallback stays readable. */
.plan-cards { display: none; }
@media (max-width: 767px) {
  .plan-cards { display: grid; gap: 40px; margin-top: 24px; }
  .plan-card { background: var(--surface); padding: 20px; display: grid; gap: 4px; }
  .plan-card.is-pick { background: var(--accent); color: var(--accent-ink); }
  .plan-card .plan, .plan-card .price { font-size: 9vw; }
  .plan-card dl { margin: 16px 0 20px; display: grid; gap: 12px; }
  .plan-card dt { color: var(--muted); font-size: 1rem; }
  .plan-card.is-pick dt { color: #ffd9d0; }
  .plan-card dd { margin: 0; font-size: 1.0625rem; }
  .plan-card .btn { width: 100%; }
}