/* wtfjane // the daily draws // neutral decks hub. Zero JavaScript. */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#0C0C12; --bg2:#15131F; --ink:#ECE9F5; --muted:#9C97B5; --hair:rgba(236,233,245,.12);
  --gold-hi:#F0E2C0; --gold:#E8C766; --gold-base:#C9A227; --focus:#FF2BD6;
  --cic-hi:#FF7BE6; --cic-mid:#FF2BD6; --cic-lo:#7A1FFF;
  --cic:url("data:image/png;base64,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");
  --margin:clamp(1.1rem,5vw,3rem);
  --s--2:clamp(.66rem,.62rem + .12vw,.74rem);
  --s--1:clamp(.76rem,.72rem + .18vw,.86rem);
  --s-0:clamp(.99rem,.94rem + .22vw,1.1rem);
  --s-1:clamp(1.16rem,1rem + .62vw,1.55rem);
  --s-2:clamp(1.5rem,1.1rem + 1.9vw,2.8rem);
  --s-3:clamp(2.1rem,1.3rem + 3.8vw,4.4rem);
}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font-family:'Josefin Sans',system-ui,sans-serif;position:relative;
  line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
/* page shell: clips the hero sunburst so its 300vmax bleed can't add empty scroll
   space below the footer, while still letting it spread behind all content. */
.shell{overflow:hidden}
img{display:block;width:100%;height:auto}
a{color:inherit;text-decoration:none}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.grain{position:fixed;inset:0;pointer-events:none;z-index:9000;opacity:.045;mix-blend-mode:soft-light;transform:translateZ(0);
  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.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.cic-mark{display:inline-block;width:1.6em;height:1.45em;flex:none;
  background:linear-gradient(150deg,var(--cic-hi),var(--cic-mid) 48%,var(--cic-lo));
  -webkit-mask:var(--cic) center/contain no-repeat;mask:var(--cic) center/contain no-repeat}
.cic-div{display:inline-block;width:1.4em;height:1.2em;vertical-align:-.22em;margin:0 .1em;
  background:linear-gradient(155deg,var(--cic-hi),var(--cic-mid) 48%,var(--cic-lo));
  -webkit-mask:var(--cic) center/contain no-repeat;mask:var(--cic) center/contain no-repeat}
@keyframes nav-reveal{from{opacity:0}to{opacity:1}}
.home-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:clamp(1rem,3vw,1.6rem) var(--margin);
  /* relative+z-index keeps the open dropdown above the deity (the opacity reveal
     below makes this a stacking context, so it needs to out-rank the hero art) */
  position:relative;z-index:70;
  /* the wtfjane mark + hamburger fade in 2.3s after load, so the hero lands first */
  opacity:0;animation:nav-reveal .55s ease 2.3s forwards}
@media (prefers-reduced-motion:reduce){.home-head{opacity:1;animation:none}}
.brandmark{display:inline-flex;align-items:center;gap:.5em;font-weight:600;font-size:var(--s--1);
  letter-spacing:.26em;text-transform:lowercase;color:var(--ink);transition:color .18s ease}
.brandmark:hover,.brandmark:focus-visible{color:var(--cic-mid)}
.brandmark:hover .cic-mark,.brandmark:focus-visible .cic-mark{filter:brightness(1.3) drop-shadow(0 0 7px var(--cic-mid))}
/* zero-JS deck menu: a native <details> hamburger that drops a per-deck list */
.deck-menu{position:relative}
.menu-btn{list-style:none;cursor:pointer;display:inline-flex;flex-direction:column;justify-content:center;
  gap:5px;width:38px;height:34px;padding:8px 7px;background:none;border:0;filter:drop-shadow(0 1px 2px rgba(0,0,0,.5))}
