/* ════════════════════════════════════════════════════════════════════════════
   OCTA — CREATOR SPOTLIGHT: /kit/spotlight.css (24 Eyl 2026; 3_tasarim.md §2.4-§2.6, §3)

   Two surfaces, both inside main.blogscope and loaded AFTER /kit/blog.css:
     A. the feature page   main.blogscope.spot   /creators/spotlight/<slug>
     B. the hub card       main.blogscope .spf   /creators, page 1 only
   Every rule is scoped; nothing else on any page moves.

   The approved /blog page carried its layout in inline style= attributes. The /creators/*
   CSP has no 'unsafe-inline' for style-src, so each one lives here as a class, with the
   values the approved page used. The creator format's own sheet stays untouched (K-7).

   Laws kept from aurora-blog.css: no dot is decoration (dashes only), amber is a number and
   nothing else, the kit's own breakpoints only (1000, 640, 560, 300), no new token.
   ════════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────────────
   A1. THE PROSE RHYTHM
   In the creator format `main.blogscope .prose p{margin:0}` (0,2,2) outranks
   `.prose > * + *{margin-top:1.15em}` (0,2,1), so paragraphs sit flush (measured:
   margin-top 0px in Edge 153). The approved feature was set with a paragraph gap;
   this restores it for the feature only. Pull quotes keep their own 1.9em.
   ───────────────────────────────────────────────────────────────────────── */
main.blogscope.spot .prose > p:not(.pull){ margin:1.15em 0 0 }
main.blogscope.spot .prose > h2 + p:not(.pull){ margin-top:0 }
main.blogscope.spot .prose > h2:first-child{ margin-top:0 }

/* ─────────────────────────────────────────────────────────────────────────────
   A2. THE HERO: copy on the left, the cover and the preview card on the right
   ───────────────────────────────────────────────────────────────────────── */
main.blogscope .sp-copy{ min-width:0 }
/* the kicker names the feature and its subject, so on a phone it wraps: give its lines air */
main.blogscope .sp-copy .eyebrow{ line-height:1.6 }
/* The byline's last child is the hidden PAPER toggle, so the format's `span:not(:last-child)`
   dash also landed after "5 min read" and the line ended in a stray dash. The last SPAN ends it. */
main.blogscope.spot .dmeta span:last-of-type::after{ content:none }
main.blogscope .sp-disc{
  margin:14px 0 0; max-width:62ch;
  font:400 13px/1.7 var(--f-ui); color:var(--ink3);
}
main.blogscope .sp-stack{ display:grid; grid-template-columns:minmax(0,1fr); gap:14px; margin-top:26px }
main.blogscope .sp-cover{ margin:0; min-width:0 }
main.blogscope .sp-cover img{
  display:block; width:100%; height:auto; aspect-ratio:1/1; object-fit:cover; border-radius:22px;
  box-shadow: 0 0 0 1px var(--hair), 0 30px 70px -30px oklch(3% .01 268 / 1), 0 0 60px -20px oklch(63% .21 295 / .25);
}

