/* Rodovid Archive — the warm world.
   Every value is taken from the delivered tree, so the site and the product look like one place:
   the palette, the system serif stack, the parchment ground, the tooled-leather header, the node
   card, the wax seals, the gold button, the mono shelfmark.

   Parchment is a base colour plus two radial gradients — no texture image, no external request of
   any kind: no CDN, no font API, no analytics, no @font-face. */

:root {
  --parch1:#efe2c2; --parch2:#e4d2a8; --ink:#3b2a17; --ink2:#5c4526; --muted:#8a6f49;
  --gold:#b3872f; --gold2:#d8b24e; --line:#b79a63;
  --mat:#2f6e5b; --mat-d:#204b3e; --pat:#8a3324; --pat-d:#5f2118;
  --panel:#f7efd9; --shadow:rgba(60,40,15,.35);
  --leather-a:#4a3115; --leather-b:#3a2611;
  --measure: 40rem;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font: 17px/1.62 "Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  color: var(--ink);
  background-color: var(--parch2);
  background-image:
    radial-gradient(circle at 18% 12%, rgba(255,250,235,.55), transparent 45%),
    radial-gradient(circle at 84% 82%, rgba(120,86,40,.18), transparent 52%);
  background-attachment: fixed;
}

/* ---- the tooled-leather band, the artifact's own header ---- */
.band {
  background: linear-gradient(180deg, var(--leather-a), var(--leather-b));
  border-bottom: 3px solid var(--gold);
  color: #f2e4c4;
}
.band a { color: #f2e4c4; }
.band-in {
  max-width: 62rem; margin: 0 auto; padding: 14px 22px;
  display: flex; gap: 18px; align-items: baseline; flex-wrap: wrap;
}
.brand { font-size: 19px; font-weight: 700; letter-spacing: .01em; text-decoration: none; }
.brand .crest { color: var(--gold2); margin-right: 7px; }   /* the service's mark, header only */
.band nav { margin-left: auto; display: flex; gap: 16px; flex-wrap: wrap; font-size: 15px; }
.band nav a { text-decoration: none; opacity: .88; }
.band nav a:hover, .band nav a[aria-current] { opacity: 1; text-decoration: underline; }
.band nav .nav-cta { opacity: 1; text-decoration: none; padding: 4px 13px; border-radius: 8px;
  background: linear-gradient(180deg, var(--gold2), var(--gold)); color: #2c1f0c; font-weight: 700; }
.band nav .nav-cta:hover { text-decoration: none; filter: brightness(1.05); }

/* ---- page ---- */
main { max-width: 62rem; margin: 0 auto; padding: 34px 22px 72px; }
.measure { max-width: var(--measure); }
h1 { font-size: 34px; line-height: 1.18; margin: 0 0 18px; font-weight: 700; }
h2 { font-size: 23px; margin: 40px 0 12px; font-weight: 700; }
h3 { font-size: 18px; margin: 26px 0 8px; font-weight: 700; }
p, li { max-width: var(--measure); }
a { color: var(--pat-d); }
.lede { font-size: 20px; line-height: 1.55; color: var(--ink2); }
.muted { color: var(--muted); }
hr { border: 0; border-top: 1px solid var(--line); margin: 34px 0; }

/* ---- the rule-drawn table: 1a «Читальня». The shelfmark sits level with the fact, never
       as a caption under it ---- */
table { border-collapse: collapse; width: 100%; margin: 16px 0; font-size: 16px; }
caption { text-align: left; color: var(--muted); font-size: 14px; padding-bottom: 6px; }
th, td { text-align: left; padding: 8px 14px 8px 0; border-bottom: 1px solid var(--line);
         vertical-align: top; }
th { font-size: 12px; text-transform: uppercase; letter-spacing: .07em;
     color: var(--muted); font-weight: 700; }
.shelf { font: 14px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--ink2); }

/* ---- wax seals: the confidence field that already exists in the data, never decoration ---- */
.seal { display: inline-block; width: 18px; height: 18px; border-radius: 50%;
        vertical-align: -3px; margin-right: 7px; text-align: center; line-height: 18px;
        font-size: 11px; color: #fff9ec; box-shadow: 0 1px 2px var(--shadow); }
.seal-ok    { background: radial-gradient(circle at 35% 30%, #4a8f77, var(--mat-d)); }
.seal-maybe { background: radial-gradient(circle at 35% 30%, #c79a4a, #7a5a1e); }
.seal-guess { background: radial-gradient(circle at 35% 30%, #9c9086, #5f574f); }
.legend { display: flex; gap: 22px; flex-wrap: wrap; font-size: 15px; color: var(--ink2);
          margin: 14px 0; }

/* a source we cannot use is struck through, never coloured red — red is the paternal line */
.blocked { text-decoration: line-through; text-decoration-thickness: 1px; color: var(--muted); }

/* ---- panels ---- */
.panel { background: var(--panel); border: 1.5px solid var(--line); border-radius: 11px;
         padding: 18px 20px; margin: 22px 0; max-width: var(--measure); }
.panel h3:first-child, .panel p:first-child { margin-top: 0; }
.panel-quote { border-left: 6px solid var(--gold); border-radius: 0 11px 11px 0; }

/* the empty ancestor slot — «не знайдено» is a labelled field, never a blank */
.slot { border: 1.5px dashed var(--line); border-radius: 11px; padding: 14px 16px;
        color: var(--ink2); background: rgba(247,239,217,.55); max-width: var(--measure); }

/* ---- the one gold button. Only €59 carries one anywhere on the site ---- */
.btn {
  display: inline-block; padding: 13px 26px; border-radius: 11px;
  background: linear-gradient(180deg, var(--gold2), var(--gold));
  color: #2c1f0c; font-weight: 700; font-size: 17px; text-decoration: none;
  border: 1.5px solid #8f6a1f; box-shadow: 0 1px 3px var(--shadow);
}
.btn:hover { filter: brightness(1.05); }
.btn-note { font-size: 15px; color: var(--ink2); margin-top: 10px; }

/* ---- the coverage lookup ---- */
.lookup { display: flex; gap: 12px; flex-wrap: wrap; align-items: end;
          margin: 18px 0; max-width: var(--measure); }
.lookup-hero { max-width: none; }
.fld { display: flex; flex-direction: column; gap: 5px; flex: 1 1 15rem; min-width: 0; }
.fld > span { font: 700 11px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
              letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.lookup input, .lookup select {
  width: 100%; padding: 12px 14px; font: inherit; font-size: 17px;
  color: var(--ink); background: var(--panel);
  border: 1.5px solid var(--line); border-radius: 11px;
}
.lookup input:focus, .lookup select:focus { outline: 2px solid var(--gold); outline-offset: 1px; }
.lookup button.btn { font-family: inherit; cursor: pointer; }

/* the closing block on the pages that used to argue the case and then offer nothing */
.cta { border-top: 3px solid var(--gold); margin-top: 48px; padding-top: 20px; }
.cta h2 { margin-top: 0; }
.results { list-style: none; padding: 0; margin: 0; max-width: var(--measure); }
.results li { border-bottom: 1px solid var(--line); padding: 9px 0; }
.results a { text-decoration: none; font-weight: 700; }
.results .where { color: var(--muted); font-size: 15px; }

/* ---- verdict blocks: D and E are good answers, not error states ---- */
.verdict { border: 1.5px solid var(--line); border-left-width: 6px; border-radius: 0 11px 11px 0;
           padding: 16px 18px; margin: 20px 0; background: var(--panel);
           max-width: var(--measure); }
.v-self  { border-left-color: var(--mat); }     /* you can do this yourself */
.v-work  { border-left-color: var(--gold); }    /* this is work worth buying */
.v-no    { border-left-color: var(--muted); }   /* we will not do this */
.v-unmapped { border-left-color: var(--line); }
.verdict h3 { margin: 0 0 8px; }

/* ---- composition: direction 3a «Обкладинка». The document is the first screen ---- */
.eyebrow { font: 700 11px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
           letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 0 0 14px; }
.hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 0;
        border-bottom: 1px solid var(--line); margin: -34px -22px 0; }
.hero-text { padding: 56px 44px 52px 22px; align-self: center; }
.hero h1 { font-size: clamp(30px, 4.2vw, 50px); line-height: 1.08; letter-spacing: -.01em;
           margin: 0 0 20px; }
.hero .lede { margin: 0 0 26px; }
.hero figure { margin: 0; position: relative; min-height: 440px; overflow: hidden;
               border-left: 1px solid var(--line); background: var(--panel); }
.hero figure img { position: absolute; inset: 0; width: 100%; height: 100%;
                   object-fit: cover; object-position: 50% 22%; }

/* every image on this site is a real document and says which one it is */
figcaption { font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
             color: var(--ink2); background: rgba(247,239,217,.94);
             padding: 8px 12px; border-top: 1px solid var(--line); }
figcaption a { color: var(--ink2); }

/* A frame in prose fills its column, so the citation strip lines up with the image edge instead
   of overhanging it. Every framed variant below sets its own img rule and wins on specificity. */
figure > img { width: 100%; height: auto; display: block; }

/* The overlay is for figures that crop their image to a fixed frame, and only those: each one
   below sets position:relative itself. A bare <figure> in prose has no positioned ancestor, so an
   absolute caption escapes to the initial containing block — which is what silently hid all three
   ЦДІАЛ citations on /1891/. The citation is the whole condition under which we may publish an
   archival frame at all, so the safe default is in-flow, and the overlay is opted into. */
.hero figure figcaption, .strip figcaption,
.figure-wide figcaption, .figure-plate figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; }

/* the dark counter band — our own published failure, in the reading-room ground */
.dark { background: linear-gradient(180deg, #3a2611, var(--deep, #2c1c0b));
        color: #e6d5ae; margin: 0 -22px; padding: 40px 22px;
        border-top: 3px solid var(--gold); border-bottom: 3px solid var(--gold); }
.dark .eyebrow { color: #c8a86a; }
.dark-in { max-width: 62rem; margin: 0 auto; display: grid;
           grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; }
.dark p, .dark li { color: #e6d5ae; max-width: none; }
.kpi { font-variant-numeric: tabular-nums; font-size: clamp(26px, 3.4vw, 40px);
       line-height: 1.06; margin: 0 0 10px; }

/* a shelf of covers — the archive as an object, not an idea */
.strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 0; }
.strip figure { margin: 0; position: relative; height: 190px; overflow: hidden;
                border: 1px solid var(--line); background: var(--panel); }
.strip img { width: 100%; height: 100%; object-fit: cover; display: block; }
.strip figcaption { font-size: 11px; padding: 5px 8px; }

/* Wider than the text column and narrower than the page — the size that did not exist, which is
   why every register frame was squeezed into the measure and showed nothing (B-085). */
.figure-full { margin: 30px 0; position: relative; max-width: 100%; overflow: hidden;
               border: 1px solid var(--line); background: var(--panel); }
.figure-full img { width: 100%; height: auto; display: block; }

.figure-wide { margin: 26px 0; position: relative; border: 1px solid var(--line);
               overflow: hidden; max-width: var(--measure); }
.figure-wide img { width: 100%; display: block; }

/* a single plate on an inner page — the same crop as the hero, at reading width */
.figure-plate { margin: 26px 0; position: relative; max-width: var(--measure); height: 300px;
                overflow: hidden; border: 1px solid var(--line); background: var(--panel); }
.figure-plate img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%;
                    display: block; }

/* ---- the rail: the left edge of an опис. Shelfmarks and counts in the margin, the answer
       in the column beside it ---- */
.pagehead { border-bottom: 1px solid var(--line); padding-bottom: 20px; margin-bottom: 28px; }
.pagehead h1 { margin-bottom: 14px; }
.pagehead .lede { margin: 0; }

.cols { display: grid; grid-template-columns: 250px 1fr; gap: 36px; align-items: start; }
.cols > * { min-width: 0; }          /* a wide table must never widen the whole page */
.colmain > :first-child { margin-top: 0; }

/* A five-column опис does not fit a 375px screen. It scrolls inside its own frame instead of
   dragging the page sideways: no column is dropped and no type shrinks, because the шифр
   column is the evidence. The gradients are the edge cue — parchment covers pinned to the
   content, shadows pinned to the frame, so a shadow shows exactly while there is more to see. */
.scroll-x { overflow-x: auto; margin: 16px 0; max-width: 100%; }
.scroll-x table { margin: 0; }

.rail { font: 13px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--ink2); }
.rail dl { margin: 0; }
.rail-row { border-bottom: 1px solid var(--line); padding: 9px 0; }
.rail dt { font-size: 11px; letter-spacing: .07em; text-transform: uppercase;
           color: var(--muted); font-weight: 700; }
.rail dd { margin: 3px 0 0; max-width: none; }
.rail p, .rail li { max-width: none; }
.rail-fig { margin: 20px 0 0; border: 1px solid var(--line); background: var(--panel); }
.rail-fig img { width: 100%; display: block; }
.rail-fig figcaption { position: static; font-size: 11px; line-height: 1.45; padding: 7px 9px;
                       border-top: 1px solid var(--line); }

@media (max-width: 820px) {
  /* the rail lies down above the content, and its picture goes last */
  .cols { grid-template-columns: 1fr; gap: 24px; }
  .rail { border-bottom: 1px solid var(--line); padding-bottom: 14px; }
  .rail dl { display: flex; flex-wrap: wrap; gap: 0 26px; }
  .rail-row { border-bottom: 0; padding: 7px 0; }
  .rail-fig { max-width: var(--measure); }
  .hero { grid-template-columns: 1fr; margin: -24px -16px 0; }
  .hero-text { padding: 34px 16px 28px; }
  .hero figure { min-height: 300px; border-left: 0; border-top: 1px solid var(--line); }
  .dark { margin: 0 -16px; padding: 30px 16px; }
  .dark-in { grid-template-columns: 1fr; gap: 22px; }
  .strip { grid-template-columns: repeat(2, 1fr); }
}

footer { border-top: 3px solid var(--gold); background: linear-gradient(180deg,#3a2611,#2c1c0b);
         color: #d9c8a4; font-size: 15px; }
footer .band-in { display: block; padding: 22px; }
footer a { color: #e8d6ae; }
footer p { max-width: 46rem; }

@media (max-width: 640px) {
  .scroll-x {
    background:
      linear-gradient(90deg, var(--parch2), rgba(228,210,168,0)) 0 0 / 24px 100% no-repeat,
      linear-gradient(270deg, var(--parch2), rgba(228,210,168,0)) 100% 0 / 24px 100% no-repeat,
      radial-gradient(farthest-side at 0 50%, rgba(60,40,15,.30), rgba(60,40,15,0))
        0 0 / 12px 100% no-repeat,
      radial-gradient(farthest-side at 100% 50%, rgba(60,40,15,.30), rgba(60,40,15,0))
        100% 0 / 12px 100% no-repeat;
    background-attachment: local, local, scroll, scroll;
  }
  .scroll-x table { min-width: 30rem; }
  body { font-size: 16px; }
  h1 { font-size: 27px; }
  main { padding: 24px 16px 56px; }
  table { font-size: 15px; }
}