/* Lesreg — the page after the opening. The same library as ny.css
   (Liquid Atelier 3.2): stone colours, Chivo, Fragment Mono for numbers
   and annotations, one Newsreader phrase per heading, ultramarine only
   for what is live. Dark and light sections alternate, like the film
   handing over to paper. Everything that moves moves by transform and
   opacity only. */

.pg{ position:relative; z-index:1; background:var(--porcelain); }
.h2{ font:500 clamp(40px, 6.2vw, 100px)/.96 var(--sans); letter-spacing:-.045em; text-wrap:balance; }
.acc{ font-family:var(--accent); font-style:italic; font-weight:300; letter-spacing:-.03em; }
.h2 .acc{ line-height:1; }
.label .mono{ color:inherit; opacity:.7; margin-right:8px; }
.sec-head{ padding:0 var(--gut); max-width:1440px; margin:0 auto; }
.sec-head .label{ color:var(--ash); margin-bottom:22px; display:block; }
.sec-lead{ margin-top:26px; max-width:46ch; font:400 clamp(17px, 1.5vw, 21px)/1.5 var(--sans); color:var(--graphite); }
.dot{ display:inline-block; width:6px; height:6px; border-radius:3px; background:var(--ultra); box-shadow:0 0 0 3px rgba(36,54,232,.18); flex:none; }

/* reveal: only when the script runs, so without it everything is simply there */
html.pg-js [data-r]{ opacity:0; transform:translate3d(0,28px,0); transition:opacity .9s var(--ease), transform 1.1s var(--ease); transition-delay:var(--d, 0s); }
html.pg-js [data-r].in{ opacity:1; transform:none; }

/* ---------- the band: what we build, running past ---------- */
.band{ background:var(--obsidian); color:var(--porcelain); padding:clamp(56px, 9vh, 96px) 0; overflow:hidden; }
.band-row{ display:flex; align-items:center; gap:clamp(22px, 3vw, 44px); width:max-content; will-change:transform;
  font:500 clamp(44px, 7.4vw, 124px)/1.08 var(--sans); letter-spacing:-.045em; white-space:nowrap; }
.band-row .acc{ color:var(--travertine); }
.band-row > i{ width:clamp(18px, 2vw, 30px); height:clamp(18px, 2vw, 30px); border-radius:50%; flex:none;
  background:radial-gradient(90% 90% at 32% 24%, rgba(255,255,255,.55), rgba(255,255,255,0) 58%), rgba(255,255,255,.12);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.3); }
.band-row-2{ margin-top:clamp(18px, 3vh, 30px); gap:14px; font:400 clamp(13px, 1.1vw, 15px)/1 var(--mono); letter-spacing:0; }
.band-row-2 > i{ width:4px; height:4px; background:var(--graphite); box-shadow:none; }
.live{ display:inline-flex; align-items:center; gap:10px; height:40px; padding:0 18px 0 14px; border-radius:20px;
  border:1px solid rgba(255,255,255,.16); color:var(--limestone); }
.live b{ width:7px; height:7px; border-radius:4px; background:var(--ultra); box-shadow:0 0 0 0 rgba(36,54,232,.6); animation:pulse 2.4s var(--ease) infinite; }
.live em{ font-style:normal; color:var(--ash); }
@keyframes pulse{ 0%{ box-shadow:0 0 0 0 rgba(36,54,232,.7); } 70%{ box-shadow:0 0 0 9px rgba(36,54,232,0); } 100%{ box-shadow:0 0 0 0 rgba(36,54,232,0); } }


/* ---------- work ---------- */
.work{ background:var(--obsidian); color:var(--porcelain); padding:clamp(100px, 16vh, 180px) 0 clamp(40px, 8vh, 80px); }
.work .sec-head .label{ color:var(--ash); }
.work .sec-lead{ color:var(--travertine); }
.case{ display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 7fr); gap:clamp(32px, 5vw, 96px); align-items:center;
  max-width:1440px; margin:0 auto; padding:clamp(80px, 14vh, 160px) var(--gut); }
