/* ============================================================
   Wooden Horse Strategies — site stylesheet
   Mobile-first. Breakpoints: 700px (tablet), 1100px (desktop).
   ============================================================ */

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

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

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

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

a { color: var(--color-accent-700); text-decoration: none; }
a:hover { color: var(--color-accent); }

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 400;
  margin: 0;
  text-wrap: balance;
}

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: 1px;
}

/* Skip link — keyboard users land here first */
.skip {
  position: absolute; left: -9999px;
  background: var(--color-bg); color: var(--color-text);
  padding: 12px 18px; z-index: 100;
  border: 1px solid var(--color-text);
  font-family: var(--font-heading);
}
.skip:focus { left: var(--gutter); top: 10px; }

/* ---------- Frame ---------- */

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

.section { padding-block: var(--section-y); }
.rule-top { border-top: 1px solid var(--color-divider); }
.rule-bottom { border-bottom: 1px solid var(--color-divider); }
.rule-strong { border-top: 1px solid var(--color-text); }

/* ---------- Type components ---------- */

.kicker {
  font-family: var(--font-heading);
  font-size: var(--fs-kicker);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-feature-settings: "tnum";
  color: var(--color-accent-700);
  display: block;
}
.kicker-dark { color: var(--color-accent-400); }

.kicker-rule {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 22px;
}
.kicker-rule::before {
  content: ""; width: 28px; height: 1px;
  background: var(--color-accent); flex: none;
}

.meta {
  font-family: var(--font-heading);
  font-size: var(--fs-meta);
  letter-spacing: .12em;
  text-transform: uppercase;
  font-feature-settings: "tnum";
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
  line-height: 1.5;
}

.hero-title { font-size: var(--fs-hero); line-height: 1.02; letter-spacing: -.02em; }
.page-title { font-size: var(--fs-h1);   line-height: 1.04; letter-spacing: -.02em; }
.h2         { font-size: var(--fs-h2);   line-height: 1.08; letter-spacing: -.015em; }
.h3         { font-size: var(--fs-h3);   line-height: 1.1; }

.display {
  font-family: var(--font-heading);
  font-weight: 300;
  font-size: var(--fs-display);
  line-height: 1.42;
  text-wrap: pretty;
  margin: 0 0 24px;
}

.lead {
  font-size: var(--fs-lead);
  line-height: 1.72;
  color: color-mix(in srgb, var(--color-text) 82%, transparent);
  margin: 0;
  max-width: 54ch;
}

/* Body copy.
   Justification only earns its keep at a wide measure — below
   that it opens rivers. Left-aligned by default; justified is
   switched on per-container at the desktop breakpoint. */
.body {
  font-size: var(--fs-body);
  line-height: 1.8;
  text-align: left;
  hyphens: none;
  color: color-mix(in srgb, var(--color-text) 88%, transparent);
}
.body + .body { margin-top: 20px; }

@media (min-width: 1100px) {
  .body { text-align: justify; hyphens: auto; }
}

.caption {
  font-size: 0.78125rem;
  line-height: 1.7;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
  margin: 12px 0 0;
}
.caption-italic { font-style: italic; }

.dropcap::first-letter {
  font-family: var(--font-heading);
  font-size: 3.4em;
  line-height: .78;
  float: left;
  padding: 6px 9px 0 0;
  color: var(--color-accent);
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-heading);
  font-size: 0.875rem;
  letter-spacing: .04em;
  line-height: 1;
  padding: 14px 22px;
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-accent-700);
  cursor: pointer;
  transition: background .18s, color .18s;
  min-height: 44px;            /* touch target */
  text-align: center;
}
.btn:hover {
  background: color-mix(in srgb, var(--color-accent) 10%, transparent);
  color: var(--color-accent-700);
}
.btn-secondary {
  border-color: color-mix(in srgb, var(--color-text) 30%, transparent);
  color: var(--color-text);
}
.btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 6%, transparent); }
.btn-dark {
  border-color: var(--color-accent-400);
  color: var(--color-accent-300);
}
.btn-dark:hover { background: color-mix(in srgb, var(--color-accent) 18%, transparent); }
.btn-block { display: flex; width: 100%; }

.btn-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; }
.btn-row .btn { flex: 1 1 auto; }
@media (min-width: 560px) { .btn-row .btn { flex: 0 0 auto; } }

