/* ==========================================================================
   RESOURCES (round 3): resources.html (hub) + resources-music.html (guide)
   --------------------------------------------------------------------------
   Hub: body.sec-home (longleaf green, Instrument Serif). Music guide:
   body.sec-music (navy + gold, Big Shoulders). Both are plain listing pages,
   not landings. Loads after shell.css, shared-pages.css (.sp-hero, .sp-crumbs,
   .sp-art) and about.css (.ab-hero ground on the hub). Never restyles shared
   chrome. Prefix: rs-.

   Parts
   - .rs-hero-grid / .rs-steps   hero text + numbered "first steps" panel
   - .rs-toc                     sticky "On this page" jump bar (plain anchors)
   - .rs-note                    one-line disclaimer strip
   - .rs-sec / .rs-head / .rs-num  numbered section header
   - .rs-list / .rs-item         resource cards: name (stretched link),
                                 one-line purpose, scope tag, kind, host
   - .rs-tag--nc / --us / --site / --note   scope tags
   - .rs-tip                     "Good to know" callout
   - .rs-forms / .rs-form        8 art-form guide cards (hub)
   - .rs-suggest                 "Suggest a resource" band

   No JavaScript. Nothing starts hidden. Off-site links carry a visible
   arrow (.rs-ext) and a .sr-only "(opens in a new tab)".

   Contrast (values from shell.css §2):
   home: ink #2F6B45 on white 6.34, on tint #E3EEE4 5.32; accent #A6E3B0 on
         deep #0E1A14 12.10; mist on deep >= 9.
   music: ink #B42232 on white 6.6, on tint #F4EBDA 5.6; accent #F2C14E on
         deep #0B1730 10.6; mist #C9D0DD on deep 11.
   muted #55595F on white 7.0 / tints >= 5.6. National tag: ink on white.
   ========================================================================== */

/* ---------- headings ---------- */
.rs-page .block-title em { font-style: italic; color: var(--sec-ink); }
.sec-music .rs-page .block-title em ,
.sec-music.rs-page .block-title em { font-style: normal; }           /* Big Shoulders has no italic */
.rs-page .list-cta .block-title em { color: var(--sec-tint); }
.rs-hero .sp-h1 { max-width: 17ch; }
.sec-music .rs-hero .sp-h1 { max-width: 14ch; }

/* ---------- hero ---------- */
.rs-hero--music {
  background:
    radial-gradient(ellipse 50% 70% at 100% 0%, rgba(242,193,78,.16), transparent 70%),
    radial-gradient(ellipse 40% 60% at 0% 100%, rgba(180,34,50,.22), transparent 70%),
    var(--sec-deep);
}
.rs-hero-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 72px); align-items: center; }

.rs-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 24px; font-size: 14.5px; color: var(--sec-mist); }
.rs-legend .rs-tag + .rs-tag, .rs-legend .rs-tag:not(:first-child) { margin-left: 10px; }
.on-deep .rs-tag--nc { background: var(--sec-accent); color: var(--sec-deep); }
.on-deep .rs-tag--us { color: var(--night-text); box-shadow: inset 0 0 0 1px rgba(255,255,255,.55); }

/* numbered first-steps panel */
.rs-steps {
  list-style: none; counter-reset: st; padding: 8px; border-radius: 8px;
  background: var(--sec-deep-2); border-top: 4px solid var(--sec-sig);
  box-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 24px 50px rgba(0,0,0,.35);
}
.rs-steps li { counter-increment: st; }
.rs-steps li + li { border-top: 1px solid rgba(255,255,255,.09); }
.rs-steps a {
  display: grid; grid-template-columns: 38px minmax(0, 1fr); column-gap: 14px; align-items: center;
  padding: 12px 12px; border-radius: 6px; color: var(--night-text); text-decoration: none;
}
.rs-steps a::before {
  content: counter(st); grid-row: 1 / span 2; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; background: var(--sec-accent); color: var(--sec-deep);
  font: 700 15px/1 var(--font-ui);
}
.rs-steps b { font: 700 16.5px/1.25 var(--font-ui); }
.rs-steps a > span { font-size: 14px; line-height: 1.4; color: var(--sec-mist); }
.rs-steps a:hover { background: rgba(255,255,255,.06); }
.rs-steps a:hover b { text-decoration: underline; text-underline-offset: .15em; }

