@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600&family=Newsreader:ital,opsz,wght@0,6..72,300..700;1,6..72,300..600&display=swap');

/*
	Scriptura.

	The subject is a page of scripture, so the reading column is white and
	the text is the largest thing on the screen. Everything else sits back.
	Each of the four months carries its own accent, set as --accent on the
	wrapper, which is how you can tell at a glance which subject you are in.
*/

.sc {
	--ink: #14161a;
	--body: #2b2e34;
	--muted: #6b6f76;
	--paper: #fcfbf8;
	--card: #ffffff;
	--rule: #e3ded4;
	--rule-soft: #efeae1;
	--accent: #2e6f7e;
	--radius: 3px;

	--ui: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--text: 'Newsreader', Georgia, 'Times New Roman', serif;

	max-width: 1140px;
	margin: 0 auto;
	padding: 0 22px 88px;
	color: var(--body);
	font-family: var(--text);
	font-size: 18px;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
}

.sc *,
.sc *::before,
.sc *::after { box-sizing: border-box; }

.sc a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
.sc a:hover { color: var(--ink); }
.sc :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.screen-reader-text {
	position: absolute; width: 1px; height: 1px; overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px); white-space: nowrap;
}

/* ---------- type scale ---------- */

.sc-h1 {
	font: 300 clamp(2.2rem, 5vw, 3.3rem)/1.12 var(--text);
	letter-spacing: -0.018em;
	color: var(--ink);
	margin: 0 0 .5em;
}
.sc-h2 {
	font: 400 clamp(1.5rem, 3vw, 2rem)/1.2 var(--text);
	letter-spacing: -0.012em;
	color: var(--ink);
	margin: 0 0 .6em;
}
.sc-h3 {
	font: 600 1.05rem/1.35 var(--ui);
	color: var(--ink);
	margin: 0 0 .7em;
}
.sc-lede { font-size: 1.12rem; color: var(--muted); max-width: 62ch; margin: 0 0 1.4em; }
.sc-muted { color: var(--muted); }
.sc-kicker { font: 500 .82rem/1.5 var(--ui); color: var(--muted); margin: 0 0 .3em; }
.sc-theme { font: 600 .9rem/1.4 var(--ui); color: var(--accent); margin: 0 0 .8em; }
.sc-empty { color: var(--muted); font-style: italic; }
.sc-dot { display: inline-block; width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .5; margin: 0 .6em; vertical-align: middle; }

/* ---------- buttons ---------- */

/*
	Specificity note: `.sc a` is 0-1-1 and would otherwise beat a bare
	`.sc-btn` at 0-1-0, painting button labels in the accent colour on a
	dark fill. The element-qualified selectors below settle it.
*/
.sc .sc-btn,
.sc a.sc-btn,
.sc button.sc-btn {
	display: inline-block;
	padding: 13px 26px;
	background: var(--ink);
	color: #fff;
	border: 1px solid var(--ink);
	border-radius: var(--radius);
	font: 500 .93rem/1 var(--ui);
	text-decoration: none;
	cursor: pointer;
	transition: background .15s ease, color .15s ease;
}
.sc .sc-btn:hover,
.sc a.sc-btn:hover,
.sc button.sc-btn:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.sc .sc-btn--quiet,
.sc a.sc-btn--quiet,
.sc button.sc-btn--quiet { background: transparent; color: var(--ink); border-color: var(--rule); }
.sc .sc-btn--quiet:hover,
.sc a.sc-btn--quiet:hover,
.sc button.sc-btn--quiet:hover { background: transparent; border-color: var(--ink); color: var(--ink); }
.sc .sc-btn--small { padding: 9px 16px; font-size: .85rem; }
.sc .sc-btn.is-done { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ---------- hero: the verse is the hero ---------- */

.sc-hero { padding: 72px 0 48px; }
.sc-hero__meta { font: 500 .84rem/1.5 var(--ui); color: var(--muted); margin: 0 0 28px; }
.sc-hero__verse {
	margin: 0;
	font: 300 clamp(1.75rem, 4vw, 2.85rem)/1.26 var(--text);
	letter-spacing: -0.016em;
	color: var(--ink);
	text-wrap: pretty;
	/* em, not ch: the measure has to scale with the display size itself,
	   otherwise it is computed against the 18px root and collapses. */
	max-width: 18em;
}
.sc-hero__ref {
	font: 600 .88rem/1.4 var(--ui);
	color: var(--accent);
	margin: 22px 0 0;
}
.sc-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }

/* ---------- the 122-day ribbon ---------- */

.sc-ribbon { padding: 20px 0 54px; border-top: 1px solid var(--rule-soft); }
.sc-ribbon__track {
	display: grid;
	grid-template-columns: repeat(61, 1fr);
	gap: 3px;
	list-style: none;
	margin: 0 0 16px;
	padding: 0;
}
.sc-ribbon__day {
	height: 26px;
	border-radius: 1px;
	background: var(--accent);
	opacity: .16;
}
.sc-ribbon__day.is-done { opacity: 1; }
.sc-ribbon__day.is-past { opacity: .38; }
.sc-ribbon__day.is-now { opacity: 1; box-shadow: inset 0 0 0 2px var(--ink); }
.sc-ribbon__key { display: flex; flex-wrap: wrap; gap: 18px; font: 400 .8rem/1 var(--ui); color: var(--muted); margin: 0; }
.sc-key { display: inline-flex; align-items: center; gap: 7px; }
.sc-key i { width: 9px; height: 9px; border-radius: 1px; display: inline-block; }

/* ---------- seasons ---------- */

.sc-seasons { padding: 12px 0 56px; }
.sc-seasons__grid { display: grid; gap: 2px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); background: var(--rule-soft); }
.sc-season { background: var(--card); padding: 26px 24px 30px; border-top: 3px solid var(--accent); }
.sc-season__title { font: 600 1.02rem/1.3 var(--ui); color: var(--ink); margin: 0 0 .5em; }
.sc-season__full { font-size: .95rem; color: var(--ink); margin: 0 0 .8em; line-height: 1.5; }
.sc-season__blurb { font-size: .92rem; color: var(--muted); margin: 0; line-height: 1.65; }

/* ---------- facts ---------- */

.sc-facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 30px;
	padding: 34px 0 52px;
	border-top: 1px solid var(--rule-soft);
	border-bottom: 1px solid var(--rule-soft);
}
.sc-fact strong { display: block; font: 300 2.4rem/1 var(--text); color: var(--ink); letter-spacing: -0.02em; }
.sc-fact span { display: block; margin-top: 8px; font: 400 .88rem/1.5 var(--ui); color: var(--muted); }

/* ---------- streams ---------- */

.sc-streams { padding: 52px 0; }
.sc-streams__list { margin: 0; }
.sc-stream { display: grid; grid-template-columns: 180px 1fr; gap: 20px; padding: 16px 0; border-top: 1px solid var(--rule-soft); }
.sc-stream dt { font: 600 .95rem/1.5 var(--ui); color: var(--ink); }
.sc-stream dd { margin: 0; color: var(--muted); }

.sc-cta { padding: 48px 0 0; border-top: 1px solid var(--rule-soft); }

/* ---------- study page ---------- */

.sc--study { max-width: 720px; }
.sc-daynav {
	display: flex; align-items: center; justify-content: space-between;
	gap: 14px; padding: 26px 0; border-bottom: 1px solid var(--rule-soft);
	font: 500 .86rem/1 var(--ui);
}
.sc-daynav__now { color: var(--muted); }
.sc-daynav__step { text-decoration: none; color: var(--ink); }
.sc-daynav__step:hover { color: var(--accent); }

.sc-study__head { padding: 42px 0 8px; }
.sc-study__title { font: 300 clamp(2rem, 4.5vw, 2.9rem)/1.15 var(--text); letter-spacing: -0.018em; color: var(--ink); margin: 0; }

.sc-readings { padding: 30px 0; border-top: 1px solid var(--rule-soft); border-bottom: 1px solid var(--rule-soft); margin: 28px 0 34px; }
.sc-readings__list { list-style: none; margin: 0; padding: 0; }
.sc-readings__list li { display: grid; grid-template-columns: 120px 1fr; gap: 16px; padding: 5px 0; }
.sc-readings__stream { font: 500 .82rem/1.7 var(--ui); color: var(--muted); }

