/*
Theme Name: Juclandia
Theme URI: https://juclandia.org
Author: Institut Juclandia
Description: Block theme for juclandia.org. Retro European state graphics on cream stock: Chivo grotesk, hairline rules, zero radius, one saturated colour per entity. Built from the Juclandia design system.
Version: 1.0.6
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: juclandia
Tags: block-theme, full-site-editing, editor-style, block-patterns, custom-colors, custom-menu, translation-ready
*/

/* ==========================================================================
   1. TOKENS  — verbatim from the design system's tokens/*.css
   ========================================================================== */

:root {
  /* Flag */
  --jc-red: #ED2939;
  --jc-green: #009F6B;
  --jc-purple: #6E4292;

  /* Institute */
  --jc-blue: #333EBF;

  /* Seal */
  --jc-seal-purple: #3D1195;

  /* Paper */
  --paper: #F5F0E3;
  --paper-raised: #FAF6EC;
  --paper-white: #FFFFFF;

  /* Ink */
  --ink: #1A1A1A;
  --ink-body: #3D3830;
  --ink-muted: #6B6558;
  --ink-faint: #8C8578;

  /* Rules */
  --rule-heavy: #1A1A1A;
  --rule: #C9C2B0;
  --rule-light: #E4DECD;

  /* Tints — hand-mixed on cream, never opacity */
  --tint-red: #FBE2E4;
  --tint-green: #DCEFE7;
  --tint-purple: #E7E0EF;
  --tint-blue: #E0E2F5;

  /* Entity semantics — one colour per entity, fixed */
  --entity-institute: var(--jc-blue);
  --entity-pragma: var(--jc-green);
  --entity-republic: var(--jc-purple);
  --entity-wire: var(--jc-red);

  /* Section semantics */
  --section-institute: var(--jc-blue);
  --section-pragma: var(--jc-green);
  --section-republic: var(--jc-purple);
  --section-diplomacy: var(--jc-red);
  --section-wire: var(--jc-red);
  --section-utility: var(--ink);

  /* Surfaces */
  --surface-page: var(--paper);
  --surface-card: var(--paper-raised);
  --surface-inverse: var(--ink);

  /* Text */
  --text-strong: var(--ink);
  --text-body: var(--ink-body);
  --text-muted: var(--ink-muted);
  --text-on-colour: #FFFFFF;

  /* Interactive */
  --link: var(--ink);
  --link-hover: var(--jc-red);
  --focus-ring: var(--jc-blue);

  /* Type */
  --font-sans: "Chivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Chivo Mono", ui-monospace, "SFMono-Regular", monospace;

  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-black: 900;

  --type-display-1: var(--fw-black) 82px/0.90 var(--font-sans);
  --type-display-2: var(--fw-black) 56px/0.94 var(--font-sans);
  --type-display-3: var(--fw-black) 34px/1.00 var(--font-sans);
  --tracking-display: -0.035em;

  --type-h1: var(--fw-bold) 40px/1.10 var(--font-sans);
  --type-h2: var(--fw-bold) 28px/1.15 var(--font-sans);
  --type-h3: var(--fw-bold) 20px/1.20 var(--font-sans);
  --type-h4: var(--fw-semibold) 17px/1.30 var(--font-sans);

  --type-lead: var(--fw-regular) 18px/1.55 var(--font-sans);
  --type-body: var(--fw-regular) 15px/1.60 var(--font-sans);
  --type-small: var(--fw-regular) 13.5px/1.60 var(--font-sans);
  --type-caption: var(--fw-regular) 12px/1.50 var(--font-sans);

  --type-label: var(--fw-semibold) 12px/1.20 var(--font-sans);
  --type-label-sm: var(--fw-bold) 10px/1.20 var(--font-sans);
  --tracking-label: 0.12em;
  --tracking-label-wide: 0.20em;
  --tracking-eyebrow: 0.24em;

  --type-ref: var(--fw-medium) 12px/1.40 var(--font-mono);
  --type-ref-lg: var(--fw-medium) 15px/1.40 var(--font-mono);
  --tracking-ref: 0.06em;

  --measure-text: 68ch;
  --measure-narrow: 46ch;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 80px;
  --space-10: 112px;

  --page-max: 1200px;
  --page-gutter: 48px;
  --page-gutter-wide: 56px;
  --sidebar-width: 300px;

  /* Block module — the Institute mark's own square unit */
  --block: 20px;
  --block-half: 10px;

  /* Borders — sharp. Nothing in this system is rounded. */
  --radius: 0px;
  --border-hairline: 1px solid var(--rule);
  --border-hairline-light: 1px solid var(--rule-light);
  --border-heavy: 1px solid var(--rule-heavy);
  --border-rule-2: 2px solid var(--rule-heavy);
  --border-active: 3px solid currentColor;
  --shadow-none: none;

  /* Motion */
  --ease: linear;
  --ease-out: cubic-bezier(0.2, 0, 0.2, 1);
  --dur-colour: 120ms;
  --dur-fade: 160ms;
  --dur-block: 90ms;
  --transition-colour: color var(--dur-colour) var(--ease), background-color var(--dur-colour) var(--ease), border-color var(--dur-colour) var(--ease);
  --transition-fade: opacity var(--dur-fade) var(--ease-out);
}

@media (max-width: 900px) {
  :root { --page-gutter: 24px; --page-gutter-wide: 24px; }
}

