/* V2's editorial type sizes, retaining V3's content and composition. */
@media (max-width: 899px) {
  .roman-corbridge-heading { padding-bottom: var(--space-compact); }
}
@media (min-width: 900px) {
  .roman-corbridge-heading { padding-bottom: 8px; }
}
/* Alignment and pacing pass: retain the established image compositions. */
@media (min-width: 900px) {
  .inside-introduction > .inside-eyebrow,
  .inside-introduction .desktop-carousel-intro { margin-left: var(--desktop-gutter); }
  .inside-introduction .desktop-carousel-intro { width: min(900px, calc(100% - 2 * var(--desktop-gutter))); }
}
@media (min-width: 1200px) {
  .maker-story-copy .design-eyebrow { margin-left: 12.7vw; }
}
@media (max-width: 899px) {
  .bathroom-photographs { padding-bottom: 12px; }
  .ensuite-photographs { padding-top: 8px; }
  .joes-garage .garage-copy > p { grid-column: 1 / -1; grid-row: 4; }
  .joes-garage .garage-closing-copy { grid-row: 5; }
}
.gallery-view-control {
  width: max-content;
  height: auto;
  min-height: 48px;
  padding: 12px 16px;
  gap: 12px;
  border: 1px solid rgba(240, 235, 222, .35);
  border-radius: 2px;
  background: rgba(24, 24, 24, .8);
  color: #F0EBDE;
  font: 500 12px/1 var(--font-mono);
  letter-spacing: .06em;
  box-shadow: none;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.gallery-view-control svg { width: 20px; height: 20px; }
@media (min-width: 900px) {
  .inside-band.inside-band-editorial .band-label { font-size: 12.8px; animation-duration: var(--ticker-duration, 80s); }
}
@media (max-width: 899px) {
  .inside-band { height: calc(clamp(17px, 4.7vw, 30px) + 20px); }
  .inside-band .band-label { font-size: clamp(15.3px, 4.23vw, 27px); }
}
.inside-band.about-band { margin-top: 80px; }
.inside-band.design-band { margin: 0 0 64px; }
@media (max-width: 899px) {
  .introduction { padding-top: 48px; }
}
@media (min-width: 900px) {
  .inside-band.about-band { grid-row: 2; margin-top: 128px; }
  .introduction { grid-row: 3; padding-top: 64px; }
  .gate-statement { grid-row: 4; }
  .gate-image { grid-row: 5; }
  main > .inside-band:not(.about-band):not(.information-band) { grid-row: 6; }
  .inside-introduction { grid-row: 7; }
  .carousel-primary { grid-row: 8; }
  .film-pin-sequence .interior-feature { grid-row: 9; }
  .film-pin-foreground,
  .joinery-feature,
  .bathroom-photographs,
  .ensuite-photographs,
  .bedrooms { grid-row: 10; }
  .inside-band.information-band { grid-row: 11; }
  .practical { grid-row: 12; }
  .arrival-pin-sequence { grid-row: 13; }
  .roman-corbridge { grid-row: 14; }
  .hunt-cup { grid-row: 15; }
  .film-pin-foreground .inside-band.design-band { margin: 0; }
}
.practical-heading { padding: 0 var(--gutter-mobile) 28px; }
.practical-heading h2 { margin: 0; font: 400 36px/1.1 var(--font-serif); letter-spacing: -.025em; }
.arrival-number::before { content: "—"; }
@media (min-width: 900px) {
  .practical-heading { grid-column: 1 / -1; grid-row: 1; padding: 0 0 16px; }
  .practical-heading h2 { font-size: clamp(38px, 2.85vw, 54px); }
}
@media (max-width: 899px) {
  .inside-band-editorial .band-number { display: inline; }
  .inside-band-editorial .band-number + .band-dot { display: inline; }
}
.detail-motion-ready .bathroom-photographs > figure:nth-child(2) { transition-duration: 1.28s; }
.detail-motion-ready .bedroom-intro { transition-delay: 200ms; }
@media (min-width: 900px) {
  /* Enlarge both dimensions by 20%, keeping the uploaded image proportions. */
  .carousel-primary .carousel-card { width: clamp(384px, 34.8vw, 648px); aspect-ratio: auto; }
  .carousel-primary .carousel-card img { height: auto; object-fit: contain; }
  .time-study .hero-state-switch {
    left: 50%;
    right: auto;
    width: max-content;
    transform: translateX(-50%);
    justify-content: center;
    gap: 24px;
  }
}
.site-topbar button[data-booking],
body > button.message-sally {
  background: rgba(24, 24, 24, .8);
  color: #F0EBDE;
  border-color: rgba(240, 235, 222, .35);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  -webkit-text-fill-color: #F0EBDE;
}
.site-topbar button[data-booking] { min-height: 32px; padding: 6px 9px; gap: 5px; }
body > button.message-sally:disabled { opacity: 0; }
body > button.message-sally.is-visible:disabled { opacity: 1; }
.site-topbar > a { min-width: 0; }
.site-topbar .header-wordmark { display: block; width: 190px; max-width: 100%; height: auto; }
.introduction .opening-about {
  position: static;
  inset: auto;
  height: auto;
  padding: 0;
  margin: 0 0 24px;
  font: 500 11px/1.4 var(--font-mono);
  letter-spacing: .09em;
  color: #89877d;
}
.introduction .opening-about::after { display: none; }
.introduction h2 { margin-top: 0; }
.desktop-carousel-intro { font-style: italic; }
.inside-introduction { display: contents; }
.place-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
  color: #89877d;
  font: 500 11px/1.4 var(--font-mono);
  letter-spacing: .09em;
  text-transform: uppercase;
}
.place-eyebrow::before { content: ""; width: 9px; height: 1px; background: currentColor; flex: none; }
@media (max-width: 899px) {
  .introduction-image { margin-top: 28px; }
  .gate-statement { padding-left: 24px; padding-right: 12px; }
  .gate-image { width: calc(100% - 24px); margin-left: 24px; margin-right: 0; }
}
.time-study .hero-headline { font-size: clamp(36px, 10vw, 54px); }
.introduction h2,
.gate-statement h2,
.maker-story h2,
.roman-corbridge h2,
.welcome h2,
.arrival-beat :is(h2, h3) { font-size: 36px; }
.joes-garage .garage-copy h2 { font-size: clamp(30px, 8.2vw, 42px); }
.desktop-carousel-intro,
.maker-story-copy > p,
.outside-copy > p,
.welcome-copy > p:not(.availability-note),
.roman-corbridge-copy > p,
.arrival-beat > p:not(.arrival-seasonal) { font-size: 25px; }
.outside-statement h2 { font-size: clamp(32px, 9vw, 49px); }
.joes-garage .garage-copy > p { font-size: 15px; }

