/* Base styles shared by every page: reset, typography, navigation,
   footer, and the simple prose layout used by stub pages. Page-specific
   styles live in their own sheets (home.css etc.). */

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* Fluid root sizing: the whole design is set in rem, so scaling the
   root mimics browser zoom. 100% at a 420px viewport, rising linearly
   to 150% at 1920px and capped at both ends, so phones keep the floor
   while tablets and landscape phones share in the scaling. Media-query
   breakpoints and hairline rules stay in px deliberately: the former so
   they track the physical viewport, the latter so gold rules stay
   crisp. */
html {
  font-size: clamp(1rem, .86rem + .533vw, 1.5rem);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
body {
  background: var(--vellum);
  color: var(--ink);
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 1.125rem;
  line-height: 1.65;
}
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--rubric); outline-offset: 3px; }

.smallcaps {
  font-variant: small-caps;
  letter-spacing: .18em;
  font-weight: 500;
}
.rubric-label {
  color: var(--rubric);
  font-size: .95rem;
}

/* ---------- Manuscript ornaments ---------- */
/* One fleur-de-lis silhouette, kept as a mask so each use tints it with
   a background colour (gold on vellum, bright gold on lapis). Echoes the
   finials on the illuminated two-ages plate. */
:root {
  --fleur-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 4 C44 11 39 22 39 34 C39 46 44 53 45 64 L55 64 C56 53 61 46 61 34 C61 22 56 11 50 4 Z M44 66.5 C37.5 62 34 54 33.5 44 C33 35.5 31 29.5 26.5 26 C21 21.5 14.5 20.5 11.5 26.5 C9 31.5 9.5 39 12.5 46.5 C14.5 52 18.5 58 23.5 56.5 C27 55 26.5 50.5 23.5 49 C26.5 52.5 29.5 57 33 61 C35.5 63.5 39.5 65 44 66.5 Z M56 66.5 C60.5 65 64.5 63.5 67 61 C70.5 57 73.5 52.5 76.5 49 C73.5 50.5 73 55 76.5 56.5 C81.5 58 85.5 52 87.5 46.5 C90.5 39 91 31.5 88.5 26.5 C85.5 20.5 79 21.5 73.5 26 C69 29.5 67 35.5 66.5 44 C66 54 62.5 62 56 66.5 Z M30 60 L30 68 L70 68 L70 60 Z M40 63 C36 71 33 80 31 89 C36 86 40 82 42 76 C44 83 46 89 50 96 C54 89 56 83 58 76 C60 82 64 86 69 89 C67 80 64 71 60 63 Z'/%3E%3C/svg%3E");
}
.fleuron {
  display: inline-block;
  width: .9em;
  height: .9em;
  background: currentColor;
  -webkit-mask: var(--fleur-mask) center / contain no-repeat;
  mask: var(--fleur-mask) center / contain no-repeat;
}
/* Rubric labels are bracketed by small gold fleurons, as the rubricated
   centre of the two-ages plate is. */
.rubric-label::before,
.rubric-label::after {
  content: "";
  display: inline-block;
  width: .85em;
  height: .85em;
  background: var(--gold);
  -webkit-mask: var(--fleur-mask) center / contain no-repeat;
  mask: var(--fleur-mask) center / contain no-repeat;
  vertical-align: -.1em;
}
.rubric-label::before { margin-right: .65em; }
.rubric-label::after { margin-left: .5em; }
/* A short gold rule broken by a central fleuron, for sitting beneath a
   page or section heading. Markup: <div class="fleuron-rule"
   aria-hidden="true"><span class="fleuron"></span></div> */
.fleuron-rule {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .875rem;
  max-width: 13.75rem;
  margin: 1.375rem auto 0;
  color: var(--gold);
}
.fleuron-rule .fleuron { font-size: 1.05rem; }
.fleuron-rule::before,
.fleuron-rule::after {
  content: "";
  flex: 1;
  height: 1px;
}
.fleuron-rule::before { background: linear-gradient(to left, currentColor, transparent); }
.fleuron-rule::after { background: linear-gradient(to right, currentColor, transparent); }

/* The two-ages plate: the illuminated diagram artwork framed like a
   plate in a manuscript, double gold rule as on the monogram. Shared by
   the home page and the About page. */
.two-ages-plate {
  max-width: 40rem;
  margin: 0 auto;
  border: 1px solid var(--gold);
  padding: .5rem;
  background: var(--vellum);
  position: relative;
}
.two-ages-plate::after {
  content: "";
  position: absolute;
  inset: .25rem;
  border: 1px solid rgba(168, 129, 47, .35);
  pointer-events: none;
}
.two-ages-plate img {
  display: block;
  width: 100%;
  height: auto;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--lapis-deep);
  color: var(--vellum);
  padding: .625rem 1.125rem;
}
.skip-link:focus { left: 0; }

