/* ═══════════════════════════════════════════════════════════
   BLOG POST
   Migrated bodies, rebuilt shell. The copy comes across verbatim
   from prod, so this has to style everything those bodies actually
   contain: p, h2, h3, strong, em, ul, ol, blockquote and two tables.
   Styling only the paragraphs would leave the long posts broken in
   ways nobody notices until a client reads one.
   ═══════════════════════════════════════════════════════════ */
.post-page{background:var(--northcoast);color:var(--elgouna)}

/* One measure drives the whole article. Sub-70ch is the readable
   range for long prose, and everything except the cover and the
   tables sits inside it. */
.post-page .post{
  --measure:68ch;
  max-width:var(--frame);margin:0 auto;
  padding:calc(var(--nav-clear) + var(--hero-gap)) var(--pad-x) clamp(40px,5vw,64px);
}
.post-page .crumbs{margin-bottom:clamp(20px,2.4vw,30px)}
.post-page .post-cat{
  font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--deveney-ink);margin-bottom:16px;
}
/* --t-title, not --t-h1. The site rule is one h1 scale everywhere,
   and this is the documented exception: a post title introduces the
   article you came to read, not a marketing section. See site.css.
   Wider measure too, because the longest titles here run 82 and 83
   characters and 22ch put them on four lines. */
.post-page h1{font-size:var(--t-title);max-width:30ch}
.post-page .post-meta{
  font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--medford);margin-top:clamp(18px,2vw,24px);
}
/* ── the cover slot, empty ────────────────────────────────────
   Eleven of the seventeen posts had a cover and six had nothing at all,
   so the template quietly had two shapes and a reader met a different
   article depending on which post they opened.

   Every post carries the slot now. Without an image it is a Malek panel
   at the same 16/7 with a quiet label, which reads as a considered blank
   rather than a broken <img>. Dropping a real cover in later is one
   attribute: add the background-image and remove .is-empty.

   No aspect-ratio or radius of its own: it inherits the rule below, so
   a filled cover and an empty one are the same object and swapping one
   for the other cannot change the page's rhythm. */
.post-cover.is-empty{
  /* The literal, not var(--malek). The two August posts remap --malek as
     part of their dark-to-light vocabulary, and this panel would follow
     it to a dark grey. The placeholder's colour is its own decision. */
  background:#D8E7EE;
  display:grid;place-items:center;
}
.post-cover.is-empty::after{
  content:attr(data-label);
  font-weight:700;font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  /* Full strength. At .55 it measured 2.72:1 on Malek, and this label
     is the only thing telling you the slot is deliberate rather than a
     failed image. --alexandria solid is 8.14:1. */
  color:var(--alexandria);
}
/* The grain overlay exists to calm a photograph. There is no photograph
   here, so it would only add noise to a flat panel. */
.post-cover.is-empty::before{display:none}

.post-page .post-cover{
  position:relative;isolation:isolate;
  margin-top:clamp(30px,4vw,52px);
  aspect-ratio:16/7;border-radius:var(--r);
  background-size:cover;background-position:center;
}
/* Scrim under the grain. Grain alone does not fix a blotchy photo:
   at the 6% the portfolio uses it is invisible over a busy image.
   What actually kills a smudged highlight is less local contrast, and
   a flat wash at alpha a reduces contrast by exactly (1 - a) whatever
   its colour. So the colour is free, and Northcoast is the one that
   also warms these cold stock greys toward the page.

   Sits on ::before because the grain owns ::after, and the lobby's
   feature panels already use ::before for their own navy text scrim,
   which is far heavier and needs no help. */
.post-page .post-cover::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:var(--northcoast);opacity:.14;
  pointer-events:none;
}

/* ── body ─────────────────────────────────────────────────── */
.post-page .post-body{
  max-width:var(--measure);
  margin-top:clamp(34px,4.5vw,60px);
  font-size:clamp(16px,1.15vw,18px);line-height:1.7;color:var(--ink-2);
}
.post-page .post-body > * + *{margin-top:1.15em}
.post-page .post-body p{max-width:none}
.post-page .post-body strong{color:var(--elgouna);font-weight:700}
.post-page .post-body em{font-style:italic}
.post-page .post-body a{
  color:var(--elgouna);text-decoration:underline;
  text-decoration-color:var(--deveney-ink);text-underline-offset:3px;
}
.post-page .post-body a:hover{color:var(--deveney-ink)}

/* Headings get their air from the top, not from a blanket margin, so
   a heading following a heading does not double up. */
