/* In the Minutes — platform landing page.
   Ported from design/In the Minutes Landing.dc.html (#32, commit 40ecd04).

   WHY EVERYTHING IS A CLASS: the artboard expresses its entire layout as inline
   `style=` attributes, because that is how the canvas editor emits markup. The
   landing location is served under `style-src 'self'` with no 'unsafe-inline',
   which blocks inline style attributes outright — shipping the artboard's markup
   verbatim rendered the page as unstyled HTML. The rules below are those inline
   styles, lifted into classes. Keep it that way: an inline `style=` on this page
   is invisible in the browser. There is a Playwright check (`shot.js`) that
   reports CSP violations, and a unit test that fails on any `style=` in output.

   The token block is the artboard's own, verbatim. The accent is the platform
   DEFAULT teal from design/DESIGN_SYSTEM.md (#0d7a5f light / #64a99f dark) —
   deliberately not a district accent: this page belongs to the platform.

   No JS ships here, so there is no ledger-boot.js and no data-cs-theme: the
   prefers-color-scheme block below resolves the theme. A manual theme choice
   made on a district site is therefore not carried over. */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

.itm-root{
  --bg:#fafaf9;--surface:#ffffff;--line:#e4e2dc;--line2:#efede8;--hover:#f4f3ef;
  --ink:#26251f;--ink2:#55524a;--ink3:#8b887e;--faint:#c0bcb0;
  --accent:#0d7a5f;--onaccent:#ffffff;
  --tT:#0072B2;--tTi:#005a8e;--tA:#D55E00;--tAi:#a84a00;--tM:#009E73;--tMi:#007a59;
  --tP:#CC79A7;--tPi:#9c4a76;--tH:#E69F00;--tHi:#8a6100;
  --serif:'Domine',serif;--icon-ring:transparent;
}
.itm-root[data-cs-theme="dark"]{
  --bg:#151619;--surface:#1d1f23;--line:#32343a;--line2:#26282d;--hover:#24262b;
  --ink:#e8e7e2;--ink2:#b3b1a8;--ink3:#8b887e;--faint:#54565c;
  --accent:#64a99f;--onaccent:#0c1b17;
  --tT:#4d9fd6;--tTi:#7cc0ef;--tA:#e57a33;--tAi:#f0975c;--tM:#2fb98e;--tMi:#4ecca4;
  --tP:#d891b8;--tPi:#e0a6c6;--tH:#eab04d;--tHi:#ddb066;
  --icon-ring:#c8b89a;
}
@media (prefers-color-scheme: dark){
  .itm-root:not([data-cs-theme="light"]):not([data-cs-theme="dark"]){
    --bg:#151619;--surface:#1d1f23;--line:#32343a;--line2:#26282d;--hover:#24262b;
    --ink:#e8e7e2;--ink2:#b3b1a8;--ink3:#8b887e;--faint:#54565c;
    --accent:#64a99f;--onaccent:#0c1b17;
    --tT:#4d9fd6;--tTi:#7cc0ef;--tA:#e57a33;--tAi:#f0975c;--tM:#2fb98e;--tMi:#4ecca4;
    --tP:#d891b8;--tPi:#e0a6c6;--tH:#eab04d;--tHi:#ddb066;
    --icon-ring:#c8b89a;
  }
}
.itm-root a{color:var(--accent)}

/* ── Page shell ──────────────────────────────────────────────────────────── */
.itm-root {
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font-family: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  -webkit-text-size-adjust: 100%;
}
.itm-root a { color: var(--accent); }

/* ── Sitewide disclaimer bar ─────────────────────────────────────────────── */
.itm-disclaimer {
  background: var(--hover);
  border-bottom: 1px solid var(--line);
  padding: 7px clamp(16px, 4vw, 32px);
  font-size: 12px;
  line-height: 1.45;
  color: var(--ink2);
  text-align: center;
}
.itm-disclaimer strong { font-weight: 600; }

/* ── Header + brand lockup ───────────────────────────────────────────────── */
.itm-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 12px clamp(16px, 4vw, 32px);
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.itm-lockup { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; }
.itm-lockup svg { flex-shrink: 0; }
.itm-lockup-text { display: flex; flex-direction: column; gap: 1px; }
.itm-eyebrow {
  font-size: 9.5px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink3);
}
/* Taller, not wider (design/HANDOFF_2026-07-19_lockup_type.md): Domine has only
   a weight axis, so the height comes from a vertical scale on a reduced size.
   inline-block is mandatory — transforms do not apply to inline boxes. */
.itm-wordmark {
  font-family: var(--serif); font-size: 15.5px; font-weight: 600;
  line-height: 1.1; letter-spacing: -0.01em;
  display: inline-block; transform: scaleY(1.17); transform-origin: left center;
}

