/* ---------- Kamari Clarke — Site Design Tokens ---------- */
:root {
  --void:        #0b141e;
  --ink:         #13161d;
  --deep:        #060f19;
  --panel:       #17202b;
  --panel-2:     #131c27;
  --cream:       #faf7f1;
  --cream-panel: #efe7db;
  --accent-red:  #8b2e2e;
  --accent-copper: #c1554a; /* warm red variant, for spots adjacent to accent-red */
  --accent-gold: var(--accent-red); /* migrated from #e9c349 gold to red per request 2026-08 */
  --gold-deep:   #c9a636;
  --text-on-dark:      #f1e9dd;
  --text-on-dark-body: #9aa7b4;
  --text-on-cream:     #13161d;
  --text-on-cream-body:#4a4a46;
  --line:        rgba(139, 46, 46, 0.22);
  --line-soft:   rgba(255, 255, 255, 0.10);
  --line-cream:  rgba(19, 22, 29, 0.12);
  --font-display: 'Fraunces', 'Playfair Display', Georgia, serif;
  --font-serif:   'Libre Baskerville', Georgia, serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

.kc-eyebrow {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--accent-gold); margin: 0 0 18px;
}
.kc-eyebrow--red { color: var(--accent-red); }

.kc-hero { max-width: 1180px; }
.kc-hero h1 {
  font-family: var(--font-display); font-style: italic; font-weight: 600;
  font-size: clamp(30px, 4vw, 56px); line-height: 1.18;
  color: var(--text-on-dark); margin: 0 0 26px; max-width: 15ch;
}
.kc-hero h1 .accent { color: var(--accent-red); font-style: italic; }
.kc-hero p {
  font-family: var(--font-serif); font-size: 15px; line-height: 1.75;
  color: var(--text-on-dark-body); max-width: 52ch; margin: 0;
}

.kc-band { background: var(--accent-red); padding: 46px 0; }
.kc-band .kc-band-inner { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.kc-band blockquote {
  font-family: var(--font-display); font-style: italic;
  font-size: clamp(19px, 2.1vw, 27px); line-height: 1.45;
  color: #fff; margin: 0 0 10px; border: 0; padding: 0;
}
.kc-band cite {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; color: rgba(255,255,255,.82); font-style: normal;
}

.kc-grid { display: grid; gap: 18px; }
.kc-grid--2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.kc-grid--3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.kc-grid--4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
@media (max-width: 980px) { .kc-grid--3, .kc-grid--4 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 640px) { .kc-grid--2, .kc-grid--3, .kc-grid--4 { grid-template-columns: 1fr; } }

.kc-card {
  background: var(--panel); border: 1px solid var(--line-soft);
  padding: 26px 24px; display: block; text-decoration: none;
  transition: border-color .25s ease, transform .25s ease;
}
.kc-card:hover { border-color: var(--accent-gold); transform: translateY(-2px); }
.kc-card--gold { border-color: var(--line); }
.kc-card .kc-card-icon { color: var(--accent-gold); font-size: 20px; line-height: 1; margin-bottom: 16px; display: block; }
.kc-card h3 { font-family: var(--font-display); font-size: 17px; font-weight: 600; color: var(--text-on-dark); margin: 0 0 10px; }
.kc-card--gold h3 { color: var(--accent-copper); }
.kc-card p { font-family: var(--font-serif); font-size: 13px; line-height: 1.7; color: var(--text-on-dark-body); margin: 0; }
.kc-card .kc-card-link {
  display: inline-block; margin-top: 14px; font-family: var(--font-mono);
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent-gold); text-decoration: none;
}
.kc-card--cream { background: #fff; border: 1px solid var(--line-cream); }
.kc-card--cream h3 { color: var(--text-on-cream); }
.kc-card--cream p { color: var(--text-on-cream-body); }
.kc-card--cream .kc-eyebrow { color: var(--accent-red); margin-bottom: 8px; }

.kc-section-head { display: flex; align-items: baseline; gap: 16px; margin: 0 0 30px; }
.kc-section-head .num { font-family: var(--font-display); font-size: 19px; color: var(--accent-gold); flex: none; }
.kc-section-head h2 {
  font-family: var(--font-display); font-size: clamp(20px, 2.4vw, 28px);
  font-weight: 600; letter-spacing: .02em; text-transform: uppercase;
  color: var(--text-on-dark); margin: 0; padding-bottom: 8px;
  border-bottom: 2px solid var(--accent-gold); display: inline-block;
}

.kc-prose { max-width: 68ch; }
.kc-prose p { font-family: var(--font-serif); font-size: 14.5px; line-height: 1.85; color: var(--text-on-dark-body); margin: 0 0 20px; }
.kc-prose p.lead { color: var(--text-on-dark); }
.kc-prose .dropcap::first-letter {
  float: left; font-family: var(--font-display); font-size: 52px;
  line-height: .82; color: var(--accent-gold); padding: 6px 10px 0 0;
}

.kc-pullquote { border: 1px solid var(--line); padding: 26px 30px; margin: 26px 0; text-align: center; }
.kc-pullquote p { font-family: var(--font-display); font-style: italic; font-size: 16px; line-height: 1.6; color: var(--text-on-dark); margin: 0 0 12px; }
.kc-pullquote .meta { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-gold); margin: 0; }

.kc-timeline { position: relative; padding-left: 26px; margin: 0; }
.kc-timeline::before { content: ""; position: absolute; left: 4px; top: 6px; bottom: 6px; width: 1px; background: var(--line-soft); }
.kc-timeline .item { position: relative; margin: 0 0 34px; }
.kc-timeline .item::before { content: ""; position: absolute; left: -26px; top: 6px; width: 9px; height: 9px; background: #3a4552; }
.kc-timeline .item.is-key::before { background: var(--accent-gold); }
.kc-timeline .date { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-gold); margin: 0 0 6px; }
.kc-timeline h3, .kc-timeline h4 { font-family: var(--font-display); font-size: 17px; font-weight: 600; color: var(--text-on-dark); margin: 0 0 8px; }
.kc-timeline p { font-family: var(--font-serif); font-size: 13px; line-height: 1.75; color: var(--text-on-dark-body); margin: 0; max-width: 70ch; }

.kc-btn {
  display: inline-block; font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .14em; text-transform: uppercase; padding: 13px 22px;
  text-decoration: none; border: 1px solid transparent; transition: opacity .2s ease;
}
.kc-btn--dark { background: var(--ink); color: var(--cream); }
.kc-btn--gold { background: var(--accent-gold); color: var(--ink); }
.kc-btn--ghost { border-color: var(--line); color: var(--accent-gold); }
.kc-btn:hover { opacity: .88; }

