/* AyCode Radar in the new look: the index opens beside a taped print of the start page's swallows, the newest post
   leads the list with its picture large, thumbnails are small prints, headlines are set in the serif; a post reads
   like a printed column (drop cap, serif headings, sources as footnotes). Built on the tokens in site.css; the list
   and the pills live there too, because the start page shows them, so everything here is scoped to the radar pages.
   New motion runs at 10 frames a second and stands still under "reduce motion". */

/* ---------- the index ---------- */
.radar-index { position: relative; max-width: none; }
.radar-index .feat-hero__eyebrow { justify-content: space-between; max-width: 860px; }
.radar-index h1, .radar-index .feat-hero__lead { max-width: 760px; }
/* the feed link is a small stamped label */
.radar-feed {
  padding: 5px 9px; border: 1px dashed var(--line-2); border-radius: 5px; color: var(--muted);
  font-weight: 500; letter-spacing: 0.06em; text-decoration: none; rotate: -2deg;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.radar-feed:hover { color: var(--ink); border-color: var(--look-ember); }

/* the print: a paper margin, a torn foot, tape at the top, laid down askew; the drawn swallow flies on over it */
.radar-print { position: relative; margin: 44px 0 0; width: min(100%, 440px); rotate: 1.6deg; filter: drop-shadow(var(--look-print)); }
.radar-print__photo {
  display: block; padding: clamp(6px, 0.8vw, 10px) clamp(6px, 0.8vw, 10px) clamp(16px, 1.6vw, 22px); border-radius: 3px; background: var(--look-paper);
  -webkit-mask: url("/assets/look/riss-unten.png") bottom / 100% 20px no-repeat, linear-gradient(#000 0 0) top / 100% calc(100% - 19px) no-repeat;
  mask: url("/assets/look/riss-unten.png") bottom / 100% 20px no-repeat, linear-gradient(#000 0 0) top / 100% calc(100% - 19px) no-repeat;
}
.radar-print img { display: block; width: 100%; height: auto; border-radius: 1px; background: #1b1838; }
.radar-print::before {
  content: ""; position: absolute; z-index: 1; top: -16px; left: 18%; width: 112px; aspect-ratio: 560 / 223; rotate: -6deg; opacity: 0.94;
  background: url("/assets/look/klebeband-b.webp") center / 100% 100% no-repeat;
}
.radar-print .look-bird { left: 58%; top: 10%; width: 13%; color: var(--look-bird-night); animation: look-drift 4.8s steps(48) infinite alternate; }
@media (min-width: 1100px) {
  /* beside the title on a wide screen, leaning into the margin */
  .radar-print { position: absolute; right: 0; top: 34px; margin: 0; width: clamp(300px, 30vw, 420px); }
  .radar-index h1, .radar-index .feat-hero__lead { max-width: min(680px, calc(100% - clamp(300px, 30vw, 420px) - 40px)); }
  .radar-index .feat-hero__eyebrow { max-width: min(680px, calc(100% - clamp(300px, 30vw, 420px) - 40px)); }
}
.radar-list--index { margin-top: 64px; }

/* thumbnails are small prints, each laid down a little differently */
.radar-list--index .radar-row__shot, .radar-more .radar-row__shot {
  padding: 3px; border-radius: 2px; background: var(--look-paper);
  box-shadow: 0 8px 14px -8px rgb(4 2 10 / 0.6); rotate: -1.6deg;
}
.radar-list--index .radar-row:nth-child(even) .radar-row__shot, .radar-more .radar-row:nth-child(even) .radar-row__shot { rotate: 1.3deg; }
/* headlines in the serif, kept as written */
.radar-list--index .radar-row__text h2, .radar-more .radar-row__text h3 {
  font: 450 clamp(1.18rem, 1.02rem + 0.6vw, 1.48rem)/1.22 var(--font-serif); font-variation-settings: "SOFT" 50, "opsz" 48; letter-spacing: -0.012em;
}
.radar-list--index .radar-row a:hover h2, .radar-more .radar-row a:hover h3 { color: var(--look-acc-ink); }

/* the newest post leads: its picture larger across the first three columns, date and kind under it, the headline
   big beside it; the headline still starts where every other one does */
@media (min-width: 861px) {
  .radar-list--index .radar-row:first-child a { align-items: start; row-gap: 14px; padding: 26px 4px 30px; }
  /* width 0 + min-width 100% keeps the picture's own 1200px out of the shared column widths */
  .radar-list--index .radar-row:first-child .radar-row__shot { grid-column: 1 / 4; grid-row: 1; width: 0; min-width: 100%; height: auto; aspect-ratio: 1200 / 630; padding: 6px 6px 14px; rotate: -1deg; }
  .radar-list--index .radar-row:first-child time { grid-column: 1; grid-row: 2; }
  .radar-list--index .radar-row:first-child .radar-kind { grid-column: 2 / 4; grid-row: 2; }
  .radar-list--index .radar-row:first-child .radar-row__text { grid-column: 4; grid-row: 1 / 3; align-self: center; }
  .radar-list--index .radar-row:first-child .radar-row__go { grid-column: 5; grid-row: 1 / 3; align-self: center; }
  .radar-list--index .radar-row:first-child h2 { font-size: clamp(1.6rem, 1.15rem + 1.3vw, 2.3rem); line-height: 1.1; letter-spacing: -0.02em; }
  .radar-list--index .radar-row:first-child .radar-row__text span { font-size: 1.02rem; }
}
@media (max-width: 860px) {
  .radar-list--index .radar-row:first-child .radar-row__shot { grid-column: 1 / -1; grid-row: auto; width: 100%; height: auto; aspect-ratio: 1200 / 630; margin-bottom: 8px; padding: 5px 5px 12px; rotate: -0.8deg; }
  .radar-list--index .radar-row:first-child h2 { font-size: 1.5rem; }
}

/* rows are laid down one after another as they come near (docs.js marks them; ten frames a second) */
.rises .radar-list--index .radar-row, .rises .radar-more .radar-row { opacity: 0; translate: 0 12px; }
.rises .radar-list--index .radar-row.is-in, .rises .radar-more .radar-row.is-in { opacity: 1; translate: none; transition: opacity 0.4s steps(4), translate 0.4s steps(4); }

/* ---------- a post ---------- */
.radar-post { max-width: 760px; }
.radar-hero { margin-top: 44px; }
.radar-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; color: var(--muted); font: 500 0.8rem/1.4 var(--font-mono); }
.radar-meta > time + span::before, .radar-meta > span + span::before { content: "·"; margin-right: 14px; color: var(--faint); }
.radar-hero h1 {
  margin-top: 22px; color: var(--ink); text-wrap: balance;
  font: 430 clamp(2.2rem, 1.35rem + 3.1vw, 3.7rem)/1.04 var(--font-serif); font-variation-settings: "SOFT" 50, "WONK" 0, "opsz" 144; letter-spacing: -0.028em;
}
.radar-hero__lead { margin-top: 20px; color: var(--muted); font-size: clamp(1.08rem, 1rem + 0.35vw, 1.24rem); line-height: 1.62; text-wrap: pretty; }
/* the picture is a print with a strip of tape, laid down slightly askew */
.radar-figure { position: relative; margin: 38px 0 0; padding: clamp(6px, 0.9vw, 11px) clamp(6px, 0.9vw, 11px) clamp(16px, 2vw, 24px); border-radius: 3px; background: var(--look-paper); box-shadow: var(--look-print); rotate: -0.6deg; }
.radar-figure::before {
  content: ""; position: absolute; z-index: 1; top: -15px; left: 50%; width: clamp(90px, 16%, 128px); aspect-ratio: 560 / 169; translate: -50% 0; rotate: 3deg; opacity: 0.94;
  background: url("/assets/look/klebeband-a.webp") center / 100% 100% no-repeat;
}
.radar-figure img { display: block; width: 100%; height: auto; border: 0; border-radius: 1px; background: var(--panel); }
.radar-x { margin: 22px 0 0; }
.radar-x a { color: var(--accent-ink); font: 600 0.86rem/1.4 var(--font-mono); text-decoration: none; border-bottom: 1px solid var(--line-2); }
.radar-x a:hover { color: var(--ink); }
.radar-by { margin-top: 22px; color: var(--muted); font: 500 0.78rem/1.5 var(--font-mono); letter-spacing: 0.02em; }
.radar-ai { margin-top: 4px; color: var(--faint); font: 500 0.78rem/1.5 var(--font-mono); letter-spacing: 0.02em; }
.radar-draft { margin-top: 10px; padding: 8px 12px; border: 1px dashed var(--accent-bar); border-radius: 10px; color: var(--accent-ink); font-size: 0.9rem; }
/* tags are small paper labels */
.radar-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.radar-tags li { padding: 5px 9px 4px; border: 1px dashed var(--line-2); border-radius: 4px; color: var(--muted); font: 500 0.74rem/1.3 var(--font-mono); letter-spacing: 0.02em; }
.radar-tags li::before { content: "#"; margin-right: 1px; color: var(--look-ember); }

/* a rumor is a paper slip with a stamp: unconfirmed until someone official says otherwise */
.radar-note {
  --ink: #1c1820; --ink-2: #3d3644;
  position: relative; margin-top: 40px; padding: 20px 22px 18px; border: 0; border-radius: 2px;
  background: color-mix(in srgb, var(--look-paper) 88%, #ffb48c); color: var(--ink-2); font-size: 0.97rem; line-height: 1.6;
  box-shadow: 0 14px 26px -12px rgb(4 2 10 / 0.55); rotate: 0.4deg;
}
.radar-note b {
  display: inline-block; margin-right: 6px; padding: 3px 7px 2px; border: 1.5px solid #a83c0c; border-radius: 4px; rotate: -4deg;
  color: #a83c0c; font: 700 0.72rem/1.2 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase;
}
.radar-note::before {
  content: ""; position: absolute; top: -13px; right: 30px; width: 88px; height: 27px; rotate: 5deg; opacity: 0.92;
  background: url("/assets/look/klebeband-b.webp") center / 100% 100% no-repeat;
}

/* the column: a drop cap, serif headings, quotes set like a pull quote */
.radar-body.doc { max-width: none; margin: 8px 0 0; }
.radar-body > p:first-child { margin-top: 44px; font-size: 1.08rem; }
.radar-body > p:first-child::first-letter {
  float: left; margin: 0.08em 0.16em 0 -0.02em; color: var(--look-acc-ink);
  font: italic 400 3.9em/0.78 var(--font-serif); font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144;
}
.radar-body h2 { margin-top: 56px; padding-top: 0; border-top: 0; font: 440 clamp(1.5rem, 1.25rem + 0.8vw, 1.9rem)/1.15 var(--font-serif); font-variation-settings: "SOFT" 50, "opsz" 72; letter-spacing: -0.02em; }
.radar-body h2::before { content: ""; display: block; width: 26px; height: 1.5px; margin-bottom: 16px; background: var(--look-ember); }
.radar-body blockquote {
  margin: 30px 0; padding: 2px 0 2px 22px; border-left: 2px solid var(--look-ember);
  color: var(--ink); font: italic 400 1.22rem/1.5 var(--font-serif); font-variation-settings: "SOFT" 100, "WONK" 1;
}
.radar-body blockquote p { color: inherit; font: inherit; }
/* list marks drawn with the pencil, as in the docs */
.radar-body ul.doc-list li::before { left: 3px; top: 0.86em; width: 11px; height: 2px; border-radius: 2px; background: var(--look-ember); box-shadow: none; rotate: -14deg; }

/* sources read like footnotes */
.radar-sources { margin-top: 72px; padding-top: 28px; border-top: 1px solid var(--line-2); }
.radar-sources h2 { color: var(--muted); font: 600 0.74rem/1 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; }
.radar-sources p { margin-top: 10px; color: var(--muted); font-size: 0.9rem; }
.radar-sources ol { margin: 18px 0 0; padding: 0; list-style: none; counter-reset: source; }
.radar-sources li { counter-increment: source; display: grid; grid-template-columns: 2.6em minmax(0, 1fr); gap: 2px 8px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.radar-sources li::before { content: "(" counter(source) ")"; grid-row: span 2; color: var(--look-ember); font: 500 0.78rem/1.7 var(--font-mono); }
.radar-sources li span { color: var(--faint); font: 500 0.74rem/1.5 var(--font-mono); letter-spacing: 0.04em; text-transform: uppercase; }
.radar-sources li a { color: var(--ink); font-family: var(--font-serif); font-size: 1.05rem; line-height: 1.4; overflow-wrap: anywhere; text-decoration: none; }
.radar-sources li a:hover { color: var(--look-acc-ink); text-decoration: underline; text-decoration-color: var(--look-ember); text-underline-offset: 3px; }

/* more from the Radar: three prints side by side on a wide screen */
.radar-more { margin-top: 96px; }
.radar-more h2 { margin-bottom: 22px; color: var(--muted); font: 600 0.74rem/1 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; }
@media (min-width: 861px) {
  .radar-more .radar-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 30px; padding-top: 30px; }
  .radar-more .radar-row { grid-column: auto; display: block; border: 0; }
  .radar-more .radar-row a {
    grid-column: auto; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto 1fr; align-items: center; gap: 14px 10px;
    height: 100%; padding: 0 0 22px;
  }
  .radar-more .radar-row a:hover { background: none; }
  .radar-more .radar-row__shot { grid-column: 1 / -1; width: 0; min-width: 100%; height: auto; aspect-ratio: 1200 / 630; padding: 5px 5px 12px; }
  .radar-more .radar-row .radar-kind { justify-self: start; }
  .radar-more .radar-row__text { grid-column: 1 / -1; align-self: start; }
  .radar-more .radar-row a:hover .radar-row__text { transform: none; }
  .radar-more .radar-row__go { display: none; }
}

/* on a phone the meta line wraps; a separator must not start the new line */
@media (max-width: 560px) {
  .radar-meta { gap: 6px 12px; }
  .radar-meta > time + span::before, .radar-meta > span + span::before { content: none; }
}

.radar-empty { margin-top: 56px; padding: 28px 0; border-top: 1px solid var(--line); color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
  .radar-print .look-bird { animation: none; }
  .rises .radar-list--index .radar-row, .rises .radar-more .radar-row { opacity: 1; translate: none; transition: none; }
  .radar-feed { transition: none; }
}