/* speeb.org page layout. Components live in bundle.css; every value comes from tokens.css. */
html { -webkit-text-size-adjust: 100%; }
body { overflow-x: hidden; }
img { max-width: 100%; }
a { color: var(--brass); }
a:hover { color: var(--ink); }

.sp-temple { max-width: var(--measure-temple); margin-inline: auto; padding-inline: max(var(--space-3), env(safe-area-inset-left, 0px)) max(var(--space-3), env(safe-area-inset-right, 0px)); }
@media (min-width: 720px) { .sp-temple { padding-inline: var(--space-5); } }

.sp-skip { position: absolute; left: var(--space-3); top: -100px; background: var(--ink); color: var(--on-ink); padding: var(--space-2) var(--space-3); font-family: var(--font-ledger); font-size: 12px; letter-spacing: .14em; text-decoration: none; z-index: 1; }
.sp-skip:focus { top: var(--space-3); color: var(--on-ink); }

.sp-section { margin-top: var(--space-6); }
main > .sp-hero { margin-top: var(--space-5); }
.sp-pagehead { display: grid; gap: var(--space-3); padding-top: var(--space-7); max-width: var(--measure-scripture); }
.sp-title { font-family: var(--font-carved); font-weight: 400; font-size: clamp(36px, 7vw, 52px); line-height: 1.08; letter-spacing: .01em; margin: 0; text-wrap: balance; }
.sp-lede { font-size: 20px; line-height: 31px; color: var(--ink-muted); margin: 0; }
.sp-chapter { font-family: var(--font-carved); font-weight: 400; font-size: 28px; line-height: 34px; letter-spacing: .01em; margin: 0; text-wrap: balance; }
.sp-numeral { font-family: var(--font-carved); color: var(--brass); font-size: 15px; letter-spacing: .04em; }

/* Running text */
.sp-prose { max-width: var(--measure-scripture); display: grid; gap: var(--space-3); }
.sp-prose > .sp-chapter { margin-bottom: var(--space-2); }
.sp-prose p, .sp-prose ul, .sp-prose ol { margin: 0; }
.sp-prose ul, .sp-prose ol { padding-left: 1.2em; display: grid; gap: var(--space-2); }
.sp-prose .sp-verse { margin-block: var(--space-4); }
.sp-closing { font-family: var(--font-carved); font-size: 24px; line-height: 30px; }
.sp-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); padding-top: var(--space-2); }
.sp-section > .sp-actions { margin-top: var(--space-5); }
.sp-section > .sp-prose + .sp-nine, .sp-section > .sp-prose + .sp-speeble, .sp-section > .sp-prose + .sp-hymns { margin-top: var(--space-5); }

/* The Nine */
.sp-card__link { color: inherit; text-decoration: none; }
.sp-card__link:hover { text-decoration: underline; text-decoration-color: var(--stone-rule); text-underline-offset: 3px; }
.sp-form { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: var(--space-5); align-items: start; padding-top: var(--space-6); border-top: 1px solid var(--stone-rule); scroll-margin-top: var(--space-4); }
.sp-form__art { display: grid; justify-items: center; gap: var(--space-3); }
.sp-form__sigil { color: var(--ink-muted); }
.sp-niche--awaited + .sp-form__sigil { display: none; }
@media (max-width: 560px) { .sp-form { grid-template-columns: 1fr; gap: var(--space-4); } .sp-form__art { justify-items: start; grid-auto-flow: column; justify-content: start; align-items: center; } }

