/* Desktop exploration, referenced at 1440px.
   All rules stay inside this guard as well as the HTML media attribute.
   The approved mobile/tablet compositions, markup order and later film sections remain intact.
   Hero stills switch to the wide pair at this same breakpoint. */
@media (min-width: 900px) {
  main {
    --desktop-gutter: clamp(72px, 8.333vw, 180px);
    --desktop-space: clamp(112px, 10vw, 200px);
    --opening-media-inset: clamp(18px, 1.25vw, 30px);
    --film-inset: clamp(20px, 1.4vw, 32px);
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    max-width: none;
    margin: 0;
    box-shadow: none;
  }
  main > * { grid-column: 1 / -1; min-width: 0; }

  /* The supplied wide day/night pair fills the desktop opening without video. */
  .time-study .hero-stage { background: var(--bg-primary); }
  .time-study.desktop-night-default .hero-media ~ .hero-media { opacity: 1; }
  .time-study .hero-frame { height: auto; aspect-ratio: 1440 / 778; }
  .time-study .hero-media { inset: 0; }
  .time-study .hero-media > picture,
  .time-study .hero-media > picture > img { object-fit: cover; }
  .time-study .hero-topbar { top: 36px; left: 50%; transform: translateX(-50%); }
  .time-study .hero-site-mark { width: min(22vw, 280px); }
  .time-study .hero-headline {
    top: 35.5%;
    right: 52%;
    left: var(--desktop-gutter);
    font-size: clamp(64px, 5.5vw, 108px);
    line-height: 1.08;
    text-align: left;
    text-shadow: none;
  }
  .time-study .hero-state-bar { display: none; }
  .time-study .hero-state-switch {
    position: absolute;
    z-index: 4;
    left: var(--desktop-gutter);
    right: auto;
    bottom: 48px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 320px;
    min-height: 54px;
    overflow: hidden;
    border: 1px solid rgba(244, 244, 242, .18);
    border-radius: 7px;
    background: rgba(20, 25, 26, .15);
    -webkit-backdrop-filter: blur(5px) saturate(1.2);
    backdrop-filter: blur(5px) saturate(1.2);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .24), 0 3px 10px rgba(0, 0, 0, .12), 0 10px 22px rgba(0, 0, 0, .07);
    color: var(--text-inverted, #f4f4f2);
    font: 500 12px/1.2 Arial, Helvetica, sans-serif;
    letter-spacing: .09em;
    text-transform: uppercase;
  }
  .time-study.is-post-intro .hero-state-switch { animation: none; }

  .introduction {
    display: grid;
    grid-template-columns: minmax(0, clamp(300px, 22.22vw, 420px)) minmax(0, clamp(570px, 40.83vw, 820px));
    gap: clamp(48px, 3.75vw, 72px);
    justify-content: end;
    align-items: start;
    padding: 82px var(--opening-media-inset) 0;
    text-align: left;
  }
  .introduction-copy { padding: 0; }
  .introduction h2 { max-width: none; margin: 38px 0 0; font-size: clamp(43.7px, 3.2775vw, 62.1px); line-height: 1.08; }
  .introduction-image { width: 100%; margin: 0; }
  .introduction-image video { aspect-ratio: 1122 / 1402; object-fit: cover; border-radius: 0; }
  .essentials { top: auto; right: 24px; bottom: 50%; }

  .gate-statement {
    grid-column: 1 / -1;
    margin-top: max(-234px, -12vw);
    padding: 0 6vw 48px;
    background: transparent;
    text-align: left;
  }
  .gate-statement h2 { font-size: clamp(73.6px, 6.325vw, 124.2px); line-height: 1.08; }
  .gate-image {
    grid-column: 1 / -1;
    width: calc(100% - 2 * var(--opening-media-inset));
    aspect-ratio: 1672 / 941;
    margin: 0 var(--opening-media-inset);
  }
  .gate-image video { display: none; }
  .gate-desktop-image { display: block; width: 100%; height: 100%; object-fit: cover; }
  .desktop-carousel-intro {
    display: block;
    width: min(900px, calc(100% - 120px));
    margin-left: 60px;
    padding: 148px 0 56px;
    font-size: clamp(31.3px, 2.3vw, 44.2px);
    font-style: italic;
    line-height: 1.04;
    letter-spacing: -.035em;
  }
  .design-carousel { padding: 0 0 clamp(80px, 6.7vw, 120px); }
  .carousel-track { --carousel-gap: 24px; align-items: center; }
  .carousel-primary .carousel-track.is-dragging { scroll-snap-type: none; }
  .carousel-card { width: clamp(320px, 29vw, 540px); }

  .film-pin-sequence {
    /* Let the film and the editorial story occupy consecutive main-grid rows. */
    display: contents;
  }
  .interior-feature {
    grid-column: 1 / -1;
    position: relative;
    width: 80%;
    margin: 0 auto clamp(120px, 10vw, 180px);
  }
  .interior-video-media { aspect-ratio: 16 / 9; border-radius: 0; }
  .interior-desktop-poster { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
  .interior-video-media .interior-teaser { display: none; }
  .interior-video-media .interior-tour {
    position: absolute;
    z-index: 2;
    inset: 0;
    display: block;
    opacity: 0;
    pointer-events: none;
  }
  .interior-feature.is-tour-playing .interior-tour { opacity: 1; pointer-events: auto; }
  .interior-feature.is-tour-playing .interior-video-trigger { display: none; }
  .interior-video-media video { object-fit: cover; border-radius: 0; }
  .film-pin-sequence .interior-feature {
    position: sticky;
    top: 0;
    z-index: 0;
  }
  .film-pin-sequence .interior-feature.is-scroll-finished {
    position: relative;
    top: auto;
  }
  .film-pin-sequence .interior-feature::after {
    position: absolute;
    z-index: 4;
    inset: 0;
    border-radius: 0;
    background: var(--bg-primary);
    opacity: var(--film-fade, 0);
    pointer-events: none;
    content: "";
  }
  .film-pin-foreground {
    position: relative;
    z-index: auto;
    grid-column: 1 / -1;
    grid-row: 8;
    min-width: 0;
    min-height: 115.3vw;
    margin: 0;
    padding: 0;
    background: var(--bg-primary);
  }
  .maker-story { padding: 0; background: transparent; }
  .maker-story-copy {
    display: block;
  }
  .maker-story h2 {
    position: absolute;
    z-index: 3;
    top: 7.8vw;
    left: 12.7vw;
    width: 26.5vw;
    max-width: none;
    margin: 0;
    padding: 0 1.2vw 1.2vw 0;
    background: var(--bg-primary);
    font-size: clamp(82.8px, 6.3825vw, 124.2px);
    line-height: 1.02;
  }
  .maker-story h2 + p { margin-top: 0; }
  .maker-story-copy > p {
    position: absolute;
    top: 23.6vw;
    left: 71.1vw;
    width: 23vw;
    max-width: none;
    margin: 0;
    font-size: clamp(30px, 2.22vw, 43px);
    line-height: 1.14;
  }
  .maker-story-copy > p span { display: block; margin-top: 1.1em; }
  .interior-video-trigger .video-play-control {
    top: 42%;
    left: 9%;
    width: clamp(280px, 26vw, 380px);
    height: 88px;
    padding-inline: 28px;
    font-size: 21px;
  }
  .interior-video-trigger .video-play-control svg { width: 34px; height: 34px; }

  .joinery-feature {
    grid-column: 1 / -1;
    grid-row: 8;
    align-self: start;
    z-index: 1;
    width: 37vw;
    margin: 14.6vw 0 0 31.95vw;
    padding: 0;
    border-radius: 0;
    background: transparent;
  }
  .joinery-feature video { aspect-ratio: 4 / 5; object-fit: cover; }
  .joinery-hud--6 { left: 34%; }
  .bathroom-photographs {
    grid-column: 1 / -1;
    grid-row: 8;
    align-self: start;
    z-index: 2;
    display: flex;
    flex-direction: column-reverse;
    width: 18.5vw;
    gap: 16px;
    margin: calc(67.4vw - 18px) 0 0 7.3vw;
    padding: 0;
    background: transparent;
  }
  .bathroom-photographs figure { overflow: visible; border-radius: 0; }
  .bathroom-photographs figure:first-child { align-self: flex-end; }
  .bathroom-photographs figure:first-child figcaption { text-align: right; }
  .bathroom-photographs figure:last-child { width: 15.15vw; margin: 0 0 0 auto; }
  .bathroom-photographs figcaption { font-size: 10px; padding-top: 10px; }
  .bathroom-photographs img,
  .bathroom-photographs video { object-fit: cover; }
  .ensuite-photographs {
    grid-column: 1 / -1;
    grid-row: 8;
    align-self: start;
    z-index: 2;
    width: 63.4vw;
    grid-template-columns: 49% minmax(0, 1fr);
    align-items: start;
    gap: .75vw;
    margin: 64.5vw 0 0 28.3vw;
    padding: 0;
    background: transparent;
  }
  .ensuite-photographs figure { border-radius: 0; }
  .ensuite-photographs figure:last-child { margin-top: 1vw; }
  .bedrooms {
    grid-column: 1 / -1;
    grid-row: 8;
    align-self: start;
    z-index: 2;
    width: 63.4vw;
    margin: 108.5vw 0 0 28.3vw;
    padding: 0;
    background: transparent;
  }
  .bedroom-intro { padding: 0; }
  .bedroom-intro > p { width: min(36vw, 520px); max-width: none; margin: 0 auto; font-size: 12px; line-height: 1.45; text-align: center; }

  /* Carry the wider canvas through the remaining, unchanged narrative. */
  .practical {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: clamp(32px, 3.3vw, 64px);
    row-gap: clamp(46px, 4.2vw, 72px);
    min-height: 830px;
    align-content: center;
    padding: 80px var(--desktop-gutter);
  }
  .practical-row { display: contents; }
  .practical-row > div,
  .practical-rules {
    border-top: .5px solid var(--border-soft);
    border-bottom: 0;
    padding: 16px 0 0;
  }
  .practical-row:nth-of-type(1) > div:first-child { grid-area: 2 / 1; border-top: .5px solid var(--border-soft); padding-top: 16px; }
  .practical-row:nth-of-type(1) > div:last-child { grid-area: 2 / 2; }
  .practical-row:nth-of-type(2) > div:first-child { grid-area: 3 / 1; }
  .practical-row:nth-of-type(2) > div:nth-child(2) { grid-area: 2 / 3; }
  .practical-row:nth-of-type(2) > div:last-child { grid-area: 3 / 3; }
  .practical-row:nth-of-type(3) > div { grid-area: 3 / 2; }
  .practical-rules { grid-column: 1 / -1; grid-row: 4; }
  .practical h3 { margin-bottom: 4px; }

  .roman-corbridge {
    display: block;
    min-height: 830px;
    height: clamp(830px, 57.64vw, 1000px);
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border-radius: 0;
    isolation: isolate;
  }
  .roman-corbridge::before { display: none; }
  .roman-corbridge-map { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; margin: 0; }
  .roman-map-svg { position: absolute; top: 50%; left: 50%; width: 100%; height: auto; transform: translate(-50%, -50%); }
  .roman-map-wall-guide,
  .roman-map-wall,
  .roman-map-wall-label { transform: translateY(50px); }
  .roman-map-wall-guide { stroke-opacity: .7; stroke-width: 1.4; }
  .roman-map-wall-label text,
  .roman-map-hexham text,
  .roman-map-corbridge text { font-size: 27px; letter-spacing: 3px; opacity: .55; }
  .roman-map-workshop { translate: -3vw 0; }
  .roman-map-workshop text { font-size: 43.2px; transform: translateY(10px); }
  .roman-map-workshop-ring { transform-origin: center; transform-box: fill-box; transform: scale(.72); }
  .roman-map-svg.is-running .roman-map-workshop-ring { animation: roman-map-ring-throb 2.4s ease-in-out infinite; }
  @keyframes roman-map-ring-throb {
    0%, 100% { transform: scale(.72); opacity: .65; }
    50% { transform: scale(.84); opacity: 1; }
  }
  .roman-corbridge-heading,
  .roman-corbridge-copy { position: absolute; z-index: 2; padding: 0; }
  .roman-corbridge-heading { top: 22%; left: var(--desktop-gutter); width: 410px; }
  .roman-corbridge h2 { font-size: clamp(82.8px, 6.325vw, 124.2px); line-height: 1.06; }
  .roman-corbridge-copy { top: 45%; left: var(--desktop-gutter); width: min(820px, 58vw); margin: 0; }
  .roman-corbridge-copy > p { width: 100%; margin: 0; font-size: 25px; line-height: 1.4; }

  .arrival-pin-sequence {
    display: grid;
    --arrival-chapter-height: clamp(830px, 57.64vw, 1100px);
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: var(--arrival-chapter-height) var(--arrival-chapter-height);
    gap: 0;
    padding: 0;
  }
  .welcome { position: relative; grid-area: 1 / 1 / 2 / -1; align-self: stretch; }
  .welcome-copy { position: absolute; top: 6.1vw; left: 14.7vw; width: 58vw; padding: 0; }
  .welcome h2 { font-size: clamp(85.1px, 5.911vw, 115px); line-height: 1.04; }
  .welcome-copy > p:not(.availability-note) { width: clamp(340px, 23.6vw, 460px); margin: 3.5vw 0 0 3.6vw; font-size: clamp(29px, 2.01vw, 38px); line-height: 1.23; }
  .welcome-availability { margin: 12px 0 0 4.3vw; }
  .welcome-copy .availability-note { font-size: clamp(11px, .77vw, 15px); }
  .welcome-film { z-index: 1; grid-area: 1 / 1 / 2 / -1; align-self: end; width: 31vw; margin: 0 0 0 44.1vw; }
  .welcome-film video { object-fit: cover; }
  .joes-garage { grid-column: 1 / -1; grid-row: 2; min-height: 0; margin: 0; padding: 0; }
  .garage-copy { position: absolute; z-index: 2; top: 21.9vw; left: 64.1vw; display: block; width: 32vw; margin: 0; padding: 0; }
  .garage-copy h2 { font-size: clamp(48.3px, 3.5075vw, 66.7px); line-height: 1.08; white-space: nowrap; }
  .garage-copy > p { width: clamp(360px, 25vw, 480px); margin: 18px 0 0; font-size: clamp(24px, 1.67vw, 32px); line-height: 1.2; }
  .garage-photographs { position: absolute; inset: 0; display: block; width: 100%; height: 100%; margin: 0; padding: 0; overflow: visible; scroll-snap-type: none; }
  .garage-photographs figure { position: absolute; flex: none; }
  .garage-photographs figure:first-child { top: calc(3.1vw - 21px); left: 6.4vw; width: 37vw; }
  .garage-photographs figure:last-child { top: 13.3vw; left: 44.1vw; width: 17.4vw; }
  .garage-closing-copy { position: absolute; top: calc(53.5vw - 21px); left: 7.1vw; width: 37vw; padding: 0; }
  .garage-closing-copy p { width: 100%; max-width: none; margin: 0; font-size: clamp(13px, .9vw, 17px); }

  .outside-gallery-sequence { background: var(--bg-primary); }
  .outside-feature { width: 100%; margin: 0; }
  .outside-feature picture,
  .outside-feature picture img { display: block; width: 100%; height: auto; }
  .outside-feature picture img { aspect-ratio: 1527 / 1145; }
  .outside-feature h2 { font-size: clamp(56px, 5.3vw, 100px); transform: translate(-8vw, -50%); }
  .gallery-filmstrip { padding: 80px 0 0; }
  .gallery-filmstrip-track { padding-inline: var(--desktop-gutter); gap: 24px; }
  .gallery-filmstrip-card { flex-basis: clamp(400px, 38vw, 720px); }
  .site-footer { padding: 100px var(--desktop-gutter) 48px; }
  .site-footer-book { margin-top: 56px; padding-bottom: 32px; font-size: clamp(72px, 7vw, 128px); }
  .site-footer-book span { font-size: 48px; }
  .site-footer-place { margin-top: 48px; }
}