/* Insights index: a reading list in Aaron's words, then his work elsewhere. */

/* ---------- Hero ---------- */
.ins-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-8); align-items: center; }
@media (min-width: 900px) { .ins-hero__grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.6fr); gap: var(--s-9); } }
.ins-hero .display { max-width: 9ch; }
.ins-hero .lead { max-width: 48ch; }
.ins-hero__frame { position: relative; width: min(100%, 20rem); justify-self: center; }
@media (min-width: 900px) { .ins-hero__frame { justify-self: end; } }
.monitor--tall .monitor__screen { aspect-ratio: 3 / 4; }
.ins-hero__frame .chyron { position: absolute; left: -1rem; bottom: 2rem; }
@media (max-width: 899px) { .ins-hero__frame .chyron { left: 0.6rem; } }

/* ---------- Reads ---------- */
.reads__list { margin-top: var(--s-7); border-top: 2px solid var(--ink); }
.reads__list > li { border-bottom: 1px solid var(--sheet-line); max-width: none; }
.read { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: var(--s-5); padding-block: clamp(1.5rem, 1rem + 2vw, 2.75rem); text-decoration: none; align-items: start; }
@media (min-width: 760px) { .read { grid-template-columns: 8.5rem minmax(0, 1fr) 3rem; gap: var(--s-7); align-items: center; } }
.read__thumb { display: block; background: var(--control); padding: 5px; border-radius: 3px; box-shadow: var(--shadow-sheet); }
.read__thumb img { aspect-ratio: 9 / 16; width: 100%; object-fit: cover; filter: saturate(0.85); transition: filter var(--d-med); }
.read:hover .read__thumb img { filter: saturate(1.05); }
.read__body { display: grid; gap: var(--s-3); }
.read__title { font-size: clamp(1.625rem, 1.1rem + 2.4vw, 3.25rem); font-weight: 820; letter-spacing: -0.04em; line-height: 0.98; max-width: 20ch; transition: color var(--d-fast); }
.read:hover .read__title { color: var(--tally-ink); }
.read__dek { color: var(--ink-2); max-width: 58ch; }
.read__meta { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); color: var(--ink-2); }
.read__go { display: none; }
@media (min-width: 760px) { .read__go { display: grid; place-items: center; width: 3rem; height: 3rem; border: 1px solid var(--sheet-line); border-radius: 50%; transition: background-color var(--d-fast), border-color var(--d-fast), color var(--d-fast); } }
.read__go svg { width: 18px; height: 18px; }
.read:hover .read__go { background: var(--tally-fill); border-color: var(--tally-fill); color: #fff; }

.reads__sub { margin-top: var(--s-9); padding-bottom: var(--s-4); }
.elsewhere { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
@media (min-width: 860px) { .elsewhere { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.elsewhere > li { max-width: none; }
.ext { display: grid; gap: var(--s-3); height: 100%; padding: clamp(1.25rem, 1rem + 1.5vw, 2rem); background: var(--paper); border: 1px solid var(--sheet-line); border-radius: 4px; text-decoration: none; transition: border-color var(--d-fast); }
.ext:hover { border-color: var(--ink); }
.ext .time { color: var(--ink-2); }
.ext__where { font-weight: 800; letter-spacing: -0.01em; display: flex; flex-wrap: wrap; gap: 0.6em; align-items: baseline; }
.ext__where span { font-weight: 500; color: var(--ink-2); font-size: var(--t-small); }
.ext__title { font-size: clamp(1.375rem, 1.1rem + 1vw, 1.875rem); font-weight: 780; letter-spacing: -0.03em; line-height: 1.08; }
.ext__desc { color: var(--ink-2); font-size: var(--t-small); }
.ext__go { margin-top: auto; padding-top: var(--s-3); display: inline-flex; align-items: center; gap: 0.4em; font-weight: 700; font-size: var(--t-small); color: var(--tally-ink); }
.ext__go svg { width: 16px; height: 16px; transition: transform var(--d-med) var(--ease-out); }
.ext:hover .ext__go svg { transform: translate(2px, -2px); }

/* ---------- Close ---------- */
.ins-close__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-8); }
@media (min-width: 960px) { .ins-close__grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.9fr); gap: var(--s-9); align-items: end; } }
.ins-close__grid .ins-close__line { max-width: 20ch; color: var(--on-studio); }
.ins-close__attr { margin-top: var(--s-6); }
.ins-close__grid .h3 { margin-bottom: var(--s-4); }
.ins-close__grid p { color: var(--on-studio-2); max-width: 44ch; }
.ins-close .cta-group { margin-top: var(--s-5); }
.ins-close__alt { margin-top: var(--s-4); font-size: var(--t-small); }
.ins-close__alt a { color: var(--on-studio); font-weight: 650; }