/* Flash & Hand v2: the dark room. Tokens first, then components. */
:root {
  --bg: #fbe7dc;
  --surface: #f4d8c9;
  --surface-2: #ecc9b7;
  --ink: #161616;
  --muted: #444444;
  --accent: #f19c77;
  --accent-ink: #111111;
  --accent-text: #a3431a;
  --paper: #f3efe6;
  --board: #ffffff;
  --paper-ink: #221d23;
  --on-photo: #f2f2f2;
  --lift: rgba(0, 0, 0, 0.3);
  --sleeve-bg: rgba(255, 255, 255, 0.5);
  --chip-hover: #e3bda9;
  --btn-hover: #3a3331;
  --err: #f2d4cc;
  /* side margin, widened past the iPhone notch in landscape (viewport-fit=cover) */
  --m: max(clamp(16px, 2.4vw, 32px), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
  --gap: clamp(120px, 14vw, 220px);
  --step-small: 1rem;
  --step-body: clamp(1.125rem, 1.05rem + 0.3vw, 1.3125rem);
  --step-lead: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
  --step-head: clamp(2rem, 1.3rem + 3.2vw, 4rem);
  --step-display: clamp(2.75rem, 1.2rem + 6.2vw, 7.5rem);
  --font: "Sentient", Georgia, "Times New Roman", serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}
/* dark version: preview with ?theme=dark, back with ?theme=light */
html[data-theme="dark"] {
  --bg: #111111; --surface: #1c1c1c; --surface-2: #262626; --ink: #f2f2f2; --muted: #a8a8a8;
  --accent-text: var(--accent); --lift: rgba(0, 0, 0, 0.6); --sleeve-bg: rgba(255, 255, 255, 0.28);
  --chip-hover: #333333; --btn-hover: #f7b394; --err: #3a1f1a;
}

*, *::before, *::after { box-sizing: border-box; }
p, li, figcaption { text-wrap: pretty; }
::placeholder { color: var(--muted); opacity: 0.85; }
/* the fixed header is 60px tall: anchored sections stop below it, so the photo at their top is not hidden */
[id] { scroll-margin-top: 100px; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--bg); }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--font); font-weight: 400; font-size: var(--step-body); line-height: 1.55;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  -webkit-tap-highlight-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .3 0 0 0 0 .2 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
img, video, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: 300; letter-spacing: -0.015em; line-height: 1.02; text-wrap: balance; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--accent); color: var(--accent-ink); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.skip { position: absolute; left: var(--m); top: -80px; background: var(--accent); color: var(--accent-ink); padding: 12px 18px; z-index: 100; }
.skip:focus { top: 12px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* header: plain bar */
.bar {
  position: fixed; inset: 0 0 auto 0; z-index: 50; height: 68px;
  display: flex; align-items: center; justify-content: space-between; padding: 0 var(--m);
  transition: background-color 0.3s var(--ease);
}
.bar.is-solid { background: var(--bg); }
.brand { display: flex; align-items: center; min-height: 44px; gap: 14px; font-size: 1.25rem; font-weight: 400; }
.brand__mark { width: 42px; height: 42px; padding: 4px; }
.brand__mark img { width: 100%; height: 100%; object-fit: contain; }
.nav { display: flex; align-items: center; gap: clamp(18px, 3vw, 40px); font-size: var(--step-small); }
.nav a:not(.btn) { padding: 10px 2px; transition: color 0.2s; }
.nav a:not(.btn):hover { color: var(--accent-text); }
.nav a[aria-current="page"] { color: var(--accent-text); }

/* mobile menu */
.menu-btn { display: none; background: transparent; border: 0; color: var(--ink); min-height: 44px; padding: 0 6px; cursor: pointer; font-size: var(--step-small); }
.menu-panel { position: fixed; inset: 60px 0 0 0; z-index: 45; background: var(--bg); padding: 32px var(--m); display: grid; align-content: start; gap: 8px; font-size: 2rem; font-weight: 300; }
.menu-panel[hidden] { display: none; }
.menu-panel a { padding: 10px 0; }

/* buttons: flat, square, one fill */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 28px;
  background: var(--ink); color: var(--bg); border: 0; border-radius: 0; cursor: pointer;
  font-size: 1rem; font-weight: 500; letter-spacing: 0;
  transition: transform 0.18s var(--ease), background-color 0.2s;
}
.btn:hover { background: var(--btn-hover); }
.btn:active { transform: scale(0.97); }
.btn--sm { min-height: 44px; padding: 0 20px; }
.link { border-bottom: 2px solid var(--accent); padding-bottom: 2px; transition: color 0.2s; }
.hero__cta .link, .hi .link, .dates__cta .link, .contact__side p > .link, aside p > .link { display: inline-flex; align-items: center; min-height: 44px; border-bottom: 0; background: linear-gradient(var(--accent), var(--accent)) left calc(50% + 0.85em) / 100% 2px no-repeat; }
.link:hover { color: var(--accent-text); }

.wrap { padding: 0 var(--m); }
.section { padding: var(--gap) 0 0; }
.small { font-size: var(--step-small); color: var(--muted); }
.lead { font-size: var(--step-lead); line-height: 1.4; }
.grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: clamp(12px, 1.6vw, 24px); }

