/* ============================================================
   COMPONENTS - masthead, hero, cards, buttons, subscribe, footer,
   reader chrome. Visual system adopted from the rebranding1
   (Stoic Endeavors) look: sage/olive/green, Galdeano + Inter.
   ============================================================ */

/* --- Eyebrow / kicker --- */
.ic-eyebrow {
  display: inline-block;
  font-family: var(--ic-font-ui);
  font-size: var(--ic-text-label);
  font-weight: var(--ic-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--ic-tracking-label);
  color: var(--ic-accent-deep);
  text-decoration: none;
  margin-bottom: var(--ic-space-sm);
}
.ic-eyebrow--light { color: var(--ic-dark-muted); }
a.ic-eyebrow:hover { color: var(--ic-accent); }

/* --- Buttons --- */
.ic-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ic-space-sm);
  font-family: var(--ic-font-ui);
  font-size: var(--ic-text-small);
  font-weight: var(--ic-weight-semibold);
  line-height: 1;
  padding: 0.72em 1.4em;
  border-radius: var(--ic-radius);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--ic-fast) var(--ic-ease), color var(--ic-fast) var(--ic-ease), border-color var(--ic-fast) var(--ic-ease), transform var(--ic-fast) var(--ic-ease);
}
.ic-btn--primary { background: var(--ic-accent); color: #3a2400; border-color: var(--ic-accent); }
.ic-btn--primary:hover { background: var(--ic-accent-deep); border-color: var(--ic-accent-deep); color: #2a1900; }
.ic-btn--secondary { background: transparent; color: var(--ic-accent-deep); border-color: var(--ic-rule); }
.ic-btn--secondary:hover { background: var(--ic-tint-green); border-color: var(--ic-accent); color: var(--ic-accent-deep); }
.ic-btn:active { transform: translateY(1px); }

/* --- Masthead ---
   Two states:
   - Solid (interior pages, and the front page once scrolled): marble bar,
     dark text, compact single row.
   - Overlay (front page at top): transparent, centered stack (brand mark +
     EST on top, nav centered below), light text over the hero. Mirrors ss4. */
.ic-masthead {
  position: fixed;
  top: var(--ic-adminbar-offset); left: 0; right: 0;
  z-index: var(--ic-z-header);
  background: var(--ic-header-bg);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--ic-rule);
  transition: background var(--ic-base) var(--ic-ease), border-color var(--ic-base) var(--ic-ease), padding var(--ic-base) var(--ic-ease);
}
.ic-masthead__inner {
  min-height: var(--ic-nav-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ic-space-lg);
  padding-block: var(--ic-space-sm);
}

/* Brand mark (diamond emblem, echoing the end-mark) + Est line */
.ic-brand { display: inline-flex; align-items: center; gap: var(--ic-space-sm); }
.ic-brand__mark {
  width: 14px; height: 14px;
  background: var(--ic-accent);
  transform: rotate(45deg);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.35);
}
/* Wordmark - the solid header's title. */
.ic-brand__name {
  font-family: var(--ic-font-display);
  font-size: 1.25rem;
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--ic-text-strong);
  white-space: nowrap;
}
.ic-brand:hover .ic-brand__name { color: var(--ic-accent-deep); }

/* Est. line - the overlay header's stand-in, hidden by default. */
.ic-brand__est {
  display: none;
  font-family: var(--ic-font-ui);
  font-size: var(--ic-text-label);
  font-weight: var(--ic-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ic-text-strong);
}
.custom-logo-link { display: inline-flex; }
.custom-logo { max-height: 44px; width: auto; }

/* Nav row */
.ic-masthead .ic-primary-nav { display: flex; }

/* ---- OVERLAY (front page, top of scroll) ---- */
.ic-masthead--overlay:not(.is-solid) {
  position: fixed;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: transparent;
  padding-top: var(--ic-space-lg);
}
.ic-masthead--overlay:not(.is-solid) .ic-masthead__inner {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--ic-space-md);
}
.ic-masthead--overlay:not(.is-solid) .ic-brand { flex-direction: column; gap: 6px; }
.ic-masthead--overlay:not(.is-solid) .ic-brand__mark { background: var(--ic-sage); box-shadow: inset 0 0 0 2px rgba(46,48,0,0.35); }
/* Overlay: Est. stands in, because the hero H1 right below already says the
   name. Clip the wordmark rather than display:none it, so the link keeps its
   accessible name instead of announcing as "Est. 2026". */