/* the preview card: the native track card's surface (aurora-blog.css §17), byte for byte */
main.blogscope .sp-play{
  position:relative; min-width:0; min-height:180px; padding:14px 16px;
  border-radius:var(--r-slab); border:var(--surf-border);
  background: linear-gradient(180deg, oklch(22% .05 268 / .30), oklch(15% .04 268 / .46));
  box-shadow: var(--surf-ring);
}
main.blogscope[data-ink="paper"] .sp-play{ background:var(--rail); box-shadow:var(--surf-shadow) }
main.blogscope .sp-k{
  margin:0; font:500 9.5px/1.2 var(--mono); letter-spacing:.24em; text-transform:uppercase;
  color:var(--ink3); font-variant-numeric: lining-nums;
}
main.blogscope .sp-t{
  margin:3px 0 0; font:450 19px/1.25 var(--f-ui); letter-spacing:-.012em; color:var(--ink);
  overflow-wrap:anywhere;
}
main.blogscope .sp-a{ margin:2px 0 0; font:400 13.5px/1.4 var(--f-ui); color:var(--ink3) }
main.blogscope .sp-ctl{ display:flex; flex-wrap:wrap; gap:10px 14px; align-items:center; min-height:46px; margin-top:10px }
/* without JavaScript the card's control is this link: a 44 px target, like every control here */
main.blogscope .sp-play .sp-alt{ min-height:44px }
main.blogscope .sp-note{ margin:10px 0 0; max-width:46ch; font:400 12.5px/1.45 var(--f-ui); color:var(--ink3) }
/* the player, once the reader asked for it: the frame takes the card's box */
main.blogscope .sp-play[data-state="loaded"]{
  min-height:152px; padding:0; border:0; background:none; box-shadow:none;
}
main.blogscope .sp-frame{ display:block; width:100%; height:152px; border:0; border-radius:12px }

@media (min-width:1001px){
  main.blogscope .chero.sp-hero{
    display:grid; grid-template-columns:minmax(0,1fr) clamp(260px,25vw,320px);
    column-gap:clamp(32px,4vw,56px); align-items:start;
  }
  main.blogscope .sp-hero > .sp-copy{ grid-column:1; grid-row:1 }
  /* 27 px = the eyebrow's line (9 px) + the h1's own margin-top (18 px): the cover's top edge
     sits on the headline's */
  main.blogscope .sp-hero > .sp-stack{ grid-column:2; grid-row:1; margin-top:27px }
  main.blogscope .sp-hero > hr.hair{ grid-column:1 / -1 }
  main.blogscope .chero.sp-hero h1{ font-size:clamp(36px, 4.6vw, 68px) }
}
@media (max-width:1000px){
  main.blogscope .sp-stack{ grid-template-columns:clamp(160px, 26vw, 240px) minmax(0,1fr); gap:18px; align-items:end }
}
@media (max-width:640px){
  main.blogscope .sp-stack{ grid-template-columns:96px minmax(0,1fr); gap:14px; align-items:start }
  main.blogscope .sp-cover img{ border-radius:14px }
  main.blogscope .sp-stack[data-state="loaded"]{ grid-template-columns:minmax(0,1fr) }
  main.blogscope .sp-stack[data-state="loaded"] .sp-cover{ display:none }
}
/* A 320 px phone leaves 232 px of leaf: beside a 96 px tile the card had 90 px and the
   Listen pill (about 115 px) ran out of it. The tile shrinks, the card and the pill tighten
   (the native card's own narrow values), and nothing leaves its box down to 301 px. */
@media (max-width:560px){
  main.blogscope .sp-stack{ grid-template-columns:72px minmax(0,1fr); gap:12px }
  main.blogscope .sp-play{ padding:12px 14px }
  main.blogscope .sp-play .tplay{ padding:0 14px 0 12px; gap:8px; letter-spacing:.1em }
  main.blogscope .sp-t{ font-size:17px }
}
@media (max-width:300px){
  main.blogscope .sp-stack{ grid-template-columns:minmax(0,1fr) }
  main.blogscope .sp-cover{ max-width:120px }
}

/* ─────────────────────────────────────────────────────────────────────────────
   A3. FIGURES — the press photograph under the hero, the square cover in the text
   ───────────────────────────────────────────────────────────────────────── */
main.blogscope .sp-lead{ margin:clamp(26px, 3vw, 40px) auto 0; max-width:760px }
main.blogscope .sp-lead img{
  display:block; width:100%; height:auto; border-radius:var(--r-slab);
  box-shadow: 0 0 0 1px var(--hair), 0 30px 70px -30px oklch(3% .01 268 / 1), 0 0 60px -20px oklch(63% .21 295 / .25);
}
main.blogscope .sp-lead figcaption,
main.blogscope .prose .fig.sp-sq figcaption{
  margin-top:14px; max-width:64ch; font:400 13.5px/1.6 var(--f-ui); letter-spacing:0;
  text-transform:none; color:var(--ink3);
}
main.blogscope .prose .fig.sp-sq{ margin:30px 0 26px; max-width:440px }
main.blogscope .prose .fig.sp-sq img{ border-radius:18px; box-shadow:0 0 0 1px var(--hair); border:0 }

