/* ProtectMyPortfolio — base layer.
 *
 * Accessibility floors that are not negotiable (design v3 §6):
 *   body text >= 16px (17px primary), AAA contrast (7:1) for reading text,
 *   tap targets >= 44px with primary actions >= 48px, and the most important
 *   thing on screen is the biggest thing.
 *
 * Dynamic Type rule: author component sizes in em against the component's own
 * root, never fixed px. The trap this exposes — min-height in em resolves
 * against THE ELEMENT'S OWN font-size, so a button at font-size .88em needs
 * min-height 3.24em to reach 48px, not 2.85em. See --tap-primary usages. */

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

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

body {
  margin: 0;
  background: var(--bond);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 28px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---- Layout -------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

section { padding-block: var(--block-gap); }

.stack > * + * { margin-top: var(--s-4); }

/* ---- Type ---------------------------------------------------------------- */
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: 40px; line-height: 44px; }
h2 { font-size: 30px; line-height: 36px; }
h3 { font-size: 24px; line-height: 30px; }

.heading-s {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 19px;
  line-height: 26px;
  color: var(--ink);
  margin: 0;
}

p { margin: 0 0 var(--s-4); }
p:last-child { margin-bottom: 0; }

.lead { font-size: 19px; line-height: 30px; color: var(--text); }
.secondary { color: var(--text-secondary); }
.small { font-size: 16px; line-height: 26px; } /* the floor — never smaller for reading text */

.eyebrow {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 11.5px;      /* HARD FLOOR — do not go below */
  line-height: 14px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--harbor);
  margin: 0 0 var(--s-3);
}

.label {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13px;
  line-height: 16px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.meta {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 12.5px;
  line-height: 18px;
  color: var(--text-meta);
}

a { color: var(--harbor); text-underline-offset: .18em; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible {
  outline: 2.5px solid var(--harbor);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ---- Buttons -------------------------------------------------------------
 * Primary actions are >= 48px. min-height is expressed in em against the
 * button's own font-size, per the Dynamic Type finding. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 17px;
  line-height: 1.2;
  min-height: 2.82em;           /* 48px at 17px — scales with Dynamic Type */
  padding: var(--s-3) var(--s-6);
  border-radius: var(--r-button);
  border: 1.5px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 160ms var(--ease-measuring),
              border-color 160ms var(--ease-measuring);
}

.btn-primary {
  background: var(--ink);
  color: var(--bond);
  border-color: var(--ink);
}
.btn-primary:hover { background: #0B1720; }

.btn-secondary {
  background: transparent;
  color: var(--ink);
  border-color: var(--rule-strong);
}
.btn-secondary:hover { border-color: var(--ink); }

.btn-block { display: flex; width: 100%; }

/* ---- Surfaces ------------------------------------------------------------ */
.card {
  background: var(--card);
  border: var(--e0-border);
  border-radius: var(--r-card);
  padding: var(--card-pad);
  box-shadow: var(--e1);
}

.plate {
  background: var(--plate);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-plate);
  padding: var(--s-3) var(--s-4);
}

/* The single dark full-bleed band. ONE per page, maximum (design v3 §7). */
.band-dark {
  background: var(--ink);
  color: var(--bond);
}
.band-dark h2, .band-dark h3, .band-dark .heading-s { color: var(--bond); }
.band-dark .secondary { color: #B9C2CB; }
.band-dark .eyebrow { color: #8FB3D1; }
.band-dark .btn-primary { background: var(--bond); color: var(--ink); border-color: var(--bond); }
.band-dark .btn-primary:hover { background: #FFFFFF; }

/* ---- Icons --------------------------------------------------------------- */
.icon { width: 24px; height: 24px; flex: none; color: var(--ink); }
.icon-lg { width: 32px; height: 32px; }

/* ---- Score readout -------------------------------------------------------
 * Type is NEVER coloured. The numeral and the band word are ink; the band is
 * carried by a 3px mark-value rule beneath the word (design v3 §3). The word
 * is always present and never below 13px (§2). The gloss is never omitted (§5). */
.score-readout { text-align: center; }

.score-numeral {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 76px;
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: -.01em;
}

.score-word {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  line-height: 20px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink);
  margin-top: var(--s-3);
  padding-bottom: var(--s-2);
  border-bottom: 3px solid var(--mark, var(--rule-strong));
}

.score-gloss {
  font-size: 16px;
  line-height: 24px;
  color: var(--text-secondary);
  margin: var(--s-3) 0 0;
}

/* ---- Provenance plate ----------------------------------------------------
 * Site score surfaces and the print plan only. NOT in email (BUILD-FIXES C2). */
.provenance {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 18px;
  color: var(--text-meta);
  background: var(--plate);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-plate);
  padding: var(--s-2) var(--s-3);
}
.provenance .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.provenance[data-status="live"]      .dot { background: var(--band-1-mark); }
.provenance[data-status="stale"]     .dot { background: var(--band-2-mark); }
.provenance[data-status="prototype"] .dot { background: transparent; border: 1.5px solid var(--ink); }

/* ---- Utilities ----------------------------------------------------------- */
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: var(--s-4); top: -100px;
  background: var(--ink); color: var(--bond);
  padding: var(--s-3) var(--s-4); border-radius: var(--r-button);
  z-index: 100; transition: top 160ms var(--ease-opening);
}
.skip-link:focus { top: var(--s-4); }

hr {
  border: 0;
  border-top: 1px solid var(--rule);
  margin-block: var(--s-7);
}

/* ---- Desktop ------------------------------------------------------------- */
@media (min-width: 1024px) {
  h1 { font-size: 52px; line-height: 58px; }
  h2 { font-size: 36px; line-height: 44px; }
  .wrap { padding-inline: var(--s-7); }
  section { padding-block: var(--s-10); }
}