/* bible.kyrts.com — The Four Gospels: a Digest & Chapter Register
   Design: Tudor statute-book / law-court register, after St Thomas More. */

:root {
  --vellum: #efe5cf;
  --vellum-deep: #e6d9bd;
  --vellum-light: #f6efdf;
  --ink: #221a12;
  --ink-soft: #4a3e31;
  --ink-faint: #7d6f5d;
  --rubric: #7e1c1c;
  --rubric-deep: #5c1212;
  --gilt: #9b7a2c;
  --rule: #c4b391;
  --rule-strong: #8f7c55;
  --shadow: 0 1px 0 rgba(60,40,10,.15), 0 6px 18px -10px rgba(60,40,10,.45);
  --serif: "EB Garamond", "Garamond", "Palatino Linotype", "Book Antiqua", Georgia, serif;
  --fell: "IM Fell English", "EB Garamond", Georgia, serif;
  --fellsc: "IM Fell English SC", "IM Fell English", "EB Garamond", Georgia, serif;
  --maxw: 68rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--vellum);
  background-image:
    radial-gradient(ellipse at 20% 0%, rgba(255,250,235,.7), transparent 55%),
    radial-gradient(ellipse at 90% 100%, rgba(150,120,70,.18), transparent 50%);
  background-attachment: fixed;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.125rem;
  line-height: 1.55;
  min-height: 100dvh;
}
a { color: var(--rubric); text-decoration: none; }
a:hover { text-decoration: underline; text-decoration-color: var(--gilt); text-underline-offset: .15em; }
a:focus-visible { outline: 2px solid var(--gilt); outline-offset: 2px; }
::selection { background: var(--rubric); color: var(--vellum-light); }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 16px; }

/* ---------- Header ---------- */
.masthead {
  border-top: 6px double var(--rubric);
  border-bottom: 1px solid var(--rule-strong);
  background: linear-gradient(var(--vellum-light), var(--vellum));
}
.masthead .wrap { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem 1.5rem; padding-top: 1rem; padding-bottom: .75rem; }
.brand { display: flex; align-items: baseline; gap: .6rem; margin-right: auto; }
.brand a { color: var(--ink); }
.brand .cross { color: var(--rubric); font-size: 1.3rem; line-height: 1; }
.brand .t { font-family: var(--fellsc); font-size: 1.35rem; letter-spacing: .06em; }
.brand .s { font-family: var(--fell); font-style: italic; color: var(--ink-faint); font-size: .95rem; }
nav.primary { display: flex; flex-wrap: wrap; gap: .1rem .9rem; font-family: var(--fellsc); letter-spacing: .05em; font-size: 1rem; }
nav.primary a { color: var(--ink-soft); padding: .1rem 0; border-bottom: 2px solid transparent; }
nav.primary a[aria-current], nav.primary a:hover { color: var(--rubric); border-bottom-color: var(--rubric); text-decoration: none; }
.motto { border-bottom: 1px solid var(--rule); }
.motto .wrap { font-family: var(--fell); font-style: italic; color: var(--ink-faint); font-size: .92rem; text-align: center; padding: .35rem 16px; }

/* ---------- Typography ---------- */
h1, h2, h3, h4 { font-family: var(--fell); font-weight: 400; line-height: 1.15; margin: 0; color: var(--ink); }
h1 { font-size: clamp(2rem, 5vw, 3.1rem); }
h2 { font-size: clamp(1.5rem, 3.4vw, 2rem); }
h3 { font-size: 1.3rem; }
.sc { font-family: var(--fellsc); letter-spacing: .06em; }
.kicker { font-family: var(--fellsc); letter-spacing: .12em; color: var(--rubric); font-size: .9rem; display: block; margin-bottom: .3rem; }
.lede { font-size: 1.2rem; color: var(--ink-soft); }
p { margin: .6em 0; }
em, i { font-style: italic; }
hr.rule { border: 0; height: 0; border-top: 1px solid var(--rule-strong); border-bottom: 1px solid var(--rule); margin: 2rem 0; }
.fleuron { text-align: center; color: var(--rubric); font-size: 1.4rem; margin: 1.5rem 0; letter-spacing: .5em; }

