/* ============================================================
   Method — Land & Development Intel article template
   Shared by everything under /stories/. Extends css/styles.css
   (brand tokens, Kudryashev + Montserrat faces) — load that first.
   ============================================================ */

body { background: var(--white); }

.story-brand {
  display: flex; align-items: center; justify-content: space-between;
  max-width: 820px; margin: 0 auto; padding: 1.4rem var(--gutter);
  border-bottom: 1px solid var(--light-grey);
}
.story-brand a {
  font-family: var(--sans); font-size: .68rem; letter-spacing: .14em;
  text-transform: uppercase; font-weight: 600; color: var(--black); text-decoration: none;
}
.story-brand a:hover { text-decoration: underline; }

.story-head { max-width: 820px; margin: 0 auto; padding: clamp(2rem,5vw,3.5rem) var(--gutter) 0; }
.eyebrow-row { display: flex; gap: .6rem; align-items: center; margin-bottom: 1rem; flex-wrap: wrap; }
.eyebrow {
  font-family: var(--sans); font-size: .68rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--black);
}
.eyebrow.date { color: var(--slate); font-weight: 600; }
/* Article headlines run long (they carry the search phrase), so they need a
   much tighter scale than the site's marketing h1 — that one tops out near
   90px and pushed the whole story below the fold. */
.story-head h1 {
  font-size: clamp(1.75rem, 3.6vw, 2.9rem);
  line-height: 1.08;
  max-width: 26ch;
  margin: 0 0 .9rem;
}
.byline { font-family: var(--sans); font-size: .85rem; color: var(--slate); margin-bottom: 1.75rem; }
.byline b { color: var(--black); font-weight: 600; }

