/* ==========================================================================
   about.css — the About page (Figma "About", 12281:24169).
   NO NESTED COMMENTS (see sections.css).
   Fixed layers, driven by js/about.js / js/about-game.js from the page clock.
   ========================================================================== */
html.is-about, html.is-about body{ height:100%; overflow:hidden; overscroll-behavior:none; }
/* the home page's red section ground: black into deep red, its concrete
   multiplied in (painted once: the page itself does not scroll) */
html.is-about body{ background:linear-gradient(180deg, #000 0%, #6a0000 100%) #000; min-height:100vh; }
/* its concrete: the SAME as the home page's red section — the seamless tile
   js/texture.js makes (--tex-img / --tex-size: fine specks), multiplied in
   at its strength; under everything, still */
/* the concrete and the grain: still pictures moved with the scroll (js/about-layers.js) */
.ab-tex{ position:fixed; left:0; top:0; width:100%; pointer-events:none; will-change:transform; }
.ab-tex{ z-index:-1; background-image:var(--tex-img, url('../assets/img/texture.jpg')); background-repeat:repeat;
  background-size:var(--tex-size, 768px); mix-blend-mode:multiply; opacity:.55; }

/* ---- the header: the home page's numbers ------------------------------- */
.ab-nav{ position:fixed; inset:0 0 auto 0; height:40px; z-index:30; pointer-events:none; }
.ab-nav > *{ pointer-events:auto; }
.ab-nav__logo{ position:absolute; left:5px; top:5px; width:167px; height:33px; }
.ab-nav__logo img{ width:100%; height:100%; }
.ab-nav__links{ position:absolute; top:5px; height:20px; align-items:center; right:calc(100% - 59.8611%); display:flex; gap:5px; margin:0; padding:0; list-style:none; }
.ab-nav__links .t{ position:static; display:block; }
.ab-nav__links a:hover{ opacity:.6; }
.ab-nav__cta{ position:absolute; left:60.2083%; right:5px; top:5px; height:20px; display:flex; align-items:center; justify-content:center; background:var(--c-ink); color:#000; }
.ab-nav__cta .t{ position:static; color:inherit; }
html.gm-light .ab-nav__logo img{ filter:brightness(0); }
html.gm-light .ab-nav__links .t{ color:#000; }
html.gm-light .ab-nav__cta{ background:#000; color:var(--c-ink); }

/* ---- the FILTRATION lists (first screen, right column) ----------------- */
.ab-fl{ position:fixed; left:60.2083%; right:10px; top:57px; z-index:2; will-change:transform; }   /* 10 from the screen's right edge */
/* THE WAY IN: the ticket rolls out first; then every line on the right
   rises out of its own mask, one after another (js/about.js adds .fl-in) */
.ab-fl .t, .ab-fl li{ overflow:hidden; }
.ab-fl .t > i, .ab-fl li .t > i{ display:inline-block; font-style:normal; transform:translate3d(0, 150%, 0); transition:transform 1.2s cubic-bezier(.215,.61,.355,1); transition-delay:calc(var(--d, 0) * 1s); }
html.fl-in .ab-fl .t > i{ transform:none; }
/* the DOM ticket waits: the 3D one rolls out first (no flash of a flat one) */
html.is-about:not(.tk3d-on):not(.tk-dom) .tk, html.is-about:not(.tk3d-on):not(.tk-dom) .tk-stamps{ visibility:hidden; }
.ab-fl__blk{ position:relative; margin-bottom:16px; }
.ab-fl__blk > .t{ position:static; display:inline-block; }
.ab-fl__n{ position:absolute !important; right:0; top:0; }
.ab-fl ul{ list-style:none; margin:6px 0 0 49.8%; padding:0; }
.ab-fl li{ height:13.3px; display:flex; align-items:center; position:relative; overflow:visible !important; }
/* the rules draw themselves (trim path, left to right), each with its own word */
.ab-fl li::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:1px; background:rgba(253,244,223,.14); transform:scaleX(0); transform-origin:0 50%; transition:transform 1.1s cubic-bezier(.215,.61,.355,1); transition-delay:calc(var(--d, 0) * 1s); }
html.fl-in .ab-fl li::after{ transform:none; }
.ab-fl li .t{ position:static; color:rgba(253,244,223,.55); }

/* ---- the ring: the page's progress -------------------------------------- */
.ab-ring{ position:fixed; left:0; top:0; z-index:1; opacity:0; pointer-events:none; overflow:visible; transform-origin:50% 50%; }
.ab-ring__base{ stroke:rgba(255,20,20,.3);   /* the red, at 30% (was grey) */  stroke-width:10; stroke-dasharray:1.3 3.4; }
.ab-ring__red{ stroke:#ff1414; stroke-width:10; stroke-dasharray:1.3 3.4; }

/* ---- THE 3D TICKET (js/ticket3d.js): once it draws, the flat one steps aside */
canvas.tk3d{ position:fixed; left:0; top:0; z-index:3; pointer-events:none; display:block; }
html.tk3d-on .tk, html.tk3d-on .tk-stamps{ opacity:0 !important; pointer-events:none; }

/* ---- THE TICKET ------------------------------------------------------------ */
.tk{ position:fixed; left:0; top:0; width:458px; z-index:3; will-change:transform; perspective:1400px; color:#000; }
.tk-stub, .tk-body{ position:relative; width:458px; }
.tk-stub__face, .tk-body{ background:#efe7d4; }
.tk-stub__face::after, .tk-body::after{ content:''; position:absolute; inset:0; pointer-events:none;
  background-image:var(--tex-img, url('../assets/img/texture.jpg')); background-size:var(--tex-size, 768px); mix-blend-mode:multiply; opacity:.55; }
.tk .t{ color:#000; }

/* the stub: two faces, it flips as it tears; side notches at the seam */
.tk-stub{ height:167px; transform-origin:0 100%; transform-style:preserve-3d; z-index:2; will-change:transform; }
.tk-stub__face{ position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden;
  -webkit-mask:radial-gradient(circle at 0 100%, transparent 13px, #000 13.5px) 0 0 / 51% 100% no-repeat, radial-gradient(circle at 100% 100%, transparent 13px, #000 13.5px) 100% 0 / 51% 100% no-repeat;
          mask:radial-gradient(circle at 0 100%, transparent 13px, #000 13.5px) 0 0 / 51% 100% no-repeat, radial-gradient(circle at 100% 100%, transparent 13px, #000 13.5px) 100% 0 / 51% 100% no-repeat; }
.tk-stub__front{ border-radius:6px 6px 0 0; }
.tk-stub__back{ transform:rotateX(180deg); border-radius:0 0 6px 6px; }
.tk-stub .tk-lbl{ position:absolute; }
.tk-qr{ position:absolute; left:20px; top:58px; width:418px; height:62px; }
.tk-qr svg{ width:100%; height:100%; display:block; }
.tk-bch{ position:absolute; left:20px; right:20px; top:44px; height:74px; }
.tk-bch svg{ width:100%; height:100%; display:block; }
.tk-perf{ position:absolute; left:21px; right:21px; bottom:-4px; height:8px; z-index:3;
  background:repeating-linear-gradient(90deg, #000 0 8px, transparent 8px 25.5px); }
html.tk-torn .tk-perf{ display:none; }

/* the body; after the tear its top edge keeps half the holes */
.tk-body{ z-index:1;
  -webkit-mask:radial-gradient(circle at 0 0, transparent 13px, #000 13.5px) 0 0 / 51% 100% no-repeat, radial-gradient(circle at 100% 0, transparent 13px, #000 13.5px) 100% 0 / 51% 100% no-repeat;
          mask:radial-gradient(circle at 0 0, transparent 13px, #000 13.5px) 0 0 / 51% 100% no-repeat, radial-gradient(circle at 100% 0, transparent 13px, #000 13.5px) 100% 0 / 51% 100% no-repeat; }
.tk-body::before{ content:''; position:absolute; left:21px; right:21px; top:0; height:4px; z-index:2;
  background:repeating-linear-gradient(90deg, #000 0 8px, transparent 8px 25.5px); }
.tk-sec{ position:relative; }
.tk-sec > *{ position:absolute; }
.tk-sec .t{ position:absolute; }
.tk-ln{ background:#000; }
.tk-lbl{ white-space:nowrap; }

.tk-icons{ display:flex; gap:4px; }
.tk-icons img{ width:16px; height:16px; filter:brightness(0); }
.tk-bcv{ width:39px; }
.tk-bcv .red{ position:absolute; left:0; top:-30px; width:39px; height:22px; background:repeating-linear-gradient(180deg, #ff1414 0 2px, transparent 2px 5px); }
.tk-bcv .bc{ width:39px; height:100%; display:block; }
.tk-tee{ width:9px; height:17px; filter:brightness(0); }

.tk-about{ left:26px; top:28px; margin:0; font-size:116px; line-height:.85; letter-spacing:-.02em; text-transform:uppercase; font-weight:900; text-box:trim-both cap alphabetic; transform-origin:30% 50%; }
.tk-about span{ display:block; }
.tk-heart{ left:162px; top:34px; width:94px; height:67px; z-index:2; }
.tk-lockup{ left:291px; top:28px; width:138px; height:auto; filter:brightness(0); }
.tk-lede{ left:84px; top:141px; width:292px; text-align:center; white-space:normal !important; line-height:.95; letter-spacing:-.02em; }
.tk-slash{ left:145px; top:240px; width:204px; height:326px; }
.tk-slash path{ fill:#000; }
.tk-sq{ width:10px; height:10px; }
.tk-sq i{ position:absolute; inset:0; background:#fff; border:1px solid #ff1414; }
.tk-sq__n{ top:0; }
.tk-sq__n--r{ left:15px; }
.tk-sq__n--l{ right:15px; }

/* the gauge panel */
.tk-badge{ left:213px; top:32px; width:32px; height:32px; border-radius:50%; background:#000; display:grid; place-items:center; }
.tk-badge img{ width:22px; height:auto; }
.tk-titles{ left:27px; top:96px; width:404px; height:112px; }
.tk-title{ position:absolute; inset:0; margin:0; font-size:64px; line-height:.85; letter-spacing:-.02em; text-transform:uppercase; text-align:center; font-weight:900; opacity:0; text-box:trim-both cap alphabetic; }
.tk-gauge{ left:72px; top:240px; width:314px; height:314px; }
.tk-gauge__ticks{ position:absolute; inset:0; border-radius:50%;
  background:repeating-conic-gradient(#000 0 .55deg, transparent .55deg 2.4deg);
  -webkit-mask:radial-gradient(circle, transparent 148px, #000 148.5px, #000 156px, transparent 156.5px);
          mask:radial-gradient(circle, transparent 148px, #000 148.5px, #000 156px, transparent 156.5px); }
.tk-gauge__cv{ position:absolute; left:8.5px; top:8.5px; }
.tk-en{ left:72px; top:570px; width:314px; text-align:center; }
.tk-thumbs{ left:389px; top:617px; }
.tk-th{ position:absolute; left:0; width:57px; }
.tk-th:nth-child(1){ top:0; } .tk-th:nth-child(2){ top:103px; } .tk-th:nth-child(3){ top:206px; }
.tk-th__c{ position:absolute; left:0; top:0; width:57px; height:57px; border-radius:50%; display:grid; place-items:center; opacity:.45; filter:grayscale(1); transition:opacity .4s, filter .4s; }
.tk-th__c canvas{ border-radius:50%; }
.tk-th.is-on .tk-th__c{ opacity:1; filter:none;
  background:repeating-conic-gradient(#000 0 1.6deg, transparent 1.6deg 6deg);
  -webkit-mask:radial-gradient(circle, #000 23.5px, transparent 24px, transparent 25px, #000 25.5px);
          mask:radial-gradient(circle, #000 23.5px, transparent 24px, transparent 25px, #000 25.5px); }
.tk-th .t{ left:0; width:57px; top:62px; text-align:center; opacity:.45; }
.tk-th.is-on .t{ opacity:1; color:#ff1414; }
.tk-foot{ left:101px; top:863px; width:256px; text-align:center; white-space:normal !important; line-height:.95; letter-spacing:-.02em; }
.tk-foot--c{ top:870px; }

/* the end */
.tk-endword{ left:0; width:100%; top:60px; margin:0; font-size:64px; line-height:.85; letter-spacing:-.02em; text-transform:uppercase; text-align:center; font-weight:900; text-box:trim-both cap alphabetic; opacity:0; }
.tk-reg{ left:calc(50% - 10px); top:232px; width:20px; height:20px; border:2px solid #000; border-radius:50%; display:grid; place-items:center; font-size:12px; line-height:1; }

/* the stamps: screen-space, over the ticket */
.tk-stamps{ position:fixed; left:0; top:0; width:182px; z-index:4; pointer-events:none; }
.tk-stamp{ position:absolute; left:0; top:0; width:182px; height:182px; will-change:transform; --lift:0;
  filter:drop-shadow(0 calc(var(--lift) * 16px) calc(var(--lift) * 18px) rgba(0,0,0,.5)); }
.tk-stamp__in{ position:absolute; inset:0; }
.tk-stamp img{ width:182px; height:182px; object-fit:cover; display:block; }
.tk-stamp .t{ position:absolute; left:10px; top:10px; color:#fdf4df; display:none; }

/* ---- the page transition ------------------------------------------------- */
.pg-curtain{ position:fixed; inset:0; z-index:200; background:#000; pointer-events:none; opacity:0; transition:opacity .6s cubic-bezier(.65,0,.35,1); }
html.pg-in .pg-curtain, html.pg-out .pg-curtain{ opacity:1; }

/* ==========================================================================
   THE OXYGEN DELIVERY FRAMEWORK (js/about-game.js)
   ========================================================================== */
.gm{ position:fixed; inset:0; z-index:20; visibility:hidden; will-change:transform; background:#000; user-select:none; -webkit-user-select:none; }
.gm-cv{ position:absolute; inset:0; display:block; }
.gm-ui{ position:absolute; inset:0; pointer-events:none; }
.gm-ui button, .gm-card, .gm-ok{ pointer-events:auto; }
.gm-t{ font-size:18px; line-height:.85; text-transform:uppercase; letter-spacing:-.01em; white-space:nowrap; }

/* which bits show where */
.gm .gm-lvl{ display:none; }
.gm.is-level .gm-lvl{ display:revert; }
.gm.is-level .gm-back{ display:flex; }
.gm.is-level .gm-sel{ display:none; }
.gm.is-level .gm-title{ display:none; }

/* the checklist, top left */
.gm-check{ position:absolute; left:5px; top:70px; margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:4px; color:var(--c-ink); }
.gm-check li{ display:flex; align-items:center; gap:10px; height:19px; }
.gm-box{ width:19px; height:19px; flex:none; box-sizing:border-box; border:1.5px solid #a39e92; display:grid; place-items:center; }   /* as tall as the label (19, Figma): a grey square with a grey dot in it, always */
.gm-box::after{ content:''; width:9px; height:9px; border-radius:50%; background:#77736b; }
.gm-check li.is-done .gm-box::after{ background:currentColor; }
/* on a level's ground (green, red, cream) the box and its dot are the text's colour, not grey */
.gm.is-level .gm-box{ border-color:currentColor; } .gm.is-level .gm-box::after{ background:currentColor; }   /* done: the dot takes the colour */
/* done, on the select screen: green, with a green dot */
.gm:not(.is-level) .gm-check li.is-done .gm-box{ color:#00c05a; }
/* (no dimmed state: both lines in the one colour) */
.gm-check .gm-t{ align-items:center; gap:6px; }
/* the line wrapper (js/lines.js) keeps the label on the box's middle: no
   extra room above, the capitals' box only */
.gm-check .lm{ padding:0; margin:0; }
.gm-check .li{ display:inline-flex; align-items:center; gap:6px; line-height:1; text-box:trim-both cap alphabetic; }
.gm:not(.is-level) .gm-check .gm-sel, .gm.is-level .gm-check .gm-lvl{ display:inline-flex; }
.gm-q, .gm-minus{ display:inline-grid; place-items:center; width:16px; height:16px; border-radius:50%; border:1.5px solid currentColor; font-size:12px; line-height:1; margin:0; font-weight:inherit; position:relative; top:-1px; }
.gm[data-level="1"] .gm-check, .gm[data-level="1"] .gm-br{ color:#000; }
.gm[data-level="1"] .gm-q, .gm[data-level="1"] .gm-minus{ color:#000; }
.gm[data-level="2"] .gm-check, .gm[data-level="2"] .gm-br{ color:#000; }
.gm[data-level="2"] .gm-q{ color:#ff1414; border-radius:0; border:0; }
.gm[data-level="2"] .gm-minus{ border-radius:0; color:#ff1414; }
/* level 3 (the cream ground): the checklist in black (it was cream on cream: gone), its
   marks red-hatched squares — "?" and "COMPLETE" (Figma) */
.gm[data-level="3"] .gm-check, .gm[data-level="3"] .gm-br{ color:#000; }
.gm[data-level="3"] .gm-q, .gm[data-level="3"] .gm-minus{ width:19px; height:19px; border:0; border-radius:0; color:#ff1414; font-size:13px;
  background:repeating-linear-gradient(135deg, rgba(255,20,20,.28) 0 1px, transparent 1px 3px); }
.gm[data-level="3"] .gm-minus{ font-size:0; }
.gm[data-level="3"] .gm-minus::after{ content:'COMPLETE'; font-size:4px; letter-spacing:0; color:#ff1414; }
.gm-dia{ display:inline-block; width:12px; height:12px; margin:0 1px; transform:rotate(45deg) scale(.82); border:1.5px solid; position:relative; top:-1px; }
.gm-dia--0{ border-color:#00c05a; } .gm-dia--1{ border-color:var(--c-ink); } .gm-dia--2{ border-color:#ff1414; }
.gm-dia--0.is-on{ background:#00c05a; } .gm-dia--1.is-on{ background:var(--c-ink); } .gm-dia--2.is-on{ background:#ff1414; }
.gm[data-level="2"] .gm-dia--1{ border-color:#000; } .gm[data-level="2"] .gm-dia--1.is-on{ background:#000; }
/* the checklist's diamonds are always filled (the corner's below fill as each is done) */
.gm-check .gm-dia--0{ background:#00c05a; } .gm-check .gm-dia--1{ background:var(--c-ink); } .gm-check .gm-dia--2{ background:#ff1414; }
.gm[data-level="2"] .gm-check .gm-dia--1{ background:#000; }

/* the title, top right */
.gm-title{ position:absolute; right:5px; top:38px; display:flex; flex-direction:column; align-items:flex-end; font-size:93px; line-height:.85; text-transform:uppercase; letter-spacing:-.02em; color:var(--c-ink); }
.gm-title__l{ display:flex; align-items:center; gap:6px; height:.85em; }   /* the file's line pitch (93 x .85); the word and its mark centred in it */
.gm-title__l2{ margin-right:0; }
.gm-tx{ font-weight:inherit; color:var(--c-ink);   /* the "Get in touch" cream */
  /* the box is the capitals only, so the round mark beside a word sits on
     the word's own middle */
  line-height:1; text-box:trim-both cap alphabetic; }
.gm-ic{ width:62px; height:62px; border-radius:50%; display:grid; place-items:center; flex:none; }
.gm-ic img{ width:42px; height:auto; }
.gm-ic--red{ background:#ff1414; } .gm-ic--green{ background:#00c05a; } .gm-ic--cream{ background:var(--c-ink); }
.gm-ic--red img, .gm-ic--green img{ filter:brightness(0); }

/* the minimap */
.gm-mini{ position:absolute; left:5px; top:145px; width:161px; height:161px; }
.gm-mini canvas{ display:block; }

/* bottom right */
.gm-br{ position:absolute; right:5px; bottom:5px; display:flex; align-items:center; gap:10px; color:var(--c-ink); }
.gm-br .gm-t{ font-size:12px; }
.gm-back{ display:flex; align-items:center; gap:6px; height:20px; padding:0 6px 0 0; border:1px solid currentColor; background:none; color:inherit; cursor:pointer; margin-left:8px; position:relative; }
.gm-back::before{ content:''; position:absolute; left:-10px; top:2px; width:1.5px; height:16px; background:currentColor; opacity:.6; }
.gm-back i{ width:20px; height:18px; display:grid; place-items:center; font-style:normal; border-right:1px solid currentColor; font-size:16px; }
.gm-back:hover{ background:currentColor; }
.gm-back:hover .gm-t, .gm-back:hover i{ color:#000; }
.gm[data-level="1"] .gm-back:hover .gm-t, .gm[data-level="1"] .gm-back:hover i, .gm[data-level="2"] .gm-back:hover .gm-t, .gm[data-level="2"] .gm-back:hover i{ color:var(--c-ink); }

/* the cards */
.gm-cards{ position:absolute; inset:0; }
.gm-card{ position:absolute; left:0; top:0; width:191px; height:254px; transform-origin:0 0;
  clip-path:inset(-2px -2px 100% -2px); transition:clip-path .55s cubic-bezier(.65,0,.35,1); }
.gm-card.is-in{ clip-path:inset(-2px -2px -2px -2px); }
.gm-card__bg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.gm-card__body{ fill:#00c05a; }
/* the card takes a colour the ground does not have: cream on green and on
   red, red on cream (never green on red) */
.gm[data-level="1"] .gm-card__body, .gm[data-level="3"] .gm-card__body{ fill:var(--c-ink); }
.gm[data-level="2"] .gm-card__body{ fill:#ff1414; }
.gm-card__win{ fill:#000; }
.gm-card__bg pattern rect{ fill:#ff0000; }
.gm-card__tick{ fill:var(--c-ink); }
.gm-card__top{ position:absolute; left:37px; width:118px; top:44px; height:65px; display:grid; place-items:center; }
.gm-card__top p{ margin:0; font-size:12px; line-height:.95; text-align:center; color:var(--c-ink); white-space:normal; }
.gm-card__n{ position:absolute; left:5px; top:152px; font-size:12px; color:#000; }
.gm-card__mask{ position:absolute; left:5px; top:217px; width:44px; height:32px; object-fit:contain; filter:brightness(0); }
.gm-card__miss{ position:absolute; inset:0 0 40px; display:grid; place-items:center; }
.gm-card__miss p{ margin:0; font-size:22px; line-height:.85; text-align:center; color:var(--c-ink); white-space:normal; width:120px; text-transform:uppercase; }
.gm[data-level="3"] .gm-card__bg pattern rect{ fill:#000; }
.gm[data-level="1"] .gm-card__bg pattern rect{ fill:#000; }

.gm-ok{ position:absolute; left:0; top:0; width:64px; height:64px; border-radius:50%; background:transparent; border:2.5px solid #00c05a; color:var(--c-ink); cursor:pointer;
  opacity:0; scale:.6; transition:opacity .4s, scale .5s cubic-bezier(.34,1.56,.64,1); }
.gm-ok.is-in{ opacity:1; scale:1; }
.gm-ok .gm-t{ font-size:12px; }
.gm-ok--miss{ border-color:#ff1414; color:#ff1414; }
.gm-ok{ display:grid; place-items:center; padding:0; }
.gm[data-level="1"] .gm-ok{ border-color:#000; color:#000; }
.gm[data-level="3"] .gm-ok{ border-color:var(--c-ink); color:var(--c-ink); }
/* level 2: the square site itself — red hatch, red corner brackets, red OKAY */
.gm[data-level="2"] .gm-ok{ border-radius:0; border:0; color:#ff1414;
  background:repeating-linear-gradient(-45deg, rgba(255,20,20,.35) 0 1.2px, transparent 1.2px 5.6px); }
.gm-ok__br{ position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(#ff1414,#ff1414) 0 0/8px 1.5px, linear-gradient(#ff1414,#ff1414) 0 0/1.5px 8px,
    linear-gradient(#ff1414,#ff1414) 100% 0/8px 1.5px, linear-gradient(#ff1414,#ff1414) 100% 0/1.5px 8px,
    linear-gradient(#ff1414,#ff1414) 0 100%/8px 1.5px, linear-gradient(#ff1414,#ff1414) 0 100%/1.5px 8px,
    linear-gradient(#ff1414,#ff1414) 100% 100%/8px 1.5px, linear-gradient(#ff1414,#ff1414) 100% 100%/1.5px 8px; background-repeat:no-repeat; }
/* the "?" tooltip: black, as the buttons; its text the ground's colour */
.gm-tip{ position:absolute; left:0; top:0; padding:4px 6px; background:#000; color:#00c05a; opacity:0; transition:opacity .18s; pointer-events:none; z-index:5; }
.gm-tip .gm-t{ font-size:12px; display:block; }
.gm-tip.is-on{ opacity:1; }
.gm[data-level="2"] .gm-tip{ color:var(--c-ink); }
.gm[data-level="3"] .gm-tip{ color:#ff1414; }
/* the secret: masks following the pointer */
.gm-trail{ position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:4; }
.gm-trail img{ position:absolute; height:auto; transform:rotate(var(--r)) scale(.4); opacity:0; transition:transform .35s cubic-bezier(.2,1.4,.4,1), opacity .25s; }
.gm-trail img.is-out{ transform:rotate(var(--r)) scale(1); opacity:1; animation:gm-trail-out .9s .3s forwards ease-in; }
@keyframes gm-trail-out{ to{ opacity:0; transform:rotate(var(--r)) translateY(26px) scale(.7); } }
.gm-ok:hover{ background:rgba(253,244,223,.12); }

/* THE FOOTER (js/footer.js, css/footer.css): over a still of the home page's
   3D mask in its beam */
.ab-fin{ position:fixed; inset:0; z-index:25; visibility:hidden; }   /* no black of its own: the routes leaving show through */
.ab-fin__bg{ position:absolute; inset:0; background:#000 url('../assets/img/footer-mask.webp') center / cover no-repeat; opacity:0; }
/* the live 3D over it (js/about-3d.js); once up, the still goes */
html.is-about #gl{ opacity:0; pointer-events:none; }
html.is-about.has-3d .ab-fin__bg{ background-image:none; }
/* the "/" (the home card's), as tall as the home page's beam: the window less 41 top and bottom;
   its box has 30 units of room round the "/" so its blur and mask are never cut (as the home card's) */
.ab-slash{ position:absolute; left:50%; top:50%; height:calc((100% - 82px) * 153 / 93); width:auto; aspect-ratio:118 / 153; overflow:visible; transform:translate(-50%, -50%); fill:var(--c-ink); visibility:hidden; will-change:filter, opacity; }
.ab-fin__ui{ position:absolute; inset:0; }

/* the black that the red ground fades into after the ticket (js/about.js) */
.ab-dark{ position:fixed; inset:0; z-index:0; background:#000; opacity:0; pointer-events:none; }