/* ---------- Portrait of the patron ---------- */
.hero { display: grid; grid-template-columns: auto 1fr; gap: 1.5rem 2.5rem; align-items: center; margin-bottom: 2.5rem; }
.hero .headline { text-align: left; margin-bottom: 0; }
.medallion { margin: 0; text-align: center; }
.medallion img { width: clamp(150px, 22vw, 230px); height: auto; display: block; margin: 0 auto; border-radius: 50%; box-shadow: 0 0 0 4px var(--vellum-light), 0 0 0 5px var(--rule-strong), 0 0 0 9px var(--vellum), 0 0 0 10px var(--gilt), 0 14px 28px -14px rgba(60,40,10,.6); }
.medallion figcaption { font-family: var(--fellsc); letter-spacing: .12em; color: var(--rubric); font-size: .85rem; margin-top: .9rem; }
@media (max-width: 720px) {
  .hero { grid-template-columns: 1fr; text-align: center; }
  .hero .headline { text-align: center; }
}
.patron-grid { display: grid; grid-template-columns: minmax(220px, 340px) 1fr; gap: 2rem; align-items: start; }
@media (max-width: 720px) { .patron-grid { grid-template-columns: 1fr; } .patron-grid .plate { max-width: 340px; margin: 0 auto; } }
.plate { margin: 0; }
.plate img { width: 100%; height: auto; display: block; border: 1px solid var(--rule-strong); padding: 6px; background: var(--vellum-light); box-shadow: var(--shadow); }
.plate figcaption { font-size: .85rem; color: var(--ink-faint); font-style: italic; margin-top: .4rem; }
footer .seal-img { width: 72px; height: auto; border-radius: 50%; box-shadow: 0 0 0 2px var(--vellum-light), 0 0 0 3px var(--rule-strong); margin-bottom: .6rem; }

/* ---------- Layout blocks ---------- */
main { padding: 2rem 0 3rem; }
section + section { margin-top: 3rem; }
.headline { text-align: center; margin-bottom: 2rem; }
.headline h1 { text-wrap: balance; }
.headline .under { font-family: var(--fell); font-style: italic; color: var(--ink-faint); margin-top: .4rem; }

.card {
  background: var(--vellum-light);
  border: 1px solid var(--rule);
  box-shadow: var(--shadow);
  padding: 1.2rem 1.4rem;
  position: relative;
}
.card::before { content: ""; position: absolute; inset: 5px; border: 1px solid var(--rule); pointer-events: none; }

/* Table of titles (index) */
.titles { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1.2rem; }
.titles .card { display: flex; flex-direction: column; gap: .35rem; }
.titles .num { font-family: var(--fellsc); color: var(--rubric); letter-spacing: .12em; font-size: .9rem; }
.titles h2 a { color: var(--ink); }
.titles .latin { font-style: italic; color: var(--ink-faint); margin-top: -.2rem; }
.titles .meta { font-size: .95rem; color: var(--ink-soft); }
.titles .meta b { font-weight: 600; color: var(--ink); }
.titles .go { margin-top: auto; padding-top: .6rem; font-family: var(--fellsc); letter-spacing: .06em; white-space: nowrap; }
.titles .go span { font-family: var(--serif); }

