/* ============================================================
   DICTIONARY — a bound reference volume
   Oxblood board & gilt, vellum leaves stacked on a dark desk,
   dictionary-entry typography. The components are the entries;
   the Bubble is re-skinned here as a marginal note tipped into
   the page (proving it adapts to its host, not broadsheet).
   ============================================================ */

:root {
  /* ---- the desk the book lies on ---- */
  --bk-desk:      #211510;
  --bk-desk-2:    #140c08;

  /* ---- leather board (oxblood) + gilt ---- */
  --bk-leather:   #5a1f22;
  --bk-leather-d: #3d1416;
  --bk-leather-h: #74302f;
  --bk-gilt:      #c9a94e;
  --bk-gilt-hi:   #f4e6ad;
  --bk-gilt-lo:   #9c7b28;

  /* ---- vellum page + sepia ink ---- */
  --bk-vellum:    #f3e9d2;
  --bk-vellum-2:  #ecdfc0;
  --bk-vellum-3:  #e3d3ad;   /* deeper inset */
  --bk-ink:       #2a2018;
  --bk-ink-2:     #5f5142;
  --bk-ink-3:     #8c7c62;
  --bk-rule:      #cdbc93;
  --bk-rule-2:    #ded0ab;
  --bk-accent:    #7a2528;   /* oxblood ink — headwords, senses, bubble stripe */
  --bk-accent-2:  #9a4d2e;   /* rubricated brown-red */
  --bk-ribbon:    #2f5d55;   /* silk bookmark */

  /* ---- type ---- */
  --bk-display: "Playfair Display", "Times New Roman", serif;
  --bk-serif:   "EB Garamond", Georgia, "Times New Roman", serif;
  --bk-mono:    "Cutive Mono", ui-monospace, monospace;

  /* paper & leather grain (self-contained SVG turbulence) */
  --bk-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");

  /* ---- re-skin the vendored Bubble as a book marginale ---- */
  --bubble-bg:      var(--bk-vellum-2);
  --bubble-fg:      var(--bk-ink-2);
  --bubble-fg-em:   var(--bk-ink);
  --bubble-accent:  var(--bk-accent);
  --bubble-border:  var(--bk-rule);
  --bubble-radius:  2px;
  --bubble-font:    var(--bk-serif);
  --bubble-font-chrome: var(--bk-serif);
  --bubble-size:    18px;
  /* the bubble's inline <code> — keep it period (typewriter) */
  --bs-font-mono:   var(--bk-mono);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  color: var(--bk-ink);
  font-family: var(--bk-serif);
  font-size: 19px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  background:
    radial-gradient(120% 80% at 50% -10%, #3a2519 0%, transparent 60%),
    linear-gradient(180deg, var(--bk-desk) 0%, var(--bk-desk-2) 100%);
  background-attachment: fixed;
}
a { color: var(--bk-accent); text-underline-offset: 2px; }

.sc  { font-variant: small-caps; letter-spacing: .04em; }
.it  { font-style: italic; }

/* gilt foil lettering */
.gilt {
  background: linear-gradient(177deg, var(--bk-gilt-hi) 0%, var(--bk-gilt) 42%, var(--bk-gilt-lo) 58%, var(--bk-gilt-hi) 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.35)) drop-shadow(0 0 1px rgba(244,230,173,.25));
}

.skip-link {
  position: fixed; top: -60px; left: 12px; z-index: 999;
  background: var(--bk-ink); color: var(--bk-vellum); padding: 10px 14px;
  border-radius: 2px; font-family: var(--bk-serif); font-size: 15px;
  transition: top .2s ease;
}
.skip-link:focus { top: 12px; }

/* =====================================================================
   Running head — a slim guide line, like the top of a dictionary page
   ===================================================================== */