.kc-bio { display: grid; grid-template-columns: 1fr 1.15fr; gap: 40px; align-items: start; }
@media (max-width: 860px) { .kc-bio { grid-template-columns: 1fr; } }
.kc-bio .kc-bio-img { background: var(--cream-panel); aspect-ratio: 3 / 4; width: 100%; object-fit: contain; display: block; }
.kc-bio h2 { font-family: var(--font-display); font-size: clamp(21px, 2.4vw, 28px); font-weight: 600; color: var(--text-on-cream); margin: 0 0 14px; }
.kc-bio p { font-family: var(--font-serif); font-size: 14px; line-height: 1.8; color: var(--text-on-cream-body); margin: 0; }

.kc-wrap { max-width: 1180px; margin: 0 auto; }

/* ---------- Specificity overrides (Divi sets heading/body colours globally) ---------- */
#page-container .et_pb_text .kc-hero h1,
#page-container .et_pb_text .kc-section-head h2,
#page-container .et_pb_text .kc-timeline h3,
#page-container .et_pb_text .kc-timeline h4,
#page-container .et_pb_text .kc-pullquote p { color: var(--text-on-dark) !important; }
#page-container .et_pb_text .kc-hero h1 .accent { color: var(--accent-red) !important; }
#page-container .et_pb_text .kc-bio h2 { color: var(--text-on-cream) !important; }
#page-container .et_pb_text .kc-bio p  { color: var(--text-on-cream-body) !important; }
#page-container .et_pb_text .kc-prose p { color: var(--text-on-dark-body) !important; }
#page-container .et_pb_text .kc-prose p.lead { color: var(--text-on-dark) !important; }
#page-container .et_pb_text .kc-timeline p { color: var(--text-on-dark-body) !important; }
#page-container .et_pb_text .kc-eyebrow { color: var(--accent-gold) !important; }
#page-container .et_pb_text .kc-eyebrow--red { color: var(--accent-red) !important; }
#page-container .et_pb_text .kc-band blockquote { color: #fff !important; }
#page-container .et_pb_text .kc-band cite { color: rgba(255,255,255,.85) !important; }
#page-container .et_pb_text .kc-pullquote .meta { color: var(--accent-gold) !important; }
#page-container .et_pb_text .kc-timeline .date { color: var(--accent-gold) !important; }
#page-container .et_pb_text .kc-section-head .num { color: var(--accent-gold) !important; }

/* Hero measure — wider than the default 15ch */
.kc-hero h1 { max-width: 24ch; }

/* Card internals built from spans so wpautop cannot split the anchor */
.kc-card .t, .kc-card .d, .kc-card .lbl, .kc-card .ic { display: block; }
#page-container .et_pb_text .kc-card .lbl {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--accent-gold) !important; margin: 0 0 10px;
}
#page-container .et_pb_text .kc-card--cream .lbl { color: var(--accent-red) !important; }
#page-container .et_pb_text .kc-card .t {
  font-family: var(--font-display); font-size: 17px; font-weight: 600;
  color: var(--text-on-dark) !important; margin: 0 0 10px;
}
#page-container .et_pb_text .kc-card--cream .t { color: var(--text-on-cream) !important; }
#page-container .et_pb_text .kc-card--gold .t { color: var(--accent-copper) !important; }
#page-container .et_pb_text .kc-card .d {
  font-family: var(--font-serif); font-size: 13px; line-height: 1.7;
  color: var(--text-on-dark-body) !important; margin: 0;
}
#page-container .et_pb_text .kc-card--cream .d { color: var(--text-on-cream-body) !important; }
.kc-card .ic { color: var(--accent-gold); font-size: 18px; line-height: 1; margin-bottom: 14px; }

/* Divi text module: let our grids span full width */
#page-container .et_pb_text .kc-grid { width: 100%; }
.kc-timeline .d { display:block; font-family: var(--font-serif); font-size:13px; line-height:1.75; max-width:70ch; }
#page-container .et_pb_text .kc-timeline .d { color: var(--text-on-dark-body) !important; }
.kc-timeline .date { display:block; }

/* ---------- High-specificity typography (beats Divi module presets) ---------- */
#page-container .et_pb_text .kc-band blockquote {
  font-family: var(--font-display) !important;
  font-style: italic !important;
  font-size: clamp(19px, 2.1vw, 27px) !important;
  line-height: 1.45 !important;
  color: #fff !important;
  background: none !important;
  border: 0 !important;
  border-left: 0 !important;
  padding: 0 !important;
  margin: 0 0 12px !important;
}
#page-container .et_pb_text .kc-band cite {
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  font-style: normal !important;
  color: rgba(255,255,255,.85) !important;
}
#page-container .et_pb_text .kc-hero h1 {
  font-family: var(--font-display) !important;
  font-style: italic !important;
  font-size: clamp(30px, 3.6vw, 52px) !important;
  line-height: 1.18 !important;
}
#page-container .et_pb_text .kc-section-head h2 {
  font-family: var(--font-display) !important;
  font-size: clamp(20px, 2.4vw, 28px) !important;
  text-transform: uppercase !important;
  border-bottom: 2px solid var(--accent-gold) !important;
  padding-bottom: 8px !important;
  margin: 0 !important;
}
#page-container .et_pb_text .kc-bio h2 {
  font-family: var(--font-display) !important;
  font-size: clamp(21px, 2.4vw, 28px) !important;
  margin: 0 0 14px !important;
}
#page-container .et_pb_text .kc-timeline h3,
#page-container .et_pb_text .kc-timeline h4 {
  font-family: var(--font-display) !important;
  font-size: 17px !important;
  margin: 0 0 8px !important;
}
#page-container .et_pb_text .kc-pullquote p {
  font-family: var(--font-display) !important;
  font-style: italic !important;
  font-size: 16px !important;
  line-height: 1.6 !important;
}
#page-container .et_pb_text .kc-pullquote p.meta {
  font-family: var(--font-mono) !important;
  font-style: normal !important;
  font-size: 10.5px !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
}
#page-container .et_pb_text .kc-bio .kc-bio-img {
  aspect-ratio: 4 / 3; object-fit: contain; width: 100%;
}

/* Centered reading measure for narrative sections (matches mockup indent) */
.kc-section-head, .kc-prose, .kc-timeline { max-width: 800px; margin-left: auto; margin-right: auto; }
.kc-prose { max-width: 800px; }
.kc-timeline { padding-left: 26px; }

