/* ============================================================
   THE PM CODE — Article Thumbnail System  (v2)
   One ownable device: the MARKER underline. Three surfaces:
   Signal Field (blue), Paper (light), Ink Spotlight (dark).
   Built on the site tokens. Every thumbnail is a container-query
   box (cqw), so one markup renders crisp at any crop.
   ============================================================ */

:root {
  --paper:      #FAFAFA;
  --paper-warm: #F1F1F3;
  --surface:    #FFFFFF;
  --ink:        #0A0A0A;
  --ink-soft:   #2A2A30;
  --mute:       #6B6B73;
  --faint:      #9A9AA3;
  --line:       #E6E6E9;
  --accent:     #2563EB;            /* Signal Blue — the field + the anchor */
  --accent-ink: #FFFFFF;
  --accent-wash:rgba(37,99,235,0.08);
  --font-sans:  'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:  'JetBrains Mono', ui-monospace, monospace;
  --grid-line:  rgba(10,10,10,0.05);
  --shadow-card:0 1px 2px rgba(10,20,60,0.05), 0 14px 40px rgba(10,20,60,0.08);
}

/* ----------------------------------------------------------------
   CATEGORY PALETTE — bright accents tuned to POP on the blue field
   (and to read as a small dot on paper). Blue is the constant
   canvas; the accent is what changes per section.
   ---------------------------------------------------------------- */
:root {
  --cat-start:    #FFFFFF;   /* Start Here          — white on blue */
  --cat-data:     #6FE3DA;   /* Reading the Data    — cyan          */
  --cat-ai:       #B7A6FF;   /* AI for PMs          — periwinkle    */
  --cat-strategy: #FFC857;   /* Strategy & Tradeoffs— amber         */
  --cat-build:    #7DE3A4;   /* Building & Shipping — mint          */
  --cat-users:    #FF9EC4;   /* Talking to Users    — pink          */
  --cat-people:   #FF9E7D;   /* Working With People — coral         */
}

/* ================================================================
   THUMBNAIL FRAME
   ================================================================ */
.tn {
  --cat: var(--accent);
  container-type: inline-size;
  position: relative;
  display: flex; flex-direction: column; justify-content: space-between;
  aspect-ratio: 4 / 3; width: 100%;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-radius: 14px;
  overflow: hidden; isolation: isolate;
  font-family: var(--font-sans);
}
.tn::before {                                   /* signature dotted grid */
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size: 9cqw 9cqw;
}
.tn > * { position: relative; z-index: 1; }

.tn.r-card   { aspect-ratio: 4 / 3; }
.tn.r-og     { aspect-ratio: 1200 / 630; }
.tn.r-square { aspect-ratio: 1 / 1; }
.tn.r-story  { aspect-ratio: 9 / 16; }

/* ---- shared interior ---- */
.tn-pad { padding: 7cqw; display: flex; flex-direction: column; height: 100%; }
.tn-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 3cqw; }

.tn-eyebrow {
  display: inline-flex; align-items: center; gap: 1.8cqw;
  font-family: var(--font-mono); font-weight: 500; font-size: 2.6cqw;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--mute); white-space: nowrap;
}
.tn-dot { width: 2.1cqw; height: 2.1cqw; border-radius: 50%; background: var(--cat); flex-shrink: 0;
  box-shadow: 0 0 0 0.5cqw rgba(255,255,255,0.0); }

.tn-head {
  font-weight: 800; letter-spacing: -0.035em; line-height: 1.1;
  text-wrap: balance; margin-top: auto; font-size: 9cqw;
}
.tn.r-og .tn-head     { font-size: 7.2cqw; }
.tn.r-square .tn-head { font-size: 8.2cqw; }
.tn.r-story .tn-head  { font-size: 8.4cqw; }

/* THE DEVICE — a marker underline under one phrase.
   Native underline so it anchors to THIS word's baseline and can never
   drift into the next line; offset gives it air, thickness makes it a marker. */
.tn-head .mk {
  color: var(--mk-fg, var(--accent));
  text-decoration-line: underline;
  -webkit-text-decoration-line: underline;
  text-decoration-color: var(--mk-line, currentColor);
  -webkit-text-decoration-color: var(--mk-line, currentColor);
  text-decoration-thickness: 0.1em;
  text-underline-offset: 0.18em;
}

.tn-mark {
  width: 7.4cqw; height: 7.4cqw; border-radius: 1.7cqw; flex-shrink: 0;
  background: var(--accent); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 3cqw; letter-spacing: -0.04em;
}
.tn-foot { display: flex; align-items: center; justify-content: space-between; gap: 3cqw; margin-top: 4cqw; }
.tn-wordmark { font-weight: 800; font-size: 3.2cqw; letter-spacing: -0.03em; display: inline-flex; align-items: center; gap: 1.6cqw; }
.tn-meta { font-family: var(--font-mono); font-size: 2.4cqw; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); }

/* ================================================================
   A · SIGNAL FIELD  (blue canvas — the flagship)
   ================================================================ */
.tn.field {
  background: var(--accent); color: #fff; border-color: transparent;
  --grid-line: rgba(255,255,255,0.16);
}
.tn.field .tn-eyebrow { color: rgba(255,255,255,0.82); }
.tn.field .tn-meta    { color: rgba(255,255,255,0.62); }
.tn.field .tn-head    { color: #fff; }
.tn.field .tn-head .mk { --mk-fg: #fff; --mk-line: var(--cat); }   /* white word, category-bright underline */
.tn.field .tn-mark    { background: #fff; color: var(--accent); }
.tn.field .tn-wordmark { color: #fff; }

/* ================================================================
   B · PAPER  (light everyday card)
   ================================================================ */
.tn.paper { background: var(--surface); color: var(--ink); }
.tn.paper .tn-head .mk { --mk-fg: var(--accent); --mk-line: var(--accent); }
.tn.paper .tn-mark { background: var(--accent); color: #fff; }
.tn.paper .tn-wordmark { color: var(--ink); }
.tn.paper .tn-wordmark .pm { color: var(--accent); }

/* ================================================================
   C · INK SPOTLIGHT  (dark + illustration)
   ================================================================ */
.tn.ink {
  background: #0B0B0D; color: #F4F4F5; border-color: #26262C;
  --grid-line: rgba(255,255,255,0.06);
}
.tn.ink .tn-eyebrow { color: #9A9AA3; }
.tn.ink .tn-meta    { color: #6E6E78; }
.tn.ink .tn-head    { color: #F4F4F5; }
.tn.ink .tn-head .mk { --mk-fg: #fff; --mk-line: #6FA0FF; }
.tn.ink .tn-wordmark { color: #fff; }
.tn.ink .tn-art { position: absolute; inset: 0; z-index: 0;
  -webkit-mask-image: linear-gradient(to top, transparent 36%, #000 86%);
          mask-image: linear-gradient(to top, transparent 36%, #000 86%); opacity: 0.92; }
.tn.ink .tn-grad { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to top, #0B0B0D 6%, rgba(11,11,13,0.5) 42%, transparent 72%); }
.tn.ink .tn-pad { justify-content: flex-end; }
.tn.ink .tn-eyebrow, .tn.ink .tn-head, .tn.ink .tn-foot { position: relative; z-index: 2; }
.tn.ink image-slot { width: 100%; height: 100%; display: block; }