/* Petal Side Table: morning on a pale wall. The warmest thing on the page is the cherry. */
html[data-page=petal]{--reelh:250svh;--door:55svh;--fly:530svh;--hold:65svh;--tail:25svh;--wood:#e6cbae}

/* The statement gives up a little of its length. */
html[data-page=petal] .say{height:170svh}

/* One angle: the proof of the sentence above it. A bevel gauge in thin ink, and one number. */
.ang{position:relative;height:230svh}
.ang__pin{position:sticky;top:0;height:100svh;overflow:hidden}
.ang__fig{position:absolute;right:var(--gut);top:clamp(64px,9svh,92px);bottom:clamp(26px,5svh,52px);margin:0;display:flex;justify-content:flex-end;align-items:flex-end;min-width:0}
.ang svg{width:auto;height:100%;max-width:100%;overflow:visible}
.ang path{fill:none;stroke:var(--w-ink);stroke-width:1;vector-effect:non-scaling-stroke}
.ang .a-floor{stroke:var(--w-ink2)}
.ang .a-dash{stroke:var(--w-ink2);stroke-dasharray:2 5}
.ang .a-far{stroke:var(--w-ink2);stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--rest,1))}
.ang .a-line{stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--rest,1))}
/* A dash measured along the path comes apart on a stroke that keeps its screen width, once the drawing scales up. These two scale, and carry the correction themselves. */
.ang .a-far,.ang .a-line{vector-effect:none;stroke-width:calc(1px/var(--sc,1))}
.ang .a-leg{fill:var(--wood)}
.ang .a-scale{opacity:var(--gauge,1)}
.ang .a-cut{stroke-width:2;opacity:0;transition:opacity .2s}
.ang .a-cut.is-on{opacity:1}
.ang__num{position:absolute;left:var(--gut);bottom:calc(clamp(26px,5svh,52px) + 1.9em*.34);margin:0 0 0 -.05em;font-weight:200;font-size:clamp(84px,10.5vw,200px);line-height:1;letter-spacing:-.05em;font-variant-numeric:tabular-nums;white-space:nowrap}
.ang__now{position:absolute;left:var(--gut);bottom:clamp(26px,5svh,52px);margin:0;color:var(--w-ink2);font-size:clamp(15px,1.18vw,19px);line-height:1.3;letter-spacing:-.008em}
.ang__cuts{display:none}
/* Stacked only on a tall screen: a phone on its side keeps the drawing at full height beside the number. */
@media (max-width:900px) and (max-aspect-ratio:1/1){
  .ang{--num:clamp(74px,21vw,130px)}
  .ang__fig{left:var(--gut);bottom:calc(clamp(26px,5svh,52px) + 44px + var(--num));justify-content:center}
  .ang svg{width:100%;height:auto;max-height:100%}
  .ang__num{bottom:calc(clamp(26px,5svh,52px) + 30px);font-size:var(--num)}
}
html:not(.motion) .ang{height:auto}
html:not(.motion) .ang__pin{position:relative;height:auto;display:grid;gap:clamp(20px,4svh,40px);padding:clamp(70px,10svh,96px) var(--gut)}
html:not(.motion) .ang__fig,html:not(.motion) .ang__num,html:not(.motion) .ang__now{position:static;margin:0}
html:not(.motion) .ang svg{height:min(76svh,88vw)}
html:not(.motion) .ang__now{display:none}
html:not(.motion) .ang__cuts{display:block;color:var(--w-ink2);font-size:var(--cap);line-height:1.5}

/* The reel and the flight share one pin: the window rides in on the end of the track, then opens. */
.reel{height:var(--reelh)}
.win{position:relative}
.win__pin,.win__sr{display:none}
html.motion:not(.nogl) .reel{z-index:2}
html.motion:not(.nogl) .reel__track::after{content:"";flex:none;width:calc(100vw - var(--gut))}
html.motion:not(.nogl) .win{z-index:1;height:calc(var(--reelh) + var(--door) + var(--fly) + var(--hold) + var(--tail));margin-top:calc(var(--reelh)*-1)}
html.motion:not(.nogl) .win__pin{display:block;position:sticky;top:0;height:100svh;overflow:hidden}
html.motion:not(.nogl) .win__sr{display:block}
html.motion:not(.nogl) .win__flat,html.motion:not(.nogl) .ten{display:none}

