/*
Theme Name: IFP Journal
Theme URI: https://www.initiativeforpeacebuilding.eu/
Description: Broadsheet journal-of-record theme for Initiative for Peacebuilding.
Version: 1.0.0
Author: Editorial Desk
Text Domain: ifp-journal
*/

/* ---------- Press tokens (print-static motion: nothing tweens, ink is instant) ---------- */
:root {
  --paper: #ffffff;
  --ink: #101010;
  --ink-soft: #4a4a4a;
  --ink-faint: #6b6b6b; /* 5.3:1 on paper — WCAG AA for the small colophon/byline type */
  --carmine: #a31621;
  --hairline: #e3e0dc;
  --pica: 1px solid var(--ink);
  --press-instant: 0ms; /* the personality: hover states swap like ink, never fade */
  --measure: 68ch;
}

/* ---------- Fonts (self-hosted) ---------- */
@font-face { font-family: 'Bodoni Moda'; src: url('fonts/bodoni-moda-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Bodoni Moda'; src: url('fonts/bodoni-moda-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Bodoni Moda'; src: url('fonts/bodoni-moda-900.woff2') format('woff2'); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Bodoni Moda'; src: url('fonts/bodoni-moda-italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Crimson Pro'; src: url('fonts/crimson-pro-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Crimson Pro'; src: url('fonts/crimson-pro-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Crimson Pro'; src: url('fonts/crimson-pro-italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Libre Franklin'; src: url('fonts/libre-franklin-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Libre Franklin'; src: url('fonts/libre-franklin-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }

/* ---------- Base ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 2rem; }
body {
  font-family: 'Crimson Pro', Georgia, serif;
  font-size: 1.125rem;
  line-height: 1.6;
  background: var(--paper);
  color: var(--ink);
  scrollbar-color: var(--ink) var(--paper);
}
::selection { background: var(--carmine); color: var(--paper); }
:focus-visible { outline: 3px double var(--ink); outline-offset: 2px; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

h1, h2, h3, h4, h5 { font-family: 'Bodoni Moda', 'Didot', serif; font-weight: 700; line-height: 1.05; letter-spacing: -0.01em; }

.folio { max-width: 1280px; margin: 0 auto; padding: 1rem 2rem 0; }

.kicker {
  font-family: 'Libre Franklin', sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--carmine);
  display: block;
}

/* ---------- Masthead ---------- */
.masthead { text-align: center; margin-bottom: 2.5rem; }
.masthead-crown { display: flex; justify-content: center; align-items: flex-end; gap: 1.5rem; margin-bottom: 0.75rem; }
.crest { width: 74px; height: 74px; flex: 0 0 auto; }
.nameplate {
  font-family: 'Bodoni Moda', serif;
  font-weight: 900;
  font-size: clamp(2.4rem, 7vw, 5.2rem);
  letter-spacing: -0.02em;
  line-height: 0.95;
}
.nameplate a { text-decoration: none; }
.dateline {
  font-family: 'Crimson Pro', serif;
  font-style: italic;
  font-size: 0.95rem;
  border-top: var(--pica);
  border-bottom: var(--pica);
  padding: 0.45rem 1rem;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.compass {
  margin-top: 1rem;
  border-bottom: var(--pica);
  padding-bottom: 0.9rem;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.4rem 2.2rem;
  font-family: 'Libre Franklin', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}
.compass a { text-decoration: none; padding: 0.15rem 0.4rem; }
.compass a:hover, .compass a:focus-visible { background: var(--ink); color: var(--paper); transition: none; }
.compass .current-menu-item > a { border-bottom: 2px solid var(--carmine); }

/* ---------- Front page broadsheet ---------- */
.frontpage { display: grid; grid-template-columns: 1fr; gap: 2.5rem; }
@media (min-width: 900px) {
  .frontpage { grid-template-columns: 2fr 1fr; }
  .leader-well { border-right: 1px solid var(--hairline); padding-right: 2.5rem; }
}
.leader h2 { font-size: clamp(2rem, 5vw, 3.6rem); margin: 0.4rem 0 1.2rem; }
.leader h2 a, .deck h4 a, .wire h4 a { text-decoration: none; }
.leader h2 a:hover, .deck h4 a:hover, .wire h4 a:hover { background: var(--ink); color: var(--paper); }
.standfirst {
  font-size: 1.35rem;
  font-style: italic;
  color: #3d3a36;
  margin-bottom: 1.6rem;
  padding-left: 1.2rem;
  border-left: 2px solid var(--carmine);
  line-height: 1.45;
}
.leader-columns { column-count: 1; column-gap: 2.2rem; column-rule: 1px solid var(--hairline); font-size: 1.02rem; }
@media (min-width: 640px) { .leader-columns { column-count: 2; } }
.leader-columns p { margin-bottom: 1rem; text-align: justify; hyphens: auto; }

.pica-double { border-top: 3px solid var(--ink); border-bottom: 1px solid var(--ink); height: 7px; margin: 2.6rem 0 2rem; }

.deck { display: grid; grid-template-columns: 1fr; gap: 2rem; }
@media (min-width: 640px) { .deck { grid-template-columns: repeat(3, 1fr); } .deck > * + * { border-left: 1px solid var(--hairline); padding-left: 2rem; } }
.deck h4 { font-size: 1.25rem; margin: 0.5rem 0 0.7rem; }
.deck p { font-size: 0.92rem; color: var(--ink-soft); }

.wire h3 {
  font-family: 'Libre Franklin', sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  border-bottom: var(--pica);
  padding-bottom: 0.5rem;
  margin-bottom: 1.5rem;
}
.wire article { padding: 1.4rem 0; }
.wire article + article { border-top: 1px solid var(--hairline); }
.wire h4 { font-size: 1.45rem; margin: 0.3rem 0 0.6rem; }
.wire p { font-size: 0.98rem; color: var(--ink-soft); }

/* ---------- Dispatch stamp (signature: region tags stamped like a rubber mark) ---------- */
.stamp {
  display: inline-block;
  font-family: 'Libre Franklin', sans-serif;
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--carmine);
  border: 1.5px solid var(--carmine);
  box-shadow: inset 0 0 0 1.5px var(--paper), inset 0 0 0 2.5px var(--carmine);
  padding: 0.28rem 0.55rem;
  transform: rotate(-1.6deg);
  text-decoration: none;
}
.stamp:hover, .stamp:focus-visible { background: var(--carmine); color: var(--paper); transform: rotate(0.8deg); }

/* ---------- Pen-rule divider (signature: pen stroke ending in an olive sprig) ---------- */
.pen-rule { border: 0; height: 26px; margin: 3rem auto; max-width: 420px; background: none; position: relative; }
.pen-rule::before {
  content: "";
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 420 26'%3E%3Cpath d='M4 15 C 90 11, 200 19, 330 14' stroke='%23101010' stroke-width='1.4' fill='none' stroke-linecap='round'/%3E%3Cpath d='M330 14 q 14 -1 26 -4' stroke='%23556b2f' stroke-width='1.4' fill='none'/%3E%3Cellipse cx='344' cy='8' rx='7' ry='2.6' transform='rotate(-24 344 8)' fill='%23556b2f'/%3E%3Cellipse cx='356' cy='11' rx='7' ry='2.6' transform='rotate(18 356 11)' fill='%23708238'/%3E%3Cellipse cx='366' cy='6' rx='6.5' ry='2.4' transform='rotate(-30 366 6)' fill='%23556b2f'/%3E%3Ccircle cx='374' cy='11' r='2.2' fill='%23101010'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; background-size: contain;
}

/* ---------- Publications strip ---------- */
.stacks { margin: 4rem 0 3rem; border-top: 4px solid var(--ink); padding-top: 2.4rem; }
.stacks-crown { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 1.8rem; }
.stacks-crown h3 { font-size: 1.9rem; }
.stacks-grid { display: grid; grid-template-columns: 1fr; gap: 2.4rem; }
@media (min-width: 640px) { .stacks-grid { grid-template-columns: repeat(3, 1fr); } }
/* In-Depth Reports: same card idiom as the deck (cover → stamp → title → date → excerpt) */
.report h4 { font-size: 1.35rem; margin: 0.5rem 0 0.5rem; }
.report h4 a { text-decoration: none; }
.report h4 a:hover, .report h4 a:focus-visible { background: var(--ink); color: var(--paper); }
.report .report-date { font-family: 'Libre Franklin', sans-serif; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-faint); margin-bottom: 0.6rem; }
.report p:last-child { font-size: 0.95rem; color: var(--ink-soft); }

/* ---------- Article pages ---------- */
.broadside { max-width: 760px; margin: 0 auto; }
.broadside > .kicker { margin-bottom: 0.6rem; }
.broadside h1 { font-size: clamp(2rem, 5vw, 3.2rem); margin-bottom: 1rem; }
.byline { font-style: italic; color: var(--ink-faint); font-size: 0.95rem; margin-bottom: 2rem; }
.copydesk { font-size: 1.13rem; }
.copydesk > p:first-of-type::first-letter {
  float: left;
  font-family: 'Bodoni Moda', serif;
  font-weight: 900;
  font-size: 4.6rem;
  line-height: 0.78;
  padding: 0.35rem 0.6rem 0 0;
  color: var(--carmine);
}
.copydesk p, .copydesk ul, .copydesk ol { margin-bottom: 1.15rem; max-width: var(--measure); }
.copydesk h2 { font-size: 1.75rem; margin: 2.2rem 0 0.9rem; }
.copydesk h3 { font-size: 1.35rem; margin: 1.8rem 0 0.7rem; }
.copydesk a { text-decoration: none; border-bottom: 1px solid var(--ink); }
.copydesk a:hover, .copydesk a:focus-visible { background: var(--ink); color: var(--paper); border-bottom-color: var(--ink); }
.copydesk ul li { list-style: none; padding-left: 1.4rem; position: relative; }
.copydesk ul li::before { content: "¶"; position: absolute; left: 0; color: var(--carmine); font-family: 'Bodoni Moda', serif; }
.copydesk ol { padding-left: 1.6rem; }
.copydesk ol li::marker { color: var(--carmine); font-family: 'Libre Franklin', sans-serif; font-size: 0.85em; font-weight: 700; }
.copydesk blockquote {
  margin: 2rem 0;
  padding: 0.4rem 0 0.4rem 1.4rem;
  border-left: 2px solid var(--carmine);
  font-style: italic;
  font-size: 1.25rem;
  color: #3d3a36;
}
.copydesk img { border: var(--pica); padding: 4px; background: var(--paper); }
.copydesk figcaption { font-family: 'Libre Franklin', sans-serif; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-faint); margin-top: 0.5rem; }
.copydesk details { border-top: 1px solid var(--hairline); }
.copydesk details:last-of-type { border-bottom: 1px solid var(--hairline); }
.copydesk details summary {
  cursor: pointer;
  font-family: 'Bodoni Moda', serif;
  font-weight: 700;
  font-size: 1.15rem;
  padding: 0.9rem 0.2rem;
  list-style: none;
  position: relative;
  padding-right: 2rem;
}
.copydesk details summary::-webkit-details-marker { display: none; }
/* FAQ questions carry an <h3> so the accordion is a real heading level and can
   support FAQPage markup. It must not inherit heading block spacing or size -
   the summary itself already provides both. (QA round 5, m3.) */
