/* Insights index: the page head with the topic file as its focal object (search and
   one square per topic, a rook on the chosen one, on a vellum sheet), then the lead
   article on vellum and one two-column rhythm: data-size lead, c (card), r (related,
   on the article page). Covers, meta and cards are shared with the article page
   (css/pages/article.css). */

/* ---------- Page head ---------- */
.page-head .crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0 .35rem; font-size: .9375rem; color: var(--muted); }
.page-head .crumbs li + li::before { content: ""; display: inline-block; width: 5px; height: 5px; margin: 0 .55rem .15rem .2rem; background: currentColor; transform: rotate(45deg); opacity: .6; }
.page-head .crumbs a { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--fg-2); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: .3em; }
.page-head .crumbs a:hover { color: var(--fg); text-decoration-color: currentColor; }

.ins-head { padding-block: clamp(3rem, 7vw, 5.75rem) clamp(3rem, 6vw, 5rem); }
.ins-hero { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 2.5rem clamp(2.5rem, 6vw, 6rem); align-items: center; }
.ins-head .eyebrow { font-size: .9375rem; color: var(--muted); margin-bottom: 1.25rem; }
.ins-head h1 > div { padding-bottom: .18em; margin-bottom: -.18em; }
.ins-head h1 { font-size: var(--d-1); line-height: 1.16; }
.ins-head .lede { margin-top: 1.5rem; max-width: 36ch; color: var(--fg-2); font-size: clamp(1.0625rem, 1.3vw, 1.1875rem); line-height: 1.6; }
.ins-head-paged { padding-bottom: clamp(2rem, 4vw, 3rem); }
/* the tools need JavaScript: boot.js sets html.js in the head, so this is decided before first paint */
html:not(.js) .ins-tools { display: none; }
html:not(.js) .ins-hero { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 960px) { .ins-hero { grid-template-columns: minmax(0, 1fr); } }

/* ---------- The tools: search and the topic file, on vellum ---------- */
.ins-tools { position: relative; }
.ins-tools .tools-inner { padding: clamp(1.25rem, 2.4vw, 2rem); }
.ins-list-sec { padding-bottom: clamp(5.5rem, 12vw, 10rem); }

.search { position: relative; display: flex; align-items: center; border-bottom: 1px solid var(--line-2); transition: border-color .3s; }
.search:focus-within { border-bottom-color: var(--fg); }
.search .s-ico { position: absolute; left: 0; color: var(--muted); pointer-events: none; }
.search input { width: 100%; min-height: 3rem; padding: 0 0 0 1.85rem; border: 0; background: transparent; color: var(--fg); font: inherit; font-size: 1rem; outline: none; border-radius: 0; -webkit-appearance: none; appearance: none; }
.search input::placeholder { color: var(--muted); opacity: 1; }
.search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; width: 14px; height: 14px; cursor: pointer;
  background: linear-gradient(45deg, transparent 45%, currentColor 45% 55%, transparent 55%), linear-gradient(-45deg, transparent 45%, currentColor 45% 55%, transparent 55%); opacity: .6; }
.search:has(input:focus-visible) { box-shadow: 0 1px 0 var(--fg); }

