/* ═══════════════════════════════════════════
   PLATFORM · PAGES — content surfaces on the platform ramp

   The expression layer for ricrios.com's content pages (decision memos,
   404). Replaces the legacy cyber sheets on those pages entirely: every
   value is a platform token, the label voice matches the homepage and
   the brand, and the ASCII blocks are kept as CRAFT — set in the ascii
   role, accent-inked, plates rather than costume.
   ═══════════════════════════════════════════ */

* { box-sizing: border-box; }

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

body {
    margin: 0;
    background: var(--surface);
    color: var(--text);
    font-family: var(--font-ui);
    font-size: var(--text-base);
    line-height: var(--leading-body);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    /* No transition on the body: the theme flip snaps. A 300ms page-wide
       crossfade reads as a flash on first paint, not as polish. */
}

::selection { background: var(--accent); color: var(--text-inverse); }

a { color: var(--text); text-decoration: none; transition: var(--transition-color); }
a:hover { color: var(--accent); }
a:focus-visible,
button:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 3px;
}

/* ── The label voice — one treatment sitewide ── */
.case-page-back, .memo-section > h2, .option-label,
.theme-toggle, .error-nav a, .case-link,
.artifact-label, .artifacts-section-label, .btn-ghost {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
}

/* ── Theme toggle (site.js drives it) ─────── */
.theme-toggle {
    position: fixed;
    inset-block-start: var(--space-md);
    inset-inline-start: var(--space-md);
    z-index: var(--layer-sticky);
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    color: var(--text-muted);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    padding: var(--space-xs) var(--space-md);
    cursor: pointer;
    transition: var(--transition-color);
}
.theme-toggle:hover { color: var(--accent); border-color: currentColor; }
.theme-toggle .theme-icon { color: var(--accent); }

/* ── Page frame ───────────────────────────── */
.case-page {
    max-width: 860px;
    margin: 0 auto;
    padding: var(--band) var(--safe-inline) var(--space-3xl);
}

.case-page-back { color: var(--text-muted); display: inline-block; }
.case-page-back:hover { color: var(--accent); }

/* ── ASCII as craft ───────────────────────── */
.ascii-section-header,
.card-ascii-art,
.footer-ascii pre {
    font-family: var(--font-ascii);
    font-size: var(--text-xs);
    line-height: 1.25;
    color: var(--accent);
    margin: 0;
    white-space: pre;
    overflow-x: auto;
}
.ascii-section-header { margin-block: var(--space-2xl) var(--space-lg); }
/* The 63-char plate is wider than a phone: scale the glyphs to the
   viewport so the box keeps its corners instead of losing its right
   wall to an overflow scroll nobody discovers. */
@media (max-width: 640px) {
    .ascii-section-header { font-size: clamp(0.5rem, 2.3vw, 0.75rem); }
}

/* ── Memo type ────────────────────────────── */
.case-page h1 {
    font-family: var(--font-display);
    font-weight: var(--weight-display);
    font-size: var(--display-2);
    line-height: var(--leading-display);
    letter-spacing: var(--tracking-display);
    margin: 0 0 var(--space-md);
    max-width: 16ch;
    text-wrap: balance;
}

.memo-subtitle {
    font-size: var(--text-lg);
    color: var(--text-muted);
    max-width: var(--measure-narrow);
    margin: 0 0 var(--band);
}

.memo-section {
    display: grid;
    grid-template-columns: 10rem minmax(0, 1fr);
    gap: var(--space-md) var(--space-xl);
    padding-block: var(--space-xl);
    border-top: 1px solid var(--line);
}
@media (max-width: 640px) {
    .memo-section { grid-template-columns: 1fr; gap: var(--space-xs); }
}

.memo-section > h2 {
    color: var(--text-muted);
    margin: 0;
    padding-top: 0.35em;
    grid-row: 1;
}

/* Every content block stays in the content column — a section with two
   paragraphs must not leak its second one under the label. */
