/* =========================================================================
   ethica.dev — A geometric ethics for developers
   Cream paper, iron-gall ink, rubric red. No pure black, no pure white.
   Six colours. Strict 28px baseline grid. Two-column manuscript spread.
   ========================================================================= */

:root {
    /* Six-colour palette — non-negotiable. */
    --paper:        #F5EBD3;
    --paper-edge:   #EFE5CE;
    --page-shadow:  #E5D8B8;
    --iron-gall:    #1B2C4A;
    --rubric:       #A03128;
    --sepia:        #8A6B3A;
    --hairline:     #B6A98A;
    --graphite:     #544A3B;

    --baseline: 28px;
    --col-body: 62ch;
    --col-marg: 18ch;
    --gutter: 8px;

    --t-slow: 1100ms cubic-bezier(0.22, 1, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
}

html {
    background: var(--page-shadow);
}

body {
    font-family: 'EB Garamond', Garamond, 'Times New Roman', serif;
    font-size: 16.5px;
    line-height: 1.62;
    color: var(--iron-gall);
    background:
        radial-gradient(ellipse at 22% 12%, rgba(229, 216, 184, 0.45) 0%, rgba(245, 235, 211, 0) 55%),
        radial-gradient(ellipse at 82% 88%, rgba(229, 216, 184, 0.4) 0%, rgba(245, 235, 211, 0) 60%),
        var(--paper);
    font-feature-settings: "onum" on, "smcp" off, "liga" on, "kern" on;
    hyphens: auto;
    -webkit-hyphens: auto;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Subtle paper grain — rendered with a non-image SVG noise layer. */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.34 0 0 0 0 0.29 0 0 0 0 0.23 0 0 0 0.07 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    opacity: 0.55;
    mix-blend-mode: multiply;
    z-index: 1;
}

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

.codex {
    position: relative;
    z-index: 2;
    max-width: calc(var(--col-marg) + var(--gutter) + var(--col-body) + 6ch);
    margin: 0 auto;
    padding: 96px 4ch 160px;
    display: grid;
    grid-template-columns: [marg] var(--col-marg) [gutter] var(--gutter) [body] var(--col-body);
    column-gap: 0;
    row-gap: 0;
    justify-content: center;
}

/* Frontispiece spans both columns, centred. */
.frontispiece {
    grid-column: marg / -1;
    text-align: center;
    margin: 6vh 0 calc(var(--baseline) * 4);
    padding: 0 4ch;
}

.imprint {
    font-family: 'IM Fell English', 'EB Garamond', serif;
    font-style: italic;
    color: var(--sepia);
    letter-spacing: 0.16em;
    font-size: 0.86rem;
    margin: 0 0 calc(var(--baseline) * 1.5);
    text-transform: lowercase;
}

.title {
    font-family: 'Cormorant Garamond', 'EB Garamond', serif;
    font-weight: 500;
    font-size: clamp(2.6rem, 6vw, 4.6rem);
    letter-spacing: 0.18em;
    margin: 0;
    color: var(--iron-gall);
    line-height: 1.05;
}

.title-sep {
    color: var(--rubric);
    margin: 0 0.3em;
    font-weight: 600;
}

.subtitle {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: clamp(1.05rem, 1.6vw, 1.35rem);
    color: var(--graphite);
    margin: calc(var(--baseline) * 1) 0 calc(var(--baseline) * 0.5);
    line-height: 1.4;
}

.byline {
    font-family: 'Crimson Pro', 'EB Garamond', serif;
    font-style: italic;
    color: var(--graphite);
    font-size: 0.95rem;
    margin: 0 0 calc(var(--baseline) * 1.5);
    letter-spacing: 0.02em;
}

.frontispiece-fleuron {
    font-family: 'IM Fell English', serif;
    color: var(--rubric);
    font-size: 1.8rem;
    margin-top: calc(var(--baseline) * 1);
    letter-spacing: 0.2em;
}

/* ----------- Parts ----------- */

.part {
    grid-column: marg / -1;
    display: grid;
    grid-template-columns: subgrid;
    margin-top: calc(var(--baseline) * 3);
}

.part-header {
    grid-column: marg / -1;
    text-align: center;
    margin-bottom: calc(var(--baseline) * 2);
    padding: 0 2ch;
}

.part-eyebrow {
    font-family: 'IM Fell English', serif;
    color: var(--rubric);
    letter-spacing: 0.28em;
    font-size: 0.86rem;
    margin: 0 0 calc(var(--baseline) * 0.5);
    text-transform: uppercase;
}

.et-finis {
    color: var(--graphite);
    font-style: italic;
    font-size: 0.9em;
    letter-spacing: 0.06em;
    text-transform: lowercase;
}

.part-title {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 500;
    font-style: italic;
    font-size: clamp(1.6rem, 3.2vw, 2.6rem);
    letter-spacing: 0.02em;
    color: var(--iron-gall);
    margin: 0 0 calc(var(--baseline) * 0.5);
    line-height: 1.18;
}

.part-blurb {
    font-family: 'Crimson Pro', serif;
    font-style: italic;
    color: var(--graphite);
    font-size: 1rem;
    max-width: 56ch;
    margin: 0 auto;
    line-height: 1.5;
}

/* ----------- Proposition (the manuscript spread) ----------- */

.proposition {
    grid-column: marg / -1;
    display: grid;
    grid-template-columns: subgrid;
    border-top: 1px dashed var(--hairline);
    padding-top: calc(var(--baseline) * 1.5);
    padding-bottom: calc(var(--baseline) * 1.5);
    position: relative;
}

/* The hairline rule that separates margin from body. */
.proposition::before {
    content: "";
    grid-column: gutter;
    grid-row: 1 / span 99;
    width: 0;
    border-left: 0.5px dashed var(--hairline);
    margin-left: 4px;
    align-self: stretch;
    justify-self: center;
}

.proposition.axiom {
    background:
        linear-gradient(180deg, rgba(239, 229, 206, 0) 0%, rgba(239, 229, 206, 0.4) 50%, rgba(239, 229, 206, 0) 100%);
}

/* ----- Marginalia (left column) ----- */
.marginalia {
    grid-column: marg;
    font-family: 'Crimson Pro', 'EB Garamond', serif;
    font-style: italic;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--graphite);
    text-align: right;
    padding-right: 1.2ch;
    padding-top: calc(var(--baseline) * 0.5);
    word-spacing: 0.02em;
}

