/* ==========================================================================
   COMMODITY TRADING SOCIETY — EXETER UNIVERSITY
   Core stylesheet. Tokens first; nothing below invents a colour or a size.
   ========================================================================== */

/* ----------------------------------------------------------- 01 TOKENS -- */

:root {
  /* Forest — the dominant surface */
  --forest-deep:  #081A10;
  --forest:       #0E2617;
  --forest-mid:   #14301E;
  --forest-soft:  #1B3A26;
  /* Compensates for the baked plaster lifting slightly more than the live
     filter it replaced — measured against the previous render, not guessed. */
  --hero-field:   #0C2415;   /* the lit centre of the hero plaster */
  --crest-emboss: 0.23;      /* how deeply the crest sits in the field */

  /* Cream — the editorial surface */
  --cream:        #F3EEE2;
  --cream-warm:   #EDE6D6;
  --ink:          #10251A;
  --ink-soft:     #3C5145;

  /* Paper — the research section's ground (see §33a) */
  --paper:        #FCFBF7;
  --paper-soft:   #F3F0E8;

  /* Gold — accent only. Never a fill for large areas. */
  --gold:         #C6A75E;
  --gold-bright:  #E0C88C;
  --gold-dim:     rgba(198, 167, 94, 0.30);
  --gold-faint:   rgba(198, 167, 94, 0.12);

  /* Text on forest */
  --on-dark:       #EFE9DB;
  --on-dark-soft:  rgba(239, 233, 219, 0.62);
  --on-dark-faint: rgba(239, 233, 219, 0.52);   /* 4.55:1 on forest — AA */

  /* Rules */
  --rule-dark:  rgba(239, 233, 219, 0.14);
  --rule-light: rgba(16, 37, 26, 0.16);

  /* Type */
  --serif: "Source Serif 4", "Source Serif Pro", Georgia, "Times New Roman", serif;
  --times: "Times New Roman", Times, "Nimbus Roman", "Liberation Serif", serif;   /* the header and the first screen, as the render */
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono:  "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Spacing scale (8pt) */
  --s1: 0.5rem;  --s2: 1rem;   --s3: 1.5rem;  --s4: 2rem;
  --s5: 3rem;    --s6: 4rem;   --s7: 6rem;    --s8: 8rem;

  /* Grid */
  --wrap: 1720px;
  --gutter: clamp(1.5rem, 3.41vw, 4.25rem);   /* 57px at the 1672px reference frame */
  --band: clamp(2.4rem, 4vw, 4rem);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ------------------------------------------------------------ 02 RESET -- */

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

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

body {
  margin: 0;
  background: var(--forest);
  color: var(--on-dark);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.7;
  font-weight: 350;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

h1, h2, h3, h4 { margin: 0; font-weight: 300; font-family: var(--serif); line-height: 1.08; }
p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

:focus-visible { outline: 1px solid var(--gold); outline-offset: 4px; }

::selection { background: var(--gold-dim); }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--gold); color: var(--forest-deep);
  padding: 0.75rem 1.25rem; font-family: var(--mono); font-size: 0.72rem;
  letter-spacing: 0.14em; text-transform: uppercase;
}
.skip:focus { left: var(--gutter); top: 1rem; }

/* ------------------------------------------------------- 03 TYPE ROLES -- */

/* Display — major headings. Light serif, uppercase, open tracking. */
.display {
  font-family: var(--serif);
  font-weight: 350;
  text-transform: uppercase;
  letter-spacing: 0.055em;
  line-height: 1.08;
}
.d1 { font-size: clamp(2.1rem, 4.9vw, 4.1rem); }
.d2 { font-size: clamp(1.6rem, 3.1vw, 2.6rem); }
.d3 { font-size: clamp(1.25rem, 2vw, 1.7rem); letter-spacing: 0.04em; }
/* Desk names arrive as "Energy <em>&amp;</em> Power" — the ampersand is set in
   gold, not italicised, the same way .pub-h does it. */
.display em { font-style: normal; color: var(--gold); }

/* Label — mono, the "market data" voice. Eyebrows, dates, coordinates. */
.label {
  font-family: var(--mono);
  font-size: 0.66rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  line-height: 1.5;
}
.label-gold { color: var(--gold); }

/* Nav/serif small caps — the institutional voice */
.caps {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 0.92rem;
  letter-spacing: 0.19em;
  text-transform: uppercase;
}

.lede {
  font-size: clamp(1.02rem, 1.35vw, 1.18rem);
  line-height: 1.72;
  color: var(--on-dark-soft);
  max-width: 56ch;
  font-weight: 350;
}
.on-cream .lede { color: var(--ink-soft); }

.measure { max-width: 62ch; }

/* --------------------------------------------------- 04 SURFACES/GRID -- */

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

.band { padding-block: var(--band); position: relative; scroll-margin-top: 96px; }
.band-tight { padding-block: clamp(2.2rem, 4vw, 3.4rem); }

/* Where two bands share a ground there is no edge between them, so a full
   band's padding on each side of the join reads as a hole in the page rather
   than as separation. Half on the upper side closes it. */
.band.on-forest      + .band.on-forest,
.band.on-forest-deep + .band.on-forest-deep,
.band.on-cream       + .band.on-cream { padding-top: calc(var(--band) * 0.45); }

.on-forest { background: var(--forest); color: var(--on-dark); }
.on-forest-deep { background: var(--forest-deep); color: var(--on-dark); }
.on-cream { background: var(--cream); color: var(--ink); }
.on-cream .label-gold { color: #9A7C32; }
.on-cream a { color: inherit; }

/* Paper grain — applied to any surface, never noticeable, always there. */
.grain::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.055'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

.rule { border: 0; border-top: 1px solid var(--rule-dark); margin: 0; }
.on-cream .rule { border-top-color: var(--rule-light); }

.rule-gold { border: 0; border-top: 1px solid var(--gold); width: 56px; margin: 0; }

/* ---------------------------------------------------------- 05 BUTTONS -- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.95rem 1.6rem;
  border: 1px solid var(--gold-dim);
  color: var(--gold-bright);
  font-family: var(--serif);
  font-weight: 500;
  font-size: 0.86rem;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color 0.45s var(--ease), color 0.45s var(--ease), border-color 0.45s var(--ease);
}
.btn .arw { transition: transform 0.45s var(--ease); }
.btn:hover { background: var(--gold); border-color: var(--gold); color: var(--forest-deep); }
.btn:hover .arw { transform: translateX(4px); }

.btn-solid { background: var(--gold); border-color: var(--gold); color: var(--forest-deep); }
.btn-solid:hover { background: var(--gold-bright); border-color: var(--gold-bright); }

.btn-quiet { border-color: var(--rule-dark); color: var(--on-dark); }
.btn-quiet:hover { background: transparent; border-color: var(--on-dark); color: var(--on-dark); }

.on-cream .btn { border-color: rgba(154,124,50,0.45); color: #8A6D28; }
.on-cream .btn:hover { background: #8A6D28; border-color: #8A6D28; color: var(--cream); }

.btn-row { display: flex; flex-wrap: wrap; gap: 1rem; }

/* Text link with travelling gold underline */
.tlink {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--mono); font-size: 0.68rem;
  letter-spacing: 0.2em; text-transform: uppercase;
  padding-bottom: 4px;
  background-image: linear-gradient(var(--gold), var(--gold));
  background-size: 0% 1px;
  background-repeat: no-repeat;
  background-position: left bottom;
  transition: background-size 0.5s var(--ease), color 0.3s var(--ease);
}
.tlink:hover { color: var(--gold-bright); background-size: 100% 1px; }
.on-cream .tlink:hover { color: #8A6D28; }

/* Pending link state — used where a real URL has not been supplied yet. */
.is-pending,
.is-pending:hover {
  cursor: default;
  background: transparent;
  color: var(--on-dark-faint);
  border-color: var(--rule-dark);
}
.is-pending .arw { display: none; }
.on-cream .is-pending, .on-cream .is-pending:hover {
  color: rgba(16, 37, 26, 0.4);
  border-color: var(--rule-light);
}

/* ----------------------------------------------------------- 06 HEADER -- */

.header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 80;
  transition: background-color 0.5s var(--ease), border-color 0.5s var(--ease);
  border-bottom: 1px solid transparent;
}
.header.is-stuck {
  background: rgba(10, 31, 19, 0.92);
  backdrop-filter: blur(10px);
  border-bottom-color: var(--rule-dark);
}

.header .wrap { display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; gap: 2rem; }
.head-actions { justify-self: end; display: flex; align-items: center; gap: 1rem; margin-top: 24px; }   /* button top at 24 */
.header-inner { padding-block: 0; padding-right: calc(var(--gutter) - 11px); transition: padding 0.5s var(--ease); }
.header.is-stuck .header-inner { padding-block: 0.9rem; }
.header.is-stuck .brand-nocrest, .header.is-stuck .nav, .header.is-stuck .head-actions { margin-top: 0; }
.header.is-stuck .wrap { align-items: center; }
.header.is-stuck .brand-stack .bs-1 { font-size: 30px; }
.header.is-stuck .brand-stack .bs-2 { font-size: 10px; margin-top: 0; }
.header.is-stuck .nav { margin-top: 0; }
.header.is-stuck .nav a.nav-link { font-size: 16px; }
.header.is-stuck .nav-join { height: 42px; font-size: 16px; padding: 0 22px; }
.brand-stack .bs-1, .brand-stack .bs-2, .nav a.nav-link, .nav-join { transition: font-size 0.4s var(--ease), height 0.4s var(--ease), padding 0.4s var(--ease), background-color 0.45s var(--ease), color 0.45s var(--ease), border-color 0.45s var(--ease); }

.brand { display: flex; align-items: center; gap: 1rem; }
.header .brand-nocrest { margin-top: 19px; }                /* CTS cap top at 29 */

/* In the footer there is room to breathe: always the full wordmark, allowed to wrap. */
.brand-footer .brand-name { white-space: normal; }

.nav { display: flex; align-items: center; }
.nav a.nav-link {
  position: relative;
  color: #E4EDE6;
  font-family: var(--times); font-weight: 400;
  font-size: 22px;
  letter-spacing: 0.09em; text-transform: uppercase;
  line-height: 1;
  padding-bottom: 0;
  white-space: nowrap;
}
.nav a.nav-link::after {
  content: ""; position: absolute; left: 0; bottom: -10px;
  height: 1px; width: 0; background: var(--gold);
  transition: width 0.45s var(--ease);
}
.nav a.nav-link:hover::after { width: 100%; }


.nav { gap: 62px; padding-right: 24px; margin-top: 42px; }       /* nav cap top at 45 */
.nav-join {
  font-family: var(--times);
  height: 55px;                                        /* 219×55 on the reference */
  padding: 0 33px 0 32px;
  gap: 13px;
  font-size: 22px;
  font-weight: 400;
  letter-spacing: 0.128em;
  margin: 0;
  border: 2px solid #B98D3A;
  color: #F0CE6C;
}
.nav-join .arw { width: 21px; height: 12px; }

.burger {
  display: none;
  width: 40px; height: 40px;
  align-items: center; justify-content: center;
  border: 1px solid var(--rule-dark);
}
.burger i { display: block; width: 16px; height: 1px; background: var(--on-dark); position: relative; }
.burger i::before, .burger i::after {
  content: ""; position: absolute; left: 0; width: 16px; height: 1px; background: var(--on-dark);
  transition: transform 0.35s var(--ease);
}
.burger i::before { top: -5px; }
.burger i::after { top: 5px; }
.burger[aria-expanded="true"] i { background: transparent; }
.burger[aria-expanded="true"] i::before { transform: translateY(5px) rotate(45deg); }
.burger[aria-expanded="true"] i::after { transform: translateY(-5px) rotate(-45deg); }

/* Mobile drawer */
.drawer {
  position: fixed; inset: 0; z-index: 70;
  background: var(--forest-deep);
  display: flex; flex-direction: column; justify-content: center;
  padding: var(--gutter);
  transform: translateY(-100%);
  transition: transform 0.6s var(--ease);
  visibility: hidden;
}
.drawer.is-open { transform: none; visibility: visible; }
.drawer a, .drawer .drawer-join { font-family: var(--times); }
.drawer a {
  font-family: var(--serif); font-weight: 300; text-transform: uppercase;
  font-size: clamp(1.8rem, 8vw, 2.6rem); letter-spacing: 0.07em;
  padding-block: 1.1rem;
  border-bottom: 1px solid var(--rule-dark);
  display: flex; align-items: baseline; gap: 1rem;
}
.drawer a .n { font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.2em; color: var(--gold); }
.drawer .drawer-join { margin-top: 2.5rem; align-self: flex-start; }

/* ------------------------------------------------------------- 07 HERO -- */
/* The first screen is the crest in a plastered forest field. Nothing else. */

.plaster { background-color: var(--hero-field); position: relative; overflow: hidden; }
.plaster::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  /* The broad cloud is baked (tools/make-plaster.py) rather than filtered live:
     the old chain ran three feTurbulence primitives over every plaster section
     at device resolution, four times on Home. The speckle stays procedural —
     a 160px tile is cheap, unlike a full-viewport filter region. */
  background-image: url("../img/plaster.png"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='5'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)' opacity='0.16'/%3E%3C/svg%3E");
  background-size: cover, 160px 160px;
  background-position: center, top left;
  background-repeat: no-repeat, repeat;
  mix-blend-mode: soft-light;
  opacity: 0.9;
}
.plaster::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    radial-gradient(74% 72% at 50% 46%, transparent 14%, rgba(4, 13, 8, 0.42) 56%, rgba(3, 10, 6, 0.86) 100%),
    linear-gradient(180deg, rgba(3, 10, 6, 0.18), transparent 22%, transparent 70%, rgba(3, 10, 6, 0.32));
}

.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
}

/* The supplied crest, embossed into the field. Its own linework, faded —
   never redrawn. Strength is --crest-emboss, nothing else. */
.hero-crest {
  position: absolute;
  left: 50%; top: 49.4%;
  transform: translate(-50%, -50%);
  width: clamp(260px, 35.5vw, 720px);
  height: auto;
  opacity: var(--crest-emboss);
  z-index: 1;
}

/* Placeholder frame shown until the supplied crest file is in place. */
.crest-slot {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 1px dashed currentColor;
  opacity: 0.45;
  mix-blend-mode: normal;
  filter: none;
}
.crest-slot span {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

/* Section index rail — present from the first screen, as in the reference. */
/* Vertical university mark, right edge, rule above. */
.edge-mark {
  position: fixed;
  right: calc(var(--gutter) + 8px); top: 48.8%;
  transform: translateY(-50%);
  z-index: 60;
  display: flex; flex-direction: column; align-items: center; gap: 25px;
  color: rgba(239, 233, 219, 0.6);
  transition: color 0.4s var(--ease);
  pointer-events: none;
}

/* Scroll cue */
.scroll-cue {
  position: absolute;
  right: calc(var(--gutter) + 5px); bottom: 7.8vh;    /* centre (1581, 840) on the reference */
  width: 56px; height: 56px;
  border: 1px solid rgba(198, 167, 94, 0.8);
  border-radius: 50%;
  display: grid; place-items: center;
  color: var(--gold);
  transition: background-color 0.45s var(--ease), color 0.45s var(--ease), border-color 0.45s var(--ease);
  z-index: 3;
}
.scroll-cue:hover { background: var(--gold); border-color: var(--gold); color: var(--forest-deep); }
.scroll-cue svg { animation: nudge 2.8s var(--ease) infinite; }
@keyframes nudge {
  0%, 72%, 100% { transform: translateY(0); }
  84% { transform: translateY(4px); }
}

/* ------------------------------------------------------- 07a CREST MARK -- */
/* The hero crest is the logo moment, so it gets a real emboss rather than a
   flat tint: an SVG specular pass lights the ink as a height field (see the
   #cts-emboss filter in index.html), and a masked sheen travels across it
   every few seconds, the way light catches a struck seal.

   The plate itself is untouched supplied artwork — this only lights it. */

.crest-mark {
  position: absolute;
  left: 50%; top: 49.4%;
  transform: translate(-50%, -50%);
  width: clamp(260px, 35.5vw, 720px);
  aspect-ratio: 1;
  z-index: 1;
  pointer-events: none;
}

/* While the pointer is over the hero the light follows it, so the relief is
   lit from wherever you are looking. JS drives --lx/--ly; CSS only moves the
   sheen band, which stays on the compositor. */
.crest-mark { --lx: 50%; --ly: 40%; }

/* The sheen is clipped to the crest's own linework, so the light only ever
   appears on the engraving and never as a rectangle over the plaster. */
.crest-sheen {
  -webkit-mask-image: url("../img/cts-crest-emboss.png");
          mask-image: url("../img/cts-crest-emboss.png");
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  overflow: hidden;
  /* Adds light to the scene rather than painting over it. */
  mix-blend-mode: screen;
}

/* Pressed in once, on arrival. */
@keyframes crest-press {
  from { opacity: 0; transform: scale(1.035); }
  to   { opacity: var(--crest-emboss); transform: scale(1); }
}

/* Idle for eleven seconds, then a two-second pass. */
@keyframes crest-sheen {
  0%, 83%  { transform: translate3d(-180%, 0, 0) rotate(10deg); }
  100%     { transform: translate3d(360%, 0, 0) rotate(10deg); }
}

/* No hover, no pointer lighting — the timed sweep carries it. */

/* ------------------------------------------------- 07b STATEMENT SCREEN -- */
/* The message the hero deliberately withholds, one scroll later. */

.opening {
  min-height: 100svh;
  display: grid;
  align-content: center;
  text-align: center;
}
.opening h1 { margin-bottom: 1.8rem; }
.opening .lede { margin-inline: auto; text-align: center; max-width: 48ch; }
.opening .btn-row { justify-content: center; margin-top: 2.8rem; }

/* -------------------------------------------------------- 08 STATEMENT -- */

.statement-q {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.5rem, 3.1vw, 2.5rem);
  line-height: 1.34;
  letter-spacing: 0.005em;
  max-width: 26ch;
}
.statement-q em { font-style: italic; color: #8A6D28; }
.pillar {
  display: grid;
  grid-template-columns: 5rem minmax(0, 4fr) minmax(0, 6fr);
  gap: clamp(1rem, 4vw, 3rem);
  align-items: baseline;
  padding-block: clamp(1.8rem, 3.4vw, 2.8rem);
  border-bottom: 1px solid var(--rule-dark);
  position: relative;
  transition: color 0.5s var(--ease);
}
.pillar::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0;
  background: linear-gradient(90deg, rgba(198,167,94,0.05), transparent 60%);
  opacity: 0; transition: opacity 0.55s var(--ease); pointer-events: none;
}
.pillar:hover::before { opacity: 1; }
.pillar-n { color: var(--gold); }
.pillar h3 { font-size: clamp(1.5rem, 2.6vw, 2.15rem); }
.pillar p { color: var(--on-dark-soft); font-size: 0.98rem; margin: 0; max-width: 48ch; }