/* ---------- Navigation: links split around a central monogram ---------- */
header.site-header {
  border-bottom: 1px solid var(--line);
  background: var(--vellum);
  position: relative;
  z-index: 10;
}
.nav {
  max-width: 72.5rem;
  margin: 0 auto;
  padding: 0 1.5rem;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  min-height: 6rem;
}
.nav ul {
  list-style: none;
  display: flex;
  gap: clamp(.875rem, 2.6vw, 2.125rem);
  font-size: .95rem;
}
.nav ul.left { justify-content: flex-end; }
.nav ul.right { justify-content: flex-start; }
.nav ul a {
  font-variant: small-caps;
  letter-spacing: .16em;
  padding: .375rem 2px;
  border-bottom: 1px solid transparent;
  transition: border-color .25s, color .25s;
}
.nav ul a:hover { border-bottom-color: var(--gold); color: var(--lapis); }
.nav ul a[aria-current="page"] { border-bottom-color: var(--rubric); }
.monogram {
  width: 4rem; height: 4rem;
  border: 1.5px solid var(--gold);
  display: block;
  position: relative;
  background: var(--vellum);
}
.monogram img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.monogram::after {
  content: "";
  position: absolute; inset: .25rem;
  border: 1px solid rgba(168, 129, 47, .45);
}
@media (max-width: 820px) {
  .nav { grid-template-columns: 1fr; justify-items: center; padding: 1rem 1.5rem; gap: .625rem; }
  .monogram { order: -1; }
  .nav ul { flex-wrap: wrap; justify-content: center !important; row-gap: .25rem; }
}

/* ---------- Plain prose pages (About, Contact, stubs) ---------- */
.page {
  max-width: 47.5rem;
  margin: 0 auto;
  padding: 4.5rem 1.5rem 6rem;
}
.page .rubric-label { margin-bottom: .875rem; }
.page h1 {
  font-family: 'Cardo', serif;
  font-weight: 400;
  font-size: clamp(1.9rem, 3.6vw, 2.6rem);
  margin-bottom: 1.75rem;
}
.page h2 {
  font-family: 'Cardo', serif;
  font-weight: 400;
  font-size: 1.55rem;
  margin: 2.5rem 0 .75rem;
}
.page p { margin-bottom: 1.125rem; color: var(--ink-soft); }
.page a { color: var(--lapis); border-bottom: 1px solid var(--gold); }
/* Rubricated drop cap on the opening paragraph, as a manuscript incipit.
   Scoped to article.page (content pages); the 404 uses section.page and
   its two short lines would sit awkwardly beside a three-line cap.
   Paragraphs that are wholly italic are skipped: that is the convention
   for one-line placeholder notes, which are too short to carry a cap. */
article.page > h1 + p:not(:has(> em:only-child))::first-letter {
  font-family: 'Cardo', serif;
  font-size: 3.4em;
  line-height: .82;
  color: var(--rubric);
  float: left;
  padding: .06em .14em 0 0;
}

/* ---------- Footer ---------- */
footer.site-footer {
  background: var(--lapis-deep);
  color: rgba(245, 239, 226, .85);
  padding: 3.5rem 1.5rem 2.5rem;
}
.foot-inner {
  max-width: 72.5rem;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: space-between;
  align-items: flex-start;
}
.site-footer .wordmark {
  font-family: 'Cardo', serif;
  font-size: 1.5rem;
  color: var(--vellum);
}
.site-footer .wordmark span { color: var(--gold-bright); }
.site-footer nav ul { list-style: none; display: flex; flex-wrap: wrap; gap: 1.375rem; font-size: 1rem; }
.site-footer nav a { font-variant: small-caps; letter-spacing: .16em; }
.site-footer nav a:hover { color: var(--gold-bright); }
.site-footer .verse {
  width: 100%;
  margin-top: 2.25rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(245, 239, 226, .18);
  font-style: italic;
  font-size: 1.1rem;
  color: rgba(245, 239, 226, .8);
  text-align: center;
}
/* A bright gold fleuron between the footer rule and the verse. */
.site-footer .verse::before {
  content: "";
  display: block;
  width: 1rem;
  height: 1rem;
  margin: 0 auto .875rem;
  background: var(--gold-bright);
  -webkit-mask: var(--fleur-mask) center / contain no-repeat;
  mask: var(--fleur-mask) center / contain no-repeat;
}