/* soulpurpose: ink on warm paper, one electric-orange flare */
:root {
  --sp-ink: #16120f;
  --sp-ink-soft: #4a423b;
  --sp-paper: #fbf6ee;
  --sp-paper-deep: #f1e8d9;
  --sp-flare: #ff5b14;
  --sp-flare-ink: #b33a05;
  --sp-hair: #d9cdb9;
  --sp-dusk: #2b2530;
  --sp-heading: "Arial Black", "Helvetica Neue", Helvetica, "Segoe UI", system-ui, sans-serif;
  --sp-text: ui-sans-serif, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --sp-wide: 72rem;
  --sp-read: 40rem;
}

html { background: var(--sp-paper); }
.sp-body {
  margin: 0;
  color: var(--sp-ink);
  background: var(--sp-paper);
  font: 1.06rem/1.68 var(--sp-text);
  -webkit-text-size-adjust: 100%;
}
.sp-body * { box-sizing: border-box; }
.sp-body a { color: inherit; text-decoration-color: var(--sp-flare); text-decoration-thickness: .14em; text-underline-offset: .18em; }
.sp-body a:hover { color: var(--sp-flare-ink); }
.sp-skip { position: absolute; left: -999px; }
.sp-skip:focus { left: 1rem; top: 1rem; background: var(--sp-flare); color: var(--sp-ink); padding: .4rem .8rem; z-index: 9; }

/* masthead */
.sp-mast { background: var(--sp-ink); color: var(--sp-paper); border-bottom: .45rem solid var(--sp-flare); }
.sp-mast__row { max-width: var(--sp-wide); margin: 0 auto; padding: 1.4rem 1rem .6rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem 1.4rem; }
.sp-word { font: 900 clamp(2.3rem, 7vw, 4.2rem)/.9 var(--sp-heading); letter-spacing: -.045em; text-decoration: none; color: var(--sp-paper); }
.sp-word b { color: var(--sp-flare); font-weight: 900; }
.sp-mast__line { margin: 0; text-transform: uppercase; letter-spacing: .18em; font-size: .78rem; color: var(--sp-hair); }
.sp-nav { max-width: var(--sp-wide); margin: 0 auto; padding: .2rem .6rem .9rem; display: flex; flex-wrap: wrap; gap: .2rem; }
.sp-nav a { color: var(--sp-paper); text-decoration: none; font: 800 .92rem/1 var(--sp-heading); padding: .5rem .55rem; border-radius: .2rem; }
.sp-nav a:hover, .sp-nav a[aria-current] { background: var(--sp-flare); color: var(--sp-ink); }

.sp-main { max-width: var(--sp-wide); margin: 0 auto; padding: 2rem 1rem 3rem; }

/* section rules + tags */
.sp-rule { font: 900 1.05rem/1.2 var(--sp-heading); text-transform: uppercase; letter-spacing: .06em; border-top: .3rem solid var(--sp-ink); padding-top: .55rem; margin: 2.6rem 0 1.2rem; }
.sp-tag { display: inline-block; font: 800 .7rem/1 var(--sp-heading); text-transform: uppercase; letter-spacing: .12em; padding: .32rem .45rem; background: var(--sp-ink); color: var(--sp-paper); text-decoration: none; }
.sp-body a.sp-tag { color: var(--sp-paper); }
.sp-tag--music { background: var(--sp-flare); color: var(--sp-ink); }
.sp-body a.sp-tag--music { color: var(--sp-ink); }
.sp-tag--faith { background: var(--sp-dusk); }
.sp-tag--life { background: var(--sp-paper-deep); color: var(--sp-ink); box-shadow: inset 0 0 0 2px var(--sp-ink); }
.sp-body a.sp-tag--life { color: var(--sp-ink); }

