/* ============================================================
   videmory.css — the brand home and the Birthday section.

   Loaded after styles.css, which supplies the palette tokens, the reset,
   the nav, the buttons and the footer. Everything here is the photographic
   layer the two newer page types share: the print stack, the chronology
   reel, the film strip, the full-bleed photograph bands.

   One rule governs the lot. These pages are carrying thirty photographs of
   one person's life, and the photographs are the argument — the type stays
   out of their way, the scrims are only ever as heavy as the text needs,
   and nothing decorative competes with a face.
   ============================================================ */

body.vm { background: var(--bg-deep); color: #f1ece4; }

/* Every photograph carries width and height attributes, so the browser can
   hold its space before it loads and the page does not jump. Those attributes
   are presentational hints: give an image a CSS width and the attribute height
   is still honoured, and a 1536x1024 print renders 395 wide by 1024 tall. The
   components below that want a specific height set one; everything else takes
   its height from the picture. */
.vm img { height: auto; }

.vm h1 {
  font-size: clamp(40px, 4.4vw, 64px);
  letter-spacing: -2.2px;
  line-height: 1.05;
  font-weight: 500;
  margin: 0 0 28px;
}
.vm h1 em { font-style: normal; color: var(--pink); }
.vm h2 {
  font-size: clamp(29px, 2.9vw, 42px);
  line-height: 1.16;
  letter-spacing: -1.2px;
  font-weight: 500;
  margin-bottom: 24px;
  max-width: 800px;
}
.vm h3 { font-size: 22px; line-height: 1.25; font-weight: 500; margin: 22px 0 14px; }
.vm p { line-height: 1.72; }

.vm a:focus-visible,
.vm button:focus-visible,
.vm summary:focus-visible { outline: 3px solid #bd8b4e; outline-offset: 5px; }

.b-kicker {
  font-size: 11px; font-weight: 600; letter-spacing: 2px;
  text-transform: uppercase; color: #d6b68e; margin-bottom: 22px;
}
.b-lead { font-size: 18.5px; color: #c4c3c0; max-width: 540px; }
.b-intro { max-width: 760px; font-size: 18.5px; color: #c4c3c0; }
.b-small { font-size: 12.5px; color: #a9a8a5; margin-top: 14px; }
.b-text-link { font-size: 14px; border-bottom: 1px solid #6f6b63; padding: 8px 0; }
.b-actions { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; margin: 30px 0 16px; }
.b-section { padding: 84px 0; }
.b-section-tight { padding: 54px 0; }

/* A light band, for the sections that want paper under them. */
/* Every link inside the paper band. Without this they inherit the cream the
   dark ground uses, which on #eae3d9 is very close to invisible — it was
   doing exactly that under "Make it personal." */
.b-light a { color: #6b4f2a; }
.b-light a:hover { color: #2f2413; }
.b-light { background: #eae3d9; color: #292821; }
.b-light .b-kicker { color: #705634; }
.b-light .b-intro, .b-light p { color: #55524a; }
.b-light h1, .b-light h2, .b-light h3 { color: #201f1a; }

/* ---------- Hero: the copy, and a small pile of photographs ---------- */

.vm-hero {
  display: grid;
  grid-template-columns: 1.02fr 1fr;
  gap: 72px;
  align-items: center;
  padding-top: 72px;
  padding-bottom: 84px;
}

/* Three prints dropped on a table. The rotations are deliberately uneven —
   evenly fanned they read as a stock graphic, and the point of the picture
   is that these came out of a shoebox. */
.b-stack { position: relative; margin: 0; aspect-ratio: 1.24; }
.b-stack img {
  position: absolute;
  width: 78%;
  border-radius: 2px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.4);
  background: #201f1c;
}
.b-stack img { transform: rotate(var(--rot, 0deg)); }
.b-stack img.is-portrait { width: 50%; }
.b-scatter img.is-portrait { width: 31%; }
.b-stack img:nth-child(1) { top: 0; left: 0; --rot: -6.5deg; }
.b-stack img:nth-child(2) { top: 12%; right: 0; --rot: 4.5deg; }
.b-stack img:nth-child(3) { bottom: 0; left: 9%; --rot: -1.5deg; z-index: 2; }

/* Dealt onto the table one at a time, with a decent pause between them, so
   each photograph is looked at before the next one lands on top of it. The
   delay is the point of the effect; shorten it and it becomes three things
   appearing at once. */
.vm-js .b-stack img { opacity: 0; }
.b-stack.is-dealt img {
  animation: b-deal 720ms cubic-bezier(0.2, 0.75, 0.3, 1) both;
  animation-delay: calc(var(--i, 0) * 1500ms);
}
@keyframes b-deal {
  from { opacity: 0; transform: translate3d(0, -38px, 0) rotate(calc(var(--rot, 0deg) - 10deg)) scale(1.06); }
  to   { opacity: 1; transform: rotate(var(--rot, 0deg)); }
}
/* Anchored by its top edge, below the box. Anchored by its bottom edge, a
   caption that ran to two lines grew upward into the front print — which the
   brand home's caption did the moment it had to say what each print was. */
.b-stack figcaption {
  position: absolute; top: calc(100% + 14px); left: 9%; right: 0;
  font-size: 11px; line-height: 1.5; color: #a4a29f;
}

/* ---------- The promise strip ---------- */

.b-promise { border-top: 1px solid #ffffff22; border-bottom: 1px solid #ffffff22; padding: 24px 0; }
.b-promise ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 12px 32px;
  font-size: 14px; color: #d8c9b4;
}
.b-promise li { padding-left: 18px; position: relative; }
.b-promise li:before { content: '✓'; position: absolute; left: 0; color: #bd8b4e; }

/* ---------- The chronology reel ----------
   Thirty photographs, crossfading at roughly the pace the renderer gives a
   photograph. Without JavaScript the first one simply stays put: the images
   are stacked and only the current one is opaque, so there is no broken
   player and no blank rectangle, just a photograph. */

.b-reel { margin: 0; }
.b-reel-hold { margin-top: 34px; }
.b-reel-stage {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: #14171b;
  border: 1px solid #ffffff1f;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5);
}
.b-reel-frame {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity 900ms ease;
}
.b-reel-frame:first-child { opacity: 1; }
.b-js .b-reel-frame { opacity: 0; }
.b-js .b-reel-frame.is-on { opacity: 1; }
.b-reel-frame img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
/* A portrait sits whole on a blurred, darkened copy of itself — the way
   the film shows one — rather than being cropped to a wide frame. */
.b-reel-frame.is-portrait::before {
  content: ''; position: absolute; inset: -24px;
  background: var(--bg) center / cover no-repeat;
  filter: blur(22px) brightness(0.55);
}
.b-reel-frame.is-portrait img { object-fit: contain; }
/* The slow drift only ever runs on the photograph being shown. */
.b-js .b-reel-frame.is-on img { animation: b-drift 7s ease-out both; }
@keyframes b-drift { from { transform: scale(1.065); } to { transform: scale(1); } }

.b-reel-bar {
  display: flex; align-items: center; gap: 18px;
  margin-top: 18px;
}
.b-reel-play {
  flex: none;
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0; border: 1px solid #ffffff2e; border-radius: 50%;
  background: none; color: #e7e2d9; cursor: pointer;
}
.b-reel-play:hover { border-color: #d8c9b4; color: #fff; }
.b-reel-ticks { display: flex; gap: 3px; flex: 1 1 auto; min-width: 0; }
.b-reel-ticks button {
  flex: 1 1 0; min-width: 0; height: 22px;
  padding: 9px 0 0; margin: 0;
  background: none; border: 0; cursor: pointer;
}
.b-reel-ticks button:before {
  content: ''; display: block; height: 3px;
  background: #ffffff28; transition: background 240ms ease;
}
.b-reel-ticks button:hover:before { background: #ffffff60; }
.b-reel-ticks button[aria-current="true"]:before { background: var(--pink); }

.b-reel-cap {
  display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap;
  margin-top: 14px; min-height: 28px;
}
.b-reel-year { font-size: 26px; letter-spacing: -0.6px; color: var(--pink); font-variant-numeric: tabular-nums; }
.b-reel-text { font-size: 15px; color: #c4c3c0; }
.b-reel-age {
  font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase;
  color: #9d9b97; margin-left: auto;
}

/* ---------- The film strip: the whole life, in order ---------- */

.b-strip {
  display: flex; gap: 14px;
  margin-top: 34px;
  padding-bottom: 18px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
}
.b-strip figure { flex: 0 0 220px; margin: 0; scroll-snap-align: start; }
.b-strip img { width: 100%; aspect-ratio: 3/2; object-fit: cover; display: block; background: #1a1d21; }
.b-strip img.is-portrait { object-fit: contain; }
.b-strip figcaption { margin-top: 9px; font-size: 12px; color: #a9a8a5; }
.b-strip figcaption b { display: block; font-weight: 500; color: #d8c9b4; font-size: 13px; }
.b-light .b-strip figcaption { color: #6a6659; }
.b-light .b-strip figcaption b { color: #4a4336; }

/* ---------- The pile it starts as ---------- */

.b-scatter { position: relative; aspect-ratio: 1.3; margin: 0; }
.b-scatter img {
  position: absolute; width: 46%;
  border-radius: 2px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45);
}
.b-scatter img:nth-child(1) { top: 4%;  left: 2%;  transform: rotate(-11deg); }
.b-scatter img:nth-child(2) { top: 0;   left: 33%; transform: rotate(6deg); }
.b-scatter img:nth-child(3) { top: 10%; right: 0;  transform: rotate(-4deg); }
.b-scatter img:nth-child(4) { top: 38%; left: 14%; transform: rotate(9deg); }
.b-scatter img:nth-child(5) { top: 44%; right: 6%; transform: rotate(-8deg); }
.b-scatter img:nth-child(6) { bottom: 0; left: 0;  transform: rotate(3deg); }
.b-scatter img:nth-child(7) { bottom: 2%; right: 18%; transform: rotate(-13deg); }

.b-split { display: grid; grid-template-columns: 1fr 1.05fr; gap: 66px; align-items: center; }

/* ---------- A full-bleed photograph with text over it ----------
   The scrim is a left-to-right gradient rather than a flat wash, so the side
   the words are on is dark enough to read and the side they are not on is
   still a photograph. */

.b-band { position: relative; overflow: hidden; }
/* --band-y is where cover takes its slice from, for the photographs whose
   faces are not in the middle of the frame; --dy is the drift the script
   adds on scroll.

   Vertical only, and that is not a style choice. `cover` scales until both
   axes are covered, so for a landscape photograph in a wide, short band the
   width matches exactly and there is no horizontal slack at all — a
   percentage shift sideways moves the picture precisely nowhere. Travel
   learned this on its hero. Neighbouring bands alternate direction instead,
   which is the half of the rule that matters: two stacked pictures sliding
   the same way read as one continuous photograph. */
.b-band > img, .b-photo > img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  object-position: center calc(var(--band-y, 50%) + var(--dy, 0%));
  z-index: 0;
}

/* ---------- A Travel photograph behind a section of the brand home ----------
   The picture is texture rather than subject here, so the scrim is the one
   Travel measured against the brightest pixel in its pool — see motion.css,
   "Photographs behind the rest of it". The pool the script draws from is the
   same measured list, read out of motion.js at build time. */
.b-photo { position: relative; isolation: isolate; overflow: hidden; }
.b-photo:after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(11, 13, 16, 0.82) 0%, rgba(11, 13, 16, 0.60) 45%, rgba(11, 13, 16, 0.86) 100%);
}
.b-photo > .wrap { position: relative; z-index: 2; }

/* Measured, not chosen. Every photograph in Travel's pool was drawn to a
   canvas, the brightest pixel in the region the text occupies was taken, the
   scrim composited over it, and the contrast computed. At the scrim above,
   the ordinary kicker (#d6b68e) came out at 4.4:1 and the small print at
   3.6:1 — both under 4.5, and only on the brighter photographs, which is the
   worst way for a fault to behave. Both are lifted here rather than the scrim
   being dropped further, so the picture stays a picture. */
.b-photo .b-kicker { color: #e7cfae; }
.b-photo .b-small { color: #d0cecb; }
.b-band:after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(100deg, rgba(8, 10, 13, 0.94) 0%, rgba(8, 10, 13, 0.82) 42%, rgba(8, 10, 13, 0.42) 100%);
}
.b-band > .wrap { position: relative; z-index: 2; }

/* A band whose content runs the full width takes a vertical scrim instead —
   see the note in build-birthday-pages.py. Measured the same way as the rest:
   every photograph used behind a band, brightest pixel, scrim composited,
   contrast computed. */
.b-band-wide:after {
  background: linear-gradient(180deg, rgba(8, 10, 13, 0.88) 0%, rgba(8, 10, 13, 0.72) 45%, rgba(8, 10, 13, 0.90) 100%);
}
.b-band .b-kicker { color: #e7cfae; }
.b-band .b-card p { color: #d6d5d3; }
.b-band .b-number { color: #e0ccb0; }
.b-band .b-intro, .b-band p { color: #d5d3cf; }

/* ---------- Cards, grids, the rest ---------- */

.b-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; margin-top: 46px; }
.b-grid-4 { grid-template-columns: repeat(4, 1fr); gap: 26px; }
.b-card { border-top: 1px solid #ffffff30; padding: 24px 0 8px; }
.b-light .b-card { border-color: #a59c8a; }
.b-card p { font-size: 15px; color: #bcbdbd; }
.b-light .b-card p { color: #55524a; }
.b-number { font-size: 12px; letter-spacing: 2px; color: #bca78b; }
.b-light .b-number { color: #765d3c; }
.b-follow { margin-top: 34px; }
.b-follow a, .b-related a, .b-article a, .b-section > .wrap > p > a { text-decoration: underline; text-underline-offset: 5px; }

.b-ages { display: grid; grid-template-columns: repeat(6, 1fr); margin-top: 40px; border-top: 1px solid #ffffff2e; }
.b-ages a { display: block; padding: 22px 0; border-bottom: 1px solid #ffffff2e; color: #f1ece4; }
.b-ages em { font-style: normal; font-size: 58px; letter-spacing: -3px; line-height: 1; }
/* The ordinal rides at the top of the number rather than on its baseline.
   vertical-align: top puts it at the top of the line box, which sits a little
   above the digits' cap height — the nudge below brings it level with them. */
.b-ages sup {
  font-size: 0.3em;
  vertical-align: top;
  line-height: 1;
  letter-spacing: 0;
  position: relative;
  top: 0.30em;
  margin-left: 2px;
}
.b-ages a:hover { color: var(--pink); }
.b-ages span { display: block; font-size: 12px; letter-spacing: 0; color: #a9a8a5; margin-top: 10px; }
.b-ages i { font-style: normal; }
.b-light .b-ages { border-color: #b3aa9b; }
.b-light .b-ages a { border-color: #b3aa9b; color: #292821; }
.b-light .b-ages a:hover { color: #825d29; }
.b-light .b-ages span { color: #6a6659; }

.b-quote { font-size: clamp(28px, 3.8vw, 48px); color: var(--pink); max-width: 860px; line-height: 1.3; margin: 36px 0 28px; }

.b-faq { max-width: 850px; margin-top: 34px; }
.b-faq details { border-bottom: 1px solid #ffffff2e; padding: 22px 0; }
.b-light .b-faq details { border-color: #b6ad9e; }
.b-faq summary { cursor: pointer; font-size: 18.5px; font-weight: 500; }
.b-faq details p { padding: 16px 24px 0 0; color: #c4c3c0; }
.b-light .b-faq details p { color: #55524a; }

.b-related { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; }
.b-related a { border-top: 1px solid #b3aa9b; padding: 24px 0; font-size: 19px; line-height: 1.5; }
.b-guide-links { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; font-size: 15px; line-height: 1.5; }
.b-guide-links a { text-decoration: underline; text-underline-offset: 4px; }

.b-enquiry-inner { display: grid; grid-template-columns: 1.6fr 1fr; gap: 72px; align-items: center; }
.b-enquiry p { max-width: 600px; }
.b-enquiry .b-small a { text-decoration: underline; }

/* ---------- Guide pages ---------- */

.b-guide-hero { padding-top: 44px; padding-bottom: 46px; }
.b-guide-hero h1 { max-width: 920px; }
.b-back { display: inline-block; margin-bottom: 38px; font-size: 13px; color: #c9baa5; }
/* Tall enough to hold a face.

   `cover` shows a window on the photograph whose height is the band's height
   over the scaled picture's. At the old 200-odd pixels that window was under
   a quarter of the picture, and the faces in these photographs are spread
   over about half of it — so no --band-y could have fitted them all in, and
   the 1999 one lost the mother's head whatever it was set to. The band grew
   instead, and the title sits in the middle of it. */
.b-guide-band {
  min-height: clamp(340px, 44vh, 520px);
  display: flex;
  align-items: center;
  padding-top: 48px;
  padding-bottom: 56px;
}
.b-guide-band > .wrap { width: 100%; }

.b-article { max-width: 900px; padding-bottom: 80px; }
.b-article > h2 { margin-top: 50px; font-size: 30px; }
.b-article > p { color: #c4c3c0; margin-bottom: 22px; }
.b-article .b-grid { grid-template-columns: repeat(2, 1fr); }
.b-article .b-faq details { border-color: #ffffff30; }
.b-article .b-card .b-number { display: inline-block; margin-bottom: 6px; }

.b-steps > section { display: grid; grid-template-columns: 50px 1fr; gap: 24px; padding: 36px 0; border-bottom: 1px solid #ffffff25; }
.b-steps h2, .b-age-story h2 { font-size: 29px; }
.b-steps p, .b-age-story p { color: #c4c3c0; }
.b-note { background: #1d1f22; padding: 30px; margin: 40px 0 0; border-left: 2px solid var(--pink); }
.b-note h2 { font-size: 27px; margin-top: 0; }
.b-note p { color: #d3cfc6; }
.b-list { list-style: disc; margin: 18px 0 28px 22px; color: #c4c3c0; }
.b-list li { padding: 8px 0 8px 8px; }
.b-age-story { padding: 40px 0; border-bottom: 1px solid #ffffff25; scroll-margin-top: 24px; }
.b-age-label { display: block; color: var(--pink); margin-bottom: 18px; font-size: 14px; }

.b-table-wrap { overflow-x: auto; margin: 32px 0 16px; }
.b-table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 15px; line-height: 1.5; }
.b-table th, .b-table td { text-align: left; vertical-align: top; padding: 14px 16px 14px 0; border-bottom: 1px solid #ffffff25; color: #c4c3c0; }
.b-table thead th { color: var(--pink); font-weight: 500; font-size: 12.5px; letter-spacing: 1px; text-transform: uppercase; }
.b-table tbody th { color: #f1ece4; font-weight: 500; width: 26%; }
/* The accent marks Videmory's own cells. Which those are depends on the
   table: the Birthday comparison puts the three options in columns and us in
   the last one; the Travel one puts the kinds of tool in rows and us in the
   last row. Tinting "its limit" gold because it happened to be the last
   column is how that goes wrong. */
.b-table-cols td:last-child, .b-table-cols thead th:last-child { color: #e6c295; }
.b-table-rows tbody tr:last-child th, .b-table-rows tbody tr:last-child td { color: #e6c295; }

/* ---------- Brand home: the two products ---------- */

.vm-product { padding: 78px 0; border-top: 1px solid #ffffff1f; }
.vm-product-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; flex-wrap: wrap; margin-bottom: 34px; }
.vm-product-head h2 { margin-bottom: 0; }
.vm-product-body { display: grid; grid-template-columns: 1.35fr 1fr; gap: 56px; align-items: start; }
.vm-product-body ul { list-style: none; margin: 22px 0 0; padding: 0; }
.vm-product-body li { padding: 12px 0 12px 22px; position: relative; border-top: 1px solid #ffffff1f; font-size: 15px; color: #c4c3c0; }
.vm-product-body li:before { content: '—'; position: absolute; left: 0; color: #bca78b; }

/* A file name, quoted in running text: set apart just enough to be copied
   exactly, on the dark ground and the light one. */
.vm code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.92em;
  padding: 1px 6px; border-radius: 4px; background: #ffffff14; color: #e8e2d9; white-space: nowrap; }
.b-light code { background: #00000012; color: #3a3428; }

/* ---------- The introductory launch offer ----------
   The figure is the headline and the note sits under it in the small
   type. Nothing flashes, nothing counts down: it is a price, stated. */
.b-offer h2 { max-width: 820px; }
.b-offer .b-intro { max-width: 720px; }

/* mux-player is a custom element: it has no size until it is told one. */
.vm-film { width: 100%; aspect-ratio: 16 / 9; display: block; background: #14171b; border: 1px solid #ffffff1f; }
/* The 9:16 cut on a phone held upright, tall and centred. */
.vm-film.is-tall { aspect-ratio: 9 / 16; max-width: min(400px, 78vw); margin-left: auto; margin-right: auto; }

/* ---------- Motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .vm *, .vm *:before, .vm *:after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  .b-js .b-reel-frame.is-on { opacity: 1; }
}

/* ---------- Narrower ---------- */

@media (max-width: 1000px) {
  .vm-hero { gap: 40px; }
  .b-split { gap: 36px; }
  .vm-product-body { gap: 34px; }
  .b-grid { gap: 24px; }
  .b-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .b-enquiry-inner { gap: 30px; }
}

@media (max-width: 760px) {
  .vm-hero { grid-template-columns: 1fr; padding-top: 34px; padding-bottom: 64px; gap: 56px; }
  .vm h1 { font-size: 42px; letter-spacing: -1.6px; }
  .b-lead, .b-intro { font-size: 17px; }
  /* On a phone the hero stacks, and six lines of lead put the photographs
     below the fold on the one page whose whole argument is photographs. They
     go first instead. Only the visual order moves — the h1 is still the first
     thing in the document, and the stack has nothing focusable in it. */
  .vm-hero .b-stack { order: -1; margin-bottom: 72px; }
  .b-stack { max-width: 440px; aspect-ratio: 1.15; }
  .b-stack figcaption { top: calc(100% + 12px); }
  .b-section { padding: 54px 0; }
  .b-section-tight { padding: 38px 0; }
  .b-promise ul { flex-direction: column; gap: 10px; }
  .b-split, .b-grid, .b-grid-4, .b-related, .b-enquiry-inner, .b-guide-links, .vm-product-body { grid-template-columns: 1fr; }
  .b-grid { margin-top: 28px; gap: 8px; }
  .b-related { gap: 0; }
  .b-scatter { max-width: 420px; aspect-ratio: 1.2; }
  .b-ages { grid-template-columns: repeat(3, 1fr); }
  .b-ages a { font-size: 46px; }
  .b-strip figure { flex-basis: 172px; }
  .b-article .b-grid { grid-template-columns: 1fr; }
  .b-steps > section { grid-template-columns: 25px 1fr; gap: 14px; }
  .b-note { padding: 22px; }
  .b-guide-hero { padding-top: 28px; }
  .b-kicker { font-size: 10px; letter-spacing: 1.5px; }
  .b-faq summary { font-size: 17px; }
  .b-reel-age { margin-left: 0; width: 100%; }
  .b-reel-ticks button { height: 36px; padding-top: 16px; }
  .b-reel-bar { gap: 12px; }
  .b-band:after { background: linear-gradient(to bottom, rgba(8, 10, 13, 0.9), rgba(8, 10, 13, 0.82)); }
}

/* The one-line provenance note on a photograph band. Small, but it is the
   line that keeps an invented collection from reading as a customer's. */
/* Lifted from #a4a29f, which measured 4.1:1 against the brightest of the
   Birthday photographs behind it. */
.b-band-note { margin-top: 26px; font-size: 11.5px; color: #c2c0bc; max-width: 620px; line-height: 1.6; }

/* ---------- Things that arrive on the way down the page ----------

   Scoped to .vm-js, which an inline script in <head> sets before the
   stylesheets load. Without JavaScript the class is never set and every one
   of these is simply visible, rather than permanently transparent with
   nothing left to reveal it.

   The classes are put on by videmory.js from a list of selectors rather than
   written into the markup, so a page cannot quietly hide a section the
   script is not there to bring back. */

.vm-js .vm-rise,
.vm-js .vm-pop {
  opacity: 0;
  transition: opacity 620ms ease, transform 620ms cubic-bezier(0.2, 0.7, 0.3, 1);
  transition-delay: calc(var(--i, 0) * 80ms);
}
.vm-js .vm-rise { transform: translate3d(0, 22px, 0); }
.vm-js .vm-pop { transform: translate3d(0, 14px, 0) scale(0.985); }
.vm-js .vm-rise.is-in,
.vm-js .vm-pop.is-in { opacity: 1; transform: none; }

/* The hairline that says how far down the page you are. Travel has one; the
   brand home and the Birthday pages are long enough to want the same. */
.vm-progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 100%;
  transform: scaleX(var(--p, 0)); transform-origin: 0 50%;
  background: var(--pink);
  z-index: 60; pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .vm-js .vm-rise, .vm-js .vm-pop { opacity: 1; transform: none; transition: none; }
  .vm-js .b-stack img { opacity: 1; }
  .b-stack.is-dealt img { animation: none; }
  .b-band > img, .b-photo > img { object-position: center var(--band-y, 50%) !important; }
  .vm-progress { display: none; }
}

/* A guide's opening line, over its photograph. Wider than the hero lead,
   which shares its row with a stack of prints. */
.b-lead-wide { max-width: 660px; margin-top: -6px; }

/* The guide list on Travel's home page. The plain 15px version reads as a
   footer note halfway up a page where everything else is confident; ruled and
   a size up, it reads as a section. */
.b-guide-links-lg { grid-template-columns: 1fr 1fr; gap: 0 48px; font-size: 18px; }
.b-guide-links-lg a {
  display: block;
  padding: 20px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  text-decoration: none;
  line-height: 1.35;
}
.b-guide-links-lg a:hover { color: #fff; border-top-color: rgba(255, 255, 255, 0.4); }
@media (max-width: 760px) { .b-guide-links-lg { grid-template-columns: 1fr; font-size: 16.5px; } }