/* Hydrocon inner pages: same tokens as the home, ordinary document layout. */
:root {
  --sc-canvas: #F5F2EA; --sc-surface: #FFFFFF;
  --sc-ink: #1A1B1E; --sc-ink-soft: #5F5C55;
  --sc-accent: #FFE73F; --sc-accent-ink: #16171A;
  --sc-font-display: "Saira", "Eurostile", system-ui, sans-serif;
  --sc-font-text: "IBM Plex Sans", system-ui, sans-serif;
  --hy-line: rgba(26, 27, 30, 0.16);
  --hy-line-soft: rgba(26, 27, 30, 0.09);
  --hy-dark: #16171A; --hy-dark-ink: #F4F2EC; --hy-dark-soft: #A9A8A0;
  --gutter: clamp(1.25rem, 5vw, 5.5rem);
  --maxw: 82rem;
  --ease: cubic-bezier(0.23, 1, 0.32, 1);
}
* { box-sizing: border-box; }
html { background: var(--sc-canvas); color-scheme: light; }
body { margin: 0; background: var(--sc-canvas); color: var(--sc-ink); font-family: var(--sc-font-text); font-size: 1rem; line-height: 1.6; letter-spacing: 0.005em; -webkit-font-smoothing: antialiased; }
::selection { background: var(--sc-accent); color: var(--sc-accent-ink); }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 3px; }
.grain { position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: 0.028;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* ---- bar (mirrors the home): light, primary lockup with the black wordmark (Nick, 17 Sep) ---- */
.bar { position: fixed; inset: 0 0 auto 0; z-index: 60; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.75rem var(--gutter); border-bottom: 1px solid var(--hy-line);
  background: color-mix(in srgb, var(--sc-canvas) 96%, transparent); backdrop-filter: saturate(1.2) blur(10px); color: var(--sc-ink); }
.bar__mark { display: flex; align-items: center; text-decoration: none; }
.bar__mark img { display: block; width: auto; }
.bar__lockup { height: 36px; } .bar__mark .bar__icon { display: none; height: 30px; }
.bar__nav { display: flex; gap: 1.75rem; margin-left: auto; margin-right: 1.5rem; }
.bar__nav a { font-family: var(--sc-font-display); font-weight: 700; font-size: 0.85rem; letter-spacing: 0.06em; text-transform: uppercase;
  text-decoration: none; color: var(--sc-ink-soft); padding: 0.4rem 0; border-bottom: 2px solid transparent; transition: color 140ms var(--ease); }
.bar__nav a:hover { color: var(--sc-ink); }
.bar__nav a[aria-current="page"] { color: var(--sc-ink); border-bottom-color: var(--sc-accent); }
.cta { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--sc-font-display); font-weight: 700; font-size: 0.85rem;
  letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none; color: var(--sc-accent-ink); background: var(--sc-accent);
  padding: 0.8em 1.25em; box-shadow: 0 1px 0 rgba(255,255,255,0.4) inset, 0 2px 10px rgba(20,18,14,0.12); white-space: nowrap; transition: background 140ms var(--ease), transform 120ms var(--ease); }
.cta:hover { background: #FFF07A; } .cta:active { transform: translateY(1px); }
.cta svg { width: 1.05em; height: 1.05em; }
@media (max-width: 760px) {
  .bar__mark .bar__lockup { display: none; } .bar__mark .bar__icon { display: block; }
  .bar__nav { gap: 1rem; margin-right: 0.75rem; } .bar__nav a { font-size: 0.75rem; }
  .cta { padding: 0.7em 0.9em; font-size: 0.72rem; } .cta span { display: none; }
}

/* ---- marker highlight: yellow never carries text on paper, it underlays it ---- */
.mk { color: var(--sc-ink); background: linear-gradient(var(--sc-accent), var(--sc-accent)) no-repeat 0 58% / 100% 66%;
  padding: 0 0.12em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* ---- page ---- */
main { position: relative; z-index: 1; padding: calc(6.5rem + 2vw) var(--gutter) 6rem; max-width: var(--maxw); margin-inline: auto; }
.display { font-family: var(--sc-font-display); font-weight: 800; letter-spacing: -0.02em; line-height: 1.0; text-wrap: balance; margin: 0; }
h1.display { font-size: clamp(2.6rem, 6vw, 5rem); }
h2.display { font-size: clamp(1.5rem, 2.6vw, 2.1rem); letter-spacing: -0.01em; }
.lede { font-size: clamp(1.05rem, 1.5vw, 1.25rem); color: var(--sc-ink-soft); max-width: 60ch; margin: 1.25rem 0 0; text-wrap: pretty; }
.lede b { color: var(--sc-ink); font-weight: 500; }
.nums { font-variant-numeric: tabular-nums; }
.head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 2rem 4rem; align-items: end; padding-bottom: 2.5rem; border-bottom: 1px solid var(--hy-line); }
.head__aside { color: var(--sc-ink-soft); font-size: 0.95rem; max-width: 40ch; }
.head__aside strong { display: inline-block; font-family: var(--sc-font-display); font-size: clamp(2rem, 4vw, 3.2rem); font-weight: 800; color: var(--sc-ink); line-height: 1; letter-spacing: -0.02em; margin-bottom: 0.5rem;
  background: linear-gradient(var(--sc-accent), var(--sc-accent)) no-repeat 0 60% / 100% 62%; padding: 0 0.12em; }
@media (max-width: 860px) { .head { grid-template-columns: 1fr; } }

/* ---- filters ---- */
.filters { position: sticky; top: 63px; z-index: 5; background: color-mix(in srgb, var(--sc-canvas) 92%, transparent); backdrop-filter: blur(8px);
  display: flex; flex-wrap: wrap; gap: 0.75rem 1.25rem; align-items: center; padding: 1rem 0; border-bottom: 1px solid var(--hy-line-soft); margin-bottom: 1rem; }
.chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.chip { font-family: var(--sc-font-display); font-weight: 700; font-size: 0.78rem; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--sc-ink-soft); background: transparent; border: 1px solid var(--hy-line); padding: 0.45rem 0.75rem; cursor: pointer;
  transition: color 120ms var(--ease), border-color 120ms var(--ease), background 120ms var(--ease); }
