/* ============================================
   bvb.dev — Bureau of Verifiable Bibliographies
   Bauhaus-archival hybrid, terracotta-warm
   ============================================ */

:root {
    --terracotta:    #b8553a;
    --burnt-sienna:  #7a3520;
    --cream:         #f0e6d2;
    --ink-charcoal:  #1f1a17;
    --ochre:         #c9923a;
    --bone:          #fff8e7;
    --indigo:        #3b4a5a;
    --recto-type:    #f0e6d2;

    --col-recto:    41.4%;
    --col-verso:    58.6%;
    --gutter:        0px;

    --easing:        cubic-bezier(0.22, 0.61, 0.36, 1);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    width: 100%;
    background: var(--cream);
    color: var(--ink-charcoal);
    font-family: "Fraunces", Georgia, serif;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

body {
    font-feature-settings: "ss01", "ss02", "kern", "liga";
    font-variation-settings: "opsz" 14, "SOFT" 50;
}

em { font-style: italic; }

/* --------------------------------------------
   The Bureau — main grid container
   -------------------------------------------- */
.bureau {
    position: relative;
    width: 100%;
    background: var(--cream);
}

/* --------------------------------------------
   The Spine — the single 1px vertical hairline
   -------------------------------------------- */
.spine {
    position: fixed;
    left: var(--col-recto);
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--burnt-sienna);
    transform: scaleY(0);
    transform-origin: top;
    animation: spine-draw 1.6s var(--easing) 0.2s forwards;
    z-index: 50;
    pointer-events: none;
}

@keyframes spine-draw {
    from { transform: scaleY(0); }
    to   { transform: scaleY(1); }
}

/* --------------------------------------------
   Reading Underline — librarian's finger
   -------------------------------------------- */
.reading-underline {
    position: absolute;
    height: 1px;
    background: var(--terracotta);
    pointer-events: none;
    width: 0;
    top: 0;
    left: 0;
    opacity: 0;
    transition:
        width 0.4s var(--easing),
        top 0.4s var(--easing),
        left 0.4s var(--easing),
        opacity 0.4s var(--easing);
    z-index: 5;
    will-change: transform, width, top;
}

/* --------------------------------------------
   Section grid: 41.4% / 58.6% split
   -------------------------------------------- */
.section {
    display: grid;
    grid-template-columns: var(--col-recto) var(--col-verso);
    width: 100%;
    min-height: 100vh;
    position: relative;
}

.section--plate    { min-height: 140vh; }
.section--drift    { min-height: 180vh; }

.recto {
    background: var(--terracotta);
    color: var(--recto-type);
    position: relative;
    overflow: hidden;
    padding: 6vh 4vw 6vh 4vw;
}

.verso {
    background: var(--cream);
    color: var(--ink-charcoal);
    position: relative;
    overflow: hidden;
    padding: 6vh 5vw 6vh 5vw;
}

/* --------------------------------------------
   Shared shape primitives
   -------------------------------------------- */
.shape {
    position: absolute;
    display: block;
    will-change: transform;
}

.shape--xl    { width: 320px; height: 320px; }
.shape--lg    { width: 240px; height: 240px; }
.shape--md    { width: 180px; height: 180px; }
.shape--sm    { width: 80px;  height: 80px;  }
.shape--xs    { width: 40px;  height: 40px;  }

/* shape--circle, --triangle, --square */
.shape--circle {
    border-radius: 50%;
}

.shape--square {
    /* default rectangle */
}

.shape--triangle {
    width: 0; height: 0;
    background: transparent !important;
    border-left:   90px solid transparent;
    border-right:  90px solid transparent;
    border-bottom: 156px solid currentColor;
}

.shape--triangle.shape--xl {
    border-left:   160px solid transparent;
    border-right:  160px solid transparent;
    border-bottom: 277px solid currentColor;
}
.shape--triangle.shape--lg {
    border-left:   120px solid transparent;
    border-right:  120px solid transparent;
    border-bottom: 208px solid currentColor;
}
.shape--triangle.shape--md {
    border-left:   90px solid transparent;
    border-right:  90px solid transparent;
    border-bottom: 156px solid currentColor;
}
.shape--triangle.shape--sm {
    border-left:   40px solid transparent;
    border-right:  40px solid transparent;
    border-bottom: 70px solid currentColor;
}
.shape--triangle.shape--xs {
    border-left:   20px solid transparent;
    border-right:  20px solid transparent;
    border-bottom: 35px solid currentColor;
}

