/* Theme tidy-up for the Retro page only. The header stays as the theme draws it (never hidden). */
body:has(.ttr-arc) .page-title,body:has(.ttr-arc) #comments,body:has(.ttr-arc) .comments-area,body:has(.ttr-arc) #respond,body:has(.ttr-arc) #sidebar,body:has(.ttr-arc) .post-meta{display:none!important}
body:has(.ttr-arc) #content{width:100%!important;max-width:100%!important;padding:0!important;float:none!important}
body:has(.ttr-arc) #pagewrap,body:has(.ttr-arc) #body,body:has(.ttr-arc) #layout{background:#f5efe0!important}
/* Themify's sticky header shrinks from 167px to 63px on scroll (padding 32px -> 12px, tagline hidden), which
   pulled the page up 100px. Keep it the compact size in both states so nothing moves. Header stays visible. */
body:has(.ttr-arc) #headerwrap #header{padding-top:12px!important;padding-bottom:12px!important;transition:none!important}
body:has(.ttr-arc) #site-description{display:none!important}
body:has(.ttr-arc) #headerwrap #site-logo{margin:5px 0 0!important;transition:none!important}

.ttr-arc{--paper:#fdf8ea;--cream:#f5efe0;--ink:#2a2a2e;--sub:#5f594f;--x:#e54b3f;--o:#2f8bd8;--line:#d9cfb9;
  font:18px/1.5 "Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;color:var(--ink);background:var(--cream);
  max-width:1240px;margin:0 auto;padding:28px 16px 64px}
.ttr-arc *{box-sizing:border-box}
.ttr-arc h1{font-family:"Fredoka","Inter",sans-serif;font-size:clamp(38px,6.5vw,60px);line-height:1.05;margin:0;color:var(--ink);letter-spacing:-.5px}
.ttr-arc h1 .tx{color:var(--x)}.ttr-arc h1 .to{color:var(--o)}
.ttr-arc .ttr-lede{color:var(--sub);font-size:19px;margin:8px 0 20px;max-width:680px}
/* Search + category bar. Not sticky: the theme header owns the top of the window. */
.ttr-bar{background:var(--cream);padding:10px 0 12px;border-bottom:1px solid var(--line)}
.ttr-search{width:100%;max-width:520px;font:inherit;font-size:19px;padding:12px 16px;border:2px solid var(--ink);border-radius:14px;background:var(--paper);color:var(--ink)}
.ttr-search:focus{outline:3px solid var(--o);outline-offset:1px}
.ttr-chips{display:flex;gap:8px;overflow-x:auto;padding-top:10px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.ttr-chips::-webkit-scrollbar{display:none}
.ttr-chip{flex:none;font:inherit;font-size:16px;font-weight:600;padding:7px 14px;border-radius:999px;border:2px solid var(--ink);background:var(--paper);color:var(--ink);cursor:pointer}
.ttr-chip[aria-pressed=true]{background:var(--ink);color:var(--paper)}
.ttr-count{font-size:15px;color:var(--sub);margin:14px 0 0}
.ttr-sec h2{font-family:"Fredoka","Inter",sans-serif;font-size:clamp(26px,3.6vw,34px);margin:30px 0 12px;color:var(--ink)}
.ttr-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.ttr-card{display:flex;flex-direction:column;text-align:left;font:inherit;color:inherit;background:var(--paper);border:2px solid var(--ink);border-radius:16px;overflow:hidden;padding:0;cursor:pointer;box-shadow:0 4px 0 rgba(0,0,0,.15);transition:transform .12s}
.ttr-card:hover,.ttr-card:focus-visible{transform:translateY(-2px)}
.ttr-card:focus-visible{outline:3px solid var(--o);outline-offset:2px}
.ttr-card img{display:block;width:100%;aspect-ratio:8/5;object-fit:cover;background:#1f1d24}
.ttr-card b{display:block;padding:10px 12px 2px;font-size:18px}
.ttr-card small{display:block;padding:0 12px 12px;color:var(--sub);font-size:15px}
.ttr-none{color:var(--sub);margin:24px 0}
.ttr-plain{columns:3 200px}

/* Full-window player. position:fixed over the page, so the page under it never changes size. */
.ttr-player{position:fixed;inset:0;z-index:2147483000;background:#0b0b0d;display:flex;flex-direction:column}
.ttr-player[hidden]{display:none}
.ttr-top{flex:none;display:flex;align-items:center;gap:10px;height:52px;padding:0 10px 0 16px;background:#16151a;color:#fdf8ea;font:600 18px/1 "Inter",sans-serif}
.ttr-top .ttr-t{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ttr-top .ttr-hint{color:#a9a294;font-weight:400;font-size:15px;white-space:nowrap}
.ttr-top button{font:inherit;font-size:16px;color:#fdf8ea;background:#29262f;border:1px solid #3a3640;border-radius:10px;height:38px;padding:0 14px;cursor:pointer}
.ttr-top button:hover,.ttr-top button:focus-visible{background:#3a3640}
.ttr-top .ttr-x{font-size:22px;padding:0 12px;min-width:44px}
.ttr-frame{flex:1;width:100%;border:0;display:block;background:#0b0b0d}
@media (max-width:640px){.ttr-top .ttr-hint,.ttr-top .ttr-fs{display:none}}
@media (max-width:520px){
  .ttr-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .ttr-card b{font-size:16px;padding:8px 10px 2px}
  .ttr-card small{font-size:14px;padding:0 10px 10px}
}