/* =====================================================================
   A FEW OF MY FAVORITE THINGS
   A punk-zine remix of the HIIQ editorial system.
   We keep HIIQ's bones — Century display, JetBrains mono kickers,
   ink/paper/black, tan + the logo orange — and break its ONE rule:
   the no-motion law. Everything here moves.
   ===================================================================== */

:root{
  --paper:#f4eddf;   /* softened, warm paper cream (was pure white) */
  --ink:#1a1a1a;
  --black:#000000;
  --navy:#1b3a6b;
  --tan:#c58a5b;
  --tan-deep:#8a5c36;
  --orange:#ec8d54;   /* lifted straight off the HIIQ "BUSINESS" lettering */
  --orange-deep:#cf6f33;
  --orange-ink:#a14d12;  /* darker orange for SMALL text on cream — clears WCAG AA 4.5:1
                            (--orange-deep is fine at huge display sizes, fails on captions/kickers) */
  --caption:#5f5f5f;
  --grain:0.06;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; overflow-x:clip; }

html,body{ margin:0; padding:0; background:var(--paper); color:var(--ink); }
body{
  font-family:var(--font-serif);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  cursor:default;
}

/* keep horizontal chaos from spawning scrollbars */
.no-x{ overflow-x:clip; }

img{ display:block; max-width:100%; }
a{ color:inherit; }

/* skip link — off-screen until a keyboard user tabs to it (WCAG 2.4.1 bypass) */
.skip{
  position:fixed; top:-64px; left:8px; z-index:13000;
  background:var(--black); color:var(--paper); text-decoration:none;
  font-family:var(--font-mono); font-size:12px; font-weight:700;
  letter-spacing:1.2px; text-transform:uppercase; padding:10px 14px;
  border:2px solid var(--orange); transition:top .15s ease;
}
.skip:focus-visible, .skip:focus{ top:8px; outline:3px solid var(--navy); outline-offset:2px; }

/* ====================== TEXTURE OVERLAYS ====================== */
/* paper grain — the "nostalgic" film tooth, sits above everything, ignores clicks */
#grain{
  position:fixed; inset:-50%; z-index:9000; pointer-events:none;
  opacity:var(--grain);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grainShift 0.7s steps(4) infinite;
  mix-blend-mode:multiply;
}
@keyframes grainShift{
  0%{transform:translate(0,0)} 25%{transform:translate(-3%,2%)}
  50%{transform:translate(2%,-2%)} 75%{transform:translate(-2%,-1%)} 100%{transform:translate(1%,2%)}
}
/* faint scanlines for the Y2K/old-film flavor */
#scanlines{
  position:fixed; inset:0; z-index:9001; pointer-events:none; opacity:.5;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.035) 0 1px, transparent 1px 3px);
  mix-blend-mode:multiply;
}
body.no-fx #grain, body.no-fx #scanlines{ display:none; }

