/* ============================================================================
   The Colonial Record — gazette search platform
   Aesthetic: archival / editorial. Ink on laid paper, ledger rules, letterpress
   display type. Serious, source-driven, never AI-hyped.
   Shared stylesheet for all pages.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,400;1,9..144,500&family=Spectral:ital,wght@0,300;0,400;0,500;0,600;1,400&family=Newsreader:ital,opsz@0,6..72;1,6..72&family=IM+Fell+English:ital@0;1&family=IM+Fell+English+SC&display=swap');

:root {
  /* Ink & paper palette — warm archival, not stark white */
  --paper:       #f4efe4;   /* aged laid paper */
  --paper-deep:  #ebe3d2;   /* card / panel */
  --paper-edge:  #ded3bc;   /* hairline borders */
  --ink:         #20180f;   /* near-black warm ink */
  --ink-soft:    #4a3e2e;   /* secondary text */
  --ink-faint:   #7a6c55;   /* tertiary / captions */
  --rule:        #cbbfa6;   /* ledger rule lines */

  /* The single sharp accent — a sealing-wax / vermilion red used sparingly */
  --seal:        #9c2b1b;
  --seal-deep:   #76200f;

  /* A secondary archival ink — verdigris green for "verified / source" cues */
  --verdigris:   #3a5a48;

  /* Confidence chips */
  --conf-high:   #3a5a48;
  --conf-med:    #9a6b1e;
  --conf-low:    #8a6d52;
  --conf-review: #9c2b1b;

  --shadow-card: 0 1px 0 #fff6, 0 2px 14px rgba(32,24,15,.10);
  --shadow-lift: 0 2px 0 #fff6, 0 14px 40px rgba(32,24,15,.20);

  --serif-display: 'Fraunces', Georgia, serif;
  --serif-body:    'Spectral', Georgia, serif;
  --serif-news:    'Newsreader', Georgia, serif;
  /* IM Fell — digitisations of genuine 17th–18th c. printing types; used for
     the nameplate and "period artefact" moments only, never for UI chrome */
  --serif-fell:    'IM Fell English', 'Iowan Old Style', Georgia, serif;
  --serif-fell-sc: 'IM Fell English SC', 'IM Fell English', Georgia, serif;

  --maxw: 1180px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
/* smooth-scroll anchors must clear the sticky masthead (M2) — without this,
   scrollIntoView/#anchor targets land underneath it */
[id] { scroll-margin-top: 96px; }

body {
  margin: 0;
  /* belt-and-braces against viewport zoom-out (M1): the real offenders are
     fixed (minmax(0,…) grids); this stops any future stray from re-expanding
     the layout viewport. The sweep measures element right-edges, so this
     clip cannot hide a regression from the metric. */
  overflow-x: clip;
  background-color: var(--paper);
  /* paper grain + faint vignette, no external assets */
  background-image:
    radial-gradient(circle at 18% -8%, #fffdf6 0%, transparent 45%),
    radial-gradient(circle at 120% 120%, #e3d9c2 0%, transparent 55%),
    /* laid-paper chain lines — the faint vertical ribs of handmade paper */
    repeating-linear-gradient(90deg, transparent 0 95px, rgba(74,62,46,.028) 95px 96px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
  color: var(--ink);
  font-family: var(--serif-body);
  font-size: 18px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--seal); text-decoration: none; }
a:hover { color: var(--seal-deep); text-decoration: underline; text-underline-offset: 3px; }

/* text selection swipes in sealing-wax red — even highlighting feels archival */
::selection { background: var(--seal); color: #fdf8ec; }
:focus-visible { outline: 2px solid var(--seal); outline-offset: 2px; border-radius: 1px; }

/* every button presses like a platen — one consistent letterpress "thunk" */
button:active { transform: translateY(1px); }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }

/* ---------- Masthead ----------------------------------------------------- */

.masthead {
  /* thick-thin "Scotch rule" — the signature divider of 19th-c. newspapers */
  border-bottom: 1px solid var(--ink);
  background:
    linear-gradient(var(--paper), var(--paper));
  position: sticky; top: 0; z-index: 50;
  box-shadow: 0 1px 0 #fff8, 0 6px 18px rgba(32,24,15,.06);
}
.masthead::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 2px;
  height: 3px; background: var(--ink);
}
.masthead .wrap {
  display: flex; align-items: center; gap: 26px;
  padding-top: 14px; padding-bottom: 14px;
}
.brand {
  font-family: var(--serif-fell-sc);
  font-weight: 400;
  font-size: 28px;
  letter-spacing: .015em;
  line-height: 1;
  color: var(--ink);
  white-space: nowrap;
  display: flex; flex-direction: column; gap: 4px;
}
.brand:hover { text-decoration: none; color: var(--ink); }
.brand .sub {
  font-family: var(--serif-body);
  font-weight: 400;
  font-size: 10.5px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--ink-faint);
  display: flex; align-items: center; gap: 8px;
}
.brand .sub::before, .brand .sub::after {
  content: "❦"; font-size: 9px; color: var(--seal); letter-spacing: 0;
}
.mast-nav { display: flex; gap: 22px; margin-left: auto; align-items: center; }
.mast-nav a {
  color: var(--ink-soft);
  font-size: 14px;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-family: var(--serif-body);
}
.mast-nav a:hover { color: var(--seal); text-decoration: none; }
.mast-nav a.on { color: var(--seal); }
.mast-cta {
  border: 1.5px solid var(--seal);
  padding: 7px 16px;
  border-radius: 2px;
  color: var(--seal) !important;
  transition: background .15s, color .15s;
}
.mast-cta:hover { background: var(--seal); color: var(--paper) !important; }