/* ---------- sticky jump bar + disclaimer ---------- */
/* keep a focused or targeted element clear of the sticky bar (WCAG 2.4.11); 72px = bar (57px) + the focus ring and halo (11px) + 4px */
html:has(.rs-toc) { scroll-padding-top: 72px; }
.rs-toc {
  position: sticky; top: 0; z-index: 5;
  background: var(--card); border-bottom: 1px solid var(--line); box-shadow: 0 6px 18px rgba(17,18,20,.05);
}
.rs-toc ol { list-style: none; display: flex; gap: 2px; overflow-x: auto; scrollbar-width: thin; padding: 8px 0; }
.rs-toc li { flex: none; }
.rs-toc a {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px;
  border-radius: var(--r-pill); color: var(--ink); text-decoration: none; font: 600 14px/1 var(--font-ui);
}
.rs-toc a:hover { background: var(--sec-tint); }
.rs-toc-n { font: 500 11.5px/1 var(--font-mono); letter-spacing: .04em; color: var(--sec-ink); }

.rs-note { border-bottom: 1px solid var(--line); }
.rs-note p { padding: 14px 0; max-width: 96ch; font-size: 14.5px; line-height: 1.5; color: var(--muted); }

/* ---------- section header ---------- */
.rs-sec { padding-block: clamp(48px, 6vw, 84px); scroll-margin-top: 64px; }
.rs-head {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start;
  gap: 0 clamp(16px, 2.6vw, 34px); margin-bottom: clamp(22px, 3vw, 34px);
}
.rs-num {
  min-width: 1.25em; padding-top: 2px;
  font: var(--sec-display-weight) clamp(46px, 5.2vw, 72px)/.9 var(--sec-display);
  color: var(--sec-ink); letter-spacing: -.02em;
}
.sec-home .rs-num { font-style: italic; }
.rs-head .block-intro { max-width: 68ch; }

/* ---------- resource cards ---------- */
.rs-list { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 14px; }
.rs-list--3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.rs-item {
  position: relative; display: flex; flex-direction: column; gap: 7px; min-width: 0;
  padding: 18px 20px 15px; background: var(--card);
  border: 1px solid var(--line); border-left: 4px solid #8A8D92; border-radius: var(--r-card);
  box-shadow: var(--shadow-1); transition: transform .15s ease, box-shadow .15s ease;
}
.rs-item--nc { border-left-color: var(--sec-ink); }
.rs-item--site { border-left-color: var(--sec-sig); }
.rs-item:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.rs-item:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; box-shadow: 0 0 0 6px rgba(17,18,20,.85); }   /* two-tone ring, as shell.css :focus-visible */
.rs-name { font: 700 18px/1.28 var(--font-ui); letter-spacing: -.01em; color: var(--ink); }
.rs-name a { color: var(--ink); text-decoration: none; }
.rs-name a::after { content: ""; position: absolute; inset: 0; z-index: 1; }   /* whole card is the target */
.rs-name a:focus-visible { box-shadow: none !important; outline: none; }         /* ring drawn on the card */
.rs-item:hover .rs-name a { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .15em; }
.rs-nw { white-space: nowrap; }
.rs-ext, .rs-int { display: inline-block; margin-left: 6px; color: var(--sec-ink); font-weight: 700; text-decoration: none; }
.rs-item:hover .rs-ext { translate: 2px -2px; }
.rs-what { font-size: 15.5px; line-height: 1.5; color: var(--muted); }
.rs-what p + p { margin-top: 8px; }
.rs-prog { color: var(--ink); font-weight: 600; }
.rs-meta {
  margin-top: auto; padding-top: 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px;
  font: 500 12px/1.3 var(--font-mono); color: var(--muted);
}
.rs-host { margin-left: auto; overflow-wrap: anywhere; }

/* card icon (tools/icons.py): badge left of the title, text runs full width below */
.rs-item:has(> .rs-ico) { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto 1fr auto; column-gap: 14px; align-items: start; }
.rs-item > .rs-ico { grid-column: 1; grid-row: 1; width: 46px; height: 46px; padding: 6px; border-radius: 13px; }
.rs-item:has(> .rs-ico) > .rs-name { grid-column: 2; grid-row: 1; align-self: center; }
.rs-item:has(> .rs-ico) > .rs-what { grid-column: 1 / -1; grid-row: 2; }
.rs-item:has(> .rs-ico) > .rs-meta { grid-column: 1 / -1; grid-row: 3; }

