/* ── A CODE'S OWN PAGE — /codes/:slug ───────────────────────────────────────
   src/routes/library.js codeHome(). Arian, 2026-09-24: "when you click on
   the code, you should see a full page for the code … the extended versions
   that go at the top then there should be a place to view the collectors
   card." The page wears the Code's own palette (.page-code-next in
   codes-next.css); the top wears its picture's tone.

   Surfaces paint, nothing is glass, nothing casts a shadow. */

/* ── The world, across the top ───────────────────────────────────────────
   Whole, never veiled. The words sit low, and the only shade is weighted to
   them — pale on a pale world, deep on a deep one. */
.ch-top {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; align-items: end;
  min-height: max(34rem, min(92svh, 60rem));
  background: var(--code-bg, #15151c);
}
.ch-top--dark { color: #fff; }
.ch-top--light { color: #121218; }
.ch-top__world { position: absolute; inset: 0; z-index: -2; }
.ch-top__world picture, .ch-top__img { display: block; width: 100%; height: 100%; max-width: none; }
.ch-top__img { object-fit: cover; }
.ch-top::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.ch-top--dark::after { background: linear-gradient(180deg, transparent 48%, rgba(5, 4, 22, .5) 100%), linear-gradient(90deg, rgba(5, 4, 22, .32), transparent 46%); }
.ch-top--light::after { background: linear-gradient(180deg, transparent 48%, rgba(246, 247, 250, .62) 100%), linear-gradient(90deg, rgba(246, 247, 250, .4), transparent 46%); }
/* No world yet (a Code without its extended art or a plate): its own paint. */
.ch-top--painted {
  background:
    radial-gradient(120% 90% at 78% 6%, color-mix(in srgb, var(--code-accent) 26%, transparent), transparent 62%),
    linear-gradient(158deg, var(--code-bg) 0%, color-mix(in srgb, var(--code-bg) 72%, #0A0A0E) 68%, #0A0A0E 100%);
}

.ch-top > .ch-top__inner {
  display: grid; gap: .5rem; justify-items: start;
  padding-top: calc(var(--nav-h) + 3rem);
  padding-bottom: clamp(2.4rem, 8vh, 5rem);
}
.ch-top > .ch-top__inner > * + * { margin-top: 0; }
.ch-top__num {
  margin: 0; font-family: var(--font-mark); line-height: .9;
  font-size: clamp(3.2rem, 9vw, 6.4rem); letter-spacing: .04em;
}
/* rhythm.css sizes every h1 that is not excused; this one is set here. */
.ch-top__title {
  margin: 0; font-family: var(--font-display); font-weight: 300; line-height: 1;
  font-size: clamp(2rem, 6vw, 4.4rem); letter-spacing: .1em; text-transform: uppercase;
}
.ch-top__seq { margin: .35rem 0 0; font-family: var(--font-mark); font-size: clamp(.95rem, 1.6vw, 1.2rem); letter-spacing: .12em; opacity: .9; }
.ch-top__sub { margin: .2rem 0 0; font-size: var(--fs-micro); letter-spacing: var(--track-hud); text-transform: uppercase; opacity: .8; }
.ch-top__lead { max-width: 34rem; margin: .3rem 0 0; font-size: var(--fs-small); line-height: 1.6; opacity: .88; }
.ch-top__acts { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.1rem; }
/* A fixed floor, not a share of the row: the row is only as wide as its
   buttons, so a percentage here made each one the whole row and stacked them. */
.ch-top__acts .cn-btn, .ch-top__acts .btn { min-width: 13.5rem; }
/* The outline button reads against the picture, not against the Code's ground. */
.ch-top--dark .cn-btn--line { color: #fff; border-color: rgba(255, 255, 255, .55); }
.ch-top--light .cn-btn--line { color: #121218; border-color: rgba(18, 18, 24, .45); }
.ch-top--dark .cn-btn--line:hover { background: rgba(255, 255, 255, .1); border-color: #fff; }
.ch-top--light .cn-btn--line:hover { background: rgba(18, 18, 24, .06); border-color: #121218; }
.ch-top__draft { margin: .6rem 0 0; }

/* ── The explanation, beside its collector card ─────────────────────────── */
.ch-about { position: relative; padding-block: clamp(2.6rem, 6vw, 4.6rem); }
.ch-about__grid { display: grid; gap: 2.4rem; }
.ch-about__purpose {
  margin: 0 0 1.6rem; max-width: 40rem;
  font-family: var(--font-display); font-weight: 300; line-height: 1.45; letter-spacing: .02em;
  font-size: clamp(1.1rem, 2.1vw, 1.55rem);
}
@media (min-width: 860px) {
  .ch-about__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 300px); gap: clamp(2.5rem, 6vw, 5rem); align-items: start; }
  .ch-card { position: sticky; top: calc(var(--nav-h) + 1.5rem); }
}

/* THE COLLECTOR CARD, always at full strength — collected or not, it is the
   card as Ana made it, and the line under it says LOCKED or COLLECTED. Arian,
   2026-09-24: "don't put a blur over it if it's not activated, it makes it
   look really bad quality when it's in its locked stage." The card is the way
   into its own view. */
.ch-card { display: grid; gap: .85rem; justify-items: center; align-content: start; }
.ch-card__link {
  position: relative; display: block; width: min(64vw, 300px);
  border-radius: var(--cn-r); text-decoration: none;
  transition: transform .5s var(--ease-io, ease);
}
.ch-card__link:hover { transform: translateY(-3px) scale(1.012); }
.ch-card__link:focus-visible { outline: 2px solid var(--code-accent); outline-offset: 4px; }
.ch-card__img, .ch-card__link img { display: block; width: 100%; height: auto; border-radius: var(--cn-r); outline: 1px solid var(--cn-hair); }
.ch-card__state {
  display: inline-flex; align-items: center; gap: .5rem; margin: 0;
  font-size: var(--fs-micro); letter-spacing: var(--track-hud); text-transform: uppercase;
  color: var(--cn-dim);
}
/* Collected is a highlight, so it is a gradient, light first — from the
   page's own ink into the Code's colour, so it reads on every Code's ground
   (in the Code's blues alone it vanished on 001's bright blue). */
.ch-card.is-collected .ch-card__word {
  font-weight: 600;
  background: linear-gradient(135deg, var(--code-ink, #f2f4f7), color-mix(in srgb, var(--code-ink, #f2f4f7) 68%, var(--code-grad-from, #9aa3ad)));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ch-card__open { font-size: var(--fs-micro); letter-spacing: var(--track-hud); }

/* The affirmation is the Code's own words; on a Code whose accent is close
   to its ground (005's blue on its night) the accent would lose them, so
   here it takes the page's ink. */
.page-code-home .cn-affirm { color: var(--code-ink); opacity: .92; }

/* ── What it connects to ─────────────────────────────────────────────────── */
.ch-connected { padding-bottom: clamp(3rem, 7vw, 5rem); }

@media (prefers-reduced-motion: reduce) {
  .ch-card__link { transition: none; }
  .ch-card__link:hover { transform: none; }
}