/* ==========================================================================
   dchanson.com — Modernist

   Flat, architectural, set entirely in Archivo, near-mono red on a warm light
   ground. Visible modular grid, strong rules, zero radius, grayscale
   photography, everything flush left. Nothing floats and nothing is decorated:
   alignment and the strength of the dividers do the organizing.

   Two rules that are load-bearing and easy to break:

   1. LAYOUT — backgrounds are full-bleed, content is capped and centered.
      Every band is an outer element carrying the background and the section
      rule at 100% width; inside it sits one .wrap (max-width 1320px) holding
      all content. The max-width never goes on the band itself, or the ink
      closing block and the gray services band become floating boxes. .wrap has
      no left/right borders — the frame is the max-width alone.

   2. LINE WEIGHTS — a strict two-tier system.
      2px var(--rule)        section boundaries only
      1px var(--rule-inner)  inside the services block
      1px var(--rule-row)    ledger row rules and the footnote rule
      A section boundary is never softened to a hairline.
   ========================================================================== */

/* — Archivo, self-hosted. One variable file per unicode-range covers 400–800. — */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 100%;
  font-display: swap;
  src: url("assets/fonts/archivo-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 100%;
  font-display: swap;
  src: url("assets/fonts/archivo-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 100%;
  font-display: swap;
  src: url("assets/fonts/archivo-vietnamese.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

/* ── Tokens ───────────────────────────────────────────────────────────── */
:root {
  --color-bg: #f3f2f2;          /* page ground; hero + track bands; labels on accent; modal panel */
  --color-services-bg: #e7e5e2; /* the services band only */
  --color-text: #201e1d;        /* body text on light; closing + footer ground; modal border */

  --color-neutral-100: #f8f4f4; /* hover tint on ledger rows and service cards */
  --color-neutral-300: #d7d3d3; /* 1px ledger row rules; rule above the footnote */
  --color-neutral-400: #bab6b6; /* 1px services dividers; outlined tag border; paragraph on ink */
  --color-neutral-500: #9b9797; /* footer copyright */
  --color-neutral-700: #605d5d; /* eyebrows, role lines, small uppercase labels, footnote */
  --color-neutral-800: #444141; /* body paragraphs on light; the divider inside the closing block */

  --color-accent-400: #ff9783;  /* footer link hover, on ink only */
  --color-accent-base: #ec3013; /* :focus-visible ring only */
  --color-accent-600: #dd2b0f;  /* 1px edge on the dark-ground CTA only */

  /* One action colour. Do not introduce a second hue. */
  --dh-action: #ae1800;         /* every CTA fill; section marks; solid tags; hovers */
  --dh-action-hover: #7c1405;

  --rule: rgba(32, 30, 29, 0.4); /* 2px — section boundaries */
  --rule-inner: var(--color-neutral-400); /* 1px — inside services */
  --rule-row: var(--color-neutral-300);   /* 1px — ledger rows */

  --font-heading: "Archivo", system-ui, sans-serif;
  --font-body: "Archivo", system-ui, sans-serif;

  --wrap: 1320px;
  --gutter: 40px;
}

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

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0;
}

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

:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent-base); outline-offset: 2px; }
::selection { background: rgba(236, 48, 19, 0.3); }

/* Content cap. Backgrounds are full-bleed on the band; this holds the content.
   No left/right borders here — an earlier revision added them and they were
   explicitly rejected. */
.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
}

.grayscale { filter: grayscale(1) contrast(1.08); }

/* — the recurring section mark: a short accent bar + an uppercase label — */
.mark { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.mark .bar { display: block; width: 28px; height: 2px; background: var(--dh-action); }
.mark .label {
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--color-neutral-700);
}

/* — one button spec governs every CTA; the ground picks the ramp step — */
.btn {
  font-family: var(--font-heading);
  font-weight: 800;
  background: var(--dh-action);
  color: var(--color-bg);
  border: 0;
  border-radius: 0;
  cursor: pointer;
  text-align: left;          /* labels are flush left, never centred */
  text-decoration: none;
  display: inline-block;
  transition: background 120ms;
}
.btn:hover { background: var(--dh-action-hover); color: var(--color-bg); }

