/* ================================================================
   Deretti Cyber Labs — Shared Components
   Loads AFTER brand.css and site.css.
   --------------------------------------------------------------
   Defines the components named in the site cohesion brief that
   aren't already covered by brand.css / site.css. These are the
   single-source styles used by /, /research, /about, /contact
   AND /ir2 (where applicable). Per the brief: one accent only
   (--signal), no gradients/glow/neon, no shadows on cards.
   ================================================================ */

/* ============================================================
   Tokens — additive only. Existing tokens in brand.css remain
   authoritative. These extend the palette with semantic colors
   the brief calls for that didn't previously exist.
   ============================================================ */
:root {
  /* Semantic content-type tags (research archive vs active) */
  --tag-archive:  #8C95AB;   /* historical entries */
  --tag-active:   var(--signal); /* in-progress entries */
  /* Caution color for "this is not certification" callouts */
  --caution:      var(--warn);
  /* Layout */
  --content-max:  1180px;
  --measure:      62ch;
  --measure-lead: 56ch;
  --card-pad:     28px;
}

/* ============================================================
   Typography utilities (the .t-* set from the brief §2).
   These map to the existing brand.css typography rather than
   redefining it — they're handles you can attach to any element
   without changing the underlying scale.
   ============================================================ */
.t-display {
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 0.95;
  color: var(--d-text);
}
.t-h2 {
  font-family: var(--display);
  font-weight: 800;
  font-size: 38pt;
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--d-text);
}
.t-h3 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 16pt;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--d-text);
}
.t-body {
  font-family: var(--serif);
  font-size: 12pt;
  line-height: 1.6;
  color: var(--d-text);
  max-width: var(--measure);
}
.t-lede {
  font-family: var(--serif);
  font-size: 14pt;
  line-height: 1.5;
  color: var(--d-text-2);
  max-width: var(--measure-lead);
}
.t-eyebrow {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 9pt;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--d-muted);
}
.t-eyebrow--accent { color: var(--signal); }
.t-meta {
  font-family: var(--mono);
  font-size: 10pt;
  letter-spacing: 0.04em;
  color: var(--d-muted);
}
.t-meta--bright { color: var(--d-text-2); }
.t-tag {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 9pt;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--d-text);
}

/* ============================================================
   Hub wrap — the standard page container.
   Mirrors .home-wrap from /ir2 so all pages share the gutter.
   ============================================================ */
.hub-wrap {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 32px;
}

/* ============================================================
   Buttons (§4.5) — promoted from /ir2 inline styles so every
   page draws from the same definition.
   Primary = filled accent (small button only; never wider than
   ~160px), ghost = outlined.
   ============================================================ */
.btn-primary,
.btn-ghost {
  font-family: var(--mono);
  font-size: 9pt;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 13px 18px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: all 0.15s ease;
  border: 1px solid transparent;
  cursor: pointer;
}
.btn-primary {
  background: var(--signal);
  color: var(--navy);
  border-color: var(--signal);
}
.btn-primary:hover {
  background: transparent;
  color: var(--signal);
}
.btn-ghost {
  background: transparent;
  color: var(--d-text);
  border-color: var(--navy-line);
}
.btn-ghost:hover {
  border-color: var(--signal);
  color: var(--signal);
}

/* ============================================================
   Metadata strip (§4.6) — middot-separated mono row.
   Used under heroes and in card footers.
   ============================================================ */
.meta-strip {
  font-family: var(--mono);
  font-size: 10pt;
  letter-spacing: 0.04em;
  color: var(--d-muted);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 14px;
  padding: 16px 0 0;
}
.meta-strip span,
.meta-strip a {
  display: inline-flex;
  align-items: center;
}
.meta-strip a {
  color: var(--d-text-2);
  text-decoration: none;
  border-bottom: 1px solid var(--navy-line);
  transition: border-color 0.15s ease, color 0.15s ease;
}
.meta-strip a:hover { color: var(--signal); border-bottom-color: var(--signal); }
.meta-strip span + span::before,
.meta-strip a + a::before,
.meta-strip span + a::before,
.meta-strip a + span::before {
  content: "·";
  color: var(--d-muted);
  margin-right: 14px;
  display: inline-block;
}

/* ============================================================
   Numbered section header (§4.2) — promoted from /ir2 inline.
   eyebrow + h2 + lede, with a left number gutter.
   ============================================================ */
.sec-head {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 22px;
  align-items: baseline;
  padding: 80px 0 28px;
  border-top: 2px solid var(--d-text);
  margin-top: 64px;
}
.sec-head .num {
  font-family: var(--mono);
  font-size: 11pt;
  color: var(--signal);
  letter-spacing: 0.05em;
  padding-top: 14px;
}
.sec-head .body { padding-top: 8px; }
.sec-head .kicker {
  font-family: var(--display);
  font-size: 9pt;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--d-muted);
  font-weight: 600;
}
.sec-head h2 {
  font-size: 38pt;
  line-height: 0.98;
  letter-spacing: -0.025em;
  color: var(--d-text);
  font-weight: 800;
  margin: 12px 0 14px;
}
.sec-head .lede {
  font-family: var(--serif);
  font-size: 14pt;
  line-height: 1.5;
  color: var(--d-text-2);
  margin: 0;
  max-width: none;
}
.sec-head .body p { max-width: none; }

