/* ===== Fonts: Zurech's Adobe Fonts kit (oen6qll, linked in each page's <head>) serves "decoy";
   Decoy Light = weight 300 normal. Fraunces / Courier Prime stay as fallbacks only. ===== */
@font-face{font-family:"Fraunces";src:url("fraunces-var.woff2") format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Courier Prime";src:url("courier-prime.woff2") format("woff2");font-weight:400;font-display:swap}
:root{
  --font-numbers:"decoy", "Fraunces", "Recoleta", Georgia, serif;   /* the phone-number words */
  --numbers-variation:"SOFT" 100, "WONK" 0, "opsz" 24;    /* Fraunces axes: soft, rounded */
  --numbers-weight:300;
  --label-weight:300;
  --font-label:"decoy", "Courier Prime", "Courier New", serif;  /* FULL WEBSITE COMING SOON? */
  --font-wordmark:"Fraunces", serif;  /* only used when <html data-wordmark="font"> (live-text wordmark) */
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:#9c9c9c;color:#111;overflow:hidden;-webkit-font-smoothing:antialiased}
.stage{position:relative;width:100%;height:100vh;height:100svh;min-height:480px;overflow:hidden;isolation:isolate}
.label{position:absolute;left:0;right:0;top:clamp(14px,2.5vh,28px);margin:0;text-align:center;font-family:var(--font-label);font-weight:var(--label-weight);font-style:normal;
  font-size:clamp(8px,.74vw,14px);letter-spacing:.28em;text-transform:uppercase;color:#1d1d1d;z-index:3}
.number{position:absolute;inset:0;z-index:2;color:inherit;text-decoration:none;pointer-events:none}
.number:focus-visible{outline:none}
.number:focus-visible .cluster text{fill:#fff}
.cluster{position:absolute;display:block;overflow:visible;pointer-events:auto;cursor:pointer}
.cluster text{font-family:var(--font-numbers);font-style:normal;font-variation-settings:var(--numbers-variation);font-weight:var(--numbers-weight);
  fill:var(--numbers-color,rgba(255,255,255,.42));transition:fill .3s ease}
.number:hover .cluster text{fill:rgba(255,255,255,.62)}
.wordmark{position:absolute;left:0;right:0;bottom:0;margin:0;z-index:4;line-height:0;padding:0 .75vw;pointer-events:none}
.wordmark-svg{display:block;width:100%;height:auto;overflow:visible;fill:var(--wordmark-color,#000)}
.wordmark-text{display:none;font-family:var(--font-wordmark);font-size:31vw;line-height:.72;letter-spacing:-.04em;color:var(--wordmark-color,#000);transform:scaleY(1.4);transform-origin:bottom;text-align:center}
html[data-wordmark="font"] .wordmark-svg{display:none}
html[data-wordmark="font"] .wordmark-text{display:block}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.number:focus-visible .cluster{outline:2px dashed rgba(255,255,255,.8);outline-offset:6px;border-radius:6px}
.c1{left:5.625vw;top:13.485%;width:20.625vw}
.c2{left:32.500vw;top:28.008%;width:28.125vw}
.c3{left:67.500vw;top:25.934%;width:26.875vw}

/* ---- v3: night / liquid wordmark (flat soft-white fill, no chrome gradient — Zurech, Oct 25) ---- */
:root{--wordmark-flat:#8e8e92} /* mid grey so the white reflection on hover reads (Zurech, Oct 25) */
body{background:#0b0b0c;color:#ddd}
.stage{background:#0b0b0d}
.stage::before{content:"";position:absolute;inset:-20%;z-index:0;pointer-events:none;
  /* r8 (Zurech, Oct 25 10:59 PM: "make better the gradient"): one soft deep glow lifted to ~#1f1f23 behind the numbers/wordmark,
     a faint cool offset glow top-right for depth, a soft vignette to ~#0b0b0d at the edges; eased multi-stop falloffs
     (no hard rings) + a fine ±2-3% dither tile on top so 8-bit gradients don't band */
  background:url("dither.png") repeat 0 0/128px 128px,
             radial-gradient(ellipse 120% 105% at 50% 54%, transparent 38%, rgba(6,6,7,.18) 58%, rgba(6,6,7,.42) 76%, rgba(5,5,6,.62) 100%),
             radial-gradient(ellipse 34% 30% at 74% 26%, rgba(98,98,108,0.200) 0.0%, rgba(98,98,108,0.180) 13.0%, rgba(98,98,108,0.136) 25.9%, rgba(98,98,108,0.084) 38.9%, rgba(98,98,108,0.040) 51.8%, rgba(98,98,108,0.014) 61.9%, rgba(98,98,108,0.000) 72.0%),
             radial-gradient(ellipse 30% 28% at 22% 34%, rgba(86,86,94,0.100) 0.0%, rgba(86,86,94,0.090) 13.0%, rgba(86,86,94,0.068) 25.9%, rgba(86,86,94,0.042) 38.9%, rgba(86,86,94,0.020) 51.8%, rgba(86,86,94,0.007) 61.9%, rgba(86,86,94,0.000) 72.0%),
             radial-gradient(ellipse 62% 54% at 50% 57%, rgba(34,34,39,1.000) 0.0%, rgba(34,34,39,0.900) 13.0%, rgba(34,34,39,0.680) 25.9%, rgba(34,34,39,0.420) 38.9%, rgba(34,34,39,0.200) 51.8%, rgba(34,34,39,0.070) 61.9%, rgba(34,34,39,0.000) 72.0%),
             #0b0b0d;
  animation:glow 32s ease-in-out infinite alternate}
@keyframes glow{0%{transform:translate(0,0) scale(1)}50%{transform:translate(-1.6%,1.2%) scale(1.03)}100%{transform:translate(1.2%,-.8%) scale(1.015)}}
.stage::after{content:"";position:absolute;inset:-50%;z-index:1;pointer-events:none;background:url("grain.png") repeat;background-size:256px;opacity:.11;mix-blend-mode:screen;animation:grain 1s steps(8) infinite}
@keyframes grain{0%{transform:translate(0,0)}25%{transform:translate(2%,-4%)}50%{transform:translate(3%,3%)}75%{transform:translate(4%,-2%)}100%{transform:translate(0,0)}}
.label{color:rgba(230,230,230,.72)}
.cluster text{fill:var(--numbers-color,rgba(235,238,242,.62))}
.number:hover .cluster text{fill:rgba(255,255,255,.92)}
.cluster text.typing::after{content:""}
.caret{fill:rgba(255,255,255,.85);animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.wordmark{pointer-events:auto}
html.js .label{opacity:0;transition:opacity 1.2s ease .2s}
html.js.ready .label{opacity:1}

/* phones / portrait: clusters stack, wordmark spans the width at its own proportions */
@media (max-aspect-ratio: 1/1), (max-width: 700px){
  .label{top:max(2.2%, calc(env(safe-area-inset-top) + 10px));font-size:clamp(8px,1.9vw,10px);letter-spacing:.24em}
  .cluster.c1{left:5vw;top:12%;width:60vw}
  .cluster.c2{left:auto;right:3vw;top:31%;width:68vw}
  .cluster.c3{left:6vw;top:49%;width:66vw}
  .wordmark{padding:0 4vw calc(env(safe-area-inset-bottom) + 2.5vw)} .wordmark-svg{height:auto} /* keep the logo's own proportions, no stretch (Zurech, Oct 25 8:14 PM) */
}
@media (max-aspect-ratio: 1/1) and (min-aspect-ratio: 3/5){ /* tablets portrait */
  .cluster.c1{top:13%;width:48vw}.cluster.c2{top:30%;width:56vw}.cluster.c3{top:46%;width:52vw}
  .wordmark-svg{height:auto}
}
/* r19 (Zurech, Oct 26 11:05 PM: tablet numbers 'very bad' -> option A zig-zag, smaller, clearly split; '765' moved down so the sevens don't touch). Tablets portrait only. */
@media (max-aspect-ratio: 1/1) and (min-aspect-ratio: 3/5){
  .cluster.c1{left:9vw;right:auto;top:14%;width:40vw}
  .cluster.c2{left:auto;right:9vw;top:37%;width:44vw}
  .cluster.c3{left:14vw;right:auto;top:52%;width:42vw}
}
/* r13 (Zurech, Oct 26 9:10 AM: "On mobile, make the words with the numbers a little bit smaller"):
   phones only — the whole three-cluster group is scaled to 86% about its own centre (50vw, 38.5%) and nudged 1.5% lower to sit centred between the top line and the stickers,
   so the clusters keep exactly the same interlock, just lighter. Desktop and tablets untouched. */
@media (max-width: 600px) and (max-aspect-ratio: 3/5){
  .cluster.c1{left:11.3vw;top:17.21%;width:51.6vw}
  .cluster.c2{left:auto;right:9.58vw;top:33.55%;width:58.48vw}
  .cluster.c3{left:12.16vw;top:49.03%;width:56.76vw}
}
/* r14 (Zurech, Oct 26 11:19 AM: "More space" — bars between the clusters): phones only — more breathing room BETWEEN the three clusters,
   each ink gap ≈56px at 390 wide (was ≈26px between 1→2 and ≈44px between 2→3), even; the group re-centred between the top line and the stickers.
   Offsets are in vw so the gaps scale with the clusters. Sizes, interlock and zig-zag untouched. */
@media (max-width: 600px) and (max-aspect-ratio: 3/5){
  .cluster.c1{top:calc(17.21% - 1.8vw)}
  .cluster.c2{top:calc(33.55% + 5.8vw)}
  .cluster.c3{top:calc(49.03% + 8.85vw)}
}
@media (max-height: 520px) and (min-aspect-ratio: 3/2){ /* phone landscape */
  .label{top:2.5%}
}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
/* the whole number area is the call link: brighten the words while it is hovered (r5) */
html.call-hot .number .cluster text{fill:rgba(255,255,255,.92)}

/* ===== v3 light mode + sun/moon toggle (Zurech, Oct 25 10:54 PM: "make the same thing in light and a toggle between a sun and a moon").
   Default stays dark; the choice is remembered (localStorage "zr-v3-theme"). ===== */
html[data-theme="light"]{--wordmark-flat:#262628}
html[data-theme="light"] body{background:#efede8;color:#1b1b1b}
html[data-theme="light"] .stage{background:#ebe9e4}
html[data-theme="light"] .stage::before{
  /* r8: soft off-white radial (lifted ~#f7f6f2 centre, warm grey ~#e6e3dd edges), eased stops + the same dither tile */
  background:url("dither.png") repeat 0 0/128px 128px,
             radial-gradient(ellipse 120% 105% at 50% 54%, transparent 40%, rgba(196,190,178,.10) 60%, rgba(190,184,172,.24) 80%, rgba(184,178,166,.36) 100%),
             radial-gradient(ellipse 34% 30% at 74% 26%, rgba(255,255,253,0.450) 0.0%, rgba(255,255,253,0.405) 13.0%, rgba(255,255,253,0.306) 25.9%, rgba(255,255,253,0.189) 38.9%, rgba(255,255,253,0.090) 51.8%, rgba(255,255,253,0.032) 61.9%, rgba(255,255,253,0.000) 72.0%),
             radial-gradient(ellipse 30% 28% at 22% 34%, rgba(250,248,243,0.300) 0.0%, rgba(250,248,243,0.270) 13.0%, rgba(250,248,243,0.204) 25.9%, rgba(250,248,243,0.126) 38.9%, rgba(250,248,243,0.060) 51.8%, rgba(250,248,243,0.021) 61.9%, rgba(250,248,243,0.000) 72.0%),
             radial-gradient(ellipse 58% 50% at 50% 57%, rgba(248,247,243,1.000) 0.0%, rgba(248,247,243,0.900) 13.0%, rgba(248,247,243,0.680) 25.9%, rgba(248,247,243,0.420) 38.9%, rgba(248,247,243,0.200) 51.8%, rgba(248,247,243,0.070) 61.9%, rgba(248,247,243,0.000) 72.0%),
             #ebe9e4}
html[data-theme="light"] .stage::after{mix-blend-mode:multiply;opacity:.06}
html[data-theme="light"] .label{color:rgba(27,27,27,.72)}
html[data-theme="light"] .cluster text{fill:var(--numbers-color-light,rgba(27,27,27,.62))}
html[data-theme="light"] .number:hover .cluster text,html[data-theme="light"].call-hot .number .cluster text{fill:rgba(12,12,12,.9)}
html[data-theme="light"] .caret{fill:rgba(20,20,20,.85)}
html[data-theme="light"] .number:focus-visible .cluster{outline-color:rgba(0,0,0,.6)}
/* stickers stay paper; a slightly deeper shadow so they read on the light page */
html[data-theme="light"] .sides:is([data-style="s6"],[data-style="s7"]) .side-btn{filter:drop-shadow(0 2px 2px rgba(0,0,0,.22)) drop-shadow(0 9px 14px rgba(60,50,35,.2))}
html[data-theme="light"] .acc{color:#3c3c3c;filter:none}
/* the Call / WhatsApp choice goes dark on the light page */
html[data-theme="light"] .call-choice{background:rgba(28,28,30,.92);box-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 2px 4px rgba(0,0,0,.18),0 14px 30px rgba(0,0,0,.22)}
html[data-theme="light"] .cc-opt{color:#efede8}
html[data-theme="light"] .cc-opt:hover,html[data-theme="light"] .cc-opt:focus-visible{background:rgba(255,255,255,.1)}
html[data-theme="light"] .cc-sep{background:rgba(255,255,255,.18)}
/* colour crossfade (~300ms); browsers with view transitions crossfade the whole page */
html.theme-anim body,html.theme-anim .stage,html.theme-anim .label,html.theme-anim .cluster text,html.theme-anim .wordmark-svg path{transition:background-color .3s ease,color .3s ease,fill .3s ease!important}
::view-transition-old(root),::view-transition-new(root){animation-duration:.3s;animation-timing-function:ease}
/* the toggle: thin hand-drawn sun / moon, top right, centred on the top label; 40px tap target */
/* ===== r9: liquid-glass SWITCH (Zurech, Oct 25 11:23 PM: "like a switch on a liquid glass rounded-corners button, both the sun and the moon visible,
   a switch from right to left"). Sun on the left, moon on the right, both always visible; a glass knob slides under the active one
   (dark = knob on the moon, light = knob on the sun). role="switch", aria-checked = dark mode on. ===== */
.theme-toggle{--w:68px;--h:34px;--k:28px;--pad:3px;--travel:calc(var(--w) - var(--k) - 2*var(--pad) - 2px);
  position:fixed;z-index:70;right:max(14px,calc(env(safe-area-inset-right) + 12px));top:10px;width:var(--w);height:var(--h);padding:0;margin:0;
  border-radius:999px;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:none;-webkit-user-select:none;user-select:none;
  color:rgba(255,255,255,.92);
  border:1px solid rgba(255,255,255,.16);
  background:linear-gradient(180deg,rgba(255,255,255,.13) 0%,rgba(255,255,255,.05) 48%,rgba(255,255,255,.075) 100%);
  -webkit-backdrop-filter:blur(16px) saturate(160%);backdrop-filter:blur(16px) saturate(160%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.30),inset 0 -1px 1px rgba(255,255,255,.06),inset 0 0 0 .5px rgba(255,255,255,.04),
             0 1px 2px rgba(0,0,0,.35),0 6px 18px rgba(0,0,0,.32);
  view-transition-name:zr-theme-switch;
  transition:background .35s ease,border-color .35s ease,box-shadow .35s ease,color .35s ease}
/* tap area ≥44px without growing the glass */
.theme-toggle::before{content:"";position:absolute;inset:calc((var(--h) - 44px)/2 - 1px) -4px;border-radius:999px}
/* refraction sheen: a soft lens highlight across the upper half, brighter at the left shoulder */
.theme-toggle .sheen{position:absolute;inset:0;border-radius:inherit;pointer-events:none;overflow:hidden}
.theme-toggle .sheen::before{content:"";position:absolute;left:6%;right:6%;top:1px;height:46%;border-radius:999px;
  background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,0))}
.theme-toggle .sheen::after{content:"";position:absolute;inset:0;border-radius:inherit;
  background:radial-gradient(120% 90% at 18% 0%,rgba(255,255,255,.10),rgba(255,255,255,0) 55%),
             radial-gradient(90% 80% at 85% 110%,rgba(255,255,255,.06),rgba(255,255,255,0) 60%)}
/* the knob: a brighter glass bead */
.theme-toggle .knob{position:absolute;top:calc((var(--h) - 2px - var(--k))/2);left:var(--pad);width:var(--k);height:var(--k);border-radius:50%;pointer-events:none;
  background:radial-gradient(120% 120% at 30% 18%,rgba(255,255,255,.34),rgba(255,255,255,.12) 55%,rgba(255,255,255,.18) 100%);
  border:1px solid rgba(255,255,255,.34);
  -webkit-backdrop-filter:blur(6px) saturate(180%) brightness(1.15);backdrop-filter:blur(6px) saturate(180%) brightness(1.15);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -2px 4px rgba(255,255,255,.08),0 1px 2px rgba(0,0,0,.35),0 3px 8px rgba(0,0,0,.28);
  transform:translateX(var(--travel));
  transition:transform .38s cubic-bezier(.34,1.42,.52,1),background .35s ease,border-color .35s ease,box-shadow .35s ease}
.theme-toggle .knob::after{content:"";position:absolute;left:18%;right:18%;top:7%;height:38%;border-radius:50%;
  background:linear-gradient(180deg,rgba(255,255,255,.45),rgba(255,255,255,0))}
.theme-toggle[aria-checked="false"] .knob{transform:translateX(0)}
/* a little liquid squash while it travels */
.theme-toggle.moving .knob{animation:zr-squish .38s ease}
@keyframes zr-squish{0%{scale:1 1}35%{scale:1.16 .9}70%{scale:.97 1.03}100%{scale:1 1}}
/* icons: sun left, moon right, both always visible; the inactive one dims */
.theme-toggle svg{position:absolute;top:50%;width:16px;height:16px;margin-top:-8px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;
  pointer-events:none;transition:opacity .35s ease,transform .38s cubic-bezier(.34,1.42,.52,1)}
.theme-toggle .sun{left:calc(var(--pad) + var(--k)/2 - 8px)}
.theme-toggle .moon{right:calc(var(--pad) + var(--k)/2 - 8px)}
.theme-toggle .sun{opacity:.45;transform:scale(.92)}
.theme-toggle .moon{opacity:1;transform:none}
.theme-toggle[aria-checked="false"] .sun{opacity:1;transform:none}
.theme-toggle[aria-checked="false"] .moon{opacity:.45;transform:scale(.92)}
.theme-toggle:hover{border-color:rgba(255,255,255,.24)}
.theme-toggle:active .knob{scale:1.06}
.theme-toggle:focus-visible{outline:1.5px solid rgba(255,255,255,.7);outline-offset:3px}
/* light page: whiter, clearer glass with a hairline edge so it still reads on off-white */
html[data-theme="light"] .theme-toggle{color:rgba(24,24,26,.88);border-color:rgba(255,255,255,.75);
  background:linear-gradient(180deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,.28) 50%,rgba(255,255,255,.38) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 1px rgba(255,255,255,.4),0 0 0 .5px rgba(0,0,0,.10),
             0 1px 2px rgba(60,50,35,.14),0 6px 18px rgba(60,50,35,.14)}
html[data-theme="light"] .theme-toggle .sheen::before{background:linear-gradient(180deg,rgba(255,255,255,.6),rgba(255,255,255,0))}
html[data-theme="light"] .theme-toggle .knob{border-color:rgba(255,255,255,.95);
  background:radial-gradient(120% 120% at 30% 18%,rgba(255,255,255,.98),rgba(255,255,255,.72) 60%,rgba(250,249,246,.85) 100%);
  box-shadow:inset 0 1px 0 #fff,inset 0 -2px 4px rgba(0,0,0,.04),0 0 0 .5px rgba(0,0,0,.08),0 1px 2px rgba(60,50,35,.2),0 3px 8px rgba(60,50,35,.18)}
html[data-theme="light"] .theme-toggle:hover{border-color:#fff}
html[data-theme="light"] .theme-toggle:focus-visible{outline-color:rgba(0,0,0,.55)}
/* while the page crossfades, the switch stays live on top so the knob is seen sliding (no ghost of the old knob) */
::view-transition-old(zr-theme-switch){display:none}
::view-transition-new(zr-theme-switch){animation:none}
::view-transition-group(zr-theme-switch){animation:none}
html.js .theme-toggle{opacity:0;transition:opacity 1.2s ease .2s,background .35s ease,border-color .35s ease,box-shadow .35s ease,color .35s ease}
html.js.ready .theme-toggle{opacity:1}
@media (max-aspect-ratio: 1/1), (max-width: 700px){
  .theme-toggle{--w:60px;--h:30px;--k:24px;right:max(12px,calc(env(safe-area-inset-right) + 10px))}
  .theme-toggle svg{width:14px;height:14px;margin-top:-7px}
  .theme-toggle .sun{left:calc(var(--pad) + var(--k)/2 - 7px)}
  .theme-toggle .moon{right:calc(var(--pad) + var(--k)/2 - 7px)}
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .theme-toggle{background:rgba(40,40,44,.72)} html[data-theme="light"] .theme-toggle{background:rgba(255,255,255,.8)}
}
@media (prefers-reduced-motion: reduce){.theme-toggle .knob,.theme-toggle svg{transition:none!important;animation:none!important}}

/* ===== r10: animated silk background (Zurech, Oct 25 11:44 PM: "g2 or g4. it should animated, the lightness should move around").
   v3/silk.js draws it on one WebGL canvas (?bg=g2 | ?bg=g4, default g4); the r8 CSS gradient above stays as the no-WebGL fallback. ===== */
.stage>canvas.silk{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;display:block}
html.silk-on .stage::before,html.silk-on .stage::after{display:none}
html.silk-on .stage{background:#0a0a0a}
html.silk-on[data-theme="light"] .stage{background:#f2f1ed}  /* r12: bright warm off-white under the canvas */
/* a soft halo keeps the numbers crisp when the brightest fold drifts under them */
html.silk-on .cluster{filter:drop-shadow(0 0 14px rgba(0,0,0,.38))}
html.silk-on[data-theme="light"] .cluster{filter:drop-shadow(0 0 14px rgba(255,255,255,.55))}
html.silk-on[data-theme="light"] body{background:#f2f1ed}

/* r11 intro order: until the wordmark has finished its ink reveal, only the background + "zurech" show.
   html.intro is set in <head> (theme-early.js) before first paint; script.js adds .stickers-in ~200ms after the ink settles. */
html.intro:not(.num-armed):not(.ready) .number{visibility:hidden}
html.intro:not(.stickers-in) .sides .side-btn{opacity:0;visibility:hidden}
html.intro.stickers-in .sides:not(.in-panel) .side-btn{animation:zr-stk-in .62s cubic-bezier(.2,1.25,.35,1) both}
html.intro.stickers-in .sides:not(.in-panel) .side-btn.right{animation-delay:.14s}
@keyframes zr-stk-in{0%{opacity:0;translate:0 12px;scale:1.07}55%{opacity:1}100%{opacity:1;translate:0 0;scale:1}}
@media (prefers-reduced-motion:reduce){html.intro.stickers-in .sides .side-btn{animation:none!important}}
/* before script.js runs (fonts/JS still loading) nothing but the background shows: the ink reveal itself starts from 0 */
html.intro:not(.js):not(.ready):not(.intro-net) #inkG{opacity:0}
html.intro:not(.ready):not(.intro-net) :is(.label,.theme-toggle){opacity:0}