.ic-masthead--overlay:not(.is-solid) .ic-brand__est { display: inline; color: var(--ic-dark-text); }
.ic-masthead--overlay:not(.is-solid) .ic-brand__name {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  white-space: nowrap;
}
.ic-masthead--overlay:not(.is-solid) .ic-menu > li > a { color: var(--ic-dark-text); }
.ic-masthead--overlay:not(.is-solid) .ic-menu > li > a:hover { color: var(--ic-green); }
.ic-masthead--overlay:not(.is-solid) .ic-nav-toggle__bar { background: var(--ic-dark-text); }

/* Hero mode carries no navigation at all: the splash is the brand mark and
   nothing else. The nav (and its mobile toggle) return the moment the header
   goes solid on scroll, which is also why display:none is fine here rather
   than a clipped-but-reachable treatment. The hero's scroll link is what
   gets a keyboard user down to it. */
.ic-masthead--overlay:not(.is-solid) .ic-primary-nav,
.ic-masthead--overlay:not(.is-solid) .ic-nav-toggle { display: none; }

/* Nav */
.ic-primary-nav .ic-menu {
  display: flex;
  align-items: center;
  gap: var(--ic-space-lg);
  list-style: none;
}
.ic-menu a {
  font-family: var(--ic-font-ui);
  font-size: var(--ic-text-small);
  font-weight: var(--ic-weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ic-text);
}
.ic-menu a:hover,
.ic-menu .current-menu-item > a { color: var(--ic-accent-deep); }

/* Dropdowns (mirrors Stoic: hover-reveal panel on desktop) */
.ic-menu .menu-item-has-children { position: relative; }
.ic-menu .menu-item-has-children > a::after {
  content: "";
  display: inline-block;
  width: 0; height: 0;
  margin-left: 6px;
  vertical-align: middle;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  opacity: 0.7;
  transition: transform var(--ic-fast) var(--ic-ease);
}
/* Transparent hover bridge so the cursor can travel from the parent
   down onto the panel without crossing an un-hovered gap. */
.ic-menu .menu-item-has-children::before {
  content: "";
  position: absolute;
  top: 100%;
  left: -8px;
  right: -8px;
  height: 18px;
  z-index: 9;
}
.ic-menu .sub-menu {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 220px;
  list-style: none;
  background: var(--ic-surface);
  border: 1px solid var(--ic-rule);
  border-radius: var(--ic-radius);
  box-shadow: var(--ic-shadow);
  padding: var(--ic-space-sm) 0;
  margin-top: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--ic-base) var(--ic-ease), transform var(--ic-base) var(--ic-ease);
  z-index: 10;
}
.ic-menu .menu-item-has-children:hover > .sub-menu,
.ic-menu .menu-item-has-children:focus-within > .sub-menu {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}
.ic-menu .menu-item-has-children:hover > a::after { transform: rotate(180deg); }
.ic-menu .sub-menu li { width: 100%; }
.ic-menu .sub-menu a {
  display: block;
  padding: var(--ic-space-sm) var(--ic-space-lg);
  letter-spacing: 0.04em;
  color: var(--ic-text);
  white-space: nowrap;
}
.ic-menu .sub-menu a:hover { background: var(--ic-tint-green); color: var(--ic-accent-deep); }

/* --- Megamenu (the Columns panel) ---
   Opt-in per menu item via the ic-menu-mega class, so About keeps the plain
   narrow dropdown above and only the desks get the wide panel.

   The panel spans the masthead's content track rather than the width of its
   own <li>. That needs the trigger to be position:static (a positioned <li>
   would trap the panel at its own narrow box) and an ancestor to anchor to,
   which is why .ic-masthead__inner is the relative parent here. */
