/* Partner invite page (Concept A, approved 2026-10-06). Parts copied from the live site:
   button + input = the site's form controls; number columns + lock flash = MemberWorld;
   aurora city = the members page (access-bg far/mid); display face = Supreme 700. */
:root{
  color-scheme:dark;
  --bg:#080810;--ink:#eff4f1;--mint:#c2eee0;--mint-hover:#e5fff6;--mint-ink:#10251e;
  --display:"Supreme","Helvetica Neue",Arial,system-ui,sans-serif;
  --label:"Bahnschrift","Arial Narrow",system-ui,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
  --end-pos-m:50% 50%;--end-pos-d:50% 40%;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--bg);color:var(--ink);font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block}
h1,p,figure{margin:0}
[hidden]{display:none!important}
.enter{animation:enter .5s var(--ease) both}
@keyframes enter{from{transform:translateY(14px)}to{transform:none}}

.a{position:relative;min-height:100svh;overflow:hidden;isolation:isolate}

/* backdrop 1: the partner's own takeover END frame */
.city{position:absolute;inset:0;z-index:-3;overflow:hidden}
.city img{width:100%;height:100%;object-fit:cover;object-position:var(--end-pos-m);animation:drift 22s ease-in-out infinite alternate;transform-origin:50% 40%}
@keyframes drift{from{transform:scale(1.06)}to{transform:scale(1)}}
/* backdrop 2: the members-page aurora city, under their own public art or alone */
.world{position:absolute;inset:0;z-index:-4;overflow:hidden;background:#08090d}
.world .far{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:58% 70%}
.world .veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,9,13,.6) 0%,rgba(8,9,13,.2) 26%,rgba(8,9,13,.06) 48%,rgba(8,9,13,.2) 72%,rgba(8,9,13,.6) 100%)}
body[data-look="frame"] .world{display:none}
body[data-look="none"] .world{opacity:0}
.world{transition:opacity .6s var(--ease)}
/* their art, unaltered, lit like a takeover billboard */
.billboard{position:absolute;z-index:-2;left:50%;top:max(96px,calc(env(safe-area-inset-top) + 84px));transform:translateX(-50%);
  display:flex;align-items:center;justify-content:center;width:calc(100% - 24px);height:calc(100svh - 410px);min-height:240px}
.billboard img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;border-radius:3px;
  box-shadow:0 0 0 2px #00e5ffcc,0 0 18px #00e5ff66,0 0 60px #b04dff40,0 24px 48px #000000a0}
body[data-state="order"] .billboard{opacity:.32;transition:opacity .4s var(--ease)}

