/*
Theme Name: Big Trouble Labs
Theme URI: https://bigtroublelabs.com
Author: Big Trouble Labs
Description: A single-page theme for Big Trouble Labs. Warm black ground, one orange accent, monospace telemetry, restrained motion. No page builder, no framework, no third-party requests. Homepage copy is edited in content/home.json.
Version: 1.0.20
Requires at least: 6.0
Requires PHP: 7.4
License: Proprietary
Text Domain: btl
*/

:root{
  color-scheme:dark;

  /* ── colour ─────────────────────────────────────── */
  --ground:#16120F;
  --ground-deep:#0D0A08;
  --field:#1E1916;
  --field-hi:#272019;
  --accent:#FD8312;
  --accent-hi:#FFA04A;
  --accent-dim:#B06214;
  --accent-wash:rgba(253,131,18,0.10);
  --line:rgba(253,131,18,0.16);
  --line-soft:rgba(242,235,228,0.09);
  --ink:#F2EBE4;
  --ink-dim:#A2968B;
  --ink-faint:#8C8077;
  --support-1:#E8C547;
  --ok:#7FA8A0;
  --bad:#C4705A;

  /* ── type ───────────────────────────────────────── */
  /* To self-host Inter later, add the @font-face rules from the setup sheet
     and put "Inter" at the front of this stack. Nothing else needs changing. */
  --font-display:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;

  /* ── space ──────────────────────────────────────── */
  --panel-max:64rem;
  --radius:2px;

  /* ── motion ─────────────────────────────────────── */
  --dur-fast:240ms;
  --dur:520ms;
  --dur-slow:900ms;
  --stagger:80ms;
  --ease:cubic-bezier(0.2,0.7,0.3,1);
  --travel:12px;
}

*{box-sizing:border-box}

body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:var(--font-display);
  font-size:1rem;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

:focus-visible{outline:2px solid var(--accent-hi);outline-offset:2px;border-radius:var(--radius)}

.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--accent);color:var(--ground);
  padding:.75rem 1.25rem;font-weight:600;text-decoration:none}
.skip:focus{left:1rem;top:1rem}

/* ═══ FIXED CHROME ══════════════════════════════════ */

#progress{position:fixed;top:0;left:0;z-index:80;height:2px;width:0%;
  background:var(--accent);transition:width var(--dur-fast) linear}

#rail{position:fixed;right:1.5rem;top:50%;z-index:60;transform:translateY(-50%);
  display:flex;flex-direction:column;align-items:flex-end;gap:.75rem}
.rail-btn{appearance:none;background:none;border:0;padding:.35rem 0 .35rem .75rem;
  cursor:pointer;position:relative;line-height:0;display:block}
.rail-mark{display:block;height:1px;width:14px;background:var(--accent-dim);
  transition:width var(--dur-fast) var(--ease),background-color var(--dur-fast) var(--ease)}
.rail-btn[aria-current="true"] .rail-mark{width:24px;background:var(--accent)}
.rail-btn:hover .rail-mark{background:var(--accent-hi)}
.rail-label{position:absolute;right:calc(100% + .6rem);top:50%;transform:translateY(-50%);
  font-family:var(--font-mono);font-size:.6875rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);white-space:nowrap;opacity:0;
  transition:opacity var(--dur-fast) var(--ease);pointer-events:none}
.rail-btn:hover .rail-label,.rail-btn:focus-visible .rail-label{opacity:1}
@media(max-width:900px){#rail{display:none}}

/* ═══ PRIMARY NAVIGATION ════════════════════════════ */
/* Rendered only when a published page exists at one of the watched slugs.
   See btl_nav_slugs() in functions.php. */

.sitenav{position:sticky;top:0;z-index:75;
  border-bottom:1px solid var(--line);background:var(--ground-deep)}
.sitenav ul{max-width:var(--panel-max);margin:0 auto;padding:0 1.5rem;list-style:none;
  display:flex;flex-wrap:wrap;justify-content:center;gap:0 1.75rem}
@media(min-width:760px){.sitenav ul{padding:0 2.5rem}}
.sitenav a{display:inline-block;padding:1.05rem 0;font-family:var(--font-mono);font-size:.6875rem;
  letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:var(--ink-dim);
  border-bottom:2px solid transparent;margin-bottom:-1px;
  transition:color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease)}
.sitenav a:hover{color:var(--ink)}
.sitenav a[aria-current="page"]{color:var(--accent);border-bottom-color:var(--accent)}

