/* ═══════════════════════════════════════════════════════════════════
   reef.ac — the abyssal archive.

   Sibling to localreef.com and the same organism at a different depth.
   The marketing site is a descent through a lit water column; this site
   lives where the column ends. The ground is flat, near-abyss, and the
   only light is what the content emits: code, identifiers and anchors
   glow faintly against the dark, the way things that live at this depth
   make their own.

   Palette and type are inherited from the sibling site, which sampled
   them off the product — see its DESIGN.md. Coral still means exactly
   one thing: act on this.

   There is no JavaScript on this site, so nothing here depends on a
   class arriving at runtime.
   ═══════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }

:root {
  --abyss:    oklch(0.105 0.026 252);
  --floor:    oklch(0.085 0.022 254);
  --panel:    oklch(0.145 0.030 248);
  --panel-2:  oklch(0.170 0.032 244);

  /* Ink carries the water's hue; never pure white. */
  --foam:     oklch(0.965 0.012 200);
  --ink:      oklch(0.930 0.016 202);
  --ink-2:    oklch(0.800 0.023 205);
  --ink-3:    oklch(0.640 0.028 210);
  --ink-4:    oklch(0.500 0.028 214);

  /* Bioluminescence. */
  --coral:    oklch(0.735 0.170 42);
  --coral-2:  oklch(0.640 0.150 40);
  --marigold: oklch(0.855 0.135 80);
  --seaglass: oklch(0.825 0.095 188);
  --seaglass-glow: oklch(0.825 0.095 188 / 0.20);

  --rule:      oklch(0.98 0.02 200 / 0.13);
  --rule-soft: oklch(0.98 0.02 200 / 0.07);

  --mono: "Spline Sans Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans: "Golos Text", ui-sans-serif, -apple-system, system-ui, sans-serif;
  --disp: "Bricolage Grotesque", var(--sans);

  --gut: clamp(1.25rem, 4.5vw, 3.5rem);
  --measure: 70ch;

  --out: cubic-bezier(0.16, 1, 0.3, 1);
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.72;
  color: var(--ink-2);
  background-color: var(--abyss);
  /* The last light from the surface, almost gone. */
  background-image:
    radial-gradient(1100px 480px at 50% -260px, oklch(0.30 0.055 230 / 0.55), transparent 70%),
    radial-gradient(700px 380px at 85% -180px, oklch(0.24 0.045 240 / 0.35), transparent 72%);
  background-repeat: no-repeat;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { max-width: 100%; }

::selection { background: oklch(0.735 0.170 42 / 0.32); color: var(--foam); }

:focus-visible {
  outline: 2px solid var(--seaglass);
  outline-offset: 3px;
  border-radius: 3px;
}

/* ── links: foam prose, coral on approach ─────────────────────────── */

a { color: var(--ink); text-decoration-color: oklch(0.98 0.02 200 / 0.28); text-underline-offset: 3px; }
a:hover { color: var(--coral); text-decoration-color: var(--coral-2); }

code {
  font-family: var(--mono);
  font-size: 0.86em;
  color: var(--seaglass);
  background: oklch(0.825 0.095 188 / 0.075);
  border: 1px solid oklch(0.825 0.095 188 / 0.12);
  border-radius: 5px;
  padding: 0.1em 0.38em;
  text-shadow: 0 0 14px var(--seaglass-glow);
}

a code { color: inherit; }

/* ── the sounding line ────────────────────────────────────────────
   A surveyor's depth ruler down the left edge: the one piece of
   atmosphere this site keeps. Ticks every 28px, a long tick every
   fifth. Decoration only; hidden where space is real. */

.sounding {
  position: fixed;
  top: 0; bottom: 0; left: max(0.9rem, calc((100vw - 1240px) / 2 - 4.25rem));
  width: 1.4rem;
  pointer-events: none;
  background:
    repeating-linear-gradient(180deg,
      var(--rule) 0 1px, transparent 1px 28px) 100% 0 / 0.45rem 100% no-repeat,
    repeating-linear-gradient(180deg,
      var(--rule) 0 1px, transparent 1px 140px) 100% 0 / 0.95rem 100% no-repeat,
    linear-gradient(180deg, transparent, var(--rule) 8%, var(--rule) 92%, transparent) 100% 0 / 1px 100% no-repeat;
  opacity: 0.8;
}

@media (max-width: 1420px) { .sounding { display: none; } }

/* ── nav ──────────────────────────────────────────────────────────── */

.nav {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.8rem var(--gut);
  background: oklch(0.105 0.026 252 / 0.86);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule-soft);
}