/* front page: asymmetric lead + stereo sidebar */
.sp-front {
  display: grid;
  gap: 1.6rem 2.4rem;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "lead" "side" "rest" "hubs";
}
.sp-front__lead { grid-area: lead; position: relative; background: var(--sp-paper-deep); border-left: .6rem solid var(--sp-flare); padding: 1.6rem 1.4rem 1.4rem; }
.sp-front__label { margin: 0 0 .6rem; font: 800 .75rem/1 var(--sp-heading); text-transform: uppercase; letter-spacing: .16em; color: var(--sp-flare-ink); }
.sp-front__head { font: 900 clamp(1.9rem, 5vw, 3.3rem)/1.02 var(--sp-heading); letter-spacing: -.03em; margin: 0 0 .9rem; max-width: 18ch; }
.sp-front__head a { text-decoration: none; }
.sp-front__dek { font-size: 1.15rem; max-width: 36rem; color: var(--sp-ink-soft); }
.sp-front__go a { font-weight: 800; }
.sp-front__go span { color: var(--sp-ink-soft); font-size: .9rem; }
.sp-front__lead .sp-motif { position: absolute; right: 1rem; bottom: 1rem; width: 7.5rem; opacity: .9; }
.sp-front__side { grid-area: side; background: var(--sp-ink); color: var(--sp-paper); padding: 1.3rem 1.2rem; }
.sp-front__sidehead { font: 900 1.4rem/1 var(--sp-heading); margin: 0 0 .3rem; color: var(--sp-flare); }
.sp-front__sidenote { font-size: .85rem; color: var(--sp-hair); margin: 0 0 .9rem; }
.sp-stereo { list-style: none; counter-reset: sp-track; margin: 0 0 1rem; padding: 0; }
.sp-stereo li { counter-increment: sp-track; display: grid; grid-template-columns: 2.2rem 1fr; grid-template-areas: "num link" "num kind"; padding: .6rem 0; border-bottom: 1px dashed var(--sp-ink-soft); }
.sp-stereo li::before { content: counter(sp-track, decimal-leading-zero); grid-area: num; font: 900 1rem/1.4 var(--sp-heading); color: var(--sp-flare); }
.sp-stereo a { grid-area: link; font-weight: 700; line-height: 1.3; }
.sp-stereo span { grid-area: kind; font-size: .78rem; color: var(--sp-hair); text-transform: uppercase; letter-spacing: .08em; }
.sp-front__rest { grid-area: rest; }
.sp-front__hubs { grid-area: hubs; }
@media (min-width: 52rem) {
  .sp-front { grid-template-columns: minmax(0, 2.1fr) minmax(15rem, 1fr); grid-template-areas: "lead side" "rest rest" "hubs hubs"; }
}

/* tiles */
.sp-tiles { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr)); }
.sp-card { border-top: .3rem solid var(--sp-ink); padding: .9rem 0 0; }
.sp-card--music { border-top-color: var(--sp-flare); }
.sp-card--faith { border-top-color: var(--sp-dusk); }
.sp-card__kick { margin: 0 0 .5rem; }
.sp-card__head { font: 900 1.22rem/1.15 var(--sp-heading); letter-spacing: -.015em; margin: 0 0 .5rem; }
.sp-card__head a { text-decoration: none; }
.sp-card__dek { margin: 0 0 .5rem; font-size: .95rem; color: var(--sp-ink-soft); }
.sp-card__when { margin: 0; font-size: .8rem; color: var(--sp-ink-soft); }

