/* ==========================================================================
   OCCULT — one page. Loaded on a/occult.html. CULTURAL PROTOCOL.

   Founder, 2026-09-26: the page is Annie's Claude artifact, shell excepted.
   A radial chart of the record itself on deep purple, then the record set
   centred on the same axis, each section opening on the next moon phase.
   The gold is ink, not light: no glow, no blur. Every mark is orbit,
   phase, tick or star point; no sigil, seal, glyph or alphabet anywhere.
   Every rule here is scoped to .oc-hero or .oc-rec (plus the page ground).

   Colour (gold on deep purple, SUPPORTED; the values are ours):
   ground #1C1030 · edge #130A22 · lift #2A1848 · core #241438
   gold #C9A64E · pale #EADBB0 · muted #B9A9CF · text #EDE4D3
   Contrast on #1C1030 (worst case, the page's lightest ground #2A1848):
   text 14.6 (13.4) · pale 12.9 (11.8) · gold 7.9 (7.2) · muted 8.0 (7.4)
   ========================================================================== */
@font-face {
  font-family: "Cinzel OC";
  src: url("fonts/cinzel.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: "EB Garamond OC";
  src: url("fonts/eb-garamond.woff2") format("woff2");
  font-weight: 400 600;
  font-display: swap;
}
@font-face {
  font-family: "EB Garamond OC";
  src: url("fonts/eb-garamond-italic.woff2") format("woff2");
  font-weight: 400 600;
  font-style: italic;
  font-display: swap;
}

.oc-page {
  --oc-pur: #1C1030;
  --oc-pur2: #130A22;
  --oc-lift: #2A1848;
  --oc-core: #241438;
  --oc-gold: #C9A64E;
  --oc-pale: #EADBB0;
  --oc-mut: #B9A9CF;
  --oc-text: #EDE4D3;
  --oc-line: rgba(201, 166, 78, 0.4);
  --oc-cz: "Cinzel OC", "Times New Roman", serif;
  --oc-gm: "EB Garamond OC", Georgia, serif;
}
/* The record is present, never arriving: no scroll reveal fades it
   (outranks site.css's .js-reveal rule). */
.oc-page main > section.oc-rec { opacity: 1; transform: none; transition: none; will-change: auto; }
.oc-page main {
  background: radial-gradient(ellipse 120% 60% at 50% 0%, var(--oc-lift), var(--oc-pur) 45%, var(--oc-pur2));
  background-color: var(--oc-pur);
  color: var(--oc-text);
  overflow-x: hidden;
}

/* ---- shared register: both roots, nothing outside them ---------------- */
.oc-hero, .oc-rec { font: 400 20px/1.65 var(--oc-gm); color: var(--oc-text); text-align: center; }
.oc-hero a, .oc-rec a { color: var(--oc-pale); text-decoration-color: var(--oc-gold); text-underline-offset: 4px; }
.oc-hero a:hover, .oc-rec a:hover { color: #FFFFFF; }
.oc-hero :focus-visible, .oc-rec :focus-visible { outline: 2px solid var(--oc-gold); outline-offset: 5px; }
.oc-hero b, .oc-rec b { font-weight: 600; }

/* ---- hero: the chart --------------------------------------------------- */
.oc-hero { max-width: 880px; margin: 0 auto; padding: 40px clamp(16px, 4vw, 40px) 0; }
.oc-recline { margin: 0; font: 500 12px/1.6 var(--oc-cz); letter-spacing: 0.14em; color: var(--oc-mut); overflow-wrap: anywhere; }
.oc-h1 {
  margin: 10px 0 0; font: 400 clamp(40px, 8.4vw, 104px)/1 var(--oc-cz);
  letter-spacing: 0.3em; padding-left: 0.3em; color: var(--oc-pale); text-transform: uppercase;
}
.oc-tag { margin: 8px 0 0; font-style: italic; color: var(--oc-mut); }
.oc-withheld {
  margin: 26px auto 0; max-width: 40em; padding: 16px 20px; font-size: 18px;
  border-top: 1px solid rgba(201, 166, 78, 0.5); border-bottom: 1px solid rgba(201, 166, 78, 0.5);
}
.oc-withheld b { color: var(--oc-gold); }

.oc-chart { display: block; width: min(720px, 100%); height: auto; margin: 30px auto 0; overflow: visible; }
.oc-stars { fill: var(--oc-pale); }
.oc-o { fill: none; stroke: var(--oc-gold); stroke-width: 1; }
.oc-o--dash { stroke-width: 0.8; opacity: 0.45; stroke-dasharray: 2 5; }
.oc-o--mid { stroke-width: 0.6; opacity: 0.6; }
.oc-o--in { stroke-width: 1.2; }
.oc-o--hair { stroke-width: 0.5; }
.oc-ticks line { stroke: var(--oc-gold); stroke-width: 1; }
.oc-ticks .oc-major { stroke-width: 1.4; }
.oc-spokes line { stroke: var(--oc-gold); stroke-width: 0.5; opacity: 0.5; }
.oc-rim { fill: none; stroke: var(--oc-gold); stroke-width: 1; }
.oc-rim--sky { fill: var(--oc-pur); }
.oc-lit { fill: var(--oc-gold); }
.oc-core { fill: var(--oc-core); stroke: var(--oc-gold); stroke-width: 1.4; }
.oc-cn { font: 400 20px var(--oc-cz); letter-spacing: 4px; fill: var(--oc-pale); }
.oc-cs { font: italic 400 13px var(--oc-gm); fill: var(--oc-mut); }
.oc-rl { font: 500 14px var(--oc-cz); letter-spacing: 3px; }
.oc-ri { font: italic 400 16px var(--oc-gm); letter-spacing: 0.5px; }
.oc-ring--1 text { fill: var(--oc-gold); }
.oc-ring--2 text { fill: var(--oc-pale); }
.oc-ring--3 text { fill: var(--oc-mut); }
.oc-ring--3 .oc-rl { font-size: 13px; }
.oc-ring--3 .oc-ri { font-size: 14px; }

/* The one motion (curatorial: slow cyclical rotation). Ticks and spokes
   turn; the labelled rings stay still so they can be read. */
.oc-spin { transform-box: view-box; transform-origin: 360px 360px; }
@media (prefers-reduced-motion: no-preference) {
  .oc-spin { animation: oc-rot 240s linear infinite; }
  .oc-spin--rev { animation-duration: 360s; animation-direction: reverse; }
  @keyframes oc-rot { to { transform: rotate(360deg); } }
}

.oc-cap { max-width: 40em; margin: 10px auto 0; font-style: italic; font-size: 17px; color: var(--oc-mut); }
.oc-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; margin-top: 18px; font-size: 16px; text-align: left; }
.oc-legend p { margin: 0; max-width: 260px; }
.oc-legend b { display: block; font: 500 12px/1.6 var(--oc-cz); letter-spacing: 0.2em; color: var(--oc-gold); text-transform: uppercase; }

/* ---- the record ------------------------------------------------------- */
.oc-wrap { max-width: 880px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 40px) 90px; }
.oc-s { margin-top: 90px; }
.oc-moon { display: block; width: 44px; height: 44px; margin: 0 auto 14px; }
.oc-moon--end { margin-top: 90px; }
.oc-rec h2 { margin: 0 0 6px; font: 400 clamp(24px, 3.4vw, 34px)/1.25 var(--oc-cz); letter-spacing: 0.16em; color: var(--oc-pale); text-transform: uppercase; overflow-wrap: anywhere; }
.oc-n { font-size: 0.6em; letter-spacing: 0.1em; color: var(--oc-gold); vertical-align: 0.3em; }
.oc-sub { margin: 0 0 22px; font: 500 12px/1.6 var(--oc-cz); letter-spacing: 0.22em; color: var(--oc-gold); text-transform: uppercase; }
.oc-rec p { margin: 0 0 14px; }
.oc-prose { max-width: 40em; margin: 0 auto; }
.oc-big { font-size: 24px; line-height: 1.45; color: var(--oc-pale); }
.oc-firm { font-style: italic; color: var(--oc-mut); }
.oc-k { display: block; font-style: italic; font-size: 16px; color: var(--oc-gold); }
.oc-nl { font-style: italic; color: var(--oc-mut); }

