/* amisdefreinet.org — "Set by Hand"
   Palette roles: ground / ink / accent / secondary / flag */

:root {
  --paper:      #EAE3D4;  /* ground  */
  --ink:        #1D1A16;  /* ink     */
  --accent:     #A3182B;  /* accent — oxblood   */
  --secondary:  #21388F;  /* secondary — ink blue */
  --flag:       #C87F0A;  /* flag — ochre       */

  --paper-2:    #DFD7C5;
  --paper-3:    #F2ECDF;
  --muted:      #5C564A;
  --rule:       rgba(29, 26, 22, 0.30);
  --rule-soft:  rgba(29, 26, 22, 0.16);
  --tint:       rgba(29, 26, 22, 0.045);

  --sans: "Epilogue", system-ui, sans-serif;
  --serif: "Lora", Georgia, serif;

  --gutter: 40px;
  --measure: 34em;
  --maxw: 1240px;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.65;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }

a { color: var(--secondary); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

h1, h2, h3, h4 { font-family: var(--sans); font-weight: 600; letter-spacing: -0.015em; line-height: 1.12; margin: 0; text-wrap: pretty; }

p { margin: 0 0 1.05em; }
p:last-child { margin-bottom: 0; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gutter); }

.skip {
  position: absolute; left: -9999px; top: 0; background: var(--ink); color: var(--paper);
  padding: 10px 16px; font-family: var(--sans); font-size: 14px; z-index: 50;
}
.skip:focus { left: 12px; top: 12px; }

/* ---------- masthead ---------- */

.masthead { padding-top: 26px; }

.masthead-top {
  border-top: 3px solid var(--secondary);
  border-bottom: 1px solid var(--secondary);
  padding: 15px 0;
  display: flex; align-items: center; justify-content: space-between; gap: 28px;
}

.wordmark {
  font-family: var(--sans); font-weight: 700; font-size: 33px;
  letter-spacing: 0.13em; text-transform: uppercase; line-height: 1;
  color: var(--ink); text-decoration: none;
}
.wordmark:hover { text-decoration: none; color: var(--accent); }

.masthead-strap {
  font-family: var(--sans); font-size: 11px; font-weight: 500; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--muted); text-align: right; line-height: 1.5;
}

.nav {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; padding: 15px 0;
  border-bottom: 1px solid var(--rule);
  font-family: var(--sans); font-size: 14px; font-weight: 600;
  letter-spacing: 0.11em; text-transform: uppercase;
}
.nav a { display: flex; align-items: center; gap: 9px; color: var(--ink); }
.nav svg { width: 22px; height: 22px; }
.nav a:hover { color: var(--accent); text-decoration: none; }
.nav a[aria-current="page"] { color: var(--accent); }
.nav svg { flex: none; }

/* ---------- shared furniture ---------- */

.band { padding-top: 52px; }

.band-head {
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  border-bottom: 3px solid var(--secondary); padding-bottom: 10px; margin-bottom: 24px;
}
.band-head .band-icon { color: var(--secondary); align-self: center; display: flex; }
.band-head h2 { font-size: 23px; }
.band-kicker {
  margin-left: auto; font-family: var(--sans); font-size: 11px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted);
}

.eyebrow {
  font-family: var(--sans); font-size: 10.5px; font-weight: 700; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--muted);
}
.eyebrow--accent { color: var(--accent); }

.sec-tag {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--accent);
}
.sec-tag:hover { text-decoration: none; color: var(--ink); }

.meta {
  font-family: var(--sans); font-size: 13.5px; letter-spacing: 0.03em; color: var(--muted);
}

/* ---------- homepage lead ---------- */