/* ─────────────────────────────────────────────────────────────────────────────
   A4. THE BOXES — the approved callouts, in the kit's own .callout
   Set in the interface face, as the approved page set them: a box beside the
   prose reads as a box, not as more prose.
   ───────────────────────────────────────────────────────────────────────── */
main.blogscope .prose .callout{ font-family:var(--f-ui) }
main.blogscope .prose .callout p + p{ margin-top:.8em }
main.blogscope .prose .sp-facts{ margin:30px 0 }
main.blogscope .prose .sp-facts ul{
  list-style:none; margin:6px 0 0; padding:0;
  display:grid; grid-template-columns:1fr 1fr; gap:12px 26px; font-variant-numeric: tabular-nums;
}
main.blogscope .prose .sp-facts li{ margin:.45em 0; padding-left:.2em }

main.blogscope .prose .sp-release{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(min(230px, 100%), 1fr));
  gap:22px 28px; align-items:center; margin:38px 0 8px;
}
main.blogscope .prose .sp-release figure{ margin:0; min-width:0 }
main.blogscope .prose .sp-release img{
  display:block; width:100%; height:auto; aspect-ratio:1/1; object-fit:contain;
  border-radius:14px; box-shadow:0 0 0 1px var(--hair);
}
main.blogscope .prose .sp-release > div{ min-width:0 }
main.blogscope .prose .sp-release .sp-rt{
  margin:0; color:var(--ink); font-size:clamp(20px, 2vw, 24px); line-height:1.25; letter-spacing:-.015em;
}
main.blogscope .prose .sp-release .sp-rm{ margin:6px 0 0; color:var(--ink3); font-size:14px }
main.blogscope .prose .sp-release .sp-rm + p{ margin:16px 0 0 }
main.blogscope .prose .sp-release .sp-rl{ margin:18px 0 0; display:flex; flex-wrap:wrap; gap:12px 26px }

/* the 90/10 line: the largest type in the piece, no rule, the serif's gradient tail */
main.blogscope .prose .pull.sp-big{
  border-left:0; padding-left:0; margin:34px 0 10px; max-width:30ch;
  font-size:clamp(21px, 2.5vw, 32px); line-height:1.22; letter-spacing:-.024em; font-weight:300;
}

/* the black band: the logo JPEG's own ground is black, so the band shows it seamlessly */
main.blogscope .prose .sp-end{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap:26px; align-items:center; margin:48px 0 6px; padding:26px; border-radius:22px; background:#000;
}
main.blogscope .prose .sp-end figure{ margin:0; min-width:0 }
main.blogscope .prose .sp-end img{ display:block; width:100%; height:auto }
main.blogscope .prose .sp-end figcaption{
  margin-top:14px; font:400 13px/1.6 var(--f-ui); letter-spacing:0; text-transform:none; color:var(--ink3);
}
main.blogscope .prose .sp-end .callout{ margin:0 }
main.blogscope .prose .sp-about{ margin:26px 0 0 }

