/* Orange County Indexed, design round 4 (2026-09-22): the presentation layer over the four OCI templates.
   Printed once per OCI page by template-parts/ocb-modes.php, after the templates' own styles, so every rule
   here carries a `body` prefix to outrank the template rule it replaces. Remove the <link> to revert.
   Scope: reading sizes, a component diet, the archival imagery, section rhythm, the result row. No markup.
   -------------------------------------------------------------------------------------------------------- */

/* 1. Reading sizes. The templates consume the site's --fs-* tokens; inside the OCI content the tier lifts one
      notch (12 → 12.5, 13 → 14, 14.4 → 15.2 px) so research text reads as prose, not as an admin screen.
      Names take the display serif: page titles, entity names, work and event titles. */
body #main-content, body .ocb-page, body .obs-wrap, body .oce-hero, body .oce-body, body .occ {
  --fs-xs: .78rem; --fs-sm: .875rem; --fs-md: .95rem;
  --oci-fs-title: 1.1rem; --oci-fs-body: .97rem; --oci-lh: 1.6;
}
body .oce-hero h1, body .oce-work h3, body .obs-rows .t, body .occ-list__item b, body .ocb-ccard h3, body .ocb-pcard h3, body .ocb-scard h3, body .obs-ecard__name {
  font-family: var(--font-display); font-weight: 700; letter-spacing: 0;
}
body .ocb-page .section__title { font-size: 1.75rem; color: var(--heading); line-height: 1.2; margin-bottom: 8px; }
body .ocb-page .section__intro { font-size: 1.02rem; max-width: 62ch; }
body .ocb-ccard h3, body .ocb-pcard h3 { font-size: 1.12rem; }
body .ocb-ccard p, body .ocb-pcard p, body .ocb-route span, body .ocb-find__card > span:not(.ocb-find__tag), body .ocb-using__item p { font-size: var(--fs-sm); line-height: 1.55; }

/* 2. Component diet: the pill means an action or an active filter, the card means a content unit, everything
      else is a plain link or plain text. Hints lose their boxes, folds lose their frames, the console keeps
      its pale ground but not its border, and one motif (the blue left rule) marks a quotation, a local
      connection, a focused card and the facts. */
body .obs-console { border: 0; border-radius: 12px; padding: 22px 24px; }
body .obs-field small { padding: 4px 0 0; background: none; border: 0; line-height: 1.45; }
body .obs-morebtn { padding: 8px 0 4px; border: 0; border-top: 1px solid var(--ocpl-blue-light); border-radius: 0; background: none; text-align: left; font-size: var(--fs-md); font-weight: 700; color: var(--ocpl-blue-dark); }
body .obs-morebtn:hover, body .obs-morebtn:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
body .obs-timeline { border: 0; border-top: 2px solid var(--ocpl-blue-light); border-radius: 0; background: none; }
body .obs-timeline summary { padding: 12px 0; }
body .obs-timeline__inner { padding: 0 0 12px; }
body .obs-key > summary { padding: 4px 0; }
body .obs-wallscope { border: 0; background: none; padding: 0; }
body .occ__filters-fold { border: 0; border-radius: 12px; padding: 22px 24px; }
body .occ__criteria summary, body .occ__more > summary { font-weight: 700; }
body .oce-facts { border: 0; border-left: 4px solid var(--ocpl-blue); border-radius: 0 var(--radius-md) var(--radius-md) 0; background: var(--white); }
body .oce-facts dl > div { border-top-color: var(--ocpl-blue-light); }
body .occ-list__card { border: 1px solid var(--ocpl-blue-light); border-left: 3px solid var(--ocpl-blue); border-radius: 0 var(--radius-md) var(--radius-md) 0; }
body .occ-list__item.is-main .occ-list__card { border-left-color: var(--ocpl-blue-dark); }
body .ocb-themes-more summary, body .ocb-start__more summary, body .ocb-callouts__more summary { font-size: var(--fs-md); }
/* one focus ring and one hover for every OCI control */
body .obs-wrap :is(a, button, select, input, summary):focus-visible,
body .ocb-page :is(a, button, select, input, summary):focus-visible,
body .occ :is(a, button, select, input, summary):focus-visible,
body .oce-hero :is(a, button):focus-visible, body .oce-body :is(a, button, summary):focus-visible,
body .ocd-modes a:focus-visible, body .oce-subnav a:focus-visible { outline: 2px solid var(--ocpl-blue); outline-offset: 2px; box-shadow: none; }
body .ocb-ccard:hover, body .ocb-pcard:hover, body .ocb-route:hover, body .ocb-find__card:hover, body .ocb-scard:hover, body .obs-ecard:hover, body .oce-within__card:hover {
  transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0, 63, 99, .10);
}