/* ==========================================================================
   2. BASE
   ========================================================================== */

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

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-body);
  font: var(--type-body);
  text-wrap: pretty;
}

a { color: var(--link); text-decoration: none; transition: var(--transition-colour); }
a:hover { color: var(--link-hover); }

:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

h1, h2, h3, h4, h5, h6 { margin: 0; color: var(--text-strong); font-family: var(--font-sans); }
p { margin: 0; }
img { max-width: 100%; height: auto; }
* { border-radius: 0 !important; box-shadow: none; }

::selection { background: var(--jc-blue); color: #FFFFFF; }

.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}

.jc-skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: var(--paper);
  font: var(--type-label); letter-spacing: var(--tracking-label);
  text-transform: uppercase; padding: 12px 20px;
}
.jc-skip-link:focus { left: 0; color: var(--paper); }

/* --- Core CSS reset inside theme-composed sections ---------------------------
   WordPress gives every block child a margin-block and every group a blockGap.
   The design system spaces these sections itself: colour fields sit flush,
   rules do the separating. Strip core's contribution where we own the layout. */
.jc-hero.wp-block-group,
.jc-hero__stack.wp-block-group,
.jc-positions-grid.wp-block-group,
.jc-features-grid.wp-block-group,
.jc-section-head.wp-block-group,
.jc-cta.wp-block-group { gap: 0; }
.jc-positions-grid.wp-block-group { gap: var(--space-7) var(--space-6); }
.jc-features-grid.wp-block-group { gap: var(--space-7) var(--space-6); }
.jc-section-head.wp-block-group { gap: var(--space-5); }
.jc-cta.wp-block-group { gap: var(--space-6); }

.jc-hero > *,
.jc-hero__stack > *,
.jc-hero__lede > *,
.jc-hero__foot > *,
.jc-section-head > *,
.jc-cta > *,
.jc-position > *,
.jc-feature > * { margin-block-start: 0; margin-block-end: 0; }

/* The three panels in the hero stack must touch. */
.jc-hero__stack > .jc-entity { margin: 0; }

/* Inside a position or feature cell the theme's flex gap does the spacing. */
.jc-position.wp-block-group,
.jc-feature.wp-block-group { gap: var(--space-4); }

/* WordPress alignment + layout plumbing */
.jc-gutter { padding-left: var(--page-gutter); padding-right: var(--page-gutter); }
.alignfull { margin-left: 0; margin-right: 0; max-width: none; }
.wp-block-image figcaption,
.wp-element-caption {
  font: var(--type-caption); color: var(--ink-muted);
  letter-spacing: 0; margin-top: var(--space-2);
}

/* ==========================================================================
   3. HEADER  (Chrome.jsx > Header)
   ========================================================================== */

/* Sticky header.
   Two things have to be true for this to work. The template-part wrapper is
   removed from the layout with display:contents, so the header's containing
   block is the page rather than a div its own height; and no ancestor may clip
   or scroll, since overflow on any ancestor cancels position:sticky. */
.jc-header-mount { display: contents; }

html, body, .wp-site-blocks, .jc-main { overflow: visible; }

.jc-header {
  background: var(--ink); color: var(--paper);
  position: sticky; top: 0; z-index: 100;
}
body.admin-bar .jc-header { top: 32px; }
@media screen and (max-width: 782px) {
  body.admin-bar .jc-header { top: 46px; }
}
@media (max-width: 1100px) {
  /* With the menu open the header stays pinned; if the menu is taller than the
     viewport it scrolls inside the header rather than pushing the page. */
  .jc-header.is-open { max-height: 100vh; overflow-y: auto; overscroll-behavior: contain; }
}

.jc-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; column-gap: var(--space-6); row-gap: var(--space-4);
  padding: 18px var(--page-gutter);
}

.jc-brand { display: flex; align-items: center; gap: var(--space-4); text-decoration: none; }
.jc-brand:hover { color: var(--paper); }
.jc-brand img { width: 62px; height: 37px; display: block; }
.jc-brand__word {
  font-family: var(--font-sans); font-weight: var(--fw-black); font-size: 20px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--paper);
}

/* Nav — the flag's colours mark the active section */
.jc-nav ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; align-items: center; flex-wrap: wrap;
  column-gap: var(--space-5); row-gap: var(--space-3); min-width: 0;
}
.jc-nav li { position: relative; }
.jc-nav a {
  display: inline-block;
  font: var(--type-label); letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--paper);
  border-bottom: 3px solid transparent; padding-bottom: 3px;
}
.jc-nav a:hover { color: var(--paper); border-bottom-color: var(--jc-red); }

.jc-nav li[data-entity="institute"].is-active > a { color: var(--entity-institute); border-bottom-color: var(--entity-institute); }
.jc-nav li[data-entity="pragma"].is-active    > a { color: var(--entity-pragma);    border-bottom-color: var(--entity-pragma); }
.jc-nav li[data-entity="republic"].is-active  > a { color: var(--entity-republic);  border-bottom-color: var(--entity-republic); }
.jc-nav li[data-entity="wire"].is-active      > a { color: var(--entity-wire);      border-bottom-color: var(--entity-wire); }
.jc-nav li[data-entity="institute"] > a:hover { border-bottom-color: var(--entity-institute); }
.jc-nav li[data-entity="pragma"] > a:hover    { border-bottom-color: var(--entity-pragma); }
.jc-nav li[data-entity="republic"] > a:hover  { border-bottom-color: var(--entity-republic); }
.jc-nav li[data-entity="wire"] > a:hover      { border-bottom-color: var(--entity-wire); }
.jc-nav li.is-active > a { border-bottom-color: var(--paper); }