/* scope tags */
.rs-tag {
  display: inline-flex; align-items: center; padding: 4px 8px; border-radius: 3px;
  font: 700 11px/1.1 var(--font-ui); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
}
.rs-tag--nc { background: var(--sec-deep); color: var(--sec-accent); }
.rs-tag--us { color: var(--ink); box-shadow: inset 0 0 0 1px #8A8D92; }
.rs-tag--site, .rs-tag--note { background: var(--sec-tint); color: var(--sec-ink); }
.block--tint .rs-tag--site, .block--tint .rs-tag--note { background: var(--sec-paper); }

/* plain explainer card (no link) */
.rs-item--note { background: transparent; border-style: dashed; border-left: 4px solid var(--sec-sig); box-shadow: none; }
.rs-item--note:hover { transform: none; box-shadow: none; }
.rs-item--note .rs-what { color: var(--ink); }

/* sub-list heading inside a section */
.rs-sub {
  display: flex; align-items: center; gap: 12px; margin: 34px 0 14px;
  font: 500 12px/1.2 var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--sec-ink);
}
.rs-sub::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* "Good to know" */
.rs-tip {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: 4px 16px;
  max-width: 940px; margin-bottom: 18px; padding: 14px 18px;
  background: var(--sec-tint); border-left: 4px solid var(--sec-ink); border-radius: var(--r-card);
}
.block--tint .rs-tip { background: var(--card); }
.rs-tip-k { font: 500 11px/1.3 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--sec-ink); white-space: nowrap; }
.rs-tip p + p { font-size: 15.5px; line-height: 1.55; color: var(--ink); }

/* ---------- hub: guides by art form ---------- */
.rs-forms { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 2vw, 22px); }
.rs-form {
  position: relative; display: flex; flex-direction: column; min-width: 0;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden;
  box-shadow: var(--shadow-1);
}
.rs-form-art { position: relative; height: 112px; background: var(--sec-deep); border-bottom: 4px solid var(--sec-sig); }
.rs-form-obj { position: absolute; right: 16px; top: 50%; width: 80px; height: 80px; translate: 0 -50%; transition: rotate .5s ease; }
.rs-form-body { display: flex; flex-direction: column; gap: 8px; flex: 1; padding: 16px 18px 18px; }
.rs-form-name { font: 700 19px/1.22 var(--font-ui); letter-spacing: -.01em; color: var(--ink); }
.rs-form-name a { color: var(--ink); text-decoration: none; }
.rs-form-name a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.rs-form-name a:focus-visible { box-shadow: none !important; outline: none; }
.rs-form:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; box-shadow: 0 0 0 6px rgba(17,18,20,.85); }
.rs-form-what { font-size: 15px; line-height: 1.5; color: var(--muted); }
.rs-form-status {
  align-self: flex-start; margin-top: auto; padding: 4px 9px; border-radius: 3px;
  font: 700 11px/1.1 var(--font-ui); letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink); box-shadow: inset 0 0 0 1px #8A8D92;
}
.rs-form-status--live { background: var(--sec-ink); color: var(--sec-on-ink); box-shadow: none; }
.rs-form-alt { display: inline-block; padding: 3px 0; font-weight: 600; font-size: 14.5px; color: var(--sec-ink); }
.rs-form-alt::after { content: "\00a0\2192"; }
.rs-form--live { border-color: var(--sec-ink); box-shadow: var(--shadow-2); transition: transform .15s ease; }
.rs-form--live:hover { transform: translateY(-3px); }
.rs-form--live:hover .rs-form-name a { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .15em; }
.rs-form-obj { transition: rotate .5s ease, scale .35s ease; }
.rs-form--live:hover .rs-form-obj { scale: 1.12; }                 /* only the record spins (user, 2026-10-11) */
.rs-form--live.sec-music:hover .rs-form-obj { rotate: 90deg; scale: 1; }
.rs-form-status { margin-top: auto; }                              /* status tag pinned to the bottom of every card */

/* ---------- suggest a resource ---------- */
.rs-suggest { background: var(--sec-tint); padding-block: clamp(40px, 5vw, 64px); }
.rs-suggest-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 40px; }
.rs-suggest-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .rs-forms { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 880px) {
  .rs-hero-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .rs-head { grid-template-columns: minmax(0, 1fr); }
  .rs-num { font-size: 40px; margin-bottom: 8px; }
  .rs-tip { grid-template-columns: minmax(0, 1fr); }
  .rs-forms { grid-template-columns: minmax(0, 1fr); }
  .rs-form-art { height: 84px; }
  .rs-form-obj { width: 64px; height: 64px; }
  .rs-item { padding: 16px 16px 14px; }
  .rs-host { margin-left: 0; }
}