/* Node full page — one entry, magazine layout, room for media later. */

/* the hero budget is the trends hero: ~8.4rem of content (display-1 line +
   subtitle). Eyebrow + title + three tight rank rows spend the same budget. */
.node-hero h1 { max-width: none; font-size: clamp(2.1rem, 3.8vw, 3.3rem); }
/* the 12° cut only bites the plate's right end; the left-set content needs
   no clearance for it, so the hero closes on an even margin, not the cut's */
.node-hero { padding-bottom: var(--sp-5); }
.node-hero .eyebrow { line-height: 1.2; }
.node-hero .ranks { margin-top: var(--sp-3); }
.node-hero .ranks:empty { display: none; }
.node-hero .rank { padding: 1px 0; line-height: 1.35; }
.node-hero .rank .rk { width: 3.6rem; }
.node-hero .rank a { font-size: var(--text--1); line-height: 1.35; }
/* Editorial hero: a real two-column grid. Title block owns the left column;
   the standfirst forms a solid text column on the right whose first line
   aligns optically with the title's cap height (padding-top skips the eyebrow
   line), and the map action sinks to the hero's baseline like the actions on
   the about and trends heroes. site.css's flex space-between (with its dead
   gulf and right-pinned ragged text box) is fully overridden here. */
.node-hero .hero-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 48ch);
  column-gap: var(--sp-7);
  align-items: stretch;
  min-height: 7.5rem;
}
.node-hero .hero-side--desc {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: var(--sp-4);
  max-width: 48ch;
  margin-bottom: 0;
  padding-top: 0.35rem;  /* eyebrow line ≈ title cap offset at this h1 size */
}
/* the page's figures live in the hero: a quiet row under the ranks */
.node-hero .figures { margin-top: var(--sp-4); }
.node-hero .hero-motifs {
  margin-top: var(--sp-3);
  font-size: var(--text--1); color: var(--ink-soft);
  max-width: 52ch;
}
.node-hero .hero-motifs b { color: var(--ink); font-weight: 600; }
/* map access: an inset locator, the map-app convention made of the map's own
   material — the entity's cut-paper plate floats in the viewport corner on
   the paper background, exactly as it appears on the atlas */
.map-access {
  position: fixed; right: var(--gutter); bottom: var(--sp-5); z-index: 40;
  display: inline-flex; flex-direction: column; gap: 5px;
  text-decoration: none;
}
.map-access svg {
  display: block;
  filter: drop-shadow(0 3px 8px rgba(24, 21, 17, 0.18));
  transition: transform 0.15s ease, filter 0.15s ease;
}
@media (hover: hover) {
  .map-access:hover svg { transform: translateY(-2px);
    filter: drop-shadow(0 6px 12px rgba(24, 21, 17, 0.26)); }
}
.map-access span {
  font-size: var(--text--1); font-weight: 600; color: var(--ink);
  text-decoration: underline; text-underline-offset: 3px;
  align-self: flex-end;
  text-shadow: 0 1px 0 var(--paper);
}
.map-dot { animation: mapdot 2.2s ease-in-out infinite; }
@keyframes mapdot { 0%, 100% { r: 3.6px; } 50% { r: 4.8px; } }
@media (prefers-reduced-motion: reduce) {
  .map-access svg { transition: none; }
  .map-access:hover svg { transform: none; }
  .map-dot { animation: none; }
}
/* the loading note fades in after a beat: fast connections never see it,
   slow ones learn why the hero is still empty */
.loading-note { opacity: 0; animation: loadnote 0.3s ease 0.4s forwards; }
@keyframes loadnote { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .loading-note { animation: none; opacity: 1; }
}
/* the standfirst sits a size below the lede so it settles into the hero's
   height instead of stretching it */
