/* ============================================================
   ZQ WORK (v4 "the file, opened") - shared case-page stylesheet.
   Loads AFTER assets/css/zq-home.css and leans on it hard:
   tokens, @font-face, .top nav + hamburger overlay, .socials,
   .skip, .btn, .act-paper token re-resolution, .grain, .cf-tab
   folder grammar, .cf-rail/.cf-st station grammar, .cf-stamp /
   .stamp-inner thunk grammar (incl. the .sz zone pre-states and
   the cf-stamp/cf-ring keyframes), .tick, .w-all, .cf-open,
   footer. This file only adds what a case page needs on top:
   the dark cover band, the paper document body, the file nav
   tabs, the dark close, the archive dossier list, and their
   single-fire beats. No scrub, no rail, no sticky theater here.

   Page anatomy ("the file, opened"):
     .wk-cover   compact dark band: file tab + h1 + summary + facts
     .wk-doc     paper document body (.act-paper), ruled .wk-sec
     .wk-filenav paper prev/next case tabs + Works link
     .wk-close   compact dark CTA close
   Archive anatomy (work/index.html):
     .wk-cover.arc-cover  dark band, "The archive" tab
     .arc        paper act, 8 .arc-entry dossiers in three
                 alternating structures (arc-a / arc-b / arc-c)
     .wk-close   same dark close
   Every motion pre-state is scoped under html.zq-scrub, so PRM
   (zq-static) and no-JS render the settled dossier.
   ============================================================ */

/* ---------- cover band (dark) ---------- */

.wk-cover {
    position: relative;
    background:
        radial-gradient(96% 130% at 50% -12%, var(--bg2), var(--bg1) 55%, var(--bg0) 100%);
    padding: clamp(104px, 15vh, 148px) clamp(18px, 4vw, 44px) clamp(44px, 6vh, 64px);
    overflow: hidden;
}
.wk-cover-inner { position: relative; z-index: 1; max-width: 840px; margin: 0 auto; }
.arc-cover .wk-cover-inner { max-width: 1020px; }

/* the paper file tab reads as real paper on the dark stage: its ink
   must stay paper-ink, not the dark-theater fg tokens */
.wk-cover .cf-tab { border-bottom-color: oklch(0.38 0.012 80 / 0.4); }
.wk-cover .cf-tab .no { color: oklch(0.42 0.014 78); }

.wk-cover h1 {
    font-size: clamp(2.05rem, 5.2vw, 3.4rem);
    line-height: 1.05;
    letter-spacing: -0.025em;
    margin-top: 26px;
    max-width: 24ch;
    text-wrap: balance;
    text-align: left;
}
.wk-sum {
    color: var(--fg-dim);
    font-weight: 400;
    font-size: clamp(0.98rem, 2.2vw, 1.08rem);
    margin-top: 16px;
    max-width: 62ch;
}
.wk-note {
    color: var(--fg-faint);
    font-size: 0.95rem;
    margin-top: 12px;
    max-width: 62ch;
}
.wk-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 28px;
    margin-top: 26px;
    font-family: var(--font-m);
    font-size: 11px;
    letter-spacing: 0.03em;
}
.wk-facts div { display: flex; gap: 8px; }
.wk-facts dt { color: var(--fg-faint); }
.wk-facts dd { color: var(--fg-dim); }

/* ---------- document body (paper) ---------- */

.wk-doc {
    position: relative;
    background:
        radial-gradient(58% 22% at 50% 0%, oklch(0.99 0.007 90 / 0.85), transparent 74%),
        var(--paper);
    padding: clamp(44px, 6vw, 72px) clamp(18px, 4vw, 44px) clamp(56px, 7vw, 88px);
    overflow: hidden;
}
.wk-doc-inner { position: relative; z-index: 1; max-width: 840px; margin: 0 auto; }

/* ruled sections: the rule is a ::before so it can draw in on beat */
.wk-sec { position: relative; padding: clamp(30px, 4.5vw, 46px) 0; }
.wk-sec::before {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 1px;
    background: var(--line-soft);
    transform-origin: left center;
}
.wk-doc-inner > .wk-sec:first-child { padding-top: 0; }
.wk-doc-inner > .wk-sec:first-child::before { content: none; }
.wk-doc-inner > .wk-sec:last-child { padding-bottom: 0; }

