:root{
  --parchment:#f7f1e5;
  --cream:#fbf7ef;
  --ink:#1e211c;
  --muted:#6f6a5f;
  --bronze:#8f5f2a;
  --walnut:#613d19;
  --green:#2f5d50;
  --navy:#223a5e;
  --hair:rgba(97,61,25,.18);
  --shadow:0 18px 50px rgba(48,38,26,.08);
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --sans:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
[hidden]{display:none!important}
body{
  margin:0;
  background:
    radial-gradient(circle at 15% 0%,rgba(255,255,255,.55),transparent 28rem),
    var(--parchment);
  color:var(--ink);
  font-family:var(--serif);
  line-height:1.55;
}
a{color:inherit}
.site-header{
  position:sticky;top:0;z-index:30;
  display:flex;align-items:center;justify-content:space-between;
  min-height:64px;padding:0 28px;
  background:rgba(247,241,229,.94);
  border-bottom:1px solid var(--hair);
  backdrop-filter:blur(10px);
}
.brand{display:inline-flex;align-items:center;text-decoration:none;flex:0 0 auto}
.brand-insignia{display:block;width:48px;height:48px;border-radius:50%}
.primary-nav{display:flex;gap:24px;font-family:var(--sans);font-size:.83rem;color:var(--muted)}
.primary-nav a{text-decoration:none}
.primary-nav a:hover{color:var(--ink)}
.books-nav{position:relative;display:inline-flex}
.books-nav-menu{
  position:absolute;top:100%;right:0;z-index:40;display:none;min-width:10rem;padding:6px 0;
  background:var(--cream);border:1px solid var(--hair);box-shadow:var(--shadow)
}
.books-nav:hover .books-nav-menu,.books-nav:focus-within .books-nav-menu{display:block}
.books-nav-menu a{display:block;padding:8px 12px;white-space:nowrap}
.shell{width:min(1180px,calc(100% - 48px));margin:0 auto}
.hero{padding:80px 0 54px;border-bottom:1px solid var(--hair)}
.eyebrow{
  font-family:var(--sans);font-size:.72rem;text-transform:uppercase;
  letter-spacing:.16em;color:var(--bronze);font-weight:700
}
h1,h2,h3{line-height:1.12}
h1{font-size:clamp(2.6rem,6vw,5.3rem);font-weight:500;letter-spacing:-.035em;margin:.22em 0}
.hero p{max-width:760px;font-size:1.22rem;color:#514c43}
.quiet-line{font-style:italic;color:var(--muted)}
.library-section{padding:54px 0 90px}
.section-head{display:flex;justify-content:space-between;align-items:end;margin-bottom:24px}
.section-head h2{font-size:1.8rem;margin:0}
.section-head p{font-family:var(--sans);font-size:.83rem;color:var(--muted);margin:0}
.book-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.catalog-filters{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:10px}
.catalog-filter{
  border:1px solid var(--hair);background:transparent;color:var(--muted);padding:7px 11px;
  font-family:var(--sans);font-size:.76rem;cursor:pointer
}
.catalog-filter:hover,.catalog-filter.active{color:var(--bronze);border-color:var(--bronze)}
.book-card{
  position:relative;min-height:330px;padding:34px;
  background:var(--cream);border:1px solid var(--hair);
  box-shadow:var(--shadow);text-decoration:none;
  display:flex;flex-direction:column;justify-content:space-between;
  overflow:hidden;transition:.2s transform,.2s border-color
}
.book-card:before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:7px;
  background:var(--walnut)
}
.book-card.spanish:before{background:var(--green)}
.book-card:hover{transform:translateY(-3px);border-color:rgba(97,61,25,.35)}
.book-card .language{
  font-family:var(--sans);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)
}
.book-card h3{font-size:2.15rem;font-weight:500;margin:.4rem 0 .2rem}
.book-card .book-part{
  margin:.15rem 0 .5rem;font-family:var(--sans);font-size:.78rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--walnut)
}
.book-card .author{font-style:italic;color:var(--muted)}
.book-card .blurb{max-width:34rem;color:#514c43}
.card-foot{display:flex;align-items:center;justify-content:space-between;font-family:var(--sans);font-size:.78rem;color:var(--muted)}
.card-foot .open{color:var(--walnut);font-weight:700}

.book-hero{padding:54px 0 34px;border-bottom:1px solid var(--hair)}
.breadcrumbs{font-family:var(--sans);font-size:.76rem;color:var(--muted);display:flex;gap:8px;flex-wrap:wrap}
.breadcrumbs a{text-decoration:none}
.book-title-row{display:flex;justify-content:space-between;gap:30px;align-items:end;margin-top:22px}
.book-title-row h1{font-size:clamp(2.4rem,5vw,4rem);margin:0}
.book-meta{font-family:var(--sans);font-size:.8rem;color:var(--muted);text-align:right}
.toc{padding:44px 0 80px}
.toc h2{font-size:1.5rem;font-weight:500;margin-bottom:24px}
.toc-list{border-top:1px solid var(--hair)}
.toc-row{
  display:grid;grid-template-columns:72px 1fr auto;gap:20px;align-items:baseline;
  padding:18px 4px;border-bottom:1px solid var(--hair);text-decoration:none
}
.toc-row:hover .toc-title{color:var(--walnut)}
.toc-num{font-family:var(--sans);font-size:.73rem;color:var(--muted)}
.toc-title{font-size:1.16rem}
.toc-note{font-family:var(--sans);font-size:.74rem;color:var(--muted)}

.reader-shell{width:min(1500px,calc(100% - 11rem));margin:0 auto;padding:34px 0 92px}
.reader-head{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  border-bottom:1px solid var(--hair);padding-bottom:18px;margin-bottom:10px
}
.reader-head .chapter-mark{
  font-family:var(--sans);text-transform:uppercase;letter-spacing:.13em;font-size:.68rem;color:var(--bronze)
}
.reader-head h1{font-size:1.45rem;font-weight:500;margin:0;text-align:center;letter-spacing:0}
.chapter-title-block{min-width:0;text-align:center}
.reader-head .chapter-title-source{margin:0}
.chapter-title-translation{
  margin-top:.28rem;color:var(--muted);font-size:.9rem;font-style:italic;line-height:1.35
}
.reader-head.unnamed{grid-template-columns:1fr}
.reader-head.unnamed .chapter-title-block{
  grid-column:1;grid-row:1;margin-top:0;text-align:center
}
.reader-head.unnamed h1{text-align:center;font-style:normal;letter-spacing:.08em}
.reader-actions{justify-self:end;display:flex;gap:8px}
.icon-btn,.contents-btn,.link-btn{
  border:1px solid var(--hair);background:rgba(251,247,239,.72);color:var(--ink);
  font-family:var(--sans);font-size:.76rem;padding:8px 11px;cursor:pointer;text-decoration:none
}
.icon-btn:hover,.contents-btn:hover,.link-btn:hover{border-color:rgba(97,61,25,.42);background:var(--cream)}
.contents-btn{display:inline-flex;align-items:center;justify-content:center;min-width:5.75rem}
.reader-columns{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0;
  margin-top:6px
}
.column-label{
  font-family:var(--sans);font-size:.67rem;text-transform:uppercase;letter-spacing:.14em;color:var(--muted);
  padding:15px 28px 12px
}
.column-label.right{border-left:1px solid var(--hair)}
.sentence-row{display:contents}
.sentence-cell{
  position:relative;padding:26px 28px 30px;border-top:1px solid var(--hair);
  min-height:148px;font-size:1.23rem
}
.sentence-cell.translation{border-left:1px solid var(--hair);color:#46443e}
.sentence-explanation{
  grid-column:1/-1;padding:11px 28px 15px calc(28px + 4.75rem);
  border-top:1px dashed var(--hair);background:rgba(255,255,255,.1);
  color:var(--muted);font-family:var(--sans);font-size:.75rem;line-height:1.55
}
.sentence-explanation-label{
  margin-right:.55rem;color:var(--bronze);font-size:.62rem;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;white-space:nowrap
}
.sentence-cell:not(.translation) {
  display: grid;
  grid-template-columns: 3.75rem minmax(0, 1fr);
  column-gap: 1rem;
  align-items: start;
}
.sentence-cell:not(.translation) .sentence-anchor {
  position: static;
  grid-column: 1;
  white-space: nowrap;
}
.sentence-cell:not(.translation) .source-text {
  grid-column: 2;
  min-width: 0;
}
.sentence-anchor{
  position:absolute;top:28px;left:3px;
  font-family:var(--sans);font-size:.67rem;color:#9c9486;text-decoration:none
}
.sentence-anchor:hover{color:var(--bronze)}
.sentence-anchor[id]{scroll-margin-top:90px}
.source-text{line-height:1.85}
.word-token{white-space:nowrap}
.word{
  position:relative;display:inline;border:0;background:none;padding:0;margin:0;
  font:inherit;color:inherit;cursor:pointer;border-bottom:1px solid transparent
}
.word:hover,.word:focus-visible,.word.active{color:var(--walnut);border-bottom-color:rgba(143,95,42,.55);outline:none}
.word-popup{
  position:fixed;z-index:60;width:min(380px,calc(100vw - 28px));
  background:#fffdf8;border:1px solid rgba(97,61,25,.25);box-shadow:0 18px 60px rgba(42,31,20,.18);
  padding:18px 20px;display:none
}
.word-popup.open{display:block}
.popup-top{display:flex;justify-content:space-between;gap:20px;border-bottom:1px solid var(--hair);padding-bottom:10px;margin-bottom:12px}
.popup-word-line{display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap}
.popup-word{font-size:1.35rem}
.popup-language{
  padding:.08rem .38rem;border:1px solid var(--hair);border-radius:999px;
  color:var(--muted);font-family:var(--sans);font-size:.56rem;font-weight:700;
  letter-spacing:.08em;line-height:1.4;text-transform:uppercase
}
.popup-lemma{font-style:italic;color:var(--bronze)}
.popup-close{border:0;background:none;font-size:1.1rem;cursor:pointer;color:var(--muted)}
.popup-grid{display:grid;grid-template-columns:82px 1fr;gap:7px 12px;font-size:.92rem}
.popup-label{font-family:var(--sans);font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.popup-value{color:#3f3b34}
.popup-note{grid-column:1/-1;border-top:1px solid var(--hair);margin-top:5px;padding-top:11px;color:#514c43}

.chapter-rail {
  position: fixed;
  top: 64px;
  bottom: 0;
  width: clamp(3.5rem, 5vw, 4.5rem);
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(97,61,25,.45);
  font-family: var(--sans);
  font-size: 1.7rem;
  text-decoration: none;
}
.chapter-rail:hover{background:rgba(255,255,255,.22);color:var(--walnut)}
.chapter-rail.prev{left:0;border-right:1px solid rgba(97,61,25,.08)}
.chapter-rail.next{right:0;border-left:1px solid rgba(97,61,25,.08)}
.chapter-rail.disabled{pointer-events:none;opacity:.2}
.bottom-nav {
  display: grid;
  grid-template-columns: minmax(10rem, 1fr) auto minmax(10rem, 1fr);
  gap: 1rem;
  align-items: center;
  margin-top: 3rem;
}

.top-nav {
  margin: 1.5rem 0 2rem;
}

.bottom-nav > a {
  box-sizing: border-box;
  min-height: 3.25rem;
  padding: .9rem 1.5rem;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--hair);
  background: rgba(251,247,239,.72);
  font-family: var(--sans);
  font-size: .78rem;
  text-decoration: none;
}

.bottom-nav > a:hover {
  border-color: rgba(97,61,25,.42);
  background: var(--cream);
}

.bottom-nav > a:first-child {
  justify-self: start;
  justify-content: flex-start;
  min-width: 14rem;
}

.bottom-nav > .bottom-contents {
  justify-self: center;
  justify-content: center;
  min-width: 9rem;
}

.bottom-nav > a:last-child {
  justify-self: end;
  justify-content: flex-end;
  min-width: 14rem;
}
.bottom-nav a[aria-disabled="true"],
.chapter-rail[aria-disabled="true"] {
  opacity: .28;
  pointer-events: none;
  cursor: default;
}
.reader-footer-note{
  text-align:center;border-top:1px solid var(--hair);padding-top:22px;margin-top:6px;
  font-family:var(--sans);font-size:.73rem;color:var(--muted)
}
.toast{
  position:fixed;bottom:22px;left:50%;transform:translateX(-50%);
  background:var(--ink);color:var(--cream);padding:9px 13px;
  font-family:var(--sans);font-size:.75rem;opacity:0;pointer-events:none;transition:.18s
}
.toast.show{opacity:1}
@media(max-width:700px){
  .primary-nav{gap:13px}.shell{width:min(100% - 28px,1180px)}
  .hero{padding-top:48px}.book-grid{grid-template-columns:1fr}
  .book-title-row{display:block}.book-meta{text-align:left;margin-top:18px}
  .reader-shell{width:min(100% - 28px,1220px);padding-top:22px}
  .reader-head{grid-template-columns:1fr auto}
  .chapter-title-block{grid-row:2;grid-column:1/-1;text-align:left;margin-top:14px}
  .reader-head h1{text-align:left}
  .reader-actions{grid-column:2}.reader-columns{display:block}
  .column-label{display:none}.sentence-row{display:block;border-top:1px solid var(--hair)}
  .sentence-cell{border-top:0!important;padding:22px 12px 18px 26px;min-height:auto}
  .sentence-cell.translation{border-left:0;padding-top:0;font-size:1.02rem;color:var(--muted)}
  .sentence-explanation{
    padding:0 12px 20px calc(26px + 4rem);border-top:0;background:transparent
  }
  .sentence-cell:not(.translation) {
    grid-template-columns: 3.25rem minmax(0, 1fr);
    column-gap: .75rem;
  }
  .sentence-anchor{left:0;top:24px}
  .chapter-rail{display:none}
  .bottom-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: 28px 0;
  }

  .bottom-nav a {
    padding: 13px;
    font-family: var(--sans);
    font-size: .76rem;
    text-decoration: none;
  }

  .bottom-nav > .bottom-contents {
    grid-column: 1 / -1;
    grid-row: 1;
    justify-self: stretch;
    width: 100%;
  }

  .bottom-nav > a:first-child {
    grid-column: 1;
    grid-row: 2;
    min-width: 0;
    justify-self: stretch;
  }

  .bottom-nav > a:last-child {
    grid-column: 2;
    grid-row: 2;
    min-width: 0;
    justify-self: stretch;
  }
}

/* MIDNIGHT READING ROOM
   Dark shelves, shaded lamps, classical type, and softly arched controls. */
:root {
  color-scheme: dark;
  --parchment: #101514;
  --cream: #19201e;
  --ink: #f1e7cf;
  --muted: #aaa18f;
  --bronze: #c49a58;
  --walnut: #d0a35d;
  --green: #54786a;
  --navy: #172724;
  --hair: rgba(196, 154, 88, 0.26);
  --shadow: 0 22px 60px rgba(0, 0, 0, 0.4);
  --serif: Baskerville, "Baskerville Old Face", "Libre Baskerville", Georgia, serif;
  --sans: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
}

body {
  background:
    radial-gradient(circle at 50% -10rem, rgba(196, 154, 88, 0.17), transparent 36rem),
    linear-gradient(90deg, rgba(255, 255, 255, 0.014) 1px, transparent 1px),
    var(--parchment);
  background-size: auto, 7rem 100%, auto;
  color: var(--ink);
  line-height: 1.7;
}

.site-header {
  min-height: 70px;
  padding: 0 32px;
  background: rgba(9, 14, 13, 0.94);
  border-bottom: 1px solid var(--bronze);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.32);
}

.brand-insignia {
  width: 52px;
  height: 52px;
}

.primary-nav {
  color: var(--muted);
  letter-spacing: 0.05em;
}

.primary-nav a:hover {
  color: var(--bronze);
}

.hero {
  padding: 100px 0 74px;
  border-bottom-color: var(--hair);
}

.eyebrow,
.reader-head .chapter-mark {
  color: var(--bronze);
  font-family: var(--sans);
  font-weight: 600;
}

h1,
h2,
h3 {
  font-weight: 400;
}

h1 {
  font-size: clamp(3rem, 7vw, 6.2rem);
  letter-spacing: -0.025em;
  text-shadow: 0 2px 24px rgba(196, 154, 88, 0.12);
}

.hero p,
.book-card .blurb {
  color: #c4bca9;
}

.quiet-line {
  color: var(--muted);
}

.book-grid {
  gap: 30px;
}

.book-card {
  min-height: 360px;
  padding: 38px;
  background:
    linear-gradient(145deg, rgba(196, 154, 88, 0.055), transparent 45%),
    var(--cream);
  border: 1px solid var(--hair);
  border-radius: 26px 26px 4px 4px;
  box-shadow: var(--shadow);
}

.book-card::before {
  top: 22px;
  bottom: 22px;
  left: 0;
  width: 3px;
  background: var(--bronze);
}

.book-card.spanish::before {
  background: var(--green);
}

.book-card:hover {
  transform: translateY(-5px);
  border-color: rgba(196, 154, 88, 0.58);
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.48);
}

.book-card h3 {
  color: var(--ink);
  font-size: 2.35rem;
}

.book-card .book-part {
  color: var(--bronze);
}

.book-card .author,
.card-foot,
.book-meta,
.breadcrumbs,
.toc-num,
.toc-note {
  color: var(--muted);
}

.card-foot .open {
  color: var(--bronze);
}

.book-hero {
  padding: 74px 0 48px;
  border-bottom-color: var(--hair);
}

.book-title-row h1 {
  color: var(--ink);
  font-size: clamp(2.8rem, 6vw, 5rem);
}

.book-intro {
  color: #c4bca9;
}

.toc h2 {
  color: var(--bronze);
  font-size: 1.8rem;
  font-style: italic;
}

.toc-list {
  border-top-color: var(--hair);
}

.toc-row {
  padding: 20px 14px;
  border-bottom-color: var(--hair);
  transition: background 0.18s, padding 0.18s;
}

.toc-row:hover {
  padding-left: 22px;
  background: rgba(196, 154, 88, 0.07);
}

.toc-row:hover .toc-title {
  color: var(--bronze);
}

.reader-shell {
  width: min(1500px, calc(100% - 11rem));
  padding-top: 46px;
}

.reader-head {
  padding: 18px 22px;
  border: 1px solid var(--hair);
  border-radius: 22px 22px 3px 3px;
  background: rgba(25, 32, 30, 0.72);
}

.reader-head h1 {
  color: var(--ink);
  font-size: 1.55rem;
  font-style: italic;
}

.icon-btn,
.contents-btn,
.link-btn,
.bottom-nav > a,
.begin {
  border: 1px solid rgba(196, 154, 88, 0.55);
  border-radius: 999px;
  background: rgba(196, 154, 88, 0.08);
  color: var(--bronze);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.04);
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
}

