/* =========================================================
   BARSSFORHAITI.COM -- Firm Site v0.1
   Based on BARSS Visual System v0.2 (Du Bois palette)

   Register note: same tokens as konkret-haiti.com, applied
   at firm scale rather than campaign scale. Anton is capped,
   sodium-orange is demoted to labels only, and the signature
   component is the LEDGER (dotted leader + right-aligned
   crimson figure) rather than the orange stat band.
   ========================================================= */

/* --- TOKENS (BARSS Visual System v0.2) --- */
:root {
  --black:          #000;
  --near-black:     #080808;
  --deep:           #0a0a0a;
  --raised:         #101010;
  --parchment:      #E3D5B8;
  --parchment-lt:   #EFE4CB;
  --bone:           #F4EFE2;
  --du-bois-red:    #DC143C;
  --prussian:       #003153;
  --prussian-dark:  #001f35;
  --bottle-green:   #006A4E;
  --sodium-orange:  #FF6A1F;
  --voice-green:    #1AAB4D;

  /* derived */
  --rule:           rgba(244,239,226,.13);
  --rule-strong:    rgba(244,239,226,.30);
  --body-dim:       rgba(227,213,184,.78);
  --mute:           rgba(244,239,226,.45);

  --f-display: 'Anton', Impact, 'Haettenschweiler', sans-serif;
  --f-body:    'Lora', Georgia, serif;
  --f-data:    'Courier Prime', Consolas, monospace;
  --f-stat:    'Roboto Slab', Georgia, serif;

  --measure: 62ch;
}

/* --- RESET --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body {
  font-family: var(--f-body);
  background: var(--black);
  color: var(--bone);
  font-size: 16px;
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
ul { list-style: none; }

:focus-visible { outline: 2px solid var(--du-bois-red); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* --- TYPE SCALE --- */
.t-label {
  font-family: var(--f-data);
  font-size: 10px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--sodium-orange);
}
.t-label-dim { color: var(--mute); }

.t-h1 {
  font-family: var(--f-display);
  font-size: clamp(32px, 4.5vw, 53px);
  text-transform: uppercase;
  line-height: 1.04;
  letter-spacing: .005em;
  color: var(--bone);
  text-wrap: balance;
}
.t-h2 {
  font-family: var(--f-display);
  font-size: clamp(24px, 3.2vw, 38px);
  text-transform: uppercase;
  line-height: 1.06;
  color: var(--bone);
  text-wrap: balance;
}
.t-h3 {
  font-family: var(--f-display);
  font-size: clamp(17px, 1.9vw, 21px);
  text-transform: uppercase;
  letter-spacing: .02em;
  line-height: 1.15;
  color: var(--bone);
}
.t-stat {
  font-family: var(--f-stat);
  font-weight: 800;
  font-size: clamp(30px, 4.2vw, 46px);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--bone);
}
.t-lede {
  font-size: clamp(17px, 1.9vw, 20px);
  line-height: 1.62;
  color: var(--parchment);
  max-width: var(--measure);
}
.t-body  { font-size: 16.5px; color: var(--body-dim); line-height: 1.72; }
.t-small {
  font-family: var(--f-data);
  font-size: 11.5px;
  line-height: 1.7;
  letter-spacing: .03em;
  color: var(--mute);
}
.red   { color: var(--du-bois-red); }
.green { color: var(--voice-green); }
.orange{ color: var(--sodium-orange); }
.bone  { color: var(--bone); }

.measure { max-width: var(--measure); }

/* --- LAYOUT --- */
.container { max-width: 1220px; margin: 0 auto; padding: 0 clamp(18px, 4vw, 40px); }
.section { padding: clamp(46px, 7vw, 84px) 0; border-bottom: 1px solid var(--rule); }
.section:last-of-type { border-bottom: 0; }
.bg-black { background: var(--black); }
.bg-near  { background: var(--near-black); }
.bg-deep  { background: var(--deep); }
.bg-prussian { background: var(--prussian-dark); }

.stack   { display: flex; flex-direction: column; gap: clamp(22px, 3vw, 34px); }
.stack-s { display: flex; flex-direction: column; gap: 14px; }
.stack-xs{ display: flex; flex-direction: column; gap: 8px; }
.prose   { display: flex; flex-direction: column; gap: 16px; max-width: var(--measure); }
.prose p { font-size: 16.5px; color: var(--body-dim); line-height: 1.72; }
.prose strong { color: var(--bone); font-weight: 600; }

.head {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--rule);
}

.split {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
  gap: clamp(26px, 4.5vw, 64px);
  align-items: start;
}
.split-even { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }

/* --- MASTHEAD --- */
.masthead {
  position: sticky; top: 0; z-index: 40;
  background: var(--black);
  border-bottom: 1px solid var(--rule);
}
.masthead-in {
  max-width: 1220px; margin: 0 auto;
  padding: 14px clamp(18px, 4vw, 40px);
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 10px 28px;
}
.mark { display: flex; align-items: baseline; gap: 10px; text-decoration: none; }
.mark-name {
  font-family: var(--f-display);
  font-size: 25px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--bone);
}
.mark-sub {
  font-family: var(--f-data);
  font-size: 10px; letter-spacing: 3.4px;
  text-transform: uppercase; color: var(--du-bois-red);
}
.nav-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 20px; }
.nav { display: flex; flex-wrap: wrap; gap: 2px; }
.nav a {
  font-family: var(--f-data);
  font-size: 11px; letter-spacing: 2.4px; text-transform: uppercase;
  text-decoration: none; color: var(--mute);
  padding: 7px 11px 5px;
  border-bottom: 2px solid transparent;
  transition: color .16s ease, border-color .16s ease;
}
.nav a:hover { color: var(--bone); }
.nav a[aria-current="page"] { color: var(--bone); border-bottom-color: var(--du-bois-red); }

/* --- LANGUAGE SWITCHER --- */
.lang { display: flex; align-items: center; gap: 2px; }
.lang a {
  font-family: var(--f-data);
  font-size: 10px; letter-spacing: 1.6px;
  text-decoration: none;
  color: var(--mute);
  padding: 4px 7px 3px;
  border: 1px solid var(--rule);
  transition: color .16s ease, background .16s ease, border-color .16s ease;
}
.lang a:hover { color: var(--bone); border-color: var(--rule-strong); }
.lang a[aria-current="true"] {
  color: var(--black);
  background: var(--bone);
  border-color: var(--bone);
}

/* --- LEDGER (signature component) --- */
.ledger { border-top: 2px solid var(--bone); padding-top: 8px; }
.ledger-cap {
  display: flex; justify-content: space-between; gap: 16px;
  font-family: var(--f-data);
  font-size: 10px; letter-spacing: 2.6px; text-transform: uppercase;
  color: var(--mute);
  padding-bottom: 9px;
  border-bottom: 1px solid var(--rule);
}
.row {
  display: flex; align-items: baseline; gap: 10px;
  padding: 11px 0;
  border-bottom: 1px solid var(--rule);
}
.row-label { font-size: 14.5px; color: var(--bone); line-height: 1.35; }
.row-note {
  display: block;
  font-family: var(--f-data);
  font-size: 10px; letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--mute); margin-top: 3px;
}
.leader {
  flex: 1; min-width: 14px;
  border-bottom: 1px dotted var(--rule-strong);
  transform: translateY(-5px);
}
.row-fig {
  font-family: var(--f-data);
  font-variant-numeric: tabular-nums;
  font-size: 14px; white-space: nowrap;
  color: var(--du-bois-red);
}
.row-fig.neutral { color: var(--bone); }
.row-fig.good { color: var(--voice-green); }
.row-total {
  border-bottom: 0;
  border-top: 2px solid var(--bone);
  margin-top: 2px; padding-top: 13px;
}
.row-total .row-label { font-weight: 600; }
.row-total .row-fig { font-size: 16px; }

/* --- PORTRAIT --- */
/* Desaturated by default so a full-colour photo does not fight the Du Bois
   palette; returns to colour on hover. Crimson rule underneath ties it to
   .ledger and the favicon. */
.portrait { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.portrait img {
  /* Explicit box rather than aspect-ratio: the intrinsic 400x400 plus the
     width/height attributes won out over aspect-ratio and rendered 213x398. */
  width: 208px;
  height: 208px;
  max-width: 100%;
  object-fit: cover;
  object-position: 50% 32%;
  border-bottom: 4px solid var(--du-bois-red);
  filter: grayscale(1) contrast(1.06);
  transition: filter .35s ease;
}
.portrait:hover img { filter: grayscale(0) contrast(1); }
@media (prefers-reduced-motion: reduce) { .portrait img { transition: none; } }
.portrait-name {
  font-family: var(--f-display);
  font-size: 19px;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--bone);
  line-height: 1.1;
}
.portrait-role {
  font-family: var(--f-data);
  font-size: 10px;
  letter-spacing: 2.6px;
  text-transform: uppercase;
  color: var(--mute);
  margin-top: 4px;
}

/* --- STAT BAND --- */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: 1px; background: var(--rule);
  border: 1px solid var(--rule);
}
.stat-cell {
  background: var(--near-black);
  padding: 20px clamp(14px, 2vw, 22px);
  display: flex; flex-direction: column; gap: 6px;
}
.stat-cell .t-label { color: var(--mute); letter-spacing: 2.6px; }

/* --- CARDS --- */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(272px, 1fr));
  gap: 1px; background: var(--rule);
  border: 1px solid var(--rule);
}
/* Five cards: 3 across, then 2 half-width. auto-fit on an odd count leaves an
   orphan cell that reads as a hole in the 1px-gap grid. */
