/* LUMEN C — THE FORMULARY
   Kosas / Nécessaire lineage. An asymmetric two-column register with a
   PERSISTENT LEFT MARGIN carrying folios and running heads. The atomic unit
   is the ruled data row. Monospace carries every label, INCI and figure.

   The margin is why C can never be A: A is one column, full measure.

   Contrast (WCAG 2.2, computed): ink 15.39:1 · muted 5.96:1 · accent 7.18:1
   · on-accent 7.57:1 · rule 3.91:1 (clears 1.4.11 even where a rule carries
   meaning, which here it does). */

:root {
  --c-ink: #1C1D19;
  --c-ground: #F5F4EF;
  --c-surface: #FBFAF6;
  --c-muted: #5C5E58;
  --c-accent: #0F5C4C;
  --c-on-accent: #FBFAF6;
  --c-line: #7C7A70;
  --c-hair: #D7D6CF;
  --c-pad: clamp(3rem, 6vw, 5.5rem);

  --c-display: var(--font-heading--family, system-ui, sans-serif);
  --c-mono: var(--font-subheading--family, ui-monospace, SFMono-Regular, Menlo, monospace);
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

.c-sec { background: var(--c-ground); color: var(--c-ink); padding-block: var(--c-pad); }
.c-sec + .c-sec { border-top: 1px solid var(--c-line); }

.c-sec :is(a, button, summary, input, label):focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
}

/* The page: margin | body. This grid is the theme. */
.c-page {
  display: grid;
  grid-template-columns: 9rem minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  max-width: 82rem;
  margin-inline: auto;
  padding-inline: clamp(1rem, 3vw, 2rem);
}
.c-page--pdp { grid-template-columns: 9rem minmax(0, 1fr) minmax(0, 24rem); }

.c-margin { font-family: var(--c-mono); font-size: 0.6875rem; letter-spacing: 0.06em; }
/* The only moving part in this theme: a running head that holds. */
.c-margin__sticky { position: sticky; top: calc(var(--header-group-height, 4rem) + 1.5rem); }
.c-folio { color: var(--c-accent); margin: 0 0 0.5rem; }
.c-running { text-transform: uppercase; color: var(--c-ink); margin: 0 0 1rem; }
.c-marginal { color: var(--c-muted); line-height: 1.6; letter-spacing: 0; text-transform: none; margin: 0; }

@media (max-width: 64rem) {
  .c-page, .c-page--pdp { grid-template-columns: 1fr; }
  .c-margin__sticky { position: static; }
  .c-margin { display: flex; gap: 1rem; align-items: baseline; border-bottom: 1px solid var(--c-hair); padding-bottom: 0.75rem; margin-bottom: 1.5rem; }
  .c-margin__sticky { display: contents; }
  .c-marginal { display: none; }
}

/* Type */
.c-nameplate { font-family: var(--c-display); font-weight: 700; font-size: clamp(2.5rem, 7vw, 5rem); line-height: 0.92; letter-spacing: -0.04em; margin: 0.5rem 0 1.5rem; text-transform: uppercase; }
.c-edition, .c-h3 { font-family: var(--c-mono); font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-accent); margin: 0; }
.c-h3 { margin: 2.5rem 0 1rem; }
.c-thesis { max-width: 46ch; color: var(--c-muted); line-height: 1.65; margin: 0 0 2rem; }
.c-rule { border: 0; border-top: 2px solid var(--c-accent); margin: 0; }
.c-h2 { font-family: var(--c-display); font-weight: 700; font-size: clamp(1.5rem, 3vw, 2.25rem); line-height: 1; letter-spacing: -0.03em; margin: 0 0 1.75rem; }
.c-prose { max-width: 60ch; color: var(--c-muted); line-height: 1.7; }
.c-prose p { margin: 0 0 1.125rem; }
.c-empty { font-family: var(--c-mono); font-size: 0.75rem; line-height: 1.7; color: var(--c-muted); border: 1px dashed var(--c-line); padding: 1rem; max-width: 60ch; }
.c-num { font-family: var(--c-mono); font-variant-numeric: tabular-nums lining-nums; }
.c-ref { font-family: var(--c-mono); font-size: 0.6875rem; color: var(--c-muted); }

/* The register */
.c-reg { border-top: 1px solid var(--c-line); }
.c-reg__head, .c-row {
  display: grid;
  grid-template-columns: 2.5rem minmax(9rem, 1fr) minmax(7rem, 11rem) 4.5rem 6.5rem 2.5rem 5rem;
  gap: 1rem; align-items: center;
}
.c-reg__head {
  font-family: var(--c-mono); font-size: 0.625rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--c-muted);
  padding: 0.625rem 0; border-bottom: 1px solid var(--c-line);
}
.c-row { padding: 0.875rem 0; border-bottom: 1px solid var(--c-hair); }
.c-row__no, .c-row__size, .c-row__unit { font-family: var(--c-mono); font-size: 0.75rem; font-variant-numeric: tabular-nums; }
.c-row__no { color: var(--c-muted); }
.c-row__name a { color: inherit; font-family: var(--c-display); font-weight: 700; letter-spacing: -0.015em; }
.c-row__type { display: block; font-family: var(--c-mono); font-size: 0.625rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-muted); }
.c-row__active { font-family: var(--c-mono); font-size: 0.6875rem; color: var(--c-accent); letter-spacing: 0.04em; }
.c-row__act { justify-self: end; }

/* SIGNATURE: multi-select accumulation. The count is a CSS counter
   incremented by every checked row, read by the bar that follows them. */
.c-reg { counter-reset: isolated; }
.c-row:has(input:checked) { counter-increment: isolated; }
.c-reg:has(.c-row input:checked) .c-row { opacity: 0.35; }
.c-reg:has(.c-row input:checked) .c-row:has(input:checked) { opacity: 1; }
.c-cfbar__n::after { content: counter(isolated); font-family: var(--c-mono); color: var(--c-accent); font-weight: 700; }

.c-cfbar {
  display: flex; align-items: center; gap: 0.625rem; flex-wrap: wrap;
  position: sticky; bottom: 0;
  background: var(--c-ground);
  border-top: 1px solid var(--c-line);
  padding: 1rem 0; margin: 0;
  font-family: var(--c-mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase;
}
.c-cfbar__label { color: var(--c-muted); }
.c-cfbar .c-btn--go { margin-left: auto; }

.c-check { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; cursor: pointer; }
.c-check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.c-check__box { width: 1rem; height: 1rem; border: 1px solid var(--c-line); display: block; }
.c-check:has(input:checked) .c-check__box { background: var(--c-accent); border-color: var(--c-accent); }
.c-check:has(input:focus-visible) .c-check__box { outline: 2px solid var(--c-accent); outline-offset: 2px; }

.c-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 0.75rem;
  border: 1px solid var(--c-line); border-radius: 0;
  background: var(--c-surface); color: inherit; cursor: pointer; text-decoration: none;
  font-family: var(--c-mono); font-size: 0.625rem; letter-spacing: 0.1em; text-transform: uppercase;
}
.c-btn--solid { background: var(--c-accent); color: var(--c-on-accent); border-color: var(--c-accent); width: 100%; }
.c-btn--out { border-style: dashed; color: var(--c-muted); }

@media (max-width: 60rem) {
  .c-reg__head { display: none; }
  .c-row { grid-template-columns: 2.5rem 1fr auto auto; row-gap: 0.35rem; }
  .c-row__active, .c-row__size, .c-row__unit { grid-column: 2; }
}

/* Actives register */
.c-reg--actives .c-reg__head, .c-arow { grid-template-columns: minmax(8rem, 1fr) minmax(9rem, 1.2fr) minmax(6rem, 9rem) 4rem; }
.c-arow { display: grid; gap: 1rem; padding: 0.875rem 0; border-bottom: 1px solid var(--c-hair); align-items: baseline; }
.c-arow__name { font-family: var(--c-display); font-weight: 700; letter-spacing: -0.015em; }
.c-arow__inci, .c-arow__conc { font-family: var(--c-mono); font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.05em; }
.c-arow__inci { color: var(--c-muted); }
.c-arow__conc { color: var(--c-accent); font-variant-numeric: tabular-nums; }
.c-arow__fn { font-family: var(--c-mono); font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--c-muted); }
.c-arow__benefit { grid-column: 1 / -1; margin: 0.5rem 0 0; color: var(--c-muted); max-width: 62ch; line-height: 1.6; }
@media (max-width: 60rem) { .c-arow { grid-template-columns: 1fr; row-gap: 0.25rem; } }

