@property --bg {
  syntax: "<color>";
  inherits: true;
  initial-value: #ECEBE6;
}
@property --ink {
  syntax: "<color>";
  inherits: true;
  initial-value: #1D1E20;
}
@property --muted {
  syntax: "<color>";
  inherits: true;
  initial-value: #64635E;
}
@property --accent {
  syntax: "<color>";
  inherits: true;
  initial-value: #B5361E;
}

@font-face {
  font-family: "Castoro Titling";
  src: url("/assets/fonts/castoro-titling-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Castoro";
  src: url("/assets/fonts/castoro-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Castoro";
  src: url("/assets/fonts/castoro-400-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-fall: cubic-bezier(0.55, 0.05, 0.85, 0.3);
  --ease-merge: cubic-bezier(0.7, 0, 0.2, 1);
  --ease-light: cubic-bezier(0.4, 0, 0.2, 1);

  --phrase-size: clamp(1.5rem, 7.4vw, 7rem);
  --word-size: clamp(3.25rem, 13.5vw, 8.5rem);

  --bg: #ECEBE6;
  --ink: #1D1E20;
  --muted: #64635E;
  --accent: #B5361E;
  color-scheme: light;

  transition:
    --bg var(--light-dur, 2.4s) var(--ease-light),
    --ink var(--light-dur, 2.4s) var(--ease-light),
    --muted var(--light-dur, 2.4s) var(--ease-light),
    --accent var(--light-dur, 2.4s) var(--ease-light);
}

html[data-phase="aurora"] {
  --bg: #E1E3E6;
  --ink: #1D1F23;
  --muted: #5D6067;
  --accent: #B5361E;
  color-scheme: light;
}
html[data-phase="dies"] {
  --bg: #ECEBE6;
  --ink: #1D1E20;
  --muted: #64635E;
  --accent: #B5361E;
  color-scheme: light;
}
html[data-phase="vesper"] {
  --bg: #DAD4CC;
  --ink: #1F1C1A;
  --muted: #5F5952;
  --accent: #A93218;
  color-scheme: light;
}
html[data-phase="nox"] {
  --bg: #111316;
  --ink: #E6E0D4;
  --muted: #8E897F;
  --accent: #E0563B;
  color-scheme: dark;
}

html {
  background-color: var(--bg);
  color: var(--ink);
}

body {
  margin: 0;
  font-family: "Castoro", "Iowan Old Style", "Palatino Linotype", serif;
  font-size: clamp(1.0625rem, 0.95rem + 0.45vw, 1.3125rem);
  line-height: 1.65;
  text-wrap: pretty;
}

::selection {
  background: var(--accent);
  color: var(--bg);
}

:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 4px;
}

/* ---- limen ---- */

.limen {
  position: relative;
  display: grid;
  place-items: center;
  min-height: max(22rem, calc(100svh - 4.75rem));
}

.titulus {
  margin: 0;
  font-family: "Castoro Titling", serif;
  font-weight: 400;
  font-size: var(--word-size);
  line-height: 1;
  letter-spacing: 0.06em;
  transform: translateY(-4vh);
}

.titulus-btn {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
  cursor: pointer;
  position: relative;
  display: inline-block;
}

.titulus-word {
  display: inline-block;
  margin-right: -0.06em;
  white-space: nowrap;
}

html.intro .titulus-word {
  visibility: hidden;
}

.titulus-phrase {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  margin-left: 0.03em;
  font-size: var(--phrase-size);
  line-height: 1;
  letter-spacing: 0.06em;
  white-space: nowrap;
  transform-origin: calc(50% - 0.03em) 50%;
}

.titulus-phrase .lit {
  display: inline-block;
  position: relative;
}

.titulus-phrase .spatium {
  display: inline-block;
  width: 0.32em;
}

.punctum {
  --d: max(0.085em, 4px);
  position: absolute;
  left: 50%;
  bottom: calc(0.125em - var(--d));
  width: var(--d);
  height: var(--d);
  margin-left: calc(var(--d) / -2);
  border-radius: 50%;
  background: var(--accent);
  transform: scale(0);
}

.nocturna {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(50% - 4vh + var(--word-size) * 0.5 + 1rem);
  margin: 0;
  font-style: italic;
  font-size: clamp(1rem, 0.9rem + 0.3vw, 1.2rem);
  color: var(--muted);
  text-align: center;
  opacity: 0;
  transition: opacity 0.8s var(--ease-out);
}

.nocturna.vis {
  opacity: 1;
}

/* ---- epistula ---- */

.epistula {
  max-width: 34em;
  margin-inline: auto;
  padding-left: max(1.375rem, env(safe-area-inset-left));
  padding-right: max(1.375rem, env(safe-area-inset-right));
  padding-bottom: 12rem;
  transition: opacity 0.8s var(--ease-out);
}

.reliqua {
  transition: opacity 0.8s var(--ease-out);
}

html.intro .reliqua {
  opacity: 0;
}

.salutatio {
  margin: 0 0 3.25rem;
  font-family: "Castoro Titling", serif;
  font-weight: 400;
  font-size: 0.875rem;
  letter-spacing: 0.28em;
  padding-left: 0.28em;
  color: var(--muted);
  text-align: center;
}

.epistula p {
  margin: 0;
}

.epistula p + p {
  text-indent: 1.6em;
}

.epistula p.data {
  text-indent: 0;
  margin-top: 2.5rem;
}

.numerus {
  font-size: 0.62em;
  vertical-align: 0.42em;
  color: var(--muted);
  font-variant-numeric: lining-nums;
  margin-right: 0.3em;
}

.rubrica {
  color: var(--accent);
  background: none;
  font-style: normal;
}

.data {
  text-align: right;
  font-style: italic;
  color: var(--muted);
}

/* ---- 404 ---- */

.errata {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 2rem;
  box-sizing: border-box;
}

.errata-inner {
  text-align: center;
}

.errata h1 {
  margin: 0;
  font-family: "Castoro Titling", serif;
  font-weight: 400;
  font-size: clamp(1.5rem, 4.2vw, 3.5rem);
  letter-spacing: 0.06em;
  padding-left: 0.06em;
  line-height: 1.15;
  text-wrap: balance;
}

.errata .locus {
  margin: 0.9rem 0 2.5rem;
  font-size: 0.875rem;
  color: var(--muted);
  letter-spacing: 0.06em;
}

.errata a {
  font-style: italic;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 0.22em;
}

.errata a:hover,
.errata a:focus-visible {
  color: var(--accent);
}

/* ---- lingua ---- */

:lang(zh) {
  font-family: "Vindibi Sinica", "Castoro", "Noto Serif SC", "Source Han Serif SC",
    "Songti SC", "STSong", "SimSun", serif;
}

html[data-lingua="zh"] .bilinguis .lingua-en,
html[data-lingua="en"] .bilinguis .lingua-zh {
  display: none;
}

.titulus-paginae .lingua-zh,
.titulus-paginae .lingua-en,
.item-titulus .lingua-zh,
.item-titulus .lingua-en {
  display: block;
}

html:not([data-lingua]) .corpus .lingua-zh + .lingua-en {
  margin-top: 4rem;
}

.lingua {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5em;
  font-family: "Castoro Titling", serif;
  font-size: 0.6875rem;
  letter-spacing: 0.24em;
  color: var(--muted);
}

.lingua button {
  appearance: none;
  background: none;
  border: 0;
  margin: 0;
  padding: 0;
  min-height: 44px;
  font: inherit;
  letter-spacing: inherit;
  color: var(--muted);
  cursor: pointer;
}

.lingua button[aria-pressed="true"] {
  color: var(--ink);
}

.lingua button:hover {
  color: var(--accent);
}

/* ---- caput / pes ---- */

.caput {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: baseline;
  max-width: 34em;
  margin-inline: auto;
  padding-top: max(2.5rem, env(safe-area-inset-top));
  padding-left: max(1.375rem, env(safe-area-inset-left));
  padding-right: max(1.375rem, env(safe-area-inset-right));
}

.caput .signum {
  grid-column: 2;
  justify-self: center;
  line-height: 44px;
}

.caput .lingua:not([hidden]) {
  grid-column: 3;
  justify-self: end;
  display: flex;
  margin-right: -0.24em;
}

.signum {
  font-family: "Castoro Titling", serif;
  font-size: 0.9375rem;
  letter-spacing: 0.32em;
  padding-left: 0.32em;
  color: var(--ink);
  text-decoration: none;
}

.signum:hover,
.signum:focus-visible {
  color: var(--accent);
}

@media (max-width: 30rem) {
  .caput .lingua:not([hidden]) {
    display: flex;
    justify-content: center;
    position: static;
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: center;
    margin-right: 0;
    margin-top: 0.75rem;
    padding-left: 0.24em;
  }
}

.pes {
  text-align: center;
  padding: 1rem 1rem;
  padding-bottom: max(3rem, env(safe-area-inset-bottom));
}

.pes a {
  font-style: italic;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 0.22em;
}

.pes a:hover,
.pes a:focus-visible {
  color: var(--accent);
}

/* ---- genus / titulus ---- */

.genus {
  margin: 0;
  font-family: "Castoro Titling", serif;
  font-size: 0.75rem;
  letter-spacing: 0.24em;
  color: var(--muted);
}

.epistula .genus,
.scriptum .genus {
  text-align: center;
  padding-left: 0.24em;
  margin-top: 7rem;
}

.epistula p.salutatio {
  margin: 0 0 3.25rem;
}

.epistula h1.salutatio {
  margin: 7rem 0 3.25rem;
}

.exemplar {
  margin-left: 0.75em;
  color: var(--accent);
}

.titulus-paginae {
  margin: 1.25rem 0 3rem;
  font-weight: 400;
  font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem);
  line-height: 1.25;
  text-align: center;
  text-wrap: balance;
}

.vale {
  font-style: italic;
  text-align: right;
}

.epistula p.vale {
  margin-top: 2.75rem;
}

.epistula p.vale + p.data {
  margin-top: 0.25rem;
}

/* ---- corpus ---- */

.corpus p {
  margin: 0;
}

.corpus .lingua-zh p {
  text-indent: 2em;
  text-align: start;
  line-height: 1.9;
}

@media (min-width: 40rem) {
  .corpus .lingua-zh p {
    text-align: justify;
  }
}

.corpus .lingua-en {
  hyphens: auto;
}

.corpus .lingua-en p + p {
  text-indent: 1.6em;
}

.corpus h2 {
  margin: 3rem 0 1.25rem;
  font-weight: 400;
  font-size: 1.25rem;
  text-align: center;
}

.corpus h3 {
  font-size: 1.0625rem;
  font-style: italic;
  font-weight: 400;
}

.corpus a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.22em;
}

