/* =========================================================
   PostClassical Security — shared stylesheet (Ion direction)
   Edit the variables below to retheme the whole site.
   ========================================================= */

:root {
  --ink: #EAF0F6;
  --surface: #FFFFFF;
  --border: #C3D2E0;
  --border-soft: #9FB4C8;
  --text: #0D1620;
  --muted: #3B4C5E;
  --muted-2: #4A5A6B;
  --dim: #748899;
  --accent: #0B5FA5;   /* technical blue — primary accent */
  --accent-2: #B23A22; /* rust — secondary/alert accent */

  --font-display: 'Space Grotesk', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  --wrap: 1100px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  background: var(--ink);
  color: var(--text);
  line-height: 1.5;
}
a { color: inherit; }
img, svg { display: block; max-width: 100%; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 28px; }

/* ---------- nav ---------- */
header.nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 26px 28px; border-bottom: 1px solid var(--border);
  position: relative; background: var(--ink);
}
.logo {
  font-family: var(--font-display); font-weight: 600; font-size: 19px; letter-spacing: .01em;
  text-decoration: none; color: var(--text);
}
.logo span { color: var(--accent); }
nav.links { display: flex; gap: 32px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em; color: var(--muted-2); }
nav.links a { text-decoration: none; }
nav.links a:hover, nav.links a.current { color: var(--text); }

/* ---------- mobile menu toggle (pure CSS, no JS -- same approach as the
   dropdown below, just :checked instead of :hover) ---------- */
.nav-toggle-checkbox { position: absolute; opacity: 0; pointer-events: none; }
.nav-toggle-label { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 6px; margin: -6px; }
.nav-toggle-label span { width: 22px; height: 2px; background: var(--text); display: block; transition: transform .15s, opacity .15s; }

/* ---------- Shifts nav dropdown ---------- */
.nav-dropdown { position: relative; }
.nav-dropdown > a { display: inline-flex; align-items: center; gap: 5px; }
.nav-dropdown > a::after { content: ''; width: 5px; height: 5px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg); margin-top: -3px; opacity: .7; }
.nav-dropdown-menu {
  display: none; position: absolute; top: 100%; left: 0; padding-top: 16px;
  min-width: 190px; z-index: 50;
}
.nav-dropdown-menu::before {
  content: ''; display: block; background: var(--surface); border: 1px solid var(--border-soft);
  border-radius: 4px; padding: 6px 0; position: absolute; inset: 16px 0 0 0;
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu { display: block; }
.nav-dropdown-menu a {
  display: block; padding: 10px 16px; font-size: 12px; white-space: nowrap; color: var(--muted-2);
  position: relative;
}
.nav-dropdown-menu a:hover, .nav-dropdown-menu a.current { background: var(--border); color: var(--text); }
.nav-dropdown-menu a:first-child { margin-top: 6px; }
.nav-dropdown-menu a:last-child { margin-bottom: 6px; }

/* This block comes AFTER the base Shifts-dropdown rules above on purpose --
   .nav-dropdown-menu's mobile override (display:block, position:static)
   has equal CSS specificity to the base display:none rule, so source
   order decides the winner regardless of the media query. Putting this
   block first (as an earlier version of this file did) meant the later,
   unconditional base rule silently won on mobile and the Shifts
   sub-links never appeared in the mobile menu at all -- confirmed and
   fixed by testing an actual tap interaction at a mobile viewport, not
   just reading the CSS. */
@media (max-width: 760px) {
  .nav-toggle-label { display: flex; }
  nav.links {
    display: none; flex-direction: column; gap: 0;
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--surface); border-bottom: 1px solid var(--border-soft);
    padding: 8px 0; z-index: 100;
  }
  .nav-toggle-checkbox:checked ~ nav.links { display: flex; }
  .nav-toggle-checkbox:checked ~ .nav-toggle-label span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle-checkbox:checked ~ .nav-toggle-label span:nth-child(2) { opacity: 0; }
  .nav-toggle-checkbox:checked ~ .nav-toggle-label span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  nav.links a { padding: 14px 28px; }
  nav.links a:hover, nav.links a.current { background: var(--border); }

  /* On mobile there's no hover, so the Shifts sub-links are just always
     expanded inline rather than needing a second tap target. */
  .nav-dropdown > a::after { display: none; }
  .nav-dropdown-menu {
    display: block; position: static; padding-top: 0; min-width: 0;
  }
  .nav-dropdown-menu::before { display: none; }
  .nav-dropdown-menu a { padding-left: 44px; font-size: 11px; color: var(--dim); }
}

