/* =========================================================================
   EOTAK, Solutions / Public Safety.  Art direction: "the briefing table".
   Loaded after core.css and after nothing else: this page deliberately shares
   no layout with the product, MARS or SmarTak pages. Public Safety is many
   agencies converging on one shared picture, so the page is built as an
   operations board, a horizontal, layered, editorial composition of ruled
   columns, hanging indices, marginalia and overlapping sheets laid across a
   plotting-board surface.

   Every color is a core token. Both themes are defined; no bare hex here.
   Copper #8E654C (--accent) fills, rules and sets type at 24px and above only;
   every small copper text uses --accent-txt.
   ========================================================================= */

/* ---- page-scoped tokens, defined for BOTH themes ---- */
.ps-board{
  --bt-img:saturate(.80) contrast(1.05) brightness(.72);   /* the one photograph */
  --bt-grid-op:.80;
  --bt-grid-filter:none;
  --bt-sheet:linear-gradient(180deg,var(--s2),var(--s1));
  --bt-margin:76px;
}
:root[data-theme="light"] .ps-board{
  /* The tile is light copper: on cream paper it needs an ink treatment, not a
     lower opacity, the same lesson the contour ground cost elsewhere. */
  --bt-img:saturate(.90) contrast(.98) brightness(1.03);
  --bt-grid-op:.85;
  --bt-grid-filter:brightness(.42);
}

/* ---- shared page primitives (this page owns them; style.css is not loaded) -- */
.bt-sec{position:relative;padding:clamp(52px,7vh,98px) 0}
.bt-sec.tight{padding-top:0}

.bt-h1{font-family:var(--font-display);font-size:clamp(36px,4.1vw,58px);
  line-height:1.03;letter-spacing:-.038em;font-weight:800;margin:0}
.bt-h2{font-family:var(--font-display);font-size:clamp(25px,2.1vw,31px);
  line-height:1.08;letter-spacing:-.03em;font-weight:750;margin:0}
.bt-h2.big{font-size:clamp(30px,3.4vw,50px);line-height:1.02;letter-spacing:-.038em;font-weight:800}

.bt-crumb{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--mute);display:flex;gap:8px;flex-wrap:wrap}
.bt-crumb a{color:var(--mute)}
.bt-crumb a:hover{color:var(--accent-txt)}
.bt-crumb span[aria-current]{color:var(--fg2)}

.bt-note{font-size:14.5px;line-height:1.65;color:var(--fg2)}
.bt-meta{font-family:var(--font-mono);font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--dim);font-variant-numeric:tabular-nums}

.bt-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:clamp(22px,3vh,30px)}

/* An index letter. Copper at 34px, well clear of the 24px floor the palette
   rule sets for --accent on the dark ground. */
.bt-idx{display:block;font-family:var(--font-mono);font-size:34px;font-weight:500;
  line-height:.9;color:var(--accent);letter-spacing:.02em;font-variant-numeric:tabular-nums}

/* Two opposite registration corners, the board's own edge marks. */
.bt-corners{position:absolute;inset:0;pointer-events:none;z-index:3}
.bt-corners::before,.bt-corners::after{content:"";position:absolute;
  width:20px;height:20px;border:1px solid rgba(var(--cop-rgb),.8)}
.bt-corners::before{left:-1px;top:-1px;border-right:0;border-bottom:0}
.bt-corners::after{right:-1px;bottom:-1px;border-left:0;border-top:0}

/* The plotting-board surface. A generated 1024px seamless tile: fine survey
   grid, heavier major rules, registration crosshairs. It is scoped to the two
   panels that are meant to read as the table itself, it is an object on this
   page, not a page-wide ground. */
.bt-surface{position:relative;isolation:isolate;background:var(--tint);
  border:1px solid var(--hair);border-top:2px solid rgba(var(--cop-rgb),.62)}
.bt-surface::before{content:"";position:absolute;inset:0;z-index:-1;
  background:url("../assets/img/board-grid.png") repeat;background-size:512px 512px;
  opacity:var(--bt-grid-op);filter:var(--bt-grid-filter);pointer-events:none}

/* =========================================================================
   HERO, the board, with a ruled margin strip beside it
   ========================================================================= */
.bt-hero{position:relative;padding:clamp(26px,4vh,50px) 0 0}
.bt-hero-in{display:grid;grid-template-columns:var(--bt-margin) minmax(0,1fr);
  align-items:stretch}

.bt-rail{position:relative;border-right:1px solid var(--hair);
  display:flex;align-items:flex-end;justify-content:center;padding-bottom:36px}
.bt-rail::before{content:"";position:absolute;right:-1px;top:0;width:2px;height:44px;
  background:var(--accent)}
.bt-rail .t{writing-mode:vertical-rl;transform:rotate(180deg);white-space:nowrap;
  font-family:var(--font-mono);font-size:10px;letter-spacing:.34em;
  text-transform:uppercase;color:var(--mute)}