.corpus a:hover,
.corpus a:focus-visible {
  color: var(--accent);
}

.corpus blockquote {
  margin: 0;
  padding-left: 1.6em;
  color: var(--muted);
}

.corpus code,
.corpus pre {
  font-family: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;
}

.corpus pre {
  background: color-mix(in srgb, var(--muted) 10%, transparent);
  overflow-x: auto;
  padding: 1em;
}

.corpus img {
  max-width: 100%;
  display: block;
  margin-inline: auto;
}

.corpus hr {
  border: 0;
  margin: 2.5rem 0;
  text-align: center;
  color: var(--muted);
}

.corpus hr::after {
  content: "·  ·  ·";
}

.corpus ul,
.corpus ol {
  padding-left: 1.6em;
}

/* ---- scriptum ---- */

.scriptum {
  max-width: 34em;
  margin-inline: auto;
  padding-left: max(1.375rem, env(safe-area-inset-left));
  padding-right: max(1.375rem, env(safe-area-inset-right));
  padding-bottom: 6rem;
}

.scriptum .auctores {
  text-align: center;
  color: var(--muted);
  margin: 0;
}

.scriptum .ego {
  color: var(--ink);
}

.scriptum .ubi {
  text-align: center;
  font-style: italic;
  color: var(--muted);
  margin: 0.35rem 0 0;
}