.ic-masthead__inner { position: relative; }
.ic-menu .ic-menu-mega { position: static; }
.ic-menu .ic-menu-mega > .sub-menu {
  left: 0;
  right: 0;
  width: 100%;
  min-width: 0;
  transform: translateY(-6px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2px var(--ic-space-xl);
  padding: var(--ic-space-xl);
}
.ic-menu .ic-menu-mega:hover > .sub-menu,
.ic-menu .ic-menu-mega:focus-within > .sub-menu {
  transform: translateY(0);
}
/* Desk names read as headlines, not menu rows: display face, sentence case,
   sized up from the nav's uppercase micro-type. */
.ic-menu .ic-menu-mega > .sub-menu a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--ic-space-md);
  font-family: var(--ic-font-display);
  font-size: 1.0625rem;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ic-text-strong);
  padding: var(--ic-space-sm) var(--ic-space-md);
  border-radius: var(--ic-radius-sm);
  border-left: 2px solid transparent;
  border-bottom: 1px solid var(--ic-rule);
}
.ic-menu .ic-menu-mega > .sub-menu a:hover {
  background: var(--ic-tint-green);
  border-left-color: var(--ic-accent);
  color: var(--ic-accent-deep);
}
/* The count is the quiet half: it says how much is on the desk without
   competing with the desk's name. */
.ic-mega__count {
  font-family: var(--ic-font-ui);
  font-size: var(--ic-text-label);
  font-weight: var(--ic-weight-semibold);
  letter-spacing: var(--ic-tracking-label);
  color: var(--ic-text-muted);
  flex: none;
}
/* The bridge spans the whole masthead once the trigger is static, or the
   cursor drops out of :hover crossing the gap to a far-left panel item. */
.ic-menu .ic-menu-mega::before { left: 0; right: 0; }

