/*
Theme Name: Hold The Line
Theme URI: https://holdtheline.world
Author: Hold The Line
Description: Purpose-built theme for holdtheline.world. Monochrome, split down the middle, built around the mark: humanity rendered solid, the machine rendered as outline, and a single hairline running down the centre of every page — the line itself.
Version: 2.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: holdtheline
Tags: dark, one-column, custom-menu, full-width-template
*/

/* ===========================================================
   1. TOKENS

   The mark is pure black and white, split vertically. So the
   palette is monochrome and the two sides are told apart by
   TREATMENT, not hue — exactly as the logo does it:

     humanity  = solid fill       (the carved silhouette)
     machine   = outline / stroke (the drawn circuitry)

   There is one accent, used almost nowhere: signal red, for
   the moment the line breaks. Spending it that rarely is what
   makes it land.
   =========================================================== */
:root{
  --ink:#f2f2ef;
  --ink-dim:#9a9aa2;
  --ink-faint:#5c5c66;
  --bg:#0a0a0c;
  --panel:#111114;
  --panel-2:#17171c;
  --line:#26262e;
  --line-bright:#3a3a46;
  --signal:#e2483d;

  /* bridge for the duel plugin — it reads these names */
  --hum:#ffffff;
  --hum-deep:#d8d8d2;
  --mach:#8f8f9c;
  --win:#ffffff;
  --muted:#9a9aa2;
  --radius:2px;
  --shadow:none;
  --wrap:660px;
  --wrap-wide:880px;
}

/* ===========================================================
   2. BASE
   =========================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  position:relative;
}

/* THE SIGNATURE — the line.
   One hairline down the exact centre of every page, behind
   everything: the split in the mark, extended to the whole site.
   It fades out top and bottom so it reads as a division rather
   than a border. */
body::before{
  content:"";
  position:fixed;
  top:0;bottom:0;left:50%;
  width:1px;
  transform:translateX(-.5px);
  background:linear-gradient(180deg,
    transparent 0,
    var(--line) 8%,
    var(--line-bright) 45%,
    var(--line) 92%,
    transparent 100%);
  pointer-events:none;
  z-index:0;
}
/* the two grounds either side — barely there, but the eye registers
   the page as split before it reads a word */
body::after{
  content:"";
  position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    linear-gradient(90deg, rgba(255,255,255,.030) 0%, transparent 42%),
    linear-gradient(270deg, rgba(255,255,255,.014) 0%, transparent 42%);
}

img{max-width:100%;height:auto;display:block}
a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line-bright);transition:border-color .15s}
a:hover{border-bottom-color:var(--ink)}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

.skip-link{position:absolute;left:-9999px;top:0;z-index:999;background:var(--ink);color:var(--bg);padding:12px 18px;font-weight:700}
.skip-link:focus{left:0}

.htl-shell{position:relative;z-index:1;flex:1 0 auto;width:100%}
.htl-wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 18px}
.htl-wrap.wide{max-width:var(--wrap-wide)}

/* ===========================================================
   3. TYPE
   Archivo carries the mark's squared industrial capitals.
   Inter reads. JetBrains Mono handles anything numeric — the
   scoreboard is a data display, not decoration.
   =========================================================== */
h1,h2,h3,h4{
  font-family:"Archivo",system-ui,sans-serif;
  font-weight:800;
  letter-spacing:-.005em;
  line-height:1.18;
  margin:0 0 .5em;
}
h1{font-size:clamp(27px,4.6vw,38px)}
h2{
  font-size:13px;font-weight:800;letter-spacing:.24em;text-transform:uppercase;
  color:var(--ink-dim);margin:2.6em 0 1.1em;
  display:flex;align-items:center;gap:14px;
}
/* the rule running off each heading is structural: it marks where
   one front ends and the next begins */
