/* Objective Intelligence — site layer over the Broadsheet tokens (styles.css).
   Newsprint discipline: serif chrome, whitespace hierarchy, head rules only. */
body { background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); text-wrap: pretty; }
a { color: var(--color-accent); text-decoration: none; }
a:hover { color: var(--color-accent-600); }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 72px); }
.nav { padding: 15px clamp(20px, 5vw, 72px); flex-wrap: wrap; row-gap: 8px; }
.nav .brand { display: flex; align-items: center; gap: 12px; color: inherit; margin-right: auto; }
.nav .brand img { height: 34px; width: auto; }
.nav a { color: inherit; }
.nav a:hover, .nav a[aria-current='page'] { color: var(--color-accent); }
/* 44px tap targets. The padding is real rather than cancelled by a negative
   margin: a 44px box on a 22px line overlaps the row below it as soon as the
   nav wraps, and two targets that overlap are worse than one that is small.
   So the rows grow with the links — the cost is stated in the commit, and it
   is 28px of header on a phone. The brand (a 34px mark) and the CTA (a 39px
   button) carry their own size and are left alone. */
.nav > a:not(.brand):not(.btn), .navdrop-t, .nav-link:not(.btn) { padding-block: 11px; }
/* the studio button joins them, scoped to the header: .btn is the shared
   component the studio app draws its own buttons from, and 44px here is a
   nav decision, not a design-system one. It is min-height rather than
   padding because the button already centres its label — and because it
   grows into a row the 44px links had already made 44px tall, the header
   does not move. training.html's local .btn is inline-block, so the display
   is set here too or the label would sit at the top of the taller box. */
.nav .btn, .tnav .btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }

/* — the Industries drop-down —
   No script runs on this site (the CSP is script-src 'self', and there is no
   script), so the menu opens on hover for a pointer and on :focus-within for
   the keyboard, and the trigger is a real link to the hub page: a tap on a
   touch device lands on industries.html rather than on a menu that will not
   open. The trigger's own 44px box is the bridge the cursor crosses. */
.navdrop { position: relative; display: inline-flex; align-items: center; }
/* the trigger takes its 11px from the tap-target rule above, so the wrapper
   is exactly the link's box: the menu hangs off its bottom with no gap for a
   cursor to fall through, and on a phone — where the menu never opens and
   this link IS the way into the series — it is 44px like the rest. */
.navdrop-t { display: inline-flex; align-items: center; gap: 6px; }
.navdrop-t::after { content: ''; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; opacity: 0.5; }
.nav .nav-section { color: var(--color-accent); } /* an industry page is open below */
.navmenu {
  display: none; position: absolute; top: 100%; left: -18px; z-index: 40;
  min-width: 264px; max-width: calc(100vw - 40px); padding: 12px 0 10px;
  background: var(--color-neutral-100);
  border: 1px solid var(--color-divider); border-top: 2px solid var(--color-text);
  border-radius: var(--radius-md);
  box-shadow: 0 10px 30px color-mix(in srgb, var(--color-text) 14%, transparent);
}
.navdrop:hover > .navmenu, .navdrop:focus-within > .navmenu { display: block; }
.navmenu .fh { display: block; padding: 0 18px 8px; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: color-mix(in srgb, var(--color-text) 55%, transparent); }
.navmenu a { display: block; padding: 6px 18px; font-size: 14px; line-height: 21px; color: inherit; }
.navmenu a:hover, .navmenu a[aria-current='page'] { color: var(--color-accent); background: color-mix(in srgb, var(--color-text) 6%, transparent); }
.navmenu hr { margin: 9px 18px; }
@media (hover: none) { .navdrop:hover > .navmenu { display: none; } }
/* narrow: the panel drops from the header itself, inset to the page gutter,
   so it cannot run off the edge wherever the wrapped nav puts its trigger */
@media (max-width: 800px) {
  /* the links now carry 11px of padding each, so the header pays for its own
     chrome twice: the nav's block padding and row gap come down by the same
     order the targets went up, and the header lands within 5px of where it
     was with 22px targets */
  .nav { padding-block: 8px; row-gap: 4px; }
  /* the wordmark is the home link on a phone, so the text one is a link the
     header pays for twice; the brand above it has the same destination, so
     nothing is lost from the reading order either */
  .nav-home { display: none; }
  .nav { position: relative; }
  .navdrop { position: static; }
  .navmenu { left: clamp(20px, 5vw, 72px); right: clamp(20px, 5vw, 72px); min-width: 0; max-width: none; }
}