.bt-board{margin-left:clamp(20px,2.4vw,34px);
  padding:clamp(28px,4vh,48px) clamp(24px,3vw,44px) clamp(44px,6vh,68px);
  display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  gap:clamp(26px,3.2vw,50px);align-items:start}
/* NEVER `> *` on a grid that holds a decorative absolute child. `.bt-corners` is
   position:absolute, this rule has the same specificity and comes later, so it won the
   cascade and turned the span into a real grid item. It then took cell 1, which pushed
   the copy into column 2 and dropped the photograph into row 2: the hero rendered as two
   stacked half-width blocks instead of a side-by-side pair. Name the real children. */
.bt-board > div,.bt-board > figure{position:relative;z-index:1}
.bt-board .eyebrow{display:block;margin-top:18px}
.bt-board .bt-h1{margin-top:14px;max-width:15ch}
.bt-board .lede{margin-top:18px;max-width:48ch;text-shadow:var(--hero-sh)}

/* the photograph, inset and framed, never a full-bleed plate */
.bt-plate{position:relative}
.bt-photo{position:relative;overflow:hidden;background:var(--s1);
  border:1px solid var(--line2);box-shadow:var(--lit),var(--sh-deep)}
.bt-photo img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;
  object-position:50% 58%;filter:var(--bt-img)}
.bt-figc{display:flex;gap:10px;align-items:baseline;margin-top:11px;
  font-family:var(--font-mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--mute);line-height:1.5}
.bt-figc b{color:var(--accent-txt);font-weight:500;flex:none}

/* The index card. It used to be absolutely positioned over the bottom-right corner of
   the photograph at bottom:-32px, which put it on top of the picture AND on top of the
   figcaption underneath, truncating the caption mid-sentence. It is now the last sheet
   on the board rather than a layer over the plate: same styling, normal flow, nothing
   hidden behind it. */
.bt-card{margin-top:clamp(14px,1.6vh,20px);
  background:var(--bt-sheet);border:1px solid var(--hair);
  box-shadow:var(--lit),var(--sh-card);padding:15px 17px 17px}
.bt-card .h{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--accent-txt);padding-bottom:9px;
  border-bottom:1px solid var(--line2)}
.bt-card .row{display:flex;justify-content:space-between;gap:14px;
  align-items:baseline;padding:9px 0;border-bottom:1px solid var(--hair)}
.bt-card .row:last-child{border-bottom:0;padding-bottom:1px}
.bt-card .k{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--mute);flex:none}
.bt-card .v{font-family:var(--font-mono);font-size:12.5px;color:var(--fg);
  text-align:right;line-height:1.4;font-variant-numeric:tabular-nums}

/* =========================================================================
   A, heading in the margin, three ruled columns beside it
   ========================================================================= */
.bt-run{display:grid;grid-template-columns:minmax(0,246px) minmax(0,1fr);
  gap:clamp(26px,3vw,52px);align-items:start}
.bt-mark .bt-h2{margin-top:15px}
.bt-mark .bt-note{margin-top:14px;padding-top:14px;border-top:1px solid var(--hair)}

.bt-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.bt-col{position:relative;border-left:1px solid var(--hair);padding:2px 26px 0 22px}
.bt-col:last-child{padding-right:0}
.bt-col::before{content:"";position:absolute;left:-1px;top:0;width:2px;height:22px;
  background:var(--accent)}
.bt-cn{font-family:var(--font-mono);font-size:10px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--accent-txt)}
.bt-col h3{font-size:17.5px;font-weight:680;letter-spacing:-.018em;
  line-height:1.26;margin-top:12px}
.bt-col p{font-size:14.5px;line-height:1.7;color:var(--fg2);margin-top:10px}

/* =========================================================================
   B, a ruled header bar, then four sheets dealt across the table
   ========================================================================= */
.bt-bar{display:flex;align-items:flex-end;gap:20px;flex-wrap:wrap;
  padding-bottom:15px;border-bottom:1px solid var(--line2)}
.bt-bar .bt-idx{flex:none}
.bt-bar .bt-h2{flex:none}
.bt-bar .r{margin-left:auto;padding-bottom:3px;font-family:var(--font-mono);
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}

.bt-sheets{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  margin-top:clamp(30px,4vh,50px);padding-bottom:66px}
.bt-sheet{position:relative;background:var(--bt-sheet);border:1px solid var(--hair);
  box-shadow:var(--lit),var(--sh-card);padding:21px 21px 25px}
.bt-sheet + .bt-sheet{margin-left:-20px;padding-left:33px}
.bt-sheet:nth-child(1){z-index:4}
.bt-sheet:nth-child(2){z-index:3;transform:translateY(21px)}
.bt-sheet:nth-child(3){z-index:2;transform:translateY(42px)}
.bt-sheet:nth-child(4){z-index:1;transform:translateY(63px)}
.bt-sheet .tag{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--accent-txt);display:block;
  padding-bottom:11px;border-bottom:1px solid var(--hair)}
.bt-sheet h3{font-size:16.5px;font-weight:680;letter-spacing:-.016em;
  line-height:1.26;margin-top:14px}
.bt-sheet p{font-size:14px;line-height:1.68;color:var(--fg2);margin-top:9px}

/* =========================================================================
   C / D, a spread: ruled rows on the left, a pinned note on the right
   ========================================================================= */
.bt-spread{display:grid;grid-template-columns:minmax(0,1.42fr) minmax(0,.86fr);
  gap:clamp(30px,3.6vw,56px);align-items:start}
.bt-rows{margin-top:clamp(20px,2.8vh,32px)}
.bt-row{display:grid;grid-template-columns:26px minmax(0,190px) minmax(0,1fr);
  gap:20px;padding:17px 0;border-top:1px solid var(--hair);align-items:baseline}
.bt-row:last-child{border-bottom:1px solid var(--hair)}
.bt-row .rn{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent-txt)}
.bt-row .nm{font-size:15.5px;font-weight:660;letter-spacing:-.014em;line-height:1.3}
.bt-row .ds{font-size:14.5px;line-height:1.7;color:var(--fg2)}

.bt-pinwrap{border-left:1px solid var(--hair);padding-left:clamp(26px,2.6vw,42px)}
.bt-pin{position:relative;background:var(--bt-sheet);border:1px solid var(--hair);
  box-shadow:var(--lit),var(--sh-card);padding:24px 22px 22px;
  transform:rotate(-.55deg);margin-top:22px}
.bt-pin::before{content:"";position:absolute;left:50%;top:-7px;width:12px;height:12px;
  border-radius:50%;background:var(--accent);border:1px solid rgba(var(--ovr-rgb),.25);
  transform:translateX(-50%)}
.bt-pin .h{font-family:var(--font-mono);font-size:10px;font-weight:500;letter-spacing:.22em;
  text-transform:uppercase;color:var(--accent-txt);padding-bottom:13px;line-height:1.5;
  border-bottom:1px solid var(--line2)}
.bt-pin .it{padding:14px 0;border-bottom:1px solid var(--hair)}
.bt-pin .it:last-child{border-bottom:0;padding-bottom:2px}
.bt-pin .it b{display:block;font-size:14.5px;font-weight:660;letter-spacing:-.012em}
.bt-pin .it span{display:block;font-size:13.5px;line-height:1.66;color:var(--fg2);margin-top:6px}

/* =========================================================================
   Closer, one more panel on the table, read across rather than down
   ========================================================================= */
.bt-close{padding:clamp(36px,5.2vh,62px) clamp(24px,3vw,44px);
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(26px,3.4vw,54px);align-items:end;margin-bottom:clamp(40px,6vh,86px)}
.bt-close > div{position:relative;z-index:1}   /* not `> *` -- see .bt-board above */
.bt-close .bt-h2{margin-top:16px;max-width:13ch;text-shadow:var(--hero-sh)}
.bt-close .q{font-size:clamp(15.5px,1.4vw,18px);line-height:1.6;color:var(--fg2);
  font-weight:350;max-width:40ch}
.bt-close .bt-meta{margin-top:22px}

/* =========================================================================
   Responsive.  Nothing here may widen the document at 390 / 1440 / 1920.
   ========================================================================= */
@media (max-width:1180px){
  .bt-hero-in{grid-template-columns:1fr}
  .bt-rail{display:none}
  .bt-board{margin-left:0;grid-template-columns:1fr;gap:clamp(30px,4vh,44px)}
  .bt-board .bt-h1{max-width:18ch}
  .bt-card{position:static;width:100%;margin-top:16px;box-shadow:var(--lit)}
  .bt-close{grid-template-columns:1fr;align-items:start;gap:26px}
  .bt-close .bt-h2{max-width:20ch}
}
@media (max-width:1000px){
  .bt-run{grid-template-columns:1fr;gap:26px}
  .bt-cols{grid-template-columns:1fr;gap:22px}
  .bt-col{padding:2px 0 0 20px}
  .bt-col:last-child{padding-right:0}
  .bt-sheets{grid-template-columns:1fr;gap:14px;padding-bottom:0}
  .bt-sheet + .bt-sheet{margin-left:0;padding-left:21px}
  .bt-sheet:nth-child(2),.bt-sheet:nth-child(3),.bt-sheet:nth-child(4){transform:none}
  .bt-spread{grid-template-columns:1fr;gap:30px}
  .bt-pinwrap{border-left:0;padding-left:0;border-top:1px solid var(--hair);padding-top:22px}
  .bt-pin{margin-top:14px}
}
@media (max-width:640px){
  .bt-row{grid-template-columns:24px minmax(0,1fr);gap:14px;row-gap:8px}
  .bt-row .ds{grid-column:2}
  .bt-bar{gap:14px}
  .bt-bar .r{margin-left:0;width:100%}
  .bt-figc{flex-wrap:wrap}
}