.hero-desc { font-size: var(--text-0); line-height: 1.6; text-align: left; }
.hero-desc:empty { display: none; }
.hero-desc-more {
  font-weight: 500; color: var(--ink);
  text-decoration: underline; text-underline-offset: 3px;
}
@media (max-width: 900px) {
  .node-hero .hero-split { grid-template-columns: 1fr; row-gap: var(--sp-5); }
  .node-hero .hero-side--desc { padding-top: 0; }
  /* small screens: the locator joins the flow under the hero instead of
     covering content */
  .map-access { position: static; margin: var(--sp-4) var(--gutter) 0; }
  .map-access span { align-self: flex-start; }
}
/* the hierarchy, spelled out: one row per rank */
.ranks { margin-top: var(--sp-5); }
.rank { display: flex; align-items: baseline; gap: var(--sp-3); padding: 2px 0; }
.rank .rk {
  width: 4.2rem; flex: none;
  font-size: var(--text-tag); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--ink-soft);
}
.rank a { color: var(--ink); font-weight: 600; font-size: var(--text-1); text-underline-offset: 3px; }

.node-cols {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: var(--sp-7);
  align-items: start;
  padding-top: var(--sp-6);
}
@media (max-width: 900px) {
  .node-cols { grid-template-columns: 1fr; gap: var(--sp-6); }
}

.nlede { font-size: var(--text-1); line-height: 1.6; max-width: var(--measure); }
.nmeta { margin-top: var(--sp-4); font-size: var(--text--1); color: var(--ink-soft); max-width: var(--measure); }
.nmeta b { color: var(--ink); }

.col-side h3 {
  font-size: var(--text-tag); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--ink-soft); margin: var(--sp-5) 0 var(--sp-2);
}
.col-side > div:first-child h3 { margin-top: 0; }
.nlist { list-style: none; padding: 0; }
.nlist li {
  display: flex; align-items: baseline; gap: 8px;
  padding: 5px 0; border-bottom: 1px solid var(--line);
}
.nlist .mark { align-self: center; flex: 0 0 9px; }
.nlist a { color: var(--ink); font-weight: 500; text-decoration: none; }
.nlist a:hover { text-decoration: underline; }
.nlist .tag {
  font-size: var(--text-tag); border: 1px solid var(--line);
  color: var(--ink-soft); padding: 0 6px; white-space: nowrap;
}
.nlist .via { font-size: var(--text--1); color: var(--ink-soft); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
h3 .count { font-weight: 400; text-transform: none; letter-spacing: 0; }
/* the listening shelf (see atlas.css sibling): featured sleeve + placard on an
   ink shelf rule, contact grid of smaller sleeves below */
.shelf { margin-top: var(--sp-2); }
.shelf .cover {
  display: block; object-fit: cover; background: var(--plate, var(--peri));
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}
.shelf a.sleeve { display: block; flex: none; line-height: 0;
  transition: transform 0.15s ease, box-shadow 0.15s ease; }
@media (hover: hover) {
  .shelf a.sleeve:hover { transform: translateY(-3px);
    box-shadow: 0 6px 14px rgba(24, 21, 17, 0.18); }
}
.shelf-feature {
  /* the curator text starts level with the sleeve's top edge */
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3);
  align-items: flex-start;
  padding-bottom: 2px;
}
.albumby { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.albumby .via { flex: 1 1 auto; min-width: 0; }
/* the year as a tiny cut-paper plate in the page's fill — the site's own
   material instead of a bordered chip */
.shelf .tag {
  --cut: 0.5rem;
  border: none; background: var(--plate, var(--peri)); color: var(--ink);
  font-size: var(--text-tag); font-weight: 600;
  font-variant-numeric: tabular-nums;
  padding: 1px 11px 1px 8px; flex: none; white-space: nowrap;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut) / 0.21256) 100%, 0 100%);
}
/* spotlight: sleeve one cell wide, sentence beside it; the caption spans the
   full shelf width below — title and artist each on one untruncated line,
   the year plate closing the artist's line at the right edge */
