/* ============================================================================
   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);
  }

  /* ---------- SITE FOOTER ----------
     Deliberately NOT re-measured to the article column: the footer keeps the
     homepage's .wrap geometry site-wide so it reads as the same component
     everywhere. It runs wider than the prose on these pages by design. */

  /* ---------- 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);
    text-wrap:pretty;
  }
  .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);
    /* Pulls a word down from the second-to-last line rather than leaving one
       stranded alone on the last. Does it per width, so it keeps working at
       375px and 1280px — which a hard <br> cannot. Browsers without support
       simply ignore it and wrap as before. */
    text-wrap:pretty;
  }
  /* 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); }

  /* Lets a long beat keep its emphasis without setting forty words in large
     italic. The opening clause stays in the beat voice, the remainder drops to
     reading size, and both live inside the same <p> so the sentence itself is
     never split — only its typography is.

     Set as a block, not an inline size change. Inline, the remainder inherits
     the line box struck by the 24px italic and ends up as 19px text sitting on
     41px of leading, which reads as stranded; and the mismatch inverts at the
     mobile beat size, where the two font sizes are almost equal. As a block it
     carries its own leading and the italic/roman contrast does the work at
     every width. */
  .beat__rest{
    display:block; margin-top:var(--cm-space-4);
    font-size:var(--cm-type-article);
    font-style:normal; font-weight:300;
    line-height:var(--cm-lead-article);
    text-wrap:pretty;
  }
  .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);
    text-wrap:pretty;
  }
  .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);
    text-wrap:pretty;
  }
  .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);
  }

  /* ---------- END OF ISSUE ----------
     Sits after the colophon: the reader has finished, and now knows who wrote
     it. Left-aligned rather than centred so it stays on the same axis as the
     prose column above it. */
  /* Button and secondary link sit on one baseline, link to the right of the
     chip and optically centred against it. Wraps rather than overflowing if a
     future CTA label runs long at 375px. */
  .article-end{
    margin-top:var(--cm-space-11);
    display:flex; flex-direction:row; align-items:center;
    flex-wrap:wrap; gap:var(--cm-space-6);
  }

  /* The Lightspeed chip's visual language, made static and interactive.
     .speedup-btn itself can't be reused — it's a fixed-position, opacity:0,
     pointer-events:none element driven by showcase-speedup.js. Same mono
     uppercase, inverted fill, pill radius, chip padding and lift shadow;
     :active inverts exactly like .speedup-btn.is-pressed does. */
  .btn-chip{
    display:inline-flex; align-items:center;
    font-family:var(--cm-font-mono); font-size:var(--cm-type-mono-md);
    letter-spacing:var(--cm-tracking-btn); text-transform:uppercase;
    color:var(--cm-btn-invert-text); background:var(--cm-btn-invert-fill);
    border-radius:var(--cm-radius-pill);
    padding:var(--cm-pad-chip-y) var(--cm-pad-chip-x);
    text-decoration:none; box-shadow:var(--cm-shadow-lift);
    transition:background var(--cm-dur-fast) ease, color var(--cm-dur-fast) ease,
               box-shadow var(--cm-dur-fast) ease;
  }
  /* Hover and press are the same gesture: the fill and label reverse. No lift —
     movement was a second signal competing with the colour change.

     Not a literal swap, though. --cm-btn-invert-text resolves to the page
     ground in BOTH themes (n-900 on dark, n-50 on light), so inverting straight
     would drain the pill into the background and leave the label floating with
     no shape. Draining to that colour but drawing the outline in currentColor
     gives a true reversed state that still reads as a button. Dropping the lift
     shadow at the same time is what makes it feel pressed. */
  .btn-chip:hover,
  .btn-chip:active{
    background:var(--cm-btn-invert-text);
    color:var(--cm-btn-invert-fill);
    box-shadow:inset 0 0 0 1px currentColor;
  }
  .btn-chip:focus-visible{ outline:2px solid var(--cm-accent); outline-offset:3px; }

  /* ---------- INDEX LIST ---------- */
  .issues{ list-style:none; margin:0; padding:0; }
  .issues > li{ border-top:1px solid var(--cm-rule); }
  /* No border-bottom on the last item: the footer's own top rule now closes
     the list, and the two together read as a doubled divider. */
  .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);
    text-wrap:pretty;
  }
  .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);
  }
  /* ---------- SHARED INLINE LINK ----------
     The "Read more" cue on the index and the back-link at the end of an issue
     are the same affordance, so they share one treatment. Accent plus an
     underline, because in a page with almost no chrome an underline is the
     only unambiguous signal that something is a link. */
  .text-link,
  .issue__more{
    color:var(--cm-accent);
    text-decoration:underline;
    text-underline-offset:0.18em;
    text-decoration-thickness:1px;
  }
  .text-link{
    font-family:var(--cm-font-serif); font-size:var(--cm-type-body);
    white-space:nowrap;
  }
  .text-link:hover{ color:var(--cm-accent-strong); }

  /* Touch affordance, mobile only. The whole row is already the link, but on a
     phone there is no hover to reveal that — .issue:hover does the job on
     pointer devices, so this stays hidden there rather than doubling up. It is
     a cue inside the existing anchor, not a second link. */
  .issue__more{ display:none; }
  /* 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); }

    /* Colour and underline come from the shared rule above; only the reveal is
       breakpoint-specific. Held on one line so it never breaks across the wrap
       and stops looking like a control. */
    .issue__more{ display:inline; white-space:nowrap; }
  }