/* Statute-style register table */
table.register { width: 100%; border-collapse: collapse; font-size: 1.05rem; }
table.register th { font-family: var(--fellsc); letter-spacing: .08em; font-weight: 400; text-align: left; color: var(--rubric); border-bottom: 2px solid var(--rubric); padding: .4rem .5rem; font-size: .9rem; }
table.register td { border-bottom: 1px solid var(--rule); padding: .55rem .5rem; vertical-align: top; }
table.register tr:hover td { background: rgba(155,122,44,.08); }
table.register td.cap { white-space: nowrap; font-family: var(--fell); width: 1%; }
table.register td.cap a { color: var(--ink); font-size: 1.15rem; }
table.register td.cap small { color: var(--ink-faint); font-size: .8rem; margin-left: .3rem; }
table.register td.kw { font-weight: 600; white-space: nowrap; width: 1%; }
table.register td.line { color: var(--ink-soft); }
table.register td.cites { white-space: nowrap; font-size: .9rem; color: var(--ink-faint); text-align: right; width: 1%; }
@media (max-width: 720px) {
  table.register, table.register tbody, table.register tr, table.register td { display: block; width: auto; }
  table.register thead { display: none; }
  table.register tr { border-bottom: 1px solid var(--rule); padding: .5rem 0; }
  table.register td { border: 0; padding: .05rem .2rem; white-space: normal; }
  table.register td.cap, table.register td.kw { display: inline-block; padding-right: .6rem; }
  table.register td.line { font-size: 1rem; }
  table.register td.cites { text-align: left; }
}

/* Memory rail: a drill grid of chapter numbers */
.rail { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: .5rem; }
.rail a { display: block; border: 1px solid var(--rule); background: var(--vellum-light); padding: .45rem .55rem; color: var(--ink); line-height: 1.25; }
.rail a:hover { border-color: var(--rubric); text-decoration: none; background: #fbf5e6; }
.rail .n { font-family: var(--fell); font-size: 1.35rem; color: var(--rubric); display: block; }
.rail .k { font-size: .88rem; color: var(--ink-soft); display: block; }

/* Chapter page */
.chapter-head { display: grid; grid-template-columns: auto 1fr; gap: 0 1.5rem; align-items: center; margin-bottom: 1.5rem; }
.chapter-head .roman { font-family: var(--fell); font-size: clamp(3.4rem, 10vw, 6rem); color: var(--rubric); line-height: 1; padding-right: 1.5rem; border-right: 1px solid var(--rule-strong); }
.chapter-head .roman small { display: block; font-size: 1rem; color: var(--ink-faint); letter-spacing: .1em; font-family: var(--fellsc); text-align: center; }
.chapter-head .kw { font-family: var(--fell); font-size: clamp(1.5rem, 4vw, 2.2rem); }
.chapter-head .memo { color: var(--ink-soft); font-size: 1.1rem; margin-top: .3rem; }
.argument { font-style: italic; color: var(--ink-soft); border-left: 3px solid var(--gilt); padding: .2rem 0 .2rem 1rem; margin: 1rem 0 0; }
.argument .lab { font-style: normal; font-family: var(--fellsc); letter-spacing: .08em; color: var(--gilt); font-size: .85rem; margin-right: .5rem; }
@media (max-width: 560px) {
  .chapter-head { grid-template-columns: 1fr; }
  .chapter-head .roman { border-right: 0; border-bottom: 1px solid var(--rule-strong); padding: 0 0 .5rem; margin-bottom: .6rem; }
}
.chapnav { display: flex; justify-content: space-between; gap: 1rem; font-family: var(--fellsc); letter-spacing: .05em; margin: 1.5rem 0; }
.chapnav a { border: 1px solid var(--rule); padding: .3rem .8rem; background: var(--vellum-light); }
.chapnav a:hover { border-color: var(--rubric); text-decoration: none; }
.chapstrip { display: flex; flex-wrap: wrap; gap: .3rem; margin: 1rem 0; }
.chapstrip a { min-width: 2.2rem; text-align: center; border: 1px solid var(--rule); padding: .15rem .4rem; font-family: var(--fell); color: var(--ink-soft); background: var(--vellum-light); }
.chapstrip a[aria-current] { background: var(--rubric); color: var(--vellum-light); border-color: var(--rubric); }
.chapstrip a:hover { text-decoration: none; border-color: var(--rubric); }

/* Cited passages within a chapter */
.cites-list { display: grid; gap: 1rem; }
.cite {
  background: var(--vellum-light);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--rubric);
  padding: .9rem 1.2rem .9rem 1.2rem;
  box-shadow: var(--shadow);
}
.cite .ref { font-family: var(--fellsc); letter-spacing: .06em; color: var(--rubric); }
.cite .ref .tier1 { color: var(--gilt); margin-right: .3rem; }
.cite h3 { font-size: 1.25rem; margin: .1rem 0 .4rem; }
.cite .text { margin: 0; }
.cite .text .vn { font-family: var(--fellsc); color: var(--ink-faint); font-size: .8rem; vertical-align: super; margin-right: .15rem; }
.cite .also { font-size: .92rem; color: var(--ink-faint); margin-top: .5rem; }
.cite .also b { font-family: var(--fellsc); letter-spacing: .06em; font-weight: 400; color: var(--gilt); }
.cite .themes { font-size: .85rem; color: var(--ink-faint); margin-top: .3rem; }

