/* ============================================
   DOUBLESTANDARD.XYZ - Institutional Decay
   ============================================ */

/* --- Custom Properties (Progressive Decay) --- */
:root {
    --paper-white: #F4F1EB;
    --authority-black: #0D0D0D;
    --body-ink: #1A1A1A;
    --bureaucratic-gray: #7A7A72;
    --red-ink: #9B2335;
    --stamp-blue: #1B3A5C;
    --violation-amber: #C47B2B;
    --redaction-black: #2C2C2C;
    --faded-correction: #D4C5A9;
    --contradiction: #6B2D3E;

    --grid-skew: 0deg;
    --grain-opacity: 0.04;
    --content-max-width: 680px;
    --rule-thickness: 1px;
    --rule-rotation: 0deg;
}

/* --- Reset & Base --- */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: "Source Sans 3", sans-serif;
    font-size: 1.05rem;
    line-height: 1.72;
    color: var(--body-ink);
    background: var(--paper-white);
    overflow-x: hidden;
    position: relative;
}

/* --- Grain Overlay --- */
#grain-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9998;
    opacity: var(--grain-opacity);
    background-image: url("data:image/png;base64,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");
    background-repeat: repeat;
    background-size: 200px 200px;
}

/* --- Grid Overlay --- */
#grid-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    opacity: 0.06;
    background: repeating-linear-gradient(
        to right,
        var(--bureaucratic-gray) 0px,
        var(--bureaucratic-gray) 1px,
        transparent 1px,
        transparent calc(100% / 12)
    );
    transform: skewX(var(--grid-skew));
}

/* --- Violation Counter --- */
#violation-counter {
    position: fixed;
    top: 1.5rem;
    right: 2rem;
    font-family: "Courier Prime", monospace;
    font-size: 0.85rem;
    color: var(--contradiction);
    z-index: 9999;
    background: var(--paper-white);
    padding: 0.4rem 0.8rem;
    border: 1px solid var(--bureaucratic-gray);
    letter-spacing: 0.05em;
    transition: color 0.2s ease;
}

.counter-label {
    color: var(--bureaucratic-gray);
}

#violation-count {
    color: var(--body-ink);
    font-weight: 700;
    transition: color 0.2s ease;
}

#violation-count.flash {
    color: var(--violation-amber);
}

/* --- Sections --- */
.section {
    position: relative;
    padding: 6rem 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 2;
}

.section-preamble {
    min-height: 100vh;
    display: flex;
    justify-content: center;
}

.section-standard-a {
    min-height: 80vh;
}

.section-standard-b {
    min-height: 80vh;
}

.section-deviation-log {
    min-height: 100vh;
    background: var(--redaction-black);
    color: var(--paper-white);
}

.section-redaction {
    min-height: 90vh;
}

.section-committee {
    min-height: 80vh;
}

.section-appendix {
    min-height: 100vh;
}

.section-inner {
    max-width: var(--content-max-width);
    width: 100%;
    position: relative;
}

/* Standard A inner: exact measurements */
.standard-a-inner {
    padding: 2rem;
    max-width: var(--content-max-width);
}

.standard-a-inner p {
    margin-bottom: 1.5rem;
    font-size: 1.05rem;
}

/* Standard B inner: slightly off measurements */
.standard-b-inner {
    padding: 2.05rem;
    max-width: var(--content-max-width);
}

.standard-b-inner p {
    margin-bottom: 1.45rem;
    font-size: 1.06rem;
}

/* --- Typography --- */
.document-title {
    font-family: "DM Serif Display", serif;
    font-size: 3.8rem;
    color: var(--authority-black);
    letter-spacing: 0.08em;
    text-align: center;
    margin-bottom: 0.5rem;
}

.title-underline {
    width: 120%;
    max-width: 600px;
    height: 1px;
    background: var(--authority-black);
    margin: 0 auto 3rem;
    position: relative;
    left: -10%;
}

.section-number {
    font-family: "DM Serif Display", serif;
    font-size: 1.4rem;
    color: var(--bureaucratic-gray);
    margin-bottom: 0.5rem;
    letter-spacing: 0.05em;
}

.section-number-light {
    color: var(--bureaucratic-gray);
}

