/* =========================================================================
   ForF
   A 1940s dance-hall show bill, run through a blown amp.
   Fat poster slab + condensed marquee + typewriter fine print,
   aged paper against warm ink black — all of it seen through cracked glass.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Ultra&family=Oswald:wght@400;500;600;700&family=Special+Elite&display=swap');

:root{
  /* warm ink, not digital black — this is printed matter */
  --ink:#14110c;
  --ink-2:#1c1813;
  --ink-3:#241f18;
  --paper:#ddd4bf;
  --paper-lit:#eae2d0;
  --paper-shade:#c6bca4;
  --bone:#efe8d8;
  --dim:#938a76;
  --dim-dark:#6f6857;
  --red:#b8232a;
  --red-lit:#d6362c;
  --gold:#c79a3e;

  --max:1180px;
  --gutter:clamp(1.25rem, 4vw, 3rem);

  --poster:'Ultra', 'Alfa Slab One', Georgia, serif;
  --marquee:'Oswald', 'Arial Narrow', Impact, sans-serif;
  --type:'Special Elite', 'Courier New', monospace;
  --body:Georgia, 'Iowan Old Style', 'Times New Roman', serif;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
}

body{
  margin:0;
  background:var(--ink);
  color:var(--bone);
  font-family:var(--body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%;display:block;}
a{color:inherit;}
::selection{background:var(--red);color:var(--bone);}
:focus-visible{outline:3px solid var(--red-lit); outline-offset:3px;}

.wrap{max-width:var(--max); margin-inline:auto; padding-inline:var(--gutter);}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:1200;
  background:var(--red);color:var(--bone);padding:.8rem 1.3rem;
  font-family:var(--marquee);font-weight:700;letter-spacing:.1em;text-decoration:none;
}
.skip-link:focus{left:1rem;top:1rem;}

/* ============================== TYPE ==================================== */

h2{
  font-family:var(--poster);
  font-size:clamp(1.9rem, 5.4vw, 3.6rem);
  line-height:.96;
  letter-spacing:-.01em;
  text-transform:uppercase;
  margin:0 0 1.2rem;
}
.section-label{
  font-family:var(--marquee);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.34em;
  font-size:.72rem;
  color:var(--red-lit);
  margin:0 0 .9rem;
}
.paper .section-label{color:var(--red-lit);}

/* deco rule: hairline — diamond — hairline */
.rule{
  display:flex;align-items:center;gap:.6rem;
  margin:0 0 1.8rem;max-width:340px;
}
.rule::before,.rule::after{content:"";height:2px;background:currentColor;opacity:.55;}
.rule::before{width:54px;flex:none;}
.rule::after{flex:1;height:1px;opacity:.28;}
.rule i{
  width:7px;height:7px;background:currentColor;transform:rotate(45deg);flex:none;opacity:.8;
}
.paper .rule{color:var(--red-lit);}
section:not(.paper) .rule{color:var(--red-lit);}

/* ============================== TICKER ================================== */

.ticker{
  background:var(--red);
  color:var(--bone);
  overflow:hidden;white-space:nowrap;
  border-bottom:3px double rgba(0,0,0,.45);
  position:relative;z-index:50;
}
.ticker__track{display:inline-flex;padding:.42rem 0;animation:ticker 42s linear infinite;}
.ticker__track span{
  font-family:var(--marquee);font-weight:600;
  font-size:clamp(.68rem,1.4vw,.82rem);
  letter-spacing:.22em;text-transform:uppercase;
  padding:0 1.6rem;
  border-right:1px solid rgba(255,255,255,.35);
}
@keyframes ticker{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@media (prefers-reduced-motion: reduce){.ticker__track{animation:none;}}

/* ============================== NAV ===================================== */

.site-nav{
  position:sticky;top:0;z-index:40;
  background:rgba(20,17,12,.86);
  backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);
  border-bottom:1px solid rgba(239,232,216,.13);
}
.site-nav .wrap{display:flex;align-items:center;justify-content:space-between;padding-block:.55rem;}
.brand{display:flex;align-items:center;text-decoration:none;}
.brand img{height:24px;width:auto;}
.nav-links{display:flex;gap:clamp(.85rem,2vw,1.9rem);list-style:none;margin:0;padding:0;}
.nav-links a{
  font-family:var(--marquee);font-weight:500;
  font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--dim);text-decoration:none;
  padding:.35rem 0;border-bottom:2px solid transparent;
  transition:color .15s, border-color .15s;
}
.nav-links a:hover,.nav-links a:focus-visible{color:var(--bone);border-color:var(--red-lit);}

/* ============================== BUTTONS ================================= */

.btn{
  display:inline-flex;align-items:center;gap:.55rem;
  font-family:var(--marquee);font-weight:600;
  text-transform:uppercase;letter-spacing:.14em;font-size:.82rem;
  text-decoration:none;padding:.85rem 1.5rem;
  border:2px solid var(--bone);color:var(--bone);background:transparent;
  transition:background .15s, color .15s, border-color .15s;
}
.btn:hover,.btn:focus-visible{background:var(--bone);color:var(--ink);}
.btn--red{background:var(--red);border-color:var(--red);color:var(--bone);}
.btn--red:hover,.btn--red:focus-visible{background:var(--bone);border-color:var(--bone);color:var(--ink);}
.btn svg{width:1.15em;height:1.15em;flex:none;}