.marginalia p {
    margin: 0 0 calc(var(--baseline) * 0.5);
}

.marginalia em {
    color: var(--sepia);
    font-style: italic;
}

/* Manicule — rubric-red pointing hand. */
.manicule {
    width: 56px;
    height: 35px;
    color: var(--rubric);
    margin-bottom: calc(var(--baseline) * 0.4);
    margin-left: auto;
    display: block;
    opacity: 0.85;
    filter: url(#irongall-soft);
    transition: opacity 6s ease-in-out;
}

.manicule.is-pulsed {
    opacity: 1;
}

/* Woodcut illustrations in margin. */
.woodcut {
    width: 92px;
    height: auto;
    color: var(--iron-gall);
    margin: calc(var(--baseline) * 0.6) 0 calc(var(--baseline) * 0.6) auto;
    display: block;
    filter: url(#irongall);
    opacity: 0.78;
}

.woodcut text {
    fill: var(--iron-gall);
}

/* ----- Body column ----- */
.propositio,
.demonstratio,
.scholium,
.manuscript-code {
    grid-column: body;
}

.propositio {
    position: relative;
    margin: 0 0 calc(var(--baseline) * 0.75);
    padding-left: 0;
}

.numeral {
    font-family: 'IM Fell English', serif;
    color: var(--rubric);
    font-size: 0.95rem;
    font-style: italic;
    margin-right: 0.4em;
    letter-spacing: 0.05em;
    display: inline-block;
}

.propositio h3 {
    display: inline;
    font-family: 'Cormorant Garamond', serif;
    font-weight: 600;
    font-style: italic;
    font-size: clamp(1.18rem, 1.7vw, 1.42rem);
    line-height: 1.3;
    color: var(--iron-gall);
    margin: 0;
    letter-spacing: 0.005em;
    position: relative;
}

.propositio h3 strong {
    font-weight: 600;
    font-style: normal;
    color: var(--iron-gall);
    background: linear-gradient(transparent 70%, rgba(160, 49, 40, 0.10) 70%);
    padding: 0 0.1em;
}

.propositio h3 em {
    font-style: italic;
}

.dash {
    color: var(--rubric);
    font-style: normal;
    margin: 0 0.2em;
}

/* The brief draw-on underline highlight when target of cross-ref. */
.propositio.is-cited h3::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -4px;
    height: 1px;
    background: var(--iron-gall);
    transform-origin: left center;
    transform: scaleX(0);
    animation: draw-underline 700ms cubic-bezier(0.22, 1, 0.36, 1) forwards,
               fade-underline 1.2s ease-out 1.2s forwards;
}

@keyframes draw-underline {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

@keyframes fade-underline {
    from { opacity: 1; }
    to   { opacity: 0; }
}

/* Demonstratio body. */
.demonstratio {
    margin: 0;
    text-align: justify;
    text-justify: inter-character;
    hyphens: auto;
}

.demonstratio p {
    margin: 0 0 calc(var(--baseline) * 0.7);
    line-height: 1.62;
}

.dem-label {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-weight: 500;
    font-variant: small-caps;
    text-transform: lowercase;
    letter-spacing: 0.18em;
    color: var(--rubric);
    font-size: 0.86rem;
    margin: 0 0 calc(var(--baseline) * 0.3) !important;
    text-align: left;
}

.demonstratio code,
.scholium code {
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    font-size: 0.92em;
    color: var(--iron-gall);
    background: rgba(229, 216, 184, 0.55);
    padding: 0.05em 0.35em;
    border-radius: 1px;
    font-feature-settings: "calt" 0;
}

.demonstratio em,
.scholium em {
    font-style: italic;
    color: var(--graphite);
}

/* Scholium — slightly indented and in graphite. */
.scholium {
    margin: calc(var(--baseline) * 0.75) 0 0;
    padding: calc(var(--baseline) * 0.4) 0 calc(var(--baseline) * 0.4) 2ch;
    border-left: 1px solid var(--hairline);
    color: var(--graphite);
    font-family: 'EB Garamond', serif;
    font-size: 15.5px;
    line-height: 1.6;
}

.scholium p {
    margin: 0 0 calc(var(--baseline) * 0.5);
}

.scholium .dem-label {
    color: var(--sepia);
}

/* Drop-cap on the very first definition. */
.dropcap {
    font-family: 'Cormorant Garamond', serif;
    color: var(--rubric);
    font-weight: 600;
    float: left;
    font-size: 4.6rem;
    line-height: 0.85;
    padding: 0.2rem 0.4rem 0 0;
    margin: 0.2rem 0.1rem 0 0;
    font-style: normal;
    text-shadow: 0 0 0.4px var(--rubric);
}

/* Q.E.D. mark — typewritten in via JS. */
.qed {
    font-family: 'IM Fell English', serif;
    color: var(--rubric);
    font-style: italic;
    margin-left: 0.6em;
    letter-spacing: 0.18em;
    font-size: 0.9em;
    white-space: nowrap;
    border: 1.2px solid var(--rubric);
    padding: 0.05em 0.5em;
    display: inline-block;
    transform: rotate(-1.3deg);
    background: rgba(160, 49, 40, 0.04);
    filter: url(#irongall-soft);
    min-width: 1ch;
}

.qed.is-typing::after {
    content: "▌";
    color: var(--rubric);
    margin-left: 0.05em;
    animation: cursor-blink 0.6s steps(1, end) infinite;
}

@keyframes cursor-blink {
    50% { opacity: 0; }
}

/* Manuscript code block. */
.manuscript-code {
    position: relative;
    margin: calc(var(--baseline) * 0.75) 0;
    padding: calc(var(--baseline) * 0.6) 1.2em calc(var(--baseline) * 0.6);
    background: var(--paper-edge);
    border: 1px solid var(--iron-gall);
    border-radius: 1px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.86em;
    line-height: 1.6;
    color: var(--iron-gall);
    white-space: pre-wrap;
    font-feature-settings: "calt" 0;
    overflow: hidden;
}

.manuscript-code::before {
    content: attr(data-marker);
    position: absolute;
    top: 4px;
    right: 8px;
    font-family: 'IM Fell English', serif;
    font-style: italic;
    color: var(--sepia);
    font-size: 0.78rem;
    letter-spacing: 0.08em;
}

.manuscript-code code {
    background: none;
    padding: 0;
}

/* ----- Fleuron ----- */
.fleuron {
    grid-column: marg / -1;
    text-align: center;
    color: var(--sepia);
    font-family: 'IM Fell English', serif;
    font-size: 1.6rem;
    letter-spacing: 0.2em;
    margin: calc(var(--baseline) * 2.5) 0;
    user-select: none;
}

.fleuron.final {
    color: var(--rubric);
    font-size: 2rem;
    margin: calc(var(--baseline) * 2.5) 0 calc(var(--baseline) * 1);
}

/* ----- Colophon ----- */
.colophon {
    grid-column: marg / -1;
    text-align: center;
    margin-top: calc(var(--baseline) * 2);
}

.finis {
    font-family: 'IM Fell English', serif;
    font-style: italic;
    color: var(--graphite);
    font-size: 1.05rem;
    letter-spacing: 0.06em;
    margin: 0;
}

.finis em {
    font-style: italic;
    color: var(--sepia);
}

/* ----- Reading ribbon (fixed right) ----- */
.ribbon {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: 56px;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    pointer-events: none;
    padding: 28px 0;
}

.ribbon ol {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    border-left: 1px solid var(--hairline);
    padding-left: 14px;
    pointer-events: auto;
}

.ribbon li {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    pointer-events: auto;
}

.ribbon .tick {
    display: block;
    width: 12px;
    height: 12px;
    border: 1px solid var(--sepia);
    background: transparent;
    border-radius: 1px;
    transform: rotate(45deg);
    transition: background 800ms ease, border-color 800ms ease;
}

.ribbon li.is-active .tick,
.ribbon li.is-passed .tick {
    background: var(--iron-gall);
    border-color: var(--iron-gall);
}

.ribbon .tick-label {
    font-family: 'IM Fell English', serif;
    font-style: italic;
    color: var(--sepia);
    font-size: 0.78rem;
    letter-spacing: 0.05em;
    transition: color 600ms ease;
}

.ribbon li.is-active .tick-label,
.ribbon li.is-passed .tick-label {
    color: var(--iron-gall);
}

.folio {
    position: absolute;
    bottom: 18px;
    right: 12px;
    font-family: 'IM Fell English', serif;
    font-style: italic;
    color: var(--sepia);
    font-size: 0.95rem;
    letter-spacing: 0.04em;
    background: var(--paper);
    padding: 2px 6px;
    border: 0.5px solid var(--hairline);
}

/* ----- Page-break ornaments injected by JS ----- */
.page-breaks {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.page-break {
    position: absolute;
    left: 0;
    right: 0;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 6ch;
    pointer-events: none;
    color: var(--sepia);
    font-family: 'IM Fell English', serif;
    font-style: italic;
    font-size: 0.78rem;
    letter-spacing: 0.04em;
}

.page-break::before {
    content: "";
    flex: 1;
    height: 1px;
    margin-right: 1.5ch;
    background:
        linear-gradient(90deg,
            transparent 0%,
            var(--hairline) 12%,
            var(--hairline) 88%,
            transparent 100%);
    box-shadow: 0 1px 0 rgba(229, 216, 184, 0.7);
    opacity: 0.55;
}

.page-break .vinette {
    color: var(--sepia);
    margin-right: 1ch;
    letter-spacing: 0.18em;
}

/* ----- Cross-reference style ----- */
a.xref {
    color: var(--iron-gall);
    text-decoration: none;
    border-bottom: 1px dotted var(--sepia);
    cursor: pointer;
    transition: color 240ms ease, border-color 240ms ease;
}

a.xref:hover {
    color: var(--rubric);
    border-bottom-color: var(--rubric);
}

/* Tooltip "crib" on numeral hover. */
.numeral {
    cursor: help;
    position: relative;
}

.numeral::after {
    content: attr(data-crib);
    position: absolute;
    left: 0;
    top: -2.2em;
    font-family: 'Crimson Pro', serif;
    font-style: italic;
    color: var(--graphite);
    background: var(--paper);
    padding: 2px 6px;
    border: 0.5px dashed var(--hairline);
    font-size: 0.72rem;
    white-space: nowrap;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 220ms ease, transform 220ms ease;
    pointer-events: none;
    letter-spacing: 0.02em;
    z-index: 5;
}

.numeral:hover::after,
.numeral:focus::after {
    opacity: 1;
    transform: translateY(0);
}

/* ----- Path-draw animation (geometric figures) ----- */
.woodcut.is-drawing path,
.woodcut.is-drawing polygon,
.woodcut.is-drawing circle {
    stroke-dasharray: var(--len, 600);
    stroke-dashoffset: var(--len, 600);
    animation: stroke-draw 1.4s cubic-bezier(0.6, 0.05, 0.2, 1) forwards;
}

.woodcut.is-drawing path  { animation-delay: 0ms; }
.woodcut.is-drawing polygon { animation-delay: 80ms; }
.woodcut.is-drawing circle { animation-delay: 160ms; }
.woodcut.is-drawing text {
    opacity: 0;
    animation: fade-in 600ms ease-out 1.0s forwards;
}

@keyframes stroke-draw {
    to { stroke-dashoffset: 0; }
}

@keyframes fade-in {
    to { opacity: 1; }
}

/* =========================================================================
   Responsive — below 720px the marginalia reflow as italicised indented
   blocks above each demonstration, never as a hamburger or drawer.
   ========================================================================= */

@media (max-width: 900px) {
    .ribbon { width: 36px; padding: 14px 0; }
    .ribbon ol { gap: 10px; padding-left: 8px; }
    .ribbon .tick { width: 9px; height: 9px; }
    .ribbon .tick-label { font-size: 0.68rem; }
    .folio { right: 6px; bottom: 10px; font-size: 0.82rem; }
}

@media (max-width: 720px) {
    .codex {
        grid-template-columns: 1fr;
        padding: 56px 6vw 100px;
    }

    .frontispiece, .part, .part-header,
    .proposition, .fleuron, .colophon {
        grid-column: 1 / -1;
    }

    .proposition {
        grid-template-columns: 1fr;
        display: block;
        padding-top: calc(var(--baseline) * 1);
    }

    .proposition::before { display: none; }

    .marginalia {
        text-align: left;
        padding: 0 0 0 1.2ch;
        margin: 0 0 calc(var(--baseline) * 0.8);
        border-left: 1px dashed var(--hairline);
        font-size: 13px;
    }

    .marginalia .manicule,
    .marginalia .woodcut {
        margin-left: 0;
    }

    .propositio h3 {
        font-size: 1.12rem;
    }

    .ribbon { display: none; }
}

@media (max-width: 460px) {
    body { font-size: 15.5px; }
    .title { letter-spacing: 0.12em; }
    .dropcap { font-size: 3.6rem; }
}