/* ---------- Header ---------- */

.header {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--color-bg) 94%, transparent);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--color-text);
}
.header-in {
  max-width: var(--maxw); margin: 0 auto;
  padding-inline: var(--gutter);
  height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.brand { display: flex; align-items: center; gap: 11px; flex: none; }
.brand img { height: 30px; width: auto; }
.brand-name {
  font-family: var(--font-heading); font-weight: 500;
  font-size: 1.125rem; line-height: 1; letter-spacing: .01em;
  display: block; color: var(--color-text);
}
.brand-sub {
  font-family: var(--font-heading); font-size: 0.625rem;
  letter-spacing: .26em; text-transform: uppercase;
  color: var(--color-accent-700); display: block; margin-top: 3px;
}
@media (min-width: 1100px) {
  .brand img { height: 34px; }
  .brand-name { font-size: 1.25rem; }
}

.nav { display: flex; align-items: center; gap: 26px; }
.nav a {
  font-family: var(--font-heading);
  font-size: 1rem;
  color: var(--color-text);
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
}
.nav a:hover { border-bottom-color: var(--color-accent); }
.nav a[aria-current="page"] {
  border-bottom-color: var(--color-accent);
  color: var(--color-accent-700);
}
.nav .btn { font-size: 0.8125rem; letter-spacing: .06em; text-transform: uppercase; padding: 11px 18px; min-height: 0; }

/* Desktop nav hidden below 1100; drawer takes over */
.nav-desktop { display: none; }
@media (min-width: 860px) { .nav-desktop { display: flex; } }

/* Hamburger */
.burger {
  display: inline-flex; flex-direction: column; justify-content: center;
  gap: 5px; width: 44px; height: 44px; padding: 0 12px;
  background: none; border: 0; cursor: pointer;
  margin-right: calc(var(--gutter) * -0.4);
}
.burger span {
  display: block; height: 1px; width: 100%;
  background: var(--color-text);
  transition: transform .22s ease, opacity .18s ease;
}
@media (min-width: 860px) { .burger { display: none; } }

.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ---------- Mobile drawer ---------- */

.drawer {
  position: fixed; inset: var(--header-h) 0 0 0;
  background: var(--color-bg);
  z-index: 39;
  padding: 10px var(--gutter) 40px;
  overflow-y: auto;
  transform: translateY(-8px);
  opacity: 0; visibility: hidden;
  transition: opacity .22s ease, transform .22s ease, visibility .22s;
}
.drawer[data-open="true"] { opacity: 1; visibility: visible; transform: none; }
@media (min-width: 860px) { .drawer { display: none; } }

.drawer a.drawer-link {
  display: flex; align-items: baseline; gap: 14px;
  font-family: var(--font-heading);
  font-size: 1.5rem; color: var(--color-text);
  padding: 18px 2px;
  border-bottom: 1px solid var(--color-divider);
}
.drawer a.drawer-link .idx {
  font-size: 0.75rem; color: var(--color-accent);
  font-feature-settings: "tnum"; flex: none;
}
.drawer a.drawer-link[aria-current="page"] { color: var(--color-accent-700); }
.drawer .btn { margin-top: 26px; }
.drawer-contact { margin-top: 30px; }
.drawer-contact a { font-size: var(--fs-body); }

body.nav-open { overflow: hidden; }

/* ---------- Plate (photography) ---------- */

.plate {
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  object-fit: cover;
  width: 100%;
}
.plate-portrait { aspect-ratio: 4/5; }
.plate-wide { aspect-ratio: 3/2; }
.plate-16 { aspect-ratio: 16/9; }
.plate-43 { aspect-ratio: 4/3; }

/* ---------- Rows (services / articles) ---------- */

.row-list { border-top: 1px solid var(--color-text); }

.row {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 8px 16px;
  align-items: start;
  padding: 22px 6px;
  border-bottom: 1px solid var(--color-divider);
  transition: background .18s;
  color: inherit;
}
.row:hover { background: color-mix(in srgb, var(--color-accent) 7%, transparent); color: inherit; }
.row:hover .row-title { color: var(--color-accent-700); }

.row-idx {
  font-family: var(--font-heading);
  font-size: 0.875rem;
  font-feature-settings: "tnum";
  color: var(--color-accent);
  padding-top: 5px;
}
.row-title {
  font-family: var(--font-heading); font-weight: 500;
  font-size: var(--fs-item); line-height: 1.24;
  margin: 0; transition: color .18s;
}
.row-desc {
  font-size: 0.875rem; line-height: 1.6;
  color: color-mix(in srgb, var(--color-text) 65%, transparent);
  margin: 6px 0 0;
}
.row-body { grid-column: 2; }

/* Default row keeps title over description (Home, mobile everywhere).
   .row-wide is the Services-page form: index | title | deliverables. */
@media (min-width: 900px) {
  .row { padding: 26px 6px; }
  .row-wide { grid-template-columns: 44px 1fr 1.15fr; gap: 28px; }
  .row-wide .row-body { grid-column: auto; }
  .row-wide .row-desc { margin: 0; }
}

/* Article rows (no index column) */
.arow {
  display: block;
  padding: 16px 2px;
  border-bottom: 1px solid var(--color-divider);
  color: inherit;
}
.arow:hover { color: inherit; }
.arow:hover .arow-title { color: var(--color-accent-700); }
.arow-title {
  font-family: var(--font-heading); font-weight: 500;
  font-size: var(--fs-item); line-height: 1.24;
  margin: 5px 0 0; transition: color .18s;
}

/* ---------- Tags ---------- */

.tag {
  display: inline-flex; align-items: center;
  font-family: var(--font-heading);
  font-size: 0.8125rem; letter-spacing: .03em;
  padding: 7px 13px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-divider);
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
  background: transparent;
  white-space: nowrap;
  cursor: pointer;
  transition: background .18s, border-color .18s, color .18s;
}
.tag:hover { border-color: var(--color-accent); color: var(--color-accent-700); }
.tag[aria-pressed="true"], .tag-active {
  border-color: var(--color-accent);
  color: var(--color-accent-700);
  background: var(--color-accent-100);
}
.tag-row { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- Stats ---------- */

.stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px 20px;
  border-top: 1px solid var(--color-divider);
  margin-top: 26px;
  padding-top: 20px;
}
.stat-n {
  font-family: var(--font-heading); font-weight: 300;
  font-size: 2rem; line-height: 1;
  font-feature-settings: "tnum";
  color: var(--color-accent);
}
.stat-n-sm {
  font-family: var(--font-heading); font-weight: 400;
  font-size: 1.0625rem; line-height: 1.35;
  color: var(--color-accent);
}
.stat-l { margin-top: 8px; }
.stat-wide { grid-column: 1 / -1; }

