/* Additions to Morad's style.css (css/morad.css, untouched) for the pieces this site adds
   to his pages: the live fandom directory (join an existing fandom) and our scroll-built
   "How it works" spiral. Written in his idiom: square, black, News Cycle labels. */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.tm{font-size:.6em;vertical-align:super;line-height:0}

/* fandom directory */
.fd-tools{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 14px}
.fd-tools input,.fd-tools select{min-height:48px;border:1px solid var(--ink);border-radius:0;background:#fff;color:var(--ink);font:inherit;font-size:16px;padding:0 16px}
.fd-tools input{flex:1 1 260px}
.fd-tools select{flex:0 0 auto;padding-right:36px;font-family:var(--grotesk);font-weight:700;text-transform:uppercase;font-size:13px;letter-spacing:.04em}
.fd-tools input:focus,.fd-tools select:focus{outline:none;border-color:var(--gold)}
.fd-types{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 16px}
.fd-types button{min-height:36px;padding:0 12px;border:1px solid var(--ink);border-radius:0;background:#fff;color:var(--ink);font-family:var(--grotesk);font-weight:700;font-size:12px;letter-spacing:.06em;text-transform:uppercase;cursor:pointer}
.fd-types button[aria-pressed="true"]{background:var(--ink);color:#fff}
.fd-count{margin:0 0 12px;font-family:var(--grotesk);font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.fd-grid{list-style:none;margin:0;padding:0;display:grid;gap:0;border-top:1px solid var(--ink)}
@media(min-width:640px){.fd-grid{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:32px}}
@media(min-width:1000px){.fd-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.fd-grid li{border-bottom:1px solid var(--rule)}
.fd-card{display:flex;align-items:center;gap:14px;padding:16px 0;color:var(--ink);text-decoration:none}
.fd-card .cr{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto;background:var(--ink);color:#fff;font-family:var(--grotesk);font-weight:700;font-size:14px;letter-spacing:.04em}
.fd-card .nm{display:block;font-family:var(--serif);font-style:italic;font-size:21px;line-height:1.2;overflow-wrap:anywhere}
.fd-card .mt{display:block;font-family:var(--grotesk);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-top:3px}
.fd-card .arr{margin-left:auto;color:var(--gold-deep);font-size:18px;transition:transform .2s var(--ease)}
.fd-card:hover .nm{color:var(--gold-deep)}
.fd-card:hover .arr{transform:translateX(3px)}
.fd-empty{margin:16px 0 8px;padding:24px;border:1px solid var(--ink)}
.fd-empty h3{margin:0 0 6px}
.fd-empty p{margin:0 0 12px}
.fd-dir .fd-note{margin:22px 0 0}
.fd-list-sec h2{margin-bottom:20px}
.join-sec .join-more{display:flex;flex-wrap:wrap;gap:10px;margin:28px 0 0}
#join .fd-grid li:nth-child(n+7){display:none}

/* our scroll-built spiral inside his "How it works" */
.hw-svg .curve-ink{fill:none;stroke:#000;stroke-width:1.6;stroke-linecap:round}
.hw-svg .curve-gold{fill:none;stroke:var(--gold);stroke-width:3;stroke-linecap:round}
.hw-svg .br{fill:none;stroke:#000;stroke-width:1;stroke-opacity:.7;stroke-linecap:round}
.hw-svg .riv{fill:none;stroke:var(--gold);stroke-width:1.2;stroke-opacity:.55;stroke-linecap:round}
.hw-svg .fan,.hw-svg .bfan{fill:#000}
.hw-svg .rfan{fill:#000;fill-opacity:.5}
.hw-svg .fan-ring{fill:#fff;stroke:var(--gold);stroke-width:1.6}
.hw-svg .mom{fill:var(--gold)}
.hw-svg .mom-ring{fill:none;stroke:#000;stroke-width:1;stroke-dasharray:2 3}
.hw-svg .glow{fill:url(#mglow)}
.hw-svg .pulse{fill:var(--gold-deep);opacity:0}
.hw-svg .rflag{fill:#fff;stroke:var(--gold);stroke-width:1.6}
.hw-svg .mflag{fill:#000;stroke:var(--gold);stroke-width:2.5}
.hw-svg .pop{transform-box:fill-box;transform-origin:center;transform:scale(0);transition:transform .45s cubic-bezier(.34,1.56,.64,1)}
.hw-svg .pop.in{transform:scale(1)}
.hw-svg .nl{font-family:var(--grotesk);font-weight:700;letter-spacing:.18em;text-transform:uppercase;fill:#000;paint-order:stroke;stroke:#fff;stroke-linejoin:round;opacity:0;transition:opacity .4s}
.hw-svg .nl.m{fill:var(--gold-deep)}
.hw-svg .nl.in{opacity:1}
#nspiral{overflow:visible}
@media(prefers-reduced-motion:reduce){.hw-svg .pop,.hw-svg .nl{transition:none}}

/* footer: his line, plus the pages his header doesn't list */
.ftr-links{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 20px;list-style:none;margin:14px 0 0;padding:0;width:100%}
.ftr-links a{font-family:var(--grotesk);font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink);text-decoration:none}
.ftr-links a:hover{color:var(--gold-deep)}
.path-ctas{display:flex;flex-wrap:wrap;gap:8px;margin:auto 0 0}
.ftr-addr{flex-basis:100%;margin:2px 0 0;font-size:13px;color:var(--muted)}