.icon-btn:hover,
.contents-btn:hover,
.link-btn:hover,
.bottom-nav > a:hover,
.begin:hover {
  border-color: var(--bronze);
  background: var(--bronze);
  color: #111614;
  box-shadow: 0 0 24px rgba(196, 154, 88, 0.16);
}

.reader-columns {
  margin-top: 22px;
  overflow: hidden;
  border: 1px solid var(--hair);
  border-radius: 4px 4px 24px 24px;
  background: rgba(25, 32, 30, 0.58);
}

.column-label {
  padding: 15px 28px;
  background: rgba(196, 154, 88, 0.055);
  color: var(--bronze);
}

.column-label.right {
  border-left-color: var(--hair);
}

.sentence-cell {
  min-height: 154px;
  border-top-color: var(--hair);
  font-size: 1.21rem;
}

.sentence-cell.translation {
  border-left-color: var(--hair);
  color: #c8c0ae;
}

.sentence-anchor {
  color: #7e786a;
}

.sentence-anchor:hover {
  color: var(--bronze);
}

.word:hover,
.word:focus-visible,
.word.active {
  color: #f2c879;
  border-bottom-color: var(--bronze);
  text-shadow: 0 0 14px rgba(196, 154, 88, 0.18);
}

.word-popup {
  background:
    linear-gradient(145deg, rgba(196, 154, 88, 0.07), transparent 45%),
    #17201d;
  border: 1px solid rgba(196, 154, 88, 0.55);
  border-radius: 20px 20px 5px 5px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6);
}