@media (max-width:560px){
  main.blogscope .prose .sp-facts ul{ grid-template-columns:minmax(0,1fr) }
  main.blogscope .prose .sp-end{ padding:18px }
  /* the colophon's two pills carry long words; on a phone they wrap inside the pill */
  main.blogscope.spot .colophon .abtn{
    white-space:normal; height:auto; min-height:46px; padding:12px 20px; line-height:1.35; text-align:center;
    text-wrap:balance;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   B. THE HUB CARD — /creators, page 1, under the hero band (3_tasarim.md §3)
   The native card surface; the whole card is one link. Cyan kicker (amber is
   for numbers), a pill for the preview, no dot anywhere.
   ───────────────────────────────────────────────────────────────────────── */
main.blogscope .spf{ margin-top:clamp(28px, 4vw, 48px) }
main.blogscope .spf-a{
  display:grid; grid-template-columns:minmax(0,300px) minmax(0,1fr); gap:clamp(20px, 3vw, 40px);
  align-items:center; padding:clamp(14px, 1.6vw, 20px);
  border-radius:var(--r-slab); border:var(--surf-border); text-decoration:none; color:inherit;
  background: linear-gradient(180deg, oklch(22% .05 268 / .30), oklch(15% .04 268 / .46));
  box-shadow: var(--surf-ring);
  transition: transform .55s var(--spring), box-shadow .5s var(--glide);
}
main.blogscope .spf-a:hover{
  transform:translateY(-2px);
  box-shadow: var(--surf-ring), 0 0 0 1px oklch(87% .13 205 / .40), 0 22px 54px -22px oklch(4% .02 270 / .95);
}
main.blogscope .spf-a:focus-visible{ outline:2px solid var(--focus); outline-offset:3px; border-radius:var(--r-slab) }
main.blogscope[data-ink="paper"] .spf-a{ background:var(--rail); box-shadow:var(--surf-shadow) }
main.blogscope .spf-art{ display:block; min-width:0 }
main.blogscope .spf-art img{
  display:block; width:100%; height:auto; aspect-ratio:1/1; object-fit:cover;
  border-radius:16px; box-shadow:0 0 0 1px var(--hair);
}
main.blogscope .spf-body{ display:block; min-width:0 }
main.blogscope .spf-k{
  display:block; font:500 9.5px/1.2 var(--mono); letter-spacing:.3em; text-transform:uppercase; color:var(--cyan);
}
main.blogscope .spf-t{
  display:block; margin-top:14px; font-family:var(--f-book); font-weight:380;
  font-size:clamp(24px, 2.6vw, 36px); line-height:1.12; letter-spacing:-.018em; color:var(--ink);
  text-wrap:balance;
}
main.blogscope .spf-d{
  display:block; margin-top:14px; max-width:52ch; font-family:var(--f-book);
  font-size:clamp(16px, 1.2vw, 18px); line-height:1.55; color:var(--ink2);
}
main.blogscope .spf-m{
  display:block; margin-top:16px; font:500 10px/1.6 var(--mono); letter-spacing:.24em;
  text-transform:uppercase; color:var(--ink3);
}
main.blogscope .spf-c{
  display:inline-flex; align-items:center; margin-top:14px; min-height:28px; padding:5px 12px;
  border-radius:999px; box-shadow: inset 0 0 0 1px var(--edge);
  font:500 9.5px/1.3 var(--mono); letter-spacing:.2em; text-transform:uppercase; color:var(--ink2);
}
main.blogscope .spf-go{
  display:flex; align-items:center; gap:8px; margin-top:18px;
  font:500 10.5px/1 var(--mono); letter-spacing:.18em; text-transform:uppercase; color:var(--cyan);
  transition: gap .4s var(--spring);
}
main.blogscope .spf-a:hover .spf-go{ gap:12px }
@media (max-width:640px){
  main.blogscope .spf-a{ grid-template-columns:minmax(0,1fr) }
  main.blogscope .spf-art img{ aspect-ratio:4/3; object-position:50% 35% }
}
@media (prefers-reduced-motion: reduce){
  main.blogscope .spf-a, main.blogscope .spf-go{ transition:none }
  main.blogscope .spf-a:hover{ transform:none }
}

/* ─────────────────────────────────────────────────────────────────────────────
   C. PRINT — the player is a screen thing; the article prints without it
   ───────────────────────────────────────────────────────────────────────── */
@media print{
  main.blogscope .sp-play{ display:none }
  main.blogscope .prose .sp-end{ background:none; padding:0 }
}