.runhead {
  position: sticky; top: 0; z-index: 200;
  display: flex; align-items: baseline; gap: clamp(10px, 3vw, 30px);
  padding: 9px clamp(16px, 5vw, 46px);
  color: var(--bk-gilt);
  background: linear-gradient(180deg, var(--bk-leather) 0%, var(--bk-leather-d) 100%);
  border-bottom: 2px solid var(--bk-gilt-lo);
  box-shadow: 0 6px 18px -8px rgba(0,0,0,.7);
  font-variant: small-caps; letter-spacing: .08em; font-size: 15px;
}
.runhead__brand { font-weight: 700; text-decoration: none; color: var(--bk-gilt-hi); }
.runhead__guide { color: #d8b866; font-style: italic; opacity: .85; }
.runhead__nav { margin-left: auto; display: flex; gap: clamp(10px, 2.4vw, 22px); }
.runhead__nav a { color: #d8b866; text-decoration: none; }
.runhead__nav a:hover { color: var(--bk-gilt-hi); }
@media (max-width: 620px) { .runhead__guide { display: none; } }

/* =====================================================================
   Thumb index — cut letter tabs on the fore-edge (decorative)
   ===================================================================== */
.thumb {
  position: fixed; top: 50%; right: 0; transform: translateY(-50%);
  z-index: 150; display: flex; flex-direction: column; gap: 2px;
  padding: 6px 0; pointer-events: none;
}
.thumb b, .thumb a {
  width: 22px; height: 20px; display: grid; place-items: center;
  font: 600 11px/1 var(--bk-serif); text-transform: uppercase;
  color: #6a4b1f; background: var(--bk-vellum-3);
  border: 1px solid var(--bk-rule); border-right: 0;
  border-radius: 4px 0 0 4px; text-decoration: none; opacity: .5;
}
.thumb a { pointer-events: auto; }
.thumb .is-cur {
  color: var(--bk-vellum-2); background: var(--bk-accent);
  border-color: var(--bk-accent); opacity: 1; font-weight: 700;
}
@media (max-width: 1180px) { .thumb { display: none; } }

/* =====================================================================
   Leaves — vellum pages stacked on the desk
   ===================================================================== */
main { padding: clamp(28px, 5vw, 64px) clamp(14px, 4vw, 40px) 80px; }

.leaf {
  position: relative;
  max-width: 900px; margin: 0 auto clamp(30px, 5vw, 56px);
  background:
    var(--bk-grain),
    radial-gradient(140% 120% at 18% 0%, #f7eedb 0%, var(--bk-vellum) 45%, var(--bk-vellum-2) 100%);
  background-blend-mode: multiply, normal;
  color: var(--bk-ink);
  padding: clamp(30px, 5vw, 60px) clamp(24px, 6vw, 74px) clamp(40px, 6vw, 66px);
  border: 1px solid #d9c9a2;
  border-radius: 2px;
  box-shadow:
    1px 1px 0 #e7dabd, 2px 3px 0 #e1d3b4, 3px 5px 0 #dacaa6, 4px 7px 0 #d3c29c,
    0 30px 60px -26px rgba(0,0,0,.75);
}
/* faint binding shadow down the inner edge */
.leaf::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 34px;
  background: linear-gradient(90deg, rgba(90,60,30,.16), transparent);
  border-radius: 2px 0 0 2px; pointer-events: none;
}

.leaf__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin-bottom: clamp(18px, 3vw, 30px);
  padding-bottom: 8px; border-bottom: 1px solid var(--bk-rule);
  font-variant: small-caps; letter-spacing: .06em;
  color: var(--bk-ink-3); font-size: 15px;
}
.leaf__head .g { font-style: italic; }
.folio { font-family: var(--bk-mono); font-size: 12px; letter-spacing: .02em; }

/* =====================================================================
   Cover — the closed oxblood board with gilt
   ===================================================================== */
.cover {
  position: relative; max-width: 760px; margin: 0 auto clamp(40px, 7vw, 90px);
  aspect-ratio: 5 / 6.4; max-height: 82vh;
  color: var(--bk-gilt);
  background:
    var(--bk-grain),
    radial-gradient(120% 90% at 50% 30%, var(--bk-leather-h) 0%, var(--bk-leather) 42%, var(--bk-leather-d) 100%);
  background-blend-mode: overlay, normal;
  border-radius: 3px 8px 8px 3px;
  border: 1px solid #2b0e10;
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.4),
    -14px 0 0 -2px var(--bk-leather-d), -14px 0 22px -6px rgba(0,0,0,.6),  /* spine */
    0 40px 70px -24px rgba(0,0,0,.8);
  display: grid; place-items: center; overflow: hidden;
}
/* the raised spine band on the left */
.cover::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 26px;
  background: linear-gradient(90deg, rgba(0,0,0,.35), rgba(255,220,150,.08) 60%, rgba(0,0,0,.28));
  border-right: 1px solid rgba(0,0,0,.4);
}
.cover__plate {
  position: relative; text-align: center; width: min(82%, 500px);
  padding: clamp(24px, 5vw, 44px) clamp(16px, 4vw, 30px);
  border: 2px solid var(--bk-gilt-lo);
  border-radius: 2px;
  box-shadow: inset 0 0 0 4px transparent, inset 0 0 0 5px rgba(201,169,78,.5);
}
.cover__plate::before, .cover__plate::after {
  content: "❦"; position: absolute; left: 50%; transform: translateX(-50%);
  color: var(--bk-gilt); font-size: 22px; filter: drop-shadow(0 1px 0 rgba(0,0,0,.4));
}
.cover__plate::before { top: -14px; }
.cover__plate::after  { bottom: -18px; content: "✦"; }
.cover__pre { font-variant: small-caps; letter-spacing: .28em; font-size: 13px; margin: 0 0 18px; }
.cover__title {
  margin: 0; font-family: var(--bk-display); font-weight: 900;
  font-size: clamp(1.7rem, 6.2vw, 3.3rem); line-height: .98; letter-spacing: 0;
}
.cover__sub { margin: 14px 0 0; font-family: var(--bk-display); font-style: italic; font-weight: 500; font-size: clamp(1rem, 3.2vw, 1.5rem); }
.cover__rule { height: 2px; width: 62%; margin: 22px auto; background: linear-gradient(90deg, transparent, var(--bk-gilt), transparent); }
.cover__vol { font-variant: small-caps; letter-spacing: .2em; font-size: 14px; margin: 0; }
/* silk ribbon draped from the top of the board */
.cover__ribbon {
  position: absolute; top: 0; right: 9%; width: 24px; height: 58%;
  background: linear-gradient(90deg, #26473f, var(--bk-ribbon) 45%, #3a726a 55%, #23433c);
  box-shadow: 0 8px 14px -6px rgba(0,0,0,.6);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 84%, 0 100%);
}