.win__rim,.win__stage{position:absolute;inset:0;visibility:hidden}
/* The wall has a thickness: a pale edge inside the cut, no more. */
.win__rim{background:color-mix(in srgb,var(--w-ink) 11%,var(--w-bg))}
.win__stage canvas{display:block;width:100%!important;height:100%!important}
.win.is-lost .win__stage{visibility:hidden!important}

@media (max-aspect-ratio:1/1){.last .grow__say small{color:var(--w-ink)}} /* on a phone it lands on the sunlit floor */
.win__head{position:absolute;left:var(--gut);bottom:clamp(26px,5svh,52px);margin:0;pointer-events:none;font-weight:400;font-size:clamp(28px,3vw,52px);line-height:1;letter-spacing:-.032em;white-space:nowrap;visibility:hidden;will-change:transform,opacity}

/* One measure at a time, plain text in the frame's own ink, standing beside the line it reads (petal.js places it). */
.win__dims{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.win__dims path{fill:none;stroke:var(--w-ink);stroke-width:1;opacity:0;vector-effect:non-scaling-stroke;transition:stroke .4s}
.win__dims path[data-axes]{stroke-dasharray:2 5}
.win__labs{position:absolute;inset:0;pointer-events:none;font-size:clamp(22px,2.3vw,40px);line-height:1.1;letter-spacing:-.024em;color:var(--w-ink)}
.win__labs li{position:absolute;left:0;top:0;white-space:nowrap;opacity:0;will-change:transform,opacity;transition:color .4s}

/* Joinery: the room has gone, the wall stays, and the table is pale glass with its joints in plain cherry. */
.win__ten{position:absolute;inset:0;pointer-events:none;color:var(--w-ink)}
.win__ten .ten__head{position:absolute;left:var(--gut);bottom:clamp(26px,5svh,52px);opacity:0;transition:opacity .45s}
.ten__head h2{font-weight:400;font-size:clamp(28px,3vw,52px);line-height:1;letter-spacing:-.032em}
.ten__head p{margin-top:.62em;max-width:26em;color:var(--w-ink2);font-size:clamp(15px,1.18vw,19px);line-height:1.3;letter-spacing:-.008em}
.win__ten.is-open .ten__head{opacity:1}
.win__ten.is-open:has([aria-pressed=true]) .ten__head{opacity:0}
.win__ten .ten__list{position:absolute;right:var(--gut);bottom:clamp(26px,5svh,52px);width:clamp(250px,22vw,400px)}
.win__ten .ten__sum,.win__ten li{opacity:0;transition:opacity .45s}
.win__ten.is-open .ten__sum,.win__ten.is-open li{opacity:1}
.win__ten.is-open button{pointer-events:auto}
.ten__sum{margin-bottom:clamp(12px,1.6vw,24px);font-size:var(--cap);line-height:1;transition:color .4s}
.ten__sum b{font-weight:200;font-size:clamp(44px,4.4vw,84px);letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.ten__sum span{margin-left:.2em;letter-spacing:-.008em}
.ten__list button{display:grid;grid-template-columns:1.8em 1fr;align-items:baseline;width:100%;text-align:left;padding:.56em 0 .6em;border-top:1px solid var(--w-line);color:var(--w-ink2);font-size:var(--cap);line-height:1.2;letter-spacing:-.008em;transition:color .3s}
.ten__list li:last-child button{border-bottom:1px solid var(--w-line)}
.ten__list button:hover,.ten__list button[aria-pressed=true]{color:var(--w-ink)}
.ten__list button .n{font-variant-numeric:tabular-nums}
@media (max-aspect-ratio:21/20){
  .win__ten{display:flex;flex-direction:column;justify-content:flex-end;gap:clamp(14px,2.4svh,24px);padding:0 var(--gut) clamp(20px,4svh,40px)}
  .win__ten .ten__head,.win__ten .ten__list{position:static;width:auto}
  .win__ten ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(14px,4vw,28px)}
  .ten__list button{grid-template-columns:1.2em 1fr;align-content:center;min-height:44px;padding:.3em 0 .34em}
  .win__ten li:nth-last-child(2) button{border-bottom:1px solid var(--w-line)}
  .win__ten .ten__sum{display:none}
}
@media (min-aspect-ratio:21/20) and (max-height:620px){
  .ten__head p{display:none}
  .ten__list button{padding:.3em 0 .34em}
  .ten__sum b{font-size:38px}
}

/* Without motion or WebGL the flight is a set of stills and the parts are pictures. */
.win__flat{padding:clamp(80px,14svh,160px) var(--gut) 0}
.win__flat h2{font-weight:400;font-size:clamp(28px,3.4vw,60px);line-height:1.08;letter-spacing:-.03em;margin-bottom:clamp(24px,5svh,52px)}
.win__stills{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2vw,32px)}
.win__stills img{width:100%;height:auto;aspect-ratio:8/5;object-fit:cover}
.win__stills figcaption{margin-top:12px;color:var(--w-ink2);font-size:var(--cap)}
.ten{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:0 clamp(16px,2vw,32px);padding:clamp(80px,14svh,160px) var(--gut);align-items:end}
.ten>.ten__head{grid-column:1/-1;margin-bottom:clamp(24px,5svh,56px)}
.ten__view{grid-column:1/8;position:relative;aspect-ratio:1}
/* The renders sit on the wall's own tone: the brightness takes it to pure white, so the multiply leaves no tile on the lit wall. */
.ten__view img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;filter:brightness(1.067);mix-blend-mode:multiply;opacity:0;transition:opacity .45s}
.ten__view img.is-on{opacity:1}
.ten>.ten__list{grid-column:9/-1}
@media (max-width:720px){
  .win__stills{grid-template-columns:1fr}
  .ten__view,.ten>.ten__list{grid-column:1/-1}
}

