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