:root {
    --ink: #e6e2d6;
    --muted: #77786f;
    --line: #292b26;
    --paper: #181a17;
    --acid: #b8ef4a;
    --bg: #090a08;
    --rust: #a44c32;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: "DM Mono",monospace;
    font-size: 12px;
    overflow-x: hidden;
}

.grain {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 99;
    opacity: .12;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.3'/%3E%3C/svg%3E");
}

.shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 150px minmax(440px,1.18fr) minmax(420px,1fr);
    max-width: 1800px;
    margin: auto;
    border-inline: 1px solid var(--line);
}

.rail {
    border-right: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    position: sticky;
    top: 0;
}

.brand {
    height: 125px;
    padding: 26px 23px;
    border-bottom: 1px solid var(--line);
    color: var(--muted);
    text-decoration: none;
    letter-spacing: .14em;
    line-height: 1.5;
}

.brand-mark {
    display: block;
    color: var(--ink);
    font-size: 23px;
    letter-spacing: .22em;
    margin-bottom: 8px;
}

.rail-note {
    padding: 28px 23px;
    color: var(--muted);
    line-height: 1.7;
}

.rail-nav {
    margin-top: 25px;
    border-top: 1px solid var(--line);
}

.rail-nav a {
    height: 54px;
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0 24px;
    color: var(--muted);
    text-decoration: none;
    text-transform: uppercase;
    font-size: 12px;
}

.rail-nav i {
    width: 9px;
    height: 9px;
    border: 1px solid #45483f;
    border-radius: 50%;
}

.rail-nav a.active {
    color: var(--ink);
    background: #10110e;
}

.rail-nav a.active i {
    background: var(--acid);
    border: none;
    box-shadow: 0 0 12px var(--acid);
}

.rail-glyphs {
    color: #65665f;
    font-size: 20px;
    line-height: 1.65;
    margin: 52px auto;
}

.signal {
    margin-top: auto;
    padding: 27px 20px;
    border-top: 1px solid var(--line);
    text-transform: uppercase;
    letter-spacing: .08em;
}

.signal>span,
.archive-head h2 i,
.archive-footer strong i {
    display: inline-block;
    width: 7px;
    height: 7px;
    background: var(--acid);
    border-radius: 50%;
    box-shadow: 0 0 10px var(--acid);
    margin-right: 8px;
}

.signal small {
    display: block;
    color: var(--muted);
    line-height: 1.7;
    margin: 15px 0 0 16px;
}

.signal b {
    font-weight: 400;
    color: #9d9f92;
}

.workspace {
    border-right: 1px solid var(--line);
    min-width: 0;
}

.topbar {
    height: 54px;
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 22px;
    color: var(--muted);
    text-transform: uppercase;
    font-size: 10px;
}

.topbar b {
    color: #b0b0a5;
    font-weight: 400;
}

.topbar nav {
    display: flex;
    gap: 30px;
}

.topbar a {
    color: var(--muted);
    text-decoration: none;
}

.grid-button {
    background: transparent;
    border: 1px solid var(--line);
    color: var(--ink);
    width: 30px;
    height: 26px;
}

.gallery-panel {
    padding: 30px 24px 22px;
}

.section-heading {
    display: flex;
    justify-content: space-between;
    align-items: end;
    margin-bottom: 20px;
}

.eyebrow {
    display: block;
    color: var(--acid);
    text-transform: uppercase;
    font-size: 9px;
    letter-spacing: .13em;
    margin-bottom: 8px;
}

.section-heading h1,
.archive-head h2 {
    margin: 0;
    font: 32px/1 "EB Garamond",serif;
    font-weight: 400;
}

.counter {
    color: var(--muted);
}

.counter b {
    font-size: 18px;
    color: var(--ink);
    font-weight: 400;
}

.hero-frame {
    position: relative;
    height: min(54vh,590px);
    min-height: 390px;
    border: 1px solid #363832;
    background: #111;
    overflow: hidden;
}

.artwork {
    background-image: linear-gradient(135deg,#272a23,#0c0d0b);
    background-size: 300% 200%;
    background-repeat: no-repeat;
}

.art-0 {
    background-position: 0 0;
}

.art-1 {
    background-position: 50% 0;
}

.art-2 {
    background-position: 100% 0;
}

.art-3 {
    background-position: 0 100%;
}

.art-4 {
    background-position: 50% 100%;
}

.art-5 {
    background-position: 100% 100%;
}

.hero-art {
    position: absolute;
    inset: 0;
    filter: saturate(.78) contrast(1.07);
    transition: opacity .25s,transform .7s cubic-bezier(.2,.7,.2,1);
}

.hero-frame:hover .hero-art {
    transform: scale(1.018);
}

.scanline {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(0deg,transparent 0 4px,rgba(0,0,0,.08) 5px);
    pointer-events: none;
}

.arrow {
    position: absolute;
    top: 50%;
    translate: 0 -50%;
    width: 37px;
    height: 37px;
    background: rgba(8,9,7,.75);
    border: 1px solid #4b4d45;
    color: var(--ink);
    cursor: pointer;
    backdrop-filter: blur(6px);
}

.arrow.prev {
    left: 14px;
}

.arrow.next {
    right: 14px;
}

.hero-caption {
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 17px;
    background: rgba(7,8,6,.9);
    border: 1px solid #363832;
    padding: 15px 18px;
    display: flex;
    justify-content: space-between;
    align-items: end;
    backdrop-filter: blur(8px);
}

.hero-caption span {
    color: #96978e;
    text-transform: uppercase;
    font-size: 9px;
}

.hero-caption h2 {
    font: 26px/1.1 "EB Garamond",serif;
    margin: 5px 0 0;
}

.hero-caption>div:last-child {
    text-align: right;
}

.hero-caption small {
    display: block;
    color: #9b9b9b;
    font-size: 8px;
    margin-top: 7px;
}

.thumbs {
    display: grid;
    grid-template-columns: repeat(6,1fr);
    gap: 8px;
    margin-top: 12px;
}

.thumb {
    background: #0d0e0c;
    border: 1px solid var(--line);
    color: var(--muted);
    padding: 0;
    text-align: left;
    cursor: pointer;
    min-width: 0;
}

.thumb-art {
    height: 93px;
    border-bottom: 1px solid var(--line);
    filter: saturate(.55);
}

.thumb-label {
    display: block;
    padding: 9px 8px 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: uppercase;
    font-size: 8px;
}

.thumb.active {
    border-color: #718e3a;
    color: var(--ink);
}

.thumb.active .thumb-art {
    filter: saturate(.9);
}

.archive-panel {
    min-width: 0;
    background: #000;
    padding-top: 54px;
}

.archive-head {
    height: 122px;
    padding: 28px 24px 20px;
    border-bottom: 1px solid var(--line);
}

.archive-head h2 {
    font-size: 30px;
}

.archive-head p {
    margin: 9px 0;
    color: var(--muted);
    font-size: 10px;
    text-transform: uppercase;
}

.filters {
    height: 41px;
    display: grid;
    grid-template-columns: repeat(4,1fr);
    border-bottom: 1px solid var(--line);
}

.filters button {
    border: 0;
    border-right: 1px solid var(--line);
    background: #0c0d0b;
    color: #717269;
    text-transform: uppercase;
    font: 10px "DM Mono",monospace;
    cursor: pointer;
}

.filters button.active {
    color: var(--ink);
    background: #151711;
    box-shadow: inset 0 -1px var(--acid);
}

.dossier {
    width: calc(100% - 72px);
    height: 570px;
    max-height: 57vh;
    min-height: 500px;
    margin: 44px auto 30px;
    background: #1a1b18;
    border: 1px solid #383a34;
    position: relative;
    box-shadow: 10px 10px 0 #10110f,16px 16px 0 -1px #292a26,18px 18px 24px #000;
    transform: rotate(-.35deg);
    transition: transform .35s;
}

.dossier:hover {
    transform: rotate(0) translateY(-3px);
}

.dossier:before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg,rgba(255,255,255,.035),transparent 35%),repeating-linear-gradient(7deg,transparent 0 3px,rgba(255,255,255,.01) 4px);
}

.folder-tab {
    position: absolute;
    top: -26px;
    left: 28px;
    background: #d0c8b4;
    color: #25251f;
    border-radius: 5px 5px 0 0;
    padding: 11px 26px 8px;
    font-weight: 500;
    box-shadow: 0 -2px 8px #000;
}

.binder-holes {
    position: absolute;
    right: 24px;
    top: 48%;
    z-index: 2;
}