.cards-5 { grid-template-columns: repeat(6, 1fr); }
.cards-5 > .card { grid-column: span 2; }
.cards-5 > .card:nth-child(4),
.cards-5 > .card:nth-child(5) { grid-column: span 3; }
@media (max-width: 940px) {
  .cards-5 { grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); }
  .cards-5 > .card,
  .cards-5 > .card:nth-child(4),
  .cards-5 > .card:nth-child(5) { grid-column: auto; }
}
.card {
  background: var(--near-black);
  padding: clamp(20px, 2.6vw, 30px);
  display: flex; flex-direction: column; gap: 11px;
}
.card .t-body { font-size: 15.5px; }
.card-link {
  font-family: var(--f-data);
  font-size: 10.5px; letter-spacing: 2.2px; text-transform: uppercase;
  color: var(--du-bois-red); text-decoration: none;
  margin-top: auto; padding-top: 6px;
  border-bottom: 1px solid transparent; align-self: flex-start;
}
.card-link:hover { border-bottom-color: var(--du-bois-red); }

/* --- SERVICE / CASE BLOCKS --- */
.block {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(24px, 4vw, 58px);
  padding: clamp(28px, 4vw, 44px) 0;
  border-bottom: 1px solid var(--rule);
  align-items: start;
}
.block:first-of-type { border-top: 1px solid var(--rule); }
@media (max-width: 860px) { .block { grid-template-columns: 1fr; } }

.spec { display: flex; flex-direction: column; }
.spec-row {
  display: grid; grid-template-columns: 7.6rem minmax(0, 1fr);
  gap: 16px; padding: 10px 0;
  border-bottom: 1px solid var(--rule);
  align-items: start;
}
.spec-row:first-child { border-top: 1px solid var(--rule); }
.spec-key {
  font-family: var(--f-data);
  font-size: 10px; letter-spacing: 2.2px; text-transform: uppercase;
  color: var(--mute); padding-top: 5px;
}
.spec-val { font-size: 15px; color: var(--body-dim); line-height: 1.6; }
.spec-val strong { color: var(--bone); font-weight: 600; }

/* --- NUMBERED LIST --- */
.numbered { display: flex; flex-direction: column; }
.numbered li {
  display: grid; grid-template-columns: 30px minmax(0, 1fr);
  gap: 12px; padding: 13px 0;
  border-bottom: 1px solid var(--rule);
  font-size: 15.5px; color: var(--body-dim); line-height: 1.62;
}
.numbered li::before {
  content: attr(data-n);
  font-family: var(--f-data);
  font-size: 11px; letter-spacing: 1px;
  color: var(--du-bois-red);
  font-variant-numeric: tabular-nums;
  padding-top: 4px;
}
.numbered li strong { color: var(--bone); font-weight: 600; }

.plainlist { display: grid; grid-template-columns: repeat(auto-fit, minmax(226px, 1fr)); gap: 0 40px; }
.plainlist li {
  padding: 11px 0; border-bottom: 1px solid var(--rule);
  font-size: 15.5px; color: var(--body-dim);
}

/* --- TAGS / STATUS --- */
.tags { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.tag {
  font-family: var(--f-data);
  font-size: 10px; letter-spacing: 2.2px; text-transform: uppercase;
  color: var(--sodium-orange);
}
.status {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--f-data);
  font-size: 10px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--body-dim);
  border: 1px solid var(--rule-strong);
  padding: 5px 10px;
}
.status::before { content: ""; width: 6px; height: 6px; background: var(--voice-green); }
.status.live::before { background: var(--du-bois-red); }

/* --- BUTTONS --- */
.cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; }
.btn {
  display: inline-block;
  font-family: var(--f-data);
  font-size: 11px; letter-spacing: 2.6px; text-transform: uppercase;
  text-decoration: none;
  padding: 14px 26px;
  background: var(--du-bois-red);
  color: var(--bone);
  border: 1px solid var(--du-bois-red);
  transition: background .16s ease, color .16s ease;
}
.btn:hover { background: transparent; color: var(--du-bois-red); }
.btn-ghost { background: transparent; color: var(--bone); border-color: var(--rule-strong); }
.btn-ghost:hover { background: var(--bone); color: var(--black); border-color: var(--bone); }

/* --- PULL QUOTE --- */
.pull {
  font-family: var(--f-body);
  font-size: clamp(19px, 2.4vw, 26px);
  line-height: 1.4; color: var(--bone);
  max-width: 30ch;
  border-left: 3px solid var(--du-bois-red);
  padding-left: 20px;
}

/* --- MAIL --- */
.mail {
  font-family: var(--f-data);
  font-size: clamp(15px, 2vw, 19px);
  color: var(--du-bois-red);
  text-decoration: none;
  border-bottom: 1px solid var(--rule-strong);
  padding-bottom: 3px; word-break: break-word;
  align-self: flex-start;
}
.mail:hover { border-bottom-color: var(--du-bois-red); }

/* --- FOOTER --- */
.foot {
  border-top: 1px solid var(--rule);
  background: var(--near-black);
  padding: 30px 0 40px;
}
.foot-in {
  display: flex; flex-wrap: wrap; justify-content: space-between;
  gap: 14px 34px;
  font-family: var(--f-data);
  font-size: 10.5px; letter-spacing: 2.2px; text-transform: uppercase;
  color: var(--mute);
}
.foot-in a { color: var(--mute); text-decoration: none; }
.foot-in a:hover { color: var(--bone); }

.scroller { overflow-x: auto; }