/* ------------------------------------------------------------- 10 DESKS -- */
/* Index-of-a-report treatment */

.desks { border-top: 1px solid var(--rule-light); }
.desk {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 5fr) minmax(0, 5fr) 2.5rem;
  gap: clamp(1rem, 3vw, 2.5rem);
  align-items: center;
  padding-block: clamp(1.5rem, 3vw, 2.3rem);
  border-bottom: 1px solid var(--rule-light);
  transition: padding-left 0.5s var(--ease), background-color 0.5s var(--ease);
}
.desk:hover { background: rgba(154,124,50,0.06); padding-left: 1rem; }
.desk h3 { font-size: clamp(1.3rem, 2.3vw, 1.9rem); }
.desk p { margin: 0; color: var(--ink-soft); font-size: 0.95rem; max-width: 52ch; }

.feed { border-top: 1px solid var(--rule-dark); }

.entry {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  padding-block: clamp(1.8rem, 3.4vw, 2.6rem);
  border-bottom: 1px solid var(--rule-dark);
  align-items: start;
}
.entry-meta { display: flex; flex-wrap: wrap; gap: 1.3rem; margin-bottom: 1rem; color: var(--on-dark-faint); }
.entry-meta .desk-tag { color: var(--gold); }
.entry h3 { font-size: clamp(1.25rem, 2vw, 1.7rem); margin-bottom: 0.7rem; }
.entry p { color: var(--on-dark-soft); font-size: 0.96rem; max-width: 60ch; margin: 0; }
.entry-figure {
  aspect-ratio: 16 / 10;
  border: 1px solid var(--rule-dark);
  background: var(--forest-mid);
}

/* Awaiting-publication slots — honest placeholder, not a broken card */
.slot {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  padding-block: clamp(1.8rem, 3.4vw, 2.6rem);
  border-bottom: 1px solid var(--rule-dark);
  align-items: center;
}

/* The empty-feed note appears only while the feed has nothing in it, so the
   homepage can never claim "awaiting first publication" above three articles. */
.feed-note-empty { display: none; color: var(--on-dark-faint); }
.exp {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 7fr);
  gap: clamp(1rem, 4vw, 3rem);
  padding-block: 1.5rem;
  border-bottom: 1px solid var(--rule-light);
  align-items: baseline;
}
.exp h3 { font-family: var(--serif); font-size: 1.15rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; }
.exp p { margin: 0; color: var(--ink-soft); font-size: 0.95rem; max-width: 60ch; }

/* ------------------------------------------------------------ 13 INDUSTRY -- */

/* For industry — ruled rows on the site's one list idiom. This was four
   bordered cells, which is the card pattern the brief rules out. */
.industry-lead {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(1.2rem, 3vw, 3rem); align-items: center;
  margin-bottom: clamp(1.8rem, 3.4vw, 2.6rem);
}
.industry-lead .lede { max-width: 56ch; margin: 0; }
.verbs { border-top: 1px solid var(--rule-dark); }
.verb {
  display: grid;
  grid-template-columns: 3rem minmax(0, 12rem) minmax(0, 1fr);
  gap: 0.35rem clamp(1rem, 3vw, 2.6rem);
  align-items: baseline;
  padding-block: clamp(1.1rem, 2vw, 1.5rem);
  border-bottom: 1px solid var(--rule-dark);
}
.verb-n { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.2em; color: var(--gold); }
.verb-name { font-family: var(--serif); font-weight: 500; font-size: clamp(1.05rem, 1.5vw, 1.3rem); letter-spacing: 0.02em; margin: 0; }
.verb p { margin: 0; font-size: 0.95rem; line-height: 1.6; color: var(--on-dark-soft); max-width: 52ch; }
@media (max-width: 900px) {
  .industry-lead { grid-template-columns: 1fr; }
  .verb { grid-template-columns: 2.5rem 1fr; }
  .verb p { grid-column: 2; }
}

/* ------------------------------------------------------------- 14 CLOSER -- */

/* The last word on every page: one line, one button, the seal behind it. It is
   a sign-off, not a section, so it stays tight — its height is its copy plus a
   short band, with no floor of its own.

   The seal is a watermark and is sized as one. It used to be sized from the
   viewport while the section's height came from the copy, so the two drifted
   apart and every width cut its top and bottom flat; capping it against the
   section's own height means it can never outgrow the space it sits in. */
.closer {
  position: relative; overflow: hidden; text-align: center;
  display: grid; align-content: center;
  padding-block: clamp(2.1rem, 3.4vw, 2.9rem);
}
.closer-crest {
  position: absolute; top: 50%; left: 50%;
  height: min(clamp(175px, 19vw, 245px), 82%);
  width: auto;
  transform: translate(-50%, -50%);
  opacity: 0.09;
  pointer-events: none;
}
.closer-inner { position: relative; z-index: 2; }
/* Held here rather than inline on each page, so the sign-off keeps one rhythm
   everywhere it appears. */
.closer .display { margin: 0.85rem 0 0.7rem; }
.closer .lede { margin-inline: auto; text-align: center; max-width: 44ch; }
.closer .btn-row { justify-content: center; margin-top: 1.4rem; }

/* ------------------------------------------------------------ 15 FOOTER -- */

.footer { background: var(--forest-deep); padding-block: var(--s6) var(--s4); }
.footer h4 { font-family: var(--mono); font-size: 0.64rem; font-weight: 400; letter-spacing: 0.2em; text-transform: uppercase; color: var(--on-dark-faint); margin-bottom: 1.3rem; }
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li { margin-bottom: 0.7rem; }
.footer li a { font-size: 0.92rem; color: var(--on-dark-soft); transition: color 0.35s var(--ease); }
.footer li a:hover { color: var(--gold-bright); }

/* ------------------------------------------------------------- 16 MODAL -- */

.modal { position: fixed; inset: 0; z-index: 120; visibility: hidden; }
.modal.is-open { visibility: visible; }

.modal-scrim {
  position: absolute; inset: 0;
  background: rgba(4, 14, 8, 0.72);
  backdrop-filter: blur(6px);
  opacity: 0; transition: opacity 0.5s var(--ease);
}
.modal.is-open .modal-scrim { opacity: 1; }

.modal-panel {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -46%);
  width: min(100% - 2rem, 680px);
  max-height: min(88svh, 860px);
  overflow-y: auto;
  background: var(--forest);
  border: 1px solid var(--gold-dim);
  padding: clamp(2rem, 5vw, 3.4rem);
  opacity: 0;
  transition: opacity 0.5s var(--ease), transform 0.6s var(--ease);
}
.modal.is-open .modal-panel { opacity: 1; transform: translate(-50%, -50%); }

.modal-close {
  position: absolute; top: 1.1rem; right: 1.1rem;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  color: var(--on-dark-soft);
  border: 1px solid transparent;
  transition: color 0.35s var(--ease), border-color 0.35s var(--ease);
}
.modal-close:hover { color: var(--gold); border-color: var(--gold-dim); }

.modal h2 { margin-bottom: 0.9rem; }
.modal-intro { color: var(--on-dark-soft); font-size: 1rem; margin-bottom: var(--s4); max-width: 42ch; }

.route { padding-block: var(--s3); border-top: 1px solid var(--rule-dark); }
.route h3 { font-family: var(--serif); font-size: 1rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: 0.6rem; }
.route p { color: var(--on-dark-soft); font-size: 0.93rem; margin-bottom: 1.2rem; max-width: 46ch; }

.socials { display: flex; flex-wrap: wrap; gap: 0.8rem; }
.social {
  display: inline-flex; align-items: center; gap: 0.6rem;
  border: 1px solid var(--rule-dark);
  padding: 0.6rem 1.1rem;
  font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase;
  transition: border-color 0.4s var(--ease), color 0.4s var(--ease);
}
.social:hover { border-color: var(--gold); color: var(--gold-bright); }

/* ------------------------------------------------------------ 17 MOTION -- */