@media (max-width: 1100px) {
  .ic-menu .ic-menu-mega > .sub-menu { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Subscribe CTA item - pill button treatment (mirrors "START") */
.ic-menu .ic-menu-cta > a {
  background: var(--ic-accent);
  color: #3a2400;
  padding: 0.55em 1.1em;
  border-radius: var(--ic-radius);
}
.ic-menu .ic-menu-cta > a:hover { background: var(--ic-accent-deep); color: #2a1900; }

/* Hamburger */
.ic-nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: 0;
  padding: 8px;
  cursor: pointer;
}
.ic-nav-toggle__bar { width: 24px; height: 2px; background: var(--ic-text-strong); transition: transform var(--ic-base) var(--ic-ease), opacity var(--ic-base) var(--ic-ease); }
.ic-nav-toggle[aria-expanded="true"] .ic-nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.ic-nav-toggle[aria-expanded="true"] .ic-nav-toggle__bar:nth-child(2) { opacity: 0; }
.ic-nav-toggle[aria-expanded="true"] .ic-nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* --- Hero (front page) - mirrors the Stoic hero: full-bleed nature
   image + olive overlay, one centered display title + one tagline line,
   vertically centered in a tall band. --- */
.ic-hero {
  position: relative;
  color: var(--ic-dark-text);
  margin-top: 0;
  min-height: calc(100vh - var(--ic-adminbar-height));
  overflow: hidden;
  background-image: var(--ic-overlay), var(--ic-hero-img);
  background-size: cover;
  background-position: center;
}
/* Single overlapping layer: the bird is an absolute backdrop that
   UNDER-laps the title/text; the text sits on top (higher z-index). */
/* Viewport-proportional container: everything below is sized in vw so the
   hero is a scaled copy of itself from laptop to large desktop (identical
   proportions). Side gutters and the bird track scale with the viewport. */
.ic-hero__inner {
  grid-column: full;
  position: relative;
  min-height: calc(100vh - var(--ic-adminbar-height));
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 1800px;
  margin-inline: auto;
  padding-inline: clamp(1.5rem, 6vw, 7rem);
}
.ic-hero__text {
  position: relative;
  z-index: 2;
  text-align: left;
  max-width: 100%;
}
.ic-hero__title {
  font-family: var(--ic-font-display);
  font-size: clamp(3rem, 7.6vw, 8.75rem);
  line-height: 1.0;
  letter-spacing: 0.005em;
  white-space: nowrap;               /* one line */
  margin-bottom: 0.125em;
  /* Copies the Stoic h1 treatment: a vertical two-stop gradient text fill
     (theirs is sage -> off-white). Tones pulled from the phoenix + textured
     olive: warm gold at top fading to cream. No green/blue. */
  background: linear-gradient(180deg, #e7c069 0%, #f7efd4 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.55));
}
.ic-hero__tagline {
  font-family: var(--ic-font-display);
  font-style: italic;
  font-size: clamp(1.4rem, 3.2vw, 3.6rem);
  color: var(--ic-dark-text);
  margin: 0 0 0.225em;
  line-height: 1.2;
  text-shadow: 0 2px 24px rgba(15, 13, 0, 0.55);
}
.ic-hero__lede {
  font-family: var(--ic-font-mono);
  font-size: clamp(1.08rem, 1.38vw, 1.62rem);
  line-height: 1.85;
  color: #e4dca6;
  max-width: none;
  white-space: nowrap;
  margin: 0;
  text-shadow: 0 1px 18px rgba(15, 13, 0, 0.6);
}
/* Bird backdrop - vw-sized so it stays the same fraction of the viewport
   at every width; biased right, wings crossing behind the text. */
.ic-hero__art {
  position: absolute;
  top: 50%;
  right: clamp(-3rem, -2vw, 0rem);
  transform: translateY(-50%);
  z-index: 1;
  pointer-events: none;
  width: min(62vw, 1190px);          /* another ~10% down, viewport-scaled */
  display: flex;
  justify-content: flex-end;
}
.ic-hero__art img {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 22px 60px rgba(15, 13, 0, 0.6));
}

/* --- Scroll hint (hero foot) ---
   Sits on the hero, not in .ic-hero__inner, so the inner flex/vw sizing that
   the hero proportions depend on is untouched. Gold mono to rhyme with the
   lede. */
.ic-hero__scroll {
  position: absolute;
  left: 50%;
  bottom: clamp(1.25rem, 4vh, 2.75rem);
  transform: translateX(-50%);
  z-index: 3;
  display: grid;
  justify-items: center;
  gap: var(--ic-space-sm);
  text-decoration: none;
}
.ic-hero__scroll-label {
  font-family: var(--ic-font-mono);
  font-size: var(--ic-text-label);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: #e4dca6;
  text-shadow: 0 1px 18px rgba(15, 13, 0, 0.6);
  transition: color var(--ic-base) var(--ic-ease);
}
.ic-hero__scroll:hover .ic-hero__scroll-label { color: #f7efd4; }
.ic-hero__scroll-line {
  position: relative;
  width: 1px;
  height: 46px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(228, 220, 166, 0.55), rgba(228, 220, 166, 0));
}
/* A travelling spark, not a bouncing chevron: the same gesture the phoenix
   tips already make. */
.ic-hero__scroll-line::after {
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: 1px; height: 12px;
  background: #f7efd4;
  animation: ic-scroll-spark 2s var(--ic-ease-inout) infinite;
}
@keyframes ic-scroll-spark {
  0%   { transform: translateY(-14px); opacity: 0; }
  30%  { opacity: 1; }
  100% { transform: translateY(46px); opacity: 0; }
}
/* Reduced motion kills the spark (base.css forces one instant iteration),
   which would strand it invisible. Hold the line's own gradient instead. */
@media (prefers-reduced-motion: reduce) {
  .ic-hero__scroll-line::after { display: none; }
}

@media (max-width: 900px) {
  .ic-hero__inner {
    flex-direction: column;
    justify-content: center;
    text-align: center;
    gap: var(--ic-space-md);
    padding-block: calc(var(--ic-nav-height) + var(--ic-space-xl)) var(--ic-space-2xl);
  }
  .ic-hero__text { text-align: center; order: 2; }
  .ic-hero__title { white-space: normal; font-size: clamp(2.5rem, 12vw, 4rem); }
  .ic-hero__lede { white-space: normal; margin-inline: auto; }
  .ic-hero__art {
    position: relative; top: auto; right: auto; transform: none;
    order: 1; width: min(560px, 92vw); justify-content: center;
  }
}

/* --- Page head (archives / index) --- */
.ic-shell { padding-block: var(--ic-space-3xl) var(--ic-space-4xl); }
.ic-page-head { margin-bottom: var(--ic-space-2xl); }
.ic-page-head__title {
  font-size: clamp(2rem, 5vw, var(--ic-h1));
  margin-bottom: var(--ic-space-sm);
}
.ic-page-head__desc, .ic-page-head__search { margin-top: var(--ic-space-md); color: var(--ic-text-muted); }

/* --- Feed + cards --- */
.ic-feed { display: grid; gap: var(--ic-space-2xl); padding-block: var(--ic-space-3xl); }
.ic-card { display: grid; gap: var(--ic-space-md); }
.ic-card__media { display: block; border-radius: var(--ic-radius-lg); overflow: hidden; box-shadow: var(--ic-shadow-sm); }
.ic-card__media img { width: 100%; height: auto; transition: transform var(--ic-slow) var(--ic-ease); }
.ic-card__media:hover img { transform: scale(1.03); }
.ic-card__title { font-size: var(--ic-h3); line-height: 1.15; }
.ic-card__title a { color: var(--ic-text-strong); }
.ic-card__title a:hover { color: var(--ic-accent-deep); }
.ic-card__dek { color: var(--ic-text); font-size: 1.0625rem; margin: 0; }
.ic-card__meta {
  display: flex; align-items: center; gap: var(--ic-space-sm);
  font-family: var(--ic-font-ui); font-size: var(--ic-text-meta); color: var(--ic-text-muted);
}
.ic-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--ic-accent); display: inline-block; }

