/* ==========================================================================
   HQData / design system
   Archive / case-file aesthetic. Bone paper, ember ink, typewriter metadata.
   ========================================================================== */

/* ---------- fonts ---------- */

@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Redaction:wght@400&family=Redaction+20:wght@400;700&family=Redaction+35:wght@400;700&family=Redaction+50:wght@400;700&family=Redaction+70:wght@400;700&family=Space+Mono:ital,wght@0,400;0,700;1,400&display=swap');

/* ---------- tokens ---------- */

:root {
    --bone:       #F4EFE6;
    --bone-soft:  #EDE5D6;
    --bone-deep:  #E3D8C0;
    --graphite:   #12100E;
    --ink:        #1C1814;
    --ember:      #FF6A1F;
    --ember-hot:  #FF8340;
    --rust:       #B33A10;
    --signal:     #F5C518;
    --line:       rgba(18, 16, 14, 0.22);
    --line-soft:  rgba(18, 16, 14, 0.10);
    --shadow-card:  0 18px 30px -24px rgba(28, 24, 20, 0.45);
    --shadow-card-hover: 0 30px 50px -28px rgba(28, 24, 20, 0.55);
    --max:        1400px;
    --gutter:     clamp(20px, 3.5vw, 56px);
    --f-display:  'Redaction 50', 'Redaction', Georgia, serif;
    --f-small:    'Redaction 35', 'Redaction', Georgia, serif;
    --f-finer:    'Redaction 20', 'Redaction', Georgia, serif;
    --f-mono:     'Space Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
    --f-block:    'Archivo Black', 'Space Mono', ui-sans-serif, system-ui, sans-serif;
}

/* ---------- reset ---------- */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: auto; }
body {
    background: var(--bone);
    color: var(--graphite);
    font-family: var(--f-mono);
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

/* paper texture overlay, extremely subtle */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    background-image:
        radial-gradient(rgba(20,16,14,0.025) 1px, transparent 1px),
        radial-gradient(rgba(20,16,14,0.015) 1px, transparent 1px);
    background-size: 3px 3px, 7px 7px;
    background-position: 0 0, 1px 2px;
    mix-blend-mode: multiply;
}

a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible {
    outline: 2px solid var(--ember);
    outline-offset: 3px;
}

img, svg { max-width: 100%; display: block; }
button { font: inherit; background: none; border: 0; cursor: pointer; color: inherit; padding: 0; }

::selection { background: var(--ember); color: var(--bone); }

/* ---------- layout ---------- */

.wrap {
    max-width: var(--max);
    margin: 0 auto;
    padding-inline: var(--gutter);
    position: relative;
    z-index: 2;
}

.hr-rule {
    position: relative;
    height: 14px;
    border-top: 1px solid var(--line);
    margin-block: 20px 10px;
}
.hr-rule::before,
.hr-rule::after {
    content: '';
    position: absolute;
    inset-block-start: -1px;
    width: 1px;
    height: 6px;
    background: var(--line);
}
.hr-rule::before { inset-inline-start: 0; }
.hr-rule::after  { inset-inline-end:  0; }

/* ticked ruler used on the masthead */
.ruler {
    position: relative;
    height: 18px;
    border-top: 1px solid var(--line);
    overflow: hidden;
}
.ruler .tick {
    position: absolute;
    top: -1px;
    width: 1px;
    background: var(--line);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.ruler.on .tick { transform: scaleY(1); }
.ruler .tick.long  { height: 10px; }
.ruler .tick.short { height: 5px; }

/* ---------- header / nav ---------- */

.top {
    position: sticky;
    top: 0;
    z-index: 50;
    background: color-mix(in srgb, var(--bone) 94%, transparent);
    backdrop-filter: blur(6px);
    border-bottom: 1px solid var(--line-soft);
}
.top-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-block: 16px;
    gap: 24px;
}
.brand {
    display: inline-flex;
    align-items: baseline;
    gap: 12px;
    font-family: var(--f-display);
    font-size: 22px;
    letter-spacing: 0.02em;
    line-height: 1;
}
.brand .brand-mark {
    display: inline-grid;
    place-items: center;
    width: 26px;
    height: 26px;
    background: var(--graphite);
    color: var(--bone);
    font-family: var(--f-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    transform: rotate(-4deg);
}
.brand .brand-meta {
    font-family: var(--f-mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    color: var(--ink);
    opacity: 0.55;
    text-transform: uppercase;
}
.nav {
    display: flex;
    align-items: center;
    gap: 26px;
}
.nav a {
    font-family: var(--f-mono);
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    position: relative;
    padding-bottom: 2px;
    transition: color 140ms ease;
}
.nav a::after {
    content: '';
    position: absolute;
    left: 0;
    right: 100%;
    bottom: 0;
    height: 1px;
    background: var(--ember);
    transition: right 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.nav a:hover::after,
.nav a.is-active::after { right: 0; }
.nav a.is-active { color: var(--rust); }

/* ---------- masthead ---------- */

.mast {
    padding-block: clamp(40px, 7vw, 110px) clamp(30px, 5vw, 80px);
}
.mast-kicker {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: var(--f-mono);
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink);
    opacity: 0.7;
    margin-bottom: 12px;
}
.mast-kicker .kicker-mid {
    flex: 1;
    text-align: center;
    opacity: 0.6;
}
.mast-title {
    font-family: var(--f-display);
    font-weight: 400;
    font-size: clamp(56px, 11vw, 168px);
    line-height: 0.86;
    letter-spacing: -0.01em;
    margin: 22px 0 10px;
    color: var(--graphite);
    position: relative;
}
.mast-title .mast-small {
    font-family: var(--f-small);
    font-size: 0.32em;
    letter-spacing: 0.0em;
    display: inline-block;
    transform: translateY(-0.55em);
    padding-inline: 0.35em;
    color: var(--rust);
}
.mast-underline {
    display: block;
    height: 10px;
    width: 100%;
    position: relative;
    margin-top: 18px;
}
.mast-underline::before {
    content: '';
    position: absolute;
    inset-block: 4px auto;
    left: 0;
    right: 100%;
    height: 2px;
    background: var(--ember);
    transition: right 900ms cubic-bezier(0.2, 0.8, 0.2, 1) 220ms;
}
.mast.on .mast-underline::before { right: 0; }
.mast-lede {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 40px;
    align-items: end;
    padding-block: 16px 8px;
}
.mast-lede .lede-body {
    font-family: var(--f-small);
    font-size: clamp(18px, 1.4vw, 22px);
    line-height: 1.35;
    max-width: 52ch;
    color: var(--ink);
}
.mast-lede .lede-meta {
    font-family: var(--f-mono);
    font-size: 11px;
    text-align: right;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink);
    opacity: 0.65;
    line-height: 1.6;
}
.mast-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--f-mono);
    font-size: 12px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    padding: 12px 0 10px;
    border-bottom: 1px solid var(--graphite);
    color: var(--graphite);
    margin-top: 44px;
    transition: color 180ms ease, border-color 180ms ease, padding 220ms ease;
}
.mast-cta .cta-arrow { transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1); }
.mast-cta:hover { color: var(--rust); border-color: var(--rust); }
.mast-cta:hover .cta-arrow { transform: translateY(3px); }

/* ---------- cards / grid ---------- */

.section-lead {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 40px;
    align-items: end;
    padding-block: 20px 10px;
}
.section-index {
    font-family: var(--f-mono);
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ink);
    opacity: 0.6;
}
.section-title {
    font-family: var(--f-display);
    font-weight: 400;
    font-size: clamp(36px, 5vw, 70px);
    line-height: 0.95;
    letter-spacing: -0.01em;
    margin: 0;
}
.section-sub {
    margin-top: 14px;
    font-family: var(--f-small);
    font-size: clamp(16px, 1.1vw, 19px);
    max-width: 54ch;
    color: var(--ink);
}