/* ---------- eyebrow / labels ---------- */
.eyebrow {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent-2); margin-bottom: 22px; display: flex; align-items: center; gap: 10px;
}
.eyebrow::before { content: ''; width: 7px; height: 7px; background: var(--accent-2); display: inline-block; flex-shrink:0; }
.section-label {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--dim); margin-bottom: 14px;
}

/* ---------- headings ---------- */
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; letter-spacing: -.01em; }
h1 { font-size: 52px; line-height: 1.08; }
h2 { font-size: 30px; line-height: 1.2; }
h3 { font-size: 19px; }
p { color: var(--muted); }

/* ---------- buttons ---------- */
.btn-primary, .btn-ghost {
  display: inline-block; font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em;
  text-transform: uppercase; font-weight: 600; padding: 14px 26px; cursor: pointer; text-decoration: none;
  border-radius: 2px;
}
.btn-primary { background: var(--accent); color: var(--ink); border: none; }
.btn-ghost { background: transparent; color: var(--text); border: 1px solid var(--border-soft); }
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 34px; }

/* ---------- hero ---------- */
.hero { position: relative; padding: 96px 0 110px; overflow: hidden; border-bottom: 1px solid var(--border); }
.hero .wrap { position: relative; z-index: 2; }
.lattice-bg { position: absolute; inset: 0; opacity: .5; pointer-events: none; z-index: 1; }
.hero h1 { max-width: 780px; }
.hero h1 em { font-style: normal; color: var(--accent); }
.hero-sub { margin-top: 26px; font-size: 17px; line-height: 1.6; max-width: 520px; }
.page-hero { padding: 70px 0 60px; border-bottom: 1px solid var(--border); }
.page-hero h1 { font-size: 40px; max-width: 700px; }
.page-hero .hero-sub { max-width: 620px; }

/* ---------- meta strip ---------- */
.meta-strip { margin-top: 50px; display: flex; gap: 0; border-top: 1px solid var(--border); flex-wrap: wrap; }
.meta-strip div { flex: 1; min-width: 160px; padding: 18px 0; border-right: 1px solid var(--border); }
.meta-strip div:last-child { border-right: none; }
.meta-strip .m-k { font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); margin-bottom: 6px; }
.meta-strip .m-v { font-family: var(--font-display); font-size: 15px; font-weight: 600; }

/* ---------- vertical / card grid ---------- */
.section { padding: 80px 0; border-bottom: 1px solid var(--border); }
.section:last-of-type { border-bottom: none; }
.section h2 { max-width: 600px; margin-bottom: 50px; }
.v-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); }
.v-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); }
.v-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); }
.v-card { background: var(--ink); padding: 32px 26px; }
.v-card .v-num { font-family: var(--font-mono); font-size: 11px; color: var(--accent); margin-bottom: 20px; }
.v-card h3 { margin-bottom: 12px; }
.v-card p { font-size: 14px; line-height: 1.65; }
.v-card a.v-link { display:inline-block; margin-top:16px; font-family: var(--font-mono); font-size: 11px; letter-spacing:.05em; text-transform:uppercase; color: var(--accent); text-decoration:none; }
@media (max-width: 760px) { .v-grid, .v-grid-4, .v-grid-2 { grid-template-columns: 1fr; } }
@media (max-width: 980px) and (min-width: 761px) { .v-grid-4 { grid-template-columns: repeat(2, 1fr); } }

/* ---------- list rows (notes index, verticals-as-list) ---------- */
.row-list { display: flex; flex-direction: column; }
.row-item {
  display: grid; grid-template-columns: 130px 1fr; gap: 24px; padding: 26px 0;
  border-top: 1px solid var(--border); align-items: start; text-decoration: none; color: inherit;
}
.row-item:last-child { border-bottom: 1px solid var(--border); }
.row-item .row-meta { font-family: var(--font-mono); font-size: 11px; color: var(--dim); padding-top: 4px; }
.row-item h3 { margin-bottom: 8px; }
.row-item p { font-size: 14px; line-height: 1.6; max-width: 560px; }
@media (max-width: 760px) {
  .row-item { grid-template-columns: 1fr; gap: 6px; }
}