/* Full chapter text */
.scripture { margin-top: 1rem; }
.scripture summary { cursor: pointer; font-family: var(--fellsc); letter-spacing: .08em; color: var(--rubric); padding: .6rem 0; border-top: 1px solid var(--rule-strong); border-bottom: 1px solid var(--rule); list-style: none; display: flex; justify-content: space-between; }
.scripture summary::-webkit-details-marker { display: none; }
.scripture summary::after { content: "☩ open"; color: var(--ink-faint); font-size: .85rem; }
.scripture[open] summary::after { content: "☩ close"; }
.verses { padding: 1rem 0 0; }
.verse { display: grid; grid-template-columns: 2.6rem 1fr; gap: .4rem; padding: .2rem 0; scroll-margin-top: 1rem; }
.verse .n { font-family: var(--fell); color: var(--ink-faint); text-align: right; padding-right: .4rem; font-size: .95rem; padding-top: .15em; }
.verse .n a { color: inherit; }
.verse.key { background: linear-gradient(90deg, rgba(126,28,28,.09), transparent 70%); }
.verse.key .n { color: var(--rubric); font-weight: 600; }
.verse.key .n::before { content: "¶ "; color: var(--gilt); }
.verse:target { background: rgba(155,122,44,.22); }
.gloss { grid-column: 2; font-size: .92rem; color: var(--ink-faint); font-style: italic; border-left: 2px solid var(--rule); padding-left: .7rem; margin: .2rem 0 .3rem; }
.gloss::before { content: "Gloss. "; font-family: var(--fellsc); font-style: normal; color: var(--gilt); letter-spacing: .05em; }
.dropcap::first-letter { font-family: var(--fell); font-size: 3.2em; float: left; line-height: .8; padding: .08em .1em 0 0; color: var(--rubric); }

