/* STUDIO SEM · landing page for the outreach batch (more-bookings.html)
 *
 * Loaded on ONE page, scoped under .v2 so it cannot reach home, services or
 * about. The skeleton is borrowed from services-v2.css on purpose: same
 * header, same type, same light and dark bands, same footer. Someone who
 * clicks from here into Services should not feel they changed site.
 *
 * REBUILT 2026-08-02 for conversion, after the first version was a long read.
 * What the research changed, and why:
 *
 *   1. THE OFFER IS VISIBLE WITHOUT SCROLLING. Headline, the four words that
 *      say what you get, the button, and a look at the work, all above the
 *      fold. Average scroll depth on a landing page is around 56 %, so
 *      anything past halfway is seen by fewer than half of the people who
 *      arrive, and a page with its call to action above the fold converts
 *      better than one where you have to scroll to find it.
 *   2. ONE ACTION, REPEATED. Every button books the same 30 minutes. Pages
 *      with a single call to action outconvert pages offering several. The
 *      repeat is the same ask, not a new one.
 *   3. SHORT. Nine sections became four, and the paragraphs became lines. The
 *      detail belongs on the call, which is what the page asks for.
 *   4. THE WORK IS THE PROOF. We may not name clients, so credibility has to
 *      come from the craft being visible. Hence the format grid: it shows what
 *      a round of creative looks like instead of describing it.
 *
 * The nav stays, against the usual advice to strip it from a landing page.
 * Deliberate, Noras 2026-08-02: this traffic arrives from a cold email, and
 * clicking into the rest of the site is how a stranger checks we are real.
 * Trust first, funnel discipline second.
 */

/* ---------- hero ----------
   Copy left, work right. Same split as index.html, so the two pages open the
   same way. */

.v2 .lp-hero { padding: 4.4rem 0 4.6rem; }
.v2 .lp-hero > .wrap {
  display: grid;
  grid-template-columns: 1fr 40%;
  column-gap: 6%;
  align-items: center;
}

/* Bigger than the services hero. This is the only sentence on the page that
   has to land, and the page is four sections rather than nine, so it can
   carry the weight. */
.v2 .lp-hero .jc-lede {
  font-size: clamp(2rem, 4.4vw, 4rem);
  line-height: 1.04;
  max-width: 13em;
}

.v2 .lp-sub {
  font-size: 1.08rem;
  line-height: 1.55;
  max-width: 26em;
  margin: 1.7rem 0 0;
  color: var(--espresso);
}

/* What you get, in four words, for the visitor who reads nothing else. The
   the accent dots are the only decoration on the page and the reason it reads as
   ours rather than as a template. */
.v2 .lp-strip {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  padding: 1.6rem 0 0;
  margin: 1.8rem 0 0;
  border-top: 1px solid var(--line);
  font-family: var(--label);
  font-size: .82rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--espresso);
}
.v2 .lp-strip li { position: relative; }
.v2 .lp-strip li:not(:last-child)::after {
  content: "·";
  position: absolute;
  right: -.95rem;
  color: var(--accent);
}

.v2 .lp-hero .actions { margin-top: 2.2rem; }

/* Filled rather than outlined: it is the only action on the page, and an
   outline reads as one option among several. Slightly larger than the
   services button, for the same reason the headline is. */
.v2 .btn-go {
  background: var(--espresso);
  border-color: var(--espresso);
  color: var(--cream);
  padding: 18px 52px;
  font-size: .95rem;
}
.v2 .btn-go:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-on);
}

/* Hero mosaic. The container carries the aspect ratio and the tiles fill it,
   rather than each tile carrying its own: with per-tile ratios the tall tile
   and the two short ones disagree about the row height and leave a gap under
   the images. */
.v2 .lp-mosaic {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: 1fr 1fr;
  gap: 12px;
  aspect-ratio: 1 / 1.1;
}
.v2 .lp-mosaic > div { min-height: 0; }
.v2 .lp-mosaic .media { height: 100%; }
.v2 .lp-mosaic .m-tall { grid-row: span 2; }