h2::after{content:"";flex:1;height:1px;background:var(--line)}
h3{font-size:17px;font-weight:700;margin-top:1.7em}
p{margin:0 0 1.15em}
strong,b{color:var(--ink);font-weight:600}
code,kbd{
  font-family:"JetBrains Mono",ui-monospace,monospace;font-size:.88em;
  background:var(--panel);border:1px solid var(--line);padding:2px 7px;
}
blockquote{margin:1.6em 0;padding:14px 20px;border-left:2px solid var(--ink);background:var(--panel);color:var(--ink)}
hr{border:none;border-top:1px solid var(--line);margin:2.6em 0}

/* ===========================================================
   4. HEADER — the mark, centred and large

   The logo is the hero. It carries the whole idea in one image
   (two faces, one split), so it gets the room to be read rather
   than being shrunk into a corner as a favicon-with-ambitions.
   =========================================================== */
.htl-header{
  position:relative;z-index:2;
  border-bottom:1px solid var(--line);
  background:rgba(10,10,12,.9);
  backdrop-filter:blur(10px);
  text-align:center;
}
.htl-header-inner{
  max-width:var(--wrap-wide);margin:0 auto;
  padding:38px 18px 0;
  display:flex;flex-direction:column;align-items:center;gap:0;
}

.htl-brand{display:block;border:none;line-height:0;margin:0 auto}
.htl-brand:hover{border:none}

/* the full lockup, inverted to white and sized to actually be seen */
.htl-logo{
  width:clamp(230px, 34vw, 330px);
  height:auto;
  filter:invert(1);
  opacity:.97;
  margin:0 auto;
  transition:opacity .2s;
}
.htl-brand:hover .htl-logo{opacity:1}
.custom-logo{width:clamp(230px,34vw,330px);height:auto;margin:0 auto}

.htl-tagline{
  font-family:"JetBrains Mono",monospace;font-size:10.5px;letter-spacing:.28em;
  color:var(--ink-faint);text-transform:uppercase;line-height:1;
  margin:14px 0 0;
}

/* nav sits under the mark, centred, on its own hairline */
.htl-nav{margin-top:26px;width:100%;border-top:1px solid var(--line)}
.htl-nav ul{
  list-style:none;display:flex;gap:0;margin:0;padding:0;
  align-items:center;justify-content:center;flex-wrap:wrap;
}
.htl-nav a{
  display:block;padding:15px 22px;border:none;
  font-family:"Archivo",sans-serif;font-size:11.5px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ink-faint);
  transition:color .15s,box-shadow .15s;
}
.htl-nav a:hover{color:var(--ink)}
.htl-nav .current-menu-item > a{color:var(--ink);box-shadow:inset 0 -2px 0 var(--ink)}

.htl-nav-toggle{
  display:none;background:transparent;border:1px solid var(--line);
  color:var(--ink);padding:10px 16px;margin-top:20px;cursor:pointer;
  font-family:"Archivo",sans-serif;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
}
@media (max-width:680px){
  .htl-header-inner{padding-top:30px}
  .htl-logo,.custom-logo{width:min(72vw,270px)}
  .htl-nav-toggle{display:block}
  .htl-nav{display:none;margin-top:18px;border-top:1px solid var(--line)}
  .htl-nav.open{display:block}
  .htl-nav ul{flex-direction:column;align-items:stretch}
  .htl-nav a{padding:14px 0;border-bottom:1px solid var(--line)}
  .htl-nav li:last-child a{border-bottom:none}
}

/* ===========================================================
   5. FRONT PAGE
   =========================================================== */
.htl-front{padding:28px 0 70px}
.htl-duel-mount > *:first-child{margin-top:0}

.htl-awaiting{margin-top:26px;border:1px solid var(--line);padding:44px 26px;text-align:center;background:var(--panel)}
.htl-awaiting img{width:74px;margin:0 auto 18px;filter:invert(1);opacity:.5}
.htl-awaiting h2{justify-content:center;margin:0 0 8px}
.htl-awaiting h2::after{display:none}
.htl-awaiting p{color:var(--ink-dim);margin:0;font-size:14px}
.htl-awaiting code{display:inline-block;margin-top:14px}