@media (min-width: 601px) {
  .introduction h2,
  .gate-statement h2,
  .maker-story h2,
  .roman-corbridge h2,
  .welcome h2,
  .arrival-beat :is(h2, h3) { font-size: 42px; }
}

@media (min-width: 900px) {
  .inside-introduction { display: block; grid-row: 7; padding-top: 64px; }
  .inside-eyebrow,
  .design-eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #89877d;
    font: 500 11px/1.4 var(--font-mono);
    letter-spacing: .09em;
    text-transform: uppercase;
    margin: 0 0 24px;
    padding: 0;
  }
  .inside-eyebrow { margin-left: 60px; }
  .inside-introduction .desktop-carousel-intro { padding-top: 0; margin-top: 0; }
  .site-topbar .header-wordmark { width: 300px; }
  .introduction {
    justify-content: center;
    grid-template-columns: minmax(0, min(22.22vw, 420px)) minmax(0, min(40.83vw, 820px));
  }
  .introduction-copy { width: 100%; margin: 0; padding: 0; }
  .gate-statement { padding-left: 22vw; }
  .gate-image { margin-left: 22vw; }
  .time-study .hero-headline,
  .gate-statement h2 { font-size: clamp(64px, 5.5vw, 108px); }
  .introduction h2 { font-size: clamp(38px, 2.85vw, 54px); }
  .desktop-carousel-intro { font-size: clamp(31.3px, 2.3vw, 44.2px); }
  .maker-story h2 { font-size: clamp(72px, 5.55vw, 108px); }
  .maker-story-copy > p { font-size: clamp(34.5px, 2.553vw, 49.45px); }
  .roman-corbridge h2 { font-size: clamp(72px, 5.5vw, 108px); }
  .roman-corbridge-copy > p { font-size: 25px; }
  .welcome h2,
  .arrival-beat :is(h2, h3) { font-size: clamp(74px, 5.14vw, 100px); }
  .welcome-copy > p:not(.availability-note),
  .arrival-beat > p:not(.arrival-seasonal) { font-size: clamp(29px, 2.01vw, 38px); }
  .joes-garage .garage-copy h2 { font-size: clamp(48.3px, 3.5075vw, 66.7px); }
  .joes-garage .garage-copy > p { font-size: clamp(24px, 1.67vw, 32px); }
  .outside-statement h2 { font-size: clamp(56px, 5.3vw, 100px); }
}