/* ---------- Global header ---------- */
#page-container .et_pb_text .kc-brand {
  display: block;
  font-family: var(--font-display) !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  letter-spacing: .01em;
  color: var(--text-on-dark) !important;
  line-height: 1.15;
}
#page-container .et_pb_text .kc-brand-tag {
  display: block;
  margin-top: 5px;
  font-family: var(--font-mono) !important;
  font-size: 9.5px !important;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-on-dark-body) !important;
  line-height: 1.4;
}
/* Nav links */
#page-container .et_pb_menu .et-menu > li > a {
  color: var(--text-on-dark) !important;
  font-family: var(--font-mono) !important;
  font-size: 11.5px !important;
  letter-spacing: .10em;
  text-transform: uppercase;
  padding-bottom: 4px;
  border-bottom: 2px solid transparent;
  transition: color .2s ease, border-color .2s ease;
}
#page-container .et_pb_menu .et-menu > li > a:hover { color: var(--accent-copper) !important; opacity: 1; }
#page-container .et_pb_menu .et-menu > li.current-menu-item > a {
  color: var(--accent-copper) !important;
  border-bottom-color: var(--accent-red);
}
#page-container .et_pb_menu .et-menu > li { padding-left: 13px; padding-right: 13px; }
#page-container .et_pb_menu .et-menu li li a { font-size: 11px !important; }
/* Search field as a compact pill */
#page-container .et_pb_search input.et_pb_s {
  background: var(--panel) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  color: var(--text-on-dark) !important;
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  letter-spacing: .08em;
  padding: 9px 13px !important;
  border-radius: 2px;
}
#page-container .et_pb_search input.et_pb_s::placeholder { color: var(--text-on-dark-body); opacity: 1; }
#page-container .et_pb_search input.et_pb_s:focus { border-color: var(--accent-gold) !important; outline: none; }
@media (max-width: 1100px) {
  #page-container .et_pb_menu .et-menu > li { padding-left: 8px; padding-right: 8px; }
  #page-container .et_pb_menu .et-menu > li > a { font-size: 10.5px !important; }
}
/* Keep the nav on one line */
#page-container .et_pb_menu .et-menu { flex-wrap: nowrap !important; }
#page-container .et_pb_menu .et-menu > li { padding-left: 9px !important; padding-right: 9px !important; white-space: nowrap; }
#page-container .et_pb_menu .et-menu > li > a { font-size: 11px !important; letter-spacing: .07em; }
@media (max-width: 1280px) {
  #page-container .et_pb_menu .et-menu > li { padding-left: 6px !important; padding-right: 6px !important; }
  #page-container .et_pb_menu .et-menu > li > a { font-size: 10px !important; letter-spacing: .05em; }
}

/* ---------- Sitewide typography from the mockup ---------- */
/* Headings default to the warm cream token (beats Divi module presets) */
#page-container .et_pb_text_inner h1,
#page-container .et_pb_text_inner h2,
#page-container .et_pb_text_inner h3,
#page-container .et_pb_text_inner h4,
#page-container .et_pb_text_inner h5,
#page-container .et_pb_text_inner h6,
#page-container .et_pb_heading h1,
#page-container .et_pb_heading h2,
#page-container .et_pb_heading h3 {
  font-family: var(--font-display);
  color: var(--text-on-dark);
}
#page-container .et_pb_text_inner p,
#page-container .et_pb_text_inner li { font-family: var(--font-serif); }

/* ---------- Global footer ---------- */
#page-container .et_pb_text .kc-f-brand {
  display: block;
  font-family: var(--font-display) !important;
  font-size: 24px !important; font-weight: 700 !important;
  color: var(--text-on-dark) !important; margin-bottom: 14px;
}
#page-container .et_pb_text .kc-f-blurb {
  display: block; font-family: var(--font-serif) !important;
  font-size: 13px !important; line-height: 1.75;
  color: var(--text-on-dark-body) !important; max-width: 42ch;
}
#page-container .et_pb_text .kc-f-label {
  display: block; margin: 26px 0 14px;
  font-family: var(--font-mono) !important; font-size: 10.5px !important;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--accent-gold) !important;
}
#page-container .et_pb_text .kc-f-label:first-child { margin-top: 0; }
.kc-f-social { display: flex; gap: 10px; flex-wrap: wrap; }
#page-container .et_pb_text .kc-f-social a {
  font-family: var(--font-mono) !important; font-size: 10.5px !important;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-on-dark) !important; text-decoration: none;
  border: 1px solid var(--line-soft); padding: 9px 14px;
  transition: border-color .2s ease, color .2s ease;
}
#page-container .et_pb_text .kc-f-social a:hover { border-color: var(--accent-gold); color: var(--accent-gold) !important; }
.kc-f-dir { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; }
#page-container .et_pb_text .kc-f-dir a {
  font-family: var(--font-serif) !important; font-size: 13.5px !important;
  color: var(--text-on-dark) !important; text-decoration: none;
  transition: color .2s ease;
}
#page-container .et_pb_text .kc-f-dir a:hover { color: var(--accent-gold) !important; }
#page-container .et_pb_text .kc-f-fine {
  display: block; font-family: var(--font-mono) !important;
  font-size: 10px !important; letter-spacing: .12em;
  color: var(--text-on-dark-body) !important;
}
#page-container .et_pb_text .kc-f-fine--right { text-align: right; text-transform: uppercase; }
@media (max-width: 720px) { #page-container .et_pb_text .kc-f-fine--right { text-align: left; margin-top: 10px; } }

/* Mono labels must win over the sitewide serif body rule */
#page-container .et_pb_text_inner .kc-eyebrow,
#page-container .et_pb_text_inner .kc-timeline .date,
#page-container .et_pb_text_inner .kc-pullquote .meta,
#page-container .et_pb_text_inner .kc-card .lbl,
#page-container .et_pb_text_inner .kc-card .kc-card-link,
#page-container .et_pb_text_inner .kc-btn,
#page-container .et_pb_text_inner .kc-band cite,
#page-container .et_pb_text_inner .kc-brand-tag,
#page-container .et_pb_text_inner .kc-f-label,
#page-container .et_pb_text_inner .kc-f-social a,
#page-container .et_pb_text_inner .kc-f-fine {
  font-family: var(--font-mono) !important;
}
/* Display faces must win too */
#page-container .et_pb_text_inner .kc-brand,
#page-container .et_pb_text_inner .kc-f-brand,
#page-container .et_pb_text_inner .kc-card .t,
#page-container .et_pb_text_inner .kc-section-head .num {
  font-family: var(--font-display) !important;
}

/* Quote band: override Divi's default blockquote treatment */
#page-container .et_pb_text_inner .kc-band-inner blockquote,
#page-container .et_pb_text .kc-band-inner blockquote {
  font-family: var(--font-display) !important;
  font-style: italic !important;
  font-size: clamp(20px, 2.2vw, 30px) !important;
  line-height: 1.4 !important;
  color: #fff !important;
  background: none !important;
  border: 0 !important;
  border-left: none !important;
  padding: 0 !important;
  margin: 0 0 14px !important;
  max-width: 34ch;
}
#page-container .et_pb_text_inner .kc-band-inner cite {
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  font-style: normal !important;
  color: rgba(255,255,255,.85) !important;
}

/* ---------- Loop card cover image (falls back to icon when none) ---------- */
.kc-cover { position: relative; min-height: 0; }
#page-container .et_pb_text_inner .kc-cover-img {
  display: block; width: 100%; height: 150px;
  object-fit: contain; margin: 0 auto;
}
#page-container .et_pb_text_inner .kc-cover-img:not([src]),
#page-container .et_pb_text_inner .kc-cover-img[src=""] { display: none; }
#page-container .et_pb_text_inner .kc-cover-fallback { display: none; font-size: 32px; line-height: 1; }
#page-container .et_pb_text_inner .kc-cover-img:not([src]) + .kc-cover-fallback,
#page-container .et_pb_text_inner .kc-cover-img[src=""] + .kc-cover-fallback {
  display: block; padding: 22px 0;
}

