/* ============================================================================
   editorial.css — the /thinking/ reading experience. Loads AFTER style.css and
   consumes css/tokens.css only. Same rule as style.css: no literal colours,
   font stacks, type sizes, or spacing values below this line — if you need one,
   add it to tokens.css.

   The homepage is a poster; these pages are the opposite. One column, one
   measure, almost no chrome. The only two fixed elements are the nav pill
   (top-left) and the token editor (bottom-right), which are the site's
   signature and stay put.
   ============================================================================ */

  /* ---------- SHELL ----------
     Top inset clears the fixed .site-nav pill, which bottoms out around 58px
     at comfortable density. */
  .reading{
    max-width:var(--cm-measure-article);
    margin:0 auto;
    padding:var(--cm-space-14) var(--cm-inset-page-sm) var(--cm-space-16);
  }

  /* ---------- MASTHEAD (shared by the index and each issue) ---------- */
  .masthead{ margin-bottom:var(--cm-space-12); }
  .masthead__eyebrow{
    display:block; margin-bottom:var(--cm-space-5);
    font-family:var(--cm-font-mono); font-size:var(--cm-type-mono-sm);
    letter-spacing:var(--cm-tracking-wide); text-transform:uppercase;
    color:var(--cm-accent);
  }
  .masthead__title{
    margin:0; font-family:var(--cm-font-serif); font-weight:500;
    font-size:var(--cm-type-article-h1); line-height:var(--cm-leading-snug);
    letter-spacing:var(--cm-tracking-tight); color:var(--cm-text-primary);
    text-wrap:balance;
  }
  .masthead__dek{
    margin:var(--cm-space-6) 0 0; max-width:34em;
    font-family:var(--cm-font-serif); font-weight:300;
    font-size:var(--cm-type-article); line-height:var(--cm-lead-article);
    color:var(--cm-text-secondary);
  }
  .masthead__meta{
    margin:var(--cm-space-6) 0 0;
    font-family:var(--cm-font-mono); font-size:var(--cm-type-mono-xs);
    letter-spacing:var(--cm-tracking-mono); color:var(--cm-text-secondary);
  }
  .masthead__rule{
    height:1px; background:var(--cm-rule); border:0;
    margin:var(--cm-space-9) 0 0;
  }

  /* ---------- ARTICLE BODY ---------- */
  .prose{ color:var(--cm-text-primary); }
  /* Body runs at --cm-text-primary, unlike body copy elsewhere on the site.
     Everywhere else it sits under a heading as a two-line caption, where
     secondary is correct. Here it IS the page — 1000 words of it — and setting
     it secondary makes the supporting beats brighter than the substance.
     Emphasis comes from size and style instead. */
  .prose > p{
    margin:0 0 var(--cm-space-7);
    font-family:var(--cm-font-serif); font-weight:300;
    font-size:var(--cm-type-article); line-height:var(--cm-lead-article);
    color:var(--cm-text-primary);
  }
  /* The standfirst. Sets the register before the reader commits. */
  .prose > p.lead{
    font-size:var(--cm-type-article-lead); font-weight:400;
    color:var(--cm-text-primary); margin-bottom:var(--cm-space-9);
  }
  /* Cody's copy already breaks into one-line beats between arguments — these
     are set as the pivots they are rather than as ordinary paragraphs. */
  .prose > p.beat{
    font-size:var(--cm-type-article-lead); font-style:italic;
    font-weight:400; color:var(--cm-text-primary);
    margin:var(--cm-space-9) 0; text-wrap:balance;
  }
  /* A closing couplet ("The work isn't X. / The work is Y.") is two beats that
     belong together — the full beat gap between them reads as two ideas. */
  .prose > p.beat + p.beat{ margin-top:calc(var(--cm-space-9) * -0.55); }
  .prose h2{
    margin:var(--cm-space-12) 0 var(--cm-space-6);
    font-family:var(--cm-font-serif); font-weight:500;
    font-size:var(--cm-type-article-h2); line-height:var(--cm-leading-snug);
    letter-spacing:var(--cm-tracking-snug); color:var(--cm-text-primary);
    text-wrap:balance;
  }
  .prose strong{ color:var(--cm-text-primary); font-weight:600; }
  .prose em{ font-style:italic; }

  /* A raw hex is a token value, so it gets the mono voice the token editor
     uses rather than sitting in the serif reading face. */
  .prose code{
    font-family:var(--cm-font-mono); font-size:0.86em;
    letter-spacing:var(--cm-tracking-mono);
    color:var(--cm-accent);
    background:var(--cm-surface-raised);
    border:1px solid var(--cm-rule); border-radius:var(--cm-radius-xs);
    padding:0.14em 0.42em;
  }

  /* The closing "ask three questions" set. Numbered in mono off the left so the
     prose measure is not indented away from the rest of the column. */
  .prose ol.asks{
    list-style:none; counter-reset:ask;
    margin:var(--cm-space-9) 0; padding:0;
  }
  .prose ol.asks > li{
    counter-increment:ask; position:relative;
    padding-left:var(--cm-space-8); margin-bottom:var(--cm-space-7);
    font-family:var(--cm-font-serif); font-weight:300;
    font-size:var(--cm-type-article); line-height:var(--cm-lead-article);
    color:var(--cm-text-primary);
  }
  .prose ol.asks > li::before{
    content:counter(ask, decimal-leading-zero);
    position:absolute; left:0; top:0.34em;
    font-family:var(--cm-font-mono); font-size:var(--cm-type-mono-xs);
    letter-spacing:var(--cm-tracking-mono); color:var(--cm-accent);
  }

  /* ---------- SIGN-OFF ---------- */
  .colophon{
    margin-top:var(--cm-space-14); padding-top:var(--cm-space-9);
    border-top:1px solid var(--cm-rule);
  }
  .colophon p{
    margin:0; font-family:var(--cm-font-serif); font-weight:300;
    font-size:var(--cm-type-body); line-height:var(--cm-lead-body);
    color:var(--cm-text-secondary);
  }
  .colophon__next{
    display:block; margin-top:var(--cm-space-7);
    font-family:var(--cm-font-mono); font-size:var(--cm-type-mono-xs);
    letter-spacing:var(--cm-tracking-mono); color:var(--cm-text-tertiary);
  }

  /* ---------- INDEX LIST ---------- */
  .issues{ list-style:none; margin:0; padding:0; }
  .issues > li{ border-top:1px solid var(--cm-rule); }
  .issues > li:last-child{ border-bottom:1px solid var(--cm-rule); }
  .issue{
    display:block; padding:var(--cm-space-9) 0; text-decoration:none;
    transition:opacity var(--cm-dur-fast) var(--cm-ease);
  }
  .issue:hover{ opacity:0.72; }
  .issue:focus-visible{ outline:2px solid var(--cm-accent); outline-offset:4px; }
  .issue__no{
    display:block; margin-bottom:var(--cm-space-3);
    font-family:var(--cm-font-mono); font-size:var(--cm-type-mono-xs);
    letter-spacing:var(--cm-tracking-wide); text-transform:uppercase;
    color:var(--cm-accent);
  }
  .issue__title{
    margin:0 0 var(--cm-space-3); font-family:var(--cm-font-serif);
    font-weight:500; font-size:var(--cm-type-article-h2);
    line-height:var(--cm-leading-snug); letter-spacing:var(--cm-tracking-snug);
    color:var(--cm-text-primary); text-wrap:balance;
  }
  .issue__dek{
    margin:0 0 var(--cm-space-4); font-family:var(--cm-font-serif);
    font-weight:300; font-size:var(--cm-type-body);
    line-height:var(--cm-lead-body); color:var(--cm-text-secondary);
  }
  .issue__meta{
    font-family:var(--cm-font-mono); font-size:var(--cm-type-mono-2xs);
    letter-spacing:var(--cm-tracking-mono); color:var(--cm-text-tertiary);
  }
  /* Placeholder row for the issue that hasn't shipped yet — same rhythm as a
     real row, visibly inert. */
  .issue--upcoming{
    display:block; padding:var(--cm-space-9) 0; opacity:0.5;
  }

  /* ---------- MOBILE ----------
     Only the shell inset moves. Type sizes are already fluid or deliberately
     fixed, and the measure collapses on its own well before this breakpoint. */
  @media (max-width:768px){
    .reading{
      padding-top:var(--cm-space-16);
      padding-bottom:var(--cm-space-14);
    }
    /* The two places set at lead size — the standfirst and the beats — are the
       only type that reads as oversized at this width. */
    .prose > p.lead,
    .prose > p.beat{ font-size:var(--cm-type-article-lead-m); }
  }