/* 3. The archival imagery. The Explore hero carries the 1768 Sauthier plan of Hillsborough under the navy
      (the same public-domain sheet the Colonial card shows; its credit sits in the image-credits fold), and
      every card image takes one navy duotone so 31 different sources read as one set. */
body.page-template-page-local-books .page-hero {
  background: linear-gradient(rgba(10, 35, 66, .88), rgba(0, 63, 99, .90)), url('../img/subjects/colonial-oc.jpg') center 40% / cover no-repeat var(--ocpl-blue);
}
body .ocb-ccard img, body .ocb-pcard img, body .oce-figure--card img {
  filter: grayscale(1) sepia(.35) hue-rotate(165deg) saturate(1.35) brightness(.96) contrast(1.04);
}
body .ocb-ccard:hover img, body .ocb-pcard:hover img { filter: grayscale(1) sepia(.35) hue-rotate(165deg) saturate(1.5) brightness(1); }
body .ocb-ccard img, body .ocb-pcard img { transition: filter var(--transition); }

/* 4. Rhythm on Explore: one vertical beat between sections (64px, 40px on phones), two more sections on a
      white ground, no hairline above the shelf. */
body .ocb-page .ocb-curious, body .ocb-page .ocb-start, body .ocb-page .ocb-time, body .ocb-page .ocb-places, body .ocb-page .ocb-jump,
body .ocb-page .ocb-shelf, body .ocb-page .ocb-ref, body .ocb-page .ocb-moresub { padding-top: 64px; padding-bottom: 64px; }
body .ocb-page .ocb-callouts--dirs { padding-top: 16px; padding-bottom: 0; }
body .ocb-page .ocb-shelf { border-top: 0; background: var(--ocpl-blue-pale); }
body .ocb-page .ocb-ref { background: var(--white); }
body .ocb-page .ocb-moresub { background: var(--white); border-top: 1px solid var(--border); }
@media (max-width: 700px) {
  body .ocb-page .ocb-curious, body .ocb-page .ocb-start, body .ocb-page .ocb-time, body .ocb-page .ocb-places, body .ocb-page .ocb-jump,
  body .ocb-page .ocb-shelf, body .ocb-page .ocb-ref, body .ocb-page .ocb-moresub { padding-top: 40px; padding-bottom: 40px; }
}
body .oce-body { padding: 44px 0 64px; }
body .oce-works, body .oce-chron, body .oce-context { margin-bottom: 44px; }
body .occ { padding: 32px 0 56px; }

/* 5. The result row and the answer card. Title at reading size, one meta line, one access line, the local
      connection under its rule, then the details fold; a steady 8px beat between them. */