.btn-secondary {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 13px;
  line-height: 1.2;
  color: var(--color-text);
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 0;
  padding: 8px 14px;
  cursor: pointer;
  transition: background 120ms;
}
.btn-secondary:hover { background: rgba(32, 30, 29, 0.07); }
.btn-secondary:active { background: rgba(32, 30, 29, 0.14); }

/* ── 1. Header — sticky ───────────────────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 20;
  background: var(--color-bg);
  border-bottom: 2px solid var(--rule);
}
.header-inner {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 24px;
  padding: 20px var(--gutter);
}
.brand { display: flex; align-items: baseline; gap: 12px; }
.brand .mark-sq { display: block; width: 12px; height: 12px; background: var(--dh-action); }
.brand .name {
  font-family: var(--font-heading); font-weight: 800;
  font-size: 18px; letter-spacing: -0.02em;
}
.site-nav { display: flex; align-items: center; gap: 28px; }
.site-nav a {
  font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
  text-decoration: none; color: var(--color-text);
}
.site-nav a:hover { color: var(--dh-action); }
.site-nav .btn { font-size: 14px; letter-spacing: 0.02em; padding: 11px 18px; }

/* ── 2. Hero ──────────────────────────────────────────────────────────── */
.hero-band { border-bottom: 2px solid var(--rule); }
.hero { display: grid; grid-template-columns: 1.35fr 1fr; }

.hero-copy {
  padding: 72px var(--gutter) 56px;
  border-right: 2px solid var(--rule);
  display: flex; flex-direction: column; gap: 28px;
}
.hero-eyebrow { display: flex; align-items: center; gap: 14px; }
.hero-eyebrow .bar { display: block; width: 40px; height: 2px; background: var(--dh-action); }
.hero-eyebrow .label {
  font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--color-neutral-700);
}
.hero h1 {
  font-size: 82px; line-height: 0.94; letter-spacing: -0.035em;
  max-width: 12ch;
}
.hero-lede {
  font-size: 20px; line-height: 1.45; max-width: 46ch;
  color: var(--color-neutral-800); text-wrap: pretty;
}
/* Exactly one action in the hero. An email button was removed here on
   purpose — do not add a second CTA back. */
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.hero-actions .btn { font-size: 16px; padding: 15px 24px; }

.hero-aside { display: flex; flex-direction: column; }
.hero-portrait { flex: 1; min-height: 380px; overflow: hidden; }
.hero-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
.hero-caption {
  border-top: 2px solid var(--rule);
  padding: 18px 28px;
  font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--color-neutral-700);
}

/* ── 3. Services ──────────────────────────────────────────────────────── */
.services-band {
  background: var(--color-services-bg);
  border-bottom: 2px solid var(--rule);
}
.services-head {
  padding: 56px var(--gutter) 32px;
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 40px; flex-wrap: wrap;
}
.services-head h2 { font-size: 44px; letter-spacing: -0.03em; }
.services-head p {
  max-width: 52ch; font-size: 17px;
  color: var(--color-neutral-800); text-wrap: pretty;
}

/* minmax(0, 1fr) is required, not cosmetic. With a plain 1fr the columns floor
   at their content's min-content width, which once pushed the page ~105px wider
   than the viewport and made the four columns unequal. Never pair this with
   white-space: nowrap on the titles. */
.services-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--rule-inner);
}
/* Each cell opens the scheduling modal — the hover tint exists BECAUSE the
   cell is interactive. If they ever stop being clickable, remove the hover. */
.service {
  padding: 32px 28px 40px;
  border-right: 1px solid var(--rule-inner);
  display: flex; flex-direction: column; gap: 14px;
  cursor: pointer;
  transition: background 120ms;
}
.service:last-child { border-right: 0; }
.service:hover { background: var(--color-neutral-100); }
.service .num {
  font-family: var(--font-heading); font-weight: 800;
  font-size: 13px; color: var(--dh-action);
}
/* 20px is deliberate: at 24px "Leadership development" wrapped to two lines.
   20px keeps all four titles on one line while the columns stay equal. */