.popup-top,
.popup-note {
  border-color: var(--hair);
}

.popup-word {
  color: var(--ink);
}

.popup-lemma {
  color: var(--bronze);
}

.popup-close,
.popup-label {
  color: var(--muted);
}

.popup-value,
.popup-note {
  color: #d2c9b6;
}

.sentence-explanation {
  background: rgba(196, 154, 88, 0.04);
  border-top-color: var(--hair);
  color: var(--muted);
}

.popup-language {
  background: rgba(196, 154, 88, 0.07);
  border-color: rgba(196, 154, 88, 0.38);
  color: var(--bronze);
}

.chapter-rail {
  top: 70px;
  color: rgba(196, 154, 88, 0.55);
}

.chapter-rail.prev {
  border-right-color: var(--hair);
}

.chapter-rail.next {
  border-left-color: var(--hair);
}

.chapter-rail:hover {
  background: rgba(196, 154, 88, 0.08);
  color: var(--bronze);
}

.bottom-nav > a {
  background: rgba(196, 154, 88, 0.07);
}

.reader-footer-note {
  border-top-color: var(--hair);
  color: var(--muted);
}

.toast {
  background: var(--bronze);
  color: #111614;
  border-radius: 999px;
}

@media (max-width: 700px) {
  .site-header {
    padding: 0 18px;
  }

  .reader-shell {
    width: min(100% - 24px, 1180px);
  }

  .reader-head {
    border-radius: 16px 16px 3px 3px;
  }

  .reader-columns {
    border-radius: 3px 3px 18px 18px;
  }

  .sentence-cell.translation {
    color: #bdb5a3;
  }
}