/* feather only where type sits; fades to nothing well before the top */
.shade{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(8,8,16,.55) 0%,rgba(8,8,16,0) 14%,rgba(8,8,16,0) 40%,rgba(8,8,16,.18) 50%,rgba(8,8,16,.42) 58%,rgba(8,8,16,.66) 66%,rgba(8,8,16,.82) 74%,rgba(8,8,16,.9) 84%,rgba(8,8,16,.94) 100%)}
body[data-state="order"] .shade{background:linear-gradient(180deg,rgba(8,8,16,.55) 0%,rgba(8,8,16,.1) 14%,rgba(8,8,16,.3) 30%,rgba(8,8,16,.6) 46%,rgba(8,8,16,.84) 60%,rgba(8,8,16,.94) 100%)}
.top{position:absolute;top:max(16px,env(safe-area-inset-top));left:18px;z-index:3}
.top img{width:78px;height:auto}
.panel{position:absolute;left:0;right:0;bottom:0;padding:0 20px max(26px,env(safe-area-inset-bottom));z-index:3}
h1{font-family:var(--display);font-weight:700;text-shadow:0 2px 18px rgba(0,0,0,.55)}
h1 .who{display:block;font-size:66px;line-height:.98;letter-spacing:-.01em;overflow-wrap:normal;word-break:normal}
h1 .what{display:block;margin-top:12px;font:600 22px/1.2 var(--label);letter-spacing:.005em;color:#e8f3ee}
.panel .go{width:100%;margin-top:24px}
/* their own channels: icon circles under the invite line, the same glass as the field, 44px touch targets */
.socials{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.socials a{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;color:#eff4f1;
  background:rgba(10,16,17,.62);border:1px solid rgba(194,238,224,.38);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  transition:background .2s,border-color .2s,transform .2s var(--ease)}
.socials a:hover{background:rgba(194,238,224,.16);border-color:#c2eee0;transform:translateY(-2px)}
.socials a:focus-visible{outline:2px solid #e3fff2;outline-offset:3px}
.claim .num{font-size:112px;color:#fff;text-shadow:0 3px 24px rgba(0,0,0,.5)}
.held{margin-top:6px;font:600 18px/1.3 var(--label);color:#d6e8e1}
.err{margin-top:12px;font:600 15px/1.35 var(--label);color:#ffd2c9;text-shadow:0 1px 10px #000}

/* order handoff */
.box{position:absolute;z-index:2;right:6px;bottom:262px;height:340px;width:auto;filter:drop-shadow(-10px 14px 16px rgba(0,0,0,.55))}
.order .num{font-size:58px;color:#fff}
.checkout{margin-top:14px}
.checkout label{display:block;font:600 17px/1.3 var(--label);color:#e1efe9;margin-bottom:10px}
.checkout .row{display:flex;flex-direction:column;gap:10px}
.checkout .row .field{flex:none}
.panel .checkout .go{margin-top:0;width:100%}

/* the site's button */
.go{display:flex;align-items:center;justify-content:center;gap:22px;height:58px;padding:0 26px;border:0;border-radius:2px;
  background:var(--mint);color:var(--mint-ink);font:600 17px/1 system-ui,-apple-system,"Segoe UI",sans-serif;cursor:pointer;
  position:relative;overflow:hidden;transition:background .2s;-webkit-tap-highlight-color:transparent;text-decoration:none;touch-action:manipulation}
.go:hover{background:var(--mint-hover)}
.go svg{transition:transform .3s var(--ease);flex:none}
.go:hover svg{transform:translate(2px,-2px)}
.go:focus-visible{outline:2px solid #e3fff2;outline-offset:3px}
/* pressed: a full-width fill wipes across while the number is drawn / checkout opens */
.go .fill{position:absolute;inset:0;background:#8fd9bf;transform-origin:left;transform:scaleX(0)}
.go .lbl,.go svg{position:relative}
body[data-state="tapped"] .go.accept,.go.pay[aria-busy="true"]{background:#a9e3cf;cursor:progress}
body[data-state="tapped"] .go.accept .fill{animation:wipe 1.15s linear forwards}
.go.pay[aria-busy="true"] .fill{animation:wipe 2.4s cubic-bezier(.3,.6,.4,1) forwards}
@keyframes wipe{to{transform:scaleX(1)}}

/* the site's email field */
.field{font-family:inherit;min-width:0;flex:1;width:100%;height:58px;border:1px solid #607572;background:#0a1011;border-radius:2px;padding:0 18px;color:var(--ink);font-size:16px}
.field::placeholder{color:#9aafaa}
.field:focus{outline:none;border-color:#b8e5d9}

/* member number with rolling digit columns */
.num{font-family:var(--display);font-weight:700;display:inline-flex;align-items:flex-start;line-height:1.12;letter-spacing:.01em}
.num .col{display:inline-block;height:1.12em;overflow:hidden;width:.62em;text-align:center}
.num .strip{display:block;transition:transform .7s var(--ease)}
.num .strip span{display:block;height:1.12em}
.num .hash{margin-right:.06em}
.num .col.roll{opacity:.42}
.num .col.roll .strip{transition:none}

/* the site's sound switch (SoundToggle.module.css): phones beside the logo, desktop top right */
.sound{position:fixed;z-index:61;top:max(16px,env(safe-area-inset-top));left:108px;display:inline-flex;align-items:center;gap:.35rem;min-height:44px;padding:0 .55rem;
  border:1px solid rgba(255,255,255,.16);border-radius:10px;background:rgba(5,7,10,.34);color:rgba(255,255,255,.62);font:600 11px/1 Consolas,ui-monospace,monospace;letter-spacing:.08em;
  cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:color .16s,border-color .16s,background .16s}
.sound span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.sound:hover{color:#fff;border-color:rgba(46,232,165,.6);background:rgba(5,7,10,.6)}
.sound strong{color:#2ee8a5;font-weight:700}
.sound[aria-pressed="false"] strong{color:rgba(255,255,255,.4)}
.sound i{display:inline-flex;align-items:flex-end;gap:2px;height:9px}
.sound i b{width:2px;background:currentColor;border-radius:1px}
.sound i b:nth-child(1){height:4px}.sound i b:nth-child(2){height:9px}.sound i b:nth-child(3){height:6px}
.sound[aria-pressed="false"] i b{height:3px}

/* lock flash, copied from MemberWorld lockFlash */
.flash{position:fixed;inset:0;pointer-events:none;mix-blend-mode:screen;z-index:50;background:radial-gradient(circle at 50% 46%,#ffffff38,#0000 42%);animation:flash .5s cubic-bezier(.12,.8,.2,1) forwards}
@keyframes flash{from{opacity:1}to{opacity:0}}

@media (min-width:900px){
  .city img{object-position:var(--end-pos-d)}
  .shade{background:
    linear-gradient(90deg,rgba(8,8,16,.86) 0%,rgba(8,8,16,.7) 18%,rgba(8,8,16,.42) 32%,rgba(8,8,16,.16) 44%,rgba(8,8,16,0) 56%),
    linear-gradient(180deg,rgba(8,8,16,.5) 0%,rgba(8,8,16,0) 16%,rgba(8,8,16,0) 70%,rgba(8,8,16,.5) 100%)}
  body[data-state="order"] .shade{background:
    linear-gradient(90deg,rgba(8,8,16,.9) 0%,rgba(8,8,16,.76) 22%,rgba(8,8,16,.5) 38%,rgba(8,8,16,.2) 52%,rgba(8,8,16,.1) 70%),
    linear-gradient(180deg,rgba(8,8,16,.5) 0%,rgba(8,8,16,0) 16%,rgba(8,8,16,0) 70%,rgba(8,8,16,.55) 100%)}
  .billboard{left:calc(min(704px,46vw + 64px) + 32px);right:3vw;top:13vh;transform:none;width:auto;height:74vh}
  body[data-state="order"] .billboard{opacity:0}
  .top{top:36px;left:64px}
  .top img{width:104px}
  .sound{left:auto;right:40px;top:40px;min-height:34px}
  .sound span{position:static;width:auto;height:auto;overflow:visible;clip:auto}
  .panel{left:64px;right:auto;bottom:72px;width:min(640px,46vw);padding:0}
  h1 .who{font-size:clamp(96px,9vw,136px)}
  h1 .what{font-size:28px;margin-top:16px}
  .panel .go{width:320px;margin-top:34px}
  .socials{margin-top:22px;gap:12px}
  .socials a{width:50px;height:50px}
  .socials svg{width:24px;height:24px}
  .claim .num{font-size:clamp(170px,16vw,236px)}
  .held{font-size:22px}
  .err{font-size:17px}
  .box{right:9vw;bottom:5vh;height:min(76vh,700px)}
  .order .num{font-size:96px}
  .checkout label{font-size:20px}
  .checkout .row{flex-direction:row}
  .checkout .row .field{flex:1}
  .panel .checkout .go{width:auto;flex:none;margin-top:0}
}

/* ---------- 2026-10-09 partner pages they own (approved editor preview) ---------- */
/* The game button, "green A / seal teal": the one forward action on the screen. */
.go.accept{height:64px;gap:16px;padding:0 13px 0 28px;margin-bottom:10px;border-radius:10px;transform:skewX(-8deg);
  background:linear-gradient(180deg,#d9fff6 0%,#7FFFE6 48%,#22D8C0 100%);color:#04201c;
  font:italic 900 30px/1 "Barlow Condensed","Arial Narrow",system-ui,sans-serif;letter-spacing:.05em;text-transform:uppercase;
  box-shadow:inset 0 2px 0 #ffffffd9,inset 0 -3px 0 #0e8f8259,0 8px 0 #0E8F82,0 10px 0 #04201c,0 18px 30px #000000a0,0 0 36px -6px var(--glow,#7FFFE6);
  transition:transform .14s var(--ease),box-shadow .14s var(--ease),background .2s}
.go.accept>.lbl,.go.accept>.chip{transform:skewX(8deg)}
.go.accept .chip{position:relative;display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:8px;background:#04201c;color:#7FFFE6;box-shadow:inset 0 0 0 1px #0E8F82}
.go.accept:hover{background:linear-gradient(180deg,#ecfffb 0%,#9bffec 48%,#3be3cd 100%);transform:skewX(-8deg) translateY(-2px);
  box-shadow:inset 0 2px 0 #ffffffe6,inset 0 -3px 0 #0e8f8259,0 10px 0 #0E8F82,0 12px 0 #04201c,0 22px 34px #000000a0,0 0 44px -6px var(--glow,#7FFFE6)}
.go.accept:active,body[data-state="tapped"] .go.accept{transform:skewX(-8deg) translateY(8px);
  box-shadow:inset 0 2px 0 #ffffffb3,inset 0 -2px 0 #0e8f8259,0 0 0 #0E8F82,0 2px 0 #04201c,0 6px 12px #00000080,0 0 26px -6px var(--glow,#7FFFE6)}
body[data-state="tapped"] .go.accept{background:linear-gradient(180deg,#d9fff6 0%,#7FFFE6 48%,#22D8C0 100%)}
.go.accept .fill{background:#0E8F8240}
.go.accept:focus-visible{outline:3px solid #e3fff2;outline-offset:6px}
/* one light sweep when the button arrives; never loops */
.go.accept:after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.9) 50%,transparent 65%) no-repeat;background-size:220% 100%;background-position:160% 0}
.landing .go.accept:after{animation:sweep 1.1s .45s cubic-bezier(.3,.6,.3,1) 1 both}
@keyframes sweep{0%{opacity:1;background-position:160% 0}100%{opacity:1;background-position:-60% 0}}
.panel .landing .go.accept,.panel .claim .go.accept{width:calc(100% - 12px);margin-left:6px}

/* rank plate: hover (desktop) or tap (phone) shows the six ranks */
.plate{position:relative;align-self:flex-start;display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:10px 13px;
  border:1px solid color-mix(in srgb,var(--rank) 60%,transparent);border-radius:8px;background:color-mix(in srgb,var(--rank) 14%,rgba(8,8,16,.72));
  color:var(--rank);font:400 11px/1 "Press Start 2P",ui-monospace,monospace;cursor:help;-webkit-tap-highlight-color:transparent;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.plate>svg{width:20px;height:20px;flex:none;filter:drop-shadow(0 0 6px var(--rank))}
.plate:focus-visible{outline:2px solid #e3fff2;outline-offset:3px}
.tip{position:absolute;left:0;top:calc(100% + 8px);z-index:8;width:236px;display:none;flex-direction:column;gap:9px;padding:13px 14px;
  background:#120f24f2;border:1px solid var(--rank);border-radius:12px;box-shadow:0 14px 34px rgba(0,0,0,.7);text-align:left;cursor:default}
.plate:hover .tip,.plate:focus-visible .tip,.plate[aria-expanded="true"] .tip{display:flex}
.rrow{display:grid;grid-template-columns:18px minmax(0,1fr) auto;gap:10px;align-items:center;font:400 9px/1.2 "Press Start 2P",ui-monospace,monospace;color:#8b93a8}
.rrow svg{width:16px;height:16px;color:var(--rc)}
.rrow em{font-style:normal}
.rrow small{font:700 12px/1 system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--rank);letter-spacing:0}
.rrow.on{color:#fff}

.hello{font:500 18px/1.4 system-ui,-apple-system,"Segoe UI",sans-serif;color:#f4f8f6;text-shadow:0 1px 12px #000c;overflow-wrap:anywhere}
.badges{display:flex;flex-wrap:wrap;gap:8px}
.badges img{width:50px;height:50px;filter:drop-shadow(0 4px 10px #000a)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.joined,.flav{display:inline-flex;align-items:center;gap:8px;min-height:32px;padding:6px 12px;border-radius:999px;font:600 13.5px/1.2 system-ui,-apple-system,"Segoe UI",sans-serif;
  background:rgba(10,16,17,.62);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.joined{color:#2ee8a5;border:1px solid #2ee8a566}
.flav{color:#eff4f1;border:1px solid rgba(194,238,224,.3)}
.flav i{width:12px;height:12px;border-radius:4px;background:var(--c);box-shadow:0 0 10px var(--c)}
.extras{display:grid;gap:12px}
.vid{position:relative;display:block;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#0e0e1a center/cover no-repeat;color:#e8f3ee;text-decoration:none;
  box-shadow:0 0 0 1px color-mix(in srgb,var(--glow) 55%,transparent),0 12px 28px #000a;transition:transform .2s var(--ease),box-shadow .2s}
.vid:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,8,16,.15),rgba(8,8,16,.72))}
.vid:hover{transform:translateY(-2px);box-shadow:0 0 0 2px var(--glow),0 16px 34px #000c}
.vid:focus-visible{outline:2px solid #e3fff2;outline-offset:3px}
.vid .play{position:absolute;left:50%;top:50%;width:58px;height:58px;margin:-29px 0 0 -29px;border-radius:50%;display:grid;place-items:center;background:rgba(8,8,16,.7);box-shadow:0 0 0 2px var(--glow),0 0 24px var(--glow)}
.vid .play svg{width:22px;height:22px;margin-left:3px;color:#fff}
.vid .host{position:absolute;left:12px;bottom:10px;font:600 13px/1.2 system-ui,-apple-system,"Segoe UI",sans-serif}
.deals{display:grid;gap:8px}
.deal{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;padding:10px 14px;border-radius:10px;background:rgba(10,16,17,.66);
  border:1px solid rgba(194,238,224,.3);color:#eff4f1;text-decoration:none;font:600 15px/1.3 system-ui,-apple-system,"Segoe UI",sans-serif;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:background .2s,border-color .2s}
.deal span{min-width:0;overflow-wrap:anywhere}
.deal svg{width:16px;height:16px;flex:none;color:#7FFFE6}
.deal:hover{background:rgba(194,238,224,.14);border-color:#c2eee0}
.deal:focus-visible{outline:2px solid #e3fff2;outline-offset:3px}

/* the page look: their wallpaper behind, their picture lit in its frame, everything they chose */
body[data-look="page"] .world{display:none}
body[data-look="page"] .city img{object-position:50% 50%}
body[data-look="page"] .a{display:flex;flex-direction:column;overflow:visible;overflow-x:clip}
body[data-look="page"] .city,body[data-look="page"] .shade{position:fixed}
body[data-look="page"] .shade{background:linear-gradient(180deg,rgba(8,8,16,.6) 0%,rgba(8,8,16,.1) 16%,rgba(8,8,16,.1) 40%,rgba(8,8,16,.55) 70%,rgba(8,8,16,.86) 100%)}
body[data-look="page"] .top{order:-1;position:relative;top:auto;left:auto;padding:max(16px,env(safe-area-inset-top)) 18px 0}
body[data-look="page"] .billboard{position:relative;z-index:1;left:auto;top:auto;transform:none;width:auto;height:auto;min-height:0;padding:20px 16px 0}
body[data-look="page"] .billboard img{max-height:min(42svh,340px);
  box-shadow:0 0 0 2px var(--glow),0 0 18px color-mix(in srgb,var(--glow) 60%,transparent),0 0 60px color-mix(in srgb,var(--glow) 30%,transparent),0 24px 48px #000000a0}
body[data-look="page"] .panel{position:relative;margin-top:auto;padding:30px 20px max(26px,env(safe-area-inset-bottom));
  background:linear-gradient(180deg,rgba(8,8,16,0) 0,rgba(8,8,16,.7) 80px,rgba(8,8,16,.9) 100%)}
body[data-look="page"] .landing{display:flex;flex-direction:column;gap:14px}
body[data-look="page"] .landing h1{display:contents}
body[data-look="page"] .landing .who{order:1;font-size:62px}
body[data-look="page"] .landing .plate{order:2}
body[data-look="page"] .landing .hello{order:3}
body[data-look="page"] .landing .what{order:4;margin:0}
body[data-look="page"] .landing .badges{order:5}
body[data-look="page"] .landing .chips{order:6}
body[data-look="page"] .landing .extras{order:7}
body[data-look="page"] .landing .socials{order:8;margin:0}
body[data-look="page"] .landing .go.accept{order:9;margin-top:8px}
body[data-look="page"] .box{position:fixed}

@media (min-width:900px){
  body[data-look="page"] .a{display:grid;grid-template-columns:minmax(0,min(620px,44vw)) minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);
    column-gap:clamp(40px,5vw,96px);padding:36px 64px 56px;min-height:100svh}
  body[data-look="page"] .shade{background:
    linear-gradient(90deg,rgba(8,8,16,.88) 0%,rgba(8,8,16,.72) 26%,rgba(8,8,16,.36) 44%,rgba(8,8,16,.1) 60%,rgba(8,8,16,.06) 100%),
    linear-gradient(180deg,rgba(8,8,16,.5) 0%,rgba(8,8,16,0) 16%,rgba(8,8,16,0) 60%,rgba(8,8,16,.62) 100%)}
  body[data-look="page"] .top{grid-column:1;grid-row:1;padding:0}
  body[data-look="page"] .billboard{grid-column:2;grid-row:1/3;align-self:center;justify-self:center;padding:0;margin:56px 0 0}
  body[data-look="page"] .billboard img{max-height:min(calc(100svh - 180px),780px)}
  body[data-look="page"].has-extras .billboard{align-self:start;margin-top:56px}
  body[data-look="page"].has-extras .billboard img{max-height:calc(100svh - 56px - 36px - 56px - 236px)}
  body[data-look="page"] .panel{grid-column:1;grid-row:2;align-self:end;position:static;margin:0;padding:28px 0 0;background:none}
  body[data-look="page"] .landing{gap:16px}
  body[data-look="page"] .landing .who{font-size:clamp(80px,7.4vw,120px)}
  body[data-look="page"] .landing .what{font-size:28px}
  body[data-look="page"] .hello{font-size:22px;max-width:30em}
  body[data-look="page"] .badges img{width:56px;height:56px}
  body[data-look="page"] .chips span{min-height:36px;font-size:15px}
  /* video and deals sit under their picture, beside the invitation */
  body[data-look="page"] .landing .extras{position:absolute;z-index:2;right:64px;bottom:56px;left:calc(64px + min(620px,44vw) + clamp(40px,5vw,96px));
    display:flex;align-items:flex-end;justify-content:center;gap:20px}
  body[data-look="page"] .extras .vid{flex:0 1 360px}
  body[data-look="page"] .extras .deals{flex:0 1 320px}
  .panel .landing .go.accept,.panel .claim .go.accept{width:320px}
  body[data-look="page"] .go.accept{height:70px;font-size:34px}
  body[data-look="page"] .panel .landing .go.accept{width:340px}
  body[data-look="page"] .box{position:absolute}
}

/* screenshots / reduced motion */
body.shot .city img{animation:none;transform:scale(1.02)}
@media (prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}