/*
Theme Name: FreeRingtonesFYI
Theme URI: https://www.freeringtonesfyi.com
Author: FreeRingtonesFYI
Description: Bright, Kandinsky-inspired destination theme for ringtones, notification sounds, wallpapers, live wallpapers and music clips. Every item is previewed on a phone lock screen with a one-tap audio preview and iPhone/Android download pairs. Requires FreeRingtonesFYI Core for items, downloads and SEO.
Version: 1.1.7
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: freeringtonesfyi
*/

/* ---------- Tokens ----------
 * "Composition" palette: a warm paper canvas with Kandinsky's primaries
 * doing the talking: cobalt, vermilion, cadmium yellow, a leaf green,
 * and hard black line. Shapes are circles, arcs and angled bars; shadows
 * are hard, offset and coloured; nothing is blurred, nothing is grey.
 * The call-screen meaning survives: green circle = answer (play),
 * it turns vermilion = hang up (stop).
 */
:root{
  --paper:#f7f1e4;
  --paper-2:#fbf7ee;
  --ink:#15151a;
  --ink-dim:#5b5a66;
  --line:#15151a;
  --blue:#1f4fd6;
  --red:#e9401f;
  --yellow:#f7c631;
  --green:#2dae5c;
  --pink:#ef7fb7;
  --orange:#f58a1f;
  --violet:#6b3fd6;
  --answer:var(--green);
  --decline:var(--red);
  --signal:var(--violet);   /* wallpapers, live wallpapers */
  --chime:var(--yellow);    /* notification sounds */
  --radius:16px;
  --phone-radius:30px;
  --bw:2px;                 /* the line weight */
  --shadow:6px 6px 0 var(--ink);
  --shadow-blue:8px 8px 0 var(--blue);
  --font-display:"Bricolage Grotesque","Manrope",system-ui,sans-serif;
  --font-body:"Manrope",system-ui,-apple-system,sans-serif;
  --maxw:1240px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}
body{margin:0;color:var(--ink);font-family:var(--font-body);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;
  background:
    radial-gradient(circle at 8% 12%, var(--yellow) 0 90px, transparent 91px),
    radial-gradient(circle at 92% 6%, transparent 0 56px, var(--blue) 57px 66px, transparent 67px),
    radial-gradient(circle at 96% 48%, var(--red) 0 40px, transparent 41px),
    radial-gradient(circle at 4% 70%, transparent 0 70px, var(--green) 71px 78px, transparent 79px),
    linear-gradient(-28deg, transparent 0 calc(62% - 2px), var(--ink) calc(62% - 2px) calc(62% + 2px), transparent calc(62% + 2px)) no-repeat 0 0 / 100% 900px,
    var(--paper)}
img,video{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
h1,h2,h3{font-family:var(--font-display);font-weight:800;letter-spacing:-.02em;line-height:1.05}
::selection{background:var(--yellow);color:var(--ink)}

/* ---------- Buttons ---------- */
.fr-btn{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:999px;border:var(--bw) solid var(--ink);background:var(--paper-2);color:var(--ink);font:800 .9rem var(--font-body);cursor:pointer;box-shadow:3px 3px 0 var(--ink);transition:transform .12s,box-shadow .12s}
.fr-btn:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--ink)}
.fr-btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.fr-btn-primary{background:var(--green);color:var(--ink)}
.fr-btn-ghost{background:transparent;box-shadow:none}
.fr-btn-sm{padding:6px 12px;font-size:.8rem;box-shadow:2px 2px 0 var(--ink)}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:50;background:var(--paper-2);border-bottom:var(--bw) solid var(--ink)}
.header-inner{display:flex;align-items:center;gap:18px;min-height:70px}
.brand{display:flex;align-items:center;flex:none}
.brand-logo,.brand .custom-logo{height:40px;width:auto;display:block}
.header-search{flex:1;max-width:460px;position:relative}
.header-search input{width:100%;padding:10px 14px 10px 42px;border-radius:999px;border:var(--bw) solid var(--ink);background:#fff;color:var(--ink);font:inherit;font-size:.95rem;box-shadow:3px 3px 0 var(--blue)}
.header-search input::placeholder{color:var(--ink-dim)}
.header-search svg{position:absolute;left:15px;top:50%;transform:translateY(-50%);width:17px;height:17px;fill:none;stroke:var(--ink);stroke-width:2.5}
.site-nav{margin-left:auto}
.site-nav ul{list-style:none;display:flex;gap:2px;margin:0;padding:0;flex-wrap:wrap}
.site-nav a{display:block;padding:8px 12px;border-radius:999px;font-size:.9rem;font-weight:800;border:var(--bw) solid transparent}
.site-nav a:hover{border-color:var(--ink)}
.site-nav .current-menu-item a,.site-nav .current a{background:var(--yellow);border-color:var(--ink)}
.nav-toggle{display:none;margin-left:auto;background:var(--yellow);border:var(--bw) solid var(--ink);border-radius:999px;padding:8px 12px;color:var(--ink);font-size:1rem;cursor:pointer;box-shadow:3px 3px 0 var(--ink)}
@media (max-width:900px){
  .nav-toggle{display:block}
  .header-search{max-width:none}
  .site-nav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--paper-2);border-bottom:var(--bw) solid var(--ink)}
  .site-nav.open{display:block}
  .site-nav ul{flex-direction:column;padding:10px 20px 16px}
}
@media (max-width:560px){.header-search{display:none}.header-inner{gap:12px}}

