/* Avian Habitat: a quiet wall, the house, and the sky it stands in. The sky's blue and the wood are the only colour,
   and they stay in the photographs. */

/* The idea: words on the left, the house against the sky on the right. */
.sea{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:0 clamp(16px,2vw,32px);align-items:center;padding:clamp(56px,10svh,130px) var(--gut) clamp(72px,13svh,170px)}
.sea__say{grid-column:1/7}
.sea__say .big{max-width:12em}
.sea__say p{margin-top:1.15em;max-width:29em;color:var(--w-ink2);font-size:clamp(16px,1.32vw,21px);line-height:1.46;letter-spacing:-.006em}
.sea__say p:first-of-type{margin-top:clamp(26px,4.6svh,52px)}
.sea__pic{grid-column:8/-1;margin:0}
.sea__pic img{width:100%;height:auto}
@media (max-width:900px){.sea__say,.sea__pic{grid-column:1/-1}.sea__pic{margin-top:clamp(40px,7svh,72px)}}

/* The tenant, measured on one inch rule. */
.tenant{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:0 clamp(16px,2vw,32px);padding:clamp(40px,8svh,100px) var(--gut) clamp(80px,14svh,170px);align-items:center}
.tenant__bird{grid-column:1/6;margin:0}
.tenant__bird img{width:100%;height:auto}
.tenant__facts{grid-column:7/-1}
.rule{display:grid;gap:clamp(13px,2.2svh,24px);margin:clamp(28px,5svh,56px) 0 0}
.rule__r{position:relative;display:flex;justify-content:space-between;align-items:baseline;gap:1em;padding-bottom:13px}
.rule__r dt{color:var(--w-ink2);font-size:clamp(15px,1.18vw,19px);letter-spacing:-.008em}
.rule__r dd{margin:0;font-weight:300;font-size:clamp(22px,2.1vw,36px);line-height:1;letter-spacing:-.028em;white-space:nowrap}
.rule__r i{position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--w-line)}
.rule__r i::after{content:"";position:absolute;top:-1px;height:3px;left:calc(var(--a)*100%);width:max(3px,calc((var(--b) - var(--a))*100%));background:var(--w-ink)}
.rule__r--door dd{font-weight:400}
.tenant__note{margin-top:clamp(26px,4.6svh,48px);max-width:28em;color:var(--w-ink2);font-size:clamp(15px,1.18vw,19px);line-height:1.45}
@media (max-width:900px){.tenant__bird,.tenant__facts{grid-column:1/-1}.tenant__facts{margin-top:48px}}

/* The house itself, live: it turns, heats, cools and opens with the scroll, and can be turned by hand. */
.live{position:relative;height:640svh}
.live__pin{position:sticky;top:0;height:100svh;overflow:hidden}
.live__stage{position:absolute;inset:0;cursor:grab;touch-action:pan-y}
.live__stage:active{cursor:grabbing}
.live__stage canvas{opacity:0;transition:opacity .6s linear}
.live__stage.is-ready canvas{opacity:1}
.live__poster{display:none;margin:0}
.live__steps{position:absolute;left:var(--gut);bottom:clamp(26px,6svh,60px);width:min(31em,calc(100vw - 2*var(--gut)));min-height:8em;z-index:2;margin:0;padding:0;pointer-events:none}
.live__steps li{position:absolute;left:0;bottom:0;right:0;opacity:0;transition:opacity .3s linear}
.live__steps li.is-on{opacity:1;transition-delay:.12s}
.live__steps h3{margin:0;font-weight:400;font-size:clamp(26px,2.9vw,50px);line-height:1.08;letter-spacing:-.03em;max-width:11em}
.live__steps p{margin-top:.65em;color:var(--w-ink2);font-size:clamp(15px,1.25vw,20px);line-height:1.42;max-width:25em}
.live__heat{position:absolute;right:var(--gut);bottom:clamp(30px,6.6svh,66px);z-index:2;display:flex;align-items:center;gap:14px;color:var(--w-ink2);font-size:var(--cap);opacity:0;transition:opacity .3s linear}
.live__heat.is-on{opacity:1}
.live__heat i{position:relative;display:block;width:clamp(110px,15vw,230px);height:1px;background:var(--w-line)}
.live__heat b{position:absolute;left:calc(var(--h,0)*100%);top:-5px;width:11px;height:11px;margin-left:-5.5px;border-radius:50%;background:var(--w-ink)}
@media (max-width:720px){
  .live__steps{bottom:clamp(64px,11svh,96px)}
  .live__heat{left:var(--gut);right:auto;bottom:clamp(22px,4svh,36px)}
}
/* Without WebGL (or with motion reduced) the six lines stand as a list beside a still of the front. */
html.no-gl .live,.live.is-still{height:auto}
html.no-gl .live__pin,.live.is-still .live__pin{position:relative;height:auto;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:0 clamp(16px,2vw,32px);align-items:center;padding:clamp(60px,10svh,120px) var(--gut)}
html.no-gl .live__stage,.live.is-still .live__stage,html.no-gl .live__heat,.live.is-still .live__heat{display:none}
html.no-gl .live__poster,.live.is-still .live__poster{display:block;grid-column:1/6}
html.no-gl .live__poster img,.live.is-still .live__poster img{width:100%;height:auto;mix-blend-mode:multiply}
html.no-gl .live__steps,.live.is-still .live__steps{position:static;grid-column:7/-1;width:auto;display:grid;gap:clamp(22px,4svh,40px)}
html.no-gl .live__steps li,.live.is-still .live__steps li{position:static;opacity:1}
html.no-gl .live__steps h3,.live.is-still .live__steps h3{font-size:clamp(22px,2vw,34px)}
@media (max-width:900px){html.no-gl .live__poster,.live.is-still .live__poster,html.no-gl .live__steps,.live.is-still .live__steps{grid-column:1/-1}html.no-gl .live__steps,.live.is-still .live__steps{margin-top:40px}}

