/* Archive · Unfold-style multi-section page.
   Unfold's visual grammar: white ground, near-black ink, huge tight display
   type, black pill buttons, big-radius image cards, generous section air.
   Ink/secondary tokens still mirror the app (src/theme/light.ts). */

:root {
  --ground: #FFFFFF;
  --ground-dim: #F3F4F6;
  --ink: #0A0A0A;
  --ink-dim: #55555A;
  --ink-faint: #8E8E93;
  --hairline: rgba(0, 0, 0, 0.1);
  --radius-card: 24px;
  --page-pad: 24px;
  --page-max: 1120px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: auto; }

body {
  background: var(--ground);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
    "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }

a { color: inherit; text-decoration: none; }

main > section,
.site-header,
.site-footer {
  max-width: var(--page-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--page-pad);
  padding-right: var(--page-pad);
}

/* ---- pill buttons (Unfold's black pill) ---- */
.pill {
  display: inline-block;
  background: var(--ink);
  color: var(--ground);
  border-radius: 999px;
  padding: 16px 32px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.2px;
  transition: opacity 120ms ease;
}

.pill:hover { opacity: 0.82; }

.pill-small { padding: 10px 20px; font-size: 15px; }

/* ---- header ---- */
.site-header {
  display: flex;
  align-items: center;
  gap: 28px;
  padding-top: 20px;
  padding-bottom: 20px;
}

.wordmark {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.3px;
  margin-right: auto;
}

/* index page: fixed Prequel-style header, always visible.
   Over the hero photo it floats transparent in white; once scrolled past
   the hero it becomes a frosted white bar with dark ink. */
.site-header.on-hero {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  max-width: none;
  /* full-width bar, but contents align with the page's content column */
  padding-left: max(var(--page-pad), calc((100% - var(--page-max)) / 2));
  padding-right: max(var(--page-pad), calc((100% - var(--page-max)) / 2));
  color: #FFFFFF;
  transition: background-color 220ms ease, box-shadow 220ms ease;
}

.site-header.on-hero .wordmark { transition: color 220ms ease; }

.site-header.on-hero .pill-small {
  background: rgba(255, 255, 255, 0.92);
  color: var(--ink);
  transition: background-color 220ms ease, color 220ms ease, opacity 120ms ease;
}

.site-header.on-hero.scrolled {
  background: rgba(255, 255, 255, 0.78);
  -webkit-backdrop-filter: blur(16px) saturate(1.6);
  backdrop-filter: blur(16px) saturate(1.6);
  box-shadow: 0 1px 0 var(--hairline);
  color: var(--ink);
}

.site-header.on-hero.scrolled .pill-small {
  background: var(--ink);
  color: #FFFFFF;
}

/* ---- hero: one full-bleed photo, headline over it ---- */
.hero {
  position: relative;
  max-width: none;
  padding: 0;
  min-height: max(74svh, 560px);
  display: grid;
  place-items: center;
  overflow: hidden;
}

/* Desktop: full-viewport opening — one photo, one line, nothing else.
   Mobile keeps the shorter hero so the features peek above the fold. */
@media (min-width: 900px) {
  .hero { min-height: max(100svh, 700px); }
}

/* extra top bleed so the parallax drift never exposes an edge */
.hero-bg {
  position: absolute;
  top: -32%;
  left: 0;
  width: 100%;
  height: 132%;
  object-fit: cover;
  object-position: 50% 55%;
  filter: saturate(1.08) contrast(1.04);
  will-change: transform;
}

/* header band up top + gentle center support for the one-line headline */
.hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(10, 8, 6, 0.42) 0%,
    rgba(10, 8, 6, 0.1) 30%,
    rgba(10, 8, 6, 0.24) 100%
  );
}

/* the hero carries exactly one line */
/* SF/Apple headline system: all one family, semibold-bold, tight tracking.
   `em` marks the accent phrase but stays in-family (no serif, no italic) — a
   half-step lighter so it reads as emphasis, not a different typeface. */
