/* Wax Tablet Press — base tokens
   Imprint aesthetic: Aldine / Oxford academic press, set-in-tradition.
   Palette: vellum cream + ink + Pompeiian red, oxidised bronze second.
*/

:root {
  /* Surfaces */
  --vellum:        #ECE3CC;   /* primary ground */
  --vellum-deep:   #E2D7BB;   /* recessed/secondary surface */
  --vellum-pale:   #F4EDD9;   /* slight lift */
  --parchment:     #D8CBA9;   /* heavier paper */

  /* Ink */
  --ink:           #0B0A08;   /* body text, ruled lines — matches the logo ink */
  --notch:         12%;       /* corner notch radius for .wtp-notch */
  --ink-soft:      #3B2F22;   /* subheads, less weight */
  --ink-faint:     #6B5A47;   /* metadata */
  --ink-trace:     #9C8A72;   /* very quiet, footer-grade */

  /* Accents */
  --pompeiian:     #9A2A22;   /* primary accent — Pompeiian red */
  --pompeiian-deep:#6E1C16;   /* hover / pressed / drop cap */
  --bronze:        #6F5526;   /* oxidised bronze, secondary mark */
  --laurel:        #4F5A2C;   /* very rare third tone, used once */

  /* Type */
  --serif: "EB Garamond", "Adobe Garamond Pro", Garamond, "Hoefler Text", Georgia, serif;
  --inscribed: "Cinzel", "Trajan Pro", "Optima", "Hoefler Text", Georgia, serif;
  --mono: "JetBrains Mono", "IBM Plex Mono", "Iosevka", ui-monospace, Menlo, monospace;

  /* Rules */
  --rule:        1px solid var(--ink);
  --rule-soft:   1px solid color-mix(in oklab, var(--ink) 30%, var(--vellum));
  --rule-double: 1px solid var(--ink);

  /* Spacing scale (paper-set, rather small) */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;
}

/* —— Element baselines used inside every artboard —— */