/* Scenes */
.grow__say small{display:block;margin-top:.55em;color:var(--w-ink2);font-size:clamp(15px,1.18vw,19px);line-height:1.3;letter-spacing:-.008em}

/* The finished table stands where the glass one stood. The glass clears to the wall first (petal.js, gone 0.09 screen into this
   section), then the photograph comes up with its table exactly there, from 0.1 to 0.2 screen (1 - --i runs .0824 to .2858 over
   that stretch), holds still until 0.22 screen (--k stays 1 while --i is over 2/3), and only then does the camera pull back. */
.stand{z-index:3;height:185svh;pointer-events:none}
.stand .grow__win{inset:0 auto;left:50%;width:min(100%,80svh);translate:-50% 0;clip-path:inset(calc(var(--i,1)*20%) calc(var(--i,1)*20%))}
html.motion:not(.nogl) .stand{margin-top:calc((100svh + var(--tail))*-1)}
html.motion:not(.nogl) .stand .grow__win{clip-path:none;overflow:hidden;opacity:calc((1 - var(--i,1) - .0824)*4.92)}
html.motion:not(.nogl) .stand .grow__win img{--k:min(1,calc(var(--i,1)*1.5));transform:translate(calc(var(--k)*var(--sx,0px)),calc(var(--k)*var(--sy,0px))) scale(calc(1 + var(--k)*var(--sz,.06)))}