/* Mobile-only adjustments; preserve the desktop V2 scale. */
@media (max-width: 899px) {
  .bedroom-intro > p { margin-left: auto; margin-right: auto; text-align: center; }
  .introduction h2,
  .gate-statement h2 { line-height: 1.1; }
}
@media (max-width: 600px) {
  .introduction h2 { font-size: 32.4px; }
  .gate-statement h2 { font-size: 43.2px; }
  .gate-image { width: 100%; margin: 0; }
}
@media (min-width: 601px) and (max-width: 899px) {
  .introduction h2 { font-size: 37.8px; }
  .gate-statement h2 { font-size: 50.4px; }
}

/* The central carousel image stays solid; adjacent images recede on tablet and desktop. */
@media (min-width: 601px) {
  .carousel-primary .carousel-card { opacity: .5; transition: opacity 250ms ease; }
  .carousel-primary .carousel-card.is-centred { opacity: 1; }
  .carousel-primary .carousel-card img { opacity: 1; }
}

/* Tablet landscape: give the editorial copy room without the large-screen overlap. */
@media (min-width: 900px) and (max-width: 1199px) {
  main { --tablet-maker-body-top: 340px; }
  .film-pin-foreground { min-height: calc(340px + 108vw); }
  .maker-story-copy .design-eyebrow {
    position: absolute;
    top: 96px;
    left: 8vw;
    margin: 0;
  }
  .maker-story h2 {
    top: 132px;
    left: 8vw;
    width: 84vw;
    padding: 0;
    font-size: clamp(54px, 6vw, 72px);
    line-height: 1.08;
  }
  .maker-story-copy > p {
    top: var(--tablet-maker-body-top);
    left: 58vw;
    width: 34vw;
    font-size: 29.9px;
    line-height: 1.3;
  }
  .joinery-feature { width: 44vw; margin: var(--tablet-maker-body-top) 0 0 8vw; }
  .bathroom-photographs { margin-top: calc(322px + 55vw); }
  .ensuite-photographs { margin-top: calc(322px + 55vw); }
  .bedrooms { margin-top: calc(322px + 99vw); }
  .film-pin-foreground { min-height: calc(372px + 108vw); }
}

@media (max-width: 899px) {
  .film-pin-foreground .inside-band.design-band { margin-bottom: 0; }
  .maker-story { padding-top: 48px; }
}
@media (min-width: 1200px) {
  .maker-story { padding-top: 32px; }
  .maker-story h2 { top: calc(7.8vw + 32px); }
  .maker-story-copy > p { top: calc(23.6vw + 32px); }
  .joinery-feature { margin-top: calc(14.6vw + 32px); }
  .bathroom-photographs { margin-top: calc(67.4vw + 14px); }
  .ensuite-photographs { margin-top: calc(64.5vw + 32px); }
  .bedrooms { margin-top: calc(108.5vw + 32px); }
  .film-pin-foreground { min-height: calc(112vw + 32px); }
}

/* Keep the arrival / playroom / place interlude flowing without chapter-sized pauses. */
@media (max-width: 899px) {
  .arrival-mobile { padding-bottom: 16px; }
  .arrival-pin-sequence > .joes-garage { padding-top: 56px; padding-bottom: 24px; }
  .roman-corbridge { padding-top: 24px; }
}
@media (min-width: 900px) {
  /* The dominant portrait ends around 52.5vw; avoid the old 830px minimum. */
  .arrival-pin-sequence > .joes-garage { min-height: calc(53vw + 24px); }
  .roman-corbridge { padding-top: 85px; }
}

