/* =============================================================================
   THE LONG-FORM PAGE: ONE HERO, ONE CONTENTS MENU, ONE ARTICLE COLUMN.
   HERO-001 and TOC-001. Owner directive msg-2026-09-07-0020.

   FOUR PAGES SHARE THIS FILE: Events, Consignment, About & Press, and History.
   It exists because the alternative is four sets of rules that resemble each
   other until somebody changes one, and "no separately maintained hard-coded
   contents list" is the same instruction one layer up.

   EVERY RULE HERE HAS TO SURVIVE THE THING BEING ABSENT. A hero is optional, a
   caption is optional, a credit is optional, and a page may have four sections
   or forty. Nothing below reserves space for something that is not there:
   [hidden] collapses, and the grid falls back to one column rather than leaving
   an empty one.
   ============================================================================= */

/* ── THE HERO ────────────────────────────────────────────────────────────── */
.sfv-hero { margin: 0 0 26px; padding: 0 }
.sfv-hero[hidden] { display: none }
.sfv-hero img {
  display: block; width: 100%;
  height: clamp(200px, 36vw, 420px);
  object-fit: cover; object-position: 50% 50%;
}
.sfv-hero figcaption {
  font-family: 'Rosario', sans-serif; font-size: .7rem; line-height: 1.55;
  margin-top: 8px; opacity: .74;
}
/* The credit is not the caption. It sits with it, quieter, and it is there
   because a county historical society's photograph usually comes with an
   attribution condition rather than a nice-to-have. */
.sfv-hero .sfv-credit {
  display: block; font-size: .62rem; letter-spacing: .04em;
  text-transform: uppercase; opacity: .58; margin-top: 3px;
}
.sfv-hero figcaption:empty, .sfv-hero .sfv-credit:empty { display: none }

/* ── THE TWO-COLUMN LAYOUT ───────────────────────────────────────────────── */
.lf-wrap {
  display: grid; gap: clamp(20px, 3vw, 44px);
  grid-template-columns: 300px minmax(0, 1fr);
  align-items: start;
}
/* ONE COLUMN WHEN THERE IS NO MENU. A page that has not adopted the contents
   component, or one whose every section is hidden, must not render a 232px
   gutter of nothing. */
.lf-wrap:not(:has(.lf-toc)) { grid-template-columns: minmax(0, 1fr) }
.lf-article { min-width: 0 }              /* long words and code must not push the grid */

/* ── THE CONTENTS MENU, DESKTOP ──────────────────────────────────────────── */
/* THE RAIL'S OWN INK, CAPTURED WHERE THE RAIL IS. D-2. The disclosure inside
   this rail is handed the LIGHT ground's ink by a generated per-page rule
   (`.lf-toc .lf-toggle{--on-text:#241A20}`), while the rail itself paints DARK.
   The label therefore resolved to near-black on near-black. --on-text is
   substituted HERE, on the element that actually carries the ground, so the
   value that inherits down to the disclosure is the ink the rail was measured
   for. No literal colour is stated: a rail that is light some day still hands
   its own correct ink down. The fallbacks are the dark-ground tokens because
   that is what every rail on the seven routes paints today. */
