/* =========================================================================================
   Our Approach — page-only composition (loaded after main.css). The page reads in chapters,
   alternating paper and dark like the home page:
     I     hero ........ an avenue of live oaks grows up around the statement on load (scene.js, intro)
     II    story ....... the portrait beside the founding story (dark)
     IIb   between ..... the chain of hands between a building and its machine, and ours (alt; main.css §11.19);
                         on wide screens the band holds while the stops arrive (scene.js, follow)
     III   letter ...... the letter, set in a handwriting face; engraved borders grow either side as you read (scene.js, follow)
     IV    criteria .... the 75+ plate, then three ticked columns, rows level (alt); the last, when we're the wrong
                         call, is an Oxblood plate
     V     values ...... three trees in white ink on dark plates (scene.js, follow)
     VI    run ......... six numbered steps
     VII   map ......... one metro (alt; main.css §11.10)
     VIII  mission ..... the mission statement in the growing Fort Worth scene, signed (scene.js, pin); its ground
                         runs into the closing band
     the closing band holds the walkthrough form (main.css §11.12, split)
   ========================================================================================= */

/* I · hero: the statement in the clearing at the top of the stage; the ground runs into the dark story band */
.about-hero{--ground:var(--night)}
/* portrait screens: the trees are sized by the width, so the stage is too (no empty band under the title) */
@media (min-width:641px) and (orientation:portrait){.about-hero{--stage:min(100svh,95vw)}}
@media (max-width:640px){.about-hero{--stage:min(100svh,155vw)}}
.about-hero .scene__layer--far{opacity:.2}
.about-hero .scene__layer--mid{opacity:.46}
.about-hero .scene__veil{
  --clear-w:27%;--clear-h:29%;--clear-y:33%;
  background:
    linear-gradient(180deg,var(--paper) 0,color-mix(in srgb,var(--paper) 93%,transparent) 6.5%,color-mix(in srgb,var(--paper) 50%,transparent) 12%,transparent 22%),
    radial-gradient(ellipse var(--clear-w) var(--clear-h) at 50% var(--clear-y),color-mix(in srgb,var(--paper) 97%,transparent) 0,color-mix(in srgb,var(--paper) 82%,transparent) 52%,transparent 100%);
}
.about-hero .scene__stage::after{content:'';position:absolute;left:0;right:0;bottom:0;z-index:2;height:max(12px,calc(var(--u) * 1.6));background:linear-gradient(180deg,transparent,var(--ground) 70%);pointer-events:none}
.about-hero+.section::before{display:none}
.about-hero__inner{position:absolute;inset:0;z-index:3;display:flex;justify-content:center;align-items:flex-start;padding-top:calc(var(--hdr) + clamp(1.4rem,7.4vh,5.4rem));pointer-events:none}
.about-hero__title{pointer-events:auto;text-align:center;font-size:clamp(3rem,min(6.6vw,11.5vh),6.6rem);line-height:1.02;letter-spacing:-.014em}
.about-hero__title .line-mask>span{white-space:nowrap}
@media (min-width:641px) and (max-aspect-ratio:3/2){.about-hero .scene__veil{--clear-w:36%;--clear-h:32%;--clear-y:30%}}
@media (max-width:640px){
  .about-hero__inner{padding-top:calc(var(--hdr) + clamp(2rem,8vh,4rem))}
  .about-hero__title{font-size:min(13.4vw,4.2rem)}   /* no floor: its longest line is 6.9em, so it keeps a margin down to the narrowest phone */
  .about-hero .scene__veil{--clear-w:70%;--clear-h:26%;--clear-y:27%}
}

/* II · story */
.story-section .story{grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr)}
.story-section .story__photo{max-width:440px}
@media (max-width:900px){.story-section .story{grid-template-columns:1fr}}

/* IIb · between: the two chains under the statement, the labels in the page's small capitals; the stops a size up
   from the component's, ours larger still */