.wk-doc h2 {
    font-weight: 700;
    font-size: clamp(1.35rem, 3.2vw, 1.8rem);
    line-height: 1.12;
    letter-spacing: -0.02em;
}
.wk-mess {
    color: var(--fg);
    font-weight: 400;
    font-size: 1.02rem;
    margin-top: 16px;
    max-width: 60ch;
}
.wk-out-copy { color: var(--fg-dim); margin-top: 14px; max-width: 62ch; }

/* station rail: home's .cf-rail/.cf-st grammar, document-face notes
   (the mono note face is for short fragments, not full sentences) */
.wk-rail { margin-top: 26px; }
.wk-rail .cf-st-note {
    font-family: var(--font-d);
    font-size: 0.93rem;
    color: var(--fg-dim);
    line-height: 1.55;
    max-width: 58ch;
    margin-top: 2px;
}
.wk-rail .cf-st:nth-child(5) { --d: 540ms; }

/* ruled list: no cards, no icons, one point per rule */
.wk-ticks { list-style: none; margin-top: 14px; }
.wk-ticks li { padding: 12px 0; color: var(--fg-dim); max-width: 62ch; }
.wk-ticks li + li { border-top: 1px solid var(--line-soft); }

/* outcome stamps: the .sz zone carries the thunk (zq-home.css).
   Three per page maximum; delays stagger the row left to right. */
.wk-stamps {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 30px 38px;
    margin-top: 34px;
    padding: 6px 4px;
}
.wk-stamp-1 { --rot: -2.2deg; }
.wk-stamp-2 { --rot: 1.8deg; }
.wk-stamp-3 { --rot: -1.4deg; }
.zq-scrub .sz.is-in .wk-stamps .cf-stamp:nth-child(2) .stamp-inner { animation-delay: 520ms; }
.zq-scrub .sz.is-in .wk-stamps .cf-stamp:nth-child(2) .stamp-inner::after { animation-delay: 820ms; }
.zq-scrub .sz.is-in .wk-stamps .cf-stamp:nth-child(3) .stamp-inner { animation-delay: 840ms; }
.zq-scrub .sz.is-in .wk-stamps .cf-stamp:nth-child(3) .stamp-inner::after { animation-delay: 1140ms; }
@media (max-width: 479px) {
    .wk-stamps { gap: 26px 30px; }
    .wk-stamps .stamp-pre,
    .wk-stamps .stamp-small { white-space: normal; max-width: 230px; text-align: center; }
}