.mark {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  text-decoration: none;
  font-family: var(--disp);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--foam);
  letter-spacing: 0.01em;
}
.mark b { color: var(--coral); font-weight: 600; }
.mark:hover { color: var(--foam); }

.nav nav {
  display: flex;
  align-items: center;
  gap: clamp(0.6rem, 2vw, 1.6rem);
  font-family: var(--mono);
  font-size: 0.8rem;
}

.nav nav a {
  color: var(--ink-3);
  text-decoration: none;
  padding: 0.2rem 0.1rem;
}
.nav nav a:hover { color: var(--foam); }
.nav nav a[aria-current="page"] {
  color: var(--marigold);
}
.nav nav a.ghost {
  color: var(--ink-2);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 0.3rem 0.9rem;
}
.nav nav a.ghost:hover { border-color: var(--coral-2); color: var(--coral); }

/* Narrow: the mark takes the first row, the nav becomes a second row
   that scrolls sideways rather than wrapping into a pile. */
@media (max-width: 860px) {
  .nav { flex-wrap: wrap; row-gap: 0.35rem; padding-block: 0.65rem; }
  .nav nav {
    width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .nav nav::-webkit-scrollbar { display: none; }
  .nav nav a { white-space: nowrap; }
  .nav nav a.ghost { padding: 0.22rem 0.7rem; }
}

/* ── frame: toc + main ────────────────────────────────────────────── */

.frame {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 var(--gut);
}

.frame.has-toc {
  display: grid;
  grid-template-columns: 15.5rem minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 4.5rem);
}

main {
  max-width: 46rem;
  padding-bottom: clamp(4rem, 9vh, 7rem);
}

/* Without a contents rail the column centres itself; hard-left with a
   dead right half reads as a rail that forgot to arrive. */
.frame:not(.has-toc) main { margin-inline: auto; }

.toc {
  position: sticky;
  top: 4.4rem;
  align-self: start;
  max-height: calc(100vh - 5.5rem);
  overflow-y: auto;
  padding: 1.9rem 0 1.5rem;
  font-family: var(--mono);
  scrollbar-width: thin;
}

.toc-head {
  margin: 0 0 0.7rem;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-4);
}

.toc ol {
  list-style: none;
  margin: 0;
  padding: 0;
  border-left: 1px solid var(--rule-soft);
}

.toc li a {
  display: block;
  padding: 0.28rem 0 0.28rem 0.85rem;
  font-size: 0.76rem;
  line-height: 1.45;
  color: var(--ink-3);
  text-decoration: none;
  border-left: 1px solid transparent;
  margin-left: -1px;
}
.toc li.lv3 a { padding-left: 1.7rem; color: var(--ink-4); }
.toc li a:hover { color: var(--foam); border-left-color: var(--coral); }

@media (max-width: 1100px) {
  .frame.has-toc { display: block; }
  .toc { display: none; }
}

/* ── page heads ───────────────────────────────────────────────────── */

.hero, .page-head { padding: clamp(3rem, 8vh, 5.5rem) 0 0; }

.kicker {
  margin: 0 0 1.4rem;
  font-family: var(--mono);
  font-size: 0.8rem;
  line-height: 1.7;
  color: var(--ink-3);
  max-width: 52ch;
}
.kicker a { color: var(--marigold); }
.kicker a:hover { color: var(--coral); }

h1 {
  margin: 0 0 1.6rem;
  font-family: var(--disp);
  font-weight: 640;
  font-variation-settings: "wdth" 84, "opsz" 60;
  font-size: clamp(2.5rem, 6.5vw, 4.1rem);
  line-height: 1.02;
  letter-spacing: -0.015em;
  color: var(--foam);
  text-wrap: balance;
}

.lede {
  font-size: clamp(1.1rem, 1.8vw, 1.22rem);
  line-height: 1.68;
  color: var(--ink);
  max-width: 58ch;
  margin: 0 0 1.1rem;
}

.lede-2 { max-width: 58ch; color: var(--ink-2); margin: 0; }

/* ── section headings ─────────────────────────────────────────────── */

h2 {
  margin: clamp(2.8rem, 6vh, 4.2rem) 0 1.1rem;
  font-family: var(--disp);
  font-weight: 600;
  font-variation-settings: "wdth" 88;
  font-size: clamp(1.5rem, 2.6vw, 1.9rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--foam);
  scroll-margin-top: 4.6rem;
}

h3 {
  margin: 2.2rem 0 0.8rem;
  font-family: var(--disp);
  font-weight: 600;
  font-size: 1.18rem;
  color: var(--ink);
  scroll-margin-top: 4.6rem;
}