.grid-vault {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px 24px;
    margin-top: 38px;
    position: relative;
}
.card {
    position: relative;
    display: block;
    background: var(--bone-soft);
    border: 1px solid var(--line);
    padding: 26px 26px 24px;
    box-shadow: var(--shadow-card);
    transition: transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1),
                box-shadow 320ms ease,
                background 220ms ease;
    min-height: 260px;
    isolation: isolate;
    will-change: transform;
    overflow: hidden;
}
.card-dataset:hover {
    transform: translateY(-4px);
    background: var(--bone);
    box-shadow: var(--shadow-card-hover);
    z-index: 4;
}
.card-no {
    position: absolute;
    top: 14px;
    left: 20px;
    font-family: var(--f-display);
    font-size: clamp(58px, 7vw, 90px);
    line-height: 0.8;
    color: var(--graphite);
    opacity: 0.08;
    pointer-events: none;
    letter-spacing: -0.02em;
    z-index: 0;
    user-select: none;
}
.card-head,
.card-title,
.card-subtitle,
.card-meta,
.card-foot { position: relative; z-index: 1; }
.card-redacted { cursor: not-allowed; }
.card-redacted .card-title,
.card-redacted .card-subtitle {
    filter: blur(3px);
    user-select: none;
}
.card-redacted .card-call { color: var(--ink); opacity: 0.55; }
.card-veil {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: repeating-linear-gradient(
        135deg,
        transparent 0 12px,
        rgba(18, 16, 14, 0.05) 12px 13px
    );
    z-index: 1;
}
.card-redacted::after {
    content: 'UNDER SEAL';
    position: absolute;
    right: -30px;
    bottom: 48px;
    transform: rotate(-8deg);
    padding: 6px 40px;
    border: 2px solid var(--rust);
    color: var(--rust);
    background: rgba(244, 239, 230, 0.82);
    font-family: var(--f-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.22em;
    z-index: 2;
    pointer-events: none;
}
.card-empty {
    background: transparent;
    border: 1px dashed var(--line);
    box-shadow: none;
    grid-column: 1 / -1;
    min-height: 180px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 24px;
}
.card-corner {
    position: absolute;
    top: -1px;
    right: -1px;
    width: 0;
    height: 0;
    border-top: 22px solid var(--ember);
    border-left: 22px solid transparent;
    pointer-events: none;
}
.card-redacted .card-corner { display: none; }
.card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--f-mono);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin-bottom: 22px;
}
.card-call { color: var(--rust); font-weight: 700; }
.card-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 8px;
    border: 1px solid currentColor;
    font-size: 10px;
}
.card-status.status-available { color: var(--graphite); }
.card-status.status-available::before {
    content: ''; width: 6px; height: 6px; background: var(--ember); border-radius: 50%;
}
.card-status.status-upcoming { color: var(--ink); opacity: 0.65; }
.card-status.status-upcoming::before {
    content: ''; width: 6px; height: 6px; background: transparent; border: 1px solid currentColor; border-radius: 50%;
}
.card-title {
    font-family: var(--f-display);
    font-weight: 400;
    font-size: clamp(22px, 1.8vw, 28px);
    line-height: 1.02;
    letter-spacing: -0.005em;
    margin-bottom: 10px;
}
.card-subtitle {
    font-family: var(--f-small);
    font-size: 15px;
    color: var(--ink);
    line-height: 1.35;
    margin-bottom: 20px;
    max-width: 44ch;
}
.card-meta {
    margin: 0;
    padding: 16px 0 0;
    border-top: 1px solid var(--line-soft);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px 14px;
    font-family: var(--f-mono);
    font-size: 13px;
    letter-spacing: 0.03em;
}
.card-meta dt {
    color: var(--ink);
    opacity: 0.55;
    font-size: 11px;
    letter-spacing: 0.18em;
    margin-bottom: 4px;
}
.card-meta dd {
    margin: 0;
    color: var(--graphite);
    font-weight: 700;
    font-size: 14px;
    line-height: 1.2;
}
.card-foot {
    position: absolute;
    bottom: 14px;
    right: 18px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--f-mono);
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ink);
    opacity: 0.7;
    transition: opacity 200ms ease, color 200ms ease;
}
.card-dataset:hover .card-foot { opacity: 1; color: var(--rust); }
.card-foot-arrow {
    display: inline-block;
    transform: rotate(-90deg);
    transition: transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.card-dataset:hover .card-foot-arrow { transform: rotate(-90deg) translateY(-4px); }
.card-foot-lock {
    display: inline-grid;
    place-items: center;
    width: 14px; height: 14px;
    border: 1px solid currentColor;
    border-radius: 50%;
    font-size: 9px;
    line-height: 1;
}

/* ---------- vault pagination ---------- */

.vault-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin-top: 36px;
    padding: 18px 8px;
    border-top: 1px solid var(--line-soft);
    border-bottom: 1px solid var(--line-soft);
}
.pg-arrow {
    width: 38px;
    height: 38px;
    display: inline-grid;
    place-items: center;
    border: 1px solid var(--line);
    background: var(--bone);
    font-family: var(--f-mono);
    font-size: 14px;
    transition: background 160ms ease, color 160ms ease, transform 160ms ease;
}
.pg-arrow:hover:not(:disabled) {
    background: var(--graphite);
    color: var(--bone);
    transform: translateY(-1px);
}
.pg-arrow:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}
.pg-dots {
    display: inline-flex;
    gap: 6px;
}
.pg-dot {
    min-width: 38px;
    height: 38px;
    padding: 0 10px;
    display: inline-grid;
    place-items: center;
    border: 1px solid var(--line);
    background: transparent;
    font-family: var(--f-mono);
    font-size: 13px;
    letter-spacing: 0.08em;
    color: var(--ink);
    transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}
.pg-dot:hover { border-color: var(--graphite); }
.pg-dot.is-on {
    background: var(--graphite);
    color: var(--bone);
    border-color: var(--graphite);
}
.pg-count {
    margin-left: 6px;
    font-family: var(--f-mono);
    font-size: 12px;
    letter-spacing: 0.18em;
    color: var(--ink);
    opacity: 0.7;
    text-transform: uppercase;
}
.vault-caption {
    margin-top: 14px;
    font-family: var(--f-mono);
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink);
    opacity: 0.6;
    text-align: center;
}

/* ---------- vault browse strip (dataset page) ---------- */

.vault-strip-sec {
    padding-block: clamp(50px, 6vw, 80px);
}
.vault-strip {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(240px, 1fr);
    gap: 14px;
    overflow-x: auto;
    padding: 6px 2px 14px;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    scrollbar-color: var(--line) transparent;
}
.vault-strip::-webkit-scrollbar { height: 6px; }
.vault-strip::-webkit-scrollbar-thumb { background: var(--line); }
.strip-item {
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px 18px;
    background: var(--bone-soft);
    border: 1px solid var(--line);
    transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
    min-height: 112px;
    position: relative;
    overflow: hidden;
}
.strip-item:hover { background: var(--bone); border-color: var(--graphite); transform: translateY(-2px); }
.strip-item.is-current {
    background: var(--graphite);
    color: var(--bone);
    border-color: var(--graphite);
}
.strip-item.is-current .strip-no,
.strip-item.is-current .strip-status { color: var(--ember); }
.strip-item.is-sealed {
    background: transparent;
    cursor: not-allowed;
}
.strip-item.is-sealed::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(
        135deg,
        transparent 0 10px,
        rgba(18, 16, 14, 0.05) 10px 11px
    );
    pointer-events: none;
}
.strip-no {
    font-family: var(--f-mono);
    font-size: 11px;
    letter-spacing: 0.22em;
    color: var(--rust);
    font-weight: 700;
}
.strip-call {
    font-family: var(--f-mono);
    font-size: 12px;
    letter-spacing: 0.1em;
    color: inherit;
    opacity: 0.8;
}
.strip-title {
    font-family: var(--f-display);
    font-size: 20px;
    line-height: 1.05;
    color: inherit;
}
.strip-status {
    font-family: var(--f-mono);
    font-size: 10px;
    letter-spacing: 0.2em;
    color: var(--ink);
    opacity: 0.65;
    margin-top: auto;
}

/* ---------- ledger / quality pipeline ---------- */

.ledger {
    position: relative;
    padding-block: clamp(60px, 7vw, 110px) clamp(18px, 2vw, 30px);
}
.ledger-rows {
    position: relative;
    margin-top: clamp(30px, 4vw, 56px);
}
.ledger-rows .ledger-row:last-child { margin-bottom: 0; }
.ledger-line {
    position: absolute;
    top: 20px;
    bottom: 20px;
    left: 50%;
    width: 2px;
    background: var(--ember);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 1200ms cubic-bezier(0.2, 0.8, 0.2, 1);
    z-index: 0;
    pointer-events: none;
}
.ledger.on .ledger-line { transform: scaleY(1); }
.ledger-row {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 120px 1fr;
    gap: 24px;
    align-items: start;
    margin-block: 34px;
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 500ms ease, transform 500ms ease;
}
.ledger-row.on { opacity: 1; transform: none; }
.ledger-row:nth-child(even) .ledger-card { text-align: right; }
.ledger-row .ledger-card.left  { grid-column: 1 / 2; }
.ledger-row .ledger-card.right { grid-column: 3 / 4; }
.ledger-stamp {
    grid-column: 2 / 3;
    justify-self: center;
    position: relative;
    width: 120px;
    height: 120px;
    display: grid;
    place-items: center;
    z-index: 2;
}
/* Bone-colored mask that cuts the central ledger line visually so it stops
   before each stamp and resumes after. Slightly wider than the stamp's
   glyph so there is a clean gap on both sides. */
.ledger-stamp::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 140px;
    height: 140px;
    background: var(--bone);
    border-radius: 50%;
    z-index: 0;
    pointer-events: none;
}
.ledger-stamp svg {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 1;
}
.ledger-stamp svg path,
.ledger-stamp svg circle,
.ledger-stamp svg line,
.ledger-stamp svg polyline {
    fill: none;
    stroke: var(--graphite);
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: var(--len, 400);
    stroke-dashoffset: var(--len, 400);
    transition: stroke-dashoffset 900ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.ledger-row.on .ledger-stamp svg path,
.ledger-row.on .ledger-stamp svg circle,
.ledger-row.on .ledger-stamp svg line,
.ledger-row.on .ledger-stamp svg polyline {
    stroke-dashoffset: 0;
}
.ledger-step-num {
    font-family: var(--f-mono);
    font-size: 11px;
    letter-spacing: 0.2em;
    color: var(--rust);
    text-transform: uppercase;
    margin-bottom: 8px;
    display: inline-block;
}
.ledger-step-title {
    font-family: var(--f-display);
    font-weight: 400;
    font-size: clamp(26px, 2.4vw, 36px);
    line-height: 1.0;
    margin: 0 0 10px;
}
.ledger-step-body {
    font-family: var(--f-small);
    font-size: 16px;
    line-height: 1.45;
    color: var(--ink);
    max-width: 40ch;
}
.ledger-row:nth-child(even) .ledger-step-body { margin-left: auto; }

/* ---------- excerpt ---------- */

.excerpt {
    padding-block: clamp(60px, 7vw, 110px);
}
.excerpt-lead {
    font-family: var(--f-mono);
    font-size: 12px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--ink);
    opacity: 0.7;
    margin-bottom: 18px;
}
.excerpt-card {
    position: relative;
    background: var(--graphite);
    color: #E6E1D4;
    padding: 30px 34px;
    font-family: var(--f-mono);
    font-size: 13px;
    line-height: 1.7;
    white-space: pre-wrap;
    border-left: 3px solid var(--ember);
    overflow: hidden;
}
.excerpt-card .ex-header {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--signal);
    opacity: 0.85;
    margin-bottom: 18px;
}
.excerpt-card .ex-k { color: var(--ember); }
.excerpt-card .ex-str { color: #C7D8B4; }
.excerpt-card .ex-num { color: var(--signal); }
.excerpt-card .ex-com { color: #6C6254; font-style: italic; }
.excerpt-card .ex-code { color: #E6E1D4; }
.redaction {
    position: relative;
    display: inline-block;
    padding: 0 6px;
    color: transparent;
    background: var(--ember);
    transform-origin: left center;
    transform: scaleX(0);
    transition: transform 700ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.excerpt-card.on .redaction,
.excerpt-card.is-on .redaction { transform: scaleX(1); }
.redaction::after {
    content: attr(data-label);
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-size: 10px;
    letter-spacing: 0.24em;
    color: var(--graphite);
    font-weight: 700;
    opacity: 0;
    transition: opacity 260ms ease 650ms;
    white-space: nowrap;
}
.excerpt-card.on .redaction::after,
.excerpt-card.is-on .redaction::after { opacity: 1; }

/* ---------- envelope (contact teaser) ---------- */

.envelope-sec {
    padding-block: clamp(60px, 7vw, 110px);
}
.envelope-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
}
.envelope {
    position: relative;
    width: 100%;
    max-width: 520px;
    aspect-ratio: 3 / 2;
    margin-inline: auto;
}
.envelope svg { width: 100%; height: 100%; }
.envelope .seal {
    transform-origin: center;
    animation: pulse 3.6s ease-in-out infinite;
}
@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.06); }
}
.envelope-text .addr-block {
    font-family: var(--f-mono);
    font-size: 13px;
    letter-spacing: 0.08em;
    line-height: 1.7;
    text-transform: uppercase;
    color: var(--ink);
    margin-bottom: 18px;
}
.envelope-text .addr-email {
    font-family: var(--f-display);
    font-size: clamp(36px, 4vw, 54px);
    color: var(--rust);
    margin: 12px 0 6px;
    letter-spacing: -0.01em;
    line-height: 1;
    display: inline-block;
    border-bottom: 2px solid var(--ember);
}
.envelope-text .addr-note {
    font-family: var(--f-small);
    font-size: 15px;
    color: var(--ink);
    max-width: 40ch;
    margin-top: 14px;
}