@media (max-width: 960px) {
  .sec-head {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 56px 0 22px;
  }
  .sec-head h2 { font-size: 32pt; }
  .sec-head .num { padding-top: 0; }
}

/* ============================================================
   Lab-note callout (§4.3) — single box style for is/is-not
   tiles, "how to read the numbers," disclaimers, citation
   notes. Replaces the ad-hoc bordered boxes scattered through
   /ir2 (now they share one definition).
   ============================================================ */
.callout {
  border: 1px solid var(--navy-line);
  background: rgba(255, 255, 255, 0.015);
  padding: 20px 24px;
  font-family: var(--serif);
  color: var(--d-text-2);
  font-size: 12pt;
  line-height: 1.6;
}
.callout p { margin: 0 0 0.6em; max-width: none; }
.callout p:last-child { margin-bottom: 0; }
.callout--caution { border-color: var(--warn); }
.callout--disclaimer { border-color: var(--d-muted); }
.callout__label {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 8.5pt;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--signal);
  margin: 0 0 8px;
  display: block;
}
.callout--caution .callout__label { color: var(--warn); }
.callout--disclaimer .callout__label { color: var(--d-muted); }

/* ============================================================
   Hairline card (§4.4) — transparent fill, 1px border, accent
   border on hover. No shadows, no gradients. Used for "Two
   streams" tiles on home and the Series grid on /ir2.
   ============================================================ */
.hl-card {
  border: 1px solid var(--navy-line);
  background: transparent;
  padding: var(--card-pad);
  transition: border-color 0.15s ease, background 0.15s ease;
  text-decoration: none;
  color: var(--d-text);
  display: block;
  position: relative;
}
.hl-card:hover {
  border-color: var(--signal);
  background: rgba(255, 255, 255, 0.015);
}
.hl-card__eyebrow {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 9pt;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--d-muted);
  margin: 0 0 12px;
}
.hl-card__eyebrow--flagship { color: var(--signal); }
.hl-card__title {
  font-family: var(--display);
  font-weight: 700;
  font-size: 22pt;
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--d-text);
  margin: 0 0 12px;
}
.hl-card__lede {
  font-family: var(--serif);
  font-size: 12pt;
  line-height: 1.55;
  color: var(--d-text-2);
  margin: 0 0 18px;
  max-width: none;
}
.hl-card__meta {
  font-family: var(--mono);
  font-size: 9pt;
  letter-spacing: 0.06em;
  color: var(--d-muted);
  border-top: 1px solid var(--navy-line);
  padding-top: 14px;
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
}
.hl-card__meta span + span::before {
  content: "·";
  color: var(--d-muted);
  margin-right: 12px;
}
.hl-card__link {
  font-family: var(--mono);
  font-size: 9pt;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--signal);
  text-decoration: none;
}
.hl-card__link::after { content: " \2192"; }
.hl-card:hover .hl-card__link { color: var(--d-text); }

/* Flagship variant — 2x size, used for IR 2.0 tile on home */
.hl-card--flagship .hl-card__title {
  font-size: 32pt;
  letter-spacing: -0.025em;
}

/* Card grid helpers */
.card-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.card-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.card-grid-5 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
}
.card-grid-asym {
  display: grid;
  grid-template-columns: 1.7fr 1fr;
  gap: 18px;
  align-items: stretch;
}
@media (max-width: 960px) {
  .card-grid-3, .card-grid-5, .card-grid-asym { grid-template-columns: 1fr 1fr; gap: 14px; }
}
@media (max-width: 600px) {
  .card-grid-3, .card-grid-5, .card-grid-2, .card-grid-asym { grid-template-columns: 1fr; gap: 14px; }
}

/* ============================================================
   Archive card (§5.3.7) — used on /research and home archive
   strip. Eyebrow color encodes archive vs. active.
   ============================================================ */
.arch-card {
  border: 1px solid var(--navy-line);
  background: transparent;
  padding: 24px 24px 20px;
  text-decoration: none;
  color: var(--d-text);
  display: flex;
  flex-direction: column;
  transition: border-color 0.15s ease, background 0.15s ease;
  min-height: 100%;
}
.arch-card:hover {
  border-color: var(--signal);
  background: rgba(255, 255, 255, 0.015);
}
.arch-card__eyebrow {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 9pt;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tag-archive);
  margin: 0 0 14px;
}
.arch-card--active .arch-card__eyebrow { color: var(--tag-active); }
.arch-card__title {
  font-family: var(--display);
  font-weight: 700;
  font-size: 18pt;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--d-text);
  margin: 0 0 10px;
}
.arch-card__lede {
  font-family: var(--serif);
  font-size: 11pt;
  line-height: 1.5;
  color: var(--d-text-2);
  margin: 0 0 18px;
  max-width: none;
  /* Cap lede to ~2 lines via line-clamp where supported */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.arch-card__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 14px;
}
.arch-card__chip {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 8.5pt;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--d-text-2);
  border: 1px solid var(--navy-line);
  padding: 3px 8px;
}
.arch-card__foot {
  margin-top: auto;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--navy-line);
}
.arch-card__meta {
  font-family: var(--mono);
  font-size: 9pt;
  letter-spacing: 0.04em;
  color: var(--d-muted);
}
.arch-card__link {
  font-family: var(--mono);
  font-size: 9pt;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--signal);
}
.arch-card__link::after { content: " \2192"; }
.arch-card:hover .arch-card__link { color: var(--d-text); }