body .obs-rows li { padding: 20px 0; font-size: var(--oci-fs-body); line-height: var(--oci-lh); }
body .obs-rows .t { font-size: var(--oci-fs-title); line-height: 1.35; }
body .obs-meta { font-size: var(--fs-sm); margin-top: 3px; }
body .obs-access { margin-top: 9px; font-size: var(--fs-sm); }
body .obs-why { margin-top: 9px; font-size: var(--fs-sm); }
body .obs-rows .obs-desc { font-size: var(--fs-sm); margin-top: 6px; }
body .obs-more { margin-top: 10px; }
body .obs-drow { grid-template-columns: 96px minmax(0, 1fr); }
body .obs-drow__l { color: var(--text-light); font-weight: 700; }
body .obs-entities { gap: 12px; margin: 16px 0 10px; }
body .obs-ecard { background: var(--ocpl-blue-pale); border: 0; border-left: 4px solid var(--ocpl-blue); padding: 14px 16px 14px 18px; }
body .obs-ecard--event { border-left-color: var(--ocpl-orange); }
body .obs-ecard--theme { border-left-color: var(--ocpl-blue-mid); }
body .obs-ecard--place { border-left-color: var(--ocpl-green-dark); }
body .obs-ecard__name { font-size: 1.12rem; margin: 3px 0 5px; }
body .obs-ecard__kind { color: var(--ocpl-blue-dark); }
body .obs-count { font-size: 1.05rem; }
/* 6. One small icon per access kind in place of the coloured dot: library, NC LIVE card, screen, map pin,
      reading room, search. Monochrome, masked in the kind's colour, 14px. */
