/*
Theme Name: Playhead
Theme URI: https://samnext.com/
Description: Reading-queue theme. The newest guide sits at the playhead and everything else is queued behind it, each row carrying its own length and the running time it takes to reach it. Built for a small, ordered archive rather than an endless feed.
Author: samnext.com
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: playhead
*/

/* ---------------------------------------------------------------- fonts */
@font-face{font-family:'Outfit';font-style:normal;font-weight:600;font-display:swap;src:url('assets/fonts/Outfit-600.woff2') format('woff2');}
@font-face{font-family:'Outfit';font-style:normal;font-weight:700;font-display:swap;src:url('assets/fonts/Outfit-700.woff2') format('woff2');}
@font-face{font-family:'Rubik';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/Rubik-400.woff2') format('woff2');}
@font-face{font-family:'Rubik';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/Rubik-500.woff2') format('woff2');}
@font-face{font-family:'Overpass Mono';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/OverpassMono-400.woff2') format('woff2');}
@font-face{font-family:'Overpass Mono';font-style:normal;font-weight:600;font-display:swap;src:url('assets/fonts/OverpassMono-600.woff2') format('woff2');}

/* --------------------------------------------------------------- tokens */
:root{
  --paper:#F3F4F6; --card:#FFFFFF; --sunk:#E8EAEE;
  --ink:#15171C; --ink-2:#3D414A; --dim:#6F747E;
  --go:#137F45; --go-2:#1FA85B; --go-soft:#E3F3EA;
  --rule:#DCDEE4; --rule-2:#EAECF0;

  --f-disp:'Outfit',system-ui,'Segoe UI',Roboto,sans-serif;
  --f-body:'Rubik',system-ui,'Segoe UI',Roboto,sans-serif;
  --f-mono:'Overpass Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  --wrap:960px; --measure:66ch;
  --s1:6px; --s2:12px; --s3:18px; --s4:28px; --s5:42px; --s6:64px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--f-body);font-size:16.5px;line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--ink);text-decoration:none}
a:hover{color:var(--go)}
:focus-visible{outline:2px solid var(--go);outline-offset:3px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 22px}
.skip{position:absolute;left:-9999px;top:0;background:var(--go);color:#fff;padding:10px 16px;z-index:99}
.skip:focus{left:8px;top:8px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.tnum{font-variant-numeric:tabular-nums}

/* ------------------------------------------------------------- masthead */
.mast{background:var(--card);border-bottom:1px solid var(--rule)}
.mast__in{display:flex;align-items:center;gap:var(--s4);padding:var(--s3) 22px;max-width:var(--wrap);margin:0 auto}
.brand{display:flex;align-items:center;gap:11px}
.brand__mark{flex:none;width:26px;height:26px;color:var(--go)}
.brand__name{font-family:var(--f-disp);font-weight:700;font-size:22px;letter-spacing:-.028em;color:var(--ink)}
.mast__nav{margin-left:auto}
.mast__nav ul{list-style:none;display:flex;flex-wrap:wrap;gap:var(--s3);margin:0;padding:0}
.mast__nav a{
  font-family:var(--f-body);font-weight:500;font-size:13.5px;color:var(--ink-2);
  padding:5px 10px;display:block;border-radius:999px;
}
.mast__nav a:hover,.mast__nav .current-menu-item>a{color:var(--go);background:var(--go-soft)}
.mast__toggle{display:none}

/* the queue's own summary line */
.transport{background:var(--sunk);border-bottom:1px solid var(--rule)}
.transport__in{
  display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);align-items:center;
  max-width:var(--wrap);margin:0 auto;padding:9px 22px;
  font-family:var(--f-mono);font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--dim);
}
.transport__in b{color:var(--ink);font-weight:600}
.transport__search{margin-left:auto}

/* ----------------------------------------------------------- searchform */
.sform{display:flex;align-items:center;gap:7px}
.sform input[type=search]{
  font-family:var(--f-body);font-size:13px;color:var(--ink);background:var(--card);
  border:1px solid var(--rule);border-radius:999px;padding:6px 13px;width:150px;
}
.sform input[type=search]:focus{border-color:var(--go);outline:none}
.sform button{
  font-family:var(--f-body);font-weight:500;font-size:12.5px;background:none;border:0;color:var(--go);cursor:pointer;padding:4px 0;
}
.sform button:hover{color:var(--ink)}

/* ------------------------------------------------------------------ now */
.now{
  background:var(--card);border:1px solid var(--rule);border-left:4px solid var(--go);
  border-radius:4px;margin:var(--s5) 0 var(--s4);padding:var(--s5);
  display:grid;grid-template-columns:64px 1fr;gap:var(--s4);align-items:start;
}
.now__play{
  width:64px;height:64px;border-radius:999px;background:var(--go);color:#fff;
  display:flex;align-items:center;justify-content:center;flex:none;
}
.now__play svg{width:26px;height:26px;margin-left:3px}
.now__k{
  font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--go);
  margin:0 0 var(--s2);
}
.now__title{
  font-family:var(--f-disp);font-weight:700;font-size:clamp(1.6rem,4.2vw,2.5rem);line-height:1.1;
  letter-spacing:-.03em;margin:0 0 var(--s2);text-wrap:balance;
}
.now__stand{color:var(--ink-2);margin:0 0 var(--s3);max-width:54ch}
.now__meta{
  display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;
  font-family:var(--f-mono);font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--dim);
}
.now__plate{margin-top:var(--s3);border-radius:3px;overflow:hidden;max-width:480px}