.lead-grid {
  display: grid; grid-template-columns: 1fr 360px; gap: 40px; align-items: start;
  padding-top: 34px;
}
.lead-title { font-size: 52px; line-height: 1.03; letter-spacing: -0.025em; }
.lead-dek { font-size: 19px; line-height: 1.6; color: #33302A; margin-top: 18px; max-width: 34em; }

.signature-panel { background: var(--accent); color: #F7E9E6; padding: 26px; }
.signature-panel .eyebrow { color: #F0B7AF; }
.signature-panel p { font-size: 16.5px; line-height: 1.6; margin-top: 12px; }

/* ---------- figure system ----------
   three treatments: .fig-plate · .fig-band · .fig-inset  */

figure { margin: 0; }

.article-figure img { width: 100%; height: auto; object-fit: cover; background: var(--paper-2); }

.fig-num {
  font-family: var(--sans); font-size: 10.5px; font-weight: 700; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--accent);
}
.fig-cap {
  font-family: var(--sans); font-size: 15.5px; font-weight: 500; line-height: 1.45; color: var(--ink);
}
.fig-credit {
  display: block; font-family: var(--sans); font-size: 10.5px; font-weight: 500;
  letter-spacing: 0.11em; text-transform: uppercase; color: var(--muted); margin-top: 7px;
}

/* 1 · plate — double-ruled frame, caption inside the frame */
.fig-plate { border: 1px solid var(--ink); padding: 6px; margin: 34px 0; }
.fig-plate > div { border: 3px solid var(--ink); padding: 18px 18px 0; }
.fig-plate img { aspect-ratio: 1.6; }
.fig-plate figcaption { padding: 13px 0 15px; }
.fig-plate .fig-cap .lbl { color: var(--accent); }

/* 2 · band — edge-to-edge, hanging caption in a number gutter */
.fig-band { width: 100vw; margin-left: calc(50% - 50vw); margin-block: 44px; }
.fig-band img { aspect-ratio: 3.2; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.fig-band figcaption {
  max-width: var(--maxw); margin: 14px auto 0; padding-inline: var(--gutter);
  display: grid; grid-template-columns: 96px 1fr; gap: 18px; align-items: baseline;
}
.fig-band .fig-cap { max-width: 52em; }

/* 3 · inset — mat + accent bar, sits in the column with prose beside it */
.fig-inset {
  float: left; width: 54%; margin: 8px 30px 22px 0;
  background: var(--paper-3); padding: 14px 14px 0; border: 1px solid var(--rule-soft);
}
.fig-inset img { aspect-ratio: 1.6; border-bottom: 3px solid var(--accent); }
.fig-inset figcaption { padding: 11px 0 13px; }
.fig-inset .fig-cap { font-size: 14.5px; }

.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; margin: 30px 0; }
.gallery img { aspect-ratio: 1.35; }
.gallery figcaption { margin-top: 9px; }

/* ---------- article ---------- */

.article-head { padding-top: 34px; display: grid; grid-template-columns: 96px 1fr; gap: 24px; }
.entry-no {
  font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--accent); padding-top: 9px;
}
.article-title { font-size: 46px; line-height: 1.05; letter-spacing: -0.025em; margin-top: 13px; max-width: 17em; }

.prose { max-width: var(--measure); margin: 0 auto; font-size: 19px; line-height: 1.7; }
.prose::after { content: ""; display: block; clear: both; }
.prose h2 {
  font-size: 26px; margin: 42px 0 14px; letter-spacing: -0.02em;
  padding-top: 14px; border-top: 1px solid var(--rule);
}
.prose em { font-style: italic; }
.prose a { border-bottom: 1px solid rgba(33, 56, 143, 0.4); }

.lead {
  font-family: var(--sans); font-size: 20px; font-weight: 400; line-height: 1.55;
  color: #33302A; margin-top: 15px; max-width: 32em;
}

.article-body { padding-bottom: 20px; }
.article-body > .wrap { padding-top: 8px; }

/* register panel — the notes material, breaking the measure */
.register-panel { background: var(--paper-3); border-top: 3px solid var(--secondary); margin: 44px 0; padding: 22px 26px 26px; }
.register-panel h3 { font-size: 19px; margin: 6px 0 0; }
.register-panel ol { list-style: none; counter-reset: rp; margin: 16px 0 0; padding: 0; }
.register-panel li {
  counter-increment: rp; position: relative; padding: 11px 0 11px 46px;
  border-bottom: 1px solid var(--rule-soft);
  font-family: var(--sans); font-size: 15.5px; line-height: 1.5;
}
.register-panel li:last-child { border-bottom: 0; }
.register-panel li::before {
  content: counter(rp, decimal-leading-zero);
  position: absolute; left: 0; top: 13px;
  font-weight: 700; color: var(--accent); letter-spacing: 0.08em; font-size: 13px;
}
.register-panel li b { font-weight: 600; }

/* components from the spec */
.pullquote { margin: 38px 0; border-top: 3px solid var(--accent); border-bottom: 3px solid var(--accent); padding: 20px 0; }
.pullquote p { font-family: var(--sans); font-size: 25px; font-weight: 500; line-height: 1.32; letter-spacing: -0.02em; color: var(--secondary); margin: 0; }

.blockquote { margin: 34px 0; padding-left: 22px; border-left: 3px solid var(--secondary); }
.blockquote p { font-size: 20px; font-style: italic; margin: 0; }
.blockquote cite { display: block; font-family: var(--sans); font-style: normal; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-top: 10px; }

.callout { background: var(--secondary); color: #E9ECF8; padding: 22px 24px; margin: 34px 0; }
.callout p { font-family: var(--sans); font-size: 17px; line-height: 1.55; margin: 0; }

.note {
  font-family: var(--sans); font-size: 15.5px; line-height: 1.55; color: var(--muted);
  border-left: 3px solid var(--flag); padding: 2px 0 2px 15px; margin: 26px 0;
}

.versus, .datatable { width: 100%; border-collapse: collapse; margin: 30px 0; font-family: var(--sans); font-size: 15.5px; }
.versus th, .datatable th {
  text-align: left; font-size: 10.5px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--muted); padding: 10px 14px 10px 0; border-bottom: 1px solid var(--rule);
}
.versus td, .datatable td { padding: 12px 14px 12px 0; border-bottom: 1px solid var(--rule-soft); vertical-align: top; }
.versus tbody tr:nth-child(even), .datatable tbody tr:nth-child(even) { background: var(--tint); }
.datatable td:first-child, .versus td:first-child { font-weight: 600; }

.statrow { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; background: var(--rule); margin: 34px 0; }
.statblock { background: var(--paper); padding: 18px 16px; }
.stat-num { display: block; font-family: var(--sans); font-size: 40px; font-weight: 700; letter-spacing: -0.03em; color: var(--accent); line-height: 1; }
.stat-label { display: block; font-family: var(--sans); font-size: 13px; line-height: 1.4; color: var(--muted); margin-top: 8px; }

.timeline { list-style: none; margin: 32px 0; padding: 0; }
.timeline li { display: grid; grid-template-columns: 220px 1fr; gap: 20px; padding: 13px 0; border-bottom: 1px solid var(--rule-soft); }
.t-when { font-family: var(--sans); font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--secondary); line-height: 1.4; }
.t-what { font-family: var(--sans); font-size: 15.5px; line-height: 1.5; }

