/* ============ TEMPLAR · portfolio.css (the Work page only) ============ */
.pf .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pf .hint-touch{display:none}
.pf kbd{font-family:var(--font-m);font-size:.9em;letter-spacing:.14em;text-transform:uppercase;padding:.1em .5em;border-radius:5px;border:1px solid currentColor;border-bottom-width:2px;opacity:.9;transition:background .2s var(--ease),color .2s var(--ease)}
.kicker.light{color:rgba(255,255,255,.62)}
.kicker.light::after{background:linear-gradient(90deg,var(--accent-bright),transparent)}
body.pf-dark .nav{opacity:0;transform:translateY(-12px);pointer-events:none}

/* ---------- 1. client websites: pinned while the next sheet rises over them ---------- */
.sites{padding:0;position:relative}
.sites::after{content:"";display:block;height:100vh;height:100lvh}
.sites-stage{position:sticky;top:var(--pin,0px);z-index:0;min-height:100vh;min-height:100lvh;display:flex;align-items:center;padding:clamp(96px,13vh,128px) clamp(20px,5vw,72px) clamp(28px,5vh,56px);background:var(--canvas);overflow:hidden;will-change:transform}
.sites-grid{display:grid;grid-template-columns:minmax(300px,.78fr) 1.5fr;gap:clamp(28px,4vw,64px);align-items:center;width:100%;max-width:1320px;margin:0 auto}
.sites-h{font-family:var(--font-d);font-weight:700;font-size:clamp(32px,3.7vw,54px);line-height:1.02;text-transform:uppercase;letter-spacing:-.01em;margin:0}
.sites-lede{margin:14px 0 0;font-size:14.5px;line-height:1.55;color:var(--ink-soft);max-width:44ch;min-height:4.65em}
.quote-sets{margin-top:clamp(14px,2.4vh,26px);display:grid}
.quote-set{grid-area:1/1;display:flex;flex-direction:column;gap:9px}
.quote-set[hidden]{display:flex;visibility:hidden}   /* every set keeps its room, so the column never jumps on a switch */
.quote{border:1px solid var(--line);border-left:2px solid var(--accent-bright);border-radius:12px;background:rgba(251,250,254,.72);padding:11px 15px 10px;margin:0}
.quote p{font-family:var(--font-b);font-weight:400;font-size:13.5px;line-height:1.5;color:var(--ink);opacity:.9;margin:0 0 6px}
.quote footer{font-size:9px;letter-spacing:.2em;color:var(--ink-soft)}
.quote.note{border-left-color:var(--ink-soft);background:rgba(251,250,254,.5)}
.quote-set.on .quote{animation:qIn .45s var(--ease) both}
.quote-set.on .quote:nth-child(2){animation-delay:.05s}
.quote-set.on .quote:nth-child(3){animation-delay:.1s}
@keyframes qIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.sites-show{display:flex;flex-direction:column;align-items:center;min-width:0}
.site-tabs{display:flex;gap:4px;padding:4px;border:1px solid var(--line);border-radius:999px;background:rgba(251,250,254,.7);margin:0 0 16px;max-width:100%;overflow-x:auto;scrollbar-width:none}
.site-tabs::-webkit-scrollbar{display:none}
.site-tab{flex:none;font-family:var(--font-m);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);padding:9px 16px;border-radius:999px;border:0;background:transparent;cursor:pointer;transition:background .3s var(--ease),color .3s var(--ease)}
.site-tab:hover{color:var(--ink)}
.site-tab.on{background:var(--ink);color:#fff}
.site-tab:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.sites-show .laptop{width:100%}
.site-frame{position:absolute;left:0;top:0;border:0;display:none;background:#0b0d12;transform-origin:0 0;opacity:0;visibility:hidden;transition:opacity .35s var(--ease),visibility 0s linear .35s}
.site-frame.on{opacity:1;visibility:visible;transition:opacity .35s var(--ease),visibility 0s}
.site-frame.live{display:block}
.sites-stage.covered .site-frame{display:none}   /* under the sheet the sites stop drawing, so the dive has the machine to itself */
.sites-cta{margin:18px 0 0;min-height:16px;text-align:center}
.sites-cta[data-off]:not([data-hint]){visibility:hidden}
.sites-cta .door-go:hover{transform:translateX(6px)}
.sites-dim{position:absolute;inset:0;background:#0d0c14;opacity:0;pointer-events:none;z-index:5}
.sites-stage.leaving{border-radius:28px}
.site-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;opacity:0;pointer-events:none;z-index:2}
.sites-stage.still .site-poster{opacity:1}
.sites-stage.still .site-frame{display:none}   /* while the sheet rises the sites are pictures: the live pages stop working */
.sites-hint{display:none;font-size:10.5px;letter-spacing:.16em;color:var(--accent)}
.sites-cta[data-hint] .sites-link{display:none}
.sites-cta[data-hint] .sites-hint{display:inline}
.pf-cue{position:absolute;left:50%;bottom:calc(12px + env(safe-area-inset-bottom));bottom:calc(12px + 100lvh - 100svh);width:28px;height:28px;margin-left:-14px;color:var(--ink);opacity:.75;pointer-events:none;animation:ossBob 1.8s var(--ease) infinite;z-index:3}
.quote{display:flex;flex-direction:column;justify-content:space-between;min-height:var(--qh,0px)}
.sites-snap{left:0}

/* ---------- 2. one site, every screen ---------- */
.oss{position:relative;z-index:1;height:260vh;padding:0;margin:-100vh 0 0;margin-top:-100lvh}
.oss-wave{position:absolute;left:-15vw;right:-15vw;bottom:100%;height:34vh;pointer-events:none;z-index:6}
.ow{position:absolute;left:0;right:0;bottom:-1px;height:100%;border-radius:50% 50% 0 0/100% 100% 0 0;transform-origin:50% 100%;transform:scaleY(0);will-change:transform}
.ow-1{background:linear-gradient(180deg,#8B6CFF 0%,#6847F2 70%)}
.ow-2{height:74%;background:#F4F2FB}
.oss-wipe{position:absolute;z-index:1;display:block;background:#6847F2;transform-origin:left center;transform:scaleX(0);will-change:transform;pointer-events:none}
.oss-snap-b{scroll-snap-align:none}
.oss-stage{position:sticky;top:0;height:100vh;height:100lvh;overflow:hidden;background:#0d0c14}
.oss-cue{display:block;width:30px;height:30px;color:currentColor;animation:ossBob 1.8s var(--ease) infinite;pointer-events:none}
.oss-cue-c{position:absolute;left:50%;bottom:calc(16px + env(safe-area-inset-bottom));bottom:calc(16px + 100lvh - 100svh);margin-left:-15px;z-index:4;color:rgba(255,255,255,.82);opacity:0}
.oss-cue-a{position:absolute;left:50%;bottom:calc(16px + env(safe-area-inset-bottom));bottom:calc(16px + 100lvh - 100svh);margin-left:-15px;z-index:4;color:var(--ink);filter:drop-shadow(0 1px 2px rgba(255,255,255,.7))}
@keyframes ossBob{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(9px);opacity:1}}
.oss-inside{position:absolute;inset:0;display:grid;place-items:center;background:radial-gradient(ellipse 70% 60% at 50% 40%,#1c1830 0%,#0d0c14 70%);color:#fff;text-align:center;padding:0 6vw}
.inside-title{position:absolute;left:6vw;right:6vw;top:50%;transform:translateY(-50%);z-index:2;text-align:center;color:#fff;opacity:0;margin:0;pointer-events:none}
.inside-h{font-family:var(--font-d);font-weight:700;font-size:clamp(36px,6vw,88px);line-height:1.02;text-transform:uppercase;letter-spacing:-.01em;margin:0}
.inside-sub{margin:20px auto 0;max-width:46ch;font-size:clamp(14px,1.25vw,17px);line-height:1.55;color:rgba(255,255,255,.7)}
.oss-paper{position:absolute;left:-25%;top:-25%;width:150%;height:150%;display:block;z-index:1;transform-origin:50% 50%;will-change:transform}   /* drawn larger than the screen, so the zoom can run on the graphics chip between redraws */
.oss-pic{position:absolute;left:50%;top:50%;width:3072px;max-width:none;height:3072px;margin:-1536px 0 0 -1536px;z-index:1;transform-origin:50% 50%;opacity:0;visibility:hidden;pointer-events:none;will-change:transform}
.oss.through .oss-pic{visibility:hidden}
.oss.through .oss-devices{visibility:hidden}
.oss-devices{z-index:3}
.oss.through .oss-paper{visibility:hidden}
.oss-word{font-family:var(--font-d);font-weight:700;font-size:132px;letter-spacing:-.015em}
.oss-devices{position:absolute;left:50%;top:38vh;width:min(1240px,94vw);height:58vh;transform:translateX(-50%) translateY(var(--rise,0px));perspective:1800px;pointer-events:none}
.dev{position:absolute;bottom:10%;will-change:transform,opacity;transform-style:preserve-3d}
.dev-body{position:relative;transform:var(--base,none);transform-style:preserve-3d}
.dev-shadow{position:absolute;left:8%;right:8%;bottom:-9%;height:16%;border-radius:50%;background:radial-gradient(ellipse at center,rgba(104,71,242,.18) 0%,rgba(104,71,242,.072) 45%,rgba(104,71,242,0) 72%);filter:blur(6px);transform:var(--shadow,none)}
.dev-screen{position:relative;overflow:hidden;background:#0f0e16}
.dev-phone .dev-screen img{height:100%;object-fit:cover;object-position:center}
.dev-screen img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.dev-phone{left:2.5%;width:11.5%;bottom:9.3%;--base:rotateY(16deg) rotateZ(-4deg);--shadow:translateY(10px) scaleX(.9)}
.dev-phone .dev-screen{aspect-ratio:390/844;border-radius:clamp(16px,1.7vw,24px);border:5px solid #1a1826;box-shadow:0 0 0 1.5px #3a3650,0 0 0 2.5px rgba(255,255,255,.25),0 30px 60px rgba(35,29,63,.14),inset 0 0 0 1px rgba(255,255,255,.08)}
.dev-island{position:absolute;left:50%;top:1.6%;width:27%;height:2.9%;transform:translateX(-50%);border-radius:999px;background:#0b0a12;z-index:2}
.dev-btn{position:absolute;width:2.5px;background:#3a3650;border-radius:2px;z-index:0}
.dev-btn-l{left:-3px;top:22%;height:9%}
.dev-btn-l::after{content:"";position:absolute;left:0;top:150%;width:100%;height:100%;background:inherit;border-radius:inherit}
.dev-btn-r{right:-3px;top:26%;height:14%}
.dev-screen::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,rgba(255,255,255,.14) 0%,rgba(255,255,255,0) 38%,rgba(255,255,255,0) 70%,rgba(255,255,255,.06) 100%);pointer-events:none;z-index:3}
.dev-tablet{left:21.3%;width:22%;bottom:10%;--base:rotateY(-12deg) rotateZ(-3deg);--shadow:translateY(12px)}
.dev-tablet .dev-screen{aspect-ratio:834/1112;border-radius:clamp(14px,1.5vw,20px);border:7px solid #1a1826;box-shadow:0 0 0 1.5px #3a3650,0 0 0 2.5px rgba(255,255,255,.25),0 34px 70px rgba(35,29,63,.14),inset 0 0 0 1px rgba(255,255,255,.08)}
.dev-cam{position:absolute;left:50%;top:1px;width:5px;height:5px;transform:translateX(-50%);border-radius:50%;background:#0b0a12;box-shadow:inset 0 0 0 1.5px #2b2840;z-index:2}
.dev-laptop{right:0;width:52%;bottom:10%;--base:rotateY(-22deg) rotateZ(1deg);--shadow:translateY(14px) scaleX(1.05)}
.oss.tall .dev-laptop{right:0;width:86%;bottom:6%;z-index:1;--base:rotateY(-14deg) rotateZ(0deg)}
.oss.tall .dev-tablet{left:0;width:42%;bottom:4%;z-index:2;--base:rotateY(14deg) rotateZ(-2deg)}
.oss.tall .dev-phone{left:9%;width:23%;bottom:1%;z-index:3;--base:rotateY(18deg) rotateZ(-3deg)}
.oss.tall .dev-base{height:7px;margin:0 -9px;border-radius:0 0 9px 9px}
.oss.tall .dev-lid{padding:5px 5px 6px;border-radius:9px 9px 3px 3px}
.oss.tall .dev-laptop .dev-screen{border-radius:4px}
.dev-base{height:11px;margin:0 -16px;border-radius:0 0 14px 14px;background:linear-gradient(#f3f0fa,#cfc7ea);box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 16px 36px rgba(35,29,63,.08);position:relative}
.dev-base::after{content:"";position:absolute;left:50%;top:0;width:12%;height:4px;transform:translateX(-50%);border-radius:0 0 5px 5px;background:rgba(35,29,63,.18)}
.dev-lid{padding:8px 8px 10px;border-radius:14px 14px 4px 4px;background:linear-gradient(180deg,#2a2640,#15131f);box-shadow:0 0 0 1px rgba(255,255,255,.14),0 44px 90px rgba(35,29,63,.144),inset 0 1px 0 rgba(255,255,255,.12)}
.dev-notch{position:absolute;left:50%;top:0;width:11%;height:3.4%;transform:translateX(-50%);border-radius:0 0 7px 7px;background:#15131f;z-index:2}
.dev-laptop .dev-screen{aspect-ratio:16/10;border-radius:7px}

/* ---------- 2. inside ---------- */
.inside{background:#0d0c14;color:#fff;padding-top:clamp(60px,14vh,160px);padding-bottom:clamp(48px,8vh,96px);position:relative}
.pieces-wrap{position:relative;max-width:1250px;margin:0 auto;isolation:isolate}
.rail{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:0}
.rail-guide{fill:none;stroke:rgba(255,255,255,.1);stroke-width:1.5;stroke-dasharray:4 8}
.rail-line{fill:none;stroke:var(--accent-bright);stroke-width:2.5;stroke-linecap:round;filter:drop-shadow(0 0 8px rgba(124,92,255,.7))}
.rail-dot{fill:#fff;filter:drop-shadow(0 0 10px rgba(124,92,255,.95))}
.pieces{list-style:none;position:relative;z-index:2;display:flex;flex-direction:column;gap:clamp(60px,14vh,170px);padding:0;margin:0}
.piece{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(24px,4vw,64px);align-items:center;transition:opacity .9s var(--ease),transform .9s var(--ease)}
.piece.right{grid-template-columns:.75fr 1.25fr}
.piece.right .piece-media{order:2}
.piece.right{margin-left:clamp(0px,6vw,110px)}
.piece.left{margin-right:clamp(0px,6vw,110px)}
.piece.dim .piece-media{filter:brightness(.45)}
.piece.dim .piece-copy{opacity:.42}
.piece-copy{transition:opacity .6s var(--ease)}
.piece-media{transition:filter .6s var(--ease)}
.piece-media{position:relative;z-index:2;border-radius:22px;overflow:hidden;border:1px solid rgba(255,255,255,.1);background:#0f0e16;box-shadow:0 30px 90px rgba(0,0,0,.5);transition:border-color .5s var(--ease),box-shadow .6s var(--ease),filter .6s var(--ease)}
.piece.active .piece-media{border-color:rgba(124,92,255,.7);box-shadow:0 30px 90px rgba(0,0,0,.5),0 0 0 1px rgba(124,92,255,.35),0 24px 80px rgba(124,92,255,.22)}
.piece-copy{position:relative;z-index:2}
.piece-copy h3{font-family:var(--font-d);font-weight:700;font-size:clamp(22px,2.4vw,34px);line-height:1.1;margin:0 0 12px}
.piece-copy p{color:rgba(255,255,255,.72);font-size:15px;line-height:1.6;max-width:40ch}
.piece-copy .kicker{margin-bottom:14px}
.piece-copy .tile-hint{margin-top:18px;color:var(--accent-bright);font-size:13px;letter-spacing:.2em}
.piece.held .tile-hint kbd,.piece.open .tile-hint kbd,.piece.playing .tile-hint kbd{background:var(--accent);color:#fff;border-color:var(--accent)}
.tile-frame{position:relative;aspect-ratio:16/9;background:#0f0e16;overflow:hidden;touch-action:pan-y pinch-zoom;-webkit-user-select:none;user-select:none;isolation:isolate}
.piece[data-drag="1"] .tile-frame{cursor:grab}
.piece[data-drag="1"] .tile-frame.dragging{cursor:grabbing}
.piece[data-key="hold"] .tile-frame,.piece[data-key="toggle"] .tile-frame{cursor:pointer}
.seq-stack{position:absolute;inset:0}
.seq-stack img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;visibility:hidden;pointer-events:none}
.seq-stack img.is-shown{visibility:visible}
.tile-load{position:absolute;left:18px;right:18px;bottom:16px;height:3px;background:rgba(255,255,255,.16);border-radius:3px;transition:opacity .5s var(--ease);z-index:3}
.tile-load i{display:block;height:100%;width:100%;border-radius:3px;background:var(--accent-bright);transform:scaleX(var(--p,0));transform-origin:left}
.tile-load span{position:absolute;right:0;bottom:9px;font-size:9.5px;letter-spacing:.28em;color:rgba(255,255,255,.7)}
.piece.loaded .tile-load{opacity:0}
.clip-still{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.clip{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;pointer-events:none;transition:opacity .25s var(--ease)}
.clip.on{opacity:1}
.tile-holo .clip-still,.tile-holo .clip{transform-origin:60% 46%;transition:transform 4.2s cubic-bezier(.3,0,.2,1),opacity .25s var(--ease)}
.piece.open .tile-holo .clip-still,.piece.open .tile-holo .clip{transform:scale(1.32)}
.tile-music{--lx:50%;--ly:50%}
.tile-music .light{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;transition:opacity .5s var(--ease);
  background:radial-gradient(42% 60% at var(--lx) var(--ly),rgba(255,232,190,.30) 0%,rgba(255,232,190,.12) 32%,rgba(255,232,190,0) 62%)}
.piece.lit .tile-music .light{opacity:1}
.music-chip{position:absolute;left:18px;bottom:16px;z-index:2;font-size:9.5px;letter-spacing:.26em;color:#fff;background:rgba(35,29,63,.55);padding:7px 11px;border-radius:999px;opacity:0;transition:opacity .4s var(--ease)}
.piece.playing .music-chip{opacity:1}
.piece.playing .music-chip::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--accent-bright);margin-right:8px;vertical-align:1px;animation:pulse 1.6s var(--ease) infinite}
.outro{display:grid;place-items:center;text-align:center;padding:clamp(56px,12vh,140px) 6vw 0}
.outro-h{font-family:var(--font-d);font-weight:700;font-size:clamp(30px,4.6vw,66px);line-height:1.05;text-transform:uppercase;letter-spacing:-.01em;margin:0 0 16px}
.outro-p{color:rgba(255,255,255,.72);font-size:clamp(15px,1.3vw,18px);margin:0}
.outro-p a{color:var(--accent-bright);font-family:var(--font-m);font-size:12px;letter-spacing:.18em;text-transform:uppercase;margin-left:10px}

.laptop{position:relative;width:100%}
.laptop-lid{padding:12px 12px 14px;border-radius:20px;background:linear-gradient(180deg,#2d2942,#181524);box-shadow:0 40px 100px rgba(35,29,63,.32),inset 0 0 0 1px rgba(255,255,255,.07)}
.laptop-screen{position:relative;aspect-ratio:16/10;border-radius:10px;overflow:hidden;background:#0b0d12}
.laptop-base{height:14px;margin:0 -22px;border-radius:0 0 18px 18px;background:linear-gradient(#ebe6f7,#cfc7ea);box-shadow:0 18px 40px rgba(35,29,63,.18);position:relative}
.laptop-base::after{content:"";position:absolute;left:50%;top:0;width:12%;height:5px;transform:translateX(-50%);border-radius:0 0 6px 6px;background:rgba(35,29,63,.18)}

/* ---------- 4. your site, next ---------- */
.pf-close{padding-top:clamp(16px,3vh,32px);padding-bottom:clamp(50px,8vh,90px)}
.close-stage{position:relative;max-width:1250px;margin:0 auto;display:grid;place-items:center;min-height:clamp(220px,34vh,360px)}
.pf-big{position:absolute;inset:0;display:grid;place-items:center;text-align:center;white-space:nowrap;font-family:var(--font-d);font-weight:700;font-size:clamp(44px,9.2vw,150px);line-height:.95;letter-spacing:-.01em;text-transform:uppercase;color:transparent;-webkit-text-stroke:1.5px var(--ink);transition:color .8s var(--ease);margin:0}
.close-stage:hover .pf-big{color:var(--ink)}
.close-strip{position:relative;z-index:1;display:inline-flex;align-items:center;gap:18px;padding:16px 26px;border-radius:14px;background:rgba(251,250,254,.9);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--line-strong);box-shadow:0 20px 60px rgba(104,71,242,.16);color:var(--ink);transform:translateY(clamp(70px,9vw,120px));transition:border-color .3s var(--ease),box-shadow .4s var(--ease),transform .9s var(--ease),opacity .9s var(--ease)}
.close-strip.reveal{opacity:0}
.close-strip.reveal.in{opacity:1;transform:translateY(clamp(70px,9vw,120px))}
.close-strip .mono{font-size:11px;letter-spacing:.22em}
.close-arrow{font-family:var(--font-m);color:var(--accent);transition:transform .3s var(--ease)}
.close-strip:hover{border-color:var(--accent);box-shadow:0 24px 70px rgba(104,71,242,.26)}
.close-strip:hover .close-arrow{transform:translateX(6px)}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .sites-stage{align-items:flex-start}
  .sites-grid{grid-template-columns:1fr;gap:0;max-width:820px}
  .sites-copy,.sites-show{display:contents}
  .sites-copy .kicker{order:1}.sites-h{order:2}.sites-lede{order:3;min-height:0}
  .site-tabs{order:4;justify-self:center;margin-top:22px}.sites-show .laptop{order:5}.sites-cta{order:6}
  .quote-sets{order:7;margin-top:22px}
  .quote-set,.quote-set[hidden]{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
}
@media (max-width:860px){
  .piece,.piece.right{grid-template-columns:1fr;margin:0}
  .piece.right .piece-media{order:0}
  .piece-copy p{max-width:none}
  .rail{display:none}
}
@media (max-width:720px){
  .oss{height:220vh}
  .pf .hint-desk{display:none}
  .pf .hint-touch{display:inline}
  .pieces{gap:56px}
  .inside-sub{font-size:14px;max-width:34ch}
  .pf-big{font-size:clamp(34px,11vw,64px)}
  .close-strip{transform:translateY(56px);padding:14px 18px}
  .close-strip.reveal.in{transform:translateY(56px)}
  /* the site we shipped, inside a phone instead of a laptop */
  .laptop-lid{padding:9px;border-radius:40px;background:#15131f;box-shadow:0 0 0 1.5px #3a3650,0 0 0 3px rgba(255,255,255,.25),0 30px 70px rgba(35,29,63,.28),inset 0 1px 0 rgba(255,255,255,.1)}
  .laptop-screen{aspect-ratio:9/19.5;border-radius:32px;background:#0b0d12}
  .laptop-base{display:none}
  .sites-stage{padding:92px 18px 26px;padding-bottom:calc(26px + 100lvh - 100svh)}
  .sites-h{font-size:clamp(30px,9vw,40px)}
  .sites-lede{font-size:14px}
  .site-tab{font-size:9.5px;letter-spacing:.1em;padding:8px 11px}
  .sites-show .laptop{width:min(70vw,300px);margin:0 auto}
  .sites-cta{margin-top:16px}
  .quote-set,.quote-set[hidden]{display:flex;flex-direction:row;overflow-x:auto;scroll-snap-type:x mandatory;gap:10px;margin:0 -18px;padding:0 18px 4px;scrollbar-width:none}
  .quote-set::-webkit-scrollbar{display:none}
  .quote{flex:0 0 82%;scroll-snap-align:center}
  .oss-wave{height:26vh}
}
@media (hover:none),(pointer:coarse){
  .pf .hint-desk{display:none}
  .pf .hint-touch{display:inline}
  .outro-p a{white-space:nowrap}
  .close-stage:active .pf-big{-webkit-text-fill-color:var(--ink)}
}
@media (prefers-reduced-motion: reduce){
  .oss{height:100vh}
  .snap-pt{display:none}
}
@media (pointer:coarse) and (max-height:520px){   /* a phone on its side: media and copy side by side so a stop fits the screen */
  .piece{grid-template-columns:1.25fr .75fr;gap:18px}
  .piece.right{grid-template-columns:.75fr 1.25fr}
  .piece.right .piece-media{order:2}
  .piece-copy h3{font-size:18px}
  .piece-copy p{font-size:13px}
}

/* touch screens scroll inside the page, so the visible screen never changes: everything is sized to it */
html.own-scroll .sites::after{height:100svh}
html.own-scroll .sites-stage{min-height:100svh}
html.own-scroll .oss{margin-top:-100svh}
html.own-scroll .oss-stage{height:100svh}
html.own-scroll .oss-cue-a,html.own-scroll .oss-cue-c{bottom:calc(16px + env(safe-area-inset-bottom))}
html.own-scroll .pf-cue{bottom:12px}
@media (max-width:720px){html.own-scroll .sites-stage{padding-bottom:26px}}

/* phones: the dive plays as pictures taken from the animation itself */
.oss-frames{position:absolute;inset:0;z-index:1;pointer-events:none;visibility:hidden}
.oss-frames img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;display:block;visibility:hidden}
.oss.framed .oss-frames{visibility:visible}