/* ============================== HERO ==================================== */

.hero{position:relative;min-height:100svh;display:flex;align-items:center;isolation:isolate;}
.hero__bg{position:absolute;inset:0;z-index:-2;overflow:hidden;}
.hero__bg img{
  width:100%;height:100%;object-fit:cover;object-position:center 16%;
  filter:sepia(.28) contrast(1.12) brightness(.9);
}
.hero__bg::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(120% 90% at 50% 30%, rgba(20,17,12,.05) 0%, rgba(20,17,12,.72) 70%, rgba(20,17,12,.95) 100%),
    linear-gradient(180deg, rgba(20,17,12,.55) 0%, transparent 30%, rgba(20,17,12,.9) 100%);
}
.hero__content{position:relative;z-index:1;width:100%;text-align:center;padding-block:5rem 4rem;}

.bill-line{
  font-family:var(--marquee);font-weight:500;
  font-size:clamp(.62rem,1.5vw,.78rem);
  letter-spacing:.42em;text-transform:uppercase;
  color:var(--paper-shade);
  display:flex;align-items:center;justify-content:center;gap:.9rem;
  margin:0 0 1.4rem;
}
.bill-line::before,.bill-line::after{
  content:"";height:1px;flex:1;max-width:120px;
  background:linear-gradient(90deg,transparent,var(--paper-shade));
}
.bill-line::after{background:linear-gradient(270deg,transparent,var(--paper-shade));}

.hero__logo{
  width:min(660px,80vw);height:auto;margin:0 auto 1.3rem;
  filter:drop-shadow(0 8px 30px rgba(0,0,0,.75));
}
.hero__tag{
  font-family:var(--poster);
  font-size:clamp(1.15rem,3.4vw,2.15rem);
  line-height:1.06;text-transform:uppercase;
  color:var(--bone);
  max-width:16ch;margin:0 auto 2rem;
  text-shadow:0 3px 18px rgba(0,0,0,.8);
}
.hero__cta{display:flex;flex-wrap:wrap;gap:.85rem;justify-content:center;}
.hero__foot{
  margin:2.2rem 0 0;
  font-family:var(--type);
  font-size:clamp(.62rem,1.4vw,.74rem);
  letter-spacing:.2em;text-transform:uppercase;color:var(--dim);
}

/* ============================== SECTIONS ================================ */

section{padding-block:clamp(3.5rem,9vw,7rem);position:relative;}

/* The show-bill panel. Kept as a distinct surface for rhythm, but dark:
   on beige the keyed crack layer's background-estimate artefacts are plainly
   visible, and on near-black they simply aren't. */
.paper{
  background:var(--ink-2);
  color:var(--bone);
  position:relative;
  border-block:1px solid rgba(239,232,216,.14);
}
.paper::before{  /* paper tooth, screened so it lifts rather than muddies */
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.05;
  mix-blend-mode:screen;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='p'><feTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4'/></filter><rect width='100%25' height='100%25' filter='url(%23p)'/></svg>");
}
.paper::after{  /* vignette */
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(115% 80% at 50% 45%, transparent 40%, rgba(0,0,0,.42) 100%);
}
.paper > *{position:relative;z-index:1;}
.paper p{color:#bdb5a4;}

.lede{font-size:clamp(1.15rem,2.3vw,1.5rem);line-height:1.45;max-width:34ch;}
.paper .lede{color:var(--bone);}
.copy p{max-width:46ch;margin:0 0 1.15rem;font-size:clamp(1rem,1.6vw,1.1rem);}

.split{display:grid;gap:2.6rem;grid-template-columns:1fr;}
@media(min-width:900px){.split{grid-template-columns:.85fr 1.15fr;align-items:start;}}

.reveal{opacity:0;transform:translateY(22px);transition:opacity .5s ease-out, transform .5s ease-out;}
.reveal.in-view{opacity:1;transform:none;}

/* rubber stamp */
.stamp{
  position:absolute;
  font-family:var(--marquee);font-weight:700;
  text-transform:uppercase;letter-spacing:.14em;
  font-size:clamp(.7rem,1.7vw,1rem);
  color:var(--red-lit);border:3px solid var(--red-lit);
  padding:.42rem .9rem;opacity:.4;
  pointer-events:none;
  white-space:nowrap;
}
.stamp--a{right:4%;top:14%;transform:rotate(-13deg);}
.stamp--b{right:9%;bottom:11%;transform:rotate(7deg);}
@media(max-width:820px){.stamp--a{top:auto;bottom:3%;right:4%;}.stamp--b{display:none;}}

/* screen-printed photo pasted onto the bill */
.paste{position:relative;transform:rotate(-1.1deg);max-width:440px;margin:2rem 0 0;}
.paste img{width:100%;opacity:.9;}
.paste figcaption{
  font-family:var(--type);font-size:.72rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--dim);margin-top:.7rem;
}

/* ============================== PULL QUOTE ============================== */