/* Featured card - larger, first in feed */
.ic-card--featured .ic-card__title { font-size: clamp(1.75rem, 4vw, var(--ic-h2)); }
.ic-card--featured .ic-card__dek { font-size: var(--ic-text-lede); }

/* --- Subscribe --- */
.ic-subscribe { padding-block: var(--ic-space-3xl); }
.ic-subscribe__inner {
  background: var(--ic-surface);
  border: 1px solid var(--ic-rule);
  border-radius: var(--ic-radius-lg);
  padding: clamp(var(--ic-space-xl), 5vw, var(--ic-space-3xl));
  text-align: center;
  box-shadow: var(--ic-shadow);
  position: relative;
  overflow: hidden;
}
.ic-subscribe__inner::before {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 4px;
  background: linear-gradient(90deg, var(--ic-green), var(--ic-blue));
}
.ic-subscribe__heading { font-size: var(--ic-h3); margin-bottom: var(--ic-space-sm); }
.ic-subscribe__copy { color: var(--ic-text-muted); margin-bottom: var(--ic-space-lg); max-width: 46ch; margin-inline: auto; }
.ic-subscribe__form { display: flex; gap: var(--ic-space-sm); max-width: 460px; margin: 0 auto; flex-wrap: wrap; }
.ic-subscribe__form input[type="email"] {
  flex: 1 1 220px;
  padding: 0.72em 1em;
  font: inherit; font-size: var(--ic-text-small);
  border: 1px solid var(--ic-rule);
  border-radius: var(--ic-radius);
  background: var(--ic-bg);
  color: var(--ic-text);
}
.ic-subscribe__form input[type="email"]:focus { outline: 2px solid var(--ic-accent); outline-offset: 1px; border-color: var(--ic-accent); }
.ic-subscribe__status { margin-top: var(--ic-space-md); font-size: var(--ic-text-small); min-height: 1.2em; }
.ic-subscribe__status.is-success { color: var(--ic-success-fg); }
.ic-subscribe__status.is-error { color: var(--ic-error-fg); }

/* --- Contact: tabbed dual form ---
   Ported from the chadworks .cw-dualform (two pill buttons over a sliding
   indicator, only the active form visible). Theirs sits on a dark band with
   white-alpha chrome; this is the warm inverse: sage track, amber pill.
   The indicator is driven by JS (translateX per tab index) rather than a
   hardcoded .is-right, so a third tab would not need a CSS change. */
