/* torah.rest — no third-party fonts, no CDNs, no trackers. Brief §9. */

:root{
  --parchment:#efe8d8;
  --parchment-deep:#e6dcc6;
  --panel:#f6f1e5;
  --ink:#241f1a;
  --ink-soft:#5a5044;
  --olive:#55603f;
  --gold:#9c7b26;
  --rule:#d5c9ae;
  --measure:68ch;

  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,ui-serif,serif;
  --sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}

@media (prefers-color-scheme: dark){
  :root{
    --parchment:#17130e;
    --parchment-deep:#100d09;
    --panel:#1f1a13;
    --ink:#ece2cd;
    --ink-soft:#a89a83;
    --olive:#9aa877;
    --gold:#c8a338;
    --rule:#3a3227;
  }
}

*{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--parchment);
  color:var(--ink);
  font-family:var(--serif);
  font-size:19px;
  line-height:1.7;
  text-rendering:optimizeLegibility;
}

@media (max-width:36rem){
  body{font-size:18px}
}

/* ---------- skip link + focus ---------- */

.skip{
  position:absolute; left:-9999px;
  background:var(--ink); color:var(--parchment);
  padding:.6rem 1rem; z-index:100;
}
.skip:focus{left:1rem; top:1rem}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:3px;
}

/* ---------- layout ---------- */

.shell{
  width:100%;
  max-width:74rem;
  margin:0 auto;
  padding:0 1.5rem;
}

.reading{
  max-width:var(--measure);
  margin-left:auto;
  margin-right:auto;
}

/* ---------- masthead ---------- */

.masthead{
  border-bottom:1px solid var(--rule);
  padding:1.5rem 0 1.25rem;
}

.masthead-inner{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:1rem 2rem;
  justify-content:space-between;
}

.wordmark{
  font-family:var(--serif);
  font-size:1.5rem;
  letter-spacing:.02em;
  color:var(--ink);
  text-decoration:none;
  white-space:nowrap;
}
.wordmark .dot{color:var(--gold)}

.nav{
  display:flex;
  flex-wrap:wrap;
  gap:.35rem 1.4rem;
  font-family:var(--sans);
  font-size:.82rem;
  letter-spacing:.03em;
}
.nav a{
  color:var(--ink-soft);
  text-decoration:none;
  padding:.2rem 0;
  border-bottom:1px solid transparent;
}
.nav a:hover,
.nav a[aria-current="page"]{
  color:var(--ink);
  border-bottom-color:var(--gold);
}

/* ---------- eyebrow / labels ---------- */

.eyebrow{
  font-family:var(--sans);
  font-size:.72rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--olive);
  margin:0 0 .9rem;
}

/* ---------- headings ---------- */

h1,h2,h3,h4{
  font-family:var(--serif);
  font-weight:600;
  line-height:1.22;
  color:var(--ink);
  letter-spacing:-.008em;
}

h1{font-size:clamp(2rem,5vw,2.9rem); margin:0 0 1rem}
h2{font-size:clamp(1.4rem,3vw,1.75rem); margin:2.8rem 0 .9rem}
h3{font-size:1.18rem; margin:2rem 0 .6rem}

p{margin:0 0 1.15rem}

a{color:var(--ink); text-decoration-color:var(--gold); text-underline-offset:.18em}
a:hover{color:var(--gold)}

hr{border:0; border-top:1px solid var(--rule); margin:2.5rem 0}

/* ---------- scripture block: the signature element ----------
   Never truncated, never clipped. No ellipsis, no max-height,
   no text-overflow anywhere in this rule. Brief §2. */

.scripture{
  margin:2rem 0;
  padding:1.6rem 1.5rem 1.4rem 1.9rem;
  background:var(--panel);
  border-left:3px solid var(--gold);
  border-radius:2px;
  position:relative;
  overflow:visible;
}

.scripture-text{
  font-size:1.06em;
  line-height:1.72;
  font-style:italic;
  margin:0;
  /* explicit guard: full text always renders */
  overflow-wrap:break-word;
  hyphens:none;
}

