/* ─────────────────────────────────────────────────────────────
   information-governance.org · site stylesheet · v1.0
   Depends on ig-tokens.css. Every colour, size and rhythm value
   below resolves to a token: no literal hex outside the token file
   except rgba shadows of tokens already declared.
   Light scheme only, per the brand guide. Dark deferred to v1.1.
   ───────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

img, svg { max-width: 100%; height: auto; }

/* ── skip link ────────────────────────────────────────────── */
.ig-skip {
  position: absolute; left: -9999px; top: 0; z-index: 20;
  font-family: var(--ig-sans); font-size: 13px;
  background: var(--ig-bone); color: var(--ig-delta);
  padding: 12px 18px; border-radius: var(--ig-radius);
  border: 1px solid var(--ig-rule-heavy);
}
.ig-skip:focus { left: 12px; top: 12px; }

/* ── shell and measure ────────────────────────────────────── */
.ig-shell {
  width: 100%; max-width: var(--ig-shell);
  margin-inline: auto;
  padding-inline: var(--ig-gutter);
}
.ig-measure { max-width: var(--ig-measure); }

/* One column, one left edge.
   The masthead and the footer take the full 72rem shell. Everything that is
   read sits in a 52rem band, centred in the page, and prose holds the 34rem
   measure ranged left inside that band. Cards, tables and figures fill the
   band. Nothing is centred against anything else, so the eye returns to the
   same left edge on every line of every page. */
.ig-section > .ig-shell,
.ig-hero > .ig-shell { max-width: 52rem; }

.ig-main { flex: 1 0 auto; }