/* ===========================================================
   6. PAGES
   =========================================================== */
.htl-page{padding:46px 0 70px}
.htl-page-head{text-align:center;margin-bottom:40px}
.htl-page-head .htl-emblem-lg{width:60px;margin:0 auto 20px;filter:invert(1);opacity:.85}
.htl-eyebrow{
  font-family:"JetBrains Mono",monospace;font-size:10.5px;letter-spacing:.3em;
  text-transform:uppercase;color:var(--ink-faint);margin-bottom:12px;
}
.htl-page-head h1{margin-bottom:10px}
.htl-page-head .lede{color:var(--ink-dim);font-size:17px;max-width:54ch;margin:0 auto}

.htl-prose{font-size:16.5px}
.htl-prose > *:first-child{margin-top:0}
.htl-prose ul,.htl-prose ol{padding-left:20px;margin:0 0 1.2em}
.htl-prose li{margin-bottom:.5em}
.htl-prose li::marker{color:var(--ink-faint)}

/* ===========================================================
   7. EXPLAINER COMPONENTS
   =========================================================== */
.htl-rules{border-top:1px solid var(--line);margin:26px 0 10px}
.htl-rule{border-bottom:1px solid var(--line);padding:20px 4px;display:flex;gap:20px;align-items:flex-start}
.htl-rule .n{
  font-family:"JetBrains Mono",monospace;font-weight:800;font-size:12px;
  color:var(--ink-faint);flex:0 0 auto;width:26px;padding-top:4px;letter-spacing:.08em;
}
.htl-rule h3{margin:0 0 5px;font-size:16px}
.htl-rule p{margin:0;color:var(--ink-dim);font-size:14.5px;line-height:1.6}

.htl-types{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin:26px 0}
.htl-type{background:var(--panel);padding:20px 18px}
.htl-type .k{
  font-family:"Archivo",sans-serif;font-weight:800;font-size:10.5px;letter-spacing:.2em;
  color:var(--ink);display:block;margin-bottom:9px;
}
.htl-type p{margin:0;font-size:13.5px;color:var(--ink-dim);line-height:1.6}

/* solid against outline — the logo's own logic, applied to prose */
.htl-versus{display:grid;grid-template-columns:1fr 1px 1fr;border:1px solid var(--line);margin:30px 0;background:var(--panel)}
.htl-versus .col{padding:24px 22px}
.htl-versus .rule{background:var(--line-bright)}
.htl-versus .col h3{font-family:"Archivo",sans-serif;font-size:11px;letter-spacing:.22em;margin:0 0 12px;text-transform:uppercase}
.htl-versus .col.hum h3{color:var(--ink)}
.htl-versus .col.mach h3{color:transparent;-webkit-text-stroke:.6px var(--ink-dim)}
.htl-versus .col p{margin:0;font-size:14px;color:var(--ink-dim);line-height:1.65}

.htl-callout{border:1px solid var(--line);border-left:2px solid var(--signal);background:var(--panel);padding:20px 22px;margin:30px 0}
.htl-callout h3{margin:0 0 8px;font-size:15px;font-family:"Archivo",sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--signal)}
.htl-callout p{margin:0;font-size:14.5px;color:var(--ink-dim)}

.htl-cta{text-align:center;margin:46px 0 0}
.htl-btn{
  display:inline-block;font-family:"Archivo",sans-serif;font-weight:800;
  font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--bg);background:var(--ink);padding:17px 34px;border:1px solid var(--ink);
  transition:background .15s,color .15s;
}
.htl-btn:hover{background:transparent;color:var(--ink)}

/* ===========================================================
   8. POSTS
   =========================================================== */
