:root {
  --ink: #11202c;
  --ink-soft: #3f4a52;
  --navy: #061b2b;
  --navy-2: #0a2a3f;
  --navy-3: #12374d;
  --gold: #c89543;
  --gold-light: #e9c37e;
  --paper: #f3e5c7;
  --paper-light: #fbf5e8;
  --paper-dark: #dfc79d;
  --burgundy: #4b1f22;
  --white: #fffdf7;
  --shadow: 0 18px 45px rgb(2 14 23 / 24%);
  --radius: 18px;
  --reader-size: 1.08rem;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 86px;
}

body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 10% 0%, rgb(226 195 139 / 15%), transparent 28rem),
    var(--paper-light);
  font-family: Georgia, "Times New Roman", serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

body.dialog-open {
  overflow: hidden;
}

button,
input {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

a {
  color: inherit;
}

button {
  cursor: pointer;
}

img {
  display: block;
  max-width: 100%;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  z-index: 1000;
  top: 0.5rem;
  left: 0.5rem;
  padding: 0.7rem 1rem;
  color: var(--navy);
  background: var(--white);
  border: 2px solid var(--gold);
  border-radius: 8px;
  transform: translateY(-150%);
}

.skip-link:focus {
  transform: translateY(0);
}

:focus-visible {
  outline: 3px solid #f3b84b;
  outline-offset: 4px;
}

.site-header {
  position: sticky;
  z-index: 100;
  top: 0;
  display: grid;
  grid-template-columns: minmax(14rem, 1fr) auto auto;
  align-items: center;
  min-height: 78px;
  padding: 0.65rem clamp(1rem, 3vw, 3rem);
  color: var(--gold-light);
  background: rgb(4 24 39 / 96%);
  border-bottom: 1px solid rgb(222 178 98 / 44%);
  backdrop-filter: blur(14px);
}

.brand {
  display: inline-flex;
  gap: 0.8rem;
  align-items: center;
  width: fit-content;
  color: var(--gold-light);
  font-size: clamp(1rem, 2vw, 1.3rem);
  text-decoration: none;
}

.brand-mark {
  display: inline-grid;
  place-items: center;
  width: 2.6rem;
  aspect-ratio: 1;
  color: var(--gold-light);
  border: 1px solid var(--gold);
  border-radius: 50%;
  font-size: 0.95rem;
  letter-spacing: 0.05em;
  box-shadow: inset 0 0 0 3px rgb(200 149 67 / 12%);
}

.main-nav {
  display: flex;
  gap: clamp(0.6rem, 1.7vw, 1.45rem);
  align-items: center;
}

.main-nav a,
.nav-button {
  min-height: 44px;
  padding: 0.65rem 0.1rem;
  color: #f3d99f;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  text-decoration: none;
}

.main-nav a:hover,
.main-nav a[aria-current="true"],
.nav-button:hover {
  color: #fff2cf;
  border-color: var(--gold);
}

.nav-button span {
  display: inline-grid;
  place-items: center;
  min-width: 1.45rem;
  min-height: 1.45rem;
  margin-left: 0.2rem;
  color: var(--navy);
  background: var(--gold-light);
  border-radius: 999px;
  font-size: 0.78rem;
}

.install-button,
.menu-toggle {
  min-height: 44px;
  color: var(--gold-light);
  background: transparent;
  border: 1px solid var(--gold);
  border-radius: 8px;
}

.install-button {
  margin-left: 1.4rem;
  padding: 0.55rem 1rem;
}

.menu-toggle {
  display: none;
  width: 46px;
  font-size: 1.35rem;
}

.hero {
  position: relative;
  display: grid;
  align-items: center;
  min-height: min(76vh, 770px);
  color: var(--navy);
  background-image:
    linear-gradient(90deg, rgb(245 225 181 / 96%) 0%, rgb(245 225 181 / 72%) 35%, transparent 62%),
    linear-gradient(0deg, rgb(4 24 39 / 48%), transparent 40%),
    url("assets/foscolo-biblioteca-hero.webp");
  background-position: center;
  background-size: cover;
  border-bottom: 5px solid var(--gold);
}

.hero-overlay {
  width: min(94%, 76rem);
  margin: 0 auto;
  padding: clamp(4rem, 11vw, 8rem) 0;
}

.eyebrow {
  margin: 0 0 0.45rem;
  color: var(--gold);
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.hero h1 {
  max-width: 10ch;
  margin: 0;
  font-size: clamp(3rem, 7.4vw, 6.8rem);
  font-weight: 500;
  letter-spacing: -0.045em;
  line-height: 0.93;
  text-shadow: 0 1px rgb(255 255 255 / 40%);
}

.hero-copy {
  max-width: 34rem;
  margin: 1.5rem 0 2rem;
  font-size: clamp(1.08rem, 2vw, 1.4rem);
  line-height: 1.5;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
}

.primary-button,
.secondary-button {
  display: inline-flex;
  gap: 0.9rem;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0.76rem 1.15rem;
  border: 1px solid var(--gold);
  border-radius: 8px;
  font-weight: 700;
  text-decoration: none;
}

.primary-button {
  color: var(--paper-light);
  background: var(--navy);
  box-shadow: 0 8px 20px rgb(5 29 46 / 20%);
}

.primary-button:hover {
  color: white;
  background: var(--navy-3);
}

.secondary-button {
  color: var(--navy);
  background: rgb(255 249 235 / 82%);
}

.secondary-button:hover {
  background: white;
}

.hero-credit {
  position: absolute;
  right: 1rem;
  bottom: 0.4rem;
  margin: 0;
  padding: 0.2rem 0.45rem;
  color: rgb(255 255 255 / 78%);
  background: rgb(2 17 28 / 55%);
  border-radius: 4px;
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 0.68rem;
}

.entry-section,
.library-section,
.themes-section,
.timeline-section,
.connections-section,
.documents-section,
.sources-section {
  padding: clamp(4rem, 7vw, 7rem) clamp(1rem, 4vw, 4rem);
}

.entry-section {
  color: var(--paper-light);
  background:
    linear-gradient(rgb(4 24 39 / 96%), rgb(4 24 39 / 96%)),
    radial-gradient(circle, var(--gold) 1px, transparent 1px);
  background-size: auto, 20px 20px;
}

.section-heading {
  display: flex;
  gap: 2rem;
  align-items: end;
  justify-content: space-between;
  width: min(100%, 76rem);
  margin: 0 auto 2rem;
}

.section-heading.compact {
  display: block;
  margin-bottom: 2.4rem;
  text-align: center;
}

.section-heading.centered {
  display: block;
  max-width: 48rem;
  text-align: center;
}

.section-heading h2 {
  margin: 0;
  font-size: clamp(2.1rem, 5vw, 4.2rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1;
}

.section-heading > p,
.section-heading div > p:last-child {
  max-width: 40rem;
  margin: 0.75rem 0 0;
}

.entry-section .section-heading h2,
.entry-section .section-heading p:last-child {
  color: var(--paper-light);
}

.entry-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.75rem;
  width: min(100%, 76rem);
  margin: 0 auto;
}

.entry-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 18rem;
  padding: 1.4rem 1rem;
  overflow: hidden;
  color: var(--navy);
  background:
    linear-gradient(rgb(248 235 207 / 94%), rgb(239 217 174 / 96%)),
    repeating-linear-gradient(45deg, transparent 0 4px, rgb(90 60 24 / 3%) 4px 5px);
  border: 1px solid var(--gold);
  border-radius: 12px;
  box-shadow: 0 10px 18px rgb(0 0 0 / 18%);
  text-align: center;
  text-decoration: none;
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.entry-card:hover {
  z-index: 2;
  transform: translateY(-8px);
  box-shadow: 0 20px 30px rgb(0 0 0 / 28%);
}

.entry-icon {
  display: grid;
  place-items: center;
  width: 5.5rem;
  aspect-ratio: 1;
  margin: 0 auto 1.25rem;
  color: var(--burgundy);
  border: 1px solid rgb(75 31 34 / 35%);
  border-radius: 50%;
  font-size: 2.45rem;
}

.entry-title {
  font-size: clamp(1.3rem, 2vw, 1.75rem);
  line-height: 1.05;
}

.entry-copy {
  margin-top: 0.8rem;
  color: #4f493f;
  font-size: 0.88rem;
  line-height: 1.4;
}

.entry-arrow {
  margin-top: auto;
  font-size: 1.8rem;
}

.library-section {
  background:
    linear-gradient(rgb(249 242 226 / 94%), rgb(249 242 226 / 94%)),
    url("assets/foscolo-biblioteca-hero.webp") center / cover fixed;
}

.search-box {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  min-width: min(100%, 20rem);
  min-height: 48px;
  padding: 0.55rem 0.8rem;
  background: white;
  border: 1px solid var(--paper-dark);
  border-radius: 999px;
  box-shadow: 0 4px 15px rgb(39 28 14 / 6%);
}

.search-box input {
  width: 100%;
  color: var(--ink);
  background: transparent;
  border: 0;
  outline: 0;
}

.filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  width: min(100%, 76rem);
  margin: 0 auto 1rem;
}

.filter-chip {
  min-height: 42px;
  padding: 0.5rem 0.9rem;
  color: var(--navy);
  background: var(--paper-light);
  border: 1px solid var(--gold);
  border-radius: 999px;
}

.filter-chip[aria-pressed="true"] {
  color: white;
  background: var(--navy);
}

.results-status {
  width: min(100%, 76rem);
  min-height: 1.5rem;
  margin: 0 auto 0.8rem;
  color: var(--ink-soft);
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 0.88rem;
}

.works-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.1rem;
  width: min(100%, 76rem);
  margin: 0 auto;
}

