/* How it works: scrolling sections, each with one scene. Owned by builder B. docs/ROUND2.md has the contract.

   Every scene is one frame in its own units: 1280 x 800 when wide, 360 x 660 when tall. --u is one of those units on this
   screen, and everything in a frame, type included, is sized in it. So what clears at one size clears at every size.
   Under JS without reduced motion a frame is pinned and scaled to fit the screen. Otherwise it is the width of the page, in normal flow. */

/* --pl is where the page's text column starts. --fx is that same place measured from the pinned frame's left edge, so a scene's
   words line up with the header, the intro and the footer. It stops at 110 units so the words never reach the drawing. */
.film{--fw:1280;--fh:800;--pl:max(var(--gutter),calc((100vw - var(--wrap)) / 2));--u:min(calc((100vw - 2 * var(--pl)) / 1280),1.5px);--fx:calc(64 * var(--u))}
@media (min-width:1100px) and (min-aspect-ratio:5/4){
  html.js:not(.rm) .film{--fx:min(calc(var(--pl) - (50vw - 640 * var(--u))),calc(110 * var(--u)))}
}
html.js:not(.rm) .film{--u:min(calc(100vw / 1280),calc(100svh / 800))}
@media not all and (min-width:1100px) and (min-aspect-ratio:5/4){
  .film{--fw:360;--fh:660}
  html.js:not(.rm) .film{--u:min(calc(100vw / 360),calc(100svh / 660))}
  .v-w{display:none}
}
@media (min-width:1100px) and (min-aspect-ratio:5/4){
  .v-t{display:none}
}
html.js:not(.rm) .still-only,html:not(.js) .js-only,html.rm .js-only{display:none}

/* The pin. */
html.js:not(.rm) #proof .film-run{height:500vh}
html.js:not(.rm) #ethereum .film-run{height:260vh}
html.js:not(.rm) #protection .film-run{height:520vh}
html.js:not(.rm) #limits .film-run{height:280vh}
html.js:not(.rm) .film-stage{position:sticky;top:0;height:100svh;overflow:hidden}
html.js:not(.rm) .film-box{position:absolute;left:calc(50% - var(--fw) / 2 * var(--u));top:calc(50% - var(--fh) / 2 * var(--u));width:calc(var(--fw) * var(--u));height:calc(var(--fh) * var(--u))}
html.js:not(.rm) .film-art{position:absolute;inset:0}
.f-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
html.js:not(.rm) .f-sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* Static: the frame is a picture in the page's flow, then its words. */
html:not(.js) .film-box,html.rm .film-box{position:relative;padding-inline:var(--pl)}
html:not(.js) .film-art,html.rm .film-art{position:relative;width:calc(var(--fw) * var(--u));height:calc(var(--fh) * var(--u));margin:clamp(24px,4vw,48px) 0 0 calc(50% - var(--fw) * var(--u) / 2)}
html:not(.js) .f-svg,html.rm .f-svg{overflow:hidden}
html:not(.js) [data-arrow-g],html.rm [data-arrow-g],html:not(.js) .pmark,html.rm .pmark{display:none}
html:not(.js) .v-t :is([data-stack],[data-bar]),html.rm .v-t :is([data-stack],[data-bar]){display:none}
html:not(.js) .film,html.rm .film{padding-block:clamp(48px,7vw,96px)}
html:not(.js) .f-beats,html.rm .f-beats{margin-top:clamp(24px,4vw,48px);display:grid;gap:12px;max-width:40em}
html:not(.js) .film-stage,html.rm .film-stage{overflow:clip}