/* ---------------------------------------------------------------- queue */
.qhead{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s3);margin:var(--s5) 0 var(--s2)}
.qhead h2{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;margin:0;color:var(--ink)}
.qhead__n{margin-left:auto;font-family:var(--f-mono);font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--dim)}

.queue{background:var(--card);border:1px solid var(--rule);border-radius:4px;overflow:hidden}
.q{
  display:grid;grid-template-columns:44px 1fr 92px 68px;gap:var(--s3);align-items:center;
  padding:var(--s3) var(--s4);border-top:1px solid var(--rule-2);
}
.q:first-child{border-top:0}
.q:hover{background:var(--go-soft)}
.q__pos{
  font-family:var(--f-mono);font-size:13px;color:var(--dim);text-align:right;
}
.q__title{font-family:var(--f-disp);font-weight:600;font-size:1.08rem;line-height:1.26;margin:0 0 5px}
.q__sub{font-family:var(--f-mono);font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--dim)}
/* the bar is the read length, drawn to the same scale on every row */
.q__len{display:flex;flex-direction:column;gap:5px}
.q__bar{height:5px;background:var(--sunk);border-radius:999px;overflow:hidden}
.q__bar i{display:block;height:100%;background:var(--go-2);border-radius:999px}
.q__mins{font-family:var(--f-mono);font-size:11px;color:var(--dim)}
.q__at{font-family:var(--f-mono);font-size:12px;color:var(--ink-2);text-align:right}
.q__at span{display:block;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin-top:3px}

/* ------------------------------------------------------------ pagination */
.pagination{padding:var(--s5) 0}
.pagination .nav-links{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-family:var(--f-body);font-weight:500;font-size:13.5px}
.pagination .page-numbers{display:inline-block;padding:8px 15px;border:1px solid var(--rule);border-radius:999px;color:var(--ink-2);background:var(--card)}
.pagination .page-numbers:hover{border-color:var(--go);color:var(--go)}
.pagination .page-numbers.current{background:var(--go);border-color:var(--go);color:#fff}
.pagination .page-numbers.dots{border-color:transparent;background:none}

/* ---------------------------------------------------------------- entry */
.entry{padding:var(--s5) 0}
.entry__head{max-width:74ch;margin:0 auto var(--s4)}
.entry__k{
  font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--go);
  margin:0 0 var(--s2);display:flex;flex-wrap:wrap;gap:14px;align-items:center;
}
.entry__k span{color:var(--dim)}
.entry__title{
  font-family:var(--f-disp);font-weight:700;font-size:clamp(1.8rem,4.6vw,2.9rem);line-height:1.08;
  letter-spacing:-.032em;margin:0 0 var(--s2);text-wrap:balance;
}
.entry__stand{font-size:1.1rem;line-height:1.58;color:var(--ink-2);margin:0}
.entry__plate{max-width:860px;margin:0 auto var(--s5);border-radius:4px;overflow:hidden}