/* ABOUT SENTENCE FRAMES */
.about-hero {
  padding-bottom: 38px;
}

.about-hero p {
  max-width: 820px;
}

.about-section {
  padding-top: 18px;
}

.about-example-head {
  display: block;
  margin-bottom: 30px;
}


.about-example-head p {
  margin: 0;
  color: var(--muted);
}

.about-example-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
  align-items: stretch;
}

.about-sentence-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 330px;
  padding: 34px 30px 26px;
  border: 1px solid var(--hair);
  background: transparent;
}

.about-sentence-card .language {
  position: absolute;
  top: -.7rem;
  left: 1.25rem;
  padding: 0 .55rem;
  background: var(--parchment);
  color: var(--muted);
  font-family: var(--sans);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .14em;
  line-height: 1.4;
  text-transform: uppercase;
}

.about-sentence-source {
  font-size: clamp(1.95rem, 3.4vw, 2.7rem);
  line-height: 1.5;
}

.about-sentence-translation {
  margin-top: .45rem;
  color: var(--muted);
  font-size: 1.08rem;
  font-style: italic;
  line-height: 1.45;
}

.about-sentence-citation {
  margin-top: auto;
  padding-top: .85rem;
  border-top: 1px solid var(--hair);
  color: var(--muted);
  font-family: var(--sans);
  font-size: .72rem;
}