.scripture-text::before{content:"\201C"}
.scripture-text::after{content:"\201D"}

.scripture-ref{
  display:block;
  margin-top:.85rem;
  font-family:var(--sans);
  font-style:normal;
  font-size:.74rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--olive);
}

/* ---------- scrollwork divider (vine motif, used sparingly) ---------- */

.divider{
  display:block;
  width:min(15rem,60%);
  height:auto;
  margin:3.5rem auto;
  color:var(--gold);
  opacity:.7;
}

/* ---------- hero ---------- */

.hero{
  padding:5rem 0 1rem;
  text-align:center;
}
.hero .anchor{
  max-width:34ch;
  margin:0 auto 1.6rem;
  font-size:clamp(1.5rem,4.2vw,2.35rem);
  line-height:1.34;
  font-style:italic;
}
.hero .anchor-ref{
  font-family:var(--sans);
  font-size:.74rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--olive);
  display:block;
  margin-bottom:2.6rem;
}
.hero-title{
  max-width:22ch;
  margin:0 auto 1.4rem;
  font-size:clamp(1.75rem,4.4vw,2.7rem);
  line-height:1.22;
  font-weight:600;
  letter-spacing:-.012em;
}
@media (max-width:40rem){
  /* the manual line break reads badly on a narrow screen */
  .hero-title br{display:none}
  .hero-title{max-width:26ch}
}
.hero .thesis{
  max-width:46ch;
  margin:0 auto 2.4rem;
  color:var(--ink-soft);
}

/* ---------- call to action ---------- */

.cta{
  display:inline-block;
  font-family:var(--sans);
  font-size:.85rem;
  letter-spacing:.08em;
  text-decoration:none;
  color:var(--parchment);
  background:var(--olive);
  padding:.85rem 1.9rem;
  border-radius:2px;
  border:1px solid var(--olive);
}
.cta:hover{background:var(--ink); border-color:var(--ink); color:var(--parchment)}

.cta-quiet{
  background:transparent;
  color:var(--ink);
  border-color:var(--rule);
}
.cta-quiet:hover{background:transparent; border-color:var(--gold); color:var(--gold)}

/* ---------- three courts / standards columns ---------- */

.courts{
  display:grid;
  gap:1.25rem;
  grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));
  margin:2rem 0;
}

.court{
  background:var(--panel);
  border:1px solid var(--rule);
  border-top:3px solid var(--olive);
  border-radius:2px;
  padding:1.4rem 1.3rem;
}
.court h3{margin-top:0}
.court-note{
  font-size:.9rem;
  color:var(--ink-soft);
}

/* Standards: all three sections carry equal visual weight. Brief §4. */
.standard{
  background:var(--panel);
  border:1px solid var(--rule);
  border-top:3px solid var(--gold);
  border-radius:2px;
  padding:1.5rem 1.4rem;
}

/* ---------- owner TODO placeholder ---------- */

.todo{
  border:1px dashed var(--gold);
  background:transparent;
  border-radius:2px;
  padding:1.1rem 1.2rem;
  margin:1.5rem 0;
  font-family:var(--sans);
  font-size:.86rem;
  line-height:1.6;
  color:var(--ink-soft);
}
/* Only the leading label gets the block treatment — bold inside the body must not. */
.todo > strong:first-child{
  display:block;
  font-size:.7rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:.4rem;
}
.todo p strong,
.todo em strong{font-weight:600; color:var(--ink)}

/* ---------- teaching list ---------- */

.entries{list-style:none; padding:0; margin:2rem 0}
.entry{
  padding:1.35rem 0;
  border-bottom:1px solid var(--rule);
}
.entry h2{font-size:1.25rem; margin:0 0 .35rem}
.entry h2 a{text-decoration:none}
.entry-meta{
  font-family:var(--sans);
  font-size:.74rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--olive);
}
.entry-summary{margin:.5rem 0 0; color:var(--ink-soft)}