/* ============================================================
   Filter row (§5.3.8) — taxonomy chips above the archive grid.
   Static links acceptable v1; the point is the signal that
   this is an archive with taxonomy, not just a list.
   ============================================================ */
.filter-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 18px 24px;
  padding: 18px 0;
  border-top: 1px solid var(--navy-line);
  border-bottom: 1px solid var(--navy-line);
  margin: 0 0 32px;
  font-family: var(--mono);
  font-size: 10pt;
  letter-spacing: 0.06em;
}
.filter-row__group { display: flex; flex-wrap: wrap; gap: 4px 18px; align-items: baseline; }
.filter-row__label {
  font-size: 8.5pt;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--d-muted);
  margin-right: 6px;
}
.filter-row__link {
  color: var(--d-text-2);
  text-decoration: none;
  padding: 4px 0;
  border-bottom: 1px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.filter-row__link:hover { color: var(--d-text); }
.filter-row__link.is-active {
  color: var(--signal);
  border-bottom-color: var(--signal);
}
.filter-row__sort { margin-left: auto; }
@media (max-width: 720px) {
  .filter-row__sort { margin-left: 0; }
}

/* ============================================================
   Hub hero (§4.1) — used on home and /research. Bigger than
   /ir2's home-hero is fine, but draws from the same vocabulary
   (eyebrow / display H1 / lede / CTAs / meta-strip).
   ============================================================ */
.hub-hero {
  padding: 96px 0 56px;
  border-bottom: 1px solid var(--navy-line);
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 56px;
  align-items: end;
}
.hub-hero__num,
.hub-hero__eyebrow {
  font-family: var(--mono);
  font-size: 10pt;
  color: var(--signal);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.hub-hero h1 {
  font-size: 64pt;
  line-height: 0.95;
  color: var(--d-text);
  letter-spacing: -0.03em;
  font-weight: 800;
  margin: 18px 0 0;
  max-width: 14ch;
}
.hub-hero__lede {
  font-family: var(--serif);
  font-size: 14pt;
  line-height: 1.5;
  color: var(--d-text-2);
  max-width: 42ch;
  margin: 0 0 22px;
}
.hub-hero__ctas {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
@media (max-width: 960px) {
  .hub-hero {
    grid-template-columns: 1fr;
    padding: 48px 0 32px;
    gap: 28px;
    align-items: start;
  }
  .hub-hero h1 { font-size: 44pt; max-width: none; }
}
@media (max-width: 540px) {
  .hub-hero h1 { font-size: 36pt; }
}

/* ============================================================
   Hub eyebrow list (§5.3.3) — replaces the run-on paragraph
   on /research. 4 mono tokens, single column.
   ============================================================ */
.eyebrow-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px 24px;
}
.eyebrow-list li {
  font-family: var(--mono);
  font-size: 10pt;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--d-text);
  border-left: 2px solid var(--signal);
  padding-left: 12px;
}
@media (max-width: 560px) {
  .eyebrow-list { grid-template-columns: 1fr; }
}

/* ============================================================
   Footer extensions (§3.3) — Lab / Open / Page column labels
   + disclaimer callout. Builds on /ir2's existing .sitefoot.
   ============================================================ */
.sitefoot__col h2.sitefoot__h,
.sitefoot__col h5 {
  font-family: var(--display);
  font-size: 8.5pt;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--d-muted);
  margin: 0 0 14px;
}
.sitefoot__col--page ul {
  font-family: var(--mono);
  font-size: 9.5pt;
  letter-spacing: 0.04em;
  color: var(--d-text-2);
  list-style: none;
  padding: 0;
  margin: 0;
}
.sitefoot__col--page li {
  margin: 8px 0;
  line-height: 1.4;
}
.sitefoot__col--page li b {
  color: var(--d-muted);
  font-weight: 500;
  margin-right: 4px;
}
.sitefoot__disclaimer {
  margin: 32px 0 24px;
}
.sitefoot__bot {
  font-family: var(--mono);
  font-size: 9pt;
  letter-spacing: 0.06em;
  color: var(--d-muted);
}

/* ============================================================
   Research entry pages (archive + active) — footer paragraph
   width override.
   The global p { max-width: 62ch } rule in brand.css cramps
   paragraphs inside .archive-footer into the left side of a
   76rem-wide container. Bumping the cap to 90ch gives the
   footer a fuller horizontal feel without making lines run on
   to uncomfortably long widths on big monitors.
   ============================================================ */
footer.archive-footer p { max-width: 90ch; }