.shout{
  background:var(--ink-2);
  border-block:1px solid rgba(239,232,216,.1);
  text-align:center;
}
.shout blockquote{
  margin:0;font-family:var(--poster);
  font-size:clamp(1.6rem,6.2vw,4.4rem);
  line-height:.94;text-transform:uppercase;
  color:var(--bone);
}
.shout blockquote em{color:var(--red-lit);font-style:normal;}
.shout cite{
  display:block;margin-top:1.6rem;
  font-family:var(--type);font-style:normal;
  font-size:.78rem;letter-spacing:.3em;text-transform:uppercase;color:var(--dim);
}

/* ============================== VIDEO =================================== */

.video-frame{
  position:relative;width:100%;aspect-ratio:16/9;background:#000;
  border:1px solid rgba(239,232,216,.16);cursor:pointer;overflow:hidden;
}
.video-frame img{
  width:100%;height:100%;object-fit:cover;opacity:.72;
  filter:sepia(.2) contrast(1.05);
  transition:opacity .25s, transform .5s;
}
.video-frame:hover img{opacity:.52;transform:scale(1.025);}
.video-frame__play{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:1rem;}
.play-btn{
  width:76px;height:76px;border-radius:50%;background:var(--red);color:var(--bone);
  display:flex;align-items:center;justify-content:center;transition:transform .2s;
}
.video-frame:hover .play-btn{transform:scale(1.09);}
.play-btn svg{width:27px;height:27px;margin-left:4px;}
.video-frame__label{
  font-family:var(--marquee);font-weight:600;text-transform:uppercase;
  letter-spacing:.2em;font-size:clamp(.72rem,1.7vw,.92rem);
  color:var(--bone);text-shadow:0 2px 12px rgba(0,0,0,.9);
}
.video-frame iframe{width:100%;height:100%;border:0;display:block;}
.video-meta{
  display:flex;flex-wrap:wrap;gap:.6rem 2rem;margin-top:1.1rem;
  font-family:var(--type);font-size:.78rem;letter-spacing:.06em;color:var(--dim);
}
.video-meta strong{color:var(--bone);font-weight:400;}

/* ============================== PROGRAM ================================= */

.program{list-style:none;margin:2rem 0 0;padding:0;border-top:1px solid rgba(239,232,216,.16);}
.program li{
  display:flex;align-items:baseline;gap:1rem;
  padding:1.05rem .2rem;border-bottom:1px solid rgba(239,232,216,.16);
}
.program .no{
  font-family:var(--type);font-size:.8rem;color:var(--dim-dark);flex:none;width:2.2rem;
}
.program .title{
  font-family:var(--poster);text-transform:uppercase;
  font-size:clamp(1.05rem,2.9vw,1.75rem);line-height:1;
  flex:1;min-width:0;
}
.program .title a{text-decoration:none;border-bottom:3px solid var(--red);}
.program .title a:hover,.program .title a:focus-visible{color:var(--red-lit);}
.program .state{
  font-family:var(--marquee);font-weight:500;flex:none;
  font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--dim-dark);
}
.program .state.now{color:var(--red-lit);}
.program__note{
  font-family:var(--type);font-size:.8rem;color:var(--dim);margin-top:1.4rem;letter-spacing:.04em;
}

/* ============================== GALLERY ================================= */

.gallery{display:grid;gap:.9rem;grid-template-columns:repeat(6,1fr);}
.gallery figure{margin:0;overflow:hidden;position:relative;background:#000;height:100%;}
.gallery img{
  width:100%;height:100%;object-fit:cover;
  filter:sepia(.22) contrast(1.06) brightness(.94);
  transition:transform .5s, filter .5s;
}
.gallery figure:hover img{transform:scale(1.04);filter:sepia(0) contrast(1.1);}
.gallery .g1{grid-column:span 6;}
.gallery .g2,.gallery .g3{grid-column:span 3;aspect-ratio:4/5;}
@media(min-width:760px){
  .gallery .g1{grid-column:span 4;grid-row:span 2;}
  .gallery .g1 img{height:100%;}
  .gallery .g2,.gallery .g3{grid-column:span 2;}
}
.gallery figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:.85rem 1rem;
  font-family:var(--type);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--bone);background:linear-gradient(0deg,rgba(0,0,0,.82),transparent);
  opacity:0;transition:opacity .2s;
}
.gallery figure:hover figcaption{opacity:1;}

/* ============================== LISTEN ================================== */