.memo-section > p,
.memo-section > ul,
.memo-section > ol { grid-column: 2; }
@media (max-width: 640px) {
    .memo-section > p,
    .memo-section > ul,
    .memo-section > ol { grid-column: 1; }
}

.memo-section p,
.memo-section ul,
.memo-section ol {
    margin: 0 0 var(--space-md);
    max-width: var(--measure);
    font-size: var(--text-base);
}
.memo-section p:last-child,
.memo-section ul:last-child,
.memo-section ol:last-child { margin-bottom: 0; }

.memo-section ul,
.memo-section ol { padding-left: 1.1rem; }
.memo-section li { margin-bottom: var(--space-sm); }
.memo-section li::marker { color: var(--text-muted); }
.memo-section strong { font-weight: var(--weight-semibold); }

/* ── The stamp ────────────────────────────────
   The filing-system row under the ASCII plate: the memo knows its own
   number, kind and weight — same voice as the index cards' meta row. */
.memo-stamp {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--text-muted);
    margin: calc(-1 * var(--space-md)) 0 var(--space-xl);
}

/* ── The promise, at scale ────────────────────
   Each memo's one quotable line was body copy in the grid. It is the
   typographic beat of the page: full measure, display face, a hairline
   of the hour's accent above. Facts untouched — pure presentation. */
.memo-promise { display: block; }

.memo-promise > h2 {
    padding-top: 0;
    padding-bottom: var(--space-md);
}

.memo-promise > p {
    font-family: var(--font-display);
    font-size: var(--text-4xl);
    font-weight: var(--weight-display);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-display);
    color: var(--text);
    max-width: 24ch;
    text-wrap: balance;
    margin: 0;
    padding-top: var(--space-md);
    border-top: 2px solid var(--accent);
}

/* ── The mechanism, drawn ─────────────────────
   Each memo carries one figure: the argument as a diagram, inked
   entirely in tokens so it rides the hour's palette and both themes.
   Abstract by intent — mechanisms, never mocked-up product UI. */
.memo-figure {
    grid-column: 2;
    margin: 0;
}
@media (max-width: 640px) {
    .memo-figure { grid-column: 1; }
}

.memo-figure svg {
    width: 100%;
    height: auto;
    display: block;
}

.memo-figure figcaption {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--text-muted);
    margin-top: var(--space-md);
    max-width: var(--measure);
}

/* The figure ink kit — every mark on a diagram is one of these. */
.fig-frame  { fill: none; stroke: var(--line-strong, var(--line)); stroke-width: 1.5; }
.fig-line   { stroke: var(--line); stroke-width: 1.5; fill: none; }
.fig-feed   { stroke: var(--accent-secondary); stroke-width: 1.5; fill: none; opacity: 0.65; }
.fig-ink    { fill: var(--text); }
.fig-dim    { fill: var(--text-muted); opacity: 0.45; }
/* Two accents, two jobs: the lead accent marks the ARGUMENT (the owned
   middle, the hub, the bridge); the counterpart marks MOVEMENT (flows,
   arrows, value bars). New York orange and blue, both on every figure. */
.fig-ghost  { fill: color-mix(in srgb, var(--accent-secondary) 26%, transparent); }
.fig-acc-shape {
    fill: color-mix(in srgb, var(--accent) 10%, transparent);
    stroke: var(--accent);
    stroke-width: 1.5;
}
.fig-acc-stroke line { stroke: var(--accent); stroke-width: 2; }
.fig-flow path { fill: none; stroke: var(--accent-secondary); stroke-width: 1.6; }
.fig-arrhead { fill: var(--accent-secondary); }

