/* NEONPALE · Notes — page styles
   Notes-only components. Tokens, the locked wordmark/monogram, the nav, the
   footer, focus rings, and the .plate highlight all come from styles.css —
   this file is loaded AFTER it and only adds what the Notes index and each
   note page need: the intro, the note list, the article body, the sign-off,
   and the .swipe in-headline mark. No tokens or shared chrome are redefined,
   so the Notes pages stay in lockstep with the rest of the site. */

:root {
  /* Comfortable reading measure for the article column. */
  --measure: 66ch;
}

/* Notes share the site rail (--rail-max / --gutter from styles.css). */
.notes-wrap {
  max-width: var(--rail-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* Mono eyebrow · slate on paper, per the design system. */
.notes-eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--slate);
  font-weight: 500;
}

/* ── .swipe · the in-headline mark ──────────────────────────────────────
   A neon plate, never neon text. On paper it is a skewed bottom marker
   (text stays ink); on an ink surface it becomes a full teal plate with
   paper text, matching the wordmark slash. Skewed -4deg, text counter-
   skewed so the glyphs stay upright. */
.swipe {
  display: inline-block;
  transform: skew(-4deg);
  color: var(--ink);
  background: linear-gradient(var(--neon), var(--neon)) no-repeat;
  background-position: 0 100%;
  background-size: 100% 0.40em;
  padding: 0 0.05em;
  margin: 0 0.02em;
  border-radius: 2px;
}
.swipe-t { display: inline-block; transform: skew(4deg); }
/* On an ink surface the mark becomes a full teal plate. It mirrors the
   homepage .plate exactly: an absolute, skewed fill behind upright text that
   hangs below the baseline (bottom: -0.17em) so it encloses g/y/p descenders.
   Being absolute, the fill never changes the line box, so headlines that hold
   it just need a touch more line-height (set on .art-title / .signoff .line). */
.swipe-t { position: relative; z-index: 1; }
.on-ink .swipe {
  position: relative; z-index: 0;
  transform: none; background: none; padding: 0;
  color: var(--paper);
}
.on-ink .swipe-t { transform: none; }
.on-ink .swipe::before {
  content: ''; position: absolute;
  left: -0.12em; right: -0.12em; top: -0.02em; bottom: -0.17em;
  background: var(--teal);
  border-radius: 12px;
  transform: skew(-4deg);
  z-index: -1;
}

/* ─────────────────────────  INTRO BLOCK  ─────────────────────────────
   Paper. First person. One decisive neon mark, not a wall of colour. */
.intro { padding: 76px 0 8px; }
.intro .notes-eyebrow { margin: 0 0 22px; }
.intro h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(44px, 6.4vw, 88px);
  line-height: 0.94;
  letter-spacing: -0.045em;
  margin: 0;
  color: var(--ink);
}
.intro .lede {
  font-size: clamp(18px, 1.9vw, 21px);
  line-height: 1.5;
  max-width: 60ch;
  margin: 26px 0 0;
  color: var(--ink);
}
.intro .lede .first { font-weight: 600; }

/* ──────────────────────  NOTES LIST  ─────────────────────────────────
   One scalable pattern: the newest note is a featured card, older notes
   are uniform rows beneath it. With a single note it renders as one
   confident card and never looks empty. Newest first is just source order.
   See the comment block in notes/index.html for how to add a note. */
.notes-list { padding: 30px 0 104px; }
.list-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 24px; padding-bottom: 22px; margin-bottom: 6px;
  border-bottom: 1.5px solid var(--ink);
}
.list-head .label {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(22px, 3vw, 32px); letter-spacing: -0.03em; margin: 0;
}
.list-head .count {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--slate);
  white-space: nowrap; flex-shrink: 0;
}