/* Anchor jumps must clear the pinned bar. Only applied when the bar exists. */
.has-nav .stage,.has-nav .doc{scroll-margin-top:3.5rem}

/* ═══ MASTHEAD ══════════════════════════════════════ */

.masthead{padding:3rem 1.5rem 0;display:flex;justify-content:center;
  background:radial-gradient(ellipse 90% 70% at 50% 40%,var(--ground) 0%,var(--ground-deep) 100%)}
.masthead img{height:72px;width:auto;display:block}
@media(min-width:760px){.masthead{padding:3.5rem 2.5rem 0}}
@media(max-width:760px){.masthead img{height:56px}}

/* ═══ LAYOUT ════════════════════════════════════════ */

.stage{position:relative;padding:3rem 1.5rem;
  background:radial-gradient(ellipse 90% 70% at 50% 40%,var(--ground) 0%,var(--ground-deep) 100%)}
.stage + .stage{border-top:1px solid var(--line-soft)}
#s1{padding:1.5rem 1.5rem 3.27rem}
@media(min-width:760px){.stage{padding:4.75rem 2.5rem}#s1{padding:2.21rem 2.5rem 5.43rem}}

.panel{width:100%;max-width:var(--panel-max);margin:0 auto;position:relative}
.bracketed{padding:2.5rem}
.br{position:absolute;width:18px;height:18px;opacity:.5;transform:scale(.4);
  transition:transform var(--dur) var(--ease)}
.br-tl{top:0;left:0;border-top:1px solid var(--accent);border-left:1px solid var(--accent);transform-origin:top left}
.br-tr{top:0;right:0;border-top:1px solid var(--accent);border-right:1px solid var(--accent);transform-origin:top right}
.br-br{bottom:0;right:0;border-bottom:1px solid var(--accent);border-right:1px solid var(--accent);transform-origin:bottom right}
.br-bl{bottom:0;left:0;border-bottom:1px solid var(--accent);border-left:1px solid var(--accent);transform-origin:bottom left}
.in-view .br{transform:scale(1)}
.in-view .br-tr{transition-delay:var(--stagger)}
.in-view .br-br{transition-delay:calc(var(--stagger)*2)}
.in-view .br-bl{transition-delay:calc(var(--stagger)*3)}

/* === Accent-rule panel treatment (alternates with .bracketed on the SME page) === */
.panel.accent-rule{border-left:2px solid var(--accent);padding-left:1.75rem}
.panel.accent-rule .standfirst{font-size:clamp(1.3rem,2.3vw,1.6rem);color:var(--ink)}

.cta-line{margin-top:2.25rem}

/* === Same-page cross-reference line (SME page situation disambiguator) === */
.test-line{font-family:var(--font-mono);font-size:.8125rem;line-height:1.7;
  letter-spacing:.01em;color:var(--accent);margin:1.35rem 0 0}
.test-line a{color:var(--accent);text-decoration:underline}

/* ═══ TYPE ══════════════════════════════════════════ */

.eyebrow{font-family:var(--font-mono);font-size:.75rem;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:var(--accent);margin:0 0 1.25rem}
.display{font-size:clamp(2.5rem,4.26vw,2.94rem);font-weight:600;letter-spacing:-.02em;
  line-height:1.03;margin:0;text-wrap:balance}
.headline{font-size:clamp(1.7rem,3.4vw,2.5rem);font-weight:600;letter-spacing:-.015em;
  line-height:1.15;margin:0;text-wrap:balance}
.standfirst{font-size:clamp(1.15rem,1.8vw,1.4rem);line-height:1.5;color:var(--ink-dim);margin:1.35rem 0 0}
.body{color:var(--ink-dim);margin:1.5rem 0 0;font-size:1.0625rem;line-height:1.7}
.body strong{color:var(--ink);font-weight:500}
.meta{font-family:var(--font-mono);font-size:.75rem;letter-spacing:.04em;color:var(--ink-faint);
  margin:2.25rem 0 0}
.meta a{color:var(--accent);text-decoration:none}
.meta a:hover{text-decoration:underline}

/* ═══ BUTTONS ═══════════════════════════════════════ */

.btn{display:inline-block;margin-top:2.25rem;padding:.85rem 1.6rem;background:var(--accent);
  color:var(--ground);font-weight:600;font-size:.9375rem;text-decoration:none;
  border:1px solid var(--accent);border-radius:var(--radius);cursor:pointer;
  font-family:var(--font-display);
  transition:background-color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease)}