@media (min-width: 700px) {
  /* The numerals need little width; the sentence needs a lot. Equal columns
     starved the third one. The rule sits in the gap with matching space on
     both sides, so text never crowds it. */
  .stats {
    grid-template-columns: .75fr .75fr 1.5fr;
    gap: 0 34px;
    padding-top: 0;
  }
  .stats > div {
    padding: 20px 0 0;
    border-right: 0;
  }
  .stats > div + div {
    border-left: 1px solid var(--color-divider);
    padding-left: 34px;
  }
  .stat-wide { grid-column: auto; }
  .stat-n { font-size: 2.375rem; }
}

/* ---------- Dark band ---------- */

.band-dark {
  background: var(--color-dark);
  color: var(--color-neutral-100);
}
.band-dark .h2 { color: var(--color-neutral-100); }
.band-dark .lead { color: color-mix(in srgb, var(--color-neutral-100) 76%, transparent); }

/* ---------- Cited-in strip ---------- */

.cited {
  background: var(--color-surface);
  border-top: 1px solid var(--color-text);
  border-bottom: 1px solid var(--color-divider);
}
.cited-in {
  max-width: var(--maxw); margin: 0 auto;
  padding: 16px var(--gutter);
  display: flex; align-items: center; gap: 16px 34px;
  flex-wrap: wrap;
}
.cited-list {
  display: flex; gap: 14px 30px; flex-wrap: wrap;
  font-family: var(--font-heading);
  font-size: 1rem;
  color: color-mix(in srgb, var(--color-text) 62%, transparent);
}
@media (min-width: 900px) { .cited-list { font-size: 1.1875rem; } }

/* ---------- Generic split grids ---------- */