.work-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 20rem;
  padding: 1.5rem;
  background: rgb(255 253 247 / 96%);
  border: 1px solid #d7bd8f;
  border-radius: var(--radius);
  box-shadow: 0 10px 28px rgb(63 41 10 / 8%);
}

.work-card::before {
  position: absolute;
  top: 0;
  right: 1.5rem;
  width: 2.1rem;
  height: 3.4rem;
  content: "";
  background: var(--burgundy);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 78%, 0 100%);
  opacity: 0.86;
}

.work-card[data-favorite="true"]::before {
  background: var(--gold);
}

.work-type {
  margin: 0 0 0.7rem;
  color: var(--gold);
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.work-card h3 {
  max-width: 85%;
  margin: 0;
  font-size: clamp(1.55rem, 2.5vw, 2.15rem);
  font-weight: 500;
  line-height: 1.05;
}

.work-date {
  margin: 0.35rem 0 0;
  color: var(--ink-soft);
  font-style: italic;
}

.work-description {
  margin: 1rem 0;
  color: var(--ink-soft);
}

.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: auto;
}

.tag {
  padding: 0.22rem 0.55rem;
  color: #604116;
  background: #f4e2bd;
  border-radius: 999px;
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 0.72rem;
}

.work-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 48px;
  margin-top: 1.2rem;
  padding: 0.65rem 0;
  color: var(--navy);
  background: transparent;
  border: 0;
  border-top: 1px solid #dbc69f;
  font-weight: 700;
  text-align: left;
}

