/* STAMP Resources: site map cards, then one band of cards per topic. */

.pg-stamp-resources .card[id], .sr-anchor { scroll-margin-top: calc(var(--header-h) + 16px); }
.sr-grey { background: #f5f7f7; }
.sr-lede { max-width: 820px; }
.sr-narrow { max-width: calc(1120px + 2 * var(--gutter)); }
.sr-head { margin-bottom: 40px; }
.sr-head .lede { max-width: 520px; margin-left: auto; margin-right: auto; font-size: 18px; }

.sr-sitemap-title { margin-bottom: 16px; font-family: var(--font-head); font-size: clamp(32px, 4vw, 48px); text-align: center; letter-spacing: -.02em; }
.sr-sitemap { gap: 20px; }
.sr-map { padding: 32px; box-shadow: 0 4px 24px rgb(20 32 56 / 7%); }
.sr-map h3 { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; font-family: var(--font-head); font-size: 20px; font-weight: 600; }
.sr-map .icon-tile, .sr-card .icon-tile { width: 40px; height: 40px; border-radius: 8px; background: var(--steel-soft); color: var(--steel); font-size: 20px; }
.sr-map ul { display: grid; gap: 14px; padding-left: 1em; list-style: disc; }
.sr-map li::marker { color: var(--navy-text); }
.sr-map a { text-decoration: none; }
.sr-map a:hover { text-decoration: underline; }

.sr-card { position: relative; padding: 24px; border: 1px solid var(--line); box-shadow: 0 4px 24px rgb(20 32 56 / 6%); }
.sr-card h3 { margin: 22px 0 14px; font-family: var(--font-head); font-size: 20px; font-weight: 700; }
.sr-card > p:last-child { font-size: 14px; line-height: 1.7; color: #334155; }
.sr-learn { gap: 20px; }
.sr-card-top { display: flex; align-items: center; gap: 16px; }
.sr-card-top .tag { margin-left: auto; padding: 6px 10px; border-radius: 6px; font-size: 11px; letter-spacing: .05em; }
.sr-card-top > .icon { margin-left: auto; font-size: 26px; color: var(--navy-text); }
.sr-card-top .tag + .icon { margin-left: 0; }
.sr-card-link { color: inherit; text-decoration: none; }
.sr-card-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.sr-learn-card:hover { border-color: var(--steel); }
.sr-learn-card:hover h3 { color: var(--steel-text); }

.sr-why { gap: 20px; }
.sr-anchors { display: grid; gap: 16px; padding-left: 1.3em; list-style: disc; font-size: 15px; line-height: 1.6; }
.sr-anchors li::marker { color: var(--navy-text); }
.sr-anchors a { text-decoration: none; }
.sr-anchors a .icon { margin-left: 8px; vertical-align: -2px; color: var(--navy-text); }
.sr-anchors a:hover { text-decoration: underline; }

.sr-offers { gap: 24px; }
.sr-offer { display: flex; flex-direction: column; align-items: flex-start; padding: 32px; }
.sr-offer .eyebrow { margin-bottom: 14px; font-size: 13px; }
.sr-offer .icon-tile { width: 48px; height: 48px; font-size: 22px; }
.sr-offer h3 { margin: 0 0 14px; font-family: var(--font-body); font-size: 20px; font-weight: 600; }
.sr-offer .icon-tile + h3 { margin-top: 32px; }
.sr-offer > p:not(.eyebrow) { flex: 1; margin-bottom: 30px; font-size: 16px; line-height: 1.65; color: var(--text); }
.sr-offer .btn { gap: 12px; padding: 12px 22px; border-radius: 3px; font-size: 14px; font-weight: 700; }
.sr-support .sr-offer { padding: 24px; }
.sr-support .sr-offer .icon-tile + h3 { margin-top: 24px; }
.sr-support .sr-offer > p:not(.eyebrow) { margin-bottom: 22px; }

@media (max-width: 760px) {
  .sr-map, .sr-offer { padding: 26px 20px; }
  .sr-offer .btn { width: 100%; }
}

/* The handbooks card spans both columns, under the four introductions. */
.sr-learn-wide { grid-column: 1 / -1; background: var(--steel-soft); border-color: #c9dcf0; }
.sr-learn-wide .icon-tile { background: #fff; }

/* One link vocabulary for the whole page:
   plain link = a page on this site; down chevron = further down this page;
   external-link icon = another site (new tab). */
.sr-jump .icon, .sr-ext .icon { margin-left: 6px; width: .85em; height: .85em; vertical-align: -1px; color: var(--steel); }

/* Site map box headings: the group name jumps to that group's band below. */
.sr-map-head { display: flex; flex: 1; align-items: center; gap: 16px; color: inherit; text-decoration: none; }
.sr-map-head:hover .sr-map-name { text-decoration: underline; }
.sr-map-head .icon-tile { flex: none; }
.sr-map-head > .icon { margin-left: auto; width: 18px; height: 18px; color: var(--steel); }

/* Small pages that fit no group, in one line under the site map. */
.sr-also { margin-top: 28px; text-align: center; font-size: 15px; color: #475569; }
.sr-also a { margin: 0 10px; white-space: nowrap; }

/* "Why use" cards: the heading is now a link to the page itself. */
.sr-why-head a { color: inherit; text-decoration: none; }
.sr-why-head a:hover { color: var(--steel-text); text-decoration: underline; }
.sr-why-head a .icon { margin-left: 8px; width: 16px; height: 16px; vertical-align: -1px; color: var(--steel); }
.sr-jumpto { margin: -4px 0 12px; font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #56687f; }

/* Banner: the owner's library-hall photo (banners/stamp-resources.webp, 1774 x 887, laid over the light
   background at 20%). The hall's bright arched doorway (columns 845-930, rows 440-655) is the open space the
   text sits in; the shelves frame it at the sides.
   Where the photo covers the banner by width (wide screens), the arch's centre (row 547 of 887, 61.7% down; the
   photo is half as tall as it is wide, so 30.85vw below the photo's top) is placed at 297px, the middle of the
   title-to-buttons block: offset = 297px - 30.85vw. clamp() keeps the photo filling the banner (100% = photo's
   bottom on the banner's bottom; 0px = photo's top on the banner's top). Where it covers by height (narrower
   screens), it is centred, which keeps the arch in the middle. */
.sr-hero { position: relative; background-color: #e8e4e1; background-position: 50% clamp(100%, calc(297px - 30.85vw), 0px); }
/* The banner's colour before the photo loads: the photo's measured average (#e8e4e1 over the band that wide
   screens show, #e9e5e2 over the whole photo). The page also preloads the photo ("preload:" line). */
/* A soft white fade behind the title, subtitle and buttons, fading out before the shelves at the sides. */
.sr-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 30% 44% at 50% 55%, rgb(248 250 252 / 70%) 0%, rgb(248 250 252 / 45%) 55%, rgb(248 250 252 / 0%) 100%); }
.sr-hero > .container { position: relative; }
@media (max-width: 760px) {
  .sr-hero::before { background: radial-gradient(ellipse 60% 42% at 50% 52%, rgb(248 250 252 / 70%) 0%, rgb(248 250 252 / 45%) 55%, rgb(248 250 252 / 0%) 100%); }
}


/* ---- Dark mode, generated by tools/darkmode.py when the site is built. Don't edit this part in site/; change the light rule in src/, or add a hand-written dark rule. ---- */
@media (prefers-color-scheme: dark) {
  .sr-grey { background-color: #171d27; }
  .sr-map { box-shadow: 0 4px 24px rgb(0 0 0 / 31%); }
  .sr-map .icon-tile, .sr-card .icon-tile { color: #7ebaf9; }
  .sr-card { box-shadow: 0 4px 24px rgb(0 0 0 / 28%); }
  .sr-card > p:last-child { color: #c2d3ec; }
  .sr-learn-card:hover { border-color: #4892dc; }
  .sr-learn-wide { border-color: #333f4b; }
  .sr-learn-wide .icon-tile { background-color: #111620; }
  .sr-jump .icon, .sr-ext .icon { color: #7ebaf9; }
  .sr-map-head > .icon { color: #7ebaf9; }
  .sr-also { color: #bbcbe3; }
  .sr-why-head a .icon { color: #7ebaf9; }
  .sr-jumpto { color: #b1c5df; }
  .sr-hero { background-color: #252b36; }
  .sr-hero::before { background-image: radial-gradient(ellipse 30% 44% at 50% 55%, rgb(20 26 36 / 70%) 0%, rgb(20 26 36 / 45%) 55%, rgb(20 26 36 / 0%) 100%); }
  @media (max-width: 760px) {
    .sr-hero::before { background-image: radial-gradient(ellipse 60% 42% at 50% 52%, rgb(20 26 36 / 70%) 0%, rgb(20 26 36 / 45%) 55%, rgb(20 26 36 / 0%) 100%); }
  }
}