.chart { margin: 34px 0; }
.chart svg { width: 100%; height: auto; display: block; }
.chart figcaption { font-family: var(--sans); font-size: 13.5px; color: var(--muted); margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--rule-soft); }

.profile-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; margin: 30px 0; }
.profile-card { background: var(--paper-3); border: 1px solid var(--rule-soft); padding: 18px; display: flex; flex-direction: column; }
.profile-card .p-photo { width: 100%; aspect-ratio: 1.3; object-fit: cover; margin-bottom: 14px; }
.profile-card h3 { font-size: 19px; }
.profile-card .p-role { font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); margin: 6px 0 10px; }
.profile-card p { font-size: 15.5px; line-height: 1.55; }
.profile-card .p-links { margin-top: auto; padding-top: 12px; font-family: var(--sans); font-size: 14px; }

.org-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin: 28px 0; }
.org-card { display: grid; grid-template-columns: 46px 1fr; gap: 12px; align-items: center; border: 1px solid var(--rule-soft); background: var(--paper-3); padding: 12px 14px; }
.org-card:hover { text-decoration: none; border-color: var(--accent); }
.org-logo { width: 46px; height: 46px; object-fit: contain; background: var(--ink); }
.org-name { display: block; font-family: var(--sans); font-size: 15.5px; font-weight: 600; color: var(--ink); }
.org-host { display: block; font-family: var(--sans); font-size: 12.5px; color: var(--muted); }