.htl-post-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.htl-post-item{border-bottom:1px solid var(--line);padding:20px 2px}
.htl-post-item h2{margin:6px 0 0;font-size:19px;letter-spacing:0;text-transform:none;color:var(--ink)}
.htl-post-item h2::after{display:none}
.htl-post-item h2 a{border:none}
.htl-post-item h2 a:hover{border-bottom:1px solid var(--ink)}
.htl-post-meta{font-family:"JetBrains Mono",monospace;font-size:10.5px;letter-spacing:.16em;color:var(--ink-faint);text-transform:uppercase}
.htl-post-item p{margin:8px 0 0;color:var(--ink-dim);font-size:14.5px}
.htl-pagination{display:flex;gap:8px;justify-content:center;margin-top:26px}
.htl-pagination .page-numbers{padding:9px 14px;border:1px solid var(--line);color:var(--ink-dim);font-family:"JetBrains Mono",monospace;font-size:13px}
.htl-pagination .current{color:var(--ink);border-color:var(--ink)}

/* ===========================================================
   9. FOOTER
   =========================================================== */
.htl-footer{
  position:relative;z-index:1;flex-shrink:0;
  border-top:1px solid var(--line);margin-top:50px;padding:34px 18px 46px;text-align:center;
}
.htl-footer .htl-emblem-sm{width:30px;margin:0 auto 16px;filter:invert(1);opacity:.4}
.htl-footer-line{
  font-family:"Archivo",sans-serif;font-size:10.5px;font-weight:800;letter-spacing:.26em;
  text-transform:uppercase;color:var(--ink-dim);margin-bottom:16px;
}
.htl-footer-line .m{color:transparent;-webkit-text-stroke:.5px var(--ink-dim)}
.htl-footer-nav ul{list-style:none;display:flex;flex-wrap:wrap;gap:22px;justify-content:center;margin:0 0 18px;padding:0}
.htl-footer-nav a{color:var(--ink-faint);font-size:12.5px;border:none}
.htl-footer-nav a:hover{color:var(--ink)}
.htl-copy{color:var(--ink-faint);font-size:11.5px;line-height:1.7;margin:0;font-family:"JetBrains Mono",monospace;letter-spacing:.06em}

/* ===========================================================
   10. THE DUEL — theme overrides on the plugin
   Recasting the plugin's two sides into the mark's language:
   humanity solid, the machine hollow.
   =========================================================== */
.htl-board,.htl-duel,.htl-tomorrow{border-radius:0!important;box-shadow:none!important}
.htl-board{background:var(--panel)!important;border-color:var(--line)!important}
.htl-duel{background:var(--panel)!important;border-color:var(--line)!important}

.htl-side.humanity{background:rgba(255,255,255,.035)!important}
.htl-side.machine{background:transparent!important}

.htl-side .who{font-family:"Archivo",sans-serif!important;letter-spacing:.24em!important}
.htl-side.humanity .who{color:var(--ink)!important}
.htl-side.machine .who{color:transparent!important;-webkit-text-stroke:.5px var(--ink-dim)}

/* humanity filled, the machine outlined. no colour needed. */
.htl-side.humanity .num{color:var(--ink)!important;text-shadow:none!important}
.htl-side.machine .num{color:transparent!important;-webkit-text-stroke:1.5px var(--ink-dim);text-shadow:none!important}

.htl-divider{border-color:var(--line-bright)!important}
.htl-ticker{font-size:11.5px!important;letter-spacing:.08em}
.htl-ticker--machine{color:var(--ink-dim)!important}
.htl-ticker--human{color:var(--ink)!important}

.htl-duel-type{
  border-radius:0!important;background:transparent!important;
  border-color:var(--line-bright)!important;color:var(--ink-dim)!important;
  font-family:"Archivo",sans-serif!important;
}
.htl-q{font-family:"Archivo",sans-serif!important;font-weight:800!important}