/* Sub-menu — flat panel, no rounding, no shadow */
.jc-nav .sub-menu {
  display: none; position: absolute; left: 0; top: 100%; z-index: 50;
  min-width: 240px; margin: 0; padding: var(--space-3) 0;
  background: var(--ink); border: 1px solid #4A463E;
  flex-direction: column; align-items: stretch; row-gap: 0;
}
.jc-nav li:hover > .sub-menu,
.jc-nav li:focus-within > .sub-menu { display: flex; }
.jc-nav .sub-menu a {
  border-bottom: none; padding: 7px var(--space-5);
  font: var(--type-label-sm); letter-spacing: var(--tracking-label);
  color: var(--ink-faint); white-space: nowrap;
}
.jc-nav .sub-menu a:hover { color: var(--paper); background: #2A2722; }

.jc-header__utility {
  display: flex; align-items: center; gap: var(--space-5);
  padding-left: var(--space-4); border-left: 1px solid #4A463E;
}

.jc-nav-toggle { display: none; }

@media (max-width: 1100px) {
  .jc-nav-toggle {
    display: inline-flex; align-items: center; gap: var(--space-2);
    background: transparent; border: 1px solid #4A463E; color: var(--paper);
    font: var(--type-label); letter-spacing: var(--tracking-label);
    text-transform: uppercase; padding: 9px 14px; cursor: pointer;
  }
  .jc-header__nav-wrap {
    flex-basis: 100%; display: none;
    border-top: 1px solid #4A463E; padding-top: var(--space-4);
    padding-bottom: var(--space-4);
  }
  .jc-header.is-open .jc-header__nav-wrap { display: block; }
  .jc-nav ul { flex-direction: column; align-items: flex-start; row-gap: var(--space-2); }
  .jc-nav .sub-menu {
    display: flex; position: static; border: none; padding: var(--space-2) 0 var(--space-3) var(--space-5);
    background: transparent; min-width: 0;
  }
  .jc-nav .sub-menu a { padding: 5px 0; }
}

/* ==========================================================================
   4. LANGUAGE SWITCHER  (core/LanguageSwitcher.jsx)
   ========================================================================== */

.jc-lang {
  display: flex; align-items: center; gap: var(--space-2);
  font: var(--type-label-sm); letter-spacing: var(--tracking-label);
}
.jc-lang__sep { color: var(--ink-muted); }
.jc-lang a { color: var(--ink-muted); }
.jc-lang [aria-current="true"] { color: var(--ink); font-weight: var(--fw-bold); }
.jc-lang--reverse .jc-lang__sep,
.jc-lang--reverse a { color: var(--ink-faint); }
.jc-lang--reverse a:hover { color: var(--paper); }
.jc-lang--reverse [aria-current="true"] { color: var(--paper); }

/* ==========================================================================
   5. SOCIAL ROW
   ========================================================================== */

.jc-social { display: flex; align-items: center; gap: var(--space-4); }
.jc-social a { display: block; color: inherit; opacity: 0.7; transition: var(--transition-fade); }
.jc-social a:hover { opacity: 1; color: inherit; }
.jc-social svg { display: block; width: 16px; height: 16px; fill: currentColor; }
.jc-header .jc-social { color: var(--paper); }
.jc-footer .jc-social { color: var(--ink); }

/* ==========================================================================
   6. BUTTONS  (core/Button.jsx)
   ========================================================================== */

.jc-btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  border: 1px solid transparent; font: var(--type-label);
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  cursor: pointer; transition: var(--transition-colour); text-decoration: none;
  padding: 15px 28px; font-size: 12px;
}
.jc-btn--sm { padding: 9px 16px; font-size: 11px; }
.jc-btn--primary { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.jc-btn--primary:hover { background: var(--jc-blue); color: var(--text-on-colour); border-color: var(--jc-blue); }
.jc-btn--primary[data-entity="pragma"]:hover   { background: var(--entity-pragma);   border-color: var(--entity-pragma); }
.jc-btn--primary[data-entity="republic"]:hover { background: var(--entity-republic); border-color: var(--entity-republic); }
.jc-btn--primary[data-entity="wire"]:hover     { background: var(--entity-wire);     border-color: var(--entity-wire); }
.jc-btn--secondary { background: transparent; color: var(--ink); border-color: var(--ink); }
.jc-btn--secondary:hover { background: var(--ink); color: var(--paper); }
.jc-btn--quiet {
  background: transparent; color: var(--ink); border-color: transparent;
  padding: 4px 0; border-bottom: 2px solid var(--rule-heavy);
}
.jc-btn--quiet:hover { color: var(--jc-red); border-bottom-color: var(--jc-red); }
.jc-btn[disabled], .jc-btn[aria-disabled="true"] { opacity: 0.4; cursor: not-allowed; }

/* On a saturated field the primary button inverts to paper */
.jc-btn--paper { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.jc-btn--paper:hover { background: var(--ink); color: var(--paper); border-color: var(--paper); }

/* Core button block inherits the same skin */
.wp-block-button__link {
  font: var(--type-label); letter-spacing: var(--tracking-label);
  text-transform: uppercase; padding: 15px 28px;
  background: var(--ink); color: var(--paper); border: 1px solid var(--ink);
}
.wp-block-button__link:hover { background: var(--jc-blue); border-color: var(--jc-blue); color: #fff; }
.wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent; color: var(--ink); border-color: var(--ink);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover { background: var(--ink); color: var(--paper); }

/* ==========================================================================
   7. SECTION HEAD  (Chrome.jsx > SectionHead)
   ========================================================================== */

.jc-section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--space-5); padding-bottom: var(--space-3);
  border-bottom: 2px solid var(--rule-heavy);
}
.jc-section-head__title {
  font: var(--type-label); letter-spacing: var(--tracking-label-wide);
  text-transform: uppercase; font-size: 13px; color: var(--ink);
}
.jc-section-head__meta {
  font: var(--type-label-sm); letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--ink-muted);
}
.jc-section-head--institute .jc-section-head__meta { color: var(--section-institute); }
.jc-section-head--pragma .jc-section-head__meta    { color: var(--section-pragma); }
.jc-section-head--republic .jc-section-head__meta  { color: var(--section-republic); }
.jc-section-head--wire .jc-section-head__meta      { color: var(--section-wire); }