/* The topic file: one square per topic, a rook stands on the chosen one */
.tfile { --sq: 2.75rem; position: relative; display: grid; margin-top: 1.75rem; }
.tsq { position: relative; display: grid; grid-template-columns: var(--sq) minmax(0, 1fr) auto; align-items: center; column-gap: .9rem; min-height: var(--sq); text-align: left; color: var(--fg-2); font-size: .9375rem; line-height: 1.3; }
.tsq .sq { position: relative; width: var(--sq); height: auto; min-height: var(--sq); align-self: stretch; background: var(--tb-l); box-shadow: -1px 0 0 var(--tb-edge), 1px 0 0 var(--tb-edge); }
.tsq:nth-child(even) .sq { background: var(--tb-d); }
.tsq:first-child .sq { box-shadow: -1px 0 0 var(--tb-edge), 1px 0 0 var(--tb-edge), 0 -1px 0 var(--tb-edge); }
.tsq:nth-last-child(2) .sq { box-shadow: -1px 0 0 var(--tb-edge), 1px 0 0 var(--tb-edge), 0 1px 0 var(--tb-edge); }
/* a legal-move dot on hover */
.tsq .sq::after { content: ""; position: absolute; left: 50%; top: 50%; width: 22%; height: 22%; border-radius: 50%; background: color-mix(in srgb, var(--fg) 40%, transparent); transform: translate(-50%, -50%) scale(0); transition: transform .35s var(--ease); }
.tsq:nth-child(even) .sq::after { background: color-mix(in srgb, var(--tb-l) 70%, transparent); }
.tsq:hover .sq::after { transform: translate(-50%, -50%) scale(1); }
.tsq[aria-pressed="true"] .sq::after { transform: translate(-50%, -50%) scale(0); }
.tsq .lbl { padding-block: .35rem; transition: color .3s; }
.tsq .n { font-variant-numeric: tabular-nums; font-size: .8125rem; color: var(--muted); min-width: 1.5rem; text-align: right; }
.tsq:hover .lbl, .tsq[aria-pressed="true"] .lbl { color: var(--fg); }
.tsq[aria-pressed="true"] .lbl { font-weight: 500; }
/* no matches: text keeps full contrast; the square fades and the count is struck through */
.tsq[data-empty] .sq { opacity: .35; }
.tsq[data-empty] .n { text-decoration: line-through; text-decoration-thickness: 1px; }
.tsq:focus-visible { outline-offset: 2px; }
.rook { position: absolute; left: 0; top: 0; width: var(--sq); height: var(--sq); padding: .3rem; pointer-events: none; z-index: 2; transform: translateY(var(--ry, 0px)); }
.rook [data-piece] { width: 100%; height: 100%; filter: drop-shadow(0 4px 3px rgba(0,0,0,.18)); }
.count { margin-top: 1.5rem; font-size: .875rem; color: var(--muted); font-variant-numeric: tabular-nums; }

