/* home: styles for ext/home.js. Use the site's --b- tokens only. */

/* ---------------------------------------------------------------------------
   5.4 The featured-entry hero. The site's line steps down to a lead-in, the
   entry takes the headline, and its cover drawing sits where the globe and the
   plate sit. Hidden unless the dock's third hero choice is on.
   --------------------------------------------------------------------------- */
[data-hxe] { display: none; }
:root[data-heroart="entry"] [data-hxe] { display: grid; }
:root[data-heroart="entry"] .hero3 .globe,
:root[data-heroart="entry"] .hero3 .globe-slot,
:root[data-heroart="entry"] .hero3 .hero2-lede { display: none; }
:root[data-heroart="entry"] .hero3 h1 { max-width: none; margin-bottom: var(--sp-2-5); font-size: var(--lh-h1); line-height: var(--lh-h1-lh); letter-spacing: -0.035em; color: var(--b-hero-ink); }

/* ---------------------------------------------------------------------------
   6.1 / 6.4 / 6.5 Editor's picks on /v2/home: one large card on the left, two
   stacked on the right, the large card exactly as tall as the pair. The cards
   are the Latest cards (8px inset art, 16px radius); the two on the right lie
   on their side, art left and text right.
   --------------------------------------------------------------------------- */
.hf-page { padding-top: clamp(var(--sp-7), 7vw, var(--sp-12)); }
.hf-sec .sec-top { align-items: flex-end; }

.hf-grid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: var(--sp-2-5); margin-top: var(--sp-5); align-items: stretch; }
/* the large card never sets the height: its art takes whatever the pair leaves after the text */
.hf-big { min-height: 0; }
.hf-big .nw-art { flex: 1 1 0; min-height: 150px; height: auto; }
.hf-big .nw-body { flex: none; }
.hf-side { list-style: none; display: grid; grid-template-rows: repeat(2, minmax(0, 1fr)); gap: var(--sp-2-5); margin: 0; padding: 0; }
.hf-side .nw-item { flex-direction: row; }
.hf-side .nw-art { flex: none; width: 40%; height: auto; margin: var(--sp-1) 0 var(--sp-1) var(--sp-1); }
.hf-side .nw-art .lat-iso { right: 50%; bottom: 50%; width: 82%; height: auto; transform: translate(50%, 50%); }
.hf-side .nw-art .lat-cap { padding: var(--sp-1-5); font-size: 12.5px; }
.hf-side .nw-body { min-width: 0; padding: var(--sp-2-5) var(--sp-3); gap: var(--sp-1); }
.hf-side .nw-sum { -webkit-line-clamp: 2; max-height: calc(2 * 1.5em); }
.hf-side .nw-more { margin-top: auto; padding-top: var(--sp-2-5); }  /* 28px to the CTA, as on the big card */
@media (max-width: 1100px) {
  .hf-side .nw-art { width: 34%; }
  .hf-side .nw-sum { display: none; }
}
@media (max-width: 860px) {
  .hf-sec .sec-top { flex-wrap: wrap; gap: var(--sp-2); }
  .hf-grid { grid-template-columns: minmax(0, 1fr); }
  .hf-big .nw-art { flex: none; height: clamp(170px, 48vw, 230px); }
  .hf-side { grid-template-rows: none; }
}
@media (max-width: 560px) {
  .hf-side .nw-item { flex-direction: column; padding: 0; }
  .hf-side .nw-art { width: auto; height: 150px; margin: var(--sp-1) var(--sp-1) 0; }
  .hf-side .nw-art .lat-iso { right: 5%; bottom: 7%; width: auto; height: 84%; transform: none; }
  .hf-side .nw-sum { display: -webkit-box; }
}

/* 18.1: the Observatory's own outputs follow the picks directly */
.hf-out #latest { padding-top: clamp(var(--sp-5), 5vw, var(--sp-9)); }

/* the hero's strips (Home in V2, Hero artwork) on one row, pinned where a single strip sat */
.ab-pins { position: absolute; left: var(--page-pad); top: calc(var(--nav-h) + var(--annc-h, 0px) + 28px); z-index: 6; display: flex; flex-wrap: wrap; gap: var(--sp-1); }
.ab-pins > .ab-bar { margin: 0; }
.ab-pins:empty { display: none; }
/* Home B: the hero's band fades into --b-ground, but the picks section sits on the lighter page colour; a second layer
   carries ground on into paper over 160px under the band, so there is no step where the band ends */
:root[data-heroground="x"] .hero3 + .hf-page {
  background-image: var(--b-hero-band, none), linear-gradient(180deg, var(--b-ground) var(--b-hero-band-h, 0px), var(--b-paper) calc(var(--b-hero-band-h, 0px) + 160px));
  background-repeat: no-repeat;
  background-size: 100% var(--b-hero-band-h, 0px), 100% calc(var(--b-hero-band-h, 0px) + 160px);
}