/* ==========================================================================
   8. HERO  (Home.jsx)
   ========================================================================== */

.jc-hero {
  display: grid; grid-template-columns: 1.35fr 1fr;
  border-bottom: 1px solid var(--rule-heavy);
}
.jc-hero__lede {
  background: var(--jc-red);
  padding: var(--space-8) var(--page-gutter);
  display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-6);
}
.jc-hero__eyebrow {
  font: var(--type-label-sm); letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase; color: var(--paper);
}
.jc-hero__title {
  font-family: var(--font-sans); font-weight: var(--fw-black); font-size: 60px;
  line-height: 0.9; letter-spacing: var(--tracking-display);
  text-transform: uppercase; color: var(--ink); text-align: center;
}
.jc-hero__title span { display: block; }
.jc-hero__title span + span { margin-top: 0.42em; }
.jc-hero__foot {
  display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-6);
  flex-wrap: wrap;
}
.jc-hero__foot p { font: var(--type-lead); color: var(--paper); max-width: 42ch; }
.jc-hero__stack {
  display: grid; grid-template-rows: repeat(3, minmax(190px, 1fr));
  border-left: 1px solid var(--rule-heavy);
}

@media (max-width: 1000px) {
  .jc-hero { grid-template-columns: 1fr; }
  .jc-hero__title { font-size: 40px; }
  .jc-hero__lede { padding: var(--space-8) var(--page-gutter); }
  .jc-hero__stack { border-left: none; border-top: 1px solid var(--rule-heavy); }
}

/* ==========================================================================
   9. ENTITY PANEL  (identity/EntityPanel.jsx)
   ========================================================================== */

.jc-entity {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-6);
  color: var(--text-on-colour); padding: var(--space-6) var(--space-7);
  min-height: 190px; text-decoration: none; transition: var(--transition-colour);
}
.jc-entity:hover { background: var(--ink); color: var(--text-on-colour); }
.jc-entity--institute { background: var(--entity-institute); }
.jc-entity--pragma    { background: var(--entity-pragma); }
.jc-entity--republic  { background: var(--entity-republic); }
.jc-entity--wire      { background: var(--entity-wire); }
.jc-entity--lg { padding: var(--space-7); min-height: 300px; }
.jc-entity__eyebrow {
  position: relative; font: var(--type-label-sm);
  letter-spacing: var(--tracking-label-wide); text-transform: uppercase; opacity: 0.85;
}
.jc-entity__body { position: relative; }
.jc-entity__title {
  font-family: var(--font-sans); font-weight: var(--fw-black); font-size: 26px;
  line-height: 1; letter-spacing: -0.02em; text-transform: uppercase;
  margin-bottom: var(--space-3); color: inherit;
}
.jc-entity--md .jc-entity__title { font-size: 34px; }
.jc-entity--lg .jc-entity__title { font-size: 52px; }
.jc-entity__text { font: var(--type-small); max-width: 38ch; opacity: 0.95; }
.jc-entity__watermark {
  position: absolute; right: -60px; bottom: -70px;
  width: 260px; opacity: 0.16; pointer-events: none;
}

/* ==========================================================================
   10. POSITION ROWS  (content/StandingPosition + Home positions list)
   ========================================================================== */

.jc-positions { border-bottom: 1px solid var(--rule-heavy); }
.jc-position-row {
  display: grid; grid-template-columns: 44px 1fr 1.3fr;
  gap: var(--space-5); align-items: baseline;
  padding: 20px 0; border-top: 1px solid var(--rule-light);
}
.jc-position-row:first-child { border-top: 1px solid var(--rule-heavy); }
.jc-position-row__n {
  font: var(--type-ref-lg); letter-spacing: var(--tracking-ref);
  font-variant-numeric: tabular-nums; font-weight: var(--fw-bold);
}
.jc-position-row__n[data-accent="institute"] { color: var(--entity-institute); }
.jc-position-row__n[data-accent="pragma"]    { color: var(--entity-pragma); }
.jc-position-row__n[data-accent="republic"]  { color: var(--entity-republic); }
.jc-position-row__n[data-accent="wire"]      { color: var(--entity-wire); }
.jc-position-row h3 { font: var(--type-h3); }
.jc-position-row p { font: var(--type-small); color: var(--ink-body); }

