/* Starlight Menagerie: shared styles for the project hub and its subpages
   (trailer, creatures, encyclopedia, map). Loaded after gamelab.css and before editorial.css. */

.sm-page .article-header,
.sm-page .article-content { max-width: 1040px; }
.sm-page .article-content > section { margin-top: 3rem; }

/* ---------------------------------------------------------------- section strip */
.sm-subnav { margin: 1.5rem 0 0; border-top: 1px solid var(--editorial-rule); border-bottom: 1px solid var(--editorial-rule); }
.sm-subnav ul { display: flex; flex-wrap: wrap; gap: 0 .25rem; margin: 0; padding: 0; list-style: none; }
.sm-subnav a { display: block; padding: .7rem .8rem; color: var(--editorial-ink-soft); font-size: .92rem; font-weight: 600; text-decoration: none; border-bottom: 3px solid transparent; }
.sm-subnav a:hover { color: var(--editorial-blue); }
.sm-subnav a[aria-current="page"] { color: var(--editorial-ink); border-bottom-color: var(--editorial-blue); }
.sm-subnav .sm-play { margin-left: auto; }
.sm-subnav .sm-play a { color: var(--editorial-blue); }

.sm-kicker { color: var(--editorial-blue); font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.sm-lede { font-family: var(--editorial-serif); font-size: 1.2rem; line-height: 1.55; color: var(--editorial-ink-soft); max-width: 46rem; }

/* ---------------------------------------------------------------- hub: the four doors */
.sm-doors { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin: 1.5rem 0 0; padding: 0; list-style: none; }
.sm-doors a { display: flex; flex-direction: column; height: 100%; border: 1px solid var(--editorial-rule); background: var(--editorial-paper-bright); color: var(--editorial-ink); text-decoration: none; }
.sm-doors a:hover { border-color: var(--editorial-blue); }
.sm-doors img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: #10151b; }
.sm-doors div { padding: .9rem 1rem 1rem; }
.sm-doors strong { display: block; font-family: var(--editorial-serif); font-size: 1.15rem; margin-bottom: .25rem; }
.sm-doors span { font-size: .9rem; color: var(--editorial-muted); }

/* ---------------------------------------------------------------- trailer */
.sm-trailer { display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: 2.5rem; align-items: start; margin-top: 2rem; }
.sm-trailer video { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; background: #000; border: 1px solid var(--editorial-rule); }
.sm-trailer figure { margin: 0; }
.sm-trailer figcaption { margin-top: .5rem; font-size: .85rem; color: var(--editorial-muted); }
.sm-trailer h2 { margin-top: 0; }
.sm-beats { margin: 1rem 0 0; padding: 0; list-style: none; border-top: 1px solid var(--editorial-rule); }
.sm-beats li { display: grid; grid-template-columns: 4.2rem 1fr; gap: .75rem; padding: .6rem 0; border-bottom: 1px solid var(--editorial-rule); font-size: .95rem; }
.sm-beats button { font: inherit; font-variant-numeric: tabular-nums; color: var(--editorial-blue); background: none; border: 0; padding: 0; text-align: left; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.sm-beats time { font-variant-numeric: tabular-nums; color: var(--editorial-blue); }

/* ---------------------------------------------------------------- creatures gallery */
.sm-tools { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin: 1.5rem 0 0; padding: .75rem 0; border-top: 1px solid var(--editorial-rule); border-bottom: 1px solid var(--editorial-rule); }
.sm-tools label, .sm-tools .sm-tools-label { font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--editorial-muted); }
.sm-seg { display: inline-flex; border: 1px solid var(--editorial-rule-strong); }
.sm-seg button, .sm-chip { font: inherit; font-size: .88rem; padding: .4rem .75rem; background: var(--editorial-paper-bright); color: var(--editorial-ink); border: 0; cursor: pointer; }
.sm-seg button + button { border-left: 1px solid var(--editorial-rule-strong); }
.sm-seg button[aria-pressed="true"], .sm-chip[aria-pressed="true"] { background: var(--editorial-ink); color: var(--editorial-paper-bright); }
.sm-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.sm-chip { border: 1px solid var(--editorial-rule-strong); border-radius: 999px; padding: .3rem .75rem; }
.sm-search { font: inherit; font-size: .95rem; padding: .45rem .7rem; min-width: 14rem; border: 1px solid var(--editorial-rule-strong); background: var(--editorial-paper-bright); color: var(--editorial-ink); }
.sm-count { margin-left: auto; font-size: .88rem; color: var(--editorial-muted); }

.sm-hab-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem 1rem; }
.sm-hab-head h2 { margin-bottom: .2rem; }
.sm-hab-head a { font-size: .9rem; }
.sm-hab-note { margin: 0 0 1rem; color: var(--editorial-muted); font-size: .95rem; max-width: 48rem; }
.sm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1rem; margin: 0; padding: 0; list-style: none; }
.sm-card { margin: 0; border: 1px solid var(--editorial-rule); background: var(--editorial-paper-bright); }
.sm-card > a, .sm-card > button { display: block; width: 100%; padding: 0; border: 0; background: none; color: inherit; text-align: left; text-decoration: none; cursor: zoom-in; font: inherit; }
.sm-card img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; background: #10151b; }
.sm-card figcaption, .sm-card .sm-card-text { display: block; padding: .65rem .8rem .8rem; }
.sm-card strong { display: block; font-family: var(--editorial-serif); font-size: 1.08rem; }
.sm-card span { display: block; font-size: .84rem; color: var(--editorial-muted); }
.sm-card:hover { border-color: var(--editorial-blue); }