/* ---------------------------------------------------------------------------
   The Featured hero, three layouts (ext/home.js, data-hxl). The tiles sit on the
   dark hero; picture tiles carry their text on a shade, plain tiles are paper.
   --------------------------------------------------------------------------- */
:root:not([data-heroart="entry"]) [data-ab-bar="hxl"] { display: none; }
/* A and B: the site's line stays small over the tiles; no search */
:root[data-heroart="entry"]:not([data-hxl="stack"]) .hero3 :is(.hsearch, .hero2-try) { display: none; }
:root[data-heroart="entry"][data-hxl="stack"] .hero3 .hero2-try { display: none; }
:root[data-heroart="entry"][data-hxl="stack"] .hero3 .hero2-lede { display: block; }
:root[data-heroart="entry"][data-hxl="stack"] .hero3 h1 { max-width: 13em; margin-bottom: var(--sp-2); font-size: clamp(2.4rem, 4vw, 4.2rem); line-height: 1.02; letter-spacing: -0.035em; }
:root[data-heroart="entry"]:not([data-hxl="stack"]) .hero3 { align-content: center; row-gap: var(--sp-3); }
:root[data-heroart="entry"]:not([data-hxl="stack"]) .hero3-copy { grid-column: 1 / -1; max-width: none; }  /* the h1 runs across, in two lines */

.hxf { list-style: none; margin: 0; padding: 0; position: relative; z-index: 1; gap: var(--sp-2); }
.hxf-bento, .hxf-split { grid-column: 1 / -1; grid-row: 2; }
.hxf-bento { grid-template-columns: 1.25fr 1fr 1fr; grid-template-rows: repeat(2, minmax(210px, 1fr)); height: clamp(460px, 58vh, 600px); }
.hxf-bento .hxf-1 { grid-row: span 2; }
.hxf-bento .hxf-2 { grid-column: span 2; }
.hxf-split { grid-template-columns: 1.45fr 1fr; grid-template-rows: repeat(2, minmax(190px, 1fr)); height: clamp(420px, 54vh, 540px); }
.hxf-split .hxf-1 { grid-row: span 2; }
.hxf-stack { grid-column: 2; grid-row: 1; align-self: center; grid-template-columns: minmax(0, 1fr); }

.hxf-t { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 0; overflow: hidden;
  padding: var(--sp-3); border-radius: 24px; color: var(--ink); transition: transform .3s cubic-bezier(.2, .8, .2, 1), filter .3s; }
.hxf-t:is(:hover, :focus-within) { transform: translateY(-3px); filter: drop-shadow(0 16px 16px rgba(0, 0, 0, .28)); }
.hxf-b { position: relative; z-index: 3; display: grid; justify-items: start; gap: var(--sp-1); max-width: 30em; }
.hxf-m { display: flex; flex-wrap: wrap; gap: var(--sp-0-5) var(--sp-1); margin: 0; font: 500 12.5px/1.3 var(--font-text); color: var(--ink-3); }
.hxf-k { color: var(--b-primary); font-weight: 600; }
.hxf-h { margin: 0; font: 500 clamp(19px, 1.55vw, 24px)/1.2 var(--font-display); letter-spacing: -0.015em; text-wrap: balance; }
.hxf-h a { color: inherit; text-decoration: none; }
.hxf-h a::after { content: ""; position: absolute; inset: 0; z-index: 4; border-radius: inherit; }
.hxf-h a:focus-visible { outline: none; }
.hxf-t:has(.hxf-h a:focus-visible) { outline: 3px solid var(--focus); outline-offset: 3px; }
.hxf-s { margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: 15px; line-height: 1.5; color: var(--ink-2); }

/* The site's card hover on the Featured tiles (29 Oct): the tile's ground (and picture) is .hxf-bg, cut by the same
   corner notch as .nc::before, so the corner arrow opens out of the tile's corner like on every other card */
