/* Home: "Powers of Ten, by hand". A sticky stage pulls back from a stitch to a site.
   Without JS or with reduced motion it is a row of seven cards, one per scale. */

/* ---- fallback: the seven scales as a row of cards ---- */
.pt{position:relative}
.pt-name{padding-top:calc(var(--s8) + 40px);padding-bottom:var(--s6)}
.pt-kicker{margin-bottom:var(--s5)}
.pt-name .hero{max-width:9em}
.pt-name .hero em{color:var(--accent)}
.pt-lead{max-width:24em;margin-top:var(--s5)}
.pt-links{display:flex;flex-wrap:wrap;gap:var(--s3) var(--s5);margin-top:var(--s5)}
.pt-replay{background:none;border:0;border-bottom:1px solid currentColor;padding:0 0 3px;cursor:pointer;color:var(--ink-2)}
.pt-replay:hover{color:var(--accent)}
html:not(.js) .pt-replay,.pt:not(.pt-live) .pt-replay{display:none}
.pt-box{padding-inline:calc(var(--margin) + 6px)}
.pt-list{display:flex;gap:var(--gutter);overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:var(--s4);scrollbar-width:thin}
.pt-l{flex:0 0 min(78vw,400px);scroll-snap-align:start;display:grid;gap:var(--s3)}
.pt-fig{aspect-ratio:4 / 3;display:grid;place-items:center;background:var(--card-bg)}
.pt-fig picture{display:contents}
.pt-fig img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.pt-fig.drawing img{mix-blend-mode:var(--draw-blend)}
.pt-sc{font:300 var(--t-h3)/1 var(--serif);color:var(--accent);font-variant-numeric:lining-nums}
.pt-cap .h3{margin-top:4px}
.pt-cap .note{margin-top:4px;max-width:22em}
.pt-read,.pt-ladder,.pt-hint{display:none}
.pt-foot{padding-block:var(--s4) 0;max-width:none}

/* ---- live: the sticky stage ---- */
.pt-live .pt-track{height:auto}
.pt-live .pt-stage{position:relative;height:calc(100 * var(--svh));min-height:560px;overflow:hidden;
  --bw:min(62vw,calc(116 * var(--svh)));--bh:calc(var(--bw) * .7)}
.pt-live .pt-box{position:absolute;left:50%;top:calc(50% - var(--strip) / 2);width:var(--bw);height:var(--bh);padding:0;
  transform:translate(-50%,-50%) translate(var(--ox,0px),var(--oy,0px)) scale(var(--os,1));transform-origin:50% 50%}
.pt-live .pt-list{position:absolute;inset:0;display:block;overflow:visible;padding:0}
.pt-live .pt-l{position:absolute;inset:0;display:block}
.pt-live .pt-fig{position:absolute;left:0;top:0;aspect-ratio:auto;display:block;transform-origin:0 0;will-change:transform,opacity;
  background:var(--paper);isolation:isolate}
.pt-live .pt-fig img{width:100%;height:100%;max-width:none;max-height:none;object-fit:fill}
.pt-live .pt-fig.photo img{box-shadow:0 1px 1px rgba(36,32,28,.1),0 24px 50px -30px rgba(36,32,28,.55)}
:root[data-theme="blueprint"] .pt-live .pt-fig{background:var(--card-bg);box-shadow:var(--card-shadow)}
@media (prefers-color-scheme:dark){:root:not([data-theme="day"]) .pt-live .pt-fig{background:var(--card-bg);box-shadow:var(--card-shadow)}}
.pt-live .pt-l:nth-child(1){z-index:7}.pt-live .pt-l:nth-child(2){z-index:6}.pt-live .pt-l:nth-child(3){z-index:5}
.pt-live .pt-l:nth-child(4){z-index:4}.pt-live .pt-l:nth-child(5){z-index:3}.pt-live .pt-l:nth-child(6){z-index:2}.pt-live .pt-l:nth-child(7){z-index:1}

/* captions: one at a time, bottom left of the sheet */
/* captions are read, never pressed: on phones their box runs under Skip, and a tap there must reach Skip */
.pt-caps{position:absolute;left:calc(var(--margin) + 6px);bottom:calc(var(--strip) + var(--s5));width:min(250px,calc((100vw - var(--bw)) / 2 - var(--margin) - 30px));z-index:12;pointer-events:none}
.pt-caps .pt-cap{position:absolute;left:0;right:0;bottom:0;opacity:0;transform:translateY(10px);transition:opacity .5s var(--paper-ease),transform .7s var(--paper-ease)}
.pt-caps .pt-cap.on{opacity:1;transform:none}
.pt-caps .pt-sc{display:none}

/* the frames: how much of the world the last drawing held */
.pt-frame{position:absolute;left:0;top:0;border:1px solid var(--accent);z-index:9;pointer-events:none;opacity:0;transform-origin:0 0;will-change:transform,opacity}
.pt-frame span{position:absolute;left:-1px;bottom:100%;padding:3px 6px 2px;background:var(--accent);color:var(--paper);
  font:600 10px/1 var(--mono);font-stretch:87.5%;letter-spacing:.06em;white-space:nowrap}