/* reading progress — the playhead, honestly measured */
.progress{position:fixed;left:0;right:0;top:0;height:3px;background:transparent;z-index:60}
.progress i{display:block;height:100%;width:0;background:var(--go);transition:width .12s linear}

.prose{
  max-width:var(--measure);margin:0 auto;font-size:1.08rem;line-height:1.75;
  background:var(--card);border:1px solid var(--rule);border-radius:4px;padding:var(--s5);
}
.prose p{margin:0 0 1.25em}
.prose>*:first-child{margin-top:0}
.prose h1,.prose h2,.prose h3,.prose h4{font-family:var(--f-disp);color:var(--ink);line-height:1.2;letter-spacing:-.026em}
.prose h2{font-weight:700;font-size:1.46rem;margin:2em 0 .5em}
.prose h3{font-weight:600;font-size:1.18rem;margin:1.8em 0 .45em}
.prose h4{font-weight:600;font-size:1.04rem;margin:1.6em 0 .4em}
.prose a{color:var(--go);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--rule)}
.prose a:hover{text-decoration-color:var(--go)}
.prose ul,.prose ol{margin:0 0 1.25em;padding-left:1.3em}
.prose li{margin:0 0 .45em}
.prose li::marker{color:var(--go-2)}
.prose blockquote{margin:1.6em 0;padding:var(--s2) var(--s3);border-left:3px solid var(--go-2);background:var(--go-soft);border-radius:0 3px 3px 0}
.prose blockquote p:last-child{margin-bottom:0}
.prose img{margin:1.6em 0;border-radius:3px}
.prose figure{margin:1.6em 0}
.prose figcaption{font-family:var(--f-mono);font-size:11px;letter-spacing:.05em;color:var(--dim);margin-top:8px;text-transform:uppercase}
.prose code{font-family:var(--f-mono);font-size:.88em;background:var(--sunk);padding:1px 5px;border-radius:3px}
.prose pre{background:var(--ink);color:#DCE0E6;padding:18px;border-radius:4px;overflow:auto;font-family:var(--f-mono);font-size:.85rem;line-height:1.55}
.prose pre code{background:none;padding:0;color:inherit}
.prose table{width:100%;border-collapse:collapse;margin:1.6em 0;font-size:.95rem}
.prose th,.prose td{border:1px solid var(--rule);padding:9px 11px;text-align:left}
.prose th{background:var(--sunk);font-weight:500;font-size:.86rem}
.prose hr{border:0;border-top:1px solid var(--rule);margin:2.2em 0}

.filing{max-width:var(--measure);margin:var(--s4) auto 0;display:flex;flex-wrap:wrap;gap:9px;align-items:center}
.filing__l{font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.pill{
  font-family:var(--f-body);font-weight:500;font-size:12.5px;color:var(--ink-2);
  background:var(--card);border:1px solid var(--rule);border-radius:999px;padding:5px 13px;
}
.pill:hover{border-color:var(--go);color:var(--go)}

.upnext-one{max-width:var(--measure);margin:var(--s5) auto 0}

/* ------------------------------------------------------------ page/misc */
.pagehead{padding:var(--s5) 0 var(--s2)}
.pagehead__t{font-family:var(--f-disp);font-weight:700;font-size:clamp(1.7rem,4vw,2.4rem);line-height:1.1;letter-spacing:-.032em;margin:0}
.pagehead__d{color:var(--ink-2);margin:var(--s2) 0 0;max-width:60ch}
.notice{background:var(--card);border:1px solid var(--rule);border-radius:4px;padding:var(--s5);text-align:center;margin:var(--s3) 0 var(--s6)}
.notice h2{font-family:var(--f-disp);font-weight:700;font-size:1.4rem;letter-spacing:-.028em;margin:0 0 10px}
.notice p{color:var(--ink-2);margin:0 auto var(--s3);max-width:48ch}
.notice .sform{justify-content:center}

/* --------------------------------------------------------------- widget */
.widget{background:var(--card);border:1px solid var(--rule);border-radius:4px;padding:var(--s3);margin:0 0 var(--s3)}
.widget-title{font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;margin:0 0 10px;color:var(--ink)}
.widget ul{list-style:none;margin:0;padding:0;font-size:.95rem}
.widget li{padding:5px 0;border-bottom:1px solid var(--rule-2)}
.widget li:last-child{border-bottom:0}

/* --------------------------------------------------------------- footer */
.foot{background:var(--ink);color:#A9AEB8;margin-top:var(--s6)}
.foot__in{max-width:var(--wrap);margin:0 auto;padding:var(--s6) 22px var(--s4);display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:var(--s5)}
.foot h3{font-family:var(--f-mono);font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:#7C818C;margin:0 0 var(--s3)}
.foot p{margin:0 0 1em;font-size:.97rem;line-height:1.6;color:#9DA3AD;max-width:44ch}
.foot ul{list-style:none;margin:0;padding:0}
.foot li{margin:0 0 8px}
.foot a{color:#D9DDE3;font-family:var(--f-body);font-weight:400;font-size:13.5px}
.foot a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.foot__brand{display:flex;align-items:center;gap:11px;margin-bottom:var(--s3)}
.foot__brand svg{width:26px;height:26px;flex:none;color:var(--go-2)}
.foot__name{font-family:var(--f-disp);font-weight:700;font-size:21px;letter-spacing:-.028em;color:#fff}
.colophon{
  border-top:1px solid rgba(255,255,255,.12);max-width:var(--wrap);margin:0 auto;padding:var(--s3) 22px var(--s4);
  font-family:var(--f-mono);font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:#7C818C;
  display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);
}

/* ------------------------------------------------------------ responsive */
@media (max-width:820px){
  .foot__in{grid-template-columns:1fr 1fr}
  .foot__about{grid-column:1/-1}
  .q{grid-template-columns:34px 1fr 78px}
  .q__at{display:none}
}
@media (max-width:600px){
  .mast__in{flex-wrap:wrap;gap:var(--s2) var(--s3);padding:var(--s3) 18px}
  .mast__toggle{
    display:block;margin-left:auto;background:var(--card);border:1px solid var(--rule);border-radius:999px;color:var(--ink-2);
    font-family:var(--f-body);font-weight:500;font-size:12.5px;padding:6px 13px;cursor:pointer;
  }
  .mast__nav{flex-basis:100%;margin-left:0;display:none}
  .mast__nav.is-open{display:block}
  .mast__nav ul{flex-direction:column;gap:2px}
  .mast__nav a{padding:9px 12px}
  .wrap{padding:0 18px}
  .transport__in{padding:9px 18px;gap:8px var(--s3)}
  .transport__search{margin-left:0;flex-basis:100%}
  .sform input[type=search]{width:100%}
  .now{grid-template-columns:1fr;padding:var(--s4);gap:var(--s3)}
  .now__play{width:48px;height:48px}
  .now__play svg{width:20px;height:20px}
  .q{grid-template-columns:28px 1fr;gap:var(--s2) var(--s3);padding:var(--s3)}
  .q__len{grid-column:2}
  .prose{padding:var(--s4) var(--s3)}
  .foot__in{grid-template-columns:1fr;padding:var(--s5) 18px var(--s3)}
  .colophon{padding:var(--s3) 18px var(--s3)}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  .progress i{transition:none}
}
@media print{
  .mast,.transport,.foot,.pagination,.progress,.colophon{display:none}
  body{background:#fff}
}