/* reveal: only when script has run */
.js [data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity 0.55s var(--ease), transform 0.55s var(--ease); transition-delay: var(--d, 0ms); }
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* HERO: pinned print */
.hero { position: relative; }
.js .hero { height: 250svh; }
.hero__stage {
  position: relative; min-height: 100svh; display: grid; grid-template-columns: repeat(12, 1fr);
  align-items: center; padding: 96px var(--m) 48px; column-gap: clamp(12px, 1.6vw, 24px); overflow: hidden;
}
.js .hero__stage { position: sticky; top: 0; height: 100svh; }
.hero__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center; transform: scale(1.06); will-change: transform; }
.hero__wash { position: absolute; inset: 0; background: var(--bg); opacity: var(--wash, 0.45); }
@media (min-width: 861px) { .hero__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--bg) 72%, transparent) 0%, color-mix(in srgb, var(--bg) 72%, transparent) 42%, transparent 64%); } }
.hero__text { grid-column: 1 / span 6; position: relative; z-index: 2; }
.hero h1 { font-size: var(--step-display); line-height: 0.98; }
.hero__text .lead { margin-top: clamp(28px, 3vw, 44px); max-width: 30ch; }
.hero__cta { margin-top: 32px; display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.hero__print { grid-column: 7 / span 6; perspective: 1800px; display: flex; justify-content: center; position: relative; z-index: 2; }
.flipper {
  position: relative; width: min(100%, 46vw); aspect-ratio: 3 / 2; transform-style: preserve-3d;
  transform: translateY(var(--ty, 0px)) rotateZ(var(--rz, -2deg)) rotateY(var(--ry, 0deg)) scale(var(--sc, 1));
  will-change: transform;
}
.face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; background: var(--paper); }
.face--front { padding: 1.6%; box-shadow: 0 30px 80px var(--lift); /* taste-skill-ignore: the print is lifted off the table */ }
.face--front img { width: 100%; height: 100%; object-fit: cover; }
.face--back {
  visibility: hidden; transform: rotateY(180deg); padding: 0; overflow: hidden;
  box-shadow: 0 30px 80px var(--lift); /* taste-skill-ignore: the print is lifted off the table */
}
.is-flipped .face--back { visibility: visible; }
.face--back img { width: 100%; height: 100%; object-fit: contain; }
.is-flipped .face--front { visibility: hidden; }

/* INTRO: staircase statement */
.intro { min-height: 100svh; display: grid; grid-template-columns: repeat(12, 1fr); column-gap: clamp(12px, 1.6vw, 24px); align-items: center; padding: var(--gap) var(--m) 0; }
.intro__text { grid-column: 1 / span 9; font-size: clamp(2.25rem, 4.6vw, 4.25rem); line-height: 1.04; font-weight: 400; letter-spacing: -0.02em; }
.intro__text span { display: block; }
.intro__text span:nth-child(2) { padding-left: 6vw; }
.intro__text span:nth-child(3) { padding-left: 12vw; }
.intro__text span:nth-child(4) { padding-left: 18vw; color: var(--accent-text); }
.intro__note { margin-top: 48px; font-size: 1rem; line-height: 1.55; letter-spacing: normal; max-width: 40ch; color: var(--muted); }
.intro__pics { grid-column: 10 / span 3; display: grid; gap: 16px; align-self: start; padding-top: 4vh; }
.intro__pics img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }

/* PANELS: full-bleed, midline row */
.panels { margin-top: var(--gap); }
.panel { color: var(--on-photo); position: relative; height: 100svh; overflow: hidden; display: block; background: var(--surface); }
.panel__img { position: absolute; inset: -8% 0; width: 100%; height: 116%; object-fit: cover; filter: brightness(0.72) contrast(1.05); will-change: transform; }
.panel__img--faces { inset: 0; height: 100%; object-position: 50% 0%; }
.panel__row {
  position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); height: 96px; display: flex; align-items: center;
  background: rgba(17, 17, 17, 0.62); padding: 0 var(--m);
}
.panel__row > * { flex: 1; }
.panel__row .t { font-size: clamp(1.5rem, 2.6vw, 2.5rem); font-weight: 400; margin-left: 4vw; flex: 2; }
.panel__row .r { text-align: right; }
.panel__row .l, .panel__row .r { font-size: 1rem; }
.panel:hover .t { color: var(--accent); }