/* =====================================================================
   Front matter — how to read an entry + contents
   ===================================================================== */
.dropcap::first-letter {
  float: left; font-family: var(--bk-display); font-weight: 900;
  font-size: 3.4em; line-height: .78; padding: 6px 10px 0 0; color: var(--bk-accent);
}
.section-h {
  font-family: var(--bk-display); font-weight: 700;
  font-size: clamp(1.5rem, 4vw, 2.1rem); margin: 0 0 .5rem; color: var(--bk-ink);
}
.lede { max-width: 62ch; color: var(--bk-ink-2); }

.legend { margin: 1.6rem 0; border: 1px solid var(--bk-rule); border-radius: 2px; background: rgba(255,255,255,.28); }
.legend__row { display: grid; grid-template-columns: 12ch 1fr; gap: 4px 16px; padding: 12px 16px; border-bottom: 1px solid var(--bk-rule-2); }
.legend__row:last-child { border-bottom: 0; }
.legend__k { font-variant: small-caps; letter-spacing: .05em; color: var(--bk-accent); }
.legend__v { color: var(--bk-ink-2); }

.contents { list-style: none; margin: 1.4rem 0 0; padding: 0; }
.contents li { display: flex; align-items: baseline; gap: 8px; padding: 10px 0; }
.contents a { text-decoration: none; color: var(--bk-ink); display: contents; }
.contents .num { font-family: var(--bk-mono); font-size: 13px; color: var(--bk-ink-3); min-width: 2.4ch; }
.contents .word { font-family: var(--bk-display); font-weight: 700; font-size: 1.25rem; }
.contents .pos { font-style: italic; color: var(--bk-ink-3); }
.contents .dots { flex: 1; border-bottom: 1px dotted var(--bk-rule); transform: translateY(-4px); }
.contents .pg { font-family: var(--bk-mono); font-size: 13px; color: var(--bk-ink-2); }
.contents .soon { color: var(--bk-ink-3); font-style: italic; }

/* =====================================================================
   Entry — the dictionary headword block
   ===================================================================== */
.entry__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 14px; }
.entry__word {
  margin: 0; font-family: var(--bk-display); font-weight: 900;
  font-size: clamp(2.2rem, 6.5vw, 3.4rem); line-height: 1; color: var(--bk-ink);
}
.entry__pron { font-size: 1.15rem; color: var(--bk-ink-2); }
.entry__pron::before, .entry__pron::after { content: none; }
.entry__pos { font-style: italic; color: var(--bk-accent); font-size: 1.05rem; }
.entry__hom { font-family: var(--bk-mono); font-size: 12px; color: var(--bk-ink-3); margin-left: auto; align-self: center; font-variant: small-caps; letter-spacing: .06em; }
.entry__etym { margin: .5rem 0 1.4rem; color: var(--bk-ink-3); font-style: italic; font-size: 1rem; }
.entry__etym b { color: var(--bk-accent-2); font-style: normal; font-variant: small-caps; letter-spacing: .04em; }

.senses { margin: 0; padding: 0; columns: 2; column-gap: 40px; column-rule: 1px solid var(--bk-rule-2); }
@media (max-width: 720px) { .senses { columns: 1; } }
.sense { break-inside: avoid; margin: 0 0 1rem; padding: 0; list-style: none; text-indent: -1.1em; padding-left: 1.1em; color: var(--bk-ink); }
.sense b { color: var(--bk-accent); font-weight: 700; }
.sense .tag { font-variant: small-caps; letter-spacing: .05em; color: var(--bk-ink-3); font-style: italic; }
.sense em { color: var(--bk-ink); }