/* stack chips: earned mono, code-chip grammar */
.wk-stack { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.wk-stack li {
    font-family: var(--font-m);
    font-size: 11px;
    letter-spacing: 0.02em;
    color: var(--fg-dim);
    border: 1px solid var(--line-soft);
    border-radius: 999px;
    padding: 7px 13px;
}

/* pull-quote on paper (for case pages that carry a client quote):
   inline, ruled left, never a card grid */
.wk-quote {
    margin: 22px 0 0;
    padding: 4px 0 4px 22px;
    border-left: 2px solid var(--ink);
    max-width: 54ch;
}
.wk-quote p { color: var(--fg); font-weight: 400; font-size: 1.05rem; line-height: 1.5; }
.wk-quote footer {
    /* not the page footer: reset the zq-home.css footer rules */
    border-top: 0;
    padding: 0;
    display: block;
    margin-top: 10px;
    font-family: var(--font-m);
    font-size: 11px;
    color: var(--fg-faint);
}

/* ---------- file nav: prev / next case tabs, seated in the paper ---------- */

.wk-filenav {
    position: relative;
    background: var(--paper);
    border-top: 1px solid var(--line-soft);
    padding: clamp(34px, 5vw, 52px) clamp(18px, 4vw, 44px) clamp(48px, 7vh, 72px);
    overflow: hidden;
}
.wk-fn-inner {
    position: relative;
    z-index: 1;
    max-width: 840px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 26px 30px;
}
.arc .wk-fn-inner { max-width: 1020px; }
.wk-filenav .w-all { margin-bottom: 22px; }
.wk-fn-tabs { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.wk-fn-tab {
    display: grid;
    gap: 5px;
    justify-items: start;
    text-decoration: none;
    background: oklch(0.955 0.012 85);
    border: 1px solid var(--line-soft);
    border-radius: 9px;
    padding: 14px 18px 16px;
    min-height: 44px;
    max-width: 330px;
    transition: background 160ms ease, transform 140ms ease;
}
.wk-fn-tab:hover { background: oklch(0.97 0.009 87); }
.wk-fn-tab:active { transform: translateY(1px); }
.wk-fn-tab .k {
    font-family: var(--font-m);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--fg-faint);
}
.wk-fn-tab strong {
    font-weight: 600;
    font-size: 13.5px;
    letter-spacing: -0.01em;
    line-height: 1.3;
    color: var(--fg);
}
@media (max-width: 639px) {
    .wk-fn-tabs { width: 100%; }
    .wk-fn-tab { flex: 1 1 auto; max-width: none; }
}

/* ---------- dark close ---------- */

.wk-close {
    position: relative;
    background:
        radial-gradient(72% 66% at 50% 38%, oklch(0.262 0.014 79 / 0.6), transparent 78%),
        var(--bg0);
    padding: clamp(64px, 9vw, 108px) clamp(18px, 4vw, 44px) clamp(72px, 9vw, 116px);
    text-align: center;
    overflow: hidden;
}
.wk-close-inner { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; }
.wk-close h2 {
    font-weight: 700;
    font-size: clamp(1.75rem, 4.8vw, 2.7rem);
    line-height: 1.06;
    letter-spacing: -0.027em;
    text-wrap: balance;
}
.wk-close p {
    color: var(--fg-dim);
    font-weight: 400;
    max-width: 52ch;
    margin: 16px auto 28px;
    text-wrap: balance;
}

/* ============================================================
   ARCHIVE: eight dossier entries, one grammar, three structures.
   arc-a: tab left, dossier left / outcome right (7:5)
   arc-b: tab mirrored right, outcome left / dossier right (5:7)
   arc-c: full-width sheet, outcome inline
   ============================================================ */

.arc {
    position: relative;
    background:
        radial-gradient(58% 20% at 50% 0%, oklch(0.99 0.007 90 / 0.85), transparent 74%),
        var(--paper);
    padding: clamp(44px, 6vw, 72px) clamp(18px, 4vw, 44px) clamp(64px, 8vw, 100px);
    overflow: hidden;
}
.arc-inner { position: relative; z-index: 1; max-width: 1020px; margin: 0 auto; }
.arc-list { list-style: none; }
.arc-entry { position: relative; margin-top: clamp(52px, 7vw, 84px); }
.arc-list > .arc-entry:first-child { margin-top: 0; }

/* window-light pools, hand-placed per structure */
.arc-entry::before { content: ""; position: absolute; z-index: 0; inset: -16% -18%; pointer-events: none; }
.arc-a::before { background: radial-gradient(56% 64% at 24% 38%, oklch(0.995 0.01 94 / 0.8), transparent 72%); }
.arc-b::before { background: radial-gradient(56% 64% at 76% 38%, oklch(0.995 0.01 94 / 0.8), transparent 72%); }
.arc-c::before { background: radial-gradient(64% 58% at 55% 42%, oklch(0.995 0.01 94 / 0.7), transparent 74%); }
.arc-entry > * { position: relative; z-index: 1; }

.arc-entry h2 {
    font-weight: 600;
    font-size: clamp(1.3rem, 3vw, 1.75rem);
    line-height: 1.14;
    letter-spacing: -0.02em;
    margin-top: 18px;
    max-width: 26ch;
    text-wrap: balance;
}
.arc-entry h2 a { text-decoration: none; }
.arc-entry h2 a:hover {
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 5px;
    text-decoration-color: var(--fg-faint);
}
.arc-desc { color: var(--fg-dim); margin-top: 12px; max-width: 52ch; }

.arc-k {
    font-family: var(--font-m);
    font-size: 11px;
    letter-spacing: 0.06em;
    color: var(--fg-faint);
}
.arc-out { display: flex; align-items: flex-start; gap: 12px; margin-top: 10px; }
.arc-out span:last-child {
    font-weight: 400;
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--fg);
    max-width: 42ch;
}
.arc-side .cf-open { margin-top: 22px; }