/* the viewer */
.sm-viewer { width: min(1100px, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); padding: 0; border: 0; background: #0d1116; color: #e9edf1; }
.sm-viewer::backdrop { background: rgba(5, 8, 12, .82); }
.sm-viewer img { display: block; width: 100%; height: auto; max-height: calc(100vh - 11rem); object-fit: contain; background: #000; }
.sm-viewer-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; padding: .8rem 1rem 1rem; }
.sm-viewer-bar h2 { margin: 0; font-family: var(--editorial-serif); font-size: 1.3rem; color: #fff; }
.sm-viewer-bar p { margin: 0; font-size: .9rem; color: #b9c3cc; flex-basis: 100%; }
.sm-viewer .sm-seg { border-color: #4b5662; }
.sm-viewer .sm-seg button { background: #18202a; color: #e9edf1; }
.sm-viewer .sm-seg button + button { border-left-color: #4b5662; }
.sm-viewer .sm-seg button[aria-pressed="true"] { background: #e9edf1; color: #0d1116; }
.sm-viewer a { color: #9cc7ea; }
.sm-viewer-nav { display: flex; gap: .4rem; margin-left: auto; }
.sm-viewer-nav button { font: inherit; font-size: .9rem; padding: .4rem .7rem; background: #18202a; color: #e9edf1; border: 1px solid #4b5662; cursor: pointer; }

/* ---------------------------------------------------------------- encyclopedia */
.sm-entries { margin: 0; padding: 0; list-style: none; }
.sm-entry { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 1.5rem; padding: 1.75rem 0; border-bottom: 1px solid var(--editorial-rule); scroll-margin-top: 5rem; }
.sm-entry:target { background: linear-gradient(90deg, var(--editorial-blue-wash), transparent 70%); }
.sm-entry-pics img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; background: #10151b; border: 1px solid var(--editorial-rule); }
.sm-entry-pics .sm-mini { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; margin-top: .4rem; }
.sm-entry h2, .sm-entry h3 { margin: 0; font-family: var(--editorial-serif); }
.sm-entry .sm-basis { margin: .2rem 0 .8rem; color: var(--editorial-muted); font-size: .95rem; }
.sm-entry .sm-basis i { font-style: italic; }
.sm-entry blockquote { margin: 0 0 1rem; padding: .1rem 0 .1rem 1rem; border-left: 3px solid var(--editorial-blue); font-family: var(--editorial-serif); font-size: 1.1rem; color: var(--editorial-ink); }
.sm-entry h4 { margin: 1rem 0 .25rem; font-size: .78rem; letter-spacing: .07em; text-transform: uppercase; color: var(--editorial-blue); }
.sm-entry p { margin: 0 0 .5rem; }
.sm-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin: 1rem 0 0; border: 1px solid var(--editorial-rule); background: var(--editorial-rule); }
.sm-stats div { padding: .55rem .7rem; background: var(--editorial-paper-bright); }
.sm-stats dt { font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--editorial-muted); }
.sm-stats dd { margin: .15rem 0 0; font-size: .95rem; color: var(--editorial-ink); }
.sm-tag { display: inline-block; padding: .1rem .55rem; border: 1px solid currentColor; border-radius: 999px; font-size: .78rem; font-weight: 700; }
.sm-tag-hunter { color: #8c2a1e; } .sm-tag-charger { color: #8a5a00; } .sm-tag-swarm { color: #7a2f6a; }
.sm-tag-diver { color: #3d5a8a; } .sm-tag-skittish { color: #2f6b45; } .sm-tag-harmless { color: #4f5b66; } .sm-tag-tank { color: #1f6475; }
.sm-index { columns: 4 12rem; column-gap: 1.5rem; margin: 1rem 0 0; padding: 0; list-style: none; font-size: .95rem; }
.sm-index li { break-inside: avoid; padding: .15rem 0; }

/* ---------------------------------------------------------------- map */
.sm-mapwrap { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 1.25rem; align-items: start; margin-top: 1.5rem; }
.sm-mapframe { position: relative; margin: 0; background: #0d1116; border: 1px solid var(--editorial-rule); }
.sm-mapframe svg { display: block; width: 100%; height: auto; }
.sm-hab-shape { fill: rgba(255, 255, 255, .04); stroke: rgba(255, 255, 255, .55); stroke-width: 1.4; vector-effect: non-scaling-stroke; cursor: pointer; transition: fill .15s; }
.sm-hab-shape.is-empty { stroke-dasharray: 5 4; }
.sm-hab a:hover .sm-hab-shape, .sm-hab a:focus .sm-hab-shape { fill: rgba(255, 214, 120, .22); stroke: #ffd678; }
.sm-hab a.is-on .sm-hab-shape { fill: rgba(255, 214, 120, .3); stroke: #ffd678; stroke-width: 2.4; }
.sm-hab a:focus { outline: none; }
.sm-hab a:focus-visible .sm-hab-shape { stroke-width: 3; }
.sm-hab-label { fill: #fff; font: 700 12px var(--editorial-sans); paint-order: stroke; stroke: rgba(0, 0, 0, .75); stroke-width: 3px; pointer-events: none; }
.sm-hab-label tspan.sm-sub { font-weight: 500; font-size: 9px; fill: #d7dde3; }
.sm-paths line { stroke: #f2b33d; stroke-width: 1.4; stroke-opacity: .8; vector-effect: non-scaling-stroke; stroke-dasharray: 2 3; }
.sm-chargers circle { fill: #4fd1ff; stroke: #0d1116; stroke-width: 1; vector-effect: non-scaling-stroke; }
.sm-mapframe[data-paths="off"] .sm-paths, .sm-mapframe[data-chargers="off"] .sm-chargers, .sm-mapframe[data-labels="off"] .sm-hab-label { display: none; }
.sm-maptools { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; margin-top: .6rem; font-size: .88rem; color: var(--editorial-muted); }
.sm-maptools label { display: inline-flex; align-items: center; gap: .35rem; cursor: pointer; }
.sm-legend-dot { display: inline-block; width: .7rem; height: .7rem; border-radius: 50%; background: #4fd1ff; }
.sm-legend-path { display: inline-block; width: 1.2rem; border-top: 2px dashed #c98a12; }
.sm-panel { position: sticky; top: 1rem; border: 1px solid var(--editorial-rule); background: var(--editorial-paper-bright); }
.sm-panel > img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; background: #10151b; }
.sm-panel-body { padding: 1rem 1.1rem 1.2rem; }
.sm-panel h2 { margin: .1rem 0 .3rem; font-family: var(--editorial-serif); font-size: 1.45rem; }
.sm-panel p { font-size: .95rem; margin: 0 0 .6rem; }
.sm-panel .sm-omaha { font-size: .85rem; color: var(--editorial-muted); }
.sm-who { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; margin: .5rem 0 .8rem; padding: 0; list-style: none; }
.sm-who a { display: block; font-size: .76rem; line-height: 1.2; color: var(--editorial-ink); text-decoration: none; }
.sm-who img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; margin-bottom: .2rem; background: #10151b; border: 1px solid var(--editorial-rule); }
.sm-who a:hover { color: var(--editorial-blue); }
.sm-exhibits { margin-top: 3rem; }
.sm-exhibit { padding: 1.5rem 0; border-top: 1px solid var(--editorial-rule); scroll-margin-top: 5rem; }
.js .sm-exhibits[data-live] .sm-exhibit { display: none; }
.sm-panel-empty { padding: 1.2rem; color: var(--editorial-muted); font-size: .95rem; }

@media (max-width: 900px) {
  .sm-doors { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sm-mapwrap { grid-template-columns: 1fr; }
  .sm-panel { position: static; }
  .sm-entry { grid-template-columns: 200px minmax(0, 1fr); }
}
@media (max-width: 700px) {
  .sm-trailer { grid-template-columns: 1fr; }
  .sm-trailer video { max-width: 420px; margin: 0 auto; }
  .sm-entry { grid-template-columns: 1fr; }
  .sm-entry-pics { max-width: 420px; }
  .sm-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sm-count { margin-left: 0; }
  .sm-search { min-width: 0; width: 100%; }
  .sm-subnav a { padding: .6rem .55rem; font-size: .88rem; }
  .sm-subnav .sm-play { margin-left: 0; }
  .sm-hab-label { font-size: 16px; }
  .sm-hab-label tspan.sm-sub { display: none; }
}
@media (max-width: 460px) {
  .sm-doors { grid-template-columns: 1fr; }
  .sm-grid { grid-template-columns: 1fr 1fr; gap: .6rem; }
  .sm-card strong { font-size: .98rem; }
}
@media (prefers-reduced-motion: reduce) { .sm-hab-shape { transition: none; } }

/* ---------------------------------------------------------------- editorial layer adjustments
   editorial.css loads last and narrows articles to a reading measure; the subpages need room for
   the gallery, the map and the entries, while their prose keeps the measure */
.editorial-page.sm-sub .research-article > .container { max-width: 1160px; }
.editorial-page.sm-sub .article-header h1 { max-width: 900px; }
.editorial-page.sm-sub .article-content { max-width: none; }
.editorial-page.sm-page .article-content p,
.editorial-page.sm-page .article-content section > ul:not([class]) { max-width: 46rem; }
.editorial-page.sm-page .article-content .sm-panel p,
.editorial-page.sm-page .article-content .sm-viewer p { max-width: none; }
.editorial-page.sm-page .article-content figure.sm-mapframe,
.editorial-page.sm-page .article-content .sm-card,
.editorial-page.sm-page .article-content .sm-trailer figure { margin: 0; }
.editorial-page.sm-page .article-content .sm-panel h2,
.editorial-page.sm-page .article-content .sm-exhibit h2,
.editorial-page.sm-page .article-content .sm-viewer h2 { margin: .15rem 0 .35rem; padding: 0; border: 0; }
.editorial-page.sm-page .article-content .sm-grid li,
.editorial-page.sm-page .article-content .sm-doors li,
.editorial-page.sm-page .article-content .sm-who li,
.editorial-page.sm-page .article-content .sm-beats li,
.editorial-page.sm-page .article-content .sm-index li { font-size: inherit; line-height: 1.35; }
.editorial-page.sm-page .article-content .sm-beats li { font-size: .95rem; }
.editorial-page.sm-page .article-content .sm-entry p { font-size: 1rem; line-height: 1.65; }
.editorial-page.sm-page .article-content .sm-hab-head h2 { border: 0; padding-bottom: 0; margin-top: 3rem; }
.editorial-page.sm-page .article-content .sm-entry-group > h2 { margin-top: 3rem; }
.editorial-page.sm-page .article-header .sm-subnav { margin-top: 2rem; }
.sm-mapwrap { grid-template-columns: minmax(0, 1fr) 320px; }
@media (max-width: 1100px) { .sm-mapwrap { grid-template-columns: 1fr; } .sm-panel { position: static; } .sm-panel > img { aspect-ratio: 16 / 7; } }
.sm-hab-label { font-size: 17px; text-anchor: inherit; }
.sm-hab-label tspan.sm-sub { font-size: 12px; }
@media (max-width: 700px) { .sm-hab-label { font-size: 26px; } }
.editorial-page.sm-page .article-header { padding-bottom: 0; }
.editorial-page.sm-page .sm-subnav { border-bottom: 0; }
.editorial-page.sm-page .article-content ul.sm-grid, .editorial-page.sm-page .article-content ul.sm-doors, .editorial-page.sm-page .article-content ul.sm-who,
.editorial-page.sm-page .article-content ol.sm-beats, .editorial-page.sm-page .article-content ul.sm-entries, .editorial-page.sm-page .article-content ul.sm-index { padding-left: 0; margin-left: 0; list-style: none; }
.editorial-page .sm-viewer h2 { color: #fff; }
.editorial-page .sm-viewer p, .editorial-page .sm-viewer span { color: #c3ccd5; }
.editorial-page .sm-entry h4 { font-family: var(--editorial-sans); color: var(--editorial-blue); }
.sm-hab-shape { pointer-events: all; }
.editorial-page.sm-page .article-content .sm-viewer h2 { color: #fff; }
.editorial-page.sm-page .article-content .sm-viewer p, .editorial-page.sm-page .article-content .sm-viewer span { color: #c3ccd5; font-size: .92rem; line-height: 1.5; }
.editorial-page.sm-page .article-content .sm-viewer a { color: #9cc7ea; }
@media (max-width: 700px) {
  .sm-subnav ul { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .sm-subnav ul::-webkit-scrollbar { display: none; }
  .sm-subnav a { white-space: nowrap; }
  .sm-hab-label { font-size: 21px; }
}