.wtp-root {
  background: var(--vellum);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 15.5px;
  line-height: 1.55;
  letter-spacing: 0.005em;
  font-feature-settings: "onum" 1, "kern" 1, "liga" 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.wtp-root h1, .wtp-root h2, .wtp-root h3, .wtp-root h4 {
  font-family: var(--inscribed);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
}
.wtp-root .body { font-family: var(--serif); }
.wtp-root .meta {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.wtp-root .small-caps {
  font-variant-caps: small-caps;
  letter-spacing: 0.06em;
}
.wtp-root .drop {
  float: left;
  font-family: var(--inscribed);
  color: var(--pompeiian-deep);
  font-size: 3.6em;
  line-height: 0.9;
  padding: 0.05em 0.1em 0 0;
  margin: 0.05em 0.06em 0 0;
}
.wtp-root .ornament {
  display: inline-block;
  color: var(--pompeiian);
  font-family: var(--serif);
  font-style: italic;
}
.wtp-root .rule { border: 0; border-top: var(--rule); margin: 0; }
.wtp-root .rule-thin { border: 0; border-top: var(--rule-soft); margin: 0; }
.wtp-root .rule-double {
  border: 0; height: 4px;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  margin: 0;
}
.wtp-root .red { color: var(--pompeiian); }
.wtp-root .red-deep { color: var(--pompeiian-deep); }

/* Subtle vellum texture: faint horizontal "laid paper" lines + speckle */
.wtp-root.textured {
  background-image:
    repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent 23px,
      color-mix(in oklab, var(--ink) 3%, transparent) 23px,
      color-mix(in oklab, var(--ink) 3%, transparent) 24px
    ),
    radial-gradient(circle at 20% 30%, color-mix(in oklab, var(--bronze) 5%, transparent) 0, transparent 40%),
    radial-gradient(circle at 78% 72%, color-mix(in oklab, var(--bronze) 5%, transparent) 0, transparent 35%);
  background-color: var(--vellum);
}

/* Brand devices — derived from the Wax Tablet Press mark */
.wtp-notch{-webkit-mask:radial-gradient(circle at 0 0,transparent var(--notch),#000 calc(var(--notch) + .5px)) top left/51% 51% no-repeat,radial-gradient(circle at 100% 0,transparent var(--notch),#000 calc(var(--notch) + .5px)) top right/51% 51% no-repeat,radial-gradient(circle at 0 100%,transparent var(--notch),#000 calc(var(--notch) + .5px)) bottom left/51% 51% no-repeat,radial-gradient(circle at 100% 100%,transparent var(--notch),#000 calc(var(--notch) + .5px)) bottom right/51% 51% no-repeat;mask:radial-gradient(circle at 0 0,transparent var(--notch),#000 calc(var(--notch) + .5px)) top left/51% 51% no-repeat,radial-gradient(circle at 100% 0,transparent var(--notch),#000 calc(var(--notch) + .5px)) top right/51% 51% no-repeat,radial-gradient(circle at 0 100%,transparent var(--notch),#000 calc(var(--notch) + .5px)) bottom left/51% 51% no-repeat,radial-gradient(circle at 100% 100%,transparent var(--notch),#000 calc(var(--notch) + .5px)) bottom right/51% 51% no-repeat}
.wtp-tablet-rule{display:block;width:26px;height:16px;margin:0 auto;background:repeating-linear-gradient(to bottom,var(--pompeiian) 0 3px,transparent 3px 6.5px);transform:skewY(-7deg)}
.wtp-tablet-rule--ink{background:repeating-linear-gradient(to bottom,var(--ink) 0 3px,transparent 3px 6.5px)}
.wtp-logo-mark{display:block;height:auto}
.wtp-nav-brand{display:flex;align-items:center;gap:12px;color:var(--ink)}
.wtp-nav-brand img{height:34px;width:auto}
.wtp-nav-brand span{font-family:var(--inscribed);font-weight:700;font-size:12.5px;letter-spacing:.3em;text-transform:uppercase}

/* Footnote apparatus — used by the home page interactive moment */
.wtp-fn {
  vertical-align: super;
  font-size: 0.66em;
  line-height: 0;
  color: var(--pompeiian);
  font-family: var(--inscribed);
  letter-spacing: 0;
  cursor: pointer;
  margin-left: 1px;
  padding: 0 1px;
  border-radius: 2px;
  transition: background 120ms ease, color 120ms ease;
}
.wtp-fn:hover, .wtp-fn[aria-expanded="true"] {
  background: var(--pompeiian);
  color: var(--vellum);
}
.wtp-fn-gloss {
  display: block;
  margin: var(--s-3) 0 var(--s-3) 0;
  padding: var(--s-3) var(--s-4);
  border-left: 2px solid var(--pompeiian);
  background: color-mix(in oklab, var(--pompeiian) 6%, var(--vellum));
  font-family: var(--serif);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-soft);
  font-style: italic;
}
.wtp-fn-gloss .marker {
  font-family: var(--inscribed);
  font-style: normal;
  color: var(--pompeiian);
  margin-right: var(--s-2);
  letter-spacing: 0.05em;
}

/* Cover monogram — typographic stand-in, not a picture */
.wtp-cover {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--ink);
  color: var(--vellum);
  font-family: var(--inscribed);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  isolation: isolate;
  overflow: hidden;
}
.wtp-cover::before {
  content: "";
  position: absolute; inset: 8px;
  border: 2px solid color-mix(in oklab, var(--vellum) 38%, transparent);
  pointer-events: none;
}
.wtp-cover::after {
  content: "";
  position: absolute; inset: 12px;
  border: 1px solid color-mix(in oklab, var(--vellum) 18%, transparent);
  pointer-events: none;
}
.wtp-cover .cv-press {
  position: absolute; top: 18px; left: 0; right: 0;
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.3em;
  color: color-mix(in oklab, var(--vellum) 60%, transparent);
}
.wtp-cover .cv-press-bottom {
  position: absolute; bottom: 18px; left: 0; right: 0;
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.3em;
  color: color-mix(in oklab, var(--vellum) 60%, transparent);
}
.wtp-cover .cv-mono {
  font-family: var(--inscribed);
  color: var(--pompeiian);
  font-size: 1em;
  font-weight: 500;
  letter-spacing: 0.06em;
  line-height: 0.9;
}
.wtp-cover .cv-numeral {
  font-family: var(--inscribed);
  font-size: 0.5em;
  color: color-mix(in oklab, var(--vellum) 75%, transparent);
  margin-top: 0.7em;
  letter-spacing: 0.4em;
  padding-left: 0.4em;
}
.wtp-cover .cv-rule {
  width: 22%;
  border: 0;
  border-top: 1px solid color-mix(in oklab, var(--vellum) 50%, transparent);
  margin: 0.8em auto;
}
.wtp-cover .cv-byline {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.32em;
  letter-spacing: 0.1em;
  color: color-mix(in oklab, var(--vellum) 80%, transparent);
  text-transform: none;
  margin-top: 1em;
}

.wtp-cover-img{display:block;height:auto;box-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 10px 28px -12px rgba(11,10,8,.55),0 0 0 1px rgba(11,10,8,.9)}

/* Tabular numerals + tight tracking for ISBN/colophon entries */
.wtp-root .lining { font-variant-numeric: lining-nums tabular-nums; letter-spacing: 0.02em; }

/* Buttons — restrained, almost button-less */
.wtp-root .wtp-btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--inscribed);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  padding: 10px 18px;
  border: 1px solid var(--ink);
  background: transparent;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}
