/* ═══════════════════════════════════════════════════════════════
   PRADO · The Journal
   Article typography and layout.

   Linked only from journal/*.html, and loaded after each page's own
   <style> block, so it wins on equal specificity and cannot touch the
   market pages, the homepage or a listing. Every article generated
   from the template picks it up, so the formatting of a piece written
   next year is the formatting of the ones written today.
   ═══════════════════════════════════════════════════════════════ */

/* ── 1 · masthead ────────────────────────────────────────────────
   The site header is fixed and roughly 120px tall. The hero used a
   fixed height with its content bottom-aligned, so a sentence-length
   article title grew upward, behind the header, and was clipped by
   overflow:hidden. It now grows downward instead, and starts below
   the header rather than under it. */
.mkhero{
  height:auto;
  min-height:clamp(440px,66vh,640px);
  padding-top:clamp(144px,16vh,200px);
  padding-bottom:clamp(46px,5vw,74px);
}

/* Article titles are set in mixed case. The market pages set a
   neighborhood name in 101px uppercase, which is right for two words
   and wrong for twelve — an article title needs to hold a sentence. */
.mkhero h1.d1{
  text-transform:none;
  font-size:clamp(32px,4.22vw,59px);
  line-height:1.12;
  letter-spacing:-.004em;
  max-width:17ch;
  margin-top:20px;
}
/* The standfirst is a statement, not a caption, so it takes the serif with
   the title. Over a photograph it needs a touch more size and leading than
   Inter did at the same job. */
.mkhero .lede{font-family:var(--display);font-size:18px;max-width:42ch;
  margin-top:22px;line-height:1.55}

.byline{
  margin-top:clamp(22px,2vw,30px);
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(239,234,224,.6);
  text-shadow:0 1px 18px rgba(6,6,5,.7),0 1px 3px rgba(6,6,5,.4);
}
.byline a{color:rgba(239,234,224,.86);border-bottom:1px solid rgba(239,234,224,.28)}
.byline a:hover{color:var(--stone)}
.byline time{white-space:nowrap}

/* ── 2 · the article column ──────────────────────────────────────
   One measure for the whole piece, capped in ch so it follows the font
   size at every width. EB Garamond sets a narrower ch than Inter did, so
   58ch here lands on the same ~75 characters the column held before — the
   width is what matters, not the number in front of it. The face also
   carries a smaller x-height, so the size goes up and the leading comes
   down; 19 x 1.66 is the same 31.5px of leading Inter had at 17 x 1.86. */
.artbody .body{max-width:58ch;font-size:19px;line-height:1.66}
.artbody .body+.body{margin-top:1.3em}

/* the opening paragraph carries slightly more weight than the rest */
.artbody .lead{
  font-size:clamp(20.5px,1.6vw,23px);
  max-width:52ch;
  line-height:1.56;
  color:rgba(239,234,224,.9);
  margin-bottom:.5em;
}

/* Run-in lead-ins, e.g. "What would it cost to build this, today".
   These used to earn their contrast by switching from Inter to the serif.
   Now that the paragraph is already serif, the italic does that work —
   which is also how the reference marks emphasis. */
.artbody .body b{
  font-weight:400;font-style:italic;
  font-size:1.06em;color:var(--bone);
}

/* ── 3 · hierarchy ───────────────────────────────────────────────
   h1 masthead · h2 section · h3 sub-section · body. The space above
   a heading is roughly three times the space between paragraphs, so
   the break registers before the words are read, and the space below
   it is small, so the heading stays attached to what it introduces. */
.artbody h2,.artbody .d3{
  font-family:var(--display);font-weight:400;
  font-size:clamp(26px,2.21vw,33px);
  line-height:1.22;letter-spacing:-.004em;
  max-width:24ch;
  margin:clamp(54px,4.6vw,78px) 0 clamp(15px,1.2vw,19px);
}
.artbody h3{
  font-family:var(--display);font-weight:400;
  font-size:clamp(20px,1.55vw,24px);
  line-height:1.3;letter-spacing:-.002em;
  color:rgba(239,234,224,.93);
  max-width:28ch;
  margin:clamp(36px,2.9vw,48px) 0 clamp(9px,.85vw,13px);
}
.artbody>*:first-child{margin-top:0}

/* ── 4 · questions and further reading ───────────────────────────
   Both already carry the site's own styling; these only settle the
   measure and the rhythm so they read as part of the same article. */
.faq{max-width:72ch}
.faq>div{padding:clamp(22px,2vw,29px) 0}
.faq h3{font-size:clamp(20px,1.55vw,23px);line-height:1.38;max-width:36ch}
.faq p{font-family:var(--display);font-size:18px;line-height:1.72;max-width:58ch;margin-top:12px}
#related .focusgrid{margin-top:26px}

/* ── 5 · tablet ──────────────────────────────────────────────────*/
@media(max-width:1024px){
  .artbody .body{font-size:18.5px;line-height:1.7}
  .mkhero h1.d1{max-width:20ch}
}

/* ── 6 · phone ───────────────────────────────────────────────────
   The measure is the screen here, so the ch caps go inert on their own.
   The rhythm comes in a little — the gap above a heading that is
   generous on a desktop page is a hole on a phone. */
@media(max-width:900px){
  .mkhero{min-height:clamp(390px,56vh,520px);padding-top:clamp(118px,14vh,152px)}
  .mkhero h1.d1{font-size:clamp(29px,6.6vw,42px);max-width:none;margin-top:16px}
  .mkhero .lede{max-width:none;margin-top:18px}
  .artbody .lead{font-size:20px}
  .artbody h2,.artbody .d3{max-width:none;font-size:clamp(24px,5.56vw,30px);
    margin:clamp(40px,8vw,54px) 0 13px}
  .artbody h3{max-width:none;margin:clamp(30px,6vw,38px) 0 9px}
}
@media(max-width:520px){
  .mkhero{padding-top:108px;padding-bottom:38px}
  .byline{font-size:10px;letter-spacing:.14em}
  .artbody .body{font-size:18px}
}