/* ==========================================================================
   Creator hub stylesheet — one file, no build step, no dependencies.
   Change the values in :root to re-skin the whole site.
   ========================================================================== */

:root {
  /* --- K-Tech Labs brand colors --- */
  --accent: #e96819;          /* orange: buttons, links, highlights */
  --accent-alt: #147fea;      /* blue: gradients, secondary highlights */
  --bg: #090c10;              /* page background */
  --bg-elev: #161b22;         /* cards, raised surfaces */
  --text: #f5f7fa;            /* main text */
  --text-dim: #c8cdd3;        /* secondary text */

  /* Supporting shades derived from the palette above */
  --bg-elev-2: #1d232c;       /* hover state for cards */
  --border: #2a313c;
  --text-faint: #8b929c;      /* labels, fine print */
  --accent-hover: #f27a2e;    /* primary button hover */

  --radius: 14px;
  --radius-sm: 8px;
  --maxw: 1120px;
  --shadow: 0 10px 40px rgba(0, 0, 0, 0.45);

  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Code", "Roboto Mono",
    Menlo, Consolas, monospace;
}

/* --------------------------------------------------------------------------
   Reset & base
   -------------------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 90px; /* keeps anchors clear of the sticky nav */
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img,
svg,
iframe {
  max-width: 100%;
  display: block;
}

a {
  color: var(--accent);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

h1,
h2,
h3,
h4 {
  line-height: 1.2;
  margin: 0 0 0.6em;
  letter-spacing: -0.02em;
  font-weight: 700;
}

h1 { font-size: clamp(2.1rem, 5.5vw, 3.6rem); }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.3rem); }
h3 { font-size: 1.2rem; }

p { margin: 0 0 1.1em; }

ul { margin: 0 0 1.1em; padding-left: 1.2em; }
li { margin-bottom: 0.4em; }

.container {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 24px;
}

section {
  padding: 84px 0;
  border-top: 1px solid var(--border);
}

section:first-of-type { border-top: none; }

.section-label {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent-alt);
  margin-bottom: 12px;
}

.lead {
  font-size: 1.12rem;
  color: var(--text-dim);
  max-width: 62ch;
}

.text-dim { color: var(--text-dim); }

/* Hides text visually but keeps it readable by screen readers
   (used on the newsletter form's email label). */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 24px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 0.97rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease,
    border-color 0.15s ease;
  text-decoration: none;
}

.btn:hover {
  transform: translateY(-2px);
  text-decoration: none;
}

.btn-primary {
  background: var(--accent);
  color: var(--bg);
}

.btn-primary:hover { background: var(--accent-hover); }

.btn-outline {
  background: transparent;
  color: var(--text);
  border-color: var(--border);
}

.btn-outline:hover {
  border-color: var(--accent);
  background: var(--bg-elev);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 30px;
}

/* --------------------------------------------------------------------------
   Header / nav
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(9, 12, 16, 0.88);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
  gap: 20px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--text);
  letter-spacing: -0.01em;
}

.brand:hover { text-decoration: none; }

.brand-logo {
  width: 40px;
  height: 40px;
  border-radius: 9px;
  border: 1px solid var(--border);
  object-fit: cover;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 26px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links a {
  color: var(--text-dim);
  font-size: 0.94rem;
  font-weight: 500;
}

.nav-links a:hover {
  color: var(--text);
  text-decoration: none;
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero {
  padding: 96px 0 80px;
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;
  top: -320px;
  left: 50%;
  transform: translateX(-50%);
  width: 900px;
  height: 640px;
  background: radial-gradient(
    circle,
    rgba(233, 104, 25, 0.14),
    transparent 65%
  );
  pointer-events: none;
}

.hero-inner {
  position: relative;
  max-width: 800px;
}

/* Hero with the logo beside the text */
.hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 56px;
  align-items: center;
}

.hero-logo {
  width: 340px;
  height: auto;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: 0 0 70px rgba(233, 104, 25, 0.16),
    0 0 110px rgba(20, 127, 234, 0.1);
}

.hero-logo-sm { width: 260px; }

.hero h1 span {
  color: var(--accent);
}

.hero .lead { font-size: 1.22rem; }

.stat-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  margin-top: 56px;
  padding-top: 32px;
  border-top: 1px solid var(--border);
}

.stat-num {
  font-size: 1.9rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  display: block;
}

.stat-label {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-faint);
}

/* --------------------------------------------------------------------------
   Cards & grids
   -------------------------------------------------------------------------- */

.grid {
  display: grid;
  gap: 24px;
  margin-top: 40px;
}

.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }

.card {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 26px;
  transition: border-color 0.18s ease, background 0.18s ease,
    transform 0.18s ease;
}

.card:hover {
  border-color: #353d49;
  background: var(--bg-elev-2);
  transform: translateY(-3px);
}

.card h3 { margin-bottom: 8px; }

.card p:last-child { margin-bottom: 0; }

.card-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent);
  border: 1px solid rgba(233, 104, 25, 0.35);
  border-radius: 999px;
  padding: 3px 10px;
  margin-bottom: 14px;
}