/* Method ledger */
.c-ledger { margin-top: 2rem; border-top: 1px solid var(--c-line); }
.c-ledger .c-reg__head, .c-lrow { display: grid; grid-template-columns: minmax(10rem, 1fr) 5rem 4rem 7rem minmax(8rem, 1fr); gap: 1rem; }
.c-lrow { padding: 0.75rem 0; border-bottom: 1px solid var(--c-hair); }

/* Field notes — checkbox filters, multi-select (C's archetype) */
.c-filters { border: 0; margin: 0 0 1.5rem; padding: 0; display: flex; gap: 0; flex-wrap: wrap; }
.c-filter { position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0 1rem; border: 1px solid var(--c-line); margin-right: -1px; cursor: pointer; font-family: var(--c-mono); font-size: 0.625rem; letter-spacing: 0.1em; text-transform: uppercase; background: var(--c-surface); }
.c-filter input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.c-filter:has(input:checked) { background: var(--c-accent); color: var(--c-on-accent); border-color: var(--c-accent); z-index: 1; }
.c-filter:has(input:focus-visible) { outline: 2px solid var(--c-accent); outline-offset: 2px; z-index: 2; }

.c-notelist { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--c-line); }
.c-note { display: none; padding: 1.25rem 0; border-bottom: 1px solid var(--c-hair); }
.c-notes:not(:has(.c-filter input:checked)) .c-note { display: block; }
@supports not selector(:has(*)) { .c-note { display: block; } }
.c-note__text { margin: 0 0 0.5rem; max-width: 62ch; line-height: 1.65; }
.c-note__by { font-family: var(--c-mono); font-size: 0.625rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-muted); margin: 0; }

/* Questions */
.c-qreg { border-top: 1px solid var(--c-line); }
.c-qreg details { border-bottom: 1px solid var(--c-hair); }
.c-qreg summary { display: grid; grid-template-columns: 2.5rem 1fr; gap: 1rem; align-items: baseline; min-height: 44px; padding: 1rem 0; cursor: pointer; list-style: none; font-family: var(--c-display); font-weight: 700; letter-spacing: -0.015em; }
.c-qreg summary::-webkit-details-marker { display: none; }
.c-q__n { font-family: var(--c-mono); font-size: 0.6875rem; color: var(--c-accent); font-weight: 400; }
.c-qreg p { margin: 0; padding: 0 0 1.25rem 3.5rem; color: var(--c-muted); max-width: 62ch; line-height: 1.65; }

/* Colophon */
.c-colo { border-top: 1px solid var(--c-line); margin: 0 0 1.5rem; }
.c-colo div { display: grid; grid-template-columns: 12rem 1fr; gap: 1rem; padding: 0.625rem 0; border-bottom: 1px solid var(--c-hair); }
.c-colo dt { font-family: var(--c-mono); font-size: 0.625rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-muted); }
.c-colo dd { margin: 0; }
.c-colo__note { font-family: var(--c-mono); font-size: 0.6875rem; line-height: 1.7; color: var(--c-muted); max-width: 60ch; }

