/* The home page: hero, map bands, featured projects, the work list and the stacked panels. */
/* home: hero statement over the graticule band, the work list, stacked floor panels */
.hero { padding-top: clamp(32px, 5vw, 80px); padding-bottom: 0; }
.hero h1 { grid-column: 1 / -1; margin-bottom: clamp(28px, 4vw, 64px); }
.hero .intro { grid-column: 1 / -1; display: grid; gap: 24px; }
.hero .aside { grid-column: 1 / -1; }
@media (min-width: 900px) { .hero .intro { grid-column: 7 / span 6; grid-row: 3; } .hero .aside { grid-column: 1 / span 5; grid-row: 3; align-self: start; } }
.band-wrap { margin-top: clamp(40px, 6vw, 96px); position: relative; }
.band-wrap .mapband { height: clamp(280px, 34vw, 520px); margin-right: calc(-1 * var(--gap)); border-top: 1px solid var(--ink); }
.band-wrap .inset { margin: 16px 0 0; background: var(--paper); }
/* featured projects: a bordered card over the map band or over a wide photograph */
.feature-card { display: block; color: inherit; text-decoration: none; }
.feature-card .ph { display: block; aspect-ratio: 16 / 9; overflow: hidden; }
.feature-card .ph img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-expo); }
.feature-card:hover .ph img { transform: scale(1.03); }
.feature-card__txt { display: grid; gap: 6px; padding-top: 14px; }
.feature-card__line { font-size: 1.125rem; line-height: 1.4; }
.feature-card__cta { margin-top: 4px; font-weight: 500; text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }
.feature-card:hover .feature-card__cta { text-decoration-thickness: 2px; }
.feature-card:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
/* each featured project sits on a contour map of its own place, with a second picture pinned to the map */
.feature-map { padding-block: clamp(48px, 7vw, 112px) clamp(72px, 9vw, 150px); }
.feature-map .band-wrap { margin-top: 0; }
.fmap .mapband { height: clamp(320px, 40vw, 600px); }
.fmap__img2 { position: absolute; z-index: 2; top: 16px; left: 0; width: 46%; margin: 0; padding: 6px; background: var(--paper); border: 1px solid var(--ink); }
.fmap__img2 .ph { display: block; aspect-ratio: 5 / 4; overflow: hidden; }
.fmap__img2 img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fmap__img2--tall { width: 30%; }
.fmap__img2--tall .ph { aspect-ratio: 1170 / 2532; }
@media (min-width: 900px) {
  .fmap__img2 { top: clamp(24px, 3vw, 48px); left: calc((100% - 11 * var(--gap)) / 12 + var(--gap)); width: calc((100% - 11 * var(--gap)) / 12 * 3 + 2 * var(--gap)); padding: 10px; }
  .fmap__img2--tall { width: calc((100% - 11 * var(--gap)) / 12 * 2 + var(--gap)); }
}
.band-wrap .inset .ph { aspect-ratio: 16 / 9; }
.hero .reel-inset { margin: 8px 0 0; }
/* the home hero's rule carries only the place, on the right */
.sh--plain { justify-content: flex-end; }
.reel-inset .ph { position: relative; aspect-ratio: 960 / 506; overflow: hidden; background: #0d0f11; }
.reel-inset video { display: block; width: 100%; height: 100%; object-fit: cover; }
/* the reel's play control is a small dark frosted pill in the bottom left, level with the pause icon
   on the right; the whole frame still opens the reel */
.reel-inset .embed__play--pill { place-content: end start; padding: 10px; background: none; }
.reel-pill { display: inline-flex; align-items: center; min-height: 32px; padding: 0 14px; border-radius: 999px; color: #fff; font: 500 .9375rem/1 var(--sans); letter-spacing: .01em; background: rgba(10, 12, 14, .62); border: 1px solid rgba(255, 255, 255, .16); -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2); transition: background .3s var(--ease-out); }
.embed__play--pill:hover .reel-pill { background: rgba(10, 12, 14, .82); }
.reel-inset .embed__play--pill:focus-visible { outline: none; }
.embed__play--pill:focus-visible .reel-pill { outline: 2px solid #fff; outline-offset: 2px; background: rgba(10, 12, 14, .82); }
@media (forced-colors: active) { .reel-pill { border-color: ButtonText; } }
@media (min-width: 900px) {
  .band-wrap .inset { position: absolute; right: 0; bottom: clamp(-40px, -3vw, -24px); width: calc((100% - 11 * var(--gap)) / 12 * 4 + 3 * var(--gap)); padding: 10px; border: 1px solid var(--ink); z-index: 2; }
}
.band-cap { margin-top: 14px; }
@media (min-width: 900px) { .band-cap { max-width: 50%; } }
/* the studio's own map follows the St. George's photographs, with no card */
.studio-map { padding-block: clamp(56px, 8vw, 128px) 0; }
.work h2 { grid-column: 1 / -1; margin-bottom: clamp(28px, 4vw, 56px); }
@media (min-width: 900px) { .work h2 { grid-column: 1 / span 9; } }
/* line art behind the stacked panels */
.feature .wrap { position: relative; z-index: 1; }
.lineart { position: absolute; inset: 0; z-index: 0; pointer-events: none; color: var(--on-floor); overflow: hidden; }
.lineart svg { position: absolute; display: block; height: auto; fill: none; stroke: currentColor; stroke-width: 1; }
.lineart--sphere svg { top: clamp(150px, 13vw, 200px); left: calc(var(--gut) - 4%); width: min(78%, 560px); opacity: .26; }
@media (min-width: 900px) { .lineart--sphere svg { width: min(40%, 600px); left: calc(var(--gut) - 2%); } }
.lineart--sphere .mer-turn { transform-box: fill-box; transform-origin: center; }
.motion .lineart--sphere .mer-turn { animation: mer-turn 24s infinite; animation-delay: var(--p); }
@keyframes mer-turn { 0% { transform: scaleX(1); animation-timing-function: cubic-bezier(.12, 0, .39, 0); } 50% { transform: scaleX(0); animation-timing-function: cubic-bezier(.61, 1, .88, 1); } 100% { transform: scaleX(1); } }
/* the capture panel carries a 360° view of the St. George's theatre beside the Orca Camp loop */
.home-pano { grid-column: 1 / -1; }
.home-pano .cap { margin-top: 10px; }
.home-pano .pano__status { margin: 10px 0 0; }
@media (min-width: 900px) {
  [data-floor="capture"] .fig { grid-column: 1 / span 7; grid-row: 1; }
  [data-floor="capture"] .home-pano { grid-column: 1 / span 7; grid-row: 2; }
  [data-floor="capture"] h2 { grid-column: 1 / span 7; grid-row: 3; }
  [data-floor="capture"] .body { grid-column: 8 / span 5; grid-row: 1 / span 3; align-self: end; }
}
/* a small map of Orca Camp sits at the top right of the capture panel, on paper like the featured cards */
.orca-map { grid-column: 1 / -1; padding: 8px; background: var(--paper); border: 1px solid var(--on-floor); --ink: var(--coast); --soft: var(--coast); --focus: var(--coast); color: var(--coast); }
.orca-map .mapband { aspect-ratio: 4 / 3; }
@media (min-width: 900px) {
  [data-floor="capture"] .orca-map { grid-column: 9 / span 4; grid-row: 1; align-self: start; }
  [data-floor="capture"] .body { grid-row: 2 / span 2; }
}
/* each panel holds still for a while before the next one slides over it */
.feature .wrap { padding-block: clamp(56px, 8vw, 128px); display: flex; flex-direction: column; justify-content: space-between; min-height: 100%; }
.feature .grid { row-gap: 24px; align-items: end; }
.feature .fig { grid-column: 1 / -1; }
.feature h2 { grid-column: 1 / -1; }
.feature .body { grid-column: 1 / -1; display: grid; gap: 22px; align-content: start; }
@media (min-width: 900px) { .feature h2 { grid-column: 1 / span 7; } .feature .body { grid-column: 8 / span 5; } }
.feature .body .media .ph { aspect-ratio: 16 / 10; }
.arrowfig { display: inline-flex; align-items: baseline; gap: .12em; }
.arrowfig .from { opacity: .55; text-decoration: line-through; text-decoration-thickness: .04em; }
.svc { grid-column: 1 / -1; list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
@media (min-width: 900px) { .svc { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gap); } }
.svc li { border-top: 1px solid var(--ink); padding-block: 16px 28px; }
.svc svg { width: 40px; height: 14px; margin-bottom: 18px; color: var(--ink); }
.svc h3 { margin-bottom: 10px; }
.svc p { color: var(--soft); font-size: var(--t-small); }
.services h2 { grid-column: 1 / -1; margin-bottom: clamp(28px, 4vw, 56px); }
.site-foot .cta { margin-top: 18px; }
.site-foot .cta .mega { display: inline-block; }
.ack { max-width: 44em; font-size: var(--t-small); }

/* St. George's card is larger and carries a slowly turning 360° view of the theatre; its link is the line under the view */
.feature-card--pano .pano { margin: 0; }
.feature-card--pano .feature-card__cta { color: inherit; justify-self: start; }
@media (min-width: 900px) {
  .band-wrap .inset.feature-card--pano { width: calc((100% - 11 * var(--gap)) / 12 * 5 + 4 * var(--gap)); }
}
/* "Featured project" sits over the top of each featured map */
.fmap__tag { position: absolute; z-index: 3; top: 14px; right: 0; margin: 0; padding: 6px 10px; background: var(--paper); border: 1px solid var(--ink); color: var(--ink); }
@media (min-width: 900px) { .fmap__tag { top: 28px; } }
/* on a phone the map is small, so the tag sits above it and the second picture comes off, leaving the marker clear */
@media (max-width: 899px) {
  .fmap__tag { position: static; display: inline-block; margin: 0 0 10px; }
  .fmap__img2 { display: none; }
}
/* more of St. George's under its map */
.sgs-strip { list-style: none; margin: clamp(72px, 8vw, 120px) 0 0; padding: 0; display: grid; gap: 28px var(--gap); }
@media (min-width: 700px) { .sgs-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sgs-strip figure { margin: 0; }
.sgs-strip .ph { display: block; aspect-ratio: 4 / 3; overflow: hidden; }
.sgs-strip img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sgs-strip .cap { margin-top: 10px; }



/* the Schools and Venues stories from /capture, told again on the home page */
.schools h2, .venue h2 { grid-column: 1 / -1; }
.schools__txt, .venue__txt { grid-column: 1 / -1; max-width: 40em; margin: clamp(16px, 2vw, 28px) 0 0; }
@media (min-width: 900px) {
  .schools h2, .venue h2 { grid-column: 1 / span 9; }
  .schools__txt, .venue__txt { grid-column: 1 / span 7; }
}
.school-list { list-style: none; margin: clamp(32px, 4vw, 56px) 0 0; padding: 0; display: grid; gap: clamp(40px, 5vw, 72px) var(--gap); }
@media (min-width: 900px) { .school-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.school { display: grid; gap: 14px; align-content: start; }
.school__tour { display: grid; gap: 10px; color: inherit; text-decoration: none; }
.school__img { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; border: 1px solid var(--ink); }
.school__img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-expo); }
.school__tour:hover .school__img img { transform: scale(1.03); }
.school__deg { position: absolute; left: 14px; bottom: 14px; padding: 6px 10px; background: var(--paper); border: 1px solid var(--ink); font-weight: 500; }
.school__l { font-weight: 500; text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }
.school__tour:hover .school__l { text-decoration-thickness: 2px; }
.school__tour:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
.school__q { margin: 8px 0 0; font-family: var(--serif); font-size: clamp(1.375rem, 1.8vw, 1.75rem); line-height: 1.3; }
.school__q p { margin: 0; }
.venue .grid { row-gap: 24px; }
.venue__pano, .venue__still { grid-column: 1 / -1; margin: clamp(16px, 2vw, 32px) 0 0; }
@media (min-width: 900px) {
  .venue__pano { grid-column: 1 / span 7; }
  .venue__still { grid-column: 8 / span 5; align-self: end; }
}
.venue__pano .cap, .venue__still .cap { margin-top: 10px; }
.venue__still .ph { aspect-ratio: 2400 / 1495; overflow: hidden; }
.venue__still img { display: block; width: 100%; height: 100%; object-fit: cover; }