.story-body { max-width: 820px; margin: 0 auto; padding: 0 var(--gutter) 5rem; font-family: var(--sans); }
.story-body p { font-size: 1.05rem; line-height: 1.7; color: #1a1a1a; margin: 0 0 1.4rem; max-width: 68ch; }
.story-body h2 {
  font-family: var(--display); font-weight: 400; font-size: clamp(1.5rem,3vw,2rem);
  margin: 3rem 0 1.1rem; letter-spacing: -0.01em;
}
.story-body strong { color: var(--black); }

/* --- Figures --- */
figure { margin: 2rem 0 2.5rem; }
figure img { width: 100%; height: auto; display: block; border: 1px solid var(--light-grey); }
figcaption {
  font-family: var(--sans); font-size: .78rem; color: var(--slate);
  margin-top: .6rem; line-height: 1.5; max-width: 68ch;
}

/* --- Quick answer --- */
.quick-answer {
  background: var(--black); color: var(--white);
  padding: 1.8rem clamp(1.4rem,4vw,2.4rem); margin: 1.5rem 0 2.5rem;
}
.quick-answer .eyebrow { color: var(--white); opacity: .7; margin-bottom: .7rem; display: block; }
.quick-answer p { color: var(--white); font-size: 1.15rem; line-height: 1.55; margin: 0; max-width: none; }
.quick-answer strong { color: var(--white); }

/* --- Fact list --- */
.fact-list { list-style: none; padding: 0; margin: 0 0 2.5rem; border-top: 1px solid var(--light-grey); }
.fact-list li {
  display: grid; grid-template-columns: 11rem 1fr; gap: 1.5rem;
  padding: .9rem 0; border-bottom: 1px solid var(--light-grey); font-size: .96rem;
}
.fact-list .k {
  font-family: var(--sans); font-weight: 700; text-transform: uppercase;
  font-size: .68rem; letter-spacing: .1em; color: var(--slate); padding-top: .2rem;
}
.fact-list .v { color: #1a1a1a; }
@media (max-width: 560px) { .fact-list li { grid-template-columns: 1fr; gap: .3rem; } }

/* --- Timeline --- */
.timeline { list-style: none; padding: 0; margin: 0 0 2.5rem; border-left: 2px solid var(--light-grey); }
.timeline li { display: grid; grid-template-columns: 7rem 1fr; gap: 1.2rem; padding: .7rem 0 .7rem 1.4rem; font-size: .95rem; position: relative; }
.timeline li::before {
  content: ""; position: absolute; left: -6px; top: 1.15rem;
  width: 10px; height: 10px; border-radius: 50%; background: var(--light-grey);
}
.timeline li.is-final::before { background: var(--black); }
.timeline .t { font-family: var(--sans); font-weight: 700; font-size: .8rem; letter-spacing: .04em; color: var(--slate); padding-top: .15rem; }
.timeline .d { color: #1a1a1a; }
.timeline .d b { color: var(--black); }
@media (max-width: 560px) { .timeline li { grid-template-columns: 1fr; gap: .2rem; } }

/* --- Stat row --- */
.stat-row {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 1px;
  background: var(--light-grey); margin: 0 0 2.5rem; border: 1px solid var(--light-grey);
}
.stat { background: var(--white); padding: 1.6rem 1.2rem; text-align: center; }
.stat .num { font-family: var(--display); font-size: clamp(1.8rem,4vw,2.6rem); display: block; line-height: 1; }
.stat .lbl {
  font-family: var(--sans); font-size: .64rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--slate); margin-top: .5rem; display: block;
}
@media (max-width: 560px) { .stat-row { grid-template-columns: 1fr; } }

/* --- Callouts --- */
.know-yet { background: #f7f7f7; padding: 1.6rem clamp(1.4rem,4vw,2rem); margin: 0 0 2.5rem; }
.know-yet ul { margin: .8rem 0 0; padding-left: 1.2rem; }
.know-yet li { margin-bottom: .4rem; font-size: .95rem; }

.engineer-note {
  border-left: 3px solid var(--black); padding: .3rem 0 .3rem 1.4rem; margin: 0 0 2.5rem;
}
.engineer-note .eyebrow { display: block; margin-bottom: .6rem; }
.engineer-note p { margin-bottom: .8rem; }
.engineer-note p:last-child { margin-bottom: 0; }

/* --- FAQ --- */
.faq-item { border-top: 1px solid var(--light-grey); padding: 1.4rem 0; }
.faq-item:last-of-type { border-bottom: 1px solid var(--light-grey); }
.faq-item h3 { font-family: var(--sans); font-weight: 700; font-size: 1rem; margin: 0 0 .5rem; }
.faq-item p { margin: 0; font-size: .95rem; }

.source-note {
  font-size: .82rem; color: var(--slate); border-top: 1px solid var(--light-grey);
  padding-top: 1.5rem; margin-top: 3rem; max-width: 68ch; line-height: 1.65;
}
.source-note a { color: var(--slate); }

.story-cta {
  background: var(--black); color: var(--white);
  padding: 2.2rem clamp(1.4rem,4vw,2.4rem); margin: 3rem 0; text-align: center;
}
.story-cta .eyebrow { color: var(--white); opacity: .7; display: block; }
.story-cta p { color: var(--white); font-size: 1.05rem; margin: .8rem auto 0; max-width: 52ch; }
.story-cta b { color: var(--white); }

.sign-off { font-family: var(--sans); font-size: .85rem; color: var(--slate); margin-top: 2.5rem; }
.sign-off b { color: var(--black); }

/* --- Data article: tables, callouts, date lists (Mechanism pieces) --- */
.callout {
  background: #f7f7f7; border-left: 3px solid var(--black);
  padding: 1rem 1.2rem; margin: 0 0 1.4rem; max-width: 68ch;
}

/* Tables scroll inside their own container so the page never scrolls sideways */
.table-wrap { overflow-x: auto; margin: 0 0 1.4rem; max-width: 68ch; }
.data-table {
  border-collapse: collapse; width: 100%; font-size: .95rem;
  font-variant-numeric: tabular-nums;   /* keeps dollar columns aligned */
}
.data-table th {
  text-align: left; font-family: var(--sans); font-size: .68rem;
  letter-spacing: .08em; text-transform: uppercase; color: var(--slate);
  font-weight: 700; padding: 0 .9rem .55rem 0; border-bottom: 1px solid var(--black);
  white-space: nowrap;
}
.data-table td {
  padding: .6rem .9rem .6rem 0; border-bottom: 1px solid var(--light-grey);
  color: #1a1a1a; white-space: nowrap;
}
.data-table tr:last-child td { border-bottom: none; }
.data-table td:first-child { font-weight: 600; color: var(--black); }

.date-list { list-style: none; padding: 0; margin: 0 0 1.4rem; max-width: 68ch; }
.date-list li {
  padding: .7rem 0 .7rem 1rem; border-left: 2px solid var(--light-grey);
  margin-bottom: .5rem; font-size: .97rem; color: #1a1a1a; line-height: 1.55;
}
.date-list li:last-child { border-left-color: var(--black); }

/* On narrow screens the two header links butt together and read as one string
   ("← LOCAL NEWS METHOD REAL ESTATE ADVISORS"). Keep the back-link and shrink
   the brand line so they stay visually distinct. */
@media (max-width: 560px) {
  .story-brand { gap: 1rem; }
  .story-brand a { font-size: .6rem; letter-spacing: .1em; }
  .story-brand a:last-child { text-align: right; color: var(--slate); }
}

/* Lead image sits directly under the title — slightly more presence than the
   inline figures further down the article. */
figure.lead { margin: 0 0 2rem; }
figure.lead img { border: none; }

/* Opt-in for tables whose cells hold prose rather than figures. The base
   .data-table sets white-space:nowrap, which is right for a column of dollar
   amounts and wrong for a sentence — it forced the Kennesaw project table
   604px wide and pushed the Status column out of view. */
.data-table.wrap-cells td { white-space: normal; }
.data-table.wrap-cells td:first-child { min-width: 9.5rem; }

/* ---- One column, one width (desktop) ----
   Media and prose now share the SAME edges. Previously the container carried a
   horizontal gutter, so text sat inset at 692px while figures were pulled out to
   the full 820px — two different left edges on every screen. On desktop the
   gutter is dropped and the 68ch prose caps are lifted so everything squares to
   820px. The gutter stays below 900px, where it keeps text off the phone bezel.

   Tradeoff, deliberate: 820px of Montserrat runs ~85-90 characters per line,
   longer than the ~68 that reads most comfortably. Matching widths was the ask;
   if lines feel long, the fix is a larger body size, not a narrower column. */
@media (min-width: 900px) {
  .story-brand { padding-left: 0; padding-right: 0; }
  .story-head  { padding-left: 0; padding-right: 0; }
  .story-body  { padding-left: 0; padding-right: 0; }

  .story-body p,
  figcaption,
  .callout,
  .table-wrap,
  .date-list,
  .source-note { max-width: none; }
}

/* ---- Circle timeline ----
   Replaces a rendered PNG timeline. A 1200px-wide raster displays at ~31% on a
   375px phone, so its type can never be readable there no matter how it is set.
   As markup it scales: big date circles, detail text underneath, and on narrow
   screens the row becomes a vertical list with the circle beside its text. */
.circle-tl { background: var(--black); color: var(--white); padding: clamp(1.6rem,4vw,2.6rem); margin: 2rem 0 2.5rem; }
.circle-tl .kicker { font-family: var(--sans); font-weight: 700; font-size: .72rem; letter-spacing: .18em; }
.circle-tl .kicker::after { content: ""; display: block; width: 90px; height: 2px; background: var(--white); margin-top: .55rem; }
.circle-tl h3 { font-family: var(--display); font-weight: 400; font-size: clamp(1.6rem,4.4vw,2.4rem); line-height: 1.05; margin: 1.1rem 0 1.8rem; color: var(--white); }
.circle-tl .track { display: grid; grid-template-columns: repeat(5,1fr); gap: clamp(.6rem,1.6vw,1.4rem); }
.circle-tl .step { text-align: center; min-width: 0; }
.circle-tl .dot {
  width: 100%; max-width: 132px; aspect-ratio: 1; margin: 0 auto .9rem;
  border: 2px solid rgba(255,255,255,.55); border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.circle-tl .step.is-final .dot { border-color: var(--white); background: var(--white); color: var(--black); }
.circle-tl .m { font-family: var(--sans); font-weight: 700; font-size: clamp(.62rem,1.5vw,.82rem); letter-spacing: .1em; opacity: .8; }
.circle-tl .y { font-family: var(--display); font-size: clamp(1.15rem,3.2vw,1.9rem); line-height: 1; margin-top: .12rem; }
.circle-tl .step.is-final .m { opacity: .65; }
.circle-tl .txt { font-family: var(--sans); font-size: clamp(.78rem,1.5vw,.9rem); line-height: 1.45; color: #cfcfcf; }
.circle-tl .txt b { color: var(--white); font-weight: 600; display: block; margin-bottom: .15rem; }
.circle-tl .note { font-family: var(--sans); font-size: .78rem; color: #8a8a8a; margin: 1.8rem 0 0; padding-top: 1rem; border-top: 1px solid #2a2a2a; }

@media (max-width: 720px) {
  .circle-tl .track { grid-template-columns: 1fr; gap: 1.1rem; }
  .circle-tl .step { display: grid; grid-template-columns: 78px 1fr; gap: 1rem; align-items: center; text-align: left; }
  .circle-tl .dot { width: 78px; margin: 0; }
  .circle-tl .y { font-size: 1.25rem; }
  .circle-tl .m { font-size: .7rem; letter-spacing: .08em; }
  .circle-tl .txt { font-size: .92rem; }
}

/* ---- Two-up photo pair ----
   For portrait phone photos. A single 3:4 shot at full column width is ~1090px
   tall and eats the whole screen; side by side they read as documentation and
   land at a sane aspect. Stacks on narrow screens. */
.photo-pair { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.photo-pair img { width: 100%; height: 100%; object-fit: cover; display: block; border: 1px solid var(--light-grey); }
@media (max-width: 560px) { .photo-pair { grid-template-columns: 1fr; } }

/* ---- Distance chart ----
   Built as markup, not a rendered PNG: a raster at this width is unreadable on
   a phone (the lesson from the timeline card). Bars are positioned by a --d
   custom property = distance as a percentage of the 1.75-mile axis, so the
   geometry IS the argument — survivors bunch at the left, closures trail right. */
.dist-chart { background: var(--black); color: var(--white); padding: clamp(1.6rem,4vw,2.6rem); margin: 2rem 0 2.5rem; }
.dist-chart .kicker { font-family: var(--sans); font-weight: 700; font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; }
.dist-chart .kicker::after { content: ""; display: block; width: 90px; height: 2px; background: var(--white); margin-top: .55rem; }
.dist-chart h3 { font-family: var(--display); font-weight: 400; font-size: clamp(1.5rem,4vw,2.2rem); line-height: 1.05; margin: 1.1rem 0 1.6rem; color: var(--white); }
.dist-list { list-style: none; padding: 0; margin: 0; }
.dist-list li { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: .2rem .9rem; padding: .55rem 0; border-bottom: 1px solid #1e1e1e; }
.dist-list .bar { grid-column: 1 / -1; order: 3; position: relative; height: 10px; background: #1e1e1e; border-radius: 5px; }
.dist-list .bar i { position: absolute; top: 50%; left: var(--d); transform: translate(-50%,-50%); width: 16px; height: 16px; border-radius: 50%; }
.dist-list .alive .bar i { background: var(--white); }
.dist-list .dead  .bar i { background: var(--black); border: 2px solid #6a6a6a; }
.dist-list .lbl { font-family: var(--sans); font-size: clamp(.9rem,2vw,1rem); }
.dist-list .lbl b { font-weight: 700; }
.dist-list .alive .lbl b { color: var(--white); }
.dist-list .dead  .lbl b { color: #8a8a8a; text-decoration: line-through; text-decoration-thickness: 1px; }
.dist-list .lbl em { font-style: normal; color: #8a8a8a; font-size: .86em; }
.dist-list .num { font-family: var(--display); font-size: clamp(1rem,2.6vw,1.35rem); color: var(--white); white-space: nowrap; }
.dist-list .dead .num { color: #6a6a6a; }
.dist-chart .note { font-family: var(--sans); font-size: .82rem; line-height: 1.5; color: #8a8a8a; margin: 1.4rem 0 0; padding-top: 1rem; border-top: 1px solid #2a2a2a; }