/* ---------- the banner ----------
   Photo left, the passage right, the categories across the bottom. Cream
   rather than white, so it reads as its own moment between a white hero and a
   black band instead of a continuation of the hero.

   The heading is set at hero size on purpose. It is the one line on the page
   that is about the reader rather than about the work, and it should land with
   the same weight as the headline above it. */

.v2 .lp-banner {
  background: var(--cream);
  padding: 4.8rem 0 4.4rem;
}
.v2 .lp-banner > .wrap {
  display: grid;
  /* 30 % rather than 34 %: the photo here is a placeholder at 420px wide, and
     the smaller it is drawn the less it announces that. Give it back its width
     when the real photo of them exists. */
  grid-template-columns: 30% 1fr;
  column-gap: 6%;
  align-items: center;
}

.v2 .lp-banner-photo { margin: 0; min-width: 0; }
.v2 .lp-banner-photo .media { aspect-ratio: 4 / 5; }

.v2 .lp-banner-copy { min-width: 0; }
.v2 .lp-banner-copy h2 {
  font-family: var(--display);
  font-weight: var(--h1-weight);
  font-size: clamp(1.7rem, 2.9vw, 2.7rem);
  line-height: 1.1;
  letter-spacing: -.01em;
  color: var(--espresso);
  margin: 0 0 1.5rem;
  max-width: 16em;
}
.v2 .lp-banner-copy p {
  font-size: 1.02rem;
  line-height: 1.62;
  max-width: 54ch;
  margin: 0 0 1rem;
}
.v2 .lp-banner-copy p:last-child { margin-bottom: 0; }

/* The categories run the full width under both columns, on their own rule.
   A row rather than a list: it is there to be recognised at a glance, not
   read. */
.v2 .lp-who {
  grid-column: 1 / -1;
  margin-top: 3.4rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}
.v2 .lp-who .eyebrow { margin-bottom: 1.1rem; }

/* The moving row. The track holds two identical lists and slides the pair by
   exactly half its own width, which lands the second list where the first
   started: the loop has no seam and no jump.

   The categories bleed to both screen edges rather than stopping at the
   gutter, so the row reads as something passing through the page rather than a
   list that happens to move. */
.v2 .lp-who-track {
  display: flex;
  width: max-content;
  margin-left: calc(-1 * var(--gutter));
  padding-left: var(--gutter);
}
.v2 .lp-who {
  overflow: hidden;
  /* The bleed above would otherwise let the row escape .wrap's padding on the
     right as well, and a category cut off mid-word at the edge looks broken
     rather than deliberate. */
  margin-right: calc(-1 * var(--gutter));
  padding-right: var(--gutter);
}

.v2 .lp-who ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex: 0 0 auto;
  gap: .6rem 2.6rem;
  padding-right: 2.6rem;
}
.v2 .lp-who li {
  font-family: var(--display);
  font-size: 1.05rem;
  color: var(--espresso);
  position: relative;
}
/* Every item carries a dot, including the last one in each list: the two lists
   run into each other, so the join needs a separator like any other gap. */
.v2 .lp-who li::after {
  content: "·";
  position: absolute;
  right: -1.55rem;
  color: var(--accent);
}

@media (prefers-reduced-motion: no-preference) {
  .v2 .lp-who-track { animation: lp-marquee 34s linear infinite; }
  .v2 .lp-who:hover .lp-who-track,
  .v2 .lp-who:focus-within .lp-who-track { animation-play-state: paused; }
  @keyframes lp-marquee {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
  }
}

/* Reduced motion gets the row standing still. The duplicate list would then be
   five categories repeated for no reason, so it goes. */
@media (prefers-reduced-motion: reduce) {
  .v2 .lp-who-track { width: auto; flex-wrap: wrap; }
  .v2 .lp-who-track ul[aria-hidden="true"] { display: none; }
  .v2 .lp-who-track ul { flex-wrap: wrap; }
  /* The dot on the last item exists to cover the seam between the two lists.
     With the second list gone there is no seam, only a dot after Dental. */
  .v2 .lp-who li:last-child::after { content: none; }
}