.sp-hubgrid { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.sp-hubtile { display: grid; gap: .4rem; padding: 1.2rem; min-height: 10rem; text-decoration: none; align-content: start; }
.sp-hubtile strong { font: 900 1.5rem/1 var(--sp-heading); }
.sp-hubtile span { font-size: .92rem; }
.sp-hubtile em { font-style: normal; font: 800 .72rem/1 var(--sp-heading); text-transform: uppercase; letter-spacing: .12em; margin-top: auto; }
.sp-hubtile--flare { background: var(--sp-flare); color: var(--sp-ink); }
.sp-hubtile--dusk { background: var(--sp-dusk); color: var(--sp-paper); }
.sp-body .sp-hubtile--dusk, .sp-body .sp-hubtile--ink { color: var(--sp-paper); }
.sp-hubtile--paper { background: var(--sp-paper-deep); box-shadow: inset 0 0 0 3px var(--sp-ink); }
.sp-hubtile--ink { background: var(--sp-ink); color: var(--sp-paper); }
.sp-hubtile:hover { transform: rotate(-.6deg); }

/* hub + index headers */
.sp-hubhead { position: relative; padding: 1.6rem 1.3rem; margin-bottom: 2rem; }
.sp-hubhead h1 { font: 900 clamp(2.2rem, 6vw, 3.6rem)/1 var(--sp-heading); margin: 0 0 .5rem; letter-spacing: -.035em; }
.sp-hubhead p { margin: 0; max-width: 34rem; }
.sp-hubhead .sp-motif { position: absolute; right: 1rem; top: 1rem; width: 6.5rem; }
.sp-hubhead--flare { background: var(--sp-flare); }
.sp-hubhead--dusk { background: var(--sp-dusk); color: var(--sp-paper); }
.sp-hubhead--paper { background: var(--sp-paper-deep); }
.sp-hubhead--ink { background: var(--sp-ink); color: var(--sp-paper); }
.sp-empty { font-size: 1.1rem; }
.sp-index { list-style: none; padding: 0; margin: 0; }
.sp-index li { display: grid; gap: .2rem .9rem; grid-template-columns: minmax(0, 1fr); grid-template-areas: "when" "link" "tag"; padding: .9rem 0; border-bottom: 1px solid var(--sp-hair); }
.sp-index time { grid-area: when; font-size: .82rem; color: var(--sp-ink-soft); }
.sp-index a { grid-area: link; font: 800 1.1rem/1.25 var(--sp-heading); text-decoration: none; }
.sp-index .sp-tag { grid-area: tag; justify-self: start; }
@media (min-width: 44rem) { .sp-index li { grid-template-columns: 9.5rem minmax(0, 1fr) auto; grid-template-areas: "when link tag"; align-items: baseline; } }

/* posts */
.sp-post__top { position: relative; max-width: 50rem; margin: 0 auto 2rem; padding-bottom: 1.4rem; border-bottom: .3rem solid var(--sp-ink); }
.sp-post__kick { display: flex; gap: .7rem; align-items: center; margin: 0 0 1rem; font: 800 .78rem/1 var(--sp-heading); text-transform: uppercase; letter-spacing: .12em; color: var(--sp-ink-soft); }
.sp-post__title { font: 900 clamp(2rem, 5.5vw, 3.4rem)/1.03 var(--sp-heading); letter-spacing: -.035em; margin: 0 0 1rem; max-width: 20ch; }
.sp-post__dek { font-size: 1.2rem; color: var(--sp-ink-soft); margin: 0 0 .9rem; max-width: 38rem; }
.sp-post__meta { font-size: .85rem; color: var(--sp-ink-soft); margin: 0; }
.sp-post__top .sp-motif { position: absolute; right: 0; top: 0; width: 6rem; display: none; }
@media (min-width: 52rem) { .sp-post__top .sp-motif { display: block; } }
.sp-prose { max-width: var(--sp-read); margin: 0 auto; }
.sp-prose h2 { font: 900 1.55rem/1.15 var(--sp-heading); letter-spacing: -.02em; margin: 2.2rem 0 .7rem; }
.sp-prose h3 { font: 800 1.18rem/1.25 var(--sp-heading); margin: 1.7rem 0 .5rem; }
.sp-prose li { margin-bottom: .4rem; }
.sp-prose blockquote { margin: 1.5rem 0; padding-left: 1rem; border-left: .25rem solid var(--sp-flare); color: var(--sp-ink-soft); }
.sp-post__body > p:first-of-type::first-letter {
  float: left;
  font: 900 4.6rem/.78 var(--sp-heading);
  margin: .38rem .55rem 0 0;
  padding: .3rem .4rem .2rem;
  background: var(--sp-ink);
  color: var(--sp-flare);
}
.sp-pull { margin: 2rem -0rem; padding: 1rem 0; border-top: .2rem solid var(--sp-flare); border-bottom: .2rem solid var(--sp-flare); }
.sp-pull p { margin: 0; font: 900 1.45rem/1.25 var(--sp-heading); letter-spacing: -.015em; }
@media (min-width: 64rem) { .sp-pull { margin-left: -6rem; margin-right: -2rem; } }
.sp-gig { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .8rem; margin: 1.8rem 0; padding: 1rem; background: var(--sp-paper-deep); border: 2px dashed var(--sp-ink); }
.sp-gig__tag { align-self: start; font: 900 .72rem/1 var(--sp-heading); text-transform: uppercase; letter-spacing: .12em; background: var(--sp-flare); padding: .4rem .45rem; writing-mode: vertical-rl; transform: rotate(180deg); }
.sp-gig__body > :first-child { margin-top: 0; }
.sp-gig__body > :last-child { margin-bottom: 0; }
.sp-help { max-width: var(--sp-read); margin: 2.4rem auto 0; padding: 1.2rem 1.3rem; background: var(--sp-ink); color: var(--sp-paper); }
.sp-help__head { font: 900 1.15rem/1.2 var(--sp-heading); color: var(--sp-flare); margin: 0 0 .6rem; }
.sp-help ul { padding-left: 1.1rem; }
.sp-help p { margin-bottom: 0; font-size: .9rem; color: var(--sp-hair); }
.sp-more { margin-top: 3rem; }

/* static pages */
.sp-page h1 { font: 900 clamp(2rem, 5vw, 3rem)/1.05 var(--sp-heading); letter-spacing: -.03em; }
.sp-callout { font-size: 1.15rem; padding: 1rem 1.1rem; background: var(--sp-paper-deep); border-left: .45rem solid var(--sp-flare); }

/* motif strokes */
.sp-motif { display: block; }
.sp-m-a { fill: var(--sp-flare); }
.sp-m-b { fill: var(--sp-ink); }
.sp-m-line, .sp-m-b-line { fill: none; stroke: var(--sp-ink); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.sp-hubhead--dusk .sp-m-line, .sp-hubhead--ink .sp-m-line { stroke: var(--sp-paper); }
.sp-hubhead--dusk .sp-m-b, .sp-hubhead--ink .sp-m-b { fill: var(--sp-paper); }
.sp-hubhead--flare .sp-m-a { fill: var(--sp-ink); }
.sp-m-b-line { stroke: var(--sp-flare); }

/* footer */
.sp-foot { background: var(--sp-ink); color: var(--sp-hair); padding: 1.6rem 1rem 2.2rem; border-top: .45rem solid var(--sp-flare); }
.sp-foot p { max-width: var(--sp-wide); margin: .3rem auto; font-size: .88rem; }
.sp-foot__help { font: 900 1.05rem/1.3 var(--sp-heading); color: var(--sp-paper); }
.sp-foot a { color: var(--sp-paper); }