.rv { opacity: 0; transform: translateY(16px); }
.rv.is-in { opacity: 1; transform: none; transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
.rv-d1.is-in { transition-delay: 0.08s; }
.rv-d2.is-in { transition-delay: 0.16s; }
.rv-d3.is-in { transition-delay: 0.24s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rv { opacity: 1; transform: none; }
  .scroll-cue svg { animation: none; }
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* -------------------------------------------------------- 18 RESPONSIVE -- */

@media (max-width: 1000px) {
  .nav .nav-link { display: none; }
  .header .wrap { grid-template-columns: 1fr auto; }
  .nav { display: none; }
  .nav-join { height: 42px; padding: 0 20px; font-size: 15px; gap: 10px; }
  .burger { display: flex; }
  .verbs { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 760px) {
  body { font-size: 15.5px; }
  .pillar { grid-template-columns: 3rem 1fr; row-gap: 0.7rem; }
  .pillar p { grid-column: 2; }
  .desk { grid-template-columns: 3rem 1fr; row-gap: 0.5rem; }
  .desk p { grid-column: 2; }
  .entry, .slot { grid-template-columns: 1fr; }
  .entry-figure, .slot-frame { order: -1; }
  .exp { grid-template-columns: 1fr; row-gap: 0.4rem; }
  .verbs { grid-template-columns: 1fr; }
  .verb { min-height: 0; }
  .opening { min-height: 88svh; }
  .scroll-cue { left: 50%; transform: translateX(-50%); right: auto; }
}

/* Small screens: the crest is the logo; the wordmark contracts to CTS. */
@media (max-width: 620px) {
  .nav { gap: 0.7rem; }
  .nav-join { padding: 0.6rem 0.95rem; font-size: 0.7rem; letter-spacing: 0.15em; }
  .nav-join .arw { display: none; }
  .opening .btn { padding: 0.85rem 1.2rem; font-size: 0.74rem; letter-spacing: 0.15em;
                  white-space: normal; text-align: center; }
  .opening .btn-row { flex-direction: column; align-items: center; gap: 0.75rem; }
  .opening .lede { font-size: 1rem; }
}

/* ---------------------------------------------------------- 19 PAGE HEAD -- */
/* Interior pages open on the same plaster wall as home, with the crest
   cropped off the right edge — the motif from the committee graphics. */

.page-head {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(280px, 42svh, 460px);
  padding-block: clamp(7rem, 12vh, 9rem) clamp(2.5rem, 5vh, 4rem);
  overflow: hidden;
}
.page-head-crest {
  position: absolute;
  top: 50%; right: -9%;
  width: clamp(340px, 44vw, 780px);
  transform: translateY(-50%);
  opacity: 0.085;
  pointer-events: none;
  z-index: 0;
}
.page-head .wrap { position: relative; z-index: 2; }
.page-head h1 { margin: 1.4rem 0 1.6rem; }
.page-head .lede { max-width: 52ch; }

/* -------------------------------------------------- 19b SECTION HEADS -- */
/* There is ONE palette, defined once in section 01, and ONE way to open a
   section: centred running head, gold hairline, small-caps strapline. The
   interior pages used to run their own brighter green and their own brochure
   type scale, which is why the site changed colour and rhythm as you moved
   through it. Both are gone; the hero mockup is the reference everywhere. */

.section-head {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
  margin-bottom: clamp(2.4rem, 5vw, 3.8rem);
}

/* A column of running prose. Not a card: no border, no ground, no radius. */
.measure-block {
  max-width: 62ch;
  margin-inline: auto;
}

/* A single sentence set apart from the prose around it by air and a rule. */
.callout {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.12rem, 1.8vw, 1.42rem);
  line-height: 1.6;
  color: var(--on-dark);
  max-width: 62ch;
  margin: clamp(2.4rem, 4.5vw, 3.6rem) 0 0;
  padding-top: clamp(1.6rem, 3vw, 2.4rem);
  border-top: 1px solid var(--rule-dark);
}
.on-cream .callout { color: var(--ink); border-top-color: var(--rule-light); }

/* --------------------------------------------------------- 20 COMMITTEE -- */
/* One grid, everyone the same size. Portraits are circular in a thin gold ring,
   the way the launch graphics draw them, but the page is a straightforward
   directory rather than a run of brochure spreads. */

.roster {
  display: grid;
  /* Fourteen people. Seven across gives two complete rows with no orphans;
     five gives 5/5/4. Column counts that leave a near-empty last row (six,
     which strands two) are avoided deliberately. */
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: clamp(2.2rem, 3.6vw, 3.4rem) clamp(1.2rem, 2vw, 2rem);
  margin-top: clamp(2rem, 4vw, 3.2rem);
  /* Rows are named/roled at the same height across the whole grid, so the
     gold hairlines under the names read as one continuous line. */
  grid-template-rows: repeat(2, auto);
}

@media (max-width: 1180px) { .roster { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 860px)  { .roster { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.member { margin: 0; text-align: center; }

.portrait {
  position: relative;
  width: 100%;
  max-width: 168px;
  margin: 0 auto clamp(0.9rem, 1.6vw, 1.2rem);
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  /* Until a photograph arrives the seat is a struck medal, not an empty
     ring: a double rule, a darker field and the initials cut into it. It has
     to look like a decision, because fourteen empty circles look like a
     website that failed to load. */
  border: 1px solid var(--gold-dim);
  box-shadow: inset 0 0 0 1px rgba(198, 167, 94, 0.14), inset 0 0 0 7px rgba(8, 26, 16, 0.55);
  background:
    radial-gradient(120% 120% at 50% 18%, rgba(198, 167, 94, 0.10), transparent 62%),
    rgba(239, 233, 219, 0.028);
  transition: border-color 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.member:hover .portrait { border-color: var(--gold); box-shadow: inset 0 0 0 1px rgba(198,167,94,0.3), inset 0 0 0 7px rgba(8,26,16,0.5); }

/* Hover-only: a scrim and a gold "in" mark over the ring, the whole circle
   linking out to LinkedIn. Absent from the DOM entirely when a seat has no
   URL (buildCommittee), so there is never a dead icon to hover. */
.li-veil {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background: rgba(7, 20, 13, 0.72);
  opacity: 0;
  transition: opacity 0.35s var(--ease);
}
.member:hover .li-veil, .li-veil:focus-visible { opacity: 1; }
.li-mark {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border: 1px solid var(--gold);
  border-radius: 50%;
  color: var(--gold-bright);
  transform: scale(0.85);
  transition: transform 0.35s var(--ease);
}
.li-mark svg { display: block; }
.member:hover .li-mark, .li-veil:focus-visible .li-mark { transform: scale(1); }
@media (prefers-reduced-motion: reduce) { .li-veil, .li-mark { transition: none; } }
.portrait img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.portrait-mono {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-family: var(--serif);
  font-size: clamp(1.15rem, 1.9vw, 1.6rem);
  font-weight: 400;
  letter-spacing: 0.2em;
  color: rgba(198, 167, 94, 0.78);
  text-indent: 0.2em;
}

.member-name {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(0.78rem, 0.94vw, 0.9rem);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.35;
  color: var(--on-dark);
  margin: 0 0 0.55rem;
  /* Two lines' worth, always — names that wrap must not push their role out
     of line with the rest of the row. */
  min-height: 2.7em;
}
.member-role {
  font-family: var(--serif);
  font-size: clamp(0.95rem, 1.25vw, 1.1rem);
  line-height: 1.35;
  color: var(--on-dark-soft);
  margin: 0;
  position: relative;
  padding-top: 0.75rem;
}
.member-role::before {
  content: "";
  position: absolute; top: 0; left: 50%;
  transform: translateX(-50%);
  width: 26px; height: 1px;
  background: var(--gold);
}

@media (max-width: 760px) {
  .roster { grid-template-columns: repeat(2, 1fr); gap: 2rem 1.2rem; }
  .portrait { max-width: 150px; }
  .member-name { font-size: 0.78rem; letter-spacing: 0.12em; }
  .member-role { font-size: 0.92rem; }
}

/* ---------------------------------------------------------- 21 DESKS -- */
/* Five ruled rows, numbered. The same construction as .pillar — typography and
   a hairline, never a card. */

.desks { border-top: 1px solid var(--rule-dark); }

/* ------------------------------------------------------- 22 FILTER + FEED -- */

.filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 0.6rem;
  padding-bottom: clamp(1.6rem, 3vw, 2.4rem);
}
.filter {
  border: 1px solid rgba(248, 238, 231, 0.22);
  padding: 0.6rem 1.15rem;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--on-dark-soft);
  transition: border-color 0.4s var(--ease), color 0.4s var(--ease), background-color 0.4s var(--ease);
  white-space: nowrap;
}
.filter:hover { color: var(--on-dark); border-color: var(--on-dark-faint); }
.filter[aria-pressed="true"] { background: var(--gold); border-color: var(--gold); color: var(--forest-deep); }

/* --------------------------------------------------------- 23 FORMATS --- */

.formats { border-top: 1px solid var(--rule-dark); }

/* --------------------------------------------------------- 24 ARTICLE --- */

.article { padding-block: 0 clamp(1rem, 2vw, 2rem); }

.article h1 { font-size: clamp(2rem, 4.2vw, 3.3rem); margin-bottom: 1.4rem; max-width: 22ch; }
.article-hero { width: 100%; border: 1px solid var(--rule-light); margin-bottom: clamp(2rem, 4vw, 3rem); }

/* ----------------------------------------------- 25 RESPONSIVE (19–24) --- */

@media (max-width: 1000px) {
  .page-head-crest { right: -22%; opacity: 0.06; }
}

@media (max-width: 760px) {
  .page-head { min-height: 0; padding-block: 8rem 3rem; }
  .article h1 { max-width: none; }
}

@media (max-width: 420px) {
  .portrait { border-width: 2px; }
}

/* Article masthead sits on the plaster, so its type flips to the dark palette. */
.plaster .article-summary { color: var(--on-dark-soft); }
.plaster .article h1 { margin-bottom: 1.4rem; }

/* ---------------------------------------------------------- 27 PASSAGE -- */
/* A scroll-driven band: the line the vessel sails along is a commodity
   forward curve, rising away in contango. Cargo and paper on one line.

   The curve draws itself and the vessel rides it, both mapped to the band's
   progress through the viewport by scrollTravel() in cts-ui.js. */

.passage {
  display: grid;
  align-content: center;
  gap: clamp(1.4rem, 3vw, 2.4rem);
  padding-block: clamp(3.5rem, 8vw, 7rem);
  overflow: hidden;
}

/* Unlabelled contract grid — chart texture, not a plot. */
.passage-grid {
  stroke: rgba(239, 233, 219, 0.055);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

/* ======================================================================
   28 THE ENGRAVED WORLD — entry, transitions, the five scenes
   Everything drawn here is fine single-weight line in the crest's own
   language: gold on forest, engraved. No photography, ever.
   ====================================================================== */

:root {
  --deck-gold:   #C6A75E;
  --deck-cream:  #EFE9DB;
  --slow: cubic-bezier(0.16, 1, 0.3, 1);
  --engrave: rgba(198, 167, 94, 0.55);        /* line weight colour */
  --engrave-faint: rgba(198, 167, 94, 0.22);
  --engrave-ink: rgba(239, 233, 219, 0.14);
}

/* ------------------------------------------------------- 28b THE WIPE -- */
/* Page-to-page — every page-to-page, including the first of a session (the
   head script in every page sets this up; see the inline comment there):
   a forest field crosses behind the crest, which presses in as it does.

   The field is static markup, so it exists at first paint — the arriving page
   is never revealed before it is covered. It is retracted by a CSS animation,
   which runs to completion whether or not any script does. Nothing here can
   leave a page hidden: no element's opacity is used to conceal content, and
   the reveal has no JavaScript in its path. */

.wipe {
  position: fixed; inset: 0; z-index: 190;
  background: var(--forest-deep);
  transform: translate3d(-102%, 0, 0);
  pointer-events: none;
  display: grid; place-items: center;
}
.wipe img {
  width: clamp(160px, 20vw, 320px);
  opacity: 0;
  transform: scale(1.05);
}

/* Arriving: the field covers the page, the crest presses in, then both
   retract on their own.

   The covering position lives ONLY inside the animation, with fill-mode `both`
   so it also applies during the delay. That way the element's resting state is
   always "retracted" — if animations are unavailable or disabled for any
   reason, the field is simply off-screen and the page is visible. There is no
   state in which a reader is left looking at a blank field. */
html.is-arriving .wipe {
  animation: wipe-off 0.7s var(--slow) 0.42s both;
}
html.is-arriving .wipe img {
  animation: wipe-crest 0.55s var(--slow) 0.1s both;
}
@keyframes wipe-off {
  from { transform: none; }
  to   { transform: translate3d(102%, 0, 0); }
}
@keyframes wipe-crest {
  to { opacity: var(--crest-emboss); transform: scale(1); }
}

/* Leaving: script slides the field in and the crest presses in with it,
   then navigates. */
.wipe.is-in {
  transform: none;
  transition: transform 0.7s var(--slow);
  pointer-events: auto;
  animation: none;
}
.wipe.is-in img {
  animation: wipe-crest 0.5s var(--slow) 0.15s both;
}

@media (prefers-reduced-motion: reduce) {
  html.is-arriving .wipe { animation: none; transform: translate3d(102%, 0, 0); }
  html.is-arriving .wipe img, .wipe.is-in img { animation: none; }
  .wipe.is-in { transition: none; }
}

/* ------------------------------------------------------- 28c SCENES ---- */

/* The journey is one continuous field. The five scenes scroll over a single
   sticky canvas, so they carry no ground of their own — a background on a
   scene would hide the thing it is standing on. */
/* Portrait: the type sits over the field rather than beside it, so the fade
   runs bottom-to-top instead. */

/* The statement: one per scene, and it carries the screen. */
.statement {
  font-family: var(--serif);
  font-weight: 600;
  font-variant-caps: small-caps;
  font-size: clamp(2.4rem, 7.6vw, 9rem);
  line-height: 0.94;
  letter-spacing: -0.005em;
  color: var(--on-dark);
  max-width: 11ch;
  margin: 0 0 clamp(1.4rem, 3vh, 2.2rem);
}

/* Engraving strokes: everything is a hairline, everything draws on scroll. */
.engrave { fill: none; stroke: var(--engrave); stroke-width: 1.1; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }   /* set by JS to length */

/* --- II Haulage: rail in elevation, wagons moving right ------------------ */@keyframes halo { 0% { opacity: 0.7; transform: scale(0.4); } 100% { opacity: 0; transform: scale(2.6); } }

/* The rail is fixed at the gutter and only shown above 1180px. The journey
   scenes set their copy at the gutter as well, so the numerals and the gold
   bar printed over the first ~95px of every statement. Give the scene column
   clearance for exactly the range where the rail exists. */

/* ------------------------------------------------------ 28c-ii PINS ---- */
/* Chokepoint markers ride the globe: positioned every frame from the 3-D
   point, so the labels turn with it instead of floating over a picture. */

/* The rail indexes the journey and nothing else. It used to be mounted for
   the whole page, which put it on top of every band below the hero and on
   the footer. */
/* ---------------------------------------------------- 28d RESPONSIVE --- */
@media (max-width: 1000px) {

  /* Below this the chart is too narrow for its own labels: at 768px a node
     label renders at about 5 CSS px. The card names the place instead, and the
     nodes are scaled as groups to stay tappable. */
  .node text { display: none; }
}

/* ------------------------------------------------- 29 CERTIFICATE OF ASSAY -- */
/* Research mastheads are drawn as documents: ruled, referenced, stamped. */

.assay {
  border: 1px solid var(--gold-dim);
  padding: clamp(1.4rem, 3vw, 2.6rem);
  position: relative;
  max-width: 62rem;
}

/* ======================================================================
   29 HERO II — the seal on the world
   The first screen now carries a thesis. The seal moves right of centre
   to make room for it; behind the seal a globe of coastline points turns
   with the five lanes orbiting it. --hero-cx / --hero-cy are the one pair
   of numbers the seal, the world and the overture's press all share, so
   the intro lands the seal exactly where the hero shows it.
   ====================================================================== */
/* --crest-emboss was 0.23 — the faded seal of the first mockup. The seal now
   sits on a globe and reads as gold on the world; it is stronger, and still
   the supplied plate under the same relief light. */

.hero .crest-mark {
  width: clamp(200px, 27vw, 540px);
}

/* The rail sits at the gutter on the first screen, so the thesis is set past
   it — the same indent the scenes use. */

/* Section heads in the reference's other manner: title left, a hairline
   running to a small-caps note at the right. Used where a section is an
   index of something rather than a statement. */
.head-rule {
  display: flex; align-items: baseline; gap: clamp(1rem, 2.4vw, 2rem);
  margin-bottom: clamp(1rem, 1.9vw, 1.6rem);
}
.head-rule h2 { margin: 0; white-space: nowrap; }
.head-rule .line { flex: 1; height: 1px; background: var(--rule-dark); align-self: center; }
.head-rule .note {
  font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--on-dark-faint); white-space: nowrap; padding-bottom: 0;
}
.head-rule a.note { color: var(--on-dark-soft); }
@media (max-width: 760px) {
  .head-rule { flex-wrap: wrap; gap: 0.8rem 1rem; }
  .head-rule h2 { white-space: normal; }
  .head-rule .line { display: none; }
  .head-rule .note { white-space: normal; }
}

/* ======================================================================
   30 THE RESEARCH PUBLICATION — markets.html
   The front page of a journal, not a landing page: strong serif headlines,
   small-caps desk labels, bylines, hairlines, asymmetric columns and air.
   One state (the desk in the bar under the masthead) drives every section.
   ====================================================================== */
.publication { background: var(--forest); color: var(--on-dark); }
.pub-section { position: relative; padding-block: clamp(1.7rem, 3vw, 2.8rem); }
.pub-section + .pub-section { padding-top: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* masthead — compact, with the desk bar under it */
.masthead { background: var(--hero-field); padding-top: clamp(7rem, 12vh, 9.5rem); }

/* the editorial furniture every section shares */
.kicker { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 0.8rem;
  font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--on-dark-faint); }
.kicker .desk-tag { color: var(--gold); }
.kicker .sep, .byline .sep { opacity: 0.5; margin: 0 0.45em; }
.byline { margin: 0.8rem 0 0; font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--on-dark-faint); }
.standfirst { font-family: var(--serif); font-weight: 300; font-size: clamp(1.05rem, 1.5vw, 1.3rem); line-height: 1.5; color: var(--on-dark-soft); margin: 0.9rem 0 0; max-width: 46ch; }

/* front page */
.front { display: grid; grid-template-columns: minmax(0, 58fr) minmax(0, 42fr); gap: clamp(1.6rem, 3.5vw, 3.6rem); padding-top: clamp(1.6rem, 3vw, 2.6rem); }

/* latest research — one line each */
.latest { border-top: 1px solid var(--rule-dark); }
.lr { display: grid; grid-template-columns: 10rem 7.5rem minmax(0, 1fr) 9.5rem 2rem; gap: 1.4rem; align-items: baseline;
  padding: 0.95rem 0; border-bottom: 1px solid var(--rule-dark); color: inherit; text-decoration: none; }
.lr-desk, .lr-type, .lr-date { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--on-dark-faint); }
.lr-desk { color: var(--gold); }
.lr-title { font-family: var(--serif); font-weight: 400; font-size: 1.12rem; transition: color 0.3s var(--ease); }
.lr:hover .lr-title { color: var(--gold-bright); }
.lr-go { color: var(--gold); opacity: 0.6; justify-self: end; }

/* the desks — five ruled rows: numeral, name, coverage. No textures, no
   panels; this is the page's substance when nothing is published yet. */
.markets { border-top: 1px solid var(--rule-dark); }

/* archive — a library, in rows */
.arc-controls { display: flex; flex-wrap: wrap; gap: 1rem 1.8rem; align-items: end; margin-bottom: 1.4rem; }
.arc-search { flex: 1 1 260px; }
.arc-select { display: grid; gap: 0.35rem; min-width: 12rem; }
.arc-select .label { color: var(--on-dark-faint); }
.arc-search input, .arc-select select {
  width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--rule-dark); border-radius: 0;
  color: var(--on-dark); font: inherit; font-size: 0.95rem; padding: 0.55rem 0; outline: none; -webkit-appearance: none; appearance: none;
}
.arc-search input::placeholder { color: var(--on-dark-faint); }
.arc-search input:focus, .arc-select select:focus { border-bottom-color: var(--gold); }
.arc-select select option { background: var(--forest); color: var(--on-dark); }
.arc-wrap { overflow-x: auto; }
.arc { width: 100%; border-collapse: collapse; }
.arc th { text-align: left; font-weight: 400; padding: 0.7rem 1rem 0.7rem 0; border-bottom: 1px solid var(--rule-dark);
  font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--on-dark-faint); }
.arc td { padding: 0.85rem 1rem 0.85rem 0; border-bottom: 1px solid var(--rule-dark); vertical-align: baseline; font-size: 0.92rem; }
.arc .c-date, .arc .c-desk, .arc .c-type, .arc .c-author { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--on-dark-faint); white-space: nowrap; }
.arc td.c-desk { color: var(--gold); }
.arc .c-title { font-family: var(--serif); font-size: 1.05rem; }
.arc .c-title a { color: inherit; text-decoration: none; transition: color 0.3s var(--ease); }
.arc .c-title a:hover { color: var(--gold-bright); }
.arc .c-go { width: 2rem; text-align: right; color: var(--gold); }
.arc-empty td { padding: 1.6rem 0; font-family: var(--serif); font-style: italic; font-weight: 300; color: var(--on-dark-faint); }

/* analyst applications — a strip, not a hero */
.analyst-strip { border-top: 1px solid var(--rule-dark); padding-block: clamp(2rem, 3.5vw, 3rem); }

@media (max-width: 900px) {
  .front { grid-template-columns: 1fr; }
  .lr { grid-template-columns: minmax(0, 1fr) 2rem; row-gap: 0.25rem; }
  .lr > :not(.lr-go) { grid-column: 1; }
  .lr-go { grid-column: 2; grid-row: 1 / span 4; align-self: center; }
  .arc .c-author, .arc .c-type { display: none; }
}

/* ---------------------------------------------- 23 WHAT WE DO (rows) --- */
/* Restored: the ruled rows Home's "What we do" is built from. Not cards. */
.format {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
  gap: clamp(1rem, 3vw, 2.5rem);
  padding-block: 1.3rem;
  border-bottom: 1px solid var(--rule-dark);
  align-items: baseline;
}
.format h4 { font-family: var(--serif); font-weight: 500; font-size: 1.02rem; letter-spacing: 0.14em; text-transform: uppercase; margin: 0; }
.format p { margin: 0; color: var(--on-dark-soft); font-size: 0.94rem; max-width: 62ch; }
@media (max-width: 760px) { .format { grid-template-columns: 1fr; row-gap: 0.4rem; } }

/* ------------------------------------------- 26 ARTICLE READING COLUMN -- */
/* Restored. Long-form runs in a narrower column than the rest of the site,
   on cream. These rules serve research/_template.html and every article
   generated from it — that file is the template, not a dev page. */
.wrap-read { width: 100%; max-width: 1180px; margin-inline: auto; padding-inline: var(--gutter); }
.article-draft {
  margin-top: 1.6rem; padding: 1.2rem 1.4rem;
  border: 1px solid var(--rule-dark);
  font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; line-height: 1.9;
  color: var(--on-dark-faint);
}
.prose { max-width: 68ch; font-size: 1.08rem; line-height: 1.78; color: var(--ink); }
.prose > * + * { margin-top: 1.25em; }
.prose h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1.2; margin-top: 2.4em; letter-spacing: 0.005em; }
.prose h3 { font-family: var(--serif); font-weight: 500; font-size: 1.15rem; letter-spacing: 0.1em; text-transform: uppercase; margin-top: 2em; }
.prose p { margin-top: 1.25em; }
.prose ul, .prose ol { padding-left: 1.3rem; }
.prose li + li { margin-top: 0.5em; }
.prose a { color: #8A6D28; text-decoration: underline; text-underline-offset: 0.18em; }
.prose blockquote { margin: 2em 0; padding-left: 1.4rem; border-left: 1px solid var(--gold); font-family: var(--serif); font-weight: 300; font-size: 1.35rem; line-height: 1.45; color: var(--ink-soft); }
.prose figure { margin: 2.2em 0; }
.prose figure img { width: 100%; border: 1px solid var(--rule-light); }
.prose figcaption { margin-top: 0.7rem; font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft); }
.table-scroll { overflow-x: auto; margin: 2em 0; }
.prose table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.prose th { text-align: left; font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 400; color: var(--ink-soft); padding: 0.6rem 1rem 0.6rem 0; border-bottom: 1px solid var(--ink); }
.prose td { padding: 0.65rem 1rem 0.65rem 0; border-bottom: 1px solid var(--rule-light); vertical-align: top; }
.prose .num, .prose td.num, .prose th.num { text-align: right; font-variant-numeric: tabular-nums; }
.sources { margin-top: 3rem; padding-top: 1.6rem; border-top: 1px solid var(--rule-light); }
.sources h3 { font-family: var(--serif); font-weight: 500; font-size: 0.95rem; letter-spacing: 0.18em; text-transform: uppercase; margin: 0 0 0.9rem; color: var(--ink); }
.sources ol { padding-left: 1.2rem; font-size: 0.9rem; color: var(--ink-soft); line-height: 1.7; margin: 0; }
.sources li { margin-bottom: 0.6rem; }
.article-nav { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; padding-top: 2rem; margin-top: 3rem; border-top: 1px solid var(--rule-light); }
@media (max-width: 760px) { .prose { font-size: 1rem; } }