h4 {
  margin: 1.8rem 0 0.6rem;
  font-family: var(--mono);
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  scroll-margin-top: 4.6rem;
}

h2 code, h3 code { font-size: 0.82em; text-shadow: none; }

/* Anchor pilcrows: present always, lit on approach. */
.anchor {
  float: left;
  margin-left: -1.5em;
  width: 1.5em;
  font-family: var(--mono);
  font-size: 0.78em;
  font-weight: 400;
  line-height: inherit;
  color: transparent;
  text-decoration: none;
  text-align: left;
}
h1 .anchor { display: none; }
h2:hover .anchor, h3:hover .anchor, .anchor:focus-visible,
.entry-head .anchor { color: var(--coral); }
.anchor:hover { color: var(--coral); text-shadow: 0 0 16px oklch(0.735 0.170 42 / 0.4); }

@media (max-width: 720px) { .anchor { display: none; } }

/* ── prose ────────────────────────────────────────────────────────── */

p { margin: 0 0 1.05rem; max-width: var(--measure); }
p:last-child { margin-bottom: 0; }

b, strong { color: var(--ink); font-weight: 600; }

.aside {
  font-size: 0.92rem;
  color: var(--ink-3);
  border-top: 1px solid var(--rule-soft);
  padding-top: 0.8rem;
  max-width: 58ch;
}

hr {
  border: 0;
  border-top: 1px solid var(--rule-soft);
  margin: clamp(2.2rem, 5vh, 3.4rem) 0;
}

/* ── code blocks ──────────────────────────────────────────────────── */

pre {
  margin: 1.4rem 0 1.6rem;
  padding: 1.05rem 1.25rem;
  background: var(--panel);
  border: 1px solid var(--rule-soft);
  border-radius: 10px;
  overflow-x: auto;
  line-height: 1.55;
  box-shadow: inset 0 1px 0 oklch(0.98 0.02 200 / 0.04);
}

pre code {
  display: block;
  background: none;
  border: 0;
  padding: 0;
  font-size: 0.82rem;
  color: var(--seaglass);
  text-shadow: 0 0 18px var(--seaglass-glow);
  white-space: pre;
}

pre .c { color: var(--ink-4); text-shadow: none; }

/* ── tables ───────────────────────────────────────────────────────── */

table {
  width: 100%;
  max-width: 100%;
  margin: 1.4rem 0 1.6rem;
  border-collapse: collapse;
  font-size: 0.93rem;
  line-height: 1.55;
  display: block;
  overflow-x: auto;
}

th {
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: left;
  color: var(--ink-4);
  padding: 0.45rem 1.4rem 0.45rem 0;
  border-bottom: 1px solid var(--rule);
}

td {
  vertical-align: top;
  padding: 0.55rem 1.4rem 0.55rem 0;
  border-bottom: 1px solid var(--rule-soft);
  color: var(--ink-2);
}

td:first-child { color: var(--ink); white-space: nowrap; }
td:last-child, th:last-child { padding-right: 0; }

/* ── lists in rendered docs ───────────────────────────────────────── */

.doc ul, .doc ol { margin: 0 0 1.1rem; padding-left: 1.3rem; max-width: var(--measure); }
.doc li { margin-bottom: 0.5rem; }
.doc li::marker { color: var(--coral-2); font-family: var(--mono); font-size: 0.85em; }

.doc blockquote {
  margin: 1.6rem 0;
  padding: 0.2rem 0 0.2rem 1.3rem;
  border-left: 1px solid var(--rule);
  color: var(--ink-3);
  font-style: italic;
}

/* The ledger gets a hair more separation from the authored prose above. */
.ledger { border-top: 1px solid var(--rule); margin-top: 1.6rem; }
.ledger > h2:first-child { margin-top: 2rem; }

/* ── numbered entry rows (tenets, field notes) ───────────────────── */

.entries {
  list-style: none;
  margin: 1.8rem 0 0;
  padding: 0;
  counter-reset: entry;
}

.entries > li {
  position: relative;
  padding: 1.7rem 0 1.6rem;
  border-top: 1px solid var(--rule-soft);
}
.entries > li:last-child { border-bottom: 1px solid var(--rule-soft); }

/* Tenets number themselves off the counter; field notes carry .num. */
.tenets .entries > li { padding-left: 3.6rem; }
.tenets .entries > li::before {
  counter-increment: entry;
  content: "0" counter(entry);
  position: absolute;
  left: 0;
  top: 1.85rem;
  font-family: var(--mono);
  font-size: 0.82rem;
  color: var(--coral);
  text-shadow: 0 0 16px oklch(0.735 0.170 42 / 0.35);
}