/* ---------- landing CTA stack (replaces old contact teaser) ---------- */

.cta-stack {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 520px;
}
.cta-primary {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto auto;
    gap: 4px 18px;
    align-items: center;
    padding: 22px 26px;
    background: var(--graphite);
    color: var(--bone);
    border: 1px solid var(--graphite);
    overflow: hidden;
    transition: background 180ms ease, transform 200ms ease, box-shadow 200ms ease;
}
.cta-primary::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 40%, rgba(255, 106, 31, 0.12) 50%, transparent 60%);
    transform: translateX(-100%);
    transition: transform 600ms cubic-bezier(0.2, 0.8, 0.2, 1);
    pointer-events: none;
}
.cta-primary:hover {
    background: var(--ink);
    transform: translateY(-2px);
    box-shadow: 0 20px 32px -22px rgba(18, 16, 14, 0.6);
}
.cta-primary:hover::before { transform: translateX(100%); }
.cta-kicker {
    grid-column: 1 / -1;
    font-family: var(--f-mono);
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ember);
    opacity: 0.9;
}
.cta-main {
    grid-column: 1;
    font-family: var(--f-display);
    font-size: clamp(34px, 3.6vw, 48px);
    letter-spacing: -0.01em;
    line-height: 1;
    color: var(--bone);
}
.cta-meta {
    grid-column: 1;
    font-family: var(--f-block);
    font-size: 14px;
    letter-spacing: 0.04em;
    color: var(--bone);
    opacity: 0.75;
    margin-top: 2px;
}
.cta-tail {
    grid-column: 2;
    grid-row: 2 / 4;
    align-self: center;
    font-family: var(--f-mono);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.22em;
    color: var(--ember);
    white-space: nowrap;
    transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.cta-primary:hover .cta-tail { transform: translateX(6px); }

.cta-secondary {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    padding: 16px 22px;
    background: transparent;
    border: 1px dashed var(--line);
    color: var(--graphite);
    transition: border-color 180ms ease, background 180ms ease, transform 180ms ease;
}
.cta-secondary:hover {
    border-color: var(--rust);
    background: rgba(179, 58, 16, 0.06);
    transform: translateY(-1px);
}
.cta-sec-kicker {
    grid-column: 1;
    grid-row: 1;
    font-family: var(--f-mono);
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--rust);
    opacity: 0.85;
}
.cta-sec-email {
    grid-column: 1;
    grid-row: 2;
    font-family: var(--f-display);
    font-size: clamp(24px, 2.4vw, 32px);
    color: var(--graphite);
    letter-spacing: -0.005em;
    line-height: 1;
    margin-top: 4px;
    border-bottom: 1px solid var(--ember);
    padding-bottom: 2px;
    justify-self: start;
}
.cta-sec-tail {
    grid-column: 2;
    grid-row: 1 / 3;
    align-self: center;
    font-family: var(--f-mono);
    font-size: 16px;
    color: var(--rust);
    transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.cta-secondary:hover .cta-sec-tail { transform: translateY(3px); }

@media (max-width: 680px) {
    .cta-primary { padding: 20px 20px; }
    .cta-tail { display: none; }
    .cta-sec-tail { display: none; }
}

/* ---------- colophon footer ---------- */

.colophon {
    border-top: 1px solid var(--line);
    margin-top: 40px;
    padding-block: 50px 32px;
}
.colophon-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr 1fr;
    gap: 28px;
}
.colophon-col h4 {
    font-family: var(--f-mono);
    font-size: 11px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--ink);
    opacity: 0.55;
    margin: 0 0 14px;
    font-weight: 700;
}
.colophon-col a, .colophon-col p {
    display: block;
    font-family: var(--f-small);
    font-size: 14px;
    line-height: 1.7;
    color: var(--graphite);
    margin: 0 0 4px;
}
.colophon-col a:hover { color: var(--rust); }
.colo-mark {
    font-family: var(--f-display);
    font-size: 44px;
    line-height: 1;
}
.colophon-bar {
    display: flex;
    justify-content: space-between;
    font-family: var(--f-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink);
    opacity: 0.55;
    margin-top: 46px;
    padding-top: 16px;
    border-top: 1px dashed var(--line-soft);
}

/* ---------- dataset page specifics ---------- */

.stamp-label {
    display: inline-flex;
    gap: 14px;
    align-items: center;
    padding: 10px 16px;
    border: 2px solid var(--rust);
    color: var(--rust);
    font-family: var(--f-mono);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    transform: rotate(-1.6deg);
    background: rgba(244, 239, 230, 0.6);
}
.stamp-label::before {
    content: '';
    width: 8px; height: 8px;
    background: var(--rust);
    border-radius: 50%;
}

.case-head {
    padding-block: clamp(40px, 6vw, 90px);
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
}
.case-head.case-head-grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
    gap: clamp(32px, 5vw, 64px);
    align-items: start;
}
.case-head-left { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.case-head-right { min-width: 0; }
.case-head h1 {
    font-family: var(--f-display);
    font-size: clamp(42px, 6.4vw, 98px);
    line-height: 0.9;
    margin: 0;
}
@media (max-width: 960px) {
    .case-head.case-head-grid { grid-template-columns: 1fr; }
}

/* ---------- license public page ---------- */

.license-shell {
    margin-block: clamp(20px, 3vw, 40px) clamp(40px, 5vw, 70px);
}

.license-prose {
    max-width: 98ch;
    margin: 0 auto;
    padding: clamp(24px, 3vw, 40px) clamp(18px, 3.2vw, 44px);
    border: 1px solid var(--line);
    background:
        linear-gradient(180deg, rgba(255,255,255,0.24), rgba(255,255,255,0)) 0 0 / 100% 100% no-repeat,
        var(--bone);
    box-shadow: 0 22px 50px -34px rgba(28, 24, 20, 0.42);
}

.license-prose > * { max-width: 82ch; }

.license-prose h2 {
    font-family: var(--f-display);
    font-size: clamp(26px, 2.6vw, 38px);
    line-height: 1.02;
    margin-top: 42px;
    margin-bottom: 12px;
    letter-spacing: -0.005em;
    color: var(--graphite);
}
.license-prose h2:first-of-type { margin-top: 0; }
.license-prose p, .license-prose li {
    font-family: var(--f-small);
    font-size: 17px;
    line-height: 1.68;
    color: var(--ink);
    margin: 0 0 14px;
    text-align: left;
}
.license-notice {
    border: 1px dashed var(--line);
    padding: 14px 18px;
    margin-bottom: 30px;
    font-family: var(--f-mono);
    font-size: 12px;
    letter-spacing: 0.02em;
    line-height: 1.5;
    color: var(--ink);
    background: var(--bone-soft);
    max-width: none;
}

@media (max-width: 720px) {
    .license-prose {
        padding: 22px 16px;
    }

    .license-prose > * {
        max-width: none;
    }
}

/* ---------- prose split: "What is inside" + "Who it is for" ---------- */

.prose-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: clamp(30px, 4vw, 56px);
    margin-block: clamp(40px, 5vw, 70px);
    align-items: start;
}
.prose-grid .prose-col { min-width: 0; }
.prose-grid .prose-col h2 {
    font-family: var(--f-display);
    font-weight: 400;
    font-size: clamp(28px, 3vw, 42px);
    line-height: 1.0;
    letter-spacing: -0.005em;
    margin: 0 0 12px;
}
.prose-grid .prose-col p {
    font-family: var(--f-small);
    font-size: 18px;
    line-height: 1.55;
    color: var(--ink);
    margin: 0 0 14px;
    max-width: 58ch;
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    orphans: 2;
    widows: 2;
}
.prose-grid .prose-col p:last-child { margin-bottom: 0; }

@media (max-width: 960px) {
    .prose-grid { grid-template-columns: 1fr; gap: 32px; }
    .prose-grid .prose-col p { max-width: none; }
}

/* ---------- bench section: copy + chart side by side ---------- */

.bench-section {
    margin-block: clamp(40px, 5vw, 70px);
}
.bench-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(340px, 1fr);
    gap: clamp(28px, 4vw, 56px);
    align-items: start;
}
.bench-copy {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.bench-copy h2 {
    font-family: var(--f-display);
    font-weight: 400;
    font-size: clamp(28px, 3vw, 40px);
    line-height: 1.0;
    letter-spacing: -0.005em;
    margin: 0 0 4px;
}
.bench-copy p {
    font-family: var(--f-small);
    font-size: clamp(16px, 1.1vw, 18px);
    line-height: 1.5;
    color: var(--ink);
    margin: 0;
    max-width: 50ch;
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
}
.bench-viz { min-width: 0; }

@media (max-width: 960px) {
    .bench-layout { grid-template-columns: 1fr; }
    .bench-copy p { max-width: none; }
}

/* ---------- bench chart ---------- */

.bench-chart {
    position: relative;
    background: var(--bone-soft);
    border: 1px solid var(--line);
    padding: 22px 22px 18px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    isolation: isolate;
}
.bench-chart::before {
    /* dashed pane echoing the archive aesthetic */
    content: '';
    position: absolute;
    inset: 8px;
    border: 1px dashed var(--line-soft);
    pointer-events: none;
    z-index: 0;
}
.bench-chart > * { position: relative; z-index: 1; }

.bench-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--line);
}
.bench-kicker {
    display: block;
    font-family: var(--f-mono);
    font-size: 10px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--rust);
}
.bench-title {
    display: block;
    font-family: var(--f-display);
    font-size: clamp(18px, 1.4vw, 22px);
    line-height: 1.1;
    margin-top: 4px;
    color: var(--graphite);
}
.bench-legend {
    display: inline-flex;
    gap: 10px;
    flex-shrink: 0;
}
.bench-leg {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--f-mono);
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink);
    opacity: 0.75;
}
.bench-leg i {
    width: 8px; height: 8px;
    border-radius: 50%;
    display: inline-block;
}
.bench-leg-base { background: var(--graphite); }
.bench-leg-hq   { background: var(--ember); box-shadow: 0 0 0 3px rgba(255,106,31,0.18); }

.bench-rows {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.bench-row {
    display: grid;
    grid-template-columns: 90px 1fr 56px;
    align-items: center;
    gap: 14px;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 400ms ease, transform 400ms ease;
    transition-delay: var(--stagger, 0ms);
}
.bench-chart[data-bench].on .bench-row,
.bench-chart[data-bench].is-visible .bench-row,
[data-reveal].on .bench-chart .bench-row {
    opacity: 1;
    transform: none;
}
.bench-cat {
    font-family: var(--f-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--graphite);
}

.bench-axis {
    position: relative;
    height: 20px;
    display: flex;
    align-items: center;
}
.bench-track {
    position: absolute;
    left: 0; right: 0;
    top: 50%;
    height: 2px;
    transform: translateY(-50%);
    background:
        repeating-linear-gradient(
            to right,
            var(--line) 0 4px,
            transparent 4px 8px
        );
    opacity: 0.7;
}
.bench-segment {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: var(--from);
    right: calc(100% - var(--to));
    height: 3px;
    background: linear-gradient(to right, rgba(18,16,14,0.55), var(--ember));
    transform-origin: left center;
    transform: translateY(-50%) scaleX(0);
    transition: transform 900ms cubic-bezier(0.2, 0.8, 0.2, 1);
    transition-delay: calc(var(--stagger, 0ms) + 120ms);
}
.bench-row.is-drawn .bench-segment,
[data-reveal].on .bench-segment {
    transform: translateY(-50%) scaleX(1);
}
.bench-dot {
    position: absolute;
    top: 50%;
    left: var(--x);
    transform: translate(-50%, -50%) scale(0);
    width: 12px;
    height: 12px;
    border-radius: 50%;
    transition: transform 420ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.bench-dot em {
    position: absolute;
    top: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--f-mono);
    font-style: normal;
    font-size: 10px;
    letter-spacing: 0.06em;
    white-space: nowrap;
    color: inherit;
    opacity: 0;
    transition: opacity 260ms ease;
}
.bench-dot-base {
    background: var(--graphite);
    z-index: 2;
    transition-delay: calc(var(--stagger, 0ms) + 0ms);
}
.bench-dot-base em { color: var(--graphite); }
.bench-dot-hq {
    background: var(--ember);
    box-shadow: 0 0 0 4px rgba(255,106,31,0.18);
    z-index: 3;
    transition-delay: calc(var(--stagger, 0ms) + 420ms);
}
.bench-dot-hq em { color: var(--rust); font-weight: 700; }
[data-reveal].on .bench-dot { transform: translate(-50%, -50%) scale(1); }
[data-reveal].on .bench-dot em { opacity: 1; transition-delay: calc(var(--stagger, 0ms) + 600ms); }

.bench-delta {
    font-family: var(--f-block);
    font-size: 18px;
    color: var(--ember);
    text-align: right;
    letter-spacing: -0.01em;
    opacity: 0;
    transition: opacity 360ms ease;
    transition-delay: calc(var(--stagger, 0ms) + 640ms);
}
[data-reveal].on .bench-delta { opacity: 1; }

.bench-foot {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-top: 8px;
    border-top: 1px dashed var(--line);
    font-family: var(--f-mono);
    font-size: 10px;
    letter-spacing: 0.04em;
    color: var(--ink);
    opacity: 0.7;
    line-height: 1.55;
}

@media (max-width: 960px) {
    .bench-chart { padding: 20px 18px 16px; }
    .bench-row { grid-template-columns: 70px 1fr 46px; gap: 10px; }
    .bench-head { flex-direction: column; align-items: flex-start; }
    .bench-legend { margin-top: 4px; }
}
@media (max-width: 480px) {
    .bench-row { grid-template-columns: 58px 1fr 40px; }
    .bench-cat { font-size: 10px; letter-spacing: 0.12em; }
    .bench-dot em { font-size: 9px; }
    .bench-delta { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
    .bench-row { opacity: 1; transform: none; transition: none; }
    .bench-segment { transform: translateY(-50%) scaleX(1); transition: none; }
    .bench-dot { transform: translate(-50%, -50%) scale(1); transition: none; }
    .bench-dot em, .bench-delta { opacity: 1; transition: none; }
}
.case-head .case-ref {
    font-family: var(--f-mono);
    font-size: 12px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--rust);
}
.case-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 0;
    border: 1px solid var(--line);
    background: var(--bone-soft);
}
.stat-cell {
    padding: 20px 22px;
    border-right: 1px solid var(--line);
}
.stat-cell:last-child { border-right: 0; }
.stat-k {
    display: block;
    font-family: var(--f-mono);
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink);
    opacity: 0.55;
    margin-bottom: 8px;
}
.stat-v {
    font-family: var(--f-display);
    font-size: clamp(28px, 2.2vw, 36px);
    line-height: 1;
    color: var(--graphite);
}

.prose {
    max-width: 70ch;
    margin-block: clamp(40px, 5vw, 70px);
}
.prose p, .prose li {
    font-family: var(--f-small);
    font-size: 18px;
    line-height: 1.55;
    color: var(--ink);
}
.prose h2 {
    font-family: var(--f-display);
    font-size: clamp(30px, 3vw, 44px);
    line-height: 1.0;
    margin-top: 44px;
    margin-bottom: 12px;
}
.prose h3 {
    font-family: var(--f-mono);
    font-size: 13px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--rust);
    margin-top: 30px;
    margin-bottom: 6px;
}

.schema-panel {
    margin-block: clamp(40px, 5vw, 80px);
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 40px;
    position: relative;
}
.schema-table {
    border-top: 1px solid var(--line);
}
.schema-row {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 20px;
    padding: 14px 0;
    border-bottom: 1px solid var(--line-soft);
    align-items: baseline;
}
.schema-row .k {
    font-family: var(--f-mono);
    font-size: 13px;
    letter-spacing: 0.06em;
    color: var(--rust);
    font-weight: 700;
}
.schema-row .v {
    font-family: var(--f-small);
    font-size: 16px;
    color: var(--ink);
    line-height: 1.4;
}
.schema-notes {
    border-left: 2px dashed var(--line);
    padding-left: 24px;
}
.schema-notes h4 {
    font-family: var(--f-mono);
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink);
    opacity: 0.6;
    margin: 0 0 12px;
}
.schema-notes p {
    font-family: var(--f-small);
    font-size: 15px;
    line-height: 1.5;
    color: var(--ink);
}

.purchase {
    margin-block: clamp(40px, 5vw, 80px);
    padding: 40px 44px;
    background: var(--graphite);
    color: var(--bone);
    position: relative;
    overflow: hidden;
}
.purchase::before {
    content: '';
    position: absolute;
    inset: 10px;
    border: 1px dashed rgba(244, 239, 230, 0.25);
    pointer-events: none;
}
.purchase h2 {
    font-family: var(--f-display);
    font-size: clamp(36px, 4vw, 58px);
    margin: 0 0 18px;
    color: var(--bone);
}
.purchase .steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px 28px;
    margin-top: 20px;
    position: relative;
}
.purchase .step {
    border-top: 1px solid rgba(244, 239, 230, 0.25);
    padding-top: 14px;
}
.purchase .step-num {
    font-family: var(--f-mono);
    font-size: 11px;
    letter-spacing: 0.22em;
    color: var(--ember);
    text-transform: uppercase;
    display: block;
    margin-bottom: 6px;
}
.purchase .step h4 {
    font-family: var(--f-display);
    font-size: 22px;
    line-height: 1;
    margin: 0 0 10px;
    color: var(--bone);
}
.purchase .step p {
    font-family: var(--f-small);
    font-size: 14.5px;
    line-height: 1.5;
    margin: 0;
    opacity: 0.85;
}
.purchase .cta-email {
    display: inline-block;
    margin-top: 26px;
    font-family: var(--f-display);
    font-size: clamp(30px, 3.5vw, 44px);
    color: var(--ember);
    border-bottom: 2px solid var(--ember);
    padding-bottom: 2px;
}

/* ---------- contact form ---------- */

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    padding-block: clamp(40px, 5vw, 80px);
}
.contact-grid .proc {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.proc-step {
    border-top: 1px solid var(--line);
    padding-top: 14px;
}
.proc-step .n {
    font-family: var(--f-mono);
    font-size: 11px;
    letter-spacing: 0.22em;
    color: var(--rust);
    text-transform: uppercase;
}
.proc-step h3 {
    font-family: var(--f-display);
    font-size: 26px;
    margin: 6px 0 6px;
    line-height: 1;
}
.proc-step p {
    font-family: var(--f-small);
    font-size: 16px;
    color: var(--ink);
    margin: 0;
    line-height: 1.45;
}

.form {
    background: var(--bone-soft);
    border: 1px solid var(--line);
    padding: 32px 34px;
    position: relative;
}
.form .form-head {
    display: flex;
    justify-content: space-between;
    font-family: var(--f-mono);
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--rust);
    margin-bottom: 18px;
}
.form label {
    display: block;
    font-family: var(--f-mono);
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ink);
    opacity: 0.65;
    margin-bottom: 6px;
    margin-top: 16px;
}
.form input, .form select, .form textarea {
    width: 100%;
    font-family: var(--f-mono);
    font-size: 14px;
    color: var(--graphite);
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--line);
    padding: 8px 0 10px;
    outline: none;
    transition: border-color 160ms ease;
}
.form input:focus, .form select:focus, .form textarea:focus {
    border-color: var(--ember);
}
.form textarea { min-height: 120px; resize: vertical; }
.form .hp { position: absolute; left: -9999px; top: -9999px; }
.form .row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
.form .submit {
    margin-top: 26px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: var(--f-mono);
    font-size: 12px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    padding: 12px 18px;
    background: var(--graphite);
    color: var(--bone);
    transition: background 160ms ease, transform 180ms ease;
}
.form .submit:hover { background: var(--rust); transform: translateY(-1px); }
.form .form-msg {
    margin-top: 14px;
    font-family: var(--f-mono);
    font-size: 12px;
    letter-spacing: 0.08em;
    min-height: 18px;
}
.form .form-msg.ok  { color: var(--rust); }
.form .form-msg.err { color: #9A1A1A; }

/* ---------- license cards (illustrated, minimal) ---------- */

.tiers-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    margin-block: clamp(30px, 4vw, 56px);
    align-items: stretch;
}

.lic-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--bone-soft);
    border: 1px solid var(--line);
    padding: 22px 20px 20px;
    text-align: center;
    transition: transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 320ms ease, background 220ms ease, border-color 220ms ease;
    overflow: hidden;
    isolation: isolate;
}
.lic-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-card-hover);
    border-color: var(--graphite);
}
.lic-featured {
    background: var(--graphite);
    color: var(--bone);
    border-color: var(--graphite);
}
.lic-featured:hover { border-color: var(--ember); }
.lic-mark {
    position: absolute;
    top: 14px;
    left: -38px;
    transform: rotate(-35deg);
    padding: 3px 44px;
    background: var(--ember);
    color: var(--graphite);
    font-family: var(--f-mono);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.22em;
    z-index: 3;
}

/* ----- illustration canvas ----- */

.lic-art {
    position: relative;
    width: 118px;
    height: 118px;
    margin: 2px auto 12px;
    display: grid;
    place-items: center;
    isolation: isolate;
}
.lic-art::after {
    /* faint ruler backdrop behind every illustration */
    content: '';
    position: absolute;
    inset: 12px;
    border: 1px dashed var(--line-soft);
    z-index: 0;
}
.lic-svg {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1;
}
.lic-stroke {
    fill: none;
    stroke: var(--graphite);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: stroke 220ms ease;
}
.lic-featured .lic-stroke { stroke: var(--bone); }
.lic-line { stroke-width: 1.3; opacity: 0.55; }

/* stroke-draw entry animation */
.lic-stroke-main {
    stroke-dasharray: 520;
    stroke-dashoffset: 520;
    animation: licDraw 1100ms cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
.lic-card:nth-child(2) .lic-stroke-main { animation-delay: 120ms; }
.lic-card:nth-child(3) .lic-stroke-main { animation-delay: 240ms; }
@keyframes licDraw { to { stroke-dashoffset: 0; } }

/* research: wax seal gently pulses */
.lic-seal { transform-origin: 110px 118px; animation: licSeal 3.6s ease-in-out infinite; }
@keyframes licSeal { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
.lic-card:hover .lic-seal { animation-duration: 1.4s; }

/* commercial: stamp inks in + slight tilt on hover */
.lic-stamp {
    transform-origin: 110px 110px;
    transform: rotate(-6deg);
    opacity: 0.95;
    transition: transform 380ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 380ms ease;
}
.lic-card:hover .lic-stamp {
    transform: rotate(-12deg) scale(1.05);
    opacity: 1;
}
.lic-stamp-shape {
    stroke-dasharray: 170;
    stroke-dashoffset: 170;
    animation: licDraw 900ms cubic-bezier(0.2, 0.8, 0.2, 1) 350ms forwards;
}

/* redistribution: fan spreads outward on hover */
.lic-sheet { transition: transform 420ms cubic-bezier(0.2, 0.8, 0.2, 1); }
.lic-card:hover .lic-sheet-a { transform: translate(-10px, 4px) rotate(-4deg); }
.lic-card:hover .lic-sheet-b { transform: translate(0, -2px) rotate(0deg); }
.lic-card:hover .lic-sheet-c { transform: translate(10px, 4px) rotate(4deg); }
.lic-dot { transform-origin: 120px 100px; animation: licSeal 2.8s ease-in-out infinite; }

/* ----- meta / price / cta ----- */

.lic-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 4px;
}
.lic-name {
    font-family: var(--f-mono);
    font-size: 10px;
    letter-spacing: 0.26em;
    color: var(--rust);
    text-transform: uppercase;
}
.lic-featured .lic-name { color: var(--ember); }
.lic-tag {
    font-family: var(--f-small);
    font-size: 12.5px;
    color: inherit;
    opacity: 0.7;
}

.lic-price {
    display: flex;
    align-items: baseline;
    gap: 3px;
    line-height: 0.9;
    margin: 14px 0 20px;
}
.lic-curr {
    font-family: var(--f-block);
    font-size: 11px;
    letter-spacing: 0.06em;
    opacity: 0.6;
    align-self: flex-start;
    padding-top: 6px;
}
.lic-num {
    font-family: var(--f-block);
    font-size: clamp(40px, 4vw, 54px);
    letter-spacing: -0.03em;
    font-weight: 400; /* Archivo Black is already bold */
}
.lic-summary {
    margin: 0 0 18px;
    max-width: 26ch;
    font-family: var(--f-small);
    font-size: 15px;
    line-height: 1.4;
    color: inherit;
    opacity: 0.82;
}

.lic-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 13px 20px;
    background: var(--graphite);
    color: var(--bone);
    font-family: var(--f-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    transition: background 180ms ease, color 180ms ease, transform 180ms ease, gap 260ms ease;
    align-self: stretch;
    margin-top: auto;
    margin-bottom: 6px;
}
.lic-cta-arrow { transition: transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1); }
.lic-cta:hover {
    background: var(--ember);
    color: var(--graphite);
    transform: translateY(-1px);
    gap: 18px;
}
.lic-cta:hover .lic-cta-arrow { transform: translateX(4px); }
.lic-featured .lic-cta { background: var(--ember); color: var(--graphite); }
.lic-featured .lic-cta:hover { background: var(--bone); }

.lic-read {
    align-self: stretch;
    margin-top: 12px;
    display: inline-flex;
    justify-content: center;
    gap: 6px;
    font-family: var(--f-mono);
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: inherit;
    opacity: 0.7;
    padding: 8px 4px;
    border-bottom: 1px dashed var(--line);
    transition: opacity 160ms ease, color 160ms ease, border-color 160ms ease;
}
.lic-read:hover { opacity: 1; color: var(--rust); border-bottom-color: var(--rust); }
.lic-featured .lic-read { color: var(--bone); }
.lic-featured .lic-read:hover { color: var(--ember); border-bottom-color: var(--ember); }

/* ----- more info disclosure ----- */

.lic-more {
    align-self: stretch;
    margin-top: 14px;
    position: relative;
}
.lic-more-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 6px 4px;
    font-family: var(--f-mono);
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: inherit;
    opacity: 0.8;
    background: transparent;
    border: 0;
    border-bottom: 1px dashed var(--ember);
    cursor: pointer;
    transition: opacity 160ms ease, color 160ms ease;
}
.lic-more-toggle:hover { opacity: 1; color: var(--rust); }
.lic-featured .lic-more-toggle:hover { color: var(--ember); }
.lic-more-mark {
    display: inline-block;
    font-family: var(--f-mono);
    font-size: 11px;
    line-height: 1;
    transition: transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.lic-more.is-open .lic-more-mark { transform: rotate(180deg); }

.lic-more-wrap {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 320ms cubic-bezier(0.2, 0.8, 0.2, 1), margin 280ms ease;
    margin-top: 0;
}
.lic-more.is-open .lic-more-wrap {
    grid-template-rows: 1fr;
    margin-top: 12px;
}
.lic-more-inner {
    overflow: hidden;
    min-height: 0;
}
.lic-more-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    text-align: left;
    border-top: 1px solid var(--line-soft);
}
.lic-featured .lic-more-list { border-top-color: rgba(244, 239, 230, 0.22); }
.lic-more-list li {
    display: flex;
    gap: 10px;
    padding: 8px 2px;
    border-bottom: 1px dashed var(--line-soft);
    font-family: var(--f-mono);
    font-size: 11px;
    line-height: 1.4;
    color: inherit;
    opacity: 0.88;
}
.lic-featured .lic-more-list li { border-bottom-color: rgba(244, 239, 230, 0.18); }
.lic-more-list li::before {
    content: '';
    flex: 0 0 auto;
    width: 10px; height: 10px;
    margin-top: 3px;
    border: 1px solid var(--ember);
    box-sizing: border-box;
    transform: rotate(45deg);
}
.lic-more-note {
    margin: 10px 0 0;
    padding: 8px 0 0;
    border-top: 1px solid var(--line-soft);
    font-family: var(--f-mono);
    font-size: 10px;
    letter-spacing: 0.06em;
    line-height: 1.55;
    color: inherit;
    opacity: 0.65;
    text-align: left;
}
.lic-featured .lic-more-note { border-top-color: rgba(244, 239, 230, 0.22); }

/* single line of support text under the tier grid */
.tiers-foot {
    margin-top: 6px;
    padding: 16px 20px;
    border: 1px dashed var(--line);
    background: rgba(244, 239, 230, 0.4);
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.tiers-foot .k {
    font-family: var(--f-mono);
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--rust);
}
.tiers-foot .v {
    font-family: var(--f-small);
    font-size: 15px;
    color: var(--ink);
    line-height: 1.4;
}