/* ======================================================================
   31 THE RECORD — four true things, under the hero
   Evidence before intention. A ruled row of facts, not a panel of inflated
   statistics: the counts are read from the data so they cannot drift.
   ====================================================================== */
.record {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--rule-dark);
  border-bottom: 1px solid var(--rule-dark);
}
.fact {
  display: grid; gap: 0.5rem; align-content: center;
  padding: clamp(1.3rem, 2.4vw, 1.9rem) 1.2rem clamp(1.3rem, 2.4vw, 1.9rem) 0;
  margin-right: 1.2rem;
  border-right: 1px solid var(--rule-dark);
}
.fact:last-child { border-right: 0; margin-right: 0; }
.fact-v {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.5rem, 2.6vw, 2.2rem); line-height: 1;
  color: var(--on-dark); font-variant-numeric: lining-nums;
}
.fact-l {
  font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--on-dark-faint);
}
@media (max-width: 760px) {
  .record { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fact:nth-child(2n) { border-right: 0; margin-right: 0; }
  .fact:nth-child(-n+2) { border-bottom: 1px solid var(--rule-dark); }
}

/* Why CTS exists — one alignment, on the site's grid: the argument left,
   the reasoning beside it. The band used to run three alignments at once. */
.society-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(1.6rem, 4vw, 4rem);
  align-items: start;
}
.society-grid .statement-q { max-width: none; margin: 0; }
.society-body { display: grid; align-content: start; }
.society-grid .lede { text-align: left; max-width: 54ch; margin: 0; }
.society-grid .lede + .lede { margin-top: 1.2rem; }
@media (max-width: 900px) { .society-grid { grid-template-columns: 1fr; } }

/* ------------------------------------------- 32 THE INDUSTRY BAND (cream) --
   Addressed to firms rather than students, and it changes ground to say so.
   This is the site's one break from forest: after five screens of the journey
   a second uniform green band reads as wallpaper, and the reader has stopped
   seeing it. The rules below are the on-cream versions of the band's parts. */
.on-cream .head-rule .line { background: var(--rule-light); }
.on-cream .head-rule .note { color: rgba(16, 37, 26, 0.52); }
.on-cream .head-rule h2 { color: var(--ink); }
.on-cream .lede { color: var(--ink-soft); }
.on-cream .verbs, .on-cream .verb { border-color: var(--rule-light); }
.on-cream .verb-n { color: #8A6D28; }
.on-cream .verb-name { color: var(--ink); }
.on-cream .verb p { color: var(--ink-soft); }
.on-cream .btn-solid { background: var(--forest); border-color: var(--forest); color: var(--cream); }
.on-cream .btn-solid:hover { background: var(--forest-deep); border-color: var(--forest-deep); }

/* The five desks, named once on Home, in a line. The band that repeated the
   whole strip is gone: Markets & Research is the page that owns them. */
.desk-line {
  margin: clamp(1.4rem, 2.6vw, 2rem) 0 0;
  padding-top: clamp(1.1rem, 2vw, 1.5rem);
  border-top: 1px solid var(--rule-dark);
  font-family: var(--serif); font-size: 1rem; line-height: 1.9;
  color: var(--on-dark-soft);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.6rem;
}
.desk-line a { color: var(--on-dark); text-decoration: none; transition: color 0.3s var(--ease); }
.desk-line a:hover { color: var(--gold-bright); }
.desk-line .tlink { margin-left: auto; color: var(--on-dark-soft); }
/* The names are separated by a rule, not a glyph: a middot between flex items
   collapses into the gap and the five names run together as one phrase. */
.dl-item + .dl-item { padding-left: 0.85rem; border-left: 1px solid var(--rule-dark); }
.dl-item { padding-right: 0.25rem; }
@media (max-width: 760px) { .desk-line .tlink { margin-left: 0; margin-top: 0.8rem; } }

/* ------------------------------------------------- 29b JOURNEY INDEX -- */
/* Restored: removed by mistake while cutting the desk-strip rules beside it.
   Five beats, ruled, each with its two-word verdict. Not cards. */@media (max-width: 1000px) {
  .journey-index { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .journey-index { grid-template-columns: 1fr; }
}

/* ======================================================================
   33 THE PUBLICATION SYSTEM — Research and its pages
   ======================================================================
   The research section runs on its own ground, distinct from forest, so
   moving from the society into the publication is a visible change of
   place — paper rather than black (it opened on near-black; repainted
   light on request, see §33a below). It also speaks in a different
   voice — sentence-case serif at large size, where the institutional
   pages speak in letterspaced caps. Caps are for the crest and the
   society; sentence case is for writing that is meant to be read.
   ====================================================================== */
:root {
  --night:      #070E0A;   /* the publication's ground, unlit — kept as the
                               default so nothing outside §33a regresses */
  --night-soft: #0C1611;   /* bands and wells inside it */
  --night-rule: rgba(239, 233, 219, 0.13);
}
.on-night { background: var(--night); color: var(--on-dark); }
.on-night .head-rule .line,
.on-night .rule-soft { background: var(--night-rule); }

/* --------------------------------------------------- 33a THE GROUND, LIT -- */
/* The research section repainted paper rather than black. Scoped to
   `.publication.on-night` — the <main> — rather than the bare `.on-night`
   class, which the *footer* also carries on these pages (`buildFooter()`
   marks it night-ground too); the footer keeps its own always-dark
   background regardless of what the page above it does, the same as the
   header, the drawer and the page-transition field, none of which are
   descendants of <main> and so none of which see this override.

   Everything under here — the masthead, the desk rows, the awaiting
   state, the article prose, the sources list — already asks for its
   colour through --on-dark / --gold / --night-rule / --rule-dark rather
   than a literal value, so redefining those four kinds of token here is
   what actually repaints the section; nothing downstream needed to
   change, and custom properties inherit, so every descendant — however
   deeply nested — picks this up without its own rule. */
.publication.on-night {
  --night:         var(--paper);
  --night-soft:    var(--paper-soft);
  --night-rule:    var(--rule-light);
  --rule-dark:     var(--rule-light);
  --on-dark:       var(--ink);
  --on-dark-soft:  var(--ink-soft);
  --on-dark-faint: rgba(16, 37, 26, 0.55);
  --gold:          #9A7C32;
  --gold-bright:   #8A6D28;
  --gold-dim:      rgba(154, 124, 50, 0.45);
  --gold-faint:    rgba(154, 124, 50, 0.14);
}
/* The one hover wash in the system that is a literal colour, not a token
   (a light-on-dark wash so faint it was never worth a variable) — tuned
   here for a dark wash on a light row instead. */
.on-night .desk-row-2:hover { background: rgba(16, 37, 26, 0.028); }

/* The header sits outside <main>, so it does not inherit the tokens
   above; while unstuck it floats transparent over this section's now-
   light top, so its own text needs the same swap, explicitly. Once
   scrolled it is the usual solid dark bar with light text, same as every
   other page, and needs nothing extra. */
body[data-ground="night"] .header:not(.is-stuck) .brand-stack .bs-1,
body[data-ground="night"] .header:not(.is-stuck) .brand-stack .bs-2 { color: var(--ink); }
body[data-ground="night"] .header:not(.is-stuck) .nav a.nav-link { color: var(--ink-soft); }
body[data-ground="night"] .header:not(.is-stuck) .nav-join { border-color: #9A7C32; color: #6E5623; }

/* Research and the desk pages open on dark plaster (below), so the header's
   unstuck state is over dark again there — back to the ordinary light text the
   swap above undoes elsewhere. Articles are the exception: their head is the
   piece's own, on paper, so they keep the ink-dark swap. */
body[data-page="markets"]:not([data-article]) .header:not(.is-stuck) .brand-stack .bs-1,
body[data-page="markets"]:not([data-article]) .header:not(.is-stuck) .brand-stack .bs-2 { color: #E5EBE6; }
body[data-page="markets"]:not([data-article]) .header:not(.is-stuck) .nav a.nav-link { color: #E4EDE6; }
body[data-page="markets"]:not([data-article]) .header:not(.is-stuck) .nav-join { border-color: #B98D3A; color: #F0CE6C; }

/* Research and the desk pages open on the same .page-head as Team and Events,
   on the same dark plaster field; everything after it is the paper ground
   above. Reverts just the text/rule tokens that ground redefined, for this one
   child section — .plaster supplies its own background, unaffected by
   --night, so nothing there needs restating. Values are the section 01
   defaults, so the head lands on exactly the colours the other pages get. */
.publication.on-night .page-head.plaster,
.publication.on-night .closer {
  /* `color` is inherited, not re-read from the custom property at every
     descendant — the title sets no colour of its own, so without restating
     it here it would keep the paper ground's ink, computed higher up at
     <main>, and read as barely-there dark-on-dark. The closer needs the same
     treatment for the same reason: it brings its own dark ground onto a page
     whose tokens have been repainted for paper. */
  color: var(--on-dark);
  --on-dark:       #EFE9DB;
  --on-dark-soft:  rgba(239, 233, 219, 0.62);
  --on-dark-faint: rgba(239, 233, 219, 0.52);
  --gold:          #C6A75E;
  --gold-bright:   #E0C88C;
  --gold-dim:      rgba(198, 167, 94, 0.30);
  --gold-faint:    rgba(198, 167, 94, 0.12);
  --rule-dark:     rgba(239, 233, 219, 0.14);
  --night-rule:    rgba(239, 233, 219, 0.13);
}

/* Sentence-case display: the publication's headline voice. */
.pub-h {
  font-family: var(--serif);
  font-weight: 400;
  text-transform: none;
  letter-spacing: -0.008em;
  line-height: 1.06;
  margin: 0;
}
.pub-h em { font-style: normal; color: var(--gold); }
.ph-1 { font-size: clamp(2.2rem, 4.4vw, 3.8rem); }
.ph-2 { font-size: clamp(1.7rem, 2.9vw, 2.5rem); line-height: 1.12; }
.ph-3 { font-size: clamp(1.25rem, 1.9vw, 1.65rem); line-height: 1.2; }

/* The stacked lockup from the reference: CTS over EXETER. Replaces the long
   wordmark, which never fitted a phone and had to contract to "CTS" anyway. */
.brand-stack { display: inline-grid; justify-items: start; gap: 0; line-height: 1; text-decoration: none; }
.brand-stack .bs-1 {
  font-family: var(--times); font-weight: 700;
  font-size: 54px; letter-spacing: 0.07em;
  color: #E5EBE6; margin-left: -3px;
}
.brand-stack .bs-2 {
  font-family: var(--times); font-weight: 400; font-size: 16px; letter-spacing: 0.515em;
  text-transform: uppercase; color: #E5EBE6; margin-top: -1px;
}
.on-cream .brand-stack .bs-1 { color: var(--ink); }
.on-cream .brand-stack .bs-2 { color: var(--ink-soft); }

/* Article masthead. The section landing pages (Research, the desks) open on
   .page-head like Team and Events; this is the head of a piece of writing —
   breadcrumb, desk and date, title, standfirst, byline — so it keeps its own
   block and the publication's sentence-case voice. */
.pub-mast { padding-top: clamp(7.4rem, 12.5vh, 8.8rem); }

/* The desks, as the reference lists them: numeral, name and coverage, arrow. */
.desk-list { border-top: 1px solid var(--night-rule); }
.desk-row-2 {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr) 2.5rem;
  gap: clamp(1rem, 2.5vw, 2rem);
  align-items: center;
  padding-block: clamp(0.8rem, 1.35vw, 1.1rem);
  border-bottom: 1px solid var(--night-rule);
  color: inherit; text-decoration: none;
  transition: background-color 0.4s var(--ease);
}
.desk-row-2:hover { background: rgba(239, 233, 219, 0.022); }
.dr-n { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.2em; color: var(--gold); }
.dr-name { font-family: var(--serif); font-weight: 400; font-size: clamp(1.15rem, 1.7vw, 1.45rem); margin: 0 0 0.3rem; transition: color 0.35s var(--ease); }
.dr-cover { margin: 0; font-size: 0.92rem; color: var(--on-dark-soft); }
.dr-go { justify-self: end; color: var(--gold); opacity: 0.55; transition: opacity 0.35s var(--ease), transform 0.35s var(--ease); }
.desk-row-2:hover .dr-name { color: var(--gold-bright); }
.desk-row-2:hover .dr-go { opacity: 1; transform: translateX(4px); }

/* The launch state, as the reference draws it: centred, a document mark, one
   sentence, two quiet lines under it. This replaces a left-aligned italic
   line that read as a footnote rather than an announcement. */
.awaiting { text-align: center; padding-block: clamp(1.8rem, 3.2vw, 2.6rem); }
.awaiting .doc {
  /* an inline SVG ignores margin-bottom and sits on the text baseline at the
     left; it has to be a block to centre and to hold its own space */
  display: block; margin: 0 auto clamp(1.2rem, 2.4vw, 1.8rem);
  color: var(--gold); opacity: 0.5;
}
.awaiting h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.25rem, 2.1vw, 1.75rem); margin: 0 0 0.9rem; color: var(--on-dark); }
.awaiting p { margin: 0 auto; max-width: 52ch; font-size: 0.95rem; line-height: 1.75; color: var(--on-dark-faint); }

/* The contribute strip: stacked verbs, the question, the action. */
.contribute {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  gap: clamp(1.2rem, 3vw, 2.6rem); align-items: center;
  padding-block: clamp(1.4rem, 2.6vw, 2rem);
  border-top: 1px solid var(--night-rule); border-bottom: 1px solid var(--night-rule);
}
.contribute .verbs-stack {
  font-family: var(--mono); font-size: 0.56rem; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--on-dark-faint); line-height: 2;
}
.contribute .q { font-family: var(--serif); font-size: clamp(1.05rem, 1.5vw, 1.25rem); color: var(--on-dark); margin: 0 0 0.3rem; }
.contribute .sub { margin: 0; font-size: 0.9rem; color: var(--on-dark-faint); }
@media (max-width: 760px) { .contribute { grid-template-columns: 1fr; } .contribute .verbs-stack { display: none; } }

/* One-line footer strip, as the reference sets it. */
.foot-strip {
  display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.4rem); flex-wrap: wrap;
  padding-block: clamp(1.6rem, 3vw, 2.4rem);
  border-top: 1px solid var(--night-rule);
  font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--on-dark-faint);
}
.foot-strip .fs-rule { flex: 1; height: 1px; background: var(--night-rule); min-width: 2rem; }
.foot-strip .sep { color: var(--gold); opacity: 0.6; margin: 0 0.5rem; }
/* Where to find us. The marks alone — at this size two more words of small
   caps would read as navigation rather than as a place to go. */
.foot-strip .fs-social { display: flex; align-items: center; gap: clamp(0.8rem, 1.6vw, 1.15rem); }
.foot-strip .fs-social a {
  display: grid; place-items: center;
  color: var(--on-dark-faint);
  transition: color 0.35s var(--ease);
}
.foot-strip .fs-social a:hover,
.foot-strip .fs-social a:focus-visible { color: var(--gold-bright); }
.foot-strip .fs-social svg { display: block; width: 17px; height: 17px; }

/* Desk pages: breadcrumb, key topics beside the scope. */
.crumbs {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.55rem;
  margin-bottom: clamp(1.4rem, 2.6vw, 2.2rem);
  font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--on-dark-faint);
}
.crumbs a { color: var(--on-dark-faint); text-decoration: none; transition: color 0.3s var(--ease); }
.crumbs a:hover { color: var(--gold); }
.crumbs [aria-current] { color: var(--on-dark); }
.crumb-sep { color: var(--gold); opacity: 0.6; }

.desk-scope {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: clamp(1.4rem, 3vw, 3rem);
  padding-block: clamp(1rem, 1.9vw, 1.5rem);
  border-bottom: 1px solid var(--night-rule);
}
.desk-scope h2 { margin: 0 0 1rem; }
.topics { list-style: none; margin: 0; padding: 0; }
.topics li {
  font-family: var(--serif); font-size: 1rem; line-height: 1.85;
  color: var(--on-dark-soft);
}
.desk-scope .lede { margin: 0; max-width: 54ch; }
@media (max-width: 800px) { .desk-scope { grid-template-columns: 1fr; gap: 1.4rem; } }

/* The publication's page furniture carries the night rules. */
.on-night .latest, .on-night .lr,
.on-night .arc th, .on-night .arc td,
.on-night .arc-search input, .on-night .arc-select select { border-color: var(--night-rule); }
.on-night .pub-section + .pub-section { padding-top: 0; }