/* ── Main column ─────────────────────────────────────────────────────────── */
/* Top padding and the hero's bottom margin are deliberately tighter than the
   artboard's (72px / 56px): at those values the page ran 957px tall and scrolled
   by one line in a 1080p browser window. 57px came out of the two of them so the
   whole page fits above the fold there. */
.itm-main {
  max-width: 860px; margin: 0 auto;
  padding: clamp(40px, 7vw, 44px) clamp(16px, 4vw, 32px) 56px;
}
.itm-hero { display: flex; flex-direction: column; gap: 14px; margin-bottom: clamp(24px, 4vw, 26px); }
.itm-hero h1 {
  margin: 0; font-family: var(--serif); font-weight: 600;
  font-size: clamp(28px, 5vw, 42px); line-height: 1.15;
  letter-spacing: -0.022em; text-wrap: pretty;
}
.itm-lede {
  margin: 0; font-size: 15.5px; line-height: 1.65;
  color: var(--ink2); max-width: 620px; text-wrap: pretty;
}
.itm-section { display: flex; flex-direction: column; gap: 14px; margin-bottom: clamp(32px, 5vw, 52px); }
.itm-section:last-child { margin-bottom: 0; }
.itm-section-head { border-bottom: 2px solid var(--ink); padding-bottom: 8px; }
.itm-section-head h2 {
  margin: 0; font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .06em; color: var(--ink3);
}
.itm-prose { margin: 0; font-size: 14px; line-height: 1.7; color: var(--ink2); max-width: 680px; text-wrap: pretty; }

/* ── District cards ──────────────────────────────────────────────────────── */
/* min(300px, 100%) rather than a bare 300px: a hard 300px minimum overflows the
   grid on a 320px viewport once the main column's padding is taken out. */
.itm-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 14px;
}
.itm-card {
  display: flex; flex-direction: column; gap: 12px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 8px; padding: 20px 22px;
}
.itm-card-id { display: flex; flex-direction: column; gap: 3px; }
.itm-root a.itm-card-title {
  font-family: var(--serif); font-size: 18px; font-weight: 600;
  letter-spacing: -0.01em; color: var(--ink); text-decoration: none;
}
.itm-root a.itm-card-title:hover { color: var(--accent); }
.itm-card-where { font-size: 12.5px; color: var(--ink3); }
.itm-card-facts { display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; line-height: 1.5; color: var(--ink2); }
.itm-coverage { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12px; color: var(--ink); }

.itm-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.itm-chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink2); border: 1px solid var(--line); border-radius: 3px;
  padding: 2px 7px; background: var(--bg);
}
.itm-dot { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }
.itm-dot-tT { background: var(--tT); }
.itm-dot-tA { background: var(--tA); }
.itm-dot-tM { background: var(--tM); }
.itm-dot-tP { background: var(--tP); }
.itm-dot-tH { background: var(--tH); }

/* No flex-wrap here: the note is the flexible half and should shrink and wrap
   its own text, keeping the button on the same row (as the design has it).
   Letting the row wrap instead dropped the button to its own line whenever the
   district name was long, and made the two cards different heights. The <=480px
   query below stacks them deliberately. */
.itm-card-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: nowrap;
  border-top: 1px solid var(--line2); padding-top: 12px; margin-top: auto;
}
.itm-card-note { font-size: 11.5px; color: var(--faint); min-width: 0; }
.itm-root a.itm-visit {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600; color: var(--accent); text-decoration: none;
  border: 1px solid var(--line); border-radius: 4px;
  padding: 8px 14px; min-height: 44px; background: var(--surface);
  white-space: nowrap;   /* a button label, never break it across lines */
  flex-shrink: 0;
}
.itm-root a.itm-visit:hover { border-color: var(--accent); }
.itm-visit svg { flex-shrink: 0; }

/* ── For AI agents ───────────────────────────────────────────────────────── */
.itm-code {
  display: inline-block;
  font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 13px;
  color: var(--ink); background: var(--hover);
  border: 1px solid var(--line); border-radius: 4px; padding: 3px 8px;
  max-width: 100%; overflow-wrap: anywhere;
}

/* ── Footer ──────────────────────────────────────────────────────────────── */
.itm-footer {
  border-top: 1px solid var(--line); background: var(--surface);
  padding: 20px clamp(16px, 4vw, 32px);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 10px; font-size: 12px; color: var(--ink3);
}

/* ── Interaction ─────────────────────────────────────────────────────────── */
.itm-card-title, .itm-visit { transition: color .12s ease, border-color .12s ease; }
@media (prefers-reduced-motion: reduce) {
  .itm-card-title, .itm-visit { transition: none; }
}
.itm-root a:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px;
}

/* ── Narrow viewports ────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .itm-card { padding: 16px 16px; }
  .itm-card-foot { flex-wrap: wrap; flex-direction: column; align-items: stretch; gap: 10px; }
  .itm-visit { justify-content: center; }
  .itm-footer { flex-direction: column; align-items: flex-start; gap: 6px; }
}