/* The Speeble preview on the Temple: six niches, one row on wide screens, two of three below */
.sp-speeble--six { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 900px) { .sp-speeble--six { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 420px) { .sp-speeble--six { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sp-speeble .sp-code { overflow-wrap: anywhere; text-align: center; }

/* Hymns */
.sp-hymns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--stone-rule); border: 1px solid var(--stone-rule); }
@media (max-width: 640px) { .sp-hymns { grid-template-columns: 1fr; } }
.sp-hymn { margin: 0; background: var(--stone); padding: var(--space-4); display: grid; gap: var(--space-3); min-width: 0; }
.sp-hymn figcaption { display: grid; gap: var(--space-1); }
.sp-hymn__name { font-weight: 600; }
.sp-hymn audio { width: 100%; }

/* The Book */
.sp-toc ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--stone-rule); border: 1px solid var(--stone-rule); }
@media (max-width: 720px) { .sp-toc ol { grid-template-columns: 1fr; } }
.sp-toc a { display: grid; gap: var(--space-1); height: 100%; box-sizing: border-box; padding: var(--space-3) var(--space-4); background: var(--stone); color: var(--ink); text-decoration: none; }
.sp-toc a:hover { background: var(--stone-recess); }
.sp-chapterblock { scroll-margin-top: var(--space-4); padding-top: var(--space-6); border-top: 1px solid var(--stone-rule); }
.sp-back a { font-family: var(--font-ledger); font-size: 12px; letter-spacing: .14em; text-decoration: none; }

/* Testimonies */
.sp-testimonies { display: grid; gap: var(--space-6); }
.sp-testimony { padding-top: var(--space-5); border-top: 1px solid var(--stone-rule); }

/* Offerings */
.sp-covenant { padding-left: 1.4em; }

/* Footer */
.sp-footer { margin-top: var(--space-7); padding-block: var(--space-5) var(--space-6); border-top: 1px solid var(--stone-rule); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: var(--space-4); }
.sp-footer__mark { display: flex; gap: var(--space-3); align-items: flex-start; color: var(--ink-muted); }
.sp-footer__mark svg { width: 24px; height: 24px; fill: var(--ink); flex: none; margin-top: 2px; }
.sp-footer__mark p { margin: 0; font-style: italic; display: grid; gap: var(--space-1); }
.sp-footer__mark .sp-label { font-style: normal; }
.sp-footer__links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); }
.sp-footer__links a { font-family: var(--font-ledger); font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: .14em; color: var(--ink-muted); text-decoration: none; }
.sp-footer__links a:hover { color: var(--ink); }

/* Long shortcodes and tags wrap under the niche instead of pushing it off centre */
.sp-speeble { grid-template-columns: repeat(auto-fill, minmax(152px, 1fr)); }
.sp-niche figcaption { flex-wrap: wrap; justify-content: center; max-width: 152px; }
.sp-niche .sp-code { white-space: nowrap; }
.sp-form { grid-template-columns: 152px minmax(0, 1fr); }

/* The Speeble */
.sp-shelf { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1px; background: var(--stone-rule); border: 1px solid var(--stone-rule); }
.sp-shelf a { display: block; height: 100%; box-sizing: border-box; padding: var(--space-2) var(--space-3); background: var(--stone); color: var(--ink); text-decoration: none; }
.sp-shelf a:hover { background: var(--stone-recess); }
.sp-chapters ol { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)); gap: 1px; background: var(--stone-rule); border: 1px solid var(--stone-rule); }
.sp-chapters a { display: grid; place-items: center; min-height: 44px; background: var(--stone); color: var(--ink); text-decoration: none; font-family: var(--font-ledger); font-size: 13px; }
.sp-chapters a:hover { background: var(--stone-recess); }
.sp-scripture { scroll-margin-top: var(--space-4); }
.sp-vn { font-family: var(--font-ledger); font-size: 10px; line-height: 0; color: var(--brass); margin-right: 3px; vertical-align: super; }
.sp-poem { padding-left: var(--space-4); text-indent: calc(-1 * var(--space-3)); }
.sp-superscript { font-style: italic; color: var(--ink-muted); }
.sp-turn { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--space-3); align-items: center; }
.sp-turn > :first-child { justify-self: start; }
.sp-turn > :last-child { justify-self: end; }
@media (max-width: 560px) { .sp-turn { grid-template-columns: 1fr; } .sp-turn > * { justify-self: stretch !important; } .sp-turn > span { display: none; } }
.sp-source { max-width: var(--measure-scripture); font-size: 14px; line-height: 22px; color: var(--ink-muted); margin-bottom: 0; }

/* Grids whose last row may be short: each cell carries its own hairline, so no rule colour shows in the gap */
.sp-chapters ol, .sp-shelf { gap: 0; background: none; border: 0; padding: 1px 0 0 1px; }
.sp-chapters li, .sp-shelf li { margin: -1px 0 0 -1px; border: 1px solid var(--stone-rule); }