.feature-sleeve { width: calc((100% - 1.5rem) / 3); }
.feature-sleeve .cover { width: 100%; height: auto; aspect-ratio: 1 / 1; }
.feature-caption { flex-basis: 100%; order: 2; display: flex;
  flex-direction: column; gap: 1px; min-width: 0; }
.feature-caption .albumtitle { white-space: nowrap; overflow: visible;
  text-overflow: clip; }
.feature-byline { display: flex; align-items: baseline; gap: 6px; }
.feature-byline .via { flex: none; white-space: nowrap; overflow: visible; }
.feature-byline .tag { margin-left: auto; }
.feature-why {
  flex: 1 1 140px; min-width: 0; margin: 0;
  font-size: var(--text--1); color: var(--ink-soft); font-style: italic;
}
.shelf-feature .placard { flex: 1 1 140px; }
/* top-pick sleeve = one grid cell: all covers on a shelf share one size */
.shelf-feature .cover { width: 100%; height: auto; aspect-ratio: 1 / 1; }
.placard { display: flex; flex-direction: column; gap: 3px; min-width: 0;
  padding-bottom: 2px; }
.placard .albumtitle { white-space: normal; font-family: var(--font-display);
  font-size: 1.1rem; line-height: 1.25; }
.shelf .placard .albumwhy { font-style: italic; white-space: normal;
  overflow: visible; margin-top: 3px; }
/* square contact grid: three equal columns filling the column width (6 picks
   = 3x2, 3 picks = one full row), cells as large as the space allows */
.shelf-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-4) var(--sp-3); padding-top: var(--sp-4); }
.shelf-cell { margin: 0; min-width: 0; }
.shelf-cell .cover { width: 100%; height: auto; aspect-ratio: 1 / 1; }
.shelf-cell figcaption { display: flex; flex-direction: column; gap: 1px;
  padding-top: 5px; }
/* one small text style on the shelf: --text--1; hierarchy via weight/ink only */
.shelf .albumtitle { overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; font-size: var(--text--1); font-weight: 500; }
.shelf .albumtitle a { color: var(--ink); text-decoration: none; }
.shelf .albumtitle a:hover { text-decoration: underline; }
.shelf .via { font-size: var(--text--1); color: var(--ink-soft); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; display: block; }
.cover-fallback {
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 600; font-size: 1.3rem;
  color: var(--ink-soft); width: 100%; aspect-ratio: 1 / 1;
}
.shelf-feature .cover-fallback { font-size: 2.4rem; }
@media (prefers-reduced-motion: reduce) {
  .shelf a.sleeve { transition: none; }
  .shelf a.sleeve:hover { transform: none; }
}
/* the moodboard: one community image per aesthetic, its median-cut palette
   hung beside it as a vertical rail of paint chips — pure color, no text
   ever sits on a swatch */
.board {
  margin: var(--sp-2) 0 0; max-width: 400px;
  display: grid; grid-template-columns: minmax(0, 1fr) 22px;
  column-gap: 8px; align-items: stretch;
}
.board a.board-link, .board > .board-img { grid-column: 1; grid-row: 1; }
.board .board-swatches {
  grid-column: 2; grid-row: 1;
  flex-direction: column; height: auto; margin-top: 0;
}
.board .board-credit { grid-column: 1 / -1; }
.board .board-img {
  display: block; width: 100%; height: auto;
  background: var(--plate, var(--peri));
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}
.board a.board-link { display: block; line-height: 0;
  transition: transform 0.15s ease, box-shadow 0.15s ease; }
@media (hover: hover) {
  .board a.board-link:hover { transform: translateY(-3px);
    box-shadow: 0 6px 14px rgba(24, 21, 17, 0.18); }
}
.board-swatches { display: flex; height: 14px; margin-top: 6px; }
.board-swatch { flex: 1; }
.board-credit { margin-top: 5px; }
.board-credit a { font-size: var(--text-tag); color: var(--ink-soft);
  text-decoration: none; }