/* Article pages: the reference's masthead and its contents rail. */
.art-top { display: flex; align-items: baseline; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 1.1rem; }
.art-tags, .art-date, .art-by {
  margin: 0; font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--on-dark-faint);
}
.art-tags .desk-tag { color: var(--gold); }
.art-tags .bar, .art-by .bar { color: var(--on-dark-faint); opacity: 0.5; margin: 0 0.6rem; }
.art-title { max-width: 22ch; }
.art-by { margin-top: 1.4rem; padding-bottom: clamp(1.4rem, 2.6vw, 2rem); border-bottom: 1px solid var(--night-rule); }
.article-hero { width: 100%; border: 1px solid var(--night-rule); margin-top: clamp(1.6rem, 3vw, 2.4rem); }

.art-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 8fr); gap: clamp(1.6rem, 4vw, 4rem); align-items: start; }
.art-aside { position: sticky; top: 110px; }
.art-aside h2 { color: var(--on-dark-faint); margin: 0 0 1rem; }
.toc { list-style: none; margin: 0; padding: 0; }
.toc li { margin-bottom: 0.55rem; }
.toc a {
  font-family: var(--serif); font-size: 0.95rem; color: var(--on-dark-soft);
  text-decoration: none; transition: color 0.3s var(--ease);
}
.toc a:hover { color: var(--gold-bright); }
@media (max-width: 860px) {
  .art-grid { grid-template-columns: 1fr; }
  .art-aside { position: static; border-bottom: 1px solid var(--night-rule); padding-bottom: 1.2rem; }
}

/* The reading column on night rather than cream — the publication keeps one
   ground from its front page through to the article. */
.on-night .prose { color: var(--on-dark-soft); }
.on-night .prose h2 { color: var(--on-dark); font-family: var(--serif); font-weight: 400; text-transform: none; letter-spacing: 0; }
.on-night .prose h3 { color: var(--on-dark); }
.on-night .prose a { color: var(--gold-bright); }
.on-night .prose blockquote { border-left-color: var(--gold); color: var(--on-dark); }
.on-night .prose th { color: var(--on-dark-faint); border-bottom-color: var(--night-rule); }
.on-night .prose td { border-bottom-color: var(--night-rule); }
.on-night .prose figure img { border-color: var(--night-rule); }
.on-night .prose figcaption { color: var(--on-dark-faint); }
.on-night .sources { border-top-color: var(--night-rule); }
.on-night .sources h3 { color: var(--on-dark); }
.on-night .sources ol { color: var(--on-dark-faint); }
.on-night .article-nav { border-top-color: var(--night-rule); }

/* ======================================================================
   34 THE FIRST SCREEN — the seal on the world
   Copied from the supplied 1672×941 render (reference/map-hero.png) and
   checked against it by measurement (tools/hero-compare.py). Every number
   below is that frame's, expressed in svh/vw so the screen scales as one
   picture. The field is flat; the continents (assets/img/world.svg, traced
   from the render by tools/make-map.py) carry the only texture.
   ====================================================================== */
.hero {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  background: #06180D;                                 /* the 2026/27 green: median of that
                                                          render's field, rgb(6,24,13).
                                                          Flat, as the field has always been;
                                                          was rgb(1,30,16) */
  display: grid;
  justify-items: center;
  align-content: start;
  padding-top: 17.17svh;                               /* plate top 161.5, disc top 168 */
}
.hero-map {
  position: absolute; inset: 0;
  background: url("../img/world.svg") center / cover no-repeat;
  pointer-events: none;
}
.hero-seal {
  position: relative; z-index: 1;
  width: min(30.17vw, 53.6svh);                        /* 504px plate, 492px disc */
  aspect-ratio: 1;
  margin-left: -5px;                                   /* the render's seal sits 2.5px left of centre */
}
.hero-seal img {
  width: 100%; height: auto; display: block;
  animation: seal-in 1.4s var(--ease) both;
}
@keyframes seal-in { from { opacity: 0; } to { opacity: 1; } }

