/*
Theme Name: Kool Captions
Description: The koolcaptions.com look for the /blog WordPress. The first block below is copied verbatim from caption-studio pages.py _CSS; keep it in sync when the site's design changes.
Version: 1.0.0
Requires PHP: 8.1
Text Domain: koolcaptions
*/

/* ---------- from caption-studio pages.py _CSS ---------- */
:root{ color-scheme:dark; --bg:#0B0D0C; --panel:#131615; --panel2:#1A1E1C; --ink:#F5F7F6; --dim:#A7AFAB; --mute:#69726E; --line:#242927; --accent:#B4FF39; --on-accent:#08130E; --hl:#FFD84D; }
*{ box-sizing:border-box; margin:0; }
body{ background:var(--bg); color:var(--dim); font:16px/1.7 Inter,-apple-system,"Segoe UI",Roboto,system-ui,sans-serif; -webkit-font-smoothing:antialiased; }
a{ color:var(--accent); }
.in{ max-width:820px; margin:0 auto; padding-inline:20px; }
header{ position:sticky; top:0; z-index:5; background:color-mix(in srgb,var(--bg) 88%,transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
header .in{ max-width:1080px; display:flex; align-items:center; gap:20px; height:60px; }
.brand{ color:var(--ink); font-weight:700; text-decoration:none; margin-right:auto; letter-spacing:-.01em; }
header nav{ display:flex; gap:20px; font-size:14px; }
header nav a{ color:var(--dim); text-decoration:none; }
header nav a:hover{ color:var(--ink); }
.btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 20px; border-radius:10px; font-weight:700; text-decoration:none; font-size:15px; white-space:nowrap; }
.btn.go{ background:var(--accent); color:var(--on-accent); }
.btn.go:hover{ filter:brightness(1.08); }
.btn.ghost{ color:var(--ink); border:1px solid var(--line); }
header .btn{ height:36px; padding:0 14px; font-size:13.5px; border-radius:8px; }
@media(max-width:640px){ header nav{ display:none; } }
.bc{ font-size:13px; color:var(--mute); padding-top:24px; }
.bc a{ color:var(--dim); text-decoration:none; }
.bc a:hover{ color:var(--ink); }
.eyebrow{ color:var(--accent); font-size:13px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; margin:20px 0 12px; }
h1{ color:var(--ink); font-size:clamp(30px,4.6vw,44px); line-height:1.1; letter-spacing:-.025em; margin-bottom:16px; text-wrap:balance; }
h2{ color:var(--ink); font-size:clamp(22px,3vw,28px); letter-spacing:-.02em; margin:40px 0 12px; text-wrap:balance; }
h3{ color:var(--ink); font-size:17px; margin:24px 0 6px; }
p{ margin-bottom:16px; max-width:68ch; }
.lead{ font-size:18px; color:var(--dim); margin-bottom:26px; max-width:62ch; }
ul,ol{ margin:0 0 16px 22px; } li{ margin-bottom:8px; max-width:66ch; }
.example{ background:var(--panel); border:1px solid var(--line); border-left:3px solid var(--accent); border-radius:10px; padding:15px 18px; color:var(--ink); margin:0 0 22px; font-size:15.5px; }
.example span{ color:var(--mute); display:block; font-size:12.5px; text-transform:uppercase; letter-spacing:.05em; margin-bottom:6px; }
.cta{ background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:28px; margin:36px 0; text-align:center; }
.cta h2{ margin:0 0 8px; }
.cta p{ margin-inline:auto; }
table.cmp{ width:100%; border-collapse:collapse; margin:18px 0 26px; font-size:14.5px; }
table.cmp th,table.cmp td{ text-align:left; padding:11px 12px; border-bottom:1px solid var(--line); vertical-align:top; }
table.cmp thead th{ font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:var(--mute); }
table.cmp td:first-child,table.cmp th:first-child{ color:var(--ink); font-weight:600; }
table.cmp .you{ color:var(--accent); }
details{ border-bottom:1px solid var(--line); }
summary{ cursor:pointer; list-style:none; color:var(--ink); font-weight:600; padding:16px 28px 16px 0; position:relative; }
summary::-webkit-details-marker{ display:none; }
summary::after{ content:"+"; position:absolute; right:4px; top:14px; color:var(--mute); font-size:20px; }
details[open] summary::after{ content:"\2212"; }
details p{ padding-bottom:16px; }
.rel{ display:flex; flex-wrap:wrap; gap:10px; margin:12px 0; }
.rel a{ background:var(--panel); border:1px solid var(--line); border-radius:999px; padding:7px 14px; font-size:13.5px; text-decoration:none; color:var(--dim); }
.rel a:hover{ color:var(--ink); border-color:var(--dim); }
.note{ font-size:13px; color:var(--mute); margin-top:26px; }
footer{ border-top:1px solid var(--line); color:var(--mute); font-size:13.5px; margin-top:34px; }
footer .in{ max-width:1080px; padding-block:22px; display:flex; flex-wrap:wrap; gap:6px 16px; }
footer a{ color:var(--dim); text-decoration:none; }
footer a:hover{ color:var(--ink); }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:6px; }
main.wide .in{ max-width:1080px; }
/* blog index: the newest post as a wide card, the rest as a grid */
.feat,.card{ position:relative; background:var(--panel); border:1px solid var(--line); overflow:hidden; transition:border-color .2s, box-shadow .2s; }
.feat{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); border-radius:20px; margin:30px 0 22px; }
.feat:hover,.card:hover{ border-color:color-mix(in srgb,var(--accent) 45%,var(--line)); box-shadow:0 18px 50px -24px color-mix(in srgb,var(--accent) 45%,transparent); }
.feat .cover{ aspect-ratio:auto; min-height:360px; }
.feat .txt{ padding:44px 44px 40px; display:flex; flex-direction:column; justify-content:center; }
.feat h2{ font-size:clamp(28px,3.4vw,40px); line-height:1.12; margin:0 0 16px; }
.feat p{ font-size:16.5px; margin-bottom:24px; }
.meta{ font-size:13.5px; color:var(--mute); margin-bottom:14px; }
.meta b{ color:var(--accent); font-weight:600; }
.feat h2 a,.card h3 a{ color:var(--ink); text-decoration:none; }
.feat h2 a::after,.card h3 a::after{ content:""; position:absolute; inset:0; z-index:2; }
.more{ color:var(--accent); font-weight:600; font-size:15px; }
.more i{ display:inline-block; font-style:normal; margin-left:6px; transition:transform .2s; }
.feat:hover .more i,.card:hover .more i{ transform:translateX(4px); }
.cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:22px; }
.card{ display:flex; flex-direction:column; border-radius:16px; }
.card .txt{ padding:20px 22px 22px; display:flex; flex-direction:column; flex:1; }
.card h3{ font-size:19px; line-height:1.3; margin:0 0 10px; text-wrap:balance; }
.card p{ font-size:14.5px; margin-bottom:18px; flex:1; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
@media(max-width:820px){ .feat{ grid-template-columns:1fr; } .feat .cover{ min-height:0; aspect-ratio:16/10; } .feat .txt{ padding:24px 22px 26px; } }
/* covers: drawn in CSS (no image files), sized off the cover's own width */
.cover{ position:relative; overflow:hidden; aspect-ratio:16/10; container-type:inline-size;
  background:radial-gradient(90% 80% at 12% 0%,rgba(180,255,57,.20),transparent 60%),radial-gradient(70% 60% at 100% 100%,rgba(255,216,77,.10),transparent 60%),linear-gradient(160deg,#141917,#0B0D0C 70%); }
.cover::before{ content:""; position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:6cqw 6cqw; -webkit-mask-image:radial-gradient(ellipse at 30% 35%,#000 15%,transparent 72%); mask-image:radial-gradient(ellipse at 30% 35%,#000 15%,transparent 72%); }
.cv-copy{ position:absolute; left:7cqw; top:50%; transform:translateY(-50%); width:54cqw; }
.cv-k{ display:inline-block; font-size:max(9px,2.5cqw); font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--accent);
  border:1px solid rgba(180,255,57,.35); border-radius:999px; padding:.5cqw 1.8cqw; margin-bottom:2.6cqw; line-height:1.6; }
.cv-big{ display:block; color:var(--ink); font-size:6.2cqw; line-height:1.06; letter-spacing:-.03em; font-weight:800; }
.cv-big em{ font-style:normal; color:var(--accent); }
.ph{ position:absolute; right:7cqw; top:50%; width:26cqw; aspect-ratio:9/16; transform:translateY(-50%) rotate(5deg); border-radius:3.2cqw;
  background:#1d221f; border:1px solid rgba(255,255,255,.14); box-shadow:0 3cqw 6cqw -2cqw rgba(0,0,0,.75),0 0 9cqw -3cqw rgba(180,255,57,.45); transition:transform .4s; }
.ph::before{ content:""; position:absolute; inset:1.1cqw; border-radius:2.3cqw;
  background:radial-gradient(circle at 50% 34%,#424a46 0 3.6cqw,transparent 3.8cqw),radial-gradient(9cqw 7cqw at 50% 74%,#363e3a 0 98%,transparent 100%),linear-gradient(180deg,#26302c,#101412); }
.ph-cap{ position:absolute; left:4%; right:4%; top:56%; z-index:1; text-align:center; font-weight:900; font-size:2.7cqw; line-height:1.18; color:#fff;
  text-transform:uppercase; text-shadow:0 .3cqw 0 #000,0 0 1.2cqw rgba(0,0,0,.7); }
.ph-cap .hl{ color:var(--on-accent); background:var(--accent); padding:0 .7cqw; border-radius:.6cqw; text-shadow:none; }
.ph-cap .bad{ color:#ff7a7a; text-decoration:line-through; text-decoration-thickness:.45cqw; }
.score{ position:absolute; right:6cqw; top:50%; width:34cqw; transform:translateY(-50%) rotate(-3deg); background:#171b19; border:1px solid rgba(255,255,255,.13);
  border-radius:2.4cqw; padding:1.4cqw 2.6cqw; box-shadow:0 3cqw 6cqw -2cqw rgba(0,0,0,.75),0 0 9cqw -3cqw rgba(180,255,57,.4); transition:transform .4s; }
.score div{ display:flex; justify-content:space-between; gap:2cqw; font-size:2.3cqw; color:var(--ink); padding:1.3cqw 0; border-bottom:1px solid rgba(255,255,255,.08); line-height:1.3; }
.score div:last-child{ border-bottom:0; }
.score i{ font-style:normal; color:var(--accent); font-weight:800; }
.feat:hover .ph,.card:hover .ph{ transform:translateY(-50%) rotate(2deg) scale(1.04); }
.feat:hover .score,.card:hover .score{ transform:translateY(-50%) rotate(-1deg) scale(1.04); }
@media(prefers-reduced-motion:reduce){ .feat,.card,.ph,.score,.more i{ transition:none; } }

/* ---------- WordPress additions ---------- */
.screen-reader-text{ position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.skip{ position:absolute; left:-9999px; }
.skip:focus{ left:16px; top:12px; z-index:10; background:var(--accent); color:var(--on-accent); padding:8px 14px; border-radius:8px; }
.byline{ color:var(--mute); font-size:14px; margin:-6px 0 20px; }
.cv-big.sm{ font-size:4.6cqw; line-height:1.12; }
.cover.img{ background:var(--panel2); }
.cover.img::before{ display:none; }
.cover.img img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.post-body img,.post-body video,.post-body iframe{ max-width:100%; height:auto; border-radius:12px; }
.post-body figure{ margin:24px 0; }
.post-body figcaption,.wp-element-caption{ font-size:13px; color:var(--mute); margin-top:8px; text-align:center; }
.post-body blockquote{ border-left:3px solid var(--accent); padding:4px 0 4px 18px; margin:0 0 20px; color:var(--ink); }
.post-body code{ background:var(--panel2); border:1px solid var(--line); border-radius:6px; padding:1px 6px; font-size:.9em; color:var(--ink); }
.post-body pre{ background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:16px; overflow:auto; margin:0 0 20px; }
.post-body pre code{ background:none; border:0; padding:0; }
.post-body hr{ border:0; border-top:1px solid var(--line); margin:32px 0; }
.post-body strong,.post-body b{ color:var(--ink); }
.post-body table:not(.cmp){ width:100%; border-collapse:collapse; margin:18px 0 26px; font-size:14.5px; }
.post-body table:not(.cmp) th,.post-body table:not(.cmp) td{ text-align:left; padding:11px 12px; border-bottom:1px solid var(--line); vertical-align:top; }
.post-body table:not(.cmp) th{ font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:var(--mute); }
.wp-block-table{ overflow-x:auto; margin:0; }
.wp-block-button__link{ background:var(--accent)!important; color:var(--on-accent)!important; border-radius:10px!important; font-weight:700; text-decoration:none; padding:11px 20px!important; }
.alignleft{ float:left; margin:0 20px 12px 0; } .alignright{ float:right; margin:0 0 12px 20px; } .aligncenter{ margin-inline:auto; display:block; }
.faq{ margin-top:14px; }
.pager{ display:flex; justify-content:space-between; gap:12px; margin:30px 0 0; }
.pager a{ color:var(--ink); text-decoration:none; border:1px solid var(--line); border-radius:10px; padding:10px 16px; font-size:14px; }
.pager a:hover{ border-color:var(--dim); }
.empty{ margin:30px 0; }