/* PRINTS: true-scale preview */
.prints { padding: var(--gap) var(--m) 0; }
.prints__grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: clamp(12px, 1.6vw, 24px); row-gap: 40px; align-items: start; }
.prints__text { grid-column: 1 / span 4; }
.prints__text h2 { font-size: var(--step-head); }
.prints__text .lead { margin-top: 24px; }
.sizes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 32px; }
.chip { display: inline-flex; align-items: center; min-height: 48px; padding: 0 20px; background: var(--surface-2); border: 0; border-radius: 0; cursor: pointer; font-size: 1rem; transition: background-color 0.2s, color 0.2s, transform 0.18s var(--ease); }
.chip .sm { display: none; }
.chip:hover:not([aria-pressed="true"]) { background: var(--chip-hover); }
.chip:active { transform: scale(0.97); }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.prints__tools { margin-top: 20px; display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.prints__price { margin-top: 28px; font-size: 1.125rem; min-height: 3.2em; }
.stage { grid-column: 5 / span 8; container-type: inline-size; background: var(--surface); padding: 5cqw; }
.stage__in { --in: calc(100cqw / 22); display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 3cqw; min-height: calc(var(--in) * 15); }
.stage[data-orient="portrait"] .stage__in { min-height: calc(var(--in) * 19); }
.stage__col { display: contents; }
.stage .pr, .stage .ref { text-align: center; }
.stage .ref { display: grid; justify-items: center; gap: 0.6em; }
.stage:not([data-size="instax"]) .pr--instax, .stage:not([data-size="4x6"]) .pr--4x6, .stage:not([data-size="8x12"]) .pr--8x12 { display: none; }
.stage .pr { animation: prIn 0.45s var(--ease) both; }
@keyframes prIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .stage .pr { animation: none; } }
.pr { position: relative; cursor: pointer; transition: opacity 0.4s var(--ease), transform 0.4s var(--ease); background: transparent; border: 0; padding: 0; text-align: left; display: block; }
.stage[data-size] .pr .pr__sleeve { opacity: 0.8; transition: opacity 0.4s var(--ease); }
.stage[data-size="4x6"] .pr--4x6 .pr__sleeve, .stage[data-size="8x12"] .pr--8x12 .pr__sleeve, .stage[data-size="instax"] .pr--instax .pr__sleeve { opacity: 1; }
.stage[data-size="4x6"] .pr--4x6, .stage[data-size="8x12"] .pr--8x12, .stage[data-size="instax"] .pr--instax { opacity: 1; transform: translateY(-4px); }
.pr__sleeve, .pr__paper { display: block; }
/* 4x6 and 8x12: the photo sits on a white backing board inside a clear plastic bag. Sizes are inches times --in. */
.pr__sleeve { position: relative; background: var(--sleeve-bg); padding: 2%; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.95), 0 0 0 1px rgba(0, 0, 0, 0.08), 0 6px 18px rgba(0, 0, 0, 0.08); }
.pr__sleeve::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2.4%; background: rgba(255, 255, 255, 0.35); border-bottom: 1px solid rgba(255, 255, 255, 0.9); pointer-events: none; }
.pr__sleeve::after { content: ""; position: absolute; inset: -10% -30%; pointer-events: none; background: linear-gradient(112deg, rgba(255,255,255,0) 38%, rgba(255,255,255,0.28) 45%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0) 57%); /* taste-skill-ignore: plastic glint */ transform: translateX(-16%); transition: transform 0.9s var(--ease); }
.pr:hover .pr__sleeve::after, .pr:focus-visible .pr__sleeve::after { transform: translateX(16%); }
.pr__paper { display: flex; overflow: hidden; background: var(--board); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18); }
.pr__ph { position: relative; display: block; flex: 1 1 auto; align-self: stretch; min-width: 0; min-height: 0; }
.pr__paper img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto !important; object-fit: contain; }
.pr--4x6 .pr__paper img, .pr--8x12 .pr__paper img { object-fit: cover; }
.stage[data-fit="contain"] .pr--4x6 .pr__paper img, .stage[data-fit="contain"] .pr--8x12 .pr__paper img { object-fit: contain; }
.pr--4x6 { width: calc(var(--in) * 6.54); }
.pr--4x6 .pr__paper { aspect-ratio: 6.28 / 4.28; padding: 2.23%; }
.pr--8x12 { width: calc(var(--in) * 12.88); }
.pr--8x12 .pr__paper { aspect-ratio: 12.36 / 8.36; padding: 1.46%; }
/* vertical photos turn the board upright, with the same white border */
.stage[data-orient="portrait"] .stage__in { grid-template-columns: 1fr calc(var(--in) * 8.71); }
.stage[data-orient="portrait"] .pr--8x12 { width: calc(var(--in) * 8.71); }
.stage[data-orient="portrait"] .pr--8x12 .pr__paper { aspect-ratio: 8.36 / 12.36; padding: 2.15%; }
.stage[data-orient="portrait"] .pr--4x6 { width: calc(var(--in) * 4.46); }
.stage[data-orient="portrait"] .pr--4x6 .pr__paper { aspect-ratio: 4.28 / 6.28; padding: 3.27%; }
/* the Polaroid-style wide card: no bag, no backing. Always horizontal; the photo fills its window. */
.pr--instax { width: calc(var(--in) * 4.3); }
.pr--instax .pr__sleeve { padding: 0; background: none; box-shadow: none; overflow: visible; }
.pr--instax .pr__sleeve::before, .pr--instax .pr__sleeve::after { display: none; }
.pr--instax .pr__paper { aspect-ratio: 108 / 86; padding: 4.2% 4.2% 18.1%; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.14); }
.pr--instax .pr__paper img { object-fit: cover; }
.ref { display: grid; gap: 12px; justify-items: start; }
.ref__phone { position: relative; display: block; width: calc(var(--in) * 5.8); aspect-ratio: 5.8 / 2.8; border-radius: calc(var(--in) * 0.4); background: #2a2a2e; box-shadow: inset 0 0 0 calc(var(--in) * 0.05) #4a4a50; }
.ref__phone i { position: absolute; left: 5%; top: 11%; width: 15%; aspect-ratio: 1; border-radius: 26%; background: radial-gradient(circle at 30% 30%, #5a5a60 0 14%, #1a1a1d 16% 22%, transparent 24%), radial-gradient(circle at 70% 30%, #5a5a60 0 14%, #1a1a1d 16% 22%, transparent 24%), radial-gradient(circle at 30% 70%, #5a5a60 0 14%, #1a1a1d 16% 22%, transparent 24%), #3a3a3f; }
.pr__cap { display: block; margin-top: 12px; font-size: var(--step-small); color: var(--muted); }
.stage[data-size="4x6"] .pr--4x6 .pr__cap, .stage[data-size="8x12"] .pr--8x12 .pr__cap, .stage[data-size="instax"] .pr--instax .pr__cap { color: var(--ink); }

/* open dates + contact */
.dates { padding: var(--gap) var(--m) 0; }
.dates__grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: clamp(12px, 1.6vw, 24px); row-gap: 32px; align-items: end; }
.dates h2 { grid-column: 1 / span 5; font-size: var(--step-head); }
.dates__list { grid-column: 7 / span 6; list-style: none; margin: 0; padding: 0; font-size: clamp(1.75rem, 3.2vw, 3rem); font-weight: 300; line-height: 1.2; display: grid; gap: 8px; }
.dates__cta--end { grid-column: 7 / span 6; }
.dates__cta { grid-column: 1 / span 12; display: flex; gap: 24px; align-items: center; flex-wrap: wrap; }
.contact { padding: var(--gap) var(--m) 0; }
.contact__grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: clamp(12px, 1.6vw, 24px); row-gap: 40px; align-items: start; }
.contact h2 { grid-column: 1 / span 6; font-size: var(--step-head); }
.contact__side { grid-column: 8 / span 5; display: grid; gap: 14px; justify-items: start; font-size: var(--step-body); }
.contact__mail { display: inline-block; padding: 8px 0; font-size: var(--step-lead); border-bottom: 2px solid var(--accent); padding-bottom: 2px; word-break: break-word; transition: color 0.25s; }
.contact__mail:hover { color: var(--accent-text); }
.contact__side .btn { margin-top: 12px; }

/* footer: one quiet line */
.foot { margin-top: 30svh; padding: 0 var(--m) 30px; display: grid; grid-template-columns: 1fr auto 1fr; gap: 24px; align-items: center; font-size: var(--step-small); color: var(--muted); }
.foot nav { display: flex; gap: 24px; flex-wrap: wrap; justify-content: center; color: var(--ink); }
.foot nav a:hover { color: var(--accent-text); }
.foot > :last-child { text-align: right; }

/* inner pages */
.page-head { padding: 160px var(--m) 0; }
.page-head h1 { font-size: var(--step-display); max-width: 14ch; }
.page-head .lead { margin-top: 32px; max-width: 34ch; }
.page-head--split { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: clamp(12px, 1.6vw, 24px); row-gap: 40px; align-items: end; }
.page-head--split > div { grid-column: 1 / span 6; }
.page-head--split h1 { max-width: none; }
.page-head__pic { grid-column: 8 / span 5; object-fit: contain; width: 100%; height: auto; }
.page-head__pic--tall { aspect-ratio: 4 / 5; }
.group__pic { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; margin-bottom: 36px; filter: brightness(0.92); }
.strip { margin-top: var(--gap); padding: 0 var(--m); display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(12px, 1.6vw, 24px); }
.strip img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
/* photo rows: the <picture> wrapper is the grid item, so the rows keep their order */
.strip > picture, .intro__pics > picture, .about__pics > picture, .hi__pics > picture { display: block !important; }
.book p, .book .small { max-width: 60ch; }

/* portfolio: one section per kind of shoot */
.jumps { display: flex; flex-wrap: wrap; gap: 8px; padding: 56px var(--m) 0; }
.wk { padding: clamp(56px, 7vw, 96px) var(--m) 0; }
.wk h2 { font-size: var(--step-head); }
.work { padding: 32px 0 0; display: grid; grid-template-columns: repeat(12, 1fr); column-gap: clamp(12px, 1.6vw, 24px); row-gap: clamp(32px, 4vw, 64px); }
.work figure { margin: 0; }
.work img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.9); transition: opacity 0.4s var(--ease); }
.work img.pending { opacity: 0; }
.work .ph { overflow: hidden; background: var(--surface); }
.work .s7 { grid-column: span 7; } .work .s5 { grid-column: span 5; } .work .s4 { grid-column: span 4; }
.work .s6 { grid-column: span 6; } .work .s12 { grid-column: span 12; }
.work .a32, .work .a1514, .work .a45, .work .a219 { aspect-ratio: 3 / 2; }
.work figure.tall .ph { width: min(100%, 460px); margin-inline: auto; }
.work figure.tall img { height: auto; }