.themes-section {
  color: var(--paper-light);
  background:
    radial-gradient(circle at 50% 30%, rgb(39 82 106 / 62%), transparent 30rem),
    var(--navy);
}

.themes-section .section-heading h2,
.themes-section .section-heading p:last-child {
  color: var(--paper-light);
}

.themes-orbit {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 1rem;
  width: min(100%, 68rem);
  margin: 2.6rem auto;
}

.theme-button {
  display: grid;
  gap: 0.7rem;
  justify-items: center;
  padding: 0.3rem;
  color: var(--gold-light);
  background: none;
  border: 0;
}

.theme-symbol {
  display: grid;
  place-items: center;
  width: clamp(4.5rem, 9vw, 7rem);
  aspect-ratio: 1;
  color: var(--navy);
  background:
    radial-gradient(circle at 35% 25%, #fff8e5, #ddbd7a);
  border: 2px solid var(--gold);
  border-radius: 50%;
  box-shadow: inset 0 0 0 6px rgb(6 27 43 / 12%), 0 9px 24px rgb(0 0 0 / 25%);
  font-size: clamp(1.7rem, 4vw, 2.8rem);
  transition: transform 160ms ease;
}

.theme-button:hover .theme-symbol,
.theme-button[aria-pressed="true"] .theme-symbol {
  transform: translateY(-5px) scale(1.04);
  box-shadow: inset 0 0 0 6px rgb(6 27 43 / 12%), 0 0 0 5px rgb(200 149 67 / 22%);
}

.theme-name {
  font-size: 1.05rem;
}

.theme-result {
  display: grid;
  grid-template-columns: minmax(14rem, 0.8fr) 2fr;
  gap: 2rem;
  width: min(100%, 68rem);
  margin: 0 auto;
  padding: 1.6rem;
  color: var(--navy);
  background: var(--paper);
  border: 1px solid var(--gold);
  border-radius: var(--radius);
}

.theme-result h3 {
  margin: 0;
  font-size: 2rem;
}

.theme-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
}

