/* ==========================================================================
   VeaHealth — reading

   A long article is a different problem from a landing page. The measurements
   this is built on, taken from the journal before the change:

     body 16.5px          too small to read 1,500 words on a phone
     line-height 1.70     good, kept
     measure ~74ch        good, kept and tightened slightly
     contrast, dark 9.2:1 comfortable, kept
     contrast, light 6.3:1 passes AA and still tires the eye over a long read
     h2 on mobile 28.4px  heavy against a 16.5px body

   So: the body gets bigger, the light theme gets darker text, headings on small
   screens come down, and the article sits on its own reading surface rather
   than on the marketing ground.

   One thing deliberately not done: maximum contrast. Pure white on pure black
   measures 21:1 and is worse to read than this, because the glare bleeds into
   the letterforms. The target here is roughly 9-11:1 in both themes.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. The reading surface
   The article is on paper, not on the page. In light mode that is a warm
   off-white rather than #fff; in dark mode a lifted ink rather than the near
   black used behind the marketing sections.
   -------------------------------------------------------------------------- */
:root{
  --read-bg:      #FFFDF9;
  --read-ink:     #16333A;   /* ~10.6:1 on --read-bg */
  --read-ink-2:   #33565E;
  --read-line:    #E6EDEC;
  --read-mark:    #0E5F5A;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --read-bg:    #10262A;
    --read-ink:   #DCEAEA;   /* ~9.8:1 on --read-bg */
    --read-ink-2: #A9C6C8;
    --read-line:  rgba(255,255,255,.10);
    --read-mark:  #6FD6D0;
  }
}
:root[data-theme="dark"]{
  --read-bg:    #10262A;
  --read-ink:   #DCEAEA;
  --read-ink-2: #A9C6C8;
  --read-line:  rgba(255,255,255,.10);
  --read-mark:  #6FD6D0;
}

.post-single .post-read{
  background: var(--read-bg);
  border-radius: var(--r-lg);
  padding: clamp(24px, 5vw, 64px) clamp(20px, 4vw, 56px);
  margin-block: clamp(20px, 3vw, 40px);
  box-shadow: var(--sh-1);
}

/* --------------------------------------------------------------------------
   2. Type
   -------------------------------------------------------------------------- */
.post-body{
  /*
   * 54ch, not the 68ch the guidance suggests. The ch unit is the width of the
   * zero glyph, which in this face is much narrower than the average letter —
   * 68ch measured out at 93 actual characters a line, well past the point
   * where the eye starts losing its place returning to the left margin.
   * This lands around 72.
   */
  max-width: 54ch;
  margin-inline: auto;
  color: var(--read-ink-2);
  font-size: 1.0625rem;          /* 17px */
  line-height: 1.72;
}
@media (min-width: 900px){
  .post-body{ font-size: 1.125rem; }   /* 18px */
}
.post-body p{ font-size: inherit; line-height: inherit; color: var(--read-ink-2); }
.post-body p strong,
.post-body li strong{ color: var(--read-ink); font-weight: 600; }

/* headings: smaller on a phone, and set tighter than the marketing scale */
.post-body h2{
  color: var(--read-ink);
  font-size: clamp(1.42rem, 4.4vw, 1.95rem);
  line-height: 1.18;
  letter-spacing: -.012em;
  margin-top: 2.1em;
}
.post-body h2:first-child{ margin-top: 0; }
.post-body h3{ color: var(--read-ink); font-size: 1.16rem; margin-top: 1.7em; }

/* the opening paragraph carries a little more weight, as a lede should */
.post-body > p:first-of-type{
  font-size: 1.14em;
  line-height: 1.62;
  color: var(--read-ink);
}

.post-body ul li{ color: var(--read-ink-2); }
.post-body ul li::before{ background: var(--read-mark); }
.post-body a{ color: var(--read-mark); text-decoration-thickness: 1px; }

/* --------------------------------------------------------------------------
   3. Key takeaways — the answer before the article
   -------------------------------------------------------------------------- */
.post-key{
  border: 1px solid var(--read-line);
  border-inline-start: 3px solid var(--read-mark);
  border-radius: 0 var(--r-lg) var(--r-lg) 0;
  padding: 22px 26px;
  margin-bottom: clamp(24px, 4vw, 40px);
  background: color-mix(in srgb, var(--read-mark) 5%, transparent);
}
.post-key__k{
  font-family: var(--f-mono);
  font-size: .6rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--read-mark);
  margin-bottom: 12px;
}
.post-key ul{ list-style: none; padding: 0; margin: 0; }
.post-key li{
  position: relative;
  padding-inline-start: 26px;
  margin-top: .55em;
  color: var(--read-ink);
  font-size: .98rem;
  line-height: 1.6;
}
.post-key li:first-child{ margin-top: 0; }
.post-key li::before{
  content: "";
  position: absolute; inset-inline-start: 4px; top: .62em;
  width: 8px; height: 8px;
  border-radius: 2px;
  background: var(--read-mark);
}

/* --------------------------------------------------------------------------
   4. Contents — a sticky rail beside the article on a desk, a fold on a phone
   -------------------------------------------------------------------------- */
