/* Identity family: the shared grammar behind /profile, /u/<slug> and /atlas
   (+ /atlas/explore). MULTIPLICITY-DESIGN-LEVEL-UP-1,
   PROFILE-PUBLIC-ATLAS-VISUAL-ELEVATION-1.

   One family, three jobs:
     Profile        mine - the listener's identity and private control room;
     Public Profile the listener's curated outward-facing archive;
     ATLAS          read-only discovery and navigation of what is already permitted.

   They share a masthead, ruled figures, ruled sections, quiet tags and one
   button language, and differ in what they put on the page. This file is
   presentation only: nothing here decides what is public, discoverable or
   entitled. Those rules live server side and are untouched by it.

   Craft carried from CAИON / ROTATIOИ / AИNUAL / LEDGER: black wall,
   sentence-case labels, rules instead of boxes, a 12px type floor, nothing
   animating at rest, and the cyan -> near-white -> magenta signal used once per
   page as the seal mark where the evidence begins. */

:root {
    --if-wall: #070707;
    --if-ink: #f4f5f7;
    --if-ink-2: rgba(244,245,247,0.76);
    --if-ink-3: rgba(244,245,247,0.6);
    --if-ink-4: rgba(244,245,247,0.5);
    --if-line: rgba(255,255,255,0.09);
    --if-line-2: rgba(255,255,255,0.16);
    --if-line-3: rgba(255,255,255,0.34);
    --if-cyan: #a6dcea;
    --if-good: #74e0aa;
    --if-warm: #f0cf73;
    --if-danger: #f0a0a0;
    --if-signal: linear-gradient(90deg, #81e8f5 0%, #eef5f7 50%, #ff668f 100%);
    --if-ease: var(--motion-enter, cubic-bezier(0.16, 1, 0.3, 1));
    --if-quick: var(--motion-duration-utility, 180ms);
    --if-font: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --if-measure: 1120px;
}

/* ── Masthead ─────────────────────────────────────────────────────────────── */
.if-mast { position: relative; padding: 48px 0 0; margin: 0; min-width: 0; }
.if-eyebrow {
    display: inline-flex; align-items: center; gap: 10px; margin: 0;
    font: 600 15px/1.3 var(--if-font); letter-spacing: 0; color: var(--if-ink-2);
}
.if-eyebrow a { color: inherit; text-decoration: none; }
.if-eyebrow a:hover { color: var(--if-ink); }
.if-eyebrow .mx-icon, .if-eyebrow svg { width: 16px; height: 16px; flex: none; }
.if-title {
    margin: 28px 0 0; max-width: 18ch;
    font: 700 clamp(40px, 6.2vw, 84px)/0.98 var(--if-font); letter-spacing: -0.04em;
    color: var(--if-ink); text-wrap: balance; overflow-wrap: anywhere;
}
.if-deck {
    margin: 18px 0 0; max-width: 44ch;
    font: 500 clamp(17px, 1.7vw, 21px)/1.42 var(--if-font); letter-spacing: -0.01em; color: var(--if-ink-2);
    text-wrap: pretty;
}
.if-note { margin: 12px 0 0; max-width: 64ch; font: 400 14px/1.55 var(--if-font); color: var(--if-ink-3); }

/* ── Ruled figures ────────────────────────────────────────────────────────── */
.if-figs {
    position: relative; margin: 40px 0 0; padding: 0;
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    border-top: 1px solid var(--if-line);
}
/* The seal mark: the family signal, once per page, where the evidence begins. */
.if-figs::before {
    content: ""; position: absolute; left: 0; top: -1px; width: 72px; height: 1px; background: var(--if-signal);
}
.if-figs.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.if-figs.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 640px; }
.if-fig {
    min-width: 0; margin: 0; padding: 18px 24px 2px; display: flex; flex-direction: column;
    border-left: 1px solid var(--if-line);
}
.if-fig:first-child { padding-left: 0; border-left: 0; }
.if-fig dt {
    order: 2; margin: 6px 0 0; font: 600 14px/1.35 var(--if-font); color: var(--if-ink-3); letter-spacing: 0;
}
.if-fig dd {
    order: 1; margin: 0; font: 700 20px/1.25 var(--if-font); letter-spacing: -0.015em; color: var(--if-ink);
    font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}
.if-fig dd a { color: inherit; text-decoration: underline; text-decoration-color: var(--if-line-3); text-underline-offset: 4px; }
.if-fig dd a:hover { text-decoration-color: var(--if-ink); }

/* ── In-page index ────────────────────────────────────────────────────────── */
.if-index {
    display: flex; flex-wrap: wrap; gap: 0 28px; margin: 40px 0 0; padding: 0;
    border-bottom: 1px solid var(--if-line); list-style: none;
}
.if-index a {
    display: inline-flex; align-items: center; min-height: 44px;
    font: 600 15px/1.3 var(--if-font); color: var(--if-ink-3); text-decoration: none;
    transition: color var(--if-quick) ease;
}
.if-index a:hover { color: var(--if-ink); }