/* ---------- Empty-state ("No Results Found") on cream listing rows ---------- */
#page-container .not-found-title,
#page-container .entry .not-found-title {
  font-family: var(--font-display) !important;
  color: var(--text-on-cream) !important;
  font-size: 20px !important;
  margin: 0 0 8px;
}
#page-container .entry > p,
#page-container .not-found-title + p {
  color: var(--text-on-cream-body) !important;
  font-family: var(--font-serif) !important;
  font-size: 14px !important;
}

/* Hero accent word: keep the mockup's oxblood, lifted enough to read on dark */
#page-container .et_pb_text .kc-hero h1 .accent,
#page-container .et_pb_text_inner .kc-hero h1 .accent {
  color: #c1554a !important;
}

/* ---------- Single entry (project) page ---------- */
.kc-entry { max-width: 900px; }
.kc-entry-kicker { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; margin: 0 0 18px; }
#page-container .et_pb_text_inner .kc-entry-type {
  font-family: var(--font-mono) !important; font-size: 10.5px !important;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent-gold) !important;
  border: 1px solid var(--line); padding: 5px 10px;
}
#page-container .et_pb_text_inner .kc-entry-meta {
  font-family: var(--font-mono) !important; font-size: 11px !important;
  letter-spacing: .10em; color: var(--text-on-dark-body) !important;
}
#page-container .et_pb_text_inner h1.kc-entry-title {
  font-family: var(--font-display) !important;
  font-size: clamp(24px, 3.2vw, 40px) !important;
  line-height: 1.22 !important; font-weight: 600 !important;
  color: var(--text-on-dark) !important; margin: 0 0 14px !important;
}
#page-container .et_pb_text_inner .kc-entry-author {
  font-family: var(--font-mono) !important; font-size: 11px !important;
  letter-spacing: .12em; color: var(--text-on-dark-body) !important; margin: 0;
}
#page-container .et_pb_text_inner .kc-entry-label {
  font-family: var(--font-mono) !important; font-size: 10.5px !important;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--accent-red) !important; margin: 0 0 14px;
  padding-left: 10px; border-left: 3px solid var(--accent-red);
}
#page-container .et_pb_text_inner .kc-entry-abstract,
#page-container .et_pb_text_inner .kc-entry-abstract p {
  font-family: var(--font-serif) !important; font-size: 15px !important;
  line-height: 1.85 !important; color: var(--text-on-cream-body) !important;
  margin: 0 0 16px;
}
.kc-entry-facts { border-top: 1px solid var(--line-cream); margin: 26px 0 6px; }
.kc-entry-facts p {
  display: flex; gap: 18px; align-items: baseline;
  border-bottom: 1px solid var(--line-cream); margin: 0; padding: 12px 0;
}
#page-container .et_pb_text_inner .kc-entry-facts .k {
  flex: 0 0 190px;
  font-family: var(--font-mono) !important; font-size: 10.5px !important;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent-red) !important;
}
#page-container .et_pb_text_inner .kc-entry-facts .v {
  font-family: var(--font-serif) !important; font-size: 14px !important;
  color: var(--text-on-cream) !important;
}
.kc-entry-actions { margin-top: 30px; }
@media (max-width: 620px) {
  .kc-entry-facts p { flex-direction: column; gap: 4px; }
  #page-container .et_pb_text_inner .kc-entry-facts .k { flex: none; }
}

/* ---------- Accessibility (WCAG 2.2 AA) ---------- */
/* 2.4.1 Bypass blocks: visible only on keyboard focus */
.kc-skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100000;
  background: var(--accent-gold); color: var(--ink);
  font-family: var(--font-mono); font-size: 13px;
  padding: 12px 18px; text-decoration: none;
}
.kc-skip-link:focus { left: 8px; top: 8px; outline: 3px solid var(--ink); }
#kc-main:focus { outline: none; }

/* 2.4.7 / 2.4.11 Focus appearance: a clearly visible, non-obscured indicator */
#page-container a:focus-visible,
#page-container button:focus-visible,
#page-container input:focus-visible,
#page-container textarea:focus-visible,
#page-container select:focus-visible,
#page-container [tabindex]:focus-visible {
  outline: 3px solid var(--accent-copper);
  outline-offset: 2px;
  border-radius: 2px;
}
/* On cream surfaces gold-on-cream is weak; use the oxblood instead. */
#page-container .et_pb_section[style*="250, 247, 241"] a:focus-visible,
#page-container .et_pb_section[style*="faf7f1"] a:focus-visible {
  outline-color: var(--accent-red);
}

/* 2.5.8 Target size: give small mono links a comfortable hit area */
#page-container .kc-f-dir a,
#page-container .kc-card-link,
#page-container .kc-entry-back a { display: inline-block; padding: 4px 0; min-height: 24px; }
#page-container .kc-f-social a { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }

/* 1.4.12 Text spacing: never clip text when users override spacing */
#page-container p, #page-container li, #page-container .kc-entry-abstract { overflow-wrap: break-word; }

/* 2.3.3 Respect a reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  #page-container *, #page-container *::before, #page-container *::after {
    animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important; scroll-behavior: auto !important;
  }
  .kc-card:hover { transform: none; }
}

/* Screen-reader-only helper */
.kc-sr-only {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Entry page: back link + note */
#page-container .et_pb_text_inner .kc-entry-back a {
  font-family: var(--font-mono) !important; font-size: 11px !important;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent-red) !important; text-decoration: none;
}
#page-container .et_pb_text_inner .kc-entry-note {
  font-family: var(--font-serif) !important; font-size: 13px !important;
  color: var(--text-on-cream-body) !important; font-style: italic;
}
/* Page title promoted to an h1 must keep the module's own typography */
#page-container .et_pb_text_inner h1.kc-page-title {
  font: inherit !important; color: inherit !important;
  letter-spacing: inherit !important; line-height: inherit !important;
  margin: 0 !important; padding: 0 !important; text-transform: inherit !important;
}

