/* /holiday-minis only. One block per section, in page order; the reasoning
   behind each rule is in .work/holiday-minis/css-rationale.md (never served). */

/* == Page-wide ============================================================ */
/* Cormorant's default old-style figures read 14 as I4 */
main{font-variant-numeric:lining-nums;}
/* a literal   can still break under zoom; a bound pair breaks before itself */
main p,main h2,main h3,main li{overflow-wrap:anywhere;}
h2 .pt-nowrap,.three-col p .pt-nowrap{overflow-wrap:normal;}
.pt-nowrap{white-space:nowrap;}
.three-col .pt-nowrap{white-space:normal;}
/* room for the focus ring at the bottom edge */
html{scroll-padding-bottom:16px;}
main .section-label{font-weight:500;}
/* one weight for every button; .btn inherits the body's 300 */
main .btn{font-weight:500;}
/* on charcoal --gold-text is 2.92:1; --gold reads as a button */
section.dark .btn-gold,.cta-band .btn-gold{background:var(--gold);color:var(--charcoal);font-weight:500;}
section.dark .btn-gold:hover,.cta-band .btn-gold:hover{background:var(--gold-light);color:var(--charcoal);}
/* notes under buttons: body weight, full ink */
.offer-cta-note,.gallery-note{font-weight:400;color:var(--ink);}
.offer-cta-note,.cta-band-note{text-wrap:balance;}
/* one body weight across the page */
.three-col p,.numbered-steps p,.faq-answer,.why-body,.cta-band p,#recent-minis + p,.dates-empty{font-weight:400;}
@media (max-width:1023.98px){
  main h2{text-wrap:balance;}
  main p,.faq-answer,.three-col p,.numbered-steps p{text-wrap:pretty;}
  .booking-alt-label,.dates-intro{text-wrap:balance;}
}
/* the narrowest phones trade tracking for one-line buttons */
@media (max-width:339.98px){
  main .btn{padding-left:20px;padding-right:20px;letter-spacing:0.1em;}
}
@media (forced-colors:active){
  main .btn{border:1px solid ButtonText;}
}

/* == Live / ended, and the other dated switches ===========================
   data-expires only removes, so a marker going (#run-live on 21 Dec) flips
   these. With JS off nothing sweeps and the page stays live. */
