/* Article page — "Housing Scarcity is a Systems Problem"
   (Figma: Article - Desktop 2353:1750 / Tablet 2353:4132 / Mobile 2353:2481 /
   Ultra-wide 2353:4575; agency working file, built 2026-08-13).
   Shares the privacy pages' header/footer; this file styles the article body.
   NOTE (flagged to agency): a table-of-contents link group (Group 1160445506)
   sits parked on their canvas outside every frame — not built, placement
   unknown. Charts are the agency's own vectors (SVG exports, text outlined). */

.a-main {
  max-width: var(--page-max);
  margin-left: auto;
  margin-right: auto;
}

/* Title block: 90/108 Light, centred, 1036 max; byline pill under it.
   1440 -> 2560 the frame hand-shifts the block (title 200 -> 216 below the
   header, byline gap 48 -> 56, gap to content 200 -> 232) — interpolated,
   same treatment as the homepage hero. */
.a-title {
  margin: 17.75rem auto 0;  /* header fixed (Trello Aug-27) — old in-flow 84 added back */
  max-width: 64.75rem;
  text-align: center;
  font-weight: 300;
  /* Aug-18 Figma: largest headlines 100px Light / 110% */
  font-size: 6.25rem;
  line-height: 6.875rem;
  color: var(--ink);
}
/* The 90px title is leading-trimmed in Figma (box 171, browser line box 216);
   the 3px margin lands the byline at the frame's absolute y=503. */
/* Author bio card (Aug-18 Figma 2559:9964, 451x258 r8 beige): sits right-aligned
   to the 96px content margin between the title and the body. margin-top is the
   frame's 190 gap minus the ~20px browser leading below the trimmed title. */