@media (max-width: 960px) {
    .tiers-grid { grid-template-columns: 1fr; }
    .lic-card { padding: 30px 22px 26px; }
    .lic-art { width: 140px; height: 140px; }
}

@media (prefers-reduced-motion: reduce) {
    .lic-stroke-main, .lic-stamp-shape { animation: none; stroke-dashoffset: 0; }
    .lic-seal, .lic-dot { animation: none; }
    .lic-sheet, .lic-stamp, .lic-card, .lic-cta { transition: none; }
}

/* ---------- curator card (inside schema-notes aside) ---------- */

.curator-card {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px dashed var(--line);
}
.curator-card-kicker {
    font-family: var(--f-mono);
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--rust);
    margin-bottom: 6px;
}
.curator-card-name {
    font-family: var(--f-display);
    font-weight: 400;
    font-size: clamp(22px, 2vw, 28px);
    line-height: 1;
    letter-spacing: -0.005em;
    margin: 0 0 10px;
}
.curator-card-alias {
    color: var(--rust);
    font-size: 0.7em;
    margin-left: 4px;
}
.curator-card-bio {
    font-family: var(--f-small);
    font-size: 14.5px;
    line-height: 1.45;
    color: var(--ink);
    margin: 0 0 14px;
}
.curator-card-links {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.curator-card-links a {
    display: block;
    padding: 9px 12px;
    border-top: 1px solid var(--line-soft);
    font-family: var(--f-mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--graphite);
    transition: background 140ms ease, color 140ms ease, padding 160ms ease;
}
.curator-card-links a:last-child {
    border-bottom: 1px solid var(--line-soft);
}
.curator-card-links a:hover {
    background: var(--graphite);
    color: var(--bone);
    padding-left: 16px;
}

/* ----- categories list inside schema-notes aside ----- */
.cat-block {
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px dashed var(--line);
}
.cat-block-kicker {
    font-family: var(--f-mono);
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--rust);
    margin-bottom: 10px;
}
.cat-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}
.cat-list li {
    display: grid;
    grid-template-columns: 74px 1fr;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px dashed var(--line-soft);
    align-items: baseline;
}
.cat-list li:last-child { border-bottom: 0; }
.cat-label {
    font-family: var(--f-mono);
    font-size: 10px;
    letter-spacing: 0.24em;
    color: var(--rust);
    font-weight: 700;
    text-transform: uppercase;
    white-space: nowrap;
    padding-top: 1px;
}
.cat-body {
    font-family: var(--f-small);
    font-size: 13.5px;
    line-height: 1.45;
    color: var(--ink);
}
@media (max-width: 680px) {
    .cat-list li { grid-template-columns: 64px 1fr; gap: 10px; }
    .cat-label { font-size: 9.5px; letter-spacing: 0.2em; }
    .cat-body { font-size: 13px; }
}

/* ---------- specimen deck ---------- */

.spec-pager {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding: 14px 16px;
    border-top: 1px solid var(--line-soft);
    border-bottom: 1px solid var(--line-soft);
    margin-bottom: 20px;
}
.spec-arrow {
    width: 34px;
    height: 34px;
    display: inline-grid;
    place-items: center;
    border: 1px solid var(--line);
    background: var(--bone);
    font-family: var(--f-mono);
    font-size: 13px;
    transition: background 140ms ease, color 140ms ease, transform 140ms ease;
}
.spec-arrow:hover:not(:disabled) {
    background: var(--graphite);
    color: var(--bone);
    transform: translateY(-1px);
}
.spec-arrow:disabled { opacity: 0.3; cursor: not-allowed; }
.spec-count {
    font-family: var(--f-mono);
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink);
    opacity: 0.75;
    min-width: 140px;
}
.spec-count [data-spec-cur] { color: var(--rust); font-weight: 700; }
.spec-dots {
    display: inline-flex;
    gap: 4px;
    margin-left: auto;
}
.spec-dot {
    min-width: 30px;
    height: 30px;
    padding: 0 6px;
    display: inline-grid;
    place-items: center;
    border: 1px solid var(--line);
    background: transparent;
    font-family: var(--f-mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    color: var(--ink);
    transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}
.spec-dot:hover { border-color: var(--graphite); }
.spec-dot.is-on {
    background: var(--graphite);
    color: var(--bone);
    border-color: var(--graphite);
}
.spec-deck {
    position: relative;
    display: grid;
    isolation: isolate;
}
.spec-deck .excerpt-card {
    grid-column: 1;
    grid-row: 1;
    opacity: 0;
    visibility: hidden;
    transform: translateY(14px) scale(0.995);
    transition:
        opacity 420ms cubic-bezier(0.2, 0.8, 0.2, 1),
        transform 520ms cubic-bezier(0.2, 0.8, 0.2, 1),
        visibility 0s linear 420ms;
    pointer-events: none;
    will-change: opacity, transform;
}
.spec-deck .excerpt-card.is-on {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    pointer-events: auto;
    z-index: 2;
    transition-delay: 0s, 0s, 0s;
}
.spec-deck .excerpt-card.is-out {
    opacity: 0;
    transform: translateY(-14px) scale(0.995);
}
.spec-autoswap-note {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    font-family: var(--f-mono);
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink);
    opacity: 0.55;
}
.spec-autoswap-note .spec-tick {
    display: inline-block;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--ember);
    animation: specTick 5s ease-in-out infinite;
}
.spec-pager.is-paused .spec-tick { animation: none; background: var(--line); }
.spec-pager.is-paused .spec-autoswap-note::after { content: 'PAUSED'; }
.spec-pager:not(.is-paused) .spec-autoswap-note::after { content: 'AUTO 5s'; }
@keyframes specTick {
    0%   { transform: scale(0.7); opacity: 0.35; }
    50%  { transform: scale(1.4); opacity: 1; }
    100% { transform: scale(0.7); opacity: 0.35; }
}
@media (max-width: 680px) {
    /* Mobile: strip the specimen pager to [prev] [count] [next] inline.
       No numbered page dots, no auto-swap status pill. */
    .spec-pager {
        gap: 10px;
        flex-wrap: nowrap;
        justify-content: space-between;
        padding: 10px 12px;
    }
    .spec-dots { display: none; }
    .spec-autoswap-note { display: none; }
    .spec-count {
        flex: 1;
        text-align: center;
        min-width: 0;
        font-size: 11px;
        letter-spacing: 0.14em;
    }
    .spec-arrow { flex: 0 0 auto; }
}
@media (prefers-reduced-motion: reduce) {
    .spec-deck .excerpt-card { transition: opacity 120ms linear; transform: none; }
    .spec-autoswap-note .spec-tick { animation: none; }
}

/* ---------- curator block ---------- */

.curator {
    margin-block: clamp(40px, 5vw, 80px);
    padding: 34px 36px;
    background: var(--bone-soft);
    border: 1px solid var(--line);
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 36px;
    position: relative;
    overflow: hidden;
}
.curator::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 6px; bottom: 0;
    background: var(--ember);
}
.curator-kicker {
    font-family: var(--f-mono);
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--rust);
    margin-bottom: 6px;
}
.curator-title {
    font-family: var(--f-display);
    font-weight: 400;
    font-size: clamp(32px, 3.4vw, 50px);
    line-height: 0.95;
    margin: 0 0 14px;
    letter-spacing: -0.01em;
}
.curator-handle {
    font-family: var(--f-mono);
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink);
    opacity: 0.7;
}
.curator-facts {
    list-style: none;
    padding: 0;
    margin: 0 0 18px;
    display: grid;
    gap: 10px;
}
.curator-facts li {
    position: relative;
    padding: 8px 0 8px 30px;
    border-bottom: 1px dashed var(--line-soft);
    font-family: var(--f-small);
    font-size: 16px;
    line-height: 1.4;
    color: var(--ink);
}
.curator-facts li::before {
    content: '';
    position: absolute;
    left: 0; top: 16px;
    width: 18px; height: 1px;
    background: var(--ember);
}
.curator-facts strong {
    font-family: var(--f-mono);
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--rust);
    font-weight: 700;
    margin-right: 6px;
}
.curator-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 10px;
    margin-top: 8px;
}
.curator-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border: 1px solid var(--line);
    background: var(--bone);
    font-family: var(--f-mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--graphite);
    transition: background 160ms ease, color 160ms ease, border-color 160ms ease, transform 160ms ease;
}
.curator-link:hover {
    background: var(--graphite);
    color: var(--bone);
    border-color: var(--graphite);
    transform: translateY(-1px);
}
.curator-link .link-arrow { color: var(--ember); }
.curator-link:hover .link-arrow { color: var(--bone); }
.curator-proof {
    position: relative;
    background: var(--graphite);
    color: var(--bone);
    padding: 20px 22px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    border-left: 3px solid var(--ember);
}
.curator-proof .proof-head {
    display: flex;
    justify-content: space-between;
    font-family: var(--f-mono);
    font-size: 10px;
    letter-spacing: 0.22em;
    color: var(--signal);
    opacity: 0.85;
}
.curator-proof .proof-big {
    font-family: var(--f-display);
    font-size: clamp(50px, 6vw, 88px);
    line-height: 0.9;
    color: var(--bone);
}
.curator-proof .proof-big .proof-rank {
    color: var(--ember);
    margin-right: 8px;
}
.curator-proof .proof-caption {
    font-family: var(--f-mono);
    font-size: 12px;
    letter-spacing: 0.14em;
    color: var(--bone);
    opacity: 0.75;
    line-height: 1.4;
}
.curator-proof .proof-link {
    font-family: var(--f-mono);
    font-size: 10px;
    letter-spacing: 0.22em;
    color: var(--ember);
    border-bottom: 1px solid var(--ember);
    align-self: flex-start;
    padding-bottom: 2px;
}