.post-layout{
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}
/*
 * 1000px, not 1100. An iPad in landscape is 1024 and was falling through to the
 * fold when it has ample room for the rail and a finger big enough to use it.
 *
 * Deliberately above 980, which is the viewport Chrome reports when somebody
 * asks a phone for the desktop site: that page is being scaled down onto a
 * ~390px screen, so a sticky rail there would render about two millimetres
 * wide. Width alone is not the question — physical size is.
 */
@media (min-width: 1000px){
  .post-layout{ grid-template-columns: minmax(0, 1fr) 236px; }
  .post-aside{ align-self: stretch; order: 2; }
  .post-aside__inner{ position: sticky; top: calc(var(--header-h, 78px) + 24px); }
}

.post-toc{ border: 0; background: none; padding: 0; }
/*
 * The native <details> marker, killed everywhere rather than only in the
 * mobile query — on a desktop it was rendering a triangle beside the contents
 * heading in the rail.
 */
.post-toc > summary{ list-style: none; }
.post-toc > summary::-webkit-details-marker{ display: none; }
@media (min-width: 1000px){
  /* in the rail it reads as a heading; it is still the control that folds it */
  .post-toc > summary{
    font-family: var(--f-mono);
    font-size: .6rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-bottom: 12px;
    cursor: default;
  }
}
.post-toc__k{
  font-family: var(--f-mono);
  font-size: .6rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 12px;
}
.post-toc ol{ list-style: none; padding: 0; margin: 0; border-inline-start: 1px solid var(--line); }
.post-toc li{ margin: 0; }
.post-toc a{
  display: block;
  padding: 8px 0 8px 15px;
  margin-inline-start: -1px;
  border-inline-start: 2px solid transparent;
  font-size: .86rem;
  line-height: 1.4;
  color: var(--ink-3);
  text-decoration: none;
  transition: color .25s var(--ease), border-color .25s var(--ease);
}
.post-toc a:hover{ color: var(--ink); }
.post-toc a.is-current{ color: var(--ink); border-inline-start-color: var(--teal); font-weight: 500; }

/* on a phone it folds away, so it never eats the first screen */
@media (max-width: 999px){
  .post-aside{ margin-bottom: 8px; }
  .post-toc{
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: var(--surface-2);
    padding: 0;
  }
  .post-toc > summary{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    cursor: pointer;
    list-style: none;
    font-family: var(--f-mono);
    font-size: .62rem;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--ink-2);
  }
  .post-toc > summary::-webkit-details-marker{ display: none; }
  .post-toc > summary::after{
    content: "";
    width: 8px; height: 8px;
    border-right: 1.5px solid currentColor;   /* drawn glyph, not layout: stays physical */
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    transition: transform .3s var(--ease-out);
  }
  .post-toc[open] > summary::after{ transform: rotate(-135deg) translateY(-2px); }
  .post-toc ol{ padding: 0 18px 14px; border-inline-start: 0; }
  .post-toc a{ padding: 7px 0; border-inline-start: 0; }
  .post-toc a.is-current{ color: var(--teal); }
}

/* --------------------------------------------------------------------------
   5. Reading progress
   Tracks the article, not the page — the header, the cover and the footer are
   not things you are reading, and counting them makes the bar lie.
   -------------------------------------------------------------------------- */
.read-progress{
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  z-index: 95;
  background: transparent;
  pointer-events: none;
}
.read-progress span{
  display: block;
  height: 100%;
  width: 100%;
  background: var(--teal);
  transform: scaleX(0);
  transform-origin: 0 50%;
}

/* --------------------------------------------------------------------------
   6. Blocks inside the article, restyled for the reading surface
   -------------------------------------------------------------------------- */
.post-note{
  border-inline-start: 3px solid var(--read-mark);
  background: color-mix(in srgb, var(--read-mark) 7%, transparent);
  border-radius: 0 var(--r) var(--r) 0;
  padding: 18px 22px;
  margin-block: 1.8em;
}
.post-note p{ color: var(--read-ink); font-size: 1em; margin: 0; }

.post-table{ border-color: var(--read-line); }
.post-table th, .post-table td{ border-bottom-color: var(--read-line); }
.post-table thead th{ background: color-mix(in srgb, var(--read-ink) 5%, transparent); color: var(--read-ink-2); }
.post-table tbody th{ color: var(--read-ink); }
.post-table td{ color: var(--read-ink-2); }

.post-related{ border-top-color: var(--read-line); }
.post-related a{ border-color: var(--read-line); color: var(--read-ink); }
.post-related a:hover{ border-color: var(--read-mark); color: var(--read-mark); }
.post-disclaimer{ border-top-color: var(--read-line); color: var(--read-ink-2); opacity: .8; }

/* --------------------------------------------------------------------------
   7. Scroll reveal
   Each block lifts a little as it arrives. Deliberately small: text that
   animates hard is text you have to wait for.
   -------------------------------------------------------------------------- */
.js .post-body [data-r]{
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .6s var(--ease), transform .7s var(--ease-out);
}
.js .post-body [data-r].is-in{ opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce){
  .js .post-body [data-r]{ opacity: 1 !important; transform: none !important; transition: none; }
  .read-progress span{ transition: none; }
}