.ic-dualform { margin-block: var(--ic-space-xl); }
.ic-dualform__toggle {
  display: flex;
  position: relative;
  background: var(--ic-bg-alt);
  border: 1px solid var(--ic-rule);
  border-radius: var(--ic-radius);
  padding: 4px;
  margin-bottom: var(--ic-space-xl);
}
.ic-dualform__toggle-btn {
  flex: 1;
  padding: 0.75em 1.25em;
  font-family: var(--ic-font-ui);
  font-size: var(--ic-text-small);
  font-weight: var(--ic-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ic-text-muted);
  background: none;
  border: 0;
  border-radius: calc(var(--ic-radius) - 2px);
  cursor: pointer;
  transition: color var(--ic-base) var(--ic-ease);
  position: relative;
  z-index: 2;
}
.ic-dualform__toggle-btn.is-active { color: #3a2400; }
.ic-dualform__toggle-indicator {
  position: absolute;
  top: 4px;
  left: 4px;
  width: calc(50% - 4px);
  height: calc(100% - 8px);
  background: var(--ic-accent);
  border-radius: calc(var(--ic-radius) - 2px);
  transition: transform var(--ic-slow) var(--ic-ease);
  z-index: 1;
}
/* [hidden] alone loses to display:block, so the inactive panel needs this. */
.ic-dualform__form[hidden] { display: none; }
.ic-dualform__form { display: none; }
.ic-dualform__form.is-active { display: block; animation: ic-form-fade var(--ic-slow) var(--ic-ease); }
@keyframes ic-form-fade {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* --- Form chrome (shared) --- */
.ic-form { display: grid; gap: var(--ic-space-lg); }
.ic-form-grid { display: grid; gap: var(--ic-space-lg); }
@media (min-width: 620px) {
  .ic-form-grid--2 { grid-template-columns: 1fr 1fr; }
}
.ic-form-field { display: grid; gap: var(--ic-space-xs); }
.ic-form-field label {
  font-family: var(--ic-font-ui);
  font-size: var(--ic-text-small);
  font-weight: var(--ic-weight-semibold);
  color: var(--ic-text-strong);
}
.ic-required { color: var(--ic-link); margin-left: 2px; }
.ic-form-field input,
.ic-form-field textarea {
  width: 100%;
  padding: 0.72em 0.9em;
  font: inherit;
  font-size: var(--ic-text-small);
  color: var(--ic-text);
  background: var(--ic-surface);
  border: 1px solid var(--ic-rule);
  border-radius: var(--ic-radius);
  transition: border-color var(--ic-fast) var(--ic-ease), box-shadow var(--ic-fast) var(--ic-ease);
}
.ic-form-field textarea { resize: vertical; line-height: var(--ic-leading-snug); }
.ic-form-field input:focus,
.ic-form-field textarea:focus {
  outline: none;
  border-color: var(--ic-accent);
  box-shadow: 0 0 0 3px var(--ic-tint-green);
}
.ic-form-field.has-error input,
.ic-form-field.has-error textarea { border-color: var(--ic-error-fg); }
.ic-form-field.has-error.has-error label { color: var(--ic-error-fg); }
.ic-form__submit { justify-self: start; }
.ic-form__status { margin: 0; font-size: var(--ic-text-small); min-height: 1.2em; }
.ic-form__status.is-success { color: var(--ic-success-fg); }
.ic-form__status.is-error { color: var(--ic-error-fg); }

/* Honeypot: out of sight, out of the tab order, still fillable by a bot. */
.ic-form__hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* --- Thread aside --- */
.ic-thread-aside {
  background: var(--ic-sage);
  border-left: 3px solid var(--ic-accent);
  border-radius: 0 var(--ic-radius) var(--ic-radius) 0;
  padding: var(--ic-space-lg) var(--ic-space-xl);
  margin: var(--ic-space-2xl) auto;
  max-width: var(--ic-reading-width);
}
.ic-thread-aside__statement { font-style: italic; color: var(--ic-text-strong); margin-bottom: var(--ic-space-sm); }
.ic-thread-aside__link { font-family: var(--ic-font-ui); font-weight: var(--ic-weight-semibold); font-size: var(--ic-text-small); }

/* --- Footnotes --- */
.ic-fn-ref { font-size: 0.7em; line-height: 0; }
.ic-fn-ref a { padding: 0 2px; }
.ic-footnotes {
  margin-top: var(--ic-space-3xl);
  padding-top: var(--ic-space-lg);
  border-top: 1px solid var(--ic-rule);
  font-size: var(--ic-text-small);
  color: var(--ic-text-muted);
}
.ic-footnotes ol { padding-left: 1.4em; display: grid; gap: var(--ic-space-sm); }
.ic-fn-back { margin-left: 4px; }

/* --- Progress bar ---
   Rides directly under the admin bar via the shared offset token; the old
   hardcoded .admin-bar 32/46 pair is gone. */
.ic-progress { position: fixed; top: var(--ic-adminbar-offset); left: 0; right: 0; height: 3px; z-index: var(--ic-z-progress); background: transparent; }
.ic-progress__fill { display: block; height: 100%; width: 100%; transform: scaleX(0); transform-origin: 0 50%; background: linear-gradient(90deg, var(--ic-green), var(--ic-blue)); }

/* --- Pagination --- */
.ic-pagination { margin-top: var(--ic-space-3xl); }
.ic-pagination ul { display: flex; flex-wrap: wrap; gap: var(--ic-space-sm); list-style: none; justify-content: center; }
.ic-pagination a, .ic-pagination span {
  display: inline-flex; min-width: 40px; height: 40px; align-items: center; justify-content: center;
  padding: 0 var(--ic-space-sm);
  font-family: var(--ic-font-ui); font-size: var(--ic-text-small);
  border: 1px solid var(--ic-rule); border-radius: var(--ic-radius);
  color: var(--ic-text);
}
.ic-pagination a:hover { border-color: var(--ic-accent); color: var(--ic-accent-deep); }
.ic-pagination .current { background: var(--ic-accent); color: #3a2400; border-color: var(--ic-accent); }

/* --- Search form --- */
.ic-search { display: flex; gap: var(--ic-space-sm); max-width: 480px; flex-wrap: wrap; }
.ic-search__input {
  flex: 1 1 200px; padding: 0.6em 0.9em; font: inherit;
  border: 1px solid var(--ic-rule); border-radius: var(--ic-radius); background: var(--ic-surface); color: var(--ic-text);
}
.ic-search__input:focus { outline: 2px solid var(--ic-accent); outline-offset: 1px; }

/* --- Footer (olive band) --- */
.ic-footer { background: var(--ic-dark-bg); color: var(--ic-dark-text); margin-top: var(--ic-space-4xl); }
.ic-footer__inner {
  padding-block: var(--ic-space-3xl) var(--ic-space-xl);
  display: grid; gap: var(--ic-space-2xl);
  grid-template-columns: 1fr;
}
.ic-footer__wordmark { font-family: var(--ic-font-display); font-size: var(--ic-h3); color: var(--ic-dark-text); }
.ic-footer__wordmark:hover { color: var(--ic-sage); }
.ic-footer__tagline { font-family: var(--ic-font-display); color: var(--ic-sage); margin: var(--ic-space-sm) 0; }
.ic-footer__attribution { color: var(--ic-dark-muted); font-size: var(--ic-text-small); }
.ic-footer__menu { list-style: none; display: flex; flex-wrap: wrap; gap: var(--ic-space-lg); }
.ic-footer__menu a { color: var(--ic-dark-text); font-family: var(--ic-font-ui); font-size: var(--ic-text-small); }
.ic-footer__menu a:hover { color: var(--ic-green); }
.ic-footer-widget__title { color: var(--ic-sage); }
.ic-footer__base {
  border-top: 1px solid var(--ic-dark-border);
  padding-block: var(--ic-space-lg);
  font-size: var(--ic-text-meta); color: var(--ic-dark-muted);
}

/* --- Toast --- */
.ic-toast {
  position: fixed; left: 50%; bottom: var(--ic-space-xl); transform: translate(-50%, 20px);
  background: var(--ic-olive); color: var(--ic-dark-text);
  padding: var(--ic-space-md) var(--ic-space-lg); border-radius: var(--ic-radius);
  box-shadow: var(--ic-shadow-lg); font-size: var(--ic-text-small);
  opacity: 0; transition: opacity var(--ic-base) var(--ic-ease), transform var(--ic-base) var(--ic-ease);
  z-index: var(--ic-z-toast); max-width: 90vw;
}
.ic-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
.ic-toast--confirmed { border-left: 3px solid var(--ic-green); }
.ic-toast--invalid { border-left: 3px solid var(--ic-error-fg); }

/* --- Responsive --- */
@media (min-width: 720px) {
  /* Only split when something actually occupies the second column. With no
     footer menu and no widgets the brand block used to sit in a 1.4fr track
     with dead space beside it, reading as a lopsided footer. */
  .ic-footer__inner:has(.ic-footer__nav, .ic-footer__widgets) {
    grid-template-columns: 1.4fr 1fr;
    align-items: start;
  }
}
@media (max-width: 860px) {
  .ic-nav-toggle { display: flex; }
  .ic-primary-nav {
    position: fixed;
    inset: calc(var(--ic-adminbar-offset) + var(--ic-nav-height)) 0 auto 0;
    background: var(--ic-bg);
    border-bottom: 1px solid var(--ic-rule);
    transform: translateY(-8px); opacity: 0; pointer-events: none;
    transition: opacity var(--ic-base) var(--ic-ease), transform var(--ic-base) var(--ic-ease);
  }
  .ic-primary-nav.is-open { transform: translateY(0); opacity: 1; pointer-events: auto; }
  .ic-primary-nav .ic-menu { flex-direction: column; align-items: flex-start; gap: 0; padding: var(--ic-space-md) 0; }
  .ic-primary-nav .ic-menu li { width: 100%; }
  .ic-primary-nav .ic-menu a { display: block; padding: var(--ic-space-md) var(--ic-space-lg); width: 100%; }

  /* Submenus become a static, expandable accordion on mobile */
  .ic-menu .menu-item-has-children::before { display: none; }
  .ic-menu .menu-item-has-children > a::after { float: right; }
  .ic-menu .sub-menu,
  .ic-menu .menu-item-has-children:hover > .sub-menu {
    position: static; opacity: 1; transform: none; pointer-events: auto;
    left: auto;
    box-shadow: none; border: 0; border-radius: 0; margin: 0; padding: 0;
    background: var(--ic-sage);
    max-height: 0; overflow: hidden;
    transition: max-height var(--ic-base) var(--ic-ease);
  }
  .ic-menu .menu-item-has-children.is-open > .sub-menu { max-height: 400px; }
  .ic-menu .menu-item-has-children.is-open > a::after { transform: rotate(180deg); }
  .ic-menu .sub-menu a { padding-left: var(--ic-space-2xl); }

  /* Undo the megamenu on mobile. These selectors are more specific than the
     generic .sub-menu rules above, so without an explicit reset the 3-up grid
     and its padding leak into the accordion. There is no room for a panel on
     a phone: it is just a list again. */
  .ic-menu .ic-menu-mega { position: relative; }
  .ic-menu .ic-menu-mega > .sub-menu {
    display: block;
    grid-template-columns: none;
    gap: 0;
    padding: 0;
    transform: none;
    width: auto;
  }
  .ic-menu .ic-menu-mega.is-open > .sub-menu { max-height: 520px; }
  .ic-menu .ic-menu-mega > .sub-menu a {
    font-family: var(--ic-font-ui);
    font-size: var(--ic-text-small);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: var(--ic-space-md) var(--ic-space-md) var(--ic-space-md) var(--ic-space-2xl);
    border-left: 0;
    border-radius: 0;
  }
  .ic-menu .ic-menu-cta > a { display: inline-block; margin: var(--ic-space-sm) var(--ic-space-lg); width: auto; }
}