.tea,.last{height:155svh}
/* The photograph opens to full width but stops above its line, which stays on the wall: never type on a picture. */
.tea .grow__win,.last .grow__win{clip-path:inset(calc(var(--i,1)*22%) calc(var(--i,1)*30%) max(calc(var(--i,1)*22%),150px))}
/* The picture is taller than the screen: the crop keeps the hand at its top. */
.tea .grow__win img{object-position:50% 22%}
@media (max-aspect-ratio:1/1){.tea .grow__win,.last .grow__win{clip-path:inset(calc(var(--i,1)*14%) 0 max(calc(var(--i,1)*30%),150px) 0)}} /* a phone: it opens across the whole width, so the table is never sliced */
/* The last scene opens on the table and pulls back until the room is around it. */
.last .grow__win img{transform-origin:88% 65%;transform:translate(calc(var(--i,1)*-38%),calc(var(--i,1)*-15%)) scale(calc(1 + var(--i,1)*.8))}
@media (max-aspect-ratio:1/1){
  .tea .grow__win img{object-position:60% 50%}
  /* A tall crop keeps only the far end of the room, the part of the wall the sun misses. The picture itself lifts that wall
     to the page (portfolio-src/petal-masters), so no filter is needed here, and the table keeps its colour. */
  .last .grow__win img{object-position:89% 50%;transform-origin:67% 62%;transform:translate(calc(var(--i,1)*-17%),calc(var(--i,1)*-6%)) scale(calc(1 + var(--i,1)*.35))}
}

/* In use: three pictures on the wall at slightly different speeds, each large, each with room around it. */
.rooms{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:0 clamp(16px,2vw,32px);padding:clamp(80px,13svh,150px) var(--gut) clamp(70px,11svh,130px)}
.rooms figure{margin:0}
.rooms img{display:block;width:100%;height:auto}
.rooms figcaption{margin-top:12px;color:var(--w-ink2);font-size:var(--cap);letter-spacing:-.005em}
.rooms__a{grid-column:1/6}
.rooms__b{grid-column:8/12;margin-top:24svh!important}
.rooms__c{grid-column:3/7;margin-top:12svh!important}
@media (max-width:900px){
  .rooms__a{grid-column:1/-3}
  .rooms__b{grid-column:4/-1;margin-top:10svh!important}
  .rooms__c{grid-column:1/-4;margin-top:10svh!important}
}


