/* ==========================================================================
   QSD — DETAIL PAGE TEMPLATE
   Styling for #page-detail, rendered by js/detail.js.

   Deliberately reuses the existing design tokens (--gold, --pearl, --t2,
   --card-bdr, --font-heading …) so a detail page reads as part of the same
   site rather than a bolt-on. Loaded last, but written without !important:
   nothing here needs to fight the legacy cascade because every selector is
   scoped to .dt-* class names that exist nowhere else.
   ========================================================================== */

/* ── Page shell ───────────────────────────────────────────────────────── */
#page-detail .dt-inner {
  display: block;
  justify-content: flex-start;
  max-width: 1180px;
  margin: 0 auto;
  padding: 48px 5% 120px;
  min-height: calc(100vh - 68px);
  transition: opacity .16s ease;
}

#page-detail.dt-swapping .dt-inner { opacity: 0; }

/* ── Back link ────────────────────────────────────────────────────────── */
.dt-back {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--t3);
  padding: 8px 14px 8px 10px;
  border: 1px solid var(--bdr);
  border-radius: 999px;
  background: rgba(226, 184, 74, .04);
  transition: color .2s, border-color .2s, background .2s, transform .2s;
  cursor: pointer;
}

.dt-back:hover {
  color: var(--gold-h);
  border-color: var(--bdr2);
  background: var(--gd2);
  transform: translateX(-3px);
}

.dt-back-arrow { font-size: 14px; line-height: 1; }

/* ── Hero ─────────────────────────────────────────────────────────────── */
.dt-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: 54px;
  align-items: center;
  margin-top: 34px;
  padding-bottom: 46px;
  border-bottom: 1px solid rgba(226, 184, 74, .16);
}

/* Legal pages carry no artwork — drop to one column and let the lead run
   wider, rather than leaving a hole where the visual would be. */
.dt-hero-noart { grid-template-columns: minmax(0, 1fr); }
.dt-hero-noart .dt-lead { max-width: 780px; }

.dt-eyebrow { margin-bottom: 14px; }

.dt-pill {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
  border: 1px solid var(--bdr);
  border-radius: 3px;
  padding: 5px 11px;
  margin-bottom: 18px;
  background: var(--gd3);
}

.dt-title {
  font-family: var(--font-heading);
  font-size: clamp(28px, 3.6vw, 46px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.02em;
  color: var(--gold-h);
  text-shadow: 0 0 20px rgba(245, 208, 104, .32);
  margin-bottom: 20px;
}

.dt-lead {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.78;
  font-weight: 300;
  color: var(--pearl);
  max-width: 620px;
}

/* Hero visual — same treatment as the card thumbnails it came from. */
.dt-hero-visual { position: relative; }

.dt-hero-img {
  aspect-ratio: 5 / 3.4;
  border-radius: 16px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border: 1px solid var(--card-bdr);
  box-shadow:
    0 0 0 1px rgba(200, 160, 50, .10),
    0 18px 46px rgba(0, 8, 24, .46),
    inset 0 1px 0 rgba(255, 220, 120, .14);
}

/* ── Meta strip ───────────────────────────────────────────────────────── */
.dt-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin-top: 30px;
  border-top: 1px solid rgba(226, 184, 74, .16);
  padding-top: 22px;
}

.dt-meta-i {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding-right: 30px;
  margin-right: 30px;
  border-right: 1px solid rgba(226, 184, 74, .14);
}

.dt-meta-i:last-child { border-right: 0; margin-right: 0; padding-right: 0; }

.dt-meta-k {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--t4);
}

.dt-meta-v {
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 600;
  color: var(--t1);
}

/* ── Body ─────────────────────────────────────────────────────────────── */
.dt-body {
  max-width: 780px;
  margin: 56px 0 0;
}

.dt-h {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--gold-h);
  margin: 48px 0 18px;
  padding-left: 16px;
  border-left: 2px solid var(--gold);
}

.dt-body > .dt-h:first-child { margin-top: 0; }

/* Sub-headings, used by generated content with a real heading hierarchy
   (the legal documents). h2 keeps the gold rule; deeper levels step down to
   a quieter treatment so long documents stay scannable. */
.dt-h3 {
  font-size: 17px;
  color: var(--t0);
  margin: 32px 0 12px;
  padding-left: 0;
  border-left: 0;
}

.dt-h4 {
  font-size: 14.5px;
  font-family: var(--font-mono);
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--gold);
  margin: 26px 0 10px;
  padding-left: 0;
  border-left: 0;
}

/* Table — scrolls inside its own box so the page never scrolls sideways. */
.dt-table-wrap {
  margin: 26px 0;
  overflow-x: auto;
  border: 1px solid var(--bdr);
  border-radius: 10px;
  background: rgba(226, 184, 74, .03);
}

.dt-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-body);
  font-size: 13.5px;
  line-height: 1.65;
}

.dt-table th,
.dt-table td {
  text-align: left;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(226, 184, 74, .14);
  vertical-align: top;
}

.dt-table th {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold);
  background: rgba(226, 184, 74, .06);
  white-space: nowrap;
}

.dt-table td { color: var(--t2); font-weight: 300; }
.dt-table tr:last-child td { border-bottom: 0; }

.dt-p {
  font-family: var(--font-body);
  font-size: 15.5px;
  line-height: 1.86;
  font-weight: 300;
  color: var(--t2);
  margin-bottom: 18px;
}

/* Checked bullet list */
.dt-list { list-style: none; margin: 4px 0 8px; padding: 0; }

.dt-list li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 13px;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.76;
  font-weight: 300;
  color: var(--t2);
}

.dt-list li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: .62em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 9px rgba(226, 184, 74, .6);
}

/* Numbered process */
.dt-steps { list-style: none; margin: 10px 0 8px; padding: 0; counter-reset: dtstep; }

.dt-step {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 18px;
  padding: 20px 0;
  border-bottom: 1px solid rgba(226, 184, 74, .12);
}

.dt-step:last-child { border-bottom: 0; }

.dt-step-n {
  font-family: var(--font-mono);
  font-size: 19px;
  font-weight: 500;
  color: var(--gold);
  opacity: .72;
  line-height: 1.4;
}

.dt-step-body h3 {
  font-family: var(--font-heading);
  font-size: 15.5px;
  font-weight: 700;
  color: var(--t0);
  margin-bottom: 6px;
}

.dt-step-body p {
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.78;
  font-weight: 300;
  color: var(--t2);
}

/* Pull quote */
.dt-quote {
  margin: 36px 0;
  padding: 26px 30px;
  border-left: 2px solid var(--gold);
  background: linear-gradient(90deg, rgba(226, 184, 74, .07), rgba(226, 184, 74, 0));
  border-radius: 0 10px 10px 0;
}

.dt-quote blockquote {
  font-family: var(--font-heading);
  font-size: 18px;
  line-height: 1.62;
  font-weight: 500;
  font-style: italic;
  color: var(--pearl);
}

.dt-quote figcaption {
  margin-top: 12px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--t4);
}

/* Callout */
.dt-note {
  display: flex;
  gap: 15px;
  align-items: flex-start;
  margin: 32px 0;
  padding: 20px 24px;
  border: 1px solid var(--bdr);
  border-radius: 10px;
  background: rgba(226, 184, 74, .05);
}

.dt-note-mark {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--bdr2);
  color: var(--gold);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  display: grid;
  place-items: center;
  margin-top: 2px;
}

.dt-note p {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.74;
  font-weight: 300;
  color: var(--t3);
}

/* ── Tag rail ─────────────────────────────────────────────────────────── */
.dt-tags {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 54px;
  padding-top: 26px;
  border-top: 1px solid rgba(226, 184, 74, .16);
}

.dt-tags-lbl {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--t4);
}

.dt-tags-list { display: flex; flex-wrap: wrap; gap: 8px; }

.dt-tag {
  border: 1px solid var(--card-bdr);
  border-radius: 3px;
  padding: 5px 12px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--t3);
  transition: color .18s, border-color .18s, background .18s;
}

.dt-tag:hover { color: var(--gold); border-color: var(--gold); background: var(--gd2); }

/* ── CTA ──────────────────────────────────────────────────────────────── */
.dt-cta {
  margin-top: 56px;
  padding: 44px 46px;
  border: 1px solid var(--bdr);
  border-top: 3px solid rgba(220, 175, 55, .88);
  border-radius: 12px;
  background:
    linear-gradient(145deg, rgba(226, 184, 74, .09), rgba(226, 184, 74, .02)),
    rgba(8, 20, 44, .55);
  box-shadow: 0 12px 40px rgba(0, 8, 24, .34);
}

.dt-cta h2 {
  font-family: var(--font-heading);
  font-size: clamp(20px, 2.2vw, 27px);
  font-weight: 700;
  color: var(--gold-h);
  margin-bottom: 12px;
  letter-spacing: -.015em;
}

.dt-cta p {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.78;
  font-weight: 300;
  color: var(--t2);
  max-width: 620px;
  margin-bottom: 26px;
}

