/* Charta: the parchment hand laid over the Insula design system.
   The whole site becomes a Latin manuscript: sepia ink on vellum with darkened, handled edges, Roman capitals
   (Cinzel, after Trajan's column) for titles, a book hand (EB Garamond) for reading, rubrics and initials in
   red, gold leaf for anything you can do. The ornament is a set of our own glyphs cut in the manner of the
   Egyptian obelisks that stand in Rome; bands, cartouches and two obelisks at the edges of the page carry them.
   Assets: public/img/charta/, drawn by scripts/build-charta.mjs. Loaded after insula.css and roma.css. */

:root {
  --vellum: #efdfbd;
  --vellum-light: #f6ead0;
  --vellum-deep: #e2cc9f;
  --sepia: #2a1c0f;
  --rubric: #9b2f1f;
  --rubric-deep: #7a2416;

  --nox: #24180c;
  --marmor: #f3e6c8;
  --terracotta: var(--rubric);

  --bg: var(--vellum);
  --bg-deep: var(--vellum-deep);
  --surface: var(--vellum-light);
  --surface-2: #ecdcb8;
  --surface-sunk: #e6d3ab;
  --line: #cdb488;
  --line-strong: #b0936a;
  --ink: var(--sepia);
  --ink-soft: #4e3a26;
  --ink-faint: #6e573c;
  --aurum-ink: #7a5a1c;
  --on-gold: #24180c;
  --danger: var(--rubric);
  --danger-soft: rgba(155, 47, 31, 0.12);

  --r-s: 2px;
  --r: 3px;
  --r-l: 4px;

  --shadow: 0 1px 0 rgba(255, 248, 228, 0.55) inset, 0 16px 30px -24px rgba(70, 45, 15, 0.6);
  /* two ruled lines inside the edge, the way a scribe frames a page */
  --frame: inset 0 0 0 5px var(--surface), inset 0 0 0 6px rgba(74, 51, 32, 0.42), inset 0 0 0 9px var(--surface), inset 0 0 0 10px rgba(74, 51, 32, 0.2);

  --font-carve: 'Cinzel', 'Marcellus', 'Trajan Pro', Georgia, serif;
  --font-body: 'EB Garamond', 'Garamond', Georgia, serif;
  --font-latin: 'Cormorant Garamond', Georgia, serif;

  --glyph-band: url('/img/charta/band.svg');
  --corners:
    url('/img/charta/corner-tl.svg') left 7px top 7px / 34px no-repeat,
    url('/img/charta/corner-tr.svg') right 7px top 7px / 34px no-repeat,
    url('/img/charta/corner-bl.svg') left 7px bottom 7px / 34px no-repeat,
    url('/img/charta/corner-br.svg') right 7px bottom 7px / 34px no-repeat;
}

/* ---------- the page: vellum, handled edges, two obelisks ---------- */

body {
  background: var(--vellum) url('/img/charta/parchment.svg') 0 0 / 600px;
  font-size: 18px;
  line-height: 1.6;
}

/* the edges of an old sheet are darker where hands have held it */
body::before {
  background:
    radial-gradient(ellipse 120% 90% at 50% 45%, transparent 58%, rgba(110, 70, 25, 0.22) 88%, rgba(80, 48, 16, 0.38) 100%),
    radial-gradient(ellipse 60% 40% at 50% 0%, rgba(255, 246, 222, 0.5), transparent 70%);
}

/* obelisks stand at either side of the page on wide screens, faint as a watermark */
body::after {
  content: '';
  position: fixed;
  inset: 70px 0 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.22;
  background-image: url('/img/charta/obelisk.svg'), url('/img/charta/obelisk.svg');
  background-position: left 6px bottom -30px, right 6px bottom -30px;
  background-size: auto 86vh;
  background-repeat: no-repeat;
}

@media (max-width: 1100px) {
  body::after {
    display: none;
  }
}

::selection {
  background: rgba(155, 47, 31, 0.22);
}

h1,
h2,
h3 {
  font-family: var(--font-carve);
  font-weight: 500;
  color: var(--sepia);
}

h1,
h2 {
  letter-spacing: 0.04em;
}

a {
  color: var(--rubric);
  text-decoration-thickness: 1px;
}

a:hover {
  color: var(--rubric-deep);
}

/* rubrics: the small captions are red, led by a glyph */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--rubric);
  font-weight: 600;
}