h1 {
  position: relative;
  font-size: clamp(36px, 5.5vw, 64px);
  font-weight: 700;
  letter-spacing: -0.032em;
  line-height: 1.05;
  text-align: center;
  text-wrap: balance;
  padding: 0 var(--page-pad);
  color: #FFFFFF;
  text-shadow: 0 2px 36px rgba(0, 0, 0, 0.45), 0 1px 8px rgba(0, 0, 0, 0.3);
}

em {
  font-style: normal;
  font-weight: 400;
}

/* ---- section headings ---- */
h2 {
  font-size: clamp(32px, 5vw, 52px);
  font-weight: 700;
  letter-spacing: -0.032em;
  line-height: 1.05;
  text-wrap: balance;
  text-align: center;
}

/* ---- showcase (Tezza-style): text + feature list left, device right ---- */
.showcase {
  padding-top: clamp(64px, 9vw, 110px);
  padding-bottom: clamp(72px, 10vw, 130px);
  display: grid;
  grid-template-columns: 1fr;
  gap: 56px;
  align-items: center;
}

@media (min-width: 900px) {
  .showcase { grid-template-columns: 1.15fr 0.85fr; gap: clamp(48px, 6vw, 96px); }
}

.showcase h2 {
  text-align: left;
  max-width: 15ch;
}

.showcase-features {
  margin-top: clamp(32px, 4vw, 48px);
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px 40px;
}

@media (min-width: 560px) {
  .showcase-features { grid-template-columns: 1fr 1fr; }
}

.showcase-feature h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.2px;
}

.showcase-feature svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: 0 0 auto;
}

.showcase-feature p {
  margin-top: 6px;
  color: var(--ink-dim);
  font-size: 14px;
  line-height: 1.5;
  max-width: 34ch;
}

.showcase-text .pill { margin-top: clamp(36px, 4vw, 48px); }

/* real app screenshot on the right (soft-faded PNG) */
.showcase-media {
  display: flex;
  justify-content: center;
  will-change: transform;
}

.showcase-shot {
  width: min(360px, 82vw);
  height: auto;
  /* no shadow: the PNG has no transparent pixels, so a drop-shadow wraps the
     whole rectangle. Its soft white edges dissolve into the page instead. */
}

/* ---- archive wall: one collage image, parallax (Tezza technique) ---- */
.wall {
  position: relative;
  max-width: none;
  padding: 0;
  height: clamp(380px, 72svh, 760px);
  overflow: hidden;
}

.wall-bg {
  position: absolute;
  top: -14%;
  left: 0;
  width: 100%;
  height: 128%;
  object-fit: cover;
  will-change: transform;
}

/* ---- social proof ---- */
.proof {
  text-align: center;
  padding-top: clamp(56px, 8vw, 100px);
  padding-bottom: clamp(56px, 8vw, 100px);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}

.proof blockquote p {
  font-size: clamp(24px, 4vw, 36px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
  text-wrap: balance;
  max-width: 24ch;
  margin: 0 auto;
}

.proof cite {
  display: block;
  margin-top: 16px;
  font-style: normal;
  color: var(--ink-faint);
  font-size: 15px;
}

/* ---- closing: crossfading slider bg, app mockup, download, footer ---- */
.closing {
  position: relative;
  max-width: none;
  padding: clamp(80px, 11vw, 150px) var(--page-pad) 0;
  overflow: hidden;
  color: #FFFFFF;
}

.closing-slides {
  position: absolute;
  inset: 0;
}

.slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.08) contrast(1.04);
  opacity: 0;
  transform: scale(1.16);
  will-change: opacity, transform;
  animation: slideZoom 9s linear infinite;
}

.slide.s1 { animation-name: slideZoomFirst; }
.slide.s2 { animation-delay: 3s; }
.slide.s3 { animation-delay: 6s; }

/* three 3s windows, quick ~0.35s cuts, fast zoom-out (1.16 → 1.0)
   — cadence matched to the unfold.com closing reel */
@keyframes slideZoom {
  0% { opacity: 0; transform: scale(1.16); }
  4% { opacity: 1; }
  33.3% { opacity: 1; }
  37.3% { opacity: 0; transform: scale(1); }
  99.9% { opacity: 0; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.16); }
}