.binder-holes span {
    display: block;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: radial-gradient(circle,#151510 0 17%,#8b7651 19% 23%,#272720 25% 52%,#0e0f0c 54%);
    margin: 18px 0;
}

.dossier-inner {
    position: absolute;
    inset: 0;
    padding: 48px 75px 32px 38px;
}

.record-meta {
    display: flex;
    justify-content: space-between;
    color: #8d8d83;
    font-size: 9px;
}

.rule {
    height: 1px;
    background: #343630;
    margin: 20px 0 30px;
}

.dossier h2 {
    font: clamp(28px,3vw,42px)/1.05 "EB Garamond",serif;
    font-weight: 400;
    margin: 0 0 20px;
    max-width: 420px;
}

.record-intro {
    color: #a2a197;
    font: 16px/1.65 "EB Garamond",serif;
    max-width: 380px;
}

.annotation {
    border: 1px solid #4a4a44;
    padding: 16px;
    margin: 32px 0 22px;
    max-width: 310px;
}

.annotation span {
    color: #73746c;
    font-size: 8px;
}

.annotation p {
    font: italic 18px/1.4 "EB Garamond",serif;
    margin: 9px 0 0;
}

.record-bottom {
    position: absolute;
    bottom: 28px;
    left: 38px;
    right: 75px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid #33342f;
    padding-top: 16px;
    color: #77786f;
    font-size: 8px;
}

.record-bottom button {
    border: 0;
    background: transparent;
    color: #9b9999;
    font: 9px "DM Mono",monospace;
    text-transform: uppercase;
    cursor: pointer;
}

.archive-footer {
    border-top: 1px solid var(--line);
    display: grid;
    grid-template-columns: 1fr 1.3fr .7fr;
    min-height: 105px;
}

.archive-footer>div {
    padding: 22px;
    border-right: 1px solid var(--line);
}

.archive-footer span {
    display: block;
    color: var(--muted);
    text-transform: uppercase;
    font-size: 8px;
    margin-bottom: 12px;
}

.archive-footer strong {
    font-weight: 400;
}

.barcode {
    background: repeating-linear-gradient(90deg,#4b4d43 0 1px,transparent 1px 4px,#77796d 4px 6px,transparent 6px 10px)!important;
    margin: 23px;
    height: 50px;
    padding: 0!important;
    opacity: .6;
}

dialog {
    width: min(660px,90vw);
    color: var(--ink);
    background: #131512;
    border: 1px solid #474941;
    padding: 42px;
    box-shadow: 0 30px 100px #000;
}

dialog::backdrop {
    background: rgba(0,0,0,.78);
    backdrop-filter: blur(7px);
}

dialog h2 {
    font: 44px/1 "EB Garamond",serif;
    font-weight: 400;
    margin: 15px 0;
}

dialog p {
    font: 18px/1.7 "EB Garamond",serif;
    color: #aaa99e;
}

.dialog-close {
    position: absolute;
    right: 15px;
    top: 12px;
    border: 0;
    background: none;
    color: var(--ink);
    font-size: 28px;
}

.dialog-art {
    height: 220px;
    margin-top: 25px;
    border: 1px solid var(--line);
}

body.compact .hero-frame {
    height: 360px;
}

body.compact .thumb-art {
    height: 60px;
}

@media (max-width:1150px){
    .shell {
        grid-template-columns: 110px minmax(420px,1fr) minmax(370px,.9fr);
    }

    .brand,
    .rail-note {
        padding-inline: 16px;
    }

    .rail-nav a {
        padding-inline: 18px;
    }

    .dossier {
        width: calc(100% - 38px);
    }

    .dossier-inner {
        padding-right: 55px;
    }

    .thumbs {
        grid-template-columns: repeat(3,1fr);
    }

    .thumb-art {
        height: 80px;
    }
}

@media (max-width:860px){
    .shell {
        display: block;
        border: 0;
    }

    .rail {
        position: relative;
        min-height: auto;
        height: 70px;
        display: flex;
        flex-direction: row;
        border-bottom: 1px solid var(--line);
        border-right: 0;
    }

    .brand {
        height: 70px;
        width: 150px;
        padding: 14px 18px;
    }

    .brand-mark {
        font-size: 17px;
        margin: 0;
    }

    .brand>span:last-child,
    .rail-note,
    .rail-glyphs,
    .signal {
        display: none;
    }

    .rail-nav {
        margin: 0 0 0 auto;
        border: 0;
        display: flex;
    }

    .rail-nav a {
        height: 70px;
        border-bottom: 0;
    }

    .workspace {
        border: 0;
    }

    .archive-panel {
        padding-top: 0;
    }

    .dossier {
        max-height: none;
    }

    .archive-footer {
        margin-bottom: 40px;
    }
}

@media (max-width:560px){
    .topbar>span,
    .topbar nav {
        display: none;
    }

    .topbar {
        justify-content: flex-end;
    }

    .gallery-panel {
        padding: 22px 14px;
    }

    .hero-frame {
        height: 62vh;
        min-height: 430px;
    }

    .thumbs {
        display: flex;
        overflow-x: auto;
    }

    .thumb {
        min-width: 110px;
    }

    .archive-head {
        padding-inline: 16px;
    }

    .filters {
        overflow-x: auto;
        display: flex;
    }

    .filters button {
        min-width: 110px;
    }

    .dossier {
        width: calc(100% - 30px);
        height: 590px;
        margin-top: 42px;
    }

    .dossier-inner {
        padding: 40px 52px 25px 25px;
    }

    .record-bottom {
        left: 25px;
        right: 52px;
        display: block;
    }

    .record-bottom button {
        display: block;
        margin-top: 13px;
    }

    .archive-footer {
        grid-template-columns: 1fr 1fr;
    }

    .archive-footer .barcode {
        display: none;
    }
}

/* Reference-faithful refinement: neutral blacks and preserved media ratios */
:root {
    --bg: #000;
    --paper: #151515;
    --line: #252525;
    --ink: #d8d4c8;
    --muted: #74746e;
}

html,
body {
    background: #000;
}

.shell,
.rail,
.workspace,
.topbar,
.gallery-panel,
.archive-panel,
.archive-head,
.filters {
    background: #000;
}

.rail-nav a.active {
    background: #050505;
}

.grid-button,
.arrow {
    background: rgba(0,0,0,.86);
}

.gallery-panel {
    padding: 22px 20px 20px;
}

.section-heading {
    margin-bottom: 14px;
}

.hero-frame {
    height: auto;
    min-height: 0;
    max-height: none;
    aspect-ratio: 1.18/1;
    background: #000;
    border-color: #282828;
}

.artwork {
    background-image: none;
    background-size: 300% auto;
    background-repeat: no-repeat;
    background-color: #050505;
}

.hero-art {
    filter: saturate(.86) contrast(1.06);
    background-color: #000;
}

.hero-caption {
    left: 14px;
    right: 14px;
    bottom: 14px;
    background: rgba(0,0,0,.9);
    border-color: #2c2c2c;
    width: 350px;
}

.thumbs {
    grid-template-columns: repeat(6,minmax(86px,1fr));
    gap: 7px;
    margin-top: 10px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-color: #3d3d3d #080808;
}

.thumb {
    background: #030303;
    border-color: #282828;
}

.thumb-art {
    height: auto;
    aspect-ratio: .62/1;
    border-color: #282828;
    filter: saturate(.6) contrast(1.05);
}

.thumb-label {
    padding: 8px 7px 9px;
}

.archive-panel {
    padding-top: 54px;
    background: #000;
}

.archive-head {
    height: 112px;
    padding: 24px 22px 17px;
    background-image: linear-gradient(#0b0b0b 1px,transparent 1px),linear-gradient(90deg,#0b0b0b 1px,transparent 1px);
    background-size: 24px 24px;
}

.archive-head h2 {
    font-size: 29px;
    letter-spacing: .04em;
}

.filters {
    height: 40px;
    grid-template-columns: repeat(5,1fr);
}

.filters button {
    background: #020202;
    border-color: #272727;
    color: #77766f;
}

.filters button.active {
    background: #080808;
    box-shadow: inset 0 -1px #7e9b35;
    color: #d9d5ca;
}

.archive-stage {
    display: grid;
    grid-template-columns: minmax(330px,1fr) 112px;
    gap: 15px;
    padding: 44px 15px 33px;
    min-height: 625px;
    align-items: start;
    isolation: isolate;
    overflow: hidden;
}

.dossier {
    width: 100%;
    height: 548px;
    min-height: 0;
    max-height: none;
    margin: 0;
    background: #171717;
    border-color: #303030;
    box-shadow: 7px 7px 0 #080808,12px 12px 0 #1d1d1d,14px 14px 24px #000;
    transform: none;
    z-index: 2;
}

.dossier:hover {
    transform: translateY(-2px);
}

.dossier:before {
    z-index: 0;
    background: linear-gradient(105deg,rgba(255,255,255,.025),transparent 40%),repeating-linear-gradient(12deg,transparent 0 3px,rgba(255,255,255,.008) 4px);
    box-shadow: inset 0 0 45px #050505;
}

.folder-layer {
    position: absolute;
    pointer-events: none;
    border: 1px solid #292929;
    background: #121212;
    z-index: -1;
    clip-path: polygon(0 7%,38% 7%,42% 0,100% 0,100% 100%,0 100%);
}

.folder-layer-one {
    inset: -18px -9px -12px 7px;
}

.folder-layer-two {
    inset: -30px 9px -22px 16px;
    background: #0d0d0d;
}

.folder-tab {
    top: -28px;
    left: 27px;
    background: linear-gradient(#d7d0bf,#bdb6a5);
    color: #24231f;
    padding: 10px 23px 9px;
    border: 1px solid #6f6b61;
    font-size: 14px;
    z-index: 5;
}

.evidence-tab {
    position: absolute;
    right: -3px;
    top: 118px;
    z-index: 5;
    background: #c9c1ae;
    color: #282721;
    border: 1px solid #777166;
    padding: 12px 8px;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font: 12px/1.1 "DM Mono",monospace;
    text-transform: uppercase;
    letter-spacing: .06em;
    box-shadow: 2px 2px 5px #000;
}

.dossier-inner {
    padding: 48px 66px 28px 35px;
    z-index: 1;
}

.record-meta {
    font-size: 9px;
    text-transform: uppercase;
}

.dossier h2 {
    font-size: clamp(27px,2.5vw,39px);
    margin-bottom: 18px;
}

.record-intro {
    font: 15px/1.65 "DM Mono",monospace;
    color: #8d8b83;
    max-width: 320px;
}

.annotation {
    margin: 28px 0 20px;
    max-width: 250px;
    padding: 14px;
    background: rgba(0,0,0,.12);
}

.annotation span {
    font-size: 7px;
}

.annotation span b {
    font-weight: 400;
}

.annotation p {
    font: 15px/1.55 "DM Mono",monospace;
    color: #a7a49a;
}

.binder-holes {
    right: 13px;
    top: 49%;
}

.binder-holes span {
    width: 43px;
    height: 43px;
    margin: 14px 0;
    background: radial-gradient(circle,#0a0a0a 0 16%,#917850 18% 22%,#222 24% 52%,#080808 54%);
}

.dossier-stamp {
    position: absolute;
    right: 68px;
    bottom: 71px;
    width: 55px;
    height: 55px;
    border: 1px solid #4a4943;
    border-radius: 50%;
    display: grid;
    place-content: center;
    text-align: center;
    color: #55544f;
    font-size: 7px;
    transform: rotate(-12deg);
}

.record-bottom {
    left: 35px;
    right: 66px;
    bottom: 24px;
}

.year-stack {
    display: grid;
    grid-template-rows: repeat(4,1fr);
    gap: 11px;
    height: 548px;
}

.year-stack button {
    position: relative;
    border: 1px solid #292929;
    background: #0b0b0b;
    color: #aaa69a;
    text-align: left;
    padding: 18px 17px;
    font-family: "DM Mono",monospace;
    text-transform: uppercase;
    cursor: pointer;
    transition: border-color .2s,background .2s;
}

.year-stack button:hover {
    background: #101010;
    border-color: #444;
}

.year-stack strong,
.year-stack span,
.year-stack small {
    display: block;
    font-weight: 400;
}

.year-stack strong {
    font-size: 17px;
    margin-bottom: 6px;
}

.year-stack span {
    font-size: 10px;
    margin-bottom: 12px;
}

.year-stack small {
    font-size: 12px;
    color: #75736c;
}

.year-stack i {
    position: absolute;
    left: 20px;
    bottom: 14px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--acid);
    box-shadow: 0 0 10px var(--acid);
}

.archive-footer {
    min-height: 148px;
    height: 148px;
    grid-template-columns: 1.1fr 1fr 112px;
    border-color: #282828;
    background: #000;
    padding: 0;
}

.archive-footer>div {
    padding: 18px;
    border-color: #282828;
    position: relative;
}

.archive-footer span,
.archive-footer small {
    display: block;
    color: #74736d;
    text-transform: uppercase;
    font-size: 7px;
    line-height: 1.65;
}

.archive-footer strong {
    display: block;
    margin-top: 9px;
    font: 16px/1.3 "EB Garamond",serif;
    color: #c8c3b7;
}

.latest-entry {
    padding-right: 105px!important;
}

.latest-entry button {
    position: absolute;
    left: 18px;
    bottom: 17px;
    border: 0;
    border-bottom: 1px solid #666;
    background: none;
    color: #89877f;
    text-transform: uppercase;
    font: 7px "DM Mono",monospace;
    padding: 0 0 3px;
    cursor: pointer;
}

.signal-map {
    position: absolute!important;
    right: 15px;
    top: 18px;
    width: 74px;
    height: 102px;
    padding: 0!important;
    border: 1px solid #575650!important;
    background-image: linear-gradient(#202020 1px,transparent 1px),linear-gradient(90deg,#202020 1px,transparent 1px);
    background-size: 9px 9px;
}

.signal-map i {
    position: absolute;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #00c4c4;
    box-shadow: 0 0 11px 4px #00a3a3;
}

.signal-map i:nth-child(1) {
    left: -4px;
    top: 68px;
}

.signal-map i:nth-child(2) {
    left: 24px;
    top: 30px;
}

.signal-map i:nth-child(3) {
    right: 7px;
    bottom: -3px;
    width: 4px;
    height: 4px;
    background: #b8ef4a;
    box-shadow: 0 0 7px #b8ef4a;
}

.archive-status strong {
    font: 12px "DM Mono",monospace;
    text-transform: uppercase;
    margin: 3px 0 10px;
}

.index-meter {
    width: 100%;
    height: 12px;
    margin: 9px 0 15px;
    background: repeating-linear-gradient(90deg,#00a7a2 0 2px,transparent 2px 4px);
    border-bottom: 1px solid #252525;
}

.archive-preview {
    margin: 18px!important;
    padding: 0!important;
    height: 111px;
    align-self: center;
    border: 1px solid #282828;
    filter: grayscale(1) contrast(1.25);
    background-size: 300% auto;
}

dialog {
    background: #101010;
}

body.compact .hero-frame {
    height: auto;
    aspect-ratio: 1.6/1;
}

body.compact .thumb-art {
    height: auto;
    aspect-ratio: .8/1;
}

@media (max-width:1150px){
    .thumbs {
        grid-template-columns: repeat(6,minmax(92px,1fr));
    }

    .archive-stage {
        display: block;
        padding-inline: 20px;
        overflow: visible;
    }

    .dossier {
        height: 550px;
    }

    .year-stack {
        height: auto;
        grid-template-columns: repeat(4,1fr);
        grid-template-rows: none;
        margin-top: 35px;
    }

    .year-stack button {
        min-height: 105px;
        padding: 14px;
    }

    .archive-footer {
        margin-top: 15px;
    }

    .archive-preview {
        display: block;
    }
}

@media (max-width:860px){
    .archive-panel {
        padding-top: 0;
    }

    .archive-stage {
        padding: 44px 25px 30px;
    }

    .year-stack {
        grid-template-columns: repeat(4,1fr);
    }

    .archive-footer {
        height: auto;
        min-height: 148px;
        margin-bottom: 40px;
    }

    .hero-frame {
        aspect-ratio: 1.18/1;
    }
}

@media (max-width:560px){
    .gallery-panel {
        padding: 20px 14px;
    }

    .hero-frame {
        height: auto;
        min-height: 0;
        aspect-ratio: .86/1;
    }

    .thumbs {
        display: grid;
        grid-template-columns: repeat(6,112px);
    }

    .thumb {
        min-width: 0;
    }

    .thumb-art {
        aspect-ratio: .62/1;
    }

    .archive-stage {
        padding: 42px 14px 25px;
    }

    .dossier {
        height: 570px;
    }

    .dossier-inner {
        padding: 40px 50px 25px 24px;
    }

    .evidence-tab {
        top: 105px;
    }

    .year-stack {
        grid-template-columns: repeat(2,1fr);
        gap: 8px;
    }

    .archive-footer {
        grid-template-columns: 1fr 1fr;
    }

    .archive-preview {
        display: none;
    }

    .latest-entry {
        padding-right: 94px!important;
    }
}

.thumb-art,
.archive-preview {
    background-size: auto 200%;
}

.filters {
    scrollbar-width: none;
}

.filters::-webkit-scrollbar,
.thumbs::-webkit-scrollbar {
    display: none;
}

/* Whole-frame composition calibration */
@media (min-width:861px){
    .shell {
        grid-template-columns: 176px minmax(550px,1.12fr) minmax(520px,1fr);
    }

    .rail,
    .shell {
        min-height: 100vh;
    }

    .gallery-panel {
        padding: 10px 20px 16px;
    }

    .hero-frame {
        aspect-ratio: 1.18/1;
    }

    .thumbs {
        grid-template-columns: repeat(6,calc((100% - 28px)/5));
        gap: 7px;
        margin-top: 10px;
        padding-bottom: 0;
    }

    .thumb-art {
        aspect-ratio: .58/1;
    }

    .thumb-label {
        min-height: 50px;
        padding: 9px 8px 8px;
        line-height: 1.5;
    }

    .signal {
        min-height: 162px;
        padding: 28px 20px;
        background: #090909;
    }

    .archive-head {
        height: 88px;
        padding: 18px 22px 12px;
    }

    .archive-head h2 {
        font-size: 20px;
        text-transform: uppercase;
    }

    .archive-head p {
        margin-top: 8px;
    }

    .archive-stage {
        min-height: 594px;
        padding: 28px 15px 18px;
    }

    .archive-footer {
        height: 190px;
        min-height: 190px;
    }

    .signal-map {
        height: 120px;
    }

    .archive-preview {
        height: 135px;
    }
}

.hero-index {
    margin-top: 8px!important;
    color: #74746e!important;
}

.hero-index b {
    color: #d8d4c8;
    font-weight: 400;
}

.gallery-pagination {
    height: 39px;
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 26px;
    border-bottom: 1px solid #1b1b1b;
}

.gallery-pagination button {
    width: 25px;
    height: 25px;
    padding: 0;
    border: 1px solid #3a3a3a;
    background: #020202;
    color: #b3b0a7;
    font: 17px/1 "EB Garamond",serif;
    cursor: pointer;
}

.page-track {
    width: 126px;
    height: 2px;
    background: #1d1d1d;
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 4px;
}

.page-track i {
    display: block;
    background: #252525;
}

.page-track i.active {
    background: #d6d1c5;
}

@media (max-width:1150px) and (min-width:861px){
    .shell {
        grid-template-columns: 110px minmax(420px,1fr) minmax(370px,.9fr);
    }

    .archive-stage {
        display: block;
        min-height: 0;
        padding: 42px 20px 22px;
        overflow: visible;
    }

    .year-stack {
        height: auto;
        grid-template-columns: repeat(4,1fr);
        grid-template-rows: none;
        margin-top: 35px;
    }

    .archive-footer {
        height: 180px;
        min-height: 180px;
        margin-top: 15px;
    }

    .thumbs {
        grid-template-columns: repeat(6,calc((100% - 28px)/5));
    }
}

@media (max-width:860px){
    .gallery-panel {
        padding-top: 10px;
    }

    .gallery-pagination {
        margin-bottom: 16px;
    }

    .archive-head {
        height: 88px;
        padding-top: 18px;
    }

    .archive-stage {
        min-height: 0;
    }
}

/* Reference spacing corrections */
@media (min-width:861px){
    .signal {
        margin-bottom: 20px;
    }
}

@media (min-width:1151px){
    .archive-stage {
        column-gap: 34px;
    }
}

/* Fixed desktop design canvas: scale, never reflow */
@media (min-width:861px){
    html,
    body {
        width: 100%;
        height: 100%;
        min-height: 0;
        overflow: hidden;
    }

    .shell {
        position: fixed;
        left: var(--canvas-x,0px);
        top: var(--canvas-y,0px);
        width: 1536px;
        height: 1012px;
        min-height: 1012px;
        max-width: none;
        margin: 0;
        transform: scale(var(--desktop-scale,1));
        transform-origin: top left;
        grid-template-columns: 176px 718px 642px;
        overflow: hidden;
    }

    .rail {
        position: relative;
        top: auto;
        height: 1012px;
        min-height: 1012px;
    }

    .workspace,
    .archive-panel {
        height: 1012px;
        min-height: 0;
        overflow: hidden;
    }

    .gallery-panel {
        padding: 10px 20px 16px;
    }

    .thumbs {
        display: grid;
        grid-template-columns: repeat(6,calc((100% - 28px)/5));
        gap: 7px;
        margin-top: 10px;
        padding-bottom: 0;
    }

    .archive-stage {
        display: grid;
        grid-template-columns: minmax(330px,1fr) 112px;
        grid-template-rows: none;
        column-gap: 34px;
        padding: 28px 15px 18px;
        min-height: 594px;
        overflow: hidden;
    }

    .dossier {
        width: 100%;
        height: 548px;
        min-height: 0;
        margin: 0;
    }

    .year-stack {
        height: 548px;
        grid-template-columns: 1fr;
        grid-template-rows: repeat(4,1fr);
        gap: 11px;
        margin-top: 0;
    }

    .year-stack button {
        min-height: 0;
        padding: 18px 17px;
    }

    .archive-footer {
        height: 190px;
        min-height: 190px;
        margin-top: 0;
        margin-bottom: 0;
    }

    .archive-preview {
        display: block;
    }
}

@media (max-width:860px){
    html,
    body {
        height: auto;
        min-height: 100%;
        overflow-x: hidden;
        overflow-y: auto;
    }

    .shell {
        position: static;
        width: auto;
        height: auto;
        min-height: 100vh;
        max-width: 1800px;
        margin: auto;
        transform: none;
    }
}

/* Canvas-wide desktop navigation */
@media (min-width:861px){
    .topbar {
        position: absolute;
        z-index: 30;
        top: 0;
        left: 176px;
        width: 1360px;
        height: 54px;
        background: #000;
        border-bottom: 1px solid var(--line);
    }

    .workspace {
        padding-top: 54px;
    }
}

@media (max-width:860px){
    .topbar {
        position: static;
        left: auto;
        top: auto;
        width: auto;
    }

    .workspace {
        padding-top: 0;
    }
}

/* Archive card hierarchy and readability refinements */
.topbar {
    font-size: 12px;
}

.latest-entry {
    background: #070707;
}

.archive-status {
    background: #040404;
}

.index-meter {
    width: 68%;
}

@media (min-width:861px){
    .archive-footer {
        grid-template-columns: 1.05fr 1fr 156px;
    }

    .archive-preview {
        margin-left: 14px!important;
        margin-right: 14px!important;
    }
}

/* Navigation centering and dossier breathing room */
@media (min-width:861px){
    .topbar {
        position: absolute;
    }

    .topbar nav {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }

    .dossier {
        width: calc(100% - 12px);
        height: 520px;
        margin-top: 8px;
        justify-self: start;
    }
}

/* Mobile archive keeps dossier and years side-by-side */
@media (max-width:860px){
    .archive-stage {
        display: grid;
        grid-template-columns: minmax(0,1fr) 104px;
        grid-template-rows: auto;
        gap: 12px;
        padding: 42px 14px 25px;
        align-items: start;
        overflow: hidden;
    }

    .dossier {
        width: 100%;
        height: 570px;
        min-height: 0;
        margin: 0;
        justify-self: stretch;
    }

    .year-stack {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: repeat(4,1fr);
        gap: 8px;
        height: 570px;
        margin: 0;
    }

    .year-stack button {
        min-height: 0;
        padding: 12px 10px;
    }
}

@media (max-width:480px){
    .archive-stage {
        grid-template-columns: minmax(0,1fr) 86px;
        gap: 8px;
        padding: 42px 8px 24px;
    }

    .dossier-inner {
        padding: 36px 42px 22px 18px;
    }

    .dossier h2 {
        font-size: 23px;
    }

    .record-intro {
        font-size: 12px;
        line-height: 1.55;
    }

    .annotation {
        padding: 11px;
        margin-top: 22px;
    }

    .annotation p {
        font-size: 12px;
    }

    .record-bottom {
        left: 18px;
        right: 42px;
    }

    .year-stack button {
        padding: 10px 8px;
    }

    .year-stack strong {
        font-size: 14px;
    }

    .year-stack span {
        font-size: 8px;
    }

    .year-stack small {
        font-size: 10px;
    }

    .year-stack i {
        left: 10px;
        bottom: 10px;
    }
}

/* Mobile archive uses a proportionally scaled fixed composition */
@media (max-width:860px){
    .archive-stage {
        width: 650px;
        max-width: none;
        display: grid;
        grid-template-columns: 454px 104px;
        grid-template-rows: 528px;
        justify-content: center;
        gap: 34px;
        padding: 42px 14px 25px;
        margin: 0;
        zoom: var(--mobile-archive-scale,1);
        overflow: visible;
    }

    .dossier {
        width: 454px;
        height: 520px;
        min-height: 0;
        margin: 8px 0 0;
        justify-self: start;
    }

    .dossier-inner {
        padding: 48px 66px 28px 35px;
    }

    .dossier h2 {
        font-size: 27px;
    }

    .record-intro {
        font-size: 15px;
        line-height: 1.65;
    }

    .annotation {
        padding: 14px;
        margin: 28px 0 20px;
        max-width: 250px;
    }

    .annotation p {
        font-size: 15px;
        line-height: 1.55;
    }

    .record-bottom {
        left: 35px;
        right: 66px;
    }

    .year-stack {
        width: 104px;
        height: 520px;
        grid-template-columns: 1fr;
        grid-template-rows: repeat(4,1fr);
        gap: 8px;
        margin: 0;
    }

    .year-stack button {
        min-height: 0;
        padding: 12px 10px;
    }

    .year-stack strong {
        font-size: 17px;
    }

    .year-stack span {
        font-size: 10px;
    }

    .year-stack small {
        font-size: 12px;
    }

    .year-stack i {
        left: 20px;
        bottom: 14px;
    }
}
/* Minimal horizontal scrollbar for the gallery strip */
.thumbs{scrollbar-width:thin;scrollbar-color:#2b2b2b #060606}
.thumbs::-webkit-scrollbar{display:block;height:3px}
.thumbs::-webkit-scrollbar-track{background:#060606}
.thumbs::-webkit-scrollbar-thumb{background:#2b2b2b;border-radius:999px}
.thumbs::-webkit-scrollbar-thumb:hover{background:#3a3a3a}
.thumbs::-webkit-scrollbar-corner{background:#060606}
/* Native gallery media */
.media-frame,.thumb-art,.dialog-art,.archive-preview{overflow:hidden;background:#030303}
.media-frame>img,.media-frame>video,.thumb-art>img,.thumb-art>video,.dialog-art>img,.dialog-art>video,.archive-preview>img,.archive-preview>video{display:block;width:100%;height:100%;object-fit:cover;object-position:center;border:0}
.hero-art>video,.hero-art>img{filter:saturate(.86) contrast(1.06)}
.thumb-art>video,.thumb-art>img{filter:saturate(.68) contrast(1.05)}
.thumb.active .thumb-art>video,.thumb.active .thumb-art>img{filter:saturate(.95) contrast(1.05)}
.archive-preview>video,.archive-preview>img{filter:grayscale(1) contrast(1.25)}
/* Keep all gallery assets in one horizontal thumbnail rail */
.thumbs{grid-auto-flow:column;grid-template-columns:none;grid-template-rows:1fr}
@media(min-width:861px){.thumbs{grid-auto-columns:calc((100% - 28px)/5)}}
@media(max-width:860px){.thumbs{grid-auto-columns:112px}}
/* Gallery media presentation */
.thumb-art,.thumb-art>img,.thumb-art>video,.thumb.active .thumb-art,.thumb.active .thumb-art>img,.thumb.active .thumb-art>video{filter:none!important;opacity:1!important}
.hero-art>.hero-top-biased{object-position:center top}



/* Preserve every thumbnail's native ratio while keeping a uniform media height. */
.thumbs{display:flex;align-items:flex-start;grid-template-columns:none;grid-template-rows:none;grid-auto-flow:unset}
.thumb{position:relative;flex:0 0 auto;width:fit-content;padding-bottom:34px}
.thumb-art{width:auto;height:220px!important}
.thumb-art>img,.thumb-art>video{width:100%!important;height:100%!important;object-fit:contain!important;object-position:center!important}
.thumb-label{position:absolute;right:0;bottom:0;left:0;height:34px}
@media(max-width:860px){.thumb-art{height:160px!important}}

/* Reference-style thumbnail captions: a separate footer below each media frame. */
.thumb{padding-bottom:54px}
.thumb-label{position:absolute;right:0;bottom:0;left:0;display:flex;height:54px;padding:9px 8px 7px;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:7px;background:#020303;border-top:1px solid #252725;text-align:left;overflow:hidden}
.thumb-title{display:block;width:100%;color:#d7d4ca;font-size:8px;line-height:1;letter-spacing:.035em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.thumb-index{display:block;color:#2f8f91;font-size:8px;line-height:1;letter-spacing:.08em}
.thumb.active .thumb-title{color:#dce6dc}
.thumb.active .thumb-index{color:#4cb6b7}
/* Selected animated thumbnails mirror the hero's rendered frame. */
.thumb-art{position:relative}
.thumb-sync-canvas{position:absolute;inset:0;z-index:2;display:block;width:100%;height:100%;pointer-events:none}
.thumb.is-synced .thumb-art>img,.thumb.is-synced .thumb-art>video{visibility:hidden}
/* Minimal standalone hero counter; the former caption card has been removed. */
.hero-index-float{position:absolute;right:14px;bottom:14px;z-index:3;display:block;padding:6px 8px;background:rgba(0,0,0,.78);border:1px solid #262826;color:#a8a79f;font-size:8px;line-height:1;letter-spacing:.08em}
.hero-index-float b{color:#e1ded4;font-weight:400}
/* Square gallery hero with a more compact thumbnail rail. */
.hero-frame,body.compact .hero-frame{height:auto!important;min-height:0!important;max-height:none!important;aspect-ratio:1/1!important}
.thumb-art,body.compact .thumb-art{height:135px!important}
@media(max-width:860px){.thumb-art,body.compact .thumb-art{height:105px!important}}
/* Compact thumbnail spacing calibration keeps pagination visible. */
.thumbs{gap:12px!important}
@media(max-width:860px){.thumbs{gap:9px!important}}
/* Project-specific archival inserts: one dark archive system, thirteen personalities. */
.project-insert{position:absolute;top:282px;right:66px;z-index:3;width:142px;height:118px;padding:12px 11px;overflow:hidden;background:#111210;border:1px solid #474841;box-shadow:3px 4px 0 rgba(0,0,0,.38);color:#b8b5aa;transform-origin:center;font-family:"DM Mono",monospace}
.project-insert>span,.project-insert>small{display:block;color:#777970;font-size:6px;line-height:1.3;letter-spacing:.09em;text-transform:uppercase}
.project-insert>strong{display:block;margin-top:10px;color:#d2cec1;font-size:11px;line-height:1.2;font-weight:400;letter-spacing:.025em;text-transform:uppercase}
.project-insert>small{position:absolute;right:10px;bottom:8px;left:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.insert-graphic{position:absolute;right:10px;bottom:25px;left:10px;height:31px;display:flex;align-items:flex-end;gap:5px;border-top:1px solid #33352f}
.insert-graphic i{display:block;flex:1;height:40%;border:1px solid #55574f;background:#171815}
.dossier-stamp{white-space:pre-line}

/* 01 / celestial observation plate */
.dossier[data-variant="celestial"] .project-insert{background:radial-gradient(circle at 72% 60%,rgba(184,239,74,.22) 0 2px,transparent 3px),radial-gradient(circle at 30% 76%,rgba(62,174,177,.24) 0 3px,transparent 4px),#101210}
.dossier[data-variant="celestial"] .insert-graphic{height:42px;border:1px solid #3c4139;background:repeating-linear-gradient(90deg,transparent 0 8px,#242820 9px),repeating-linear-gradient(0deg,transparent 0 8px,#242820 9px)}
.dossier[data-variant="celestial"] .insert-graphic i{display:none}
.dossier[data-variant="celestial"] .annotation{border-radius:50% 2px 2px 2px}

/* 02 / restricted threshold notice */
.dossier[data-variant="warning"] .project-insert{transform:rotate(-1.4deg);border-style:dashed;background:repeating-linear-gradient(-45deg,#111 0 8px,#1c1b17 8px 16px)}
.dossier[data-variant="warning"] .project-insert>strong{padding:5px;background:#c7bda6;color:#171713;font-weight:700}
.dossier[data-variant="warning"] .insert-graphic i{height:100%;border:0;background:#39382f}
.dossier[data-variant="warning"] .annotation{border-style:dashed;transform:rotate(.45deg)}

/* 03 / ruled origin ledger */
.dossier[data-variant="ledger"] .project-insert{background:repeating-linear-gradient(0deg,#131412 0 17px,#30312d 18px)}
.dossier[data-variant="ledger"] .insert-graphic{gap:0}
.dossier[data-variant="ledger"] .insert-graphic i{height:100%;background:transparent;border-width:0 1px 0 0}
.dossier[data-variant="ledger"] .annotation{background:repeating-linear-gradient(0deg,transparent 0 19px,rgba(180,176,160,.09) 20px)}

/* 04 / redacted witness statement */
.dossier[data-variant="redaction"] .project-insert{transform:rotate(1deg)}
.dossier[data-variant="redaction"] .insert-graphic{display:block;border:0}
.dossier[data-variant="redaction"] .insert-graphic i{width:100%;height:5px;margin:4px 0;border:0;background:#050505}
.dossier[data-variant="redaction"] .insert-graphic i:nth-child(2){width:72%}.dossier[data-variant="redaction"] .insert-graphic i:nth-child(3){width:88%}
.dossier[data-variant="redaction"] .annotation p{text-decoration:line-through;text-decoration-thickness:5px;text-decoration-color:rgba(0,0,0,.45)}

/* 05 / torn narrative fragment */
.dossier[data-variant="narrative"] .project-insert{clip-path:polygon(0 0,100% 3%,97% 96%,71% 93%,52% 100%,28% 94%,2% 98%);transform:rotate(-.7deg);padding-top:15px}
.dossier[data-variant="narrative"] .project-insert>strong{font-family:"EB Garamond",serif;font-size:16px;text-transform:none}
.dossier[data-variant="narrative"] .insert-graphic i{height:3px;border:0;background:#494a44}
.dossier[data-variant="narrative"] .annotation{border-left-width:4px}

/* 06 / physical telegram slip */
.dossier[data-variant="telegram"] .project-insert{background:#c8bfaa;color:#171713;border-color:#817b6d;transform:rotate(.8deg);box-shadow:4px 5px 0 #090909}
.dossier[data-variant="telegram"] .project-insert>span,.dossier[data-variant="telegram"] .project-insert>small{color:#4c4a42}
.dossier[data-variant="telegram"] .project-insert>strong{color:#1a1915}
.dossier[data-variant="telegram"] .insert-graphic{border-color:#777063}.dossier[data-variant="telegram"] .insert-graphic i{height:2px;border:0;background:#4f4b42}
.dossier[data-variant="telegram"] .annotation{box-shadow:5px 5px 0 #080808}

/* 07 / force-vector graph */
.dossier[data-variant="vector"] .project-insert{background:linear-gradient(145deg,transparent 49%,#63665d 50%,transparent 51%),repeating-linear-gradient(90deg,transparent 0 11px,#252821 12px),repeating-linear-gradient(0deg,transparent 0 11px,#252821 12px),#10110f}
.dossier[data-variant="vector"] .insert-graphic i{width:2px;flex:none;border:0;background:#86877d;transform-origin:bottom}.dossier[data-variant="vector"] .insert-graphic i:nth-child(1){height:35%;transform:rotate(-28deg)}.dossier[data-variant="vector"] .insert-graphic i:nth-child(2){height:80%;transform:rotate(18deg)}.dossier[data-variant="vector"] .insert-graphic i:nth-child(3){height:55%;transform:rotate(42deg)}
.dossier[data-variant="vector"] .annotation{border-radius:0 28px 0 0}

/* 08 / executable terminal printout */
.dossier[data-variant="terminal"] .project-insert{background:repeating-linear-gradient(0deg,#080b08 0 3px,#0d120d 4px);border-color:#3d4938}
.dossier[data-variant="terminal"] .project-insert>strong{color:#b8ef4a;font-size:10px}
.dossier[data-variant="terminal"] .insert-graphic{display:block;border:0}.dossier[data-variant="terminal"] .insert-graphic i{width:var(--w,82%);height:2px;margin:4px 0;border:0;background:#45633b}.dossier[data-variant="terminal"] .insert-graphic i:nth-child(2){--w:55%}.dossier[data-variant="terminal"] .insert-graphic i:nth-child(3){--w:70%}.dossier[data-variant="terminal"] .insert-graphic i:nth-child(4){--w:32%}
.dossier[data-variant="terminal"] .annotation{border-color:#3c4938;background:#090c09}

/* 09 / clipped incident report */
.dossier[data-variant="error"] .project-insert{clip-path:polygon(0 0,88% 0,100% 14%,100% 100%,0 100%);border:1px dashed #5a554c}
.dossier[data-variant="error"] .project-insert:after{content:"!";position:absolute;right:10px;top:7px;color:#b8ef4a;font-size:17px}
.dossier[data-variant="error"] .insert-graphic i{height:var(--h,35%);background:#25231f}.dossier[data-variant="error"] .insert-graphic i:nth-child(2){--h:85%}.dossier[data-variant="error"] .insert-graphic i:nth-child(3){--h:58%}.dossier[data-variant="error"] .insert-graphic i:nth-child(4){--h:100%}
.dossier[data-variant="error"] .annotation{border-width:2px 1px 1px}

/* 10 / perforated missing-file card */
.dossier[data-variant="missing"] .project-insert{border-style:dashed;background:radial-gradient(circle at 0 12px,#000 0 3px,transparent 4px) 0 0/100% 20px,#111}
.dossier[data-variant="missing"] .project-insert>strong{border:1px solid #5b5c55;padding:5px;text-align:center}
.dossier[data-variant="missing"] .insert-graphic{border:0;justify-content:center}.dossier[data-variant="missing"] .insert-graphic:before{content:"404";font:22px/1 "EB Garamond",serif;color:#3c3d38}
.dossier[data-variant="missing"] .insert-graphic i{display:none}
.dossier[data-variant="missing"] .annotation{border-style:dotted}

/* 11 / miniature contact sheet */
.dossier[data-variant="contact"] .project-insert{background:#0b0b0a;border-width:5px 5px 15px;border-color:#c7c0ae;box-shadow:4px 5px 0 #070707;transform:rotate(-.5deg)}
.dossier[data-variant="contact"] .project-insert>span,.dossier[data-variant="contact"] .project-insert>small{color:#aaa38f}
.dossier[data-variant="contact"] .insert-graphic{height:38px;border:0;gap:3px}.dossier[data-variant="contact"] .insert-graphic i{height:100%;background:linear-gradient(135deg,#32322d,#080808 55%,#59584f);border-color:#777164}
.dossier[data-variant="contact"] .annotation{box-shadow:inset 0 0 0 5px #0d0d0c}

/* 12 / library catalogue index */
.dossier[data-variant="catalogue"] .project-insert{background:repeating-linear-gradient(0deg,#171714 0 20px,#36362f 21px);border-left:4px double #66645a}
.dossier[data-variant="catalogue"] .project-insert:after{content:"II";position:absolute;right:8px;top:5px;color:#55564f;font:25px/1 "EB Garamond",serif}
.dossier[data-variant="catalogue"] .insert-graphic{border:0}.dossier[data-variant="catalogue"] .insert-graphic i{height:100%;border:0;border-left:1px solid #56574f;background:transparent}
.dossier[data-variant="catalogue"] .annotation{border-left:4px double #54544d}

/* 13 / folded correspondence insert */
.dossier[data-variant="letter"] .project-insert{background:linear-gradient(32deg,transparent 49%,#34332e 50%,transparent 51%),linear-gradient(-32deg,transparent 49%,#34332e 50%,transparent 51%),#141411;transform:rotate(.7deg)}
.dossier[data-variant="letter"] .project-insert:before{content:"";position:absolute;inset:0;border-top:22px solid rgba(202,193,171,.08);clip-path:polygon(0 0,50% 100%,100% 0)}
.dossier[data-variant="letter"] .insert-graphic i{height:2px;border:0;background:#55544c}.dossier[data-variant="letter"] .insert-graphic i:nth-child(2){flex:2}.dossier[data-variant="letter"] .insert-graphic i:nth-child(4){flex:3}
.dossier[data-variant="letter"] .annotation{transform:rotate(-.5deg);background:#131310;box-shadow:4px 5px 0 #070707}

@media(max-width:860px){.project-insert{top:266px;right:48px;width:124px;height:104px;padding:10px}.project-insert>strong{font-size:9px}.project-insert>small{font-size:5px}.insert-graphic{height:25px}}
/* Material depth and archive assembly. */
.dossier-inner{z-index:3}
.binder-holes{z-index:6}.evidence-tab{z-index:7}
.annotation,.project-insert,.archive-fragment{border-radius:2px;border-color:#4b4c46;box-shadow:0 11px 18px rgba(0,0,0,.68),3px 4px 0 #090a08,inset 0 1px 0 rgba(255,255,255,.035)}
.annotation{position:relative;z-index:2;max-width:228px;padding:12px 13px;margin:23px 0 18px;background:#20211e}
.record-intro{display:-webkit-box;max-width:310px;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:3}
.annotation p{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.project-insert{background-color:#20211e;border-width:1px;box-shadow:0 13px 20px rgba(0,0,0,.78),4px 5px 0 #080907,inset 0 1px 0 rgba(255,255,255,.04)}
.project-insert:after{content:"";position:absolute;right:-1px;bottom:-1px;width:13px;height:13px;border-right:2px solid #5b5b53;border-bottom:2px solid #5b5b53;opacity:.55}

.archive-straps{position:absolute;inset:0;z-index:2;overflow:hidden;pointer-events:none}
.archive-straps i{position:absolute;display:block;background:#030403;border:1px solid #171817;box-shadow:0 4px 8px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,.018)}
.strap-horizontal{left:-18px;right:-18px;top:62%;height:15px}
.strap-vertical{top:-14px;bottom:-14px;left:63%;width:17px}
.archive-straps .archive-thread{left:-8%;top:77%;width:118%;height:2px;border:0;background:#080908;box-shadow:0 1px 0 #23231f;transform:rotate(-4.5deg);transform-origin:center}

.archive-fragments{position:absolute;inset:0;z-index:4;pointer-events:none;font-family:"DM Mono",monospace}
.archive-fragment{position:absolute;overflow:hidden;background:#242520;border:1px solid #50514b;color:#c5c1b5}
.archive-fragment span{display:block;color:#7d7e75;font-size:6px;line-height:1.2;letter-spacing:.09em;text-transform:uppercase}
.archive-fragment strong{display:block;margin-top:8px;color:#d8d3c5;font-size:11px;line-height:1;font-weight:400;letter-spacing:.05em;text-transform:uppercase}
.archive-fragment:after{content:"";position:absolute;right:4px;top:4px;width:7px;height:7px;border-top:1px solid #686860;border-right:1px solid #686860;opacity:.55}
.fragment-a{top:215px;right:70px;width:104px;height:58px;padding:10px;transform:rotate(-.7deg)}
.fragment-b{right:72px;top:413px;width:126px;height:48px;padding:8px;display:flex;align-items:flex-end;gap:5px;background:#080908;border-color:#292a27;transform:rotate(.45deg);box-shadow:0 13px 20px #000,4px 5px 0 #11120f}
.fragment-b i{display:block;flex:1;height:var(--h,55%);background:#30312d;border:1px solid #4b4c46}.fragment-b i:nth-child(2){--h:90%}.fragment-b i:nth-child(3){--h:38%}.fragment-b i:nth-child(4){--h:72%}.fragment-b i:nth-child(5){--h:48%}
.fragment-c{left:37px;top:419px;width:101px;height:51px;padding:9px 10px;background:#292a25;transform:rotate(-.35deg)}
.fragment-c strong{margin-top:7px;font-size:12px}

.dossier[data-variant="celestial"] .fragment-b i{border-radius:50%;height:var(--h,8px);background:radial-gradient(circle,#b8ef4a 0 1px,#33402d 2px,transparent 4px)}
.dossier[data-variant="warning"] .fragment-a{transform:rotate(-2deg);border-style:dashed}.dossier[data-variant="warning"] .fragment-c{background:#c5bca7;color:#171713}.dossier[data-variant="warning"] .fragment-c span,.dossier[data-variant="warning"] .fragment-c strong{color:#24231f}
.dossier[data-variant="ledger"] .archive-fragment{background:repeating-linear-gradient(0deg,#22231f 0 15px,#3a3a34 16px)}
.dossier[data-variant="redaction"] .fragment-b i{height:5px;align-self:center;background:#000;border:0}.dossier[data-variant="redaction"] .fragment-a strong{background:#050505;color:#050505}
.dossier[data-variant="narrative"] .fragment-a{clip-path:polygon(0 0,100% 3%,96% 100%,72% 94%,49% 100%,24% 94%,0 98%);transform:rotate(1.3deg)}
.dossier[data-variant="telegram"] .fragment-a{background:#c8bfaa}.dossier[data-variant="telegram"] .fragment-a span,.dossier[data-variant="telegram"] .fragment-a strong{color:#26241f}.dossier[data-variant="telegram"] .fragment-b{transform:rotate(-1.2deg)}
.dossier[data-variant="vector"] .fragment-b{background:repeating-linear-gradient(90deg,#090a08 0 13px,#242620 14px)}.dossier[data-variant="vector"] .fragment-b i{width:2px;flex:none;transform:rotate(24deg);transform-origin:bottom}
.dossier[data-variant="terminal"] .archive-fragment{border-color:#3d4938}.dossier[data-variant="terminal"] .fragment-a strong,.dossier[data-variant="terminal"] .fragment-c strong{color:#b8ef4a}.dossier[data-variant="terminal"] .fragment-b i{background:#354d31;border:0;height:2px;align-self:center}
.dossier[data-variant="error"] .fragment-a{clip-path:polygon(0 0,86% 0,100% 22%,100% 100%,0 100%);border-style:dashed}.dossier[data-variant="error"] .fragment-c{transform:rotate(1.5deg)}
.dossier[data-variant="missing"] .fragment-a{border-style:dashed}.dossier[data-variant="missing"] .fragment-b:before{content:"404";margin:auto;color:#30312d;font:20px/1 "EB Garamond",serif}.dossier[data-variant="missing"] .fragment-b i{display:none}
.dossier[data-variant="contact"] .fragment-a{border-width:4px 4px 11px;border-color:#c7c0ae;background:#090909}.dossier[data-variant="contact"] .fragment-b i{height:100%;background:linear-gradient(135deg,#292a26,#060606 55%,#4f504a)}
.dossier[data-variant="catalogue"] .fragment-a{border-left:4px double #6a685e}.dossier[data-variant="catalogue"] .fragment-c{background:repeating-linear-gradient(0deg,#292a25 0 15px,#41413a 16px)}
.dossier[data-variant="letter"] .fragment-a{background:linear-gradient(32deg,transparent 49%,#494840 50%,transparent 51%),#24241f}.dossier[data-variant="letter"] .fragment-c{transform:rotate(1.2deg)}

@media(max-width:860px){.fragment-a{top:204px;right:51px;width:91px;height:51px;padding:8px}.fragment-b{top:391px;right:51px;width:108px;height:42px}.fragment-c{top:398px;left:25px;width:88px;height:45px}.archive-fragment strong{font-size:9px}.strap-vertical{left:65%}}
/* 2026-07-10 reference composition pass: deep black canvas + tighter desktop layout */
:root{
    --bg:#0d0d0d;
    --paper:#121210;
    --line:#292929;
    --ink:#e7e0cf;
    --muted:#77766f;
}
html,body{background:#0d0d0d!important}
body{color:var(--ink)}
.grain{opacity:.09}

@media (min-width:861px){
    .shell{
        width:1536px;
        height:961px;
        min-height:961px;
        grid-template-columns:196px 684px 656px;
        background:#0d0d0d!important;
        border-color:#292929;
    }

    .rail,
    .workspace,
    .archive-panel{
        height:961px;
        background:#0d0d0d!important;
        border-color:#292929;
    }

    .topbar{
        left:196px;
        width:1340px;
        height:54px;
        padding-inline:27px 18px;
        background:#0d0d0d!important;
        border-color:#292929;
    }

    .topbar span{letter-spacing:.08em}
    .topbar nav{gap:54px;letter-spacing:.08em}
    .grid-button{width:28px;height:28px;background:#0a0a0a;border-color:#303030}

    .brand{
        height:135px;
        padding:28px 28px;
        background:#0d0d0d;
        border-color:#292929;
    }

    .brand-mark{font-size:23px;letter-spacing:.26em;margin-bottom:13px}
    .brand span:not(.brand-mark){position:relative;display:block;padding-left:15px;font-size:10px;line-height:1.55;letter-spacing:.14em}
    .brand span:not(.brand-mark)::before{content:"";position:absolute;left:0;top:6px;width:6px;height:6px;border-radius:50%;background:var(--acid);box-shadow:0 0 10px var(--acid)}

    .rail-note{
        min-height:208px;
        padding:60px 27px 28px;
        border-bottom:1px solid #292929;
        font-size:12px;
        line-height:1.72;
    }

    .rail-nav{counter-reset:rail; margin-top:0; border-top:0}
    .rail-nav a{
        counter-increment:rail;
        height:76px;
        gap:24px;
        padding:0 28px;
        background:#0d0d0d;
        border-color:#292929;
        letter-spacing:.08em;
    }
    .rail-nav a::before{content:"0" counter(rail);width:39px;color:#dcd6c3;font-size:14px;letter-spacing:.06em}
    .rail-nav i{display:none}
    .rail-nav a.active{background:#10100f;color:#e7e0cf;box-shadow:inset 1px 0 rgba(255,255,255,.025)}
    .rail-nav a.active::before{color:#efe6cc}

    .rail-glyphs{margin:66px auto 0;color:#898981;font-size:19px;line-height:1.72}
    .signal{height:178px;padding:28px 28px;background:#111110;border-color:#292929}
    .signal small{margin-top:24px;line-height:1.55}

    .gallery-panel{padding:12px 16px 0;background:#0d0d0d!important}
    .hero-frame{
        width:652px;
        height:652px!important;
        aspect-ratio:auto!important;
        background:#050505;
        border-color:#2d2d2b;
    }
    .media-frame,.hero-art{background:#050505!important}
    .arrow{width:38px;height:38px;background:rgba(8,8,8,.78);border-color:#2f302c}
    .arrow.prev{left:13px}.arrow.next{right:13px}
    .hero-index-float{right:13px;bottom:13px;background:rgba(3,3,3,.76);border-color:#2b2c29}

    .thumbs{
        margin-top:16px;
        gap:10px;
        height:180px;
        padding-bottom:7px;
        background:#0d0d0d;
    }
    .thumb{background:#080808;border-color:#2a2a28}
    .thumb-art,
    body.compact .thumb-art{height:126px!important;background:#050505}
    .thumb-label{height:50px;background:#090909;border-color:#252624;padding:9px 10px 8px}
    .gallery-pagination{height:37px;margin-top:6px;background:#0d0d0d}

    .archive-panel{
        padding-top:54px;
        background:#0d0d0d!important;
        border-color:#292929;
    }
    .archive-head{
        height:82px;
        padding:21px 28px 12px;
        background-color:#0d0d0d!important;
        background-image:linear-gradient(#20201e 1px,transparent 1px),linear-gradient(90deg,#20201e 1px,transparent 1px);
        background-size:24px 24px;
        border-color:#292929;
    }
    .archive-head h2{font-size:25px;letter-spacing:.07em}
    .archive-head p{margin-top:8px;font-size:9px;letter-spacing:.08em}

    .filters{height:40px;background:#0d0d0d!important;border-color:#292929}
    .filters button{background:#0d0d0d;border-color:#292929;color:#8a8981;font-size:9px;letter-spacing:.07em}
    .filters button.active{background:#10100f;color:#ece7d8;box-shadow:inset 0 -1px #9eb340}

    .archive-stage{
        grid-template-columns:454px 112px;
        column-gap:40px;
        min-height:594px;
        height:594px;
        padding:36px 16px 10px 28px;
        background:#0b0b0b;
        border-bottom:1px solid #292929;
        overflow:visible;
    }
    .year-stack{height:548px;gap:12px;margin:0;align-self:start}
    .year-stack button{background:#111110;border-color:#30302e;padding:22px 20px}
    .year-stack strong{font-size:19px;margin-bottom:10px;color:#dcd5c1}
    .year-stack span{font-size:9px;margin-bottom:14px;color:#d9d2c0}
    .year-stack small{font-size:11px;color:#817f77}

    .archive-footer{
        height:171px;
        min-height:171px;
        grid-template-columns:1.03fr 1fr 152px;
        background:#0d0d0d;
        border-color:#292929;
    }
    .archive-footer>div{padding:18px;background:#0f0f0e;border-color:#292929}
    .latest-entry{background:#111110!important}
    .archive-status{background:#0b0b0b!important}
    .archive-preview{height:118px;margin:18px!important;background:#050505;border-color:#292929}
    .signal-map{width:76px;height:110px;background-color:#090909!important;border-color:#54534c!important}
    .index-meter{width:68%;height:10px}
}

@media (min-width:861px){
    .rail{min-height:961px!important;max-height:961px;overflow:hidden}
}

@media (min-width:861px){
    .signal{position:absolute;left:0;right:0;bottom:0;height:178px!important;min-height:178px;flex:0 0 178px}
}

/* Left rail crop match: no desktop note block, numbered nav starts higher like reference. */
@media (min-width:861px){
    .rail-note{display:none!important}
    .rail-nav{margin-top:30px!important;border-top:0!important}
    .rail-nav a{height:77px!important}
    .rail-nav a.active{height:56px!important}
    .rail-glyphs{margin-top:66px!important;line-height:1.76!important}
}

/* Selected left-nav cell: reference-style inset two-column module. */
@media (min-width:861px){
    .rail-nav{
        margin-top:30px!important;
        padding:0 14px 0 10px;
    }
    .rail-nav a{
        position:relative;
        height:77px!important;
        padding:0 0 0 16px!important;
        gap:20px!important;
        border-bottom:1px solid rgba(41,41,41,.62)!important;
        background:transparent!important;
        color:#77766f;
        font-size:11px;
        letter-spacing:.08em;
    }
    .rail-nav a::before{
        width:37px!important;
        font-size:14px!important;
        color:#a5a189!important;
        text-align:left;
        z-index:2;
    }
    .rail-nav a.active{
        height:56px!important;
        margin:0 0 20px 0;
        padding-left:18px!important;
        border-top:1px solid rgba(97,97,89,.46)!important;
        border-bottom:1px solid rgba(97,97,89,.46)!important;
        color:#d8d3c7!important;
        box-shadow:none!important;
    }
    .rail-nav a.active::after{
        content:"";
        position:absolute;
        z-index:1;
        left:0;
        top:0;
        bottom:0;
        width:55px;
        background:#1a1a18;
        border-right:1px solid rgba(55,55,50,.62);
        box-shadow:inset 0 0 18px rgba(255,255,255,.012);
        pointer-events:none;
    }
    .rail-nav a.active::before,
    .rail-nav a.active{position:relative;z-index:2}
    .rail-nav a.active::before{color:#e4ddb7!important}
}

/* Topbar active page state: Works highlighted like the reference crop. */
@media (min-width:861px){
    .topbar nav{
        height:54px;
        align-items:center;
        gap:64px!important;
    }
    .topbar nav a{
        position:relative;
        height:54px;
        display:inline-flex;
        align-items:center;
        color:#77766f;
        font-size:10px;
        line-height:1;
        letter-spacing:.08em;
        text-transform:uppercase;
    }
    .topbar nav a[href="#works"]{
        color:#ece6d5;
        text-shadow:0 0 10px rgba(184,239,74,.18);
    }
    .topbar nav a[href="#works"]::after{
        content:"";
        position:absolute;
        left:50%;
        bottom:-1px;
        width:38px;
        height:1px;
        transform:translateX(-50%);
        background:#9eb340;
        box-shadow:0 0 8px rgba(184,239,74,.45);
    }
    .topbar nav a[href="#works"]::before{
        content:"";
        position:absolute;
        left:50%;
        bottom:5px;
        width:3px;
        height:3px;
        border-radius:50%;
        transform:translateX(-50%);
        background:#b8ef4a;
        box-shadow:0 0 8px #b8ef4a;
        opacity:.72;
    }
}

/* Remove active topbar dot marker; keep spacing and underline unchanged. */
@media (min-width:861px){
    .topbar nav a[href="#works"]::before{display:none!important}
}

/* Mobile pass: bring the current active-state language into the responsive header. */
@media (max-width:860px){
    html,body{background:#0d0d0d!important}
    .shell,.rail,.workspace,.topbar,.gallery-panel,.archive-panel{background:#0d0d0d!important}

    .rail{
        height:72px;
        align-items:stretch;
        border-color:#292929;
        overflow:hidden;
    }
    .brand{
        width:138px;
        height:72px;
        padding:16px 14px;
        border-color:#292929;
        background:#0d0d0d;
    }
    .brand-mark{
        font-size:15px;
        letter-spacing:.21em;
        line-height:1;
    }

    .rail-nav{
        flex:1;
        min-width:0;
        margin:0!important;
        padding:8px 9px 8px 0;
        display:grid;
        grid-template-columns:repeat(3,minmax(0,1fr));
        gap:6px;
        border:0!important;
        counter-reset:rail;
    }
    .rail-nav a{
        counter-increment:rail;
        position:relative;
        height:56px!important;
        min-width:0;
        padding:0 8px!important;
        display:flex;
        align-items:center;
        justify-content:center;
        gap:8px!important;
        border:1px solid transparent!important;
        background:transparent!important;
        color:#77766f;
        font-size:9px;
        letter-spacing:.07em;
        text-align:center;
        overflow:hidden;
    }
    .rail-nav a::before{
        content:"0" counter(rail);
        width:auto!important;
        color:#8e8b7c!important;
        font-size:11px!important;
        letter-spacing:.04em;
        flex:0 0 auto;
        z-index:2;
    }
    .rail-nav i{display:none!important}
    .rail-nav a.active{
        color:#e6dfcf!important;
        border-color:rgba(97,97,89,.46)!important;
        background:#10100f!important;
        box-shadow:none!important;
    }
    .rail-nav a.active::before{color:#e4ddb7!important}
    .rail-nav a.active::after{
        content:"";
        position:absolute;
        left:0;
        top:0;
        bottom:0;
        width:38%;
        max-width:46px;
        background:#1a1a18;
        border-right:1px solid rgba(55,55,50,.62);
        z-index:0;
        pointer-events:none;
    }
    .rail-nav a.active{z-index:2;isolation:isolate}
    .rail-nav a.active::before{position:relative;z-index:3}

    .topbar nav a[href="#works"]{
        color:#ece6d5;
        text-shadow:0 0 10px rgba(184,239,74,.14);
    }
    .topbar nav a[href="#works"]::after{
        content:"";
        position:absolute;
        left:50%;
        bottom:-1px;
        width:34px;
        height:1px;
        transform:translateX(-50%);
        background:#9eb340;
        box-shadow:0 0 8px rgba(184,239,74,.35);
    }
    .topbar nav a[href="#works"]::before{display:none!important}
}

@media (max-width:560px){
    .brand{width:118px;padding-inline:12px}
    .brand-mark{font-size:13px;letter-spacing:.18em}
    .rail-nav{gap:4px;padding-right:6px}
    .rail-nav a{font-size:8px;gap:5px!important;padding-inline:5px!important}
    .rail-nav a::before{font-size:10px!important}
}

/* Mobile archive tone sync: use the updated #0d0d0d canvas instead of jet black. */
@media (max-width:860px){
    .archive-panel,
    .archive-head,
    .filters,
    .archive-stage,
    .archive-footer{
        background-color:#0d0d0d!important;
    }
    .archive-head{
        background-image:linear-gradient(#20201e 1px,transparent 1px),linear-gradient(90deg,#20201e 1px,transparent 1px)!important;
        background-size:24px 24px;
    }
    .filters button{
        background:#0d0d0d!important;
    }
    .filters button.active{
        background:#10100f!important;
    }
    .archive-footer>div{
        background:#10100f!important;
    }
    .latest-entry{
        background:#111110!important;
    }
    .archive-status{
        background:#10100f!important;
    }
}

/* Mobile year stack tone sync: lift year buttons out of the old near-black fill. */
@media (max-width:860px){
    .year-stack button{
        background:#111110!important;
        border-color:#30302e!important;
        box-shadow:inset 0 1px rgba(255,255,255,.025);
    }
    .year-stack button:hover{
        background:#141412!important;
    }
}

/* Connected outer website frame, matching the faint closed border in the reference. */
@media (min-width:861px){
    .shell{
        border:1px solid rgba(80,80,74,.34)!important;
        box-shadow:inset 0 0 0 1px rgba(0,0,0,.38);
    }
    .shell::before{
        content:"";
        position:absolute;
        inset:0;
        z-index:60;
        pointer-events:none;
        border:1px solid rgba(230,226,214,.035);
    }
}

/* 03 — About / Artist dossier spread */
.about-panel{
    background:#0d0d0d;
    color:var(--ink);
}
.about-dossier{position:relative;overflow:hidden;background:#080808;border:1px solid rgba(80,80,74,.34);box-shadow:0 30px 70px rgba(0,0,0,.7),inset 0 0 80px rgba(255,255,255,.018)}
.about-dossier::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px);background-size:28px 28px;opacity:.48}
.about-spine{position:absolute;top:0;bottom:0;left:47.5%;width:18px;z-index:4;background:linear-gradient(90deg,rgba(0,0,0,.95),rgba(255,255,255,.035),rgba(0,0,0,.9));box-shadow:0 0 28px rgba(0,0,0,.95)}
.about-sheet{position:relative;min-height:100%;background:linear-gradient(145deg,#141411,#0d0d0c 64%,#080808);border:1px solid rgba(230,226,214,.055);overflow:hidden}
.about-sheet::after{content:"";position:absolute;inset:18px;border:1px solid rgba(230,226,214,.035);pointer-events:none}
.about-kicker{position:absolute;left:34px;top:30px;z-index:5;text-transform:uppercase;letter-spacing:.1em;color:#aaa599;font-size:10px}.about-kicker span{display:inline-grid;place-items:center;width:42px;height:30px;margin-right:10px;border:1px solid rgba(230,226,214,.18);background:#151512;color:#e7decb}.about-kicker b{font-weight:400;color:#d7cfbf}.about-kicker small{display:block;margin:12px 0 0 55px;color:#77766f}
.portrait-mount{position:absolute;left:62px;top:122px;width:365px;height:468px;z-index:3;padding:12px;background:#11110f;border:1px solid rgba(230,226,214,.16);box-shadow:0 28px 36px rgba(0,0,0,.62),0 8px 18px rgba(0,0,0,.45);transform:rotate(-1.2deg)}
.portrait-mount img{display:block;width:100%;height:100%;object-fit:cover;object-position:center top;filter:saturate(.78) contrast(1.04) brightness(.86)}
.portrait-mount::after{content:"PORTRAIT / PRIMARY RECORD";position:absolute;left:18px;bottom:18px;padding:7px 10px;background:rgba(0,0,0,.72);border:1px solid rgba(230,226,214,.12);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:#d8d0bd}.tape{position:absolute;z-index:5;background:rgba(176,169,145,.48);box-shadow:0 2px 9px rgba(0,0,0,.45);mix-blend-mode:screen}.tape-top{left:122px;top:-16px;width:120px;height:28px;transform:rotate(1deg)}.tape-bottom{right:35px;bottom:-13px;width:92px;height:23px;transform:rotate(-3deg)}
.about-title-card{position:absolute;right:42px;top:92px;width:280px;z-index:6;padding:26px 24px 24px;background:rgba(18,18,16,.94);border:1px solid rgba(230,226,214,.12);box-shadow:0 22px 30px rgba(0,0,0,.58)}
.about-title-card small,.about-bio-block b,.about-method-ledger b,.about-process-map b,.about-fragment-stack b,.about-contact-slip b,.about-hand-note b,.about-id-card b{display:block;margin-bottom:12px;color:#a9a398;text-transform:uppercase;letter-spacing:.09em;font-weight:400;font-size:10px}.about-title-card h2{margin:0 0 17px;font:500 44px/.92 "EB Garamond",serif;color:#efe7d6}.about-title-card p{margin:0;color:#9d988d;line-height:1.58;font-size:11px;text-transform:none}
.about-id-card{position:absolute;right:74px;top:390px;width:250px;z-index:5;padding:18px;background:#181713;border:1px solid rgba(230,226,214,.1);box-shadow:0 19px 26px rgba(0,0,0,.5);transform:rotate(1deg)}.about-id-card span,.about-id-card strong{display:block;font-weight:400}.about-id-card span{margin-top:10px;color:#77736a;text-transform:uppercase;letter-spacing:.08em;font-size:9px}.about-id-card strong{padding-bottom:8px;border-bottom:1px dashed rgba(230,226,214,.12);color:#d8d0be;font-size:11px}
.about-hand-note{position:absolute;left:74px;bottom:58px;width:274px;z-index:4;padding:19px 20px;background:#5f5847;color:#14120e;border:1px solid rgba(238,229,202,.13);box-shadow:0 20px 26px rgba(0,0,0,.45);transform:rotate(1.5deg)}.about-hand-note b{color:#191610}.about-hand-note p{margin:0;font:italic 18px/1.2 "EB Garamond",serif;color:#171410}.about-stamp{position:absolute;right:320px;bottom:98px;width:86px;height:86px;border:1px solid #5d594f;border-radius:50%;display:grid;place-items:center;text-align:center;color:#615d53;z-index:4;transform:rotate(-18deg);letter-spacing:.08em}
.about-bio-block{position:absolute;left:54px;top:54px;width:338px;z-index:4;padding:27px 28px;background:rgba(17,17,15,.92);border:1px solid rgba(230,226,214,.1);box-shadow:0 20px 30px rgba(0,0,0,.55)}.about-bio-block p{margin:0 0 15px;font:16px/1.45 "EB Garamond",serif;color:#d2cab9}.about-method-ledger{position:absolute;left:60px;bottom:58px;width:286px;z-index:4;padding:20px 22px;background:#12120f;border:1px solid rgba(230,226,214,.12);box-shadow:0 19px 28px rgba(0,0,0,.52)}.about-method-ledger p{margin:0;padding:8px 0;border-bottom:1px solid rgba(230,226,214,.07);color:#89857b;text-transform:uppercase;letter-spacing:.07em;font-size:10px}
.about-process-map{position:absolute;right:70px;top:80px;width:278px;height:250px;z-index:4;padding:24px;background:rgba(35,33,28,.72);border:1px solid rgba(230,226,214,.12);box-shadow:0 24px 30px rgba(0,0,0,.55);transform:rotate(-1deg);background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:18px 18px}.about-process-map::after{content:"";position:absolute;left:64px;top:82px;width:136px;height:84px;border:1px solid rgba(230,226,214,.34);border-radius:50%;transform:rotate(18deg)}.about-process-map i{position:absolute;width:8px;height:8px;border-radius:50%;background:#d8cfb8;box-shadow:0 0 10px rgba(230,226,214,.5)}.about-process-map i:nth-of-type(1){left:84px;top:110px}.about-process-map i:nth-of-type(2){left:182px;top:93px}.about-process-map i:nth-of-type(3){left:206px;top:160px}.about-process-map i:nth-of-type(4){left:112px;top:178px}
.about-fragment-stack{position:absolute;right:66px;top:370px;width:285px;z-index:5;display:grid;gap:12px}.about-fragment-stack div{padding:17px 18px;background:#201f1a;border:1px solid rgba(230,226,214,.1);box-shadow:0 16px 24px rgba(0,0,0,.45)}.about-fragment-stack p{margin:0;color:#aaa397;line-height:1.45;font-size:11px}.about-marginalia{position:absolute;left:430px;top:355px;z-index:5;width:140px;display:grid;gap:9px;color:#7d796f;text-transform:uppercase;letter-spacing:.08em;font-size:9px}.about-marginalia span{padding-top:7px;border-top:1px solid rgba(230,226,214,.12)}
.about-contact-slip{position:absolute;right:76px;bottom:61px;width:240px;z-index:5;padding:18px 19px;background:#6b634f;color:#15130f;border:1px solid rgba(238,229,202,.16);box-shadow:0 22px 28px rgba(0,0,0,.48);transform:rotate(-1deg)}.about-contact-slip b{color:#171511}.about-contact-slip p{margin:0 0 12px;line-height:1.42}.about-contact-slip a{display:inline-block;color:#16130f;border-bottom:1px solid rgba(20,18,14,.5)}.about-side-tab{position:absolute;right:-5px;top:328px;width:44px;height:150px;background:#68604e;color:#11100d;writing-mode:vertical-rl;display:grid;place-items:center;letter-spacing:.12em;z-index:6;box-shadow:0 16px 22px rgba(0,0,0,.48)}
@media(min-width:861px){.about-panel{position:absolute;z-index:45;left:196px;top:54px;width:1340px;height:907px;padding:18px 20px 20px;opacity:0;pointer-events:none;transform:translateY(8px);transition:opacity .25s ease,transform .25s ease;border-left:1px solid #292929}.about-panel:target{opacity:1;pointer-events:auto;transform:none}.about-dossier{width:100%;height:100%;display:grid;grid-template-columns:47.5% 52.5%}.about-sheet-left{border-right:0}.about-sheet-right{border-left:0}.about-panel:target ~ *{pointer-events:none}}
@media(max-width:860px){.about-panel{display:block;padding:18px 14px 28px;border-top:1px solid var(--line)}.about-dossier{display:block;min-height:0}.about-spine{display:none}.about-sheet{min-height:840px;margin-bottom:12px}.portrait-mount{left:24px;right:24px;top:100px;width:auto;height:390px}.about-title-card{left:28px;right:28px;top:520px;width:auto}.about-id-card,.about-hand-note,.about-bio-block,.about-method-ledger,.about-process-map,.about-fragment-stack,.about-contact-slip{position:relative;left:auto;right:auto;top:auto;bottom:auto;width:auto;margin:24px;transform:none}.about-kicker{left:24px}.about-stamp,.about-marginalia,.about-side-tab{display:none}.about-sheet-right{min-height:760px;padding-top:1px}}

/* Active navigation state when the About dossier is open */
@media(min-width:861px){
    .shell:has(.about-panel:target) .rail-nav a.active{
        background:#0d0d0d!important;
        color:var(--muted)!important;
    }
    .shell:has(.about-panel:target) .rail-nav a.active::before{color:#dcd6c3!important}
    .shell:has(.about-panel:target) .rail-nav a[href="#about"]{
        background:#10100f!important;
        color:#e7e0cf!important;
        box-shadow:inset 1px 0 rgba(255,255,255,.025);
    }
    .shell:has(.about-panel:target) .rail-nav a[href="#about"]::before{color:#efe6cc!important}
    .shell:has(.about-panel:target) .topbar nav a[href="#works"]{
        color:var(--muted)!important;
        text-shadow:none!important;
    }
    .shell:has(.about-panel:target) .topbar nav a[href="#works"]::after{display:none!important}
    .shell:has(.about-panel:target) .topbar nav a[href="#about"]{
        color:#ece6d5!important;
        text-shadow:0 0 10px rgba(184,239,74,.14);
    }
    .shell:has(.about-panel:target) .topbar nav a[href="#about"]::after{
        content:"";
        position:absolute;
        left:12px;
        right:12px;
        bottom:0;
        height:1px;
        background:#b0b0a5;
        box-shadow:0 0 7px rgba(230,226,214,.18);
    }
}

/* Standalone about.html layout */
@media(min-width:861px){
    .about-page-shell.shell{
        grid-template-columns:196px 1340px!important;
    }
    .about-page-shell .about-workspace{
        position:relative;
        width:1340px;
        height:961px;
        min-height:0;
        overflow:hidden;
        background:#0d0d0d!important;
        border-right:0;
    }
    .about-page-shell .topbar nav a[href="./index.html#works"]{
        color:var(--muted)!important;
        text-shadow:none!important;
    }
    .about-page-shell .topbar nav a[href="./index.html#works"]::before,
    .about-page-shell .topbar nav a[href="./index.html#works"]::after{display:none!important}
    .about-page-shell .topbar nav a.active{position:relative;color:#ece6d5!important}
    .about-page-shell .topbar nav a.active::after{
        content:"";position:absolute;left:12px;right:12px;bottom:0;height:1px;background:#b0b0a5;box-shadow:0 0 7px rgba(230,226,214,.18)
    }
    .about-page-shell .about-panel{
        position:absolute;
        z-index:20;
        left:0;
        top:54px;
        width:1340px;
        height:907px;
        padding:18px 20px 20px;
        opacity:1!important;
        pointer-events:auto!important;
        transform:none!important;
        border-left:1px solid #292929;
    }
}
@media(max-width:860px){
    .about-page-shell .about-panel{display:block;opacity:1;pointer-events:auto;transform:none}
}

/* About original refinement: clear portrait + denser balanced dossier */
@media(min-width:861px){
    .about-page-shell .about-dossier{
        grid-template-columns:49% 51%!important;
    }
    .about-page-shell .portrait-mount{
        left:54px!important;
        top:112px!important;
        width:392px!important;
        height:520px!important;
        z-index:8!important;
        transform:rotate(-.8deg)!important;
    }
    .about-page-shell .portrait-mount img{
        object-position:center top!important;
        filter:saturate(.82) contrast(1.04) brightness(.88)!important;
    }
    .about-page-shell .about-title-card{
        right:34px!important;
        top:82px!important;
        width:210px!important;
        padding:20px 19px!important;
        z-index:5!important;
    }
    .about-page-shell .about-title-card h2{
        font-size:34px!important;
        line-height:.94!important;
        margin-bottom:13px!important;
    }
    .about-page-shell .about-title-card p{
        font-size:10px!important;
        line-height:1.45!important;
    }
    .about-page-shell .about-id-card{
        right:34px!important;
        top:350px!important;
        width:210px!important;
        padding:15px 16px!important;
        z-index:5!important;
        transform:rotate(.6deg)!important;
    }
    .about-page-shell .about-hand-note{
        left:58px!important;
        bottom:44px!important;
        width:250px!important;
        z-index:7!important;
    }
    .about-page-shell .about-stamp{
        right:218px!important;
        bottom:70px!important;
        z-index:6!important;
    }
    .about-photo-ledger{
        position:absolute;
        left:466px;
        top:596px;
        width:150px;
        z-index:6;
        padding:14px 15px;
        background:#141411;
        border:1px solid rgba(230,226,214,.1);
        box-shadow:0 18px 24px rgba(0,0,0,.45);
        color:#8d897f;
        text-transform:uppercase;
        letter-spacing:.08em;
        font-size:9px;
    }
    .about-photo-ledger b,
    .about-mini-index span,
    .about-note-grid b{
        display:block;
        color:#c8c0af;
        font-weight:400;
        text-transform:uppercase;
        letter-spacing:.08em;
        font-size:9px;
    }
    .about-photo-ledger p{margin:8px 0 0;line-height:1.55}
    .about-mini-index{
        position:absolute;
        left:340px;
        bottom:46px;
        z-index:6;
        width:140px;
        display:grid;
        gap:8px;
    }
    .about-mini-index span{
        color:#7e7a70;
        padding-top:6px;
        border-top:1px solid rgba(230,226,214,.11);
    }
    .about-page-shell .about-bio-block{
        left:42px!important;
        top:44px!important;
        width:322px!important;
        padding:23px 25px!important;
    }
    .about-page-shell .about-bio-block p{
        font-size:15px!important;
        line-height:1.38!important;
        margin-bottom:12px!important;
    }
    .about-page-shell .about-process-map{
        right:52px!important;
        top:58px!important;
        width:258px!important;
        height:230px!important;
    }
    .about-page-shell .about-fragment-stack{
        right:52px!important;
        top:318px!important;
        width:258px!important;
        gap:10px!important;
    }
    .about-page-shell .about-fragment-stack div{
        padding:14px 16px!important;
    }
    .about-page-shell .about-method-ledger{
        left:42px!important;
        bottom:44px!important;
        width:286px!important;
        padding:18px 20px!important;
    }
    .about-page-shell .about-marginalia{
        left:370px!important;
        top:322px!important;
        width:122px!important;
    }
    .about-note-grid{
        position:absolute;
        right:52px;
        bottom:206px;
        width:258px;
        z-index:5;
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:10px;
    }
    .about-note-grid div{
        min-height:104px;
        padding:14px;
        background:#161511;
        border:1px solid rgba(230,226,214,.1);
        box-shadow:0 16px 22px rgba(0,0,0,.42);
    }
    .about-note-grid p{
        margin:9px 0 0;
        color:#918c82;
        line-height:1.45;
        font-size:10px;
    }
    .about-page-shell .about-contact-slip{
        right:52px!important;
        bottom:44px!important;
        width:258px!important;
        padding:16px 17px!important;
    }
    .about-page-shell .about-side-tab{
        top:292px!important;
    }
}
@media(max-width:860px){
    .about-photo-ledger,.about-mini-index,.about-note-grid{
        position:relative;
        left:auto;right:auto;top:auto;bottom:auto;
        width:auto;
        margin:24px;
    }
    .about-note-grid{display:block}
    .about-note-grid div{margin-bottom:12px}
}

/* About density pass 02: smaller portrait, visible title, denser right page */
@media(min-width:861px){
    .about-page-shell .portrait-mount{
        left:62px!important;
        top:132px!important;
        width:326px!important;
        height:438px!important;
        z-index:8!important;
    }
    .about-page-shell .portrait-mount::after{
        font-size:8px!important;
        left:14px!important;
        bottom:14px!important;
    }
    .about-page-shell .about-title-card{
        right:30px!important;
        top:76px!important;
        width:250px!important;
        padding:20px 20px 18px!important;
    }
    .about-page-shell .about-title-card h2{
        font-size:32px!important;
        line-height:1!important;
        margin-bottom:12px!important;
        overflow:visible!important;
    }
    .about-page-shell .about-title-card small{
        margin-bottom:9px!important;
    }
    .about-page-shell .about-id-card{
        right:30px!important;
        top:318px!important;
        width:250px!important;
    }
    .about-page-shell .about-hand-note{
        left:60px!important;
        bottom:64px!important;
        width:230px!important;
        padding:17px 18px!important;
    }
    .about-page-shell .about-hand-note p{
        font-size:16px!important;
    }
    .about-photo-ledger{
        left:404px!important;
        top:536px!important;
        width:192px!important;
    }
    .about-mini-index{
        left:318px!important;
        bottom:62px!important;
        width:168px!important;
    }
    .about-page-shell .about-stamp{
        right:184px!important;
        bottom:76px!important;
        width:74px!important;
        height:74px!important;
        font-size:10px!important;
    }
    .about-page-shell .about-bio-block{
        left:36px!important;
        top:36px!important;
        width:312px!important;
        padding:21px 23px!important;
    }
    .about-page-shell .about-bio-block p{
        font-size:14px!important;
        line-height:1.34!important;
        margin-bottom:10px!important;
    }
    .about-page-shell .about-process-map{
        right:42px!important;
        top:42px!important;
        width:238px!important;
        height:206px!important;
        padding:20px!important;
    }
    .about-page-shell .about-process-map::after{
        left:54px!important;
        top:74px!important;
        width:116px!important;
        height:70px!important;
    }
    .about-page-shell .about-fragment-stack{
        right:42px!important;
        top:270px!important;
        width:238px!important;
    }
    .about-page-shell .about-fragment-stack div{
        padding:12px 14px!important;
    }
    .about-page-shell .about-fragment-stack p{
        font-size:10px!important;
        line-height:1.38!important;
    }
    .about-page-shell .about-marginalia{
        left:360px!important;
        top:278px!important;
        width:130px!important;
        gap:7px!important;
    }
    .about-page-shell .about-method-ledger{
        left:36px!important;
        bottom:38px!important;
        width:272px!important;
        padding:16px 18px!important;
    }
    .about-page-shell .about-method-ledger p{
        padding:6px 0!important;
        font-size:9px!important;
    }
    .about-note-grid{
        right:42px!important;
        bottom:226px!important;
        width:238px!important;
        gap:8px!important;
    }
    .about-note-grid div{
        min-height:88px!important;
        padding:12px!important;
    }
    .about-research-slip,
    .about-source-card,
    .about-field-strip{
        position:absolute;
        z-index:5;
        background:#151410;
        border:1px solid rgba(230,226,214,.1);
        box-shadow:0 16px 24px rgba(0,0,0,.44);
        color:#918c82;
    }
    .about-research-slip b,
    .about-source-card b,
    .about-field-strip b{
        display:block;
        margin-bottom:10px;
        color:#c8c0af;
        font-weight:400;
        text-transform:uppercase;
        letter-spacing:.08em;
        font-size:9px;
    }
    .about-research-slip{
        left:356px;
        top:438px;
        width:162px;
        padding:14px 15px;
        transform:rotate(-1deg);
    }
    .about-research-slip p{
        margin:0;
        line-height:1.55;
        text-transform:uppercase;
        letter-spacing:.06em;
        font-size:9px;
    }
    .about-source-card{
        left:356px;
        bottom:202px;
        width:162px;
        padding:13px 14px;
    }
    .about-source-card span{
        display:block;
        padding:5px 0;
        border-bottom:1px solid rgba(230,226,214,.07);
        text-transform:uppercase;
        letter-spacing:.06em;
        font-size:9px;
    }
    .about-field-strip{
        left:332px;
        right:320px;
        bottom:38px;
        min-height:106px;
        padding:15px 17px;
        background:#11110f;
    }
    .about-field-strip p{
        margin:0;
        color:#9d978c;
        line-height:1.48;
        font-size:10px;
    }
    .about-page-shell .about-contact-slip{
        right:42px!important;
        bottom:38px!important;
        width:238px!important;
        padding:14px 15px!important;
    }
    .about-page-shell .about-contact-slip p{
        font-size:10px!important;
    }
}
@media(max-width:860px){
    .about-research-slip,.about-source-card,.about-field-strip{
        position:relative;
        left:auto;right:auto;top:auto;bottom:auto;
        width:auto;
        margin:24px;
        transform:none;
    }
}

/* About desktop collision fix: give the portrait and note cards separate lanes. */
@media(min-width:861px){
    .about-page-shell .about-sheet-left{
        isolation:isolate;
    }

    .about-page-shell .portrait-mount{
        left:44px!important;
        top:128px!important;
        width:282px!important;
        height:398px!important;
        z-index:7!important;
    }

    .about-page-shell .about-title-card{
        right:32px!important;
        top:82px!important;
        width:226px!important;
        z-index:8!important;
    }

    .about-page-shell .about-title-card h2{
        font-size:30px!important;
        line-height:1.02!important;
    }

    .about-page-shell .about-id-card{
        right:32px!important;
        top:320px!important;
        width:226px!important;
        z-index:6!important;
    }

    .about-photo-ledger{
        left:365px!important;
        top:572px!important;
        width:188px!important;
        z-index:7!important;
    }

    .about-page-shell .about-hand-note{
        left:48px!important;
        bottom:64px!important;
        width:232px!important;
        z-index:7!important;
    }

    .about-mini-index{
        left:314px!important;
        bottom:68px!important;
        width:156px!important;
        z-index:7!important;
    }

    .about-page-shell .about-stamp{
        right:70px!important;
        bottom:72px!important;
        z-index:5!important;
    }
}

/* About desktop collision fix: rebuild the right page into clear lanes. */
@media(min-width:861px){
    .about-page-shell .about-sheet-right{
        isolation:isolate;
    }

    .about-page-shell .about-bio-block{
        left:36px!important;
        top:36px!important;
        width:304px!important;
        padding:20px 22px!important;
        z-index:7!important;
    }

    .about-page-shell .about-bio-block p{
        font-size:13px!important;
        line-height:1.35!important;
        margin-bottom:9px!important;
    }

    .about-page-shell .about-process-map{
        right:38px!important;
        top:42px!important;
        width:232px!important;
        height:204px!important;
        z-index:6!important;
    }

    .about-page-shell .about-fragment-stack{
        right:38px!important;
        top:286px!important;
        width:232px!important;
        gap:10px!important;
        z-index:7!important;
    }

    .about-page-shell .about-fragment-stack div{
        padding:12px 14px!important;
    }

    .about-page-shell .about-fragment-stack p{
        font-size:10px!important;
        line-height:1.35!important;
    }

    .about-page-shell .about-marginalia{
        left:42px!important;
        top:322px!important;
        width:260px!important;
        grid-template-columns:1fr 1fr!important;
        gap:8px 14px!important;
        z-index:5!important;
    }

    .about-note-grid{
        right:38px!important;
        bottom:198px!important;
        width:232px!important;
        display:grid!important;
        grid-template-columns:1fr 1fr!important;
        gap:8px!important;
        z-index:6!important;
    }

    .about-note-grid div{
        min-height:92px!important;
        padding:11px!important;
    }

    .about-note-grid p{
        font-size:9px!important;
        line-height:1.35!important;
    }

    .about-research-slip{
        left:38px!important;
        top:468px!important;
        width:150px!important;
        padding:13px 14px!important;
        z-index:7!important;
        transform:rotate(-.6deg)!important;
    }

    .about-source-card{
        left:210px!important;
        top:468px!important;
        bottom:auto!important;
        width:142px!important;
        padding:12px 13px!important;
        z-index:7!important;
    }

    .about-source-card span{
        padding:4px 0!important;
        font-size:8px!important;
    }

    .about-field-strip{
        left:38px!important;
        right:auto!important;
        bottom:198px!important;
        width:304px!important;
        min-height:96px!important;
        padding:13px 15px!important;
        z-index:5!important;
    }

    .about-field-strip p{
        font-size:9px!important;
        line-height:1.42!important;
    }

    .about-page-shell .about-method-ledger{
        left:36px!important;
        bottom:38px!important;
        width:304px!important;
        padding:15px 18px!important;
        z-index:6!important;
    }

    .about-page-shell .about-contact-slip{
        right:38px!important;
        bottom:38px!important;
        width:232px!important;
        padding:14px 15px!important;
        z-index:8!important;
    }

    .about-page-shell .about-side-tab{
        top:302px!important;
        z-index:9!important;
    }
}
#journalPosition{cursor:default;opacity:1}

/* Tactile feedback for the original divided journal strip. */
.filters button:not(:disabled){position:relative;transition:background-color .16s,color .16s,box-shadow .16s;cursor:pointer}
.filters button:not(:disabled):hover{background:#20211b!important;color:#eee6cf!important;box-shadow:inset 0 -2px #a2b45d}
.filters button:not(:disabled):focus-visible{outline:1px solid #c2b991;outline-offset:-4px;color:#eee6cf!important;background:#20211b!important}
.filters button:not(:disabled):active{background:#343627!important;box-shadow:inset 0 2px 7px #000b,inset 0 -2px #c8d58c;transform:translateY(1px)}
.filters button.nav-feedback{animation:journal-nav-confirm .65s ease-out}
@keyframes journal-nav-confirm{0%,25%{background:#444932;color:#f1e9d2;box-shadow:inset 0 0 0 1px #b6c77b,inset 0 -3px #b6c77b}100%{background:#10100f;color:#c7c2b3;box-shadow:inset 0 -1px #807e58}}
#journalPosition.nav-count-feedback{animation:journal-count-confirm .65s ease-out}
@keyframes journal-count-confirm{0%,30%{color:#ecedc9;background:#26291e}100%{color:#77766f;background:#0d0d0d}}
@media(prefers-reduced-motion:reduce){.filters button:not(:disabled){transition:none}.filters button:not(:disabled):active{transform:none}.filters button.nav-feedback,#journalPosition.nav-count-feedback{animation:none;background:#292c20!important;color:#eee6cf!important}}