/* shape colour variants */
.shape--terracotta { background: var(--terracotta); color: var(--terracotta); }
.shape--charcoal   { background: var(--ink-charcoal); color: var(--ink-charcoal); }
.shape--cream      { background: var(--cream);     color: var(--cream); }
.shape--ochre      { background: var(--ochre);     color: var(--ochre); }
.shape--clay       { background: var(--burnt-sienna); color: var(--burnt-sienna); }

/* drift animations - prime-number durations */
.drift-a { animation: drift-circle 47s ease-in-out infinite; top: 18%; left: 8%; }
.drift-b { animation: drift-triangle 31s ease-in-out infinite; top: 50%; left: 56%; }
.drift-c { animation: drift-square 53s ease-in-out infinite; top: 8%; left: 38%; opacity: 0.92; }

@keyframes drift-circle {
    0%   { transform: translate(0, 0) rotate(0deg); }
    25%  { transform: translate(28px, -36px) rotate(4deg); }
    50%  { transform: translate(-18px, 22px) rotate(-3deg); }
    75%  { transform: translate(-30px, -18px) rotate(6deg); }
    100% { transform: translate(0, 0) rotate(0deg); }
}
@keyframes drift-triangle {
    0%   { transform: translate(0, 0) rotate(-8deg); }
    33%  { transform: translate(-22px, 28px) rotate(-2deg); }
    66%  { transform: translate(34px, -16px) rotate(-12deg); }
    100% { transform: translate(0, 0) rotate(-8deg); }
}
@keyframes drift-square {
    0%   { transform: translate(0, 0) rotate(0deg); }
    20%  { transform: translate(-32px, 20px) rotate(-3deg); }
    50%  { transform: translate(18px, 36px) rotate(2deg); }
    80%  { transform: translate(28px, -22px) rotate(5deg); }
    100% { transform: translate(0, 0) rotate(0deg); }
}

/* §03 drift field — many shapes on prime cycles */
.drift-23 { animation: drift-23 23s ease-in-out infinite; }
.drift-31 { animation: drift-31 31s ease-in-out infinite; }
.drift-47 { animation: drift-47 47s ease-in-out infinite; }
.drift-53 { animation: drift-53 53s ease-in-out infinite; }
.drift-89 { animation: drift-89 89s ease-in-out infinite; }

@keyframes drift-23 {
    0%   { transform: translate(0, 0); }
    50%  { transform: translate(-18px, 26px); }
    100% { transform: translate(0, 0); }
}
@keyframes drift-31 {
    0%   { transform: translate(0, 0); }
    50%  { transform: translate(22px, -34px); }
    100% { transform: translate(0, 0); }
}
@keyframes drift-47 {
    0%   { transform: translate(0, 0); }
    50%  { transform: translate(-30px, -16px); }
    100% { transform: translate(0, 0); }
}
@keyframes drift-53 {
    0%   { transform: translate(0, 0); }
    50%  { transform: translate(28px, 22px); }
    100% { transform: translate(0, 0); }
}
@keyframes drift-89 {
    0%   { transform: translate(0, 0); }
    50%  { transform: translate(-36px, -28px); }
    100% { transform: translate(0, 0); }
}

/* shadow under hero shapes — bleached indigo memory */
.shape--terracotta.drift-a,
.shape--cream.drift-c,
.shape--charcoal.drift-b {
    filter: drop-shadow(2px 4px 0 rgba(59, 74, 90, 0.18));
}

/* --------------------------------------------
   §00 — Frontispiece
   -------------------------------------------- */
.recto--frontispiece {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    padding: 6vh 0 6vh 5vw;
}