/* ====================== TOP TICKER ====================== */
.ticker{
  position:fixed; top:0; left:0; right:0; z-index:8000;
  background:var(--black); color:var(--paper);
  border-bottom:2px solid var(--black);
  height:34px; display:flex; align-items:center; overflow:hidden;
  white-space:nowrap;
}
.ticker__track{
  display:inline-flex; align-items:center; gap:0;
  font-family:var(--font-mono); font-size:12px; font-weight:700;
  letter-spacing:1.6px; text-transform:uppercase;
  animation:tickerMove 38s linear infinite; will-change:transform;
}
.ticker__track span{ padding:0 22px; }
.ticker__track .dot{ color:var(--orange); padding:0; }
@keyframes tickerMove{ from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ====================== AUDIO + FX DOCK ====================== */
.dock{
  position:fixed; right:14px; bottom:14px; z-index:8500;
  display:flex; flex-direction:column; gap:10px; align-items:flex-end;
}
.knob{
  display:inline-flex; align-items:center; gap:9px;
  background:var(--paper); color:var(--ink);
  border:2px solid var(--black); padding:9px 13px;
  font-family:var(--font-mono); font-size:11px; font-weight:700;
  letter-spacing:1.3px; text-transform:uppercase; cursor:pointer;
  transition:background .15s linear, color .15s linear;
  user-select:none;
}
.knob:hover{ background:var(--black); color:var(--paper); }
.knob:focus-visible, .knob:focus{ outline:3px solid var(--navy); outline-offset:3px; }
.knob.is-on{ background:var(--orange); border-color:var(--black); color:var(--black); }
/* comfortable touch targets on phones/tablets */
@media (pointer:coarse){
  .knob{ padding:13px 16px; min-height:46px; font-size:12px; }
}
.eq{ display:inline-flex; align-items:flex-end; gap:2px; height:14px; }
.eq i{ width:3px; height:5px; background:currentColor; display:block; }
/* bars dance only while audio is actually playing (.is-playing set by narration.js),
   not merely while VOICE is armed — an honest "now reading" cue */
.knob.is-playing .eq i{ animation:eqDance .9s ease-in-out infinite; }
.knob.is-playing .eq i:nth-child(2){ animation-delay:.15s }
.knob.is-playing .eq i:nth-child(3){ animation-delay:.3s }
.knob.is-playing .eq i:nth-child(4){ animation-delay:.45s }
@keyframes eqDance{ 0%,100%{height:4px} 50%{height:14px} }

/* ====================== HERO ====================== */
.hero{
  position:relative; min-height:100vh; padding:90px 24px 60px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; overflow:hidden; isolation:isolate;
}
.hero__rain{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.hero__rain .drop{
  position:absolute; width:var(--w,150px); border:5px solid var(--paper);
  background:var(--paper); transform:rotate(var(--r,0deg));
  filter:saturate(1.05);
  opacity:0;
}
.hero__rain .drop img{ width:100%; height:auto; display:block; }
.hero__scrim{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(ellipse 80% 70% at 50% 45%, rgba(244,237,223,.86) 0%, rgba(244,237,223,.7) 45%, rgba(244,237,223,.5) 100%);
}
.hero__inner{ position:relative; z-index:2; max-width:1180px; }

.hero__eyebrow{
  display:inline-block; margin-bottom:22px; padding:6px 14px;
  background:var(--black); color:var(--paper);
  font-family:var(--font-mono); font-size:12px; font-weight:700;
  letter-spacing:2.4px; text-transform:uppercase;
}
.hero__title{
  font-family:var(--font-display); font-weight:700; text-transform:uppercase;
  line-height:.82; letter-spacing:-.02em; margin:0;
  font-size:clamp(48px, 12.5vw, 188px); color:var(--ink);
}
.hero__title .ln{ display:block; }
.hero__title .word{ display:inline-block; }
.hero__title .ch{ display:inline-block; will-change:transform; }
.hero__title .tan{ color:var(--tan-deep); }
.hero__title .stroke{
  color:var(--paper); -webkit-text-stroke:3px var(--ink);
}
.hero__deck{
  font-family:var(--font-serif); font-size:clamp(16px,1.7vw,21px);
  line-height:1.5; max-width:620px; margin:30px auto 0; color:var(--ink);
}
.hero__deck b{ color:var(--tan-deep); font-style:italic; }
.hero__hint{
  margin-top:34px; font-family:var(--font-mono); font-size:12px; font-weight:700;
  letter-spacing:2.5px; text-transform:uppercase; color:var(--ink);
  display:inline-flex; align-items:center; gap:10px;
}
.hero__hint .arrow{ animation:bob 1.1s ease-in-out infinite; }
@keyframes bob{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(6px)} }
/* small mono invite so first-time visitors discover the cloned-voice narration */
.hero__voice{
  margin:16px auto 0; font-family:var(--font-mono); font-size:12px; font-weight:700;
  letter-spacing:1.4px; text-transform:uppercase; color:var(--orange-ink);
}
.hero__voice b{ color:var(--ink); }

/* tiny blended logo bug sitting in the hero corner */
.hero__bug{
  position:absolute; top:54px; left:24px; z-index:3;
  display:flex; align-items:center; gap:10px;
}
.hero__bug img{ height:78px; }

/* ====================== MARQUEE (flying word bands) ====================== */
.band{
  position:relative; overflow:hidden; white-space:nowrap;
  border-top:2px solid var(--black); border-bottom:2px solid var(--black);
  padding:14px 0; background:var(--paper);
}
.band--ink{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.band__track{
  display:inline-block; will-change:transform;
  font-family:var(--font-display); font-weight:700; text-transform:uppercase;
  font-size:clamp(26px,4.5vw,58px); letter-spacing:.01em;
}
.band__track.rev{ animation-direction:reverse; }
.band__track span{ padding:0 .35em; }
.band__track .o{ color:var(--orange-deep); -webkit-text-stroke:0; }
.band--ink .band__track .o{ color:var(--orange); }
.band__track .hollow{ color:transparent; -webkit-text-stroke:2px currentColor; }
.band__track .star{ color:var(--tan); }
@keyframes marqL{ from{transform:translateX(0)} to{transform:translateX(-50%)} }
.band__track{ animation:marqL var(--spd,26s) linear infinite; }

/* ====================== CHAPTER ====================== */
.chapter{ position:relative; padding:70px 0 40px; }
.chapter--dark{ background:var(--ink); color:var(--paper); }

/* ====================== PHOTO WALL (scattered prints) ====================== */
.wall{
  position:relative; max-width:1480px; margin:0 auto; padding:24px 18px 10px;
  display:flex; flex-wrap:wrap; gap:30px 26px;
  align-items:flex-start; justify-content:center;
}
.print{
  position:relative; background:var(--paper); border:1px solid var(--black);
  padding:9px 9px 9px; flex:0 0 auto;
  transform:rotate(var(--rot,0deg));
  opacity:0;
  transition:transform .5s cubic-bezier(.2,.8,.3,1.1), opacity .5s ease;
}
.chapter--dark .print{ background:#111; border-color:#3a3a3a; }
.print.in{ opacity:1; }
/* frame fits the photo — never crop a face. Height follows the image's
   own aspect ratio; only the WIDTH is art-directed for collage rhythm. */
.print img{
  width:100%; height:auto; display:block; background:#ddd;
  /* width/height ATTRIBUTES are stamped per-photo by favorite.js (makePrint) from
     window.__MFT_DIMS (dimensions.js), so the browser reserves each frame's true aspect
     box before the lazy WebP decodes — kills row reflow/CLS WITHOUT distorting
     (height:auto keeps the real ratio; no object-fit crop, so faces are never cut). */
}
.print figcaption{
  font-family:var(--font-mono); font-weight:700;
  font-size:11px; letter-spacing:1.5px; text-transform:uppercase;
  line-height:1.4; color:var(--caption);   /* was #6d6d6d (4.44:1) — token is 5.48:1, clears AA */
  padding:8px 2px 2px; text-align:left;
}
.print figcaption .pn{ color:var(--orange-ink); }   /* small text on cream → AA-safe orange */
.chapter--dark .print figcaption{ color:#9a9a9a; }
.chapter--dark .print figcaption .pn{ color:var(--orange); }
/* floaty idle bob, only while in view */
.print.in.live{ animation:floaty var(--dur,6s) ease-in-out infinite; animation-delay:var(--del,0s); }
@keyframes floaty{
  0%,100%{ transform:rotate(var(--rot,0deg)) translateY(0); }
  50%{ transform:rotate(calc(var(--rot,0deg) * 0.4)) translateY(-10px); }
}
.print:hover{
  transform:rotate(0deg) scale(1.06); z-index:50;
  animation:none;
}
/* tape strip on some prints */
.print.tape::before{
  content:""; position:absolute; top:-13px; left:50%; transform:translateX(-50%) rotate(var(--trot,-4deg));
  width:74px; height:26px; background:rgba(236,141,84,.55);
  border-left:1px dashed rgba(0,0,0,.15); border-right:1px dashed rgba(0,0,0,.15);
}
.print.tape.alt::before{ background:rgba(197,138,91,.5); width:58px; }
/* photo-number tag — hidden until the NUMBERS toggle is on, so you can
   read off which shots to exclude. Shows on every print + filmstrip cell. */
.num-tag{
  position:absolute; top:6px; left:6px; z-index:6; display:none;
  background:var(--black); color:var(--orange);
  font-family:var(--font-mono); font-weight:700; font-size:13px;
  letter-spacing:1px; padding:3px 7px; border:1px solid var(--orange);
  pointer-events:none;
}
.strip .cell .num-tag{ top:4px; left:4px; font-size:12px; padding:2px 6px; }
body.show-nums .num-tag{ display:block; }
/* freeze the filmstrips while reading numbers so they hold still */
body.show-nums .strip__track{ animation-play-state:paused; }
/* sizing variants for collage rhythm */
.print.s{ width:clamp(150px,20vw,240px); }
.print.m{ width:clamp(200px,27vw,330px); }
.print.l{ width:clamp(240px,34vw,430px); }

/* reveal entrance offsets (set via inline custom prop, applied by JS class) */
.print[data-from="L"]{ transform:translateX(-80px) rotate(var(--rot,0deg)); }
.print[data-from="R"]{ transform:translateX(80px) rotate(var(--rot,0deg)); }
.print[data-from="U"]{ transform:translateY(70px) rotate(var(--rot,0deg)); }
.print[data-from="D"]{ transform:translateY(-70px) rotate(var(--rot,0deg)); }
.print[data-from="Z"]{ transform:scale(.6) rotate(calc(var(--rot,0deg) + 16deg)); }
.print.in[data-from]{ transform:rotate(var(--rot,0deg)); }

/* ====================== HORIZONTAL FILMSTRIP (places) ====================== */
.strip{ position:relative; overflow:hidden; padding:6px 0; }
.strip + .strip{ margin-top:18px; }
.strip__track{
  display:flex; gap:16px; width:max-content; will-change:transform;
  animation:marqL var(--spd,55s) linear infinite;
}
.strip__track.rev{ animation-direction:reverse; }
.strip:hover .strip__track{ animation-play-state:paused; }
/* filmstrip: uniform HEIGHT, width follows each photo's aspect — like a
   contact sheet. No vertical crop, so no chopped heads. */
.strip .cell{
  flex:0 0 auto; height:clamp(150px,18vw,230px); width:auto;
  border:5px solid var(--paper); outline:1px solid var(--black);
  overflow:hidden; transform:rotate(var(--rot,0deg));
  background:#ddd;
}
.strip .cell img{ height:100%; width:auto; display:block; }

.wall, .strip{ position:relative; z-index:1; }

/* ====================== FINALE / FOOTER ====================== */
.finale{
  position:relative; background:var(--black); color:var(--paper);
  padding:90px 24px 50px; text-align:center; overflow:hidden;
}
.finale__big{
  font-family:var(--font-display); font-weight:700; text-transform:uppercase;
  font-size:clamp(40px,9vw,150px); line-height:.84; letter-spacing:-.02em; margin:0;
  position:relative; z-index:2;
}
.finale__big .o{ color:var(--orange); }
.finale__big .t{ color:var(--tan); }
.finale__sub{
  position:relative; z-index:2;
  font-family:var(--font-serif); font-style:italic; font-size:clamp(16px,2vw,22px);
  margin:24px auto 0; max-width:560px; color:#e7e7e7;
}
.finale__logos{
  position:relative; z-index:2; margin:46px auto 0; display:flex; gap:30px;
  align-items:center; justify-content:center; flex-wrap:wrap;
}
.finale__logos img{ height:64px; filter:invert(1) brightness(1.6); opacity:.92; }
.finale__meta{
  position:relative; z-index:2; margin-top:40px;
  font-family:var(--font-mono); font-size:11px; letter-spacing:1.6px;
  text-transform:uppercase; color:#8a8a8a; line-height:2;
}
.finale__meta .o{ color:var(--orange); }
.finale__rain{ position:absolute; inset:0; z-index:0; opacity:.22; pointer-events:none; }
.finale__rain .drop{ position:absolute; width:var(--w,120px); border:3px solid var(--paper); }
.finale__rain .drop img{ width:100%; height:auto; display:block; }

/* ====================== KINETIC PHILOSOPHY TYPE ====================== */
/* words that reveal as you reach them — drop / tumble / slide in, then
   settle to a perfectly readable end-state. */
/* will-change is applied inline by kinetic.js ONLY during each one-time reveal and
   cleared after, so static-after-reveal words don't hold idle compositor layers. */
.kw{ display:inline-block; }

/* ghost words drifting behind a passage — large outline type, scroll-linked
   (positioned by kinetic.js frame() via [data-sw]); used by .passage__bg .sw */
.sw{
  position:absolute; font-family:var(--font-display); font-weight:700;
  text-transform:uppercase; white-space:nowrap; letter-spacing:-.02em;
  font-size:clamp(70px,16vw,240px); will-change:transform;
  color:transparent; -webkit-text-stroke:2px rgba(26,26,26,.13);
}

/* ====================== NARRATIVE PASSAGES ====================== */
/* Full-viewport kinetic-text moments that carry the story. Two registers:
   DISPLAY (huge uppercase beats) and READING (large serif reflection). */
.passage{
  position:relative; min-height:92vh; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center;
  padding:14vh 24px; overflow:hidden;
}
.passage--short{ min-height:64vh; }
.passage--ink{ background:var(--ink); color:var(--paper); }
.passage__bg{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.passage__inner{ position:relative; z-index:2; width:100%; max-width:1180px; margin:0 auto; }
.passage__inner > * + *{ margin-top:.5em; }

/* DISPLAY register — the huge uppercase gut-punches */
.disp-line{
  font-family:var(--font-display); font-weight:700; text-transform:uppercase;
  line-height:.9; letter-spacing:-.02em; color:var(--ink); text-wrap:balance;
  margin:0 auto; max-width:20ch;
}
.passage--ink .disp-line{ color:var(--paper); }
.disp-xxl{ font-size:clamp(84px,20vw,360px); line-height:.82; }
.disp-xl{ font-size:clamp(60px,13vw,220px); }
.disp-l{ font-size:clamp(44px,8.5vw,150px); }
.disp-m{ font-size:clamp(34px,6vw,98px); }
.disp-line .accent{ color:var(--orange-deep); }
.passage--ink .disp-line .accent{ color:var(--orange); }
.disp-line .out{ color:transparent; -webkit-text-stroke:2px var(--ink); }
.passage--ink .disp-line .out{ -webkit-text-stroke-color:var(--paper); }

/* READING register — large serif, sentence case, for the reflective lines */
.read-stack{ max-width:min(92vw, 760px); margin:0 auto; }
.read-line{
  display:block; font-family:var(--font-serif); font-weight:600;
  font-size:clamp(21px,2.9vw,38px); line-height:1.3; letter-spacing:-.01em;
  color:var(--ink); text-wrap:pretty; margin:0 auto;
}
.read-line + .read-line{ margin-top:.42em; }
.read-line.big{ font-size:clamp(27px,4.2vw,58px); line-height:1.18; }
.read-line.em{ font-style:italic; color:var(--orange-ink); font-weight:600; }   /* small-text-safe on cream */
.passage--ink .read-line{ color:#ededed; }

/* THE LITANY — the "Love was…" peak. Every line a different size, colour,
   weight, alignment and motion, cascading playfully down the screen. */
.litany{ max-width:min(94vw,1040px); margin:0 auto; text-align:left; }
.litany .lv{ display:block; margin:.1em 0; text-wrap:balance; color:var(--ink); }
.litany .em-o{ color:var(--orange-deep); font-style:inherit; }
.litany .out{ color:transparent; -webkit-text-stroke:2px var(--ink); }
.lv1{ font-family:var(--font-serif); font-weight:600; font-style:italic;
  font-size:clamp(26px,4vw,58px); line-height:1.04; }
.lv2{ font-family:var(--font-display); font-weight:700; text-transform:uppercase;
  font-size:clamp(30px,6.2vw,98px); line-height:.9; letter-spacing:-.02em; text-align:right; }
.lv3{ font-family:var(--font-serif); font-weight:600; font-style:italic;
  font-size:clamp(23px,3.3vw,46px); line-height:1.18; padding-left:8vw; }
.litany .lv4{ font-family:var(--font-display); font-weight:700; text-transform:uppercase;
  font-size:clamp(40px,8.5vw,148px); line-height:.84; letter-spacing:-.02em;
  text-align:center; color:var(--orange-deep); }
.lv5{ font-family:var(--font-serif); font-weight:600; font-style:italic;
  font-size:clamp(26px,4.2vw,60px); line-height:1.04; text-align:right; }

/* the eyebrow that titles a passage */
.passage__kicker{
  display:block; margin-bottom:30px; font-family:var(--font-mono); font-weight:700;
  font-size:12px; letter-spacing:2.6px; text-transform:uppercase; color:var(--orange-ink);  /* 12px → AA-safe */
}
.passage--ink .passage__kicker{ color:var(--orange); }

/* scroll-linked ghost words drifting behind a passage */
.passage__bg .sw{ opacity:.9; }

/* .kw display is set above (with the will-change note); .kln is block-level */
.kln{ display:block; }

/* ====================== REDUCED MOTION ====================== */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto !important; }   /* skip-link / anchor jumps land instantly (WCAG 2.3.3) */
  .ticker__track,.band__track,.strip__track,.print.in.live,
  .hero__hint .arrow,.knob.is-playing .eq i,#grain,.c-reticle{ animation:none !important; }
  .print{ opacity:1 !important; transform:rotate(var(--rot,0deg)) !important; }
  .kw,.kln{ opacity:1 !important; transform:none !important; filter:none !important; }
  .sw{ transform:none !important; }
}

/* ====================== RESPONSIVE ====================== */
@media (max-width:720px){
  .wall{ gap:22px 16px; padding:18px 12px; }
  .print.l,.print.m{ width:clamp(150px,44vw,260px); }
  .print.s{ width:clamp(120px,38vw,200px); }
  .hero__bug{ top:46px; }
  .hero__bug img{ height:50px; }
  /* keep the off-kilter litany on-screen — stop horizontal clipping under
     overflow:clip WITHOUT straightening the leaning, varied-size look
     (lv5 left untouched; it doesn't clip) */
  .litany{ max-width:92vw; margin-inline:auto; }
  .litany .lv2{ text-align:left; }
  .litany .lv3{ padding-left:4vw; }
  /* comfortable touch targets */
  .knob{ min-height:46px; padding:12px 15px; font-size:12px; }
  .dock{ right:10px; bottom:10px; gap:8px; }
}
/* any coarse-pointer device: never ship a sub-44px tap target */
@media (pointer:coarse){
  .knob{ min-height:46px; }
}

/* ====================== CUSTOM CURSOR ====================== */
/* a print-shop registration mark that morphs over interactive things.
   Hidden entirely on touch / coarse pointers (only shown once JS adds
   .has-cursor on a fine-pointer device). */
#cursor, #cursorDot{ display:none; }
@media (pointer:fine){
  html.has-cursor, html.has-cursor *{ cursor:none !important; }
  .has-cursor #cursor{ display:block; }
  .has-cursor #cursorDot{ display:block; }
}
#cursor{
  position:fixed; top:0; left:0; z-index:12000; pointer-events:none;
  will-change:transform;
}
#cursorDot{
  position:fixed; top:0; left:0; z-index:12001; pointer-events:none;
  width:6px; height:6px; border-radius:50%; background:#fff;
  mix-blend-mode:difference; will-change:transform; margin:-3px 0 0 -3px;
}
.c-shape{
  position:relative; width:34px; height:34px; margin:-17px 0 0 -17px;
  border-radius:50%; border:2px solid #fff; color:#fff;
  display:flex; align-items:center; justify-content:center;
  mix-blend-mode:difference;
  transition:width .22s cubic-bezier(.2,.9,.3,1.2), height .22s cubic-bezier(.2,.9,.3,1.2),
             margin .22s cubic-bezier(.2,.9,.3,1.2), background .18s linear,
             border-color .18s linear, transform .12s ease;
}
.c-reticle{
  position:absolute; inset:-9px; border:1.5px dashed currentColor; border-radius:50%;
  opacity:.65; animation:spin 5s linear infinite;
}
.c-label{
  font-family:var(--font-mono); font-weight:700; font-size:12px; letter-spacing:1px;
  text-transform:uppercase; opacity:0; transition:opacity .14s linear; transform:translateY(.5px);
}
@keyframes spin{ to{ transform:rotate(360deg); } }

/* hover: photos → orange PEEK disc */
#cursor.is-media .c-shape{
  width:88px; height:88px; margin:-44px 0 0 -44px;
  background:var(--orange); border-color:#000; color:#000; mix-blend-mode:normal;
}
#cursor.is-media .c-label{ opacity:1; }
/* hover: links/buttons → ink GO disc */
#cursor.is-click .c-shape{
  width:62px; height:62px; margin:-31px 0 0 -31px;
  background:var(--ink); border-color:#fff; color:#fff; mix-blend-mode:normal;
}
#cursor.is-click .c-label{ opacity:1; }
/* hide the spinning reticle once morphed */
#cursor.is-media .c-reticle, #cursor.is-click .c-reticle{ opacity:0; }
/* press feedback */
#cursor.is-down .c-shape{ transform:scale(.8); }

@media (prefers-reduced-motion:reduce){
  .c-reticle{ animation:none; }
}