/* Three temperatures, one frame: the same photograph three times. */
.heat{padding:clamp(80px,14svh,180px) var(--gut) clamp(60px,10svh,130px)}
.heat .big{max-width:15em}
.heat__row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 clamp(16px,3vw,56px);margin-top:clamp(40px,8svh,96px)}
.heat__row figure{margin:0;background:var(--w-bg);isolation:isolate}
.heat__row img{display:block;width:100%;height:auto;mix-blend-mode:multiply}
.heat__row figcaption{margin-top:.2em;padding-left:9%;font-size:clamp(18px,1.5vw,26px);line-height:1;letter-spacing:-.02em;color:var(--w-ink)}
@media (max-width:720px){.heat__row{grid-template-columns:1fr;gap:clamp(36px,6svh,56px) 0}.heat__row figure{width:80%}.heat__row figure:nth-child(2){justify-self:end}}

/* The drawing sheet: front, both walls and top in third-angle projection, at one scale. The views are orthographic renders
   of the model (src/site/nest-sheet.mjs); dimensions, hidden lines and part numbers are drawn over them in the same
   millimetres. --u (assets/js/nest.js) is the type size in the drawing's own units, so figures stay 15 px or more on
   screen whatever size a view is shown at. */
.plan{padding:clamp(70px,12svh,150px) var(--gut) clamp(90px,15svh,190px)}
.sheet{display:grid;grid-template-columns:290fr 380fr 290fr;align-items:end;border:1px solid var(--w-line);padding:clamp(18px,2.2vw,40px) clamp(14px,1.6vw,30px) clamp(14px,1.8vw,30px)}
.sheet__v{margin:0;min-width:0}
.sheet__v svg{display:block;width:100%;height:auto;overflow:visible;fill:none;stroke:var(--w-ink);stroke-width:.55;stroke-linecap:round;stroke-linejoin:round;--u:12}
.sheet__v text{fill:var(--w-ink2);stroke:none;font-family:var(--sans);font-size:calc(var(--u)*1px);letter-spacing:-.01em}
.sheet__v figcaption{margin-top:.2em;text-align:center;color:var(--w-ink);font-size:clamp(17px,1.35vw,22px);letter-spacing:-.018em}
.sheet__v--top{grid-area:1/2}
.sheet__v--tiles{grid-area:2/1}
.sheet__v--front{grid-area:2/2}
.sheet__v--blocks{grid-area:2/3}
.sheet__dim path{stroke-opacity:.55}
.sheet__dim.is-own path{stroke-opacity:.9}
.sheet__dim.is-own text{fill:var(--w-ink)}
.sheet__hid{stroke-dasharray:3.2 2.4;stroke-opacity:.6}
.sheet__cl{stroke-dasharray:9 2 1.4 2;stroke-opacity:.5;stroke-width:.4}
.sheet__bar path{stroke-opacity:.8}
.sheet__bar .sheet__bar-f{fill:var(--w-ink);stroke:none}
.sheet__b{cursor:pointer;outline:none;transition:opacity .3s linear}
.sheet__b path{stroke-opacity:.7}
.sheet__b .sheet__dot{fill:var(--w-ink);stroke:none}
.sheet__b .sheet__ring{r:calc(var(--u)*.86px);fill:var(--w-bg);stroke:var(--w-ink);stroke-width:.6;transition:fill .3s,stroke-width .3s}
.sheet__b text{fill:var(--w-ink);transition:fill .3s}
.sheet__b.is-on .sheet__ring,.sheet__b:focus-visible .sheet__ring{fill:var(--w-ink)}
.sheet__b.is-on text,.sheet__b:focus-visible text{fill:var(--w-bg)}
.sheet[data-on] .sheet__b:not(.is-on){opacity:.32}
.sheet__list{grid-area:1/1;align-self:start;margin:0;padding:0 clamp(10px,1.4vw,26px) 0 0;list-style:none;display:grid;gap:clamp(7px,1.1svh,12px);font-size:clamp(15px,1.02vw,17px);line-height:1.34;color:var(--w-ink2)}
.sheet__list li{display:grid;grid-template-columns:2em 1fr;gap:0 .5em;align-items:start;outline:none;cursor:default;transition:opacity .3s linear}
.sheet__list b{display:grid;place-items:center;width:1.56em;height:1.56em;border:1px solid var(--w-ink);border-radius:50%;font-weight:400;font-size:1em;line-height:1;color:var(--w-ink);transition:background .3s,color .3s}
.sheet__list strong{font-weight:400;color:var(--w-ink)}
.sheet__list li.is-on b,.sheet__list li:focus-visible b{background:var(--w-ink);color:var(--w-bg)}
.sheet[data-on] .sheet__list li:not(.is-on){opacity:.4}
.sheet__title{grid-area:1/3;align-self:start;justify-self:end;max-width:17em;padding-left:clamp(10px,1.4vw,26px);font-size:clamp(15px,1.02vw,17px);line-height:1.36;color:var(--w-ink2);text-align:right}
.sheet__title h2{margin:0 0 .15em;font-weight:400;font-size:clamp(22px,2.1vw,36px);line-height:1.08;letter-spacing:-.028em;color:var(--w-ink)}
.sheet__title p{margin:0}
.sheet__title p + p{margin-top:.6em}
@media (max-width:1100px){
  .sheet{grid-template-columns:1fr 1fr;row-gap:clamp(28px,5svh,48px)}
  .sheet__title{grid-area:1/1/2/3;justify-self:start;text-align:left;padding:0;max-width:none}
  .sheet__v--front{grid-area:2/1/3/3;width:min(100%,640px);justify-self:center}
  .sheet__v--tiles{grid-area:3/1}
  .sheet__v--blocks{grid-area:3/2}
  .sheet__v--top{grid-area:4/1/5/3;width:min(100%,640px);justify-self:center}
  .sheet__list{grid-area:5/1/6/3;padding:0;grid-template-columns:1fr 1fr;gap:10px clamp(16px,3vw,32px)}
}
@media (max-width:640px){
  .plan{padding-inline:calc(var(--gut)*.5)}
  .sheet{grid-template-columns:1fr;padding:18px 10px}
  .sheet__title,.sheet__v--front,.sheet__v--tiles,.sheet__v--blocks,.sheet__v--top,.sheet__list{grid-area:auto}
  .sheet__list{grid-template-columns:1fr;order:6}
  .sheet__title{order:1}.sheet__v--front{order:2}.sheet__v--tiles{order:3}.sheet__v--blocks{order:4}.sheet__v--top{order:5}
  .sheet{row-gap:28px}
}