/* Video cards: 16:9 responsive embed wrapper */
.video-card {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.video-embed {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  background: #000;
}

.video-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.video-meta {
  padding: 18px 20px 22px;
}

.video-meta h3 {
  font-size: 1.02rem;
  margin-bottom: 4px;
}

.video-meta p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--text-dim);
}

/* --------------------------------------------------------------------------
   Gear / specs table
   -------------------------------------------------------------------------- */

.table-wrap {
  margin-top: 36px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow-x: auto;
  background: var(--bg-elev);
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
  min-width: 520px;
}

th,
td {
  text-align: left;
  padding: 15px 20px;
  border-bottom: 1px solid var(--border);
}

th {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-faint);
  font-weight: 600;
  background: rgba(255, 255, 255, 0.02);
}

tbody tr:last-child td { border-bottom: none; }

tbody tr:hover { background: rgba(255, 255, 255, 0.02); }

td:first-child {
  color: var(--text-dim);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Email capture
   -------------------------------------------------------------------------- */

.signup {
  background: linear-gradient(
    140deg,
    rgba(233, 104, 25, 0.09),
    rgba(20, 127, 234, 0.08)
  );
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 48px 40px;
  text-align: center;
}

.signup h2 { margin-bottom: 10px; }

.signup .lead { margin: 0 auto 28px; }

.signup-form {
  display: flex;
  gap: 12px;
  max-width: 460px;
  margin: 0 auto;
  flex-wrap: wrap;
}

.signup-form input[type="email"] {
  flex: 1 1 220px;
  padding: 13px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 0.97rem;
}

.signup-form input[type="email"]:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: transparent;
}

.form-note {
  font-size: 0.84rem;
  color: var(--text-faint);
  margin: 18px 0 0;
}

/* --------------------------------------------------------------------------
   Media kit specifics
   -------------------------------------------------------------------------- */

.kit-hero {
  padding: 72px 0 56px;
}

.rate-card td:last-child {
  font-family: var(--font-mono);
  color: var(--accent);
  white-space: nowrap;
}

.callout {
  border-left: 3px solid var(--accent);
  background: var(--bg-elev);
  padding: 20px 24px;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  margin: 32px 0;
}

.callout p:last-child { margin-bottom: 0; }

.checklist {
  list-style: none;
  padding: 0;
  margin-top: 24px;
}

.checklist li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 12px;
  color: var(--text-dim);
}

.checklist li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--accent);
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   Series banner and episode cards (Computers 101)
   -------------------------------------------------------------------------- */

.series-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px 32px;
  margin-top: 32px;
  padding: 26px 28px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: linear-gradient(
    140deg,
    rgba(20, 127, 234, 0.12),
    rgba(233, 104, 25, 0.08)
  );
}

.series-banner h3 { margin-bottom: 6px; }
.series-banner p { margin: 0; max-width: 60ch; }
.series-banner .section-label { margin-bottom: 8px; }

.ep-card { display: flex; flex-direction: column; }
.ep-card p { margin-bottom: 14px; }

.ep-status {
  margin: auto 0 0;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-faint);
}

.ep-status a { color: var(--accent); }

/* --------------------------------------------------------------------------
   Deals sheet (deals.html)
   -------------------------------------------------------------------------- */

.deal-updated {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--text-faint);
  margin: 18px 0 0;
}

.brand-filter {
  padding-bottom: 32px;
  margin-bottom: 40px;
  border-bottom: 1px solid var(--border);
}

.brand-filter-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-faint);
  margin: 0 0 14px;
}

.brand-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.brand-chip {
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-dim);
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 9px 18px;
  cursor: pointer;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}

.brand-chip:hover {
  color: var(--text);
  border-color: var(--accent-alt);
}

.brand-chip.is-active {
  color: #ffffff;
  background: var(--accent-alt);
  border-color: var(--accent-alt);
}

.brand-chip:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.deal-empty {
  color: var(--text-dim);
  text-align: center;
  padding: 48px 0;
  margin: 0;
}

.deal-section {
  font-size: clamp(1.35rem, 3vw, 1.7rem);
  margin: 56px 0 0;
}

.deal-section:first-child { margin-top: 0; }

.deal-grid { margin-top: 24px; }

.deal-card {
  display: flex;
  flex-direction: column;
}

.deal-img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  background: #ffffff;
  border-radius: var(--radius-sm);
  padding: 12px;
  margin-bottom: 18px;
}

.deal-img-empty { background: var(--bg-elev-2); }

.deal-brand {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent-alt);
  margin: 0 0 6px;
}

.deal-name {
  font-size: 1rem;
  line-height: 1.4;
  margin-bottom: 10px;
}

.deal-rating {
  font-size: 0.88rem;
  color: var(--text-dim);
  margin: 0 0 14px;
}

.deal-stars {
  color: var(--accent);
  font-weight: 700;
}

.deal-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin: auto 0 18px;
}

.deal-sale {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--text);
}

