/* ============================================================
   MFI Website — V2 home (preview)
   Loaded ONLY by index-v2.html, alongside styles.css.
   "The Ledger" design: dark masthead nameplate, cream body,
   working registry as the page's primary content.
   Brand-safe: Poppins 300-800, four brand colors plus neutrals.
   ============================================================ */

:root {
  --paper: #FAFAF7;          /* documented off-white */
  --paper-line: #E5E5E2;     /* documented rule line */
  --ink: #1A1A1A;            /* documented text color, also masthead surface */
  --ink-soft: #555555;       /* documented secondary text */
  --ink-quiet: #888888;      /* documented tertiary text */
  --orange: #DF693B;         /* brand: retro orange */
  --blue: #5D92CD;           /* brand: vintage blue */
}

/* ---------- Reset original layout, take over the page ---------- */
body.v2 {
  background: var(--paper);
  color: var(--ink);
  font-family: 'Poppins', sans-serif;
  font-feature-settings: "tnum" 1, "ss01" 1;
  -webkit-font-smoothing: antialiased;
}
body.v2 .utility-bar { display: none; }
body.v2 > .header { display: none; }

.v2-wrap { max-width: 1320px; margin: 0 auto; padding: 0 40px; }
@media (max-width: 700px) { .v2-wrap { padding: 0 22px; } }

/* ============================================================
   MASTHEAD (dark nameplate, like a printed letterhead)
   ============================================================ */
.v2-masthead {
  background: var(--ink);
  color: var(--paper);
  padding: 22px 0 36px;
  border-bottom: 6px solid var(--orange);
  position: relative;
}
.v2-masthead::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 6px;
  background: linear-gradient(to right, var(--orange) 0%, var(--orange) 60%, var(--blue) 60%, var(--blue) 100%);
}
.v2-mast-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 28px;
  border-bottom: 1px solid rgba(250,250,247,0.18);
  margin-bottom: 32px;
  gap: 32px;
}
.v2-mast-meta {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(250,250,247,0.68);
}
.v2-mast-meta span { white-space: nowrap; }
.v2-mast-nav {
  display: flex;
  gap: 22px;
  font-size: 13px;
  font-weight: 500;
}
.v2-mast-nav a {
  color: rgba(250,250,247,0.78);
  text-decoration: none;
  letter-spacing: 0.02em;
}
.v2-mast-nav a:hover { color: var(--paper); }

/* Big nameplate */
.v2-mast-name {
  font-size: clamp(48px, 9.4vw, 132px);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 0.92;
  margin: 0;
  text-transform: uppercase;
  color: var(--paper);
  text-align: center;
}
.v2-mast-rule {
  height: 1px;
  background: rgba(250,250,247,0.4);
  margin: 24px 0 22px;
}
.v2-mast-bottom {
  text-align: center;
}
.v2-mast-manifesto {
  font-size: clamp(18px, 1.8vw, 22px);
  font-style: italic;
  font-weight: 400;
  line-height: 1.4;
  color: rgba(250,250,247,0.92);
  max-width: 820px;
  margin: 0 auto 14px;
}
.v2-mast-issn {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(250,250,247,0.55);
  text-align: center;
  line-height: 1.7;
}
.v2-mast-issn strong {
  color: var(--paper);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 800px) {
  .v2-mast-top { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   LEDE — single column institutional preamble
   ============================================================ */
.v2-lede {
  padding: 64px 0 32px;
  border-bottom: 1px solid var(--paper-line);
}
.v2-lede p {
  font-size: clamp(19px, 1.6vw, 22px);
  line-height: 1.55;
  color: var(--ink);
  max-width: 880px;
  margin: 0;
  font-weight: 400;
}
.v2-lede p strong { font-weight: 600; }

/* ============================================================
   STATUS STRIP — live ledger indicator
   ============================================================ */
.v2-status {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 22px 0;
  border-bottom: 1px solid var(--paper-line);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-soft);
  gap: 16px;
  flex-wrap: wrap;
}
.v2-status-count strong {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-transform: none;
  font-variant-numeric: tabular-nums;
  margin-right: 8px;
  display: inline-block;
  vertical-align: -3px;
}
.v2-status-count .unit {
  font-size: 12px;
  letter-spacing: 0.18em;
  font-weight: 600;
}

/* ============================================================
   FEATURED — one big card + small stack
   ============================================================ */
.v2-featured {
  padding: 40px 0 48px;
  display: grid;
  grid-template-columns: 1.45fr 1fr;
  gap: 36px;
  border-bottom: 1px solid var(--paper-line);
}
.v2-feat-link, .v2-feat-row {
  display: block;
  text-decoration: none;
  color: inherit;
}
.v2-feat-main .v2-feat-art {
  width: 100%;
  aspect-ratio: 1/1;
  background: var(--ink);
  overflow: hidden;
  position: relative;
}
.v2-feat-main .v2-feat-art img {
  width: 100%; height: 100%; object-fit: cover;
  display: block;
  filter: contrast(1.02);
}
.v2-feat-main .v2-feat-art::before {
  content: "FEATURED";
  position: absolute;
  top: 18px; left: 18px;
  z-index: 2;
  background: var(--paper);
  color: var(--ink);
  padding: 6px 10px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
}
.v2-feat-main .v2-feat-meta {
  padding: 22px 4px 0;
}
.v2-feat-id {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--orange);
  margin-bottom: 10px;
  font-variant-numeric: tabular-nums;
}
.v2-feat-title {
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 8px;
}
.v2-feat-artist {
  font-size: 17px;
  font-weight: 500;
  color: var(--ink-soft);
  margin-bottom: 6px;
}
.v2-feat-tail {
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--ink-quiet);
  margin-top: 6px;
  font-variant-numeric: tabular-nums;
}
.v2-feat-tail .sep { opacity: 0.5; margin: 0 8px; }