/* Details brought back. The tenons pulled apart, then window, foot and edge: pictures on the wall, their words on the wall beside them. */
.tn,.pd{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:0 clamp(16px,2vw,32px);padding:clamp(90px,15svh,170px) var(--gut) 0;align-items:end}
.tn h2,.pd h2{font-weight:400;font-size:clamp(28px,3.4vw,60px);line-height:1.08;letter-spacing:-.03em}
.tn__head{grid-column:1/-1;margin-bottom:clamp(8px,2svh,24px)}
.tn__head p{margin-top:.8em;max-width:30em;color:var(--w-ink2);font-size:clamp(15px,1.18vw,19px);line-height:1.3;letter-spacing:-.008em}
.tn__fig{grid-column:1/8;margin:0}
/* A studio render on near white: lifted to white and multiplied, it leaves only the wood and its shadow on the wall. The edges fade so no tile shows. */
.tn__fig img{display:block;width:100%;height:auto;filter:brightness(1.05);mix-blend-mode:multiply;-webkit-mask-image:linear-gradient(90deg,transparent,#000 3%,#000 88%,transparent),linear-gradient(transparent,#000 10%,#000 86%,transparent);mask-image:linear-gradient(90deg,transparent,#000 3%,#000 88%,transparent),linear-gradient(transparent,#000 10%,#000 86%,transparent);-webkit-mask-composite:source-in;mask-composite:intersect}
.tn__list{grid-column:9/-1;padding-bottom:clamp(20px,6svh,70px)}
.tn__kinds{margin:0}
.tn__kinds div{display:grid;grid-template-columns:1.8em 1fr;padding:.7em 0 .75em;border-top:1px solid var(--w-line);font-size:var(--cap);line-height:1.25;letter-spacing:-.008em}
.tn__kinds div:last-child{border-bottom:1px solid var(--w-line)}
.tn__kinds dt{display:contents;color:var(--w-ink)}
.tn__kinds dt span{font-variant-numeric:tabular-nums}
.tn__kinds dd{grid-column:2;margin:.25em 0 0;color:var(--w-ink2);font-variant-numeric:tabular-nums}
.tn__note{margin-top:14px;color:var(--w-ink2);font-size:var(--cap);letter-spacing:-.005em}
.pd h2{grid-column:1/-1;margin-bottom:clamp(24px,5svh,56px)}
.pd figure{margin:0}
.pd img{display:block;width:100%;height:auto}
.pd figcaption{margin-top:12px;color:var(--w-ink2);font-size:var(--cap);line-height:1.3;letter-spacing:-.005em}
.pd figcaption b{display:block;font-weight:400;color:var(--w-ink)}
.pd__a{grid-column:1/5}
.pd__b{grid-column:5/9}
.pd__c{grid-column:9/-1}
@media (max-width:900px){
  .tn__fig,.tn__list{grid-column:1/-1}
  .tn__list{margin-top:clamp(10px,2svh,24px);padding-bottom:0}
  .pd{row-gap:clamp(36px,7svh,64px)}
  .pd__a{grid-column:1/-3}
  .pd__b{grid-column:3/-1}
  .pd__c{grid-column:1/-2}
}

/* The making has a reel of its own: ten photographs, so it runs longer, and no window rides in on its end. */
.reel.built{height:calc(var(--n,10)*40svh + 100svh)}
html.motion:not(.nogl) .reel.built{z-index:auto}
html.motion:not(.nogl) .built .reel__track::after{content:none}

/* One angle, held still: the whole side view drawn at once, the angle and the five cuts it sets in the mark colour. */
.ang.ang--still{--mk:#c4512d;height:auto;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:end;gap:clamp(24px,4vw,64px);padding:clamp(72px,12svh,140px) var(--gut) clamp(48px,8svh,96px)}
.ang--still .ang__txt{align-self:end}
.ang--still .ang__num{position:static;margin:0 0 0 -.05em;color:var(--mk)}
.ang--still .ang__lead{margin-top:clamp(10px,1.6svh,18px);font-size:clamp(17px,1.5vw,25px);line-height:1.25;letter-spacing:-.012em}
.ang--still .ang__cuts{display:block;counter-reset:c;margin-top:clamp(18px,3svh,32px);font-size:var(--cap);line-height:1.3;color:var(--w-ink2)}
.ang--still .ang__cuts li{counter-increment:c;display:flex;align-items:center;gap:.75em;padding:.5em 0;border-top:1px solid var(--w-line)}
.ang--still .ang__cuts li:last-child{border-bottom:1px solid var(--w-line)}
.ang--still .ang__cuts li::before{content:counter(c);flex:none;display:grid;place-items:center;width:1.6em;height:1.6em;border:1px solid var(--mk);border-radius:50%;color:var(--mk);font-size:.86em;font-variant-numeric:tabular-nums}
.ang--still .ang__fig{position:static;margin:0;display:block}
.ang--still svg{width:100%;height:auto;max-height:84svh}
.ang--still .a-far,.ang--still .a-line{stroke-dasharray:none;stroke-dashoffset:0;vector-effect:non-scaling-stroke;stroke-width:1}
.ang--still .a-scale{opacity:.7}
.ang--still .a-mk{stroke:var(--mk)}
.ang--still .a-dash.a-mk{stroke-dasharray:4 4}
.ang--still .a-arc{stroke-width:1.6}
.ang--still .a-cut{opacity:1;stroke-width:2.4}
.ang--still .a-deg{fill:var(--mk);font-size:22px;letter-spacing:-.01em}
.ang--still .a-tag circle{fill:var(--w-bg);stroke:var(--mk);stroke-width:1;vector-effect:non-scaling-stroke}
.ang--still .a-tag text{fill:var(--mk);font-size:13px}
@media (max-width:760px){.ang.ang--still{grid-template-columns:minmax(0,1fr)}.ang--still .ang__fig{order:-1}}