.case-r .case-txt{ order:2; }
.case-k{ display:flex; align-items:center; gap:10px; color:var(--travertine); margin-bottom:22px; }
.case-n{ font:500 clamp(44px, 5.6vw, 88px)/.95 var(--sans); letter-spacing:-.045em; }
.case-d{ margin-top:22px; max-width:40ch; font:400 clamp(16px, 1.3vw, 19px)/1.55 var(--sans); color:var(--travertine); }
.case-d b{ color:var(--porcelain); font-weight:500; }
.case-f{ list-style:none; margin:30px 0 34px; border-top:1px solid rgba(255,255,255,.12); }
.case-f li{ display:flex; gap:18px; align-items:baseline; padding:15px 0; border-bottom:1px solid rgba(255,255,255,.12); font:400 16px/24px var(--sans); }
.case-f .mono{ color:var(--ash); }
.work .btn{ background:var(--porcelain); color:var(--obsidian); }
.work .btn .lens{ --lb:var(--travertine); --lc:var(--graphite); }
.case-vis{ --pad:7%; position:relative; padding:0 0 1% var(--pad); }
.case-r .case-vis{ padding:0 var(--pad) 1% 0; }
/* ---------- the devices: iPhone 17 Pro and MacBook Pro 14", drawn to Apple's
   dimensions (media/dev/*.svg). The screen sits under the frame; everything
   on it is sized in container units, so it is the same picture at any size. */