/* Type tabs (the Zedge content-type row), each with its own colour dot */
.type-tabs{background:#fff;border-bottom:var(--bw) solid var(--ink)}
.type-tabs ul{list-style:none;margin:0;padding:0;display:flex;gap:2px;overflow-x:auto;scrollbar-width:none}
.type-tabs ul::-webkit-scrollbar{display:none}
.type-tabs a{display:flex;align-items:center;gap:8px;padding:13px 14px;font-weight:800;font-size:.88rem;color:var(--ink);border-bottom:4px solid transparent;white-space:nowrap;margin-bottom:-2px}
.type-tabs .ico{width:12px;height:12px;border-radius:50%;background:var(--blue);font-size:0;border:var(--bw) solid var(--ink);flex:none}
.type-tabs li:nth-child(2) .ico{background:var(--green)}
.type-tabs li:nth-child(3) .ico{background:var(--yellow)}
.type-tabs li:nth-child(4) .ico{background:var(--red)}
.type-tabs li:nth-child(5) .ico{background:var(--pink)}
.type-tabs li:nth-child(6) .ico{background:var(--violet)}
.type-tabs li:nth-child(7) .ico{background:var(--orange)}
.type-tabs a:hover{border-bottom-color:var(--yellow)}
.type-tabs .current a,.type-tabs a[aria-current]{border-bottom-color:var(--ink)}

/* Device chips: your phone, remembered */
.device-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:14px 0}
.device-bar .lbl{font:800 .85rem var(--font-display)}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{padding:6px 13px;border-radius:999px;border:var(--bw) solid var(--ink);background:#fff;font:800 .82rem var(--font-body);color:var(--ink);cursor:pointer;box-shadow:2px 2px 0 var(--ink)}
.chip:hover{background:var(--yellow)}
.chip[aria-pressed="true"]{background:var(--blue);color:#fff}

/* ---------- Hero ---------- */
.hero{padding:44px 0 20px;display:grid;grid-template-columns:1.1fr .9fr;gap:36px;align-items:center;position:relative}
.hero .eyebrow{display:inline-block;background:var(--ink);color:var(--yellow);font:800 .72rem var(--font-body);letter-spacing:.14em;text-transform:uppercase;margin:0 0 16px;padding:5px 10px;transform:rotate(-2deg)}
.hero h1{font-size:clamp(2.4rem,6vw,4.6rem);margin:0 0 16px}
.hero h1 em{font-style:normal;color:var(--red);background:linear-gradient(transparent 62%,var(--yellow) 62%);padding:0 .08em}
.hero p.lead{font-size:1.15rem;margin:0 0 22px;max-width:50ch}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap}
.hero-stats{display:flex;gap:24px;margin-top:26px;font-size:.85rem;font-weight:700}
.hero-stats b{display:block;font-family:var(--font-display);font-size:1.5rem;line-height:1}
.hero-stats div{padding-left:12px;border-left:4px solid var(--blue)}
.hero-stats div:nth-child(2){border-color:var(--red)}
.hero-stats div:nth-child(3){border-color:var(--green)}
.hero-phone{display:flex;justify-content:center;position:relative;min-height:300px}
.hero-phone::before{content:"";position:absolute;width:300px;height:300px;border-radius:50%;background:var(--blue);left:50%;top:50%;transform:translate(-38%,-56%);z-index:0}
.hero-phone::after{content:"";position:absolute;width:130px;height:130px;border-radius:50%;border:var(--bw) solid var(--ink);background:var(--yellow);left:50%;top:50%;transform:translate(-150%,40%);z-index:0}
.hero-phone .fr-phone{width:270px;transform:rotate(-5deg);z-index:1;box-shadow:var(--shadow-blue);--hero:1}
.hero-phone .fr-phone:hover{transform:rotate(0)}
@media (max-width:860px){.hero{grid-template-columns:1fr;text-align:center}.hero p.lead{margin-inline:auto}.hero-cta,.hero-stats{justify-content:center}.hero-phone .fr-phone{width:230px}.hero-phone::before{width:240px;height:240px}}

/* ---------- Rails ---------- */
.section-rail{padding:28px 0 4px}
.rail-head{display:flex;align-items:baseline;gap:14px;margin-bottom:16px}
.rail-head h2,.fr-rail-title{font-size:1.5rem;margin:0;display:flex;align-items:center;gap:10px}
.rail-head h2::before,.fr-rail-title::before{content:"";width:18px;height:18px;border-radius:50%;background:var(--red);border:var(--bw) solid var(--ink);flex:none}
.section-rail:nth-of-type(3n+2) .rail-head h2::before{background:var(--blue)}
.section-rail:nth-of-type(3n) .rail-head h2::before{background:var(--yellow);border-radius:0;transform:rotate(45deg)}
.rail-head .sub{color:var(--ink-dim);font-size:.9rem;font-weight:600}
.rail-head .more{margin-left:auto;font-weight:800;font-size:.85rem;white-space:nowrap;border-bottom:3px solid var(--yellow)}
.rail-head .more:hover{border-bottom-color:var(--ink)}
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:200px;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;padding:8px 10px 18px 4px;scrollbar-width:thin;scrollbar-color:var(--ink) transparent}
.rail>*{scroll-snap-align:start}
.rail.rail-posts{grid-auto-columns:300px}
.fr-grid{display:grid;grid-template-columns:repeat(auto-fill,200px);justify-content:start;gap:20px;margin:14px 0 28px;padding:4px 8px 8px 0}
.fr-grid-one{grid-template-columns:minmax(180px,260px)}
.fr-grid-posts{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
@media (max-width:520px){.rail{grid-auto-columns:160px}.rail.rail-posts{grid-auto-columns:260px}.fr-grid{grid-template-columns:repeat(2,1fr);gap:14px}}

/* ---------- THE PHONE CARD (signature) ----------
 * Each item is shown where it ends up: on a lock screen. Artwork is the
 * wallpaper, the paper sheet at the bottom is the incoming call. Green
 * circle = answer (play). While playing it turns vermilion = hang up.
 * Cards sit slightly askew, like shapes on a canvas, and straighten on hover.
 */
.fr-phone{position:relative;aspect-ratio:9/19;border-radius:var(--phone-radius);overflow:hidden;background:var(--blue);border:3px solid var(--ink);box-shadow:var(--shadow);transition:transform .18s,box-shadow .18s;isolation:isolate}
.rail>.fr-phone:nth-child(odd),.fr-grid>.fr-phone:nth-child(odd){transform:rotate(-1.2deg)}
.rail>.fr-phone:nth-child(even),.fr-grid>.fr-phone:nth-child(even){transform:rotate(1.2deg)}
.rail>.fr-phone:nth-child(3n){box-shadow:6px 6px 0 var(--red)}
.rail>.fr-phone:nth-child(3n+1){box-shadow:6px 6px 0 var(--blue)}
.rail>.fr-phone:nth-child(3n+2){box-shadow:6px 6px 0 var(--yellow)}
.fr-phone:hover{transform:rotate(0) translateY(-4px)!important;box-shadow:var(--shadow)!important}
.fr-phone .art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.fr-phone .art-fallback{position:absolute;inset:0;background:
  radial-gradient(circle at 70% 28%, var(--c2,#f7c631) 0 22%, transparent 23%),
  radial-gradient(circle at 25% 62%, transparent 0 16%, var(--ink) 17% 19%, transparent 20%),
  linear-gradient(35deg, transparent 0 58%, var(--ink) 58% 59.5%, transparent 59.5%),
  radial-gradient(circle at 78% 76%, var(--ink) 0 5%, transparent 6%),
  var(--c1,#1f4fd6)}
.fr-phone .art-fallback::after{content:attr(data-glyph);position:absolute;inset:0;display:grid;place-items:center;font-size:3.4rem;color:#fff;text-shadow:3px 3px 0 var(--ink)}
.fr-phone .status{position:absolute;top:10px;left:0;right:0;display:flex;justify-content:space-between;padding:0 16px;font:800 .7rem var(--font-body);color:#fff;text-shadow:1px 1px 0 var(--ink);z-index:2}
.fr-phone .notch{position:absolute;top:8px;left:50%;transform:translateX(-50%);width:38%;height:13px;border-radius:999px;background:var(--ink);z-index:2}
.fr-phone .clock{position:absolute;top:40px;left:0;right:0;text-align:center;color:#fff;font:800 2rem var(--font-display);letter-spacing:-.03em;text-shadow:2px 2px 0 var(--ink);z-index:2}
.fr-phone .clock small{display:block;font:700 .7rem var(--font-body);text-shadow:1px 1px 0 var(--ink)}
.fr-phone .type-tag{position:absolute;top:100px;left:50%;transform:translateX(-50%) rotate(-2deg);padding:4px 10px;border:var(--bw) solid var(--ink);font:800 .62rem var(--font-body);letter-spacing:.08em;text-transform:uppercase;background:var(--blue);color:#fff;z-index:2;box-shadow:2px 2px 0 var(--ink)}
.fr-phone.t-notification .type-tag{background:var(--yellow);color:var(--ink)}
.fr-phone.t-wallpaper .type-tag{background:var(--red)}
.fr-phone.t-live-wallpaper .type-tag{background:var(--pink);color:var(--ink)}
.fr-phone.t-music .type-tag{background:var(--green)}
.fr-phone .archive-tag{position:absolute;top:128px;left:50%;transform:translateX(-50%) rotate(2deg);padding:3px 8px;border:var(--bw) solid var(--ink);font:800 .58rem var(--font-body);letter-spacing:.06em;text-transform:uppercase;background:var(--yellow);color:var(--ink);z-index:2;white-space:nowrap}
.fr-phone .sheet{position:absolute;left:8px;right:8px;bottom:8px;padding:10px;border-radius:16px;background:var(--paper-2);border:var(--bw) solid var(--ink);z-index:3}
.fr-phone .sheet .from{display:block;font-size:.7rem;font-weight:700;color:var(--ink-dim);margin:-4px 0 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fr-phone .sheet .from::before{content:"↳ "}
.fr-phone .sheet .from:hover{color:var(--blue)}
.fr-phone .sheet h3{font:800 .88rem var(--font-body);margin:0 0 2px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.fr-phone .sheet h3 a::after{content:"";position:absolute;inset:0;z-index:1}
.fr-phone .meta{display:flex;gap:8px;color:var(--ink-dim);font-size:.7rem;font-weight:700;margin-bottom:8px}
.fr-phone .actions{display:flex;align-items:center;gap:6px;position:relative;z-index:4}
.fr-phone .play{width:40px;height:40px;border-radius:50%;border:var(--bw) solid var(--ink);background:var(--green);color:var(--ink);display:grid;place-items:center;cursor:pointer;flex:none;transition:background .15s,transform .15s;position:relative;box-shadow:2px 2px 0 var(--ink)}
.fr-phone .play:hover{transform:scale(1.06)}
.fr-phone .play svg{width:16px;height:16px;fill:currentColor}
.fr-phone .play .i-stop{display:none}
.fr-phone .play[aria-pressed="true"]{background:var(--red);color:#fff}
.fr-phone .play[aria-pressed="true"] .i-play{display:none}
.fr-phone .play[aria-pressed="true"] .i-stop{display:block}
.fr-phone .play .ring{position:absolute;inset:-6px;border-radius:50%;border:var(--bw) solid var(--red);opacity:0}
.fr-phone .play[aria-pressed="true"] .ring{animation:fr-ring 1.1s ease-out infinite}
@keyframes fr-ring{0%{transform:scale(.8);opacity:.9}100%{transform:scale(1.6);opacity:0}}
.fr-phone .dl{flex:1;display:flex;gap:4px;min-width:0}
.fr-phone .dl a{flex:1;text-align:center;padding:8px 4px;border-radius:999px;border:var(--bw) solid var(--ink);background:#fff;color:var(--ink);font:800 .68rem var(--font-body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:background .15s}
.fr-phone .dl a:hover{background:var(--yellow)}
.fr-phone .dl a.is-mine{background:var(--blue);color:#fff}
.fr-phone .like{position:absolute;top:10px;right:10px;z-index:4;background:#fff;border:var(--bw) solid var(--ink);color:var(--ink);border-radius:999px;padding:3px 9px;font:800 .68rem var(--font-body);cursor:pointer;display:flex;gap:4px;align-items:center;opacity:0;transition:opacity .15s}
.fr-phone:hover .like,.fr-phone .like[aria-pressed="true"]{opacity:1}
.fr-phone .like[aria-pressed="true"]{background:var(--red);color:#fff}
.fr-phone .progress{position:absolute;left:0;right:0;bottom:0;height:5px;background:var(--red);transform-origin:left;transform:scaleX(0);z-index:5}
@media (hover:none){.fr-phone .like{opacity:1}}

/* ---------- Article card ---------- */
.post-card{background:#fff;border:var(--bw) solid var(--ink);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;transition:transform .18s,box-shadow .18s;box-shadow:5px 5px 0 var(--ink)}
.post-card:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--yellow)}
.post-card .thumb{aspect-ratio:16/9;width:100%;object-fit:cover;border-bottom:var(--bw) solid var(--ink)}
.post-card .thumb-fallback{aspect-ratio:16/9;border-bottom:var(--bw) solid var(--ink);background:radial-gradient(circle at 30% 50%, var(--yellow) 0 18%, transparent 19%),radial-gradient(circle at 72% 40%, var(--red) 0 12%, transparent 13%),linear-gradient(-20deg,transparent 48%,var(--ink) 48% 50%,transparent 50%),var(--blue)}
.post-card .card-body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:6px;flex:1}
.post-card .cat{display:inline-block;align-self:flex-start;background:var(--yellow);border:var(--bw) solid var(--ink);padding:2px 8px;font:800 .68rem var(--font-body);letter-spacing:.08em;text-transform:uppercase}
.post-card h3{font:800 1.05rem var(--font-display);margin:0;line-height:1.25}
.post-card p{margin:0;color:var(--ink-dim);font-size:.88rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.post-card .foot{margin-top:auto;display:flex;gap:10px;align-items:center;font-size:.78rem;color:var(--ink-dim);padding-top:8px;font-weight:700}
.post-card .foot .dlcount{color:var(--blue)}

/* ---------- Collections band: colour tiles ---------- */
.collections{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px;margin:14px 0 28px;padding:0 8px 8px 0}
.collection{padding:22px 16px;border-radius:var(--radius);border:var(--bw) solid var(--ink);font:800 1rem var(--font-display);display:flex;flex-direction:column;gap:4px;box-shadow:4px 4px 0 var(--ink);transition:transform .15s;background:var(--yellow);position:relative;overflow:hidden;min-height:110px}
.collection::after{content:"";position:absolute;right:-20px;bottom:-26px;width:80px;height:80px;border-radius:50%;border:var(--bw) solid var(--ink);background:rgba(255,255,255,.55)}
.collection:nth-child(6n+2){background:var(--blue);color:#fff}
.collection:nth-child(6n+3){background:var(--red);color:#fff}
.collection:nth-child(6n+4){background:var(--green);color:#fff}
.collection:nth-child(6n+5){background:var(--pink)}
.collection:nth-child(6n){background:var(--violet);color:#fff}
.collection:hover{transform:translate(-2px,-2px) rotate(-1deg)}
.collection small{font:700 .75rem var(--font-body);opacity:.85}

/* ---------- The Billboard: five boards, big numbers ---------- */
.billboards{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:22px;margin:14px 0 10px;padding:0 10px 10px 0}
.billboard{background:#fff;border:var(--bw) solid var(--ink);border-radius:20px;overflow:hidden;box-shadow:var(--shadow)}
.billboard.t-ringtone{box-shadow:7px 7px 0 var(--blue)}.billboard.t-notification{box-shadow:7px 7px 0 var(--yellow)}.billboard.t-wallpaper{box-shadow:7px 7px 0 var(--red)}.billboard.t-live-wallpaper{box-shadow:7px 7px 0 var(--pink)}.billboard.t-music{box-shadow:7px 7px 0 var(--green)}
.bb-head{display:flex;align-items:baseline;gap:10px;padding:14px 18px;border-bottom:var(--bw) solid var(--ink);background:var(--blue);color:#fff}
.billboard.t-notification .bb-head{background:var(--yellow);color:var(--ink)}.billboard.t-wallpaper .bb-head{background:var(--red)}.billboard.t-live-wallpaper .bb-head{background:var(--pink);color:var(--ink)}.billboard.t-music .bb-head{background:var(--green)}
.bb-head h3{margin:0;font-size:1.25rem}
.bb-sub{font-size:.78rem;font-weight:800;opacity:.9;text-transform:uppercase;letter-spacing:.06em}
.bb-all{margin-left:auto;font-weight:800;font-size:.82rem;border-bottom:2px solid currentColor}
.bb-list{list-style:none;margin:0;padding:6px 0}
.bb-row{display:flex;align-items:center;gap:10px;padding:10px 16px;border-bottom:1px dashed var(--ink)}
.bb-row:last-child{border-bottom:0}
.bb-row:first-child{background:var(--paper)}
.bb-rank{font:800 2rem/1 var(--font-display);width:34px;text-align:center;flex:none}
.bb-row:first-child .bb-rank{font-size:2.6rem;color:var(--red)}
.bb-move{flex:none;font:800 .66rem var(--font-body);padding:2px 6px;border:var(--bw) solid var(--ink);border-radius:6px;min-width:34px;text-align:center;background:#fff}
.bb-move.up{background:var(--green);color:#fff}.bb-move.down{background:var(--red);color:#fff}.bb-move.new{background:var(--yellow)}.bb-move.re{background:var(--pink)}.bb-move.steady{background:#fff;color:var(--ink-dim)}
.bb-art{flex:none;width:40px;height:64px;border:var(--bw) solid var(--ink);border-radius:9px;overflow:hidden;background:var(--blue);display:grid;place-items:center}
.bb-art img{width:100%;height:100%;object-fit:cover}
.bb-art-blank{color:#fff;font-size:1.1rem}
.bb-body{flex:1;min-width:0;display:grid;gap:2px}
.bb-title{font:800 .95rem var(--font-body);line-height:1.25;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.bb-title:hover{text-decoration:underline;text-decoration-thickness:2px}
.bb-meta{font-size:.72rem;font-weight:700;color:var(--ink-dim)}
.bb-play{flex:none;width:36px;height:36px;border-radius:50%;border:var(--bw) solid var(--ink);background:var(--green);color:var(--ink);font-size:.8rem;cursor:pointer;box-shadow:2px 2px 0 var(--ink)}
.bb-play .i-stop{display:none}
.bb-play[aria-pressed="true"]{background:var(--red);color:#fff}
.bb-play[aria-pressed="true"] .i-play{display:none}.bb-play[aria-pressed="true"] .i-stop{display:inline}
.bb-foot{font-size:.78rem;color:var(--ink-dim);font-weight:600;margin:0 0 10px}

/* ---------- Request band ---------- */
.request-band{margin:34px 0;padding:30px;border-radius:22px;background:#fff;border:var(--bw) solid var(--ink);box-shadow:var(--shadow-blue);display:grid;grid-template-columns:1.2fr 1fr;gap:26px;align-items:center;position:relative;overflow:hidden}
.request-band::before{content:"";position:absolute;left:-60px;top:-60px;width:220px;height:220px;border-radius:50%;background:var(--yellow);border:var(--bw) solid var(--ink);z-index:0}
.request-band>*{position:relative;z-index:1}
.request-band h2{margin:0 0 8px;font-size:1.8rem}
.request-band p{margin:0;font-weight:600}
@media (max-width:760px){.request-band{grid-template-columns:1fr}}
.fr-request{display:grid;gap:12px;background:var(--paper-2);border:var(--bw) solid var(--ink);border-radius:var(--radius);padding:18px}
.fr-request label{display:grid;gap:4px;font-size:.82rem;font-weight:800}
.fr-request input,.fr-request textarea,.fr-request select{width:100%;padding:10px 12px;border-radius:10px;border:var(--bw) solid var(--ink);background:#fff;color:var(--ink);font:inherit;font-size:.95rem}
.fr-request-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.fr-request .fr-hp{position:absolute;left:-9999px}
.fr-request-note{margin:0;font-size:.85rem;color:var(--green);font-weight:700;min-height:1.2em}
.fr-request-note.err{color:var(--red)}

/* ---------- Guides ---------- */
.fr-guides{display:grid;gap:12px;margin:14px 0}
.fr-guide{background:#fff;border:var(--bw) solid var(--ink);border-radius:var(--radius);padding:0 18px;box-shadow:4px 4px 0 var(--ink)}
.fr-guide summary{cursor:pointer;list-style:none;display:flex;gap:14px;align-items:center;padding:14px 0;font-weight:800}
.fr-guide summary::-webkit-details-marker{display:none}
.fr-guide summary::after{content:"+";margin-left:auto;width:28px;height:28px;border-radius:50%;border:var(--bw) solid var(--ink);display:grid;place-items:center;background:var(--yellow);font-size:1.1rem;line-height:1}
.fr-guide[open] summary::after{content:"–";background:var(--red);color:#fff}
.fr-guide-dev{padding:3px 10px;border-radius:999px;background:var(--blue);color:#fff;font-size:.78rem;border:var(--bw) solid var(--ink)}
.fr-guide-sum{color:var(--ink-dim);font-weight:700}
.fr-guide-note{color:var(--ink-dim);font-size:.9rem;margin:0 0 8px}
.fr-guide ol{margin:0 0 16px 18px;padding:0;display:grid;gap:6px;font-size:.95rem}
.fr-guide ol li::marker{font-weight:800;color:var(--blue)}

/* ---------- Single post ---------- */
.single-wrap{max-width:820px;margin:0 auto;padding:28px 20px 40px}
.single-wrap .cat{display:inline-block;background:var(--yellow);border:var(--bw) solid var(--ink);padding:3px 10px;font:800 .72rem var(--font-body);letter-spacing:.1em;text-transform:uppercase;transform:rotate(-1.5deg)}
.single-wrap h1{font-size:clamp(1.9rem,4.5vw,3rem);margin:12px 0 10px}
.single-wrap .byline{color:var(--ink-dim);font-size:.88rem;font-weight:700;margin-bottom:20px;display:flex;gap:14px;flex-wrap:wrap}
.single-wrap .lead-art{border-radius:var(--radius);border:var(--bw) solid var(--ink);box-shadow:var(--shadow);margin-bottom:26px;width:100%;aspect-ratio:16/9;object-fit:cover}
.entry{font-size:1.05rem}
.entry h2,.entry h3{font-family:var(--font-display);font-weight:800;margin:1.6em 0 .5em}
.entry h2{font-size:1.6rem}.entry h3{font-size:1.2rem}
.entry a{color:var(--blue);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
.entry a:hover{background:var(--yellow);color:var(--ink)}
.entry img{border-radius:var(--radius);border:var(--bw) solid var(--ink);margin:14px 0}
.entry blockquote{margin:1.2em 0;padding:8px 18px;border-left:6px solid var(--red);font-weight:600}
.entry audio{width:100%;margin:10px 0}
.entry hr{border:0;border-top:var(--bw) solid var(--ink);margin:2em 0}
.fr-post-downloads{margin-top:36px;padding-top:20px;border-top:var(--bw) solid var(--ink)}
.jump-dl{display:inline-flex;margin-bottom:18px}
.share{display:flex;gap:8px;flex-wrap:wrap;margin:28px 0}
.post-nav{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:20px 0 0}
.post-nav a{padding:14px;border:var(--bw) solid var(--ink);border-radius:var(--radius);background:#fff;font-size:.9rem;font-weight:700;box-shadow:3px 3px 0 var(--ink)}
.post-nav a:hover{background:var(--yellow)}
.post-nav a span{display:block;color:var(--ink-dim);font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;margin-bottom:4px}
.post-nav a.next{text-align:right}
.related{padding:30px 0}

.fr-archive{margin:30px 0;border:var(--bw) solid var(--ink);border-radius:var(--radius);background:#fff;padding:0 18px;box-shadow:4px 4px 0 var(--yellow)}
.fr-archive summary{cursor:pointer;padding:14px 0;font:800 1rem var(--font-display)}
.fr-archive[open] summary{border-bottom:var(--bw) dashed var(--ink)}
.fr-archive>*:not(summary){font-size:.98rem}

/* ---------- Single item ---------- */
.item-hero{display:grid;grid-template-columns:320px 1fr;gap:44px;align-items:start;padding:32px 0}
.item-hero .fr-phone{width:100%;max-width:320px;box-shadow:var(--shadow-blue)}
.item-hero .fr-phone .sheet{display:none}
.item-hero h1{font-size:clamp(1.8rem,3.8vw,2.8rem);margin:6px 0 14px}
.item-hero .type-line{font-weight:800;font-size:.85rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-dim)}
.item-hero .type-line b{background:var(--ink);color:var(--yellow);padding:2px 8px}
.item-hero .counters{display:flex;gap:20px;margin:16px 0;color:var(--ink-dim);font-size:.9rem;font-weight:700;flex-wrap:wrap;align-items:center}
.item-hero .counters b{color:var(--ink);font-family:var(--font-display);font-size:1.1rem}
.dl-list{display:grid;gap:12px;margin:18px 0}
.dl-row{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:var(--radius);background:#fff;border:var(--bw) solid var(--ink);box-shadow:3px 3px 0 var(--ink)}
.dl-row .fmt{font:800 .95rem var(--font-display);min-width:130px}
.dl-row .devs{color:var(--ink-dim);font-size:.82rem;font-weight:700;flex:1}
.dl-row.is-mine{background:var(--yellow);box-shadow:5px 5px 0 var(--blue)}
.big-play{display:inline-flex;align-items:center;gap:10px;font-size:1rem;padding:12px 22px}
.big-play .i-stop{display:none}
.big-play[aria-pressed="true"]{background:var(--red);color:#fff}
.big-play[aria-pressed="true"] .i-play{display:none}
.big-play[aria-pressed="true"] .i-stop{display:inline}
.item-hero .credit{color:var(--ink-dim);font-size:.85rem;font-weight:600;margin-top:10px}
.item-hero .credit a{color:var(--blue);text-decoration:underline}
.item-desc{max-width:820px;padding-bottom:20px}
@media (max-width:800px){.item-hero{grid-template-columns:1fr;justify-items:center;text-align:center}.dl-row{text-align:left}.item-hero .counters{justify-content:center}}

/* ---------- Archives / search ---------- */
.archive-head{padding:34px 0 8px}
.archive-head h1{font-size:clamp(1.9rem,4.5vw,3rem);margin:0 0 8px;display:inline-block;background:#fff;border:var(--bw) solid var(--ink);padding:6px 16px;box-shadow:5px 5px 0 var(--red);transform:rotate(-1deg)}
.archive-head p{color:var(--ink-dim);font-weight:600;margin:10px 0 0;max-width:60ch}
.sort-row{display:flex;gap:8px;align-items:center;margin:14px 0;flex-wrap:wrap;font-size:.85rem;font-weight:800}
.sort-row a{padding:6px 13px;border-radius:999px;border:var(--bw) solid var(--ink);background:#fff}
.sort-row a.on{background:var(--blue);color:#fff}
.pagination{display:flex;gap:8px;justify-content:center;padding:20px 0 40px;flex-wrap:wrap}
.pagination .page-numbers{padding:8px 14px;border-radius:999px;border:var(--bw) solid var(--ink);background:#fff;font-weight:800;font-size:.9rem;box-shadow:2px 2px 0 var(--ink)}
.pagination .page-numbers.current{background:var(--red);color:#fff}
.search-tabs{display:flex;gap:8px;margin:14px 0;flex-wrap:wrap}
.search-tabs a{padding:6px 13px;border-radius:999px;border:var(--bw) solid var(--ink);background:#fff;font-size:.85rem;font-weight:800}
.search-tabs a.on{background:var(--yellow)}
.empty{padding:40px 20px;text-align:center;font-weight:600;border:var(--bw) dashed var(--ink);border-radius:var(--radius);margin:20px 0;background:#fff}
.empty a{color:var(--blue);font-weight:800;text-decoration:underline}

/* ---------- Page ---------- */
.page-wrap{max-width:820px;margin:0 auto;padding:30px 20px 50px}
.page-wrap h1{font-size:clamp(1.9rem,4.5vw,3rem);margin:0 0 18px}

/* ---------- Footer: the black bar with colour on it ---------- */
.site-footer{margin-top:56px;border-top:var(--bw) solid var(--ink);background:var(--ink);color:var(--paper);padding:40px 0 22px;font-size:.9rem;position:relative;overflow:hidden}
.site-footer::before{content:"";position:absolute;right:-80px;top:-80px;width:260px;height:260px;border-radius:50%;background:var(--red);opacity:.9}
.site-footer::after{content:"";position:absolute;left:12%;bottom:-120px;width:200px;height:200px;border-radius:50%;border:var(--bw) solid var(--yellow)}
.site-footer .wrap{position:relative;z-index:1}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:28px}
.footer-grid h4{font:800 1rem var(--font-display);color:var(--yellow);margin:0 0 12px}
.footer-grid ul{list-style:none;margin:0;padding:0;display:grid;gap:7px;font-weight:600}
.footer-grid a:hover{color:var(--yellow);text-decoration:underline}
.footer-brand img{filter:invert(1) hue-rotate(180deg)}
.footer-brand p{margin:10px 0 14px;max-width:36ch;opacity:.85}
.footer-devices{display:flex;gap:6px;flex-wrap:wrap}
.footer-devices a{padding:5px 11px;border-radius:999px;border:var(--bw) solid var(--paper);font-size:.78rem;font-weight:800}
.footer-devices a:hover{background:var(--blue);border-color:var(--blue)}
.footer-base{display:flex;gap:16px;flex-wrap:wrap;justify-content:space-between;margin-top:30px;padding-top:16px;border-top:1px solid rgba(247,241,228,.3);opacity:.8;font-size:.8rem}
.footer-base ul{list-style:none;margin:0;padding:0;display:flex;gap:14px;flex-wrap:wrap}
@media (max-width:820px){.footer-grid{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.footer-grid{grid-template-columns:1fr}}

/* Comments (kept plain) */
.comments-area{max-width:820px;margin:20px auto;padding:0 20px}
.comments-area input,.comments-area textarea{width:100%;padding:10px;border-radius:10px;border:var(--bw) solid var(--ink);background:#fff;color:var(--ink);font:inherit}
.comments-area .submit{padding:10px 18px;border-radius:999px;border:var(--bw) solid var(--ink);background:var(--green);color:var(--ink);font:800 .9rem var(--font-body);cursor:pointer;box-shadow:3px 3px 0 var(--ink)}