/* age.css · Uncut / Censored / Hidden (2026-09-29). Logic: js/age.js. */

/* ── The switch: in the masthead's left column, after the way back ── */
.masthead .rk-age {
  display: inline-flex; align-items: center; gap: 0;
  font-family: var(--mono); font-size: var(--mono-a, 0.68rem);
  letter-spacing: var(--mono-a-track, 0.14em); text-transform: uppercase;
  border: 1px solid var(--ink); line-height: 1;
}
.masthead .rk-age-b {
  appearance: none; -webkit-appearance: none; border: 0; margin: 0;
  background: transparent; color: var(--ink-2, #555);
  font: inherit; letter-spacing: inherit; text-transform: inherit;
  padding: 0.38em 0.6em; cursor: pointer;
  transition: color .2s ease, background-color .2s ease;
}
.masthead .rk-age-b + .rk-age-b { border-left: 1px solid var(--ink); }
.masthead .rk-age-b:hover, .masthead .rk-age-b:focus-visible { color: var(--red); outline: none; }
.masthead .rk-age-b[aria-checked="true"] { background: var(--ink); color: var(--paper); cursor: default; }
/* Phones: the masthead is one line (way back, switch, eye); the switch shrinks.
   Parent links (About me, Studio, Process) step aside: the Index button holds them. */
@media (max-width: 640px) {
  html body .masthead .rk-age { display: inline-flex !important; }
  html body .masthead .left { gap: 0.6rem; flex-wrap: nowrap; }
  html body .masthead .left > :not(:first-child):not(.rk-age) { display: none !important; }
  .masthead .rk-age { font-size: 0.56rem; letter-spacing: 0.08em; }
  .masthead .rk-age-b { padding: 0.5em 0.45em; }
}

/* ── Censored and Hidden: the bar ── */
.rk-cen { position: relative; display: inline; white-space: nowrap; }
.rk-cen-w {
  color: transparent !important; background: var(--ink, #0e0e0c);
  -webkit-user-select: none; user-select: none;
  text-decoration: none !important; border-radius: 1px;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
  padding: 0 0.06em;
}
.tape .rk-cen-w, [style*="background: var(--ink)"] .rk-cen-w { background: var(--paper, #f4f1ea); }
.rk-cen-k {
  text-decoration: none; margin-left: 0.25em;
  font-family: var(--hand, "Caveat", cursive); color: var(--red); font-size: 1.1em;
}
.rk-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Until the first pass has run, a censored page is not shown (js/age.js lifts
   this at once, and after 1.5 s in any case). */
html[data-rk-age="censored"]:not(.rk-aged) body,
html[data-rk-age="hidden"]:not(.rk-aged) body { opacity: 0; }

/* ── Hidden: what leaves ── */
html[data-rk-age="hidden"] [data-rk-adult],
html[data-rk-age="hidden"] .rk-gone,
html[data-rk-age="hidden"] a[href*="process-orgasm"],
html[data-rk-age="hidden"] a[href*="orgasm-project"],
html[data-rk-age="hidden"] a[href*="joke-and-point"],
html[data-rk-age="hidden"] a[href*="petite%20mort" i],
html[data-rk-age="hidden"] a[href*="petite mort" i],
html[data-rk-age="hidden"] a[href*="08-mtf"] { display: none !important; }
/* Mysterium Tremendum et Fascinans (2026-09-30): its paintings leave with their
   frames and captions; a tile that only borrows one keeps its place, empty. */
html[data-rk-age="hidden"] img[src*="/08-mtf/"],
html[data-rk-age="hidden"] figure:has(img[src*="/08-mtf/"]) { display: none !important; }

/* A grown-up room: only the tape, the masthead, the note and the footer stay. */
html[data-rk-age="hidden"] body[data-rk-room="adult"] > :not(.tape):not(.masthead):not(.rk-closed):not(footer):not(.colophon):not(script):not(.cursor) { display: none !important; }
.rk-closed {
  max-width: 1480px; margin: 0 auto;
  padding: clamp(3rem, 12vh, 8rem) var(--edge, 1.5rem) clamp(4rem, 16vh, 10rem);
}
.rk-closed-k {
  font-family: var(--mono); font-size: var(--mono-a, 0.68rem);
  letter-spacing: var(--mono-a-track, 0.14em); text-transform: uppercase; color: var(--ink-2, #555);
  margin: 0 0 1.2rem;
}
.rk-closed-t {
  font-family: var(--display, serif); font-style: italic; font-weight: 400;
  font-size: clamp(2.4rem, 6vw, 5.2rem); line-height: 1.02; letter-spacing: -0.01em;
  color: var(--ink); margin: 0 0 1.4rem; max-width: 14ch;
}
.rk-closed-p { font-family: var(--serif); font-size: 1.15rem; line-height: 1.5; max-width: 34em; color: var(--ink); margin: 0 0 1.6rem; }
.rk-closed-l { display: flex; gap: 1.6rem; flex-wrap: wrap; font-family: var(--serif); font-size: 1.05rem; }
.rk-closed-l a { color: var(--ink); text-underline-offset: 0.2em; }
.rk-closed-l a:hover { color: var(--red); }