.post-page .post-body h2{
  --track:-.024em;
  font-size:var(--t-h3);font-weight:700;
  letter-spacing:var(--track);word-spacing:calc(-1 * var(--track));
  line-height:1.2;color:var(--elgouna);
  margin-top:clamp(38px,4vw,58px);
}
.post-page .post-body h3{
  font-size:var(--t-h4,20px);font-weight:700;
  letter-spacing:-.02em;line-height:1.3;color:var(--elgouna);
  margin-top:clamp(28px,3vw,38px);
}
.post-page .post-body h2 + *,
.post-page .post-body h3 + *{margin-top:.7em}

.post-page .post-body ul,
.post-page .post-body ol{padding-left:1.3em}
.post-page .post-body li{margin-top:.5em}
.post-page .post-body li::marker{color:var(--deveney-ink)}

/* A rule, not a quotation mark. The pull quotes here are short and
   sit inside the argument rather than interrupting it. */
.post-page .post-body blockquote{
  border-left:3px solid var(--romeo);
  padding:2px 0 2px clamp(18px,2vw,26px);
  margin-top:clamp(28px,3vw,38px);
}
.post-page .post-body blockquote p{
  --track:-.014em;
  font-size:clamp(18px,1.6vw,22px);line-height:1.45;
  letter-spacing:var(--track);word-spacing:calc(-1 * var(--track));
  color:var(--elgouna);font-weight:500;
}

/* Tables break the measure on purpose: the comparison table has five
   columns and squeezing it into 68ch would make it unreadable. It gets
   the full column and scrolls inside its own box on narrow screens so
   the page itself never scrolls sideways. */
.post-page .table-scroll{
  /* max-width:none is not enough: the parent caps at --measure and a
     child cannot exceed an ancestor's max-width by unsetting its own.
     An explicit width does overflow the parent's box, which is fine
     here because the space to its right is empty anyway. */
  width:min(1080px, calc(100vw - 2 * var(--pad-x)));
  max-width:none;overflow-x:auto;
  margin-top:clamp(28px,3vw,40px);
  border-radius:var(--r);background:#fff;
}
.post-page .post-body table{
  width:100%;border-collapse:collapse;
  font-size:14px;line-height:1.5;min-width:640px;
}
.post-page .post-body th{
  text-align:left;font-weight:700;font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--medford);
  padding:16px 18px;border-bottom:1px solid var(--rule);
}
.post-page .post-body td{
  padding:14px 18px;border-bottom:1px solid var(--rule-soft);
  vertical-align:top;color:var(--ink-2);
}
.post-page .post-body tbody tr:last-child td{border-bottom:none}
.post-page .post-body td strong{color:var(--elgouna)}

/* ── author ───────────────────────────────────────────────── */
.post-page .post-author{
  display:flex;align-items:center;gap:16px;
  max-width:var(--measure);
  margin-top:clamp(44px,5vw,68px);padding-top:clamp(24px,3vw,34px);
  border-top:1px solid var(--rule);
}
.post-page .post-author-avatar{
  display:grid;place-items:center;flex:none;
  width:48px;height:48px;border-radius:50%;
  background:var(--elgouna);color:var(--northcoast);
  font-size:13px;font-weight:700;letter-spacing:.06em;
}
/* Only the text spans stack. The avatar is a flex child and a grid
   container in its own right; forcing it to block collapsed its
   centring and pushed the initials into the corner. */
.post-page .post-author > span:last-child > span{display:block}
.post-page .post-author-label{
  font-size:10px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--medford);
}
.post-page .post-author-name{font-size:15px;font-weight:700;color:var(--elgouna);margin-top:3px}
.post-page .post-author-role{font-size:13px;color:var(--ink-2)}

/* ── keep reading ─────────────────────────────────────────────
   The same detached, borderless, rounded tile as the lobby, so a
   reader coming off a post lands in a grid they already know. */
.post-page .related{
  max-width:var(--frame);margin:0 auto;
  padding:0 var(--pad-x) clamp(60px,8vw,110px);
}
.post-page .rel-label{
  font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--medford);margin-bottom:clamp(16px,2vw,22px);
}
.post-page .rel-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(10px,1.1vw,16px);
}
.post-page .rel-card{
  display:flex;flex-direction:column;
  padding:clamp(20px,2vw,28px);
  border:0;border-radius:var(--r);background:#fff;
  text-decoration:none;color:var(--elgouna);
  transition:background .3s var(--ease);
}
.post-page .rel-card:hover{background:var(--malek)}
.post-page .rel-cat{
  font-size:10px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--deveney-ink);
}
.post-page .rel-title{
  font-size:16px;font-weight:700;line-height:1.25;
  letter-spacing:-.02em;margin:12px 0 auto;
}
.post-page .rel-date{
  font-size:10px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--medford);margin-top:20px;
}

@media (max-width:900px){
  .post-page .rel-grid{grid-template-columns:1fr}
  .post-page .post-cover{aspect-ratio:16/10}
}