.section-heading {
    font-family: "DM Serif Display", serif;
    font-size: clamp(2.2rem, 4.5vw, 3.8rem);
    color: var(--authority-black);
    letter-spacing: 0.01em;
    margin-bottom: 1.5rem;
    line-height: 1.15;
}

.section-heading-light {
    color: var(--paper-white);
}

.section-subtitle {
    font-family: "Courier Prime", monospace;
    font-size: 0.9rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    margin-bottom: 2rem;
    color: var(--bureaucratic-gray);
}

p {
    margin-bottom: 1.2rem;
}

code {
    font-family: "Courier Prime", monospace;
    font-size: 0.88rem;
    color: var(--contradiction);
    background: rgba(0, 0, 0, 0.04);
    padding: 0.1em 0.35em;
    border-radius: 2px;
}

/* --- Drop Caps --- */
.drop-cap {
    font-family: "DM Serif Display", serif;
    font-size: 4rem;
    float: left;
    line-height: 0.8;
    margin-right: 0.1em;
    margin-top: 0.1em;
}

.drop-cap-red {
    color: var(--red-ink);
}

.drop-cap-blue {
    color: var(--stamp-blue);
}

/* --- Section Rules (HR) --- */
.section-rule {
    border: none;
    border-top: var(--rule-thickness) solid var(--authority-black);
    width: 100%;
    max-width: var(--content-max-width);
    transform: rotate(var(--rule-rotation));
    margin: 0;
    transition: border-color 0.4s ease;
}

.section-rule-light {
    border-top-color: var(--bureaucratic-gray);
}

/* Accent-colored rules based on context */
[data-accent="red"] .section-rule {
    border-top-color: var(--red-ink);
}

[data-accent="blue"] .section-rule {
    border-top-color: var(--stamp-blue);
}

/* --- Rubber Stamps --- */
.stamp {
    position: absolute;
    font-family: "Courier Prime", monospace;
    font-weight: 700;
    font-size: 4rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    pointer-events: none;
    z-index: 3;
    opacity: 0;
    transition: opacity 0.6s ease;
}

.stamp.visible {
    opacity: 0.12;
}

.stamp-red {
    color: var(--red-ink);
    transform: rotate(-12deg);
    top: 3rem;
    right: -2rem;
}

.stamp-blue {
    color: var(--stamp-blue);
    transform: rotate(-8deg);
    top: 3rem;
    right: -2rem;
}

/* Overlapping stamps in appendix */
.stamp-overlap {
    top: 2rem;
    right: 0;
}

.stamp-overlap-blue {
    transform: rotate(5deg);
    top: 3.5rem;
    right: 1rem;
}