.entity-ref { font-family: var(--sans); font-size: 0.94em; font-weight: 600; }

.further-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.further-grid a {
  display: block; border-top: 2px solid var(--accent); padding-top: 12px;
  font-family: var(--sans); font-size: 17px; font-weight: 600; line-height: 1.3; color: var(--ink);
}
.further-grid a:hover { color: var(--accent); text-decoration: none; }

.related-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.related-links a { display: grid; grid-template-columns: 30px 1fr; gap: 10px; font-family: var(--sans); font-size: 16px; font-weight: 500; color: var(--ink); }
.related-links a:hover { color: var(--accent); text-decoration: none; }
.related-links .rl-no { color: var(--accent); font-weight: 700; font-size: 13px; padding-top: 3px; }

/* ---------- index / listing ---------- */

.entry-table { width: 100%; border-collapse: collapse; }
.entry-table th {
  font-family: var(--sans); font-size: 10.5px; font-weight: 700; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--muted); text-align: left;
  padding: 11px 14px 11px 0; border-bottom: 1px solid var(--rule);
}
.entry-table td { padding: 15px 14px 15px 0; border-bottom: 1px solid var(--rule-soft); vertical-align: top; }
.entry-table tbody tr:nth-child(even) { background: var(--tint); }
.entry-table .c-no { width: 54px; font-family: var(--sans); font-weight: 700; color: var(--accent); }
.entry-table .c-plate { width: 110px; padding-right: 18px; }
.entry-table .c-plate img { width: 100%; aspect-ratio: 1.6; object-fit: cover; border: 1px solid var(--rule); }
.entry-table .c-title { width: 300px; }
.entry-table .c-title a { font-family: var(--sans); font-size: 20px; font-weight: 600; line-height: 1.25; color: var(--ink); display: block; }
.entry-table .c-title a:hover { color: var(--accent); text-decoration: none; }
.entry-table .c-what { font-size: 16px; line-height: 1.55; color: #33302A; }
.entry-table .c-sec { width: 190px; }
.entry-table:last-child td { padding-bottom: 15px; }

.section-index a {
  display: grid; grid-template-columns: 34px 260px minmax(0, 1fr) auto; gap: 26px; align-items: center;
  padding: 18px 0; border-bottom: 1px solid var(--rule-soft); color: var(--ink);
}
.section-index .si-count {
  display: inline-flex; align-items: center; gap: 10px; white-space: nowrap;
  font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--muted);
}
.section-index a:hover .si-count { color: var(--accent); }
.section-index a:hover { text-decoration: none; color: var(--accent); }
.section-index a:hover .si-blurb { color: #33302A; }
.section-index .si-icon { color: var(--accent); display: flex; }
.section-index .si-name { font-family: var(--sans); font-size: 20px; font-weight: 600; }
.section-index .si-blurb { font-size: 15.5px; line-height: 1.5; color: #3B382F; }

.cat-list { list-style: none; margin: 0; padding: 0; }

.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 28px; }
.card { display: flex; flex-direction: column; background: transparent; color: var(--ink); }
.card:hover { text-decoration: none; }
.card img { width: 100%; aspect-ratio: 1.6; object-fit: cover; background: var(--paper-2); }
.card .card-body { padding-top: 13px; display: flex; flex-direction: column; flex: 1; }
.card h3 { font-size: 21px; line-height: 1.25; min-height: 2.5em; }
.card:hover h3 { color: var(--accent); }
.card p { font-size: 15.5px; line-height: 1.55; color: #3B382F; margin-top: 8px; }
.card .meta { margin-top: auto; padding-top: 12px; font-size: 12.5px; letter-spacing: 0.08em; text-transform: uppercase; }

/* ---------- supporters ---------- */

.supporters { background: var(--paper-3); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); margin-top: 56px; padding-block: 44px; }
.sponsor-tier { display: flex; flex-wrap: wrap; gap: 18px; }
.sponsor-tier + .sponsor-tier { margin-top: 22px; }
.tier-label { font-family: var(--sans); font-size: 10.5px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); margin: 26px 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--rule-soft); }