.btn:hover{background:var(--accent-hi);border-color:var(--accent-hi)}

/* ═══ CARDS ═════════════════════════════════════════ */

.cards{margin:2.75rem 0 0;display:grid;gap:1rem;grid-template-columns:repeat(2,1fr)}
.card{background:var(--field);border:1px solid var(--line-soft);border-radius:var(--radius);
  padding:1.75rem 1.5rem;
  transition:background-color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease)}
.card{position:relative}
.card:hover{background:var(--field-hi);border-color:var(--accent-dim)}
.card.is-linked{cursor:pointer}
.card h3 a{color:inherit;text-decoration:none}
.card.is-linked:hover h3 a{color:var(--accent)}
/* The whole card is the target, but the link is still named by the heading. */
.cardlink::after{content:"";position:absolute;inset:0;border-radius:var(--radius)}
.card.is-linked:focus-within{background:var(--field-hi);border-color:var(--accent)}
.cardlink:focus-visible{outline:none}
.card.is-linked:focus-within{outline:2px solid var(--accent-hi);outline-offset:2px}
.card h3{margin:0 0 .75rem;font-size:1.125rem;font-weight:600;letter-spacing:-.01em}
.card p{margin:0;color:var(--ink-dim);font-size:.9375rem;line-height:1.6}
@media(max-width:860px){.cards{grid-template-columns:1fr}}

/* ═══ ANCHOR STRIP ══════════════════════════════════ */

.jump{margin:2.75rem 0 0;display:flex;flex-wrap:wrap;gap:.75rem}
.jump a{font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;
  text-decoration:none;color:var(--ink-dim);border:1px solid var(--line-soft);
  border-radius:var(--radius);padding:.5rem .85rem;
  transition:color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease)}
.jump a:hover{color:var(--accent);border-color:var(--accent-dim)}

/* ═══ PULL STATEMENT ════════════════════════════════ */

.pull{margin:2.75rem 0 0;padding:0 0 0 1.5rem;border-left:2px solid var(--accent)}
.pull p{margin:0;font-size:clamp(1.35rem,2.6vw,1.85rem);font-weight:600;line-height:1.25;
  letter-spacing:-.012em;color:var(--ink);text-wrap:balance}
.pull p span{display:block}
.pull footer{margin:1rem 0 0;font-family:var(--font-mono);font-size:.75rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-faint)}

/* ═══ DOSSIER CARDS ═════════════════════════════════ */

.bench{margin:2.75rem 0 0;display:grid;gap:1rem;grid-template-columns:repeat(2,1fr)}
@media(max-width:760px){.bench{grid-template-columns:1fr}}
.dossier{position:relative;background:var(--field);border:1px solid var(--line-soft);
  border-radius:var(--radius);padding:1.75rem 1.5rem;
  transition:background-color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease)}
.dossier:hover{background:var(--field-hi);border-color:var(--accent-dim)}
.dossier .idx{font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.14em;
  color:var(--accent-dim);display:block;margin:0 0 .9rem}
.dossier h3{margin:0;font-size:1.125rem;font-weight:600;letter-spacing:-.01em}
.dossier .role{font-family:var(--font-mono);font-size:.75rem;letter-spacing:.06em;
  color:var(--ink-faint);margin:.35rem 0 0}
.dossier dl{margin:1.35rem 0 0;padding:1.35rem 0 0;border-top:1px solid var(--line-soft);
  display:grid;grid-template-columns:6.5rem 1fr;gap:.7rem 1rem}
.dossier dt{font-family:var(--font-mono);font-size:.625rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-faint);padding-top:.18em}
.dossier dd{margin:0;color:var(--ink-dim);font-size:.9375rem;line-height:1.5}
@media(max-width:420px){.dossier dl{grid-template-columns:1fr;gap:.25rem}
  .dossier dd{margin-bottom:.6rem}}

/* ═══ PRODUCT LIST ══════════════════════════════════ */

.prods{list-style:none;padding:0;margin:2.75rem 0 0;display:flex;flex-direction:column;gap:0}
.prods li{padding:2rem 0;border-top:1px solid var(--line-soft)}
.prods li:last-child{border-bottom:1px solid var(--line-soft)}
.prodhead{display:flex;flex-wrap:wrap;align-items:baseline;gap:.75rem 1rem}
.prods h3{margin:0;font-size:1.3rem;font-weight:600;letter-spacing:-.012em}
.status{font-family:var(--font-mono);font-size:.625rem;letter-spacing:.14em;text-transform:uppercase;
  border:1px solid var(--line-soft);border-radius:var(--radius);padding:.2em .6em;color:var(--ink-faint)}