@media (max-width: 1040px) {
    .permit {
        grid-template-columns: 140px 1fr;
    }
    .permit-action {
        grid-column: 1 / -1;
        border-top: 2px dashed var(--line);
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        padding: 20px 26px;
    }
    .permit-featured .permit-action { border-top-color: rgba(244, 239, 230, 0.35); }
    .permit-price-note { margin: 0; }
    .permit-cta { flex: 0 0 auto; min-width: 220px; }
    .permit-bullets { grid-template-columns: 1fr; }
    .curator { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
    .permit { grid-template-columns: 1fr; }
    .permit-stub { border-right: 0; border-bottom: 2px dashed var(--line); min-height: auto; }
    .permit-body { border-right: 0; }
    .permit-action {
        flex-direction: column;
        align-items: stretch;
    }
    .permit-perf { display: none; }
}

/* ---------- reveal util ---------- */

.reveal {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 500ms ease, transform 500ms ease;
}
.reveal.on {
    opacity: 1;
    transform: none;
}

.stagger > * {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 500ms ease, transform 500ms ease;
}
.stagger.on > * {
    opacity: 1;
    transform: none;
}
.stagger.on > *:nth-child(1) { transition-delay: 40ms; }
.stagger.on > *:nth-child(2) { transition-delay: 90ms; }
.stagger.on > *:nth-child(3) { transition-delay: 140ms; }
.stagger.on > *:nth-child(4) { transition-delay: 190ms; }
.stagger.on > *:nth-child(5) { transition-delay: 240ms; }
.stagger.on > *:nth-child(6) { transition-delay: 290ms; }
.stagger.on > *:nth-child(7) { transition-delay: 340ms; }
.stagger.on > *:nth-child(8) { transition-delay: 390ms; }

/* ---------- responsive ---------- */

@media (max-width: 1040px) {
    .mast-lede { grid-template-columns: 1fr; gap: 18px; }
    .mast-lede .lede-meta { text-align: left; }
    .schema-panel { grid-template-columns: 1fr; }
    .schema-notes { border-left: 0; border-top: 1px dashed var(--line); padding: 18px 0 0; }
    .envelope-wrap { grid-template-columns: 1fr; }
    .contact-grid { grid-template-columns: 1fr; gap: 36px; }
    .colophon-grid { grid-template-columns: 1fr 1fr; }
    .card-meta { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 680px) {
    .grid-vault { grid-template-columns: 1fr; gap: 20px; }
    .card { min-height: 220px; padding: 22px 22px 20px; }
    .section-lead { grid-template-columns: 1fr; gap: 8px; }

    /* Mobile ledger: kill the vertical line, the bone circle masks and the
       icons themselves. Keep just the numbered rows as a tight stack. */
    .ledger { padding-block: clamp(40px, 6vw, 60px); }
    .ledger-rows { margin-top: 24px; }
    .ledger-line { display: none !important; }
    .ledger-stamp { display: none !important; }
    .ledger-row {
        grid-template-columns: 1fr;
        gap: 4px;
        margin-block: 22px;
        opacity: 1; transform: none;
    }
    .ledger-row .ledger-card.left,
    .ledger-row .ledger-card.right { grid-column: 1; }
    .ledger-row:nth-child(even) .ledger-card { text-align: left; }
    .ledger-row:nth-child(even) .ledger-step-body { margin-left: 0; }
    .ledger-step-num { font-size: 10px; }
    .ledger-step-title { font-size: clamp(22px, 6vw, 28px); }
    .ledger-step-body { font-size: 15px; }

    .top-inner { flex-wrap: wrap; gap: 14px; }
    .nav { gap: 16px; }
    .colophon-grid { grid-template-columns: 1fr; }
    .schema-row { grid-template-columns: 1fr; gap: 4px; }
    .form { padding: 24px 20px; }
    .form .row { grid-template-columns: 1fr; }
    .purchase { padding: 28px 22px; }
    .vault-pager { flex-wrap: wrap; gap: 10px; }
    .pg-dots { order: 3; flex-basis: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
    .card, .card:hover,
    .card-foot-arrow, .card:hover .card-foot-arrow,
    .redaction, .ledger-line, .ledger-row, .ruler .tick,
    .mast-underline::before, .envelope .seal,
    .permit, .permit:hover, .pg-arrow, .pg-dot {
        transition: none !important;
        animation: none !important;
        transform: none !important;
    }
    .reveal, .stagger > * { opacity: 1 !important; transform: none !important; }
}

/* ---------- error pages (401 / 404) — editorial v2 ---------- */

.err2-sec {
    position: relative;
    padding-block: clamp(60px, 10vw, 160px);
    max-width: 900px;
    margin: 0 auto;
}
.err2-kicker-row {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 32px;
    flex-wrap: wrap;
}
.err2-kicker {
    display: inline-block;
    padding: 7px 14px;
    font-family: var(--f-mono);
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--rust);
    border: 1px solid var(--rust);
    background: rgba(244, 239, 230, 0.6);
}
.err2-kicker-warn { color: var(--ember); border-color: var(--ember); background: rgba(255,106,31,0.06); }
.err2-status {
    font-family: var(--f-mono);
    font-size: 11px;
    letter-spacing: 0.2em;
    color: var(--ink);
    opacity: 0.65;
    text-transform: uppercase;
}

.err2-title {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: baseline;
    gap: clamp(16px, 3vw, 48px);
    margin: 0 0 28px;
}
.err2-num {
    font-family: var(--f-block);
    font-size: clamp(120px, 20vw, 260px);
    line-height: 0.82;
    letter-spacing: -0.04em;
    color: var(--graphite);
    position: relative;
}
.err2-num::after {
    content: '';
    position: absolute;
    left: 6%;
    right: 6%;
    bottom: 18%;
    height: clamp(6px, 1vw, 12px);
    background: var(--ember);
    transform-origin: left center;
    animation: err2Line 900ms cubic-bezier(0.2, 0.8, 0.2, 1) 120ms both;
}
@keyframes err2Line {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}
.err2-word {
    font-family: var(--f-display);
    font-weight: 400;
    font-size: clamp(38px, 6vw, 82px);
    line-height: 0.95;
    letter-spacing: -0.005em;
    color: var(--rust);
    align-self: end;
    padding-bottom: clamp(16px, 3vw, 34px);
}

.err2-body {
    font-family: var(--f-small);
    font-size: clamp(17px, 1.25vw, 20px);
    line-height: 1.55;
    color: var(--ink);
    max-width: 60ch;
    margin: 0 0 34px;
}

.err2-redirect {
    max-width: 520px;
    margin: 0 0 30px;
    padding: 14px 16px 12px;
    border: 1px dashed var(--line);
    background: var(--bone-soft);
}
.err2-redirect-track {
    position: relative;
    height: 6px;
    background: rgba(18, 16, 14, 0.06);
    overflow: hidden;
    margin-bottom: 10px;
}
.err2-redirect-fill {
    height: 100%;
    width: 0;
    background: var(--ember);
    animation: err2Fill var(--ttl, 5s) linear forwards;
}
@keyframes err2Fill { to { width: 100%; } }
.err2-redirect-label {
    margin: 0;
    font-family: var(--f-mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink);
    opacity: 0.75;
}
.err2-redirect-label [data-err-seconds] {
    color: var(--rust);
    font-weight: 700;
    font-family: var(--f-block);
    font-size: 14px;
    padding: 0 4px;
    letter-spacing: 0;
}

.err2-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 34px;
}
.err2-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    border: 1px solid var(--line);
    background: var(--bone);
    color: var(--graphite);
    font-family: var(--f-mono);
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    transition: background 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease, gap 260ms ease;
}
.err2-btn:hover {
    border-color: var(--graphite);
    background: var(--graphite);
    color: var(--bone);
    transform: translateY(-1px);
    gap: 18px;
}
.err2-btn-primary {
    background: var(--graphite);
    color: var(--bone);
    border-color: var(--graphite);
}
.err2-btn-primary:hover {
    background: var(--ember);
    border-color: var(--ember);
    color: var(--graphite);
}
.err2-btn-ghost {
    background: transparent;
    border-style: dashed;
    opacity: 0.75;
}

.err2-margin {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 10px;
    padding-top: 18px;
    border-top: 1px solid var(--line);
    font-family: var(--f-mono);
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink);
    opacity: 0.55;
}
.err2-margin-stamp {
    color: var(--rust);
    opacity: 0.85;
    border: 1px solid var(--rust);
    padding: 4px 10px;
}
.err2-margin-stamp-warn { color: var(--ember); border-color: var(--ember); }

@media (max-width: 680px) {
    .err2-title { grid-template-columns: 1fr; }
    .err2-word { padding-bottom: 0; align-self: start; }
}
@media (prefers-reduced-motion: reduce) {
    .err2-num::after, .err2-redirect-fill { animation: none; }
    .err2-num::after { transform: scaleX(1); }
    .err2-redirect-fill { width: 100%; }
}

/* ---------- auth (login) ---------- */

.auth-shell {
    max-width: 900px;
    margin: 0 auto;
}
.auth-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
    gap: 24px;
    align-items: stretch;
}
.auth-form {
    min-width: 0;
}
.auth-form .alert-danger {
    margin: 8px 0 4px;
    padding: 10px 12px;
    border: 1px solid var(--rust);
    background: rgba(179, 58, 16, 0.08);
    color: var(--rust);
    font-family: var(--f-mono);
    font-size: 12px;
    letter-spacing: 0.04em;
}