/* Shared chapter rhythm: a deliberate pause before, a shorter lead-in after. */
main { --chapter-before: 80px; --chapter-after: 32px; }
.inside-band.inside-band-editorial { margin-top: var(--chapter-before); margin-bottom: 0; }
.arrival-pin-sequence > .inside-band.arrival-band { margin-top: var(--chapter-before); }
@media (max-width: 899px) {
  .introduction { padding-top: var(--chapter-after); }
  .introduction-copy { padding-top: 0; }
  .inside-eyebrow { margin-top: var(--chapter-after); }
  .maker-story { padding-top: var(--chapter-after); }
  .practical { padding-top: var(--chapter-after); }
  .arrival-mobile { padding-top: var(--chapter-after); }
}
@media (min-width: 900px) {
  main { --chapter-before: 128px; --chapter-after: 64px; }
  .introduction,
  .inside-introduction,
  .practical,
  .arrival-mobile { padding-top: var(--chapter-after); }
  /* The Design band itself leads the scroll-over, with no cream strip above it. */
  .film-pin-foreground { padding-top: 0; }
  .film-pin-foreground .inside-band.design-band { margin: 0; }
}
@media (min-width: 900px) and (max-width: 1199px) {
  .maker-story-copy .design-eyebrow { top: 244px; }
  .maker-story h2 { top: 280px; }
  .bathroom-photographs,
  .ensuite-photographs { margin-top: calc(470px + 55vw); }
  .bedrooms { margin-top: calc(470px + 99vw); }
  .film-pin-foreground { min-height: calc(520px + 108vw); }
}
@media (min-width: 1200px) {
  .maker-story { padding-top: var(--chapter-after); }
  .maker-story h2 { top: calc(7.8vw + 192px); }
  .maker-story-copy > p { top: calc(23.6vw + 192px); }
  .joinery-feature { margin-top: calc(14.6vw + 192px); }
  .bathroom-photographs { margin-top: calc(67.4vw + 174px); }
  .ensuite-photographs { margin-top: calc(64.5vw + 192px); }
  .bedrooms { margin-top: calc(108.5vw + 192px); }
  .film-pin-foreground { min-height: calc(112vw + 192px); }
}

/* Mobile refinements: shorten the pauses, keeping desktop pacing unchanged. */
@media (max-width: 899px) {
  .bedrooms .bedroom-intro { padding-bottom: 32px; }
  .inside-band.information-band.inside-band-editorial { margin-top: 40px; }
  .roman-corbridge { margin-top: 32px; padding-top: 16px; }
  .roman-corbridge-heading > .place-eyebrow { margin-bottom: 16px; }
}

/* Tablet landscape: later chapters sit above the sticky film's cream cover. */
@media (min-width: 900px) and (max-width: 1199px) {
  /* iPad Mini landscape: preserve the deliberate two-line hero composition. */
  .time-study .hero-headline { right: 25%; }

  .inside-band.information-band,
  .practical { position: relative; z-index: 3; }
  .joes-garage .garage-copy > p { width: 90%; }
  .inside-band.about-band { margin-top: 64px; }
  /* Give Joe's Garage a distinct pause after the arrival sequence. */
  .joes-garage .garage-photographs figure:first-child {
    top: calc(3.1vw + 72px);
  }
  .arrival-pin-sequence > .joes-garage {
    margin-bottom: 72px;
  }
  .maker-story-copy .design-eyebrow { top: 148px; }
  .maker-story h2 { top: 184px; }
  .inside-band.information-band.inside-band-editorial { margin-top: 102.4px; }
}

/* Large desktop: anchor the overlapping editorial group to its eyebrow. */
@media (min-width: 1200px) {
  .maker-story { padding-top: 70.4px; }
  .maker-story h2 { top: 161.8px; }
  .maker-story-copy > p { top: calc(15.8vw + 161.8px); }
  .joinery-feature { margin-top: calc(6.8vw + 161.8px); }
  .joes-garage .garage-photographs figure:first-child { top: calc(3.1vw + 12px); }
}

/* Match the mobile eyebrow's short dash on desktop and landscape tablets. */
@media (min-width: 900px) {
  .introduction .opening-about::before,
  .inside-eyebrow::before,
  .design-eyebrow::before {
    content: "";
    display: block;
    width: 9px;
    height: 1px;
    background: currentColor;
    flex: none;
  }
}

@media (min-width: 900px) {
  .outside-gallery-sequence .outside-feature { position: sticky; top: 0; z-index: 0; }
  .outside-gallery-sequence .outside-feature::after {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: var(--bg-primary);
    opacity: var(--outside-fade, 0);
    pointer-events: none;
    content: "";
  }
  .outside-gallery-sequence .gallery-filmstrip { position: relative; z-index: 2; background: var(--bg-primary); }
}

/* Nearby-place context should support the map, not compete with its heading. */
.roman-corbridge-copy > .roman-nearby {
  font-size: clamp(19px, 1.55vw, 22px);
  line-height: 1.45;
  letter-spacing: 0;
}