.status.on{color:var(--ok);border-color:var(--ok)}
.status.beta{color:var(--accent);border-color:var(--accent-dim)}
.prods p{margin:1rem 0 0;color:var(--ink-dim);font-size:1.0625rem;line-height:1.7}
.prods .out{display:inline-block;margin:1rem 0 0;font-family:var(--font-mono);font-size:.75rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--accent);text-decoration:none}
.prods .out:hover{text-decoration:underline}

/* ═══ DIAGRAM ═══════════════════════════════════════ */

.figwrap{margin:2.75rem 0 0;overflow-x:auto}
.figwrap svg{display:block;min-width:560px;width:100%;height:auto}
.dnode{fill:var(--field);stroke:var(--line-soft);stroke-width:1}
.dnode-key{fill:var(--field-hi);stroke:var(--accent);stroke-width:1}
.dbound{fill:none;stroke:var(--accent-dim);stroke-width:1;stroke-dasharray:4 4}
.dtext{fill:var(--ink);font-family:var(--font-mono);font-size:11px;letter-spacing:.08em}
.dtext-dim{fill:var(--ink-faint);font-family:var(--font-mono);font-size:10px;letter-spacing:.1em}
.dl{stroke:var(--accent-dim);stroke-width:1;fill:none}
.dl-no{stroke:var(--bad);stroke-width:1;fill:none;stroke-dasharray:3 3}
.figcap{font-family:var(--font-mono);font-size:.75rem;letter-spacing:.04em;color:var(--ink-faint);
  margin:1.25rem 0 0}

/* ═══ RULED LIST ════════════════════════════════════ */

.ruled{list-style:none;padding:0;margin:2.75rem 0 0;display:flex;flex-direction:column;gap:1.5rem}
.ruled li{display:grid;grid-template-columns:20px 1fr;gap:1.25rem;align-items:baseline;
  color:var(--ink-dim);font-size:1.0625rem;line-height:1.7}
.ruled li::before{content:"";display:block;height:1px;background:var(--accent);position:relative;top:.72em}

/* ═══ STEPS ═════════════════════════════════════════ */

.steps{list-style:none;padding:0;margin:2.75rem 0 0;display:flex;flex-direction:column;gap:1.6rem;
  counter-reset:step}
.steps li{display:grid;grid-template-columns:2.25rem 1fr;gap:1.25rem;color:var(--ink-dim);
  counter-increment:step;font-size:1.0625rem;line-height:1.7}
.steps li::before{content:counter(step,decimal-leading-zero);font-family:var(--font-mono);
  font-size:.75rem;letter-spacing:.1em;color:var(--accent-dim);padding-top:.35em}

/* ═══ FORM ══════════════════════════════════════════ */

.form{margin:2.75rem 0 0;display:grid;grid-template-columns:repeat(3,1fr);
  gap:1.25rem 1.5rem;align-items:start}
.field-full{grid-column:1/-1}
@media(max-width:760px){.form{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column;gap:.5rem}
.field label{font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-dim)}
.field .opt{text-transform:none;letter-spacing:0}
.field input,.field textarea{background:var(--field);border:1px solid var(--line-soft);
  border-radius:var(--radius);color:var(--ink);font-family:var(--font-display);font-size:1rem;
  padding:.8rem .9rem;width:100%;
  transition:border-color var(--dur-fast) var(--ease),background-color var(--dur-fast) var(--ease)}
.field input:hover,.field textarea:hover{border-color:var(--accent-dim)}
.field input:focus,.field textarea:focus{border-color:var(--accent);background:var(--field-hi);
  outline:2px solid var(--accent-hi);outline-offset:1px}
.field textarea{min-height:8rem;resize:vertical;line-height:1.55}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.consent{font-size:.8125rem;color:var(--ink-faint);line-height:1.55;margin:0;grid-column:1/-1}
.consent a{color:var(--accent)}

.notice{margin:2.5rem 0 0;padding:1rem 1.25rem;border-radius:var(--radius);
  border:1px solid var(--line-soft);font-size:.9375rem;line-height:1.6}