@media (max-width: 800px) {
  .jc-position-row { grid-template-columns: 32px 1fr; }
  .jc-position-row p { grid-column: 2; }
}

/* Standing position — full colour field */
.jc-standing {
  background: var(--jc-red); color: var(--text-on-colour);
  padding: var(--space-7); display: flex; flex-direction: column; gap: var(--space-4);
  align-items: flex-start; text-align: left;
}
.jc-standing--institute { background: var(--entity-institute); }
.jc-standing--pragma    { background: var(--entity-pragma); }
.jc-standing--republic  { background: var(--entity-republic); }
.jc-standing--centre { align-items: center; text-align: center; }
.jc-standing--memorial {
  background: var(--paper-raised); color: var(--ink);
  border: 1px solid var(--rule-heavy);
}
.jc-standing__label {
  font: var(--type-label-sm); letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase; opacity: 0.85; color: inherit;
}
.jc-standing--memorial .jc-standing__label { opacity: 0.7; }
.jc-standing__title {
  font-family: var(--font-sans); font-weight: var(--fw-black); font-size: 34px;
  line-height: 1.05; letter-spacing: -0.02em; text-transform: uppercase;
  color: inherit; max-width: 24ch;
}
.jc-standing__text { font: var(--type-small); max-width: 72ch; line-height: 1.65; }
.jc-standing__slogan {
  font-family: var(--font-sans); font-weight: var(--fw-bold); font-size: 20px;
  letter-spacing: 0.06em; text-transform: uppercase; margin-top: var(--space-2);
}
.jc-standing__portrait { max-width: 220px; }

/* --- Positions as a three-column grid (front page) --- */
.jc-positions-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-7) var(--space-6); margin-top: var(--space-7);
}
.jc-position {
  border-top: 1px solid var(--rule-heavy); padding-top: 20px;
  display: flex; flex-direction: column; gap: var(--space-4);
}
.jc-position h3 { font: var(--type-h3); }
.jc-position p { font: var(--type-small); line-height: 1.65; color: var(--ink-body); }

/* Icon slot: an empty 48px box ruled in Institute blue. To fill one, swap the
   span for an img carrying the same class, an empty alt, and width/height 48. */
.jc-icon-slot { display: block; width: 48px; height: 48px; border: 1px solid var(--jc-blue); flex: none; }

/* --- Research features --- */
.jc-features-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-7) var(--space-6); margin-top: var(--space-7);
}
.jc-features-grid .jc-feature img {
  width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border: 1px solid var(--rule);
}

/* --- Standing position over a photograph --- */
.jc-standing--wash {
  background-image: linear-gradient(rgba(237, 41, 57, 0.93), rgba(237, 41, 57, 0.93)), var(--jc-wash-image);
  background-size: cover; background-position: center;
}

/* --- Get in touch band --- */
.jc-cta {
  background: var(--paper-raised);
  border-top: 1px solid var(--rule-heavy); border-bottom: 1px solid var(--rule-heavy);
  padding: var(--space-7); display: flex; align-items: center;
  justify-content: space-between; gap: var(--space-6); flex-wrap: wrap;
}
.jc-cta h2 {
  font-family: var(--font-sans); font-weight: var(--fw-black); font-size: 34px;
  line-height: 1.05; letter-spacing: -0.02em; text-transform: uppercase; max-width: 30ch;
}

/* --- Memorial --- */
.jc-memorial {
  background: var(--paper-raised); border: 1px solid var(--rule-heavy);
  padding: var(--space-8) var(--space-7);
  display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--space-7); align-items: center;
}
.jc-memorial__line {
  font-family: var(--font-sans); font-weight: var(--fw-black); font-size: 34px;
  line-height: 1.05; letter-spacing: -0.02em; text-transform: uppercase;
  color: var(--ink); text-align: center;
}
.jc-memorial figure { margin: 0; display: flex; flex-direction: column; gap: var(--space-3); align-items: center; }
.jc-memorial img { width: 260px; border: 1px solid var(--rule-heavy); }
.jc-memorial figcaption {
  font: var(--type-label-sm); letter-spacing: var(--tracking-label-wide);
  text-transform: uppercase; color: var(--ink-muted); text-align: center;
}

@media (max-width: 1000px) {
  .jc-positions-grid, .jc-features-grid { grid-template-columns: 1fr; gap: var(--space-6); }
  .jc-memorial { grid-template-columns: 1fr; gap: var(--space-6); }
  .jc-memorial__line, .jc-cta h2 { font-size: 26px; }
}

/* ==========================================================================
   11. WIRE  (content/WireItem.jsx)
   ========================================================================== */

.jc-wire { border-bottom: 1px solid var(--rule-heavy); }
.jc-wire-item {
  display: grid; grid-template-columns: 110px 1fr auto;
  gap: var(--space-5); align-items: baseline; padding: 18px 0;
  border-top: 1px solid var(--rule-light); text-decoration: none;
  transition: var(--transition-colour);
}
.jc-wire-item--dense { grid-template-columns: 96px 1fr; padding: 12px 0; }
.jc-wire-item__date {
  font: var(--type-ref); letter-spacing: var(--tracking-ref);
  font-variant-numeric: tabular-nums; color: var(--ink-muted);
}
.jc-wire-item__title { font: var(--type-h4); color: var(--ink); line-height: 1.35; }
.jc-wire-item--dense .jc-wire-item__title { font: var(--type-small); }
.jc-wire-item:hover .jc-wire-item__title { color: var(--jc-red); }
.jc-wire-item__ext { color: var(--ink-faint); margin-left: 8px; font: var(--type-ref); }
.jc-wire-item__kind {
  font: var(--type-label-sm); letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--jc-red);
}
.jc-wire__error { font: var(--type-small); color: var(--ink-muted); padding: var(--space-5) 0; }

