/* Shared editorial motion, with a desktop-specific adaptation of arrival. */
.practical { background: #E3DCC0; }
.inside-band-editorial .band-label { white-space: nowrap; }
.band-number { color: #F3EEE3; }
.band-title { color: #F3EEE3; }
.band-context { color: rgba(243,238,227,.48); }
.band-dot { color: rgba(243,238,227,.38); }
.band-sequence { display: inline-block; }
.band-repeat-track { display: inline-flex; flex: none; }
.site-topbar button[data-booking] {
  gap: 8px;
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid rgba(24,24,24,.45);
  border-radius: 2px;
  background: rgba(240,235,222,.88);
  color: var(--text-primary);
  font: 500 10px/1 var(--font-mono);
  letter-spacing: .06em;
  text-transform: uppercase;
}
@media (max-width: 899px) {
  .inside-band-editorial .band-repeat-track:not(:first-child),
  .inside-band-editorial .band-sequence:not(:first-child),
  .inside-band-editorial .band-number,
  .inside-band-editorial .band-dot,
  .inside-band-editorial .band-context { display: none; }
}
.editorial-motion-ready .maker-story-copy > h2,
.editorial-motion-ready .maker-story-copy > p {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 1.2s ease, transform 1.2s cubic-bezier(.2,.7,.2,1);
}
.editorial-motion-ready .maker-story-copy > .is-editorial-visible { opacity: 1; transform: none; }
@media (min-width: 900px) {
  .interior-video-trigger .video-play-control {
    width: max-content;
    height: 48px;
    padding: 0 12px;
    gap: 9px;
    justify-content: center;
    border: 1px solid rgba(240,235,222,.35);
    border-radius: 4px;
    background: var(--bg-inverted);
    color: var(--bg-primary);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
    font: 500 11px/1.2 var(--font-mono);
  }
  .interior-video-trigger .video-play-control svg { width: 19px; height: 19px; order: -1; }
  /* The new INSIDE band adds one grid row before the original V2 film sequence. */
  .carousel-primary { grid-row: 7; }
  .film-pin-sequence .interior-feature { grid-row: 8; }
  .film-pin-foreground,
  .joinery-feature,
  .bathroom-photographs,
  .ensuite-photographs,
  .bedrooms { grid-row: 9; }
  .carousel-primary .carousel-card,
  .carousel-primary .carousel-card img { border-radius: 0; }
  .inside-band.inside-band-editorial:not(.information-band):not(.arrival-band):not(.about-band):not(.design-band) { margin-top: 128px; }
  .desktop-carousel-intro { padding-top: 64px; }
  .film-pin-foreground { min-height: 112vw; }
  .inside-band.information-band { grid-row: 10; }
  .maker-story-copy > p,
  .desktop-carousel-intro {
    font-family: var(--font-serif);
    font-size: clamp(27px, 2.25vw, 38px);
    font-weight: 400;
    font-style: normal;
    line-height: 1.2;
    letter-spacing: -.025em;
  }
  .desktop-carousel-intro { font-size: clamp(40.5px, 3.375vw, 57px); }
  .inside-band.inside-band-editorial .band-label {
    display: flex;
    width: max-content;
    left: 0;
    animation: desktop-editorial-scroll 160s linear infinite;
  }
  @keyframes desktop-editorial-scroll {
    from { transform: translate(0, -50%); }
    to { transform: translate(-50%, -50%); }
  }
  .gate-statement {
    margin-top: 0;
    padding: 80px 6vw 40px;
  }
  .gate-statement .gate-heading-frame {
    box-sizing: border-box;
    width: max-content;
    max-width: 100%;
    padding: 18px 20px 22px;
    margin: 0;
  }
  .gate-statement h2 {
    font-size: clamp(70px, 6.7vw, 115px);
    line-height: 1.08;
    white-space: nowrap;
  }
  .gate-image {
    width: clamp(420px, 42vw, 720px);
    aspect-ratio: 1;
    margin: 0 0 0 6vw;
  }
  .gate-image .gate-desktop-image { display: none; }
  .gate-image video { display: block; width: 100%; height: 100%; object-fit: cover; }
  .outside-statement {
    display: block;
    position: relative;
    z-index: 2;
    padding: 96px var(--desktop-gutter) 80px;
    background: var(--bg-primary);
  }
  .outside-statement h2 {
    max-width: 1200px;
    margin: 0;
    color: var(--text-primary);
    font: 400 clamp(64px, 6vw, 108px)/1.08 var(--font-serif);
    letter-spacing: -.035em;
  }
  .outside-feature > h2 { display: none; }
  .time-study .hero-topbar { display: none; }
  .site-topbar {
    position: fixed;
    z-index: 30;
    inset: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 64px;
    padding: 0 32px;
    border-bottom: 1px solid rgba(24,24,24,.16);
    background: rgba(240,235,222,var(--header-opacity, 1));
    color: var(--text-primary);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }
  .site-topbar a,
  .site-topbar button {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: inherit;
    font: 400 24px/1 var(--font-serif);
    letter-spacing: -.025em;
    text-transform: uppercase;
    text-decoration: none;
  }
  .site-topbar button { border: 0; padding: 0; background: none; cursor: pointer; }
  .site-topbar :focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }
  .hunt-cup {
    grid-row: 13;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 24px 0 0;
    padding: 0 var(--desktop-gutter) 24px;
    background: var(--bg-primary);
    color: var(--text-primary);
  }
  .hunt-cup-media { width: clamp(240px, 23vw, 360px); aspect-ratio: 1; }
  .hunt-cup-media img,
  .hunt-cup-media video { display: block; width: 100%; height: 100%; object-fit: contain; }
  .hunt-cup-media [hidden] { display: none; }
  .hunt-cup figcaption { position: relative; margin-top: -16px; font: 400 12px/1.5 var(--font-mono); text-transform: uppercase; letter-spacing: .08em; }
  .hunt-cup-description { max-width: 480px; margin: 14px 0 0; text-align: center; font: 400 16px/1.6 var(--font-sans); }
  .hunt-cup-status { font: 400 12px/1.5 var(--font-sans); }
  .hunt-cup-status:empty { display: none; }
  .inside-band {
    position: relative;
    display: block;
    height: 52px;
    width: 100%;
    margin: 40px 0 0;
    overflow: hidden;
    background: var(--text-primary);
    color: var(--bg-primary);
  }
  .inside-band .band-label {
    position: absolute;
    top: 50%;
    left: var(--desktop-gutter, 80px);
    margin: 0;
    font: 400 16px/1 var(--font-mono);
    letter-spacing: .04em;
    white-space: nowrap;
    transform: translateY(-50%);
    animation: desktop-band-drift 11.11s ease-in-out infinite alternate;
    animation-play-state: paused;
  }
  .inside-band.is-visible .band-label { animation-play-state: running; }
  .inside-band.information-band { margin-top: 128px; }
  .practical {
    grid-row: 11;
    min-height: 0;
    align-content: start;
    padding: 32px var(--desktop-gutter) 32px;
  }
  .roman-corbridge {
    grid-row: 12;
    margin-top: 0;
    align-self: start;
    height: auto;
    min-height: 0;
    padding: 128px 0 0;
  }
  .roman-corbridge-heading {
    position: relative;
    top: auto;
    left: auto;
    width: auto;
    padding: 0 var(--desktop-gutter) 16px;
  }
  .roman-corbridge .roman-corbridge-map {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    margin: 0;
  }
  .roman-corbridge .roman-map-svg {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    height: auto;
    transform: none;
  }
  .roman-corbridge-copy {
    position: relative;
    top: auto;
    left: auto;
    width: min(820px, calc(100% - 2 * var(--desktop-gutter)));
    margin: clamp(-160px, -10vw, -80px) var(--desktop-gutter) 0;
  }
  .roman-corbridge-copy > p {
    font: 400 clamp(32.4px, 2.7vw, 45.6px)/1.2 var(--font-serif);
    letter-spacing: -.025em;
  }
  .arrival-pin-sequence > .arrival-band { grid-column: 1 / -1; grid-row: 1; margin: 64px 0 0; }
  .arrival-pin-sequence { grid-template-rows: auto auto var(--arrival-chapter-height); }
  .arrival-pin-sequence > .welcome,
  .arrival-pin-sequence > .welcome-film { grid-row: 2; }
  .arrival-pin-sequence > .joes-garage { grid-row: 3; }
  @keyframes desktop-band-drift {
    from { left: var(--desktop-gutter, 80px); transform: translate(0, -50%); }
    to { left: 50%; transform: translate(-50%, -50%); }
  }
  .time-study .hero-state-switch {
    right: var(--desktop-gutter);
    width: auto;
    grid-template-columns: max-content max-content;
    justify-content: space-between;
    min-height: 48px;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
    font: 500 11px/1.2 var(--font-mono);
  }
  .time-study .hero-state-switch button {
    width: auto;
    min-height: 48px;
    padding: 0 12px;
    gap: 9px;
    border: 1px solid rgba(240,235,222,.35);
    border-radius: 4px;
    background: var(--bg-inverted);
    color: var(--bg-primary);
    opacity: 1;
  }
  .time-study .hero-state-switch button + button { border: 1px solid rgba(240,235,222,.35); }
  .time-study .hero-state-switch button[aria-pressed="true"] { border-color: var(--bg-primary); }
  .time-study .hero-state-switch svg { width: 19px; height: 19px; order: -1; }
  .time-study .hero-state-switch button[data-hero-view="0"] svg { stroke-width: 1.8; }
  .time-study .hero-state-switch button[data-hero-view="0"] svg circle { fill: currentColor; }
  .introduction-copy { position: relative; z-index: 2; width: calc(100% + 140px); }
  .introduction h2 span {
    padding: .06em 14px .14em 0;
    background: var(--bg-primary);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  }
  .welcome { min-height: 0; }
  .welcome > .welcome-copy { display: none; }
  .arrival-mobile {
    display: block;
    width: 43%;
    margin-left: 12%;
    padding: 96px 0 80px;
    background: var(--bg-primary);
  }
  .arrival-eyebrow { color: #89877d; font: 500 11px/1.4 var(--font-mono); letter-spacing: .09em; text-transform: uppercase; }
  .arrival-eyebrow::before { content: "— "; }
  .welcome .arrival-intro { margin: 24px 0 64px; font: 400 clamp(54px, 5vw, 84px)/1.04 var(--font-serif); letter-spacing: -.035em; }
  .arrival-beat { position: relative; padding: 24px 0 56px; }
  .arrival-beat::before { position: absolute; top: 0; left: 0; right: 0; height: 1px; background: rgba(24,24,24,.25); content: ""; transform-origin: left; }
  .arrival-number { display: flex; gap: 20px; color: #89877d; font: 400 11px/1.5 var(--font-mono); text-transform: uppercase; letter-spacing: .08em; }
  .arrival-beat :is(h2, h3) { margin: 24px 0; font: 400 clamp(60px, 5.5vw, 90px)/1.04 var(--font-serif); letter-spacing: -.035em; }
  .arrival-beat p { max-width: 560px; margin: 0; font: 400 clamp(27px, 2.25vw, 38px)/1.2 var(--font-serif); letter-spacing: -.025em; }
  .arrival-beat .arrival-seasonal { margin-top: 24px; font: 400 15px/1.6 var(--font-sans); color: #595b52; letter-spacing: 0; }
  .arrival-signoff { font: 400 11px/1.5 var(--font-mono); text-transform: uppercase; letter-spacing: .08em; color: #89877d; }
  .arrival-pin-sequence { display: block; grid-row: 14; margin-top: 0; }
  .arrival-story-boundary { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); position: relative; }
  .arrival-story-boundary > .welcome { grid-area: 1 / 1 / 2 / -1; }
  .arrival-story-boundary > .welcome-film { position: sticky; top: 96px; align-self: start; grid-area: 1 / 1 / 2 / -1; width: 30%; margin: 160px 0 80px 62%; }
  .arrival-pin-sequence > .joes-garage { position: relative; min-height: var(--arrival-chapter-height); }
  .arrival-motion-ready .arrival-beat::before { transform: scaleX(0); transition: transform 1.6s ease; }
  .arrival-motion-ready .arrival-beat > * { opacity: 0; transform: translateY(18px); transition: opacity 900ms ease, transform 900ms cubic-bezier(.2,.7,.2,1); }
  .arrival-motion-ready .arrival-beat.is-arrived::before { transform: scaleX(1); }
  .arrival-motion-ready .arrival-beat.is-arrived > * { opacity: 1; transform: none; }
  .arrival-motion-ready .arrival-beat :is(h2, h3) { transition-delay: 100ms; }
  .arrival-motion-ready .arrival-beat p { transition-delay: 220ms; }
  .garage-copy h2 { white-space: normal; }
}
@media (min-width: 900px) and (max-width: 1199px) {
  /* The chapter band remains the foreground marker as the joinery film rises. */
  .film-pin-foreground .inside-band.design-band {
    position: relative;
    z-index: 4;
  }
}
@media (prefers-reduced-motion: reduce) {
  .editorial-motion-ready .maker-story-copy > h2,
  .editorial-motion-ready .maker-story-copy > p { opacity: 1; transform: none; transition: none; }
  .inside-band.inside-band-editorial .band-label { animation: none; transform: translateY(-50%); }
  .inside-band .band-label { animation: none; }
  .editorial-motion-ready .maker-story-copy > h2,
  .editorial-motion-ready .maker-story-copy > p,
  .arrival-motion-ready .arrival-beat > * { opacity: 1; transform: none; transition: none; }
  .arrival-motion-ready .arrival-beat::before { transform: none; transition: none; }
}