/* ---------- pricing / toolkit cards ---------- */
.tier-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); margin-top: 10px; }
.tier-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); margin-top: 10px; }
.tier-card { background: var(--ink); padding: 34px 28px; display: flex; flex-direction: column; }
.tier-card .tier-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); margin-bottom: 16px; }
.tier-card h3 { font-size: 21px; margin-bottom: 10px; }
.price { font-family: var(--font-display); font-size: 30px; font-weight: 600; margin: 12px 0 18px; }
.price small { font-family: var(--font-mono); font-size: 12px; color: var(--dim); font-weight: 400; }
.tier-card ul { list-style: none; margin: 0 0 26px; flex: 1; }
.tier-card ul li { font-size: 13px; color: var(--muted); padding: 8px 0; border-top: 1px solid var(--border); }
.tier-card ul li:first-child { border-top: none; }
@media (max-width: 760px) { .tier-grid, .tier-grid-4 { grid-template-columns: 1fr; } }
@media (max-width: 980px) and (min-width: 761px) { .tier-grid-4 { grid-template-columns: repeat(2, 1fr); } }

/* ---------- flexible product group (variable-length lists of Reports / Courses / Briefings per domain) ---------- */
.product-group { margin-top: 44px; }
.product-group:first-child { margin-top: 28px; }
.product-group-label {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--dim); margin-bottom: 16px; display: flex; align-items: center; gap: 10px;
}
.product-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1px;
  background: var(--border); border: 1px solid var(--border);
}
.product-card { background: var(--ink); padding: 30px 26px; display: flex; flex-direction: column; }
.product-card .p-badge {
  display: inline-flex; align-self: flex-start; font-family: var(--font-mono); font-size: 10px;
  letter-spacing: .06em; text-transform: uppercase; color: var(--accent); border: 1px solid var(--border-soft);
  padding: 3px 9px; border-radius: 2px; margin-bottom: 16px;
}
.product-card .p-badge.external { color: var(--accent-2); }
.product-card h3 { font-size: 19px; margin-bottom: 10px; }
.product-card p { font-size: 13px; color: var(--muted); line-height: 1.6; flex: 1; margin-bottom: 20px; }
.product-card .p-meta { font-family: var(--font-mono); font-size: 12px; color: var(--dim); margin-bottom: 16px; }
.product-card .price { font-size: 22px; margin: 8px 0 16px; }
@media (max-width: 620px) { .product-grid { grid-template-columns: 1fr; } }

/* ---------- article / prose ---------- */
.prose { max-width: 720px; }
.prose p { color: var(--text); font-size: 16px; line-height: 1.75; margin-bottom: 22px; }
.prose h2 { font-size: 24px; margin: 44px 0 18px; }
.prose h3 { font-size: 19px; margin: 32px 0 14px; }
.prose ul, .prose ol { color: var(--text); margin: 0 0 22px 20px; }
.prose li { margin-bottom: 8px; line-height: 1.6; }
.prose code { font-family: var(--font-mono); font-size: 13px; background: var(--surface); padding: 2px 6px; border-radius: 3px; }
.prose pre { font-family: var(--font-mono); font-size: 13px; background: var(--surface); border: 1px solid var(--border); padding: 18px; overflow-x: auto; margin-bottom: 22px; border-radius: 4px; }
.prose table { width: 100%; border-collapse: collapse; margin-bottom: 22px; font-size: 14px; }
.prose th { background: var(--accent); color: #fff; text-align: left; padding: 10px 14px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; }
.prose td { padding: 10px 14px; border-top: 1px solid var(--border); color: var(--text); vertical-align: top; }
.prose tr:last-child td { border-bottom: 1px solid var(--border); }

.article-meta { font-family: var(--font-mono); font-size: 11px; color: var(--dim); display: flex; gap: 18px; margin-bottom: 22px; flex-wrap: wrap; }

/* ---------- report gate (email-required, not paid — blocks the rest of a report) ---------- */
.report-fade { position: relative; max-height: 90px; overflow: hidden; margin-bottom: -1px; }
.report-fade::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 90px;
  background: linear-gradient(180deg, transparent, var(--ink));
}
.report-gate {
  border: 1px solid var(--border-soft); background: var(--surface);
  padding: 40px 32px; text-align: center; border-radius: 4px; max-width: 720px;
}
.report-gate .gate-icon { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-2); margin-bottom: 14px; }
.report-gate h3 { margin-bottom: 10px; }
.report-gate p { max-width: 460px; margin: 0 auto 24px; font-size: 14px; }
.report-gate form { display: flex; gap: 10px; flex-wrap: wrap; max-width: 420px; margin: 0 auto; justify-content: center; }
.report-gate input[type="email"] {
  flex: 1; min-width: 200px; background: var(--ink); border: 1px solid var(--border-soft); color: var(--text);
  padding: 12px 14px; font-family: var(--font-body); font-size: 14px; border-radius: 3px;
}
.report-gate .form-note { margin-top: 16px; }