.htl-entry input{border-radius:0!important}
.htl-entry input:focus{border-color:var(--ink)!important}
.htl-go{
  border-radius:0!important;background:var(--ink)!important;color:var(--bg)!important;
  box-shadow:none!important;font-family:"Archivo",sans-serif!important;letter-spacing:.16em!important;
}
.htl-go:hover{filter:none!important;background:#fff!important}

.htl-row{border-radius:0!important}
.htl-row.crowd{border-color:var(--line-bright)!important}
.htl-row.crowd .dot{background:var(--ink)!important}
.htl-row.mach{border-color:var(--line)!important}
.htl-row.mach .dot{background:transparent!important;box-shadow:inset 0 0 0 1.5px var(--ink-dim)}
.htl-row.truth{border-color:var(--ink)!important;background:rgba(255,255,255,.05)!important}
.htl-row.truth .dot{background:var(--ink)!important}

.htl-banner{border-radius:0!important}
.htl-banner .b-title{font-family:"Archivo",sans-serif!important}
.htl-banner.hum-win{background:rgba(255,255,255,.06)!important;border:1px solid var(--ink)!important}
.htl-banner.hum-win .b-title{color:var(--ink)!important}
/* the line breaking is the only moment that gets colour */
.htl-banner.mach-win{background:transparent!important;border:1px solid var(--signal)!important}
.htl-banner.mach-win .b-title{color:var(--signal)!important}

.htl-share-box{border-radius:0!important}

.htl-tomorrow{border-style:solid!important;border-color:var(--line)!important}
.htl-tomorrow .t-lbl{color:var(--ink-dim)!important}
.htl-hist-row{border-radius:0!important;background:var(--panel)!important}
.htl-hist-row.hum{border-left:2px solid var(--ink)!important}
.htl-hist-row.mach{border-left:2px solid var(--ink-faint)!important}

/* ===========================================================
   11. WP CORE
   =========================================================== */
.alignleft{float:left;margin:0 1.4em 1em 0}
.alignright{float:right;margin:0 0 1em 1.4em}
.aligncenter{margin-left:auto;margin-right:auto}
.wp-caption-text{font-size:13px;color:var(--ink-faint);text-align:center}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px)}

/* ===========================================================
   12. RESPONSIVE + MOTION
   =========================================================== */