/* ---------- Covers ---------- */
.cover { position: relative; display: block; overflow: hidden; aspect-ratio: var(--ar, 3 / 2); background: var(--sq-a); border-radius: 2px; }
.cover img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.03); transition: transform 1.4s var(--ease); }
html[data-theme="dark"] .cover img { filter: grayscale(1) brightness(.8) contrast(1.06); }
html[data-theme="dark"] .cover.inv img { filter: grayscale(1) invert(.9) contrast(.96); }
.cover.ph { background: var(--sq-a); }
.cover.ph .ph-board { position: absolute; inset: 0; --s: 18%;
  background: repeating-conic-gradient(var(--tb-d) 0 25%, var(--tb-l) 0 50%) 50% 50% / calc(var(--s) * 2) calc(var(--s) * 3);
  opacity: .22; -webkit-mask-image: radial-gradient(ellipse 60% 70% at 50% 50%, #000 20%, transparent 100%); mask-image: radial-gradient(ellipse 60% 70% at 50% 50%, #000 20%, transparent 100%); }
.cover.ph .ph-piece { position: absolute; left: 50%; top: 50%; width: 28%; max-width: 6rem; aspect-ratio: 1; transform: translate(-50%, -52%); }
.cover.ph .ph-piece .pc { filter: drop-shadow(0 8px 6px rgba(0,0,0,.18)); }

/* ---------- Cards ---------- */
.post { position: relative; min-width: 0; }
.post:not(.sheet) > .sheen { display: none; }
.post-cover { display: block; }
.post .meta { display: flex; flex-wrap: wrap; align-items: center; row-gap: .2rem; font-size: .8125rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.post .meta > * + *::before { content: ""; display: inline-block; width: 4px; height: 4px; margin: 0 .6rem .12rem; background: currentColor; opacity: .55; transform: rotate(45deg); }
.post .meta .tp { flex-basis: 100%; margin-bottom: .1rem; color: var(--fg-2); font-weight: 500; }
.post .meta .tp + *::before { display: none; }
.post h2, .post h3 { margin-top: .7rem; font-size: clamp(1.05rem, 1.35vw, 1.25rem); line-height: 1.42; letter-spacing: -.005em; text-wrap: pretty; }
.post h2 a, .post h3 a { text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .6s var(--ease); }
.post h2 a::after, .post h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.post:hover h2 a, .post:hover h3 a, .post:focus-within h2 a, .post:focus-within h3 a { background-size: 100% 1px; }
.post:hover .cover img { transform: scale(1.035); }
.post .ex { margin-top: .75rem; color: var(--fg-2); font-size: .96875rem; line-height: 1.6; max-width: 36rem; }

.ins-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(1.25rem, 3vw, 3.5rem); row-gap: clamp(2.25rem, 4vw, 3.25rem); align-items: start; }
/* titles never run past three lines; the link keeps the whole title as its name */
.post h2 a, .post h3 a { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }

/* lead: the newest (or first match), on vellum */
.post[data-size="lead"] { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(1.5rem, 3vw, 2.75rem); align-items: center; padding: clamp(.6rem, 1.1vw, .9rem); padding-right: clamp(1.25rem, 2.6vw, 2.5rem); margin-bottom: clamp(.75rem, 2vw, 1.75rem); }
.post[data-size="lead"] .cover { --ar: 16 / 10; }
.post[data-size="lead"] h2 { font-size: clamp(1.2rem, 1.65vw, 1.6rem); line-height: 1.32; margin-top: .9rem; }
.post[data-size="lead"] .ex { margin-top: .9rem; }
.post[data-size="lead"] .post-body { padding-block: 1rem; }
.post[data-size="lead"] .post-body::after { content: "Read the article"; content: "Read the article" / ""; display: inline-flex; align-items: center; min-height: 2.75rem; margin-top: .5rem; font-size: .9375rem; text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: .32em; }
.post[data-size="lead"]:hover .post-body::after { text-decoration-color: currentColor; }

/* card: a small placeholder square beside the title, under a rule; two per row */
.post[data-size="c"] { grid-column: span 6; display: grid; grid-template-columns: clamp(6rem, 9vw, 8.5rem) minmax(0, 1fr); gap: clamp(1rem, 2vw, 1.75rem); align-items: start; padding-top: clamp(1.25rem, 2vw, 1.75rem); border-top: 1px solid var(--line); }
.post[data-size="c"] .cover { --ar: 1; }
.post[data-size="c"] h2 { margin-top: .55rem; font-size: clamp(1rem, 1.2vw, 1.125rem); line-height: 1.45; }
.post[data-size="c"] .ex { margin-top: .6rem; font-size: .9375rem; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }

/* related (article page) */
.post[data-size="r"] { grid-column: span 4; }
.post[data-size="r"] .post-body { padding-top: 1.1rem; }
.post[data-size="r"] .ex { display: none; }

/* a filtered-out card stays out, whatever size it was last dealt (the size rules set display) */
.ins-grid .post[hidden], .rel-grid .post[hidden] { display: none !important; }

.ins-empty { padding-block: 2.5rem; border-top: 1px solid var(--line-2); max-width: 36rem; }
.ins-empty p { font-size: 1.125rem; color: var(--fg-2); }
.ins-empty .link { margin-top: .5rem; font-size: .9375rem; }
.ins-empty[hidden] { display: none; }
.ins-more-row { display: flex; justify-content: center; margin-top: clamp(3rem, 6vw, 4.5rem); }
.ins-more-row[hidden] { display: none; }
.ins-pager { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; margin-top: clamp(3rem, 6vw, 4.5rem); padding-top: 1.25rem; border-top: 1px solid var(--line); font-size: .9375rem; }
.ins-pager .pg-n { color: var(--muted); font-variant-numeric: tabular-nums; }
.ins-pager [rel="next"] { justify-self: end; }

@media (max-width: 1100px) { .post[data-size="c"] { grid-column: 1 / -1; } }
@media (min-width: 961px) and (max-width: 1180px) { .post[data-size="lead"] { grid-template-columns: 1fr; padding-right: clamp(.6rem, 1.1vw, .9rem); } .post[data-size="lead"] .cover { --ar: 21 / 9; } .post[data-size="lead"] .post-body { padding: .5rem 1rem 1rem; } }
@media (max-width: 760px) {
  .post[data-size], .post[data-size="lead"] { grid-column: 1 / -1; }
  .post[data-size="lead"] { grid-template-columns: 1fr; gap: 0; padding: .6rem .6rem 1.25rem; }
  .post[data-size="lead"] .cover { --ar: 16 / 9; }
  .post[data-size="lead"] .post-body { padding: 1.25rem .6rem 0; }
  .post[data-size="c"] { grid-template-columns: 4.5rem minmax(0, 1fr); }
  .post[data-size="c"] .ex { display: none; }
}