.sc-anchor { margin: 0 0 36px; padding: 4px 0 4px 24px; border-left: 3px solid var(--accent); }
.sc-anchor p { font: italic 300 1.32rem/1.55 var(--text); color: var(--ink); margin: 0 0 .6em; }
.sc-anchor cite { font: 600 .82rem/1 var(--ui); color: var(--accent); font-style: normal; }

.sc-sermon p { margin: 0 0 1.25em; max-width: 68ch; }
.sc-sermon p:first-child::first-letter {
	float: left; font-size: 3.5em; line-height: .82; padding: .06em .09em 0 0;
	color: var(--accent); font-weight: 300;
}

.sc-prayer { margin: 34px 0; padding: 24px 26px; background: var(--card); border-left: 3px solid var(--accent); }
.sc-prayer p { font-style: italic; margin: 0; color: var(--ink); }

.sc-social { margin: 34px 0; padding: 26px; background: #f6f2ea; border-left: 3px solid var(--accent); }
.sc-social__body { margin: 0 0 14px; font-size: 1.02rem; }
.sc-social__tags { font: 400 .85rem/1.7 var(--ui); color: var(--muted); margin: 0 0 16px; }
.sc-social__tags span { margin-right: .5em; }

.sc-done { padding: 34px 0 0; border-top: 1px solid var(--rule-soft); }
.sc-done__stats { font: 400 .88rem/1.6 var(--ui); color: var(--muted); margin: 14px 0 0; }

/* ---------- reader ---------- */

.sc-reader { max-width: 1180px; }
.sc-reader__bar {
	display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-end;
	justify-content: space-between; padding: 26px 0 22px;
	border-bottom: 1px solid var(--rule);
	position: sticky; top: 0; background: var(--paper); z-index: 20;
}
.sc-reader__pickers { display: flex; flex-wrap: wrap; gap: 12px; }

.sc-field { display: block; }
.sc-field > span { display: block; font: 500 .76rem/1.6 var(--ui); color: var(--muted); margin-bottom: 4px; }
.sc-field select,
.sc-field input,
.sc-search input {
	font: 400 .95rem/1.4 var(--ui);
	padding: 9px 11px;
	border: 1px solid var(--rule);
	border-radius: var(--radius);
	background: var(--card);
	color: var(--ink);
	min-width: 150px;
	max-width: 100%;
}
.sc-field--narrow select { min-width: 88px; }
.sc-field small { display: block; font: 400 .8rem/1.5 var(--ui); color: var(--muted); margin-top: 5px; }

.sc-search { display: flex; gap: 8px; align-items: flex-end; flex: 1 1 300px; }
.sc-search input { flex: 1; min-width: 0; }

.sc-reader__body { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 44px; padding: 34px 0 0; align-items: start; }

.sc-reader__text { background: var(--card); padding: 46px 52px 54px; }
.sc-chapter__head { margin: 0 0 28px; padding-bottom: 18px; border-bottom: 1px solid var(--rule-soft); }
.sc-chapter__book { font: 300 2.1rem/1.15 var(--text); color: var(--ink); margin: 0; letter-spacing: -0.015em; }
.sc-chapter__version { font: 500 .8rem/1.5 var(--ui); color: var(--muted); margin: 6px 0 0; }

.sc-verse { display: block; margin: 0 0 .55em; font-size: 1.09rem; line-height: 1.75; scroll-margin-top: 120px; }
.sc-verse__n {
	font: 600 .68em/1 var(--ui);
	color: var(--accent);
	vertical-align: .42em;
	margin-right: .45em;
	user-select: none;
}
.sc-verse.is-target { background: #fdf3d8; box-shadow: 0 0 0 6px #fdf3d8; }
.sc-verse.is-marked { box-shadow: inset 3px 0 0 var(--accent); padding-left: 12px; }

.sc-reader__notes { position: sticky; top: 118px; font: 400 .92rem/1.65 var(--ui); }
.sc-note { padding: 18px 0; border-top: 1px solid var(--rule-soft); }
.sc-note:first-child { border-top: none; padding-top: 0; }
.sc-note h4 { font: 600 .85rem/1.4 var(--ui); color: var(--ink); margin: 0 0 .5em; }
.sc-note dl { margin: 0; }
.sc-note dt { font-weight: 600; color: var(--ink); margin-top: .7em; }
.sc-note dd { margin: 0; color: var(--muted); }

.sc-results { list-style: none; margin: 0; padding: 0; }
.sc-results li { padding: 16px 0; border-top: 1px solid var(--rule-soft); }
.sc-results li:first-child { border-top: none; }
.sc-results a { font: 600 .82rem/1.5 var(--ui); text-decoration: none; display: block; margin-bottom: 4px; }
.sc-results mark { background: #fdf0cf; color: inherit; padding: 0 2px; }

.sc-reader__paging { display: flex; justify-content: space-between; gap: 14px; padding: 28px 0 0; }
.sc-licence { font: 400 .8rem/1.6 var(--ui); color: var(--muted); padding-top: 20px; }

/* ---------- plan table ---------- */

.sc-plan__head { padding: 56px 0 34px; }
.sc-plan__month { padding: 34px 0 12px; border-top: 3px solid var(--accent); margin-bottom: 26px; }
.sc-plan__subject { color: var(--muted); max-width: 64ch; margin: -0.4em 0 1.4em; }
.sc-table { width: 100%; border-collapse: collapse; font: 400 .93rem/1.55 var(--ui); }
.sc-table th {
	text-align: left; font-weight: 600; color: var(--muted);
	font-size: .78rem; padding: 9px 12px 9px 0; border-bottom: 1px solid var(--rule);
}
.sc-table td { padding: 10px 12px 10px 0; border-bottom: 1px solid var(--rule-soft); vertical-align: top; }
.sc-table__day { color: var(--muted); width: 3.4em; }
.sc-table__ref { color: var(--body); }
.sc-table tr.is-done .sc-table__day { color: var(--accent); font-weight: 600; }
.sc-table tr.is-now { background: #fbf7ee; }
.sc-table tr.is-now .sc-table__day { box-shadow: inset 3px 0 0 var(--accent); }

/* ---------- forms, auth, alerts ---------- */

.sc-auth, .sc-account, .sc-wall { max-width: 520px; padding-top: 56px; }
.sc-form { display: grid; gap: 20px; margin: 30px 0; }
.sc-form .sc-field input,
.sc-form .sc-field select { width: 100%; }
.sc-check { display: flex; gap: 10px; align-items: flex-start; font: 400 .95rem/1.5 var(--ui); }
.sc-check input { margin-top: .25em; }
.sc-fieldset { border: 1px solid var(--rule); border-radius: var(--radius); padding: 16px 18px; display: grid; gap: 10px; }
.sc-fieldset legend { font: 500 .8rem/1.5 var(--ui); color: var(--muted); padding: 0 6px; }
.sc-form .sc-btn { justify-self: start; }
.sc-auth__alt, .sc-account__out { font: 400 .92rem/1.6 var(--ui); color: var(--muted); }

.sc-alert { padding: 13px 16px; border-radius: var(--radius); font: 400 .93rem/1.5 var(--ui); margin: 0 0 22px; }
.sc-alert--bad { background: #fbeceb; color: #8a2318; border-left: 3px solid #b4291b; }
.sc-alert--good { background: #eef5ef; color: #23522f; border-left: 3px solid #37784a; }

/* ---------- responsive ---------- */

@media (max-width: 900px) {
	.sc-reader__body { grid-template-columns: 1fr; gap: 28px; }
	.sc-reader__notes { position: static; }
	.sc-reader__text { padding: 30px 24px 36px; }
	.sc-ribbon__track { grid-template-columns: repeat(31, 1fr); }
	.sc-stream { grid-template-columns: 1fr; gap: 4px; }
}

@media (max-width: 620px) {
	.sc { font-size: 17px; padding: 0 18px 64px; }
	.sc-hero { padding: 44px 0 32px; max-width: none; }
	.sc-readings__list li { grid-template-columns: 1fr; gap: 2px; }
	.sc-reader__bar { position: static; }
	.sc-sermon p:first-child::first-letter { font-size: 3em; }
	.sc-table__ref { font-size: .86rem; }
}

@media (prefers-reduced-motion: reduce) {
	.sc *, .sc *::before, .sc *::after {
		animation-duration: .001ms !important;
		transition-duration: .001ms !important;
	}
}

@media print {
	.sc-reader__bar, .sc-reader__paging, .sc-done, .sc-daynav, .sc-ribbon { display: none; }
	.sc { max-width: none; }
	.sc-reader__text { padding: 0; }
}