.fig-label, .fig-year, .fig-dim-t, .fig-title, .fig-acc-t {
    font-family: var(--font-mono);
    font-weight: var(--weight-bold);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.fig-label  { font-size: 11px; fill: var(--text-muted); }
.fig-year   { font-size: 12px; fill: var(--text); }
.fig-dim-t  { font-size: 9.5px; fill: var(--text-muted); letter-spacing: 0.08em; }
.fig-title  { font-size: 14px; fill: var(--text); }
.fig-acc-t  { font-size: 10px; fill: var(--accent); }

/* ── The arc ──────────────────────────────────
   Four memos, one career: the strip files this memo in the decade's
   through-line and hands the reader the other three. */
.memo-arc {
    /* The footer's own rule draws the line — a second, shorter one
       here read as a rendering slip. */
    padding: var(--space-xl) 0 0;
}

.memo-arc-label {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 0 0 var(--space-md);
}

.memo-arc ol {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm) var(--space-lg);
    margin: 0 0 var(--space-lg);
    padding: 0;
}

.memo-arc li {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
}

.memo-arc li a,
.memo-arc li span {
    color: var(--text-muted);
    text-decoration: none;
}
.memo-arc li a:hover,
.memo-arc li a:focus-visible { color: var(--accent); }
.memo-arc li.is-here span { color: var(--accent); }
.memo-arc b { font-weight: inherit; }

/* ── The chain ────────────────────────────────
   A memo never dead-ends: the footer hands the reader the next one. */
.memo-next {
    padding: var(--space-xl) 0;
    border-top: 1px solid var(--line);
}
/* The arc already rules the footer's top — one hairline, not two. */
.memo-arc + .memo-next { border-top: none; padding-top: var(--space-md); }

.memo-next-label {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 0 0 var(--space-sm);
}

.memo-next-title {
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    font-weight: var(--weight-display);
    line-height: var(--leading-display);
    letter-spacing: var(--tracking-display);
    color: var(--text);
    text-decoration: none;
}
.memo-next-title:hover,
.memo-next-title:focus-visible { color: var(--accent); }

.option-label { color: var(--accent); margin-right: var(--space-xs); }

/* ── Page footer ──────────────────────────── */
.case-page-footer {
    margin-top: var(--band);
    padding-top: var(--space-xl);
    border-top: 1px solid var(--line);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md) var(--space-2xl);
    justify-content: space-between;
    align-items: baseline;
}
.case-page-footer .footer-ascii pre { color: var(--text-muted); }
/* Same closing note on every memo: the arc and the chain are full
   rows, then the back link and the ledger line share the last one. */
.case-page-footer .memo-arc,
.case-page-footer .memo-next { flex-basis: 100%; }
.case-page-footer .footer-ascii { margin-inline-start: auto; }

/* ── Artifacts — the form registry, public ── */
.case-microcopy {
    font-size: var(--text-base);
    color: var(--text-muted);
    max-width: var(--measure-narrow);
    margin: 0 0 var(--space-xl);
}