/* ---------- bands ---------- */

/* The section number in the eyebrow. Four sections, numbered, so a visitor can
   tell where they are and how much is left. The accent for the number, the label
   stays in the eyebrow's own colour. */
.v2 .eyebrow b {
  font-weight: inherit;
  color: var(--accent);
  margin-right: .7em;
}

.v2 .lp-band { padding: 4.6rem 0 4.8rem; }
.v2 .lp-band.dark {
  background: var(--espresso);
  color: rgba(253, 249, 240, .84);
}
.v2 .lp-band.dark h2,
.v2 .lp-band.dark h3 { color: var(--cream); }
.v2 .lp-band.dark .eyebrow { color: rgba(253, 249, 240, .72); }

/* reveal.js sweeps a paper-coloured curtain off every .media as it comes into
   view. Over a dark band that curtain lights up like a flash, and a screenshot
   taken mid-sweep shows a cream block sitting under half the image.
   services-v2.css already fixes this for .svc.dark; this is the same fix for
   this page's band. Miss it and the grid looks broken while it animates. */
.v2 .lp-band.dark .media.reveal::before { background: var(--espresso); }

/* The light band. Same white as the how-it-runs section, with a hairline on
   top: two light sections meeting with nothing between them read as one long
   section that lost its way, and the numbers alone are not enough of a seam. */
.v2 .lp-band.lp-light {
  background: var(--white);
  border-top: 1px solid var(--line);
}

.v2 .lp-band > .wrap {
  display: grid;
  grid-template-columns: 33% 1fr;
  column-gap: 4.5%;
  align-items: start;
}

/* Flipped: the list takes the wide left column and the heading sits to its right.
   Noras 2026-08-05, "on the other side instead". Source order is unchanged, so the
   heading is still read first by a screen reader and still first on mobile, where
   the grid collapses to one column and the flip has nothing to flip. */
.v2 .lp-band.lp-flip > .wrap {
  grid-template-columns: 1fr 33%;
}
/* grid-column, not order. .lp-head and .lp-body are placed explicitly further down
   this file (grid-column: 1 and 2), and an explicit placement beats `order` outright,
   so the order version of this rule computed correctly and moved nothing.

   grid-row: 1 on BOTH is required, not tidiness. Placing the head into column 2
   first advances the auto-placement cursor past column 1, so the body no longer
   fits on row 1 and drops to row 2, sitting under the heading with the height of
   the heading as empty space above it. That is the gap. */
.v2 .lp-band.lp-flip > .wrap > .lp-head { grid-column: 2; grid-row: 1; }
.v2 .lp-band.lp-flip > .wrap > .lp-body { grid-column: 1; grid-row: 1; }

/* Clay band. Everything on it is cream at 4.7:1, including the summaries and the
   hairlines between them, which inherit --line from the surface class. */
.v2 .lp-band.on-clay h2,
.v2 .lp-band.on-clay h3,
.v2 .lp-band.on-clay summary { color: var(--cream); }
.v2 .lp-band.on-clay .eyebrow { color: var(--muted); }
.v2 .lp-band.on-clay a { color: var(--cream); }

/* The heading column stays with you while the work scrolls past it.
   Before this, every band had a short heading at the top of a very tall
   column, so two thirds of the left side was empty space that looked
   forgotten rather than deliberate. Sticky turns that emptiness into the
   reason the column is there: you always know which section you are in.

   Only where the two-column layout exists. Stacked, there is nothing to stick
   to and a heading that follows you up a phone screen is just in the way.
   96px clears the sticky header. */
@media (min-width: 1181px) {
  .v2 .lp-band .lp-head {
    position: sticky;
    /* 96px reserved room for the sticky site header. The header became a masthead
       that scrolls away on 2026-08-05, so that offset now just pushes the heading
       down the column and opens a gap above it. */
    top: 28px;
  }
}
/* min-width: 0 on both columns. A grid item defaults to min-width: auto, which
   means it refuses to shrink below the width of what is inside it, and one
   long headline or one wide image row then pushes the whole page sideways.
   This is the single line that keeps the page from scrolling horizontally on a
   phone. */