.arc-body { display: grid; gap: 26px; margin-top: 4px; }
@media (min-width: 880px) {
    .arc-a .arc-body,
    .arc-b .arc-body {
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
        column-gap: clamp(44px, 6vw, 84px);
        align-items: start;
    }
    .arc-a .arc-side, .arc-b .arc-side { padding-top: 26px; }
    .arc-b .arc-body { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
    .arc-b .arc-main { grid-column: 2; grid-row: 1; }
    .arc-b .arc-side { grid-column: 1; grid-row: 1; }
    /* arc-c: full sheet width like a/b; its flavor is the inline outcome row */
    .arc-c .arc-side {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 14px 32px;
    }
    .arc-c .arc-side .arc-out { flex: 1 1 340px; margin-top: 0; }
    .arc-c .arc-side .arc-k { flex: 0 0 100%; }
    .arc-c .arc-side .cf-open { margin-top: 0; }
}
/* mirrored folder tab on the b structure (>=640px keeps the folder
   trick; below that the tab is a stacked grid, order stays natural) */
@media (min-width: 640px) {
    .arc-b .cf-tab .no { order: 3; margin-left: auto; }
    .arc-b .cf-tab .who { margin-left: 0; width: auto; }
}

/* ============================================================
   BEATS (single-fire, scrub mode only). Base = settled dossier.
   ============================================================ */

/* cover */
.zq-scrub .wk-cover-inner .cf-tab { transition: opacity 460ms ease; }
.zq-scrub .wk-cover-inner:not(.is-in) .cf-tab { opacity: 0; }
.zq-scrub .wk-cover-inner h1 { transition: opacity 560ms ease 90ms, transform 560ms cubic-bezier(0.22, 1, 0.36, 1) 90ms; }
.zq-scrub .wk-cover-inner:not(.is-in) h1 { opacity: 0; transform: translateY(18px); }
.zq-scrub .wk-cover-inner .wk-sum,
.zq-scrub .wk-cover-inner .wk-note { transition: opacity 560ms ease 200ms, transform 560ms cubic-bezier(0.22, 1, 0.36, 1) 200ms; }
.zq-scrub .wk-cover-inner:not(.is-in) .wk-sum,
.zq-scrub .wk-cover-inner:not(.is-in) .wk-note { opacity: 0; transform: translateY(14px); }
.zq-scrub .wk-cover-inner .wk-facts { transition: opacity 520ms ease 320ms; }
.zq-scrub .wk-cover-inner:not(.is-in) .wk-facts { opacity: 0; }

/* document sections: rule draws, block settles */
.zq-scrub .wk-sec { transition: opacity 560ms ease, transform 560ms cubic-bezier(0.22, 1, 0.36, 1); }
.zq-scrub .wk-sec:not(.is-in) { opacity: 0; transform: translateY(16px); }
.zq-scrub .wk-sec::before { transition: transform 600ms cubic-bezier(0.23, 1, 0.32, 1) 120ms; }
.zq-scrub .wk-sec:not(.is-in)::before { transform: scaleX(0); }
/* stations populate after the rail line draws (rail draw transition
   is global in zq-home.css; the pre-state below scopes it here) */
.zq-scrub .wk-sec:not(.is-in) .cf-rail::before { transform: scaleY(0); }
.zq-scrub .wk-sec .cf-st { transition: opacity 460ms ease var(--d, 0ms), transform 460ms cubic-bezier(0.22, 1, 0.36, 1) var(--d, 0ms); }
.zq-scrub .wk-sec:not(.is-in) .cf-st { opacity: 0; transform: translateY(10px); }

/* file nav + close */
.zq-scrub .wk-fn-inner,
.zq-scrub .wk-close-inner { transition: opacity 560ms ease, transform 560ms cubic-bezier(0.22, 1, 0.36, 1); }
.zq-scrub .wk-fn-inner:not(.is-in),
.zq-scrub .wk-close-inner:not(.is-in) { opacity: 0; transform: translateY(14px); }

/* archive entries */
.zq-scrub .arc-entry .cf-tab { transition: opacity 460ms ease; }
.zq-scrub .arc-entry:not(.is-in) .cf-tab { opacity: 0; }
.zq-scrub .arc-entry .arc-main { transition: opacity 520ms ease 90ms, transform 520ms cubic-bezier(0.22, 1, 0.36, 1) 90ms; }
.zq-scrub .arc-entry .arc-side { transition: opacity 520ms ease 230ms, transform 520ms cubic-bezier(0.22, 1, 0.36, 1) 230ms; }
.zq-scrub .arc-entry:not(.is-in) .arc-main,
.zq-scrub .arc-entry:not(.is-in) .arc-side { opacity: 0; transform: translateY(12px); }