.swatch-picker {
    display: flex;
    gap: var(--space-sm);
    margin-bottom: var(--band);
}
.swatch {
    inline-size: 2rem;
    block-size: 2rem;
    border-radius: var(--radius-pill);
    border: 1px solid var(--line);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-sm);
    transition: var(--transition-color);
}
/* Swatches carry the system's own inks — nothing off-palette. */
.swatch[data-color="#e9803a"] { background: #e9803a; }
.swatch[data-color="#458ad9"] { background: #458ad9; }
.swatch[data-color="#8a8a8a"] { background: #8a8a8a; }
.swatch:hover { border-color: var(--accent); color: var(--accent); }
.swatch--active {
    border-color: var(--accent);
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.artifacts-grid {
    display: grid;
    /* 12rem lets the four lives sit as ONE row (the molt is a
       sequence, not a pile); the archive below wraps as it likes. */
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    gap: var(--space-lg);
    align-items: stretch;
}

.artifacts-section-label {
    grid-column: 1 / -1;
    color: var(--text-muted);
    margin: var(--space-xl) 0 0;
    padding-top: var(--space-lg);
    border-top: 1px solid var(--line);
}
.artifacts-section-label:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

.artifact-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    border: 1px solid var(--line);
    border-radius: var(--radius-base);
    padding: var(--space-lg);
    transition: var(--transition-color);
}
.artifact-card:hover { border-color: var(--accent); }

.artifact-label { color: var(--text-muted); margin: 0; }

.artifact-preview {
    font-family: var(--font-ascii);
    font-size: var(--text-xs);
    line-height: 1.25;
    color: var(--accent);
    margin: 0;
    white-space: pre;
    overflow-x: auto;
}
/* Never crop a specimen: the registry's one job is showing the mark
   whole. Small screens scale the glyphs instead of the letterform. */
@media (max-width: 480px) {
    .artifact-preview { font-size: clamp(0.5rem, 2.4vw, 0.75rem); }
}

/* The lives read at full width: on boards wide enough for four
   columns, each life spans two — a deliberate 2×2, and 34-char
   specimens that fit their frame instead of scrolling out of it. */
@media (min-width: 900px) {
    .artifact-card[data-variant="splayed"],
    .artifact-card[data-variant="planted"],
    .artifact-card[data-variant="diagonal"],
    .artifact-card[data-variant="minuscule"] { grid-column: span 2; }
}

.artifact-note {
    font-size: var(--text-sm);
    color: var(--text-muted);
    margin: 0;
    max-width: var(--measure-narrow);
}

.artifact-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-top: auto;
}
.btn-ghost {
    background: transparent;
    border: 1px solid var(--line);
    border-radius: var(--radius-base);
    color: var(--text-muted);
    padding: var(--space-xs) var(--space-md);
    cursor: pointer;
    transition: var(--transition-color);
}
.btn-ghost:hover { color: var(--accent); border-color: currentColor; }

.artifact-toast {
    position: fixed;
    inset-block-end: var(--space-xl);
    inset-inline-start: 50%;
    translate: -50% 0;
    z-index: var(--layer-sticky);
    background: var(--surface);
    border: 1px solid var(--accent);
    border-radius: var(--radius-pill);
    padding: var(--space-xs) var(--space-lg);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--text);
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms ease;
}
.artifact-toast.visible { opacity: 1; }

/* ── 404 ──────────────────────────────────── */
.error-page { max-width: none; padding: 0; }

.error-page #hero-section {
    position: relative;
    /* The homepage owns the full viewport; the 404 must NOT — its one
       job is saying "off the grid", and at 100svh the message sat a
       full screen below an image identical to home. The mark still
       commands, the words make the fold. */
    height: 58vh;
    height: 58svh;
    min-height: 340px;
    min-height: min(340px, 58svh);
    background: var(--surface);
    overflow: hidden;
}
/* --hero-ratio: auto — the section owns the box; a ratio would beat
   inset:0 and squash the field. See bridge-ricrios.css. */
.error-page #hero-section rr-hero { position: absolute; inset: 0; --hero-ratio: auto; }

.error-page .thesis-section,
.error-page .error-nav,
.error-page .case-page-footer {
    max-width: 860px;
    margin-inline: auto;
    padding-inline: var(--safe-inline);
}

.error-page .thesis-section { padding-block: var(--band) var(--space-xl); text-align: center; }

.error-page .hero-title {
    font-family: var(--font-display);
    font-weight: var(--weight-display);
    font-size: var(--display-2);
    line-height: var(--leading-display);
    letter-spacing: var(--tracking-display);
    margin: 0 0 var(--space-md);
}
.error-page .hero-subhead {
    font-size: var(--text-lg);
    color: var(--text-muted);
    margin: 0;
}

.error-nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md) var(--space-2xl);
    justify-content: center;
    padding-block: var(--space-xl) var(--band);
}
.error-nav a { color: var(--text-muted); }
.error-nav a:hover { color: var(--accent); }

.error-page .case-page-footer {
    margin-top: 0;
    padding-block: var(--space-xl) var(--space-3xl);
    justify-content: center;
}


/* ── Fixed chrome on phones ────────────────
   Same discipline as the homepage (bridge-home.css): the labelled
   MODE pill parked on sentences mid-scroll; a disc doesn't. This
   layer loads on the memo, artifacts and 404 pages. */
@media (max-width: 640px) {
    .theme-toggle { padding: 0.55rem 0.65rem; min-height: 0; min-width: 0; }
    .theme-toggle .theme-label { display: none; }
}