.service h3 { font-size: 20px; letter-spacing: -0.02em; }
.service p { color: var(--color-neutral-800); }

/* ── 4. Track record — a ledger, not a card grid ──────────────────────── */
.track-band {
  background: var(--color-bg);
  border-bottom: 2px solid var(--rule);
}
.track-head { padding: 56px var(--gutter) 28px; }
.track-head h2 { font-size: 44px; letter-spacing: -0.03em; margin-bottom: 12px; }
.track-head p { max-width: 58ch; font-size: 17px; color: var(--color-neutral-800); }

.ledger { border-top: 2px solid var(--rule); }

/* The 36px left padding against a 4px transparent left border is intentional:
   on hover the border takes the accent and the text does not shift, because
   the border always occupied the space. */
.role {
  display: grid; grid-template-columns: 1fr 1.6fr; gap: 24px;
  padding: 26px var(--gutter) 26px 36px;
  border-bottom: 1px solid var(--rule-row);
  align-items: baseline;
  border-left: 4px solid transparent;
  transition: background 120ms, border-color 120ms;
}
/* The last row drops its rule because the footnote below supplies one. */
.role:last-of-type { border-bottom: 0; }
.role:hover {
  background: var(--color-neutral-100);
  border-left-color: var(--dh-action);
}
.role-org { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.role-name {
  font-family: var(--font-heading); font-weight: 800;
  font-size: 26px; letter-spacing: -0.02em;
}
/* Ayuda is the only linked company in the ledger. The trailing arrow plus the
   hover colour is the entire affordance — no underline. */
a.role-name {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--color-text); text-decoration: none;
}
a.role-name:hover { color: var(--dh-action); }
a.role-name svg { display: block; }

/* Solid flags the seats this audience scans for. Do not tag every row solid. */
.tag {
  font-family: var(--font-heading); font-weight: 800;
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 0;
  background: var(--dh-action); color: var(--color-bg);
}
.tag-outline {
  background: transparent;
  border: 1px solid var(--color-neutral-400);
  color: var(--color-neutral-700);
}
.role-title {
  font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--color-neutral-700); margin-bottom: 6px;
}
.role-desc { color: var(--color-neutral-800); max-width: 62ch; text-wrap: pretty; }

/* A footnote by design, not a row: it buys the brand recognition while
   signalling early career, and keeps the ledger at six rows. */
.ledger-footnote {
  border-top: 1px solid var(--rule-row);
  padding: 18px var(--gutter) 18px 36px;
  font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--color-neutral-700);
}

/* ── 5. Closing block ─────────────────────────────────────────────────── */
/* No bottom rule — the footer continues the same ground. */
.closing-band { background: var(--color-text); color: var(--color-bg); }
.closing { display: grid; grid-template-columns: 1fr 1fr; }
.closing-copy {
  padding: 64px var(--gutter);
  border-right: 2px solid var(--color-neutral-800);
}
.closing-copy .bar {
  display: block; width: 64px; height: 4px;
  background: var(--dh-action); margin-bottom: 26px;
}
.closing-copy h2 {
  font-size: 56px; line-height: 0.96; letter-spacing: -0.035em;
  color: var(--color-bg); margin-bottom: 20px;
}
.closing-copy p {
  font-size: 19px; max-width: 40ch;
  color: var(--color-neutral-400); text-wrap: pretty;
}
/* 94px is arithmetic, not a guess: 64px cell padding + the 4px bar + its 26px
   bottom margin = 94px, which lands the button's top edge on the headline's
   first line. Recompute it if the bar changes. Never centre this vertically. */
.closing-action {
  padding: 94px var(--gutter) 64px;
  display: flex; flex-direction: column;
  align-items: flex-start; justify-content: flex-start;
}
/* The 1px edge exists only so the button reads against the ink ground; the
   fill is the same accent as every other CTA. */