.run-ended{display:none;}
main:not(:has(#run-live)) .run-ended{display:block;}
main:not(:has(#run-live)) a.run-ended{display:inline-block;}
main:not(:has(#run-live)) .run-live{display:none;}
h1 .run-live{display:inline;}
main:not(:has(#run-live)) h1 .run-ended{display:inline;}
/* the run's opening date is useful until the run opens, stale after */
.mid-only{display:none;}
main:not(:has(#run-early)) .early-only{display:none;}
main:not(:has(#run-early)) .mid-only{display:inline;}
/* from 7 Dec the callout gives a late buyer the reason to book anyway */
.late-only{display:none;}
main:not(:has(.xmas-next)) .late-only{display:inline;}
main:not(:has(.xmas-next)) .late-early{display:none;}

/* == Hero ================================================================= */
/* A light panel with the photograph as a holiday photo card: white card, the
   greeting along its foot, a gold hairline for the foil edge. The greeting is
   decoration, so it is hidden from screen readers; the alt text describes the photo. */
.holiday-hero{padding:56px 0 72px;background:var(--cream);}
.holiday-hero-inner{
  display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);
  column-gap:56px;align-items:center;
}
.holiday-hero .rule{width:48px;height:2px;background:var(--gold);margin:0 0 20px;}
.holiday-hero .eyebrow{
  display:inline-block;font-size:0.85rem;font-weight:500;letter-spacing:0.2em;
  text-transform:uppercase;color:var(--gold-text);margin-bottom:14px;
}
.holiday-hero h1{color:var(--ink);font-size:clamp(2.4rem, 3.9vw, 3.5rem);margin-bottom:0.2em;text-wrap:balance;}
.holiday-hero .subhead{
  font-family:var(--serif);font-style:italic;font-weight:500;line-height:1.3;
  font-size:clamp(1.3rem, 2.2vw, 1.65rem);color:var(--ink);margin:4px 0 0;
  max-width:24ch;text-wrap:balance;
}
.holiday-hero .lede{margin:18px 0 0;font-size:1.05rem;font-weight:400;color:var(--ink);}

.holiday-hero-print{
  margin:0;position:relative;background:#fff;padding:16px 16px 0;
  box-shadow:0 0 0 1px rgba(44,38,33,0.08), 0 30px 60px -28px rgba(44,38,33,0.5);
}
.holiday-hero-print::after{
  content:"";position:absolute;inset:6px;pointer-events:none;
  border:1px solid rgba(178,138,79,0.55);
}
.holiday-hero-print img{
  display:block;width:100%;height:auto;aspect-ratio:4 / 5;
  object-fit:cover;object-position:50% 30%;
}
.holiday-hero-greeting{
  display:block;text-align:center;font-family:var(--serif);font-style:italic;
  font-weight:500;font-size:1.6rem;line-height:1;color:var(--gold-text);padding:16px 0 20px;
}
/* after the run the greeting goes (the page stays up for months), and the
   card closes to an even mat */
main:not(:has(#run-live)) .holiday-hero-print{padding-bottom:16px;}
/* the offer is gone then, so the cream hero runs into the cream gallery:
   one section's padding is the gap, not both */
main:not(:has(#run-live)) .holiday-hero{padding-bottom:0;}
/* laid on the table at a slight angle, where there is room for it */
@media (min-width:1024px){
  .holiday-hero-print{width:100%;max-width:440px;justify-self:center;transform:rotate(-1.5deg);}
}

/* hero note: the live deadline on its own line, then the run and the deposit */
.hero-note{margin-top:18px;font-size:0.95rem;font-weight:400;color:var(--ink-soft);text-wrap:balance;max-width:34rem;}
.hero-note .card-first{display:block;}
/* the note leads with whichever deadline is still reachable */
.hero-note .xmas-next{display:none;}
.hero-note:not(:has(.card-first)) .xmas-next{display:block;}
.hero-note .xmas-last{display:none;}
.hero-note:not(:has(.xmas-next)) .xmas-last{display:block;}
.hero-note .card-first,.hero-note .xmas-next,.hero-note .xmas-last{
  font-weight:600;color:var(--gold-text);margin-bottom:6px;
}

/* stacked: the print first, the text centred under it */
@media (max-width:1023.98px){
  .holiday-hero{padding:32px 0 48px;}
  .holiday-hero-inner{grid-template-columns:minmax(0,1fr);row-gap:32px;}
  .holiday-hero-print{order:-1;width:100%;max-width:440px;margin-inline:auto;}
  .holiday-hero-text{text-align:center;}
  .holiday-hero .rule{display:none;}
  .holiday-hero .subhead,.hero-note{margin-left:auto;margin-right:auto;}
}
@media (max-width:700.98px){
  .holiday-hero{padding:16px 0 36px;}
  .holiday-hero-inner{row-gap:20px;}
  .holiday-hero-print{padding:10px 10px 0;}
  .holiday-hero-print::after{inset:4px;}
  .holiday-hero-greeting{font-size:1.2rem;padding:10px 0 12px;}
  main:not(:has(#run-live)) .holiday-hero-print{padding-bottom:10px;}
  .holiday-hero .eyebrow{font-size:0.78rem;letter-spacing:0.12em;margin-bottom:10px;}
  .holiday-hero h1{font-size:2.2rem;margin-bottom:6px;}
  .holiday-hero .subhead{font-size:1.3rem;}
  .holiday-hero .lede{font-size:0.95rem;margin-top:12px;}
  .hero-note{margin-top:14px;}
}
/* phones: a landscape crop of the portrait card keeps the button on the first
   screen, held on the baby, the father and the boy */
@media (max-width:700.98px){
  .holiday-hero-print img{aspect-ratio:3 / 2;object-position:50% 32%;}
}
@media (max-width:700.98px) and (max-height:779px){
  .holiday-hero-print img{aspect-ratio:16 / 9;object-position:50% 30%;}
  .holiday-hero h1{font-size:2rem;}
}
@media (max-width:1023.98px) and (max-height:600px){
  .holiday-hero-print img{aspect-ratio:2.2 / 1;object-position:50% 30%;}
}
/* the smallest phones (320x568): the card keeps its mat and foil edge but not
   the greeting, which is the 18px the button needs to stay on the first screen */
@media (max-width:700.98px) and (max-height:600px){
  .holiday-hero{padding-top:12px;}
  .holiday-hero-greeting{display:none;}
  .holiday-hero-print{padding-bottom:10px;}
}
/* phones on their side: text only */
@media (orientation:landscape) and (max-height:500px) and (max-width:1023.98px){
  .holiday-hero-print{display:none;}
  .holiday-hero{padding:20px 0 28px;}
}

/* == Offer ================================================================ */
/* the paragraph carrying the argument: body weight, full ink, balanced */
.offer-intro{max-width:620px;margin:0 auto 32px;color:var(--ink);font-weight:400;text-wrap:balance;}
/* the site's 48px gold bar between the intro and the columns */
.offer-intro::after{
  content:"";display:block;width:48px;height:2px;
  background:var(--gold);margin:32px auto 0;
}
.three-col > *{min-width:0;}
/* Cormorant's small x-height needs the larger step */
.three-col h3,.numbered-steps h3{font-size:1.4rem;}
/* a button at the end of the argument, its note 14px under it */
.offer-cta{margin-top:40px;}
.offer-cta .btn + .offer-cta-note{margin-top:14px;}
@media (min-width:900px) and (max-width:1080px){
  .three-col,.numbered-steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;}
}
@media (max-width:899.98px){
  .three-col p,.numbered-steps p{max-width:52ch;}
  .three-col,.numbered-steps{max-width:518px;margin-inline:auto;}
  /* stacked, the steps keep the offer points' rhythm: the numeral already
     adds its own height above each one */
  .numbered-steps{row-gap:32px;}
}
@media (not (max-width:480.98px)) and (max-width:600px){
  .three-col{max-width:none;}
}

/* == Recent minis: gallery and review ===================================== */
/* the link straight after the photographs, with a 44px hit area */
.gallery-more{margin-top:14px;font-size:0.95rem;}
.gallery-more a{position:relative;color:var(--gold-text);border-bottom:1px solid currentColor;font-weight:500;}
.gallery-more a::before{content:"";position:absolute;inset:-14px -10px;}
.gallery-more a:hover{color:var(--ink);}
.gallery-note{margin:14px 0 0;font-size:0.95rem;}
/* three frames, two on small tablets, one on phones */
@media (max-width:767.98px){
  main .fade-gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
  main .fade-gallery.is-live .img-frame:nth-child(3){display:none;}
}
@media (max-width:480px){
  main .fade-gallery{grid-template-columns:1fr;}
  main .fade-gallery.is-live .img-frame:nth-child(n+2){display:none;}
}

/* the review is its own beat, not a caption on the gallery */
.fade-gallery ~ .testimonial{margin-top:64px;}
.fade-gallery ~ .testimonial .quote-mark{font-size:3.4rem;line-height:0.7;margin-bottom:8px;}
.fade-gallery ~ .testimonial .testimonial-attrib{font-weight:500;}
.testimonial-attrib{font-weight:500;}
/* the source link looks like a link (1.4.1); hit area on ::before so the
   underline stays on the words */
.fade-gallery ~ .testimonial .testimonial-attrib a{
  position:relative;white-space:nowrap;border-bottom:0;
  text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px;
}
.fade-gallery ~ .testimonial .testimonial-attrib a::before{content:"";position:absolute;inset:-14px -8px;}
/* the shared a:hover drops these to --gold, 2.56:1 on linen */
.booking-alt-links a:hover,.testimonial-attrib a:hover{color:var(--gold-text);}
/* under 400px the link takes its own line and the middot goes */
@media (max-width:399.98px){
  .testimonial-attrib [aria-hidden="true"]{display:none;}
  .testimonial-attrib a{display:block;width:fit-content;margin:2px auto 0;}
}

/* == Dates ================================================================ */
.dates-intro{max-width:46ch;margin:0 0 24px;color:var(--ink-soft);}
.dates-intro,.dates-after,.session-dates-note{font-weight:400;}
.dates-lead h2{text-wrap:balance;}
/* the run-named heading gives way once every date is swept */
.dates-h2-done{display:none;}
.holiday-dates:not(:has(.session-date)) .dates-h2-done{display:inline;}
/* shown only once every dated row is swept; without JS it stays hidden */
.dates-empty{display:none;max-width:46ch;margin:0 0 24px;color:var(--ink-soft);}
.holiday-dates:not(:has(.session-date)) .dates-empty{display:block;}

/* card-deadline callout */
.card-deadline{
  padding:14px 20px;border-left:3px solid var(--gold);background:rgba(178,138,79,0.07);
  color:var(--ink);font-size:0.95rem;line-height:1.65;
}
.holiday-dates .card-deadline{max-width:none;margin:0 0 28px;font-weight:400;}
/* darker gold for 4.5:1 on --linen, which .cream paints */
.holiday-dates .card-deadline strong{color:#6f4f27;}

/* the groups: label plus the date its gallery lands, then two weekends */
.dates-body{display:flex;flex-direction:column;gap:40px;}
.dates-body,.dates-group,.holiday-dates .session-dates,.holiday-dates .session-date{min-width:0;}
.dates-group:not(:has(li)){display:none;}
.holiday-dates .dates-group{width:100%;max-width:26rem;margin-inline:auto;}
.dates-group-title{
  font-family:var(--sans);font-weight:700;font-size:0.85rem;letter-spacing:0.2em;
  text-transform:uppercase;color:var(--gold-text);margin:0 0 4px;padding-bottom:8px;
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 16px;
}
.dates-group-when{
  font-family:var(--serif);font-style:italic;font-size:1.02rem;font-weight:500;
  letter-spacing:0;text-transform:none;color:var(--ink-soft);
}
.dates-group .session-dates{margin:10px 0 0;}
.holiday-dates .dates-group .session-dates{
  grid-template-columns:repeat(auto-fit,minmax(8.4rem,1fr));max-width:26rem;
}
/* bookings.css lays .session-date out as a 3-column row; here a cell is one column */
.holiday-dates .session-date{grid-template-columns:minmax(0,1fr);gap:6px 0;align-items:start;}
/* the dates are the key data: lining figures, not hairline Cormorant */
.holiday-dates .session-date-day{
  grid-column:1;font-variant-numeric:lining-nums tabular-nums;font-weight:500;font-size:1.2rem;
}

/* the button, its caption and the times note */
.dates-after{max-width:520px;margin:16px auto 0;color:var(--ink-soft);font-size:0.95rem;line-height:1.6;}
/* captions centre under their buttons */
.holiday-dates .dates-after{text-align:center;}
.dates-after a{
  position:relative;color:var(--ink);text-decoration:underline;
  text-underline-offset:4px;text-decoration-thickness:1px;
}
.dates-after a::before{content:"";position:absolute;inset:-14px -10px;}
/* .btn brings its own 28px above */
.holiday-dates .session-dates-note{margin-bottom:0;text-wrap:pretty;}

/* two columns from 1024: the lead left, the list pinned to 26rem right */
@media (min-width:1024px){
  .dates-layout{display:grid;grid-template-columns:minmax(0,1fr) 26rem;justify-content:space-between;column-gap:72px;align-items:start;}
  .dates-lead{text-align:left;position:static;max-width:34rem;}
  .dates-lead .section-label,.dates-lead h2{text-align:left;}
  .dates-lead .card-deadline{margin-left:0;margin-right:0;}
  .dates-cta{text-align:left;}
  .dates-cta .dates-after{margin-left:0;}
  /* the button is left-aligned in its column, so its caption is too */
  .holiday-dates .dates-after{text-align:left;}
  .holiday-dates .dates-group .session-dates{display:grid;margin:0;column-gap:32px;align-items:stretch;}
  .holiday-dates .session-date{padding:16px 0;}
}

/* stacked: heading, deadline, dates, button, then the times as a footnote */
@media (max-width:1023.98px){
  .dates-layout{display:flex;flex-direction:column;}
  .dates-lead{display:contents;text-align:center;}
  .dates-intro{margin-left:auto;margin-right:auto;}
  .dates-empty{margin-left:auto;margin-right:auto;text-align:center;}
  .dates-cta{text-align:center;}
  .dates-body{margin-top:0;}
  .dates-group-when{flex-basis:100%;}
  .holiday-dates .card-deadline{text-align:left;text-wrap:pretty;margin-top:0;margin-bottom:36px;order:1;}
  .holiday-dates .dates-body{order:2;}
  .holiday-dates .dates-cta{order:3;}
  .holiday-dates .session-dates-note{order:4;}
  /* after the button it is a footnote: ruled off, a step smaller */
  .dates-lead .session-dates-note{margin-top:36px;padding-top:24px;border-top:1px solid var(--line);font-size:0.95rem;}
}
/* tablets: the three groups side by side */
@media (min-width:768px) and (max-width:1023.98px){
  .dates-body{
    display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
    max-width:860px;margin-inline:auto;column-gap:28px;align-items:start;
  }
  /* by-lines on one baseline when a title wraps, while three share the row */
  .dates-group-title{align-content:space-between;}
  main:has(#run-early) .dates-group-title{min-height:61px;}
  .holiday-dates .card-deadline{margin-left:auto;margin-right:auto;}
}
@media (not (max-width:600px)) and (max-width:1023.98px){
  .holiday-dates .card-deadline{max-width:62ch;}
}
@media (max-width:767.98px){
  .holiday-dates .dates-group .session-dates{display:grid;column-gap:16px;}
  .holiday-dates .session-date-day{font-size:clamp(0.92rem, 4.2vw, 1.05rem);}
}
/* phones: long prose left-aligned; headings and captions stay centred */
@media (max-width:600px){
  .holiday-dates .dates-intro{margin-left:0;margin-right:0;}
  .holiday-dates .dates-intro,.holiday-dates .session-dates-note{text-align:left;}
  .holiday-dates .dates-after{margin-inline:0;}
}
/* 481-600: the group fills the column, so prose and dates share a left edge */
@media (not (max-width:480.98px)) and (max-width:600px){
  .holiday-dates .dates-group,.holiday-dates .dates-group .session-dates{max-width:none;}
  .holiday-dates .dates-group .session-dates{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:480px){
  .holiday-dates .session-date{padding:12px 0;}
  /* pretty wrap leaves a lopsided box at this width */
  .holiday-dates .card-deadline{text-wrap:wrap;}
}
@media (max-width:400px){
  .holiday-dates .dates-group .session-dates{column-gap:10px;}
}

/* one group left (from 7 Dec): one centred column, in the stacked order */
@media (min-width:1024px){
  main:not(:has(#run-last)) .dates-layout{display:flex;flex-direction:column;align-items:center;}
  main:not(:has(#run-last)) .dates-lead{display:contents;}
  main:not(:has(#run-last)) .dates-lead .section-label,
  main:not(:has(#run-last)) .dates-lead h2{text-align:center;}
  main:not(:has(#run-last)) .card-deadline{order:1;}
  main:not(:has(#run-last)) .dates-body{order:2;width:100%;margin-top:8px;}
  main:not(:has(#run-last)) .dates-cta{order:3;text-align:center;}
  main:not(:has(#run-last)) .session-dates-note{order:4;}
  /* capped per element: .dates-lead is display:contents here and has no box */
  main:not(:has(#run-last)) .dates-intro,
  main:not(:has(#run-last)) .dates-after,
  main:not(:has(#run-last)) .card-deadline,
  main:not(:has(#run-last)) .session-dates-note{width:100%;max-width:34rem;}
  main:not(:has(#run-last)) .dates-intro,
  main:not(:has(#run-last)) .dates-after,
  main:not(:has(#run-last)) .session-dates-note{margin-inline:auto;}
  main:not(:has(#run-last)) .dates-intro,
  main:not(:has(#run-last)) .holiday-dates .dates-after,
  main:not(:has(#run-last)) .session-dates-note{text-align:center;text-wrap:balance;}
  main:not(:has(#run-last)) .session-dates-note{margin-top:36px;padding-top:24px;border-top:1px solid var(--line);font-size:0.95rem;}
}
/* no dates left: one centred column */
.holiday-dates:not(:has(.session-date)) .dates-body{display:none;}
@media (min-width:1024px){
  .holiday-dates:not(:has(.session-date)) .dates-layout{grid-template-columns:minmax(0,1fr);}
  .holiday-dates:not(:has(.session-date)) .dates-lead,
  .holiday-dates:not(:has(.session-date)) .dates-lead .section-label,
  .holiday-dates:not(:has(.session-date)) .dates-lead h2,
  .holiday-dates:not(:has(.session-date)) .dates-cta{text-align:center;}
  .holiday-dates:not(:has(.session-date)) .dates-lead{margin-left:auto;margin-right:auto;}
}

/* == Process ============================================================== */
/* the section's own padding is the blank below */
.numbered-steps{margin-bottom:0;}
@media (max-width:600px){
  .numbered-steps{max-width:none;}
}

/* == Why now ============================================================== */
.why-photo img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;}
.why-body{margin-top:20px;opacity:0.9;font-size:1.08rem;line-height:1.8;}
/* pull quote */
.why-thesis{
  font-family:var(--serif);font-style:italic;font-size:1.5rem;line-height:1.4;
  color:var(--gold-light);margin:24px 0 0;max-width:26ch;text-wrap:balance;
}
/* the same eyebrow gold as the hero, specific enough to beat style.css */
section.dark.why-band .section-label{color:#e0c091;}
@media (min-width:1024px){
  .why-layout{display:grid;grid-template-columns:6fr 5fr;gap:72px;align-items:center;}
  .why-text{text-align:left;}
  .why-body{max-width:46ch;}
  .why-text .section-label,.why-text h2{text-align:left;}
  .why-text h2{text-wrap:balance;}
}
@media (max-width:1023.98px){
  .why-layout{display:flex;flex-direction:column;gap:32px;}
  .why-text{text-align:center;}
  .why-body,.why-thesis{margin-left:auto;margin-right:auto;}
  .why-body{max-width:52ch;}
}
@media (max-width:600px){
  .offer-intro,.why-body{text-align:left;}
  /* the bar follows the prose to the left */
  .offer-intro::after{margin-left:0;}
}

/* == FAQ ================================================================== */
.faq-item summary{gap:12px;line-height:1.35;font-weight:500;text-wrap:balance;font-size:1.2rem;}
/* the + needs 3:1 (1.4.11); the / "" alt text keeps it out of the accessible name */
.faq-item summary::after{
  content:"+" / "";color:var(--gold-text);flex:0 0 24px;text-align:center;
  font-family:var(--sans);font-size:1.5rem;font-weight:500;line-height:1;
}
.fade-gallery ~ .testimonial blockquote{font-size:1.2rem;}

/* == Booking ============================================================== */
/* deposit and balance as a pair, in sentence case and full ink */
#book .booking-card .price-note span{display:block;}
#book .price-note{text-wrap:balance;}
#book .booking-card .price-note{text-transform:none;letter-spacing:0.01em;font-size:0.95rem;color:var(--ink);}
#book .pt-when .pt-nowrap{display:block;white-space:normal;}
#book .booking-card .pb-links{display:flex;gap:18px;grid-template-columns:none;}
#book .bc-photo-wide{object-position:50% 35%;}
/* match the other primary and caps buttons */
#book .pb-action .btn{font-size:0.82rem;letter-spacing:0.14em;}
.provider-note,.testimonial-attrib{font-size:0.85rem;}
#book .provider-note{text-wrap:balance;}
/* the reassurance beside the button, at reading size */
#book .pb-action .provider-note{font-size:0.95rem;color:var(--ink);}
/* a 3:1 outline, and a real border under forced colours */
.booking-alt .btn-outline{
  box-shadow:inset 0 0 0 1px var(--gold-text);
  font-size:0.82rem;letter-spacing:0.14em;min-height:48px;
}
/* the photo goes below 1180, and the card becomes three columns from 901 */
@media (max-width:1180px){
  #book .booking-card .pb-photo{display:none;}
}
@media (max-width:1100px){
  #book .booking-card{padding-top:24px;}
}
@media (min-width:901px) and (max-width:1180px){
  #book .booking-card{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 200px;padding-left:28px;}
  #book .booking-card .pb-info{grid-column:1;}
  #book .booking-card .pb-features{grid-column:2;}
  #book .booking-card .pb-action{grid-column:3;}
  #book .booking-card .pb-links{grid-column:1 / 3;}
}
/* the columns carry their own padding from 901 up */
@media (min-width:901px) and (max-width:1100px){
  #book .booking-card{padding-top:0;}
}
@media (max-width:480px){
  #book .booking-card .pb-action{grid-template-columns:1fr;}
  #book .booking-card .pb-price{display:flex;align-items:baseline;gap:12px;}
  #book .booking-card .pb-price .price-note{margin:0;}
  #book .booking-card .pb-action .btn{width:100%;min-height:48px;white-space:normal;line-height:1.2;}
  #book .pt-line{text-wrap:balance;}
  #book .booking-card,#book .booking-alt{margin-inline:16px;}
  /* the heading keeps the card's inset */
  #book .container > .reveal:first-child{padding-inline:16px;}
}

/* == Closing band ========================================================= */
.cta-band-note{margin-top:14px;font-size:0.95rem;opacity:0.85;}
/* style.css gives .cta-band p a margin at (0,1,1) */
.cta-band .cta-band-note{margin-top:14px;}

/* == Ended state (21 Dec until the next run) ============================== */
/* the banner sits directly on the hero */
main:not(:has(#run-live)) .season-ended{margin-bottom:0;}
.season-ended-text{text-wrap:balance;}
/* the ended switch outranks bookings.css's flex layout here, so restate it */
main:not(:has(#run-live)) .booking-alt-label.run-ended{display:flex;align-items:center;}
/* the ended H1 is longer, so a smaller clamp keeps it to the live line count */
@media (min-width:1024px){
  main:not(:has(#run-live)) .holiday-hero h1{font-size:clamp(2.4rem, 3.2vw, 2.9rem);}
}