/* Post page furniture, shared by every variant.
   Kept separate from site.css so there is one block to promote once the
   variant is chosen, rather than edits scattered through the stylesheet. */

/* ---- the title band ----
   A direct child of body, so the charcoal reaches both edges on its own. The
   .wrap inside holds the text to the same 1232px column as every other section.
   No 100vw bleed: that counts the scrollbar and overflows the page. */
.arthead-band{background:var(--char);padding:calc(var(--xl) + 40px) 0}
.arthead-band .arthead{text-align:left;max-width:1180px;margin:0}
/* the byline moves into the rail beside the article, so it would only be said
   twice if it stayed in the band as well */
.arthead-band .arthead .meta{display:none}
.arthead-band .arthead h1{color:var(--cream);text-wrap:balance}
/* Every hero title is set to two lines. The generator gives each h1 its own
   max-width, derived from how many characters the title has, and text-wrap
   balance then splits those two lines evenly instead of leaving a stub.
   Without the per-title width, anything under about 58 characters sat on one
   line and the band read shorter than the rest of the set. */
.arthead-band .arthead .eyebrow{color:var(--pale)}
.arthead-band .arthead .meta{color:var(--cream-faint)}
.arthead-band .arthead .back{color:var(--cream-faint)}
.arthead-band .arthead .back:hover{color:var(--cream)}
/* the photo sits under a flat charcoal wash at 82%, which is the level that
   held the title on every one of the twelve blog photos, light ones included */
.arthead-band.has-photo{
  background-image:linear-gradient(rgba(39,38,38,.82),rgba(39,38,38,.82)),
    var(--hero);
  background-size:cover;background-position:center}

/* the article sits in its own section under the band */
.artbody{padding:var(--xxl) 0}

/* ---- the closing call to action ----
   It used to be a centred stack: a 24ch heading wrapping onto three lines, with
   96px of section padding above and below, in a column down the middle of a
   1232px band. Now the heading takes the left and the button the right, so the
   band uses its full width and loses roughly half its height. The words are
   unchanged. */
.artcta{background:var(--char);padding:var(--xl) 0 var(--lg)}  /* less at the foot than the head: the footer sits directly under it in the
     same charcoal, and 64px on both sides of that seam left a visible hole */
.artcta-in{display:flex;align-items:center;justify-content:space-between;
  gap:var(--lg) var(--xl);flex-wrap:wrap}
/* the heading grows into whatever the action block does not need, so the band
   does not end up with a lake of charcoal down the middle. The cap keeps it
   from running past a comfortable line on a very wide screen. */
.artcta h2{flex:1 1 auto;font-size:var(--t-h3);line-height:1.25;font-weight:600;
  color:var(--cream);letter-spacing:-.02em;max-width:38ch;margin:0;text-wrap:balance}
.artcta-act{display:flex;flex-direction:column;align-items:flex-start;gap:10px;
  flex-shrink:0}
.artcta .btn{margin:0}
.artcta .micro{font-size:13px;line-height:1.6;color:var(--cream-faint);margin:0;
  max-width:36ch}
@media(max-width:860px){
  .artcta-in{flex-direction:column;align-items:flex-start}
  .artcta h2{max-width:none}
}

/* ---- read next ---- */
.readnext{padding:0 0 var(--xxl)}
.rn-head{display:flex;align-items:baseline;justify-content:space-between;
  margin-bottom:var(--md);border-top:1px solid var(--hair);padding-top:var(--xl)}
.rn-head h2{font-size:var(--t-h3);font-weight:600;color:var(--char);
  letter-spacing:-.01em}
.rn-all{font-size:var(--t-small);color:var(--teal-dk);font-weight:500}
.rn-all:hover{color:var(--terra-dk)}
/* the same mosaic shape as the index, one lead with two stacked beside it, so
   the bottom of a post looks like the page it came from */
.rn-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:210px;gap:24px}
.rn-grid .mos:first-child{grid-column:span 2;grid-row:span 2}
.rn-grid .mos:first-child h3{font-size:24px;line-height:1.3}
.mos{position:relative;border-radius:var(--r-md);overflow:hidden;
  background-size:cover;background-position:center;display:flex;align-items:flex-end;
  box-shadow:0 6px 24px rgba(39,38,38,.10);
  transition:transform .3s ease,box-shadow .3s ease}
.mos:hover{transform:translateY(-6px);box-shadow:0 20px 44px rgba(39,38,38,.22)}
/* The card photo used to be a background-image, which cannot be lazy-loaded:
   all 24 downloaded before anyone scrolled, 3.0 MB of them. As an <img> with
   object-fit:cover it renders identically (verified pixel by pixel) and the
   ones below the fold wait until they are needed.
   height:100% has to beat the global img{height:auto}, which it does on
   specificity. inherit on the radius keeps the rounded corners. */
.mos .ph{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;border-radius:inherit;
  display:block;background:var(--tint)}
/* Scrim tuned against measurement, not by eye. With the previous stops
   (0 at 18%, .55 at 52%, .92 at 100%) five of the 24 index cards put their
   title on a patch too light to hold cream text, and seven more were marginal.
   These stops clear every card past 4.5:1 while still leaving the top half of
   each photograph essentially untouched. */