.closing-action .btn {
  font-size: 20px; padding: 20px 28px;
  border: 1px solid var(--color-accent-600);
}

/* ── 6. Footer ────────────────────────────────────────────────────────── */
.site-footer { background: var(--color-text); }
.footer-inner {
  display: flex; flex-wrap: wrap; gap: 20px;
  justify-content: space-between; align-items: center;
  padding: 28px var(--gutter);
}
.copyright { font-size: 13px; color: var(--color-neutral-500); }
.footer-links { display: flex; gap: 24px; flex-wrap: wrap; }
.footer-links a {
  display: flex; align-items: center; gap: 9px;
  font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
  text-decoration: none; color: var(--color-bg);
}
/* Not an oversight: the base and deep accent steps fail contrast on this dark
   ground (3.95:1). accent-400 is the correct step on ink. */
.footer-links a:hover { color: var(--color-accent-400); }
.footer-links svg { display: block; }

/* ── Scheduling modal ─────────────────────────────────────────────────── */
.cal-overlay {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(32, 30, 29, 0.72);
  display: flex; align-items: center; justify-content: center;
  padding: 32px;
}
.cal-overlay[hidden] { display: none; }
.cal-dialog {
  width: 100%; max-width: 1040px; height: min(760px, 88vh);
  background: var(--color-bg);
  border: 2px solid var(--color-text);
  display: flex; flex-direction: column;
}
.cal-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 20px;
  border-bottom: 2px solid var(--rule);
}
.cal-title {
  font-family: var(--font-heading); font-weight: 800;
  font-size: 15px; letter-spacing: 0.02em;
}
.cal-dialog iframe { flex: 1; width: 100%; border: 0; }

body.cal-open { overflow: hidden; }

/* ── Responsive ───────────────────────────────────────────────────────── */
/* The prototype ships one breakpoint at 900px and calls it a floor. The rest
   of this block is the rebuild's decision, per the handoff. */

/* Four equal columns need room; below ~1100px they'd force the service titles
   to wrap, so step down to two before collapsing to one. */
@media (max-width: 1100px) {
  .services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .service:nth-child(2n) { border-right: 0; }
  .service:nth-child(-n+2) { border-bottom: 1px solid var(--rule-inner); }
}

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; }
  .hero-copy { border-right: 0; border-bottom: 2px solid var(--rule); }
  /* 15vw in the prototype was blunt and overshot on tablets. */
  .hero h1 { font-size: clamp(40px, 11vw, 82px); }
  .hero-portrait { min-height: 320px; }

  .closing { grid-template-columns: 1fr; }
  .closing-copy { border-right: 0; padding-bottom: 40px; }
  .closing-copy h2 { font-size: 44px; }
  /* The 94px alignment only means something beside the headline. */
  .closing-action { padding-top: 0; }

  /* Cramped at 1fr 1.6fr on a phone: company + tag above, role + copy below. */
  .role { grid-template-columns: 1fr; gap: 12px; }
}

@media (max-width: 700px) {
  .services-grid { grid-template-columns: 1fr; }
  .service { border-right: 0; border-bottom: 1px solid var(--rule-inner); }
  .service:last-child { border-bottom: 0; }
  .services-head h2, .track-head h2 { font-size: 34px; }
  .hero-lede { font-size: 18px; }
  .closing-copy h2 { font-size: 36px; }
  .closing-action .btn { font-size: 17px; padding: 16px 22px; }
}

@media (max-width: 600px) {
  /* 40px is too much of a narrow screen. */
  :root { --gutter: 24px; }
  .role, .ledger-footnote { padding-left: 20px; }
  /* Two text links plus a button crowd a phone; keep the wordmark and the CTA. */
  .site-nav a { display: none; }
  /* Full-screen the scheduler so the zCal iframe stays usable. */
  .cal-overlay { padding: 0; }
  .cal-dialog { height: 100%; max-width: none; border-width: 0 0 2px 0; }
}

/* The design is static by intent — no scroll-reveal, no parallax, no fade-in.
   The only transitions are the 120ms background/border-color ones above. */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}