/* ── Featured card · the newest note ── */
.feat {
  position: relative; display: grid; grid-template-columns: 1fr 220px; gap: 44px;
  border-radius: var(--radius-xl); padding: 46px 46px 40px;
  background: var(--ink); color: var(--paper);
  transition: transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s ease;
}
.feat:hover { transform: translateY(-4px); box-shadow: 0 30px 70px -30px rgba(14,18,10,0.5); }
.feat-tags { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 24px; }
.plate-latest {
  background: var(--neon); color: var(--ink);
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  padding: 6px 12px; border-radius: 999px;
}
.feat-series {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--paper); white-space: nowrap;
}
.feat-series::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--neon); flex-shrink: 0; }
.feat-series.cat-coral::before { background: var(--coral); }
.feat-series.cat-teal::before { background: var(--teal); }
.feat-title {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(30px, 4vw, 50px); line-height: 1.02; letter-spacing: -0.04em;
  color: var(--paper); margin: 0 0 20px; max-width: 18ch;
}
.feat-desc {
  font-size: clamp(16px, 1.7vw, 19px); line-height: 1.55;
  color: var(--paper); max-width: 54ch; margin: 0 0 30px;
}
.feat-cue {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--neon); color: var(--ink);
  font-family: var(--font-mono); font-size: 12px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 12px 20px; border-radius: 999px; white-space: nowrap;
  transition: gap .22s ease;
}
.feat:hover .feat-cue { gap: 15px; }
.feat-rail {
  border-left: 1.5px solid color-mix(in oklab, var(--paper) 20%, transparent);
  padding-left: 28px; display: flex; flex-direction: column; gap: 20px;
}
.feat-rail .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--neon); }
.feat-rail .ri { display: flex; flex-direction: column; gap: 5px; }
.feat-rail .rl {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--paper);
}
.feat-rail .rv { font-family: var(--font-display); font-size: 17px; font-weight: 500; color: var(--paper); }
.feat + .note-row { margin-top: 26px; }

/* ── Note row · older notes ── */
.note-row {
  position: relative; display: grid;
  grid-template-columns: 1fr auto; gap: 18px 40px; align-items: center;
  padding: 36px 32px; border-radius: var(--radius-lg);
  transition: background .22s ease, box-shadow .22s ease;
}
.note-row::after {
  content: ''; position: absolute; left: 32px; right: 32px; bottom: 0; height: 1px;
  background: color-mix(in oklab, var(--ink) 13%, transparent);
  transition: opacity .2s ease;
}
.note-row:last-child::after { opacity: 0; }
.note-row, .nr-title, .nr-desc, .nr-meta, .nr-cat, .nr-sep, .nr-arrow, .nr-accent {
  transition: color .2s ease, background .22s ease, box-shadow .22s ease, transform .22s ease;
}
.note-row:hover { background: var(--ink); box-shadow: 0 26px 62px -30px rgba(14,18,10,0.55); }
.note-row:hover::after { opacity: 0; }
.note-row:hover .nr-title { color: var(--paper); }
.note-row:hover .nr-accent { color: var(--neon); }
.note-row:hover .nr-desc { color: var(--paper); }
.note-row:hover .nr-meta { color: var(--paper); }
.note-row:hover .nr-cat { color: var(--paper); }
.note-row:hover .nr-sep { color: color-mix(in oklab, var(--paper) 40%, transparent); }
.note-row:hover .nr-arrow { color: var(--neon); transform: translateX(7px); }
.nr-meta {
  display: flex; align-items: center; flex-wrap: wrap; gap: 11px;
  margin-bottom: 16px;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--slate);
}
.nr-meta > span { white-space: nowrap; }
.nr-cat { display: inline-flex; align-items: center; gap: 10px; font-weight: 500; letter-spacing: 0.13em; color: var(--ink); }
.nr-cat::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--neon); flex-shrink: 0; }
.nr-cat.cat-coral::before { background: var(--coral); }
.nr-cat.cat-teal::before  { background: var(--teal); }
.nr-sep { color: color-mix(in oklab, var(--ink) 28%, transparent); }
.nr-title {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(27px, 3.4vw, 44px); line-height: 1.04; letter-spacing: -0.035em;
  margin: 0 0 14px; max-width: 24ch; color: var(--ink);
}
.nr-desc {
  font-size: clamp(16px, 1.55vw, 18px); line-height: 1.55;
  color: var(--ink); max-width: 70ch; margin: 0;
}
.nr-arrow {
  font-family: var(--font-display); font-size: 30px; line-height: 1;
  color: var(--ink); justify-self: end; transition: transform .22s ease;
}

/* ───────────────────────  SIGN-OFF (ink)  ───────────────────────────
   Reusable page furniture. Ink surface, so the slash → teal per the DS.
   Sits at the foot of the index and at the foot of every note. */
.signoff { background: var(--ink); color: var(--paper); padding: 104px 0; }
.signoff .inner { max-width: 880px; }
.signoff .notes-eyebrow {
  color: var(--paper);
  display: inline-flex; align-items: center; gap: 12px; margin: 0 0 32px;
}
.signoff .notes-eyebrow::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--neon); }
/* Two-tier statement: a larger lead line carrying the teal plate, then a
   quieter enumerated line beneath it with extra breathing room above. */
