*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#150407; --surface:#26090f; --surface2:#340f17;
  --accent:#d8453c; --accent2:#ff8a7c; --accent-rgb:216,69,60;
  --text:#f7e9ea; --muted:#c19a9c;
  --border:rgba(216,69,60,.42); --border2:rgba(216,69,60,.24);
}
body{color:var(--text);font:14px/1.55 'Inter Tight','Inter','Segoe UI',Helvetica,Arial,sans-serif;min-height:100vh;/* the header splash: the SAME ramp as .site-footer, mirrored, and tall   enough to be seen. 26 Aug 2026. */background:linear-gradient(to bottom,#6d1420 0%,#3a0a11 34%,var(--bg) 78%) no-repeat top center/100% 300px,var(--bg)}
a{color:var(--accent);text-decoration:none}
a:hover{color:#ffffff;text-decoration:underline}
img{max-width:100%}
h1,h2,h3,h4{line-height:1.2}

/* ══ HEADER — the menu shape of the picture-rating sites ══ */
/* ══ THE HEADER BLOWS OUT (Boss, 22 Sep 2026) ══════════════════════════════
   "it should be inside the header... it will blow out the top header like the
   footer does, and then it shows its shower of blue, more like the bottom."
   The footer's ramp, mirrored: the same three stops read downwards. The banner
   then sits IN the blue instead of on a slab of its own with a seam under it. */
.wv-head{padding-top:.2rem;
  background:linear-gradient(to bottom,#6d1420 0%,#3a0a11 34%,var(--bg) 78%);
  border-bottom:1px solid var(--border)}
.wv-head .banner-strip{margin:0 auto .35rem;padding-top:.35rem;
  background:transparent;border-bottom:0}
.wv-nav{position:sticky;top:0;z-index:9999;background:radial-gradient(140% 220% at 18% -120%, rgba(216,69,60,.40) 0%, rgba(216,69,60,0) 46%),linear-gradient(180deg,#6d1420 0%,#3a0a11 34%,#150407 100%);background-color:transparent;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);box-shadow:0 8px 26px rgba(0,0,0,.45);
  padding:0 1.2rem;display:flex;align-items:center;justify-content:space-between;min-height:52px}
/* MENU TEXT SIZE (Boss, 22 Sep 2026). The site's own navigation was the SMALLEST
   text on the page - 12px caps for the menu, with a 19px brand beside it - while
   the gallery text around it ran at 16px. Magnified it was still hard to read.
   These are the links the whole site is navigated by. */
.wv-brand{font-size:1.45rem;font-weight:900;letter-spacing:.06em;color:var(--accent);white-space:nowrap}
.wv-brand:hover{text-decoration:none;opacity:.85}
.wv-menus{display:flex;gap:.1rem;list-style:none;align-items:center;flex-wrap:wrap}
.wv-menus>li{position:relative}
.wv-menus>li>a{color:var(--accent);font-size:.98rem;font-weight:700;padding:.5rem .8rem;
  border-radius:6px;display:block;text-transform:uppercase;letter-spacing:.05em;transition:all .15s}
.wv-menus>li>a:hover,.wv-menus>li:hover>a{color:#ffffff;
  background:linear-gradient(135deg,rgba(var(--accent-rgb),.26),rgba(var(--accent-rgb),.14));
  box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.3);text-decoration:none}
.wv-caret{font-size:.72rem;margin-left:3px;opacity:.6}
.wv-drop{display:none;position:absolute;top:100%;left:0;background:#340f17;
  border:1px solid var(--border);border-radius:8px;min-width:210px;padding:.3rem 0;
  box-shadow:0 18px 40px rgba(0,0,0,.35);z-index:100;list-style:none}
.wv-menus>li:hover .wv-drop{display:block}
.wv-drop a{display:block;color:#cbd8ea;padding:.46rem 1rem;font-size:.95rem;transition:all .12s}
.wv-drop a:hover{background:rgba(var(--accent-rgb),.14);color:#ffffff;text-decoration:none}
.wv-drop a span{opacity:.65;font-size:.82rem}
.wv-div{height:1px;background:rgba(var(--accent-rgb),.18);margin:.25rem 0}
.wv-join{background:linear-gradient(135deg,var(--accent2),var(--accent));color:#fff !important;
  padding:.38rem 1rem !important;border-radius:8px !important;font-weight:800 !important}
.wv-toggle{display:none;background:none;border:0;cursor:pointer;padding:.4rem}
.wv-toggle span{display:block;width:20px;height:2px;background:var(--accent);margin:4px 0;border-radius:2px}
@media(max-width:900px){
  .wv-menus{display:none;flex-direction:column;align-items:stretch;position:absolute;top:52px;left:0;right:0;
    background:var(--surface);border-bottom:1px solid var(--border);padding:.5rem;gap:0;max-height:75vh;overflow:auto}
  .wv-menus.wv-open{display:flex}
  .wv-toggle{display:block}
  .wv-drop{position:static;box-shadow:none;border:0;background:rgba(var(--accent-rgb),.07);
    margin:0 0 .3rem .8rem;border-radius:6px;display:none}
  .wv-menus>li:hover .wv-drop{display:none}
  .wv-menus>li.wv-open .wv-drop{display:block}
}
.banner-strip{text-align:center;padding:.7rem 1rem;background:var(--surface);border-bottom:1px solid var(--border2)}
.banner-strip img{max-height:120px;border-radius:6px;vertical-align:middle}

/* ══ HERO ══ */
.page-wrap{max-width:1280px;margin:0 auto;padding:1rem}
.hero{text-align:center;padding:1.5rem 1rem 1rem}
.hero h1{font-size:clamp(1.55rem,4.4vw,2.8rem);font-weight:900;letter-spacing:.03em;margin-bottom:.4rem}
.hero h1 span{color:var(--accent)}
.hero-sub{color:var(--muted);font-size:.95rem;max-width:660px;margin:0 auto 1rem}
.hero-actions{display:flex;gap:.7rem;justify-content:center;flex-wrap:wrap;margin-bottom:.9rem}
.btn-enter{background:linear-gradient(135deg,var(--accent2) 0%,var(--accent) 100%);color:#fff;
  font-size:1.02rem;font-weight:900;letter-spacing:.07em;padding:.78rem 2.2rem;border-radius:50px;
  box-shadow:0 0 22px rgba(var(--accent-rgb),.4);display:inline-block;transition:transform .15s,opacity .2s}
.btn-enter:hover{opacity:.9;transform:scale(1.03);text-decoration:none;color:#fff}
.btn-reg{background:transparent;color:var(--accent);border:1px solid var(--border);padding:.78rem 1.5rem;
  border-radius:50px;font-weight:700;font-size:.86rem;display:inline-block;transition:all .2s}
.btn-reg:hover{background:rgba(var(--accent-rgb),.09);color:#ffffff;text-decoration:none}
.stat-chips{display:flex;gap:.55rem;justify-content:center;flex-wrap:wrap}
.chip{background:var(--surface);border:1px solid var(--border2);border-radius:20px;
  padding:.25rem .8rem;font-size:.74rem;color:var(--muted)}
.chip b{color:var(--text)}

/* ══ THREE COLUMNS — content and the advertising spots in the middle ══ */
.three-col{display:grid;grid-template-columns:190px minmax(0,1fr) 190px;gap:.9rem;margin-top:1rem}
@media(max-width:1080px){.three-col{grid-template-columns:1fr}}
.center-col,.side-col{display:flex;flex-direction:column;gap:.75rem;min-width:0}
/* both borders finish level with the centre column - no dead space at the
   bottom of either rail. Boss, 26 Aug 2026. */
/* rails run to their natural length - no stretched empty box. 26 Aug 2026 */
/* except the tall banner: it GROWS to close the gap at the foot of the right
   border, so the space is filled with picture, not an empty box. */
.side-col>.fill-links{flex:1 1 auto;display:flex;flex-direction:column}
.side-col>.fill-links>ul{flex:1;display:flex;flex-direction:column;justify-content:space-around}
@media(max-width:1080px){.side-col>.fill-links{flex:0 0 auto}
  .side-col>.fill-links>ul{display:block}}
.side-col>.tall-ban{flex:0 0 auto;display:block}
.side-col>.tall-ban>a{display:block}
.side-col>.tall-ban img{width:100%;height:auto;display:block}
@media(max-width:1080px){.side-col>.tall-ban{flex:0 0 auto}}
@media(max-width:1080px){.side-col>*:last-child{flex:0 0 auto}}
.sb-box{background:var(--surface);border:1px solid var(--border2);border-radius:10px;padding:.6rem}
/* the sidebar headings run down BOTH columns, so pink here balances the middle */
.sb-box h3{font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.07em;color:var(--accent2);
  margin-bottom:.5rem;text-align:center;border-bottom:1px solid var(--border2);padding-bottom:.35rem}
.sb-links{list-style:none;display:grid;gap:.28rem}
.sb-links a{display:block;border:1px solid var(--border2);border-radius:5px;color:var(--muted);
  padding:.27rem .45rem;font-size:.72rem;background:var(--surface2);transition:all .12s}
.sb-links a:hover{border-color:var(--accent);color:#ffffff;background:rgba(var(--accent-rgb),.1);text-decoration:none}
.sb-links a b{color:var(--accent);font-weight:800}
.sb-thumb-grid{display:grid;grid-template-columns:1fr 1fr;gap:.35rem}
.sb-thumb{display:block;border-radius:6px;overflow:hidden;border:1px solid var(--border2);aspect-ratio:3/4}
.sb-thumb:hover{border-color:var(--accent)}
.sb-thumb img{width:100%;height:100%;object-fit:cover;display:block}

/* ══ MIDDLE-COLUMN FURNITURE ══ */
.cat-strip{display:flex;gap:.4rem;flex-wrap:wrap;background:var(--surface);border:1px solid var(--border2);
  border-radius:10px;padding:.6rem .8rem}
.cat-chip{border:1px solid var(--border2);border-radius:20px;padding:.3rem .8rem;color:var(--muted);
  font-size:.75rem;font-weight:600;background:var(--surface2);transition:all .15s}
.cat-chip:hover{border-color:var(--accent);color:#ffffff;background:rgba(var(--accent-rgb),.12);text-decoration:none}
.cat-chip b{color:var(--accent)}
.content-box{background:var(--surface);border:1px solid var(--border2);border-radius:12px;padding:.9rem 1rem}
.section-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:.6rem;flex-wrap:wrap}
.section-head h2{font-size:.8rem;font-weight:800;text-transform:uppercase;letter-spacing:.07em;color:var(--accent)}
.section-head h2 span{text-transform:none;font-weight:400;color:var(--muted)}
.section-head a{font-size:.72rem;color:var(--muted)}
.thumb-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:.45rem}
@media(max-width:700px){.thumb-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.thumb-grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.5rem}
@media(max-width:700px){.thumb-grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
.thumb-item{display:block;border-radius:8px;overflow:hidden;border:1px solid var(--border2);
  aspect-ratio:3/4;background:var(--surface2);position:relative;transition:border-color .2s,transform .2s}
.thumb-item:hover{border-color:var(--accent);transform:translateY(-2px)}
.thumb-item img{width:100%;height:100%;object-fit:cover;display:block}
.thumb-label{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(to top,rgba(0,0,0,.85),transparent);
  font-size:.63rem;color:#fff;padding:.45rem .25rem .22rem;text-align:center;font-weight:700}
.thumb-empty{display:flex;align-items:center;justify-content:center;height:100%;color:var(--muted);font-size:.65rem}
/* gallery banner rows -- the adultaifinder.com ".cat" treatment, which is what
   makes these read as picture sites rather than tube sites */
.gcats{display:grid;gap:.7rem}
.gcat{position:relative;display:flex;align-items:center;gap:.9rem;overflow:hidden;
  border:1px solid var(--border2);border-radius:15px;padding:.9rem 1rem;min-height:120px;
  background:var(--surface2);transition:transform .2s,border-color .2s}
.gcat:hover{transform:translateY(-3px);border-color:var(--accent);text-decoration:none}
.gcat .pic{position:absolute;inset:0;z-index:0;background-size:cover;background-position:50% 30%;
  filter:blur(1px);opacity:.42}
.gcat:before{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,var(--surface) 6%,rgba(0,0,0,0) 92%)}
.gcat .b{position:relative;z-index:2;flex:1 1 46%;min-width:0}
/* PINK THROUGH THE MIDDLE (Boss, 22 Sep 2026: "the pink is mainly only at the
   bottom... we need it in some of the middle and bars titles instead of the white").
   These six titles are the tallest thing in the middle column, so they carry the
   colour down the page. The description and the Browse link under each stay as they
   were, which is what keeps it even rather than a pink page. */
.gcat .t{font-weight:800;font-size:1.02rem;color:var(--accent2);display:block}
.gcat .d{font-size:.78rem;color:var(--muted);margin-top:3px}
.gcat .peek{display:inline-block;margin-top:.5rem;color:var(--accent);font-weight:700;font-size:.78rem}
.gcat .thumbs{position:relative;z-index:2;flex:0 0 42%;display:grid;
  grid-template-columns:repeat(4,1fr);gap:.35rem}
.gcat .thumbs span{display:block;border-radius:9px;overflow:hidden;border:1px solid var(--border2)}
.gcat .thumbs img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block}
@media(max-width:760px){
  .gcat{flex-direction:column;align-items:stretch}
  .gcat .thumbs{flex:none;grid-template-columns:repeat(4,1fr)}
  .gcat:before{background:linear-gradient(180deg,rgba(0,0,0,.10),var(--surface) 82%)}
}
.enter-box{background:linear-gradient(180deg,var(--surface2) 0%,var(--surface) 100%);
  border:1px solid var(--border);border-radius:14px;padding:1.3rem 1.2rem;text-align:center}
.enter-box h2{font-size:1.1rem;font-weight:800;margin-bottom:.3rem}
.enter-box p{color:var(--muted);font-size:.82rem;margin-bottom:1rem}
.enter-box .btn-enter{font-size:1.25rem;padding:.85rem 2.5rem;margin-bottom:.9rem}
.enter-quick-links{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap;font-size:.78rem}
.enter-quick-links a{color:var(--accent);border-bottom:1px solid var(--border2)}
.aff-cta{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:.9rem 1.2rem;text-align:center}
.aff-cta p{color:var(--muted);font-size:.82rem}

/* ══ ADVERTISING SPOTS — all in the middle column ══ */
.ad-slot{background:var(--surface);border:1px dashed var(--border);border-radius:10px;
  padding:.75rem .9rem;text-align:center}
.ad-slot .ad-lbl{display:block;font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin-bottom:.45rem}
.ad-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:.55rem}
.ad-card{display:flex;flex-direction:column;justify-content:center;padding:.7rem .8rem;
  border:1px solid var(--border2);border-radius:9px;background:var(--surface2);color:var(--text);text-align:left}
.ad-card:hover{border-color:var(--accent);text-decoration:none;color:var(--text)}
.ad-card .k{font-size:.66rem;letter-spacing:.05em;color:var(--muted)}
.ad-card .t{font-weight:800;font-size:.9rem;margin:3px 0 2px}
.ad-card .s{font-size:.74rem;color:var(--muted)}

/* ══ FEATURE BAR ══ */
.sv-featured{border:1px solid var(--border);border-radius:11px;padding:.9rem 1rem;background:var(--surface);margin-top:.9rem}
.sv-featured .hd{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:.7rem;flex-wrap:wrap}
.sv-featured .hd b{font-size:.85rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--accent)}
.sv-featured .hd i{font-style:normal;font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);border:1px solid var(--border2);border-radius:4px;padding:1px 6px}
.sv-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:.6rem}
.sv-card{display:flex;flex-direction:column;justify-content:center;padding:.7rem .8rem;border:1px solid var(--border2);
  border-radius:9px;background:var(--surface2);color:var(--text)}
.sv-card:hover{border-color:var(--accent);text-decoration:none;color:var(--text)}
.sv-card .k{font-size:.68rem;letter-spacing:.05em;color:var(--muted)}
.sv-card .t{font-weight:800;font-size:.92rem;margin:3px 0 2px}
.sv-card .s{font-size:.75rem;color:var(--muted)}

/* ══ HORIZONTAL TOP LISTS, at the bottom of the page ══ */
.hl-box{background:var(--surface);border:1px solid var(--border2);border-radius:12px;
  padding:.9rem 1.1rem;margin-top:.9rem}
.hl-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:.6rem}
/* GRID TEXT SIZE (Boss, 22 Sep 2026: "the text is too small ... mainly on the
   toplist grids"). These were .75rem pills with a .68rem rank number - 12px and
   11px. They are the links the whole page exists to be clicked on, and they were
   the smallest text on it. */
/* PINK, THE SAME ON BOTH PAGE TYPES (Boss, 22 Sep 2026: "yes both pink").
   photopost.css forces .container h2 to --accent2 on the .php pages, so this was
   blue on /toplist/ and pink on a gallery page - one heading, two colours. */
.hl-head h2{font-size:1rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--accent2)}
.hl-head span{font-size:.85rem;color:var(--muted)}
.hl-list{display:flex;flex-wrap:wrap;gap:.45rem}
/* HEADER PINK ON THE TOPLIST (Boss, 22 Sep 2026). Blue on dark blue was the
   hardest thing on the page to read, and it was the links themselves. */
.hl-item{display:inline-flex;align-items:baseline;gap:.4rem;border:1px solid var(--border2);
  border-radius:20px;background:var(--surface2);padding:.42rem 1rem;font-size:1rem;
  color:var(--accent2);transition:all .14s;max-width:100%}
.hl-item:hover{border-color:var(--accent);background:rgba(var(--accent-rgb),.12);
  color:#ffffff;text-decoration:none}
.hl-item b{color:var(--text);font-weight:800;font-size:.92rem}
.hl-item.hl-here{border-color:var(--accent);background:rgba(var(--accent-rgb),.16);cursor:default}
.hl-item.hl-free{border-style:dashed;color:var(--muted);background:transparent}
.hl-item.hl-free:hover{border-style:solid;border-color:var(--accent);color:#ffffff}
.hl-head span b{color:var(--accent)}
/* sponsor space: the TOP of the page and the TOP of both side columns.
   Other people's links start below these, once the visitor scrolls. */
.top-spon{background:var(--surface);border:1px solid var(--border);border-radius:10px;
  padding:.55rem .8rem;margin-bottom:.4rem}
.top-spon .ad-lbl{display:block;font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin-bottom:.4rem;text-align:center}
.top-spon-row{display:flex;flex-wrap:wrap;gap:.45rem;justify-content:center}
.top-spon-row a{border:1px solid var(--border2);border-radius:20px;background:var(--surface2);
  padding:.3rem .85rem;font-size:.76rem;color:var(--text);transition:all .14s}
.top-spon-row a:hover{border-color:var(--accent);background:rgba(var(--accent-rgb),.12);
  color:#ffffff;text-decoration:none}
.top-spon-row a b{color:var(--accent)}
.top-spon-row a.spon-free{border-style:dashed;color:var(--muted)}
.sb-spon{border-color:var(--border)}
.spon-card{display:block;border:1px solid var(--border2);border-radius:9px;background:var(--surface2);
  padding:.5rem .6rem;margin-bottom:.4rem;color:var(--text);transition:all .14s}
.spon-card:last-child{margin-bottom:0}
/* AI SPONSOR BANNERS (Boss, 22 Sep 2026: "all the ai banners everywhere - I'd like
   them in the posts sites"). The image carries the message, so the card is just a
   frame: no padding, no text, and the picture fills it at whatever width the column
   happens to be. */
.spon-banner{display:block;margin-bottom:.4rem;border:1px solid var(--border2);
  border-radius:9px;overflow:hidden;line-height:0;transition:border-color .14s}
.spon-banner:hover{border-color:var(--accent)}
.spon-banner img{width:100%;height:auto;display:block}
.ad-banner{display:block;margin:.6rem auto 0;border:1px solid var(--border2);
  border-radius:9px;overflow:hidden;line-height:0;max-width:1080px}
.ad-banner:hover{border-color:var(--accent)}
.ad-banner img{width:100%;height:auto;display:block}
.spon-card:hover{border-color:var(--accent);background:rgba(var(--accent-rgb),.1);text-decoration:none}
.spon-card .k{display:block;font-size:.6rem;letter-spacing:.05em;color:var(--muted)}
.spon-card .t{display:block;font-weight:800;font-size:.8rem;margin:2px 0 1px;color:var(--accent)}
.spon-card .s{display:block;font-size:.68rem;color:var(--muted);line-height:1.35}
.spon-card.spon-free{border-style:dashed;background:transparent}
.spon-card.spon-free .t{color:var(--muted)}
/* numbered top-25 in the left column -- the spot that gets the clicks */
.sb-ranked li{margin:0}
.sb-rank{display:flex;align-items:baseline;gap:.35rem;border:1px solid var(--border2);
  border-radius:5px;color:var(--muted);padding:.24rem .4rem;font-size:.71rem;
  background:var(--surface2);transition:all .12s;line-height:1.3}
.sb-rank:hover{border-color:var(--accent);color:#ffffff;background:rgba(var(--accent-rgb),.1);text-decoration:none}
.sb-rank b{color:var(--accent);font-weight:800;font-size:.65rem;min-width:15px;flex:0 0 auto}
.sb-rank.sb-here{border-color:var(--accent);background:rgba(var(--accent-rgb),.16);flex-wrap:wrap}
.sb-rank em{font-style:normal;font-size:.58rem;text-transform:uppercase;letter-spacing:.04em;opacity:.8}
.hl-item em{font-style:normal;font-size:.62rem;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.tl-me td{background:rgba(var(--accent-rgb),.14) !important}
.tl-here{font-size:.6rem;letter-spacing:.06em;text-transform:uppercase;color:#fff;
  background:var(--accent);border-radius:3px;padding:1px 5px;margin-left:5px;vertical-align:1px}
.hl-empty{border:1px dashed var(--border2);border-radius:9px;padding:.8rem 1rem;color:var(--muted);font-size:.78rem}
.hl-empty strong{color:var(--text);display:block;margin-bottom:2px}

/* ══ THE FULL TOP LIST TABLE (the /toplist/ page) ══ */
.tl-tbl{width:100%;border-collapse:collapse;font-size:.8rem}
.tl-tbl th{background:rgba(var(--accent-rgb),.16);color:var(--accent);font-size:.68rem;letter-spacing:.08em;
  text-transform:uppercase;text-align:left;padding:.5rem .6rem;border-bottom:1px solid var(--border)}
.tl-tbl td{padding:.45rem .6rem;border-bottom:1px solid var(--border2);vertical-align:top}
.tl-tbl tr:last-child td{border-bottom:0}
.tl-tbl tbody tr:nth-child(even) td{background:rgba(var(--accent-rgb),.05)}
.tl-num{width:42px;text-align:center;color:var(--muted);font-weight:800}
.tl-ttl a{font-weight:700}
.tl-dsc{display:block;color:var(--muted);font-size:.73rem;margin-top:1px}
.tl-host{width:200px;color:var(--muted);font-size:.72rem;word-break:break-all}
@media(max-width:640px){.tl-host{display:none}}
.tl-scroll{overflow-x:auto}

/* ══ TRADE-REQUEST FORM — this is the page whose text could not be seen ══ */
.tr-card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:1.4rem 1.3rem}
.tr-card h1{font-size:clamp(1.4rem,3.4vw,2rem);text-align:center;margin-bottom:.35rem}
.tr-lead{text-align:center;color:var(--muted);margin-bottom:1.2rem;font-size:.86rem}
.tr-form{display:grid;gap:.85rem}
.tr-sect{font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);margin-top:.3rem}
.tr-field{display:grid;gap:.3rem}
.tr-field label{font-weight:700;font-size:.82rem;color:var(--text)}
.tr-field small{color:var(--muted);font-size:.7rem;font-style:italic}
.tr-field input,.tr-field textarea{width:100%;padding:.7rem .8rem;border:1px solid var(--border2);
  border-radius:9px;background:#fff;color:#15202b;font:inherit}
.tr-field textarea{min-height:92px;resize:vertical}
.tr-submit{text-align:center;padding-top:.3rem}
.tr-submit button{min-width:220px;padding:.85rem 1.4rem;border:0;border-radius:11px;cursor:pointer;
  font-weight:800;font-size:1rem;color:#fff;background:linear-gradient(135deg,var(--accent2),var(--accent));
  box-shadow:0 10px 22px rgba(var(--accent-rgb),.3)}
.tr-foot{margin-top:.9rem;text-align:center;font-size:.76rem;color:var(--muted)}
.tr-banner{display:none;margin-bottom:1rem;padding:.75rem 1rem;border-radius:9px;font-weight:700;text-align:center}
.tr-banner.show{display:block}
.tr-banner.success{background:rgba(46,194,138,.16);border:1px solid #2ec28a;color:#0f7a53}
.tr-banner.error{background:rgba(255,80,80,.14);border:1px solid #9b3434;color:#a12626}
.tr-hide{display:none}

/* ══ FOOTER ══ */
.site-footer{text-align:center;padding:1.4rem 1.2rem 2.2rem;
  background:linear-gradient(to top,#6d1420 0%,#3a0a11 34%,var(--bg) 78%);
  border-top:1px solid var(--border);margin-top:1.2rem;color:var(--muted);font-size:.92rem}
/* FOOTER TEXT SIZE (Boss, 22 Sep 2026: "the header and footers are still small
   text"). The footer ran at .74rem - under 12px - for the site links, the
   copyright and every "MORE POSTING SITES" box. It is the same links as the
   menu, at two-thirds the size. */
.full-box{background:var(--surface);border:1px solid var(--border2);border-radius:12px;
  padding:1rem 1.2rem;margin-top:.9rem}
.full-box>h2{font-size:1.02rem;font-weight:800;color:var(--accent2);text-transform:uppercase;
  letter-spacing:.07em;margin-bottom:.8rem;text-align:center}
.site-footer .full-box{background:transparent;max-width:1140px;margin:0 auto .8rem}
/* EVEN COLUMNS (Boss, 22 Sep 2026: "delete the empty third column for evenness").
   auto-fill let the column count follow the window width, so the last row was left
   ragged. Three columns divides both footer boxes exactly - 12 posting sites into 4
   rows, 6 AI sites into 2 - and 2 and 1 divide them too, so no breakpoint is ragged. */
.sister-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:.5rem}
/* TWO ROWS, TOP BOX ONLY (Boss, 22 Sep 2026: "just make 2 lines instead of 3" and
   "the bottom one stays the same"). 12 posting sites over 6 columns is exactly 2 rows;
   3 and 2 columns divide 12 as well, so no breakpoint leaves a ragged row. The AI box
   below and the toplist's own sister grid keep the auto-fill above, untouched. */
.sister-grid.two-rows{grid-template-columns:repeat(6,1fr)}
@media (max-width:900px){.sister-grid.two-rows{grid-template-columns:repeat(3,1fr)}}
@media (max-width:480px){.sister-grid.two-rows{grid-template-columns:repeat(2,1fr)}}
.sister-link{display:block;text-align:center;border:1px solid var(--border2);border-radius:8px;
  padding:.55rem;font-size:.92rem;font-weight:700;color:var(--accent2);background:var(--surface2)}
.sister-link:hover{border-color:var(--accent);color:#ffffff;text-decoration:none}
/* FOOTER BOXES KEEP THEIR PANEL (Boss, 22 Sep 2026: "I can't see them that
   well"). This used to be rgba(0,0,0,.10) - near-invisible over the footer
   gradient. */
.site-footer .sister-link{background:var(--surface2);border-color:var(--border)}
.site-footer .sister-link:hover{background:rgba(var(--accent-rgb),.14)}
.seo-text{background:var(--surface);border:1px solid var(--border2);border-radius:10px;
  padding:1rem 1.2rem;margin-top:.8rem;font-size:.95rem;color:var(--muted);line-height:1.75}
.seo-text h2{font-size:1.05rem;color:var(--accent);margin-bottom:.5rem}
.seo-text p+p{margin-top:.6rem}