@media (max-width: 700px) {
  .about-example-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .about-sentence-card {
    min-height: 0;
    padding: 30px 24px 24px;
  }
}

.about-sentence-translation {
  color: #c4bca9;
}

/* ABOUT UPCOMING LANGUAGE FRAMES */
.about-sentence-card.is-upcoming {
  background: rgba(0, 0, 0, 0.28);
  border-color: rgba(196, 154, 88, 0.14);
}

.about-sentence-card.is-upcoming .about-sentence-source,
.about-sentence-card.is-upcoming .about-sentence-translation,
.about-sentence-card.is-upcoming .about-sentence-citation {
  opacity: 0.58;
}

.about-sentence-card.is-upcoming .word {
  cursor: default;
  border-bottom-color: transparent;
}

.about-sentence-card.is-upcoming .word:hover,
.about-sentence-card.is-upcoming .word:focus-visible,
.about-sentence-card.is-upcoming .word.active {
  color: inherit;
  border-bottom-color: transparent;
  text-shadow: none;
}

.about-card-status {
  margin-left: .5rem;
  font-size: .58rem;
  font-weight: 500;
  letter-spacing: .08em;
  opacity: .62;
}

/* ABOUT INSTRUCTION + ETHOS */
.about-instruction {
  margin: 0;
  color: var(--muted);
  font-family: var(--sans);
  font-size: .9rem;
  font-weight: 500;
  letter-spacing: .035em;
  line-height: 1.5;
}