.v2 .lp-head { grid-column: 1; min-width: 0; }
.v2 .lp-body { grid-column: 2; min-width: 0; }

.v2 .lp-band h2 {
  font-family: var(--display);
  font-weight: var(--h1-weight);
  font-size: clamp(1.9rem, 3.3vw, 3.1rem);
  line-height: 1.04;
  letter-spacing: -.01em;
  color: var(--espresso);
  margin: 0;
  max-width: 12em;
}
.v2 .lp-band .lp-lede {
  font-size: .98rem;
  line-height: 1.6;
  max-width: 46ch;
  margin: 1.3rem 0 0;
}

/* ---------- the batch ----------
   Tight gaps on purpose: this should read as a contact sheet, one set of work,
   rather than as separate pictures in a gallery. */

/* Three across, not four. Five larger tiles read as a considered set; eight
   small ones read as a stock grid, and every tile is also a sample of our
   work, so a bigger sample is a better argument. */
.v2 .lp-batch {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  min-width: 0;
}
/* Each tile is a column so the captions can be pushed to the bottom with
   margin-top: auto. That is what makes them line up across a row of tiles
   that are deliberately different shapes. */
.v2 .lp-batch figure { margin: 0; display: flex; flex-direction: column; }
.v2 .lp-batch .media { aspect-ratio: 9 / 16; flex: 0 0 auto; }
.v2 .lp-batch .b-wide { grid-column: span 2; }

/* Second row. The portrait tile sets the row height and the other two fill
   it, rather than each tile carrying its own ratio: three different ratios on
   one row leave ragged bottoms, which reads as a mistake on a page whose
   whole argument is that we can lay things out. */
.v2 .lp-batch .b-portrait .media { aspect-ratio: 4 / 5; }
.v2 .lp-batch .b-wide .media,
.v2 .lp-batch .b-square .media {
  aspect-ratio: auto;
  flex: 1 1 auto;
  min-height: 0;
}

/* The ratio in the accent, what it is for underneath. The labels carry the
   information the paragraphs used to. */
.v2 .lp-batch figcaption {
  font-family: var(--label);
  font-size: .7rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  /* .6 was too quiet against black to read at this size. */
  color: rgba(253, 249, 240, .78);
  margin-top: auto;
  padding-top: .6rem;
}
.v2 .lp-batch figcaption b {
  display: block;
  font-weight: inherit;
  color: var(--accent-hover);
  margin-bottom: .15rem;
}

/* ---------- accordions ----------
   Used twice: the three steps, and the category rules. Headline visible,
   detail on click. On a phone that turns three screens of reading into one,
   which is the whole reason for it: the reader chooses what to open instead of
   scrolling past what they did not want.

   Native <details> with a shared name, so opening one closes the others and
   the whole thing works with scripts off. Same mechanism as the home page. */

.v2 .lp-acc { border-top: 1px solid var(--line); }
.v2 .lp-band.dark .lp-acc,
.v2 .lp-band.dark .lp-acc details { border-color: rgba(253, 249, 240, .22); }

/* styles.css draws every <details> as a rounded white card, for the FAQ on the
   home page. Here they are rows in a list, and on the dark band that card
   turned into a cream block with cream text inside it. Everything the card rule
   sets has to be undone, not just the background. */
.v2 .lp-acc details {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  padding: 0;
}

.v2 .lp-acc summary {
  display: flex;
  align-items: baseline;
  gap: .9rem;
  /* styles.css sets space-between on every summary, for the home page FAQ
     where the label and the marker sit at opposite ends. Here the number and
     the headline belong next to each other, and the marker is positioned
     absolutely, so that rule has to be undone rather than inherited. */
  justify-content: flex-start;
  padding: 1.15rem 2.4rem 1.15rem 0;
  position: relative;
  cursor: pointer;
  font-family: var(--display);
  font-weight: var(--h1-weight);
  font-size: 1.16rem;
  line-height: 1.25;
  color: var(--espresso);
  /* The default triangle sits in the wrong place and cannot be styled in every
     browser, so it goes and the plus sign below replaces it. */
  list-style: none;
}
.v2 .lp-acc summary::-webkit-details-marker { display: none; }
.v2 .lp-band.dark .lp-acc summary { color: var(--cream); }