/* member account dropdown (rendered by nav.js when a session is live) */
.mast-account { position: relative; }
.mast-account summary {
  list-style: none; cursor: pointer;
  font-family: var(--serif-body); font-size: 14px; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ink-soft);
  border: 1.5px solid var(--ink); border-radius: 2px; padding: 7px 16px;
  transition: background .15s, color .15s;
}
.mast-account summary::-webkit-details-marker { display: none; }
.mast-account summary::after { content: " ▾"; font-size: 11px; }
.mast-account[open] summary, .mast-account summary:hover { background: var(--ink); color: var(--paper); }
.mast-account .menu {
  position: absolute; right: 0; top: calc(100% + 12px); min-width: 250px;
  background: var(--paper); border: 1.5px solid var(--ink); border-radius: 2px;
  box-shadow: var(--shadow-lift); padding: 14px 16px; z-index: 60;
  display: flex; flex-direction: column; gap: 9px;
}
.mast-account .menu .who { font-family: var(--serif-body); font-size: 13.5px; color: var(--ink); overflow-wrap: anywhere; }
.mast-account .menu .quota {
  font-family: var(--serif-body); font-size: 12px; color: var(--ink-faint);
  padding-bottom: 9px; border-bottom: 1px solid var(--rule);
}
.mast-account .menu a { font-size: 13.5px; text-transform: none; letter-spacing: 0; color: var(--ink-soft); }
.mast-account .menu a:hover { color: var(--seal); }
.mast-account .menu .signout {
  align-self: flex-start; margin-top: 3px; padding: 0; border: 0; background: none;
  font-family: var(--serif-body); font-size: 13.5px; color: var(--seal); cursor: pointer;
}
.mast-account .menu .signout:hover { text-decoration: underline; }

/* ---------- Example pills (shared: home hero, ask page) ------------------ */

.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pill {
  font-family: var(--serif-body); font-size: 13.5px; color: var(--ink-soft);
  border: 1px solid var(--rule); border-radius: 999px; padding: 5px 14px;
  background: var(--paper); transition: all .15s;
}
.pill:hover { border-color: var(--seal); color: var(--seal); text-decoration: none; }

/* ---------- Search bar (shared) ----------------------------------------- */