.floating-composition {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.hero-title {
    font-family: "JetBrains Mono", "Courier New", monospace;
    font-weight: 700;
    font-size: clamp(4rem, 12vw, 9rem);
    line-height: 0.92;
    letter-spacing: -0.04em;
    color: var(--cream);
    text-rendering: geometricPrecision;
    position: relative;
    z-index: 2;
    margin-left: 4vw;
    mix-blend-mode: normal;
}

.recto-legend {
    font-family: "JetBrains Mono", monospace;
    font-size: 0.74rem;
    letter-spacing: 0.18em;
    color: var(--cream);
    margin-left: 4vw;
    margin-top: 1.2rem;
    opacity: 0.75;
    position: relative;
    z-index: 2;
}

.verso--frontispiece {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 6vh 6vw 6vh 6vw;
}

.frontispiece-inner {
    max-width: 38rem;
}

.frontispiece-statement {
    font-family: "Fraunces", Georgia, serif;
    font-variation-settings: "opsz" 36, "SOFT" 50, "wght" 400;
    font-size: clamp(1.3rem, 1.9vw, 1.85rem);
    line-height: 1.5;
    color: var(--ink-charcoal);
    margin-bottom: 2.5rem;
}

.section-legend {
    font-family: "JetBrains Mono", monospace;
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--burnt-sienna);
    display: inline-block;
}

.section-legend--top {
    margin-bottom: 3rem;
}

.rule {
    border: none;
    border-top: 1px solid var(--burnt-sienna);
    width: 100%;
    margin: 1.4rem 0;
    opacity: 0.6;
}

.rule--hair {
    border-top-width: 1px;
    margin: 1rem 0;
}

/* --------------------------------------------
   §01 — Provenance
   -------------------------------------------- */
.recto--provenance {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding-left: 6vw;
    gap: 2.4rem;
}

.numeral-01 {
    width: 220px;
    height: auto;
    max-width: 60%;
}

.recto-title {
    font-family: "JetBrains Mono", monospace;
    font-weight: 600;
    font-size: clamp(1.6rem, 2.4vw, 2.4rem);
    line-height: 1.18;
    letter-spacing: -0.02em;
    color: var(--cream);
    max-width: 22ch;
}

.recto-meta {
    font-family: "JetBrains Mono", monospace;
    font-size: 0.78rem;
    letter-spacing: 0.14em;
    color: var(--cream);
    opacity: 0.7;
    text-transform: uppercase;
}

.verso--provenance,
.verso--drift {
    padding: 6vh 7vw 6vh 6vw;
}

.verso-inner {
    max-width: 36rem;
    position: relative;
}

.body {
    font-family: "Fraunces", Georgia, serif;
    font-variation-settings: "opsz" 14, "SOFT" 50, "wght" 400;
    font-size: 1.06rem;
    line-height: 1.78;
    color: var(--ink-charcoal);
    margin-bottom: 1.6rem;
    position: relative;
}

.body--first,
.body--essay-first {
    margin-top: 0;
}

.dropcap {
    font-family: "Fraunces", Georgia, serif;
    font-variation-settings: "opsz" 144, "SOFT" 50, "wght" 500;
    float: left;
    font-size: clamp(4.5rem, 8vw, 6.5rem);
    line-height: 0.86;
    color: var(--burnt-sienna);
    padding-right: 0.6rem;
    padding-top: 0.4rem;
    margin-top: 0.1rem;
}

sup.fn {
    font-family: "JetBrains Mono", monospace;
    font-size: 0.66em;
    color: var(--burnt-sienna);
    text-decoration: underline;
    text-decoration-thickness: 0.5px;
    text-underline-offset: 2px;
    margin-left: 0.05em;
    vertical-align: super;
}

.margin-mark {
    position: absolute;
    right: -2.4rem;
    top: 0.6em;
    width: 6px;
    height: 6px;
    background: var(--terracotta);
    pointer-events: none;
}

.margin-mark::before {
    content: "";
    position: absolute;
    right: 100%;
    top: 50%;
    width: 1.6rem;
    height: 1px;
    background: var(--burnt-sienna);
    opacity: 0.45;
}

.margin-mark::after {
    content: attr(data-mark);
    position: absolute;
    left: 12px;
    top: -3px;
    font-family: "JetBrains Mono", monospace;
    font-size: 0.62rem;
    color: var(--burnt-sienna);
}