body .obs-access__words::before {
  width: 14px; height: 14px; border-radius: 0; margin-right: 6px; vertical-align: -2px;
  background: var(--text-light); -webkit-mask: var(--oci-icon) center / contain no-repeat; mask: var(--oci-icon) center / contain no-repeat;
  --oci-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3'/%3E%3C/svg%3E");
}
body .obs-access[data-kind="ocpl"] .obs-access__words::before { background: var(--success, #2e7d32); --oci-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21h18M5 21V9l7-6 7 6v12M9 21v-6h6v6M9 12h.01M15 12h.01'/%3E%3C/svg%3E"); }
body .obs-access[data-kind="nclive"] .obs-access__words::before { background: var(--ocpl-blue); --oci-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='5' width='20' height='14' rx='2'/%3E%3Cpath d='M2 10h20M6 15h5'/%3E%3C/svg%3E"); }
body .obs-access[data-kind="online"] .obs-access__words::before { background: var(--ocpl-blue); --oci-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='13' rx='2'/%3E%3Cpath d='M8 21h8M12 17v4'/%3E%3C/svg%3E"); }
body .obs-access[data-kind="nearby"] .obs-access__words::before { background: var(--ocpl-green-dark, #4f7a2c); --oci-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s7-7.2 7-12a7 7 0 0 0-14 0c0 4.8 7 12 7 12z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E"); }
body .obs-access[data-kind="onsite"] .obs-access__words::before { background: var(--ocpl-orange); --oci-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 5h7a3 3 0 0 1 3 3v12a2 2 0 0 0-2-2H2zM22 5h-7a3 3 0 0 0-3 3v12a2 2 0 0 1 2-2h8z'/%3E%3C/svg%3E"); }
body .obs-access[data-kind="ocpl"] .obs-access__words .held::before { display: none; }

/* 7. Loading: three shimmering bars where the rows will be, instead of a line of text (the text stays for
      screen readers); still, not animated, when the reader asks for reduced motion. */
body .obs-loading { display: block; margin: 8px 0 14px; color: transparent; font-size: 0; }
body .obs-loading::before, body .obs-loading::after { content: ""; display: block; height: 16px; width: 62%; margin: 0 0 12px; border: 0; border-radius: 8px; background: linear-gradient(90deg, #eef4f8 25%, #dbe8f0 50%, #eef4f8 75%); background-size: 200% 100%; animation: oci-shimmer 1.2s linear infinite; }
body .obs-loading::after { width: 38%; margin-top: -4px; }
@keyframes oci-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { body .obs-loading::before, body .obs-loading::after { animation: none; } }

/* 8. One data moment per page: works by decade under Browse the Index, material types on a theme page. */
body .ocb-spark { margin: 0 0 26px; }
body .ocb-spark__bars { display: flex; align-items: flex-end; gap: 3px; height: 64px; max-width: 760px; }
body .ocb-spark__bars a { flex: 1 1 0; min-width: 0; display: block; background: var(--ocpl-blue-light); border-radius: 2px 2px 0 0; text-decoration: none; }
body .ocb-spark__bars a:hover, body .ocb-spark__bars a:focus-visible { background: var(--ocpl-blue); }
body .ocb-spark__axis { display: flex; justify-content: space-between; max-width: 760px; margin-top: 4px; font-size: var(--fs-xs); color: var(--text-light); }
body .ocb-spark figcaption { margin: 4px 0 0; font-size: var(--fs-sm); color: var(--text-mid); }
body .oce-formbar { max-width: 720px; margin: -6px 0 16px; }
body .oce-formbar__bar { display: flex; height: 12px; border-radius: 6px; overflow: hidden; background: var(--ocpl-blue-light); }
body .oce-formbar__bar a { display: block; height: 100%; min-width: 3px; }
body .oce-formbar__bar a:hover, body .oce-formbar__bar a:focus-visible { filter: brightness(1.2); }
body .oce-formbar__key { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 6px 0 0; font-size: var(--fs-xs); color: var(--text-mid); }
body .oce-formbar__key i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 4px; vertical-align: -1px; }

/* 9. The maker's mark on deep landings: the crumb names the Friends. */
body .ocd-crumb__by { font-weight: 400; color: var(--text-light); margin-left: 6px; }
@media (max-width: 600px) { body .ocd-crumb__by { display: none; } }

/* Finishing (2026-09-22): the cue that a bar scrolls sideways, the subject-headings panel stepping back on the
   search page, and a back-to-top control on the long pages. */
body .ocd-modes { position: relative; }
/* The entity template makes .oce-subnav sticky from 901px (top: --oci-sticky-top), and a sticky box is already
   the containing block the fade's ::after needs. Round 4c first set position:relative on it too, which cancelled
   the stickiness while the template's top:116px kept applying, so the bar sat over the first section and never
   followed the scroll. Only the narrow layout, where the bar is static, needs the explicit positioning context. */
@media (max-width: 900px) { body .oce-subnav { position: relative; } }
body .ocd-modes.has-more::after, body .oce-subnav.has-more::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 56px; pointer-events: none; background: linear-gradient(to right, rgba(255,255,255,0), var(--white) 78%); }
body .oce-subnav.has-more::after { bottom: 1px; }
body .obs-layout { grid-template-columns: 224px minmax(0, 1fr); }
body .obs-side { background: var(--white); border-color: var(--border); padding: 14px 16px; }
body .obs-side h3 { color: var(--text-mid); }
body .obs-side .hint { color: var(--text-light); }
body .oci-totop { position: fixed; right: 18px; bottom: 18px; z-index: 40; padding: 9px 14px; border: 1px solid var(--ocpl-blue-light); border-radius: var(--radius-pill); background: var(--white); color: var(--ocpl-blue-dark); font-size: var(--fs-sm); font-weight: 700; text-decoration: none; box-shadow: 0 4px 14px rgba(0,63,99,.14); }
body .oci-totop:hover, body .oci-totop:focus-visible { background: var(--ocpl-blue); border-color: var(--ocpl-blue); color: var(--white); }
body .oci-totop[hidden] { display: none; }
@media (max-width: 600px) { body .oci-totop { right: 12px; bottom: 12px; padding: 8px 12px; } }
@media print { body .oci-totop { display: none !important; } }

/* entity work cards and chronology cards read with the same measure */
body .oce-work h3 { font-size: 1.08rem; line-height: 1.35; }
body .oce-work__meta, body .oce-work__sum { font-size: var(--fs-sm); }
body .occ-list__item b { font-size: 1.05rem; }
body .occ-list__item p { font-size: var(--fs-sm); }