.entry__div { display: flex; align-items: center; gap: 14px; margin: 2.2rem 0 1.4rem; color: var(--bk-accent); }
.entry__div::before, .entry__div::after { content: ""; height: 1px; background: var(--bk-rule); flex: 1; }
.entry__div span { font-variant: small-caps; letter-spacing: .16em; font-size: 14px; }

/* =====================================================================
   Plates — the live demos, framed as engraved illustrations
   ===================================================================== */
.plate { margin: 0 0 2.2rem; }
.plate__cap { font-variant: small-caps; letter-spacing: .08em; color: var(--bk-ink-3); font-size: 14px; margin-bottom: .7rem; }
.plate__cap b { color: var(--bk-accent); font-weight: 700; }
.plate__stage {
  position: relative; padding: clamp(20px, 4vw, 40px);
  background:
    repeating-linear-gradient(0deg, transparent 0 27px, rgba(122,37,40,.05) 27px 28px),
    rgba(255,255,255,.34);
  border: 1px solid var(--bk-rule); border-radius: 2px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.4), inset 0 0 22px rgba(122,37,40,.05);
}
.plate__note { font-family: var(--bk-mono); font-size: 12.5px; color: var(--bk-ink-3); margin-top: .8rem; line-height: 1.7; }

/* a small engraved specimen for the "beside" plate */
.specimen {
  display: inline-flex; flex-direction: column; gap: 8px;
  width: min(320px, 100%); padding: 18px 20px;
  background: var(--bk-vellum); border: 1px solid var(--bk-ink);
  border-radius: 2px; box-shadow: 3px 3px 0 rgba(42,32,24,.14);
}
.specimen__k { font-variant: small-caps; letter-spacing: .08em; color: var(--bk-accent); font-size: 13px; }
.specimen__fig { font-family: var(--bk-display); font-weight: 700; font-size: 2rem; }
.specimen__t { color: var(--bk-ink-2); font-style: italic; }

/* the dark-board re-skin plate (proves portability inside the book) */
.plate--board .plate__stage {
  background: var(--bk-grain), radial-gradient(120% 100% at 30% 0%, var(--bk-leather-h), var(--bk-leather-d));
  background-blend-mode: overlay, normal; border-color: #2b0e10;
}
.skin-board {
  --bubble-bg: #3d1416;
  --bubble-fg: #e7cf9a;
  --bubble-fg-em: var(--bk-gilt-hi);
  --bubble-accent: var(--bk-gilt);
  --bubble-border: var(--bk-gilt-lo);
  --bubble-radius: 2px;
  --bubble-font: var(--bk-display);
  --bubble-size: 17px;
}

/* =====================================================================
   Forms — the construction (API), as a specimen
   ===================================================================== */
.forms table { width: 100%; border-collapse: collapse; margin: 1.2rem 0; font-size: 16px; }
.forms th, .forms td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--bk-rule-2); vertical-align: top; }
.forms thead th { font-variant: small-caps; letter-spacing: .06em; color: var(--bk-ink-3); font-weight: 600; }
.forms td.k { font-family: var(--bk-mono); font-size: 12.5px; color: var(--bk-accent); }
.forms td:last-child { color: var(--bk-ink-2); }
.forms code, .lede code, .sense code {
  font-family: var(--bk-mono); font-size: .8em; color: var(--bk-accent);
  background: rgba(122,37,40,.07); padding: 1px 5px; border-radius: 2px;
}
.specimen-code {
  margin: 1.2rem 0; padding: 16px 20px; overflow-x: auto;
  background: rgba(255,255,255,.4); border: 1px solid var(--bk-rule);
  border-left: 3px solid var(--bk-accent); border-radius: 2px;
  font-family: var(--bk-mono); font-size: 12.5px; line-height: 1.75; color: var(--bk-ink);
}
.specimen-code .c { color: var(--bk-ink-3); }

/* =====================================================================
   Colophon
   ===================================================================== */
.colophon {
  max-width: 900px; margin: 0 auto; text-align: center;
  color: #caa96a; padding: clamp(20px, 5vw, 40px) 20px;
}
.colophon__mark { font-size: 26px; color: var(--bk-gilt); filter: drop-shadow(0 1px 0 rgba(0,0,0,.4)); }
.colophon p { margin: .5rem 0 0; font-variant: small-caps; letter-spacing: .06em; font-size: 14px; }
.colophon a { color: #d8b866; }

/* the Bubble's recall pill reads better without all-caps in a book */
.bubble__recall { text-transform: none; letter-spacing: .02em; font-variant: small-caps; }