.board-credit a:hover { text-decoration: underline; }
@media (prefers-reduced-motion: reduce) {
  .board a.board-link { transition: none; }
  .board a.board-link:hover { transform: none; }
}
/* the namesake notice — the atlas panel's lilac plate, worn as a link */
.sibling {
  display: block; margin-top: var(--sp-5); padding: 10px 12px;
  background: var(--lilac); color: var(--ink); font-size: var(--text--1);
  text-decoration: none; max-width: var(--measure);
  --cut: 0.55rem;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut) / 0.21256) 100%, 0 100%);
}
@media (hover: hover) {
  .sibling:hover { filter: brightness(0.97); }
}
.sibling b { color: var(--ink); }
.col-main > .sibling:first-child { margin-top: 0; }

.nlist .bridge-chip {
  --cut: 0.4rem;
  margin-left: auto; padding: 1px 8px; font-size: var(--text-tag);
  color: var(--ink); white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; max-width: 46%;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut) / 0.21256) 100%, 0 100%);
}

.extlinks { display: flex; gap: 8px; margin-top: var(--sp-5); flex-wrap: wrap; }
.extlinks a {
  font-size: var(--text--1); text-decoration: none; color: var(--ink);
  border: 1.5px solid var(--ink); padding: 5px 11px;
}
@media (hover: hover) {
  .extlinks a:hover { background: var(--ink); color: var(--paper); }
}
.extlinks a:active { background: var(--ink); color: var(--paper); }
@media (pointer: coarse) {
  .extlinks a { min-height: var(--tap); display: inline-flex; align-items: center; }
}

/* family / region / scene detail layouts */
.node-cols.one-col { grid-template-columns: 1fr; }
.nmeta h3, .col-main h3, .col-side h3 {
  font-size: var(--text-tag); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--ink-soft); margin: var(--sp-6) 0 var(--sp-3);
}
/* both columns open level with each other, no inherited first margins */
.col-main > h3:first-child, .col-side > h3:first-child,
.col-main > .nmeta:first-child { margin-top: 0; }
.dgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--sp-3);
}
.dgrid--wide { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.dcard {
  --cut: 0.7rem;
  display: flex; flex-direction: column; gap: 2px;
  background: var(--plate, var(--butter));
  color: var(--ink); text-decoration: none;
  padding: var(--sp-4) var(--sp-4) calc(var(--sp-4) + 0.5rem);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut) / 0.21256) 100%, 0 100%);
}
.dcard:hover .dcard-name { text-decoration: underline; text-underline-offset: 3px; }
.dcard-name { font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; line-height: 1.2; }
.dcard-meta { font-size: var(--text--1); color: var(--ink-soft); }
/* scene cards: the rooms of a family, a size up from the other cards */
.dcard--scene { padding: var(--sp-5) var(--sp-5) calc(var(--sp-5) + 0.6rem); }
.dcard--scene .dcard-name { font-size: 1.2rem; }
/* the side rail: scenes stack one per row, a directory of rooms */
.dgrid--rail { grid-template-columns: 1fr; }
.nlist .more a { color: var(--link); font-weight: 400; }

/* ---- phones: two-up shelves, wrapping rows, full-width boards ---- */
@media (max-width: 640px) {
  /* three-up covers land near 90px on a phone; two-up keeps them readable */
  .shelf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feature-sleeve { width: calc((100% - 0.75rem) / 2); }
  /* untruncated one-liners overflow the viewport here: let them wrap */
  .feature-caption .albumtitle { white-space: normal; }
  .feature-byline { flex-wrap: wrap; }
  .feature-byline .via { white-space: normal; flex: 1 1 auto; min-width: 0; }
  /* connection rows: the chip takes its own line instead of ellipsizing
     inside half of a narrow row */
  .nlist li { flex-wrap: wrap; row-gap: 2px; padding: 8px 0; }
  .nlist .bridge-chip { max-width: 100%; }
  .nlist .via { white-space: normal; }
  .board { max-width: none; }
}