.theme-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
  padding: 0.65rem 0.8rem;
  background: rgb(255 255 255 / 50%);
  border: 1px solid rgb(129 90 27 / 30%);
  border-radius: 8px;
  text-decoration: none;
}

.timeline-section {
  background: #efe0bd;
}

.timeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, minmax(9rem, 1fr));
  gap: 0;
  width: min(100%, 76rem);
  margin: 4rem auto 0;
  padding: 0;
  list-style: none;
}

.timeline::before {
  position: absolute;
  top: 2.55rem;
  right: 5%;
  left: 5%;
  height: 2px;
  content: "";
  background: var(--gold);
}

.timeline-item {
  position: relative;
  display: grid;
  grid-template-rows: 5.2rem auto;
  padding: 0 0.6rem;
  text-align: center;
}

.timeline-year {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 5.2rem;
  aspect-ratio: 1;
  margin: 0 auto;
  color: var(--paper-light);
  background: var(--navy);
  border: 3px solid var(--gold);
  border-radius: 50%;
  font-weight: 700;
}

.timeline-card {
  min-height: 11rem;
  margin-top: 1.15rem;
  padding: 1rem;
  background: rgb(255 250 238 / 80%);
  border: 1px solid #d0b277;
  border-radius: 10px;
}

.timeline-card h3 {
  margin: 0;
  font-size: 1.08rem;
  line-height: 1.2;
}

.timeline-card p {
  margin: 0.6rem 0 0;
  color: var(--ink-soft);
  font-size: 0.84rem;
  line-height: 1.45;
}

.timeline-card button {
  min-height: 42px;
  margin-top: 0.75rem;
  padding: 0.35rem 0.6rem;
  color: var(--navy);
  background: transparent;
  border: 1px solid var(--gold);
  border-radius: 6px;
}

.connections-section {
  color: var(--paper-light);
  background: #0c2638;
}

.connections-section .section-heading h2,
.connections-section .section-heading p {
  color: var(--paper-light);
}

.lesson-grid,
.document-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  width: min(100%, 76rem);
  margin: 0 auto;
}

.lesson-card,
.document-card {
  display: flex;
  flex-direction: column;
  min-height: 13rem;
  padding: 1.3rem;
  border-radius: 12px;
}