.dt-cta-btn {
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--navy2);
  background: var(--g-grad);
  border: 0;
  border-radius: 4px;
  padding: 14px 30px;
  cursor: pointer;
  transition: transform .2s, box-shadow .2s, filter .2s;
  box-shadow: 0 6px 22px rgba(226, 184, 74, .26);
}

.dt-cta-btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.06);
  box-shadow: 0 10px 30px rgba(226, 184, 74, .36);
}

/* ── Related rail ─────────────────────────────────────────────────────── */
.dt-related { margin-top: 68px; }

.dt-related .dt-h { margin-bottom: 26px; }

.dt-rel-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.dt-rel-card {
  background: linear-gradient(145deg, #FFFFFF 0%, #FFF8E8 100%);
  border: 1px solid var(--card-bdr);
  border-top: 3px solid rgba(220, 175, 55, .88);
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  transition: transform .22s, border-color .22s, box-shadow .22s;
  box-shadow: 0 4px 18px rgba(0, 8, 24, .26);
}

.dt-rel-card:hover,
.dt-rel-card:focus-visible {
  transform: translateY(-4px);
  border-color: var(--bdr2);
  box-shadow: 0 12px 32px rgba(0, 8, 24, .36);
  outline: none;
}

.dt-rel-visual {
  height: 112px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Related cards for artwork-less items (legal) get a little more padding so
   they do not read as a card with a missing image. */
.dt-rel-noart .dt-rel-body { padding-top: 24px; }

.dt-rel-body { padding: 18px 20px 22px; }

.dt-rel-tag {
  display: block;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--card-accent);
  margin-bottom: 9px;
}

.dt-rel-body h3 {
  font-family: var(--font-heading);
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--card-readable-heading);
  margin-bottom: 14px;
}

.dt-rel-lnk {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--card-accent);
}

/* ── Clickable source cards on the section pages ──────────────────────── */
[data-detail] { cursor: pointer; }

[data-detail]:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* The "→" affordance already present on cards now animates on hover. */
.sc:hover .sc-lnk,
.con-card:hover .con-lnk { gap: 11px; }

/* R&D and project cards had no link affordance in v1 — add a quiet one. */
.rnd-card .dt-cue,
.rnd-sector-card .dt-cue,
.proj-card .dt-cue,
.blog-card .dt-cue {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--card-accent);
  transition: gap .2s;
}

.rnd-card:hover .dt-cue,
.rnd-sector-card:hover .dt-cue,
.proj-card:hover .dt-cue,
.blog-card:hover .dt-cue { gap: 11px; }

/* ── Wordmark fallback for a missing nav logo file ────────────────────── */
.nlogo-fallback {
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .16em;
  color: var(--gold-h);
  text-shadow: 0 0 14px rgba(245, 208, 104, .4);
  white-space: nowrap;
}

/* ── Opt out of the legacy "laptop fit" scale engine ──────────────────────
   css/legacy.css (layer 21, qsd-laptop-leftsafe-fit-v5) scales EVERY
   .page > .page-inner to .74 at 1024–1800px and widens it to 135.14%.
   transform: scale() does not shrink the layout box, so the parent still
   scrolls the full unscaled height — leaving ~900px of phantom empty space
   below the content. That hack exists to squeeze the fixed-height v1
   section pages onto short laptop screens.

   Detail pages are ordinary flowing documents that are already responsive,
   so they opt out entirely. !important is required to beat the legacy
   declarations; the id selector then wins on specificity.
   NOTE: the phantom-space bug still affects the v1 section pages. Fixing it
   there means unwinding the scale engine — a separate piece of work.
------------------------------------------------------------------------- */
@media (min-width: 1024px) and (max-width: 1800px) {
  #page-detail > .page-inner {
    transform: none !important;
    width: auto !important;
    min-height: calc(100vh - 68px) !important;
    padding-top: 48px !important;
    padding-bottom: 120px !important;
  }
}

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .dt-hero { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .dt-hero-visual { order: -1; }
  .dt-hero-img { aspect-ratio: 16 / 8; }
  .dt-rel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
  #page-detail .dt-inner { padding: 34px 6% 110px; }
  .dt-meta-i {
    border-right: 0;
    margin-right: 0;
    padding-right: 0;
    flex: 1 1 45%;
    margin-bottom: 16px;
  }
  .dt-cta { padding: 32px 26px; }
  .dt-rel-grid { grid-template-columns: minmax(0, 1fr); }
  .dt-step { grid-template-columns: 38px minmax(0, 1fr); gap: 12px; }
}