.scriptum .nexus {
  margin: 1.5rem 0 0;
  text-align: center;
  font-family: "Castoro Titling", serif;
  font-size: 0.75rem;
  letter-spacing: 0.24em;
}

.scriptum .nexus a {
  color: var(--ink);
  text-decoration: none;
}

.scriptum .nexus a:hover,
.scriptum .nexus a:focus-visible {
  color: var(--accent);
}

.argumentum {
  font-family: "Castoro Titling", serif;
  font-weight: 400;
  font-size: 0.75rem;
  letter-spacing: 0.24em;
  color: var(--muted);
  text-align: center;
  margin: 4rem 0 1.25rem;
}

/* ---- epigramma ---- */

.epigramma {
  max-width: 30em;
  margin-inline: auto;
  padding-left: max(1.375rem, env(safe-area-inset-left));
  padding-right: max(1.375rem, env(safe-area-inset-right));
  font-style: italic;
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  line-height: 1.55;
  text-wrap: balance;
  text-align: center;
}

.epigramma blockquote {
  margin: 0;
}

.epigramma blockquote p {
  margin: 0;
}

.epigramma .rubrica {
  font-style: inherit;
}

.epigramma .locus {
  margin: 1.25rem 0 0;
  font-size: 0.875rem;
  font-style: normal;
  color: var(--muted);
  letter-spacing: 0.06em;
}