.lf-toc {
  --lf-rail-ink: var(--on-text, #C3B39F);
  --lf-rail-ink-strong: var(--on-strong, #EFE3D2);
  position: sticky; top: 88px;            /* clears the 72px site header and its rule */
  /* INDEPENDENT SCROLLING FOR AN UNUSUALLY LONG MENU. History has eleven
     sections and a timeline; a menu taller than the window would otherwise
     scroll the page to reach its own last entry. */
  max-height: calc(100vh - 108px);
  overflow-y: auto; overscroll-behavior: contain;
  padding-right: 6px;
}
.lf-toc h2 {
  font-family: 'Rosario', sans-serif; font-size: .58rem; letter-spacing: .22em;
  text-transform: uppercase; opacity: .6; margin: 0 0 10px; font-weight: 600;
}
.lf-toc ol, .lf-toc ul { list-style: none; margin: 0; padding: 0; counter-reset: lf }
.lf-toc li { counter-increment: lf; margin: 0 }
.lf-toc a {
  display: block; padding: 6px 10px 6px 30px; position: relative;
  font-family: 'Lustria', Georgia, serif; font-size: .82rem; line-height: 1.4;
  text-decoration: none; color: inherit;
  border-left: 2px solid transparent;
}
.lf-toc a::before {
  content: counter(lf, decimal-leading-zero);
  position: absolute; left: 8px; top: 8px;
  font-family: ui-monospace, monospace; font-size: .56rem; opacity: .45;
}
.lf-toc a:hover { background: rgba(0, 0, 0, .035) }
/* ACTIVE-SECTION HIGHLIGHTING. An attribute rather than a class so that the
   state is readable from the accessibility tree as well as from the paint. */
.lf-toc a[aria-current="true"] {
  border-left-color: var(--brass, #7c5c1d);
  background: rgba(124, 92, 29, .07);
  font-weight: 600;
}
.lf-toc a[aria-current="true"]::before { opacity: .8 }
.lf-toc a:focus-visible { outline: 2px solid #141210; outline-offset: 2px }

/* ── TABLET AND MOBILE: A DISCLOSURE, NOT A SQUEEZED SIDEBAR ─────────────── */
.lf-toggle { display: none }

@media (max-width: 999px) {
  .lf-wrap { grid-template-columns: minmax(0, 1fr) }
  .lf-toc {
    position: static; max-height: none; overflow: visible;
    padding: 0; margin: 0 0 22px;
    border: 1px solid var(--rule, rgba(20,18,16,.16));
  }
  .lf-toc h2 { display: none }
  /* The summary IS the control, and it says which section you are in. A
     compressed sidebar would be the same list at a size nobody can hit. */
  /* 44px MINIMUM, AND IT IS MEASURED RATHER THAN EYEBALLED. The first version
     padded to 11px and came out 36px tall at 390px — under the bar the
     pre-launch audit set, on the one control that IS the menu on a phone.
     min-height states the requirement instead of hoping the padding adds up. */
  .lf-toggle {
    display: flex; align-items: center; gap: 8px; width: 100%;
    min-height: 44px; padding: 10px 13px; cursor: pointer; background: none; border: 0;
    font: inherit; text-align: left; color: inherit;
  }
  /* D-2: THE LABEL HAD TO BE READABLE, AND IT WAS NOT.
     Measured at 390px on all seven rail routes: 8.96px, composited ink
     rgb(28,20,25) on a composited ground of rgb(16,12,14) — 1.08:1, on screen,
     not clipped, not screen-reader-only. Two causes, both fixed here:

       SIZE. .56rem is 8.96px. The owner's floor for a visible label is 14px,
       so 14px is STATED IN PIXELS. It is NOT written as a maximum of one em
       and fourteen pixels: one em resolves against the PARENT, so such an
       expression CAPS at the parent size instead of flooring at fourteen, and
       it flattened type across this site once already. An absolute value on a
       named class cannot do that, and the forbidden form appears nowhere in
       this file, not even as an example.

       COLOUR. The ink came from the disclosure's own --on-text, which a
       generated per-page rule sets to the LIGHT ground's #241A20 while the
       rail paints dark; opacity .6 then halved what little was left. The ink
       is now --lf-rail-ink, captured on .lf-toc above from the ground the rail
       really has, and the opacity dimmer is gone. Hierarchy is carried by
       family, case and tracking — Rosario uppercase against Lustria — which is
       the house style, rather than by making the label too faint to read.

     WHY THESE DECLARATIONS ARE IMPORTANT ONES. Every one of the seven pages
     ships `.ctoc,.lf-toc,.ctoc *,.lf-toc *{color:var(--on-text)!important}` in
     its own <style>. Those pages are not this agent's to edit, and a normal
     declaration in this file loses to them. `.lf-toggle .lf-label` is (0,2,0)
     against that rule's (0,1,0), so an important declaration here wins on
     specificity. The page rules are the real defect and are reported as a
     conflict, not patched from here. */
  .lf-toggle .lf-label {
    font-family: 'Rosario', sans-serif;
    font-size: 14px;                      /* absolute, stated in pixels */
    line-height: 1.25; letter-spacing: .16em;
    text-transform: uppercase; opacity: 1;
    color: var(--lf-rail-ink, #C3B39F) !important;
    white-space: nowrap;
  }
  .lf-toggle .lf-where {
    font-family: 'Lustria', Georgia, serif;
    font-size: 16px;                      /* was .84rem = 13.44px, under the floor */
    line-height: 1.25; opacity: 1;
    color: var(--lf-rail-ink-strong, #EFE3D2) !important;
    flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  /* The chevron is the only part of the control that says it opens. It was
     11.2px at the same 1.08:1 and read as a speck. */
  .lf-toggle .lf-caret {
    transition: transform .18s ease;
    font-size: 14px; line-height: 1; opacity: 1;
    color: var(--lf-rail-ink, #C3B39F) !important;
  }
  .lf-toggle[aria-expanded="true"] .lf-caret { transform: rotate(180deg) }
  .lf-toc ol, .lf-toc ul { border-top: 1px solid var(--rule-2, rgba(20,18,16,.1)) }
  .lf-toc[data-open="false"] ol, .lf-toc[data-open="false"] ul { display: none }
  .lf-toc a { padding: 12px 13px 12px 34px; min-height: 44px; box-sizing: border-box }
  .lf-toc a::before { left: 11px; top: 15px }
  .sfv-hero img { height: clamp(170px, 54vw, 280px) }
  /* The focal point a hero was cropped to on a desktop is routinely the wrong
     one on a phone, so a placement may supply a second. */
  .sfv-hero[style*="--focal-mobile"] img { object-position: var(--focal-mobile) }
}

@media (prefers-reduced-motion: reduce) {
  .lf-toggle .lf-caret { transition: none }
}

/* ── THE APPROVED SELLING DESIGN: FOUR BANDS, NOT ONE ──────────────────
   The bands the design specifies. Everything above this line is the shared
   long-form component as it was; everything below is the specification, applied
   to that component. Each rule survives its subject being absent, which is the
   rule the top of this file sets and the reason [hidden] collapses rather than
   reserving space. */

/* ── DESKTOP, 1000px AND UP ──────────────────────────────────────────────── */
@media (min-width: 1000px) {
  /* A 70ch measure, on the column and not on the page: the rail keeps its
     300px whatever the window does, and the prose stops growing at the width
     a person can actually track back from. */
  .lf-article { max-width: 70ch }
  /* SELL TO US HAS NO RAIL, AND THAT IS DELIBERATE IN THE DESIGN: it is short
     enough to scan. The :has() fallback above already collapses the grid; this
     centres what is left at reading width rather than leaving it hard left. */
  .lf-wrap:not(:has(.lf-toc)) > .lf-article { margin-inline: auto }
}

/* ── TABLET, 720 TO 999px ────────────────────────────────────────────────── */
@media (min-width: 720px) and (max-width: 999px) {
  /* 52px, which is the design's figure and also clears the 44px minimum the
     pre-launch audit set on the one control that IS the menu at this width. */
  /* (the 52px disclosure is set for the whole collapsed band, below) */
  /* Two across, stated rather than left to auto-fit: auto-fit with a 220px
     minimum puts three in a 999px window, which is not what the design shows.
     Scoped through .lf-article because the page's own <style> sets .sec-images
     too and, at equal specificity, the later stylesheet wins whatever the
     media query says. */
  .lf-article .sec-images { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  /* The form groups the design puts side by side. .fgrid had no rule at all,
     so these fields stacked at every width including the desktop one. */
  .fgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(14px, 2.4vw, 26px) }
}

/* ── DESKTOP FORM GROUPS ─────────────────────────────────────────────────── */
/* The design shows two columns from tablet upward, not only at tablet. */
@media (min-width: 1000px) {
  .fgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(18px, 2vw, 30px) }
}

/* ── MOBILE, UNDER 720px ─────────────────────────────────────────────────── */
@media (max-width: 719px) {
  .fgrid { display: block }
  /* "Three short passes rather than one long field list." The rule between
     groups is what makes them passes; it is drawn between them and never above
     the first or below the last, so an intake with one group has no stray line. */
  .fgrid + .fgrid { border-top: 1px solid var(--on-rule, rgba(201,162,90,.22)); margin-top: 22px; padding-top: 22px }
  .lf-article .sec-images { grid-template-columns: minmax(0, 1fr) }
}

/* ── THE DISCLOSURE IS 52px WHEREVER IT IS THE MENU ──────────────────────── */
/* The design gives the figure in its tablet row, but the control is the same
   control at 390px as at 900px, and a button that changes height either side of
   720px for no reason a reader can see is worse than either number. 52px clears
   the 44px minimum the pre-launch audit set at both widths. */
@media (max-width: 999px) {
  .lf-toggle { min-height: 52px }
}

/* ── MISSING IMAGES: NOTHING LEAVES A HOLE ───────────────────────────────── */
/* The image blocks already collapse when they are empty, so no frame is drawn
   around nothing. What the design adds is that the category list then has to
   read as a list in its own right rather than as a caption for pictures that
   are not there, so it takes a border when its images are absent. */
.lf-article .sec-images[hidden] + .worklist,
.lf-article .sec-images[hidden] + ul,
.lf-article .sec-images[hidden] + ol {
  border: 1px solid var(--on-rule, rgba(201,162,90,.22));
  padding: clamp(14px, 2vw, 22px) clamp(16px, 2.4vw, 26px);
}