.signoff .line {
  font-family: var(--font-display); font-weight: 500; letter-spacing: -0.035em;
  margin: 0 0 28px; color: var(--paper);
}
.signoff .line-lead {
  display: block;
  font-size: clamp(32px, 4.8vw, 54px); line-height: 1.14;
}
.signoff .line-rest {
  display: block; margin-top: 0.5em; max-width: 26ch;
  font-size: clamp(23px, 3vw, 36px); line-height: 1.3;
}
.signoff .invite {
  font-size: clamp(18px, 2vw, 21px); line-height: 1.55;
  color: var(--paper); max-width: 44ch; margin: 0 0 44px;
}
.signoff .actions { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.signoff .mail {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--neon); color: var(--ink);
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(17px, 1.8vw, 21px); letter-spacing: -0.02em;
  padding: 16px 26px; border-radius: 999px; border: 2px solid var(--ink);
  transition: transform .2s ease;
}
.signoff .mail:hover { transform: translateY(-2px); }
.signoff .mail .arr { transition: transform .2s ease; }
.signoff .mail:hover .arr { transform: translateX(4px); }
.signoff .linkedin {
  font-size: 16px; font-weight: 500; color: var(--paper);
  border-bottom: 1.5px solid color-mix(in oklab, var(--paper) 36%, transparent);
  padding-bottom: 2px; transition: border-color .2s ease;
}
.signoff .linkedin:hover { border-color: var(--teal); }

/* ─────────────────────────  ARTICLE  ────────────────────────────────── */
.art-head { background: var(--ink); color: var(--paper); padding: 90px 0 66px; }
.art-back {
  display: inline-flex; width: fit-content; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 12px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--paper);
  margin-bottom: 48px; transition: gap .18s ease;
}
.art-back:hover { gap: 12px; }
.art-series {
  font-family: var(--font-mono); font-size: 12px; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--paper);
  display: inline-flex; align-items: center; gap: 12px; margin-bottom: 28px;
}
.art-series::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--neon); }
.art-title {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(40px, 6.4vw, 88px); line-height: 1.04; letter-spacing: -0.045em;
  max-width: 16ch; color: var(--paper); margin: 0;
}
.art-byline {
  display: flex; gap: 22px; flex-wrap: wrap; align-items: center; margin-top: 38px;
  font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.04em; color: var(--paper);
}
.art-byline > span:not(.sep) { white-space: nowrap; }
.art-byline .sep { width: 5px; height: 5px; border-radius: 50%; background: color-mix(in oklab, var(--paper) 40%, transparent); }

.art-body { padding: 64px 0 96px; background: var(--paper); }
.art-body .col { max-width: var(--measure); }
.art-body .standfirst {
  font-size: clamp(15px, 1.6vw, 17px); font-style: italic; color: var(--slate);
  margin: 0 0 24px; line-height: 1.55; max-width: 56ch;
}
.art-body .thesis {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(23px, 2.9vw, 32px); line-height: 1.22; letter-spacing: -0.025em;
  margin: 0 0 48px; color: var(--ink); max-width: 26ch;
}
.art-body h2 {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(26px, 3.4vw, 38px); line-height: 1.05; letter-spacing: -0.03em;
  margin: 56px 0 22px; max-width: 20ch; color: var(--ink);
}
.art-body p {
  font-size: clamp(17px, 1.55vw, 19px); line-height: 1.72;
  margin: 0 0 24px; color: var(--ink); text-wrap: pretty;
}
.art-body p b, .art-body p strong { font-weight: 600; }
.art-body .rule { height: 1.5px; background: var(--ink); border: 0; margin: 56px 0 40px; max-width: 64px; }
.art-body .endnote { font-size: 15px; font-style: italic; color: var(--slate); line-height: 1.6; margin-top: 40px; }

/* Return-to-index link at the foot of an article. */
.art-nav { border-top: 1.5px solid var(--ink); background: var(--paper); }
.art-nav .notes-wrap { padding-top: 34px; padding-bottom: 76px; display: flex; }
.art-nav a {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  font-family: var(--font-mono); font-size: 13px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--slate);
  transition: color .18s ease, gap .18s ease;
}
.art-nav a:hover { color: var(--ink); gap: 12px; }

/* ─────────────────────────  RESPONSIVE  ─────────────────────────────── */
@media (max-width: 719px) {
  .note-row { grid-template-columns: 1fr; gap: 0; padding: 28px 6px; }
  .note-row::after { left: 6px; right: 6px; }
  .nr-arrow { display: none; }
  .feat { grid-template-columns: 1fr; gap: 30px; padding: 34px 26px 30px; border-radius: var(--radius-lg); }
  .feat-rail {
    border-left: 0; border-top: 1.5px solid color-mix(in oklab, var(--paper) 20%, transparent);
    padding-left: 0; padding-top: 24px; flex-direction: row; flex-wrap: wrap; gap: 22px 36px;
  }
  .intro { padding: 64px 0 4px; }
}