/* section rail — № slug left, content right */
.sec { padding: 56px 0; display: grid; grid-template-columns: minmax(140px, 180px) 1fr; gap: 28px clamp(28px, 4vw, 72px); }
.slug, .k { font-size: 13px; line-height: 14px; letter-spacing: 0.08em; text-transform: uppercase; color: color-mix(in srgb, var(--color-text) 70%, transparent); }
.k { display: block; margin-bottom: 10px; }
.k-a { color: var(--color-accent-700); }
.k-m { color: var(--color-accent-2-700); }
.sec h2, .h2 { font-size: 32px; line-height: 1.2; margin: 0; }
.sec h3 { font-size: 20px; line-height: 28px; margin: 0; }
.lede { font-size: 17px; line-height: 28px; color: color-mix(in srgb, var(--color-text) 78%, transparent); margin: 14px 0 0; max-width: 62ch; }
.bp { font-size: 15.5px; line-height: 28px; color: color-mix(in srgb, var(--color-text) 78%, transparent); margin: 14px 0 0; }
.sp { font-size: 14.5px; line-height: 26px; color: color-mix(in srgb, var(--color-text) 78%, transparent); margin: 10px 0 0; }
.fine { font-size: 13px; color: color-mix(in srgb, var(--color-text) 55%, transparent); }

.cols { display: grid; gap: 42px clamp(24px, 3vw, 56px); margin-top: 42px; }
.cols-240 { grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
.cols-260 { grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
.cols-300 { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.cols-320 { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }

.row { display: flex; gap: 15px; align-items: center; flex-wrap: wrap; }

/* head furniture — the one place rules print */
.rule-head { height: 5px; border: 0; margin: 0; border-top: 2px solid var(--color-text); border-bottom: 1px solid var(--color-text); }
.rule-cut { height: 0; border: 0; border-top: 1px solid var(--color-text); margin: 0; }

/* plate numerals (construction in styles.css) */
.num { font-family: var(--font-heading); font-weight: var(--font-heading-weight); }
/* a display figure set to the plate numeral's exact metrics — same trim, same
   box — minus the plates, so mixed rows of both sit on one line */
.num-plain { line-height: 0.9; padding: 0.12em; margin: -0.12em; text-box: trim-both cap alphabetic; }

/* pull quote — the serif's true italic */
.pull { font-family: var(--font-heading); font-style: italic; font-weight: 400; letter-spacing: -0.01em; }

/* footer */
.footcols { display: flex; flex-wrap: wrap; gap: 42px clamp(28px, 4vw, 64px); }
.footcol { display: flex; flex-direction: column; gap: 10px; }
.footcol .fh { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: color-mix(in srgb, var(--color-text) 55%, transparent); }
.footcol a { font-size: 13.5px; color: inherit; }
.footcol a:hover { color: var(--color-accent); }
.placeholder { font-size: 12.5px; color: var(--color-accent-2-700); border: 1px dashed var(--color-accent-2-400); border-radius: var(--radius-md); padding: 4px 10px; align-self: flex-start; }
.legal { margin-top: 42px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 13px; color: color-mix(in srgb, var(--color-text) 70%, transparent); }
.legal-tm { flex-basis: 100%; margin-top: 4px; font-size: 12px; color: color-mix(in srgb, var(--color-text) 55%, transparent); }

/* docs/training side rail */
.doc-rail a { display: block; font-size: 13.5px; color: inherit; padding: 3px 0; }
.doc-rail a:hover { color: var(--color-accent); }
.doc-rail .fh { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: color-mix(in srgb, var(--color-text) 55%, transparent); margin-bottom: 6px; }
.doc-muted { display: block; font-size: 13.5px; color: color-mix(in srgb, var(--color-text) 42%, transparent); padding: 3px 0; }

/* code panel — content, not chrome */
.code { background: var(--color-neutral-200); border-radius: var(--radius-md); padding: 18px 20px; overflow-x: auto; }
.code pre { margin: 0; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 12.5px; line-height: 1.65; color: var(--color-neutral-900); white-space: pre; }

@media (max-width: 720px) {
  .sec { grid-template-columns: 1fr; gap: 10px; }
}
@media (max-width: 800px) {
  .nav .brand { flex-basis: 100%; } /* the wordmark takes its own line; links flow below */
}