/* ---------- inline badge (report/type indicator, usable inline anywhere) ---------- */
.badge {
  display: inline-block; font-family: var(--font-mono); font-size: 10px; text-transform: uppercase;
  letter-spacing: .06em; color: var(--accent); border: 1px solid var(--border-soft); padding: 3px 8px;
  border-radius: 2px; margin-left: 10px; vertical-align: middle;
}

/* ---------- subscribe callout (non-blocking, sits at the end of a note) ---------- */
.subscribe {
  margin-top: 56px; border-top: 1px solid var(--border); padding-top: 36px;
}
.subscribe .gate-icon { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-2); margin-bottom: 12px; }
.subscribe h3 { margin-bottom: 8px; }
.subscribe p { max-width: 480px; margin-bottom: 20px; font-size: 14px; }
.subscribe form { max-width: 440px; }
.subscribe .subscribe-domains {
  display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px;
}
.subscribe .domain-check {
  display: flex; align-items: center; gap: 10px; font-family: var(--font-mono);
  font-size: 12px; letter-spacing: .02em; color: var(--text); cursor: pointer;
}
.subscribe .domain-check input[type="checkbox"] {
  appearance: none; width: 16px; height: 16px; flex-shrink: 0;
  border: 1px solid var(--border-soft); background: var(--surface); border-radius: 3px;
  position: relative; cursor: pointer;
}
.subscribe .domain-check input[type="checkbox"]:checked {
  background: var(--accent); border-color: var(--accent);
}
.subscribe .domain-check input[type="checkbox"]:checked::after {
  content: ''; position: absolute; left: 5px; top: 2px; width: 4px; height: 8px;
  border: solid var(--ink); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.subscribe .email-row { display: flex; gap: 10px; flex-wrap: wrap; }
.subscribe input[type="email"] {
  flex: 1; min-width: 200px; background: var(--surface); border: 1px solid var(--border-soft); color: var(--text);
  padding: 12px 14px; font-family: var(--font-body); font-size: 14px; border-radius: 3px;
}

/* ---------- brief / two-col info block ---------- */
.brief-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 64px; align-items: start; }
.brief-list { display: flex; flex-direction: column; }
.brief-item { padding: 20px 0; border-top: 1px solid var(--border); display: flex; justify-content: space-between; gap: 20px; }
.brief-item:last-child { border-bottom: 1px solid var(--border); }
.brief-item .k { font-family: var(--font-mono); font-size: 12px; color: var(--dim); white-space: nowrap; }
.brief-item .v { font-size: 14px; text-align: right; max-width: 260px; color: var(--text); }
@media (max-width: 760px) { .brief-grid { grid-template-columns: 1fr; } }

/* ---------- forms ---------- */
.form-row { margin-bottom: 18px; }
.form-row label { display: block; font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); margin-bottom: 8px; }
.form-row input, .form-row textarea, .form-row select {
  width: 100%; background: var(--surface); border: 1px solid var(--border-soft); color: var(--text);
  padding: 12px 14px; font-family: var(--font-body); font-size: 14px; border-radius: 3px;
}
.form-row textarea { resize: vertical; min-height: 120px; }
.form-note { font-family: var(--font-mono); font-size: 11px; color: var(--dim); margin-top: 10px; }

/* ---------- footer ---------- */
footer.site-footer {
  padding: 40px 0; border-top: 1px solid var(--border); display: flex; justify-content: space-between;
  font-family: var(--font-mono); font-size: 11px; color: var(--dim); flex-wrap: wrap; gap: 10px;
}

/* ---------- utility ---------- */
.mt-0 { margin-top: 0; }
.center { text-align: center; }