/* ── Ruled sections ───────────────────────────────────────────────────────── */
.if-sec { position: relative; margin: 0; padding: 36px 0 0; border-top: 1px solid var(--if-line); min-width: 0; }
.if-sec-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 20px; margin: 0 0 20px; }
.if-sec-title { margin: 0; font: 700 clamp(22px, 2.2vw, 28px)/1.2 var(--if-font); letter-spacing: -0.02em; color: var(--if-ink); text-wrap: balance; }
.if-sec-meta { font: 500 14px/1.4 var(--if-font); color: var(--if-ink-3); letter-spacing: 0; }
.if-sec-deck { margin: -8px 0 20px; max-width: 62ch; font: 400 15px/1.6 var(--if-font); color: var(--if-ink-2); }

/* ── Quiet tags ───────────────────────────────────────────────────────────── */
.if-tag {
    display: inline-flex; align-items: center; gap: 7px; min-height: 28px; padding: 3px 11px;
    border: 1px solid var(--if-line-2); border-radius: 999px; background: transparent;
    font: 600 13px/1.3 var(--if-font); letter-spacing: 0; text-transform: none; color: var(--if-ink-2);
    white-space: nowrap;
}
.if-tag--good { color: var(--if-good); border-color: rgba(116,224,170,0.34); }
.if-tag--cyan { color: var(--if-cyan); border-color: rgba(166,220,234,0.34); }

/* ── State line (public / private / preview) ──────────────────────────────── */
.if-state { display: flex; align-items: baseline; gap: 10px; font: 600 15px/1.45 var(--if-font); color: var(--if-ink); }
.if-state::before { content: ""; width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--if-ink-4); transform: translateY(-1px); }
.if-state.is-public::before { background: var(--if-good); }
.if-state.is-preview::before { background: var(--if-warm); }
.if-state small { font: 400 14px/1.45 var(--if-font); color: var(--if-ink-3); }

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.if-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 44px; padding: 0 18px; border-radius: 999px;
    border: 1px solid var(--if-line-2); background: transparent; color: var(--if-ink);
    font: 600 14px/1.2 var(--if-font); letter-spacing: 0; text-transform: none; text-decoration: none;
    cursor: pointer; white-space: nowrap;
    transition: border-color var(--if-quick) ease, background-color var(--if-quick) ease, color var(--if-quick) ease;
}
.if-btn:hover { border-color: var(--if-line-3); background: rgba(255,255,255,0.04); }
.if-btn--primary { background: var(--if-ink); border-color: var(--if-ink); color: #0a0a0a; }
.if-btn--primary:hover { background: #fff; border-color: #fff; }
.if-btn--quiet { border-color: transparent; color: var(--if-ink-3); padding: 0 6px; }
.if-btn--quiet:hover { background: none; color: var(--if-ink); border-color: transparent; }
.if-btn svg { width: 16px; height: 16px; flex: none; }

/* ── Focus + motion ───────────────────────────────────────────────────────── */
.if-scope :focus-visible, .if-btn:focus-visible, .if-index a:focus-visible, .if-fig a:focus-visible {
    outline: 2px solid var(--if-ink); outline-offset: 3px; border-radius: 6px;
}

@media (max-width: 860px) {
    .if-figs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .if-figs.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .if-fig:nth-child(odd) { padding-left: 0; border-left: 0; }
    .if-figs.cols-3 .if-fig:nth-child(odd) { padding-left: 24px; border-left: 1px solid var(--if-line); }
    .if-figs.cols-3 .if-fig:first-child { padding-left: 0; border-left: 0; }
    .if-fig:nth-child(n+3) { border-top: 1px solid var(--if-line); padding-top: 16px; margin-top: 14px; }
    .if-figs.cols-3 .if-fig:nth-child(n+3) { border-top: 0; margin-top: 0; padding-top: 18px; }
}
@media (max-width: 560px) {
    .if-mast { padding-top: 32px; }
    .if-title { margin-top: 20px; }
    .if-figs.cols-3 { grid-template-columns: 1fr; }
    .if-figs.cols-3 .if-fig:nth-child(n) { padding-left: 0; border-left: 0; }
    .if-figs.cols-3 .if-fig:nth-child(n+2) { border-top: 1px solid var(--if-line); padding-top: 14px; margin-top: 14px; }
    .if-fig { padding-right: 12px; }
    .if-fig dd { font-size: 18px; }
    .if-index { gap: 0 20px; }
    .if-sec { padding-top: 28px; }
}
@media (prefers-reduced-motion: reduce) {
    .if-btn, .if-index a { transition: none; }
}