.split { display: grid; gap: var(--gap); align-items: start; }
@media (min-width: 900px) {
  .split-hero  { grid-template-columns: 1.34fr .66fr; gap: 0; }
  .split-two   { grid-template-columns: 1fr 1fr; }
  .split-lead  { grid-template-columns: 1.3fr .7fr; }
  .split-form  { grid-template-columns: 1.02fr .98fr; }
}

/* Two-column prose with hairline between */
.cols-2 { display: grid; gap: 0 36px; }
@media (min-width: 900px) {
  .cols-2 { grid-template-columns: 1fr 1fr; }
  .cols-2 > div + div {
    border-left: 1px solid var(--color-divider);
    padding-left: 36px;
  }
}

/* ---------- Forms ---------- */

.field { display: block; margin-bottom: 18px; }
.field > label {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--fs-meta);
  letter-spacing: .12em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 62%, transparent);
  margin-bottom: 7px;
}
.input {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1rem;              /* 16px — prevents iOS zoom-on-focus */
  line-height: 1.5;
  padding: 12px 13px;
  color: var(--color-text);
  background: var(--color-bg);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-sm);
  transition: border-color .18s;
}
.input:hover { border-color: color-mix(in srgb, var(--color-text) 30%, transparent); }
.input:focus { border-color: var(--color-accent); outline-offset: 1px; }
textarea.input { min-height: 120px; resize: vertical; }

.field-grid { display: grid; gap: 0 18px; }
@media (min-width: 560px) { .field-grid { grid-template-columns: 1fr 1fr; } }

.card {
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  padding: 26px 22px;
  background: var(--color-neutral-100);
  box-shadow: var(--shadow-sm);
}
@media (min-width: 700px) { .card { padding: 36px; } }

/* ---------- Spec list ---------- */

.spec { border-top: 1px solid var(--color-text); }
.spec div {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
  padding: 16px 0;
  border-bottom: 1px solid var(--color-divider);
}
@media (min-width: 560px) {
  .spec div { grid-template-columns: .5fr 1fr; gap: 20px; padding: 18px 0; align-items: baseline; }
}

/* ---------- Footer ---------- */

.footer {
  background: var(--color-surface);
  border-top: 1px solid var(--color-divider);
}
.footer-in {
  max-width: var(--maxw); margin: 0 auto;
  padding: 40px var(--gutter) 28px;
}
.footer-top {
  display: flex; flex-wrap: wrap; gap: 32px;
  justify-content: space-between;
  padding-bottom: 26px;
  border-bottom: 1px solid var(--color-divider);
}
.footer-brand { display: flex; align-items: flex-start; gap: 14px; }
.footer-brand img { height: 40px; width: auto; }
.footer-cols { display: flex; flex-wrap: wrap; gap: 28px 44px; }
.footer-col { display: flex; flex-direction: column; gap: 9px; }
.footer-col a { font-family: var(--font-heading); font-size: 0.90625rem; color: var(--color-text); }
.footer-col a:hover { color: var(--color-accent-700); }
.footer-bottom {
  display: flex; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; padding-top: 18px;
  font-size: 0.78125rem;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}

/* ---------- Page transition ---------- */

@keyframes wh-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
main { animation: wh-fade .35s ease both; }

/* ============================================================
   Page components
   ============================================================ */

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Hero ---------- */

.hero-copy { padding-block: 40px 8px; }
.hero-figure { padding-block: 8px 40px; }

@media (min-width: 900px) {
  .hero-copy {
    padding: 70px 48px 64px 0;
    border-right: 1px solid var(--color-divider);
  }
  .hero-figure { padding: 70px 0 64px 40px; }
}

.troy {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-sm);
  max-width: 420px;
}
@media (min-width: 900px) { .troy { max-width: none; } }

.troy svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.troy-mark {
  position: absolute; left: 50%; top: 54%;
  transform: translate(-50%, -50%);
  height: 24%; width: auto; opacity: .92;
}

/* ---------- Analysis column on Home ---------- */

.analysis-col { padding-top: 8px; }
@media (min-width: 900px) {
  .analysis-col {
    border-left: 1px solid var(--color-divider);
    padding-left: var(--gap);
    padding-top: 0;
  }
}

/* ---------- Dark-band CTA form ---------- */