.about-ethos {
  max-width: 820px;
  margin-top: 0;
  margin-bottom: 36px;
  padding-top: 0;
}

.about-ethos .eyebrow {
  margin-bottom: 12px;
}

.about-ethos p {
  margin: 0;
  color: var(--muted);
  font-size: 1.02rem;
  line-height: 1.7;
}

@media (max-width: 700px) {
  .about-section {
    padding-top: 12px;
  }

  .about-ethos {
    margin-top: 0;
    margin-bottom: 28px;
    padding-top: 0;
  }
}


@media (max-width: 700px) {
  .about-hero {
    padding-bottom: 28px;
  }
}


/* SITE FOOTER + LEGAL PAGES */
.site-footer {
  padding: 0 0 28px;
  color: var(--muted);
  font-family: var(--sans);
  font-size: .72rem;
}

.site-footer-inner {
  width: min(1180px, calc(100% - 48px));
  margin: 0 auto;
  padding-top: 22px;
  border-top: 1px solid var(--hair);
}

.site-footer-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin-bottom: .7rem;
  font-size: .76rem;
}

.site-footer-nav a {
  color: var(--muted);
  text-decoration: none;
}

.site-footer-nav a:hover,
.site-footer-nav a:focus-visible {
  color: var(--bronze);
}

.site-footer p {
  max-width: 940px;
  margin: 0;
  line-height: 1.55;
}

.legal-page {
  padding: 76px 0 96px;
}

.legal-shell {
  width: min(820px, calc(100% - 48px));
}

.legal-page h1 {
  margin: .2em 0 .55em;
  font-size: clamp(2.5rem, 5vw, 4.6rem);
}

.legal-copy {
  color: var(--muted);
  font-size: 1.06rem;
  line-height: 1.75;
}

.legal-copy p {
  margin: 0 0 1.1rem;
}

.legal-copy a {
  color: var(--ink);
  text-underline-offset: .18em;
}

.legal-copy a:hover,
.legal-copy a:focus-visible {
  color: var(--bronze);
}

@media (max-width: 700px) {
  .site-footer {
    padding-bottom: 22px;
  }

  .site-footer-inner {
    width: min(100% - 32px, 1180px);
    padding-top: 18px;
  }

  .legal-page {
    padding: 52px 0 72px;
  }

  .legal-shell {
    width: min(100% - 32px, 820px);
  }
}