/* the first slide is also visible at t=0 and wraps around at the loop end */
@keyframes slideZoomFirst {
  0% { opacity: 1; transform: scale(1.13); }
  33.3% { opacity: 1; }
  37.3% { opacity: 0; transform: scale(1); }
  95.5% { opacity: 0; transform: scale(1.16); }
  100% { opacity: 1; transform: scale(1.13); }
}

.closing-scrim {
  position: absolute;
  inset: 0;
  background: rgba(10, 8, 6, 0.52);
}

.closing-inner {
  position: relative;
  max-width: var(--page-max);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
  padding-bottom: clamp(72px, 10vw, 130px);
}

@media (min-width: 860px) {
  .closing-inner {
    flex-direction: row;
    justify-content: center;
    gap: clamp(48px, 8vw, 110px);
  }
}

.closing-headline {
  font-size: clamp(40px, 7vw, 84px);
  font-weight: 700;
  letter-spacing: -0.032em;
  line-height: 1.05;
  text-align: center;
  text-wrap: balance;
}

@media (min-width: 860px) {
  .closing-headline { text-align: left; }
}

.arrow { display: inline-block; transition: transform 160ms ease; }
a:hover .arrow { transform: translateX(6px); }

/* phone mockup: the app showcasing the edit of the scene behind it */
.phone {
  flex: 0 0 auto;
  width: min(230px, 62vw);
  background: #FBFAF8;
  color: #111111;
  border-radius: 22px;
  padding: 12px;
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.5);
  rotate: -1.5deg;
}

.phone-bar {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.4px;
  padding: 4px 4px 10px;
}

.phone-screen {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: 8px;
  overflow: hidden;
}

.phone-dock {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 18px;
  padding: 12px 0 6px;
}

.phone-dock span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.2);
}

.phone-dock .dot-big {
  width: 26px;
  height: 26px;
  background: #111111;
}

/* ---- footer (plain, dark ink on the page ground; legal pages reuse it) ---- */
.site-footer {
  position: relative;
  border-top: 1px solid var(--hairline);
  padding-top: clamp(48px, 7vw, 80px);
  padding-bottom: calc(48px + env(safe-area-inset-bottom));
}

.footer-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 32px;
}

.footer-col { display: flex; flex-direction: column; gap: 10px; }

.footer-col h4 {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 4px;
}

.footer-col a,
.footer-copyright {
  color: var(--ink-dim);
  font-size: 15px;
}

.footer-col a:hover { color: var(--ink); }

/* bare-link footer variant used by the legal stub pages */
.site-footer > a {
  color: var(--ink-dim);
  font-size: 15px;
  margin-right: 24px;
}
.site-footer > a:hover { color: var(--ink); }

/* ---- legal stub pages ---- */
.legal {
  max-width: 640px;
  margin: 0 auto;
  padding: 24px var(--page-pad) 96px;
}

/* Editorial page header: eyebrow, oversized title, one-line lede,
   date, then a hairline before the body. */
.legal .eyebrow {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink-faint);
  margin: 24px 0 10px;
}

.legal h1 {
  font-size: clamp(40px, 8vw, 56px);
  letter-spacing: -0.03em;
  line-height: 1.02;
  max-width: none;
  margin: 0 0 18px;
  /* Zero out the hero h1's inherited page padding, or the title sits
     24px right of the eyebrow/lede column. */
  padding: 0;
  text-align: left;
  text-shadow: none;
  /* The base h1 is white-on-photo (hero); on the legal pages' white
     ground that made the title invisible. */
  color: var(--ink);
}

.legal .lede {
  font-size: 19px;
  line-height: 1.45;
  color: var(--ink-dim);
  margin: 0 0 20px;
}

.legal .rule {
  border: none;
  border-top: 1px solid var(--hairline);
  margin: 32px 0 36px;
}

.legal p, .legal li { color: var(--ink-dim); margin-bottom: 12px; }

.legal .updated {
  color: var(--ink-faint);
  font-size: 14px;
  margin-bottom: 28px;
}