.filters{
  display:flex; flex-wrap:wrap; gap:.5rem;
  margin:1.5rem 0 0; padding:0; list-style:none;
}
.filters a{
  display:inline-block;
  font-family:var(--sans);
  font-size:.76rem;
  letter-spacing:.06em;
  text-decoration:none;
  color:var(--ink-soft);
  border:1px solid var(--rule);
  border-radius:999px;
  padding:.28rem .85rem;
}
.filters a:hover{border-color:var(--gold); color:var(--gold)}

/* ---------- notice ---------- */

.notice{
  border:1px solid var(--rule);
  border-left:3px solid var(--olive);
  background:var(--panel);
  padding:1.1rem 1.2rem;
  margin:2rem 0;
  font-size:.95rem;
  color:var(--ink-soft);
}

/* ---------- article footer / print ---------- */

.article-tools{
  margin:3rem 0 0;
  padding-top:1.2rem;
  border-top:1px solid var(--rule);
  font-family:var(--sans);
  font-size:.8rem;
  letter-spacing:.04em;
}
.article-tools a,
.article-tools button{
  color:var(--ink-soft);
  background:none;
  border:0;
  font:inherit;
  cursor:pointer;
  text-decoration:none;
  padding:0;
  margin-right:1.5rem;
}
.article-tools a:hover,
.article-tools button:hover{color:var(--gold)}

/* ---------- footer ---------- */

.colophon{
  margin-top:5rem;
  border-top:1px solid var(--rule);
  padding:2rem 0 3rem;
  font-family:var(--sans);
  font-size:.8rem;
  color:var(--ink-soft);
}
.colophon-inner{
  display:flex; flex-wrap:wrap; gap:1rem 2.5rem;
  justify-content:space-between;
}
.colophon a{color:var(--ink-soft); text-decoration:none}
.colophon a:hover{color:var(--gold)}

/* ================= Building library ================= */

.crumb{
  font-family:var(--sans); font-size:.75rem; letter-spacing:.12em;
  text-transform:uppercase; margin-bottom:1.2rem;
}
.crumb a{color:var(--olive); text-decoration:none}
.crumb a:hover{color:var(--gold)}

.standfirst{font-size:1.1em; color:var(--ink-soft); margin:0 0 1.5rem}

/* Required disclaimer — must read as a caution, not a footnote. Spec §9 */
.disclaimer{
  margin:3.5rem 0 0;
  padding:1.2rem 1.3rem;
  border:1px solid var(--gold);
  border-left:4px solid var(--gold);
  border-radius:2px;
  background:var(--panel);
  font-family:var(--sans);
  font-size:.86rem;
  line-height:1.62;
  color:var(--ink-soft);
}
.disclaimer p{margin:0}
.disclaimer strong{color:var(--ink)}

/* Source plates */
.plate{margin:2rem 0; padding:0}
.plate img{
  display:block; width:100%; height:auto;
  border:1px solid var(--rule); border-radius:2px; background:#fff;
}
.plate figcaption{
  font-family:var(--sans); font-size:.78rem; line-height:1.5;
  color:var(--ink-soft); margin-top:.55rem;
}
.plate-src{display:block; margin-top:.2rem; color:var(--olive)}
.plate-src a{color:var(--olive)}

.plate-grid{
  display:grid; gap:1.1rem;
  grid-template-columns:repeat(auto-fill,minmax(11rem,1fr));
  margin:2rem 0 .8rem;
}
.plate-grid .plate{margin:0}
.plate-grid img{transition:border-color .15s}
.plate-grid a:hover img{border-color:var(--gold)}

.plate-credit{
  font-family:var(--sans); font-size:.76rem; line-height:1.55;
  color:var(--ink-soft); margin:0 0 2.5rem;
}

/* Wide elements may break the reading measure */
.reading .plate-wide,
.reading .plate-grid,
.reading .plate-credit,
.reading .table-wrap,
.reading .planbar,
.reading .plan-count,
.reading .plan-grid,
.reading .plan-empty{
  width:min(74rem, 92vw);
  margin-left:calc(50% - min(37rem, 46vw));
}