.a-bio {
  width: 28.1875rem;
  margin: 10.625rem 6rem 0 auto;
  background: var(--beige);
  border-radius: 0.5rem;
  padding: 1.5rem;
}
.a-bio-kicker { background: #FFCFF3; color: #EF4D4D; }
.a-bio-text {
  margin-top: 1.5rem;
  font-weight: 400; font-size: 1rem; line-height: 1.4rem; letter-spacing: 0.04rem;
  color: var(--ink);
}

/* Sections: privacy-page pattern with the article's own columns —
   453 heading + 24 gap + 744 body; taupe border, 40 pad, 56 between. */
.a-sections {
  margin: 3.625rem 6rem 3.5rem;  /* 58 under the bio card (Aug-18 frame) */
  display: flex; flex-direction: column;
  gap: 3.5rem;
}
.a-section {
  display: flex;
  gap: 1.5rem;
  border-top: 1px solid var(--taupe);
  padding-top: 2.5rem;
}
.a-section h2 {
  flex: 0 0 28.3125rem;
  font-weight: 400;
  font-size: 2.125rem;
  line-height: 2.5625rem;
  color: var(--ink);
}
.a-body {
  max-width: 46.5rem;
  color: var(--ink);
}
.a-body p {
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.4rem;
  letter-spacing: 0.04rem;
}
.a-body p + p { margin-top: 0.5rem; }   /* paragraphSpacing 8 */
/* Outer box per Aug-18 Figma (2561:11085): 1px #B2ADA4, r26 — Trello
   "diagrams are missing the outer box" */
.a-chart-wrap {
  position: relative; margin: 2rem 0; max-width: 100%;
  border: 1px solid #B2ADA4; border-radius: 1.65rem;
  box-sizing: border-box;
}
.a-chart { display: block; width: 100%; height: auto; }
/* Chart labels are real text (the geometry endpoint can't outline text, and
   HTML labels use our licensed fonts instead of the file's trial font).
   Percent positions track the scaling chart at every breakpoint. */
.acl {
  position: absolute;
  font-family: var(--font-mono); font-weight: 450;
  font-size: 0.75rem; line-height: 1rem; letter-spacing: 0.0375rem;
  color: var(--ink);
}
.acl-v { writing-mode: vertical-rl; transform: rotate(180deg); text-align: center; }
/* (innovation-curve figure removed from this page — JD 2026-08-19: the article
   keeps its original performance chart; only the homepage carries the new graph) */

/* Conclusion: light-blue card, 34/41 body */
.a-conclusion {
  display: flex;
  gap: 1.5rem;
  background: #C2EBFF;
  border-radius: 3rem;
  margin: 0 -2.5rem;               /* card is 1328 wide: 56 page margins */
  padding: 3rem 2.5rem 3rem;       /* heading x=40 in card = 96 on page */
}
.a-conclusion h2 {
  flex: 0 0 28.3125rem;
  font-weight: 400;
  font-size: 2.125rem;
  line-height: 2.5625rem;
  color: var(--ink);
}
.a-conclusion-body { max-width: 46.5rem; color: var(--ink); }
.a-conclusion-body p {
  font-weight: 400;
  font-size: 2.125rem;
  line-height: 2.5625rem;
}
.a-conclusion-body p + p { margin-top: 0.5rem; }

/* Footer sits 56 under the conclusion card on this page (frame 9636-9580) */
.article-page .footer { margin-top: 3.5rem; }

/* 1440 -> 2560 title-block interpolation (rem = fixed 16px in this range) */
@media (min-width: 1440px) {
  /* title margin stays 200 — the +16 at 2560 comes from the taller header */
  /* Bio card keeps its 190 title gap; body gap stays 58 at ultra-wide */
}

/* Tablet (768 frame): single 242/414 column pair like the privacy pages;
   title 46/58 centred; headings 24/31. */
@media (max-width: 1199px) {
  .a-title {
    margin-top: 12.5rem;  /* +80: header fixed */
    max-width: 29.5rem;
    font-size: 2.875rem;
    line-height: 3.625rem;
  }
  .a-bio { margin: 5rem 3rem 0 auto; }
  .a-sections { margin: 3.5rem 3rem 3.5rem; gap: 3.5rem; }
  .a-section { gap: 1rem; }
  .a-section h2 {
    flex: 0 0 15.125rem;
    font-size: 1.5rem;
    line-height: 1.95rem;
    letter-spacing: 0.03rem;
  }
  .a-body { max-width: 25.875rem; }
  .a-conclusion { margin: 0; padding: 2rem; gap: 1rem; }
  .a-conclusion h2 { flex: 0 0 15.125rem; font-size: 1.5rem; line-height: 1.95rem; }
  .a-conclusion-body p { font-size: 1.5rem; line-height: 1.95rem; }
}

/* Mobile (390 frame): stacked columns, 342 wide */
@media (max-width: 767px) {
  /* Aug-18: 54px Light / 115%; centred (Trello: article title center-aligned) */
  .a-title { margin-top: 12.5rem; max-width: 21.375rem; font-size: 3.375rem; line-height: 3.8813rem; margin-left: auto; margin-right: auto; }
  /* Bio card centred at 346w, 120 under the title, ~30 above the body
     (Aug-18 mobile frame 2558:9278) */
  .a-bio { width: 21.625rem; margin: 7.5rem auto 0; }
  .a-bio-text { line-height: 1.3rem; }
  .a-sections { margin: 1.875rem 1.5rem 3.5rem; gap: 3.5rem; }
  .a-section { flex-direction: column; gap: 0.625rem; padding-top: 2rem; }
  .a-section h2 { flex: none; }
  .a-body { max-width: none; }
  /* Trello 2026-08-18: diagram text 7pt on mobile only, both diagrams */
  .acl { font-size: 0.4375rem; line-height: 0.625rem; letter-spacing: 0.0219rem; }
  /* Trello 2026-08-18 conclusion spacing spec: card at 12px side margins
     (366w), 48 top/bottom padding, 24 sides, 48 between heading and body */
  .a-conclusion { flex-direction: column; padding: 3rem 1.5rem; margin: 0 -0.75rem; gap: 3rem; border-radius: 2rem; }
  .a-conclusion h2 { flex: none; }
}