/* readout: the scale, as big as a title */
.pt-live .pt-read{display:block;position:absolute;left:calc(var(--margin) + 6px);top:calc(50% - var(--strip) / 2);transform:translateY(-50%);z-index:12}
.pt-big{font:300 clamp(3rem,1.6rem + 4.6vw,7rem)/.9 var(--serif);letter-spacing:-.03em;color:var(--ink);font-variant-numeric:lining-nums;
  height:1em;overflow:hidden}
.pt-big span{display:block;transition:transform .55s var(--settle)}
.pt-big span.flip{transform:translateY(-30%);opacity:.0;transition:none}
.pt-bar{display:grid;grid-template-columns:1fr auto;gap:6px 0;margin-top:var(--s4);width:clamp(140px,11vw,170px)}
.pt-bar-g{grid-column:1 / -1;display:grid;grid-template-columns:repeat(5,1fr);height:7px;border:1px solid var(--ink)}
.pt-bar-g i:nth-child(odd){background:var(--ink)}
.pt-bar-l,.pt-bar-r{white-space:nowrap}
.pt-bar-r{justify-self:end}

/* ladder: the seven scales */
.pt-live .pt-ladder{display:grid;gap:10px;position:absolute;right:calc(var(--margin) + 10px);top:calc(50% - var(--strip) / 2);transform:translateY(-50%);z-index:12;text-align:right}
.pt-ladder li{color:var(--ink-2);opacity:.55;transition:opacity .4s,color .4s;font-size:11px;position:relative;padding-right:20px}
.pt-ladder li::after{content:"";position:absolute;right:0;top:50%;width:12px;border-top:1px solid currentColor}
.pt-ladder li.on{color:var(--accent);opacity:1}
.pt-ladder li.on::after{width:16px;border-top-width:2px}

/* hint and name */
.pt-live .pt-hint{display:block;position:absolute;left:50%;bottom:calc(var(--strip) + var(--s4));transform:translateX(-50%);z-index:12;color:var(--ink);
  background:none;border:0;border-bottom:1px solid currentColor;padding:4px 0 3px;cursor:pointer}
.pt-live .pt-hint:hover{color:var(--accent)}
.pt-live:not(.playing) .pt-hint{display:none}
.pt-live .pt-name{position:absolute;inset:0;z-index:14;display:flex;flex-direction:column;justify-content:center;
  padding-top:0;padding-bottom:var(--strip);pointer-events:none;opacity:0}
.pt-live .pt-name>*{max-width:min(46vw,640px)}
.pt-live .pt-name a{pointer-events:auto}
.pt-live.named .pt-name a{pointer-events:auto}
.pt-live:not(.named) .pt-name a,.pt-live:not(.named) .pt-name button{visibility:hidden}
.pt-live .pt-name button{pointer-events:auto}
.pt-live .pt-foot{position:relative;margin-top:-1px}

@media (max-width:899px){
  .pt-live .pt-stage{--bw:calc(100vw - 2 * var(--margin) - 12px);--bh:min(calc(var(--bw) * .9),calc(52 * var(--svh)))}
  .pt-live .pt-box{top:47%}
  .pt-live .pt-read{top:calc(var(--margin) * .45 + 70px);transform:none}
  .pt-big{font-size:clamp(2.6rem,10vw,4rem)}
  .pt-bar{margin-top:10px}
  .pt-live .pt-ladder{display:none}
  .pt-caps{width:auto;right:calc(var(--margin) + 6px);bottom:calc(42px + var(--s4))}
  .pt-live .pt-hint{bottom:calc(42px + var(--s4));left:auto;right:calc(var(--margin) + 6px);transform:none}
  .pt-live .pt-name{justify-content:flex-start;padding-top:calc(var(--margin) * .45 + 80px)}
  .pt-live .pt-name>*{max-width:none}
}


/* a phone on its side: the sheet stays tall enough for the settled name, but the drawing, its caption
   and Skip play inside the screen the phone actually has */
@media (orientation:landscape) and (max-height:500px){
  .pt-live .pt-stage{--bh:calc(100 * var(--svh) - var(--strip) - 87px);--bw:min(calc(var(--bh) / .7),calc(100vw - 380px))}
  .pt-live .pt-box{top:calc(50 * var(--svh) + 31.5px - var(--strip) / 2)}
  .pt-live .pt-read{top:calc(var(--margin) * .45 + 70px);transform:none}
  .pt-big{font-size:clamp(2.4rem,14 * var(--svh),4rem)}
  .pt-live .pt-ladder{display:none}
  .pt-caps{right:auto;width:calc((100vw - var(--bw)) / 2 - var(--margin) - 24px);bottom:calc(100% - 100 * var(--svh) + var(--strip) + var(--s4))}
  .pt-live .pt-hint{left:auto;right:calc(var(--margin) + 6px);transform:none;bottom:calc(100% - 100 * var(--svh) + var(--strip) + var(--s4))}
  .pt-live .pt-name{justify-content:flex-start;padding-top:calc(var(--margin) * .45 + 80px)}
  .pt-name .hero{font-size:min(var(--t-hero),19 * var(--svh))}
}

/* readouts keep a paper halo while drawings sweep beneath them */
.pt-live .pt-read,.pt-caps,.pt-live .pt-ladder{text-shadow:0 0 18px var(--paper),0 0 6px var(--paper),0 0 2px var(--paper)}
.pt-frame{border-width:1.5px}