.deal-regular {
  color: var(--text-faint);
  text-decoration: line-through;
  font-size: 0.92rem;
}

.deal-save {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--accent);
  border: 1px solid rgba(233, 104, 25, 0.35);
  border-radius: 999px;
  padding: 2px 9px;
}

.deal-btn {
  justify-content: center;
  width: 100%;
}

.deal-note {
  margin-top: 48px;
  color: var(--text-faint);
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer {
  border-top: 1px solid var(--border);
  padding: 48px 0 60px;
  color: var(--text-faint);
  font-size: 0.9rem;
}

.footer-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 28px;
}

.footer-links {
  display: flex;
  gap: 22px;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}

.footer-links a { color: var(--text-dim); }

.disclosure {
  max-width: 70ch;
  margin: 0;
  font-size: 0.84rem;
  line-height: 1.6;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .hero-grid { grid-template-columns: 1fr; gap: 36px; }
  .hero-logo { order: -1; width: min(260px, 70%); }
  .hero-logo-sm { width: min(200px, 60%); }
}

@media (max-width: 700px) {
  body { font-size: 16px; }
  section { padding: 60px 0; }
  .hero { padding: 64px 0 56px; }
  .grid-3,
  .grid-2 { grid-template-columns: 1fr; }
  .stat-strip { gap: 28px; }
  .signup { padding: 36px 22px; }

  /* ----------------------------------------------------------------------
     Navigation on a phone.

     This used to be `.nav-links { display: none }` with a note saying the
     links remained in the footer. They do — at the bottom of a 7,500px
     homepage. Someone arriving on an inner page from a video description
     had no way to reach anything else without scrolling the whole page,
     which is a strange thing for a site whose job is sending people to the
     videos and the build guides.

     It is a scrollable strip rather than a hamburger menu because no
     JavaScript is involved: `deals.html` is rebuilt every Monday from a
     template in `tools/update_deals.py`, and `tools/make_offline_copy.py`
     strips every <script> out of the page it bakes. A JS menu would have to
     be kept correct in three places and would still be missing from the
     offline file. A stylesheet change is correct everywhere at once.
     ---------------------------------------------------------------------- */
  /* `.nav` and `.container` are the same element — `<div class="container
     nav">` — so making the strip a flex *item* meant fighting the header's
     own layout for a definite width, and losing: the strip stayed at its
     content width, widened the header, and scrolled the whole document
     sideways. Dropping the header out of flex flow on mobile sidesteps all
     of it. The strip is then an ordinary block-level element, fills the
     width it is given, and scrolls its own contents. */
  .nav {
    display: block;
    height: auto;
    padding: 10px 24px 0;
  }

  /* The header is sticky and now carries two rows, so every pixel of it is
     a pixel of article nobody can read. Trimmed to about 100px. */
  .brand { padding-bottom: 10px; font-size: 1rem; }
  .brand-logo { width: 32px; height: 32px; }

  /* At 88% opacity a two-row header let headings show through clearly
     enough to read, which looked like a mistake rather than an effect. */
  .site-header { background: rgba(9, 12, 16, 0.96); }

  .nav-links {
    display: flex;
    flex-wrap: nowrap;          /* one row that scrolls, not five that stack */
    gap: 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;      /* the strip is short; a bar would crowd it */
    border-top: 1px solid var(--border);
  }

  .nav-links::-webkit-scrollbar { display: none; }

  .nav-links a {
    display: block;
    padding: 13px 15px 13px 0;
    margin-right: 15px;
    white-space: nowrap;
    font-size: 0.95rem;
  }

  /* ----------------------------------------------------------------------
     Thumbs, not mice.
     ---------------------------------------------------------------------- */

  /* Footer links were 16px tall and 22px apart — accurate tapping required
     a stylus. */
  .footer-links { gap: 4px 18px; }
  .footer-links a { display: inline-block; padding: 11px 0; }

  /* A paragraph whose only content is a link is a card's call to action —
     "View parts list →" — and was a 17px-tall line of text. Matching the
     shape rather than a class, because these links carry no class. */
  .card p > a:only-child,
  .ep-status a { display: inline-block; padding: 8px 0; }

  /* Uppercase mono labels at 11px are legible on a monitor at arm's length
     and not on a phone. Nudged, not enlarged — they are still labels. */
  .section-label { font-size: 0.84rem; }
  .card-tag { font-size: 0.76rem; }
  .ep-status { font-size: 0.78rem; }
  .stat-label { font-size: 0.8rem; }
  th { font-size: 0.8rem; }

  /* The line of links at the foot of the media kit is navigation, not prose,
     so it gets tappable spacing. Links inside sentences are left alone —
     padding those would break the rhythm of the paragraph they sit in. */
  .kit-where a { display: inline-block; padding: 7px 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
  .btn:hover,
  .card:hover { transform: none; }
}

/* Where to find K-Tech Labs — the line at the foot of the media kit. */
.kit-where {
  margin-top: 28px;
  line-height: 2;
}

.kit-where a { color: var(--accent-alt); }
.kit-where a:hover { color: var(--accent); }