/* Direct Line runs on the home page's own tokens. It used to load site.css and
   sit on the older shell, which is why it read as a different website. */
:root {
  --story-ink: #10100f;
  --story-ink-raised: #171614;
  --story-paper: #f2eee7;
  --story-muted: #bbb5ad;
  --story-quiet: #8d8780;
  --story-line: rgba(242, 238, 231, 0.2);
  --story-accent: #c89468;
  --story-accent-soft: #ddbc97;
  --story-fill: #e7d8bd;
  --story-fill-ink: #1e1913;
  --story-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --sans: "Archivo", "Segoe UI", sans-serif;
  --serif: "Source Serif 4", Georgia, serif;
}

@font-face {
  font-family: "Archivo";
  src: url("/assets/fonts/archivo-latin-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "Source Serif 4";
  src: url("/assets/fonts/source-serif-4-latin.woff2") format("woff2");
  font-weight: 200 900;
  font-display: swap;
}

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

/* Flat ink read as an unfinished page. Miami from the air at night sits behind
   everything now. The plate is already almost black, so the scrim is light and
   the street grid actually reads instead of being crushed back into ink. */
body.direct-page {
  margin: 0;
  min-height: 100dvh;
  background-color: var(--story-ink);
  background-image:
    linear-gradient(180deg, rgba(16, 15, 14, 0.72) 0%, rgba(16, 15, 14, 0.55) 45%, rgba(16, 15, 14, 0.88) 100%),
    url("/assets/media/home/miami-aerial-night.webp");
  background-repeat: no-repeat, no-repeat;
  background-position: center, center;
  background-size: cover, cover;
  color: var(--story-paper);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

.direct-page a { color: inherit; text-decoration: none; }

.skip-link {
  position: absolute;
  left: -9999px;
  padding: 10px 14px;
  background: var(--story-accent);
  color: #1e1913;
}
.skip-link:focus { left: 12px; top: 12px; z-index: 20; }

.direct-page :focus-visible { outline: 2px solid var(--story-accent-soft); outline-offset: 3px; }

/* Header */
.direct-nav {
  display: flex;
  min-height: 64px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: env(safe-area-inset-top) 18px 0;
  border-bottom: 1px solid var(--story-line);
}

.direct-brand { min-width: 0; }
.direct-brand .brand__name { display: block; font-family: var(--serif); font-size: 18px; font-weight: 500; letter-spacing: -0.02em; white-space: nowrap; }
.direct-brand .brand__role { display: block; margin-top: 1px; color: var(--story-quiet); font-size: 9px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; }

@media (max-width: 430px) {
  .direct-brand .brand__name { font-size: 16px; }
  .direct-brand .brand__role { display: none; }
  .direct-nav { padding-inline: 14px; }
  .direct-nav__links a { padding: 0 10px; font-size: 9px; }
}

.direct-nav__links { display: flex; gap: 8px; }

.direct-nav__links a {
  display: grid;
  min-height: 40px;
  padding: 0 13px;
  place-items: center;
  border: 1px solid var(--story-line);
  color: var(--story-paper);
  font-size: 10px;
  font-weight: 740;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: border-color 180ms ease, background-color 180ms ease;
}

.direct-nav__links .is-accent { border-color: var(--story-accent); color: var(--story-accent); }

/* Hero */
.direct-hero { position: relative; }

.direct-portrait { margin: 0; }

.direct-portrait img {
  display: block;
  width: 100%;
  height: clamp(360px, 62vh, 620px);
  object-fit: cover;
  object-position: center 22%;
}

.direct-portrait::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, var(--story-ink) 4%, rgba(16, 15, 14, 0.15) 52%, transparent 78%);
  content: "";
  pointer-events: none;
}

.direct-hero__copy {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 0 18px 22px;
}

.direct-eyebrow {
  margin: 0 0 8px;
  color: var(--story-accent-soft);
  font-size: 9px;
  font-weight: 760;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* One line. It used to break after the first name. */
.direct-hero__copy h1 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(38px, 11vw, 68px);
  font-weight: 480;
  letter-spacing: -0.045em;
  line-height: 1;
  text-wrap: nowrap;
}

.direct-number {
  display: inline-block;
  margin-top: 12px;
  color: var(--story-paper);
  font-size: 17px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  border-bottom: 1px solid var(--story-accent);
  padding-bottom: 2px;
}

/* Call, text, email. Nothing else written on them. */
.direct-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: 0 18px;
  border: 1px solid var(--story-line);
  background: var(--story-line);
}

.direct-action {
  display: grid;
  min-height: 66px;
  place-items: center;
  background: var(--story-ink-raised);
  color: var(--story-paper);
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.01em;
  transition: background-color 180ms ease, color 180ms ease;
}