.v2 .lp-acc summary .n {
  font-size: .95rem;
  color: var(--accent);
  flex: 0 0 auto;
}

/* A plus that becomes a minus. Two bars, one rotated, so there is no icon file
   and no font to load. */
.v2 .lp-acc summary::before,
.v2 .lp-acc summary::after {
  content: "";
  position: absolute;
  right: 2px;
  top: 1.65rem;
  width: 13px;
  height: 1px;
  background: currentColor;
  opacity: .75;
}
.v2 .lp-acc summary::after { transform: rotate(90deg); }
.v2 .lp-acc details[open] summary::after { transform: rotate(0deg); }

.v2 .lp-acc summary:hover { color: var(--accent); }
.v2 .lp-acc summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.v2 .lp-acc .acc-body { padding: 0 2.4rem 1.4rem 0; }
.v2 .lp-acc .acc-body p {
  font-size: .95rem;
  line-height: 1.62;
  max-width: 78ch;
  margin: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .v2 .lp-acc summary,
  .v2 .lp-acc summary::before,
  .v2 .lp-acc summary::after { transition: color .2s ease, transform .2s ease; }
  .v2 .lp-acc .acc-body { animation: lp-open .28s ease both; }
  @keyframes lp-open {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: none; }
  }
}

/* ---------- who you work with ----------
   The photo that used to sit beside the accordion has gone: it was the same
   placeholder file as the banner, and the same picture twice on one page reads
   as a mistake. The banner is the slot that gets the real photo. The accordion
   now has the column to itself. */

.v2 .lp-us { min-width: 0; }
.v2 .lp-us .lp-acc { min-width: 0; }

/* Links inside an accordion body on the dark band. They are the way through to
   the rest of the site, so they have to be findable without shouting. */
.v2 .lp-acc .acc-body a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}
.v2 .lp-acc .acc-body a:hover { color: var(--accent-hover); }

/* ---------- the format filter ----------
   Four radio buttons and their labels, then the grid, all siblings so the
   :checked ~ selector can reach it. No script: radios give keyboard support
   and a working state for free, and the grid is real markup either way.

   Filtering hides tiles rather than reordering them, so nothing moves that the
   reader did not ask to move. */

/* Off screen rather than display:none, so the radios stay focusable and
   arrow-key navigation between them keeps working. They are direct children of
   the band's grid, which would make them grid items, so they are taken out of
   flow entirely. */
.v2 .lp-band > .wrap > input[name="fmt"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.v2 .lp-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 2rem;
  min-width: 0;
}

.v2 .lp-chips label {
  cursor: pointer;
  /* 16px of side padding rather than 20: the four of them then fit on one line
     in the heading column, and a single chip wrapping onto a second row looks
     like an accident. */
  padding: 9px 16px;
  border: 1px solid rgba(253, 249, 240, .3);
  font-family: var(--label);
  font-size: .76rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(253, 249, 240, .8);
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.v2 .lp-chips label:hover { border-color: var(--cream); color: var(--cream); }

/* The checked and focused states have to reach across to the other column now
   that the input and its label are no longer neighbours. Written out one by one
   rather than cleverly: four rules that say what they do beat one selector
   nobody can read. */
#fmt-all:checked ~ .lp-head label[for="fmt-all"],
#fmt-video:checked ~ .lp-head label[for="fmt-video"],
#fmt-carousel:checked ~ .lp-head label[for="fmt-carousel"],
#fmt-still:checked ~ .lp-head label[for="fmt-still"] {
  background: var(--cream);
  border-color: var(--cream);
  color: var(--espresso);
}
#fmt-all:focus-visible ~ .lp-head label[for="fmt-all"],
#fmt-video:focus-visible ~ .lp-head label[for="fmt-video"],
#fmt-carousel:focus-visible ~ .lp-head label[for="fmt-carousel"],
#fmt-still:focus-visible ~ .lp-head label[for="fmt-still"] {
  outline: 2px solid var(--accent-hover);
  outline-offset: 3px;
}