.cta-form {
  border: 1px solid color-mix(in srgb, #f8f4f4 22%, transparent);
  padding: 24px 20px;
  border-radius: var(--radius-sm);
  display: flex; flex-direction: column;
}
@media (min-width: 700px) { .cta-form { padding: 28px; } }

.cta-field { display: block; margin-bottom: 14px; }
.cta-input {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 10px 2px;
  color: var(--color-neutral-100);
  background: transparent;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, #f8f4f4 24%, transparent);
  border-radius: 0;
  transition: border-color .18s;
}
.cta-input::placeholder { color: color-mix(in srgb, #f8f4f4 48%, transparent); }
.cta-input:hover { border-bottom-color: color-mix(in srgb, #f8f4f4 42%, transparent); }
.cta-input:focus {
  border-bottom-color: var(--color-accent-400);
  outline: 2px solid var(--color-accent-400);
  outline-offset: 3px;
}

/* Headline-to-lead spacing (prototype: 26px at desktop) */
.hero-title, .page-title { margin-bottom: clamp(18px, 2vw, 26px); }

/* The about split engages early: a full-bleed 4:5 portrait at tablet
   width renders ~960px tall, which swamps the page. */
@media (min-width: 700px) {
  .split-about { grid-template-columns: .6fr 1.4fr; }
}
/* Below that, cap the stacked portrait so it stays a plate, not a poster. */
@media (max-width: 699px) {
  .split-about > figure { max-width: 300px; }
}

/* ---------- Services page blocks ---------- */

.svc {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 10px 14px;
  padding: 32px 0;
  border-top: 1px solid var(--color-divider);
  align-items: start;
}
.svc:first-of-type { border-top: 1px solid var(--color-text); }

.svc-idx {
  font-family: var(--font-heading);
  font-size: 0.875rem;
  font-feature-settings: "tnum";
  color: var(--color-accent);
  padding-top: 8px;
}
.svc-main .btn { margin-top: 20px; }
.svc-main > .h3 { margin-bottom: 14px; }
.svc-del { grid-column: 2; padding-top: 4px; }

.del-list {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
}
.del-list li {
  font-size: 0.90625rem;
  line-height: 1.6;
  padding: 9px 0;
  border-bottom: 1px solid var(--color-divider);
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
}
.del-list li:last-child { border-bottom: 0; }

@media (min-width: 900px) {
  .svc {
    grid-template-columns: 44px 1fr 1.15fr;
    gap: 40px;
    padding: 44px 0;
  }
  .svc-del {
    grid-column: auto;
    border-left: 1px solid var(--color-divider);
    padding-left: 40px;
    padding-top: 0;
  }
}

/* ---------- About page ---------- */

.figure-stat { padding-top: 6px; }
@media (min-width: 900px) {
  .figure-stat {
    border-left: 1px solid var(--color-divider);
    padding-left: var(--gap);
  }
}

/* The founder's letter.
   Desktop keeps the newspaper treatment: the team plate floats right at
   52% and the justified prose wraps around it. Floats cannot reflow, so
   below 900px the figure becomes a plain stacked block above the letter
   and the prose runs full measure. */
.letter-figure { margin: 0 0 26px; }

@media (min-width: 900px) {
  .letter-figure {
    float: right;
    width: 52%;
    margin: 4px 0 24px 40px;
  }
  .letter::after { content: ""; display: block; clear: both; }
}

.letter .body + .body { margin-top: 18px; }

.pullquote {
  margin: 36px 0 0;
  padding: 26px 0 0;
  border-top: 1px solid var(--color-divider);
  clear: both;
}
.pullquote p {
  font-family: var(--font-heading);
  font-weight: 300;
  font-style: italic;
  font-size: var(--fs-display);
  line-height: 1.42;
  margin: 0 0 14px;
  text-wrap: pretty;
}
.pullquote cite { font-style: normal; }

.record {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-top: 34px;
  padding-top: 24px;
  border-top: 1px solid var(--color-divider);
}
@media (min-width: 560px) { .record { grid-template-columns: 1fr 1fr; gap: 28px 32px; } }
@media (min-width: 1100px) { .record { grid-template-columns: repeat(4, 1fr); } }

/* Drop-cap containment.
   The cap floats ~3.4em tall. If its paragraph is shorter than the cap,
   the float escapes and indents the FOLLOWING paragraph. min-height
   forces the box to contain it; the measure cap keeps the opening
   paragraph from collapsing to a single line in the first place. */
.dropcap { min-height: 3.4em; }

@media (max-width: 899px) {
  .letter { max-width: 68ch; }
}

/* ---------- Team bios ---------- */

.bio {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  padding: 34px 0;
  border-top: 1px solid var(--color-divider);
}
.bio:first-of-type { border-top: 1px solid var(--color-text); }

.bio-photo img { max-width: 260px; }

.social {
  list-style: none; margin: 12px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 6px 16px;
}
.social a {
  font-family: var(--font-heading);
  font-size: var(--fs-meta);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-accent-700);
}
.social a:hover { color: var(--color-accent); text-decoration: underline; }

.bio-name {
  font-size: clamp(1.75rem, 1.3rem + 1.9vw, 2.5rem);
  font-weight: 400;
  line-height: 1.1;
  margin: 6px 0 16px;
}

/* Multi-column reflows on its own — no hand-split paragraphs, and the
   rule lands between columns automatically. Collapses to one column
   below the breakpoint. */
.bio-cols { column-count: 1; }
/* Paragraphs must be allowed to split across the column break. Forbidding it
   means the browser can only place whole paragraphs, and unequal paragraph
   heights then leave one column far shorter than the other. Orphan/widow
   control keeps a single stranded line from landing at a column edge. */
.bio-cols .body { margin: 0 0 16px; orphans: 2; widows: 2; }

@media (min-width: 700px) {
  /* Fixed photo column: an fr track sizes to content, so bios with two
     social links rendered narrower than bios with three. Pinning the
     column keeps all four portraits identical. */
  .bio { grid-template-columns: 221px minmax(0, 1fr); gap: 36px; }
  .bio-photo img { max-width: none; }
}

@media (min-width: 1100px) {
  .bio-cols {
    column-count: 2;
    column-gap: 36px;
    column-rule: 1px solid var(--color-divider);
  }
}

/* ---------- Analysis index ---------- */

.filter { padding-top: 6px; }
@media (min-width: 900px) {
  .filter { border-left: 1px solid var(--color-divider); padding-left: var(--gap); }
}

.feature {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  padding-bottom: 36px;
  margin-bottom: 36px;
  border-bottom: 1px solid var(--color-divider);
  align-items: center;
}
.feature-img { display: block; order: -1; }
.feature-title {
  font-size: clamp(1.625rem, 1.2rem + 1.8vw, 2.375rem);
  line-height: 1.14;
  margin: 8px 0 14px;
}
.feature-title a, .acard-title a { color: inherit; transition: color .18s; }
.feature-title a:hover, .acard-title a:hover { color: var(--color-accent-700); }

@media (min-width: 900px) {
  .feature { grid-template-columns: 1fr 1fr; gap: var(--gap); }
  .feature-img { order: 0; }
}

.readmore {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: var(--fs-meta);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-accent-700);
  margin-top: 16px;
}
.readmore:hover { text-decoration: underline; }

.agrid { display: grid; grid-template-columns: 1fr; gap: 32px; }
@media (min-width: 640px)  { .agrid { grid-template-columns: 1fr 1fr; gap: 32px 28px; } }
@media (min-width: 1100px) { .agrid { gap: 44px 40px; } }

.acard-img { display: block; margin-bottom: 14px; }
.acard-title { font-size: var(--fs-title); font-weight: 500; line-height: 1.16; margin: 6px 0 8px; }
.acard-desc {
  font-size: 0.90625rem; line-height: 1.65; margin: 0;
  color: color-mix(in srgb, var(--color-text) 68%, transparent);
}
.acard[hidden] { display: none; }

.filter-empty { margin-top: 28px; color: color-mix(in srgb, var(--color-text) 60%, transparent); }

.archive {
  display: grid; grid-template-columns: 1fr; gap: 18px;
  margin-top: 44px; padding-top: 28px;
  border-top: 1px solid var(--color-text);
}
@media (min-width: 700px) { .archive { grid-template-columns: 1fr auto; gap: 32px; } }

/* ---------- Contact form states ---------- */

.field-legend {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--fs-meta);
  letter-spacing: .12em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 62%, transparent);
  margin-bottom: 9px;
}

.err {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: #8a2b16;
  margin: 6px 0 0;
}
.input[aria-invalid="true"] { border-color: #8a2b16; }

/* Honeypot — off-screen, never display:none (bots skip hidden fields). */
.hp {
  position: absolute; left: -9999px;
  width: 1px; height: 1px; overflow: hidden;
}

.form-status {
  margin: 16px 0 0;
  padding: 12px 14px;
  font-size: 0.90625rem;
  line-height: 1.6;
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-sm);
}
.form-status[data-state="ok"]   { border-color: var(--color-accent); background: var(--color-accent-100); }
.form-status[data-state="fail"] { border-color: #8a2b16; color: #8a2b16; }

form[data-sending] button[type="submit"] { opacity: .6; pointer-events: none; }

/* ---------- Article view ---------- */

.backlink {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: var(--fs-meta);
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--color-accent-700);
  margin-bottom: 26px;
}
.backlink:hover { text-decoration: underline; }

/* Narrow measure for reading. */
.art-head, .art-body, .art-figure, .authorbox { max-width: 68ch; margin-inline: auto; }

.art-title {
  font-size: clamp(2rem, 1.4rem + 2.6vw, 3.25rem);
  line-height: 1.06;
  letter-spacing: -.02em;
  margin: 14px 0 18px;
}
.art-meta {
  margin-top: 22px; padding-top: 16px;
  border-top: 1px solid var(--color-text);
}
.art-figure { margin: 32px auto; }
.art-body > .body + .body { margin-top: 18px; }

.art-quote {
  margin: 28px 0;
  padding: 0 0 0 20px;
  border-left: 2px solid var(--color-accent);
}
.art-quote p {
  font-family: var(--font-heading);
  font-weight: 300; font-style: italic;
  font-size: var(--fs-display);
  line-height: 1.42;
  margin: 0;
}

.art-h2 {
  font-size: var(--fs-h2);
  line-height: 1.1;
  margin: 34px 0 16px;
}

.art-filed { margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--color-divider); }