.wtp-root .wtp-btn:hover { background: var(--ink); color: var(--vellum); }
.wtp-root .wtp-btn--red { color: var(--pompeiian); border-color: var(--pompeiian); }
.wtp-root .wtp-btn--red:hover { background: var(--pompeiian); color: var(--vellum); }
.wtp-root .wtp-btn--ghost {
  border-color: color-mix(in oklab, var(--ink) 40%, transparent);
  color: var(--ink-soft);
}
.wtp-root a { color: inherit; text-decoration: none; }
.wtp-root a.linked {
  color: var(--pompeiian);
  border-bottom: 1px solid color-mix(in oklab, var(--pompeiian) 40%, transparent);
}
.wtp-root a.linked:hover { border-bottom-color: var(--pompeiian); }

/* Density modes — toggled via data attribute on .wtp-root */
.wtp-root[data-density="compact"]   { font-size: 14px;  line-height: 1.5; }
.wtp-root[data-density="regular"]   { font-size: 15.5px; line-height: 1.55; }
.wtp-root[data-density="generous"]  { font-size: 17px;  line-height: 1.65; letter-spacing: 0.008em; }

/* Type pairings — toggled via data attribute on .wtp-root */
.wtp-root[data-type="pairing-cinzel"]  { --inscribed: "Cinzel", "Trajan Pro", "Optima", serif; --serif: "EB Garamond", Garamond, Georgia, serif; }
.wtp-root[data-type="pairing-im-fell"] { --inscribed: "IM Fell English SC", "Cinzel", serif; --serif: "IM Fell English", "EB Garamond", Georgia, serif; }
.wtp-root[data-type="pairing-cormorant"] { --inscribed: "Cinzel", "Trajan Pro", serif; --serif: "Cormorant Garamond", "EB Garamond", Georgia, serif; }

/* Palette modes — toggled via data attribute on .wtp-root */
.wtp-root[data-palette="vellum-pompeiian"] {
  --vellum: #ECE3CC; --vellum-deep: #E2D7BB; --vellum-pale: #F4EDD9;
  --ink: #1B140C; --ink-soft: #3B2F22; --ink-faint: #6B5A47;
  --pompeiian: #9A2A22; --pompeiian-deep: #6E1C16; --bronze: #6F5526;
}
.wtp-root[data-palette="parchment-oxblood"] {
  --vellum: #E8DDC2; --vellum-deep: #DACEAC; --vellum-pale: #F1E8CF;
  --ink: #181109; --ink-soft: #3A2A1B; --ink-faint: #6E5B40;
  --pompeiian: #6E1C16; --pompeiian-deep: #4A120E; --bronze: #5A4519;
}
.wtp-root[data-palette="bone-ink"] {
  --vellum: #F4EFE0; --vellum-deep: #E8E1CB; --vellum-pale: #FAF6E9;
  --ink: #0F0C08; --ink-soft: #2A2218; --ink-faint: #5C4D3A;
  --pompeiian: #1B140C; --pompeiian-deep: #1B140C; --bronze: #1B140C;
}