/* PDP — 3 zones. C pins the SPEC CARD; A pins the image. */
.c-plate__img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; border: 1px solid var(--c-hair); margin-bottom: 1px; }
.c-plate__cap { font-family: var(--c-mono); font-size: 0.625rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-muted); margin: 0.5rem 0 2rem; }
.c-card__sticky { position: sticky; top: calc(var(--header-group-height, 4rem) + 1.5rem); }
.c-card__run { font-family: var(--c-mono); font-size: 0.625rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-accent); margin: 0; }
.c-card__title { font-family: var(--c-display); font-weight: 700; font-size: 1.5rem; line-height: 1.05; letter-spacing: -0.03em; margin: 0.5rem 0 1.5rem; }
.c-card__spec { margin: 0 0 1.5rem; border-top: 1px solid var(--c-line); }
.c-card__spec div { display: grid; grid-template-columns: 7rem 1fr; gap: 0.75rem; padding: 0.5rem 0; border-bottom: 1px solid var(--c-hair); }
.c-card__spec dt { font-family: var(--c-mono); font-size: 0.625rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-muted); }
.c-card__spec dd { margin: 0; font-family: var(--c-mono); font-size: 0.75rem; font-variant-numeric: tabular-nums; }
.c-sizes { list-style: none; display: flex; gap: 0; margin: 0 0 1rem; padding: 0; }
.c-size { display: inline-flex; align-items: center; min-height: 44px; padding: 0 0.875rem; border: 1px solid var(--c-line); margin-right: -1px; color: inherit; text-decoration: none; font-family: var(--c-mono); font-size: 0.6875rem; }
.c-size.is-current { background: var(--c-accent); color: var(--c-on-accent); border-color: var(--c-accent); }
.c-card__cf { display: inline-block; margin-top: 1rem; font-family: var(--c-mono); font-size: 0.625rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-accent); }
.c-prow { display: grid; grid-template-columns: 2.5rem 1fr auto; gap: 1rem; padding: 0.625rem 0; border-bottom: 1px solid var(--c-hair); align-items: baseline; }
.c-prow a { color: inherit; }
.c-prow.is-here { color: var(--c-accent); }
.c-prow__when { font-family: var(--c-mono); font-size: 0.625rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-muted); }
.c-stat b { font-family: var(--c-mono); color: var(--c-accent); }

/* Comparison matrix — specimens are columns. */
.c-matrix-scroll { overflow-x: auto; border-top: 1px solid var(--c-line); }
.c-matrix { min-width: max-content; }
.c-mrow { display: grid; grid-template-columns: 8rem repeat(var(--cols), minmax(8.5rem, 1fr)); gap: 0; border-bottom: 1px solid var(--c-hair); }
.c-mrow--head { border-bottom: 1px solid var(--c-line); align-items: start; }
.c-mrow--key { background: var(--c-surface); }
.c-mlabel { font-family: var(--c-mono); font-size: 0.625rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-muted); padding: 0.75rem 0.75rem 0.75rem 0; position: sticky; left: 0; background: var(--c-ground); }
.c-mcell { padding: 0.75rem; border-left: 1px solid var(--c-hair); font-size: 0.8125rem; }
.c-mcell--head { display: flex; flex-direction: column; gap: 0.375rem; }
.c-mcell--head a { color: inherit; font-family: var(--c-display); font-weight: 700; font-size: 0.875rem; letter-spacing: -0.015em; }
.c-mcell--em { font-family: var(--c-mono); font-size: 0.6875rem; color: var(--c-accent); }
.c-mcell.c-num { font-size: 0.75rem; }

/* Column isolation: dim everything once anything is picked, then relight. */
.c-matrix:has(input:checked) [data-col] { opacity: 0.28; }

/* Manifest */
.c-manifest .c-reg__head, .c-mrow2 { display: grid; grid-template-columns: minmax(9rem, 1fr) minmax(7rem, 10rem) 4.5rem 6.5rem 5rem 5.5rem; gap: 1rem; align-items: center; }
.c-mrow2 { padding: 0.875rem 0; border-bottom: 1px solid var(--c-hair); }
.c-mrow2__name a { color: inherit; font-family: var(--c-display); font-weight: 700; letter-spacing: -0.015em; }
.c-mrow2__comp { font-family: var(--c-mono); font-size: 0.6875rem; color: var(--c-accent); }
.c-mrow2__unit { color: var(--c-muted); }
.c-qty { width: 3.75rem; min-height: 44px; border: 1px solid var(--c-line); background: var(--c-surface); padding: 0 0.5rem; font: inherit; border-radius: 0; }
.c-manifest__foot { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; margin-top: 2rem; }
.c-manifest__sub { margin: 0 auto 0 0; font-family: var(--c-mono); font-variant-numeric: tabular-nums; }
.c-manifest__foot .c-btn--solid { width: auto; padding: 0 2rem; }
@media (max-width: 60rem) { .c-mrow2 { grid-template-columns: 1fr auto; row-gap: 0.35rem; } }

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}