.entries h3 { margin: 0 0 0.55rem; font-size: 1.22rem; }

.notes-list > li { scroll-margin-top: 4.6rem; }

.entry-head {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  margin-bottom: 0.55rem;
  font-family: var(--mono);
}

.entry-head .num {
  font-size: 0.82rem;
  color: var(--coral);
  text-shadow: 0 0 16px oklch(0.735 0.170 42 / 0.35);
}

.tag {
  font-size: 0.68rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-4);
  border: 1px solid var(--rule-soft);
  border-radius: 999px;
  padding: 0.14rem 0.65rem;
}

.entry-head .anchor {
  float: none;
  margin: 0 0 0 auto;
  width: auto;
  opacity: 0;
  transition: opacity 0.25s var(--out);
}
.notes-list > li:hover .anchor, .entry-head .anchor:focus-visible { opacity: 1; }
.notes-list > li:target { border-top-color: var(--coral-2); }
.notes-list > li:target .entry-head .anchor { opacity: 1; }

.notes-list h2 {
  margin: 0 0 0.55rem;
  font-size: 1.28rem;
  font-variation-settings: "wdth" 90;
}

.guard {
  margin-top: 0.9rem;
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--ink-4);
}
.guard span {
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.64rem;
  margin-right: 0.5rem;
}
.guard code { text-shadow: none; background: none; border: 0; padding: 0; color: var(--seaglass); }

/* ── the index rows (documents map, contribute outlinks) ─────────── */

.index {
  list-style: none;
  margin: 1.8rem 0 2rem;
  padding: 0;
}

.index a {
  display: grid;
  grid-template-columns: 11rem 1fr;
  grid-template-areas: "name src" "name desc";
  column-gap: 1.6rem;
  row-gap: 0.15rem;
  padding: 1.15rem 0.4rem 1.1rem 0;
  border-top: 1px solid var(--rule-soft);
  text-decoration: none;
  transition: background 0.25s var(--out);
}
.index li:last-child a { border-bottom: 1px solid var(--rule-soft); }
.index a:hover { background: oklch(0.98 0.02 200 / 0.025); }

.idx-name {
  grid-area: name;
  font-family: var(--disp);
  font-weight: 600;
  font-size: 1.12rem;
  color: var(--foam);
  align-self: start;
}
.index a:hover .idx-name { color: var(--coral); }
.index a:hover .idx-name::after { content: " ↗"; font-size: 0.8em; }

.idx-src {
  grid-area: src;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--marigold);
}

.idx-desc { grid-area: desc; font-size: 0.94rem; color: var(--ink-3); max-width: 52ch; }

@media (max-width: 640px) {
  .index a { grid-template-columns: 1fr; grid-template-areas: "src" "name" "desc"; }
}

/* ── pull quote ───────────────────────────────────────────────────── */

.pull {
  margin: clamp(3rem, 7vh, 4.5rem) 0 0;
  padding: 0;
  border: 0;
}

.pull p {
  font-family: var(--disp);
  font-weight: 600;
  font-variation-settings: "wdth" 86;
  font-size: clamp(1.5rem, 3vw, 2rem);
  line-height: 1.25;
  color: var(--foam);
  max-width: 24ch;
  margin: 0 0 0.9rem;
}

.pull cite {
  display: block;
  font-style: normal;
  font-size: 0.94rem;
  color: var(--ink-3);
  max-width: 52ch;
}

/* ── footer ───────────────────────────────────────────────────────── */

.floor {
  margin-top: clamp(3rem, 8vh, 6rem);
  background: var(--floor);
  border-top: 1px solid var(--rule-soft);
}

.floor-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: clamp(2.2rem, 5vh, 3.5rem) var(--gut) 2.4rem;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1.4rem 2rem;
  align-items: center;
}

.floor-mark { display: flex; align-items: center; gap: 0.9rem; }
.floor-mark b { display: block; color: var(--foam); font-family: var(--disp); font-size: 1.05rem; }
.floor-mark span { font-size: 0.88rem; color: var(--ink-3); }

.floor-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1.4rem;
  font-family: var(--mono);
  font-size: 0.78rem;
}
.floor-links a { color: var(--ink-3); text-decoration: none; }
.floor-links a:hover { color: var(--coral); }

.floor-note {
  grid-column: 1 / -1;
  margin: 0;
  padding-top: 1.2rem;
  border-top: 1px solid var(--rule-soft);
  font-size: 0.85rem;
  color: var(--ink-4);
  max-width: none;
}
.floor-note code { text-shadow: none; }

@media (max-width: 720px) {
  .floor-inner { grid-template-columns: 1fr; align-items: start; }
}