.sponsor {
  min-width: 0;
  display: grid; grid-template-columns: 232px minmax(200px, 1fr); gap: 18px; align-items: center;
  border: 1px solid var(--rule-soft); background: var(--paper); padding: 14px;
}
.sponsor:hover { text-decoration: none; border-color: var(--accent); }
.sponsor img {
  width: 100%; height: 64px; max-height: 64px; object-fit: contain;
  background: var(--ink); padding: 9px 12px;
}
.sponsor-name { display: block; font-family: var(--sans); font-size: 15.5px; font-weight: 600; color: var(--ink); }
.sponsor-blurb { display: block; font-family: var(--sans); font-size: 14px; line-height: 1.5; color: var(--muted); margin-top: 6px; }

/* ---------- footer ---------- */

.site-foot { border-top: 3px solid var(--secondary); margin-top: 56px; padding: 26px 0 40px; }
.foot-grid { display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: start; }
.site-foot p { font-family: var(--sans); font-size: 13px; line-height: 1.6; color: var(--muted); max-width: 46em; }
.foot-links { display: flex; flex-wrap: wrap; gap: 8px 22px; font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
.foot-links a { color: var(--ink); }
.foot-links a:hover { color: var(--accent); }

/* ---------- expander ---------- */

.expander { border: 0; margin: 0; padding: 0; }
.expander > summary {
  cursor: pointer; list-style: none; font-family: var(--sans); font-size: 12px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); padding: 14px 0 0;
}
.expander > summary::-webkit-details-marker { display: none; }
.expander > summary::after { content: " ▾"; }
.expander[open] > summary::after { content: " ▴"; }

/* ---------- responsive ---------- */

@media (max-width: 1000px) {
  :root { --gutter: 26px; }
  .lead-grid { grid-template-columns: 1fr; gap: 26px; }
  .lead-title { font-size: 42px; }
  .entry-table .c-title { width: 240px; }
}

@media (max-width: 760px) {
  :root { --gutter: 20px; }
  body { font-size: 17px; }
  .masthead-top { flex-direction: column; align-items: flex-start; gap: 10px; }
  .masthead-strap { text-align: left; }
  .wordmark { font-size: 26px; letter-spacing: 0.1em; }
  .nav { justify-content: flex-start; gap: 10px 16px; font-size: 12px; letter-spacing: 0.08em; }
  .nav svg { width: 18px; height: 18px; }
  .lead-title { font-size: 34px; }
  .article-head { grid-template-columns: 1fr; gap: 8px; }
  .entry-no { padding-top: 0; }
  .article-title { font-size: 32px; }
  .prose { font-size: 17.5px; }
  .prose h2 { font-size: 22px; }
  .lead { font-size: 18px; }
  .fig-inset { float: none; width: 100%; margin: 26px 0; }
  .fig-band figcaption { grid-template-columns: 1fr; gap: 6px; }
  .fig-band img { aspect-ratio: 2.1; }
  .register-panel { padding: 18px 16px 20px; }
  .register-panel li { padding-left: 34px; font-size: 15px; }
  .timeline li { grid-template-columns: 1fr; gap: 4px; }
  .section-index a { grid-template-columns: 28px 1fr; gap: 6px 12px; }
  .section-index .si-blurb, .section-index .si-count { grid-column: 2; }
  .section-index .si-count { margin-top: 4px; }
  .sponsor { grid-template-columns: 1fr; gap: 12px; max-width: none; }
  .sponsor img { height: 56px; }
  .foot-grid { grid-template-columns: 1fr; gap: 20px; }
  .entry-table thead { display: none; }
  .entry-table tr { display: grid; grid-template-columns: 92px 1fr; gap: 0 16px; padding: 16px 0; border-bottom: 1px solid var(--rule-soft); }
  .entry-table td { border: 0; padding: 0 0 6px; }
  .entry-table .c-no { grid-column: 1; grid-row: 1; }
  .entry-table .c-plate { grid-column: 1; grid-row: 2 / span 3; width: 92px; }
  .entry-table .c-title, .entry-table .c-what, .entry-table .c-sec { grid-column: 2; width: auto; }
  .versus, .datatable { font-size: 14.5px; }
  .stat-num { font-size: 32px; }
}


