/*
 * Session pages (/activities/<skill>/<slug>/) and author pages (/authors/<slug>/) — styles for
 * mr/inc/session-pages-template.php. Every class starts with sp- so nothing here touches the rest of
 * the site. Fonts (Lexend, Bree Serif) are already loaded site-wide.
 *
 * The look borrows from the site's own pages (2026-10-20): notebook lines and graph paper, the
 * device frame and green bookmark, the clover, the squiggle above headings and the notched blue
 * band (social-skills-curriculum), the blue grid with dotted cards, the icon set and Selby (/admin,
 * curriculum), and the About page's photo with a caption pill. Images: ../images/session-pages/.
 */

.sp-page {
	--sp-blue: #00409b;
	--sp-blue-dark: #00204d;
	--sp-ink: #011633;
	--sp-text: #283445;
	--sp-muted: #6c747f;
	--sp-line: #e5e7eb;
	--sp-cream: #fff5d9;
	--sp-sky: #e2eeff;
	--sp-mint: #d8f0e0;
	--sp-mint-strong: #b5e6c5;
	--sp-green: #22723c;
	--sp-butter: #ffecb9;
	--sp-tab: #9dc6ff;
	--sp-dot: #4592ff;
	--sp-flag: #41aa64;
	--sp-frame: #283445;
	--sp-lilac: #f7e0fc;
	--sp-plum: #77356d;
	--sp-shadow: 0 12px 32px rgba(0, 32, 77, 0.08);
	/* Backgrounds from the site's theme CSS (green-lines-gradient, large-blue-grid-gradient) */
	--sp-lines-mint: linear-gradient(0deg, #b5e6c5 1.22%, #d8f0e0 1.22%, #d8f0e0 50%, #b5e6c5 50%, #b5e6c5 51.22%, #d8f0e0 51.22%, #d8f0e0 100%);
	--sp-grid-blue: linear-gradient(to right, #cfe3ff 1px, transparent 1px), linear-gradient(#cfe3ff 1px, transparent 1px);
	/* The /admin yellow paper squares' line colour, drawn at the blue grid's 40px spacing */
	--sp-grid-cream: linear-gradient(to right, #ebece1 2px, transparent 2px), linear-gradient(#ebece1 2px, transparent 2px);
	--sp-chip-line: #b8bec7;
	--sp-wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 79.25 14.9'%3E%3Cpath d='M2,12.9S4.4,2,14.54,2s12.54,10.9,12.54,10.9M27.08,12.9s2.4-10.9,12.54-10.9,12.54,10.9,12.54,10.9M52.17,12.9s2.4-10.9,12.54-10.9,12.54,10.9,12.54,10.9' fill='none' stroke='%239dc6ff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

	/* Side padding that keeps a band's content in a 1200px column, centred, however wide the screen */
	--sp-gutter: max(32px, calc((100% - 1200px) / 2));

	box-sizing: border-box;
	font-family: Lexend, "Trebuchet MS", sans-serif;
	color: var(--sp-ink);
	line-height: 1.5;
}
.sp-page *,
.sp-page *::before,
.sp-page *::after { box-sizing: inherit; }
.sp-page a { color: var(--sp-blue); }
.sp-page a:hover { color: var(--sp-blue-dark); }
/* :where() keeps the reset as weak as a single class, so the component rules below win. */
.sp-page :where(h1, h2, h3, p, ul, ol, dl, dd, figure) { margin: 0; padding: 0; }
.sp-page :where(ul, ol) { list-style: none; }

/* Breadcrumb (plain text until the hub pages exist) */
.sp-breadcrumb ol { display: flex; flex-wrap: wrap; gap: 8px; font-size: 14px; color: var(--sp-muted); }
.sp-breadcrumb li + li::before { content: "/"; margin-right: 8px; color: var(--sp-muted); }
.sp-breadcrumb [aria-current] { color: var(--sp-text); }

/* Hero: cream notebook lines (the curriculum page hero's tile), a clover on the bottom seam. The page's story on the left (heading,
   byline, the two materials, at a glance); the "Get these materials free" card on the right stays in
   view while scrolling. */
.sp-hero { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 48px; padding: 56px var(--sp-gutter) 88px; background: linear-gradient(rgba(255, 245, 217, 0.5), rgba(255, 245, 217, 0.5)), url("../images/session-pages/notebook-lines-cream.png") repeat 0 0 / 100px 100px, var(--sp-cream); } /* the wash halves the lines so the text reads */
.sp-hero__main { flex: 999 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 22px; }
.sp-hero__clover { position: absolute; left: 50%; bottom: -22px; width: 44px; height: 44px; margin-left: -22px; color: var(--sp-flag); }
.sp-hero__title { font-size: clamp(34px, 4vw, 48px); line-height: 1.1; font-weight: 600; color: var(--sp-ink); overflow-wrap: anywhere; }
.sp-hero__about { max-width: 720px; font-size: 18px; line-height: 1.55; color: var(--sp-text); }

.sp-button { display: inline-block; padding: 16px 30px; border-radius: 999px; background: var(--sp-blue); color: #fff !important; font-size: 17px; font-weight: 500; text-decoration: none; }
.sp-button:hover { background: var(--sp-blue-dark); }
.sp-button:focus-visible, .sp-page a:focus-visible, .sp-video__play:focus-visible, .sp-faq summary:focus-visible { outline: 3px solid var(--sp-blue); outline-offset: 3px; }
.sp-button--light { background: #fff; color: var(--sp-blue) !important; }
.sp-button--light:hover { background: var(--sp-sky); }

/* Byline (hero): photo, "Created by {name}, {credentials}", then the author's title */
.sp-byline { display: flex; align-items: center; gap: 14px; }
.sp-byline__text { display: flex; flex-direction: column; gap: 2px; }
.sp-byline__name { font-size: 16px; line-height: 1.4; color: var(--sp-ink); }
.sp-byline a, .sp-byline strong { font-weight: 600; text-decoration: none; }
.sp-byline__role { font-size: 14px; color: var(--sp-muted); }
.sp-byline__photo { width: 52px; height: 52px; border: 3px solid var(--sp-blue); border-radius: 50%; object-fit: cover; flex: none; }

/* The two materials, side by side: the clip in its device frame, then the extension activity */
.sp-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: stretch; margin-top: 12px; }
.sp-tile { position: relative; min-width: 0; }
.sp-tile .sp-frame { height: 100%; border-width: 10px; border-radius: 30px; }
.sp-tile .sp-frame__flag { top: -18px; right: 22px; width: 38px; height: 45px; }
.sp-tile .sp-video, .sp-tile .sp-poster { height: 100%; aspect-ratio: auto; border-radius: 20px; }
.sp-tile .sp-video { min-height: 200px; }
.sp-tile--extend { overflow: hidden; border: 10px solid var(--sp-frame); /* the same frame as the clip beside it */ border-radius: 30px; background: var(--sp-mint); }
.sp-tile__img { display: block; width: 100%; height: 100%; min-height: 220px; object-fit: cover; }
.sp-tile__label { position: absolute; z-index: 1; left: 12px; top: 12px; padding: 5px 12px; border-radius: 999px; background: #fff; color: var(--sp-ink); font-size: 13px; font-weight: 600; line-height: 1.3; }
.sp-tile--extend .sp-tile__label { top: auto; bottom: 14px; left: 14px; }

/* "Get these materials free": the white card beside the hero */
.sp-get { flex: 1 1 360px; min-width: 0; position: sticky; top: 24px; display: flex; flex-direction: column; gap: 18px; padding: 32px 28px; border-radius: 32px; background: #fff; box-shadow: 0 16px 48px rgba(0, 32, 77, 0.12); }
.sp-get__title { font-size: 26px; line-height: 1.25; font-weight: 600; color: var(--sp-ink); }
.sp-get .sp-button { text-align: center; white-space: nowrap; }
.sp-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.sp-pills li { padding: 5px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; }
.sp-pills__grade { background: var(--sp-sky); color: var(--sp-blue); }
.sp-pills__skill { background: var(--sp-lilac); color: var(--sp-plum); }
.sp-checklist { display: flex; flex-direction: column; gap: 10px; font-size: 16px; line-height: 1.5; color: var(--sp-text); }
.sp-checklist li { position: relative; padding-left: 32px; }
.sp-checklist li::before { content: ""; position: absolute; left: 5px; top: 4px; width: 7px; height: 13px; border: solid var(--sp-flag); border-width: 0 3px 3px 0; transform: rotate(45deg); }

/* Preview clip, in the curriculum page's device frame with its green bookmark */
.sp-frame { position: relative; border: 16px solid var(--sp-frame); border-radius: 44px; background: var(--sp-frame); }
.sp-frame__flag { position: absolute; z-index: 2; top: -26px; right: 36px; width: 52px; height: 61px; color: var(--sp-flag); }
.sp-video { position: relative; overflow: hidden; aspect-ratio: 16 / 10; border-radius: 28px; background: var(--sp-blue); }
.sp-video video { display: block; width: 100%; height: 100%; object-fit: cover; }
.sp-video__play { display: none; position: absolute; right: 14px; bottom: 14px; gap: 12px; align-items: center; margin: 0; padding: 12px 22px 12px 18px; border: 0; border-radius: 999px; background: rgba(0, 32, 77, 0.88); box-shadow: 0 4px 16px rgba(0, 32, 77, 0.25); color: #fff; font-family: inherit; font-size: 16px; font-weight: 600; line-height: 1.2; cursor: pointer; }
/* The triangle is drawn in CSS, not an SVG: site-wide SVG rules on staging hid the SVG icon. */
.sp-video__play::before { content: ""; flex: none; width: 0; height: 0; border-style: solid; border-width: 7px 0 7px 11px; border-color: transparent transparent transparent #fff; }
.sp-video__play:hover { background: var(--sp-blue-dark); }
.sp-video--ready .sp-video__play { display: flex; }
.sp-video--ready video { pointer-events: none; }
.sp-video--playing .sp-video__play, .sp-video--playing .sp-tile__label { display: none; }
.sp-video--playing video { pointer-events: auto; }
.sp-poster { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 28px; }

/* At a glance (topic, focus, grade level): white cards with the site's hand-drawn icons */
.sp-glance { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.sp-glance__item { min-height: 84px; padding: 16px 14px 16px 70px; border: 2px solid var(--sp-frame); border-radius: 20px; background: #fff no-repeat 12px 14px / 48px 48px; }
.sp-glance__item--skill { background-image: url("../images/session-pages/icon-units-scaffold.png"); }
.sp-glance__item--focus { background-image: url("../images/session-pages/icon-session-planning.png"); }
.sp-glance__item--grade { background-image: url("../images/session-pages/icon-mtss-aligned.png"); }
.sp-glance dt { margin-bottom: 4px; font-size: 13px; font-weight: 600; color: var(--sp-muted); }
.sp-glance dd { font-size: 15px; line-height: 1.4; font-weight: 500; }

/* Sections: full-width bands, edge to edge like the site's own pages; the site's squiggle above each
   heading; accents in blue or a yellow marker. Rounded corners belong to the cards inside a band. */
.sp-section { padding: 88px var(--sp-gutter); }
.sp-section__title { margin-bottom: 8px; font-size: 34px; line-height: 1.2; font-weight: 500; color: var(--sp-ink); }
.sp-section__title::before { content: ""; display: block; width: 70px; height: 13px; margin-bottom: 16px; background: var(--sp-wave) no-repeat 0 0 / contain; }
.sp-section__lead { margin-bottom: 28px; font-size: 17px; color: var(--sp-text); }
.sp-section__title + :not(.sp-section__lead) { margin-top: 20px; }
.sp-section__head { display: flex; align-items: flex-end; gap: 20px; margin-bottom: 24px; }
.sp-section__head .sp-section__title { margin: 0; }
.sp-section__head .sp-section__title::before { display: none; } /* the icon stands in for the squiggle */
.sp-section__icon { flex: none; width: 96px; height: 96px; }
.sp-accent { color: var(--sp-blue); }
.sp-mark { padding: 0 6px; border-radius: 4px; background: var(--sp-mint-strong); color: inherit; }

/* Get everything you need: the curriculum page's notched blue band. The two materials as cream and
   mint cards, then warm-up / opener / practice with a blue tab over plain cream, a button, how-to. */
.sp-inside { padding-top: 104px; padding-bottom: 96px; background: var(--sp-blue); text-align: center; }
.sp-inside .sp-section__title { color: #fff; }
.sp-inside .sp-section__title::before { margin-left: auto; margin-right: auto; }
.sp-inside .sp-accent { color: var(--sp-butter); }
.sp-inside .sp-section__lead { color: var(--sp-sky); }
.sp-inside .sp-section__lead { max-width: 720px; margin-left: auto; margin-right: auto; }
.sp-eyebrow { margin: 36px 0 16px; font-size: 14px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #fff; text-align: left; }
.sp-materials { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; text-align: left; }
.sp-material { display: flex; flex-direction: column; gap: 14px; min-width: 0; padding: 22px; border-radius: 32px; background: var(--sp-cream); }
.sp-material--extend { background: var(--sp-mint); }
.sp-material__thumb { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: cover; border-radius: 22px; background: var(--sp-butter); }
.sp-material__title { font-size: 24px; line-height: 1.25; font-weight: 600; color: var(--sp-ink); }
.sp-material__text { font-size: 16px; line-height: 1.6; color: var(--sp-text); }
.sp-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; text-align: left; }
.sp-step { display: flex; flex-direction: column; min-width: 0; overflow: hidden; border-radius: 28px; background: var(--sp-cream); }
.sp-step__head { padding: 14px 16px; background: var(--sp-tab); font-family: "Bree Serif", Georgia, serif; font-size: 19px; font-weight: 400; line-height: 1.2; color: var(--sp-ink); text-align: center; }
.sp-step__body { display: flex; flex: 1; flex-direction: column; gap: 12px; padding: 16px 18px 22px; }
.sp-step__text { font-size: 15px; line-height: 1.55; color: var(--sp-text); }
.sp-inside__actions { margin-top: 32px; }
.sp-howto { margin-top: 32px; padding: 28px 32px; border-radius: 32px; background: var(--sp-sky); text-align: left; }
.sp-howto__title { margin-bottom: 18px; font-size: 20px; line-height: 1.4; font-weight: 600; color: var(--sp-ink); }
.sp-howto__steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.sp-howto__steps li { display: flex; align-items: flex-start; gap: 14px; font-size: 15px; line-height: 1.55; color: var(--sp-text); }
.sp-howto__steps strong { display: block; margin-bottom: 4px; font-size: 17px; font-weight: 600; color: var(--sp-ink); }
.sp-howto__num { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--sp-blue); color: #fff; font-size: 16px; font-weight: 600; }
.sp-tag { align-self: flex-start; padding: 3px 10px; border-radius: 6px; background: var(--sp-blue); color: #fff; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.sp-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sp-warmups { display: flex; flex-direction: column; gap: 10px; }
.sp-warmups li { display: flex; align-items: center; gap: 10px; font-size: 15px; line-height: 1.35; color: var(--sp-ink); }
.sp-warmups__icon { position: relative; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--sp-blue); }
.sp-warmups__icon::before { content: ""; position: absolute; top: 9px; left: 11px; border-style: solid; border-width: 5px 0 5px 8px; border-color: transparent transparent transparent #fff; }
.sp-warmups__title { flex: 1; min-width: 0; font-weight: 500; }
.sp-warmups__length { flex: none; padding: 2px 8px; border: 1px solid var(--sp-chip-line); border-radius: 6px; background: #fff; color: var(--sp-text); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.sp-bullets { display: flex; flex-direction: column; gap: 8px; font-size: 15px; font-weight: 500; color: var(--sp-ink); }
.sp-bullets li { position: relative; padding-left: 20px; }
.sp-bullets li::before { content: ""; position: absolute; left: 2px; top: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--sp-blue); }
.sp-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sp-chips li { padding: 3px 10px; border: 1px solid var(--sp-chip-line); border-radius: 999px; background: #fff; color: var(--sp-text); font-size: 13px; font-weight: 500; }

/* Example session notes and key terms, together on the blue grid; terms are white callouts with a blue dot */
.sp-covered { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); align-items: start; gap: 48px 56px; background: var(--sp-sky); background-image: var(--sp-grid-blue); background-size: 40px 40px; }
.sp-covered .sp-terms { grid-template-columns: 1fr; gap: 32px; }
.sp-terms { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 32px 24px; }
.sp-section__title + .sp-terms { margin-top: 40px; }
.sp-term { position: relative; padding: 36px 28px 28px; border-radius: 24px; background: #fff; box-shadow: var(--sp-shadow); text-align: center; }
.sp-term::before { content: ""; position: absolute; top: -16px; left: 50%; width: 32px; height: 32px; margin-left: -16px; border-radius: 50%; background: var(--sp-dot); }
.sp-term dt { margin-bottom: 8px; font-size: 20px; font-weight: 600; color: var(--sp-ink); }
.sp-term dd { font-size: 16px; line-height: 1.55; color: var(--sp-text); }

/* IEP goals and the tip, side by side (3:2) */
.sp-pair { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 32px 56px; }
.sp-pair__iep { flex: 3 1 480px; min-width: 0; }
.sp-pair .sp-tip { flex: 2 1 300px; min-width: 0; position: sticky; top: 24px; } /* stays beside a long list of goals */

/* IEP goals: white cards with a dark green outline */
.sp-iep { display: flex; flex-direction: column; gap: 12px; }
.sp-iep__goal { display: flex; flex-direction: column; gap: 8px; padding: 22px 26px; border: 2px solid var(--sp-green); border-radius: 24px; background: #fff; }
.sp-iep__title { font-family: "Bree Serif", Georgia, serif; font-size: 17px; color: var(--sp-ink); }
.sp-iep__goal p { font-size: 16px; line-height: 1.55; color: var(--sp-text); }
.sp-page .sp-link { display: inline-block; margin-top: 20px; padding: 12px 22px; border-radius: 999px; background: var(--sp-green); color: #fff; font-size: 15px; font-weight: 500; text-decoration: none; }
.sp-page .sp-link:hover { background: #185a2e; color: #fff; }

/* Example session notes: a solid white card, like the key terms beside it */
.sp-notes__text { padding: 40px 44px; border-radius: 32px; background: #fff; box-shadow: var(--sp-shadow); font-size: 18px; line-height: 1.6; color: var(--sp-text); }
.sp-notes__text p + p { margin-top: 12px; }

/* Keep it going: the testimonial cards' green notebook lines (/admin) */
.sp-tip { display: flex; flex-direction: column; gap: 14px; padding: 36px; border-radius: 32px; background: var(--sp-mint) url("../images/testimonial-bg.png") center / cover; }
.sp-tip__title { font-family: "Bree Serif", Georgia, serif; font-size: 26px; line-height: 1.3; font-weight: 400; color: var(--sp-ink); }
.sp-tip p { font-size: 17px; line-height: 1.55; color: var(--sp-text); }

/* Related: the case-study cards (photo, then a light-blue body overlapping it) */
.sp-related { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; }
.sp-related__card { display: flex; flex-direction: column; height: 100%; overflow: hidden; border: 2px solid var(--sp-blue); border-radius: 24px; background: var(--sp-sky); box-shadow: 0 10px 28px rgba(0, 32, 77, 0.14); text-decoration: none; transition: transform 0.15s ease; }
.sp-related__card:hover { transform: translateY(-3px); }
.sp-related__thumb { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: var(--sp-cream); }
.sp-related__body { position: relative; display: flex; flex: 1; flex-direction: column; gap: 6px; padding: 20px 20px 24px; background: var(--sp-sky); }
.sp-related__title { font-size: 17px; font-weight: 500; line-height: 1.35; color: var(--sp-ink); }
.sp-related__meta { font-size: 14px; color: var(--sp-text); } /* --sp-muted was 4.0:1 on the light-blue card; this is 10:1 (Lighthouse, 2026-10-20) */

/* FAQ: a narrower column, straight after the related cards on the same white */
.sp-faq-section { padding-top: 0; }
.sp-faq-section > * { max-width: 823px; margin-left: auto; margin-right: auto; }
.sp-faq { display: flex; flex-direction: column; gap: 12px; }
.sp-faq details { padding: 20px 24px; border: 1px solid var(--sp-line); border-radius: 20px; }
.sp-faq summary { cursor: pointer; font-size: 18px; font-weight: 500; }
.sp-faq details > :not(summary) { margin-top: 12px; }

/* Closing band: the blue panel beside Selby on graph paper ("Explore Free Materials") */
.sp-band { display: grid; grid-template-columns: minmax(0, 1fr) 340px; padding: 72px var(--sp-gutter); overflow: hidden; background: var(--sp-cream); background-image: var(--sp-grid-cream); background-size: 40px 40px; }
.sp-band__content { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 56px; border-radius: 44px; background: var(--sp-blue); color: #fff; }
.sp-band__title { font-size: 34px; line-height: 1.2; font-weight: 500; color: #fff; }
.sp-band p { color: var(--sp-sky); font-size: 17px; }
.sp-band .sp-button { margin-top: 8px; }
.sp-band__art { position: relative; z-index: 2; min-height: 220px; }
.sp-band__art img { position: absolute; top: 50%; left: -96px; width: 380px; max-width: none; height: auto; transform: translateY(-50%); }

/* Full curriculum: the closing blue panel */
.sp-curriculum { display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 88px var(--sp-gutter) 0; background: var(--sp-blue); text-align: center; }
.sp-curriculum__art { display: block; width: 100%; max-width: 680px; height: auto; margin-top: 30px; } /* the characters stand on the band's bottom edge */
.sp-curriculum__title { font-size: 36px; line-height: 1.2; font-weight: 500; color: #fff; }
.sp-curriculum p:not(.sp-pending) { max-width: 720px; font-size: 18px; line-height: 1.55; color: var(--sp-sky); }

.sp-author { max-width: 1080px; margin: 0 auto; padding: 24px 24px 72px; }

/* Author pages: the About page's mint notebook lines, photo with a caption pill; one squiggle, above the bio */
.sp-author__hero { display: grid; grid-template-columns: 300px minmax(0, 1fr); align-items: center; gap: 64px; padding: 64px 56px 72px; border-radius: 44px; background: var(--sp-lines-mint); background-size: 82px 82px; }
.sp-author__media { position: relative; }
.sp-author__photo { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 32px; }
.sp-author__title { position: absolute; left: 14px; right: 14px; bottom: -22px; padding: 12px 16px; border-radius: 999px; background: #fff; box-shadow: var(--sp-shadow); font-family: "Bree Serif", Georgia, serif; font-size: 16px; line-height: 1.3; color: var(--sp-blue); text-align: center; }
.sp-author__intro { min-width: 0; }
.sp-author__name { font-size: clamp(34px, 4.5vw, 52px); line-height: 1.1; font-weight: 600; color: var(--sp-ink); overflow-wrap: anywhere; }
.sp-author__bio { max-width: 760px; margin: 64px auto 0; font-size: 18px; line-height: 1.7; color: var(--sp-text); }
.sp-author__bio::before { content: ""; display: block; width: 70px; height: 13px; margin: 0 auto 28px; background: var(--sp-wave) no-repeat 0 0 / contain; }
.sp-author__bio p + p { margin-top: 18px; }

/* "Pending content" (staging only) */
.sp-pending { display: inline-block; padding: 6px 12px; border: 2px dashed #c4a000; border-radius: 10px; background: #fffbea; color: #6b5800; font-family: Lexend, sans-serif; font-size: 14px; font-weight: 500; }
p.sp-pending, div.sp-pending { display: block; }

@media (max-width: 900px) {
	.sp-get, .sp-pair .sp-tip { position: static; }
	.sp-materials, .sp-steps, .sp-howto__steps { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
	.sp-page { --sp-gutter: 20px; }
	.sp-author { padding: 16px 16px 48px; }
	.sp-hero { padding-top: 32px; padding-bottom: 56px; gap: 28px; }
	.sp-tiles { grid-template-columns: 1fr; }
	.sp-tile .sp-video { aspect-ratio: 16 / 10; min-height: 0; }
	.sp-video__play { padding: 10px 18px 10px 14px; font-size: 15px; }
	.sp-get { padding: 26px 22px; border-radius: 28px; }
	.sp-glance { grid-template-columns: 1fr; }
	.sp-section { padding-top: 56px; padding-bottom: 56px; }
	.sp-curriculum { padding-top: 56px; }
	.sp-faq-section { padding-top: 0; }
	.sp-covered { grid-template-columns: 1fr; }
	.sp-section__title, .sp-band__title { font-size: 28px; }
	.sp-section__head { flex-direction: column; align-items: flex-start; gap: 12px; }
	.sp-section__icon { width: 72px; height: 72px; }
	.sp-howto { padding: 24px 20px; border-radius: 28px; }
	.sp-curriculum__title { font-size: 28px; }
	.sp-terms { grid-template-columns: 1fr; }
	.sp-notes__text { padding: 28px 24px; }
	.sp-tip { padding: 28px 24px; }
	.sp-band { grid-template-columns: 1fr; padding-top: 40px; padding-bottom: 56px; }
	.sp-band__content { padding: 36px 24px; border-radius: 28px; }
	.sp-band__art { order: -1; min-height: 190px; }
	.sp-band__art img { left: 50%; top: auto; bottom: -20px; width: 260px; transform: translateX(-50%); }
	.sp-author__hero { grid-template-columns: 1fr; justify-items: center; gap: 48px; padding: 44px 20px 48px; border-radius: 28px; text-align: center; }
	.sp-author__media { width: min(240px, 80%); }
	.sp-author__bio { margin-top: 44px; font-size: 17px; }
}