/* Monolith: silence. A pale wall, one warm object, one short line at a time. The shortest page on the site. */
html[data-page=mono] .say{height:150svh}
html[data-page=mono] .onward{height:115svh}

/* The last scene: the finished piece on its stone. The picture is tall, so on a wide screen it stands at the right, the full height of the
   screen, printed on the wall: its own wall is the page's (portfolio-src/mono-masters/warm.mjs) and its left edge eases out, so nothing
   draws a rectangle and the stone is cut only by the edge of the screen. It holds still while the page passes; mono.js lets it come up on
   the empty wall and go back to it. */
.plinth{position:relative;height:185svh}
.plinth__pin{position:sticky;top:0;height:100svh;overflow:hidden}
.plinth__pic{position:absolute;right:0;top:0;height:100%;aspect-ratio:3712/4608;margin:0;background:#fbfbfb;isolation:isolate;-webkit-mask-image:linear-gradient(90deg,transparent,#000 16%);mask-image:linear-gradient(90deg,transparent,#000 16%)}
.plinth__pic img{display:block;width:100%;height:100%;object-fit:cover;mix-blend-mode:multiply}
/* A screen taller than the picture: it stands at the foot of the screen, a little wider than it, so the stone still runs off
   the bottom and the right and the form keeps a margin. Its top eases into the wall above. */
@media (max-aspect-ratio:4/5){
  .plinth__pic{top:auto;bottom:0;right:auto;left:-8.5%;height:auto;width:122%;-webkit-mask-image:linear-gradient(transparent,#000 16%);mask-image:linear-gradient(transparent,#000 16%)}
}
html.js .plinth__pic{opacity:0;transition:opacity .35s linear}
html.js .plinth.is-on .plinth__pic{opacity:1}
html:not(.js) .plinth{height:100svh}

/* The reel advances like a carriage and rests on one picture at a time, with the empty wall between them. */
.reel[data-rests]{--h:min(60svh,62vw);height:calc(var(--n)*45svh + 100svh)}
.reel[data-rests] .reel__track{gap:clamp(20px,8vw,150px)}
.reel[data-rests] .reel__item{height:var(--h)}
/* The hand comes up from the edge of the screen, so the sleeve never ends in the air. */
.reel[data-rests] figure:first-of-type{transform:translateY(calc(50svh - var(--h)/2))}
.reel[data-rests] .reel__item + .reel__item{margin-left:calc(30vw - clamp(20px,8vw,150px))}
/* The pin prints on the wall itself, so a picture's white is the wall and nothing draws a rectangle round the clay. */
.reel[data-rests] .reel__pin{mix-blend-mode:multiply}
.reel[data-rests] .reel__item{background:none;isolation:auto}
.reel[data-rests] .reel__item img{mix-blend-mode:normal}
/* The clay was shot on white. Lift that white clear of the paper, so only the form is printed. */
.reel[data-rests] figure:nth-of-type(-n+2) img{filter:grayscale(1) contrast(1.24) brightness(1.26)}
.reel[data-rests] figure:nth-of-type(-n+2):hover img,.reel[data-rests] figure:nth-of-type(-n+2):focus-within img,.reel[data-rests] figure:nth-of-type(-n+2).is-on img{filter:brightness(1.2)}
/* The bench is mid grey in black and white. Lifted, it stays a print on the wall and not a slab. */
.reel[data-rests] figure:nth-of-type(3) img{filter:grayscale(1) contrast(1.14) brightness(1.13)}
.reel[data-rests] figure:nth-of-type(3):hover img,.reel[data-rests] figure:nth-of-type(3):focus-within img,.reel[data-rests] figure:nth-of-type(3).is-on img{filter:none}
@media (max-width:720px){.reel[data-rests]{--h:min(50svh,66vw)}}
html:not(.js) .reel[data-rests]{height:auto}
html:not(.js) .reel[data-rests] .reel__pin{position:static;height:auto;overflow-x:auto;padding-block:clamp(40px,8svh,80px)}
html:not(.js) .reel[data-rests] figure:first-of-type{transform:none}

/* From stack to the hand: one pin. The wall is the ground, and the words keep to the corner the name left. */
.sig{position:relative;height:100svh}
html.motion .sig{height:350svh}
.sig__pin{position:sticky;top:0;height:100svh;overflow:hidden}
.sig .stage{z-index:1;cursor:grab;outline-offset:-8px}
.sig .stage.is-drag{cursor:grabbing}
.sig__beats{position:absolute;inset:0;z-index:3;margin:0;padding:0;list-style:none;pointer-events:none}
.sig__beats li{position:absolute;left:var(--gut);right:var(--gut);bottom:clamp(26px,5svh,52px);font-size:clamp(20px,2vw,34px);line-height:1.12;letter-spacing:-.024em;opacity:0;visibility:hidden}
.sig__beats li:first-child{opacity:1;visibility:visible}

/* The real scene waits behind the model and opens around it. */
.sig__real{position:absolute;inset:0;z-index:2;visibility:hidden;pointer-events:none;overflow:hidden;background:#fbfbfb}
.sig__real img{width:100%;height:100%;object-fit:cover;mix-blend-mode:multiply}
/* The tall picture's lower corner is wall in shadow, a mid grey. It gives way to the real wall along the line of the hand. */
@media (max-aspect-ratio:1/1){.sig__real{background:#fbfbfa;--corner:linear-gradient(52deg,transparent 6%,#000 24%);-webkit-mask-image:var(--corner);mask-image:var(--corner)}}
.sig__range{width:min(60vw,320px);accent-color:var(--w-ink)}
.sig__manual{position:absolute;left:var(--gut);bottom:clamp(26px,5svh,52px);z-index:4;display:none}
html:not(.motion) .sig__manual{display:block}
html:not(.motion) .sig__beats li{bottom:calc(clamp(26px,5svh,52px) + 44px)}

/* Static version: no script, or no WebGL. The drawings stand in for the model, in the wood's two tones and thin ink. */
.sig__poster{display:none}
.p-l{fill:#dcc6a6}
.p-d{fill:#7c5c47}
html:not(.js) .sig,html.no-gl .sig{height:auto}
html:not(.js) .sig__pin,html.no-gl .sig__pin{position:static;height:auto;overflow:visible;padding:clamp(80px,14svh,160px) var(--gut) 0;display:flex;flex-direction:column}
html:not(.js) .sig__beats,html.no-gl .sig__beats{position:static;display:grid;gap:.4em;order:1}
html:not(.js) .sig__beats li,html.no-gl .sig__beats li{position:static;opacity:1;visibility:visible}
html:not(.js) .sig .stage,html.no-gl .sig .stage,html:not(.js) .sig__manual,html.no-gl .sig__manual{display:none}
html:not(.js) .sig__poster,html.no-gl .sig__poster{display:grid;order:2;grid-template-columns:1fr 1fr 2fr;gap:var(--gut);align-items:end;margin-top:clamp(56px,10svh,120px)}
.sig__poster svg{width:100%;height:auto;display:block}
.sig__poster path{fill:none;stroke:var(--w-ink);stroke-width:.14}
.sig__poster [clip-path]{stroke:none}
html:not(.js) .sig__real,html.no-gl .sig__real{position:relative;inset:auto;order:3;visibility:visible;height:100svh;margin:clamp(56px,10svh,120px) calc(var(--gut)*-1) 0}

/* Three contacts: the real piece in the real hand, three ways, printed on the wall (the photographs were cut out on white).
   The hand above leaves with the page, whole, and mono.js keeps this passage back until its form has gone over the top, so the
   form is never on screen twice. The marks sit on the line where the hand meets the wood. */
.grip h2,.ct h2{margin:0;font-weight:400;font-size:clamp(28px,3.4vw,60px);line-height:1.08;letter-spacing:-.03em}
.grip__say p,.ct__say p{margin:clamp(12px,2.2svh,22px) 0 0;max-width:22em;color:var(--w-ink2);font-size:clamp(16px,1.3vw,21px);line-height:1.4;letter-spacing:-.008em}
.grip{position:relative;min-height:100svh;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:0 clamp(16px,2vw,32px);align-items:end;padding:clamp(84px,13svh,140px) var(--gut) clamp(60px,10svh,120px);opacity:var(--in,1)}
.grip__say{grid-column:1/-1;margin-bottom:clamp(30px,6svh,70px)}
.grip__fig{margin:0;position:relative}
.grip__fig picture,.grip__m{display:block;position:relative;background:var(--w-bg);isolation:isolate}
.grip__m picture{background:none;isolation:auto}
.grip__fig img{display:block;width:100%;height:auto;mix-blend-mode:multiply}
.grip__fig figcaption{margin-top:12px;color:var(--w-ink2);font-size:var(--cap);letter-spacing:-.005em}
.grip__fig--b{grid-column:1/4}
.grip__fig--a{grid-column:5/9}
.grip__fig--c{grid-column:10/-1}
.grip__marks{position:absolute;inset:0;margin:0;padding:0;list-style:none;pointer-events:none}
.mark{position:absolute;left:var(--x);top:var(--y);display:flex;align-items:center;gap:10px;height:0;font-size:var(--cap);line-height:1;letter-spacing:-.008em;color:var(--w-ink);white-space:nowrap}
.mark i{display:block;position:relative;width:calc(var(--l)*1cqw);height:1px;background:var(--w-ink)}
.mark i::before{content:"";position:absolute;top:-3px;width:7px;height:7px;border-radius:50%;background:var(--w-ink)}
.mark--r i::before{left:-3.5px}
.mark--l{flex-direction:row-reverse;transform:translateX(-100%)}
.mark--l i::before{right:-3.5px}
.grip__m{container-type:inline-size}
@media (max-width:900px){
  .grip{row-gap:clamp(36px,6svh,60px)}
  .grip__fig--a{grid-column:1/-1;grid-row:2}
  .grip__fig--b{grid-column:1/6;grid-row:3}
  .grip__fig--c{grid-column:7/-1;grid-row:3}
  .mark{font-size:15px}
  .mark i{width:calc(var(--l)*.55cqw)}
}

/* Fifteen outlines. The stack from the front is the slider: each board shows its own wood when it is picked. The plan holds every
   outline in thin ink, the picked one drawn twice: as it was sawn (dashed) and as the rasp left it. */
.ct{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:0 clamp(16px,2vw,32px);align-items:end;padding:clamp(90px,15svh,170px) var(--gut) clamp(70px,12svh,140px)}
.ct__say{grid-column:1/-1;margin-bottom:clamp(30px,6svh,70px)}
.ct svg{display:block;width:100%;height:auto;overflow:visible}
.ct svg path,.ct svg line,.ct svg rect{vector-effect:non-scaling-stroke}
.ct__elev{grid-column:1/4;grid-row:2/4;position:relative;touch-action:none;cursor:ns-resize;user-select:none;-webkit-user-select:none}
.ct__elev svg{max-height:min(56svh,500px)}
.ct__slab{fill:transparent;stroke:var(--w-ink2);stroke-width:1;transition:fill .22s,stroke .22s}
.ct__slab.is-on{stroke:var(--w-ink)}
.ct__slab.is-on.p-l{fill:#dcc6a6}
.ct__slab.is-on.p-d{fill:#7c5c47}
.ct__probe line{stroke:var(--w-ink);stroke-width:1.5}
.ct__elev:has(input:focus-visible){outline:1px solid var(--w-ink);outline-offset:8px}
.ct__plan{grid-column:5/-1;grid-row:2}
.ct__svg{max-height:min(58svh,560px)}
.ct__map path{fill:none;stroke:var(--w-line);stroke-width:1}
.ct__fill{stroke:none;fill-opacity:.32}
.ct__fill.p-l{fill:#dcc6a6}
.ct__fill.p-d{fill:#7c5c47}
.ct__now{fill:none;stroke:var(--w-ink);stroke-width:1.6}
.ct__cut{fill:none;stroke:var(--w-ink2);stroke-width:1;stroke-dasharray:3 4}
.ct__read{grid-column:5/-1;grid-row:3;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 clamp(16px,2vw,32px);margin:clamp(20px,4svh,44px) 0 0}
.ct__read>div{border-top:1px solid var(--w-line);padding-top:12px;display:flex;flex-direction:column-reverse;gap:6px;justify-content:flex-end}
.ct__read dd{margin:0;font-weight:300;font-size:clamp(22px,2.5vw,44px);letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums;white-space:nowrap}
.ct__read dt{color:var(--w-ink2);font-size:var(--cap);letter-spacing:-.005em}
.ct__key{grid-column:5/-1;display:flex;flex-wrap:wrap;gap:6px 26px;margin:clamp(16px,3svh,28px) 0 0;color:var(--w-ink2);font-size:var(--cap);letter-spacing:-.005em}
.ct__k{display:inline-block;width:20px;height:0;border-top:1.6px solid var(--w-ink);vertical-align:middle;margin-right:8px}
.ct__k--cut{border-top:1px dashed var(--w-ink2)}
@media (max-width:900px){
  .ct__plan{grid-column:1/-1;grid-row:2}
  .ct__elev{grid-column:1/6;grid-row:3/5;margin-top:clamp(24px,4svh,40px)}
  .ct__read{grid-column:7/-1;grid-row:3;grid-template-columns:1fr;gap:14px 0;align-self:start}
  .ct__read dd{font-size:22px}
  .ct__key{grid-column:1/-1;grid-row:5;flex-direction:column;gap:6px}
}

/* The hands again, at full width. The photograph stops above its line, which stays on the wall. */
.grow--person{height:170svh}
.grow--person .grow__win{clip-path:inset(calc(var(--i,1)*22%) calc(var(--i,1)*30%) max(calc(var(--i,1)*22%),150px))}
@media (max-aspect-ratio:1/1){.grow--person .grow__win{clip-path:inset(calc(var(--i,1)*14%) 0 max(calc(var(--i,1)*30%),150px) 0)}}

/* The hands scene: the form is in the hands a little left of the middle of the picture (0.34 to 0.52 of its width). On a portrait
   screen the crop stays on the hands. */
.grow--person{--at:41% 50%}
@media (max-aspect-ratio:6/5){.grow--person .grow__win img{object-position:var(--at)}}