.copydesk details summary h3 { display: inline; margin: 0; padding: 0; font: inherit; color: inherit; letter-spacing: inherit; }

.copydesk details summary::after { content: "+"; position: absolute; right: 0.4rem; top: 50%; transform: translateY(-50%); font-family: 'Bodoni Moda', serif; font-weight: 400; font-size: 1.5rem; color: var(--carmine); }
.copydesk details[open] summary::after { content: "−"; }
.copydesk details > *:not(summary) { padding: 0 0.2rem 1rem; }
.copydesk table { border-collapse: collapse; width: 100%; margin-bottom: 1.4rem; font-size: 0.95rem; }
.copydesk th { font-family: 'Libre Franklin', sans-serif; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em; text-align: left; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--ink); padding: 0.5rem 0.7rem; }
.copydesk td { border-bottom: 1px solid var(--hairline); padding: 0.5rem 0.7rem; }

/* ---------- Archives ---------- */
.gazette { max-width: 900px; margin: 0 auto; }
.gazette-head { border-bottom: 3px double var(--ink); padding-bottom: 1rem; margin-bottom: 2rem; }
.gazette-head h1 { font-size: 2.4rem; }
.gazette article { padding: 1.8rem 0; border-bottom: 1px solid var(--hairline); }
.gazette h2 { font-size: 1.7rem; margin: 0.4rem 0 0.6rem; }
.gazette h2 a { text-decoration: none; }
.gazette h2 a:hover, .gazette h2 a:focus-visible { background: var(--ink); color: var(--paper); }
.gazette p { color: var(--ink-soft); max-width: var(--measure); }
.pagination { display: flex; gap: 1rem; justify-content: center; margin: 2.5rem 0; font-family: 'Libre Franklin', sans-serif; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; }
.pagination a, .pagination span { padding: 0.4rem 0.8rem; border: var(--pica); text-decoration: none; }
.pagination a:hover { background: var(--ink); color: var(--paper); }
.pagination .current { background: var(--carmine); border-color: var(--carmine); color: var(--paper); }