.notice-ok{border-color:var(--ok);color:var(--ok)}
.notice-bad{border-color:var(--bad);color:var(--bad)}
.notice a{color:var(--accent)}

/* ═══ LEGAL PAGE ════════════════════════════════════ */

.doc{max-width:var(--panel-max);margin:0 auto;padding:3.5rem 1.5rem 5rem}
@media(min-width:760px){.doc{padding:5rem 2.5rem 7rem}}
.backlink{font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.16em;
  text-transform:uppercase;text-decoration:none;display:inline-block;margin-bottom:2.5rem;
  color:var(--accent)}
.doc h1{font-size:clamp(2.1rem,4.4vw,3.2rem);font-weight:600;letter-spacing:-.02em;
  line-height:1.06;margin:0;text-wrap:balance}
.lede{font-size:clamp(1.1rem,1.7vw,1.3rem);line-height:1.55;color:var(--ink-dim);margin:1.35rem 0 0}
.stamp{font-family:var(--font-mono);font-size:.75rem;letter-spacing:.04em;color:var(--ink-faint);
  margin:1.75rem 0 0;padding-bottom:2.5rem;border-bottom:1px solid var(--line-soft)}
.doc h2{font-size:clamp(1.3rem,2.2vw,1.7rem);font-weight:600;letter-spacing:-.012em;
  line-height:1.2;margin:3.5rem 0 0;text-wrap:balance}
.doc h2 + p,.doc h2 + ul,.doc h2 + .tblwrap{margin-top:1.25rem}
.doc p{margin:1.25rem 0 0;color:var(--ink-dim);font-size:1.0625rem;line-height:1.7}
.doc p strong{color:var(--ink);font-weight:500}
.doc ul{margin:1.25rem 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:1rem}
.doc li{display:grid;grid-template-columns:20px 1fr;gap:1.25rem;align-items:baseline;
  color:var(--ink-dim);font-size:1.0625rem;line-height:1.7}
.doc li::before{content:"";display:block;height:1px;background:var(--accent);position:relative;top:.78em}
.doc li strong{color:var(--ink);font-weight:500}
.tbl{width:100%;border-collapse:collapse;margin:1.25rem 0 0;
  border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)}
.tbl th,.tbl td{text-align:left;vertical-align:top;padding:1rem 1.25rem 1rem 0;
  border-bottom:1px solid var(--line-soft);color:var(--ink-dim);font-size:1rem;line-height:1.6}
.tbl th{font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-faint);font-weight:500}
.tbl tr:last-child td{border-bottom:0}
.tblwrap{overflow-x:auto}

/* ═══ FOOTER ════════════════════════════════════════ */

.foot{background:var(--ground-deep);border-top:1px solid var(--line);padding:3.5rem 1.5rem}
@media(min-width:760px){.foot{padding:4rem 2.5rem}}
.foot-inner{max-width:var(--panel-max);margin:0 auto;display:flex;flex-direction:column;gap:1.5rem;
  font-family:var(--font-mono);font-size:.75rem;line-height:1.9;letter-spacing:.03em;
  color:var(--ink-faint)}
.foot-contact{display:flex;flex-wrap:wrap;gap:.5rem 2rem;color:var(--ink-dim)}
.foot-legal span{display:block}
.foot a{color:var(--accent);text-decoration:none}
.foot a:hover{text-decoration:underline}
.wordmark{font-family:var(--font-display);font-size:1rem;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink)}

/* ═══ REVEAL ════════════════════════════════════════ */

.js .rv{opacity:0;transform:translateY(var(--travel));
  transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease)}
.js .in-view .rv{opacity:1;transform:none}
.js .in-view .rv-1{transition-delay:var(--stagger)}
.js .in-view .rv-2{transition-delay:calc(var(--stagger)*2)}
.js .in-view .rv-3{transition-delay:calc(var(--stagger)*3)}
.js .in-view .rv-4{transition-delay:calc(var(--stagger)*4)}
.js .in-view .rv-5{transition-delay:calc(var(--stagger)*5)}
.js .in-view .rv-6{transition-delay:calc(var(--stagger)*6)}

@media(prefers-reduced-motion:reduce){
  .js .rv,.js .in-view .rv{opacity:1;transform:none;transition:none;transition-delay:0s}
  .br,.in-view .br{transform:scale(1);transition:none}
  #progress{transition:none}
  html{scroll-behavior:auto}
}
html{scroll-behavior:smooth}