@media (max-width: 700px) {
  .jc-wire-item, .jc-wire-item--dense { grid-template-columns: 1fr; gap: var(--space-2); }
  .jc-wire-item__kind { order: -1; }
}

/* ==========================================================================
   12. OFFICEHOLDERS  (government/OfficeholderCard.jsx)
   ========================================================================== */

.jc-officeholders { display: grid; gap: 0; }
.jc-officeholders--grid {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-6); border-top: 1px solid var(--rule-heavy); padding-top: var(--space-5);
}
.jc-officeholder {
  display: flex; align-items: center; gap: var(--space-4);
  padding: 16px 0; border-top: 1px solid var(--rule-light); text-decoration: none;
  transition: var(--transition-colour);
}
.jc-officeholders--grid .jc-officeholder {
  flex-direction: column; align-items: stretch; border-top: none; padding: 0;
}
.jc-officeholder__portrait { width: 56px; flex: none; }
.jc-officeholders--grid .jc-officeholder__portrait { width: 100%; }
.jc-officeholder__meta { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.jc-officeholder__office {
  font: var(--type-label-sm); letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--entity-republic);
}
.jc-officeholder[data-entity="institute"] .jc-officeholder__office { color: var(--entity-institute); }
.jc-officeholder[data-entity="pragma"] .jc-officeholder__office    { color: var(--entity-pragma); }
.jc-officeholder__name { font: var(--type-h4); color: var(--ink); }
.jc-officeholder:hover .jc-officeholder__name { color: var(--entity-republic); }
.jc-officeholder[data-entity="institute"]:hover .jc-officeholder__name { color: var(--entity-institute); }
.jc-officeholder[data-entity="pragma"]:hover .jc-officeholder__name    { color: var(--entity-pragma); }
.jc-officeholder__note { font: var(--type-caption); color: var(--ink-muted); }

/* Photo slot — placeholder until real photography lands */
.jc-photo {
  position: relative; background: var(--tint-blue);
  border: 1px solid var(--rule); overflow: hidden;
}
.jc-photo[data-entity="pragma"]   { background: var(--tint-green); }
.jc-photo[data-entity="republic"] { background: var(--tint-purple); }
.jc-photo[data-entity="wire"]     { background: var(--tint-red); }
.jc-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.jc-photo__label {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font: var(--type-label-sm); letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--ink-faint); text-align: center; padding: var(--space-3);
}

/* ==========================================================================
   13. NOTICE  (core/Notice.jsx)
   ========================================================================== */

.jc-notice {
  background: var(--paper-raised); color: var(--ink-body);
  border: 1px solid var(--rule); padding: var(--space-5);
  display: flex; flex-direction: column; gap: var(--space-3);
}
.jc-notice--institute { background: var(--tint-blue); }
.jc-notice--pragma    { background: var(--tint-green); }
.jc-notice--republic  { background: var(--tint-purple); }
.jc-notice--wire      { background: var(--tint-red); }
.jc-notice__label {
  font: var(--type-label-sm); letter-spacing: var(--tracking-label-wide);
  text-transform: uppercase; color: var(--ink);
}
.jc-notice--institute .jc-notice__label { color: var(--entity-institute); }
.jc-notice--pragma .jc-notice__label    { color: var(--entity-pragma); }
.jc-notice--republic .jc-notice__label  { color: var(--entity-republic); }
.jc-notice--wire .jc-notice__label      { color: var(--entity-wire); }
.jc-notice__body { font: var(--type-small); max-width: var(--measure-text); }
.jc-notice--filled { border: none; color: var(--text-on-colour); background: var(--ink); }
.jc-notice--filled.jc-notice--institute { background: var(--entity-institute); }
.jc-notice--filled.jc-notice--pragma    { background: var(--entity-pragma); }
.jc-notice--filled.jc-notice--republic  { background: var(--entity-republic); }
.jc-notice--filled.jc-notice--wire      { background: var(--entity-wire); }
.jc-notice--filled .jc-notice__label { color: var(--text-on-colour); opacity: 0.85; }

/* ==========================================================================
   14. CITATION + TIMELINE  (content/Citation.jsx, content/Timeline.jsx)
   ========================================================================== */

.jc-citation {
  border-left: 2px solid var(--rule-heavy); padding-left: var(--space-5);
  display: flex; flex-direction: column; gap: var(--space-3);
  max-width: var(--measure-text);
}
.jc-citation__quote { font: var(--type-lead); color: var(--ink); }
.jc-citation__source {
  font: var(--type-ref); letter-spacing: var(--tracking-ref); color: var(--ink-muted);
}
.wp-block-quote { border-left: 2px solid var(--rule-heavy); padding-left: var(--space-5); margin: var(--space-6) 0; }
.wp-block-quote cite { font: var(--type-ref); letter-spacing: var(--tracking-ref); color: var(--ink-muted); font-style: normal; }