/* ---------- Footer ---------- */
.colophon { border-top: var(--pica); margin-top: 4rem; padding: 3rem 0 2.5rem; }
.colophon-grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; margin-bottom: 2.5rem; }
@media (min-width: 760px) { .colophon-grid { grid-template-columns: 2fr 1fr 1fr 1fr; } }
.colophon-brand .nameplate { font-size: 1.9rem; }
.colophon-brand p { font-size: 0.9rem; color: var(--ink-faint); max-width: 34ch; margin-top: 0.8rem; }
.colophon h6 { font-family: 'Libre Franklin', sans-serif; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.16em; color: var(--carmine); margin-bottom: 1.1rem; }
.colophon ul { list-style: none; }
.colophon li { margin-bottom: 0.55rem; }
.colophon li a { font-family: 'Libre Franklin', sans-serif; font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-soft); text-decoration: none; }
.colophon li a:hover, .colophon li a:focus-visible { background: var(--ink); color: var(--paper); }
.colophon-foot { border-top: 1px solid var(--hairline); padding-top: 1.4rem; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.8rem; font-family: 'Libre Franklin', sans-serif; font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.18em; color: var(--ink-faint); }
.colophon-foot a { text-decoration: none; color: inherit; }
.colophon-foot a:hover { background: var(--ink); color: var(--paper); }