/* In use: four pictures at slightly different speeds, with room around them. */
.use{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:0 clamp(16px,2vw,32px);padding:clamp(90px,15svh,190px) var(--gut) clamp(120px,18svh,230px)}
.use figure{margin:0}
.use img{display:block;width:100%;height:auto}
.use figcaption{margin-top:12px;color:var(--w-ink2);font-size:var(--cap)}
.use__a{grid-column:1/6}
.use__b{grid-column:7/-1;margin-top:22svh!important}
.use__c{grid-column:2/8;margin-top:16svh!important}
.use__d{grid-column:9/-1;margin-top:34svh!important}
@media (max-width:900px){.use__a{grid-column:1/10}.use__b{grid-column:3/-1;margin-top:16svh!important}.use__c{grid-column:1/11;margin-top:16svh!important}.use__d{grid-column:4/-1;margin-top:16svh!important}}

/* The closing meadow. On a portrait screen the cover crop keeps a quarter of the picture's width: --at puts that window
   on the bird, the house and the pole. In the v7 render the house spans 0.59 to 0.79 of the width and the bird starts at
   0.49. Retune it if nest/meadow is re-rendered. */
.grow--pole{--at:66% 50%}
@media (max-aspect-ratio:6/5){.grow--pole .grow__win img{object-position:var(--at)}}
@media (max-aspect-ratio:1/1){.grow--pole .grow__win{clip-path:inset(calc(var(--i,1)*12%) 0 calc(var(--i,1)*33%) 0)}}
@media (min-aspect-ratio:6/5){.grow--pole .grow__win{clip-path:inset(calc(var(--i,1)*8%) calc(var(--i,1)*12%) calc(var(--i,1)*26%) calc(var(--i,1)*40%))}}

/* The afternoon scene: on a portrait screen the crop stays on the house (0.80 to 0.91 of the width in the v7 render); the small figure is far left. */
.grow--read{--at:86% 50%}
@media (max-aspect-ratio:6/5){.grow--read .grow__win img{object-position:var(--at)}}