.auth-side {
    background: var(--graphite);
    color: var(--bone);
    padding: 28px 26px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 24px;
    border: 1px solid var(--graphite);
    min-height: 100%;
    position: relative;
    overflow: hidden;
    order: -1;
}
.auth-side::before {
    content: '';
    position: absolute;
    inset: 10px;
    border: 1px dashed rgba(244, 239, 230, 0.22);
    pointer-events: none;
}
.auth-side-stamp {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
}
.auth-side-kicker {
    font-family: var(--f-mono);
    font-size: 10px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--ember);
}
.auth-side-mark {
    font-family: var(--f-display);
    font-size: clamp(72px, 8vw, 108px);
    line-height: 0.9;
    letter-spacing: -0.02em;
    color: var(--bone);
    border-bottom: 2px solid var(--ember);
    padding-bottom: 6px;
}
.auth-side-note {
    font-family: var(--f-mono);
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--bone);
    opacity: 0.65;
}
.auth-side-rules {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 14px;
    border-top: 1px dashed rgba(244, 239, 230, 0.18);
}
.auth-rule {
    display: flex;
    gap: 12px;
    font-family: var(--f-mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    color: var(--bone);
    opacity: 0.85;
    line-height: 1.4;
}
.auth-rule span {
    flex: 0 0 auto;
    color: var(--ember);
    font-weight: 700;
}

@media (max-width: 780px) {
    .auth-grid { grid-template-columns: 1fr; }
    .auth-side { min-height: auto; padding: 22px 20px; order: 1; }
}

/* ========================================================================
   ADMIN PANEL
   Neutral, dense, fast to scan. Shares tokens with the public site.
   ======================================================================== */

body.admin {
    background: var(--bone);
    color: var(--graphite);
}
body.admin::before { display: none; }

.admin-top {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--graphite);
    color: var(--bone);
    border-bottom: 2px solid var(--ember);
}
.admin-top .brand,
.admin-top .brand * { color: var(--bone); }
.admin-top .brand-mark {
    background: var(--ember);
    color: var(--graphite);
}
.admin-top .brand-meta {
    color: var(--ember);
    opacity: 1;
}
.admin-top-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-block: 12px;
    gap: 16px;
    flex-wrap: wrap;
}
.admin-nav {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
}
.admin-nav a {
    font-family: var(--f-mono);
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--bone);
    padding-bottom: 2px;
    border-bottom: 1px solid transparent;
    transition: border-color 140ms ease, color 140ms ease;
}
.admin-nav a:hover { border-bottom-color: var(--ember); }
.admin-nav a.is-active { color: var(--ember); border-bottom-color: var(--ember); }
.admin-nav a.muted { opacity: 0.55; }
.admin-nav a.muted:hover { opacity: 1; }

.admin-wrap { padding-block: 32px 60px; }

.admin-block {
    background: var(--bone-soft);
    border: 1px solid var(--line);
    padding: 22px 22px 24px;
    margin-bottom: 22px;
}
.admin-block-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--line-soft);
}
.admin-block-head h2 {
    font-family: var(--f-display);
    font-weight: 400;
    font-size: clamp(22px, 2vw, 30px);
    margin: 0;
    line-height: 1;
}
.admin-block-head h3 {
    font-family: var(--f-mono);
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--rust);
    margin: 18px 0 8px;
}
.admin-block h3 {
    font-family: var(--f-mono);
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--rust);
    margin: 0 0 8px;
}

.admin-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 22px;
}
.stat-box {
    padding: 18px 20px;
    background: var(--bone);
    border: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.stat-box .stat-k {
    font-family: var(--f-mono);
    font-size: 10px;
    letter-spacing: 0.22em;
    color: var(--ink);
    opacity: 0.6;
    text-transform: uppercase;
}
.stat-box .stat-v {
    font-family: var(--f-block);
    font-size: clamp(28px, 3vw, 42px);
    line-height: 1;
    color: var(--graphite);
}
.stat-box .stat-v-hot { color: var(--rust); }
@media (max-width: 780px) {
    .admin-stats { grid-template-columns: repeat(2, 1fr); }
}

/* tables */
.admin-table-wrap { overflow-x: auto; }
.admin-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--f-mono);
    font-size: 12px;
}
.admin-table th, .admin-table td {
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid var(--line-soft);
    vertical-align: middle;
}
.admin-table th {
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink);
    opacity: 0.7;
    font-weight: 700;
    border-bottom: 1px solid var(--line);
    background: rgba(18, 16, 14, 0.03);
}
.admin-table td.mono, .admin-table th.mono { font-family: var(--f-mono); }
.admin-table td.right, .admin-table th.right { text-align: right; }
.admin-table tr.is-current td { background: rgba(255, 106, 31, 0.06); }
.admin-table tbody tr:hover { background: rgba(18, 16, 14, 0.04); }
.admin-table td.actions { white-space: nowrap; }

/* pills */
.pill {
    display: inline-block;
    padding: 2px 8px;
    font-family: var(--f-mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    border: 1px solid var(--graphite);
    color: var(--graphite);
    background: transparent;
    font-weight: 700;
}
.pill-pending_review { color: var(--rust); border-color: var(--rust); }
.pill-delivered      { color: #1E6F3C; border-color: #1E6F3C; }
.pill-flagged        { color: var(--ember); border-color: var(--ember); background: rgba(255, 106, 31, 0.1); }
.pill-refunded, .pill-cancelled, .pill-st-refunded, .pill-st-cancelled {
    color: var(--ink); border-color: var(--ink); opacity: 0.7;
}
.pill-st-pending_review { color: var(--rust); border-color: var(--rust); }
.pill-st-delivered      { color: #1E6F3C; border-color: #1E6F3C; }
.pill-st-flagged        { color: var(--ember); border-color: var(--ember); }
.pill-ember { background: var(--ember); color: var(--graphite); border-color: var(--ember); }

/* filter tabs */
.filter-tabs {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}
.filter-tab {
    font-family: var(--f-mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 6px 12px;
    border: 1px solid var(--line);
    color: var(--graphite);
    transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}
.filter-tab:hover { border-color: var(--graphite); background: rgba(18, 16, 14, 0.04); }

/* buttons */
.btn-small, .btn-primary, .btn-warn, .btn-danger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    font-family: var(--f-mono);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    border: 1px solid var(--graphite);
    background: var(--bone);
    color: var(--graphite);
    cursor: pointer;
    transition: background 140ms ease, color 140ms ease, transform 140ms ease;
}
.btn-small:hover { background: var(--graphite); color: var(--bone); }
.btn-primary {
    background: var(--graphite);
    color: var(--bone);
    padding: 11px 22px;
    font-size: 12px;
}
.btn-primary:hover { background: var(--ember); color: var(--graphite); border-color: var(--ember); transform: translateY(-1px); }
.btn-warn { border-color: var(--ember); color: var(--ember); }
.btn-warn:hover { background: var(--ember); color: var(--graphite); }
.btn-danger { border-color: #9A1A1A; color: #9A1A1A; }
.btn-danger:hover { background: #9A1A1A; color: var(--bone); }
.inline { display: inline-block; margin: 0; }

/* detail view */
.admin-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
}
@media (max-width: 780px) { .admin-grid-2 { grid-template-columns: 1fr; } }

.admin-dl {
    margin: 0;
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: 6px 12px;
}
.admin-dl dt {
    font-family: var(--f-mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink);
    opacity: 0.55;
    padding-top: 2px;
}
.admin-dl dd {
    margin: 0;
    font-family: var(--f-small);
    font-size: 14px;
    color: var(--graphite);
    word-break: break-word;
}
.admin-dl dd.mono { font-family: var(--f-mono); }

.kv {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 4px;
    font-family: var(--f-mono);
    font-size: 12px;
}
.kv li { display: flex; gap: 10px; }
.kv .k { opacity: 0.6; min-width: 140px; }
.kv .v { color: var(--graphite); word-break: break-word; }

.artifact-block {
    padding: 12px 14px;
    background: var(--bone);
    border: 1px solid var(--line);
    display: inline-block;
}
.artifact-block .small { font-size: 11px; opacity: 0.7; letter-spacing: 0.1em; }
.warn {
    padding: 12px 14px;
    border: 1px dashed var(--rust);
    color: var(--rust);
    font-family: var(--f-mono);
    font-size: 12px;
    background: rgba(179, 58, 16, 0.06);
}

.admin-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* upload */
.admin-upload {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.admin-upload-row {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 14px;
}
@media (max-width: 780px) { .admin-upload-row { grid-template-columns: 1fr; } }
.admin-upload label {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.admin-upload input[type="file"],
.admin-upload input[type="text"],
.admin-upload select {
    font-family: var(--f-mono);
    font-size: 13px;
    padding: 8px 10px;
    border: 1px solid var(--line);
    background: var(--bone);
    color: var(--graphite);
}
.admin-upload .checkbox {
    flex-direction: row;
    align-items: center;
    gap: 8px;
    font-family: var(--f-mono);
    font-size: 12px;
    color: var(--ink);
}

/* license tier edit forms */
.lic-forms {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 16px;
}
.lic-form {
    background: var(--bone);
    border: 1px solid var(--line);
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.lic-form label {
    font-family: var(--f-mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink);
    opacity: 0.7;
}
.lic-form input, .lic-form textarea {
    width: 100%;
    font-family: var(--f-mono);
    font-size: 13px;
    padding: 7px 10px;
    border: 1px solid var(--line);
    background: var(--bone-soft);
    color: var(--graphite);
}
.lic-form textarea { resize: vertical; }
.lic-form-head {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: space-between;
}
.lic-form-head input { flex: 1; }
.lic-form-row {
    display: grid;
    grid-template-columns: auto 1fr auto 80px;
    gap: 8px;
    align-items: center;
}

/* general admin textarea */
.admin-block textarea {
    width: 100%;
    font-family: var(--f-mono);
    font-size: 13px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    background: var(--bone);
    color: var(--graphite);
    resize: vertical;
}

.admin-footer {
    display: flex;
    justify-content: space-between;
    font-family: var(--f-mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink);
    opacity: 0.55;
    padding-block: 18px 30px;
    border-top: 1px solid var(--line-soft);
}

.small { font-size: 11px; }
.muted { color: var(--ink); opacity: 0.6; }
.mono { font-family: var(--f-mono); }

/* ---------- license templates page ---------- */
.lic-tpl-form {
    background: var(--bone);
    border: 1px solid var(--line);
    padding: 18px 20px;
    margin-bottom: 18px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.lic-tpl-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}
.lic-tpl-form label {
    font-family: var(--f-mono);
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ink);
    opacity: 0.65;
    margin-top: 6px;
}
.lic-tpl-form input[type="text"],
.lic-tpl-form textarea {
    width: 100%;
    font-family: var(--f-mono);
    font-size: 13px;
    padding: 8px 10px;
    border: 1px solid var(--line);
    background: var(--bone-soft);
    color: var(--graphite);
}
.lic-tpl-form textarea {
    resize: vertical;
    line-height: 1.55;
}

.tokens-wrap {
    max-width: 900px;
}
.tokens-dl {
    margin: 0;
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 6px 18px;
}
.tokens-dl dt {
    font-family: var(--f-mono);
    font-size: 11px;
    color: var(--rust);
    white-space: nowrap;
}
.tokens-dl dd {
    margin: 0;
    font-family: var(--f-small);
    font-size: 14px;
    color: var(--ink);
}