/* ---------- Featured video (In Conversation) ---------- */
#page-container .et_pb_text_inner .kc-video-facade {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background-color: var(--panel);
  background-size: cover;
  background-position: center;
  border: 1px solid #46464b;
  cursor: pointer;
  overflow: hidden;
  padding: 0;
  margin: 0;
}
#page-container .et_pb_text_inner .kc-video-facade::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11,20,30,.25) 0%, rgba(11,20,30,.62) 100%);
  transition: background .3s ease;
}
#page-container .et_pb_text_inner .kc-video-facade:hover::after { background: rgba(11,20,30,.35); }
#page-container .et_pb_text_inner .kc-video-facade .kc-play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 80px; height: 80px;
  border: 1px solid #dae3f2;
  background: rgba(11,20,30,.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: background .25s ease, border-color .25s ease;
}
#page-container .et_pb_text_inner .kc-video-facade:hover .kc-play {
  background: rgba(11,20,30,.85);
  border-color: var(--accent-gold);
}
#page-container .et_pb_text_inner .kc-video-facade .kc-play::before {
  content: "";
  display: block;
  width: 0; height: 0;
  margin-left: 6px;
  border-left: 18px solid #f1e9dd;
  border-top: 11px solid transparent;
  border-bottom: 11px solid transparent;
}
#page-container .et_pb_text_inner .kc-video-facade:hover .kc-play::before { border-left-color: var(--accent-gold); }
#page-container .et_pb_text_inner .kc-video-facade .kc-progress {
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 6px;
  background: #1f2833;
  z-index: 2;
}
#page-container .et_pb_text_inner .kc-video-facade .kc-progress span {
  display: block;
  height: 100%;
  width: 22%;
  background: var(--accent-gold);
}
#page-container .et_pb_text_inner .kc-video-facade:focus-visible {
  outline: 3px solid var(--accent-gold);
  outline-offset: 3px;
}
#page-container .et_pb_text_inner .kc-video-facade.is-playing { cursor: default; aspect-ratio: 16 / 9; }
#page-container .et_pb_text_inner .kc-video-facade.is-playing::after { display: none; }
#page-container .et_pb_text_inner .kc-video-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Video caption strip under the player */
#page-container .et_pb_text_inner .kc-video-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 14px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-on-dark-body);
}
#page-container .et_pb_text_inner .kc-video-strip a {
  color: var(--accent-gold);
  text-decoration: none;
  border-bottom: 1px solid rgba(139,46,46,.4);
}
#page-container .et_pb_text_inner .kc-video-strip a:hover { border-bottom-color: var(--accent-gold); }

/* Numbered metadata rows beside the player */
#page-container .et_pb_text_inner .kc-metarows { margin: 30px 0 0; }
#page-container .et_pb_text_inner .kc-metarows .row {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 14px;
  align-items: baseline;
  padding: 13px 0;
  border-top: 1px solid var(--line-soft);
}
#page-container .et_pb_text_inner .kc-metarows .row:last-child { border-bottom: 1px solid var(--line-soft); }
#page-container .et_pb_text_inner .kc-metarows .n {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .12em;
  color: var(--accent-gold);
}
#page-container .et_pb_text_inner .kc-metarows .k {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-on-dark-body);
  margin: 0 0 4px;
}
#page-container .et_pb_text_inner .kc-metarows .v {
  display: block;
  font-family: var(--font-serif);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-on-dark);
}

/* Featured block title / lede */
#page-container .et_pb_text_inner h2.kc-featured-title {
  font-family: var(--font-display);
  font-size: clamp(26px, 3.1vw, 42px);
  font-weight: 600;
  line-height: 1.16;
  color: var(--text-on-dark);
  margin: 0 0 20px;
}
#page-container .et_pb_text_inner p.kc-featured-lede {
  font-family: var(--font-serif);
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--text-on-dark-body);
  margin: 0 0 22px;
  max-width: 46ch;
}

/* ---------- Divi grid rows: fill the row, keep columns equal ---------- */
#page-container .et_pb_row_inner.et_grid_row {
  width: 100% !important;
  max-width: 100% !important;
  grid-template-columns: repeat(var(--column-count, 3), minmax(0, 1fr)) !important;
}
@media (max-width: 1024px) {
  #page-container .et_pb_row_inner.et_grid_row { --column-count: 2 !important; }
}
@media (max-width: 680px) {
  #page-container .et_pb_row_inner.et_grid_row { --column-count: 1 !important; }
}

/* ---------- Theme Builder body sections ----------
   Divi's generated tb_body background rules are scoped to
   ".et-l--body > .et_builder_inner_content", a wrapper this template does not
   emit, so Divi's default white .et_pb_section background wins. Re-apply the
   intended bands here (edit the section colours in the Theme Builder; these
   two rules just restore them). */
#page-container .et_pb_section[class*="_tb_body"] { background-color: var(--ink); }
#page-container .et_pb_section.et_pb_section_1_tb_body { background-color: var(--cream); }

/* ---------- Citation panel ---------- */
#page-container .et_pb_text_inner .kc-cite {
  border: 1px solid var(--line-cream);
  background: #fff;
  margin: 8px 0 28px;
}
#page-container .et_pb_text_inner .kc-cite-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line-cream);
}
#page-container .et_pb_text_inner .kc-cite-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
#page-container .et_pb_text_inner .kc-cite-tab,
#page-container .et_pb_text_inner .kc-cite-copy {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 8px 14px;
  border: 1px solid var(--line-cream);
  background: transparent;
  color: var(--text-on-cream-body);
  cursor: pointer;
  border-radius: 0;
  line-height: 1.2;
}
#page-container .et_pb_text_inner .kc-cite-tab.is-active {
  border-color: var(--accent-red);
  color: var(--accent-red);
}
#page-container .et_pb_text_inner .kc-cite-copy {
  background: var(--accent-red);
  border-color: var(--accent-red);
  color: #fff;
}
#page-container .et_pb_text_inner .kc-cite-copy:hover { opacity: .9; }
#page-container .et_pb_text_inner .kc-cite-tab:focus-visible,
#page-container .et_pb_text_inner .kc-cite-copy:focus-visible {
  outline: 3px solid var(--accent-red);
  outline-offset: 2px;
}
#page-container .et_pb_text_inner .kc-cite-pane { display: none; padding: 16px 14px; }
#page-container .et_pb_text_inner .kc-cite-pane.is-active { display: block; }
#page-container .et_pb_text_inner .kc-cite-pane p {
  font-family: var(--font-serif);
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--text-on-cream);
  margin: 0;
}
#page-container .et_pb_text_inner .kc-cite-pane pre {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-on-cream);
  margin: 0;
  white-space: pre;
  overflow-x: auto;
}
#page-container .et_pb_text_inner .kc-cite-status {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .08em;
  color: var(--accent-red);
  margin: 8px 0 0;
  padding: 0 14px 12px;
  min-height: 14px;
}

/* ---------- Listing cards (The Work / In Conversation / In the News) ---------- */
#page-container .et_pb_row_inner.et_grid_row {
  column-gap: 22px !important;
  row-gap: 22px !important;
}
/* Cards are equal-height flex columns so their footers line up. */
#page-container .et_grid_row > .et_pb_column_inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  transition: box-shadow .25s ease, transform .25s ease;
}
#page-container .et_grid_row > .et_pb_column_inner:hover {
  box-shadow: 0 6px 22px rgba(19, 22, 29, .10);
  transform: translateY(-2px);
}
/* Last text module (the author / link footer) sits at the bottom of the card. */
#page-container .et_grid_row > .et_pb_column_inner > .et_pb_module:last-child {
  margin-top: auto !important;
  margin-bottom: 0 !important;
}

/* Cover art becomes a banner across the top of the card rather than a
   bordered box floating inside it. The negative margin matches the column's
   20px padding; keep them in step if that padding changes in Divi. */