/* Neighbours: a row of dark panels */
.oc-three { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 24px; margin-top: 20px; }
.oc-three figure { margin: 0; }
.oc-f { height: 170px; border: 1px solid var(--oc-line); display: grid; place-items: center; overflow: hidden; background: var(--oc-pur2); }
.oc-fl { fill: none; stroke: var(--oc-gold); stroke-width: 1; }
.oc-f--fog { background: radial-gradient(ellipse at 30% 70%, #3A3542, #0E0C12 70%); }
.oc-f--mark { background: #0A0A0C; }
.oc-f--mark span { font: 400 30px/1 var(--oc-cz); color: #D8D5CC; letter-spacing: -0.05em; text-transform: uppercase; transform: scaleY(1.4); }
.oc-f--gilt { background: linear-gradient(135deg, #2B1D12, #5A4424 50%, #2B1D12); }
.oc-f--plain { background: var(--oc-pur2); }
.oc-three figcaption { margin-top: 10px; font-size: 17px; }
.oc-three figcaption a { display: inline-block; padding: 10px 0; }
.oc-three .oc-k { margin-bottom: 2px; }

/* The withholding */
.oc-notes { margin: 0 auto; max-width: 40em; }
.oc-notes > div { padding: 16px 20px; border-top: 1px solid rgba(201, 166, 78, 0.5); border-bottom: 1px solid rgba(201, 166, 78, 0.5); }
.oc-notes > div + div { border-top: 0; }
.oc-notes dt { font: 500 12px/1.6 var(--oc-cz); letter-spacing: 0.2em; color: var(--oc-gold); text-transform: uppercase; margin-bottom: 6px; }
.oc-notes dd { margin: 0; font-size: 22px; line-height: 1.5; color: var(--oc-pale); }

/* Tables: the ledger and what carries the look */
.oc-tw { overflow-x: auto; margin: 22px auto 0; max-width: 40em; }
.oc-rt, .oc-ct { width: 100%; border-collapse: collapse; text-align: left; font-size: 17px; }
.oc-rt { min-width: 440px; }
.oc-rt th, .oc-rt td, .oc-ct th, .oc-ct td { padding: 8px 10px; border-bottom: 1px solid rgba(201, 166, 78, 0.25); vertical-align: top; }
.oc-rt thead th { font: 500 11px/1.6 var(--oc-cz); letter-spacing: 0.2em; color: var(--oc-gold); text-transform: uppercase; border-bottom-color: var(--oc-gold); }
.oc-rt tbody th, .oc-ct th { font-weight: 400; }
.oc-ct th { width: 11em; }
.oc-ct th a { display: inline-flex; align-items: center; min-height: 44px; font: 500 13px/1.3 var(--oc-cz); letter-spacing: 0.16em; text-transform: uppercase; }
.oc-ct th small { display: block; font-style: italic; font-size: 15px; color: var(--oc-gold); }
.oc-ct td { padding-top: 18px; }
.oc-tags { display: flex; flex-wrap: wrap; gap: 0 14px; margin: 0 0 6px !important; }
.oc-tags a { display: inline-flex; align-items: center; min-height: 44px; }
.oc-swatch { display: flex; flex-wrap: wrap; gap: 8px 14px; }
.oc-chip { display: inline-flex; align-items: center; gap: 8px; font: 13px/1.3 ui-monospace, Menlo, monospace; color: var(--oc-text); }
.oc-chip i { width: 22px; height: 22px; border-radius: 50%; box-shadow: 0 0 0 1px var(--oc-gold); }
.oc-asbuilt { margin: 6px 0 0 !important; font-style: italic; color: var(--oc-mut); }

/* Rules: a ruled column */
.oc-rules { max-width: 40em; margin: 0 auto; }
.oc-rules article { padding: 16px 0; border-bottom: 1px solid rgba(201, 166, 78, 0.25); }
.oc-rules h3 { margin: 0; font: 500 15px/1.5 var(--oc-cz); letter-spacing: 0.24em; color: var(--oc-pale); text-transform: uppercase; }
.oc-rules p { max-width: 50ch; margin: 4px auto 0; }
.oc-h3 { margin: 40px 0 10px; font: 500 15px/1.5 var(--oc-cz); letter-spacing: 0.24em; color: var(--oc-gold); text-transform: uppercase; }

/* The facts, and the ways out */
.oc-meta { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 30px; }
.oc-meta dt { font: 500 11px/1.6 var(--oc-cz); letter-spacing: 0.22em; color: var(--oc-gold); text-transform: uppercase; }
.oc-meta dd { margin: 4px 0 0; font-size: 18px; }
.oc-use { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 40px; }
.oc-use a { display: block; padding: 18px 26px; border: 1px solid var(--oc-gold); border-radius: 999px; text-decoration: none; font-size: 17px; line-height: 1.4; }
.oc-use a b { display: block; font: 500 13px/1.6 var(--oc-cz); letter-spacing: 0.2em; color: var(--oc-gold); text-transform: uppercase; }
.oc-use a:hover { background: rgba(201, 166, 78, 0.12); }
.oc-foot { margin-top: 30px !important; font-size: 16px; }
.oc-foot a { display: inline-block; padding: 11px 0; }

@media (max-width: 760px) {
  .oc-meta, .oc-use { grid-template-columns: minmax(0, 1fr); }
  .oc-use a { border-radius: 28px; }
  .oc-ct, .oc-ct tbody, .oc-ct tr, .oc-ct th, .oc-ct td { display: block; }
  .oc-ct th { width: auto; border-bottom: 0; padding-bottom: 0; }
  .oc-ct td { padding-top: 0; }
  .oc-h1 { letter-spacing: 0.16em; padding-left: 0.16em; }
  .oc-hero, .oc-rec { font-size: 18px; }
}

/* research-dimension table at phone width: no fixed floor, cells wrap (QA 2026-09-29) */
@media (max-width: 480px) {
  .oc-rt { min-width: 0; }
  .oc-rt th, .oc-rt td { padding-inline: 6px; overflow-wrap: break-word; }
  .oc-rt thead th { letter-spacing: 0.06em; }
}