/* The drawing language. */
.ln{fill:none;stroke:var(--mineral-deep);stroke-width:2}
.ln.on{stroke:var(--paper)}
.ln.dash{stroke-dasharray:4 7;opacity:.75}
.ln.lit{stroke:var(--paper);stroke-width:2.5}
.ln.lit-dim{stroke:var(--mineral);stroke-width:2.5}
.ln.strip{stroke:url(#how-dither);stroke-width:12}
.walk{fill:none;stroke:none}
.sight{fill:none;stroke:var(--mineral);stroke-width:2.5;stroke-dasharray:1 8;stroke-linecap:round}
.halo{fill:none;stroke:var(--ink);stroke-width:8}
.chk{stroke-width:4}
.sig{stroke-width:3.5}
.dot{fill:var(--ink);stroke:currentColor;stroke-width:2.5}
.pearl{image-rendering:pixelated}
.pmark{fill:var(--paper);overflow:visible}
.stone rect{fill:url(#how-dither-stone);stroke:var(--paper);stroke-width:2}
.gate path{fill:none;stroke:var(--paper);stroke-width:5}

.f-svg text{fill:currentColor;font-family:var(--font-body);font-size:16px}
.f-svg .tn{font-family:var(--font-display);font-size:26px;letter-spacing:-.015em}
.f-svg .tn.xl{font-size:36px;letter-spacing:-.02em}
.f-svg .tn.xxl{font-size:50px;letter-spacing:-.025em}
.f-svg .tn.port{font-size:24px}
.f-svg .tm{font-family:var(--font-mono);font-size:16px}
.f-svg .tm.big{font-size:19px}
.f-svg .tl{font-size:22px;font-weight:500}
.f-svg .c{font-family:var(--font-mono);font-size:.92em}
.f-svg .mid{text-anchor:middle}
.f-svg .end{text-anchor:end}
.film h2{font-size:calc(62 * var(--u));position:relative;z-index:2}
.film{color:var(--paper)}
.f-cap{color:var(--fg-2)}
html.js:not(.rm) .f-cap{font-size:calc(20 * var(--u));line-height:1.4}

/* Beats: stacked where they will show, one at a time. A real list, so a screen reader always gets all of them. */
html.js:not(.rm) .f-beats>li{position:absolute;z-index:2;opacity:0;transition:opacity 200ms var(--ease-out),filter 200ms var(--ease-out);filter:blur(4px)}
html.js:not(.rm) .f-beats>li.is-on{opacity:1;filter:none}

/* #how-intro. One full picture. An ordinary section: it just scrolls. */
#how-intro{position:relative;min-height:100svh;overflow:hidden;padding:calc(var(--header-clear) + clamp(24px,6svh,64px)) max(var(--gutter),calc((100vw - var(--wrap)) / 2)) 0}
#how-intro::after{content:'';position:absolute;inset:auto 0 0;height:calc(80 * var(--art-px));background:url('../art/edge-ink.webp') repeat-x 0 100% / calc(512 * var(--art-px)) 100%;image-rendering:pixelated;pointer-events:none}
.intro-plate{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:100% 100%;image-rendering:pixelated}
.intro-copy{position:relative;z-index:1}
#how-intro h1{font-size:min(var(--size-hero),11vw);line-height:1.02}
.intro-lead{max-width:30em;margin-top:clamp(16px,2vw,28px);font-size:clamp(18px,1.4vw,40px);line-height:1.45}
.intro-scroll{position:absolute;left:50%;bottom:clamp(40px,8svh,88px);z-index:2;display:grid;place-items:center;width:56px;height:56px;margin-left:-28px;border-radius:50%;background:var(--ink);box-shadow:inset 0 0 0 1px rgb(244 242 236 / .5);color:var(--paper);transition:background-color var(--hover-out) var(--ease-out)}
.intro-scroll svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.6}
@media (hover:hover) and (pointer:fine){
  .intro-scroll:hover{background:var(--ink-soft);transition-duration:var(--hover-in)}
}

/* #proof. */
html.js:not(.rm) .chain-canvas{position:absolute;left:0;top:0;image-rendering:pixelated}
html.js:not(.rm) .proof-copy{position:absolute;left:var(--fx);top:calc(64 * var(--u));width:calc(716 * var(--u) - var(--fx))}
html.js:not(.rm) .proof-copy .f-cap{margin-top:calc(14 * var(--u))}
.big-canvas{position:absolute;left:calc(736 * var(--u));top:calc(170 * var(--u));width:calc(248 * var(--u));height:calc(391 * var(--u));image-rendering:pixelated;transform-origin:0 0;visibility:hidden}
.big-still{position:absolute;left:calc(736 * var(--u));top:calc(170 * var(--u));width:calc(248 * var(--u));height:calc(391 * var(--u));image-rendering:pixelated;max-width:none}
.chain-still{position:absolute;left:0;top:calc(590 * var(--u));width:100%;height:auto;image-rendering:pixelated}

/* #attest. */
/* Only the sky: the brand plate's own stars, tiled. The words are on Ink, so no star lands on a letter. */
.attest-stars,html:not(.js) #attest .film-art,html.rm #attest .film-art{background:url('../art/stars-night.webp') 50% 0 / calc(840 * var(--art-px)) auto;image-rendering:pixelated}
html.js:not(.rm) .attest-stars{position:absolute;inset:0;opacity:0}
.attest-tee{fill:var(--ink)}
html:not(.js) #attest :is([data-fall],[data-drops],[data-checks]),html.rm #attest :is([data-fall],[data-drops],[data-checks]){display:none}
html.js:not(.rm) #attest h2,html.js:not(.rm) .attest-beats>li{background:var(--ink)}
html.js:not(.rm) #attest{opacity:0}
html.js:not(.rm) #attest h2{position:absolute;left:var(--fx);top:calc(196 * var(--u));font-size:calc(56 * var(--u))}
html.js:not(.rm) .attest-beats>li{left:var(--fx);top:calc(336 * var(--u));width:calc(350 * var(--u));font-size:calc(20 * var(--u));line-height:1.4}

/* #ethereum. */
html.js:not(.rm) #ethereum h2{position:absolute;left:var(--fx);top:calc(64 * var(--u))}
#ethereum .f-svg .tm{font-size:18px}
#ethereum .f-svg .ts{font-size:17px}

/* #protection. */
.map-world{position:relative;width:calc(var(--fw) * var(--u));height:calc(var(--fh) * var(--u))}
html.js:not(.rm) .map-world{position:absolute;left:0;top:0}
.map-wheel{position:absolute;left:calc(28 * var(--u));top:calc(445 * var(--u));width:calc(200 * var(--u));height:calc(200 * var(--u));border-radius:50%;overflow:hidden}
.map-wheel img{position:absolute;max-width:none;width:calc(2200 * 200 / 428 * var(--u));height:calc(1466 * 200 / 428 * var(--u));left:calc((214 - 1458) * 200 / 428 * var(--u));top:calc((214 - 768.5) * 200 / 428 * var(--u));image-rendering:pixelated}
.map-tower{position:absolute;left:calc(735 * var(--u));top:calc(-20 * var(--u));width:calc(320 * var(--u));height:calc(320 * var(--u));max-width:none}
.map-key{position:absolute;left:calc(350 * var(--u));top:calc(600 * var(--u));width:calc(210 * var(--u));height:calc(210 * var(--u));max-width:none}
.map-n{color:var(--mineral)}
.map-n.on{color:var(--paper)}
.map-n,.map-n text{transition:color 200ms var(--ease-out)}
html.js:not(.rm) .map-n{opacity:0;transition:opacity 300ms var(--ease-out),color 200ms var(--ease-out)}
html.js:not(.rm) .map-n.seen{opacity:1}
html.js:not(.rm) [data-rec]{display:none}
html.js:not(.rm) .map-tower,html.js:not(.rm) .map-key{opacity:0;transition:opacity 300ms var(--ease-out)}
.map-world svg{color:var(--mineral)}
[data-lab]{color:var(--paper)}
.pearl-g,.wrong{opacity:0}
html.js:not(.rm) .map-top{position:absolute;inset:0 0 auto;z-index:2}
html.js:not(.rm) .map-title{position:absolute;left:var(--fx);top:calc(64 * var(--u));width:calc(620 * var(--u))}
html.js:not(.rm) .map-title .f-cap{margin-top:calc(14 * var(--u))}
html.js:not(.rm) .map-lines>li{position:absolute;left:var(--fx);top:calc(100 * var(--u));width:calc(660 * var(--u));opacity:0;filter:blur(4px);transition:opacity 200ms var(--ease-out),filter 200ms var(--ease-out)}
html.js:not(.rm) .map-lines>li.is-on{opacity:1;filter:none}
.map-line{display:block;font-family:var(--font-display);font-optical-sizing:auto;letter-spacing:-.025em;line-height:1.02;font-size:clamp(28px,3.4vw,52px)}
html.js:not(.rm) .map-line{font-size:calc(52 * var(--u))}
html:not(.js) .map-top,html.rm .map-top{padding-bottom:16px}
html:not(.js) .map-box,html.rm .map-box{display:flex;flex-direction:column}
html:not(.js) .map-top,html.rm .map-top{order:-1}
html:not(.js) .map-lines,html.rm .map-lines{display:grid;gap:8px;margin-top:24px}
html:not(.js) .map-world,html.rm .map-world{margin-left:calc(50% - var(--fw) * var(--u) / 2)}

.map-end{padding-block:clamp(32px,5vw,64px) 0;padding-inline:var(--pl)}
html.js:not(.rm) .map-end{position:absolute;inset:auto 0 0;z-index:3;max-width:none;margin:0;padding:calc(36 * var(--u)) var(--pl) calc(56 * var(--u));background:var(--ink);transform:translateY(calc(100% + 90px))}
html.js:not(.rm) .map-end::before{content:'';position:absolute;inset-inline:0;bottom:calc(100% - 1px);height:calc(80 * var(--art-px));background:url('../art/edge-ink.webp') repeat-x 0 100% / calc(512 * var(--art-px)) calc(80 * var(--art-px));image-rendering:pixelated}
.map-end-big{font-family:var(--font-display);font-optical-sizing:auto;font-size:clamp(32px,4.4vw,64px);line-height:1.04;letter-spacing:-.025em}
.map-end-big .nw{white-space:nowrap}
.map-end-small{max-width:44em;margin-top:16px;color:var(--fg-2)}
html.js:not(.rm) .map-end-big{font-size:calc(54 * var(--u))}
html.js:not(.rm) .map-end-small{margin-top:calc(16 * var(--u));font-size:calc(20 * var(--u));line-height:1.45}

/* #limits. */
html.js:not(.rm) #limits h2{position:absolute;left:var(--fx);top:calc(64 * var(--u))}
html:not(.js) .lim-art,html.rm .lim-art{display:none}
.lim-beats h3{font-family:var(--font-display);font-optical-sizing:auto;font-weight:400;letter-spacing:-.02em;line-height:1.04;font-size:clamp(28px,3vw,44px)}
.lim-beats p{margin-top:8px;color:var(--fg-2)}
html.js:not(.rm) .lim-beats h3{font-size:calc(30 * var(--u))}
html.js:not(.rm) .lim-beats p{margin-top:calc(6 * var(--u));font-size:calc(18 * var(--u));line-height:1.4}
/* Four equal columns across the text column, 26 units apart. */
html.js:not(.rm) .lim-beats{--step:calc((1306 * var(--u) - 2 * var(--fx)) / 4)}
html.js:not(.rm) .lim-beats>li{top:calc(580 * var(--u));width:calc(var(--step) - 26 * var(--u))}
html.js:not(.rm) .lim-beats>li:nth-child(1){left:var(--fx)}
html.js:not(.rm) .lim-beats>li:nth-child(2){left:calc(var(--fx) + var(--step))}
html.js:not(.rm) .lim-beats>li:nth-child(3){left:calc(var(--fx) + 2 * var(--step))}
html.js:not(.rm) .lim-beats>li:nth-child(4){left:calc(var(--fx) + 3 * var(--step))}
html.js:not(.rm) .lim-cap{position:absolute;left:var(--fx);top:calc(206 * var(--u));width:calc(640 * var(--u))}
html:not(.js) .lim-beats>li,html.rm .lim-beats>li{display:grid;grid-template-columns:minmax(120px,240px) minmax(0,1fr);gap:clamp(16px,3vw,40px);align-items:center}
html:not(.js) .lim-beats,html.rm .lim-beats{gap:clamp(24px,4vw,48px);max-width:900px}
html:not(.js) #attest,html.rm #attest{margin-top:clamp(48px,7vw,96px)}
.lim-still{width:100%;height:auto}

/* #how-end. */
#how-end{padding-block:clamp(72px,10vw,160px)}
#how-end h2{font-size:var(--size-section)}
.how-end-lead{max-width:34em;margin-top:clamp(16px,2vw,28px);font-size:clamp(18px,1.4vw,40px);line-height:1.45;color:var(--fg-2)}
.how-end-go{display:flex;flex-wrap:wrap;align-items:center;gap:12px clamp(20px,3vw,32px);margin-top:clamp(24px,3vw,40px)}

/* Tall frames. */
@media not all and (min-width:1100px) and (min-aspect-ratio:5/4){
  .film{--u:min(calc(100vw / 360),1.6px);--fx:calc(16 * var(--u))}
  .film h2{font-size:calc(38 * var(--u))}
  html.js:not(.rm) .f-cap{font-size:calc(17 * var(--u));line-height:1.35}
  .f-svg text{font-size:16px}
  .f-svg .tn.xl{font-size:32px}
  .f-svg .tm{font-size:15px}
  .f-svg .tm.big{font-size:16px}
  .f-svg .tl{font-size:17px}


  html.js:not(.rm) .proof-copy{left:calc(16 * var(--u));top:calc(62 * var(--u));width:calc(322 * var(--u))}
  html.js:not(.rm) .proof-copy .f-cap{margin-top:calc(6 * var(--u))}
  .big-canvas,.big-still{left:calc(18 * var(--u));top:calc(240 * var(--u));width:calc(175 * var(--u));height:calc(276 * var(--u))}
  .chain-still{top:calc(524 * var(--u))}

  html.js:not(.rm) #attest h2{left:calc(16 * var(--u));top:calc(446 * var(--u));font-size:calc(38 * var(--u))}
  html.js:not(.rm) .attest-beats>li{left:calc(16 * var(--u));top:calc(536 * var(--u));width:calc(320 * var(--u));font-size:calc(18 * var(--u))}

  html.js:not(.rm) #ethereum h2{top:calc(52 * var(--u))}
  /* The still shows every label at once, so the mint moves down clear of the relayer's line. */
  html:not(.js) #ethereum .film-art,html.rm #ethereum .film-art{margin-bottom:calc(110 * var(--u))}
  html:not(.js) #ethereum .v-t,html.rm #ethereum .v-t{overflow:visible}
  html:not(.js) #ethereum .eth-mint,html.rm #ethereum .eth-mint{transform:translateY(110px)}
  html:not(.js) #ethereum .v-t [data-e="mint"],html.rm #ethereum .v-t [data-e="mint"]{display:none}
  html:not(.js) .lim-beats>li,html.rm .lim-beats>li{grid-template-columns:minmax(0,1fr)!important}
  html:not(.js) .lim-still,html.rm .lim-still{max-width:320px}
  #ethereum .f-svg .tm{font-size:15px}
  #ethereum .f-svg .ts{font-size:16px}

  .film-box.map-box{--fh:2340}
  html.js:not(.rm) .film-box.map-box{--fh:660;top:0;height:100%}
  .map-wheel{left:calc(32 * var(--u));top:calc(52 * var(--u));width:calc(156 * var(--u));height:calc(156 * var(--u))}
  .map-wheel img{width:calc(2200 * 156 / 428 * var(--u));height:calc(1466 * 156 / 428 * var(--u));left:calc((214 - 1458) * 156 / 428 * var(--u));top:calc((214 - 768.5) * 156 / 428 * var(--u))}
  .map-tower{left:calc(52 * var(--u));top:calc(1040 * var(--u));width:calc(260 * var(--u));height:calc(260 * var(--u))}
  .map-key{left:calc(100 * var(--u));top:calc(1400 * var(--u));width:calc(210 * var(--u));height:calc(210 * var(--u))}
  .map-world{height:calc(2340 * var(--u))}
  html.js:not(.rm) .map-top{height:calc(172 * var(--u));background:var(--ink)}
  html.js:not(.rm) .map-top::after{content:'';position:absolute;inset-inline:calc(-50vw);top:calc(100% - 1px);height:calc(80 * var(--art-px));background:url('../art/edge-ink.webp') repeat-x 0 100% / calc(512 * var(--art-px)) calc(80 * var(--art-px));image-rendering:pixelated;scale:1 -1}
    html.js:not(.rm) .map-title{left:calc(16 * var(--u));top:calc(104 * var(--u));width:calc(328 * var(--u));z-index:2}
  html.js:not(.rm) .map-title .f-cap{font-size:calc(17 * var(--u))}
  html.js:not(.rm) .map-lines>li{left:calc(16 * var(--u));top:calc(104 * var(--u));width:calc(328 * var(--u))}
  html.js:not(.rm) .map-line{font-size:calc(28 * var(--u))}
  html.js:not(.rm) .map-end{padding:calc(20 * var(--u)) max(calc(16 * var(--u)),calc(50% - 164 * var(--u))) calc(28 * var(--u))}
  html.js:not(.rm) .map-end-big{font-size:calc(34 * var(--u))}
  html.js:not(.rm) .map-end-small{font-size:calc(17 * var(--u));line-height:1.4}

  html.js:not(.rm) #limits h2{top:calc(60 * var(--u))}
  html.js:not(.rm) .lim-cap{left:calc(16 * var(--u));top:calc(150 * var(--u));width:calc(328 * var(--u))}
  html.js:not(.rm) .lim-beats h3{font-size:calc(30 * var(--u))}
  #ethereum .f-svg .tn.xl{font-size:27px}
  html.js:not(.rm) .lim-beats>li:nth-child(n){left:calc(16 * var(--u));top:calc(528 * var(--u));width:calc(328 * var(--u))}
  html.js:not(.rm) .lim-beats h3{font-size:calc(30 * var(--u))}
  html.js:not(.rm) .lim-beats p{font-size:calc(17 * var(--u))}
  html.js:not(.rm) .lim-svg{left:0;top:calc(-40 * var(--u));width:calc(1280 * var(--u));height:calc(800 * var(--u));right:auto;bottom:auto}
}

@media (min-width:2400px){
  .site-footer{font-size:clamp(16px,.62vw,22px)}
}

@media (prefers-reduced-motion:reduce){
  .map-n,.map-n text{transition:none}
}

/* Defined words. A dotted underline, and a definition beside the word on hover, focus or tap (terms.js). */
.f-svg [data-term]{pointer-events:auto;cursor:help;text-decoration:underline dotted;text-decoration-thickness:1.5px;text-underline-offset:.18em}
.f-svg [data-term]:hover,.f-svg [data-term].is-open{fill:var(--paper)}
.term{display:inline;padding:0;border:0;background:none;color:inherit;font:inherit;cursor:help;text-decoration:underline dotted;text-decoration-thickness:1.5px;text-underline-offset:.2em}
.term:focus-visible{outline:2px solid currentColor;outline-offset:2px;border-radius:2px}
.term-tip{position:fixed;left:0;top:0;z-index:80;width:max-content;max-width:min(320px,calc(100vw - 24px));padding:12px 14px;border-radius:10px;background:var(--paper);color:var(--ink);box-shadow:0 10px 30px rgb(0 0 0 / .35);font-size:15px;line-height:1.45;pointer-events:none}
.term-tip[hidden]{display:none}
.term-tip strong{display:block;margin-bottom:2px;font-weight:600}