#page-container .et_grid_row > .et_pb_column_inner > .et_pb_module:has(.kc-cover) { order: -1; }
#page-container .et_pb_text_inner .kc-cover {
  border: 0 !important;
  border-radius: 8px 8px 0 0 !important;
  background: var(--cream-panel) !important;
  padding: 20px 18px !important;
  margin: -20px -20px 18px !important;
}
#page-container .et_pb_text_inner .kc-cover-img {
  height: 180px !important;
  width: auto !important;
  max-width: 100%;
  margin: 0 auto;
  filter: drop-shadow(0 3px 10px rgba(19, 22, 29, .22));
}
/* Entries with no cover (articles, chapters, reports) drop the banner entirely
   instead of leaving an empty framed box. */
#page-container .et_pb_text_inner .kc-cover:has(.kc-cover-img[src=""]) { display: none !important; }
#page-container .et_grid_row > .et_pb_column_inner > .et_pb_module:has(.kc-cover-img[src=""]) {
  display: none !important;
}
/* The hidden filter-metadata module still occupies vertical rhythm; collapse it. */
#page-container .et_grid_row > .et_pb_column_inner > .et_pb_module:has(> .et_pb_text_inner > .kc-meta) {
  display: none !important;
}

/* ---------- Section band helpers ----------
   Divi's default Section preset sets a dark background with !important, and its
   per-section rules are scoped to a wrapper some templates don't emit, so a
   section's own colour can lose. Add "kc-cream" or "kc-dark" in the section's
   CSS Class field to force the band. */
#page-container .et_pb_section.kc-cream { background-color: var(--cream) !important; }
#page-container .et_pb_section.kc-dark  { background-color: var(--void)  !important; }

/* The entry count sits in the dark hero, where oxblood only reaches 2.2:1.
   Use the lifted rust so it clears WCAG AA against #0b141e. */
#page-container .kc-count { color: #d4796b !important; }

/* Extra breathing room between the fact table (ending in "Format") and the
   citation panel that follows it — 6px read as cramped. */
#page-container .et_pb_text_inner .kc-entry-facts + .kc-entry-label {
  margin-top: 30px;
}

/* Homepage hero name enlargement */
#page-container .et_pb_text_inner h1.kc-hero-name {
  font-size: clamp(32px, 6vw, 72px) !important;
  line-height: 1.15 !important;
}

/* Homepage publication cards - clickable stretched-link overlay */
#page-container .kc-pub-card {
  position: relative;
}
/* The overlay <a> lives alone inside its own Divi text module, and that
   module wrapper is itself position:relative (Divi's default) with zero
   height, since it has no visible content. That makes the module wrapper
   the overlay's containing block instead of the card, so "inset:0" was
   collapsing it to a 0-height link. Stretch the module wrapper to fill
   the card first, then the overlay inside it fills correctly. */
#page-container .et_pb_module:has(a.kc-card-link-overlay) {
  position: absolute;
  inset: 0;
  z-index: 2;
}
/* Divi's own .et_pb_text_inner wrapper (immediately inside the module) is
   also position:relative by default, which makes IT the overlay anchor's
   actual containing block rather than the module div above - so it needs
   the same fill treatment, one level further in. */
#page-container .et_pb_text_inner:has(a.kc-card-link-overlay) {
  position: absolute;
  inset: 0;
}
#page-container .kc-card-link-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  text-decoration: none;
}
#page-container .kc-card-link-overlay:focus-visible {
  outline: 3px solid #8b2e2e;
  outline-offset: 2px;
}

/* Secondary entry action (Download PDF) alongside the primary gold button,
   styled for the cream entry-page background rather than reusing
   .kc-btn--ghost's gold-on-cream text, which fails contrast there. */
#page-container .et_pb_text_inner .kc-entry-actions .kc-btn--outline {
  background: transparent;
  border-color: var(--accent-red);
  color: var(--accent-red);
}
#page-container .et_pb_text_inner .kc-entry-actions .kc-btn--outline:hover {
  background: var(--accent-red);
  color: var(--cream);
  opacity: 1;
}

/* Past Conferences, Workshops & Symposia list — used on its standalone page
   and appended to the In Conversation page. Divi 5's Text-module color
   inheritance from the sitewide default preset (light, meant for dark
   backgrounds) overrides plain inline color styles pasted into module HTML,
   so these are real classes in the theme stylesheet instead. */
.kc-conf-title {
  color: #0b141e !important;
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  line-height: 1.15;
}
.kc-conf-intro {
  color: #3a4048 !important;
}
.kc-conf-intro a {
  color: #a3323a !important;
}
.kc-conf-entry-title {
  color: #0b141e !important;
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  line-height: 1.4;
}
.kc-conf-entry-sub {
  color: #7f8b99 !important;
  margin-top: 6px;
}

/* Contact form CAPTCHA: the sitewide Text-module color preset (rgb(235,242,250))
   washed out the "N + N =" question text to near-invisible against the cream
   contact card, making the answer input look like a stray empty box. Give it
   real contrast and a visible input border so it reads as a legitimate field. */
.et_pb_contact_captcha_question {
  color: #0b141e !important;
  font-weight: 600;
}
.et_pb_contact_form .et_pb_contact_captcha {
  border: 1px solid #c9c0ae !important;
  background-color: #ffffff !important;
}

/* Content-type filter bar on individual "idea" pages (issue: these pages
   had no way to filter entries by content type). Pills are built by a
   small inline script that reads the hidden .kc-meta markers already used
   by the sitewide filter pattern (see The Work page), so the pill list
   always matches whatever entries are actually on the page - no manual
   upkeep needed when Kamari adds or removes entries via Divi. */
#page-container .kc-idea-pill {
  display: inline-block;
  text-decoration: none !important;
  padding: 5px 14px;
  border: 1px solid #ddd5c8;
  border-radius: 999px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  color: #4a4a46 !important;
  background: #ffffff;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
#page-container .kc-idea-pill:hover {
  border-color: #8b2e2e;
  color: #8b2e2e !important;
}
#page-container .kc-idea-pill.is-active {
  color: #ffffff !important;
  background: #8b2e2e;
  border-color: #8b2e2e;
}
/* Safety net for the classList.toggle('kc-hidden', ...) used by both this
   filter and The Work page's filter - belt-and-suspenders in case the
   sitewide rule that currently makes this work isn't actually global. */
.kc-hidden { display: none !important; }

/* Projects hub + category subpages (Institutional Projects, Research and
   Collaborative Projects). Follows the same dark-hero / cream-card pattern
   already used on the Contact page and Past Conferences page, and the same
   "real CSS class with !important" fix for the sitewide Text-module color
   preset that overrides inline styles (see kc-conf-* rules above). */
#page-container .kc-proj-eyebrow {
  display: inline-block;
  border: 1px solid var(--accent-red) !important;
  color: var(--accent-red) !important;
  padding: 7px 14px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