.lesson-card {
  color: var(--paper-light);
  background: linear-gradient(135deg, #15384c, #0a1e2d);
  border: 1px solid rgb(200 149 67 / 68%);
}

.lesson-card h3,
.document-card h3 {
  margin: 0;
  font-size: 1.35rem;
  line-height: 1.2;
}

.lesson-card p,
.document-card p {
  margin: 0.7rem 0;
  line-height: 1.45;
}

.lesson-card a,
.document-card a {
  width: fit-content;
  min-height: 44px;
  margin-top: auto;
  padding: 0.55rem 0.8rem;
  border: 1px solid var(--gold);
  border-radius: 7px;
  text-decoration: none;
}

.documents-section {
  background: #f8f0dd;
}

.document-card {
  color: var(--navy);
  background: var(--paper);
  border: 1px solid #cfac69;
  box-shadow: 0 12px 28px rgb(57 39 10 / 8%);
}

.document-label {
  margin: 0 0 0.5rem;
  color: var(--burgundy);
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.sources-section {
  color: var(--paper-light);
  background: var(--burgundy);
}

.sources-section .section-heading h2,
.sources-section .section-heading p {
  color: var(--paper-light);
}

.source-principles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  width: min(100%, 76rem);
  margin: 0 auto;
}

.source-principles article {
  position: relative;
  min-height: 13rem;
  padding: 1.4rem 1.4rem 1.4rem 5.4rem;
  background: rgb(33 11 13 / 35%);
  border: 1px solid rgb(233 195 126 / 50%);
  border-radius: 12px;
}

.source-principles span {
  position: absolute;
  top: 1.4rem;
  left: 1.4rem;
  display: grid;
  place-items: center;
  width: 3rem;
  aspect-ratio: 1;
  color: var(--gold-light);
  border: 1px solid var(--gold);
  border-radius: 50%;
}

.source-principles h3 {
  margin: 0;
  color: var(--gold-light);
}

.site-footer {
  padding: 3.5rem clamp(1rem, 4vw, 4rem) 1.6rem;
  color: #eed199;
  background:
    linear-gradient(rgb(4 24 39 / 90%), rgb(4 24 39 / 96%)),
    url("assets/foscolo-biblioteca-hero.webp") center 62% / cover;
}

.site-footer blockquote {
  margin: 0 auto 3rem;
  color: var(--gold-light);
  font-size: clamp(1.2rem, 2.3vw, 1.8rem);
  text-align: center;
}

.site-footer cite {
  display: block;
  margin-top: 0.7rem;
  font-size: 0.85rem;
}

.footer-row {
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  width: min(100%, 76rem);
  margin: 0 auto;
  padding-top: 1.2rem;
  border-top: 1px solid rgb(200 149 67 / 40%);
}

.footer-row p {
  margin: 0;
  font-size: 0.85rem;
}

.reader-dialog,
.notes-dialog {
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0;
  background: var(--paper-light);
  border: 0;
}

.reader-dialog::backdrop,
.notes-dialog::backdrop {
  background: rgb(2 15 24 / 78%);
}

.reader-shell {
  min-height: 100%;
}

.reader-bar {
  position: sticky;
  z-index: 3;
  top: 0;
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  min-height: 64px;
  padding: 0.55rem clamp(0.8rem, 3vw, 2rem);
  color: var(--gold-light);
  background: var(--navy);
  border-bottom: 1px solid var(--gold);
}

.reader-bar button {
  min-height: 44px;
  padding: 0.55rem 0.75rem;
  color: inherit;
  background: transparent;
  border: 1px solid rgb(200 149 67 / 60%);
  border-radius: 7px;
}

.reader-tools {
  display: flex;
  gap: 0.45rem;
}

.reader-layout {
  display: grid;
  grid-template-columns: 15rem minmax(20rem, 48rem) 17rem;
  gap: clamp(1rem, 3vw, 3rem);
  justify-content: center;
  padding: 2rem clamp(1rem, 3vw, 3rem) 6rem;
}

.reader-index,
.reader-context {
  position: sticky;
  top: 88px;
  align-self: start;
  max-height: calc(100vh - 110px);
  overflow: auto;
}

.reader-index nav {
  display: grid;
  gap: 0.45rem;
}

.reader-index a {
  padding: 0.55rem 0.7rem;
  color: var(--ink-soft);
  border-left: 2px solid var(--paper-dark);
  text-decoration: none;
}

.reader-index a:hover,
.reader-index a[aria-current="true"] {
  color: var(--navy);
  background: #efe1c3;
  border-color: var(--gold);
}

.reader-content {
  min-width: 0;
}

.reader-kind {
  margin: 0;
  color: var(--gold);
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.reader-content > h2 {
  margin: 0.35rem 0;
  font-size: clamp(2.6rem, 6vw, 5rem);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 0.98;
}

.reader-meta {
  color: var(--ink-soft);
  font-style: italic;
}

.reader-description {
  padding: 1rem 1.15rem;
  background: #f0e1c1;
  border-left: 4px solid var(--gold);
}

.passage {
  scroll-margin-top: 90px;
  margin: 3.5rem 0;
}

.passage-header {
  display: flex;
  gap: 1rem;
  align-items: end;
  justify-content: space-between;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--paper-dark);
}

.passage-header h3 {
  margin: 0;
  font-size: clamp(1.45rem, 3vw, 2.1rem);
  font-weight: 500;
}

.passage-label {
  margin: 0 0 0.25rem;
  color: var(--gold);
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.passage-copy {
  min-height: 44px;
  padding: 0.45rem 0.6rem;
  color: var(--navy);
  background: transparent;
  border: 1px solid var(--paper-dark);
  border-radius: 7px;
  white-space: nowrap;
}

.original-text {
  margin: 1.3rem 0;
  font-size: var(--reader-size);
  line-height: 1.82;
}

.original-text.prose p {
  margin: 0 0 1.25em;
}

.verse-line {
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  gap: 0.8rem;
}

.line-number {
  color: #8a704b;
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 0.68em;
  line-height: 2.7;
  text-align: right;
  user-select: none;
}

.passage.is-target {
  margin-inline: -1rem;
  padding: 1rem;
  background: #fff4d5;
  border: 1px solid var(--gold);
  border-radius: 12px;
  animation: target-in 700ms ease both;
}

@keyframes target-in {
  from { opacity: 0.5; transform: translateY(12px); }
}

.passage-note {
  padding: 0.8rem 1rem;
  color: #4e3d28;
  background: #f1e4c9;
  border-radius: 8px;
  font-size: 0.92rem;
}

.note-editor {
  margin-top: 1rem;
}

.note-editor summary {
  cursor: pointer;
  color: var(--burgundy);
  font-weight: 700;
}

.note-editor textarea {
  width: 100%;
  min-height: 8rem;
  margin-top: 0.7rem;
  padding: 0.8rem;
  color: var(--ink);
  background: white;
  border: 1px solid var(--paper-dark);
  border-radius: 8px;
  resize: vertical;
}

.note-save {
  min-height: 44px;
  margin-top: 0.5rem;
  padding: 0.55rem 0.8rem;
  color: white;
  background: var(--navy);
  border: 0;
  border-radius: 7px;
}

.reader-context section {
  margin-bottom: 1rem;
  padding: 1rem;
  background: #efe1c3;
  border: 1px solid #ddc59c;
  border-radius: 10px;
}

.reader-context h3 {
  margin: 0 0 0.5rem;
  font-size: 1rem;
}

.reader-context p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.86rem;
}

.reader-context a {
  display: inline-flex;
  min-height: 42px;
  margin-top: 0.7rem;
  color: var(--burgundy);
  font-size: 0.86rem;
}

.reader-lessons {
  display: grid;
  gap: 0.45rem;
}

.reader-lessons a {
  margin: 0;
}

.notes-dialog {
  inset: 4vh 4vw auto;
  width: min(92vw, 50rem);
  height: min(92vh, 52rem);
  margin: auto;
  border: 1px solid var(--gold);
  border-radius: 14px;
}

.notes-shell {
  padding: 1.5rem;
}

.notes-shell > header {
  display: flex;
  gap: 1rem;
  align-items: start;
  justify-content: space-between;
}

.notes-shell h2 {
  margin: 0;
  font-size: 2.5rem;
}

.notes-shell header button {
  min-height: 44px;
  padding: 0.5rem 0.75rem;
  background: transparent;
  border: 1px solid var(--gold);
  border-radius: 7px;
}

.saved-note {
  margin: 1rem 0;
  padding: 1rem;
  background: #f0e1c1;
  border-left: 4px solid var(--gold);
}

.saved-note h3 {
  margin: 0;
  font-size: 1rem;
}

.saved-note p {
  white-space: pre-wrap;
}

.empty-state {
  padding: 2rem;
  color: var(--ink-soft);
  border: 1px dashed var(--paper-dark);
  border-radius: 10px;
  text-align: center;
}

.offline-status {
  position: fixed;
  z-index: 150;
  right: 1rem;
  bottom: calc(1rem + env(safe-area-inset-bottom));
  padding: 0.7rem 1rem;
  color: white;
  background: var(--burgundy);
  border: 1px solid var(--gold);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.noscript {
  position: fixed;
  z-index: 999;
  right: 1rem;
  bottom: 1rem;
  padding: 1rem;
  color: white;
  background: #8a1f24;
}

@media (max-width: 1120px) {
  .site-header {
    grid-template-columns: 1fr auto;
  }

  .install-button {
    display: none;
  }

  .main-nav {
    gap: 0.8rem;
  }

  .entry-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .entry-card {
    min-height: 15rem;
  }

  .works-grid,
  .lesson-grid,
  .document-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .themes-orbit {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .timeline {
    grid-template-columns: repeat(3, minmax(9rem, 1fr));
    gap: 2rem 0;
  }

  .timeline::before {
    display: none;
  }

  .reader-layout {
    grid-template-columns: 13rem minmax(20rem, 1fr);
  }

  .reader-context {
    position: static;
    grid-column: 2;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.7rem;
    max-height: none;
  }
}

@media (max-width: 820px) {
  .site-header {
    min-height: 68px;
  }

  .brand > span:last-child {
    font-size: 1rem;
  }

  .menu-toggle {
    display: block;
  }

  .main-nav {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    display: none;
    gap: 0;
    align-items: stretch;
    padding: 0.6rem 1rem 1rem;
    background: var(--navy);
    border-bottom: 1px solid var(--gold);
    box-shadow: var(--shadow);
  }

  .main-nav.is-open {
    display: grid;
  }

  .main-nav a,
  .nav-button {
    padding: 0.75rem;
    text-align: left;
  }

  .hero {
    min-height: 70svh;
    background-image:
      linear-gradient(90deg, rgb(245 225 181 / 94%) 0%, rgb(245 225 181 / 70%) 58%, rgb(4 24 39 / 26%)),
      url("assets/foscolo-biblioteca-hero.webp");
    background-position: 61% center;
  }

  .hero-overlay {
    align-self: end;
  }

  .hero h1 {
    font-size: clamp(3rem, 13vw, 5.2rem);
  }

  .section-heading {
    display: block;
  }

  .section-heading > p {
    margin-top: 1rem;
  }

  .search-box {
    margin-top: 1.2rem;
  }

  .entry-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .entry-card {
    min-height: 14rem;
  }

  .themes-orbit {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .theme-result {
    grid-template-columns: 1fr;
  }

  .timeline {
    grid-template-columns: repeat(2, minmax(9rem, 1fr));
  }

  .source-principles {
    grid-template-columns: 1fr;
  }

  .reader-layout {
    display: block;
    padding: 1.2rem 1rem 5rem;
  }

  .reader-index {
    position: static;
    max-height: none;
    margin-bottom: 2rem;
    padding: 0.8rem;
    background: #efe1c3;
    border-radius: 9px;
  }

  .reader-index nav {
    display: flex;
    gap: 0.4rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }

  .reader-index a {
    flex: 0 0 auto;
    border: 1px solid var(--paper-dark);
    border-radius: 999px;
    scroll-snap-align: start;
  }

  .reader-context {
    display: grid;
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .brand-mark {
    width: 2.35rem;
  }

  .hero {
    min-height: 74svh;
  }

  .hero-credit {
    display: none;
  }

  .entry-grid,
  .works-grid,
  .lesson-grid,
  .document-grid,
  .theme-links {
    grid-template-columns: 1fr;
  }

  .entry-card {
    display: grid;
    grid-template-columns: 4rem 1fr auto;
    grid-template-rows: auto auto;
    gap: 0 0.8rem;
    align-items: center;
    min-height: 0;
    text-align: left;
  }

  .entry-icon {
    grid-row: 1 / 3;
    width: 3.8rem;
    margin: 0;
    font-size: 1.7rem;
  }

  .entry-copy {
    margin: 0.2rem 0 0;
  }

  .entry-arrow {
    grid-column: 3;
    grid-row: 1 / 3;
    margin: 0;
  }

  .themes-orbit {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .timeline {
    grid-template-columns: 1fr;
  }

  .timeline-item {
    grid-template-columns: 5rem 1fr;
    grid-template-rows: auto;
    align-items: start;
    text-align: left;
  }

  .timeline-card {
    min-height: 0;
    margin: 0;
  }

  .reader-tools button:first-child,
  .reader-tools button:nth-child(2) {
    display: none;
  }

  .reader-content > h2 {
    font-size: 2.75rem;
  }

  .verse-line {
    grid-template-columns: 1.6rem 1fr;
    gap: 0.5rem;
  }

  .passage-header {
    display: block;
  }

  .passage-copy {
    margin-top: 0.6rem;
  }

  .footer-row {
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media (prefers-contrast: more) {
  :root {
    --gold: #9b6500;
    --ink-soft: #20272c;
  }

  .tag {
    border: 1px solid #604116;
  }
}