.menu-btn::-webkit-details-marker{display:none}
.menu-btn span{display:block;height:2px;width:100%;background:var(--ink);border-radius:2px}
.deck-menu[open] .menu-btn span,.menu-btn:hover span,.menu-btn:focus-visible span{background:#fff}
.deck-menu-list{position:absolute;right:0;top:calc(100% + .55rem);z-index:60;display:flex;flex-direction:column;
  min-width:212px;background:var(--bg2);border:1px solid var(--hair);border-radius:12px;padding:.5rem;
  box-shadow:0 22px 55px rgba(0,0,0,.55)}
.deck-menu-list a{display:flex;align-items:center;gap:.65em;padding:.62rem .7rem;border-radius:8px;
  font-family:'Josefin Sans',sans-serif;font-weight:600;text-transform:uppercase;letter-spacing:.1em;
  font-size:var(--s--1);color:var(--ink)}
.deck-menu-list a:hover,.deck-menu-list a:focus-visible{
  background:color-mix(in srgb,var(--accent,#888) 16%,transparent);color:var(--accent,#fff)}
.deck-menu-list .dm-head{font-weight:700;color:var(--ink);letter-spacing:.16em;border-radius:8px 8px 0 0;
  border-bottom:1px solid var(--hair);margin-bottom:.3rem;padding-bottom:.62rem}
.deck-menu-list .dm-deck{padding-left:1.5rem;color:var(--muted);border-radius:0;
  font-family:var(--wm,'Josefin Sans',sans-serif)}
.deck-menu-list a:last-child{border-radius:0 0 8px 8px}
main{max-width:1460px;margin:0 auto;padding:0 var(--margin)}
/* home hero: the wtfjane wordmark in an Overclock look (Anton, electric violet,
   hover-to-corrupt glitch), with a deadpan subtitle */
.home-hero{max-width:min(1960px,97vw);margin-inline:auto;position:relative;
  padding:clamp(.9rem,2.4vw,2.1rem) var(--margin) clamp(.4rem,2vw,1.1rem);
  display:grid;grid-template-columns:1fr;gap:clamp(1.8rem,5vw,3rem);align-items:center}
@media(min-width:1001px){
  .home-hero{grid-template-columns:minmax(0,1fr) clamp(320px,42%,640px);
    gap:clamp(2rem,4.5vw,4.5rem)}
}
/* tighter desktop widths (the two-col range): the tall deity crowds the section below,
   so give the hero more breathing room underneath and let the wordmark sit a touch lower */
@media(max-width:1280px){.home-hero{padding-bottom:clamp(1.4rem,3.4vw,2.4rem)}}
@media(min-width:1001px) and (max-width:1280px){.hero-text{margin-top:clamp(.5rem,1.7vw,1.4rem)}}
.hero-text{min-width:0}
/* on-load: the whole hero (text, deity, background burst) fades in together as one quiet
   beat -- no stagger, nothing heroic. Gated behind no-preference so the opacity:0 start
   never traps reduced-motion users; the nav still arrives later, at 2.3s. */
@media (prefers-reduced-motion:no-preference){
  @keyframes hero-fade{from{opacity:0}to{opacity:1}}
  .home-hero{animation:hero-fade .8s ease both}
}
/* ONE rotating sunburst, pinned to the deity: it lives in the image's stage so it
   tracks the image responsively (centered behind it), yet it is 300vmax at z-index:-1
   so the rays radiate from behind the saint and bleed DOWN behind every section. */
.hero-burst{position:absolute;left:50%;top:50%;width:0;height:0;z-index:-1;pointer-events:none}
.hero-burst .hb{position:absolute;left:0;top:0;width:300vmax;height:300vmax;
  transform:translate(-50%,-50%);transform-origin:50% 50%;
  -webkit-mask:radial-gradient(closest-side,#000 0%,rgba(0,0,0,.55) 24%,transparent 78%);
          mask:radial-gradient(closest-side,#000 0%,rgba(0,0,0,.55) 24%,transparent 78%);
  background:repeating-conic-gradient(from 0deg at 50% 50%,
    color-mix(in srgb,#7A1FFF 30%,transparent) 0deg 2deg,transparent 2deg 9deg);opacity:.26}
.hero-burst .hb2{background:repeating-conic-gradient(from 4deg at 50% 50%,
    color-mix(in srgb,#FF2BD6 24%,transparent) 0deg 1deg,transparent 1deg 12deg);opacity:.2}
@media (prefers-reduced-motion:no-preference){
  @keyframes hb-turn{to{transform:translate(-50%,-50%) rotate(360deg)}}
  .hero-burst .hb{animation:hb-turn 150s linear infinite}
  .hero-burst .hb2{animation:hb-turn 220s linear infinite reverse}
  /* touching the deity throws the whole sunburst into a glitch: it spins up hard,
     flickers, and the ray origin shakes a few px on a stepped (digital) cadence */
  @keyframes hb-flick{0%,100%{opacity:.5}18%{opacity:.16}36%{opacity:.64}54%{opacity:.26}72%{opacity:.54}}
  @keyframes hb2-flick{0%,100%{opacity:.42}20%{opacity:.62}40%{opacity:.18}60%{opacity:.5}80%{opacity:.3}}
  @keyframes burst-shake{0%,100%{transform:translate(0,0)}25%{transform:translate(-5px,2px)}
    50%{transform:translate(4px,-3px)}75%{transform:translate(-3px,3px)}}
  .home-hero:has(.hero-art:hover) .hero-burst,
  .home-hero:has(.hero-art:focus-within) .hero-burst{animation:burst-shake .12s steps(2,end) infinite}
  .home-hero:has(.hero-art:hover) .hero-burst .hb,
  .home-hero:has(.hero-art:focus-within) .hero-burst .hb{animation:hb-turn 4s linear infinite,hb-flick .26s steps(2,end) infinite}
  .home-hero:has(.hero-art:hover) .hero-burst .hb2,
  .home-hero:has(.hero-art:focus-within) .hero-burst .hb2{animation:hb-turn 6.5s linear infinite reverse,hb2-flick .3s steps(2,end) infinite}
}
.home-wordmark{position:relative;display:inline-block;font-family:'Anton',Impact,sans-serif;
  font-weight:400;text-transform:uppercase;letter-spacing:.01em;line-height:.84;color:#7A1FFF;
  font-size:clamp(3rem,.2rem + 14.5vw,13rem);white-space:nowrap;width:max-content;max-width:100%}
.home-wordmark::before,.home-wordmark::after{content:attr(data-text);position:absolute;top:0;left:0;
  width:100%;pointer-events:none;opacity:0}
.home-wordmark::before{color:#7A1FFF;mix-blend-mode:screen}
.home-wordmark::after{color:#F23DBE;mix-blend-mode:screen}
@media (prefers-reduced-motion:no-preference){
  @keyframes oc-shift{0%{transform:translate(-3px,0)}50%{transform:translate(2px,-1px)}100%{transform:translate(-3px,0)}}
  @keyframes oc-shift-rev{0%{transform:translate(3px,0)}50%{transform:translate(-2px,1px)}100%{transform:translate(3px,0)}}
  .home-wordmark::before{opacity:.92;animation:oc-shift .3s steps(2,end) infinite}
  .home-wordmark::after{opacity:.92;animation:oc-shift-rev .3s steps(2,end) infinite}
  /* hover: harder misregister + skew, faster, a third cyan layer punches in */
  @keyframes oc-hi{0%{transform:translate(-8px,1px) skewX(-3deg)}33%{transform:translate(7px,-2px)}
    66%{transform:translate(-5px,2px) skewX(2deg)}100%{transform:translate(-8px,1px) skewX(-3deg)}}
  @keyframes oc-hi-rev{0%{transform:translate(8px,-1px) skewX(3deg)}33%{transform:translate(-7px,2px)}
    66%{transform:translate(5px,-2px) skewX(-2deg)}100%{transform:translate(8px,-1px) skewX(3deg)}}
  /* touching the deity drives the same hard glitch on the wordmark (:has couples them) */
  .home-wordmark:hover::before,
  .home-hero:has(.hero-art:hover) .home-wordmark::before,
  .home-hero:has(.hero-art:focus-within) .home-wordmark::before{opacity:1;color:#2BE5FF;animation:oc-hi .2s steps(2,end) infinite}
  .home-wordmark:hover::after,
  .home-hero:has(.hero-art:hover) .home-wordmark::after,
  .home-hero:has(.hero-art:focus-within) .home-wordmark::after{opacity:1;animation:oc-hi-rev .2s steps(2,end) infinite}
  .home-wordmark:hover,
  .home-hero:has(.hero-art:hover) .home-wordmark,
  .home-hero:has(.hero-art:focus-within) .home-wordmark{animation:oc-jit .12s steps(2,end) infinite}
  @keyframes oc-jit{0%,100%{transform:translate(0,0)}50%{transform:translate(1px,-1px)}}
}
.home-sub{font-family:'Space Grotesk',system-ui,sans-serif;color:var(--ink);
  font-size:clamp(1.22rem,.85rem + 1.05vw,2rem);font-weight:500;letter-spacing:.005em;
  margin-top:clamp(1rem,1.6vw,1.7rem);max-width:42ch}
/* "tarot card factory": a cyan neon counterpoint to the violet h1, glitch-bursting
   on an interval so it pops but stays legible (a different color + cadence than WTFJANE) */
.home-sub .zap{position:relative;display:inline-block;white-space:nowrap;color:#2BE5FF;font-weight:700;
  letter-spacing:.012em;text-shadow:0 0 2px rgba(43,229,255,.9),0 0 16px rgba(43,229,255,.5)}
.home-sub .zap::before,.home-sub .zap::after{content:attr(data-text);position:absolute;left:0;top:0;width:100%;
  pointer-events:none;opacity:0;mix-blend-mode:screen;text-shadow:none}
.home-sub .zap::before{color:#FF2BD6}
.home-sub .zap::after{color:#EAFBFF}
@media (prefers-reduced-motion:no-preference){
  @keyframes zap-a{0%,44%,56%,90%,100%{opacity:0;transform:translate(0,0)}
    47%{opacity:.5;transform:translate(-1px,0)}91%{opacity:.92;transform:translate(-2px,-1px)}
    94%{opacity:.85;transform:translate(2px,1px)}97%{opacity:.6;transform:translate(-1px,0)}}
  @keyframes zap-b{0%,44%,56%,90%,100%{opacity:0;transform:translate(0,0)}
    47%{opacity:.5;transform:translate(1px,0)}91%{opacity:.92;transform:translate(2px,1px)}
    94%{opacity:.85;transform:translate(-2px,-1px)}97%{opacity:.6;transform:translate(1px,0)}}
  .home-sub .zap::before{animation:zap-a 2.6s steps(1,end) infinite}
  .home-sub .zap::after{animation:zap-b 2.6s steps(1,end) infinite}
  /* hover: stop waiting for the interval, glitch hard and constantly */
  @keyframes zap-hi{0%{transform:translate(-3px,0)}30%{transform:translate(3px,-1px) skewX(-3deg)}
    60%{transform:translate(-2px,1px)}100%{transform:translate(-3px,0)}}
  @keyframes zap-hi-rev{0%{transform:translate(3px,0)}30%{transform:translate(-3px,1px) skewX(3deg)}
    60%{transform:translate(2px,-1px)}100%{transform:translate(3px,0)}}
  .home-sub .zap:hover::before,.home-sub .zap:focus-visible::before,
  .home-hero:has(.hero-art:hover) .home-sub .zap::before,
  .home-hero:has(.hero-art:focus-within) .home-sub .zap::before{opacity:1;animation:zap-hi .18s steps(2,end) infinite}
  .home-sub .zap:hover::after,.home-sub .zap:focus-visible::after,
  .home-hero:has(.hero-art:hover) .home-sub .zap::after,
  .home-hero:has(.hero-art:focus-within) .home-sub .zap::after{opacity:1;animation:zap-hi-rev .18s steps(2,end) infinite}
}
.home-sub .zap:hover,
.home-hero:has(.hero-art:hover) .home-sub .zap,
.home-hero:has(.hero-art:focus-within) .home-sub .zap{color:#7CF4FF;text-shadow:0 0 3px rgba(43,229,255,1),0 0 24px rgba(43,229,255,.8),0 0 46px rgba(255,43,214,.4)}
/* the plain subtitle words stay calm normally, but glitch (magenta/violet split + jitter)
   ONLY while the deity is being touched -- the whole line corrupts, not just the emphasis */
.home-sub .sub-w{position:relative;display:inline-block}
.home-sub .sub-w::before,.home-sub .sub-w::after{content:attr(data-text);position:absolute;
  left:0;top:0;width:100%;pointer-events:none;opacity:0;mix-blend-mode:screen}
.home-sub .sub-w::before{color:#FF2BD6}
.home-sub .sub-w::after{color:#7A1FFF}
@media (prefers-reduced-motion:no-preference){
  .home-hero:has(.hero-art:hover) .home-sub .sub-w::before,
  .home-hero:has(.hero-art:focus-within) .home-sub .sub-w::before{opacity:1;animation:zap-hi .2s steps(2,end) infinite}
  .home-hero:has(.hero-art:hover) .home-sub .sub-w::after,
  .home-hero:has(.hero-art:focus-within) .home-sub .sub-w::after{opacity:1;animation:zap-hi-rev .2s steps(2,end) infinite}
  .home-hero:has(.hero-art:hover) .home-sub .sub-w,
  .home-hero:has(.hero-art:focus-within) .home-sub .sub-w{animation:oc-jit .12s steps(2,end) infinite}
}
/* hero showpiece: the patron-saint deity. Hover or focus to corrupt (RGB channel
   split + scanline sweep). Ported from the wtfjane personal-site hero, retuned to
   the hub's violet/magenta/cyan. Static markup lives in home.html.tmpl. */
.hero-art-stage{position:relative;justify-self:center;width:100%;max-width:640px}
/* single column (<=1000px): the deity stacks ABOVE the wordmark instead of riding shotgun */
@media(max-width:1000px){.hero-art-stage{order:-1}}
.hero-art{position:relative;z-index:1;width:100%;aspect-ratio:1/1.08;
  overflow:hidden;background:#000;cursor:crosshair;clip-path:url(#hero-lancet-inner)}
/* thick liquid-glass border (Overclock-card flavor): a frosted magenta/violet ring sits
   behind the inset deity, refracting the sunburst through it; the bright SVG rim + a top
   sheen read as the glass edge. */
.hero-art-glass{position:absolute;z-index:0;top:0;left:0;width:100%;aspect-ratio:1/1.08;
  pointer-events:none;clip-path:url(#hero-lancet);
  /* top-lit beveled glass: the band glows along the top of the arch and falls into shadow
     toward the bottom (no backdrop-filter -- it ignores the hero opacity fade-in, so the
     border would refract at full strength and look like it popped instead of fading) */
  background:linear-gradient(to bottom,
    color-mix(in srgb,#FFC8EE 52%,transparent) 0%,
    color-mix(in srgb,#FF4FD6 42%,transparent) 16%,
    color-mix(in srgb,#A22BE6 30%,transparent) 48%,
    color-mix(in srgb,#5A18B0 28%,transparent) 76%,
    color-mix(in srgb,#260A52 40%,transparent) 100%)}
.hero-art-glass::before{content:"";position:absolute;inset:0;
  /* specular light marks where light catches the bevel: a hot glint at the apex, softer
     ones on each shoulder, and a magenta bloom just under the apex */
  background:
    radial-gradient(46% 24% at 50% 0.5%,rgba(255,255,255,.6),rgba(255,255,255,0) 72%),
    radial-gradient(22% 26% at 13% 25%,rgba(255,221,247,.42),transparent 74%),
    radial-gradient(20% 24% at 87% 27%,rgba(255,221,247,.28),transparent 74%),
    radial-gradient(42% 13% at 50% 8%,rgba(255,123,230,.32),transparent 76%)}
.hero-art img{width:100%;height:100%;object-fit:cover;
  transition:filter .25s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
.hero-art-layer{position:absolute;inset:0;background-size:cover;background-position:center;
  opacity:0;pointer-events:none;mix-blend-mode:screen}
.hero-art-layer.r{background-color:#FF2BD6}
.hero-art-layer.b{background-color:#7A1FFF}
.hero-art-scan{position:absolute;inset:0;pointer-events:none;opacity:0;mix-blend-mode:overlay;
  background:repeating-linear-gradient(0deg,rgba(43,229,255,0) 0,rgba(43,229,255,0) 2px,
    rgba(43,229,255,.5) 2px,rgba(43,229,255,.5) 3px)}
.hero-art:hover img,.hero-art:focus-within img{filter:contrast(1.35) saturate(1.6) hue-rotate(-14deg)}
.hero-art:hover .hero-art-layer,.hero-art:focus-within .hero-art-layer{opacity:.82}
.hero-art:hover .hero-art-scan,.hero-art:focus-within .hero-art-scan{opacity:1}
@media (prefers-reduced-motion:no-preference){
  @keyframes saint-jitter{
    0%{clip-path:inset(0 0 0 0);transform:translate(0,0)}
    15%{clip-path:inset(12% 0 64% 0);transform:translate(-7px,0)}
    30%{clip-path:inset(58% 0 22% 0);transform:translate(8px,0)}
    45%{clip-path:inset(30% 0 50% 0);transform:translate(-6px,0)}
    60%{clip-path:inset(74% 0 8% 0);transform:translate(7px,0)}
    75%{clip-path:inset(4% 0 84% 0);transform:translate(-5px,0)}
    90%{clip-path:inset(44% 0 38% 0);transform:translate(6px,0)}
    100%{clip-path:inset(0 0 0 0);transform:translate(0,0)}}
  @keyframes saint-scan{0%{background-position:0 -100%}100%{background-position:0 200%}}
  .hero-art:hover .hero-art-layer.r,.hero-art:focus-within .hero-art-layer.r{animation:saint-jitter .3s steps(3,end) infinite}
  .hero-art:hover .hero-art-layer.b,.hero-art:focus-within .hero-art-layer.b{animation:saint-jitter .3s steps(3,end) infinite reverse}
  .hero-art:hover .hero-art-scan,.hero-art:focus-within .hero-art-scan{animation:saint-scan .8s linear infinite}
}
@media (prefers-reduced-motion:reduce){
  .hero-art:hover .hero-art-layer.r,.hero-art:focus-within .hero-art-layer.r{transform:translate(-4px,0)}
  .hero-art:hover .hero-art-layer.b,.hero-art:focus-within .hero-art-layer.b{transform:translate(4px,0)}
  .hero-art img{transition:none}
}
/* reliquary arch frame: gradient leading traces the lancet outline (overflow visible
   so the apex point isn't clipped). Quiet at rest; on hover it jitters and cycles its
   stroke through the page scheme ONLY -- violet / magenta / cyan, never a rainbow. */
/* bound to the deity's own box (1/1.08), NOT the stage -- otherwise the arch stretches
   down around the warning label below it */
.hero-art-line{position:absolute;z-index:2;top:0;left:0;width:100%;aspect-ratio:1/1.08;
  pointer-events:none;overflow:visible;opacity:.62;transition:opacity .2s ease;
  filter:drop-shadow(0 0 4px color-mix(in srgb,#FF2BD6 40%,transparent))}
.hero-art:hover ~ .hero-art-line,.hero-art:focus ~ .hero-art-line{opacity:1}
@media (prefers-reduced-motion:no-preference){
  @keyframes arch-jit{0%,100%{transform:translate(0,0)}25%{transform:translate(-2px,1px)}
    50%{transform:translate(2px,-1px)}75%{transform:translate(-1px,1px)}}
  @keyframes arch-stroke{0%,100%{stroke:#FF2BD6}33%{stroke:#7A1FFF}66%{stroke:#FF7BE6}}
  .hero-art:hover ~ .hero-art-line,.hero-art:focus ~ .hero-art-line{animation:arch-jit .3s steps(3,end) infinite}
  .hero-art:hover ~ .hero-art-line path,.hero-art:focus ~ .hero-art-line path{animation:arch-stroke .3s steps(2,end) infinite}
}
/* "NO CORRUPTING THE 0RACLE!" -- the legible IBM Plex Mono stamp that lands ON the saint
   on hover, flanked by a star + a hazard triangle. Hazard yellow; a deep shadow keeps it
   readable over the busy art. (The quiet "no touching" label below fades OUT as this fades
   in, so only one warning shows at a time.) */
.hero-art-msg{position:absolute;z-index:4;left:50%;top:50%;transform:translate(-50%,-50%);
  width:90%;text-align:center;pointer-events:none;opacity:0;transition:opacity .14s ease;
  font-family:'IBM Plex Mono','Courier New',monospace;font-weight:600;text-transform:uppercase;
  font-size:clamp(.86rem,2.4vw,1.18rem);letter-spacing:.04em;line-height:1.34;color:#FFD60A;
  text-shadow:0 0 3px #05010E,0 0 8px #05010E,0 0 16px #05010E,0 1px 2px #05010E}
.hero-art:hover .hero-art-msg,.hero-art:focus-within .hero-art-msg{opacity:1}
/* "NO TOUCHING THE DEITY!" -- quiet warning under the saint. Faint at rest; it fades OUT
   when the deity is touched (the on-art hazard stamp takes over). */
.deity-warn{margin-top:clamp(1.1rem,2.2vw,1.9rem);text-align:center;line-height:1;
  font-family:'IBM Plex Mono','Courier New',monospace;font-weight:600;text-transform:uppercase;
  font-size:clamp(.62rem,.5rem + .52vw,.86rem);letter-spacing:.22em;color:var(--muted);
  opacity:.34;user-select:none;transition:opacity .2s ease}
.home-hero:has(.hero-art:hover) .deity-warn,
.home-hero:has(.hero-art:focus-within) .deity-warn{opacity:0}
.today{padding:clamp(2.4rem,6vw,4.5rem) 0 clamp(1.4rem,4vw,2.4rem)}
.today-label{text-transform:uppercase;letter-spacing:.3em;font-size:var(--s--1);color:var(--muted);margin-bottom:1.4rem;max-width:1040px;margin-inline:auto}
/* Latest draw: a big card filling a left 50% column, copy in the right 50% column (with
   right padding so the text is narrower than the card). The whole block is centered on the
   page (max-width + auto margins); the card and copy stay left-aligned within it. */
.feature{display:grid;grid-template-columns:1fr;gap:clamp(1.4rem,4vw,3rem);align-items:center}
@media(min-width:720px){
  .feature{grid-template-columns:1fr 1fr;max-width:1040px;margin-inline:auto}
  .feature .feature-card{max-width:none}                 /* fill the left 50% column (beats the base 300px cap below) */
  .feature .feature-copy{padding-right:clamp(1rem,4vw,3.5rem)}   /* text narrower than the card */
}
.feature-card{position:relative;border-radius:12px;overflow:hidden;box-shadow:0 18px 50px rgba(0,0,0,.45);max-width:300px;width:100%}
.feature-card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--accent,#888) 60%,transparent)}
.feature-card img{transition:filter .2s ease}
.feature:hover .feature-card img,.feature:focus-visible .feature-card img{filter:brightness(1.16)}
.feature-deck{font-family:var(--wm,'Josefin Sans',sans-serif);font-weight:700;letter-spacing:.2em;text-transform:uppercase;font-size:var(--s-0);color:var(--accent,#fff)}
.feature-name{font-family:'Yeseva One',Georgia,serif;font-size:var(--s-3);line-height:1.05;margin:.3rem 0 .8rem;color:var(--ink)}
.feature-reading{font-family:'Space Grotesk',system-ui,sans-serif;color:var(--muted);
  font-size:var(--s-0);line-height:1.6;max-width:50ch}
.feature-go{display:inline-block;margin-top:1.2rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  font-size:var(--s--1);color:var(--accent,#fff);border-bottom:1px solid currentColor;padding-bottom:.15em}
.feature--empty{color:var(--muted);font-style:italic;padding:3rem;text-align:center;border:1px solid var(--hair);border-radius:18px}
/* intro header for the per-deck sections so the deck names below read as decks */
.decks-intro{padding:clamp(1.8rem,4vw,2.8rem) 0 .2rem;border-top:1px solid var(--hair);scroll-margin-top:1.5rem}
.decks-eyebrow{text-transform:uppercase;letter-spacing:.3em;font-size:var(--s--1);color:var(--muted);margin-bottom:.7rem}
.decks-sub{font-family:'Space Grotesk',system-ui,sans-serif;color:var(--ink);font-size:var(--s-0);
  line-height:1.55;max-width:54ch}
.decks-intro + .deck-section{border-top:0;padding-top:.6rem}
/* day digest: every deck's card for a calendar day (today, then yesterday) */
.day-section{padding:clamp(1.6rem,4vw,2.6rem) 0;border-top:1px solid var(--hair)}
.day-label{text-transform:uppercase;letter-spacing:.3em;font-size:var(--s--1);color:var(--muted);margin-bottom:1.2rem}
.day-grid{display:flex;flex-wrap:wrap;gap:clamp(.9rem,2vw,1.4rem)}
.day-card{flex:1 1 150px;max-width:210px;border:1px solid color-mix(in srgb,var(--accent,#888) 22%,transparent);
  border-radius:14px;padding:.7rem;text-align:left;
  background:linear-gradient(180deg,color-mix(in srgb,var(--accent,#888) 8%,transparent),transparent);
  transition:border-color .15s ease,transform .15s ease}
.day-card:hover,.day-card:focus-visible{border-color:var(--accent,#888);transform:translateY(-3px)}
.day-card-img{border-radius:9px;overflow:hidden;box-shadow:0 12px 30px rgba(0,0,0,.42);margin-bottom:.65rem}
.day-deck{font-family:var(--wm,'Josefin Sans',sans-serif);font-size:var(--s--1);letter-spacing:.1em;
  text-transform:uppercase;color:var(--accent,#fff);line-height:1.1}
.day-name{font-family:'Yeseva One',Georgia,serif;font-size:var(--s-0);color:var(--ink);margin-top:.15rem;line-height:1.12}
.day-name .rt{font-family:'Josefin Sans',sans-serif;font-size:.6em;letter-spacing:.12em;color:var(--muted);margin-left:.25em}
.deck-section{padding:clamp(1.6rem,4vw,2.6rem) 0;border-top:1px solid var(--hair)}
.deck-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-bottom:1.2rem}
.deck-head h2{font-family:var(--wm,'Yeseva One',Georgia,serif);font-weight:400;font-size:var(--s-2);
  letter-spacing:.02em;color:var(--accent,var(--ink))}
.deck-head h2 a,.deck-head h2 a:hover{text-decoration:none}
.deck-head h2 a{transition:opacity .15s ease,text-shadow .15s ease}
.deck-head h2 a:hover,.deck-head h2 a:focus-visible{opacity:.85;
  text-shadow:0 0 22px color-mix(in srgb,var(--accent,#888) 55%,transparent)}
.deck-enter{font-weight:600;letter-spacing:.14em;text-transform:uppercase;font-size:var(--s--1);color:var(--muted)}
.deck-enter:hover,.deck-enter:focus-visible{color:var(--accent,var(--ink))}
.deck-thumbs{display:grid;gap:clamp(.7rem,2vw,1.1rem);grid-template-columns:repeat(auto-fill,minmax(110px,1fr))}
.thumb{border-radius:8px;overflow:hidden;border:1px solid var(--hair);transition:transform .2s ease,border-color .2s ease}
.thumb:hover,.thumb:focus-visible{transform:translateY(-3px);border-color:var(--accent,var(--ink))}

/* scroll-triggered card flip on home cards (mirrors the deck index): the front turns in
   from the deck's card-back as each card enters view. Without view-timeline support, or
   with reduced motion, the front simply shows. */
.cardflip{position:relative;width:100%;perspective:1500px}
.cardflip-inner{position:relative;width:100%;aspect-ratio:940/1401;transform-style:preserve-3d}
.cardflip .plate-img{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.cardflip .plate-front{transform:rotateY(0deg)}
.cardflip .plate-back{transform:rotateY(180deg)}
.cardflip .plate-img img{width:100%;height:100%;object-fit:cover;display:block}
@keyframes hm-turn-in{from{transform:rotateY(180deg)}to{transform:rotateY(0deg)}}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .cardflip--view .cardflip-inner{animation:hm-turn-in 1s linear both;animation-timeline:view();animation-range:entry 8% entry 70%}
  }
}
/* witching cards are dark and blend into the page; give them a defined teal border
   (distinct from overclock's violet accent, which witching's accent nearly matches) */
.deck-section[data-deck="witching"] .thumb{border-color:color-mix(in srgb,#5CE6D0 30%,transparent)}
.deck-section[data-deck="witching"] .thumb:hover,
.deck-section[data-deck="witching"] .thumb:focus-visible{border-color:#5CE6D0}

/* --- each deck's wordmark SIGNATURE on its home section heading ---------------
   home.css is standalone (base.css + the deck themes are not loaded here), so each
   deck's index-page wordmark treatment is restated explicitly: the goldmark-style
   gradient decks get a clipped gradient fill (+ a slow drift), Gilded stays a struck,
   motionless gold, Overclock rests solid violet, Phosphor glows and flickers. */
@keyframes hm-gold-shift{from{background-position:0 0}to{background-position:200% 0}}
@keyframes hm-phos-flicker{0%,19%,21%,55%,57%,100%{opacity:1}20%{opacity:.86}56%{opacity:.92}}

.deck-section[data-deck="lheure-verte"] .deck-head h2 a,
.deck-section[data-deck="witching"] .deck-head h2 a,
.deck-section[data-deck="gilded"] .deck-head h2 a{
  background-size:200% 100%;background-repeat:repeat;
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}

/* L'Heure Verte: green-hour gold, slow drift */
.deck-section[data-deck="lheure-verte"] .deck-head h2 a{
  background-image:linear-gradient(100deg,#9A7B1E 0%,#C9A227 18%,#F0E2C0 36%,#E8C766 50%,#F0E2C0 64%,#C9A227 82%,#9A7B1E 100%);
  filter:drop-shadow(0 0 9px rgba(240,226,192,.28))}

/* Witching: aurora fill, magenta -> purple -> teal, drifting */
.deck-section[data-deck="witching"] .deck-head h2 a{
  background-image:linear-gradient(100deg,#3A2A7A 0%,#5CE6D0 18%,#FF6FE0 36%,#9B5CFF 50%,#FF6FE0 64%,#5CE6D0 82%,#3A2A7A 100%);
  filter:drop-shadow(0 0 9px rgba(155,92,255,.33))}

/* Core: solid cyberwitch magenta (its accent #FF2BD6) + a periodic glitch (below) */

/* Gilded: struck, still gold (static top-lit gradient + engraved bevel, no drift) */
.deck-section[data-deck="gilded"] .deck-head h2 a{
  background-image:linear-gradient(180deg,#FBEFC2 0%,#E8C766 46%,#C9A227 82%,#8A6A14 100%);
  background-size:100% 100%;
  filter:drop-shadow(0 -1px 0 rgba(251,239,194,.55)) drop-shadow(0 2px 2px rgba(0,0,0,.5))}

/* Overclock: solid electric violet at rest (glitch is the hover tell below) */
.deck-section[data-deck="overclock"] .deck-head h2 a{color:#7A1FFF;-webkit-text-fill-color:#7A1FFF}

/* Phosphor: solid CRT phosphor + glow */
.deck-section[data-deck="phosphor"] .deck-head h2 a{
  color:#7CFFB0;-webkit-text-fill-color:#7CFFB0;
  text-shadow:0 0 6px rgba(76,255,143,.6),0 0 18px rgba(76,255,143,.32)}

@media (prefers-reduced-motion:no-preference){
  .deck-section[data-deck="lheure-verte"] .deck-head h2 a,
  .deck-section[data-deck="witching"] .deck-head h2 a{animation:hm-gold-shift 12s linear infinite}
  .deck-section[data-deck="phosphor"] .deck-head h2 a{animation:hm-phos-flicker 5s steps(1,end) infinite}
}

/* Overclock + Core: a periodic, automatic "tweaky" glitch (the hover-only split
   was undiscoverable on the hub) -- mostly clean, then a brief hard RGB-split
   stutter every few seconds. Different periods so the two never sync; inline-block
   so the transform jitter applies; dead still under reduced-motion. */
@keyframes hm-glitch{
  0%,88%,100%{transform:translate(0,0);text-shadow:none}
  89%{transform:translate(1px,-1px) skewX(-2deg);text-shadow:-2px 0 #2BE5FF,2px 0 #FF2BD6}
  91%{transform:translate(-2px,1px);text-shadow:2px 0 #2BE5FF,-2px 0 #FF2BD6}
  93%{transform:translate(1px,0) skewX(2deg);text-shadow:-1px 0 #2BE5FF,1px 0 #FF2BD6}
  95%{transform:translate(0,0);text-shadow:none}
}
.deck-section[data-deck="overclock"] .deck-head h2 a,
.deck-section[data-deck="core"] .deck-head h2 a{display:inline-block}
@media (prefers-reduced-motion:no-preference){
  .deck-section[data-deck="overclock"] .deck-head h2 a{animation:hm-glitch 4.5s steps(1,end) infinite}
  .deck-section[data-deck="core"] .deck-head h2 a{animation:hm-glitch 3.7s steps(1,end) infinite}
}
.home-foot{max-width:1460px;margin:clamp(2rem,5vw,3.5rem) auto 0;padding:clamp(1.4rem,4vw,2.2rem) var(--margin);
  border-top:1px solid var(--hair);display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  font-size:var(--s--2);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}

/* deck-focus chip row spacing on the home (visuals come from facets.css) */
.home-facet{padding:clamp(1.4rem,4vw,2.2rem) 0 0}
/* centered on the home only; gallery facet rows stay left-aligned */
.home-facet .facet-row{justify-content:center}
/* entry band into the gallery */
.cards-entry{padding:clamp(1.8rem,4vw,2.8rem) 0;border-top:1px solid var(--hair)}
.ce-eyebrow{text-transform:uppercase;letter-spacing:.3em;font-size:var(--s--1);color:var(--muted);margin-bottom:1rem}
.ce-links{display:flex;flex-wrap:wrap;gap:clamp(.6rem,2vw,1rem)}
.ce-link{display:inline-block;padding:.6rem 1rem;border:1px solid var(--hair);border-radius:10px;
  font-weight:600;letter-spacing:.04em;color:var(--ink);
  background:color-mix(in srgb,var(--bg2) 55%,transparent);transition:border-color .15s,color .15s}
.ce-link:hover,.ce-link:focus-visible{border-color:var(--cic-mid);color:var(--cic-hi)}