.epigramma .locus a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.22em;
}

.epigramma .locus a:hover,
.epigramma .locus a:focus-visible {
  color: var(--accent);
}

/* ---- index ---- */

.index {
  max-width: 34em;
  margin: 8rem auto 0;
  padding-left: max(1.375rem, env(safe-area-inset-left));
  padding-right: max(1.375rem, env(safe-area-inset-right));
}

.index .lingua {
  display: flex;
  justify-content: flex-end;
  margin-right: -0.24em;
  margin-bottom: 2.5rem;
}

.lingua[hidden] {
  display: none;
}

.index ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.index li + li {
  margin-top: 2.75rem;
}

.index .genus {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0 1em;
}

.index .genus time {
  font-family: "Castoro", serif;
  font-style: italic;
  font-size: 0.875rem;
  letter-spacing: 0;
}

.item-titulus {
  display: block;
  margin-top: 0.5rem;
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  line-height: 1.35;
  color: var(--ink);
  text-decoration: none;
}

.item-titulus:hover,
.item-titulus:focus-visible {
  color: var(--accent);
}

/* ---- colophon ---- */

.colophon {
  max-width: 34em;
  margin: 9rem auto 0;
  padding-left: max(1.375rem, env(safe-area-inset-left));
  padding-right: max(1.375rem, env(safe-area-inset-right));
  padding-bottom: max(5rem, env(safe-area-inset-bottom));
  text-align: center;
}

.colophon .data {
  text-align: center;
  margin-top: 0;
}

.colophon .vita {
  margin: 1.5rem 0 0;
}

.colophon .vita a {
  font-family: "Castoro Titling", serif;
  font-size: 0.6875rem;
  letter-spacing: 0.24em;
  color: var(--muted);
  text-decoration: none;
}

.colophon .vita a:hover,
.colophon .vita a:focus-visible {
  color: var(--accent);
}