.listen{background:var(--ink-2);border-top:1px solid rgba(239,232,216,.1);}
.platform-list{list-style:none;margin:0;padding:0;display:grid;gap:.7rem;}
.platform-list a{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1.05rem 1.25rem;border:1px solid rgba(239,232,216,.18);text-decoration:none;
  font-family:var(--marquee);font-weight:600;text-transform:uppercase;letter-spacing:.16em;
  font-size:.86rem;transition:border-color .15s, background .15s, transform .12s;
}
.platform-list a:hover,.platform-list a:focus-visible{
  border-color:var(--red-lit);background:rgba(184,35,42,.12);transform:translateX(4px);
}
.platform-list .lhs{display:flex;align-items:center;gap:.75rem;}
.platform-list svg{width:21px;height:21px;flex:none;}
.platform-list .arrow{opacity:.45;}
.spotify-embed{border:1px solid rgba(239,232,216,.18);overflow:hidden;background:#000;}
.spotify-embed iframe{display:block;width:100%;border:0;}

/* ============================== FAQ ===================================== */

.faq{max-width:820px;}
.faq details{border-bottom:1px solid rgba(239,232,216,.16);padding:1.05rem 0;}
.faq summary{
  cursor:pointer;list-style:none;
  font-family:var(--poster);text-transform:uppercase;
  font-size:clamp(.98rem,2.2vw,1.25rem);line-height:1.1;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+";font-family:var(--marquee);font-size:1.7rem;color:var(--red-lit);flex:none;line-height:1;}
.faq details[open] summary::after{content:"\2013";}
.faq p{margin:.85rem 0 0;max-width:62ch;font-size:1rem;}

/* ============================== FOOTER ================================== */

footer{border-top:3px double rgba(239,232,216,.2);padding-block:2.6rem;}
.footer__grid{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.4rem;}
.footer__brand img{height:19px;width:auto;opacity:.8;}
.footer__links{display:flex;gap:1.3rem;list-style:none;padding:0;margin:0;}
.footer__links a{
  font-family:var(--marquee);font-weight:500;
  font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--dim);text-decoration:none;
}
.footer__links a:hover,.footer__links a:focus-visible{color:var(--red-lit);}
.footer__fine{
  width:100%;margin:1.3rem 0 0;
  font-family:var(--type);font-size:.72rem;letter-spacing:.05em;color:var(--dim-dark);
  max-width:70ch;line-height:1.7;
}

/* =========================================================================
   THE GLASS
   A fixed pane in front of everything. The page scrolls behind it, so the
   fracture never moves. Each shard is its own tiny backdrop-filter layer:
   the transform on .shard__lens offsets the sampled backdrop, which is what
   makes each facet show the page at a slightly different angle.
   ========================================================================= */

.glass{
  position:fixed;inset:0;z-index:900;
  pointer-events:none;
  contain:strict;
}
.glass__shards{position:absolute;inset:0;}

.shard{position:absolute;overflow:hidden;}       /* left/top/width/height + clip-path generated */
.shard__lens{
  position:absolute;inset:-30%;
  transform-origin:50% 50%;
}
.shard__lens::after{                              /* light skating off the facet */
  content:"";position:absolute;inset:0;
  background:linear-gradient(115deg,
    rgba(255,255,255,.85) 0%, rgba(255,255,255,0) 42%,
    rgba(255,255,255,0) 62%, rgba(255,255,255,.4) 100%);
  opacity:var(--sheen,0);
  mix-blend-mode:screen;
}

/* The fracture is a keyed photograph, split into two layers.
   A crack is both a shadow and a specular: over the dark sections it has to
   read BRIGHT (light scattering in the break), over the light paper it has to
   read DARK. One flat overlay can't do both, so the shadows multiply and the
   glints screen — which is what glass actually does, and works on any backdrop.
   Neither layer ever changes, so both get their own compositor layer and are
   rasterised once instead of repainted on every scrolled frame. */
.glass__dark,
.glass__lit{
  position:absolute;inset:0;
  background-position:center;
  background-repeat:no-repeat;
  background-size:100% 100%;
  transform:translateZ(0);
  will-change:transform;
}
.glass__dark{
  background-image:url("/images/crack-dark.webp");
  mix-blend-mode:multiply;
  opacity:.5;
}
.glass__lit{
  background-image:url("/images/crack-lit.webp");
  mix-blend-mode:screen;
  opacity:.62;
}
/* Portrait can't use the landscape framing without squashing the fracture,
   so cover-crop it instead. The refracting facets are switched off below at
   this width anyway, so nothing has to stay aligned. */
@media (orientation:portrait){
  .glass__dark,.glass__lit{background-size:cover;}
}

/* ---- true refraction -------------------------------------------------
   The facets below give each shard a flat offset. This does the other half:
   actual bending of whatever is behind, concentrated AT the breaks.

   refract-map.png encodes the gradient of the fracture's groove depth in R/G,
   so feDisplacementMap pushes each pixel by the local surface slope — hard at
   a crack edge, zero across a flat facet. That is what makes text and images
   look like they are genuinely behind the glass rather than under a picture
   of one.

   Two things keep it affordable. The filter REGION (set on the <filter>, not
   here) covers only the dense impact area, because that is the whole cost;
   and the mask feathers the effect out well inside that region, so the edge
   of the filtered area never shows as a rectangle. */
.glass-refract{
  position:fixed;inset:0;z-index:899;pointer-events:none;
}
.glass__refract{
  position:absolute;inset:0;
  backdrop-filter:url(#forf-refract);
  -webkit-backdrop-filter:url(#forf-refract);
  -webkit-mask-image:radial-gradient(ellipse 30% 42% at 71% 23%, #000 0%, #000 38%, transparent 80%);
  mask-image:radial-gradient(ellipse 30% 42% at 71% 23%, #000 0%, #000 38%, transparent 80%);
}
.glass__filter-defs{position:absolute;width:0;height:0;overflow:hidden;}

/* One displacement mechanism at a time, never two.

   True refraction and the per-facet offsets do the same job, and stacking them
   is catastrophic rather than merely additive: every facet's backdrop-filter
   has to re-composite the already-refracted result underneath it. Measured on
   this build, both together cost 160ms/frame against 32ms for refraction
   alone — 5x the cost for no visual gain.

   So where url() filters work in backdrop-filter (Chrome, Edge) the refraction
   runs and the facets are switched off; where they don't (Safari, Firefox) the
   facets run instead and still read as glass. */
@supports (backdrop-filter:url(#forf-refract)) or (-webkit-backdrop-filter:url(#forf-refract)){
  .glass__shards{display:none;}
}
@supports not ((backdrop-filter:url(#forf-refract)) or (-webkit-backdrop-filter:url(#forf-refract))){
  .glass__refract{display:none;}
}
@media (max-width:760px){
  .glass__refract{display:none;}
}



/* the way out */
.glass-toggle{
  position:fixed;right:.85rem;bottom:.85rem;z-index:1000;
  font-family:var(--marquee);font-weight:600;
  font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--paper-shade);background:rgba(20,17,12,.72);
  border:1px solid rgba(239,232,216,.28);
  padding:.5rem .8rem;cursor:pointer;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  transition:color .15s, border-color .15s;
}
.glass-toggle:hover,.glass-toggle:focus-visible{color:var(--bone);border-color:var(--red-lit);}

/* swept up */
body.no-glass .glass,
body.no-glass .glass-refract{display:none;}

/* Set by the runtime frame-rate guard in main.js when a device can't composite
   14 live backdrop layers smoothly. Keeps the fracture and the per-shard tints
   — which cost nothing — and drops only the expensive refraction. */
body.glass-lite .glass__refract,
body.glass-lite .glass__shards{display:none;}
body.glass-lite .shard__lens{
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

/* Second step of the guard: blending two full-viewport layers is the single
   most expensive thing on this page without a GPU. Compositing them normally
   instead keeps the fracture — it just stops reacting to what's behind it. */
body.glass-flat .glass__dark{mix-blend-mode:normal;opacity:.34;}
body.glass-flat .glass__lit{mix-blend-mode:normal;opacity:.5;}

/* Fewer live filter layers on phones, and none of the heaviest ones.
   The fracture lines stay — they cost nothing. */
@media (max-width:760px){
  .glass__shards{display:none;}
}

/* Respect people who don't want the pane at all */
@media (prefers-reduced-transparency: reduce){
  .shard__lens{backdrop-filter:none !important;-webkit-backdrop-filter:none !important;}
}

/* No backdrop-filter support: keep the cracks, drop the tints so nothing
   sits as a flat grey slab over the page. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .shard__lens{background:none !important;}
}

/* ---- generated from the photographed fracture — tools/glass_gen.py ---- */
.shard.s0{left:83.11%;top:59.72%;width:14.19%;height:26.46%;clip-path:polygon(51.61% 100%, 45.18% 96.31%, 24.77% 80.26%, 24.08% 78.6%, 22.48% 78.41%, 15.14% 68.08%, 16.06% 66.97%, 13.76% 66.24%, 15.14% 64.02%, 13.76% 60.7%, 11.01% 58.86%, 12.39% 56.27%, 10.55% 54.06%, 10.09% 48.15%, 8.72% 46.31%, 5.5% 26.01%, 7.34% 26.38%, 9.63% 31.18%, 14.91% 33.21%, 21.33% 39.48%, 27.29% 37.27%, 27.98% 35.61%, 20.87% 29.15%, 18.58% 28.78%, 10.78% 23.25%, 6.19% 22.14%, 3.67% 19.37%, 3.21% 13.47%, 0% 5.35%, 0.46% 2.4%, 2.98% 0%, 14.91% 4.43%, 29.13% 16.97%, 35.55% 16.97%, 41.51% 18.82%, 55.28% 15.87%, 58.26% 18.63%, 57.8% 21.96%, 59.86% 23.25%, 61.7% 22.88%, 63.99% 24.35%, 71.33% 22.88%, 76.38% 23.25%, 83.03% 33.39%, 88.53% 44.1%, 88.07% 45.57%, 100% 55.9%, 91.28% 65.87%, 78.9% 76.2%, 78.44% 78.04%, 51.61% 100%);}
.shard.s0 .shard__lens{backdrop-filter:brightness(1.09) saturate(1.03);-webkit-backdrop-filter:brightness(1.09) saturate(1.03);transform:translate(7px,-4px) rotate(0.4deg) scale(1.026);--sheen:0.09;}
.shard.s1{left:67.35%;top:74.76%;width:7.49%;height:13.28%;clip-path:polygon(40.43% 100%, 34.35% 96.32%, 30.87% 97.06%, 27.39% 93.38%, 24.78% 94.12%, 19.57% 87.5%, 15.22% 89.71%, 10% 88.97%, 0.87% 79.78%, 4.35% 77.57%, 1.74% 74.63%, 3.48% 59.93%, 0% 49.63%, 2.61% 42.28%, 0% 40.07%, 4.35% 38.6%, 3.48% 31.99%, 8.7% 29.78%, 18.7% 14.71%, 27.39% 23.53%, 31.3% 21.69%, 31.3% 17.28%, 20.87% 11.4%, 30.87% 0%, 34.78% 4.04%, 30% 3.68%, 29.57% 6.99%, 24.35% 8.46%, 27.39% 11.03%, 32.61% 9.56%, 36.96% 13.97%, 42.17% 13.24%, 44.78% 10.29%, 50% 11.03%, 66.96% 21.69%, 61.74% 24.63%, 63.91% 26.47%, 69.13% 27.94%, 73.48% 25%, 80.87% 29.78%, 78.26% 31.99%, 79.57% 34.56%, 83.04% 31.62%, 90.87% 36.03%, 93.48% 35.29%, 97.39% 38.6%, 94.78% 41.54%, 100% 47.43%, 99.13% 54.04%, 94.78% 55.51%, 94.78% 65.81%, 90% 71.32%, 86.52% 68.38%, 84.35% 69.49%, 87.39% 72.79%, 90.43% 72.43%, 89.57% 75.37%, 74.78% 83.46%, 79.13% 85.66%, 77.83% 86.76%, 70% 87.5%, 65.65% 81.62%, 62.17% 82.35%, 57.83% 79.41%, 56.52% 81.25%, 64.35% 86.4%, 62.17% 88.24%, 56.96% 87.5%, 50.87% 83.09%, 48.26% 84.56%, 44.35% 80.51%, 49.13% 80.88%, 51.3% 79.04%, 49.13% 77.21%, 43.91% 77.21%, 39.13% 80.51%, 44.35% 85.66%, 41.74% 90.07%, 45.22% 93.01%, 45.22% 95.96%, 40.43% 100%);}
.shard.s1 .shard__lens{backdrop-filter:brightness(0.9) saturate(0.94);-webkit-backdrop-filter:brightness(0.9) saturate(0.94);transform:translate(-6px,5px) rotate(-0.55deg) scale(1.01);--sheen:0.0;}
.shard.s2{left:91.37%;top:79.25%;width:8.56%;height:12.99%;clip-path:polygon(100% 60.15%, 96.96% 55.64%, 83.27% 67.67%, 79.47% 66.92%, 47.53% 86.47%, 42.97% 91.73%, 34.6% 93.23%, 25.48% 100%, 9.89% 83.83%, 0% 68.8%, 0% 64.29%, 4.18% 59.4%, 12.55% 58.65%, 19.39% 53.38%, 21.67% 55.64%, 35.36% 52.63%, 61.98% 53.38%, 73% 34.21%, 73% 29.7%, 77.57% 25.19%, 77.57% 20.68%, 82.89% 14.66%, 85.17% 4.14%, 100% 0%);}
.shard.s2 .shard__lens{backdrop-filter:brightness(1.04) saturate(1.0) blur(1.6px);-webkit-backdrop-filter:brightness(1.04) saturate(1.0) blur(1.6px);transform:translate(4px,3px) rotate(0.28deg) scale(1.02);--sheen:0.12;}
.shard.s3{left:84.02%;top:6.01%;width:14.91%;height:20.9%;clip-path:polygon(17.25% 100%, 10.7% 97.66%, 4.15% 92.99%, 0.44% 87.15%, 0% 82.94%, 15.28% 60.98%, 20.96% 56.31%, 20.74% 54.67%, 23.36% 55.14%, 24.45% 53.97%, 26.2% 50.7%, 24.02% 49.3%, 24.45% 47.43%, 26.42% 45.33%, 28.6% 45.33%, 43.45% 27.57%, 57.42% 15.89%, 71.83% 7.01%, 72.71% 4.67%, 74.89% 5.61%, 81.44% 1.87%, 88.43% 0%, 89.08% 3.97%, 87.34% 5.84%, 89.96% 8.18%, 88.65% 10.98%, 91.48% 9.81%, 95.41% 13.08%, 97.82% 19.86%, 99.56% 20.79%, 97.82% 22.2%, 97.82% 27.34%, 100% 30.14%, 100% 33.41%, 98.25% 34.35%, 96.07% 39.49%, 83.62% 50.47%, 73.14% 50.47%, 68.78% 54.21%, 67.03% 53.74%, 61.79% 57.01%, 57.86% 57.48%, 55.68% 56.07%, 55.02% 60.51%, 56.77% 61.45%, 55.9% 63.79%, 57.64% 67.99%, 55.9% 70.79%, 58.95% 71.26%, 55.68% 72.43%, 46.94% 81.31%, 43.89% 82.71%, 42.14% 85.98%, 31.66% 92.99%, 17.25% 100%);}
.shard.s3 .shard__lens{backdrop-filter:brightness(0.95) saturate(0.98);-webkit-backdrop-filter:brightness(0.95) saturate(0.98);transform:translate(9px,6px) rotate(0.75deg) scale(1.0);--sheen:0.04;}
.shard.s4{left:81.61%;top:80.32%;width:11.39%;height:16.5%;clip-path:polygon(51.71% 100%, 39.14% 95.86%, 34.57% 91.12%, 0% 76.04%, 4% 61.24%, 6.29% 56.51%, 12.57% 50.59%, 10.86% 48.22%, 22.86% 25.74%, 22.29% 23.37%, 24.57% 21.6%, 28.57% 10.36%, 35.14% 0%, 54.29% 18.64%, 52.29% 22.49%, 38.29% 32.25%, 38.86% 34.02%, 35.43% 39.94%, 36.57% 42.31%, 42% 43.2%, 46.86% 38.17%, 45.71% 36.98%, 51.71% 28.99%, 62.57% 33.73%, 62% 31.36%, 52.57% 25.74%, 56.86% 21.89%, 65.14% 28.11%, 65.71% 31.07%, 100% 73.08%, 98% 79.88%, 95.71% 79.29%, 90% 85.21%, 68.86% 99.41%, 59.14% 95.86%, 51.71% 100%);}
.shard.s4 .shard__lens{backdrop-filter:brightness(1.12) saturate(1.06);-webkit-backdrop-filter:brightness(1.12) saturate(1.06);transform:translate(-8px,-6px) rotate(-0.45deg) scale(1.034);--sheen:0.15;}
.shard.s5{left:86.56%;top:36.28%;width:13.38%;height:21.39%;clip-path:polygon(100% 84.47%, 96.59% 83.56%, 95.13% 86.3%, 94.16% 84.47%, 91.73% 85.39%, 90.02% 83.79%, 90.27% 77.63%, 88.08% 84.25%, 85.89% 86.3%, 69.34% 86.76%, 67.64% 85.62%, 69.59% 81.96%, 68.86% 80.82%, 64.96% 85.39%, 59.37% 86.07%, 63.26% 88.36%, 60.34% 91.1%, 59.37% 94.75%, 50.85% 100%, 46.72% 97.03%, 45.74% 93.38%, 46.23% 90.64%, 53.04% 86.53%, 53.53% 82.88%, 49.39% 78.08%, 41.61% 74.89%, 37.23% 69.86%, 33.58% 69.18%, 38.44% 75.11%, 35.52% 77.85%, 38.93% 80.14%, 39.66% 82.65%, 42.34% 83.33%, 42.82% 85.16%, 41.12% 85.84%, 37.71% 82.19%, 26.52% 83.56%, 24.09% 82.19%, 18.49% 73.29%, 20.92% 66.89%, 23.84% 64.61%, 23.36% 62.33%, 19.95% 60.05%, 20.92% 58.68%, 19.22% 57.08%, 18.25% 57.99%, 16.06% 55.94%, 17.03% 54.57%, 13.63% 52.28%, 9.73% 44.06%, 12.9% 37.44%, 17.76% 36.53%, 21.65% 37.9%, 22.87% 36.3%, 10.71% 29.45%, 10.22% 25.8%, 8.27% 23.97%, 10.22% 22.6%, 1.22% 16.89%, 0% 13.47%, 0.49% 9.36%, 5.6% 2.28%, 10.46% 0%, 14.84% 0%, 30.41% 3.2%, 35.77% 2.74%, 37.71% 4.11%, 40.15% 2.74%, 42.09% 5.94%, 46.47% 7.31%, 48.91% 5.02%, 70.32% 12.33%, 73.72% 12.33%, 90.75% 18.72%, 97.57% 24.66%, 99.76% 23.52%, 97.32% 18.49%, 99.03% 17.35%, 98.78% 18.95%, 100% 19.18%);}
.shard.s5 .shard__lens{backdrop-filter:brightness(0.92) saturate(0.95);-webkit-backdrop-filter:brightness(0.92) saturate(0.95);transform:translate(5px,-7px) rotate(0.55deg) scale(1.014);--sheen:0.0;}
.shard.s6{left:82.78%;top:50.63%;width:9.38%;height:12.3%;clip-path:polygon(92.01% 100%, 87.85% 96.03%, 85.76% 96.83%, 78.82% 86.51%, 76.04% 89.68%, 70.49% 82.54%, 67.01% 84.13%, 65.97% 79.76%, 62.15% 76.98%, 53.12% 83.33%, 51.04% 81.75%, 42.71% 93.65%, 39.58% 88.49%, 41.32% 86.51%, 44.44% 87.7%, 43.75% 83.73%, 50.69% 76.59%, 49.65% 75.4%, 44.1% 73.02%, 38.89% 77.38%, 40.97% 80.56%, 34.38% 84.13%, 31.6% 79.37%, 17.71% 69.05%, 10.76% 57.14%, 8.68% 58.73%, 4.86% 55.95%, 6.25% 51.98%, 2.08% 51.19%, 0% 42.46%, 4.51% 42.06%, 7.29% 49.21%, 9.03% 47.22%, 6.25% 44.84%, 9.38% 38.89%, 14.93% 49.21%, 19.79% 48.41%, 22.92% 39.29%, 20.83% 36.11%, 22.92% 25.79%, 18.75% 17.86%, 22.22% 16.27%, 20.83% 13.89%, 23.26% 11.11%, 27.43% 11.9%, 28.82% 9.52%, 30.9% 11.9%, 34.72% 7.54%, 30.21% 5.56%, 28.12% 9.52%, 26.04% 8.73%, 23.61% 5.95%, 23.96% 0%, 26.04% 2.38%, 30.9% 0%, 37.5% 6.75%, 35.42% 14.68%, 39.24% 14.29%, 39.93% 19.05%, 43.4% 15.87%, 68.4% 34.13%, 83.33% 53.57%, 86.81% 59.13%, 86.11% 61.51%, 89.24% 61.9%, 96.53% 71.83%, 95.83% 74.21%, 100% 77.38%, 97.92% 82.94%, 87.5% 86.9%, 90.62% 91.27%, 93.4% 87.3%, 95.83% 92.46%, 96.53% 94.84%, 92.01% 100%);}
.shard.s6 .shard__lens{backdrop-filter:brightness(1.02) saturate(1.0);-webkit-backdrop-filter:brightness(1.02) saturate(1.0);transform:translate(-10px,4px) rotate(-0.75deg) scale(1.022);--sheen:0.06;}
.shard.s7{left:72.04%;top:24.76%;width:10.94%;height:17.09%;clip-path:polygon(67.56% 100%, 60.42% 98.29%, 58.63% 99.43%, 51.49% 94.29%, 41.37% 90.29%, 34.82% 88.57%, 30.65% 90.29%, 16.07% 75.14%, 16.07% 67.71%, 8.93% 59.71%, 5.36% 49.43%, 0% 43.71%, 0.6% 38%, 8.93% 20.29%, 13.39% 16.57%, 24.7% 20%, 26.19% 16.29%, 23.81% 11.14%, 26.19% 8.29%, 30.65% 4.57%, 40.18% 2.86%, 41.96% 0%, 58.04% 0.57%, 62.8% 2.86%, 65.48% 9.43%, 79.46% 22.29%, 83.33% 23.14%, 86.9% 31.14%, 87.5% 39.71%, 98.81% 46.57%, 96.43% 50.57%, 100% 56.86%, 97.02% 66%, 98.81% 72.86%, 94.64% 79.14%, 95.24% 82%, 88.39% 90.29%, 80.06% 92%, 67.56% 100%);}
.shard.s7 .shard__lens{backdrop-filter:brightness(1.06) saturate(0.88) blur(1.2px);-webkit-backdrop-filter:brightness(1.06) saturate(0.88) blur(1.2px);transform:translate(6px,8px) rotate(0.35deg) scale(1.005);--sheen:0.11;}
.shard.s8{left:66.31%;top:51.03%;width:18.82%;height:42.19%;clip-path:polygon(78.72% 100%, 76.99% 99.31%, 70.76% 99.77%, 66.26% 98.84%, 56.92% 99.31%, 50.69% 98.61%, 38.93% 95.37%, 34.6% 93.4%, 34.26% 92.48%, 42.91% 84.84%, 44.64% 77.89%, 50.87% 71.18%, 51.21% 69.56%, 19.9% 53.47%, 18.51% 54.17%, 17.82% 52.78%, 5.71% 47.69%, 0.35% 44.56%, 0% 42.71%, 11.42% 31.37%, 19.9% 28.01%, 26.47% 24.31%, 31.66% 25%, 36.85% 26.85%, 37.54% 28.01%, 38.06% 27.66%, 38.93% 25.93%, 36.85% 26.16%, 28.72% 22.57%, 29.41% 19.79%, 33.91% 13.08%, 37.02% 10.76%, 37.02% 9.61%, 39.1% 8.91%, 45.67% 1.74%, 49.65% 0.23%, 52.08% 0.93%, 53.11% 0%, 60.21% 1.97%, 58.13% 2.89%, 56.57% 6.02%, 61.42% 2.08%, 64.53% 2.55%, 63.84% 1.16%, 65.92% 1.62%, 68.34% 0.23%, 72.49% 0%, 75.26% 0.23%, 77.85% 1.5%, 79.24% 2.66%, 81.31% 7.99%, 78.89% 11.69%, 79.76% 12.27%, 80.8% 11.81%, 82.01% 12.85%, 82.7% 15.62%, 80.28% 17.94%, 80.28% 21.88%, 83.22% 24.07%, 88.58% 26.04%, 89.62% 27.89%, 87.54% 28.36%, 89.97% 29.98%, 91% 32.06%, 94.12% 47.57%, 97.92% 59.14%, 97.58% 62.85%, 98.96% 64%, 98.62% 65.39%, 95.16% 67.48%, 96.37% 67.82%, 99.13% 66.67%, 100% 67.71%, 97.23% 70.49%, 97.92% 71.64%, 95.16% 74.42%, 94.46% 76.97%, 92.73% 77.66%, 93.08% 79.05%, 89.97% 82.75%, 90.66% 83.45%, 88.24% 85.07%, 88.93% 85.76%, 84.26% 90.51%, 82.53% 88.89%, 82.01% 89.24%, 80.28% 94.33%, 80.97% 95.25%, 78.72% 100%);}
.shard.s8 .shard__lens{backdrop-filter:brightness(0.88) saturate(1.0);-webkit-backdrop-filter:brightness(0.88) saturate(1.0);transform:translate(-4px,-5px) rotate(0.65deg) scale(1.03);--sheen:0.02;}