.jc-timeline { display: grid; gap: 0; border-bottom: 1px solid var(--rule-heavy); }
.jc-timeline__row {
  display: grid; grid-template-columns: 110px 1fr; gap: var(--space-5);
  padding: 18px 0; border-top: 1px solid var(--rule-light); align-items: baseline;
}
.jc-timeline__row:first-child { border-top: 1px solid var(--rule-heavy); }
.jc-timeline__date {
  font: var(--type-ref); letter-spacing: var(--tracking-ref);
  font-variant-numeric: tabular-nums; color: var(--ink-muted);
}
.jc-timeline__title { font: var(--type-h4); color: var(--ink); }
.jc-timeline__text { font: var(--type-small); color: var(--ink-body); margin-top: var(--space-2); max-width: var(--measure-text); }

/* ==========================================================================
   15. BLOCK DEVICE  (identity/BlockDivider, identity/BlockLoader)
   ========================================================================== */

.jc-divider {
  display: flex; gap: 2px; padding: var(--space-6) 0;
}
.jc-divider span { width: var(--block-half); height: var(--block-half); background: var(--rule); display: block; }
.jc-divider span:nth-child(3n+1) { background: var(--ink); }

.jc-loader { display: flex; gap: 3px; }
.jc-loader span {
  width: var(--block-half); height: var(--block-half); background: currentColor; display: block;
  animation: jc-block-step 720ms steps(1, end) infinite;
}
.jc-loader span:nth-child(2) { animation-delay: 90ms; }
.jc-loader span:nth-child(3) { animation-delay: 180ms; }
.jc-loader span:nth-child(4) { animation-delay: 270ms; }
@keyframes jc-block-step { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0.18; } }
@media (prefers-reduced-motion: reduce) { .jc-loader span { animation: none; } }

/* ==========================================================================
   16. SECTION NAV  (sub-page navigation inside an entity)
   ========================================================================== */

.jc-section-nav { border-bottom: 1px solid var(--rule-heavy); background: var(--paper-raised); }
.jc-section-nav ul {
  list-style: none; margin: 0; padding: 0 var(--page-gutter);
  display: flex; flex-wrap: wrap; column-gap: var(--space-6); row-gap: var(--space-2);
}
.jc-section-nav a {
  display: inline-block; padding: 14px 0;
  font: var(--type-label); letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--ink-muted);
  border-bottom: 3px solid transparent;
}
.jc-section-nav a:hover { color: var(--ink); }
.jc-section-nav li.is-current a { color: var(--ink); border-bottom-color: currentColor; }
.jc-section-nav[data-entity="institute"] li.is-current a { color: var(--entity-institute); }
.jc-section-nav[data-entity="pragma"] li.is-current a    { color: var(--entity-pragma); }
.jc-section-nav[data-entity="republic"] li.is-current a  { color: var(--entity-republic); }
.jc-section-nav[data-entity="wire"] li.is-current a      { color: var(--entity-wire); }

/* ==========================================================================
   17. PAGE MASTHEAD + PROSE
   ========================================================================== */

.jc-masthead {
  padding: var(--space-8) var(--page-gutter) var(--space-7);
  border-bottom: 1px solid var(--rule-heavy);
  display: flex; flex-direction: column; gap: var(--space-4);
}
.jc-masthead__eyebrow {
  font: var(--type-label-sm); letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase; color: var(--ink-muted);
}
.jc-masthead[data-entity="institute"] .jc-masthead__eyebrow { color: var(--entity-institute); }
.jc-masthead[data-entity="pragma"] .jc-masthead__eyebrow    { color: var(--entity-pragma); }
.jc-masthead[data-entity="republic"] .jc-masthead__eyebrow  { color: var(--entity-republic); }
.jc-masthead[data-entity="wire"] .jc-masthead__eyebrow      { color: var(--entity-wire); }
.jc-masthead__title {
  font-family: var(--font-sans); font-weight: var(--fw-black); font-size: 56px;
  line-height: 0.94; letter-spacing: var(--tracking-display); text-transform: uppercase;
  max-width: 22ch;
}
.jc-masthead__standfirst { font: var(--type-lead); color: var(--ink-body); max-width: 60ch; }

@media (max-width: 800px) { .jc-masthead__title { font-size: 36px; } }

/* The prose column measures TEXT, never a container.
   WordPress nests page content inside .wp-block-post-content, so capping
   containers squeezes everything below them. Instead the measure is applied to
   running-text elements at any depth, and containers are left alone. */
.jc-prose { max-width: none; font: var(--type-body); color: var(--ink-body); }
.jc-prose > * + * { margin-top: var(--space-5); }

.jc-prose p,
.jc-prose h1,
.jc-prose h2,
.jc-prose h3,
.jc-prose h4,
.jc-prose ul,
.jc-prose ol,
.jc-prose dl,
.jc-prose blockquote,
.jc-prose figcaption { max-width: var(--measure-text); }

/* Containers, aligned blocks and self-contained pasted sections stay full width. */
.jc-prose .wp-block-post-content,
.jc-prose .entry-content,
.jc-prose .alignfull,
.jc-prose .wp-block-columns,
.jc-prose .wp-block-gallery,
.jc-prose .wp-block-table,
.jc-prose .wp-block-cover,
.jc-prose .wp-block-embed,
.jc-prose .jcc,
.jc-prose .jcx,
.jc-prose .jc-full { max-width: none; }

.jc-prose .alignwide { max-width: var(--page-max); }