.searchbar {
  display: flex; align-items: stretch;
  border: 1.5px solid var(--ink);
  border-radius: 3px;
  background: #fbf7ee;
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.searchbar input {
  flex: 1; min-width: 0; border: 0; background: transparent;
  padding: 16px 20px;
  font-family: var(--serif-body); font-size: 19px; color: var(--ink);
}
.searchbar input::placeholder { color: var(--ink-faint); font-style: italic; }
.searchbar input:focus { outline: none; }
.searchbar button {
  border: 0; cursor: pointer;
  background: var(--ink); color: var(--paper);
  font-family: var(--serif-body); font-size: 15px;
  letter-spacing: .12em; text-transform: uppercase;
  padding: 0 30px;
  transition: background .15s;
}
.searchbar button:hover { background: var(--seal); }

/* search scope chips under the bar */
.scopes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.scope {
  font-family: var(--serif-body); font-size: 13.5px;
  border: 1px solid var(--paper-edge);
  background: var(--paper-deep);
  color: var(--ink-soft);
  padding: 5px 13px; border-radius: 100px; cursor: pointer;
  transition: all .14s;
}
.scope:hover { border-color: var(--ink); color: var(--ink); }
.scope.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* ---------- Confidence chip --------------------------------------------- */

.conf {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--serif-body); font-size: 12px;
  letter-spacing: .06em; text-transform: uppercase;
  padding: 3px 9px 3px 8px; border-radius: 2px;
  border: 1px solid currentColor;
}
.conf::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: currentColor;
}
.conf.high   { color: var(--conf-high); }
.conf.med    { color: var(--conf-med); }
.conf.low    { color: var(--conf-low); }
.conf.review { color: var(--conf-review); }

/* ---------- Notice card (the teaser — the product's atom) --------------- */

.cards { display: grid; gap: 20px; }

.notice {
  position: relative;
  background:
    linear-gradient(#fbf7ee, #f6f1e4);
  border: 1px solid var(--paper-edge);
  border-radius: 3px;
  padding: 22px 24px 20px;
  box-shadow: var(--shadow-card);
  transition: transform .16s ease, box-shadow .16s ease;
}
.notice:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
/* torn-clipping top edge */
.notice::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px;
  background: var(--seal);
  opacity: .0; transition: opacity .16s;
}
.notice:hover::before { opacity: .85; }

