/* Sanctuary's constructed scenes. Motion belongs to the objects, not a
   growing mask across the whole page. Values come from the shared scroll clock. */
.sec[data-enter="compose"] > .body { --entry: 1; isolation: isolate; }
.js .sec[data-enter="compose"] > .body { opacity: var(--chapter-alpha, 0); }

.js .sec[data-enter="compose"] > .body { -webkit-mask-image: linear-gradient(to bottom, transparent, #000 var(--entry-feather, 0px)); mask-image: linear-gradient(to bottom, transparent, #000 var(--entry-feather, 0px)); }
.sec-hero.has-composed-next .door-window { translate: 0 calc(var(--handoff, 0) * -45px); }
.sec-hero.has-composed-next .hero-copy { translate: 0 calc(var(--handoff, 0) * -24px); }

/* The line climbs with the milestones; the bars and their pictures follow it. */
.roots-thread { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: .2; }
.roots-thread path { fill: none; stroke: #557C70; stroke-width: 1.5; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--entry, 1)); }
.roots-track { transform: translate3d(var(--track-x, 0px), calc((1 - var(--entry, 1)) * 56px), 0); }
.steps li { --step: 1; padding-bottom: 45px; border-top: 0; background: transparent; isolation: isolate; transform: translateY(calc((1 - var(--step)) * 75px)); opacity: var(--step); }
.steps li::after { content: ""; position: absolute; inset: 0; z-index: -1; background: #2B4B42; border-top: 4px solid var(--c); transform-origin: 50% 100%; transform: none; }
.steps li::before { display: none; }
.steps li > span { opacity: var(--step); transform: translateY(calc((1 - var(--step)) * 20px)); }
.steps b { transition: none; background-size: 100% calc(var(--step) * 100%); translate: 0 calc((1 - var(--step)) * 24px); }
.milestone-art { position: relative; width: 100%; min-height: 80px; flex: 1; margin-top: 12px; overflow: hidden; opacity: var(--step); }
.milestone-art svg { display: block; width: 100%; height: 100%; max-height: 220px; min-height: 100px; fill: none; stroke: #E4D9B5; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.milestone-art img { width: 100%; height: 100%; max-height: 300px; object-fit: cover; object-position: 50% 46%; transform: translateY(calc((1 - var(--step)) * 60px)) scale(calc(1.04 - var(--step) * .04)); }
.milestone-photo-note { position: absolute; bottom: 12px; left: 12px; font: 500 11px var(--f-body); letter-spacing: .12em; text-transform: uppercase; padding: 6px 9px; background: #FCFAF3ED; color: #345B4C; }
.history-person { opacity: clamp(0, calc(var(--step) * 3 - var(--n) * .1), 1); }
.history-person circle { fill: #D6B47E; stroke: none; }
.history-line { stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--step)); }
.history-note { transform: translateY(calc((1 - var(--step)) * 26px)); }
.history-note.later { transform: translateY(calc((1 - var(--step)) * 48px)); }
.history-note ellipse { fill: #DDBB73; }
.history-book { transform-origin: 50% 150px; transform: scaleX(calc(.5 + var(--step) * .5)); }
.history-sprig { transform-origin: 125px 161px; transform: rotate(calc((1 - var(--step)) * -28deg)); }
.history-flame { fill: #DDBB73; stroke: none; transform-origin: 140px 63px; transform: scale(var(--step)); }
.history-rays { opacity: var(--step); }

.threshold-caption { translate: 0 calc((1 - var(--entry, 1)) * 24px); }

/* Landscape prints settle in space: no masks, shutters or sliced photographs. */
.sec-arcade .body { min-height: 0; gap: 74px; padding: 92px 7vw 100px; }
.arcade-heading { width: 100%; max-width: 1180px; margin: 0 auto; display: flex; justify-content: space-between; align-items: end; gap: 24px; }
.arcade-heading .display { font-size: clamp(34px, 4.3vw, 64px); max-width: 580px; }
.arcade { display: grid; grid-template-columns: 1fr; gap: clamp(80px, 10vw, 150px); max-width: 1180px; }
.arch-frame { --detail: 1; --view: .5; display: grid; grid-template-columns: 1.8fr 1fr; align-items: center; gap: 7%; width: 100%; transform: none; }
.arch-entrance { grid-template-columns: 1fr 1.8fr; }
.arch-entrance .arch-construction { order: 2; }
.arch-frame::before { display: none; }
.arch-construction { position: relative; perspective: 1300px; }
.photo-mat { padding: 9px 9px 0; background: #FFFEF8; border: 1px solid #D8CCB6; box-shadow: 0 16px 28px -23px #29493C66; transform-origin: 50% 60%; }
.js .photo-mat { transform: translate3d(0, calc((1 - var(--detail)) * 58px), 0) rotateY(calc((1 - var(--detail)) * var(--photo-turn) * 13deg)) rotateZ(calc((1 - var(--detail)) * var(--photo-turn) * 2.6deg)) scale(calc(.94 + var(--detail) * .06)); opacity: clamp(0, calc(.3 + var(--detail) * 1.7), 1); }
.js .arch-palms .photo-mat { transform: translateY(calc((1 - var(--detail)) * 70px)) rotateX(calc((1 - var(--detail)) * 17deg)) scale(calc(.94 + var(--detail) * .06)); }
.js .arch-entrance .photo-mat { transform-origin: 0 50%; transform: translateY(calc((1 - var(--detail)) * 38px)) rotateY(calc((1 - var(--detail)) * -19deg)); }
.js .arch-garden .photo-mat { transform: translate(calc((1 - var(--detail)) * -34px), calc((1 - var(--detail)) * 40px)) rotateZ(calc((1 - var(--detail)) * -3.2deg)) scale(calc(.96 + var(--detail) * .04)); }
.arcade .arch-image, .js .arcade .arch-image { aspect-ratio: 1280 / 853; padding: 0; background: #E3DCD0; mask: none; -webkit-mask: none; clip-path: none; transform: none; transition: none; opacity: 1; }
.arcade .arch-entrance .arch-image { aspect-ratio: 1280 / 843; }
.arcade .arch-frame .arch-image img, .js .arcade .arch-frame .arch-image img { clip-path: none; mask: none; -webkit-mask: none; object-fit: cover; filter: none; transform: scale(1.015) translateX(calc((var(--view) - .5) * var(--photo-turn) * 8px)); transition: none; }
.photo-print-label { display: block; padding: 11px 5px 10px; font: 500 9px var(--f-body); letter-spacing: .16em; color: #82765D; }
.arch-frame figcaption { display: grid; gap: 19px; margin: 0; text-align: left; color: #304C42; transform: translateY(calc((1 - var(--detail)) * 25px)); }
.photo-number { font: 500 10px var(--f-body); color: #94754D; letter-spacing: .11em; text-transform: uppercase; }
.arch-frame figcaption h3 { font: 450 clamp(27px, 2.7vw, 41px)/1.15 var(--f-display); letter-spacing: -.035em; }
.arch-frame figcaption p { font: 400 16px/1.7 var(--f-body); color: #697466; }
.scenic-sketch { width: 54px; height: 67px; fill: none; stroke: #7A8C6B; stroke-width: 1.4; stroke-linecap: round; }
.scenic-sketch path { stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--detail)); }
.scenic-rule { height: 1px; width: 70px; background: #B7A075; transform-origin: 0 50%; transform: scaleX(var(--detail)); }

/* Ten leaded windows lift from a single stone sill and cast a coloured floor. */
.sec-glass .body { min-height: 0; padding: 100px 6vw 120px; background: linear-gradient(#FBF9F7, #EEEDE3); overflow: hidden; }
.glass-composition { --detail: 1; max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: 1.45fr 1fr; align-items: center; gap: 7vw; }
.glass-installation { position: relative; padding: 0 10px 90px; perspective: 1100px; }
.glass-panes { position: relative; display: flex; align-items: end; gap: clamp(5px, .7vw, 10px); }
.glass-pane { --pane: 1; display: block; position: relative; flex: 1; aspect-ratio: 100 / 360; transform-origin: 50% 100%; transform: translateY(calc((1 - var(--pane)) * 70px)) rotateY(calc((1 - var(--pane)) * 65deg)); opacity: var(--pane); }
.glass-pane:nth-child(2), .glass-pane:nth-child(9) { aspect-ratio: 100 / 410; }
.glass-pane:nth-child(3), .glass-pane:nth-child(8) { aspect-ratio: 100 / 450; }
.glass-pane:nth-child(4), .glass-pane:nth-child(7) { aspect-ratio: 100 / 480; }
.glass-pane:nth-child(5), .glass-pane:nth-child(6) { aspect-ratio: 100 / 500; }
.glass-pane svg { width: 100%; height: 100%; overflow: visible; stroke: #537369; stroke-width: 2.5; }
.glass-field { fill: var(--glass); fill-opacity: .64; }
.glass-colour { fill: #F7E3A8; fill-opacity: .7; stroke: #567166; stroke-width: 1.2; }
.glass-pane circle { fill: #F5EFE0; fill-opacity: .8; stroke-width: 1; }
.glass-lead { fill: none; stroke-width: 1; }
.glass-pane i { position: absolute; left: 0; right: 0; top: 100%; height: 85px; background: linear-gradient(var(--glass), transparent); opacity: calc(var(--pane) * .35); transform-origin: 50% 0; transform: skewX(-30deg) scaleY(var(--pane)); }
.glass-sill { position: absolute; left: 0; right: 0; bottom: 90px; height: 5px; background: #C9BBA1; box-shadow: 0 5px 0 #E3D8C4; transform: scaleX(var(--detail)); transform-origin: 50% 50%; }
.glass-copy { display: grid; gap: 23px; }
.glass-copy .display { font-size: clamp(44px, 5.3vw, 78px); }
.glass-copy .lede { font-size: 17px; color: #697568; }
.glass-next { display: flex; align-items: center; gap: 14px; text-transform: uppercase; font: 500 10px var(--f-body); letter-spacing: .14em; color: #7B785E; }
.glass-next span { width: 45px; height: 1px; background: #B19B6E; transform-origin: 0 0; transform: scaleX(var(--detail)); }

/* A line becomes the aisle. The seats gather around it, then the times settle. */
.sec-worship .body { background: #E8ECE1; }
.worship-grid { --detail: 1; position: relative; isolation: isolate; }
.worship-aisle { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; fill: none; stroke: #AA9566; stroke-width: 1; opacity: .32; }
.worship-aisle path { stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--detail)); }
.worship-grid .pews { transform: translateY(calc((1 - var(--detail)) * 50px)) scale(calc(.96 + var(--detail) * .04)); opacity: var(--detail); transform-origin: 50% 30%; }
.worship-grid .board { transform: translateY(calc((1 - var(--detail)) * 28px)); opacity: var(--detail); }
.worship-copy > .eyebrow, .worship-copy > .display { translate: 0 calc((1 - var(--entry, 1)) * 28px); }

/* Finale: the open book becomes the church. No photo is split or enlarged. */
.sec-come .body { display: grid; grid-template-columns: 1.15fr 1fr; align-items: center; gap: 1vw; padding: 105px 6vw 70px 2vw; min-height: var(--vh); background: #F4ECD9; }
.dawn { opacity: .72; background: radial-gradient(ellipse at 25% 53%, #FFFAE9, transparent 70%); }
.closing-build { --detail: 1; --book: 1; --building: 1; --blessing: 1; --invitation: 1; position: relative; width: 100%; }
.folio { position: relative; display: block; width: 100%; height: auto; overflow: visible; }
.folio-aura { position: absolute; inset: -20% -10%; border-radius: 50%; background: radial-gradient(ellipse, #D6B66D55, #E8DBC029 45%, transparent 65%); opacity: var(--blessing); transform: scale(calc(.7 + var(--blessing) * .3)); }
.folio-shadow { fill: #5F6549; opacity: calc(.07 + var(--book) * .05); transform-origin: 450px 479px; transform: scaleX(calc(.2 + var(--book) * .8)); }
.page-under { fill: #7A7758; stroke: #7A7758; stroke-width: 2; }
.page-edge { fill: #E1CEAA; stroke: #B49A70; stroke-width: 1; }
.page-face { fill: url(#folio-paper); stroke: #AF9368; stroke-width: 1.3; }
.page-lines { fill: none; stroke: #BCA98B; stroke-width: 1; opacity: .75; }
.folio-church { transform: translateY(calc((1 - var(--building)) * 140px)); opacity: var(--building); }
.folio-stone { fill: #E6D6BA; stroke: #B7A080; stroke-width: 2; }
.folio-glazing { fill: url(#folio-glass); stroke: #8E794F; stroke-width: 3; }
.folio-lights { opacity: var(--blessing); transform: translateY(calc((1 - var(--blessing)) * 30px)); }
.folio-mullions { fill: none; stroke: #E5D3AE; stroke-width: 2; }
.folio-cross { fill: #8F764A; transform: translateY(calc((1 - var(--blessing)) * 50px)); opacity: var(--blessing); }
.folio-foundation { fill: none; stroke: #A79772; stroke-width: 1.2; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--building)); }
.folio-caption { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: -4% 10% 0; padding-top: 16px; border-top: 1px solid #AF9E7440; font: 500 10px/1.6 var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: #89774F; }
.folio-caption > :last-child { font-size: 9px; white-space: nowrap; }
.come-inner { display: flex; flex-direction: column; align-items: start; gap: 0; max-width: 590px; }
.come-inner > * + * { margin-top: 18px; }
.come-emblem { width: clamp(78px, 7vw, 105px); padding: 4px; transform: none; box-shadow: 0 6px 24px #78663D0D; }
.come-inner h2 { font-size: clamp(44px, 5vw, 78px); margin-top: 14px; }
.come-inner .lede { font-size: clamp(16px, 1.25vw, 18px); }
.js .sec-come .come-inner { opacity: var(--invitation, 1); transform: translateY(calc((1 - var(--invitation, 1)) * 24px)); }
.come-inner .actions { gap: 10px; }
.come-inner .btn { font-size: 14px; padding: 14px 19px; }
.come-inner .again { font-size: 13px; }

/* Prepare the few composited surfaces ahead of entering, then release them. */
.is-near .arch-image, .is-near .arch-image img, .is-near .glass-pane, .is-near .folio-church, .is-near .folio-cross { will-change: transform, opacity; }

@media (max-width: 900px) {
  .roots-intro h2 { font-size: clamp(38px, 7.6vw, 62px); }
  .milestone-art svg { max-height: 180px; }
  .arcade-heading { display: grid; gap: 18px; }
  .arcade-heading .display { font-size: clamp(36px, 8vw, 62px); }
  .sec-arcade .body { padding: 68px 30px 76px; }
  .arcade { gap: 76px; max-width: 620px; }
  .arch-frame, .arch-entrance { grid-template-columns: 1fr; gap: 27px; width: 100%; }
  .arch-entrance .arch-construction { order: 0; }
  .arch-frame figcaption { grid-template-columns: 1fr 48px; gap: 13px 18px; }
  .arch-frame figcaption h3, .arch-frame figcaption p { grid-column: 1 / -1; }
  .scenic-sketch { grid-column: 2; grid-row: 1 / 3; width: 40px; height: 54px; }
  .arch-frame figcaption h3 { font-size: clamp(29px, 7.5vw, 40px); padding-right: 28px; }
  .arch-frame figcaption p { max-width: 460px; }
  .sec-glass .body { padding: 40px 26px 84px; }
  .glass-composition { grid-template-columns: 1fr; gap: 0; }
  .glass-installation { max-width: 590px; width: 100%; margin: 0 auto; padding-bottom: 72px; }
  .glass-sill { bottom: 72px; }
  .glass-pane i { height: 64px; }
  .glass-copy { gap: 18px; max-width: 580px; margin: 0 auto; }
  .glass-copy .display { font-size: clamp(40px, 9vw, 66px); }
  .worship-aisle { display: none; }
  .sec-worship .body { padding-top: 60px; }
  .sec-come .body { grid-template-columns: 1fr; gap: 34px; padding: 74px 22px 66px; }
  .closing-build { max-width: 660px; margin: 0 auto; }
  .folio { width: calc(100% + 44px); max-width: none; margin-left: -22px; }
  .folio-caption { margin-inline: 0; font-size: 9px; }
  .come-inner { align-items: center; text-align: center; margin: 0 auto; max-width: 540px; }
  .come-inner h2 { font-size: clamp(40px, 9.5vw, 64px); }
  .come-emblem { width: 80px; }
  .come-inner .actions { justify-content: center; }
}
@media (max-height: 700px) and (min-width: 901px) {
  .sec-come .body { padding-top: 90px; padding-bottom: 35px; }
  .come-inner h2 { font-size: clamp(40px, 4.6vw, 64px); }
  .come-inner > * + * { margin-top: 12px; }
  .come-emblem { width: 68px; }
  .roots-intro { gap: 14px; }
  .roots-intro h2 { font-size: 54px; }
  .steps li { height: calc(43% + var(--s) * 6%); gap: 9px; padding-top: 17px; }
  .steps span { font-size: 15px; }
  .milestone-art { min-height: 54px; margin-top: 2px; }
  .milestone-art svg { min-height: 54px; max-height: 155px; }
}
:is(.reduce, .no-js) .sec[data-enter="compose"] > .body, :is(.reduce, .no-js) .sec.has-composed-next > .body { opacity: 1; mask-image: none; -webkit-mask-image: none; }
:is(.reduce, .no-js) .roots-track { transform: none; }
:is(.reduce, .no-js) .steps li { --step: 1 !important; }
:is(.reduce, .no-js) .milestone-art { height: 170px; flex: none; }
:is(.reduce, .no-js) .arch-frame { --detail: 1 !important; --photo: 1 !important; --draw: 1 !important; --view: 1 !important; }
:is(.reduce, .no-js) .arcade .arch-image, :is(.reduce, .no-js) .arcade .arch-image img { transform: none; clip-path: none; }
:is(.reduce, .no-js) .glass-pane { --pane: 1 !important; }
:is(.reduce, .no-js) .glass-composition, :is(.reduce, .no-js) .worship-grid { --detail: 1 !important; }
:is(.reduce, .no-js) .closing-build { --book: 1 !important; --building: 1 !important; --blessing: 1 !important; }
:is(.reduce, .no-js) .sec-come .come-inner { opacity: 1; transform: none; }
:is(.reduce, .no-js) .is-near * { will-change: auto; }
@media (min-width: 901px) {
  .js .closing-build { transform: translateX(calc((1 - var(--invitation, 1)) * 20vw)) scale(calc(1.1 - var(--invitation, 1) * .1)); transform-origin: 50% 60%; }
}
:is(.reduce, .no-js) .closing-build { transform: none; }
/* A shallow viewport cannot hold the horizontal history and its dates above
   the bars. Let that chapter read vertically instead of clipping its story. */
@media (max-height: 540px) {
  .sec-roots .body { height: auto; }
  .roots-track { position: relative; flex-direction: column; align-items: stretch; padding: 100px 7vw 70px; gap: 40px; transform: none; }
  .roots-intro { width: min(600px, 100%); padding-top: 0; align-self: start; }
  .roots-intro h2 { font-size: clamp(38px, 6vw, 56px); }
  .steps { flex-direction: column; align-items: stretch; gap: 24px; height: auto; }
  .steps li { --step: 1 !important; width: auto; height: auto; min-height: 290px; padding: 24px; }
  .steps b { position: static; font-size: 46px !important; -webkit-text-stroke-color: transparent; background-size: 100% 100%; }
  .steps .milestone-art { height: 160px; flex: none; }
  .roots-progress, .roots-hint { display: none; }
}

/* The history miniatures stay alive while their own bar is on screen. */
.milestone-art { display: flex; flex-direction: column; justify-content: end; gap: 10px; padding-bottom: 0; }
.milestone-art svg { flex: 1; min-height: 65px; max-height: 235px; }
.steps .milestone-caption { flex: none; font: 400 11px/1.5 var(--f-body); letter-spacing: .045em; color: #D9DBC6; border-top: 1px solid #E9D6AC30; padding-top: 9px; }
.milestone-1 svg { min-height: 90px; }
.history-room { stroke: #C9CEAD; opacity: .38; }
.history-cross { stroke: #E8C789; stroke-width: 3; }
.history-bench { stroke: #A1B398; stroke-width: 2; }
.history-person path { fill: #94B7A044; }
.history-window { fill: #9EBBAD30; stroke: #D0C59B66; }
.history-halo { fill: #EAC372; stroke: none; opacity: .09; }
.history-lantern-glass { fill: #E9C87820; stroke: #E8D3A370; }
.history-page-writing { stroke-width: 1; opacity: .6; }
.history-bud { fill: #C3998A; stroke: none; }
.milestone-5 { min-height: 170px; }
.milestone-5 img { min-height: 0; flex: 1; object-position: 50% 50%; }
.milestone-5 .milestone-caption { position: relative; z-index: 2; background: #2B4B42; }
.milestone-art .history-photo-trace { position: absolute; width: 100%; height: 65%; bottom: 32px; left: 0; opacity: calc((1 - var(--step)) * .7); }
.milestone-art * { animation-play-state: paused !important; }
.steps li.is-live .milestone-art * { animation-play-state: running !important; }
.history-live-note { animation: hymn-drift 4.8s ease-in-out infinite; }
.history-live-note.later { animation-delay: -2.4s; }
.history-live-branch { transform-origin: 125px 161px; animation: branch-breathe 6s ease-in-out infinite; }
.history-live-flame { animation: lamp-breathe 3.7s ease-in-out infinite; }
.history-halo { transform-origin: 140px 42px; animation: lamp-glow 3.7s ease-in-out infinite; }
.history-bud { animation: bud-glow 5s ease-in-out infinite; }
.history-person circle { animation: gathered-light 6s ease-in-out infinite; animation-delay: calc(var(--n) * -.4s); }
.milestone-5 img { animation: history-photo-drift 14s ease-in-out infinite; }
@keyframes hymn-drift { 0%,100% { translate: 0 2px; } 50% { translate: 0 -7px; } }
@keyframes branch-breathe { 0%,100% { rotate: -2deg; } 50% { rotate: 2deg; } }
@keyframes lamp-breathe { 0%,100% { scale: 1 .97; opacity: .85; } 50% { scale: 1.025 1.04; opacity: 1; } }
@keyframes lamp-glow { 0%,100% { scale: .9; opacity: .08; } 50% { scale: 1.12; opacity: .18; } }
@keyframes bud-glow { 0%,100% { opacity: .65; } 50% { opacity: 1; } }
@keyframes gathered-light { 0%,100% { fill: #D6B47E; } 50% { fill: #F2DCAE; } }
@keyframes history-photo-drift { 0%,100% { scale: 1; } 50% { scale: 1.035; } }

/* A stained-glass screen folds on real, paired hinges around an intact photo. */
.sec-unfold > .body { height: var(--vh); min-height: 540px; background: #EFE7D7; overflow: hidden; }
.unfold-heading { position: absolute; top: 100px; left: 7vw; right: 7vw; display: flex; align-items: baseline; justify-content: space-between; gap: 28px; opacity: calc(1 - var(--screen-travel, 0)); transform: translateY(calc(var(--screen-travel, 0) * -28px)); }
.unfold-heading .display { font-size: clamp(34px, 3.8vw, 56px); max-width: 650px; }
.unfold-stage { position: absolute; inset: calc(230px * (1 - var(--screen-travel, 0)) + 76px * var(--screen-travel, 0)) calc(9vw * (1 - var(--screen-travel, 0))) calc(90px * (1 - var(--screen-travel, 0)) + 66px * var(--screen-travel, 0)); perspective: 1900px; }
.unfold-view { position: absolute; inset: 0; overflow: hidden; background: #283F37; }
.unfold-view img { width: 100%; height: 100%; object-fit: contain; transform: scale(calc(1 + var(--screen-look, 0) * .025)); }
.folding-screen { position: absolute; inset: 0; transform-style: preserve-3d; opacity: calc(1 - var(--screen-clear, 0)); }
.screen-half { position: absolute; inset-block: 0; width: 50%; transform-style: preserve-3d; }
.screen-left { left: 0; }
.screen-right { right: 0; }
.screen-panel { position: absolute; top: 0; height: 100%; transform-style: preserve-3d; }
.screen-outer { width: 50%; }
.screen-inner { width: 100%; }
.screen-left .screen-outer { left: 0; transform-origin: 0 50%; transform: rotateY(calc(var(--screen-open, 0) * -88deg)); }
.screen-left .screen-inner { left: 100%; transform-origin: 0 50%; transform: rotateY(calc(var(--screen-open, 0) * 176deg)); }
.screen-right .screen-outer { right: 0; transform-origin: 100% 50%; transform: rotateY(calc(var(--screen-open, 0) * 88deg)); }
.screen-right .screen-inner { right: 100%; transform-origin: 100% 50%; transform: rotateY(calc(var(--screen-open, 0) * -176deg)); }
.screen-panel > svg { position: absolute; width: 100%; height: 100%; background: #C2AE8B; border: 5px solid #6E644B; box-shadow: inset 0 0 0 2px #CBB794; backface-visibility: visible; }
.screen-field { fill: #CBBA93; }
.screen-blue { fill: #648991; }
.screen-honey { fill: #D4B678; }
.screen-green { fill: #82917A; }
.screen-right .screen-honey { fill: #C48C70; }
.screen-right .screen-green { fill: #9EA482; }
.screen-roundel { fill: #ECE4C7; stroke: #465C51; stroke-width: 3; }
.screen-lead { fill: none; stroke: #45584D; stroke-width: 3; }
.screen-grain { fill: none; stroke: #EDDFBB; stroke-width: 2; opacity: .6; }
.screen-rail { position: absolute; left: 0; right: 0; top: -8px; height: 5px; background: #A28D69; opacity: calc(1 - var(--screen-travel, 0)); }
.unfold-photo-note { position: absolute; bottom: 18px; left: 22px; font: 500 11px var(--f-body); letter-spacing: .06em; color: #F9F4E9; background: #233E35D9; padding: 11px 15px; opacity: var(--screen-clear, 0); }
.unfold-photo-note span { margin-left: 16px; font-weight: 400; color: #E3E6D8; }
.unfold-caption { position: absolute; left: 7vw; right: 7vw; bottom: 28px; display: flex; justify-content: space-between; gap: 18px; color: #6E735D; font: 500 10px var(--f-body); letter-spacing: .12em; text-transform: uppercase; }

/* The rose is assembled around the exact emblem; the drawing, not the page, blooms. */
.rose-wrap { --detail: 1; --view: .5; padding-bottom: 40px; }
.rose { transform: rotate(calc((1 - var(--detail)) * -14deg)); }
.rose-stone { opacity: calc(var(--detail) * .68); transform: scale(calc(.7 + var(--detail) * .3)); }
.rose-rim { stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--detail)); }
.rose-ring { opacity: var(--detail); transform: rotate(calc((1 - var(--detail)) * -12deg)); }
.rose-ring text { fill: #796844; font-size: 15px; letter-spacing: .23em; }
.rose-recess, .rose-leading { opacity: var(--detail); }
.rose-petals { transform: none; }
.js .rose-wrap .rp .leaf-in, .js .rose-wrap.in .rp .leaf-in { --bloom: 1; transition: none; transform: translateY(calc((1 - var(--bloom)) * 50px)) scale(calc(.65 + var(--bloom) * .35)); opacity: var(--bloom); }
.rp .glass { stroke: #8B7D5B; stroke-width: 2; }
.rp .vein { stroke: #F5E5B0; stroke-width: 1.5; opacity: .55; }
.rp .sheen { opacity: .7; }
.rp .leaf { transition: transform 1.1s var(--ease-out), opacity .9s, filter .9s; }
.rose.has-on .rp .leaf { opacity: .78; filter: saturate(.85); }
.rose.has-on .rp.on .leaf { opacity: 1; filter: saturate(1.15) brightness(1.1); transform: translateY(-4px) scale(1.025); }
.rose-hub { transform: scale(calc(.78 + var(--detail) * .22)); }
.rose-caption { position: absolute; left: 12%; right: 12%; bottom: 0; display: flex; justify-content: space-between; gap: 12px; font: 500 10px var(--f-body); letter-spacing: .06em; color: #5E715E; opacity: var(--detail); }
.rose-caption > :last-child { color: #918263; }

/* A substantial, readable book with a spine, layered edges and a bookmark. */
.folio-bookmark { fill: #A7644D; opacity: calc(1 - var(--building)); }
.page-under { fill: #58684F; stroke: #58684F; stroke-width: 3; }
.page-edge { fill: #EADABB; stroke: #BEA983; stroke-width: 2; }
.page-lines { stroke-width: 1.3; opacity: .6; }
.folio-caption { margin-top: 0; }

@media (max-width: 900px) {
  .unfold-heading { top: 103px; left: 24px; right: 24px; display: grid; gap: 14px; }
  .unfold-heading .display { font-size: clamp(33px, 8.5vw, 48px); }
  .unfold-stage { inset: auto; left: calc(24px * (1 - var(--screen-travel, 0))); right: calc(24px * (1 - var(--screen-travel, 0))); top: calc(258px - var(--screen-travel, 0) * 182px); height: calc(var(--vh) - 354px + var(--screen-travel, 0) * 212px); }
  .unfold-photo-note { left: 10px; bottom: 8px; font-size: 9px; padding: 7px 10px; }
  .unfold-photo-note span { display: none; }
  .unfold-caption { left: 24px; right: 24px; bottom: 28px; font-size: 9px; }
  .unfold-caption > :last-child { max-width: 70px; text-align: right; }
  .screen-panel > svg { border-width: 3px; }
  .rose-caption { left: 3%; right: 3%; font-size: 9px; }
}
@media (max-height: 650px) and (min-width: 901px) {
  .unfold-heading { top: 88px; }
  .unfold-heading .display { font-size: 34px; }
  .unfold-stage { top: calc(173px * (1 - var(--screen-travel, 0)) + 65px * var(--screen-travel, 0)); bottom: 58px; }
}
@media (max-height: 540px) and (max-width: 900px) {
  .unfold-stage { top: 225px; height: 240px; left: 12vw; right: 12vw; }
  .sec-unfold > .body { min-height: 570px; }
  .unfold-heading { top: 85px; }
  .unfold-caption { bottom: 30px; }
}
:is(.reduce, .no-js) .milestone-art * { animation: none !important; }
:is(.reduce, .no-js) .photo-mat, :is(.reduce, .no-js) .rose { transform: none; opacity: 1; }
:is(.reduce, .no-js) .rose-wrap { --detail: 1 !important; }
:is(.reduce, .no-js) .rose-wrap .rp .leaf-in { transform: none; opacity: 1; }
:is(.reduce, .no-js) .sec-unfold .body { height: auto; min-height: 0; padding: 75px 24px; }
:is(.reduce, .no-js) .unfold-heading { position: relative; inset: auto; opacity: 1; transform: none; margin-bottom: 30px; }
:is(.reduce, .no-js) .unfold-stage { position: relative; inset: auto; aspect-ratio: 16/9; height: auto; }
:is(.reduce, .no-js) .folding-screen, :is(.reduce, .no-js) .screen-rail, :is(.reduce, .no-js) .unfold-caption { display: none; }
:is(.reduce, .no-js) .unfold-view img { transform: none; }
:is(.reduce, .no-js) .unfold-photo-note { opacity: 1; }
.is-near .photo-mat, .is-near .screen-panel { will-change: transform; }

:is(.reduce, .no-js) .arch-frame .photo-mat { transform: none; opacity: 1; }

.js .arch-frame.is-settled .photo-mat { transform: none; will-change: auto; }

.unfold-view picture { display: block; width: 100%; height: 100%; }
@media (max-width: 900px) and (orientation: portrait) {
  :is(.reduce, .no-js) .unfold-stage { aspect-ratio: 9 / 16; }
}

/* One immutable architectural drawing. Its measured bounds always fit the view. */
.sec-home > .body { height: var(--vh); min-height: 0; perspective: none; }
.threshold-scene { position: absolute; inset: 0; overflow: hidden; }
.threshold-defs { position: absolute; }
.threshold-building { position: absolute; left: var(--building-left, 35%); top: var(--building-top, 180px); width: var(--building-width, 30%); aspect-ratio: 6 / 11; opacity: calc(1 - var(--frame-away, 0)); }
.threshold-architecture { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.arch-sketch { fill: none; stroke: #A48D69; stroke-width: 2; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--entry, 1)); opacity: calc(1 - var(--threshold-rise, 0)); }
.arch-stone, .arch-recess, .arch-lining, .arch-step { opacity: var(--threshold-rise, 0); }
.arch-stone { fill: #DAC7AF; }
.arch-recess { fill: #AC9377; }
.arch-lining { fill: none; stroke: #6E614C; stroke-width: 9; }
.arch-step { fill: none; stroke: #BAA389; stroke-width: 5; }
.threshold-cross { fill: #9F8151; opacity: calc(var(--threshold-cross, 0) * (1 - var(--door-open, 0))); transform: translateY(calc((1 - var(--threshold-cross, 0)) * 25px)); }
.threshold-opening { position: absolute; left: 13.333333333%; top: 6.363636364%; width: 73.333333333%; height: 90%; clip-path: url(#threshold-arch); }
.threshold-doors { position: absolute; inset: 0; perspective: 1200px; opacity: var(--door-land, 0); transform: translateY(calc((1 - var(--door-land, 0)) * -28px)); }
.threshold-leaf { position: absolute; width: 50%; height: 100%; top: 0; backface-visibility: hidden; }
.threshold-left { left: 0; transform-origin: 0 50%; transform: rotateY(calc(var(--door-open, 0) * 98deg)); }
.threshold-right { right: 0; transform-origin: 100% 50%; transform: rotateY(calc(var(--door-open, 0) * -98deg)); }
.threshold-leaf svg { width: 100%; height: 100%; display: block; }
.leaf-reflection { fill: #F9F6E5; opacity: .12; }
.leaf-bars { fill: none; stroke: #C0B596; stroke-width: 5; }
.leaf-edge { fill: none; stroke: #806B4C; stroke-width: 16; }
.leaf-handle { fill: #DECA92; stroke: #8D754F; stroke-width: 2; }
.threshold-portal { position: absolute; inset: 0; clip-path: url(#threshold-photo-arch); background: #DCE2D8; opacity: var(--door-land, 0); }
.threshold-portal img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: 51% 50%; transform: scale(calc(1 + var(--threshold-zoom, 0) * .025)); }
.threshold-caption { position: absolute; top: 90px; left: 6vw; right: 6vw; z-index: 5; display: flex; justify-content: space-between; align-items: baseline; gap: 24px; opacity: var(--threshold-caption, 1); }
.threshold-caption .eyebrow { color: #7E613F; }
.threshold-caption .display { font-size: clamp(34px, 4vw, 58px); }
.threshold-caption .display em { --grad: linear-gradient(#345B4C, #345B4C); }
.threshold-hint { position: absolute; z-index: 6; left: 50%; bottom: 20px; transform: translateX(-50%); white-space: nowrap; display: flex; gap: 12px; align-items: center; color: #3C594D; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; background: #FCFAF3ED; border: 1px solid #BBA78355; border-radius: 30px; padding: 10px 17px; }
.threshold-hint i { width: 4px; height: 4px; border-radius: 50%; background: #8D6B46; }

/* The bloom starts with the complete wheel visible, not behind a section mask. */
.js .sec-family[data-enter="compose"] > .body { opacity: 1; mask-image: none; -webkit-mask-image: none; }
.family-grid { grid-template-rows: auto auto; gap: 26px clamp(24px, 5vw, 80px); }
.family-heading { grid-column: 2; grid-row: 1; display: grid; gap: 20px; align-self: end; }
.family-heading h2 { font-size: clamp(42px, 5vw, 76px); }
.family-heading h2 em { --grad: linear-gradient(#89704D, #89704D); }
.family-heading .eyebrow { color: #826C4D; }
.family-heading .lede { color: var(--muted-d); }
.family-copy { grid-column: 2; grid-row: 2; align-self: start; }
.rose-wrap { grid-column: 1; grid-row: 1 / 3; width: min(100%, calc(var(--vh) - 240px), 600px); align-self: center; }
.rose { overflow: visible; }
@media (max-width: 900px) {
  .threshold-caption { top: 92px; left: 20px; right: 20px; flex-direction: column; gap: 12px; }
  .threshold-caption .eyebrow { font-size: 10px; }
  .threshold-caption .display { font-size: 38px; }
  .family-grid { gap: 32px; }
  .family-heading { grid-column: 1; grid-row: 1; }
  .family-heading h2 { font-size: clamp(37px, 9vw, 64px); }
  .rose-wrap { grid-column: 1; grid-row: 2; width: min(100%, calc(var(--vh) - 210px), 420px); }
  .family-copy { grid-column: 1; grid-row: 3; }
}
@media (max-height: 540px) {
  .threshold-caption { top: 80px; flex-direction: row; align-items: center; }
  .threshold-caption .display { font-size: 30px; }
  .threshold-hint { bottom: 12px; font-size: 9px; padding-block: 7px; }
  .rose-wrap { width: min(100%, max(140px, calc(var(--vh) - 160px)), 300px); }
}
:is(.reduce, .no-js) .sec-home > .body { height: auto; min-height: 0; padding: 90px 24px 40px; }
:is(.reduce, .no-js) .threshold-caption { position: relative; inset: auto; opacity: 1; transform: none; margin-bottom: 28px; }
:is(.reduce, .no-js) .threshold-scene { position: relative; inset: auto; aspect-ratio: 16 / 9; }
:is(.reduce, .no-js) .threshold-building, :is(.reduce, .no-js) .threshold-hint { display: none; }
:is(.reduce, .no-js) .threshold-portal { clip-path: none; opacity: 1; }
:is(.reduce, .no-js) .threshold-portal img { transform: none; object-fit: contain; }
:is(.reduce, .no-js) .rose-wrap { width: min(100%, 600px); }