.rule--footnote {
    border-top: 0.5px solid var(--burnt-sienna);
    width: 8rem;
    margin: 2.4rem 0 1rem;
    opacity: 0.7;
}

.footnotes {
    list-style: none;
    padding: 0;
    margin: 0;
    counter-reset: fn;
}

.footnotes li {
    font-family: "JetBrains Mono", monospace;
    font-size: 0.74rem;
    line-height: 1.55;
    color: var(--ink-charcoal);
    margin-bottom: 0.5rem;
    padding-left: 1.6rem;
    position: relative;
}

.fn-num {
    position: absolute;
    left: 0;
    color: var(--burnt-sienna);
}

/* --------------------------------------------
   §02 — Plate
   -------------------------------------------- */
.recto--plate {
    display: flex;
    align-items: center;
    justify-content: center;
}

.vertical-legend {
    font-family: "JetBrains Mono", monospace;
    font-size: 0.86rem;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--cream);
    transform: rotate(-90deg);
    transform-origin: center;
    white-space: nowrap;
}

.verso--plate {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 8vh 6vw 8vh 6vw;
    position: relative;
}

.plate-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 1px;
    background: var(--burnt-sienna);
    border: 1px solid var(--burnt-sienna);
    aspect-ratio: 1 / 1;
    max-width: 640px;
    margin: 0 auto;
}

.cell {
    background: var(--cream);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.4rem 0.6rem 1rem;
    position: relative;
    cursor: pointer;
    transition: background 360ms var(--easing);
    overflow: hidden;
}

.cell:hover {
    background: var(--bone);
}

.mark {
    width: 60%;
    aspect-ratio: 1 / 1;
    transition: transform 360ms var(--easing);
}

.mark__a, .mark__b, .mark__c {
    transition:
        transform 480ms var(--easing),
        opacity 360ms var(--easing);
    transform-origin: 50% 50%;
    transform-box: fill-box;
}

/* On hover: Bauhaus transformations */
.cell[data-kind="journal"]:hover .mark__a {
    transform: scale(0.55) translateX(40%);
}
.cell[data-kind="journal"]:hover .mark::after {
    /* paired half — added inline via :hover ? Use a second el via JS */
}

.cell[data-kind="book"]:hover .mark__a {
    transform: rotate(45deg);
}
.cell[data-kind="thesis"]:hover .mark__a {
    transform: rotate(180deg);
}
.cell[data-kind="cross-journal-book"]:hover .mark__a {
    transform: translate(-22%, 0);
}
.cell[data-kind="cross-journal-book"]:hover .mark__b {
    transform: translate(22%, 0);
}
.cell[data-kind="halfcircle"]:hover .mark__a {
    transform: rotate(180deg);
}
.cell[data-kind="quarterarc"]:hover .mark__a {
    transform: rotate(-90deg);
}
.cell[data-kind="cross-thesis-journal"]:hover .mark__a {
    transform: scale(1.15);
}
.cell[data-kind="cross-thesis-journal"]:hover .mark__b {
    transform: rotate(180deg);
}
.cell[data-kind="ringbook"]:hover .mark__b {
    transform: scale(1.6);
}
.cell[data-kind="composite-three"]:hover .mark__a {
    transform: translate(-30%, 30%);
}
.cell[data-kind="composite-three"]:hover .mark__b {
    transform: translate(30%, 0);
}
.cell[data-kind="composite-three"]:hover .mark__c {
    transform: translate(0, -30%);
}

.cell-label {
    font-family: "JetBrains Mono", monospace;
    font-size: 0.7rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--burnt-sienna);
    margin-top: 1rem;
}

.citation-card {
    position: absolute;
    background: var(--cream);
    border: 1px solid var(--terracotta);
    padding: 1.2rem 1.4rem;
    max-width: 22rem;
    pointer-events: none;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 240ms var(--easing), transform 240ms var(--easing);
    z-index: 30;
    font-family: "Fraunces", Georgia, serif;
    color: var(--ink-charcoal);
    box-shadow: 4px 6px 0 rgba(122, 53, 32, 0.08);
}