/* ---------- homepage feature ---------- */
.feature-grid { display: grid; grid-template-columns: 1fr 400px; gap: 40px; align-items: start; }
.feature-fig .fig-plate { margin: 0; }
.feature-text h2 { font-size: 40px; line-height: 1.05; letter-spacing: -0.028em; margin-top: 14px; }
.feature-text .lead { font-size: 18.5px; }
.feature-text .meta { margin-top: 14px; }
.readon-wrap { margin-top: 22px; }
.readon {
  display: inline-flex; align-items: center; gap: 10px; background: var(--accent); color: #FBF1EE;
  font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; padding: 13px 20px;
}
.readon:hover { background: var(--ink); color: var(--paper); text-decoration: none; }
.table-note { font-family: var(--sans); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-top: 12px; }

/* ---------- section / index heads ---------- */
.cat-head { display: grid; grid-template-columns: 62px 1fr; gap: 20px; padding-top: 34px; align-items: start; }
.cat-icon { color: var(--accent); display: flex; padding-top: 10px; }
.cat-title { font-size: 46px; letter-spacing: -0.028em; line-height: 1.04; margin-top: 10px; }

/* ---------- entry list ---------- */
.cat-list li { display: grid; grid-template-columns: 54px 150px 1fr; gap: 20px; padding: 20px 0; border-bottom: 1px solid var(--rule-soft); align-items: start; }
.ci-no { font-family: var(--sans); font-size: 13px; font-weight: 700; color: var(--accent); letter-spacing: 0.08em; padding-top: 3px; }
.ci-plate img { width: 100%; aspect-ratio: 1.6; object-fit: cover; border: 1px solid var(--rule); }
.ci-title { display: block; font-family: var(--sans); font-size: 22px; font-weight: 600; line-height: 1.2; color: var(--ink); }
.ci-title:hover { color: var(--accent); text-decoration: none; }
.ci-dek { display: block; font-size: 16px; line-height: 1.55; color: #33302A; margin-top: 7px; max-width: 46em; }
.ci-meta { display: block; margin-top: 9px; font-size: 12.5px; letter-spacing: 0.08em; text-transform: uppercase; }

/* ---------- sponsor tile geometry ---------- */
.sponsor { grid-template-columns: 224px minmax(200px, 1fr); gap: 16px; flex: 1 1 468px; max-width: none; }
.sponsor img { height: 56px; max-height: 56px; padding: 8px 12px; }
.sponsor.feat { border-top: 3px solid var(--accent); }

/* ---------- editorial pages ---------- */
.page-prose { max-width: 36em; font-size: 18.5px; line-height: 1.7; }
.page-prose h2 { font-size: 24px; margin: 36px 0 12px; padding-top: 14px; border-top: 1px solid var(--rule); }
.spot { color: var(--secondary); margin: 34px 0 8px; }
.spot svg { width: 100%; max-width: 460px; height: auto; }
.spot-cap { font-family: var(--sans); font-size: 13px; color: var(--muted); max-width: 34em; }
.contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 24px; margin-top: 26px; }
.contact-card { border-top: 3px solid var(--secondary); padding-top: 14px; }
.contact-card h3 { font-size: 18px; }
.contact-card p { font-size: 15.5px; line-height: 1.55; color: #33302A; margin-top: 8px; }
.contact-card a { font-family: var(--sans); font-weight: 600; }
.err-code { font-family: var(--sans); font-size: 92px; font-weight: 700; letter-spacing: -0.04em; color: var(--accent); line-height: 1; }

/* ---------- styleguide only ---------- */
.sg-block { padding: 30px 0; border-bottom: 1px solid var(--rule); }
.sg-label { font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--flag); margin-bottom: 14px; }
.sg-narrow { max-width: 360px; border: 1px dashed var(--rule); padding: 14px; }