.between{--p:1}
.between .section-head{margin-bottom:clamp(2.2rem,4vw,3.8rem)}
.chain__label{margin:0}
.between .chains{gap:clamp(2.6rem,6vh,4.6rem)}
.between .chain__stop{padding-top:2.6rem;font-size:clamp(1.15rem,1.75vw,1.85rem)}
.between .chain__stop::before{width:17px;height:17px}
.between .chain__stop::after{left:17px;top:calc(.15rem + 8px)}
.between .chain--ours .chain__stop{font-size:clamp(1.4rem,2.6vw,2.7rem);color:var(--fg)}
.between .chain--ours .chain__stop:last-child{white-space:nowrap}   /* "Your machine" on one line: nothing stands to its right */
@media (max-width:900px){
  .between .chain__stop{padding-top:0}
  .between .chain__stop::after{left:8px;top:calc(.24em + 17px)}
}
/* wide and tall enough: the band is 1.5 screens taller than the screen and its stage holds; scene.js runs --p from 0,
   when the band is still a third of a screen below the top, to 1, 1.3 screens into the hold, so the band never
   comes to rest empty: "You" and "A web form" are in by then. Each stop fades up over its own window
   [--s, --s + --w] and its line runs on to the next just after; "Ours" and its three stops come in over the last
   stretch. Without JS, with reduced motion and in print --p stays 1: an ordinary band with every stop showing. */
@media (min-width:900px) and (min-height:620px){
  .js .between.is-armed{height:calc(100vh + 150vh);height:calc(100svh + 150vh);padding-block:0}
  .js .between.is-armed .between__stage{position:sticky;top:0;height:100vh;height:100svh;display:grid;align-content:center}
  .js .between.is-armed .chain__stop{--t:clamp(0,(var(--p) - var(--s,0)) / var(--w,.06),1);opacity:var(--t);transform:translateY(calc((1 - var(--t)) * 14px));transition:none}
  .js .between.is-armed .chain__stop::after{transform-origin:0 50%;transform:scaleX(clamp(0,(var(--p) - var(--s,0) - .03) / .075,1))}
  .js .between.is-armed .chain--ours .chain__stop::after{transform:scaleX(clamp(0,(var(--p) - var(--s,0)) / .03,1))}
  .js .between.is-armed .chain--ours .chain__label{opacity:clamp(0,(var(--p) - .78) / .04,1);transform:none;transition:none}
}
/* elsewhere the stops arrive in turn by the clock, .16s apart, ours after the usual seven */
@media (max-width:899.98px),(max-height:619.98px){
  .js .between .chain__stop.reveal{transition-delay:calc(var(--i,0) * .16s)}
  .js .between .chain--ours .chain__stop.reveal{transition-delay:calc(1.2s + var(--i,0) * .16s)}
}
@media print{.between,.between .between__stage{height:auto!important;position:static!important}.between .chain__stop,.between .chain__label{opacity:1!important;transform:none!important}.between .chain__stop::after{transform:none!important}}