/* Resource tables */
.table-wrap{overflow-x:auto; margin:1.8rem 0}
.rt{border-collapse:collapse; width:100%; font-size:.9rem}
.rt th,.rt td{
  text-align:left; padding:.6rem .7rem;
  border-bottom:1px solid var(--rule); vertical-align:top;
}
.rt th{
  font-family:var(--sans); font-size:.72rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--olive); white-space:nowrap;
}
.rt .note{display:block; color:var(--ink-soft); font-size:.85em; margin-top:.15rem}

/* Link-status marks */
.mark{
  font-family:var(--sans); font-size:.62rem; letter-spacing:.1em;
  text-transform:uppercase; padding:.12rem .45rem; border-radius:2px;
  border:1px solid var(--rule); color:var(--ink-soft); white-space:nowrap;
}
.mark-ok{border-color:var(--olive); color:var(--olive)}
.mark-browser{border-color:var(--gold); color:var(--gold)}

/* Plans filter */
.planbar{
  display:grid; gap:.8rem;
  grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));
  margin:2rem 0 1.2rem; padding:1.1rem 1.2rem;
  background:var(--panel); border:1px solid var(--rule); border-radius:2px;
}
.planbar label{
  display:block; font-family:var(--sans); font-size:.68rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--olive);
  margin-bottom:.3rem;
}
.planbar select,.planbar input{
  width:100%; font:inherit; font-size:.86rem;
  padding:.42rem .5rem; color:var(--ink);
  background:var(--parchment); border:1px solid var(--rule); border-radius:2px;
}
.plan-count{
  font-family:var(--sans); font-size:.78rem; color:var(--ink-soft); margin:0 0 1rem;
}
.plan-grid{
  display:grid; gap:1rem;
  grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));
  margin:0 0 2rem;
}
.plan{
  border:1px solid var(--rule); border-top:3px solid var(--olive);
  border-radius:2px; padding:1rem 1.05rem; background:var(--panel);
}
.plan h3{margin:0 0 .3rem; font-size:1.02rem}
.plan h3 a{text-decoration:none}
.plan .meta{
  font-family:var(--sans); font-size:.7rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--olive); margin:0 0 .5rem;
}
.plan .desc{font-size:.88rem; color:var(--ink-soft); margin:0 0 .6rem}
.plan .tags{display:flex; flex-wrap:wrap; gap:.3rem}
.plan .tag{
  font-family:var(--sans); font-size:.64rem; letter-spacing:.06em;
  border:1px solid var(--rule); border-radius:999px;
  padding:.15rem .5rem; color:var(--ink-soft);
}
.plan-empty{
  border:1px dashed var(--rule); border-radius:2px; padding:1.5rem;
  text-align:center; color:var(--ink-soft); font-family:var(--sans); font-size:.88rem;
}

/* Gaps list */
.gaps{list-style:none; padding:0; margin:1.5rem 0}
.gaps li{
  padding:.8rem 0 .8rem 1.7rem; border-bottom:1px solid var(--rule);
  position:relative; color:var(--ink-soft); font-size:.94rem;
}
.gaps li::before{
  content:"\2014"; position:absolute; left:0; top:.8rem;
  font-family:var(--sans); color:var(--gold);
}
.gaps strong{color:var(--ink); font-weight:600}

@media (max-width:52rem){
  .reading .plate-wide,
  .reading .plate-grid,
  .reading .plate-credit,
  .reading .table-wrap,
  .reading .planbar,
  .reading .plan-count,
  .reading .plan-grid,
  .reading .plan-empty{width:100%; margin-left:0}
}

/* ---------- motion ----------
   No entrance animation. Content that starts at opacity 0 is content a reader on a
   slow phone may never see, and most arrivals here come from a phone. */

/* ---------- print ---------- */

@media print{
  :root{--parchment:#fff;--panel:#fff;--ink:#000;--ink-soft:#333;--rule:#bbb}
  .masthead,.colophon,.article-tools,.filters,.divider,.cta{display:none !important}
  body{font-size:12pt; line-height:1.55}
  .scripture{border-left:2px solid #666; background:#fff; padding-left:1rem}
  a{text-decoration:none; color:#000}
  /* never clip a verse on paper either */
  .scripture,.scripture-text{overflow:visible; max-height:none}
}