/* Digest */
.filters { display: flex; flex-wrap: wrap; gap: .4rem; margin: 1rem 0; align-items: center; }
.filters .lab { font-family: var(--fellsc); letter-spacing: .08em; color: var(--ink-faint); font-size: .85rem; margin-right: .3rem; }
.chip { font-family: var(--fellsc); letter-spacing: .04em; font-size: .9rem; border: 1px solid var(--rule-strong); background: var(--vellum-light); color: var(--ink-soft); padding: .2rem .7rem; cursor: pointer; }
.chip[aria-pressed="true"] { background: var(--rubric); border-color: var(--rubric); color: var(--vellum-light); }
.chip:hover { border-color: var(--rubric); }
.digest { list-style: none; margin: 0; padding: 0; }
.digest > li { display: grid; grid-template-columns: 9.5rem 1fr; gap: .4rem 1rem; padding: .7rem 0; border-bottom: 1px solid var(--rule); align-items: baseline; }
.digest .ref { font-family: var(--fellsc); letter-spacing: .05em; color: var(--rubric); white-space: nowrap; }
.digest .ref .tier1 { color: var(--gilt); margin-right: .25rem; }
.digest .title { font-weight: 600; }
.digest .snip { color: var(--ink-soft); font-style: italic; display: block; font-size: 1rem; margin-top: .15rem; }
.digest .also { color: var(--ink-faint); font-size: .88rem; display: block; margin-top: .2rem; }
.digest .bookhead { display: block; grid-template-columns: none; border-bottom: 2px solid var(--rubric); padding: 1.6rem 0 .3rem; }
.digest .bookhead h2 { font-size: 1.6rem; }
.digest li[hidden] { display: none; }
@media (max-width: 560px) { .digest > li { grid-template-columns: 1fr; gap: .1rem; } }
.count { font-family: var(--fellsc); letter-spacing: .06em; color: var(--ink-faint); font-size: .9rem; }

/* Search */
.searchbox { display: flex; gap: .5rem; }
.searchbox input { flex: 1; font: inherit; font-size: 1.15rem; padding: .55rem .8rem; border: 1px solid var(--rule-strong); background: var(--vellum-light); color: var(--ink); }
.searchbox input:focus { outline: 2px solid var(--gilt); outline-offset: 1px; }
.searchbox button { font: inherit; font-family: var(--fellsc); letter-spacing: .08em; background: var(--rubric); color: var(--vellum-light); border: 0; padding: .55rem 1.1rem; cursor: pointer; }
.results { list-style: none; padding: 0; margin: 1.2rem 0; }
.results li { padding: .6rem 0; border-bottom: 1px solid var(--rule); }
.results .ref { font-family: var(--fellsc); letter-spacing: .05em; }
.results mark { background: rgba(155,122,44,.35); color: inherit; }

.quad { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.quad table.register { font-size: .98rem; }
.quad table.register td { padding: .35rem .3rem; }
@media (max-width: 1000px) { .quad { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .quad { grid-template-columns: 1fr; } }

/* Two column with side notes */
.two { display: grid; grid-template-columns: 2fr 1fr; gap: 2rem; align-items: start; }
@media (max-width: 800px) { .two { grid-template-columns: 1fr; } }
.side { font-size: 1rem; color: var(--ink-soft); }
.side h3 { font-size: 1.1rem; margin-bottom: .4rem; }
.side ul { padding-left: 1.1rem; margin: .3rem 0; }
.side li + li { margin-top: .25rem; }
dl.facts { margin: .5rem 0 0; display: grid; grid-template-columns: auto 1fr; gap: .25rem .8rem; font-size: 1rem; }
dl.facts dt { font-family: var(--fellsc); letter-spacing: .06em; color: var(--gilt); font-size: .85rem; padding-top: .2rem; }
dl.facts dd { margin: 0; }

/* Footer */
footer { border-top: 1px solid var(--rule-strong); margin-top: 3rem; padding: 1.4rem 0 2.2rem; font-size: .95rem; color: var(--ink-faint); text-align: center; }
footer .seal { font-family: var(--fellsc); letter-spacing: .12em; color: var(--rubric); font-size: .95rem; }
footer p { margin: .3rem 0; }

/* Breadcrumb */
.crumb { font-family: var(--fellsc); letter-spacing: .06em; font-size: .9rem; color: var(--ink-faint); margin-bottom: 1rem; }
.crumb a { color: var(--ink-soft); }
.crumb span { margin: 0 .4rem; color: var(--rule-strong); }

@media print {
  body { background: #fff; color: #000; font-size: 11pt; }
  .masthead, .motto, nav, .chapnav, .chapstrip, footer, .filters, .searchbox { display: none !important; }
  .scripture[open] summary, .scripture summary { display: none; }
  .card, .cite { box-shadow: none; }
  a { color: inherit; }
}