#page-container .kc-proj-hero-title {
  color: #faf7f1 !important;
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  line-height: 1.1;
}
#page-container .kc-proj-hero-intro {
  color: #c9d0d9 !important;
  font-family: 'Libre Baskerville', serif;
  line-height: 1.7;
}
#page-container .kc-proj-category-card {
  display: block;
  background: #faf7f1;
  border: 1px solid #ddd5c8;
  border-radius: 4px;
  padding: 36px 34px;
  text-decoration: none !important;
  transition: border-color .15s ease, transform .15s ease;
}
#page-container .kc-proj-category-card:hover {
  border-color: #8b2e2e;
  transform: translateY(-2px);
}
#page-container .kc-proj-category-count {
  color: #8b2e2e !important;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
#page-container .kc-proj-category-title {
  color: #0b141e !important;
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  margin: 10px 0 12px;
}
#page-container .kc-proj-category-desc {
  color: #4a4a46 !important;
  font-family: 'Libre Baskerville', serif;
  line-height: 1.7;
}
#page-container .kc-proj-category-cta {
  color: #8b2e2e !important;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  display: inline-block;
  margin-top: 18px;
}
#page-container .kc-proj-crossnav {
  color: #7f8b99 !important;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
}
#page-container .kc-proj-crossnav a { color: var(--accent-copper) !important; text-decoration: none; }
#page-container .kc-proj-crossnav a:hover { text-decoration: underline; }
#page-container .kc-proj-entry {
  border-bottom: 1px solid #e5ded2;
  padding: 26px 0;
}
#page-container .kc-proj-entry:last-child { border-bottom: none; }
#page-container .kc-proj-entry-title {
  color: #0b141e !important;
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: 21px;
  margin: 0 0 10px;
}
#page-container .kc-proj-entry-desc {
  color: #4a4a46 !important;
  font-family: 'Libre Baskerville', serif;
  font-size: 16px;
  line-height: 1.75;
  margin: 0 0 12px;
  max-width: 760px;
}
#page-container .kc-proj-entry-link {
  color: #8b2e2e !important;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  text-decoration: none !important;
}
#page-container .kc-proj-entry-link:hover { text-decoration: underline !important; }

@media (max-width: 767px) {
  #page-container .kc-proj-hero-title { font-size: 34px !important; }
  #page-container .kc-proj-category-card { padding: 26px 22px; }
  #page-container .kc-proj-entry { padding: 20px 0; }
  #page-container .kc-proj-entry-title { font-size: 18px !important; }
}

/* Project detail pages (Research & Collaborative Projects sub-pages) */
#page-container .kc-proj-detail-meta { color:#7f8b99 !important; font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:.5px; line-height:1.9; margin:0 0 30px; }
#page-container .kc-proj-detail-meta strong { color:var(--accent-copper) !important; font-weight:700; }
#page-container .kc-proj-detail-section-title { color:#8b2e2e !important; font-family:'IBM Plex Mono',monospace; font-size:13px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; margin:44px 0 16px; }
#page-container .kc-proj-detail-section-title:first-child { margin-top:0; }
#page-container .kc-proj-detail-para { color:#2b2b28 !important; font-family:'Libre Baskerville',serif; font-size:17px; line-height:1.85; margin:0 0 22px; max-width:820px; }
#page-container .kc-proj-detail-link-row { margin-top:36px; padding-top:26px; border-top:1px solid #e5ded2; }
@media (max-width: 767px) {
  #page-container .kc-proj-detail-para { font-size:16px; }
}

#page-container .kc-proj-detail-figure { margin: 18px 0 34px; }
#page-container .kc-proj-detail-figure img { width:100%; max-height: 520px; object-fit: cover; display:block; border-radius:3px; }


/* ==========================================================================
   Sitewide mobile/tablet fix: Divi 5 flex-based rows (divi/row blocks) do
   not stack their columns by default on this install at narrow widths,
   which causes horizontal overflow and squeezed multi-column content on
   phones and tablets. Force wrap + full-width columns below 980px so every
   row built with the block editor degrades to a single readable column.
   ========================================================================== */
@media (max-width: 980px) {
  #page-container .et_flex_row {
    flex-wrap: wrap !important;
  }
  #page-container .et_flex_row > .et_pb_column,
  #page-container .et_flex_row > .et_pb_column_inner {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* Personal Biography's prose section sits on the cream background rather
   than the usual dark hero, so its section headings and body copy need the
   cream-context colors instead of the sitewide .kc-prose dark defaults. */
#page-container .et_pb_text .kc-prose--cream p { color: var(--text-on-cream-body) !important; }
#page-container .et_pb_text .kc-prose--cream p.lead { color: var(--text-on-cream) !important; }
#page-container .et_pb_text .kc-prose--cream .kc-section-head h2 { color: var(--text-on-cream) !important; }



/* ---------- Accessibility: legible red/copper accents on dark backgrounds ----------
   The brand accent (--accent-red / --accent-gold / --accent-copper) is a deep maroon.
   It contrasts fine as a background with light text, and as text on the site's cream
   panels (~7-8:1), but drops to ~2.2-4.1:1 when used as TEXT directly on the dark navy
   sections that make up most of the site — under WCAG 2.2 AA's 4.5:1 minimum for text.
   This adds one brighter coral token and repoints it only on confirmed dark-background
   text instances (nav, eyebrows, entry meta, card links, footer labels, timeline dates,
   etc). Cream-panel and red-background(+light-text) usages are untouched since they
   already pass and this must not disturb them. */
:root { --accent-a11y: #e0847c; /* ~6.7-7.2:1 against --ink/--void/--panel/--deep */ }

.kc-eyebrow,
.kc-eyebrow--red,
.kc-hero h1 .accent,
.kc-card .kc-card-icon,
.kc-card--gold h3,
.kc-card .kc-card-link,
.kc-section-head .num,
.kc-prose .dropcap::first-letter,
.kc-pullquote .meta,
.kc-timeline .date,
.kc-btn--ghost,
#page-container .et_pb_text .kc-hero h1 .accent,
#page-container .et_pb_text .kc-eyebrow,
#page-container .et_pb_text .kc-eyebrow--red,
#page-container .et_pb_text .kc-pullquote .meta,
#page-container .et_pb_text .kc-timeline .date,
#page-container .et_pb_text .kc-section-head .num,
#page-container .et_pb_text .kc-card .lbl,
#page-container .et_pb_text .kc-card--gold .t,
.kc-card .ic,
#page-container .et_pb_menu .et-menu > li > a:hover,
#page-container .et_pb_menu .et-menu > li.current-menu-item > a,
#page-container .et_pb_text .kc-f-label,
#page-container .et_pb_text .kc-f-social a:hover,
#page-container .et_pb_text .kc-f-dir a:hover,
#page-container .et_pb_text_inner .kc-entry-type,
#page-container .et_pb_text_inner .kc-entry-label,
#page-container .et_pb_text_inner .kc-entry-facts .k,
#page-container .et_pb_text_inner .kc-entry-back a,
#page-container .et_pb_text_inner .kc-video-strip a,
#page-container .et_pb_text_inner .kc-metarows .n,
#page-container .et_pb_text_inner .kc-cite-tab.is-active,
#page-container .et_pb_text_inner .kc-cite-status,
#page-container .kc-proj-crossnav a,
#page-container .kc-proj-detail-meta strong {
  color: var(--accent-a11y) !important;
}