.eyebrow::before {
  content: '';
  flex: none;
  width: 15px;
  height: 15px;
  background: currentColor;
  -webkit-mask: url('/img/charta/g-eye.svg') center / contain no-repeat;
  mask: url('/img/charta/g-eye.svg') center / contain no-repeat;
}

.latin {
  color: var(--ink-soft);
}

/* the opening of a page starts with a red initial, as in a manuscript */
.lede::first-letter,
.liber-text section > p:first-of-type::first-letter {
  float: left;
  margin: 0.04em 0.06em 0 0;
  color: var(--rubric);
  font: 600 2.75em/0.86 var(--font-carve);
  text-shadow: 1px 1px 0 rgba(201, 163, 90, 0.55);
}

/* ---------- sheets: cards become leaves of vellum with ruled frames and corner ornaments ---------- */

.slab:not(.slab--tint),
.tenant,
.counter,
.liber-toc,
.gate,
.plaque {
  background: var(--corners), linear-gradient(180deg, var(--vellum-light), #f0e1c1);
  border-color: rgba(74, 51, 32, 0.35);
}

.slab--tint {
  box-shadow: inset 0 0 0 5px color-mix(in srgb, var(--tint) 85%, #000), inset 0 0 0 6px rgba(42, 28, 15, 0.4), var(--shadow);
}

.well {
  background: rgba(226, 204, 159, 0.55);
  border-color: rgba(74, 51, 32, 0.28);
}

/* ---------- buttons: gold leaf and vellum, pressed into the page ---------- */

.btn {
  border-color: rgba(74, 51, 32, 0.45);
  background: linear-gradient(180deg, #f6ecd3, #e8d5ac);
  color: var(--sepia);
  font: 600 0.95rem/1 var(--font-carve);
  letter-spacing: 0.05em;
  box-shadow: inset 0 1px 0 rgba(255, 250, 235, 0.7), 0 1px 0 rgba(74, 51, 32, 0.25);
}

.btn:hover {
  border-color: var(--sepia);
  color: var(--sepia);
}

.btn--primary {
  border-color: #6e4f1c;
  background: linear-gradient(180deg, #e9cd86, #cfa553 55%, #b48a36);
  color: #24180c;
  box-shadow: inset 0 1px 0 rgba(255, 244, 210, 0.75), inset 0 -2px 0 rgba(110, 79, 28, 0.25), 0 2px 0 #6e4f1c;
  text-shadow: 0 1px 0 rgba(255, 240, 200, 0.5);
}

.btn--primary:hover {
  border-color: #5a3f14;
  background: linear-gradient(180deg, #f0d896, #d8b062 55%, #bd9440);
  color: #24180c;
}

.btn--primary:active {
  background: linear-gradient(180deg, #c99c47, #b48a36);
  box-shadow: inset 0 2px 4px rgba(70, 45, 15, 0.35);
}

.btn--ghost {
  background: transparent;
  box-shadow: none;
  border-color: transparent;
}

.btn--danger {
  border-color: rgba(155, 47, 31, 0.5);
  background: linear-gradient(180deg, #f3ddd0, #e8c6b4);
  color: var(--rubric-deep);
}

.chip {
  border-color: rgba(74, 51, 32, 0.38);
  background: var(--chip, linear-gradient(180deg, #f4e7c9, #e9d6ad));
  font-family: var(--font-body);
  font-weight: 600;
}

button.chip[aria-pressed='true'] {
  border-color: #6e4f1c;
  background: linear-gradient(180deg, #e9cd86, #cfa553);
}

/* ---------- forms: ruled lines to write on ---------- */

.input,
.textarea,
.select {
  border-color: rgba(74, 51, 32, 0.38);
  background-color: rgba(255, 250, 236, 0.6);
  font-family: var(--font-body);
  font-size: 1.05rem;
}

.select {
  background:
    linear-gradient(45deg, transparent 50%, var(--rubric) 50%) calc(100% - 20px) 50% / 6px 6px no-repeat,
    linear-gradient(135deg, var(--rubric) 50%, transparent 50%) calc(100% - 14px) 50% / 6px 6px no-repeat,
    rgba(255, 250, 236, 0.6);
}

.textarea {
  /* faint ruling, like a page made ready for writing */
  background-image: repeating-linear-gradient(180deg, transparent 0 27px, rgba(74, 51, 32, 0.09) 27px 28px);
  background-attachment: local;
  line-height: 28px;
}

.input:focus,
.textarea:focus,
.select:focus {
  border-color: var(--rubric);
  box-shadow: 0 0 0 3px rgba(155, 47, 31, 0.12);
}

input[type='range'] {
  accent-color: var(--rubric);
}

:focus-visible {
  outline-color: var(--rubric);
}

/* ---------- the shell ---------- */

.topbar {
  border-bottom: 0;
  padding-bottom: 24px;
  background: rgba(239, 223, 189, 0.93) var(--glyph-band) left bottom 3px / auto 18px repeat-x;
}

/* the dock: a strip of tooled leather */
.dock {
  border-color: #1a1008;
  background:
    repeating-linear-gradient(90deg, transparent 0 46px, rgba(201, 163, 90, 0.08) 46px 47px),
    linear-gradient(180deg, #3d2817, #2a1b0e);
  box-shadow: inset 0 0 0 3px #2a1b0e, inset 0 0 0 4px rgba(201, 163, 90, 0.45), 0 18px 34px -16px rgba(40, 25, 8, 0.65);
}

.dock a {
  color: #cdb48a;
  font-family: var(--font-carve);
}

.dock .stop {
  background: linear-gradient(90deg, #c9b48d, #f3e6c8 45%, #b9a27a);
  color: var(--sepia);
}

/* titles of a page sit on a band of glyphs instead of a key pattern */
.page-head {
  border-bottom: 0;
  border-image: none;
  padding-bottom: 40px;
  background: var(--glyph-band) left bottom / auto 26px repeat-x;
}

.toast {
  border-color: rgba(74, 51, 32, 0.4);
  background: var(--corners), var(--vellum-light);
  font-family: var(--font-body);
}

.dialog-body {
  background: var(--corners), var(--vellum-light);
}

.notice {
  border-color: rgba(155, 47, 31, 0.35);
}

/* code stays dark: iron-gall ink pooled on the page */
.code-block,
.liber-code {
  background: #2a1c0f;
  color: #f1e3c4;
}

/* ---------- landing ---------- */

/* the hero's sky is the sheet itself, with the sun drawn in gold */
.cityhero {
  background:
    radial-gradient(ellipse 45% 55% at 78% 18%, rgba(255, 238, 196, 0.85), transparent 70%),
    url('/img/charta/parchment.svg') 0 0 / 600px,
    linear-gradient(180deg, #f1e2c0 0%, #ead5a8 60%, #ddc08a 100%);
}

.plaque {
  border-color: #6e4f1c;
  box-shadow: inset 0 0 0 6px rgba(246, 234, 208, 0.9), inset 0 0 0 7px rgba(74, 51, 32, 0.45), 0 30px 60px -30px rgba(60, 40, 14, 0.6);
}

.plaque::before,
.plaque::after {
  background: #b48a36;
}

.plaque h1 em {
  color: var(--rubric);
  font-weight: 500;
}

.frieze {
  background:
    var(--glyph-band) left top 4px / auto 20px repeat-x,
    var(--glyph-band) left bottom 4px / auto 20px repeat-x,
    var(--vellum-light);
  padding: 34px 0;
}

.frieze-item {
  background: var(--vellum-light);
  border-color: rgba(74, 51, 32, 0.3);
}

.miliarium {
  font-family: var(--font-carve);
}

.foot-plaque {
  font-family: var(--font-carve);
}

/* ---------- docs ---------- */

.liber-text h2 {
  border-bottom: 0;
  padding-bottom: 30px;
  background: var(--glyph-band) left bottom / auto 18px repeat-x;
}

.liber-toc {
  padding-top: 30px;
}

.liber-text h2 b,
.liber-toc a b {
  color: var(--rubric);
}

.liber-agents > div,
.liber-facts div,
.liber-table [role='row'] {
  background-color: var(--vellum-light);
}

.liber-agents > div {
  border-top-color: var(--rubric);
}

/* ---------- a cartouche for glyph labels anywhere ---------- */

.glyph {
  display: inline-block;
  width: 1.2em;
  height: 1.2em;
  vertical-align: -0.2em;
  color: currentColor;
}

@media (max-width: 520px) {
  /* the top bar is full on a phone; X stays in the footer and the docs */
  .topbar-x {
    display: none;
  }

  body {
    font-size: 17px;
  }

  .topbar {
    background-size: auto 14px;
    padding-bottom: 20px;
  }

  .page-head {
    background-size: auto 20px;
    padding-bottom: 32px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .frieze-track {
    animation: none;
  }
}