/* Small list on the right */
.v2-feat-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.v2-feat-row {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--paper-line);
  align-items: flex-start;
}
.v2-feat-row:last-child { border-bottom: 0; padding-bottom: 0; }
.v2-feat-row .art {
  width: 96px; height: 96px;
  background: var(--ink);
  overflow: hidden;
}
.v2-feat-row .art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.v2-feat-row .meta { min-width: 0; }
.v2-feat-row .row-id {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--orange);
  margin-bottom: 4px;
  font-variant-numeric: tabular-nums;
}
.v2-feat-row .row-title {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--ink);
  margin-bottom: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.v2-feat-row .row-artist {
  font-size: 13px;
  color: var(--ink-soft);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

@media (max-width: 880px) {
  .v2-featured { grid-template-columns: 1fr; }
}

/* ============================================================
   LEDGER TABLE — printed log of recent certifications
   ============================================================ */
.v2-ledger {
  padding: 52px 0 56px;
  border-bottom: 1px solid var(--paper-line);
}
.v2-ledger-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 22px;
  gap: 24px;
}
.v2-ledger-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
}
.v2-ledger-more {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1.5px solid var(--orange);
  padding-bottom: 1px;
}
.v2-ledger-more:hover { color: var(--orange); }
.v2-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}
.v2-table thead th {
  text-align: left;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-quiet);
  padding: 12px 14px 12px 0;
  border-bottom: 1px solid var(--ink);
  white-space: nowrap;
}
.v2-table tbody td {
  padding: 12px 14px 12px 0;
  border-bottom: 1px solid var(--paper-line);
  color: var(--ink);
  vertical-align: top;
  line-height: 1.4;
}
.v2-table tbody tr {
  cursor: pointer;
  transition: background 0.12s, box-shadow 0.12s;
}
.v2-table tbody tr:hover {
  background: #F5F5F5;
  box-shadow: inset 3px 0 0 var(--orange);
}
.v2-table tbody tr:hover .col-id { color: var(--orange); }
.v2-table tbody tr:hover .col-artist,
.v2-table tbody tr:hover .col-title { color: var(--ink); }
.v2-table .col-id {
  width: 168px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  color: var(--orange);
  white-space: nowrap;
}
.v2-table .col-date {
  width: 110px;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.v2-table .col-tier {
  width: 130px;
}
.v2-table .col-tier .pill {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 3px 8px;
  border: 1px solid var(--ink);
  color: var(--ink);
  background: transparent;
}
.v2-table .col-tier .pill.v   { border-color: var(--ink); }
.v2-table .col-tier .pill.c   { border-color: var(--ink-soft); color: var(--ink-soft); }
.v2-table .col-tier .pill.p   { border-color: var(--blue); color: var(--blue); }
.v2-table .col-tier .pill.a   { border-color: var(--orange); color: var(--orange); }
.v2-table .col-artist { width: 24%; font-weight: 600; }
.v2-table .col-title  { width: 30%; }
.v2-table .col-label  { color: var(--ink-soft); }
.v2-table a { color: inherit; text-decoration: none; }
.v2-table a:hover { color: var(--orange); }
@media (max-width: 900px) {
  .v2-table { font-size: 12.5px; }
  .v2-table .col-label, .v2-table thead th.col-label { display: none; }
  .v2-table .col-tier, .v2-table thead th.col-tier { display: none; }
}

/* ============================================================
   MARKS — two stamps treated like impressed seals
   ============================================================ */
.v2-marks {
  padding: 64px 0 64px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 56px;
  border-bottom: 1px solid var(--paper-line);
}
.v2-mark { display: grid; grid-template-columns: 140px 1fr; gap: 28px; align-items: start; }
.v2-mark img.v2-mark-badge {
  width: 140px; height: 140px;
  object-fit: contain;
  display: block;
}
/* Clickable block: whole .v2-mark navigates to data-href */
.v2-mark[data-href] {
  cursor: pointer;
  transition: background 0.12s, box-shadow 0.12s;
  padding-left: 0;
}
.v2-mark[data-href]:hover { background: #F5F5F5; }
.v2-mark.cep[data-href]:hover { box-shadow: inset 3px 0 0 var(--orange); }
.v2-mark.csf[data-href]:hover { box-shadow: inset 3px 0 0 var(--blue); }
.v2-mark[data-href] h3 a { color: inherit; text-decoration: none; }
.v2-mark[data-href]:focus-visible { outline: 2px solid var(--orange); outline-offset: 4px; }

/* CEP is the lead, larger and primary */
.v2-mark.cep {
  grid-template-columns: 220px 1fr;
  gap: 48px;
  padding-bottom: 48px;
  border-bottom: 1px solid var(--paper-line);
}
.v2-mark.cep img.v2-mark-badge {
  width: 220px; height: 220px;
}
.v2-mark.cep h3 {
  font-size: clamp(26px, 2.6vw, 36px);
}
.v2-mark.cep p {
  font-size: 16px;
  max-width: 620px;
}
.v2-mark.cep .v2-mark-version { font-size: 12.5px; }
.v2-mark-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  margin-top: 4px;
  align-items: center;
}
.v2-mark-link-secondary {
  color: var(--ink-soft) !important;
  font-weight: 500 !important;
  border-bottom-color: var(--paper-line) !important;
}
.v2-mark-link-secondary:hover {
  color: var(--ink) !important;
  border-bottom-color: var(--ink) !important;
}

/* CSF: same size as CEP, follows by order only */
.v2-mark.csf {
  grid-template-columns: 220px 1fr;
  gap: 48px;
}
.v2-mark.csf img.v2-mark-badge {
  width: 220px; height: 220px;
}
.v2-mark.csf h3 {
  font-size: clamp(26px, 2.6vw, 36px);
}
.v2-mark.csf p {
  font-size: 16px;
  max-width: 620px;
}
.v2-mark.csf .v2-mark-version { font-size: 12.5px; }
.v2-mark h3 {
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 0 0 4px;
  color: var(--ink);
}
.v2-mark .v2-mark-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.v2-mark.csf .v2-mark-tag { color: var(--orange); }
.v2-mark.cep .v2-mark-tag { color: var(--blue); }
.v2-mark .v2-mark-version {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ink-quiet);
  margin: 0 0 14px;
  font-variant-numeric: tabular-nums;
}
.v2-mark p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0 0 14px;
  max-width: 460px;
}
.v2-mark a.v2-mark-link {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1.5px solid currentColor;
  padding-bottom: 1px;
}
.v2-mark.csf a.v2-mark-link { color: var(--orange); }
.v2-mark.cep a.v2-mark-link { color: var(--blue); }
@media (max-width: 800px) {
  .v2-marks { gap: 40px; }
  .v2-mark { grid-template-columns: 140px 1fr; gap: 24px; }
  .v2-mark img.v2-mark-badge { width: 140px; height: 140px; }
  .v2-mark.cep { padding-bottom: 36px; }
}

/* ============================================================
   NOTES — small editorial column, "From the Institute"
   ============================================================ */
.v2-notes {
  padding: 56px 0 72px;
}
.v2-notes-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 28px;
}
.v2-notes-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}
.v2-note { border-top: 2px solid var(--ink); padding-top: 18px; }
.v2-note-tag {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 10px;
  font-variant-numeric: tabular-nums;
}
.v2-note h3 {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.18;
  margin: 0 0 10px;
}
.v2-note h3 a { color: var(--ink); text-decoration: none; }
.v2-note h3 a:hover { color: var(--orange); }
.v2-note p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0;
}
@media (max-width: 800px) {
  .v2-notes-list { grid-template-columns: 1fr; gap: 28px; }
}

/* ============================================================
   Footer — keep original dark footer styling
   (Inherits .footer styles from styles.css)
   ============================================================ */
body.v2 .footer { background: var(--ink); }
body.v2 .footer-newsletter-form input[type=email],
body.v2 .footer-newsletter-form button { border-radius: 0; }