.dev{ position:relative; }
.dev > .frame{ position:relative; z-index:2; display:block; width:100%; height:auto; pointer-events:none; user-select:none; }
.dev .scr{ position:absolute; z-index:1; overflow:hidden; background:#000; container-type:inline-size; }
/* iPhone 17 Pro: the Higgsfield render (560 x 1168) from Callster, its screen
   transparent at 5.37-94.54 % x 2.40-97.60 %; the screen is 402 pt wide, so
   1 pt = 100/402 cqw, and the status bar is iOS's own: 58 pt, the clock 17 pt */
.dev-iph{ aspect-ratio:560 / 1168; }
.dev-iph > .frame{ position:absolute; inset:0; height:100%; }
.dev-iph::before{ content:""; position:absolute; z-index:0; left:1.2%; right:1.2%; top:.6%; bottom:.6%; border-radius:15% / 7.2%;
  box-shadow:0 30px 40px rgba(20,33,61,.22), 0 8px 12px rgba(20,33,61,.12); }
.dev-iph .scr{ left:5.37%; top:2.4%; width:89.17%; height:95.2%; border-radius:13% / 6.2%; background:#fff; }
.dev-iph video, .dev-iph .full{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 0; }
.dev-iph .shot{ position:absolute; left:0; top:14.43cqw; width:100%; height:calc(100% - 14.43cqw); object-fit:cover; object-position:50% 0; }
.dev-iph .sb{ position:absolute; z-index:2; left:0; right:0; top:0; height:14.43cqw; padding:1.49cqw 7.46cqw 0 10.95cqw;
  display:flex; align-items:center; justify-content:space-between; background:var(--sb, #fff); color:var(--sbc, #000);
  font:600 4.23cqw/1 -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif; letter-spacing:-.07cqw; -webkit-font-smoothing:antialiased; }
.dev-iph .sb .sb-ic{ display:flex; align-items:center; gap:1.49cqw; }
.dev-iph .sb svg{ display:block; height:4.23cqw; width:4.23cqw; }
.dev-iph .sb .bat{ width:6.22cqw; height:4.23cqw; }

/* MacBook Pro 14" in Space Black: a Higgsfield render (1600 x 938), its
   screen keyed out at 10.34-89.76 % x 3.45-88.98 % */
.dev-mac{ aspect-ratio:1600 / 938; }
.dev-mac > .frame{ position:absolute; inset:0; height:100%; }
.dev-mac .scr{ left:10.34%; top:3.45%; width:79.42%; height:85.53%; border-radius:.8% .8% 0 0 / 1.2% 1.2% 0 0; background:#0c0c0d; }
/* macOS menu bar, dark so the notch sits in it as it does on the machine */
.dev-mac .mb{ position:absolute; left:0; right:0; top:0; height:2.45cqw; display:flex; align-items:center; gap:1.25cqw; padding:0 1.15cqw 0 1.5cqw;
  background:#0c0c0d; color:#f2f2f2; font:500 .84cqw/1 -apple-system, 'SF Pro Text', system-ui, sans-serif; white-space:nowrap; }
.dev-mac .mb b{ font-weight:700; }
.dev-mac .mb-m{ display:flex; gap:1.25cqw; }
.dev-mac .mb-r{ margin-left:auto; display:flex; align-items:center; gap:1.05cqw; }
.dev-mac .mb-r svg{ height:.95cqw; width:auto; aspect-ratio:1.2; display:block; color:#f2f2f2; }
.dev-mac .mb-r svg:first-child{ aspect-ratio:2.1; }
/* Safari, the window filling the screen under the menu bar */
.dev-mac .sf{ position:absolute; left:0; right:0; top:2.45cqw; bottom:0; overflow:hidden; background:#fff; border-radius:.9cqw .9cqw 0 0; }
.dev-mac .sf-tb{ position:relative; height:3.44cqw; display:flex; align-items:center; gap:1.05cqw; padding:0 1.2cqw;
  background:#f3f3f5; border-bottom:1px solid rgba(0,0,0,.09); color:#6e6e73; }
.dev-mac .tl{ display:flex; gap:.55cqw; margin-right:.6cqw; }
.dev-mac .tl i{ width:.8cqw; height:.8cqw; border-radius:50%; background:#ff5f57; box-shadow:inset 0 0 0 .5px rgba(0,0,0,.12); }
.dev-mac .tl i:nth-child(2){ background:#febc2e; } .dev-mac .tl i:nth-child(3){ background:#28c840; }
.dev-mac .ti{ height:1.05cqw; width:1.3cqw; display:block; }
.dev-mac .ti.dim{ opacity:.35; }
.dev-mac .url{ margin:0 auto; display:flex; align-items:center; justify-content:center; gap:.45cqw; width:36cqw; height:2.2cqw; border-radius:1.1cqw;
  background:#e4e4e8; color:#1d1d1f; font:500 .86cqw/1 -apple-system, 'SF Pro Text', system-ui, sans-serif; }
.dev-mac .url svg{ height:.8cqw; width:.65cqw; color:#6e6e73; }
.dev-mac .sf > img{ position:absolute; left:0; top:3.44cqw; width:100%; height:calc(100% - 3.44cqw); object-fit:cover; object-position:50% 0; }

.case .dev-mac{ will-change:transform; transform-origin:50% 100%; }
.case .dev-mac{ width:100%; }
/* at true scale: an iPhone 17 Pro is 71.9 mm wide, the MacBook Pro's lid
   312.6 mm, and the lid is 82.5 % of the Mac's picture: 19 % of its width */
.case .dev-iph{ position:absolute; z-index:3; left:0; bottom:0; width:calc((100% - var(--pad)) * .19); will-change:transform; }
.case-r .dev-iph{ left:auto; right:0; }
.chip{ position:absolute; right:6%; bottom:2%; display:flex; align-items:center; gap:10px; height:40px; padding:0 18px 0 14px; border-radius:20px;
  background:var(--porcelain); color:var(--obsidian); box-shadow:var(--contact-m); white-space:nowrap; will-change:transform; }
.case-r .chip{ right:auto; left:6%; }
@media (max-width:900px){
  .case, .case-r{ grid-template-columns:1fr; }
  .case-r .case-txt{ order:0; }
  .case-vis, .case-r .case-vis{ --pad:6%; padding:0 0 1% var(--pad); }
  .case-r .dev-iph{ left:0; right:auto; }
  .chip, .case-r .chip{ right:4%; left:auto; bottom:4%; }
}

/* ---------- admin ---------- */
.admin{ background:var(--limestone); display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:clamp(40px, 6vw, 120px); align-items:center;
  padding:clamp(100px, 16vh, 180px) var(--gut); max-width:none; }
.admin-txt{ max-width:620px; justify-self:end; }
.admin-txt .label{ color:var(--ash); margin-bottom:22px; display:block; }
.admin-f{ margin-top:36px; display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.admin-f > div{ padding:22px; border-radius:24px; background:var(--porcelain); box-shadow:var(--contact-s); display:flex; flex-direction:column; gap:6px; }
.admin-f b{ font:500 18px/24px var(--sans); letter-spacing:-.01em; }
.admin-f span{ font:400 14.5px/22px var(--sans); color:var(--graphite); }
.admin-vis{ position:relative; justify-self:start; width:min(100%, 520px); padding:4% 0 4% 8%; }
.dev-lg{ width:min(64%, 310px); }
.notes{ position:absolute; right:0; top:22%; width:66%; display:flex; flex-direction:column; gap:10px; }
.note{ display:flex; align-items:center; gap:12px; padding:13px 14px; border-radius:20px; background:rgba(246,244,239,.94);
  box-shadow:0 0 0 1px rgba(255,255,255,.9) inset, var(--contact-m); will-change:transform,opacity; }
.note .ni{ width:34px; height:34px; border-radius:9px; flex:none; background:linear-gradient(150deg, #f08a3c, #d4612a); box-shadow:inset 0 0 0 1px rgba(255,255,255,.3); }
.note div{ display:flex; flex-direction:column; min-width:0; }
.note b{ font:600 13.5px/18px var(--sans); }
.note div span{ font:400 12.5px/17px var(--sans); color:var(--graphite); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.note em{ margin-left:auto; align-self:flex-start; font-style:normal; color:var(--ash); font-size:11px; }
@media (max-width:900px){
  .admin{ grid-template-columns:1fr; }
  .admin-txt{ justify-self:start; }
  .admin-vis{ justify-self:center; padding:0 0 0 4%; }
  .admin-f{ grid-template-columns:1fr; }
}

/* ---------- why ---------- */
.why{ background:var(--porcelain); padding:clamp(100px, 16vh, 180px) 0; }
.why .sec-head{ margin-bottom:clamp(40px, 7vh, 72px); }
.why-grid{ max-width:1440px; margin:0 auto; padding:0 var(--gut); display:grid; grid-template-columns:1.25fr 1fr 1fr; grid-template-rows:auto auto; gap:14px; }
.why-ph{ grid-row:span 2; position:relative; border-radius:28px; overflow:hidden; min-height:340px; background:var(--travertine); }
.why-ph img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:30% 50%; }
.why-ph figcaption{ position:absolute; left:16px; bottom:16px; height:36px; padding:0 14px; border-radius:18px; display:flex; align-items:center;
  background:var(--smoke-dense); color:var(--porcelain); }
.why-c{ padding:26px; border-radius:28px; background:var(--limestone); display:flex; flex-direction:column; gap:10px; min-height:220px; }
.why-c:last-child{ grid-column:span 2; }
.why-c .n{ font:300 clamp(56px, 5vw, 80px)/.9 var(--sans); letter-spacing:-.05em; color:var(--ash); margin-bottom:auto; }
.why-c b{ font:500 clamp(20px, 1.7vw, 25px)/1.15 var(--sans); letter-spacing:-.02em; }
.why-c p{ font:400 15.5px/24px var(--sans); color:var(--graphite); max-width:38ch; }
@media (max-width:900px){
  .why-grid{ grid-template-columns:1fr; }
  .why-ph{ grid-row:auto; aspect-ratio:16 / 10; min-height:0; }
  .why-c:last-child{ grid-column:auto; }
  .why-c{ min-height:0; }
}
.steps{ position:relative; max-width:1440px; margin:clamp(70px, 12vh, 130px) auto 0; padding:0 var(--gut);
  display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; }
.steps-line{ position:absolute; left:var(--gut); right:var(--gut); top:9px; height:1px; background:var(--travertine); }
.steps-line > i{ position:absolute; inset:0; background:var(--obsidian); transform-origin:0 50%; transform:scaleX(0); will-change:transform; }
.step{ position:relative; padding-top:42px; display:flex; flex-direction:column; gap:8px; }
.step::before{ content:""; position:absolute; top:2px; left:0; width:15px; height:15px; border-radius:50%; background:var(--porcelain);
  box-shadow:inset 0 0 0 1px var(--ash); transition:background-color .4s var(--ease), box-shadow .4s var(--ease); }
.step.on::before{ background:var(--ultra); box-shadow:0 0 0 4px var(--ultra-tint); }
.step .mono{ color:var(--ash); }
.step b{ font:500 clamp(28px, 3.4vw, 52px)/1 var(--sans); letter-spacing:-.04em; }
.steps-note{ grid-column:1 / -1; margin-top:20px; font:300 italic clamp(22px, 2vw, 30px)/1.2 var(--accent); color:var(--graphite); }
@media (max-width:640px){
  .steps{ grid-template-columns:1fr; gap:26px; }
  .steps-line{ left:calc(var(--gut) + 7px); right:auto; top:9px; bottom:60px; width:1px; height:auto; }
  .steps-line > i{ transform-origin:50% 0; transform:scaleY(0); }
  .step{ padding:0 0 0 38px; }
  .step::before{ top:6px; }
}

/* ---------- talk to us ---------- */
.talk{ position:relative; overflow:hidden; background:#040404; color:var(--porcelain); min-height:100vh; min-height:100svh; display:flex; align-items:flex-end; }
.talk-bg{ position:absolute; inset:0; }
.talk-bg img{ position:absolute; left:0; top:-8%; width:100%; height:116%; object-fit:cover; object-position:64% 50%; will-change:transform; opacity:.75; }
.talk-bg::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(4,4,4,.85), rgba(4,4,4,.35) 60%, rgba(4,4,4,.2)), linear-gradient(rgba(4,4,4,.1), rgba(4,4,4,.7)); }
.talk-in{ position:relative; width:100%; max-width:1440px; margin:0 auto; padding:clamp(140px, 24vh, 260px) var(--gut) clamp(60px, 10vh, 110px); }
.talk .label{ color:var(--travertine); display:block; margin-bottom:24px; }
.talk-h{ font:500 clamp(54px, 9.6vw, 168px)/.92 var(--sans); letter-spacing:-.05em; }
.talk-h .acc{ font-size:1.02em; }
.talk-mail{ display:inline-block; margin-top:clamp(28px, 5vh, 48px); font:400 clamp(22px, 2.6vw, 40px)/1.2 var(--sans); letter-spacing:-.02em;
  border-bottom:1px solid rgba(246,244,239,.4); padding-bottom:6px; transition:border-color .3s var(--ease); }
@media (hover:hover){ .talk-mail:hover{ border-color:var(--porcelain); } }
.talk-row{ display:flex; align-items:center; gap:22px; flex-wrap:wrap; margin-top:34px; color:var(--travertine); }
@media (max-width:760px){ .talk-bg img{ object-position:70% 50%; } }

.foot{ align-items:center; }
.foot-n{ display:flex; gap:22px; }
@media (hover:hover){ .foot a:hover{ color:var(--obsidian); } }

@media (prefers-reduced-motion: reduce){
  html.pg-js [data-r]{ opacity:1; transform:none; transition:none; }
  .live b{ animation:none; }
}

/* ---------- the hero's two phones: the systems the headline is about ---------- */
.h-vis{ position:relative; flex:1 1 0; min-height:0; container-type:size; pointer-events:none; }
.h-vis .dev{ position:absolute; top:50%; height:min(100%, 460px); width:auto; }
.h-vis .dev > .frame{ height:100%; width:100%; }
.h-vis .dev:nth-child(1){ right:calc(var(--gut) * .2 + 4%); transform:translateY(-54%) rotate(5deg); z-index:2; }
.h-vis .dev:nth-child(2){ right:calc(var(--gut) * .2 + 4% + min(100cqh, 460px) * .36); transform:translateY(-44%) rotate(-7deg); }
.h-vis .dev-iph::before{ box-shadow:0 30px 60px rgba(14,15,16,.24), 0 8px 18px rgba(14,15,16,.14); }
@container (max-height:170px){ .h-vis .dev{ display:none; } }
@media (max-width:760px){ .h-vis{ margin:-8px 0; } .h-vis .dev:nth-child(1){ right:2%; } }

/* ================= Liquid glass =================
   The library's glass, as material: a pane that bends what is behind it
   (blur and a lift in saturation), lit from above (a bright top edge and a
   soft inner glow), held by a rim, and carrying one specular highlight. */
.glass-d, .glass-l{ position:relative; isolation:isolate; overflow:hidden; }
.glass-d{ background:linear-gradient(160deg, rgba(255,255,255,.16), rgba(255,255,255,.04) 55%, rgba(255,255,255,.08));
  -webkit-backdrop-filter:blur(18px) saturate(170%); backdrop-filter:blur(18px) saturate(170%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(255,255,255,.1), inset 0 0 0 1px rgba(255,255,255,.14),
    inset 0 -18px 30px -18px rgba(255,255,255,.12), 0 24px 60px -24px rgba(0,0,0,.7); }
.glass-l{ background:linear-gradient(160deg, rgba(255,255,255,.82), rgba(255,255,255,.42) 60%, rgba(255,255,255,.6));
  -webkit-backdrop-filter:blur(18px) saturate(180%); backdrop-filter:blur(18px) saturate(180%);
  box-shadow:inset 0 1px 0 #fff, inset 0 0 0 1px rgba(255,255,255,.7), inset 0 -14px 24px -16px rgba(255,255,255,.9),
    0 20px 44px -20px rgba(14,15,16,.32), 0 2px 6px rgba(14,15,16,.06); }
.glass-d::after, .glass-l::after{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; border-radius:inherit;
  background:radial-gradient(120% 70% at 18% -10%, rgba(255,255,255,.28), rgba(255,255,255,0) 55%); }
.glass-l::after{ background:radial-gradient(120% 70% at 18% -10%, rgba(255,255,255,.9), rgba(255,255,255,0) 55%); }

/* the work, on paper: the Space Black Mac reads best on light, as Apple shows it */
.work{ background:var(--porcelain); color:var(--obsidian); }
.work .sec-lead{ color:var(--graphite); }
.case-k{ color:var(--ash); }
.case-d{ color:var(--graphite); }
.case-d b{ color:var(--obsidian); }
.case-f{ border-top-color:rgba(14,15,16,.12); }
.case-f li{ border-bottom-color:rgba(14,15,16,.12); }
.work .btn{ background:var(--obsidian); color:var(--porcelain); }
.work .btn .lens{ --lb:rgba(255,255,255,.14); --lc:var(--porcelain); }
.chip{ background:linear-gradient(160deg, rgba(255,255,255,.85), rgba(255,255,255,.5)); color:var(--obsidian);
  -webkit-backdrop-filter:blur(14px) saturate(180%); backdrop-filter:blur(14px) saturate(180%);
  box-shadow:inset 0 1px 0 #fff, inset 0 0 0 1px rgba(255,255,255,.7), 0 14px 30px -14px rgba(14,15,16,.35); }

/* behind the counter, in the dark: the notifications are iOS's own glass */
.admin{ background:var(--obsidian); color:var(--porcelain); }
.admin-txt .label{ color:var(--ash); }
.admin .sec-lead{ color:var(--travertine); }
.admin-f > div{ background:linear-gradient(160deg, rgba(255,255,255,.12), rgba(255,255,255,.03)); color:var(--porcelain);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35), inset 0 0 0 1px rgba(255,255,255,.1); }
.admin-f span{ color:var(--travertine); }
.note{ background:linear-gradient(160deg, rgba(255,255,255,.72), rgba(255,255,255,.42)); color:var(--obsidian);
  -webkit-backdrop-filter:blur(20px) saturate(190%); backdrop-filter:blur(20px) saturate(190%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95), inset 0 0 0 1px rgba(255,255,255,.55), 0 18px 40px -16px rgba(0,0,0,.6); border-radius:22px; }
.note div span{ color:var(--graphite); }
.note .ni{ border-radius:10px; }

/* why: the cards as light glass over a wash of stone */
.why{ background:radial-gradient(70% 60% at 85% 40%, var(--limestone), var(--porcelain) 70%); }
.why-c{ background:linear-gradient(160deg, rgba(255,255,255,.85), rgba(255,255,255,.4) 60%, rgba(255,255,255,.6));
  box-shadow:inset 0 1px 0 #fff, inset 0 0 0 1px rgba(255,255,255,.75), 0 22px 50px -26px rgba(14,15,16,.3); }
.why-ph figcaption{ background:linear-gradient(160deg, rgba(255,255,255,.22), rgba(255,255,255,.08)); -webkit-backdrop-filter:blur(14px) saturate(160%); backdrop-filter:blur(14px) saturate(160%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5), inset 0 0 0 1px rgba(255,255,255,.18); }

/* On a phone, glass that moves is drawn as glass, not computed as glass:
   a live blur under something the scroll is moving has to be worked out
   again on every frame, and that is where a phone stutters. These panes
   keep their look with a denser fill instead. */
@media (hover:none) and (pointer:coarse){
  .chip{ -webkit-backdrop-filter:none; backdrop-filter:none; background:linear-gradient(160deg, #fff, rgba(246,244,239,.96)); }
  .note{ -webkit-backdrop-filter:none; backdrop-filter:none; background:linear-gradient(160deg, rgba(255,255,255,.94), rgba(240,238,234,.9)); }
}
.case [data-p]{ will-change:transform, opacity; }

/* the films are shown once a frame of them is drawn; their first picture lies under them */
html.pg-js video[data-v]:not(.tile-film){ opacity:0; }
.dev .scr{ background-position:50% 0; background-size:cover; background-repeat:no-repeat; }