@media (max-width:620px){
  .htl-types{grid-template-columns:1fr}
  .htl-versus{grid-template-columns:1fr}
  .htl-versus .rule{height:1px}
  .htl-rule{gap:14px}
  body::before{opacity:.5}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* ===========================================================
   13. OUTLINE SAFETY

   The machine is drawn hollow with -webkit-text-stroke. If a
   browser lacks it, transparent fill would leave the text
   invisible — so the hollow treatment is applied only where
   support is confirmed. Everything degrades to dimmed solid.
   =========================================================== */
.htl-side.machine .who,
.htl-side.machine .num,
.htl-versus .col.mach h3,
.htl-footer-line .m{
  color:var(--ink-dim);
  -webkit-text-stroke:0;
}
@supports (-webkit-text-stroke: 1px black){
  .htl-side.machine .who{color:transparent;-webkit-text-stroke:.7px var(--ink-dim)}
  .htl-side.machine .num{color:transparent;-webkit-text-stroke:1.6px var(--ink-dim)}
  .htl-versus .col.mach h3{color:transparent;-webkit-text-stroke:.7px var(--ink-dim)}
  .htl-footer-line .m{color:transparent;-webkit-text-stroke:.6px var(--ink-dim)}
}

/* reminders — same solid/monochrome language as everything else */
.htl-remind{border-radius:0!important;background:var(--panel)!important;border-color:var(--line)!important}
.htl-remind-title{font-family:"Archivo",sans-serif!important}
.htl-remind-row input{border-radius:0!important}
.htl-remind-go{
  border-radius:0!important;background:var(--ink)!important;color:var(--bg)!important;
  font-family:"Archivo",sans-serif!important;letter-spacing:.16em!important;
}
.htl-remind-done{border-radius:0!important;border-color:var(--ink)!important;background:rgba(255,255,255,.06)!important}
.htl-remind-note.good{color:var(--ink)!important}

/* today's live figures — humanity solid, machine hollow, as everywhere */
.htl-today{border-color:var(--line)!important}
.htl-today-side.hum .val{color:var(--ink)!important}
.htl-today-side.mach .val{color:transparent!important;-webkit-text-stroke:1px var(--ink-dim)}
@supports not (-webkit-text-stroke: 1px black){
  .htl-today-side.mach .val{color:var(--ink-dim)!important}
}
.htl-today.leading-human .htl-today-mid{color:var(--ink)!important}
.htl-today.leading-machine .htl-today-mid{color:var(--signal)!important}

/* today's turnout */
.htl-turnout{border-color:var(--line)!important}
.htl-turnout-num{color:var(--ink)!important}
.htl-turnout-lbl{color:var(--ink-faint)!important}

/* personal record — monochrome, square, same language as the rest */
.htl-record{border-radius:0!important;background:var(--panel)!important;border-color:var(--line)!important}
.htl-record--at-risk{border-color:var(--signal)!important}
.htl-record-num{color:var(--ink)!important}
.htl-record--broken .htl-record-num{color:var(--ink-faint)!important}
.htl-record-warn{color:var(--signal)!important}
.htl-record-stats{border-color:var(--line)!important}
.htl-record-stats b{color:var(--ink)!important}

/* archive — monochrome, square, solid vs hollow */
.htl-archive-head,.htl-arch-item,.htl-arch-you{border-radius:0!important}
.htl-archive-head,.htl-arch-item{background:var(--panel)!important;border-color:var(--line)!important}
.htl-archive-score .hum{color:var(--ink)!important}
.htl-archive-score .mach{color:transparent!important;-webkit-text-stroke:1.2px var(--ink-dim)}
@supports not (-webkit-text-stroke: 1px black){.htl-archive-score .mach{color:var(--ink-dim)!important}}
.htl-arch-item.hum{border-left-color:var(--ink)!important}
.htl-arch-item.mach{border-left-color:var(--ink-faint)!important}
.htl-arch-win.hum{color:var(--ink)!important}
.htl-arch-win.mach{color:var(--signal)!important}
.htl-arch-q{font-family:"Archivo",sans-serif!important}
.htl-arch-grid,.htl-arch-grid .cell{border-color:var(--line)!important}
.htl-arch-grid .cell{background:var(--panel-2)!important}
.htl-arch-grid .cell.hum .v{color:var(--ink)!important}
.htl-arch-grid .cell.mach .v{color:var(--ink-dim)!important}
.htl-arch-grid .cell.truth .v{color:var(--ink)!important}
.htl-arch-you.beat{border-color:var(--ink)!important}
.htl-arch-you.beat .e{color:var(--ink)!important}

/* share + recruit — square, monochrome */
.htl-btn-img,.htl-btn-copy,.htl-recruit,.htl-recruit-btn{border-radius:0!important}
.htl-btn-img{background:var(--ink)!important;color:var(--bg)!important;font-family:"Archivo",sans-serif!important}
.htl-btn-copy{border-color:var(--line)!important;color:var(--ink)!important;font-family:"Archivo",sans-serif!important}
.htl-recruit{background:var(--panel)!important;border-color:var(--line)!important;border-left-color:var(--signal)!important}
.htl-recruit-title{color:var(--signal)!important;font-family:"Archivo",sans-serif!important}
.htl-recruit-btn{background:var(--ink)!important;color:var(--bg)!important;font-family:"Archivo",sans-serif!important}

/* Share buttons: one primary, one secondary. Setting these together in one
   place, last in the file, so no earlier rule can leave white text sitting
   on a white background again. */
.htl-btn-img{
  background:var(--ink)!important;
  color:var(--bg)!important;
  border:1px solid var(--ink)!important;
  border-radius:0!important;
  font-family:"Archivo",sans-serif!important;
  letter-spacing:.16em!important;
}
.htl-btn-copy{
  background:transparent!important;
  color:var(--ink)!important;
  border:1px solid var(--line-bright)!important;
  border-radius:0!important;
  font-family:"Archivo",sans-serif!important;
  letter-spacing:.16em!important;
}
.htl-btn-copy:hover{border-color:var(--ink)!important;background:rgba(255,255,255,.05)!important}