#fmt-video:checked ~ .lp-body .lp-batch figure:not(.k-video),
#fmt-carousel:checked ~ .lp-body .lp-batch figure:not(.k-carousel),
#fmt-still:checked ~ .lp-body .lp-batch figure:not(.k-still) { display: none; }

/* The tiles answer the pointer. Small, and the only movement on the page that
   a visitor causes themselves. */
@media (prefers-reduced-motion: no-preference) {
  .v2 .lp-batch .media img,
  .v2 .lp-batch .media video { transition: transform .5s ease; }
  .v2 .lp-batch figure:hover .media img,
  .v2 .lp-batch figure:hover .media video { transform: scale(1.05); }
  .v2 .lp-batch figcaption { transition: color .25s ease; }
}
.v2 .lp-batch figure:hover figcaption { color: var(--cream); }

/* ---------- the sticky bar ----------
   Phones only. Shown by lp-ui.js once the hero is gone, hidden again at the
   calendar. hidden="" on the element is what keeps it away with scripts off,
   and [hidden] needs saying out loud here because the rule below sets display. */

.v2 .lp-sticky[hidden] { display: none; }
.v2 .lp-sticky {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  display: none;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: rgba(0, 0, 0, .92);
  backdrop-filter: blur(6px);
}
.v2 .lp-sticky .btn-go {
  display: block;
  text-align: center;
  padding: 15px 20px;
  background: var(--cream);
  border-color: var(--cream);
  color: var(--espresso);
}

/* ---------- close ---------- */

.v2 .lp-close {
  padding: 5.2rem 0 5.6rem;
  text-align: center;
  background: var(--espresso);
  color: rgba(253, 249, 240, .84);
}
.v2 .lp-close h2 {
  font-family: var(--display);
  font-weight: var(--h1-weight);
  font-size: clamp(2rem, 3.8vw, 3.4rem);
  line-height: 1.04;
  letter-spacing: -.01em;
  color: var(--cream);
  margin: 0 auto;
  max-width: 15em;
}

/* The calendar. Held to a readable width and given a cream panel, so it reads
   as part of the page rather than as something bolted to the bottom of it.
   Calendly draws its own interface inside once it loads; the colours are
   passed in the data-url, which is the only control we have over it. */
.v2 .lp-cal {
  max-width: 1000px;
  margin: 2.6rem auto 0;
}
.v2 .lp-cal #cal-mount {
  background: var(--cream);
  padding: 8px;
}

/* Reversed on the dark band: an ink button on an ink background is an
   invisible button. Cream fill, the accent on hover, same as everywhere else. */
.v2 .lp-close .btn-go {
  background: var(--cream);
  border-color: var(--cream);
  color: var(--espresso);
}
.v2 .lp-close .btn-go:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-on);
}

/* What stands there until the widget is on the page: a link and one line. It
   sits directly on the dark band, so it takes the light text colours below,
   not the panel's dark ones. */
.v2 .lp-cal-gate { padding: .6rem 0 0; }
.v2 .lp-cal-gate .lp-fallback { margin-top: 1.2rem; }
.v2 .lp-cal-gate [hidden] { display: none; }

.v2 .lp-fallback {
  font-size: .88rem;
  line-height: 1.5;
  color: rgba(253, 249, 240, .72);
  margin: 1.4rem 0 0;
}
.v2 .lp-fallback a { color: var(--cream); text-underline-offset: 4px; }

/* Only inside the cream panel does the small print go dark. Written against
   #cal-mount rather than .lp-cal: the gate is a child of .lp-cal too, and the
   wider selector painted taupe text onto the black band. */
.v2 #cal-mount .lp-fallback { color: var(--espresso); }
.v2 #cal-mount .lp-fallback a { color: var(--espresso); }

/* ---------- responsive ---------- */