.notice-top {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  border-bottom: 1px solid var(--rule); padding-bottom: 11px; margin-bottom: 13px;
}
.notice-type {
  font-family: var(--serif-display);
  font-weight: 600; font-size: 19px; color: var(--ink);
  letter-spacing: .01em;
}
.notice-type .yr {
  font-family: var(--serif-body); font-weight: 400;
  color: var(--ink-faint); font-size: 15px; margin-left: 9px;
}
.snippet {
  font-family: var(--serif-news); font-size: 17px; color: var(--ink-soft);
  margin: 0 0 14px;
}
.snippet b { color: var(--ink); font-weight: 600; }
/* search-term highlight — a soft amber highlighter swipe, archival not neon */
mark {
  background: linear-gradient(180deg, transparent 8%, #f4d58a 8%, #f0c96a 90%, transparent 90%);
  color: inherit; font-weight: 600;
  padding: 0 1px; border-radius: 1px;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
/* entity emphasis is DISTINCT from a search hit: a quiet underline, not a
   highlighter swipe — so "extracted entity" never reads as "search match". */
.ent-emph {
  border-bottom: 1.5px solid var(--verdigris);
  padding-bottom: 1px;
}
/* "Not applicable" confidence axis — muted, clearly inert (no coloured dot) */
.conf.na {
  color: var(--ink-faint); border-color: var(--paper-edge);
  border-style: dashed;
}
.conf.na::before { display: none; }
.snippet .ocr { /* simulated OCR-uncertain token */
  border-bottom: 1px dotted var(--conf-med); cursor: help;
}
.entities { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 15px; }
.ent {
  font-family: var(--serif-body); font-size: 13px;
  background: var(--paper-deep); border: 1px solid var(--paper-edge);
  color: var(--ink-soft);
  padding: 3px 10px; border-radius: 2px;
}
.ent .k { color: var(--ink-faint); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; margin-right: 4px; }
.ent.person { border-left: 2px solid var(--seal); }
.ent.place  { border-left: 2px solid var(--verdigris); }
.ent.occ    { border-left: 2px solid var(--conf-med); }

.cite {
  font-family: var(--serif-body); font-style: italic;
  font-size: 13.5px; color: var(--ink-faint);
}
.notice-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--rule);
}
.unlock {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--serif-body); font-size: 14px;
  letter-spacing: .04em;
  border: 1.5px solid var(--ink); color: var(--ink);
  padding: 7px 15px; border-radius: 2px; cursor: pointer;
  background: transparent; transition: all .15s;
}
.unlock:hover { background: var(--seal); border-color: var(--seal); color: #fff; }
/* the emoji padlock reads as UI chrome; a blob of sealing wax reads as the
   product. Hide the markup glyph, stamp a wax dot in its place. */
.unlock .lock { display: none; }
.unlock::before {
  content: ""; flex: 0 0 auto; width: 14px; height: 14px;
  border-radius: 47% 53% 50% 50% / 55% 48% 52% 45%;
  background: radial-gradient(circle at 35% 30%, #d05a40, var(--seal) 55%, var(--seal-deep));
  box-shadow: inset 0 -1px 2px rgba(46,8,3,.45), inset 0 1px 1px rgba(255,255,255,.35);
  transition: background .15s;
}
.unlock:hover::before {
  background: radial-gradient(circle at 35% 30%, #fffdf6, #f1e6d2 60%, #ddcdb0);
  box-shadow: inset 0 -1px 2px rgba(46,8,3,.25), inset 0 1px 1px rgba(255,255,255,.7);
}
.btn-ghost {
  font-family: var(--serif-body); font-size: 14px;
  color: var(--ink-soft); border: 0; background: none; cursor: pointer;
  letter-spacing: .03em;
}
.btn-ghost:hover { color: var(--seal); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Section headings -------------------------------------------- */

.kicker {
  font-family: var(--serif-body); font-size: 12px;
  letter-spacing: .26em; text-transform: uppercase;
  color: var(--seal); margin: 0 0 10px;
}
h1.display {
  font-family: var(--serif-display);
  font-weight: 500; font-size: clamp(34px, 6vw, 64px);
  line-height: 1.03; letter-spacing: -.012em; margin: 0;
  color: var(--ink);
}
h2.section {
  font-family: var(--serif-display); font-weight: 500;
  font-size: 26px; margin: 0 0 4px; color: var(--ink);
  display: flex; align-items: center; gap: 14px;
}
h2.section::before { content: "❧"; color: var(--seal); font-size: 17px; line-height: 1; }
h2.section::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, var(--rule), transparent);
}

/* ---------- Footer ------------------------------------------------------ */

.site-foot {
  margin-top: 80px; border-top: 0;
  background: #efe7d6;
}
/* inverted Scotch rule (thin over thick) closes the page like a colophon */
.site-foot::before {
  content: ""; display: block; height: 6px;
  border-top: 1px solid var(--ink); border-bottom: 3px solid var(--ink);
}
.site-foot .wrap { padding-top: 40px; padding-bottom: 48px; }
/* minmax(0,…): a bare fr track can never shrink below its content's
   min-content width — the brand column's nowrap nameplate was pushing every
   page into horizontal overflow at phone widths (M1) */
.foot-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 36px; }
.site-foot h4 {
  font-family: var(--serif-body); text-transform: uppercase;
  letter-spacing: .14em; font-size: 12px; color: var(--ink-faint);
  margin: 0 0 14px; font-weight: 500;
}
.site-foot ul { list-style: none; padding: 0; margin: 0; }
.site-foot li { margin-bottom: 8px; }
.site-foot a { color: var(--ink-soft); font-size: 15px; }
.foot-brand .brand { margin-bottom: 12px; }
.trust-line {
  font-family: var(--serif-body); font-style: italic;
  font-size: 14.5px; color: var(--ink-faint); max-width: 34ch; line-height: 1.5;
}

/* ---------- The wax seal (the paywall, made physical) -------------------- */
/* An irregular blob of sealing wax with an embossed CR die. Used at every
   unlock moment; on the notice page it cracks open when the record unlocks. */

.wax-seal {
  position: relative; width: 74px; height: 74px;
  border-radius: 46% 54% 52% 48% / 53% 47% 55% 45%;
  background: radial-gradient(circle at 33% 28%, #c8553c 0%, #a33420 38%, #7e2212 70%, #5e150b 100%);
  box-shadow:
    inset 0 2px 5px rgba(255,255,255,.28),
    inset 0 -4px 7px rgba(46,8,3,.55),
    0 3px 10px rgba(94,21,11,.35);
}
.wax-seal::before { /* stray drip of wax */
  content: ""; position: absolute; right: -7px; bottom: 7px; width: 18px; height: 14px;
  border-radius: 60% 40% 55% 45% / 60% 55% 45% 40%;
  background: radial-gradient(circle at 35% 30%, #b34228, #7e2212 70%);
  box-shadow: inset 0 -2px 3px rgba(46,8,3,.5), inset 0 1px 2px rgba(255,255,255,.2);
}
.wax-seal::after { /* the embossed die: ring + monogram */
  content: "CR"; position: absolute; inset: 9px;
  border-radius: 50%; display: grid; place-items: center;
  font-family: var(--serif-fell-sc); font-size: 22px; color: #e9b3a3;
  text-shadow: 0 -1px 1px rgba(46,8,3,.85), 0 1px 1px rgba(255,255,255,.25);
  border: 2px solid rgba(46,8,3,.45);
  box-shadow: inset 0 1px 2px rgba(255,255,255,.18), 0 1px 1px rgba(255,255,255,.15);
}
.wax-seal.sm { width: 48px; height: 48px; }
.wax-seal.sm::after { inset: 6px; font-size: 14px; border-width: 1.5px; }
.wax-seal.sm::before { width: 12px; height: 9px; right: -4px; bottom: 4px; }

/* ---------- Drop cap ------------------------------------------------------ */

.dropcap::first-letter {
  font-family: var(--serif-fell); font-size: 3.1em; line-height: .78;
  float: left; padding: .08em .09em 0 0; color: var(--seal-deep);
}

/* utility */
.muted { color: var(--ink-faint); }
.center { text-align: center; }
.lede { font-size: 21px; color: var(--ink-soft); font-family: var(--serif-news); }
.onum { font-feature-settings: "onum" 1; font-variant-numeric: oldstyle-nums; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}

/* ---------- Phone / small-tablet layout (M1–M3, M6) ---------------------- */

/* the Menu disclosure + quick links are built by nav.js; invisible on desktop */
.mast-menu, .mast-quick { display: none; }

@media (max-width: 860px) {
  .foot-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

  /* M3: the nav becomes a labelled disclosure panel under the masthead —
     brand + Search + the CTA stay visible, everything else behind "Menu"
     (a word, not a glyph: this demographic doesn't guess at hamburgers) */
  .mast-nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--paper); border-bottom: 3px solid var(--ink);
    box-shadow: var(--shadow-lift); padding: 4px 22px 16px; z-index: 70;
  }
  .mast-nav.open { display: flex; }
  .mast-nav a {
    display: flex; align-items: center; min-height: 44px;
    font-size: 16px; padding: 4px 2px; border-bottom: 1px solid var(--rule);
  }
  .mast-nav a.mast-cta { border: 1.5px solid var(--seal); margin-top: 12px; justify-content: center; }
  .mast-account { margin-top: 10px; }
  .mast-account .menu { position: static; min-width: 0; margin-top: 10px; box-shadow: none; }
  .mast-quick { display: inline-flex; gap: 14px; margin-left: auto; align-items: center; }
  .mast-quick a {
    display: inline-flex; align-items: center; min-height: 44px;
    color: var(--ink-soft); font-size: 13px; letter-spacing: .04em;
    text-transform: uppercase; font-family: var(--serif-body);
  }
  .mast-quick a.mast-cta { padding: 7px 13px; }
  .mast-menu {
    display: inline-flex; align-items: center; min-height: 44px;
    border: 1.5px solid var(--ink); border-radius: 2px; background: none;
    font-family: var(--serif-body); font-size: 13px; letter-spacing: .06em;
    text-transform: uppercase; color: var(--ink); padding: 7px 13px; cursor: pointer;
  }

  /* M2/M6: 44px floor on everything a thumb pays money through */
  .unlock, .unlock-mini, .unlock-big, .mast-cta, .searchbar button {
    min-height: 44px;
  }
  [id] { scroll-margin-top: 118px; }
}

@media (max-width: 600px) {
  /* brand + quick links + Menu can't share one row below ~600px:
     brand on its own line; Search · Start free · Menu on the row below */
  .masthead .wrap { flex-wrap: wrap; gap: 2px 14px; padding-top: 10px; padding-bottom: 8px; }
  .masthead .brand { flex-basis: 100%; }
  .mast-quick { margin-left: 0; margin-right: auto; }
  [id] { scroll-margin-top: 128px; }
}

@media (max-width: 480px) {
  .wrap { padding: 0 18px; }
  .searchbar input { padding: 14px 14px; font-size: 17px; }
  .searchbar button { padding: 0 16px; font-size: 13px; }
  .foot-grid { grid-template-columns: 1fr; gap: 28px; }
  /* the nameplate: smaller, and the letterspaced sub-line reined in so its
     min-content fits a 360px paper width */
  .brand { font-size: 21px; }
  .brand .sub { font-size: 9px; letter-spacing: .14em; }
}

/* ---- zoomview: pan/zoom page-scan viewer (zoomview.js) ---- */
.zv { cursor: zoom-in; }
.zv.zv-zoomed { cursor: grab; }
.zv.zv-zoomed:active { cursor: grabbing; }
.zv img.zv-img {
  position: absolute; top: 0; left: 0; max-width: none;
  transform-origin: 0 0; will-change: transform;
}
.zv img.zv-anim { transition: transform .24s ease; }
.zv-ctrls {
  position: absolute; top: 10px; right: 10px; z-index: 3;
  display: flex; flex-direction: column; gap: 6px;
}
.zv-ctrls button {
  width: 34px; height: 34px; padding: 0;
  border: 1px solid var(--paper-edge); border-radius: 3px;
  background: rgba(251,247,238,.92); color: var(--ink);
  font-family: var(--serif-body); font-size: 17px; line-height: 1;
  cursor: pointer; box-shadow: 0 1px 4px rgba(32,24,15,.18);
}
.zv-ctrls button:hover { background: #fff; color: var(--seal); }

/* zoomview: overlay layer (tracks the image transform; % coords = page coords) */
.zv .zv-overlay {
  position: absolute; top: 0; left: 0; transform-origin: 0 0;
  pointer-events: none; z-index: 2;
}
.zv .zv-overlay.zv-anim { transition: transform .24s ease; }

/* zoom percentage readout */
.zv-pct {
  position: absolute; left: 10px; bottom: 10px; z-index: 3;
  background: rgba(32,24,15,.78); color: var(--paper);
  font-family: var(--serif-body); font-size: 12px; letter-spacing: .05em;
  padding: 4px 9px; border-radius: 2px;
  opacity: 0; transition: opacity .25s ease; pointer-events: none;
}
.zv-pct.show { opacity: 1; }

/* loading shimmer while the page scan downloads */
.zv.zv-loading::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(100deg, #efe7d4 40%, #f7f1e3 50%, #efe7d4 60%);
  background-size: 200% 100%;
  animation: zvShimmer 1.2s linear infinite;
}
@keyframes zvShimmer { from { background-position: 130% 0; } to { background-position: -70% 0; } }

/* ---- overlay markers (drawn in page coords inside .zv-overlay) ---- */
/* a semi-transparent wash with a halo AROUND the word — never an opaque
   cover; holds ~2s to orient the eye, then fades so the type stays readable */
.ov-hl {
  position: absolute; border-radius: 3px; pointer-events: none;
  background: rgba(255, 222, 84, .32);
  box-shadow: 0 0 0 6px rgba(255, 222, 84, .22);
  animation: ovFade 3s ease forwards;
}
.ov-hl.flash { animation: ovFlash 3s ease forwards; }
@keyframes ovFade {
  0%, 70% { opacity: 1; }
  100%    { opacity: 0; }
}
@keyframes ovFlash {
  0%   { background: rgba(255, 222, 84, .5); box-shadow: 0 0 0 11px rgba(255, 222, 84, .38); }
  25%  { background: rgba(255, 222, 84, .32); box-shadow: 0 0 0 6px rgba(255, 222, 84, .22); }
  70%  { opacity: 1; }
  100% { opacity: 0; }
}
.ov-bracket {
  position: absolute; width: 7px;
  border: 2px solid var(--seal); border-radius: 2px;
}
.ov-bracket.left  { border-right: 0; }
.ov-bracket.right { border-left: 0; }
.ov-bracket .lbl {
  position: absolute; top: 0; white-space: nowrap;
  writing-mode: vertical-rl; text-orientation: mixed;
  background: var(--seal); color: #fff;
  font-family: var(--serif-body); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; padding: 8px 2px; border-radius: 2px;
}
.ov-bracket.left  .lbl { left: 9px; }
.ov-bracket.right .lbl { right: 9px; transform: rotate(180deg); }