/* The wordmark: the society, a short gold rule, the university. */
.hero-word { position: relative; z-index: 1; text-align: center; display: grid; justify-items: center; }
.hw-1 {
  margin: 2.7svh 0 0;
  font-family: var(--times); font-weight: 400; line-height: 1;
  font-size: 31px; letter-spacing: 0.182em;
  text-transform: uppercase; color: #F2F8F3;
  padding-left: 0.182em; margin-left: -5px;                                 /* balances the trailing spacing */
}
.hw-rule { display: block; width: 70px; height: 2px; background: #C5953D; margin: 2.26svh 0 2.48svh; }
.hw-2 {
  margin: 0;
  font-family: var(--times); font-weight: 400; line-height: 1;
  font-size: 24px; letter-spacing: 0.2625em;
  text-transform: uppercase; color: #F2F8F3;
  padding-left: 0.2625em;
}
.hero .scroll-cue {
  position: absolute; left: 50%; right: auto; bottom: auto; top: calc(93svh - 1px);
  width: 42px; height: 23px; border: 0; border-radius: 0;
  transform: translateX(-50%);
  color: #C5953D;
}
.hero .scroll-cue:hover { background: none; color: #E2B45C; }
.hero .scroll-cue svg { width: 42px; height: 23px; }

@media (max-width: 760px) {
  .hero { padding-top: 14svh; }
  .hero-seal { width: min(64vw, 40svh); }
  .hw-1 { font-size: clamp(0.85rem, 3.4vw, 31px); }
  .hw-2 { font-size: clamp(0.7rem, 2.6vw, 24px); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-seal img { animation: none; }
}

/* Below 1000px the lockup and button contract (declared after the lockup so
   they win) and the first screen's rhythm tightens. */
@media (max-width: 1000px) {
  .brand-stack .bs-1 { font-size: 34px; letter-spacing: 0.16em; }
  .brand-stack .bs-2 { font-size: 11px; margin-top: 0; }
  .header .brand-nocrest { margin-top: 14px; }
  .head-actions { margin-top: 16px; }
}
@media (max-width: 760px) {
  .hero { padding-top: 12svh; min-height: 100svh; }
  .hero .scroll-cue { top: auto; bottom: 5svh; }
}

/* ======================================================================
   35 ARTICLE, EDITORIAL
   The reading page for full research pieces (Commodities Explained, The
   Journey). A dark atlas masthead (the first screen's world map), the hero
   picture laid across its lower edge into the paper, then one serif reading
   column with numbered sections, a takeaways panel, linked citations and the
   writer's card. Everything is scoped to body[data-article]. */
body[data-article] { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
body[data-article] .header:not(.is-stuck) .brand-stack .bs-1,
body[data-article] .header:not(.is-stuck) .brand-stack .bs-2 { color: #E5EBE6; }
body[data-article] .header:not(.is-stuck) .nav a.nav-link { color: #E4EDE6; }
body[data-article] .header:not(.is-stuck) .nav-join { border-color: #B98D3A; color: #F0CE6C; }

body[data-article] .pub-mast {
  position: relative; display: flow-root; background: #081A10; color: #EFE9DB;
  padding-top: clamp(7.8rem, 13vh, 9.6rem); padding-bottom: clamp(3.2rem, 6vw, 4.8rem);
  --on-dark: #EFE9DB; --on-dark-soft: rgba(239, 233, 219, 0.82); --on-dark-faint: rgba(239, 233, 219, 0.56);
  --gold: #C6A75E; --gold-bright: #D8B866; --night-rule: rgba(198, 167, 94, 0.3);
}
body[data-article] .pub-mast::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: url("../img/world.svg") center 30% / cover no-repeat; opacity: 0.55;
}
body[data-article] .pub-mast::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(8, 26, 16, 0.25) 0%, rgba(8, 26, 16, 0.78) 62%, #081A10 100%);
}
body[data-article] .pub-mast > .wrap-read { position: relative; z-index: 1; }
body[data-article] .crumbs { margin-bottom: clamp(2rem, 4vw, 3rem); }
body[data-article] .art-top { margin-bottom: 1.4rem; }
body[data-article] .art-tags .desk-tag { color: #C6A75E; }
body[data-article] .art-title {
  font-family: var(--serif); font-weight: 400; color: #EFE9DB;
  font-size: clamp(2.5rem, 5.4vw, 4.6rem); line-height: 1.03; letter-spacing: -0.012em; max-width: 18ch;
}
body[data-article] .standfirst {
  font-style: italic; font-weight: 300; color: rgba(239, 233, 219, 0.82);
  font-size: clamp(1.15rem, 1.75vw, 1.5rem); line-height: 1.5; max-width: 50ch; margin-top: 1.4rem;
}
body[data-article] .art-by {
  display: flex; align-items: center; gap: 1rem; margin-top: 2.2rem; padding: 1.4rem 0 0;
  border-top: 1px solid rgba(198, 167, 94, 0.3); border-bottom: 0;
  font-family: inherit; letter-spacing: 0; text-transform: none;
}
body[data-article] .art-by-photo { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; border: 2px solid #C6A75E; flex: none; }
body[data-article] .art-by-photo.is-crest { background: #EFE9DB; padding: 2px; }
body[data-article] .art-by-name { margin: 0; font-family: var(--serif); font-size: 1.05rem; color: #EFE9DB; }
body[data-article] .art-by-meta { margin: 0.25rem 0 0; font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(239, 233, 219, 0.56); }
body[data-article] .art-by-meta .bar { margin: 0 0.6rem; opacity: 0.5; }

/* the hero across the edge */
body[data-article] .pub-mast:has(.art-hero) { padding-bottom: 0; }
body[data-article] .art-hero { position: relative; z-index: 2; margin: clamp(2.4rem, 4.5vw, 3.4rem) 0 calc(-1 * clamp(7rem, 15vw, 12rem)); }
body[data-article] .art-hero .article-hero { display: block; width: 100%; margin: 0; border: 0; outline: 1px solid rgba(198, 167, 94, 0.35); outline-offset: -1px; box-shadow: 0 40px 70px -30px rgba(8, 26, 16, 0.55); }
body[data-article] .art-hero figcaption { margin-top: 0.9rem; font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.18em; text-transform: uppercase; color: #56645B; }
body[data-article] .pub-mast:has(.art-hero) + .pub-section { padding-top: calc(clamp(7rem, 15vw, 12rem) + clamp(3.2rem, 6vw, 4.6rem)); }

/* the reading column */
body[data-article] .art-grid { grid-template-columns: minmax(0, 2.3fr) minmax(0, 8fr); }
body[data-article] .art-aside h2 { font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.24em; color: #8A6D28; }
body[data-article] .toc { border-left: 1px solid rgba(16, 37, 26, 0.14); counter-reset: tc; }
body[data-article] .toc li { counter-increment: tc; padding-left: 1rem; margin-bottom: 0.75rem; }
body[data-article] .toc a { font-size: 0.92rem; line-height: 1.35; }
body[data-article] .prose {
  max-width: 41rem; font-family: var(--serif); font-size: 1.2rem; line-height: 1.74; color: #1D2E24; counter-reset: sec;
}
body[data-article] .prose > p:first-of-type::first-letter {
  float: left; font-size: 4.3em; line-height: 0.84; padding: 0.05em 0.1em 0 0; color: #8A6D28; font-weight: 500;
}
body[data-article] .prose > h2 {
  counter-increment: sec; color: #10251A; font-weight: 400; font-size: clamp(1.65rem, 2.7vw, 2.2rem); line-height: 1.16;
  margin-top: 2.6em; padding-top: 1.2em; border-top: 1px solid rgba(16, 37, 26, 0.14);
}
body[data-article] .prose > h2::before {
  content: counter(sec, decimal-leading-zero); display: block; margin-bottom: 0.9rem;
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.24em; color: #8A6D28;
}
body[data-article] .prose strong { font-weight: 600; color: #10251A; }
body[data-article] .prose a { color: #8A6D28; }
body[data-article] .prose sup.cite { font-family: var(--mono); font-size: 0.6em; line-height: 0; vertical-align: super; margin-left: 0.08em; }
body[data-article] .prose sup.cite a { text-decoration: none; color: #8A6D28; padding: 0 0.12em; }
body[data-article] .prose blockquote {
  margin: 2.4rem 0; padding: 1.5rem 0; border: 0; border-top: 1px solid #C6A75E; border-bottom: 1px solid #C6A75E;
  font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 1.32rem; line-height: 1.5; color: #10251A;
}
body[data-article] .prose figure { margin: 2.8rem 0; }
body[data-article] .prose figure img { border: 0; }
body[data-article] .prose figcaption { margin-top: 0.85rem; color: #56645B; }

/* key takeaways panel */
body[data-article] .takeaways { background: #F1ECDF; padding: 1.9rem 2.1rem 1.7rem; margin: 0 0 2.6rem; }
body[data-article] .takeaways h2 {
  margin: 0; padding: 0; border: 0; counter-increment: none;
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.24em; text-transform: uppercase; color: #8A6D28;
}
body[data-article] .takeaways h2::before { content: none; }
body[data-article] .takeaways ul { list-style: none; padding: 0; margin: 1.2rem 0 0; counter-reset: tk; }
body[data-article] .takeaways li {
  counter-increment: tk; position: relative; padding-left: 2.6rem;
  font-size: 1.08rem; line-height: 1.55; color: #10251A;
}
body[data-article] .takeaways li::before { content: counter(tk, decimal-leading-zero); position: absolute; left: 0; top: 0.32em; font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.12em; color: #8A6D28; }
body[data-article] .takeaways li + li { margin-top: 0.9rem; padding-top: 0.9rem; border-top: 1px solid rgba(16, 37, 26, 0.1); }
body[data-article] .takeaways li + li::before { top: calc(0.9rem + 0.32em); }

/* disclaimer, references, the writer */
body[data-article] .prose .disclaimer {
  margin-top: 2.6rem; padding-top: 1.1rem; border-top: 1px solid rgba(16, 37, 26, 0.12);
  font-family: var(--sans); font-size: 0.82rem; line-height: 1.6; color: rgba(16, 37, 26, 0.62);
}
body[data-article] .prose .disclaimer::first-letter { float: none; font-size: inherit; padding: 0; color: inherit; font-weight: inherit; }
body[data-article] .sources { max-width: 41rem; margin-top: 3rem; padding-top: 1.6rem; border-top: 2px solid #10251A; }
body[data-article] .sources h3 { font-family: var(--mono); font-size: 0.62rem; font-weight: 400; letter-spacing: 0.24em; color: #8A6D28; margin-bottom: 1rem; }
body[data-article] .sources ol { list-style: none; padding: 0; counter-reset: rf; font-family: var(--sans); font-size: 0.86rem; line-height: 1.6; color: rgba(16, 37, 26, 0.75); }
body[data-article] .sources li { counter-increment: rf; position: relative; padding: 0.6rem 0 0.6rem 2.2rem; margin: 0; border-bottom: 1px solid rgba(16, 37, 26, 0.1); }
body[data-article] .sources li::before { content: counter(rf, decimal-leading-zero); position: absolute; left: 0; top: 0.72rem; font-family: var(--mono); font-size: 0.72rem; color: #8A6D28; }
body[data-article] .sources li:target { background: #F1ECDF; }
body[data-article] .author-card {
  max-width: 41rem; display: flex; align-items: center; gap: 1.5rem; margin-top: 3rem; padding: 1.7rem 1.9rem;
  background: #081A10; color: #EFE9DB;
}
body[data-article] .author-card img { width: 78px; height: 78px; border-radius: 50%; object-fit: cover; border: 2px solid #C6A75E; flex: none; }
body[data-article] .author-card img.is-crest { background: #EFE9DB; padding: 2px; }
body[data-article] .author-card .ac-label { margin: 0; font-family: var(--mono); font-size: 0.56rem; letter-spacing: 0.24em; text-transform: uppercase; color: #C6A75E; }
body[data-article] .author-card .ac-name { margin: 0.35rem 0 0; font-family: var(--serif); font-size: 1.4rem; }
body[data-article] .author-card .ac-role { margin: 0.2rem 0 0.75rem; font-family: var(--sans); font-size: 0.86rem; color: rgba(239, 233, 219, 0.72); }
body[data-article] .author-card a { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase; color: #D8B866; text-decoration: none; }
body[data-article] .article-nav { max-width: 41rem; }
@media (max-width: 760px) {
  body[data-article] .prose { font-size: 1.08rem; }
  body[data-article] .takeaways { padding: 1.5rem 1.3rem; }
  body[data-article] .author-card { flex-direction: column; align-items: flex-start; }
}

/* ======================================================================
   36 APPLY — the applications portal (apply.html)
   Set in the same system as the Instagram and LinkedIn posts: Libre Caslon
   (the crest's face) for everything, the posts' exact forest, cream and gold,
   uppercase titles, gold caps labels, a short gold rule, gold 01/02/03
   numbering, and sentence case for anything that is read. The form sits on a
   cream panel: the same colour switch as the Commodities Weekly cover. */
body[data-page="apply"] {
  --p-forest: #081A10; --p-card: #0F2619; --p-cream: #EFE9DB; --p-soft: #B0ACA1;
  --p-gold: #C6A75E; --p-goldd: #685832; --p-ink: #8A6D28; --p-muted: #56645B;
  --caslon: "Libre Caslon Text", "Times New Roman", serif;
  background: var(--p-forest);
}
body[data-page="apply"] main { font-family: var(--caslon); color: var(--p-cream); }
.ap-k { display: block; font-family: var(--caslon); font-weight: 700; font-size: 0.78rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--p-gold); }
.ap-rule { display: block; width: 64px; height: 2px; background: var(--p-gold); }

/* head: the post cover */
.ap-head { position: relative; overflow: hidden; background: var(--p-forest); text-align: center;
  padding: clamp(8.5rem, 16vh, 11rem) 0 clamp(3.5rem, 7vw, 5.5rem); border-bottom: 1px solid var(--p-goldd); }
.ap-head::before { content: ""; position: absolute; inset: 0; background: url("../img/world.svg") center 35% / cover no-repeat; opacity: 0.5; }
.ap-head::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 55% 60% at 50% 55%, rgba(8, 26, 16, 0.9) 25%, rgba(8, 26, 16, 0.2) 100%); }
.ap-head .wrap { position: relative; z-index: 1; }
.ap-title { margin: 1.4rem 0 1.6rem; font-family: var(--caslon); font-weight: 700; text-transform: uppercase; letter-spacing: 0.01em;
  font-size: clamp(3rem, 8vw, 6.4rem); line-height: 0.98; color: var(--p-cream); }
.ap-head .ap-rule { margin: 0 auto; }
.ap-sub { margin: 1.5rem auto 0; max-width: 34ch; font-style: italic; font-size: clamp(1.1rem, 1.7vw, 1.4rem); line-height: 1.5; color: var(--p-soft); }

/* how it works */
.ap-steps { background: var(--p-card); border-bottom: 1px solid var(--p-goldd); }
.ap-steps ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); }
.ap-steps li { display: flex; gap: 1.2rem; padding: clamp(1.6rem, 3vw, 2.4rem) clamp(1rem, 2.5vw, 2.2rem); }
.ap-steps li + li { border-left: 1px solid var(--p-goldd); }
.ap-steps b { flex: none; width: 2.9rem; height: 2.9rem; border: 1.5px solid var(--p-gold); border-radius: 50%; display: grid; place-items: center;
  font-weight: 700; font-size: 0.95rem; color: var(--p-gold); }
.ap-steps h3 { margin: 0.15rem 0 0.4rem; font-family: var(--caslon); font-weight: 700; font-size: 0.85rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--p-cream); }
.ap-steps p { margin: 0; font-size: 0.98rem; line-height: 1.55; color: var(--p-soft); }

/* main */
.ap-main { background: var(--p-forest); padding-block: clamp(3rem, 6vw, 5.5rem); }
.apply-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.apply-role { position: static; color: var(--p-soft); font-size: 1rem; line-height: 1.65; }
.ap-h { margin: 0.9rem 0 1.1rem; font-family: var(--caslon); font-weight: 700; text-transform: uppercase; font-size: clamp(1.9rem, 3vw, 2.6rem); line-height: 1.02; color: var(--p-cream); }
.apply-role .ap-lead { margin: 1.3rem 0 1.8rem; color: var(--p-cream); font-size: 1.08rem; max-width: 44ch; }
.apply-role h3.ap-k { margin: 2rem 0 0.9rem; padding-top: 1.2rem; border-top: 1px solid var(--p-goldd); font-size: 0.72rem; }
.apply-role p { margin: 0; max-width: 46ch; }
.apply-role ol { list-style: none; margin: 0; padding: 0; }
.apply-role li { display: grid; grid-template-columns: 2.4rem 1fr; padding: 0.55rem 0; }
.apply-role li b { font-weight: 700; font-size: 0.9rem; color: var(--p-gold); padding-top: 0.08rem; }
.ap-produce { position: relative; margin: 0; border: 1px solid var(--p-goldd); }
.ap-produce img { display: block; width: 100%; height: auto; }
.ap-produce figcaption { position: absolute; inset: 0; display: grid; place-items: center; text-align: center;
  background: radial-gradient(ellipse 60% 55% at 50% 50%, rgba(8, 26, 16, 0.85) 30%, rgba(8, 26, 16, 0) 100%); }
.ap-wm { font-weight: 700; font-size: clamp(1.4rem, 2.6vw, 2.1rem); letter-spacing: 0.02em; text-transform: uppercase; color: var(--p-cream); line-height: 1.1; }
.ap-wm i { display: block; font-style: normal; font-size: 0.42em; letter-spacing: 0.6em; margin: 0.5rem -0.6em 0 0; color: var(--p-gold); }
.ap-produce::after { content: "What you'll produce · every Sunday"; position: absolute; left: 0; right: 0; bottom: -1.9rem;
  font-weight: 700; font-size: 0.62rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--p-soft); }
.apply-role .ap-produce + h3.ap-k { margin-top: 3.2rem; }

/* the cream form panel */
.apply-panel { background: var(--p-cream); color: var(--p-forest); padding: clamp(1.7rem, 3.8vw, 3.2rem); border: 0; }
.apply-panel::before { content: "Application form"; display: block; margin-bottom: 1.8rem; padding-bottom: 1rem; border-bottom: 3px double var(--p-forest);
  font-weight: 700; font-size: 0.78rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--p-ink); }
.apply-form { display: grid; gap: 1.6rem; }
.apply-form[hidden], .apply-sent[hidden], .apply-closed[hidden] { display: none; }
.apply-form .hp { position: absolute; left: -9999px; }
.f-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; }
.f { display: grid; gap: 0.55rem; border: 0; padding: 0; margin: 0; min-width: 0; }
.f-l { font-family: var(--caslon); font-weight: 700; font-size: 1rem; color: var(--p-forest); line-height: 1.4; padding: 0; }
.f-h { display: block; margin-top: 0.2rem; font-weight: 400; font-style: italic; font-size: 0.86rem; letter-spacing: 0; text-transform: none; color: var(--p-muted); }
.apply-form input:not([type=checkbox]), .apply-form select, .apply-form textarea {
  width: 100%; font: 400 1rem/1.5 var(--caslon); color: var(--p-forest);
  background: #F7F3E9; border: 1px solid rgba(8, 26, 16, 0.22); border-radius: 0; padding: 0.8rem 0.95rem;
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.apply-form select { appearance: none; -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--p-ink) 50%), linear-gradient(135deg, var(--p-ink) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 2.4rem; }
.apply-form textarea { resize: vertical; min-height: 7.5rem; }
.apply-form ::placeholder { color: rgba(8, 26, 16, 0.4); font-style: italic; }
.apply-form input:focus, .apply-form select:focus, .apply-form textarea:focus { outline: none; border-color: var(--p-ink); box-shadow: 0 0 0 3px rgba(198, 167, 94, 0.3); }
.desk-picks { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; margin-top: 0.4rem; }
.pick { cursor: pointer; }
.pick input { position: absolute; opacity: 0; pointer-events: none; }
.pick > span { display: flex; gap: 0.85rem; align-items: center; padding: 0.7rem 0.85rem; background: #F7F3E9; border: 1px solid rgba(8, 26, 16, 0.18); transition: all 0.3s var(--ease); }
.pick img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; border: 1.5px solid var(--p-gold); flex: none; }
.pick em { font-style: normal; font-weight: 700; font-size: 0.98rem; line-height: 1.25; color: var(--p-forest); }
.pick em b { margin-right: 0.5rem; font-size: 0.78rem; color: var(--p-ink); }
.pick small { display: block; margin-top: 0.15rem; font-weight: 400; font-style: italic; font-size: 0.82rem; color: var(--p-muted); }
.pick:hover > span { border-color: var(--p-gold); }
.pick input:checked + span { background: var(--p-forest); border-color: var(--p-forest); }
.pick input:checked + span em { color: var(--p-cream); }
.pick input:checked + span small { color: var(--p-soft); }
.pick input:checked + span em b { color: var(--p-gold); }
.pick input:focus-visible + span { outline: 2px solid var(--p-gold); outline-offset: 2px; }
fieldset.is-missing .pick > span { border-color: #B5523F; }
fieldset.is-missing legend::after { content: "Choose at least one to continue"; display: block; margin-top: 0.3rem; font-style: italic; font-weight: 400; font-size: 0.86rem; color: #B5523F; }
.consent { display: flex; gap: 0.8rem; align-items: flex-start; font-size: 0.9rem; line-height: 1.6; color: var(--p-muted); cursor: pointer; }
.consent input { margin-top: 0.3rem; accent-color: var(--p-forest); width: 1rem; height: 1rem; flex: none; }
.apply-form .btn { justify-self: start; font-family: var(--caslon); font-weight: 700; letter-spacing: 0.18em; background: var(--p-forest); border-color: var(--p-forest); color: var(--p-cream); }
.apply-form .btn:hover { background: var(--p-gold); border-color: var(--p-gold); color: var(--p-forest); }
.apply-sent .ap-h, .apply-closed .ap-h { color: var(--p-forest); }
.apply-sent p, .apply-closed p { color: var(--p-muted); line-height: 1.7; max-width: 52ch; font-size: 1.05rem; }
.apply-sent .ap-k, .apply-closed .ap-k { color: var(--p-ink); }
@media (max-width: 900px) {
  .apply-grid { grid-template-columns: 1fr; }
  .apply-role { position: static; }
  .ap-steps ol { grid-template-columns: 1fr; }
  .ap-steps li + li { border-left: 0; border-top: 1px solid var(--p-goldd); }
}
@media (max-width: 600px) { .f-row, .desk-picks { grid-template-columns: 1fr; } }

/* ======================================================================
   37 THE POST SYSTEM, SITE-WIDE
   The site set in the same system as the Instagram and LinkedIn posts, so a
   visitor arriving from either recognises it at once:
     - one typeface, Libre Caslon (the crest's face), for everything
     - the posts' exact cream; the forest pair already matches them
       (forest-deep = the posts' ground, forest = the posts' card)
     - titles and labels in caps (titles bold, labels gold and tracked);
       anything that is read, headlines included, in sentence case
   This block only re-points tokens and restyles the type roles; layout is
   untouched. To undo it, delete this section. */
:root {
  --forest: #0F2619;
  --cream: #EFE9DB;
  --serif: "Libre Caslon Text", "Times New Roman", serif;
  --sans:  "Libre Caslon Text", "Times New Roman", serif;
  --mono:  "Libre Caslon Text", "Times New Roman", serif;
  --times: "Libre Caslon Text", "Times New Roman", serif;
}
body { font-family: var(--serif); }

/* titles: bold caps, as on the post covers */
h1, h2, h3, h4 { font-weight: 400; }
.display { font-weight: 700; text-transform: uppercase; letter-spacing: 0.01em; line-height: 1; }
.d1 { font-size: clamp(2.2rem, 5vw, 4.2rem); }
.d2 { font-size: clamp(1.6rem, 3.1vw, 2.6rem); }
.d3 { font-size: clamp(1.2rem, 1.9vw, 1.6rem); letter-spacing: 0.04em; }
.pub-h { font-weight: 700; text-transform: uppercase; letter-spacing: 0.01em; }
.pub-h.art-title, body[data-article] .art-title { text-transform: none; letter-spacing: -0.005em; }   /* a headline is read */

/* labels: gold Caslon caps, the posts' "WHAT HAPPENED" voice */
.label, .crumbs, .art-tags, .art-date, .art-by-meta, .lr-desk, .lr-type, .lr-date,
.arc th, .arc .c-date, .arc .c-desk, .arc .c-type, .arc .c-author, .dr-n, .verb-n, .footer h4,
.prose figcaption, .prose th, .f-h { font-weight: 700; letter-spacing: 0.2em; }
.label { font-size: 0.74rem; }

/* reading text: Caslon at regular weight (it has no light) */
.lede, .standfirst, .prose blockquote, .arc-empty td { font-weight: 400; }
.lede { line-height: 1.68; }

/* buttons and navigation keep their caps, now in Caslon */
.btn { font-weight: 700; letter-spacing: 0.16em; font-size: 0.82rem; }
.nav a.nav-link { font-size: 19px; letter-spacing: 0.1em; }
.nav-join { font-size: 19px; }
.brand-stack .bs-1 { letter-spacing: 0.05em; }

/* ======================================================================
   38 PARTNERS + FROM OUR SOCIALS (homepage)
   Partners: a row of seals, the same gold-ringed circles as the partnership
   post, closing the For industry band; the last tile invites new partners.
   Socials: the post covers themselves, 4:5 as on Instagram, in a grid that
   grows as posts are added. */
.partners { margin-top: clamp(2.6rem, 5vw, 4rem); padding-top: clamp(1.6rem, 3vw, 2.2rem); border-top: 1px solid var(--rule-light); }
.partner-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; margin-top: 1.2rem; }
.partner { display: flex; align-items: center; gap: 1.1rem; padding: 1.1rem 1.2rem; border: 1px solid var(--rule-light); text-decoration: none; color: var(--ink);
  transition: border-color 0.35s var(--ease), background 0.35s var(--ease); }
.partner:hover { border-color: #9A7C32; background: rgba(154, 124, 50, 0.06); }
.partner img { width: 64px; height: 64px; border-radius: 50%; flex: none; box-shadow: 0 0 0 2px #C6A75E, 0 0 0 6px var(--cream), 0 0 0 7px rgba(154, 124, 50, 0.4); }
.partner b { display: block; font-weight: 700; font-size: 1.02rem; }
.partner em { display: block; margin-top: 0.2rem; font-style: italic; font-size: 0.9rem; line-height: 1.4; color: var(--ink-soft); }
.partner-open { border-style: dashed; }
.partner-open .plus { width: 64px; height: 64px; flex: none; border-radius: 50%; border: 1.5px dashed #9A7C32; display: grid; place-items: center; font-size: 1.8rem; color: #9A7C32; }

.social-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(0.6rem, 1.2vw, 1rem); margin-top: 1.6rem; }
.social-tile { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; border: 1px solid var(--rule-dark); }
.social-tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.9s var(--ease); }
.social-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 2.4rem 1rem 0.9rem; font-size: 0.92rem; line-height: 1.35; color: var(--on-dark);
  background: linear-gradient(180deg, rgba(8, 26, 16, 0) 0%, rgba(8, 26, 16, 0.92) 70%); opacity: 0; transform: translateY(6px);
  transition: opacity 0.45s var(--ease), transform 0.45s var(--ease); }
.social-tile:hover img { transform: scale(1.03); }
.social-tile:hover .social-cap, .social-tile:focus-visible .social-cap { opacity: 1; transform: none; }
.social-cta { display: flex; gap: 0.8rem; flex-wrap: wrap; margin-top: 1.6rem; }
@media (max-width: 900px) { .social-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (hover: none) { .social-cap { opacity: 1; transform: none; } }

/* ======================================================================
   39 DESK CARDS (Research page)
   Five cards instead of five text rows: a gold numeral, the desk name in the
   post-title caps, the short motto, and the desk head. The card fills forest
   on hover, like the chosen desk on the Apply page. */
.desk-list.desk-cards { border-top: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; margin-top: 0.6rem; }
.desk-card { position: relative; display: flex; flex-direction: column; min-height: 22rem; padding: 1.6rem 1.4rem 1.3rem;
  background: #F6F2E8; border: 1px solid var(--rule-light); color: var(--ink); text-decoration: none;
  transition: background 0.45s var(--ease), border-color 0.45s var(--ease), transform 0.45s var(--ease); }
.dc-n { font-weight: 700; font-size: 3rem; line-height: 1; color: #B89650; }
.dc-name { margin-top: auto; font-weight: 700; font-size: clamp(1.15rem, 1.45vw, 1.45rem); line-height: 1.08; letter-spacing: 0.02em; text-transform: uppercase; }
.dc-name .amp { font-family: "Times New Roman", serif; }
.dc-rule { display: block; width: 36px; height: 2px; margin: 1rem 0 0.8rem; background: #C6A75E; }
.dc-motto { font-weight: 700; font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; line-height: 1.7; color: #8A6D28; min-height: 2.3rem; }
.dc-foot { display: flex; align-items: center; gap: 0.7rem; margin-top: 1.3rem; padding-top: 1rem; border-top: 1px solid var(--rule-light); }
.dc-foot img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; border: 1.5px solid #C6A75E; flex: none; }
.dc-foot > span:not(.dc-go) { font-size: 0.86rem; line-height: 1.25; font-weight: 700; }
.dc-foot em { display: block; font-style: italic; font-weight: 400; font-size: 0.78rem; color: var(--ink-soft); }
.dc-go { margin-left: auto; color: #9A7C32; transition: transform 0.45s var(--ease); }
.desk-card:hover { background: #081A10; border-color: #081A10; color: #EFE9DB; transform: translateY(-3px); }
.desk-card:hover .dc-n, .desk-card:hover .dc-go, .desk-card:hover .dc-motto { color: #C6A75E; }
.desk-card:hover .dc-foot { border-top-color: rgba(239, 233, 219, 0.16); }
.desk-card:hover .dc-foot em { color: #B0ACA1; }
.desk-card:hover .dc-go { transform: translateX(4px); }
@media (max-width: 1200px) { .desk-list.desk-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .desk-list.desk-cards { grid-template-columns: 1fr 1fr; }
  .desk-card { min-height: 17rem; }
}
@media (max-width: 480px) { .desk-list.desk-cards { grid-template-columns: 1fr; } .desk-card { min-height: 0; } .dc-name { margin-top: 1.2rem; } }

/* ======================================================================
   40 FOUR-CARD ROWS (What we do, For industry)
   The same card as the desks: gold numeral, title in caps, short gold rule,
   one short line. Works on forest and on cream. */
.cards4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; border-top: 0; margin-top: 0.6rem; }
.card4 { display: flex; flex-direction: column; padding: 1.6rem 1.4rem 1.5rem; border: 1px solid var(--rule-dark); background: rgba(239, 233, 219, 0.03); }
.card4 .c4-n { font-weight: 700; font-size: 2.6rem; line-height: 1; color: #C6A75E; }
.card4 h4 { margin: 2.2rem 0 0; font-family: var(--serif); font-weight: 700; font-size: 1.25rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--on-dark); }
.card4 .c4-rule { display: block; width: 36px; height: 2px; margin: 0.9rem 0 0.8rem; background: #C6A75E; }
.card4 p { margin: 0; font-size: 1rem; line-height: 1.5; color: var(--on-dark-soft); }
.on-cream .card4 { border-color: var(--rule-light); background: #F6F2E8; }
.on-cream .card4 h4 { color: var(--ink); }
.on-cream .card4 p { color: var(--ink-soft); }
.on-cream .card4 .c4-n { color: #B89650; }
#s-mission .desk-line { border-top: 0; margin-top: 1.4rem; }
@media (max-width: 1000px) { .cards4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .cards4 { grid-template-columns: 1fr; } .card4 h4 { margin-top: 1.2rem; } }

/* ======================================================================
   41 NO ORPHANS
   Headings and short centred lines are balanced across their lines, and
   paragraphs avoid a single word on the last line ("place." on its own).
   Browsers without support simply wrap as before. */
h1, h2, h3, h4, .display, .pub-h, .statement-q, .ap-sub, .closer .lede, .awaiting h3, .dc-name, .card4 h4 { text-wrap: balance; }
p, li, .lede, .card4 p, .dc-motto, figcaption { text-wrap: pretty; }
.closer .lede { max-width: 48ch; margin-inline: auto; }

/* ======================================================================
   42 WHY CTS EXISTS, STACKED
   The statement full width, the one supporting line beneath it, as a post
   cover sets title over subtitle. */
#s-society .society-grid { display: block; text-align: center; padding-block: clamp(0.5rem, 2vw, 1.5rem); }
#s-society .statement-q { max-width: 24ch; margin: 0 auto; font-size: clamp(1.8rem, 3.2vw, 2.9rem); line-height: 1.18; text-wrap: balance; }
#s-society .society-body { width: auto; margin: 0 auto; padding-top: 0; border-top: 0; }
#s-society .society-body::before { content: ""; display: block; width: 64px; height: 2px; margin: clamp(1.6rem, 3vw, 2.2rem) auto; background: #C6A75E; }
#s-society .society-body .lede { max-width: 50ch; margin: 0 auto; font-size: clamp(1.1rem, 1.5vw, 1.32rem); line-height: 1.6; font-style: italic; color: rgba(239, 233, 219, 0.8); text-wrap: balance; }

/* ======================================================================
   43 LATEST RESEARCH = THE THREE SERIES (Research page)
   Until research is published on the site, the feed shows the three series
   laid out as the feed will be: the Weekly as the lead card (its masthead
   art), Explained (the big numeral) and The Journey (the route) beside it.
   All drawn from the posts' own design; no invented articles. */
.latest.series-grid { display: grid; grid-template-columns: 1.55fr 1fr; grid-template-rows: 1fr 1fr; gap: 1rem; border-top: 0; margin-top: 0.6rem; }
.series-card { display: flex; flex-direction: column; background: #081A10; color: #EFE9DB; text-decoration: none; border: 1px solid #081A10; overflow: hidden;
  transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease); }
.series-card:hover { transform: translateY(-3px); box-shadow: 0 24px 40px -24px rgba(8, 26, 16, 0.6); }
.series-card.is-lead { grid-row: span 2; }
.series-card:not(.is-lead) { flex-direction: row; }
.sr-art { position: relative; display: grid; place-items: center; overflow: hidden; background: #0F2619; }
.is-lead .sr-art { aspect-ratio: 920 / 390; }
.series-card:not(.is-lead) .sr-art { flex: none; width: 38%; }
.sr-weekly img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sr-weekly b { position: relative; text-align: center; font-weight: 700; font-size: clamp(1.6rem, 3.4vw, 3rem); letter-spacing: 0.02em; text-transform: uppercase; line-height: 1;
  padding: 1.2rem 2rem; background: radial-gradient(ellipse at center, rgba(8, 26, 16, 0.92) 40%, rgba(8, 26, 16, 0) 72%); }
.sr-weekly b i { display: block; margin-top: 0.6rem; font-style: normal; font-size: 0.38em; letter-spacing: 0.6em; margin-right: -0.6em; color: #C6A75E; }
.sr-explained b { display: grid; place-items: center; width: clamp(6rem, 9vw, 8rem); aspect-ratio: 1; border: 2px solid #C6A75E; border-radius: 50%;
  box-shadow: 0 0 0 8px #0F2619, 0 0 0 9px rgba(198, 167, 94, 0.35); font-weight: 700; font-size: clamp(3.4rem, 5.6vw, 5rem); line-height: 1; color: #C6A75E; }
.sr-journey { display: flex; align-items: center; justify-content: space-between; padding: 0 12%; }
.sr-journey::before { content: ""; position: absolute; left: 14%; right: 14%; top: 50%; border-top: 2px dashed #685832; }
.sr-journey i { position: relative; width: 14px; height: 14px; border-radius: 50%; background: #685832; }
.sr-journey i:nth-child(3) { width: 20px; height: 20px; background: #C6A75E; box-shadow: 0 0 0 6px rgba(198, 167, 94, 0.22); }
.sr-journey i:nth-child(n+4) { background: #081A10; border: 2px solid #685832; }
.sr-body { display: flex; flex-direction: column; gap: 0.5rem; padding: clamp(1.2rem, 2.2vw, 1.8rem); flex: 1; }
.sr-k { font-weight: 700; font-size: 0.68rem; letter-spacing: 0.22em; text-transform: uppercase; color: #C6A75E; }
.sr-name { font-weight: 700; font-size: clamp(1.2rem, 1.8vw, 1.6rem); letter-spacing: 0.02em; text-transform: uppercase; line-height: 1.1; }
.is-lead .sr-name { font-size: clamp(1.5rem, 2.4vw, 2.1rem); }
.sr-text { font-size: 0.98rem; line-height: 1.5; color: #B0ACA1; }
.sr-next { margin-top: auto; padding-top: 0.8rem; display: flex; align-items: center; gap: 0.8rem; font-weight: 700; font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: #EFE9DB; }
.sr-next .arw { color: #C6A75E; transition: transform 0.45s var(--ease); }
.series-card:hover .sr-next .arw { transform: translateX(4px); }
@media (max-width: 900px) {
  .latest.series-grid { grid-template-columns: 1fr; grid-template-rows: none; }
  .series-card.is-lead { grid-row: auto; }
}
@media (max-width: 520px) { .series-card:not(.is-lead) { flex-direction: column; } .series-card:not(.is-lead) .sr-art { width: 100%; height: 9rem; } }

/* Join the desks (Research page): one line, the five desk heads, one button. */
.join-desks { display: flex; align-items: center; gap: clamp(1.4rem, 3vw, 3rem); padding: clamp(1.6rem, 3vw, 2.4rem); background: #EFE9DB; border: 1px solid var(--rule-light); }
.jd-text { flex: 1; }
.jd-text h3 { margin: 0; font-family: var(--serif); font-weight: 700; font-size: clamp(1.4rem, 2.2vw, 1.9rem); letter-spacing: 0.02em; text-transform: uppercase; color: var(--ink); }
.jd-text p { margin: 0.5rem 0 0; color: var(--ink-soft); font-size: 1.02rem; }
.jd-faces { display: flex; }
.jd-faces img { width: 54px; height: 54px; border-radius: 50%; object-fit: cover; border: 2px solid #C6A75E; box-shadow: 0 0 0 3px #EFE9DB; }
.jd-faces img + img { margin-left: -12px; }
.join-desks .btn-solid { background: #081A10; border-color: #081A10; color: #EFE9DB; }
.join-desks .btn-solid:hover { background: #C6A75E; border-color: #C6A75E; color: #081A10; }
@media (max-width: 860px) { .join-desks { flex-direction: column; align-items: flex-start; } }

/* ======================================================================
   44 DESK PAGES
   What the desk covers (one lead line, the topics as tags) beside its head;
   then the desk's Commodities Weekly slide, drawn as a skeleton of the real
   layout, beside how and when it is published. */
.desk-scope2 { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.ds-lede { margin: 1rem 0 1.6rem; font-size: clamp(1.15rem, 1.7vw, 1.5rem); line-height: 1.45; color: var(--ink); max-width: 46ch; }
.topic-tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.6rem; }
.topic-tags li { padding: 0.55rem 1rem; border: 1px solid #C6A75E; font-weight: 700; font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink); background: #F6F2E8; }
.ds-head { display: grid; justify-items: start; gap: 0.35rem; padding: 1.6rem; background: #081A10; color: #EFE9DB; }
.ds-head .label { margin-bottom: 0.8rem; }
.ds-photo { position: relative; display: block; width: 96px; height: 96px; border-radius: 50%; overflow: hidden; border: 2px solid #C6A75E; margin-bottom: 0.7rem; }
.ds-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ds-photo .li-mark { width: 36px; height: 36px; }
.ds-photo:hover .li-veil, .ds-photo:focus-visible .li-veil { opacity: 1; }
.ds-photo:hover .li-mark, .ds-photo:focus-visible .li-mark { transform: scale(1); }
.ds-li { margin-top: 0.9rem; width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid #C6A75E; border-radius: 50%; color: #C6A75E;
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease); }
.ds-li svg { width: 18px; height: 18px; display: block; }
.ds-li:hover, .ds-li:focus-visible { background: #C6A75E; color: #081A10; }
.ds-head b { font-size: 1.2rem; }
.ds-head em { font-style: italic; color: #B0ACA1; font-size: 0.95rem; }

.latest.desk-latest { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; border-top: 0; margin-top: 0.6rem; }
.slide-mock { aspect-ratio: 4 / 5; display: flex; flex-direction: column; gap: 0.7rem; padding: 1.6rem 1.4rem; background: #081A10; color: #EFE9DB;
  box-shadow: 0 30px 50px -30px rgba(8, 26, 16, 0.6); }
.sm-k { display: block; text-align: center; font-weight: 700; font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase; color: #C6A75E; }
.sm-small { text-align: left; margin-top: 0.4rem; font-size: 0.55rem; }
.sm-bars { display: grid; gap: 0.4rem; }
.sm-bars i { display: block; height: 0.5rem; background: rgba(239, 233, 219, 0.16); }
.sm-head { justify-items: center; margin: 0.2rem 0 0.4rem; }
.sm-head i { height: 0.8rem; background: rgba(239, 233, 219, 0.32); }
.sm-chart { display: block; flex: 1; min-height: 4.5rem; background: #0F2619; padding: 0.6rem; }
.sm-chart svg { width: 100%; height: 100%; }
.sm-by { display: flex; align-items: center; gap: 0.5rem; justify-content: flex-end; font-weight: 700; font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; }
.sm-by img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; border: 1.5px solid #C6A75E; }
.dl-text h3 { margin: 0.8rem 0 0.6rem; font-weight: 700; font-size: clamp(1.5rem, 2.4vw, 2.1rem); text-transform: uppercase; letter-spacing: 0.02em; color: var(--ink); }
.dl-text p { margin: 0 0 1rem; color: var(--ink-soft); font-size: 1.05rem; line-height: 1.6; max-width: 46ch; }
.dl-text .dl-next { font-weight: 700; font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; color: #8A6D28; margin-bottom: 1.4rem; }
.dl-text .btn { color: var(--ink); border-color: #9A7C32; }
.dl-text .btn:hover { color: #081A10; }
@media (max-width: 860px) {
  .desk-scope2, .latest.desk-latest { grid-template-columns: 1fr; }
  .slide-mock { max-width: 320px; }
}

/* ======================================================================
   45 REPORTS — Commodities Monthly (Research page)
   The report's A4 cover in the house style beside its contents: one
   research question per desk. Before the first issue the questions are
   bars, so the page shows the report's shape without inventing it. */
.rp-lead { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; margin-top: 0.6rem; }
.rp-cover { position: relative; display: flex; flex-direction: column; align-items: center; aspect-ratio: 1 / 1.414; padding: 2.2rem 1.6rem 1.6rem;
  background: #081A10; color: #EFE9DB; text-align: center; box-shadow: 0 30px 50px -30px rgba(8, 26, 16, 0.6); overflow: hidden; }
.rp-cover::before { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(198, 167, 94, 0.45); pointer-events: none; }
.rp-cover > img:not(.rp-crest) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rp-crest { width: 76px; height: 76px; margin-top: 0.6rem; }
.rp-t { margin-top: 1.6rem; font-weight: 700; font-size: clamp(1.4rem, 2.3vw, 1.9rem); line-height: 1; letter-spacing: 0.02em; text-transform: uppercase; }
.rp-t i { display: block; margin-top: 0.6rem; font-style: normal; font-size: 0.5em; letter-spacing: 0.55em; margin-right: -0.55em; color: #C6A75E; }
.rp-rule { display: block; width: 44px; height: 2px; margin: 1.2rem auto; background: #C6A75E; }
.rp-no { font-weight: 700; font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase; color: #B0ACA1; }
.rp-desks { margin-top: auto; display: grid; gap: 0.35rem; width: 100%; padding-top: 1rem; border-top: 1px solid rgba(198, 167, 94, 0.3); }
.rp-desks b { font-weight: 700; font-size: 0.6rem; letter-spacing: 0.18em; text-transform: uppercase; color: #C6A75E; }
.rp-body h3 { margin: 0.8rem 0 0.6rem; font-weight: 700; font-size: clamp(1.5rem, 2.4vw, 2.1rem); text-transform: uppercase; letter-spacing: 0.02em; color: var(--ink); }
.rp-body > p { margin: 0 0 1.4rem; color: var(--ink-soft); font-size: 1.05rem; line-height: 1.6; max-width: 54ch; }
.rp-ch { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule-light); }
.rp-ch li { display: grid; grid-template-columns: 3rem 1fr; padding: 0.9rem 0; border-bottom: 1px solid var(--rule-light); }
.rp-n { font-weight: 700; font-size: 1.05rem; color: #B89650; }
.rp-desk { display: block; font-weight: 700; font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase; color: #8A6D28; }
.rp-q { display: block; margin-top: 0.3rem; font-size: 1.08rem; line-height: 1.4; color: var(--ink); }
.rp-q a { color: inherit; }
.rp-bar { display: block; width: 72%; height: 0.55rem; margin-top: 0.55rem; background: rgba(16, 37, 26, 0.1); }
.rp-ch li:nth-child(2n) .rp-bar { width: 58%; }
.rp-ch li:nth-child(3n) .rp-bar { width: 66%; }
.rp-by { display: block; margin-top: 0.2rem; font-style: italic; font-size: 0.9rem; color: var(--ink-soft); }
.rp-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.4rem; margin-top: 1.6rem; }
.rp-next { font-weight: 700; font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; color: #8A6D28; }
.rp-actions .btn:not(.btn-solid) { color: var(--ink); border-color: #9A7C32; }
.rp-actions .btn:not(.btn-solid):hover { color: #081A10; }
.rp-archive { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 1rem; margin-top: 2.4rem; }
.rp-card { text-decoration: none; color: var(--ink); }
.rp-card .rp-cover { padding: 1rem; }
.rp-card b { display: block; margin-top: 0.6rem; font-weight: 700; }
@media (max-width: 860px) { .rp-lead { grid-template-columns: 1fr; } .rp-lead > .rp-cover { max-width: 300px; } }
#s-society .society-body, #s-society .society-body .lede, #s-society .statement-q { text-align: center; }

/* ======================================================================
   46 THE SIGN-OFF, BALANCED
   The closer and the footer share one green, so they read as one field: the
   closer now takes equal room above and below its text, the crest sits on
   the text's centre at a size that clears both edges, and the footer starts
   after a clear gap. */
.closer { padding-block: clamp(3rem, 5vw, 4.25rem); }
.closer-crest { height: min(clamp(150px, 13vw, 200px), 80%); opacity: 0.08; }
.footer { padding-block: clamp(1.4rem, 2.4vw, 2rem); }

/* Apply form: hints read as plain italic (not tracked caps), and the CV
   upload styled to match the fields. */
.apply-form .f-h { letter-spacing: 0; font-weight: 400; text-transform: none; }
.f-file { position: relative; }
.f-file input[type=file] { position: absolute; inset: auto 0 0 0; height: 3.2rem; opacity: 0; cursor: pointer; z-index: 1; }
.file-ui { display: flex; align-items: center; gap: 1rem; height: 3.2rem; padding: 0 0.95rem; background: #F7F3E9; border: 1px dashed rgba(8, 26, 16, 0.35); }
.file-ui b { padding: 0.45rem 0.9rem; background: #081A10; color: #EFE9DB; font-weight: 700; font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; }
.file-ui em { font-style: italic; color: #56645B; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.f-file:hover .file-ui, .f-file input:focus-visible + .file-ui { border-color: #8A6D28; }
.f-file.is-missing .file-ui { border-color: #B5523F; }
.f-file.is-missing em { color: #B5523F; }

/* ===================================================== 47. market picker */
/* Apply: one group per desk, one chip per market. A pressed chip goes
   forest with its order (1, 2) in a gold disc; a filled market is struck
   through and can't be chosen. Desk pages: the same markets as open roles. */
.mk-chosen { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.2rem 0 0.9rem; font-size: 0.92rem; font-style: italic; color: #56645B; }
.mk-chosen span { display: inline-flex; align-items: center; gap: 0.45rem; }
.mk-chosen b { font-style: normal; font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: #8A6D28; }
.mk-chosen span + span::before { content: "\00b7"; margin-right: 0.45rem; color: #8A6D28; }
.mk-desks { display: grid; gap: 1.1rem; }
.mk-desk { padding-top: 1rem; border-top: 1px solid rgba(8, 26, 16, 0.14); }
.mk-desk:first-child { padding-top: 0; border-top: 0; }
.mk-head { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.65rem; }
.mk-head img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; border: 1.5px solid #C6A75E; flex: none; }
.mk-head em { font-style: normal; font-weight: 700; font-size: 0.95rem; color: #081A10; }
.mk-head em b { margin-right: 0.45rem; font-size: 0.75rem; color: #8A6D28; }
.mk-head small { margin-left: 0.5rem; font-weight: 400; font-style: italic; font-size: 0.82rem; color: #56645B; }
.mk-list { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.mk { position: relative; display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.55rem 0.85rem; font: inherit; font-weight: 700; font-size: 0.7rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: #081A10; background: #F7F3E9; border: 1px solid rgba(8, 26, 16, 0.2); cursor: pointer;
  transition: background-color 0.25s var(--ease), border-color 0.25s var(--ease), color 0.25s var(--ease); }
.mk:hover { border-color: #C6A75E; }
.mk:focus-visible { outline: 2px solid #C6A75E; outline-offset: 2px; }
.mk i { display: none; }
.mk[aria-pressed="true"] { background: #081A10; border-color: #081A10; color: #EFE9DB; }
.mk[aria-pressed="true"] i { display: grid; place-items: center; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: #C6A75E; color: #081A10; font-style: normal; font-size: 0.68rem; letter-spacing: 0; }
.mk.is-filled { cursor: not-allowed; color: #8C9189; text-decoration: line-through; background: transparent; }
.mk.is-filled small { text-decoration: none; font-size: 0.6rem; color: #8A6D28; }
fieldset.is-missing .mk-chosen span { color: #B5523F; }

.ds-roles { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin: 2.2rem 0 0.9rem; }
.ds-roles .label { margin: 0; }
.ds-roles small { font-style: italic; font-size: 0.92rem; color: var(--ink-soft); }
.topic-tags.is-roles li { padding: 0; }
.topic-tags.is-roles a, .topic-tags.is-roles span { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.55rem 1rem; color: inherit; text-decoration: none; }
.topic-tags.is-roles small { font-size: 0.6rem; letter-spacing: 0.16em; color: #8A6D28; }
.topic-tags.is-roles a .arw { width: 18px; color: #8A6D28; transition: transform 0.3s var(--ease); }
.topic-tags.is-roles li:has(a) { transition: background-color 0.25s var(--ease), border-color 0.25s var(--ease); }
.topic-tags.is-roles li:has(a):hover { background: #081A10; border-color: #081A10; color: #EFE9DB; }
.topic-tags.is-roles li:has(a):hover small, .topic-tags.is-roles li:has(a):hover .arw { color: #C6A75E; }
.topic-tags.is-roles li:has(a):hover .arw { transform: translateX(3px); }
.topic-tags.is-roles li.is-filled { background: transparent; border-style: dashed; }
.topic-tags.is-roles li.is-filled small { font-style: italic; letter-spacing: 0; text-transform: none; font-size: 0.8rem; font-weight: 400; color: var(--ink-soft); }

/* roles.html: the society roles, listed by team in the role panel */
.ap-roles { margin: 0; }
.ap-roles dt { margin-top: 0.85rem; font-weight: 700; color: var(--p-cream); font-size: 1rem; }
.ap-roles dt:first-child { margin-top: 0; }
.ap-roles dd { margin: 0.2rem 0 0; color: var(--p-soft); font-size: 0.95rem; line-height: 1.55; max-width: 46ch; }

/* ===================================================== 48. join modal */
/* The Join CTS dialog in the post system: seal, gold eyebrow, uppercase
   title and gold rule, then three numbered cards; the research card is lit. */
.modal-panel.join-panel { width: min(100% - 2rem, 980px); max-height: min(92svh, 900px); padding: clamp(1.8rem, 4vw, 3rem); background: #081A10;
  border-color: rgba(198, 167, 94, 0.45); font-family: var(--caslon); }
.join-head { text-align: center; }
.join-seal { width: 64px; height: 64px; border-radius: 50%; display: block; margin: 0 auto 1rem; box-shadow: 0 0 0 2px #C6A75E, 0 0 0 7px #081A10, 0 0 0 8px rgba(198, 167, 94, 0.4); }
.join-k { display: block; font-weight: 700; font-size: 0.7rem; letter-spacing: 0.28em; text-transform: uppercase; color: #C6A75E; }
.modal .join-title { margin: 0.7rem 0 0; font-family: var(--caslon); font-weight: 700; font-size: clamp(2.6rem, 6vw, 4.2rem); line-height: 1; text-transform: uppercase; color: #EFE9DB; }
.join-rule { display: block; width: 64px; height: 2px; margin: 1.1rem auto; background: #C6A75E; }
.join-head p { margin: 0 auto; font-style: italic; font-size: 1.08rem; color: #B0ACA1; }
.join-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.9rem; margin-top: clamp(1.6rem, 3vw, 2.4rem); }
.jc { display: flex; flex-direction: column; padding: 1.4rem 1.3rem 1.3rem; background: #0F2619; border: 1px solid rgba(198, 167, 94, 0.28);
  transition: border-color 0.35s var(--ease), transform 0.35s var(--ease); }
.jc:hover { border-color: #C6A75E; transform: translateY(-3px); }
.jc-hot { border-color: #C6A75E; box-shadow: inset 0 3px 0 #C6A75E; }
.jc-top { display: flex; justify-content: space-between; align-items: baseline; gap: 0.6rem; }
.jc-n { font-size: 1.05rem; color: #C6A75E; }
.jc-top span { font-weight: 700; font-size: 0.6rem; letter-spacing: 0.18em; text-transform: uppercase; color: #B0ACA1; text-align: right; }
.jc-hot .jc-top span { color: #C6A75E; }
.jc h3 { margin: 1rem 0 0.5rem; font-family: var(--caslon); font-weight: 700; font-size: 1.3rem; letter-spacing: 0.04em; text-transform: uppercase; color: #EFE9DB; }
.jc p { margin: 0; font-size: 0.95rem; line-height: 1.55; color: #B0ACA1; }
.jc-stat { display: flex; align-items: baseline; gap: 0.5rem; margin: auto 0 0; padding: 1.2rem 0 1rem; }
.jc-stat strong { font-size: 2.4rem; line-height: 1; color: #EFE9DB; }
.jc-stat em { font-style: italic; font-size: 0.9rem; color: #B0ACA1; }
.jc-cta { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; padding: 0.85rem 1rem; border: 1px solid rgba(198, 167, 94, 0.55);
  font-weight: 700; font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase; color: #EFE9DB; transition: background-color 0.3s var(--ease), color 0.3s var(--ease); }
.jc-cta .arw { color: #C6A75E; transition: transform 0.3s var(--ease); }
.jc-cta:hover { background: #C6A75E; color: #081A10; }
.jc-cta:hover .arw { color: #081A10; transform: translateX(3px); }
.jc-hot .jc-cta { background: #C6A75E; border-color: #C6A75E; color: #081A10; }
.jc-hot .jc-cta .arw { color: #081A10; }
.jc-hot .jc-cta:hover { background: #EFE9DB; border-color: #EFE9DB; }
.jc-cta.is-pending { color: #8C9189; border-style: dashed; pointer-events: none; }
.jc-cta.is-pending .arw { display: none; }
.join-foot { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 1.6rem; padding-top: 1.2rem; border-top: 1px solid rgba(198, 167, 94, 0.25);
  font-weight: 700; font-size: 0.65rem; letter-spacing: 0.2em; text-transform: uppercase; color: #C6A75E; }
.jf-row { display: flex; align-items: center; gap: 0.6rem; }
.jf-row em { font-style: normal; color: #B0ACA1; margin-right: 0.3rem; }
.jf { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid #C6A75E; border-radius: 50%; color: #C6A75E; transition: background-color 0.3s var(--ease), color 0.3s var(--ease); }
.jf svg { width: 16px; height: 16px; }
.jf:hover { background: #C6A75E; color: #081A10; }
@media (max-width: 760px) {
  .join-cards { grid-template-columns: 1fr; }
  .jc-stat { padding: 0.9rem 0 0.8rem; }
  .join-foot { flex-direction: column; }
}

/* ===================================================== 49. events page */
/* Next up (featured card, the WSO post's date block), other events as rows,
   the year as a month strip with confirmed events pinned, the formats, and a
   follow strip. Post system: Caslon caps titles, gold labels, forest cards. */
.ev-block { margin-bottom: clamp(3rem, 6vw, 4.5rem); }
.ev-block > .label, .ev-head .label { display: block; margin-bottom: 1.2rem; }
.ev-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.ev-head small { font-style: italic; font-size: 0.92rem; color: #B0ACA1; margin-bottom: 1.2rem; }
.ev-feature { display: grid; grid-template-columns: 220px 1fr; background: #0F2619; border: 1px solid rgba(198, 167, 94, 0.45); }
.ev-date { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.3rem; padding: 2rem 1rem; background: #C6A75E; color: #081A10; text-align: center; }
.ev-date span { font-weight: 700; font-size: 0.78rem; letter-spacing: 0.24em; text-transform: uppercase; }
.ev-date b { font-size: clamp(4rem, 8vw, 5.6rem); line-height: 0.95; }
.ev-body { padding: clamp(1.6rem, 3.5vw, 2.6rem); }
.ev-k { font-weight: 700; font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; color: #C6A75E; }
.ev-body h2 { margin: 0.7rem 0 0.4rem; font-family: var(--caslon); font-weight: 700; font-size: clamp(1.8rem, 3.6vw, 2.8rem); line-height: 1.05; text-transform: uppercase; color: #EFE9DB; }
.ev-with { margin: 0; font-style: italic; font-size: 1.1rem; color: #B0ACA1; }
.ev-meta { margin: 0.9rem 0 0; font-weight: 700; font-size: 0.82rem; letter-spacing: 0.16em; text-transform: uppercase; color: #EFE9DB; }
.ev-perks { list-style: none; margin: 1.4rem 0 1.6rem; padding: 1rem 0 0; border-top: 1px solid rgba(198, 167, 94, 0.25); display: grid; gap: 0.5rem; }
.ev-perks li { color: #EFE9DB; font-size: 1.02rem; }
.ev-perks b { display: inline-block; width: 2.2rem; color: #C6A75E; font-size: 0.85rem; }
.ev-rows { display: grid; gap: 0.6rem; }
.ev-row { display: grid; grid-template-columns: 90px 160px 1fr auto auto; gap: 1.2rem; align-items: center; padding: 1rem 1.2rem; background: #0F2619; border: 1px solid rgba(198, 167, 94, 0.25); color: #EFE9DB; }
.ev-row b { color: #C6A75E; } .ev-row span { font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: #B0ACA1; } .ev-row em { color: #B0ACA1; }
.ev-year { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); border-top: 1px solid rgba(198, 167, 94, 0.35); }
.ev-mo { position: relative; padding: 1.3rem 0.7rem 0 0; min-height: 9rem; border-right: 1px solid rgba(198, 167, 94, 0.12); }
.ev-mo:last-child { border-right: 0; }
.ev-mo-n { display: block; font-weight: 700; font-size: 0.78rem; letter-spacing: 0.2em; text-transform: uppercase; color: #EFE9DB; padding-left: 0.7rem; }
.ev-mo-n i { font-style: normal; color: #B0ACA1; letter-spacing: 0.1em; }
.ev-dot { position: absolute; left: 0.7rem; top: -6px; width: 11px; height: 11px; border-radius: 50%; border: 1.5px solid rgba(198, 167, 94, 0.55); background: #12261A; }
.ev-mo.has .ev-dot { background: #C6A75E; border-color: #C6A75E; box-shadow: 0 0 0 5px rgba(198, 167, 94, 0.18); }
.ev-mo em { display: block; margin-top: 0.7rem; padding-left: 0.7rem; font-size: 0.9rem; line-height: 1.35; color: #EFE9DB; font-style: normal; }
.ev-mo em b { color: #C6A75E; margin-right: 0.2rem; }
.ev-mo em.tbc { font-style: italic; color: rgba(176, 172, 161, 0.6); }
.ev-mo.has { background: linear-gradient(180deg, rgba(198, 167, 94, 0.08), transparent 70%); }
.ev-formats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.9rem; }
.ev-fmt { display: flex; flex-direction: column; padding: 1.6rem 1.4rem 1.4rem; background: #0F2619; border: 1px solid rgba(198, 167, 94, 0.22); }
.ev-fmt-n { font-weight: 700; color: #C6A75E; font-size: 1.05rem; }
.ev-fmt h3 { margin: 0.9rem 0 0; font-family: var(--caslon); font-weight: 700; font-size: 1.2rem; letter-spacing: 0.04em; text-transform: uppercase; color: #EFE9DB; }
.ev-fmt .c4-rule { display: block; width: 36px; height: 2px; background: #C6A75E; margin: 0.9rem 0; }
.ev-fmt p { margin: 0 0 1.2rem; color: #B0ACA1; font-size: 0.98rem; line-height: 1.55; }
.ev-when { margin-top: auto; font-weight: 700; font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase; color: #C6A75E; }
.ev-notify { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; flex-wrap: wrap; padding: 1.8rem 2rem; border: 1px solid rgba(198, 167, 94, 0.45); }
.ev-notify h3 { margin: 0; font-family: var(--caslon); font-weight: 700; font-size: 1.4rem; text-transform: uppercase; letter-spacing: 0.03em; color: #EFE9DB; }
.ev-notify p { margin: 0.3rem 0 0; color: #B0ACA1; }
.ev-socials { display: flex; align-items: center; gap: 0.7rem; }
@media (max-width: 980px) {
  .ev-formats { grid-template-columns: 1fr 1fr; }
  .ev-year { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 1.2rem; }
  .ev-mo { min-height: 6.5rem; border-right: 0; border-top: 1px solid rgba(198, 167, 94, 0.2); }
  .ev-year { border-top: 0; }
}
@media (max-width: 640px) {
  .ev-feature { grid-template-columns: 1fr; }
  .ev-date { flex-direction: row; gap: 0.9rem; padding: 1rem; }
  .ev-date b { font-size: 3rem; }
  .ev-formats { grid-template-columns: 1fr; }
  .ev-row { grid-template-columns: 1fr; gap: 0.3rem; }
}
.ev-body { min-width: 0; }
.ev-body .btn { white-space: normal; text-align: left; max-width: 100%; }
@media (max-width: 640px) { .ev-feature { grid-template-columns: minmax(0, 1fr); } .ev-notify { padding: 1.4rem; } .ev-socials { flex-wrap: wrap; } }

/* join modal, simplified: no seal, no stats, one line per card */
.modal-panel.join-panel { width: min(100% - 2rem, 900px); }
.join-head .join-rule { margin-bottom: 0; }
.jc h3 { margin-top: 0.8rem; }
.jc p { margin-bottom: 1.4rem; }
.jc-cta { margin-top: auto; }
.join-foot { gap: 0.6rem; }
.join-foot em { font-style: normal; color: #B0ACA1; margin-right: 0.4rem; }

/* join modal with two cards; apply: the "help run the society" line */
.join-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.modal-panel.join-panel { width: min(100% - 2rem, 720px); }
.apply-role .ap-help { margin-top: 1.6rem; padding-top: 1.2rem; border-top: 1px solid var(--p-goldd); font-style: italic; color: var(--p-soft); }
.apply-role .ap-help a { color: var(--p-gold); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 760px) { .join-cards { grid-template-columns: 1fr; } }
.form-err { margin: 1rem 0 0; padding: 0.8rem 1rem; border-left: 3px solid #B5523F; background: rgba(181, 82, 63, 0.08);
  font-style: italic; font-size: 0.95rem; line-height: 1.5; color: #7A3426; }
.form-err a { color: #7A3426; text-decoration: underline; text-underline-offset: 3px; }

/* Phones: the first screen centres the seal and wordmark in the space below
   the header, a little larger, instead of hanging them from the top and
   leaving the bottom half empty. */
@media (max-width: 760px) {
  .hero { align-content: center; padding-top: 88px; padding-bottom: 9svh; }
  .hero-seal { width: min(74vw, 44svh); margin-left: 0; }
  .hw-1 { font-size: clamp(0.85rem, 4.1vw, 31px); margin: 3.4svh 0 0; margin-left: 0; }
  .hw-2 { font-size: clamp(0.7rem, 3.1vw, 24px); }
  .hw-rule { margin: 2.2svh 0 2.2svh; }
}