/* packages */
.pk { padding: 96px var(--m) 0; display: grid; grid-template-columns: repeat(12, 1fr); column-gap: clamp(12px, 1.6vw, 24px); align-items: start; }
.pk__index { grid-column: 1 / span 3; position: sticky; top: 100px; display: grid; border: 1px solid color-mix(in srgb, var(--ink) 30%, transparent); font-size: 1.0625rem; }
.pk__index a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 0 18px; border-top: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); color: var(--ink); transition: background-color 0.2s, box-shadow 0.2s; }
.pk__index a:first-child { border-top: 0; }
.pk__index a::after { content: ""; width: 8px; height: 8px; border-right: 1.5px solid currentColor; border-top: 1.5px solid currentColor; transform: rotate(45deg); opacity: 0.45; flex: none; }
.pk__index a:hover { background: var(--surface); }
.pk__index a.is-on { background: var(--surface); box-shadow: inset 3px 0 0 var(--accent); }
.pk__index a.is-on::after { opacity: 1; }
.pk__index a[style] { color: var(--accent-text) !important; }
.pk__index a:nth-last-child(2) { border-top: 1px solid color-mix(in srgb, var(--ink) 30%, transparent); }
.pk__body { grid-column: 5 / span 8; display: grid; gap: 120px; }
.group h2 { font-size: clamp(1.75rem, 1.2rem + 2vw, 2.75rem); margin-bottom: 8px; }
.group .gnote, .acc__in .gnote { color: var(--muted); font-size: 1rem; max-width: 52ch; margin-bottom: 36px; }
.menu { list-style: none; margin: 0; padding: 0; display: grid; gap: 26px; }
.menu li { display: grid; grid-template-columns: 1fr auto; column-gap: 24px; }
.menu .n { font-size: 1.1875rem; }
.menu .p { font-size: 1.1875rem; font-variant-numeric: tabular-nums; }
.menu .d { grid-column: 1; color: var(--muted); font-size: 1rem; max-width: 40ch; line-height: 1.4; margin-top: 2px; }
.menu h3 { grid-column: 1 / -1; font-size: 1.5rem; font-weight: 500; margin-top: 28px; }
.tool { margin-top: 28px; background: var(--surface); padding: clamp(20px, 3vw, 36px); display: grid; gap: 20px; }
.tool h3 { font-size: 1.5rem; font-weight: 400; }
.row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.field { display: grid; gap: 8px; }
.field label, .lab { font-size: var(--step-small); color: var(--muted); }
.in, .sel, .ta { background: var(--surface-2); border: 0; border-radius: 0; min-height: 52px; padding: 0 16px; width: 100%; font-size: 1rem; color: var(--ink); }
.ta { padding: 14px 16px; min-height: 130px; resize: vertical; }
.sel { appearance: none; background-image: none; }
.total { font-size: clamp(2rem, 4vw, 3rem); font-weight: 300; font-variant-numeric: tabular-nums; line-height: 1; }
.tool__out { display: grid; gap: 8px; }
.others h2 { font-size: clamp(1.75rem, 1.2rem + 2vw, 2.75rem); margin-bottom: 24px; }
/* each category sits in its own box */
.group, .acc { border: 1px solid color-mix(in srgb, var(--ink) 35%, transparent); padding: clamp(20px, 3vw, 36px); }
.acc { padding: 0 clamp(20px, 3vw, 36px); margin-bottom: 14px; transition: background-color 0.25s var(--ease); }
.acc[open] { background: var(--surface); }
.acc summary, .more summary { cursor: pointer; list-style: none; }
.acc summary::-webkit-details-marker, .more summary::-webkit-details-marker { display: none; }
.acc summary { display: flex; align-items: center; gap: 16px; min-height: 72px; font-size: 1.5rem; font-weight: 400; }
.acc__t { flex: 1; }
.acc__from { font-size: 1rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.acc summary::after { content: ""; width: 12px; height: 12px; border-right: 2px solid var(--accent-text); border-bottom: 2px solid var(--accent-text); transform: rotate(45deg); transition: transform 0.25s var(--ease); flex: none; margin-bottom: 4px; }
.acc[open] summary::after { transform: rotate(-135deg); margin-bottom: -4px; }
.acc__in { padding: 8px 0 clamp(24px, 3vw, 36px); }
/* Packages: the three print sizes side by side, to scale */
.scale { container-type: inline-size; margin: 8px 0 28px; }
.scale__row { --in: calc(100cqw / 25.6); display: flex; align-items: flex-end; gap: calc(var(--in) * 0.8); }
.scale .pr { width: 100%; cursor: default; }
.scale__item { flex: none; display: grid; justify-items: stretch; align-content: start; }
.scale__item--instax { width: calc(var(--in) * 4.3); }
.scale__item--4x6 { width: calc(var(--in) * 6.54); }
.scale__item--8x12 { width: calc(var(--in) * 12.88); }
.scale__dim { position: relative; height: 12px; margin-top: 14px; border-left: 1px solid color-mix(in srgb, var(--ink) 40%, transparent); border-right: 1px solid color-mix(in srgb, var(--ink) 40%, transparent); display: flex; align-items: center; justify-content: center; }
.scale__dim::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px solid color-mix(in srgb, var(--ink) 40%, transparent); }
.scale__dim span { position: relative; padding: 0 6px; background: var(--surface); font-size: 0.8125rem; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.scale__cap { margin-top: 10px; display: grid; gap: 2px; align-content: start; min-height: 4.8em; font-size: 1rem; line-height: 1.3; }
.scale__cap span { color: var(--muted); font-size: 0.9375rem; }
.scale__notes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.scale__notes li { display: grid; gap: 8px; align-content: start; }
.scale__notes h3 { font-size: 1.125rem; font-weight: 500; }
.scale__tag { justify-self: start; padding: 3px 8px; background: var(--surface-2); font-size: 0.8125rem; line-height: 1.3; }
.scale__notes p { color: var(--muted); font-size: 1rem; line-height: 1.4; }

.more { margin-top: 36px; }
.more summary { display: inline-flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 28px; background: var(--surface-2); font-size: 1rem; font-weight: 500; transition: background-color 0.2s; }
.more summary:hover { background: var(--chip-hover); }
.more summary::after { content: ""; width: 9px; height: 9px; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(45deg); transition: transform 0.25s var(--ease); margin-bottom: 3px; }
.more[open] summary::after { transform: rotate(-135deg); margin-bottom: -3px; }
.more__in { margin-top: 28px; }
.more__in .menu { margin-bottom: 8px; }
.practical { grid-column: 5 / span 8; margin-top: var(--gap); display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.practical h3 { font-size: 1.25rem; font-weight: 500; margin-bottom: 10px; }
.practical p { color: var(--ink); font-size: 1.0625rem; }

/* about */
.ballhead__flyer { grid-column: 8 / span 5; display: block; }
.ballhead__flyer img { width: 100%; height: auto; aspect-ratio: 1400 / 1812; object-fit: cover; }
.pk__aside { grid-column: 1 / span 3; position: sticky; top: 100px; }
.pk__aside h2 { font-size: 1.5rem; font-weight: 400; margin-bottom: 16px; }
.plain { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; font-size: 1.0625rem; }
.about { padding: var(--gap) var(--m) 0; display: grid; grid-template-columns: repeat(12, 1fr); column-gap: clamp(12px, 1.6vw, 24px); row-gap: 48px; }
.about__pic { grid-column: 1 / span 5; object-fit: contain; width: 100%; height: auto; }
.about__pics { grid-column: 1 / span 5; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(8px, 1vw, 14px); align-items: start; }
.about__pics img { width: 100%; object-fit: cover; }
.about__txt { grid-column: 1 / span 7; display: grid; gap: 22px; align-content: start; }
.about__txt h2 { font-size: var(--step-head); margin-bottom: 12px; }
.verbs { margin-top: var(--gap); }
.verb { color: var(--on-photo); position: relative; display: grid; overflow: hidden; background: #1a1a1a; }
.verb > *, .verb > picture > img { grid-area: 1 / 1; }
.verb img { display: block; width: 100%; height: auto; object-fit: contain; filter: brightness(0.6); }
.verb__head { position: sticky; top: 30svh; align-self: start; margin-bottom: 120px; z-index: 2; }
.verb__word { padding: 0 var(--m); font-size: clamp(5rem, 17vw, 17rem); font-weight: 300; letter-spacing: -0.04em; line-height: 1; }
.verb__sub { margin: 16px 0 0 var(--m); max-width: 36ch; padding: 20px 26px; background: rgba(17, 17, 17, 0.62); font-size: clamp(1.375rem, 1.1rem + 0.9vw, 2rem); line-height: 1.35; }
.faq { padding: var(--gap) var(--m) 0; display: grid; grid-template-columns: repeat(12, 1fr); column-gap: clamp(12px, 1.6vw, 24px); }
.faq__l { grid-column: 1 / span 6; }
.faq__l h2 { font-size: var(--step-head); margin-bottom: 40px; }
.faq details { padding: 14px 0; }
.faq summary { font-size: 1.25rem; cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 20px; min-height: 44px; align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; width: 12px; height: 12px; border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(45deg); transition: transform 0.25s var(--ease); flex: none; margin-bottom: 4px; }
.faq details[open] summary::after { transform: rotate(-135deg); margin-bottom: -4px; }
.faq details p { color: var(--muted); font-size: 1.0625rem; max-width: 52ch; padding: 6px 0 12px; }
.faq__r { grid-column: 8 / span 5; }
.faq__r img { width: 100%; height: auto; object-fit: contain; }

/* book */
.book { padding: 72px var(--m) 0; display: grid; grid-template-columns: repeat(12, 1fr); column-gap: clamp(12px, 1.6vw, 24px); row-gap: 48px; align-items: start; }
.book form { grid-column: 1 / span 7; display: grid; gap: 22px; }
.book aside { grid-column: 9 / span 4; display: grid; gap: 28px; position: sticky; top: 100px; }
.book aside h2 { font-size: 1.25rem; font-weight: 500; margin-bottom: 6px; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.types { display: flex; flex-wrap: wrap; gap: 8px; }
.cond[hidden] { display: none; }
.check { display: flex; align-items: center; gap: 10px; margin-top: 4px; font-size: var(--step-small); color: var(--ink); cursor: pointer; min-height: 44px; }
.check input { width: 24px; height: 24px; accent-color: var(--accent-text); }
.terms summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 12px; min-height: 44px; font-size: 1rem; border-bottom: 2px solid var(--accent); }
.terms summary::-webkit-details-marker { display: none; }
.terms summary::after { content: ""; width: 10px; height: 10px; border-right: 2px solid var(--accent-text); border-bottom: 2px solid var(--accent-text); transform: rotate(45deg); transition: transform 0.25s var(--ease); margin-bottom: 3px; }
.terms[open] summary::after { transform: rotate(-135deg); margin-bottom: -3px; }
.terms .plain { margin-top: 18px; font-size: 1rem; max-width: 60ch; }
.hp { position: absolute; left: -9999px; }
.msg { padding: 18px 20px; background: var(--surface); font-size: 1.0625rem; }
.msg[hidden] { display: none; }
.msg.err { background: var(--err); }

/* hi page */
.hi { min-height: 100svh; display: grid; grid-template-columns: repeat(12, 1fr); column-gap: clamp(12px, 1.6vw, 24px); align-items: center; padding: 110px var(--m) 60px; }
.hi__text { grid-column: 1 / span 6; display: grid; gap: 28px; justify-items: start; }
.hi h1 { font-size: clamp(2.75rem, 1.2rem + 5.2vw, 6.25rem); }
.hi .brand__mark { width: 72px; height: 72px; display: block; }
.hi__pics { grid-column: 8 / span 5; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(12px, 1.6vw, 24px); }
.hi__pics img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.prose + .strip { margin-top: 96px; }
.prose--after { padding-top: 72px; }

/* legal-ish text pages */
.prose { padding: 160px var(--m) 0; max-width: 760px; display: grid; gap: 20px; }
.prose h1 { font-size: var(--step-head); }
.prose h2 { font-size: 1.5rem; font-weight: 500; margin-top: 24px; }

/* mobile book bar */
.bookbar { display: none; }

@media (max-width: 860px) {
  /* phone: panels show the whole photo at its own shape instead of a full-height crop */
  .panel { height: auto; }
  .panel__img, .panel__img--faces { position: static; inset: auto; width: 100%; height: auto; transform: none !important; display: block; }
  .bar { height: 60px; }
  /* phone: a price row's description takes the full width, not the column beside the price */
  .menu .d { grid-column: 1 / -1; }
  .nav { gap: 16px; }
  .nav .hide-s { display: none; }
  .menu-btn { display: inline-block; }
  .hero__stage { grid-template-columns: 1fr; align-content: start; padding-top: 80px; gap: 0; }
  .hero__print { grid-column: 1; order: -1; margin-bottom: 28px; }
  .flipper { width: 100%; }
  .hero__text { grid-column: 1; }
  .hero h1 { font-size: clamp(2.75rem, 12vw, 4.5rem); }
  .hero__text .lead { margin-top: 16px; font-size: 1.125rem; }
  .hero__cta { margin-top: 20px; }
  .intro { grid-template-columns: 1fr; }
  .intro__text { grid-column: 1; font-size: 9vw; }
  .intro__text span:nth-child(2) { padding-left: 5vw; }
  .intro__text span:nth-child(3) { padding-left: 10vw; }
  .intro__text span:nth-child(4) { padding-left: 15vw; }
  .intro__pics { grid-column: 1; grid-template-columns: 1fr 1fr; margin-top: 40px; padding-top: 0; }
  .panel__row { position: static; transform: none; height: auto; flex-wrap: wrap; padding: 12px var(--m); background: #1a1a1a; }
  .panel__row .t { flex: 1 1 100%; margin: 0 0 6px; order: -1; font-size: 1.5rem; }
  .panel__row .l, .panel__row .r { font-size: 0.875rem; flex: 1; }
  .prints__grid { row-gap: 0; }
  .prints__text { display: contents; }
  .prints__text h2, .prints__text .lead, .sizes, .prints__tools, .prints__price, .stage { grid-column: 1 / -1; }
  .prints__text h2 { order: 1; } .prints__text .lead { order: 2; } .sizes { order: 3; } .stage { order: 4; margin-top: 24px; } .prints__tools { order: 5; margin-top: 24px; } .prints__price { order: 6; margin-top: 20px; min-height: 0; }
  .sizes { flex-wrap: nowrap; }
  .chip { flex: 1 1 0; justify-content: center; padding: 0 8px; }
  .chip .lg { display: none; } .chip .sm { display: inline; }
  .prints, .contact { padding-top: 80px; }
  .stage__in, .stage[data-orient="portrait"] .stage__in { flex-direction: column; align-items: center; min-height: 0; gap: 6cqw; --in: calc(100cqw / 13.7); }
  .stage__col { grid-template-columns: 1fr 1fr; gap: 4cqw; align-items: start; }
  .stage__in { justify-items: center; }
  .stage[data-orient="portrait"] .stage__in { grid-template-columns: 1fr; }
  .stage__col { display: flex; justify-content: center; width: 100%; }
  .stage .pr { text-align: center; }
  .stage[data-size="8x12"] .stage__col, .stage[data-size="4x6"] .pr--8x12, .stage[data-size="instax"] .pr--8x12, .stage[data-size="4x6"] .pr--instax, .stage[data-size="instax"] .pr--4x6 { display: none; }
  .stage[data-size] .pr { opacity: 1; transform: none; }
  .contact h2, .contact__side { grid-column: 1 / -1; }
  .ballhead__flyer, .pk__aside { grid-column: 1 / -1; }
  .pk__aside { position: static; margin-bottom: 48px; }
  .foot { grid-template-columns: 1fr; gap: 8px; margin-top: 12svh; padding-bottom: 96px; }
  .foot nav, .foot > :last-child { justify-content: flex-start; text-align: left; }
  .foot nav { gap: 0 20px; }
  .foot nav a, .foot p a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; }
  .hero__text { margin: 0 calc(var(--m) * -1); padding: 20px var(--m) 24px; background: color-mix(in srgb, var(--bg) 88%, transparent); }
  .js .hero { height: auto; }
  .js .hero__stage { position: relative; height: auto; min-height: 100svh; }
  .work { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 10px; row-gap: 24px; }
  .wk { padding-top: 48px; }
  .work .s7, .work .s5, .work .s4, .work .s6 { grid-column: span 1; }
  .scale__row { --in: calc(100cqw / 13.6); flex-wrap: wrap; row-gap: 24px; }
  .scale__item--8x12 { order: -1; }
  .scale__notes { grid-template-columns: 1fr; gap: 20px; }
  .pk__index { grid-column: 1 / -1; position: static; grid-template-columns: 1fr 1fr; margin-bottom: 48px; font-size: 1rem; }
  .pk__index a { min-height: 52px; padding: 0 16px; border-top: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); }
  .pk__index a:nth-child(-n+2) { border-top: 0; }
  .pk__index a:nth-child(even) { border-left: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); }
  .pk__index a:nth-last-child(2) { border-top: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); }
  .pk__index a:last-child { grid-column: 1 / -1; }
  .pk__index a.is-on { box-shadow: inset 3px 0 0 var(--accent); }
  .pk__body, .practical { grid-column: 1 / -1; }
  .practical { grid-template-columns: 1fr; }
  .about__pic, .about__pics, .about__txt, .faq__l, .faq__r, .page-head--split > div, .page-head__pic { grid-column: 1 / -1; }
  .strip { grid-template-columns: 1fr 1fr; }
  .hi { grid-template-columns: 1fr; row-gap: 40px; }
  .hi__text, .hi__pics { grid-column: 1 / -1; }
  .faq__r { order: -1; margin: 0 0 40px; }
  .about__txt { order: -1; }
  .verb { display: block; }
  .verb__head { position: static; margin: 0; }
  .verb img { position: static; display: block; height: auto; }
  .verb__word { position: static; margin: 0; background: #1a1a1a; padding: 12px var(--m) 0; font-size: clamp(3.25rem, 18vw, 5rem); }
  .verb__sub { position: static; margin: 0; max-width: none; padding: 14px var(--m); background: #1a1a1a; font-size: 1rem; }
  /* About on phones: gaps between sections cut by about a third */
  .page-head--split { row-gap: 28px; }
  .about { padding-top: 80px; row-gap: 32px; }
  .verbs { margin-top: 80px; }
  .faq { padding-top: 80px; }
  .book form, .book aside { grid-column: 1 / -1; position: static; }
  .two { grid-template-columns: 1fr; }
  .bookbar { display: block; position: fixed; left: var(--m); right: var(--m); bottom: 14px; z-index: 40; transition: transform 0.3s var(--ease), opacity 0.3s; }
  .bookbar .btn { width: 100%; }
  .bookbar.is-off { transform: translateY(90px); opacity: 0; pointer-events: none; }
}

@media (max-width: 640px) { .dates h2, .dates__list, .dates__cta--end { grid-column: 1 / -1; } .dates__grid { row-gap: 20px; } .dates__cta--end { flex-direction: column; align-items: stretch; gap: 8px; } .dates__cta--end .btn { text-align: center; justify-content: center; } .dates__cta--end .link { align-self: flex-start; } }

/* smallest phones: keep the logo and name on one line */
@media (max-width: 400px) { .bar { column-gap: 20px; } .brand { gap: 10px; font-size: 1.125rem; white-space: nowrap; } .nav { gap: 6px; } .bar .btn--sm { padding: 0 16px; } }
@media (max-width: 359px) { .brand { font-size: 1rem; } .brand__mark { width: 36px; height: 36px; } .bar .btn--sm { padding: 0 14px; } }

@media (hover: none) { .btn:hover { background: var(--ink); } .chip:hover:not([aria-pressed="true"]) { background: var(--surface-2); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .hero { height: auto; }
  .js .hero__stage { position: relative; height: auto; min-height: 100svh; }
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
  .flipper { transform: none !important; }
  .panel__img { transform: none !important; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

.btnrow { display: flex; gap: 12px; flex-wrap: wrap; }
@media (max-width: 640px) { .btnrow { flex-direction: column; } .btnrow .btn { text-align: center; justify-content: center; } }

/* desktop page headers (About, Ball): fit the first screen, headline beside the picture */
@media (min-width: 861px) {
  .page-head--split { padding-top: 104px; padding-bottom: 8px; align-items: center; row-gap: 0; }
  .page-head--split > div, .page-head--split .page-head__pic, .page-head--split .ballhead__flyer { grid-row: 1; }
  .page-head--split h1 { font-size: clamp(2.75rem, 1rem + 4.6vw, 6rem); }
  .page-head--split .page-head__pic, .page-head--split .ballhead__flyer { justify-self: end; max-width: 100%; }
  .page-head--split .page-head__pic { width: 100%; max-width: calc(min(100svh - 150px, 780px) * 0.8); height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
  .page-head--split .ballhead__flyer img { height: calc(100svh - 150px); max-height: 780px; width: auto; max-width: 100%; object-fit: contain; }
}