/* ---------- Utility ---------- */
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.aligncenter { margin-left: auto; margin-right: auto; }

/* nav items render without list markers */
.compass li { list-style: none; display: inline-block; }

/* ---------- Plate covers (engraved featured images) ---------- */
.plate { display: block; margin-bottom: 0.9rem; }
.plate img { border: var(--pica); width: 100%; height: auto; }
.plate:hover img, .plate:focus-visible img { filter: invert(1); }
.gazette .with-plate { display: grid; grid-template-columns: 200px 1fr; gap: 1.6rem; align-items: start; }
.gazette .with-plate .plate { margin-bottom: 0; }
@media (max-width: 640px) { .gazette .with-plate { grid-template-columns: 1fr; } }
.plate-lead { margin-bottom: 2rem; }
.plate-lead img { border: var(--pica); width: 100%; height: auto; }

/* ---------- AI-generated image label (EU AI Act Art. 50(4), house badge) ---------- */
.ai-image { position: relative; display: block; max-width: 100%; margin: 0; }
.ai-image img { display: block; max-width: 100%; height: auto; }
.ai-image .ai-badge {
  position: absolute; top: 0.6rem; right: 0.6rem; padding: 0.24rem 0.5rem;
  border: 1.5px solid var(--paper); background: rgba(16, 16, 16, 0.8); color: var(--paper);
  font: 700 0.66rem/1 'Libre Franklin', system-ui, sans-serif; letter-spacing: 0.14em; text-transform: uppercase;
  pointer-events: none;
}
.ai-image .ai-note {
  font-family: 'Libre Franklin', sans-serif; font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--ink-faint); margin-top: 0.45rem;
}
.ai-image--lead .ai-note { font-size: 0.68rem; margin-top: 0.5rem; }
.copydesk .ai-image { margin: 2rem 0; }
.copydesk .ai-image--lead .ai-note { text-transform: none; letter-spacing: 0; font-family: 'Crimson Pro', serif; font-style: italic; font-size: 0.95rem; color: var(--ink-soft); }
.plate .ai-image .ai-note { margin-top: 0.35rem; }
.plate:hover .ai-badge { filter: invert(1); }

/* "Filed under" tag line at the foot of an article */
.filed { font-family: 'Libre Franklin', sans-serif; font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-soft); margin: 2.5rem 0 0; display: flex; flex-wrap: wrap; gap: 0.4rem 0.6rem; align-items: baseline; }
.filed .kicker { display: inline; }
.filed a { text-decoration: none; border-bottom: 1px solid var(--hairline); }
.filed a:hover, .filed a:focus-visible { background: var(--ink); color: var(--paper); border-color: var(--ink); }