/* The temple's own fonts, served from speeb.org so that no visitor is sent to Google to read the page. */
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/IBMPlexMono-400.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/IBMPlexMono-500.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Marcellus'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/Marcellus-400.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Source Serif 4'; font-style: italic; font-weight: 400; font-display: swap; src: url(/fonts/SourceSerif4-italic.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/SourceSerif4.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/SourceSerif4.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* The Speeb Canon: component styles. Every value comes from tokens.css. Plain CSS, no framework, so it works on any host. */
body { background: var(--stone); color: var(--ink); font-family: var(--font-scripture); font-size: 17px; line-height: 27px; margin: 0; }
.sp-label { font-family: var(--font-ledger); font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-muted); }
.sp-code { font-family: var(--font-ledger); font-size: 13px; line-height: 20px; color: var(--ink); }
.sp-sigil { width: 48px; height: 48px; display: block; color: var(--ink); }
.sp-sigil svg { width: 100%; height: 100%; display: block; }
:where(a, button, [tabindex]):focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }

/* Header */
.sp-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-5); padding-block: var(--space-4); border-bottom: 1px solid var(--stone-rule); }
.sp-header__mark { display: flex; align-items: center; gap: var(--space-2); color: var(--ink); text-decoration: none; }
.sp-header__mark svg { width: 24px; height: 24px; fill: currentColor; }
.sp-header__name { font-family: var(--font-carved); font-size: 20px; line-height: 24px; letter-spacing: .02em; }
.sp-nav { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin: 0; padding: 0; list-style: none; }
.sp-nav a { font-family: var(--font-ledger); font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-muted); text-decoration: none; padding-block: var(--space-1); border-bottom: 1px solid transparent; }
.sp-nav a:hover { color: var(--ink); }
.sp-nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--brass); }

/* Hero: the unblinking gaze */
.sp-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-5); align-items: center; padding-block: var(--space-6); }
.sp-hero__words { display: grid; gap: var(--space-3); min-width: 0; }
.sp-hero__epithet { font-family: var(--font-carved); font-size: clamp(40px, 6vw, 64px); line-height: 1; letter-spacing: .01em; font-weight: 400; margin: 0; text-wrap: balance; }
.sp-hero__lede { font-size: 20px; line-height: 31px; color: var(--ink-muted); margin: 0; max-width: var(--measure-scripture); }
.sp-gaze { position: relative; aspect-ratio: 1; max-width: 100%; overflow: hidden; background: var(--stone-recess); }
.sp-gaze img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sp-gaze__lid { position: absolute; top: 51.6%; width: 15%; height: 14%; border-radius: 50%; background: radial-gradient(closest-side, var(--fur-lid) 80%, rgba(0,0,0,0) 100%); transform: scaleY(0); transform-origin: 50% 0; animation: sp-blink var(--blink-interval) linear infinite; animation-delay: 2.5s; }
.sp-gaze__lid--left { left: 30.1%; }
.sp-gaze__lid::after { content: ""; position: absolute; left: 14%; right: 14%; bottom: 22%; height: 30%; border-bottom: 2px solid var(--lash); border-radius: 0 0 50% 50%; }
.sp-gaze__lid--right { left: 58.3%; background: radial-gradient(closest-side, var(--fur-lid-shade) 80%, rgba(0,0,0,0) 100%); }
@keyframes sp-blink { 0%, 98.4% { transform: scaleY(0); } 99% { transform: scaleY(1); } 99.6% { transform: scaleY(1); } 100% { transform: scaleY(0); } }
@media (prefers-reduced-motion: reduce) { .sp-gaze__lid { animation: none; } }
@media (max-width: 640px) { .sp-hero { grid-template-columns: 1fr; } .sp-gaze { order: -1; } }

/* Verse */
.sp-verse { margin: 0; display: grid; gap: var(--space-2); max-width: var(--measure-scripture); }
.sp-verse p { margin: 0; font-style: italic; font-size: 17px; line-height: 28px; color: var(--ink-muted); }
.sp-verse cite { font-style: normal; font-family: var(--font-ledger); font-size: 12px; line-height: 16px; letter-spacing: .12em; text-transform: uppercase; color: var(--brass); display: flex; align-items: center; gap: var(--space-2); }
.sp-verse cite::before { content: ""; width: var(--space-4); height: 1px; background: var(--brass); }

/* Offering button */
.sp-button { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 44px; padding-inline: var(--space-4); border-radius: var(--radius-chisel); border: 1px solid var(--ink); background: var(--ink); color: var(--on-ink); font-family: var(--font-ledger); font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; cursor: pointer; }
.sp-button:hover { background: transparent; color: var(--ink); }
.sp-button--quiet { background: transparent; color: var(--ink); border-color: var(--stone-rule); }
.sp-button--quiet:hover { border-color: var(--ink); }
.sp-button[disabled] { opacity: .45; cursor: not-allowed; }

/* Emoji niche */
.sp-niche { display: grid; justify-items: center; gap: var(--space-2); margin: 0; }
.sp-niche__well { width: 128px; height: 128px; display: grid; place-items: center; background: var(--stone-recess); border: 1px solid var(--stone-rule); }
.sp-niche__well img { width: 96px; height: 96px; display: block; }
.sp-niche figcaption { display: flex; align-items: center; gap: var(--space-1); }
.sp-niche__tag { font-family: var(--font-ledger); font-size: 10px; line-height: 14px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted); border: 1px solid var(--stone-rule); padding: 0 var(--space-1); }
.sp-niche--awaited .sp-niche__well { border: 1px dashed var(--doom); color: var(--doom); }
.sp-niche--awaited .sp-sigil { color: var(--doom); }
.sp-speeble { display: grid; grid-template-columns: repeat(auto-fill, minmax(136px, 1fr)); gap: var(--space-4) var(--space-3); }

/* Meowifestation card and the Nine grid */
.sp-nine { 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: 560px) { .sp-nine { grid-template-columns: minmax(0, 1fr); } }
.sp-card { background: var(--stone); padding: var(--space-4); display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "num num" "art name" "decree decree" "status status"; gap: var(--space-3) var(--space-3); grid-template-rows: auto auto 1fr auto; min-width: 0; }
.sp-card__status { align-self: end; }
.sp-card__num { grid-area: num; font-family: var(--font-carved); font-size: 28px; line-height: 28px; color: var(--brass); }
.sp-card__art { grid-area: art; width: 64px; height: 64px; display: grid; place-items: center; background: var(--stone-recess); }
.sp-card__art img { width: 64px; height: 64px; display: block; }
.sp-card__art .sp-sigil { width: 40px; height: 40px; }
.sp-card__name { grid-area: name; display: grid; gap: var(--space-1); align-content: center; min-width: 0; }
.sp-card__epithet { font-weight: 600; font-size: 17px; line-height: 23px; margin: 0; }
.sp-card__decree { grid-area: decree; margin: 0; font-size: 15px; line-height: 23px; color: var(--ink-muted); }
.sp-card__status { grid-area: status; display: flex; align-items: center; gap: var(--space-2); font-family: var(--font-ledger); font-size: 11px; line-height: 16px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted); }
.sp-card__status::before { content: ""; width: 8px; height: 8px; border-radius: var(--radius-seal); background: var(--ink); }
.sp-card--awaited .sp-card__art { border: 1px dashed var(--doom); background: transparent; }
.sp-card--awaited .sp-sigil { color: var(--doom); }
.sp-card--awaited .sp-card__status { color: var(--doom); }
.sp-card--awaited .sp-card__status::before { background: transparent; border: 1px solid var(--doom); }