@media (max-width: 1180px) {
  .v2 .lp-hero > .wrap { grid-template-columns: 1fr; row-gap: 2.6rem; }
  .v2 .lp-banner > .wrap { grid-template-columns: 38% 1fr; column-gap: 4%; }
  .v2 .lp-band > .wrap { grid-template-columns: 1fr; row-gap: 2rem; }
  .v2 .lp-head, .v2 .lp-body { grid-column: 1; }
  .v2 .lp-band h2 { max-width: 14em; }
  .v2 .lp-band .lp-lede { max-width: 75ch; }
  .v2 .lp-mosaic { aspect-ratio: 16 / 10; }
}

@media (max-width: 860px) {
  .v2 .lp-hero { padding: 2.8rem 0 3rem; }
  .v2 .lp-band { padding: 3.2rem 0 3.4rem; }
  .v2 .lp-close { padding: 3.8rem 0 4.2rem; }
  .v2 .lp-sub { font-size: 1rem; }
  .v2 .lp-strip { font-size: .74rem; gap: .4rem 1.3rem; }
  .v2 .lp-mosaic { aspect-ratio: 1 / .9; }


  /* Two across instead of three. A thumbnail of a banner proves nothing.
     dense fills the hole that five tiles leave in a two column grid: without
     it the third vertical sits alone with an empty square beside it. */
  .v2 .lp-batch { grid-template-columns: repeat(2, 1fr); grid-auto-flow: dense; }
  .v2 .lp-batch .b-wide { grid-column: span 2; }

  /* Photo above the words. A 38 % photo column on a phone is a stamp, and the
     passage beside it gets four words to a line. */
  .v2 .lp-banner { padding: 3.2rem 0 3.2rem; }
  .v2 .lp-banner > .wrap { grid-template-columns: 1fr; row-gap: 2rem; }
  .v2 .lp-banner-photo .media { aspect-ratio: 3 / 2; }
  .v2 .lp-who { margin-top: 2.4rem; }
  .v2 .lp-who ul { gap: .5rem 2.2rem; }
  .v2 .lp-who li { font-size: .98rem; }

  .v2 .lp-chips { margin-top: 1.6rem; }
  .v2 .lp-chips label { padding: 8px 15px; font-size: .7rem; }
  .v2 .lp-acc summary { font-size: 1.06rem; padding-right: 2rem; }

  /* The sticky bar is a phone thing. On desktop the page is short enough and
     the button is never far, and a bar across the bottom of a wide screen is
     just a bar across the bottom of a wide screen. */
  .v2 .lp-sticky:not([hidden]) { display: block; }

  /* Room under the calendar so the bar never covers the last line. */
  .v2 .lp-close { padding-bottom: 6.5rem; }
}

/* Phones only. Every max-width on this page is in em, which is the right unit
   for a line length and the wrong one for a narrow screen: 13em of headline is
   wider than a small phone, and the page would scroll sideways. A measure only
   matters while the screen is wider than it is, so below this they all come
   off. Kept at 560 rather than 860 so tablets keep their line lengths. */
@media (max-width: 560px) {
  .v2 .lp-hero .jc-lede,
  .v2 .lp-sub,
  .v2 .lp-banner-copy h2,
  .v2 .lp-banner-copy p,
  .v2 .lp-band h2,
  .v2 .lp-band .lp-lede,
  .v2 .lp-acc .acc-body p,
  .v2 .lp-close h2 { max-width: none; }
}

/* .lp-facts and .lp-note lived here until 2026-08-02. Both were plain blocks of
   prose: the category list and the money section. The list became the accordion
   above, and the money section came off the page entirely. Nothing uses these
   any more, so they are gone rather than left to rot. */


/* ---------- the batch, reduced to one ----------
   .lp-batch is a three column grid built for five tiles behind a format filter.
   With a single figure it would sit in the left third and look dropped rather
   than placed, so the solo variant gives it one column and a 4:5 frame. Added
   2026-08-25 when the switcher came out. */
.v2 .lp-batch.solo {
  grid-template-columns: minmax(0, 1fr);
  max-width: 460px;
}
.v2 .lp-batch.solo .media { aspect-ratio: 4 / 5; }