/* III · letter: the borders sit in the margins beside the card (none below 1000px, where there's no margin) */
.letter-section{position:relative;overflow:hidden;padding-block:clamp(4.5rem,9vw,9rem)}
.letter-section>.container{position:relative}
.letter-beds{
  --u:min(1vh,12.5px,calc((100vw - 856px) / 50));--gc:16s;
  position:absolute;inset:0;pointer-events:none;display:none;
  -webkit-mask-image:linear-gradient(to top,transparent 0,#000 34px);mask-image:linear-gradient(to top,transparent 0,#000 34px);
}
.letter-bed{position:absolute;top:0;bottom:0;width:calc((100% - 780px) / 2 - 28px)}
.letter-bed--l{left:0}
.letter-bed--r{right:0}
.letter-beds .piece__img{--sd:7s;--amp:.7;--gust:1.6}
.letter-beds .piece.is-ink .piece__img{opacity:.5}
.letter-beds .piece--rise .piece__img{--sd:3.4s;--amp:2}
@media (min-width:1000px){.letter-beds{display:block}}
.letter-card__salute{margin-bottom:.8em}

/* IV · criteria: the plate leads, the columns follow. The third column is an Oxblood plate: its padding is pulled
   back up by the same measure, so its head and rows stay level with the other two */
.criteria .fig-plate{margin-bottom:clamp(2.8rem,5vw,4.8rem)}
.criteria .columns{column-gap:clamp(1.4rem,2.6vw,3rem)}
.criteria__no{--pad:clamp(1.2rem,2vw,2rem);margin-top:calc(var(--pad) * -1);padding:var(--pad) var(--pad) clamp(.6rem,1vw,1rem)}
.criteria__no .column__item:last-child::after{display:none}
@media (max-width:899.98px){.criteria__no{margin-top:0}}

/* V · values: each tree sized off its plate (1% of the plate's height) */
.plate__art{--u:1.2cqw}

/* VIII · mission: the statement on open sky in the growing Fort Worth scene, the signature under it (scene.js, pin).
   The band ends in the next band's color (Oxblood: the closing band), so the ground runs into it */
.mission{--ground:var(--oxblood)}
.mission .scene__veil{--clear-w:36%;--clear-h:32%;--clear-y:30%}
/* the wind moves the meadow and the front grasses only: the trees and the back stems stand still here, which
   keeps the main thread quiet while the band rests on screen */
.mission .scene__layer:is(.scene__layer--mid,.scene__layer--near,.scene__layer--back) .piece__img{animation:none}
/* the skyline stands tall on the horizon between the oaks: the towers scaled by --sk and drawn in toward the
   centre, so they read as one cluster. It is large on purpose (the owner's call, Oct 6: bigger, and it may run
   behind the words): on most screens the tallest towers rise behind the signature and the foot of the statement.
   The layer is faint (30%) and the veil clears the paper behind the words, so the type stays plain to read.
   Tall portrait screens (narrower than 4:5) show it at its natural size. On phones the band is as tall as the
   browser leaves it (svh): under 660px the swallows keep out of the words' way by staying out, and on a screen
   under 500px tall (a phone on its side) the words fill the band, so the city stays out too. */
@media (min-width:641px) and (min-aspect-ratio:4/5){
  .mission .scene__layer--skyline{--sk:.9}
  .mission .scene__layer--skyline .piece{height:calc(var(--h) * var(--u) * var(--sk));left:calc((50 + (var(--x) - 50) * var(--sk)) * 1%)}
}
@media (min-width:641px) and (min-aspect-ratio:4/5) and (max-height:700px){.mission .scene__layer--skyline{--sk:.78}}
@media (max-width:640px){
  .mission .scene__layer--skyline{--sk:1.2}
  .mission .scene__layer--skyline .piece{height:calc(var(--hs,var(--h)) * var(--u) * var(--sk));left:calc((50 + (var(--xs,var(--x)) - 50) * var(--sk)) * 1%)}
}
@media (max-width:640px) and (max-height:660px){.mission .scene__layer--skyline{--sk:1}.mission .drift--bird{display:none}}
@media (max-width:340px) and (max-height:739px){.mission .drift--bird{display:none}}
@media (max-height:500px){.mission :is(.scene__layer--skyline,.drift--bird){display:none}}
.mission .scene__stage::after{
  content:'';position:absolute;left:0;right:0;bottom:0;z-index:2;height:max(12px,calc(var(--u) * 1.6));
  background:linear-gradient(180deg,transparent,var(--ground) 70%);pointer-events:none;
}
.mission+.section::before{display:none}
.mission__inner{position:relative;z-index:3;padding-top:clamp(5rem,14vh,9.5rem);display:flex;flex-direction:column;align-items:center}
.mission__words{max-width:31ch;margin-inline:auto;text-align:center;font-size:clamp(1.55rem,min(3vw,5vh),3rem);line-height:1.24}
.mission__words>span,.mission__words>em{display:block;text-wrap:balance}
.mission .signature{margin-top:clamp(1.2rem,2.4vw,2.2rem)}
/* the signature writes itself on, left to right (main.css §11.13), and its caption follows */
.js .mission .signature.reveal figcaption{opacity:0;transition:opacity .9s var(--ease) 1.6s}
.js .mission .signature.reveal.is-in figcaption{opacity:1}
/* 4:3-ish screens: the trees stand closer to the words, so the clearing opens wider */
@media (min-width:641px) and (max-aspect-ratio:3/2){.mission .scene__veil{--clear-w:46%;--clear-h:36%}}
@media (min-width:641px) and (max-width:1100px) and (orientation:portrait){.mission__words{font-size:clamp(1.6rem,4.3vw,2.6rem)}}
/* the narrowest phones: a size down, so the statement and the signature end above the oaks */
@media (max-width:340px){.mission__words{font-size:1.36rem}}