.legal h2 {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.2px;
  text-align: left;
  margin: 28px 0 8px;
}

.legal ul { padding-left: 20px; margin-bottom: 12px; }

.site-footer > span { color: var(--ink-faint); font-size: 15px; }

/* ---- scroll depth (script.js adds .motion-ok when motion is allowed) ---- */
[data-speed] { will-change: transform; }

.motion-ok .reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 700ms ease, transform 700ms cubic-bezier(0.2, 0.6, 0.2, 1);
}

.motion-ok .reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  .slide { animation: none; }
  .slide.s1 { opacity: 1; }
}

/* ---- holding page (pre-launch): wordmark, one line, legal links.
   The full marketing page lives in index-full.html until the real
   photos + App Store link exist. ---- */
.holding {
  min-height: 82svh;
  display: grid;
  place-content: center;
  text-align: center;
  padding: 0 var(--page-pad);
}
.holding-wordmark {
  font-size: clamp(44px, 9vw, 72px);
  font-weight: 700;
  letter-spacing: -0.035em;
  color: var(--ink);
  text-shadow: none;
  padding: 0;
  margin: 0 0 14px;
  max-width: none;
  text-align: center;
}
.holding-line {
  font-size: 17px;
  color: var(--ink-dim);
  margin: 0 0 28px;
}
.holding-links {
  display: flex;
  gap: 14px;
  justify-content: center;
  color: var(--ink-faint);
}
.holding-links a {
  color: var(--ink-dim);
  text-decoration: none;
  border-bottom: 1px solid var(--hairline);
  padding-bottom: 1px;
}
.holding-links a:hover { color: var(--ink); }
.holding-footer {
  text-align: center;
  padding: 24px;
  font-size: 13px;
  color: var(--ink-faint);
}

/* ---- holding page ambience: warm wash + grain (no assets) ---- */
.holding-ground {
  background: #FAF6EF;
  overflow: hidden;
  position: relative;
  min-height: 100svh;
}

.wash { position: fixed; inset: 0; z-index: 0; pointer-events: none; }