.mos .scrim{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(39,38,38,0) 14%,
    rgba(39,38,38,.66) 46%,rgba(39,38,38,.96) 100%)}
.mos .body{position:relative;padding:var(--sm) var(--md);display:flex;
  flex-direction:column;gap:4px}
.mos .tag{font-size:var(--t-eyebrow);letter-spacing:.14em;text-transform:uppercase;
  font-weight:600;color:var(--pale)}
/* h2 on the blog index, where the card sits directly under the page h1;
   h3 in Read next on a post, where an h2 heads the strip. Same look. */
.mos h2,
.mos h3{font-size:17px;line-height:1.35;font-weight:600;color:var(--cream);
  letter-spacing:-.01em}
.mos .meta{font-size:12px;color:var(--cream-faint)}

/* ---- the reading column and its rail ----
   Promoted out of the C2 variant once C2 was chosen, so every post page gets
   it from one place instead of a per-page <style> block. */
  /* 17px was too small for a seven minute read. 19px at 1.75 puts the line
     length near 70 characters in a 720px column, which is the comfortable band. */
  .article{font-size:19px;line-height:1.75}
  .article .intro{font-size:22px;line-height:1.6;color:var(--char)}
  .article p{margin-bottom:var(--md)}
  .article h2{margin-top:var(--xl)}
  .article strong{font-weight:600;color:var(--char)}
  /* the highlight is a soft terracotta wash rather than a marker yellow, so it
     belongs to the palette. Two per page at most, on the sharpest lines. */
  /* Starting the wash at 52% rather than 58% puts it behind the word instead of
     under it, which is the difference between a highlight and a thick underline.
     Teal (--teal #30A5A5) rather than the salmon, per Clarisse 2026-08-19: it
     also stops the highlight competing with the terracotta already carrying the
     links, the pull quote rule and the accent words. */
  .article mark.hl{background:linear-gradient(transparent 52%,rgba(48,165,165,.42) 52%);
    color:inherit;padding:0 2px}
  .article .pull-quote{font-size:24px;line-height:1.5;border-left:3px solid var(--terra);
    padding-left:var(--lg);margin:var(--xl) 0;color:var(--char)}
  .article li{font-size:18px}
  /* The rail only earns its width on a wide screen. Under 1100px it folds above
     the text and stops being sticky, and the table of contents collapses away
     rather than pushing the article down the page. */
  /* justify-content:start, not center, so the rail begins on the same left edge
     as the title in the band above it (both sit against .wrap's content edge).
     Centring the pair floated the rail inwards and left the title hanging.
     The article column takes the space that frees up: 720px -> 850px, which is
     about 79 characters a line at 19px, still inside the comfortable band. */
  .artgrid{display:grid;grid-template-columns:236px minmax(0,850px);
    gap:var(--xl);justify-content:start}
  /* site.css caps .article at 720px for the no-sidebar layout. Inside the grid
     the column itself does the capping, so that rule has to be released or the
     wider track has no effect. */
  .artgrid .article{margin:0;max-width:none}
  .rail{position:sticky;top:96px;align-self:start;font-size:var(--t-small)}
  .rail-h{display:block;font-size:var(--t-eyebrow);letter-spacing:.14em;
    text-transform:uppercase;color:var(--ink-soft);font-weight:600;margin-bottom:10px}
  .rail-meta{color:var(--ink-soft);line-height:1.6;margin-bottom:var(--lg)}
  .rail-meta b{display:block;color:var(--char);font-weight:600;font-size:var(--t-body)}
  .toc{list-style:none;margin:0;padding:0;border-left:2px solid var(--hair)}
  .toc li{padding:0}
  .toc a{display:flex;gap:8px;padding:7px 0 7px 14px;margin-left:-2px;
    border-left:2px solid transparent;color:var(--ink-soft);line-height:1.45;
    transition:color .2s,border-color .2s}
  .toc a:hover{color:var(--terra-dk)}
  /* the current section is the one thing the rail is really for */
  .toc a.on{color:var(--char);font-weight:600;border-left-color:var(--terra)}
  .toc i{font-style:normal;font-variant-numeric:tabular-nums;color:var(--terra);
    font-weight:600;flex-shrink:0}
  .share{margin-top:var(--lg);display:flex;flex-wrap:wrap;gap:10px;align-items:baseline}
  .share b{display:block;width:100%;font-size:var(--t-eyebrow);letter-spacing:.14em;
    text-transform:uppercase;color:var(--ink-soft);font-weight:600;margin-bottom:2px}
  .share a{color:var(--teal-dk);font-weight:500;border-bottom:1px solid rgba(48,165,165,.35)}
  .share a:hover{color:var(--terra-dk);border-color:var(--terra)}
  @media(max-width:1100px){
    .artgrid{grid-template-columns:minmax(0,720px);justify-content:center}
    .rail{position:static}
    .rail .toc,.rail-block{display:none}
    .rail-meta{margin-bottom:var(--md)}
  }