/* Buttons/skip-link pairing dark ink text directly on the red/copper background reach
   only ~2.2:1. Flip the label to the site's own existing "light text on red" pattern
   (already used by .kc-band and the entry-page outline button's hover state) instead
   of lightening the brand red itself, which would break contrast elsewhere. */
.kc-skip-link,
#page-container .kc-btn--gold {
  color: var(--cream) !important;
}

/* Homepage + The Work: per-module Divi text-color settings using the same deep
   red/copper as text directly on dark backgrounds. The sitewide JS auto-fix (Theme
   Options > Integration > body code) catches every page generically; these are added
   too so the highest-traffic pages render correctly even without JS. */
body.page-id-12 #page-container .et_pb_text_0 .et_pb_text_inner,
body.page-id-12 #page-container .et_pb_text_4 .et_pb_text_inner,
body.page-id-12 #page-container .et_pb_text_8 .et_pb_text_inner,
body.page-id-12 #page-container .et_pb_text_12 .et_pb_text_inner,
body.page-id-12 #page-container .et_pb_text_16 .et_pb_text_inner,
body.page-id-12 #page-container .et_pb_text_9 .et_pb_text_inner,
body.page-id-12 #page-container .et_pb_text_13 .et_pb_text_inner,
body.page-id-12 #page-container .et_pb_text_17 .et_pb_text_inner,
body.page-id-12 #page-container .et_pb_text_19 .et_pb_text_inner,
body.page-id-12 #page-container .et_pb_text_35 .et_pb_text_inner {
  color: var(--accent-a11y) !important;
}
body.page-id-12 #page-container .et_pb_text_21 a {
  color: var(--accent-a11y) !important;
  border-bottom-color: var(--accent-a11y) !important;
}
body.page-id-12 #page-container .et_pb_text_3 a[href="/thework/"] {
  color: var(--cream) !important;
}


/* ---------- Homepage hero — layered composition redesign (structural reference: user-supplied "Monumental Chrome" design) ---------- */
@media (min-width: 992px) {
  body.page-id-12 #page-container .et_pb_section_0 .et_pb_row_0 {
    position: relative;
    flex-wrap: nowrap;
    align-items: center;
  }

  body.page-id-12 #page-container .et_pb_section_0 .et_pb_column_1 {
    order: 1;
    position: relative;
    flex: 0 0 60% !important;
    max-width: 60% !important;
    z-index: 1;
  }
  body.page-id-12 #page-container .et_pb_section_0 .et_pb_column_1 .et_pb_image_wrap {
    position: relative;
    display: block;
    padding: 12px;
    background: var(--panel);
    border: 1px solid var(--line-soft);
  }
  body.page-id-12 #page-container .et_pb_section_0 .et_pb_column_1 .et_pb_image_wrap img {
    display: block;
    width: 100%;
  }
  body.page-id-12 #page-container .et_pb_section_0 .et_pb_column_1 .et_pb_image_wrap::after {
    content: "";
    position: absolute;
    top: 24px; left: 24px; right: 24px; bottom: 24px;
    border: 1px solid rgba(241,233,221,0.25);
    pointer-events: none;
  }
  body.page-id-12 #page-container .et_pb_section_0 .et_pb_column_1::before {
    content: "";
    position: absolute;
    top: -16px; left: -16px;
    width: 112px; height: 112px;
    border-top: 1px solid rgba(224,132,124,0.5);
    border-left: 1px solid rgba(224,132,124,0.5);
    pointer-events: none;
    z-index: 0;
  }

  body.page-id-12 #page-container .et_pb_section_0 .et_pb_column_0 {
    order: 2;
    position: relative;
    flex: 0 0 46% !important;
    max-width: 46% !important;
    margin-left: -14% !important;
    z-index: 2;
    background: var(--panel);
    border: 1px solid var(--line-soft);
    box-shadow: 0 32px 64px -24px rgba(0,0,0,0.6);
    padding: 48px !important;
  }

  body.page-id-12 #page-container .et_pb_section_0 .et_pb_text_0 .et_pb_text_inner p {
    display: flex;
    align-items: center;
    gap: 12px;
  }
  body.page-id-12 #page-container .et_pb_section_0 .et_pb_text_0 .et_pb_text_inner p::before {
    content: "";
    display: block;
    width: 32px;
    height: 1px;
    background: var(--accent-a11y);
    flex: 0 0 auto;
  }

  body.page-id-12 #page-container .et_pb_section_0 .kc-hero-name .accent {
    font-style: italic;
    color: var(--accent-a11y);
  }

  body.page-id-12 #page-container .et_pb_section_0 .et_pb_text_2 .et_pb_text_inner p {
    border-left: none !important;
    padding-left: 0 !important;
    position: relative;
    padding-top: 28px !important;
    margin-top: 28px !important;
    margin-left: 0 !important;
  }
  body.page-id-12 #page-container .et_pb_section_0 .et_pb_text_2 .et_pb_text_inner p::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 56px; height: 1px;
    background: var(--accent-red);
  }
}

.kc-btn--gold {
  background-image: linear-gradient(180deg, #a8443a 0%, #8b2e2e 55%, #9c3c33 100%);
  box-shadow: 0 0 0 1px rgba(250,247,241,0.18);
}


/* --- Homepage hero: portrait-first order on mobile ---
   On phone widths the hero row's two columns stack in source order (text,
   then portrait), pushing the portrait far down the page. The reference
   design puts the portrait first, directly under the header, with the text
   following. This only reorders the existing columns for the stacked
   layout — no content, colors, fonts, or the image itself change. */
@media only screen and (max-width: 767px) {
  .kc-hero-row .et_pb_column_1 {
    order: -1;
    margin-bottom: 24px;
  }
  .kc-hero-row .et_pb_column_0 {
    order: 2;
  }
}


/* --- Homepage hero: larger, full-bleed portrait (desktop) ---
   The reference design gives the portrait roughly 55% of the row instead of
   an even split, and the photo fills its frame edge-to-edge instead of
   sitting inset with visible padding. This only changes proportions/sizing
   for this one row on desktop widths — text, font, colors, and the image
   file itself are unchanged. object-fit: cover keeps the crop centered
   instead of stretching when the box gets taller/wider. */
@media (min-width: 992px) {
  .kc-hero-row .et_pb_column_1 { flex: 0 0 54% !important; max-width: 54% !important; }
  .kc-hero-row .et_pb_column_0 { flex: 0 0 40.5% !important; max-width: 40.5% !important; }
  .kc-hero-row .et_pb_image_wrap { width: 100% !important; padding: 0 !important; }
  .kc-hero-row .et_pb_image_wrap img { width: 100% !important; height: 100% !important; object-fit: cover !important; }
}