.direct-action.is-primary { background: var(--story-fill); color: var(--story-fill-ink); }

/* Coverage */
.direct-facts { padding: 26px 18px 8px; }

.direct-coverage {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(21px, 5.6vw, 27px);
  font-weight: 460;
  letter-spacing: -0.025em;
  line-height: 1.12;
}

.direct-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin: 14px 0 0;
  color: var(--story-quiet);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.direct-meta a { color: var(--story-accent-soft); border-bottom: 1px solid rgba(221, 188, 151, 0.4); }

.direct-affiliation {
  max-width: 52ch;
  margin: 10px 0 0;
  color: var(--story-muted);
  font-size: 11px;
  font-weight: 560;
  letter-spacing: 0.025em;
  line-height: 1.45;
}

/* Intake */
.direct-intake {
  display: flex;
  min-height: 78px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 26px 18px calc(28px + env(safe-area-inset-bottom));
  padding: 0 18px;
  border: 1px solid var(--story-line);
  background: var(--story-ink-raised);
  transition: border-color 180ms ease;
}

.direct-intake b { display: block; font-family: var(--serif); font-size: 21px; font-weight: 480; letter-spacing: -0.025em; }
.direct-intake i { color: var(--story-accent); font-size: 20px; font-style: normal; }

@media (min-width: 821px) {
  .direct-nav { padding-inline: 40px; min-height: 76px; }
  /* The portrait is the tall thing. Empty rows either side of the four contact
     blocks let them keep their own height and sit centred against it, instead
     of stretching a one-line intake card to 235px. The name needs its own auto
     row - parked in a 1fr spacer it pulled the whole stack 65px high. */
  main#direct-main {
    display: grid;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 40px 48px;
    gap: 0 48px;
    grid-template-columns: minmax(0, 1fr) minmax(340px, 42%);
    grid-template-rows: 1fr auto auto auto auto 1fr;
    min-height: calc(100dvh - 77px);
    align-content: center;
  }
  /* The name reads as the anchor of the contact column, so it sits at the head
     of that column instead of stranded over the bottom of the photo. Making the
     hero boxless lets the figure and the copy take their own grid cells without
     moving either out of the hero in the markup, so the phone keeps its overlay. */
  .direct-hero { display: contents; }
  /* Centred, not stretched. Stretched, the figure ran the full row and the
     photo started hard against the header with dead space under it. */
  .direct-portrait { position: relative; grid-column: 1; grid-row: 1 / -1; align-self: center; }
  /* That scrim existed to keep the overlaid name readable. The name has moved,
     so here it only painted a flat black band across the skyline behind it. */
  .direct-portrait::after { content: none; }
  /* The studio backdrop is a lighter charcoal than the aerial, so a square crop
     reads as a panel sitting on the city. Feathering each axis dissolves it.
     A radial vignette was tried first and lost - its radii run past the box, so
     the fade lands off-screen and the crop goes hard again. Where mask-composite
     is unsupported these union and the photo just stays square, which is the old
     look rather than a broken one. */
  .direct-portrait img {
    height: min(78dvh, 760px);
    -webkit-mask-image:
      linear-gradient(90deg, transparent 0, #000 7%, #000 88%, transparent 100%),
      linear-gradient(180deg, transparent 0, #000 6%, #000 90%, transparent 100%);
    mask-image:
      linear-gradient(90deg, transparent 0, #000 7%, #000 88%, transparent 100%),
      linear-gradient(180deg, transparent 0, #000 6%, #000 90%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
  }
  .direct-hero__copy {
    position: static;
    grid-column: 2;
    grid-row: 2;
    align-self: end;
    padding: 0 0 26px;
  }
  /* 68px is 538px wide and the column is 462px. This still out-weighs
     everything under it without running past the contact row. */
  .direct-hero__copy h1 { font-size: clamp(34px, 3.6vw, 52px); }
  .direct-actions { grid-column: 2; grid-row: 3; align-self: start; margin: 0; }
  .direct-facts { grid-column: 2; grid-row: 4; align-self: start; padding: 26px 0 0; }
  .direct-intake { grid-column: 2; grid-row: 5; align-self: start; margin: 26px 0 0; }
}

@media (hover: hover) and (pointer: fine) {
  .direct-nav__links a:hover { border-color: var(--story-accent-soft); background: #24211d; }
  .direct-action:hover { background: var(--story-accent-soft); color: #1e1913; }
  .direct-intake:hover { border-color: var(--story-accent-soft); }
}

@media (prefers-reduced-motion: reduce) {
  .direct-page * { transition-duration: 0.01ms !important; }
}