/* A pasted section owns its own typography — release the measure inside it. */
.jc-prose .jcc p, .jc-prose .jcc h1, .jc-prose .jcc h2, .jc-prose .jcc h3, .jc-prose .jcc h4,
.jc-prose .jcx p, .jc-prose .jcx h1, .jc-prose .jcx h2, .jc-prose .jcx h3, .jc-prose .jcx h4,
.jc-prose .jc-full p, .jc-prose .jc-full h2, .jc-prose .jc-full h3 { max-width: none; }
.jc-prose h2 { font: var(--type-h2); margin-top: var(--space-8); }
.jc-prose h3 { font: var(--type-h3); margin-top: var(--space-7); }
.jc-prose h4 { font: var(--type-h4); margin-top: var(--space-6); }
.jc-prose a { border-bottom: 1px solid var(--rule); }
.jc-prose a:hover { border-bottom-color: var(--jc-red); }
.jc-prose ul, .jc-prose ol { padding-left: var(--space-5); margin-top: var(--space-4); }
.jc-prose li + li { margin-top: var(--space-2); }
.jc-prose ul { list-style: none; padding-left: 0; }
.jc-prose ul li { position: relative; padding-left: var(--space-5); }
.jc-prose ul li::before {
  content: ""; position: absolute; left: 0; top: 0.55em;
  width: 7px; height: 7px; background: var(--jc-blue);
}
.jc-prose table { border-collapse: collapse; width: 100%; font: var(--type-small); }
.jc-prose th, .jc-prose td {
  text-align: left; padding: 12px var(--space-4) 12px 0;
  border-bottom: 1px solid var(--rule-light); vertical-align: top;
}
.jc-prose th {
  font: var(--type-label-sm); letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--ink-muted);
  border-bottom: 1px solid var(--rule-heavy);
}

/* ==========================================================================
   18. ARTICLE / ARCHIVE
   ========================================================================== */

.jc-article { padding: var(--space-8) var(--page-gutter) var(--space-9); }
.jc-article__meta {
  display: flex; gap: var(--space-5); align-items: baseline;
  font: var(--type-ref); letter-spacing: var(--tracking-ref); color: var(--ink-muted);
  padding-bottom: var(--space-4); border-bottom: 1px solid var(--rule-light);
  margin-bottom: var(--space-6); flex-wrap: wrap;
}
.jc-pagination {
  display: flex; gap: var(--space-5); padding: var(--space-7) 0;
  border-top: 1px solid var(--rule-heavy); font: var(--type-label);
  letter-spacing: var(--tracking-label); text-transform: uppercase;
}
.jc-pagination .page-numbers.current { color: var(--jc-red); }

/* ==========================================================================
   19. FOOTER  (Chrome.jsx > Footer)
   ========================================================================== */

.jc-footer {
  margin-top: var(--space-9); border-top: 1px solid var(--rule-heavy);
  background: var(--paper-raised);
}
.jc-footer__cols {
  padding: var(--space-7) var(--page-gutter);
  display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--space-7);
}
.jc-footer__col { display: flex; flex-direction: column; gap: var(--space-3); }
.jc-footer__mark {
  display: flex; align-items: center; gap: var(--space-3);
  color: var(--jc-blue); margin-bottom: var(--space-1);
}
.jc-footer__mark img { width: 26px; display: block; }
.jc-footer__mark span {
  font: var(--type-label); letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--ink);
}
.jc-footer p { font: var(--type-caption); color: var(--ink-muted); line-height: 1.7; max-width: 46ch; }
.jc-footer strong { color: var(--ink); }
.jc-footer__ref { font: var(--type-ref); letter-spacing: var(--tracking-ref); }
.jc-footer__heading {
  font: var(--type-label-sm); letter-spacing: var(--tracking-label-wide);
  text-transform: uppercase; color: var(--ink-muted);
}
.jc-footer__links { display: flex; flex-direction: column; gap: 6px; font: var(--type-caption); }
.jc-footer__bar {
  border-top: 1px solid var(--rule); padding: 14px var(--page-gutter);
  display: flex; justify-content: space-between; gap: var(--space-5); flex-wrap: wrap;
  font: var(--type-caption); color: var(--ink-faint);
}

@media (max-width: 900px) {
  .jc-footer__cols { grid-template-columns: 1fr; gap: var(--space-6); }
}

/* ==========================================================================
   20. UTILITY SECTIONS
   ========================================================================== */

.jc-band { padding: var(--space-8) var(--page-gutter) 0; }
.jc-band--tight { padding-top: var(--space-7); }
.jc-band--loose { padding-top: var(--space-9); }
.jc-split { display: grid; gap: var(--space-7); }
.jc-split--sidebar-left { grid-template-columns: 260px 1fr; }
.jc-split--sidebar-right { grid-template-columns: 1fr var(--sidebar-width); }
.jc-split--halves { grid-template-columns: 1fr 1fr; }
.jc-split--thirds { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.jc-aside-note { font: var(--type-small); color: var(--ink-muted); margin-top: var(--space-4); max-width: 30ch; }

@media (max-width: 900px) {
  .jc-split--sidebar-left, .jc-split--sidebar-right, .jc-split--halves { grid-template-columns: 1fr; }
}

/* Feature cards — the Institute's three research features */
.jc-feature { display: flex; flex-direction: column; gap: var(--space-4); }
.jc-feature__title { font: var(--type-h3); }
.jc-feature__text { font: var(--type-small); color: var(--ink-body); }

/* Editor parity */
.editor-styles-wrapper { background: var(--surface-page); }