.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.55;
  will-change: transform;
}
.b1 { width: 60vmax; height: 60vmax; left: -18vmax; top: -22vmax;
      background: radial-gradient(circle, #F2C49B 0%, transparent 62%);
      animation: drift1 34s ease-in-out infinite alternate; }
.b2 { width: 52vmax; height: 52vmax; right: -16vmax; top: -6vmax;
      background: radial-gradient(circle, #E9AFA3 0%, transparent 60%);
      animation: drift2 41s ease-in-out infinite alternate; }
.b3 { width: 58vmax; height: 58vmax; left: 4vmax; bottom: -26vmax;
      background: radial-gradient(circle, #E7CDA9 0%, transparent 62%);
      animation: drift3 37s ease-in-out infinite alternate; }
.b4 { width: 40vmax; height: 40vmax; right: -6vmax; bottom: -14vmax;
      background: radial-gradient(circle, #B9C3BC 0%, transparent 58%);
      opacity: 0.4;
      animation: drift1 46s ease-in-out infinite alternate-reverse; }

@keyframes drift1 { from { transform: translate(0, 0) scale(1); }
                    to   { transform: translate(6vmax, 4vmax) scale(1.12); } }
@keyframes drift2 { from { transform: translate(0, 0) scale(1.08); }
                    to   { transform: translate(-5vmax, 6vmax) scale(0.96); } }
@keyframes drift3 { from { transform: translate(0, 0) scale(1); }
                    to   { transform: translate(4vmax, -5vmax) scale(1.1); } }

@media (prefers-reduced-motion: reduce) {
  .blob { animation: none; }
}

/* Film grain: SVG turbulence tile, fixed over everything, very quiet. */
.grain {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.16;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

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

.holding-eyebrow {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin: 0 0 10px;
}

/* ---- editorial marquee: repeated wordmark drifting rightward ---- */
.marquee {
  /* full-bleed band escaping the centered column */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  overflow: hidden;
  padding: 0;
  text-align: initial;
  text-shadow: none;
  margin-top: 6px;
  margin-bottom: 18px;
}

.marquee-track {
  display: inline-flex;
  gap: 0.45em;
  width: max-content;
  padding-right: 0.45em; /* trailing gap so the loop seam is invisible */
  /* -50% -> 0 = content moves LEFT-TO-RIGHT; track is two identical
     halves, so the wrap is seamless. */
  transform: translateX(-50%);
  animation: marquee-drift 44s linear infinite;
  will-change: transform;
}

.mq {
  font-size: clamp(72px, 15vw, 190px);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.04;
  color: var(--ink);
  white-space: nowrap;
}

/* every other wordmark outlined: the editorial rhythm */
.mq-o {
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(10, 10, 10, 0.55);
}

@keyframes marquee-drift {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; transform: translateX(-25%); }
}

/* ---- holding page: oxblood editorial palette ----
   Deep red ground, cream ink. Scoped variable overrides so every
   descendant (eyebrow, links, footer) re-inks itself automatically. */
.holding-ground {
  --ink: #F7F1E6;
  --ink-dim: rgba(247, 241, 230, 0.8);
  --ink-faint: rgba(247, 241, 230, 0.55);
  --hairline: rgba(247, 241, 230, 0.28);
  background: #8E1B1B;
}

/* tone-on-tone wash: embers and wine instead of peach and sage */
.holding-ground .b1 { background: radial-gradient(circle, #B03024 0%, transparent 62%); }
.holding-ground .b2 { background: radial-gradient(circle, #6E1010 0%, transparent 60%); }
.holding-ground .b3 { background: radial-gradient(circle, #A5301E 0%, transparent 62%); }
.holding-ground .b4 { background: radial-gradient(circle, #5C1626 0%, transparent 58%); opacity: 0.45; }

.holding-ground .mq { color: var(--ink); }
.holding-ground .mq-o {
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(247, 241, 230, 0.6);
}

/* grain reads stronger on a dark ground; ease it back a touch */
.holding-ground .grain { opacity: 0.12; }

/* ---- lookbook composition: polaroid under the marquee ---- */
.polaroid {
  width: min(300px, 68vw);
  padding: 12px 12px 52px;
  background: #F2EEE6;
  box-shadow:
    0 24px 70px rgba(0, 0, 0, 0.35),
    0 4px 16px rgba(0, 0, 0, 0.2);
  margin: 8px auto 4px;
  transform: rotate(-0.6deg);
}
.polaroid img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

/* Marquee sweeps ACROSS the polaroid: fixed band, slightly below the
   photo's center so the type crosses the chest, never the face. */
.marquee-overlay {
  position: fixed;
  left: 0;
  top: 58%;
  transform: translateY(-50%);
  width: 100vw;
  margin: 0;
  z-index: 3;
  pointer-events: none;
}
.marquee-overlay .mq { font-size: clamp(64px, 13vw, 160px); }

/* the wordmarks pick up a whisper of shadow so they read over the photo */
.holding-ground .marquee-overlay .mq {
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.18);
}

/* ---- centered lookbook: polaroid dead-center, marquee straight across it ---- */
.holding {
  display: block;
  position: relative;
  min-height: 100svh;
}
.holding-eyebrow {
  position: absolute;
  top: clamp(22px, 5svh, 52px);
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  white-space: nowrap;
}
.polaroid {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(-0.6deg);
  margin: 0;
  z-index: 1;
}
/* the marquee crosses the photo's exact middle, clearly ON TOP */
.marquee-overlay { top: 50%; z-index: 3; }
.holding-line {
  position: absolute;
  left: 50%;
  bottom: clamp(72px, 13svh, 120px);
  transform: translateX(-50%);
  margin: 0;
  white-space: nowrap;
}
.holding-links {
  position: absolute;
  left: 50%;
  bottom: clamp(36px, 7svh, 68px);
  transform: translateX(-50%);
  width: max-content;
}
.holding-footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 12px;
  z-index: 2;
}

/* ---- editorial refinement: corners, print-style frame, serif caption ---- */
.corner {
  position: absolute;
  top: clamp(20px, 4svh, 44px);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  white-space: nowrap;
}
.corner-tl { left: clamp(20px, 4vw, 48px); }
.corner-tr { right: clamp(20px, 4vw, 48px); }

/* photo + caption travel as one centered group */
.center-stack {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  justify-items: center;
  gap: 26px;
}

/* PRINT, not polaroid: near-even border, straight, soft even shadow */
.center-stack .polaroid {
  position: static;
  transform: none;
  width: min(320px, 70vw);
  padding: 16px 16px 20px;
  margin: 0;
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.34),
    0 6px 20px rgba(0, 0, 0, 0.18);
}

/* caption in the italic-serif editorial register */
.center-stack .holding-line {
  position: static;
  transform: none;
  font-family: "New York", ui-serif, Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: 19px;
  letter-spacing: 0.01em;
  color: var(--ink-dim);
}

/* ---- experiment: near-black marquee (small text stays cream) ---- */
.holding-ground .mq { color: #1A0E0C; }
.holding-ground .mq-o {
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(26, 14, 12, 0.62);
}
.holding-ground .marquee-overlay .mq { text-shadow: none; }

/* ---- caption joins the label system: cold, uppercase, tracked ---- */
.center-stack .holding-line {
  font-family: inherit;
  font-style: normal;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* links join the label system too */
.holding-links {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  gap: 18px;
}
.holding-links a { border-bottom: none; }
.holding-links a:hover { color: var(--ink); border-bottom: 1px solid var(--hairline); }
.holding-footer { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; }

/* ---- back to cream marquee (the black experiment is reverted;
   TW confirmed cream is right on the deep oxblood) ---- */
.holding-ground .mq { color: var(--ink); }
.holding-ground .mq-o {
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(247, 241, 230, 0.6);
}
.holding-ground .marquee-overlay .mq {
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.18);
}

/* ---- Apple-quiet metadata: sentence case, normal tracking ----
   One voice is allowed to be loud (the marquee). Everything else
   whispers: scale + muted color do the contrast, never caps. */
.corner,
.center-stack .holding-line,
.holding-links,
.holding-footer {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
}
.corner { font-size: 13px; }
.center-stack .holding-line { font-size: 14px; color: var(--ink-dim); }
.holding-links { font-size: 14px; gap: 16px; }
.holding-footer { font-size: 12px; font-weight: 400; }

/* small-text contrast floor on the oxblood (13px labels need more) */
.holding-ground { --ink-faint: rgba(247, 241, 230, 0.72); }

/* quiet, not timid: Apple's whisper sizes (muted color does the quieting) */
.corner { font-size: 14px; }
.center-stack .holding-line { font-size: 17px; }
.holding-links { font-size: 15px; gap: 20px; }
.holding-footer { font-size: 13px; }

/* hover = brighten only; never add geometry (the underline pushed layout) */
.holding-links a,
.holding-links a:hover {
  border-bottom: none;
  padding-bottom: 0;
}
.holding-links a { transition: color 140ms ease; }
.holding-links a:hover { color: var(--ink); }

/* model credit, stamped on the print's bottom lip */
.center-stack .polaroid { position: relative; padding-bottom: 26px; }
.polaroid .credit {
  position: absolute;
  right: 16px;
  bottom: 6px;
  font-size: 11px;
  font-weight: 500;
  color: rgba(60, 52, 46, 0.72);
  letter-spacing: 0.01em;
}

/* credit moves ONTO the photo (bottom-right, cream over the image);
   the frame goes back to its even print border - the fatter lip was
   what nudged the image off center. */
.center-stack .polaroid { padding: 16px 16px 18px; }
.polaroid .credit {
  right: 26px;
  bottom: 28px;
  color: rgba(247, 241, 230, 0.92);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5);
}

/* FIX: the old absolute-centering left/top re-activated when the frame
   went position:relative (they're inert on static). Neutralize fully -
   the CENTER-STACK does the centering, the frame just sits in it. */
.center-stack .polaroid {
  position: relative;
  left: auto;
  top: auto;
  transform: none;
  z-index: auto;
}