@media (max-width: 1000px) {
  .feature-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .feature-text h2 { font-size: 30px; }
  .cat-head { grid-template-columns: 1fr; gap: 10px; }
  .cat-icon { padding-top: 0; }
  .cat-title { font-size: 32px; }
  .cat-list li { grid-template-columns: 44px 1fr; gap: 8px 14px; }
  .ci-no { grid-column: 1; grid-row: 1; }
  .ci-plate { grid-column: 2; grid-row: 1; }
  .ci-plate img { aspect-ratio: 2.4; }
  .ci-body { grid-column: 2; grid-row: 2; }
  .ci-title { font-size: 19px; }
  .err-code { font-size: 64px; }
}


/* ---------- article flow: keep interruptions clear of the floated inset ---------- */
.prose > h2,
.prose > .register-panel,
.prose > .fig-band,
.prose > .fig-plate,
.prose > .pullquote,
.prose > .callout,
.prose > .statrow,
.fig-inset + .fig-inset { clear: both; }

.prose > .fig-inset:first-child { margin-top: 0; }
.prose > .register-panel:last-child,
.prose > .article-figure:last-child { margin-bottom: 0; }

/* a heading straight after a panel or a band should not double the gap */
.prose > .register-panel + h2,
.prose > .fig-band + h2 { margin-top: 26px; }

/* two stacked figures at the foot of a piece keep the plate rhythm */
.prose > .fig-plate + .fig-inset,
.prose > .fig-inset + .fig-plate { margin-top: 26px; }

@media (max-width: 760px) {
  .fig-plate { margin: 26px 0; }
  .fig-plate > div { padding: 12px 12px 0; }
  .fig-plate figcaption { padding: 11px 0 12px; }
  .fig-band { margin-block: 30px; }
  .fig-band figcaption { margin-top: 11px; }
  .fig-cap { font-size: 15px; }
  .prose > h2 { margin: 32px 0 12px; }
  .register-panel { margin: 30px 0; }
  .article-head { padding-top: 24px; }
  .band { padding-top: 38px; }
}

@media (max-width: 400px) {
  :root { --gutter: 16px; }
  .wordmark { font-size: 22px; }
  .article-title { font-size: 27px; }
  .cat-title { font-size: 27px; }
  .lead-title { font-size: 29px; }
  .prose { font-size: 17px; }
  .register-panel li { padding-left: 30px; font-size: 14.5px; }
  .sponsor { padding: 12px; }
  .sponsor img { height: 48px; }
  .ci-title { font-size: 18px; }
}

/* sp-blurb-unhide: every supporter slot shows its text — no half-texted grids */
.sponsor-blurb:not(:empty){display:block!important;line-height:1.5}

/* sp-blurb-link: money-link anchors in blurbs must inherit the blurb colour (readable on dark OR light tiles) */
.sponsor-blurb a{color:inherit;text-decoration:underline;text-underline-offset:2px}

/* sp-blurb-typography: sponsor copy had inherited the TILE'S LINK STYLING. Design makes the whole tile
   an <a>, so copy with no colour of its own comes out link-coloured — amisdefreinet's blurbs
   were rgb(33,56,143), its link blue, where the page's body ink is rgb(51,48,42). Colour is
   taken from the page's own body copy rather than set to black, the size steps below body,
   and the brand name at the head of the blurb is wrapped in the estate's usual
   <strong class="sp-brand"> so it reads as a name and not as running text. */
.sponsor-text.sponsor-text{color:rgb(51, 48, 42)!important;font-size:15px!important}
.sponsor-text .sp-brand{font-weight:700!important;color:inherit!important}

/* op-mobile-collapse: the tile itself is a two-column grid — a 224px mark beside 200px of copy,
   444px with the gap, in a 358px tile. The copy drops under the mark below 640px. */