.hxf-t.nc::before { display: none; }
.hxf-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; border-radius: inherit; background: var(--b-paper); --nk: 0; --s: calc(60px * var(--nk)); --r: calc(18px * var(--nk)); transition: --nk .5s cubic-bezier(.2, .9, .25, 1);
  -webkit-mask: linear-gradient(#000 0 0), linear-gradient(#000 0 0) 100% 100% / var(--s) calc(var(--s) - var(--r)) no-repeat, linear-gradient(#000 0 0) 100% 100% / calc(var(--s) - var(--r)) var(--s) no-repeat, radial-gradient(circle at var(--r) var(--r), #000 calc(var(--r) - .5px), #0000 var(--r)) 100% 100% / var(--s) var(--s) no-repeat, radial-gradient(circle at 0 0, #0000 calc(var(--r) - .5px), #000 var(--r)) right 0 bottom var(--s) / var(--r) var(--r) no-repeat, radial-gradient(circle at 0 0, #0000 calc(var(--r) - .5px), #000 var(--r)) right var(--s) bottom 0 / var(--r) var(--r) no-repeat;
  mask: linear-gradient(#000 0 0), linear-gradient(#000 0 0) 100% 100% / var(--s) calc(var(--s) - var(--r)) no-repeat, linear-gradient(#000 0 0) 100% 100% / calc(var(--s) - var(--r)) var(--s) no-repeat, radial-gradient(circle at var(--r) var(--r), #000 calc(var(--r) - .5px), #0000 var(--r)) 100% 100% / var(--s) var(--s) no-repeat, radial-gradient(circle at 0 0, #0000 calc(var(--r) - .5px), #000 var(--r)) right 0 bottom var(--s) / var(--r) var(--r) no-repeat, radial-gradient(circle at 0 0, #0000 calc(var(--r) - .5px), #000 var(--r)) right var(--s) bottom 0 / var(--r) var(--r) no-repeat;
  -webkit-mask-composite: source-out, source-over, source-over, source-over, source-over, source-over;
  mask-composite: subtract, add, add, add, add, add; }
.hxf-t.nc:is(:hover, :focus-visible, :focus-within) .hxf-bg { --nk: 1; }
.hxf-bg .hxf-img { z-index: 0; }
.hxf-t .hxf-b { padding-right: var(--sp-5); }  /* clear of the corner arrow */

/* picture tiles: the entry's drawing fills the tile, a shade under the words */
.hxf-img { position: absolute; inset: 0; z-index: 0; }
.hxf-img .lat-iso { right: 6%; bottom: auto; top: 8%; width: auto; height: 62%; }
.hxf-t.has-img .hxf-bg::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(180deg, transparent 38%, rgba(20, 8, 8, .78) 100%); }
.hxf-t.has-img { color: #fff; }
.hxf-t.has-img .hxf-bg { background: #241010; }
.hxf-t.has-img .hxf-m { color: rgba(255, 255, 255, .78); }
.hxf-t.has-img .hxf-k { color: #fff; }
.hxf-t.has-img .hxf-s { color: rgba(255, 255, 255, .82); }
.hxf-1 .hxf-h { font-size: clamp(24px, 2.3vw, 34px); }

/* bento: a red text tile, a topics tile */
.hxf-pat { color: #fff; }
/* the red tile: a deep red gradient with faint rings from its top-right corner; labels at the top, words at the foot */
.hxf-pat .hxf-bg { background:
  repeating-radial-gradient(circle at 100% 0%, rgba(255, 255, 255, .07) 0 1px, transparent 1.5px 26px),
  radial-gradient(90% 80% at 100% 0%, #d0362b 0%, transparent 62%),
  linear-gradient(155deg, #b01d1a 0%, #8a1214 55%, #4e0b0d 100%); }
.hxf-pat .hxf-b { flex: 1; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: var(--sp-1); }
.hxf-pat .hxf-m { margin-bottom: auto; }
.hxf-pat :is(.hxf-m, .hxf-k) { color: rgba(255, 255, 255, .85); }
.hxf-pat .hxf-s { color: rgba(255, 255, 255, .86); }


/* split: two plain cards, arrow as a dark square bottom-right */
.hxf-split .hxf-1 .hxf-img .lat-iso { height: 56%; }

/* stack: three cards with a square picture at the left */
.hxf-r { display: grid; grid-template-columns: 144px minmax(0, 1fr); align-items: center; column-gap: var(--sp-2); padding: var(--sp-1-5); padding-right: var(--sp-6); border-radius: 20px; }
.hxf-r.has-img { color: var(--ink); }
.hxf-r.has-img .hxf-bg { background: var(--b-paper); }
.hxf-r.has-img .hxf-bg::after { display: none; }
.hxf-r .hxf-img { position: relative; inset: auto; aspect-ratio: 1; border-radius: 14px; }
.hxf-r .hxf-img .lat-iso { top: 10%; right: 8%; height: 80%; }
.hxf-r.has-img .hxf-m { color: var(--ink-3); }
.hxf-r.has-img .hxf-k { color: var(--b-primary); }
.hxf-r .lat-pick { display: none; }
.hxf-r .hxf-h { font-size: 17px; }
.hxf-r.has-img .hxf-s { -webkit-line-clamp: 2; font-size: 14px; color: var(--ink-3); }

@media (max-width: 900px) {
  .hxf-bento, .hxf-split { height: auto; grid-template-columns: 1fr 1fr; grid-template-rows: none; grid-auto-rows: minmax(190px, auto); }
  .hxf-bento .hxf-1, .hxf-split .hxf-1 { grid-column: 1 / -1; grid-row: auto; min-height: 300px; }
  .hxf-stack { grid-column: 1; grid-row: 2; margin: var(--sp-4) 0 var(--sp-5); }
}
@media (max-width: 600px) {
  .hxf-bento, .hxf-split { grid-template-columns: 1fr; }
  .hxf-r { grid-template-columns: 88px minmax(0, 1fr); align-items: start; padding-right: var(--sp-1-5); }  /* .hxf-b already clears the corner arrow */
}