.authorbox {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-top: 44px;
  padding-top: 30px;
  border-top: 1px solid var(--color-text);
}
.authorbox img { width: 120px; aspect-ratio: 4/5; border-radius: var(--radius-sm); }
.authorbox-name { font-size: 1.625rem; font-weight: 400; margin: 6px 0 12px; }
@media (min-width: 560px) {
  .authorbox { grid-template-columns: 120px 1fr; gap: 28px; }
}

/* Republication note at the foot of an article body. */
.source-note {
  margin: 26px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--color-divider);
  font-size: 0.84375rem;
  font-style: italic;
  line-height: 1.7;
  color: color-mix(in srgb, var(--color-text) 62%, transparent);
}

/* ---------- Archive ---------- */

.arch-year { margin-top: 40px; }
.arch-year:first-of-type { margin-top: 8px; }

.arch-y {
  font-family: var(--font-heading);
  font-weight: 300;
  font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);
  line-height: 1;
  font-feature-settings: "tnum";
  color: var(--color-accent);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-text);
  margin: 0 0 4px;
}

.arch-list { display: block; }

.arch-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
  padding: 16px 6px;
  border-bottom: 1px solid var(--color-divider);
  color: inherit;
  transition: background .18s;
}
.arch-row:hover { background: color-mix(in srgb, var(--color-accent) 7%, transparent); color: inherit; }
.arch-row:hover .arch-title { color: var(--color-accent-700); }
.arch-row[hidden] { display: none; }

.arch-title {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: var(--fs-item);
  line-height: 1.25;
  transition: color .18s;
}
.arch-date { white-space: nowrap; }
.arch-src { color: color-mix(in srgb, var(--color-text) 45%, transparent); }

@media (min-width: 700px) {
  .arch-row {
    grid-template-columns: 88px minmax(0, 1fr) 160px;
    gap: 24px;
    align-items: baseline;
    padding: 18px 6px;
  }
  .arch-src { text-align: right; }
}

/* A year whose every row is filtered out should take its heading with it. */
.arch-year[hidden] { display: none; }

/* Anchor targets must clear the sticky header, or a jump from another page
   lands with the heading hidden underneath it. */
main [id] { scroll-margin-top: calc(var(--header-h) + 18px); }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Two-sentence leads where the second sentence is the offer. Left to wrap
   freely the break lands mid-clause and strands a word; giving each sentence
   its own block keeps the statement and the offer as separate thoughts. */
.lead-split > span { display: block; }
.lead-split > span + span { margin-top: .35em; }