@media (max-width:640px){
  a.sponsor{grid-template-columns:minmax(0,1fr)!important}
  a.sponsor .sponsor-text{min-width:0!important}
}

/* op-money-columns: the supporters block ran one tile per row — 12 tiles,
   1913px at 390, 20% of the whole page. Two columns bring it to
   1361px (29% shorter). Checked before writing: no new overflow, smallest mark still
   144px wide, longest blurb 1 lines, tile heights 199-224px.
   A block that fails any of those is left in one column — two narrow columns can make a block
   TALLER once the copy rewraps, which is the case the operator warned about.
   Only the tier(s) that were one-per-row are touched (.sponsor-tier), never the section
   that holds several tiers: forcing a grid on that would put a featured row and a regulars run
   side by side. Phone widths only. */
@media (max-width:640px){
  .sponsor-tier{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:18px!important}
    .sponsor-tier > *{min-width:0!important;max-width:100%;width:auto!important;flex:0 1 auto!important}
    .sponsor-tier > * *{min-width:0!important;max-width:100%}
    .sponsor-tier img,.sponsor-tier svg{max-width:100%;height:auto}
}

/* op-blurb-rows: money blurbs ran to 5 rows at 390, 1360px of tier across
   12 tiles. Operator: blurbs should show "2-3 rows max" on mobile —
   a blurb that long eats the screen and, in a two-column grid, rewraps into more height than
   the columns save. Held to three rows at phone width; the copy stays in the markup and
   desktop is untouched. Only the tier(s) measured past three rows are clamped. */
@media (max-width:640px){
  .sponsor-tier .sponsor-text{display:-webkit-box!important;-webkit-line-clamp:3!important;-webkit-box-orient:vertical;max-height:75px!important;min-height:0!important;overflow:hidden!important}
  .sponsor-tier .sponsor-text{display:-webkit-box!important;-webkit-line-clamp:3!important;-webkit-box-orient:vertical;max-height:75px!important;min-height:0!important;overflow:hidden!important}
}

/* op-article-width: the article column was capped at 646px (73 characters per line) at every desktop width. Operator: "it should utilize more space". Widened through Design's own measure --measure (declared in .prose) to ~102 characters per line in this build's own prose font, never past the edge Design's own content already reaches beside it. Above 1600 the column and the prose type grow together (up to 1.2x). Nothing below 1024 changes. Originals: migration/_backups/article_width/. */
@media (min-width:1024px){
  div.prose{--measure:min(47.421em, 100%)!important}
}
@media (min-width:1600px){
  div.prose{--measure:min(clamp(47.421em, 62.569vw, calc(47.421em * 1.2)), 100%)!important}
  div.prose > :is(p:not([class])){font-size:clamp(19px,1.3194vw,22.8px)!important}
}
/* op-article-width:end */
/* op-heading-levels */
h2:where(.rt-h3){font-family: var(--sans); font-weight: 600; letter-spacing: -0.015em; line-height: 1.12; margin: 0px; text-wrap: pretty;}
.contact-card h2:where(.rt-h3){font-size: 18px;}
/* op-heading-levels:end */

/* op-img-dims — intrinsic width/height reserve image space; the proven height:auto guard (zero specificity) */
:where(div.card-grid > a.card > img,
  div.prose > figure.article-figure.fig-band > img,
  div.prose > figure.article-figure.fig-inset > img,
  figure.article-figure.fig-plate > div > img,
  li > span.ci-plate > img,
  main > figure.article-figure.fig-band > img,
  tr > td.c-plate > img){height:auto}
/* op-img-dims:end */
@media (min-width:760px) and (max-width:1039px){.sponsor-tier:has(> [data-partner]){display:grid!important;grid-template-columns:repeat(auto-fill,minmax(min(100%,460px),1fr))!important;gap:var(--sp-gap,14px)!important;justify-content:start!important}.sponsor-tier:has(> [data-partner]) > [data-partner]{width:auto!important;min-width:0!important;margin-left:0!important;margin-right:0!important}}