.citation-card.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.citation-card__legend {
    font-family: "JetBrains Mono", monospace;
    font-size: 0.66rem;
    letter-spacing: 0.18em;
    color: var(--terracotta);
    display: block;
    margin-bottom: 0.4rem;
    text-transform: uppercase;
}

.citation-card__text {
    font-size: 0.92rem;
    line-height: 1.55;
    margin: 0;
}

/* --------------------------------------------
   §03 — Drift
   -------------------------------------------- */
.recto--drift {
    background: #8e3d27;
    /* dimmer terracotta — "the left pane goes dark" */
    overflow: hidden;
}

.drift-field {
    position: absolute;
    inset: 0;
}

/* place the many drift shapes pseudo-randomly */
.drift-field .shape:nth-child(1)  { top:  6%; left: 12%; }
.drift-field .shape:nth-child(2)  { top: 14%; left: 60%; }
.drift-field .shape:nth-child(3)  { top: 22%; left: 32%; }
.drift-field .shape:nth-child(4)  { top: 30%; left: 76%; }
.drift-field .shape:nth-child(5)  { top: 38%; left: 18%; }
.drift-field .shape:nth-child(6)  { top: 46%; left: 50%; }
.drift-field .shape:nth-child(7)  { top: 54%; left: 8%;  }
.drift-field .shape:nth-child(8)  { top: 62%; left: 68%; }
.drift-field .shape:nth-child(9)  { top: 70%; left: 28%; }
.drift-field .shape:nth-child(10) { top: 78%; left: 56%; }
.drift-field .shape:nth-child(11) { top: 86%; left: 14%; }
.drift-field .shape:nth-child(12) { top: 92%; left: 72%; }

.verso--drift {
    padding-top: 8vh;
    padding-bottom: 8vh;
}

.verso-inner--essay {
    max-width: 36rem;
}

/* --------------------------------------------
   §04 — Colophon (split inverts: cream left, terracotta right)
   -------------------------------------------- */
.recto--colophon {
    background: var(--cream);
    color: var(--ink-charcoal);
    padding: 8vh 5vw 8vh 6vw;
    display: flex;
    align-items: flex-start;
}

.colophon-notes {
    max-width: 28rem;
}

.colophon-heading {
    font-family: "JetBrains Mono", monospace;
    font-size: 0.86rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--burnt-sienna);
    margin: 2rem 0 1rem;
}

.colophon-line {
    font-family: "Fraunces", Georgia, serif;
    font-size: 0.96rem;
    line-height: 1.7;
    color: var(--ink-charcoal);
    margin-bottom: 0.4rem;
}

.rule--colophon {
    border-top: 0.5px solid var(--burnt-sienna);
    width: 4rem;
    margin: 2rem 0 0.6rem;
    opacity: 0.55;
}

.colophon-coda {
    font-family: "JetBrains Mono", monospace;
    font-size: 0.78rem;
    line-height: 1.7;
    color: var(--burnt-sienna);
    margin-top: 2rem;
    letter-spacing: 0.04em;
}

.verso--colophon {
    background: var(--terracotta);
    color: var(--cream);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8vh 5vw;
    position: relative;
    overflow: hidden;
}

.masthead {
    font-family: "JetBrains Mono", monospace;
    font-weight: 700;
    font-size: clamp(4rem, 9vw, 8rem);
    line-height: 0.94;
    letter-spacing: -0.04em;
    color: var(--cream);
    z-index: 2;
    position: relative;
}

.masthead-line {
    display: block;
}

.drift-colophon {
    top: 14%;
    right: 8%;
    opacity: 0.32;
    animation: drift-circle 89s ease-in-out infinite;
}

/* --------------------------------------------
   Reduced motion
   -------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .shape, .drift-a, .drift-b, .drift-c,
    .drift-23, .drift-31, .drift-47, .drift-53, .drift-89,
    .drift-colophon, .spine, .reading-underline {
        animation: none !important;
        transition: none !important;
    }
    .spine { transform: scaleY(1) !important; }
}

/* --------------------------------------------
   Large screens — prevent excessive line length
   -------------------------------------------- */
@media (min-width: 1600px) {
    .verso-inner, .verso-inner--essay {
        max-width: 42rem;
    }
}