/* Laqta: the camera's packaging, opened for the visitor.
   Olive from the flash slider, kraft and paper from the sticker, camera black, darkroom red only in small doses. */

@font-face {
  font-family: "Alexandria";
  src: url("/fonts/alexandria-arabic-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+200C-200F, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
  font-family: "Alexandria";
  src: url("/fonts/alexandria-arabic-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+200C-200F, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
  font-family: "Alexandria";
  src: url("/fonts/alexandria-arabic-800-normal.woff2") format("woff2");
  font-weight: 800;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+200C-200F, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
  font-family: "Alexandria";
  src: url("/fonts/alexandria-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0000-00FF, U+2000-206F, U+2212;
}
@font-face {
  font-family: "Alexandria";
  src: url("/fonts/alexandria-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
  unicode-range: U+0000-00FF, U+2000-206F, U+2212;
}
@font-face {
  font-family: "Alexandria";
  src: url("/fonts/alexandria-latin-800-normal.woff2") format("woff2");
  font-weight: 800;
  font-display: swap;
  unicode-range: U+0000-00FF, U+2000-206F, U+2212;
}
@font-face {
  font-family: "Ruqaa";
  src: url("/fonts/aref-ruqaa-arabic-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+200C-200F, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
  font-family: "Ruqaa";
  src: url("/fonts/aref-ruqaa-latin-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
  unicode-range: U+0000-00FF, U+2000-206F;
}

:root {
  color-scheme: light;
  --olive: #4b5244;
  --paper: #efe6d8;
  --paper-hi: #f7f1e7;
  --kraft: #cdbba4;
  --ink: #1b1a18;
  --ink-2: #4a433b;
  --on-olive-2: #ddd5c4;
  --on-ink-2: #c9bfae;
  --red: #c23b22;
  --line: rgba(27, 26, 24, 0.14);
  --field-line: rgba(27, 26, 24, 0.46);
  --font-text: "Alexandria", system-ui, sans-serif;
  --font-display: "Ruqaa", "Alexandria", serif;
  --gutter: 20px;
  --max: 1160px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  /* Static film grain: dark specks for light grounds, light specks for dark ones. */
  --grain-dark: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.1  0 0 0 0 0.09  0 0 0 0 0.08  0 0 0 0.16 0'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>");
  --grain-light: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.94  0 0 0 0 0.9  0 0 0 0 0.85  0 0 0 0.11 0'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>");
}

* { box-sizing: border-box; }
/* Components below set display on their own (the summary rows are flex); hidden must still win. */
[hidden] { display: none !important; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 16px;
  scrollbar-color: var(--olive) var(--kraft);
  accent-color: var(--olive);
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 17px/1.8 var(--font-text);
  font-feature-settings: "kern";
}
::selection { background: var(--olive); color: var(--paper); }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: 0.3em; text-decoration-thickness: 1.5px; }
button { font: inherit; color: inherit; }
h1, h2, h3, p { margin: 0; }
h1, h2 { font-family: var(--font-display); font-weight: 700; line-height: 1.2; text-wrap: balance; }
h2 { font-size: clamp(40px, 10.5vw, 72px); }
h3 { font-size: 19px; font-weight: 800; line-height: 1.5; }
.wrap { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 6px; }
.hero :focus-visible, .develop :focus-visible, .photos :focus-visible, .footer :focus-visible, .buybar :focus-visible, .strip :focus-visible {
  outline-color: var(--kraft);
}
/* The headline takes focus on load (autofocus, see index.html); a heading is not a control, so it shows no ring. */
#hero-title:focus { outline: none; }

/* The wordmark is a mask so each ground can colour it. */
.brand-mark {
  display: block;
  aspect-ratio: 420 / 256;
  background: currentColor;
  -webkit-mask: url("/assets/logo-mark.webp") center / contain no-repeat;
  mask: url("/assets/logo-mark.webp") center / contain no-repeat;
}

/* ---------- Hero: the camera on its own olive ---------- */
.hero {
  position: relative;
  overflow: hidden;
  color: var(--paper);
  background: var(--grain-light), var(--olive);
  padding-bottom: 46px;
}
.hero::before {
  /* The Martyr's Monument drawn faintly into the horizon. */
  content: "";
  position: absolute;
  inset-inline: -10%;
  bottom: 18px;
  height: clamp(150px, 36vw, 360px);
  background: var(--paper);
  opacity: 0.07;
  -webkit-mask: url("/assets/art/martyr-line-bg.webp") center bottom / contain no-repeat;
  mask: url("/assets/art/martyr-line-bg.webp") center bottom / contain no-repeat;
  pointer-events: none;
}
.hero::after {
  /* The flash veil, lit only for a moment when the camera is tapped. */
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 80% at 28% 38%, rgba(255, 252, 240, 0.85), rgba(255, 252, 240, 0) 70%);
  opacity: 0;
  pointer-events: none;
  z-index: 4;
}
.hero.is-flashing::after { animation: veil 700ms var(--ease-out); }
@keyframes veil {
  0% { opacity: 0; }
  8% { opacity: 0.75; }
  100% { opacity: 0; }
}
.topbar {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 16px 4px;
}
.brand { display: block; width: 88px; color: var(--paper); }
.topbar-order {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 20px;
  border: 1.5px solid rgba(239, 230, 216, 0.55);
  border-radius: 999px;
  color: var(--paper);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.25s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) { .topbar-order:hover { background: var(--paper); color: var(--olive); } }
.topbar-order:active { transform: scale(0.97); transition-duration: 0.16s; }

.hero-inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
}
.hero-stage {
  /* How far the turn's lowest photo reaches below the first one, as a share of the photo's width (the spin build prints it). */
  --dip: 0.078;
  /* The real camera stands taller for its width than the render did; this keeps the first phone screen's room for it the same. */
  --pad: 9%;
  order: -1;
  position: relative;
  /* The headline starts just under the lowest the camera reaches as it turns; 100% less the padding is the photo's width. */
  margin-block: 18px calc(var(--dip) * (100% - 2 * var(--pad)) + 8px);
  padding-inline: var(--pad);
}
.shot {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  transition: transform 0.5s var(--ease-out);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
@media (hover: hover) and (pointer: fine) { .shot:hover { transform: translateY(-3px); } }
.shot:active { transform: scale(0.985); transition-duration: 0.12s; }
.shot img,
.shot canvas {
  width: 100%;
  /* The frames leave room above and below for the taller end-on views; the button keeps only the first frame's height and lets the rest overflow. */
  margin-block: -10% -10%;
  pointer-events: none; /* taps and drags land on the button */
  /* A photo has its own perspective, so it stands straight on a soft shadow rather than tilted on a heavy one. */
  filter: drop-shadow(0 22px 18px rgba(20, 22, 15, 0.3)) drop-shadow(0 4px 4px rgba(20, 22, 15, 0.3));
}
/* Once the frames are in, a canvas over the first photo draws the turn; the photo stays underneath to hold the layout. */
.shot canvas { position: absolute; inset-inline: 0; top: 0; }
.shot.is-live img { visibility: hidden; }
.shot-flash {
  /* Sits over the flash window in the first spin frame (about 85% across, 22% down the button); turned away, only the veil fires. */
  position: absolute;
  left: 85%;
  top: 22%;
  width: 48%;
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(circle, #fffef6 0%, rgba(255, 254, 246, 0.85) 18%, rgba(255, 254, 246, 0) 62%);
  opacity: 0;
  pointer-events: none;
}
.hero.is-flashing .shot-flash { animation: pop 520ms var(--ease-out); }
.shot.is-turned .shot-flash { display: none; }

/* The camera turns on a turntable: a sideways drag on the camera turns it, and a kraft dot rides round the plate with the
   camera's front. Keys and screen readers turn it with a slider kept out of sight, whose focus rings the plate. */
.shot.is-live { touch-action: pan-y pinch-zoom; cursor: grab; }
.shot.is-live:active { cursor: grabbing; }
.plate {
  /* About the camera's axis, seen from as far above as the photos were (the end-on corner drops 0.078 of the width for
     0.37 of it nearer the lens), wide enough for the camera's corners; its back half hides behind the camera. */
  position: absolute;
  left: 50%;
  top: 100%;
  width: calc(1.1 * (100% - 2 * var(--pad)));
  aspect-ratio: 1 / 0.21;
  margin-top: calc(-0.118 * (100% - 2 * var(--pad)));
  translate: -50% -50%;
  border: 1.5px solid rgba(239, 230, 216, 0.3);
  border-radius: 50%;
  background: rgba(20, 22, 15, 0.08);
  pointer-events: none;
}
.hero-stage:has(.turn :focus-visible) .plate { outline: 3px solid var(--kraft); outline-offset: 3px; }
.plate-dot {
  /* At the front when the camera faces the visitor; the front turns left as the turn goes on. */
  position: absolute;
  left: calc(50% - sin(calc(var(--turn, 0) * 1turn)) * 50%);
  top: calc(50% + cos(calc(var(--turn, 0) * 1turn)) * 50%);
  width: 12px;
  height: 12px;
  translate: -50% -50%;
  border-radius: 50%;
  background: var(--kraft);
  box-shadow: 0 0 0 1.5px var(--ink), 0 2px 5px rgba(15, 16, 12, 0.4);
}
/* Without the trig functions the dot would sit on the plate's corner, saying nothing about the turn. */
@supports not (top: calc(cos(1turn) * 1%)) { .plate-dot { display: none; } }
@keyframes pop {
  0% { opacity: 0; scale: 0.4; }
  10% { opacity: 1; scale: 1; }
  100% { opacity: 0; scale: 1.25; }
}

/* The film ticket: specs as an object, and the shot counter. */
.ticket {
  /* Hangs from the camera's black base on the left, beside the headline and clear of the line under it; the logo, the
     tagline and the Malwiya print stay clear. */
  position: absolute;
  left: 1%;
  top: 74%;
  z-index: 3;
  cursor: pointer;
  width: clamp(104px, 28vw, 168px);
  padding: 0 0 10px;
  border-radius: 10px;
  background: var(--grain-dark), var(--paper-hi);
  color: var(--ink);
  transform: rotate(6deg);
  box-shadow: 0 18px 26px -12px rgba(15, 16, 12, 0.55), 0 2px 4px rgba(15, 16, 12, 0.18);
  text-align: center;
  line-height: 1.2;
}
.ticket-band {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  padding: 7px 10px;
  border-radius: 10px 10px 0 0;
  background: var(--ink);
  color: var(--kraft);
  font: 600 10px/1 var(--font-text);
  letter-spacing: clamp(0.1em, 0.6vw, 0.2em);
  direction: ltr;
}
.ticket-count {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
  padding: 10px 8px 2px;
}
.ticket-num {
  font: 800 clamp(40px, 11vw, 56px)/1 var(--font-text);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.ticket-num.is-low { color: var(--red); }
.ticket-word { font: 700 clamp(20px, 5.4vw, 26px)/1 var(--font-display); }
.ticket-meta {
  position: relative;
  margin: 8px 0 0;
  padding: 9px 8px 0;
  border-top: 2px dashed rgba(27, 26, 24, 0.32);
  font: 600 clamp(11px, 3.1vw, 12px)/1.3 var(--font-text);
  white-space: nowrap;
}
.ticket-meta::before, .ticket-meta::after {
  /* Punch notches on the tear line, coloured like the field behind. */
  content: "";
  position: absolute;
  top: -8px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--olive);
}
.ticket-meta::before { left: -7px; }
.ticket-meta::after { right: -7px; }
.ticket-foot {
  margin-top: 5px;
  padding-inline: 8px;
  color: var(--ink-2);
  font: 400 11.5px/1.35 var(--font-text);
}

.hero-copy { position: relative; }
.hero h1 {
  font-size: clamp(54px, 15vw, 96px);
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.lede {
  margin-top: 8px;
  color: var(--on-olive-2);
  font-size: 17.5px;
  line-height: 1.85;
}
/* Under 360px the ticket and the headline collide. The headline drops its 54px floor and follows the viewport
   (45px at 320, 50px at 359), and the ticket narrows, so the two sit side by side with the headline's left edge clear of the ticket. */
@media (max-width: 359px) {
  .hero h1 { font-size: 14vw; }
  .ticket { width: 92px; }
  .ticket .ticket-band { gap: 4px; padding-inline: 8px; letter-spacing: 0.08em; }
  .ticket .ticket-meta { padding-inline: 4px; font-size: 10px; }
  .ticket .ticket-count { gap: 5px; padding-inline: 4px; }
  .ticket .ticket-num { font-size: 36px; }
  .ticket .ticket-word { font-size: 19px; }
}
.buy { margin-top: 22px; display: grid; gap: 14px; max-width: 460px; }
/* "من" and the cheapest package's price share one line; the number never splits from its currency. */
.buy-price { display: flex; align-items: baseline; gap: 10px; }
.buy-from { color: var(--on-olive-2); font-size: 16px; font-weight: 600; }
.buy-price strong {
  font: 800 30px/1.1 var(--font-text);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.stepper button {
  position: relative;
  height: 44px;
  border: 0;
  background: transparent;
  cursor: pointer;
  border-radius: 999px;
  font-size: 0;
}
.stepper button::before, .stepper button::after {
  /* Plus and minus are drawn, not typed. */
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  width: 14px;
  height: 2px;
  translate: -50% -50%;
  border-radius: 2px;
  background: currentColor;
}
.stepper button[data-step="1"]::after { rotate: 90deg; }
.stepper button[data-step="-1"]::after { display: none; }
.stepper button:disabled { opacity: 0.32; cursor: default; }

.cta {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  column-gap: 12px;
  min-height: 66px;
  padding: 10px 22px;
  border-radius: 16px;
  background: var(--kraft);
  color: var(--ink);
  text-decoration: none;
  box-shadow: 0 14px 26px -14px rgba(15, 16, 12, 0.6), inset 0 -3px 0 rgba(27, 26, 24, 0.12);
  transition: transform 0.25s var(--ease-out), background-color 0.2s ease;
}
@media (hover: hover) and (pointer: fine) { .cta:hover { background: #d8c8b3; transform: translateY(-2px); } }
.cta:active { transform: scale(0.97); transition-duration: 0.16s; }
.cta-lead { grid-column: 1; font-size: 13px; line-height: 1.3; color: var(--ink-2); }
.cta-main { grid-column: 1; font: 800 19px/1.35 var(--font-text); }
.cta-arrow { grid-column: 2; grid-row: 1 / span 2; width: 26px; height: 26px; transition: translate 0.25s var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .cta:hover .cta-arrow { translate: -4px 0; } }
.buy-note { color: var(--on-olive-2); font-size: 14.5px; line-height: 1.7; text-wrap: pretty; }
.lede, .develop-lede, .howto-head p, .order-intro > p, .steps p, .trail p, .faq details p { text-wrap: pretty; }
.buy-note span { white-space: nowrap; }

/* ---------- The strip ---------- */
.strip-wrap { position: relative; z-index: 5; overflow: hidden; padding-block: 22px; margin-block: -44px -22px; }
.strip {
  width: 112%;
  margin-inline: -6%;
  background: var(--grain-light), var(--ink);
  color: var(--kraft);
  transform: rotate(-2deg);
  box-shadow: 0 16px 28px -16px rgba(15, 16, 12, 0.65);
  overflow: hidden;
}
.strip-rail { display: flex; width: max-content; animation: drift 46s linear infinite; }
@media (hover: hover) and (pointer: fine) { .strip:hover .strip-rail { animation-play-state: paused; } }
.strip-list { display: flex; margin: 0; padding: 0; list-style: none; }
.strip-list li {
  display: flex;
  align-items: center;
  min-height: 58px;
  padding-inline: 22px;
  font: 600 17px/1 var(--font-text);
  white-space: nowrap;
}
.strip-list li::after {
  content: "";
  width: 7px;
  height: 7px;
  margin-inline-start: 44px;
  border-radius: 50%;
  background: var(--red);
}
@keyframes drift { to { transform: translateX(50%); } }
@media (prefers-reduced-motion: reduce) {
  .strip-rail { animation: none; }
  .strip-list[aria-hidden="true"] { display: none; }
}

.extra-band { border-radius: 14px 14px 0 0; padding: 10px 16px; font-size: 11px; }

/* ---------- How to use: the camera's back teaches itself ---------- */
.howto {
  position: relative;
  background: var(--grain-dark), var(--paper);
  padding-block: 96px 88px;
}
.howto-inner { display: grid; gap: 28px; }
.howto-head p { margin-top: 10px; color: var(--ink-2); max-width: 38ch; }
.back-shot { margin: 6px 0 0; }
.back-shot img {
  width: 100%;
  transform: rotate(2deg);
  filter: drop-shadow(0 24px 20px rgba(27, 26, 24, 0.28)) drop-shadow(0 5px 6px rgba(27, 26, 24, 0.18));
}
.steps, .trail { margin: 0; padding: 0; list-style: none; }
.steps { display: grid; gap: 22px; margin-top: 8px; }
.steps li { display: grid; grid-template-columns: 58px 1fr; gap: 16px; align-items: start; }
.steps p { margin-top: 2px; color: var(--ink-2); font-size: 16px; line-height: 1.75; }
.box-n {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border: 2px solid currentColor;
  border-radius: 12px;
  font: 800 30px/1 var(--font-text);
}

/* ---------- After the last shot: a film strip ---------- */
.develop {
  position: relative;
  background: var(--grain-light), var(--ink);
  color: var(--paper);
  padding-block: 104px;
}
.develop::before, .develop::after {
  /* Sprocket holes along both edges, like the film inside the camera. */
  content: "";
  position: absolute;
  inset-inline: 0;
  height: 12px;
  background: repeating-linear-gradient(to left, transparent 0 14px, rgba(239, 230, 216, 0.16) 14px 30px);
}
.develop::before { top: 26px; }
.develop::after { bottom: 26px; }
.develop h2 { color: var(--kraft); }
.develop-lede { margin-top: 14px; max-width: 46ch; color: var(--on-ink-2); }
.trail { display: grid; gap: 30px; margin-top: 44px; }
.trail li { position: relative; display: grid; grid-template-columns: 58px 1fr; column-gap: 16px; }
.trail .box-n { grid-row: 1 / span 2; color: var(--kraft); }
.trail h3 { align-self: end; }
.trail p { color: var(--on-ink-2); font-size: 16px; line-height: 1.7; }
.trail li:not(:last-child)::before {
  content: "";
  position: absolute;
  inset-inline-start: 28px;
  top: 64px;
  bottom: -26px;
  border-inline-start: 2px dashed rgba(205, 187, 164, 0.4);
}
.later { margin-top: 48px; padding-top: 22px; border-top: 1px solid rgba(239, 230, 216, 0.16); }
.later > p { color: var(--on-ink-2); max-width: 46ch; text-wrap: pretty; }
.later-list { display: grid; gap: 12px; margin: 18px 0 0; }
.later-list div { display: grid; gap: 2px; }
.later-list dt { color: var(--paper); font-weight: 600; }
.later-list dd { margin: 0; color: var(--kraft); font: 800 26px/1.2 var(--font-text); font-variant-numeric: tabular-nums; }

/* ---------- Film photos: a contact strip on olive ---------- */
.photos {
  position: relative;
  overflow: hidden;
  background: var(--grain-light), var(--olive);
  color: var(--paper);
  padding-block: 96px 104px;
}
.photos-head p { margin-top: 10px; color: var(--on-olive-2); max-width: 40ch; text-wrap: pretty; }
.reel-wrap {
  /* A black strip of film with sprocket holes along both edges; the frames scroll inside it on phones. */
  position: relative;
  margin-top: 36px;
  background: var(--grain-light), var(--ink);
  box-shadow: 0 16px 28px -16px rgba(15, 16, 12, 0.65);
}
.reel-wrap::before, .reel-wrap::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  height: 10px;
  background: repeating-linear-gradient(to left, transparent 0 12px, rgba(239, 230, 216, 0.2) 12px 26px);
  pointer-events: none;
}
.reel-wrap::before { top: 9px; }
.reel-wrap::after { bottom: 9px; }
.reel {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.reel::-webkit-scrollbar { display: none; }
.reel-list { display: flex; gap: 12px; width: max-content; margin: 0; padding: 30px 20px; list-style: none; }
/* The scans are shown as shot: one height for the reel, each width follows its own photo, and nothing lies over them. */
.frame { flex: 0 0 auto; scroll-snap-align: center; }
.frame img { width: auto; height: min(52vw, 248px); border-radius: 2px; }

/* ---------- Order ---------- */
.order {
  position: relative;
  overflow: hidden;
  background: var(--grain-dark), var(--paper);
  padding-block: 96px;
}
.order::before {
  /* The Malwiya rises faintly behind the form. */
  content: "";
  position: absolute;
  inset-inline-end: -40px;
  bottom: -20px;
  width: clamp(240px, 52vw, 470px);
  aspect-ratio: 553 / 760;
  background: var(--ink);
  opacity: 0.06;
  -webkit-mask: url("/assets/art/malwiya-line-bg.webp") center bottom / contain no-repeat;
  mask: url("/assets/art/malwiya-line-bg.webp") center bottom / contain no-repeat;
  pointer-events: none;
}
.order-layout { position: relative; display: grid; gap: 30px; }
.order-intro > p { margin-top: 10px; color: var(--ink-2); max-width: 36ch; }
.facts { display: grid; gap: 10px; margin: 22px 0 0; padding: 0; list-style: none; }
.facts li { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 16px; }
.facts svg { width: 22px; height: 22px; flex-shrink: 0; color: var(--olive); }
.order-card {
  /* The form is the same ticket the visitor gets back on the thanks page. */
  --card-pad: 20px;
  padding: 26px var(--card-pad) 22px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--paper-hi);
  box-shadow: 0 34px 60px -40px rgba(27, 26, 24, 0.55), 0 2px 6px rgba(27, 26, 24, 0.06);
}
.order-band { margin: -26px calc(-1 * var(--card-pad)) 24px; padding: 11px var(--card-pad); border-radius: 21px 21px 0 0; font-size: 11px; }
.field { display: grid; gap: 7px; margin-bottom: 18px; }
label, .label { font-size: 15.5px; font-weight: 600; }
input:not([type="radio"], [type="checkbox"]), select, textarea {
  width: 100%;
  min-height: 54px;
  padding: 0 15px;
  border: 1.5px solid var(--field-line);
  border-radius: 12px;
  background: #fffdf9;
  color: var(--ink);
  font: 400 17px/1.4 var(--font-text);
  caret-color: var(--red);
  appearance: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
input::placeholder { color: #75706a; opacity: 1; }
input:not([type="radio"], [type="checkbox"]):focus, select:focus, textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(75, 82, 68, 0.28); }
select {
  padding-left: 42px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%231b1a18' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 15px center;
}
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--red); }
textarea { min-height: 96px; padding-block: 12px; line-height: 1.6; resize: vertical; }
input[type="radio"], input[type="checkbox"] { width: 22px; height: 22px; margin: 0; flex-shrink: 0; accent-color: var(--olive); cursor: pointer; }
.field-error { color: #a32e19; font-size: 14.5px; line-height: 1.5; }
.stepper {
  display: inline-grid;
  grid-template-columns: 54px 64px 54px;
  align-items: center;
  width: max-content;
  border: 1.5px solid var(--field-line);
  border-radius: 12px;
  background: #fffdf9;
}
.stepper button { height: 52px; border-radius: 10px; color: var(--ink); }
.stepper output { text-align: center; font: 800 20px/1 var(--font-text); font-variant-numeric: tabular-nums; }
.qty-bar { display: flex; overflow: hidden; border: 1.5px solid var(--field-line); border-radius: 12px; background: #fffdf9; }
.qty-seg { display: grid; flex: 1 1 0; place-content: center; gap: 1px; min-width: 0; min-height: 54px; border: 0; border-inline-start: 1px solid var(--line); background: transparent; color: var(--ink); font: 800 18px/1.1 var(--font-text); font-variant-numeric: tabular-nums; cursor: pointer; }
.qty-seg:first-child { border-inline-start: 0; }
.qty-seg.is-on { background: var(--ink); color: var(--paper); }
/* The bar clips what is drawn outside it, so the ring sits inside the segment; paper shows on the ink segment, ink on the plain one. */
.qty-seg:focus-visible { outline-offset: -5px; }
.qty-seg.is-on:focus-visible { outline-color: var(--paper); }
.qty-seg small { color: var(--olive); font: 700 11.5px/1 var(--font-text); }
.qty-seg.is-on small { color: var(--kraft); }
.qty-seg.qty-other { flex-grow: 1.5; font: 600 14.5px/1 var(--font-text); }
#qty-stepper { margin-top: 10px; }
.summary dd { white-space: nowrap; }
.summary .r-item, #s-bundle-row { align-items: center; gap: 8px; }
.summary .r-item dt, #s-bundle-label { flex: 1; min-width: 0; font-size: 15px; line-height: 1.4; }
.summary .r-qty { order: -1; flex: none; padding: 0 7px; border: 1.5px solid var(--ink); border-radius: 6px; color: var(--ink); font-size: 14px; font-weight: 800; line-height: 1.55; }
.hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.summary { position: relative; display: grid; gap: 8px; margin: 24px 0 18px; padding-top: 16px; border-top: 2px dashed rgba(27, 26, 24, 0.3); }
.summary::before, .summary::after {
  /* Punch notches where the tear line meets the card edge, coloured like the section behind. */
  content: "";
  position: absolute;
  top: -9px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--paper);
}
.summary::before { left: calc(-1 * var(--card-pad) - 9px); }
.summary::after { right: calc(-1 * var(--card-pad) - 9px); }
.summary div { display: flex; justify-content: space-between; gap: 12px; }
.summary dt { color: var(--ink-2); }
.summary dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.summary .total { margin-top: 4px; }
.summary .total dt { color: var(--ink); font-weight: 600; }
.summary .total dd { font: 800 22px/1.3 var(--font-text); }
.turnstile { margin-bottom: 14px; }
.turnstile:empty { display: none; }
.form-error {
  margin: 0 0 14px;
  padding: 12px 14px;
  border-radius: 12px;
  background: #f4d9cf;
  color: #8f2614;
  font-size: 15px;
  line-height: 1.6;
}
.form-error a { display: inline-block; padding-block: 10px; font-weight: 600; }
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 58px;
  padding: 0 28px;
  border: 0;
  border-radius: 14px;
  background: var(--ink);
  color: var(--paper);
  font: 800 18px/1 var(--font-text);
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 14px 26px -16px rgba(27, 26, 24, 0.75);
  transition: transform 0.2s var(--ease-out), background-color 0.2s ease, opacity 0.2s ease;
}
@media (hover: hover) and (pointer: fine) { .btn:hover { background: #2c2a27; transform: translateY(-1px); } }
.btn:active { transform: scale(0.97); transition-duration: 0.16s; }
.btn:disabled { opacity: 0.6; cursor: progress; transform: none; }
.btn-block { width: 100%; }
.form-note { margin-top: 12px; text-align: center; color: var(--ink-2); font-size: 14px; line-height: 1.6; }
.form-note a, .legal-body a { color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(27, 26, 24, 0.35); text-underline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .form-note a:hover, .legal-body a:hover { text-decoration-color: currentColor; } }
fieldset { min-inline-size: 0; margin: 0; padding: 0; border: 0; }
legend { padding: 0; }
.pick { gap: 8px; }
.pick legend { margin-bottom: 7px; }
.pick-list { display: grid; gap: 12px; }
.pick-card {
  /* A small ticket stub per package: the dot says which one is picked, the photo says what you get back. */
  position: relative;
  display: grid;
  grid-template-columns: 20px 58px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1.5px solid var(--field-line);
  border-radius: 14px;
  background: #fffdf9;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
.pick-card input {
  /* The real radio covers the card: taps, keys, screen readers and the browser's restore all go through it. */
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
@media (hover: hover) and (pointer: fine) { .pick-card:hover { border-color: var(--ink-2); } }
.pick-card:has(input:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); background: var(--grain-dark), var(--paper-hi); }
.pick-card:has(input:focus-visible) { outline: 3px solid var(--ink); outline-offset: 2px; }
.pick-dot {
  width: 20px;
  height: 20px;
  border: 2px solid var(--field-line);
  border-radius: 50%;
  background: #fffdf9;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
.pick-card:has(input:checked) .pick-dot { border-color: var(--ink); background: var(--ink); box-shadow: inset 0 0 0 4px var(--paper-hi); }
.pick-thumb { position: relative; width: 58px; height: 58px; overflow: hidden; border-radius: 10px; background: var(--paper); }
.pick-thumb img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.86) sepia(0.08); }
.pick-thumb::after {
  /* The page's grain over the stock photo, as on every other picture. */
  content: "";
  position: absolute;
  inset: 0;
  background: var(--grain-dark);
  pointer-events: none;
}
.pick-thumb--camera { display: grid; place-items: center; background: var(--grain-dark), var(--paper); }
.pick-thumb--camera img { width: 92%; height: auto; object-fit: contain; filter: drop-shadow(0 6px 5px rgba(27, 26, 24, 0.28)); transform: rotate(-3deg); }
.pick-thumb--camera::after { display: none; }
.pick-body { display: grid; gap: 2px; min-width: 0; line-height: 1.45; }
.pick-name { font-size: 16px; font-weight: 800; }
.pick-has { color: var(--ink-2); font-size: 14px; text-wrap: pretty; }
.pick-cost { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin-top: 4px; }
.pick-price { font: 800 18px/1.3 var(--font-text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pick-offer { display: flex; flex-wrap: wrap; gap: 0 8px; font-size: 13.5px; }
.pick-offer s { color: var(--ink-2); text-decoration-thickness: 1.5px; white-space: nowrap; }
.pick-save { color: var(--olive); font-weight: 600; white-space: nowrap; }
.pick-tag {
  /* The olive stamp from the old ticket, now pinned to the card's top edge. */
  position: absolute;
  top: -11px;
  inset-inline-end: 14px;
  z-index: 2;
  padding: 2px 12px;
  border-radius: 999px;
  background: var(--olive);
  color: var(--paper);
  font: 600 12.5px/1.6 var(--font-text);
  transform: rotate(-3deg);
  box-shadow: 0 6px 10px -6px rgba(15, 16, 12, 0.6);
  pointer-events: none;
}
.pick-card:has(.pick-tag) { margin-top: 6px; padding-top: 20px; }
.bundle-line { color: var(--ink-2); font-size: 14.5px; line-height: 1.6; }
.bundle-line:empty { display: none; }
.bundle-line.is-on { color: var(--olive); font-weight: 600; }
.promo { margin: -4px 0 18px; }
.promo summary {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 15.5px;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.3em;
  list-style: none;
  cursor: pointer;
}
.promo summary::-webkit-details-marker { display: none; }
.promo[open] summary { text-decoration: none; }
.promo-body { display: grid; gap: 7px; margin-top: 4px; }
.promo-row { display: flex; gap: 8px; }
.promo-row input { flex: 1; min-width: 0; letter-spacing: 0.06em; text-transform: uppercase; }
.promo-apply {
  min-height: 54px;
  padding: 0 20px;
  border: 1.5px solid var(--ink);
  border-radius: 12px;
  background: transparent;
  color: var(--ink);
  font: 800 16px/1 var(--font-text);
  cursor: pointer;
}
.promo-ok { color: var(--olive); font-size: 14.5px; font-weight: 600; line-height: 1.6; }
.check { display: flex; align-items: center; gap: 12px; min-height: 44px; cursor: pointer; }
.gift-box { display: grid; gap: 7px; margin-top: 4px; }
.optional { color: var(--ink-2); font-weight: 400; }
.gift-count { color: var(--ink-2); font-size: 13.5px; font-variant-numeric: tabular-nums; }
.summary dd s { margin-inline-end: 8px; color: var(--ink-2); font-weight: 400; text-decoration-thickness: 1.5px; }

/* ---------- Add-ons: small sold-out tickets on a kraft strip inside the order form ---------- */
.addons { display: grid; gap: 4px; margin-bottom: 18px; }
.addons-track {
  /* The strip runs to the order card's edges, so the next ticket peeks in from the side and says "swipe". */
  margin: 8px calc(-1 * var(--card-pad)) 0;
  padding: 18px var(--card-pad) 22px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--card-pad);
  background: var(--grain-dark), var(--kraft);
  scrollbar-width: none;
}
.addons-track::-webkit-scrollbar { display: none; }
@media (pointer: fine) {
  /* A mouse cannot swipe, so desktop shows a thin scrollbar under the tickets. */
  .addons-track { scrollbar-width: thin; scrollbar-color: rgba(27, 26, 24, 0.45) transparent; }
}
.extras-list { display: flex; align-items: flex-start; gap: 14px; width: max-content; margin: 0; padding: 0; list-style: none; }
.extra {
  /* The order ticket's little sibling, sold out: ink band, a kraft picture panel, the name and its stamp, then a tear line above the button. */
  position: relative;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  width: 164px;
  border-radius: 14px;
  background: var(--grain-dark), var(--paper-hi);
  color: var(--ink);
  box-shadow: 0 12px 20px -12px rgba(15, 16, 12, 0.5), 0 2px 4px rgba(15, 16, 12, 0.12);
  scroll-snap-align: start;
}
.extra-pic {
  /* A line drawing in the landmark art's thin ink on kraft, until the client's photo arrives (each card carries a CLIENT-CONFIRM marker). */
  position: relative;
  aspect-ratio: 5 / 2;
  overflow: hidden;
  background: var(--kraft);
  color: var(--ink);
}
.extra-pic::after {
  /* The page's grain over the drawing, like the package pictures. */
  content: "";
  position: absolute;
  inset: 0;
  background: var(--grain-dark);
  pointer-events: none;
}
.extra-pic svg { display: block; width: 100%; height: 100%; }
.extra-pic .line { fill: none; stroke: currentColor; stroke-width: 1.15; stroke-linecap: round; stroke-linejoin: round; }
.extra-pic .fine { fill: none; stroke: currentColor; stroke-width: 0.6; stroke-linecap: round; opacity: 0.85; }
.extra-pic .knock { fill: var(--kraft); }
.extra-pic img { width: 100%; height: 100%; object-fit: cover; }
.extra-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 12px 14px 14px;
}
.extra-body h3 { font-size: 16px; line-height: 1.4; }
.extra-price { font: 800 14.5px/1.3 var(--font-text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.extra-foot {
  position: relative;
  display: grid;
  gap: 10px;
  margin-top: auto;
  padding: 14px;
  border-top: 2px dashed rgba(27, 26, 24, 0.3);
}
.extra-foot::before, .extra-foot::after {
  /* Punch notches in the kraft strip behind the ticket. */
  content: "";
  position: absolute;
  top: -9px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--kraft);
}
.extra-foot::before { left: -8px; }
.extra-foot::after { right: -8px; }
.extra-add {
  min-height: 47px; /* the height of the stepper that replaces it, so the ticket does not jump */
  padding: 0 18px;
  border: 1.5px solid var(--ink);
  border-radius: 12px;
  background: transparent;
  color: var(--ink);
  font: 700 15px/1 var(--font-text);
  cursor: pointer;
}
.extra-stepper { grid-template-columns: 44px 40px 44px; justify-self: center; }
.extra-stepper button { height: 44px; }
.extra-stepper output { font-size: 16px; }
.chips { display: grid; flex: 0 0 auto; align-content: start; gap: 10px; width: 186px; margin: 0; padding: 0; list-style: none; scroll-snap-align: start; }
.chips:empty { display: none; }
.chip { display: grid; gap: 8px; padding: 10px 12px; border: 1.5px dashed rgba(27, 26, 24, 0.6); border-radius: 12px; }
.chip-top { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.chip-name { font-size: 14.5px; font-weight: 600; line-height: 1.3; }
.chip-stamp { padding: 0 7px; border: 1.5px solid currentColor; border-radius: 6px; font: 600 12px/1.6 var(--font-text); white-space: nowrap; transform: rotate(-3deg); }
.chip-btn { width: 100%; min-height: 44px; padding: 0 14px; border-radius: 12px; font: 700 15px/1 var(--font-text); cursor: pointer; }
.chip-btn { border: 1.5px solid var(--ink); background: transparent; color: var(--ink); }
.chip-done { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); font-weight: 700; font-size: 14.5px; }
.chip-done::before { content: ""; flex: none; width: 5px; height: 10px; margin-inline-end: 3px; border: solid currentColor; border-width: 0 2.4px 2.4px 0; rotate: 45deg; translate: 0 -2px; }

/* ---------- Questions ---------- */
.faq {
  background: var(--grain-dark), var(--kraft);
  padding-block: 88px 96px;
}
.faq-list { margin-top: 18px; max-width: 760px; }
.faq details { border-bottom: 1.5px solid rgba(27, 26, 24, 0.2); }
.faq summary {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 64px;
  padding-block: 14px;
  padding-inline-end: 40px;
  list-style: none;
  font-weight: 600;
  font-size: 17px;
  cursor: pointer;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before, .faq summary::after {
  content: "";
  position: absolute;
  inset-inline-end: 6px;
  top: 50%;
  width: 16px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: rotate 0.25s var(--ease-out);
}
.faq summary::after { rotate: 90deg; }
.faq details[open] summary::after { rotate: 0deg; }
.faq details p { padding-bottom: 18px; color: #3d362e; max-width: 60ch; }

/* ---------- Terms and privacy ---------- */
.legal {
  background: var(--grain-dark), var(--paper);
  padding-block: 80px 88px;
}
.legal-lede { margin-top: 8px; color: var(--ink-2); font-size: 15px; }
.legal-list { margin-top: 18px; max-width: 760px; }
.legal details { border-bottom: 1.5px solid rgba(27, 26, 24, 0.2); scroll-margin-top: 16px; }
.legal summary {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 64px;
  padding-block: 14px;
  padding-inline-end: 40px;
  list-style: none;
  font-weight: 800;
  font-size: 18px;
  cursor: pointer;
}
.legal summary::-webkit-details-marker { display: none; }
.legal summary::before, .legal summary::after {
  content: "";
  position: absolute;
  inset-inline-end: 6px;
  top: 50%;
  width: 16px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: rotate 0.25s var(--ease-out);
}
.legal summary::after { rotate: 90deg; }
.legal details[open] summary::after { rotate: 0deg; }
.legal-body { display: grid; gap: 10px; padding-bottom: 26px; max-width: 66ch; color: var(--ink-2); font-size: 16px; line-height: 1.85; text-wrap: pretty; }
/* Answers slide open where the browser can animate to their natural height; elsewhere they open at once. */
@supports (interpolate-size: allow-keywords) {
  .faq details, .legal details { interpolate-size: allow-keywords; }
  .faq details::details-content,
  .legal details::details-content {
    block-size: 0;
    overflow-y: clip;
    transition: block-size 0.25s var(--ease-out), content-visibility 0.25s var(--ease-out) allow-discrete;
  }
  .faq details[open]::details-content,
  .legal details[open]::details-content { block-size: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .faq details::details-content, .legal details::details-content { transition: none; }
}
.legal-body h3 { margin-top: 12px; color: var(--ink); font: 800 16.5px/1.5 var(--font-text); }
/* A phone number or a setting's name read across a line break is easy to misread. */
.legal-body bdi { white-space: nowrap; }
.legal-body h3:first-child { margin-top: 0; }
.legal-points { display: grid; gap: 8px; margin: 0; padding-inline-start: 20px; }
.legal-points li { padding-inline-start: 4px; }
.legal-points li::marker { color: var(--olive); }

/* ---------- Footer ---------- */
.footer {
  background: var(--grain-light), var(--ink);
  color: var(--paper);
  padding-block: 72px 132px;
}
.footer-inner { display: grid; justify-items: center; gap: 18px; text-align: center; }
.brand-mark--footer { width: 132px; color: var(--kraft); }
.footer-line { font: 700 clamp(34px, 9vw, 54px)/1.2 var(--font-display); color: var(--paper); }
.cta--footer { min-width: min(100%, 320px); margin-top: 6px; }
.footer-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 28px; margin-top: 8px; }
.footer-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--kraft);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(205, 187, 164, 0.45);
}
@media (hover: hover) and (pointer: fine) { .footer-nav a:hover { text-decoration-color: currentColor; } }
.footer-small { color: var(--on-ink-2); font-size: 14px; }

/* ---------- Sticky order bar ---------- */
.buybar {
  position: fixed;
  inset-inline: 10px;
  bottom: calc(10px + env(safe-area-inset-bottom));
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  max-width: 560px;
  margin-inline: auto;
  padding: 9px;
  padding-inline-start: 18px;
  border: 1px solid rgba(239, 230, 216, 0.14);
  border-radius: 18px;
  background: var(--grain-light), var(--ink);
  color: var(--paper);
  box-shadow: 0 18px 40px -16px rgba(15, 16, 12, 0.7);
  transform: translateY(calc(100% + 30px));
  transition: transform 0.2s var(--ease-out);
}
.buybar.is-on { transform: translateY(0); transition-duration: 0.3s; }
.buybar-price { display: grid; line-height: 1.3; }
.buybar-price strong { font: 800 19px/1.3 var(--font-text); font-variant-numeric: tabular-nums; }
.buybar-price span { color: var(--on-ink-2); font-size: 13px; }
.buybar-cta {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding-inline: 20px;
  border-radius: 12px;
  background: var(--kraft);
  color: var(--ink);
  font-weight: 800;
  font-size: 16px;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.25s var(--ease-out);
}
.buybar-cta:active { transform: scale(0.97); transition-duration: 0.16s; }
@media (prefers-reduced-motion: reduce) {
  .buybar { transition: none; }
  .shot, .cta, .cta-arrow, .topbar-order, .buybar-cta { transition: none; }
}

/* ---------- Thanks page ---------- */
.thanks-page { background: var(--grain-light), var(--olive); color: var(--paper); }
.thanks {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 22px;
  min-height: 100vh;
  min-height: 100svh;
  padding: 48px var(--gutter);
  text-align: center;
}
.thanks .brand { width: 96px; }
.receipt {
  width: min(100%, 360px);
  border-radius: 14px;
  background: var(--grain-dark), var(--paper-hi);
  color: var(--ink);
  box-shadow: 0 30px 50px -24px rgba(15, 16, 12, 0.6);
  transform: rotate(-2deg);
}
.receipt .ticket-band { border-radius: 14px 14px 0 0; padding: 10px 14px; font-size: 11px; }
.receipt-body { padding: 22px 22px 18px; }
.receipt h1 { font-size: clamp(46px, 12vw, 64px); }
.receipt #order-line { margin-top: 6px; font-size: 16px; }
.receipt #order-no { display: block; margin-top: 4px; font: 800 34px/1.2 var(--font-text); letter-spacing: 0.02em; }
.receipt #total-line { margin-top: 10px; font-size: 16px; }
.receipt #total-line strong { font-weight: 800; font-variant-numeric: tabular-nums; }
.receipt #package-line { margin-top: 10px; font-size: 16px; }
.receipt #package-line strong { font-weight: 800; }
.receipt #gift-line { margin-top: 8px; color: var(--olive); font-weight: 600; }
.receipt-foot {
  position: relative;
  padding: 14px 20px 18px;
  border-top: 2px dashed rgba(27, 26, 24, 0.3);
  color: var(--ink-2);
  font-size: 15.5px;
  line-height: 1.7;
}
.receipt-foot p + p { margin-top: 8px; }
.receipt-foot #resubmit-line { color: var(--ink); font-weight: 600; }
.receipt-foot::before, .receipt-foot::after {
  content: "";
  position: absolute;
  top: -9px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--olive);
}
.receipt-foot::before { left: -8px; }
.receipt-foot::after { right: -8px; }
.thanks .cta { width: min(100%, 360px); }
.thanks-help { color: var(--on-olive-2); font-size: 15px; }
.thanks-help a { display: inline-block; padding-block: 10px; color: var(--paper); font-weight: 600; }

/* ---------- Wider screens ---------- */
@media (min-width: 900px) {
  :root { --gutter: 32px; }
  h2 { font-size: clamp(48px, 5vw, 72px); }
  .hero { padding-bottom: 80px; }
  .topbar { padding-top: 24px; }
  .brand { width: 104px; }
  .hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    align-items: center;
    column-gap: 48px;
    min-height: min(calc(100svh - 120px), 720px);
  }
  .hero-stage { --pad: 0%; order: 0; margin: 40px 0 80px; }
  .ticket { left: -3%; top: 78%; }
  .hero h1 { font-size: clamp(72px, 7.4vw, 96px); }
  .lede { font-size: 18.5px; }
  .buy { margin-top: 30px; }
  .strip-list li { min-height: 66px; font-size: 19px; }

  .howto { padding-block: 128px 112px; }
  .howto-inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    grid-template-areas: "head shot" "steps shot";
    column-gap: 64px;
    row-gap: 36px;
    align-items: start;
  }
  .howto-head { grid-area: head; }
  .back-shot { grid-area: shot; align-self: center; margin: 0; }
  .steps { grid-area: steps; }

  .develop { padding-block: 128px; }
  .trail { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
  .trail li { grid-template-columns: 1fr; row-gap: 12px; }
  .trail .box-n { grid-row: auto; }
  .trail li:not(:last-child)::before {
    inset-inline-start: 74px;
    inset-inline-end: 0;
    top: 28px;
    bottom: auto;
    border-inline-start: 0;
    border-top: 2px dashed rgba(205, 187, 164, 0.4);
  }

  .order { padding-block: 120px; }
  .order-layout { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr); column-gap: 72px; align-items: start; }
  .order-intro { position: sticky; top: 40px; padding-top: 12px; }
  .order-card { --card-pad: 32px; padding: 34px var(--card-pad) 28px; }
  .order-band { margin-top: -34px; margin-bottom: 28px; }

  .photos { padding-block: 128px; }
  .later-list div { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; max-width: 460px; }
  .reel-wrap { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; margin-top: 44px; border-radius: 4px; }
  .reel { overflow: visible; scroll-snap-type: none; }
  /* Rows of three, each frame's flex-grow is its photo's ratio so a row shares one height.
     shortcut: the last row stretches unless the count is a multiple of three, keep it one when adding scans. */
  .reel-list { flex-wrap: wrap; gap: 18px; width: auto; padding: 34px 28px; }
  .frame { flex-basis: 0; min-width: 28%; }
  .frame img { width: 100%; height: auto; }

  .faq { padding-block: 112px 120px; }
  .legal { padding-block: 104px 112px; }
  .footer { padding-block: 96px 120px; }
}