/* --- Margin Notes --- */
.margin-note {
    position: absolute;
    right: -220px;
    width: 190px;
    font-family: "Source Sans 3", sans-serif;
    font-size: 0.82rem;
    color: var(--bureaucratic-gray);
    line-height: 1.45;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.margin-note.visible {
    opacity: 1;
    transform: translateY(0);
}

.margin-note-handwritten .margin-note-text {
    font-family: "Caveat", cursive;
    font-size: 1.1rem;
    color: var(--red-ink);
}

.margin-arrow {
    font-size: 1.2rem;
    color: var(--bureaucratic-gray);
    margin-left: 0.3em;
}

[data-note="1"] { top: 16rem; }
[data-note="2"] { top: 6rem; }
[data-note="3"] { top: 6rem; }
[data-note="4"] { top: 14rem; }
[data-note="5"] { top: 30rem; }
[data-note="6"] { top: 6rem; }

/* --- Deviation Log Section --- */
.deviation-intro {
    font-family: "Courier Prime", monospace;
    font-size: 0.88rem;
    color: var(--bureaucratic-gray);
    margin-bottom: 2rem;
    line-height: 1.55;
}

.deviation-ticker {
    width: 100%;
    height: 50vh;
    overflow: hidden;
    position: relative;
    border: 1px solid var(--bureaucratic-gray);
    padding: 1rem;
    background: rgba(0, 0, 0, 0.3);
}

.deviation-ticker:hover .deviation-ticker-inner {
    animation-play-state: paused;
}

.deviation-ticker-inner {
    font-family: "Courier Prime", monospace;
    font-size: 0.85rem;
    line-height: 1.55;
    color: var(--paper-white);
}

.violation-entry {
    padding: 0.3rem 0;
    border-bottom: 1px solid rgba(122, 122, 114, 0.2);
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.violation-entry.visible {
    opacity: 1;
    transform: translateY(0);
}

.violation-number {
    color: var(--violation-amber);
    font-weight: 700;
}

.violation-property {
    color: var(--faded-correction);
}

.violation-values {
    color: var(--bureaucratic-gray);
}

/* --- Redaction Zone --- */
.redaction-intro {
    margin-bottom: 2.5rem;
    color: var(--bureaucratic-gray);
    font-style: italic;
}

.redaction-block {
    border-left: 3px solid var(--bureaucratic-gray);
    padding: 1rem 1.5rem;
    margin-bottom: 2rem;
    position: relative;
    font-size: 1.05rem;
}

.redaction-block cite {
    display: block;
    margin-top: 0.8rem;
    font-family: "Courier Prime", monospace;
    font-size: 0.8rem;
    color: var(--bureaucratic-gray);
}

.redaction-bar {
    background: var(--redaction-black);
    color: transparent;
    padding: 0.05em 0.3em;
    cursor: pointer;
    transition: background 0.4s ease, color 0.4s ease;
    position: relative;
    display: inline;
}

.redaction-bar:hover {
    background: rgba(44, 44, 44, 0.08);
    color: var(--body-ink);
}

/* Performative redactions hide nothing meaningful */
.redaction-performative:hover {
    background: rgba(44, 44, 44, 0.08);
    color: var(--body-ink);
}

/* Struck-through replacement text in Caveat */
.redaction-block .redaction-bar::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 2px;
    background: var(--red-ink);
    opacity: 0;
    transition: opacity 0.4s ease;
}

/* --- Committee Section --- */
.committee-intro {
    margin-bottom: 3rem;
    color: var(--bureaucratic-gray);
    font-style: italic;
}

.committee-member {
    margin-bottom: 3rem;
    padding: 2rem;
    border: 1px solid var(--bureaucratic-gray);
    position: relative;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.committee-member.visible {
    opacity: 1;
    transform: translateY(0);
}

.committee-member blockquote {
    padding: 0;
    border: none;
}

.member-name {
    font-family: "DM Serif Display", serif;
    font-size: 1.3rem;
    margin-bottom: 0.3rem;
}

.member-title {
    font-family: "Courier Prime", monospace;
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 1rem;
}

/* Committee Member A: Red Standard */
.committee-member-a {
    border-left: 3px solid var(--red-ink);
}

.committee-member-a .member-name {
    color: var(--red-ink);
}

.committee-member-a .member-title {
    color: var(--red-ink);
}

.committee-member-a blockquote p:last-child {
    letter-spacing: -0.01em;
}

/* Committee Member B: Blue Standard */
.committee-member-b {
    border-left: 3px solid var(--stamp-blue);
}

.committee-member-b .member-name {
    color: var(--stamp-blue);
}

.committee-member-b .member-title {
    color: var(--stamp-blue);
}

.committee-member-b blockquote p:last-child {
    letter-spacing: 0.03em;
}

/* Committee Member C: Alternating */
.committee-member-c {
    border-left: 3px solid var(--bureaucratic-gray);
}

.committee-member-c .member-name {
    color: var(--authority-black);
}

.committee-member-c .member-title {
    color: var(--bureaucratic-gray);
}

/* --- Appendix Section --- */
.appendix-intro {
    margin-bottom: 2rem;
    color: var(--bureaucratic-gray);
    font-style: italic;
}

.code-block {
    font-family: "Courier Prime", monospace;
    font-size: 0.85rem;
    line-height: 1.65;
    background: rgba(0, 0, 0, 0.04);
    border: 1px solid var(--bureaucratic-gray);
    padding: 2rem;
    margin-bottom: 3rem;
    overflow-x: auto;
    white-space: pre;
    color: var(--body-ink);
}

.css-selector {
    color: var(--stamp-blue);
    font-weight: 700;
}

.css-property {
    color: var(--red-ink);
}

.css-value {
    color: var(--authority-black);
}

.css-comment {
    color: var(--bureaucratic-gray);
    font-style: italic;
}

.appendix-closing {
    font-family: "DM Serif Display", serif;
    font-size: 1.4rem;
    text-align: center;
    color: var(--authority-black);
    margin-top: 3rem;
    margin-bottom: 3rem;
}

/* --- Footnotes --- */
.footnotes {
    margin-top: 4rem;
    padding-top: 2rem;
    border-top: 1px solid var(--bureaucratic-gray);
}

.footnotes-heading {
    font-family: "DM Serif Display", serif;
    font-size: 1.2rem;
    color: var(--authority-black);
    margin-bottom: 1.5rem;
}

.footnote {
    font-family: "Source Sans 3", sans-serif;
    font-size: 0.9rem;
    color: var(--bureaucratic-gray);
    margin-bottom: 1rem;
    padding-left: 2.5rem;
    position: relative;
    line-height: 1.6;
}

.footnote-number {
    font-family: "Courier Prime", monospace;
    font-weight: 700;
    color: var(--violation-amber);
    position: absolute;
    left: 0;
}

.footnote-ref {
    font-size: 0.9rem;
    color: var(--bureaucratic-gray);
    margin-bottom: 0.8rem;
}

.footnote-ref sup {
    font-family: "Courier Prime", monospace;
    color: var(--violation-amber);
}

.fn-link {
    color: var(--violation-amber);
    text-decoration: underline;
    text-decoration-style: dotted;
}

.fn-link:hover {
    color: var(--red-ink);
}

/* --- Circular Reference Arrows SVG --- */
.circular-arrows {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 5;
}

/* --- Stagger Entrance Animations --- */
.section-inner > * {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.section-inner.animate > * {
    opacity: 1;
    transform: translateY(0);
}

.section-inner.animate > *:nth-child(1) { transition-delay: 0ms; }
.section-inner.animate > *:nth-child(2) { transition-delay: 120ms; }
.section-inner.animate > *:nth-child(3) { transition-delay: 240ms; }
.section-inner.animate > *:nth-child(4) { transition-delay: 360ms; }
.section-inner.animate > *:nth-child(5) { transition-delay: 480ms; }
.section-inner.animate > *:nth-child(6) { transition-delay: 600ms; }
.section-inner.animate > *:nth-child(7) { transition-delay: 720ms; }
.section-inner.animate > *:nth-child(8) { transition-delay: 840ms; }
.section-inner.animate > *:nth-child(9) { transition-delay: 960ms; }
.section-inner.animate > *:nth-child(10) { transition-delay: 1080ms; }
.section-inner.animate > *:nth-child(11) { transition-delay: 1200ms; }
.section-inner.animate > *:nth-child(12) { transition-delay: 1320ms; }

/* --- Preamble specific --- */
.preamble-text {
    font-weight: 300;
    font-size: 1.1rem;
    line-height: 1.75;
    text-align: center;
    max-width: 560px;
    margin: 0 auto 2rem;
}

.preamble-sub {
    font-weight: 400;
    font-size: 0.95rem;
    text-align: center;
    max-width: 520px;
    margin: 0 auto;
    color: var(--bureaucratic-gray);
}

/* --- Responsive Adjustments --- */
@media (max-width: 1100px) {
    .margin-note {
        position: relative;
        right: 0;
        width: 100%;
        margin-top: 1rem;
        margin-bottom: 1rem;
        padding: 0.8rem;
        border-left: 2px solid var(--bureaucratic-gray);
    }
}

@media (max-width: 768px) {
    .document-title {
        font-size: 2.4rem;
        letter-spacing: 0.04em;
    }

    .section {
        padding: 4rem 1.2rem;
    }

    .stamp {
        font-size: 2.5rem;
    }

    #violation-counter {
        top: 0.8rem;
        right: 0.8rem;
        font-size: 0.75rem;
        padding: 0.3rem 0.5rem;
    }

    .code-block {
        font-size: 0.72rem;
        padding: 1rem;
    }

    .title-underline {
        width: 100%;
        left: 0;
    }
}

/* --- Selection color --- */
::selection {
    background: var(--faded-correction);
    color: var(--authority-black);
}