/* ── masthead ─────────────────────────────────────────────── */
.ig-masthead {
  background: var(--ig-deep);
  border-bottom: 1px solid var(--ig-rule-invert);
}
.ig-masthead-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
  padding-block: 18px;
}
.ig-identity { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.ig-identity:hover { text-decoration: none; }
.ig-identity-mark { width: 34px; height: 34px; display: block; }
.ig-identity-word { height: 44px; width: auto; display: block; margin: -8px -12px; }

.ig-nav { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.ig-nav a {
  font-family: var(--ig-sans); font-size: 13px; font-weight: 500;
  color: var(--ig-parchment); text-decoration: none;
  padding: 8px 14px; border-radius: var(--ig-radius);
  border: 1px solid transparent;
  transition: color 160ms ease-out, border-color 160ms ease-out;
}
.ig-nav a:hover { color: var(--ig-meridian); border-color: var(--ig-rule-invert); }
.ig-nav a[aria-current='page'] {
  color: var(--ig-meridian);
  border-color: var(--ig-rule-invert);
}
.ig-masthead :focus-visible { outline-color: var(--ig-meridian); }

/* ── sections ─────────────────────────────────────────────── */
.ig-section { padding-block: clamp(48px, 7vw, 88px); }
.ig-section + .ig-section { border-top: 1px solid var(--ig-rule); }
.ig-section-tight { padding-block: clamp(36px, 5vw, 60px); }
/* a page opening that follows the version strip, or leads into one */
.ig-section-lede { padding-top: clamp(28px, 4vw, 44px); }
.ig-section-lede-foot { padding-bottom: clamp(28px, 4vw, 44px); }

.ig-sectionhead { margin-bottom: 34px; }
.ig-sectionhead .ig-kicker { display: block; margin-bottom: 12px; }
h2.ig-h2 { font-size: var(--ig-step-2); margin: 0 0 14px; }
h3.ig-h3 { font-size: var(--ig-step-1); margin: 0 0 10px; }

p { margin: 0 0 1.05em; }
.ig-lead {
  font-size: var(--ig-step-1); line-height: 1.55;
  max-width: var(--ig-measure);
}
.ig-body { max-width: var(--ig-measure); }

/* ── hero ─────────────────────────────────────────────────── */
.ig-hero { padding-top: clamp(52px, 8vw, 92px); padding-bottom: clamp(40px, 6vw, 64px); }
.ig-hero-grid {
  display: grid; gap: clamp(32px, 4vw, 48px);
  grid-template-columns: minmax(0, 1fr) minmax(0, 240px);
  align-items: center;
}
@media (max-width: 860px) {
  .ig-hero-grid { grid-template-columns: minmax(0, 1fr); }
  .ig-hero-figure { order: -1; max-width: 260px; }
}
h1.ig-h1 {
  font-size: clamp(2rem, 1.2rem + 3vw, var(--ig-step-3));
  margin: 0 0 20px;
}
.ig-hero-figure { width: 100%; }
.ig-hero-figure svg { display: block; width: 100%; height: auto; }

.ig-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.ig-actions-tight { margin-top: 0; }
.ig-btn {
  font-family: var(--ig-sans); font-size: 13px; font-weight: 600;
  letter-spacing: 0.02em;
  padding: 12px 20px; border-radius: var(--ig-radius);
  text-decoration: none; display: inline-block;
  border: 1px solid var(--ig-delta);
  transition: background-color 160ms ease-out, color 160ms ease-out, border-color 160ms ease-out;
}
.ig-btn-solid { background: var(--ig-delta); color: var(--ig-parchment); }
.ig-btn-solid:hover { background: var(--ig-commons); border-color: var(--ig-commons); color: var(--ig-parchment); }
.ig-btn-quiet { background: transparent; color: var(--ig-delta); border-color: var(--ig-rule-heavy); }
.ig-btn-quiet:hover { color: var(--ig-commons); border-color: var(--ig-commons); }

/* ── the five functions ───────────────────────────────────── */
.ig-functions { display: grid; gap: 1px; background: var(--ig-rule); border: 1px solid var(--ig-rule); border-radius: var(--ig-radius); overflow: hidden; }
.ig-function {
  background: var(--ig-bone);
  display: grid; grid-template-columns: 48px minmax(0, 1fr);
  gap: 20px; align-items: start;
  padding: 24px 26px;
}
.ig-function-icon { width: 48px; height: 48px; display: block; }
.ig-function-num {
  font-family: var(--ig-mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.16em; color: var(--ig-commons);
  display: block; margin-bottom: 6px;
}
.ig-function h3 { font-size: var(--ig-step-1); margin: 0 0 8px; }
.ig-function p { margin: 0; font-size: var(--ig-step-0); }
.ig-function-scope {
  display: block; margin-top: 10px;
  font-family: var(--ig-sans); font-size: 12.5px; color: var(--ig-reed-deep);
}
@media (max-width: 560px) {
  .ig-function { grid-template-columns: minmax(0, 1fr); gap: 14px; }
}

/* ── documents ────────────────────────────────────────────── */
.ig-docs { display: grid; gap: 18px; }
.ig-doc {
  background: var(--ig-bone); border: 1px solid var(--ig-rule);
  border-radius: var(--ig-radius); padding: 24px 26px;
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 20px; align-items: center;
}
.ig-doc-body { min-width: 0; }
.ig-doc h3 { font-size: var(--ig-step-1); margin: 0 0 8px; }
.ig-doc p { margin: 0 0 10px; }
.ig-doc-meta {
  font-family: var(--ig-mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ig-reed-deep);
}
.ig-doc-addendum { border-left: 2px solid var(--ig-meridian); }
@media (max-width: 620px) {
  .ig-doc { grid-template-columns: minmax(0, 1fr); }
}

/* ── a named contribution ─────────────────────────────────── */
.ig-contribution {
  background: var(--ig-bone); border: 1px solid var(--ig-rule);
  border-radius: var(--ig-radius); padding: 28px 30px;
}
.ig-contribution .ig-kicker { display: block; margin-bottom: 12px; }
.ig-contribution h3 { font-size: var(--ig-step-2); margin: 0 0 10px; }
.ig-contribution .ig-byline { margin: 0 0 18px; }
.ig-contribution p { max-width: var(--ig-measure); }
.ig-contribution-lead { margin-bottom: 12px; }

/* Questions carry the same two-digit mono numerals as the functions,
   because they are indexed to them one for one. */
.ig-questions {
  list-style: none; counter-reset: q;
  margin: 0 0 24px; padding: 0;
  max-width: var(--ig-measure);
  border-top: 1px solid var(--ig-rule);
}
.ig-questions li {
  counter-increment: q;
  display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--ig-rule);
}
.ig-questions li::before {
  content: '0' counter(q);
  font-family: var(--ig-mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.16em; color: var(--ig-commons);
  padding-top: 0.45em;
}
.ig-contribution-foot {
  display: flex; align-items: center; gap: 18px 24px; flex-wrap: wrap;
  padding-top: 20px; border-top: 1px solid var(--ig-rule);
}
@media (max-width: 520px) { .ig-contribution { padding: 22px 20px; } }

/* pending state: a document announced but not yet posted */
.ig-doc-pending { background: var(--ig-vellum); }
.ig-doc-pending .ig-doc-status {
  font-family: var(--ig-sans); font-size: 13px; font-weight: 500;
  color: var(--ig-reed-deep);
}

/* ── notes, citations, figures ────────────────────────────── */
.ig-note { max-width: var(--ig-measure); margin-block: 32px; }
.ig-note p:last-child { margin-bottom: 0; }

.ig-figure { margin: 0; }
.ig-figure-frame {
  background: var(--ig-bone); border: 1px solid var(--ig-rule);
  border-radius: var(--ig-radius); padding: clamp(20px, 4vw, 40px);
}
.ig-figure-frame img { display: block; margin-inline: auto; }
.ig-figcap { max-width: var(--ig-measure); }

.ig-citation { position: relative; }
.ig-citation-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; margin-bottom: 12px; flex-wrap: wrap;
}
.ig-copy {
  font-family: var(--ig-sans); font-size: 12px; font-weight: 600;
  letter-spacing: 0.04em;
  background: transparent; color: var(--ig-meridian-text);
  border: 1px solid var(--ig-rule-heavy); border-radius: var(--ig-radius);
  padding: 6px 12px; cursor: pointer;
  transition: color 160ms ease-out, border-color 160ms ease-out;
}
.ig-copy:hover { color: var(--ig-commons); border-color: var(--ig-commons); }

/* ── record tables ────────────────────────────────────────── */
.ig-table-wrap { overflow-x: auto; }
table.ig-table {
  width: 100%; border-collapse: collapse;
  font-size: var(--ig-step-0);
}
table.ig-table th, table.ig-table td {
  text-align: left; padding: 12px 14px;
  border-bottom: 1px solid var(--ig-rule);
  vertical-align: top;
}
table.ig-table th {
  font-family: var(--ig-sans); font-size: 10px; font-weight: 600;
  letter-spacing: var(--ig-track-label); text-transform: uppercase;
  color: var(--ig-reed-deep);
  border-bottom: 1px solid var(--ig-rule-heavy);
}
table.ig-table td.ig-td-mono { font-family: var(--ig-mono); font-size: 12.5px; white-space: nowrap; }

/* ── lists in argument ────────────────────────────────────── */
.ig-list { max-width: var(--ig-measure); padding-left: 0; list-style: none; margin: 0 0 1.05em; }
.ig-list li { position: relative; padding-left: 28px; margin-bottom: 12px; }
.ig-list li::before {
  content: '·'; position: absolute; left: 10px; top: -0.1em;
  color: var(--ig-commons); font-size: 1.4em; line-height: 1.2;
}

/* ── version strip ────────────────────────────────────────── */
.ig-versionstrip {
  display: flex; flex-wrap: wrap; gap: 8px 26px;
  padding-block: 16px;
  border-bottom: 1px solid var(--ig-rule);
  font-family: var(--ig-mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ig-commons);
}
.ig-versionstrip span { color: var(--ig-reed-deep); }

/* ── footer ───────────────────────────────────────────────── */
.ig-foot {
  background: var(--ig-deep); color: var(--ig-parchment);
  margin-top: auto;
  padding-block: clamp(44px, 6vw, 72px);
}
.ig-foot a { color: var(--ig-meridian); }
.ig-foot-grid {
  display: grid; gap: 32px;
  grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
}
@media (max-width: 760px) { .ig-foot-grid { grid-template-columns: minmax(0, 1fr); } }
.ig-foot h2 {
  font-family: var(--ig-sans); font-size: 10px; font-weight: 600;
  letter-spacing: var(--ig-track-label); text-transform: uppercase;
  color: rgba(251, 250, 246, 0.55);
  margin: 0 0 14px;
}
.ig-foot ul { list-style: none; margin: 0; padding: 0; }
.ig-foot li { margin-bottom: 9px; font-family: var(--ig-sans); font-size: 14px; }
.ig-foot-word { height: 40px; width: auto; display: block; margin: 0 0 14px -12px; }
.ig-foot-domain {
  font-family: var(--ig-mono); font-size: 12px; letter-spacing: 0.12em;
  color: rgba(251, 250, 246, 0.72);
}
.ig-foot-legal {
  margin-top: 40px; padding-top: 22px;
  border-top: 1px solid var(--ig-rule-invert);
  font-family: var(--ig-sans); font-size: 12.5px;
  color: rgba(251, 250, 246, 0.62);
  display: flex; flex-wrap: wrap; gap: 8px 28px;
}

/* ── the ring, drawn arc by arc, 01 to 05 ─────────────────── */
.ig-ring-draw path {
  --len: 60; /* arc length at r=68 over 48.6 degrees, rounded up */
  stroke-dasharray: var(--len);
  stroke-dashoffset: var(--len);
  animation: ig-draw 620ms ease-out forwards;
}
.ig-ring-draw path:nth-child(1) { animation-delay: 60ms; }
.ig-ring-draw path:nth-child(2) { animation-delay: 200ms; }
.ig-ring-draw path:nth-child(3) { animation-delay: 340ms; }
.ig-ring-draw path:nth-child(4) { animation-delay: 480ms; }
.ig-ring-draw path:nth-child(5) { animation-delay: 620ms; }
@keyframes ig-draw { to { stroke-dashoffset: 0; } }

.ig-rise { animation: ig-rise 420ms ease-out both; }
.ig-rise-2 { animation-delay: 90ms; }
@keyframes ig-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .ig-ring-draw path { animation: none; stroke-dashoffset: 0; }
  .ig-rise { animation: none; }
  * { transition-duration: 1ms !important; }
}

/* ── print ────────────────────────────────────────────────── */
@media print {
  .ig-masthead, .ig-nav, .ig-actions, .ig-copy { display: none; }
  .ig-foot { background: none; color: var(--ig-delta); }
  body { background: none; }
}

/* ── small screens ────────────────────────────────────────── */
@media (max-width: 520px) {
  .ig-masthead-inner { padding-block: 14px; gap: 10px; }
  .ig-identity-mark { width: 28px; height: 28px; }
  .ig-identity-word { height: 38px; margin: -7px -11px; }
  .ig-nav { gap: 0; margin-left: -10px; }
  .ig-nav a { font-size: 12.5px; padding: 7px 10px; }
  .ig-hero-figure { max-width: 176px; }
  .ig-btn { padding: 11px 16px; }
  .ig-function, .ig-doc { padding: 20px 20px; }
}