.chip:hover { color: var(--sc-ink); border-color: var(--sc-ink-soft); }
.chip[aria-pressed="true"] { color: var(--sc-accent-ink); background: var(--sc-accent); border-color: var(--sc-ink); }
.chip:active { transform: translateY(1px); }
.filters select, .filters input { font: inherit; font-size: 0.9rem; color: var(--sc-ink); background: var(--sc-surface); border: 1px solid var(--hy-line); padding: 0.5rem 0.7rem; min-width: 12rem; }
.filters input::placeholder { color: var(--sc-ink-soft); }
.filters .count { margin-left: auto; color: var(--sc-ink-soft); font-size: 0.9rem; }

/* ---- register ---- */
.year { display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: 1rem 2rem; padding: 2rem 0 1rem; }
.year > h2 { font-family: var(--sc-font-display); font-weight: 800; font-size: 1.6rem; color: var(--sc-ink); line-height: 1; position: sticky; top: 8.4rem; align-self: start; margin: 0.25rem 0 0; justify-self: start;
  background: linear-gradient(var(--sc-accent), var(--sc-accent)) no-repeat 0 60% / 100% 62%; padding: 0 0.12em; }
.year ol { list-style: none; margin: 0; padding: 0; }
.row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.25rem 2rem; align-items: baseline; padding: 0.9rem 0; border-top: 1px solid var(--hy-line-soft); }
.row:first-child { border-top: 0; }
.row__title { font-weight: 500; margin: 0; max-width: 70ch; text-wrap: pretty; }
.row__meta { grid-column: 1; margin: 0; color: var(--sc-ink-soft); font-size: 0.9rem; }
.row__meta span + span::before { content: "·"; margin: 0 0.5em; color: var(--hy-line); }
.row__scope { grid-column: 2; grid-row: 1 / span 2; justify-self: end; font-family: var(--sc-font-display); font-weight: 700; font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sc-ink-soft); white-space: nowrap; }
.row.is-hidden { display: none; }
.row[data-public="false"] .row__title::before { content: "UNCLEARED"; font-family: var(--sc-font-display); font-size: 0.65rem; letter-spacing: 0.08em; color: var(--sc-ink); background: var(--sc-accent); border: 1px solid var(--sc-ink); padding: 0.1em 0.4em; margin-right: 0.6em; vertical-align: 0.15em; }
@media (max-width: 760px) { .filters { position: static; backdrop-filter: none; } .year { grid-template-columns: 1fr; gap: 0.5rem; } .year > h2 { position: static; } .row { grid-template-columns: 1fr; } .row__scope { grid-column: 1; grid-row: auto; justify-self: start; } }

.empty { padding: 4rem 0; color: var(--sc-ink-soft); max-width: 50ch; }
.banner { background: var(--sc-accent); color: var(--sc-accent-ink); font-family: var(--sc-font-display); font-weight: 700; font-size: 0.85rem; letter-spacing: 0.04em; text-transform: uppercase; padding: 0.6rem var(--gutter); position: sticky; top: 63px; z-index: 6; }
.foot { border-top: 1px solid var(--hy-line); margin-top: 4rem; padding-top: 1.5rem; display: grid; grid-template-columns: auto 1fr; gap: 1rem 1.5rem; align-items: center; color: var(--sc-ink-soft); font-size: 0.8rem; }
.foot img { height: 26px; width: auto; display: block; } .foot p { margin: 0; line-height: 1.5; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }