/* =========================================================
   bcd.day — Scholarly Exploration of Distributed Consensus
   Aesthetic: inflated-3d / diagonal-sections / burnt-orange
   Typography source notes: Space Grotesk" (Google Fonts), IBM Plex Sans" (Google Fonts), IBM Plex Mono" (Google Fonts).
   IBM Plex's humanist geometry bridges the scholarly and the technical — designed for sustained reading.
   ========================================================= */

:root {
    --color-obsidian: #1a1008;
    --color-soot: #2d1f12;
    --color-sienna: #c45d1e;
    --color-amber: #e8913a;
    --color-gold: #f4c862;
    --color-parchment: #f0e6d3;
    --color-linen: #b8a68e;
    --color-ember: #ff4a1c;
    --color-ink-1: #d4722a;
    --color-ink-2: #c45d1e;
    --color-ink-3: #b34a15;
    --color-ink-4: #a2390e;
    --color-ink-5: #8c2c0a;
    --color-ink-6: #3b2010;
    --font-display: "Space Grotesk", "Inter", "Arial", sans-serif;
    --font-body: "IBM Plex Sans", "Inter", "Helvetica Neue", Arial, sans-serif;
    --font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
    --angle-1: 8deg;
    --angle-2: 10deg;
    --angle-3: 12deg;
    --angle-4: -8deg;
    --angle-5: -10deg;
    --angle-6: -12deg;
}

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

html, body {
    background-color: var(--color-obsidian);
    color: var(--color-parchment);
    font-family: var(--font-body);
    font-weight: 400;
    line-height: 1.75;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

body {
    position: relative;
    min-height: 100vh;
}

/* ---------- Noise overlay ---------- */
.noise-overlay {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 200;
    mix-blend-mode: overlay;
    opacity: 0.08;
    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'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ---------- Inflated 3D typographic treatment ---------- */
.inflated-text,
.hero-title,
.section-title {
    text-shadow:
        0 1px 0 var(--color-ink-1),
        0 2px 0 var(--color-ink-2),
        0 3px 0 var(--color-ink-3),
        0 4px 0 var(--color-ink-4),
        0 5px 0 var(--color-ink-5),
        0 6px 12px rgba(26, 16, 8, 0.5),
        0 6px 24px rgba(26, 16, 8, 0.3);
}

/* =========================================================
   HERO
   ========================================================= */
.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(168deg, var(--color-obsidian) 0%, var(--color-soot) 100%);
    padding: 6vh 8vw;
    overflow: hidden;
}

.hero-inner {
    position: relative;
    z-index: 3;
    transform: perspective(1200px) rotateX(-2deg) rotateY(1deg);
    max-width: 1400px;
    width: 100%;
}

.hero-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(72px, 14vw, 192px);
    letter-spacing: -0.03em;
    line-height: 0.95;
    color: var(--color-parchment);
    transform: perspective(800px) rotateX(-5deg) rotateY(3deg);
    transform-origin: left center;
    display: inline-block;
    white-space: nowrap;
}

.hero-title .char {
    display: inline-block;
    opacity: 0;
    transform: translateY(20px) skewX(0deg);
    color: var(--color-parchment);
    transition: color 0.2s ease;
}

.hero-title .char.landed {
    opacity: 1;
    transform: translateY(0) skewX(0deg);
    animation: char-settle 600ms ease-out forwards;
}

.hero-title .char.glitching {
    color: var(--color-ember);
    transform: translateY(0) skewX(var(--gx, 12deg));
}

.hero-title .char-dot {
    color: var(--color-gold);
    text-shadow:
        0 1px 0 var(--color-gold),
        0 2px 0 var(--color-amber),
        0 3px 0 var(--color-sienna),
        0 4px 0 var(--color-ink-3),
        0 5px 0 var(--color-ink-5),
        0 6px 12px rgba(26, 16, 8, 0.6);
}

@keyframes char-settle {
    0%   { transform: translateY(16px) skewX(6deg); filter: blur(2px); }
    40%  { transform: translateY(-3px) skewX(-2deg); filter: blur(0); }
    70%  { transform: translateY(1px) skewX(0.5deg); }
    100% { transform: translateY(0) skewX(0deg); filter: blur(0); }
}

.hero-subtitle {
    font-family: var(--font-body);
    font-weight: 300;
    font-size: 20px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-linen);
    margin-top: 2.5rem;
    max-width: 640px;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1s ease 0.2s, transform 1s ease 0.2s;
}

.hero-subtitle.revealed {
    opacity: 1;
    transform: translateY(0);
}

.hero-descender {
    position: absolute;
    bottom: 4vh;
    left: 8vw;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    opacity: 0;
    transition: opacity 1s ease 1s;
}

.hero-descender.revealed {
    opacity: 1;
}

.descender-line {
    display: block;
    width: 160px;
    height: 3px;
    background: var(--color-sienna);
    opacity: 0.6;
    transform: rotate(28deg);
    transform-origin: left center;
    position: relative;
}
.descender-line::after {
    content: "";
    position: absolute;
    right: -8px;
    top: -4px;
    width: 12px;
    height: 12px;
    border-right: 3px solid var(--color-sienna);
    border-bottom: 3px solid var(--color-sienna);
    transform: rotate(-17deg);
    opacity: 0.8;
}

.descender-label {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.32em;
    color: var(--color-sienna);
    opacity: 0.72;
    margin-top: 28px;
}

.hero-watermark {
    position: absolute;
    right: -4vw;
    bottom: 8vh;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(120px, 22vw, 360px);
    color: var(--color-sienna);
    opacity: 0.04;
    letter-spacing: -0.04em;
    transform: rotate(-8deg);
    pointer-events: none;
    white-space: nowrap;
    z-index: 1;
}

/* =========================================================
   CHAIN-LINK CONNECTOR
   ========================================================= */
.chain-link {
    position: relative;
    margin-top: -4vh;
    margin-bottom: -4vh;
    min-height: 64px;
    background: linear-gradient(90deg, var(--color-soot), var(--color-obsidian), var(--color-soot));
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
    padding: 12px 8vw;
    clip-path: polygon(0 20%, 100% 0, 100% 80%, 0 100%);
    z-index: 4;
    overflow: hidden;
    transform: rotate(var(--link-angle, 0deg));
}

.chain-link-0 { --link-angle: -2deg; }
.chain-link-1 { --link-angle: 2deg; }
.chain-link-2 { --link-angle: -2deg; }
.chain-link-3 { --link-angle: 0deg; }
.chain-link-4 { --link-angle: 2deg; }
.chain-link-5 { --link-angle: -2deg; }

.chain-link::before,
.chain-link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--color-sienna);
    opacity: 0.22;
}
.chain-link::before { top: 30%; }
.chain-link::after  { bottom: 30%; }

.chain-bracket {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--color-sienna);
    opacity: 0.7;
    letter-spacing: 0.18em;
}

.chain-hash {
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--color-sienna);
    opacity: 0.78;
    letter-spacing: 0.06em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 62vw;
    transition: color 0.2s ease;
}

.hash-mine {
    color: var(--color-gold);
    font-weight: 500;
    text-shadow: 0 0 8px rgba(244, 200, 98, 0.25);
}

.chain-link.mining .hash-mine {
    animation: hash-flicker 80ms linear infinite;
}

@keyframes hash-flicker {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.55; }
}

.chain-link-fold {
    background: linear-gradient(90deg, var(--color-obsidian), #3b2010 50%, var(--color-obsidian));
    min-height: 84px;
    clip-path: polygon(0 10%, 100% 30%, 100% 90%, 0 70%);
}
.chain-link-fold .chain-hash-fold {
    color: var(--color-gold);
    opacity: 0.9;
    font-weight: 500;
    letter-spacing: 0.1em;
}
.chain-link-fold .chain-bracket { color: var(--color-gold); opacity: 0.9; }

/* =========================================================
   BLOCK SECTIONS
   ========================================================= */
.block-section {
    position: relative;
    padding: 16vh 8vw;
    margin-top: -6vh;
    margin-bottom: -6vh;
    min-height: 100vh;
    clip-path: polygon(0 8%, 100% 0%, 100% 92%, 0% 100%);
    overflow: hidden;
    isolation: isolate;
}

.block-section.section-1 {
    background: linear-gradient(168deg, #1a1008 0%, #2d1f12 100%);
}
.block-section.section-2 {
    background: linear-gradient(172deg, #2d1f12 0%, #1a1008 100%);
}
.block-section.section-3 {
    background: linear-gradient(176deg, #1a1008 0%, #3b2010 100%);
}
.block-section.section-4 {
    background: linear-gradient(184deg, #2d1f12 0%, #1a1008 100%);
    clip-path: polygon(0 0%, 100% 8%, 100% 100%, 0% 92%);
}
.block-section.section-5 {
    background: linear-gradient(188deg, #1a1008 0%, #2d1f12 100%);
    clip-path: polygon(0 0%, 100% 8%, 100% 100%, 0% 92%);
}
.block-section.section-6 {
    background: linear-gradient(192deg, #3b2010 0%, #1a1008 100%);
    clip-path: polygon(0 0%, 100% 8%, 100% 100%, 0% 92%);
}

/* Pre-reveal state */
.block-section {
    opacity: 0;
    transform: translateY(36px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.block-section.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* Glitch flash line overlay */
.block-section::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 1px;
    background: var(--color-ember);
    opacity: 0;
    transform: translateY(0);
    pointer-events: none;
    z-index: 12;
}
.block-section.glitching::after {
    animation: section-glitch-line 300ms linear 1;
}

@keyframes section-glitch-line {
    0%   { opacity: 0; top: 12%; }
    15%  { opacity: 0.9; top: 18%; }
    35%  { opacity: 0.2; top: 44%; }
    55%  { opacity: 0.95; top: 62%; }
    80%  { opacity: 0.1; top: 80%; }
    100% { opacity: 0; top: 100%; }
}

.block-section.glitching .section-text {
    animation: section-glitch-shift 300ms steps(2) 1;
}

@keyframes section-glitch-shift {
    0%   { transform: translate(0, 0); }
    20%  { transform: translate(4px, -2px); filter: hue-rotate(10deg); }
    40%  { transform: translate(-3px, 1px); }
    60%  { transform: translate(2px, -1px); }
    80%  { transform: translate(-1px, 2px); }
    100% { transform: translate(0, 0); filter: none; }
}

/* Decorative diagonal lines */
.block-section::before {
    content: "";
    position: absolute;
    width: 140%;
    height: 2px;
    background: var(--color-linen);
    opacity: 0.18;
    top: 22%;
    left: -20%;
    transform: rotate(-6deg);
    pointer-events: none;
    z-index: 1;
}

/* Watermark numerals */
.section-watermark {
    position: absolute;
    top: 12vh;
    right: -2vw;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(140px, 20vw, 260px);
    color: var(--color-sienna);
    opacity: 0.07;
    letter-spacing: -0.04em;
    line-height: 1;
    pointer-events: none;
    z-index: 0;
}
.block-section.section-1 .section-watermark { transform: rotate(8deg); }
.block-section.section-2 .section-watermark { transform: rotate(10deg); }
.block-section.section-3 .section-watermark { transform: rotate(12deg); }
.block-section.section-4 .section-watermark { transform: rotate(-8deg); left: -2vw; right: auto; }
.block-section.section-5 .section-watermark { transform: rotate(-10deg); left: -2vw; right: auto; }
.block-section.section-6 .section-watermark { transform: rotate(-12deg); left: -2vw; right: auto; }

/* Grid structure */
.section-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr 1.618fr;
    gap: 6vw;
    max-width: 1600px;
    margin: 0 auto;
    align-items: center;
    transform: rotate(-3deg);
}

.block-section.section-1 .section-grid { transform: rotate(-2deg); }
.block-section.section-2 .section-grid { transform: rotate(-2.5deg); }
.block-section.section-3 .section-grid { transform: rotate(-3deg); }
.block-section.section-4 .section-grid { transform: rotate(2deg); grid-template-columns: 1.618fr 1fr; }
.block-section.section-5 .section-grid { transform: rotate(2.5deg); grid-template-columns: 1.618fr 1fr; }
.block-section.section-6 .section-grid { transform: rotate(3deg); grid-template-columns: 1.618fr 1fr; }

/* Text column: counter-rotate */
.section-text {
    transform: rotate(3deg);
    max-width: 640px;
    justify-self: start;
}
.block-section.section-1 .section-text { transform: rotate(2deg); }
.block-section.section-2 .section-text { transform: rotate(2.5deg); }
.block-section.section-3 .section-text { transform: rotate(3deg); }
.block-section.section-4 .section-text { transform: rotate(-2deg); order: 2; justify-self: end; }
.block-section.section-5 .section-text { transform: rotate(-2.5deg); order: 2; justify-self: end; }
.block-section.section-6 .section-text { transform: rotate(-3deg); order: 2; justify-self: end; }

.section-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--color-linen);
    margin-bottom: 20px;
}

.section-chevron {
    color: var(--color-gold);
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: 18px;
    transform: translateX(0);
    transition: transform 0.6s cubic-bezier(0.2, 0.9, 0.3, 1);
}

.block-section.revealed .section-chevron {
    transform: translateX(8px);
}

.section-label {
    color: var(--color-sienna);
}

.section-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(64px, 10vw, 128px);
    letter-spacing: -0.02em;
    line-height: 1;
    color: var(--color-parchment);
    margin-bottom: 2.2rem;
    transition: text-shadow 0.18s ease, transform 0.18s ease;
}

.section-title:hover {
    text-shadow:
        1px 2px 0 var(--color-ink-1),
        1px 3px 0 var(--color-ink-2),
        1px 4px 0 var(--color-ink-3),
        1px 5px 0 var(--color-ink-4),
        1px 6px 0 var(--color-ink-5),
        1px 7px 16px rgba(26, 16, 8, 0.55),
        1px 7px 32px rgba(26, 16, 8, 0.35);
}

.section-title.hover-glitch {
    position: relative;
}
.section-title.glitch-line::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 1px;
    background: var(--color-ember);
    animation: heading-glitch-line 100ms linear 1;
    pointer-events: none;
}

@keyframes heading-glitch-line {
    0%   { opacity: 0; transform: translateY(-18px); }
    30%  { opacity: 1; transform: translateY(6px); }
    70%  { opacity: 1; transform: translateY(-10px); }
    100% { opacity: 0; transform: translateY(12px); }
}

.section-lede {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: clamp(18px, 1.4vw, 22px);
    color: var(--color-parchment);
    line-height: 1.55;
    margin-bottom: 1.6rem;
}

.section-body {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 17px;
    color: var(--color-linen);
    line-height: 1.85;
    margin-bottom: 1.4rem;
    max-width: 58ch;
}

.section-pullquote {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(20px, 1.8vw, 26px);
    color: var(--color-gold);
    line-height: 1.4;
    border-left: 3px solid var(--color-sienna);
    padding-left: 22px;
    margin-top: 2rem;
    letter-spacing: -0.01em;
    font-style: italic;
}

/* Visual column */
.section-visual {
    position: relative;
    transform: rotate(3deg);
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 460px;
}
.block-section.section-1 .section-visual { transform: rotate(2deg); }
.block-section.section-2 .section-visual { transform: rotate(2.5deg); }
.block-section.section-3 .section-visual { transform: rotate(3deg); }
.block-section.section-4 .section-visual { transform: rotate(-2deg); order: 1; }
.block-section.section-5 .section-visual { transform: rotate(-2.5deg); order: 1; }
.block-section.section-6 .section-visual { transform: rotate(-3deg); order: 1; }

/* Duotone frame */
.duotone-frame {
    position: relative;
    width: 100%;
    max-width: 520px;
    aspect-ratio: 4 / 5;
    clip-path: polygon(0 6%, 100% 0%, 100% 94%, 0% 100%);
    overflow: hidden;
    box-shadow: 0 40px 80px rgba(0, 0, 0, 0.55), 0 10px 22px rgba(0, 0, 0, 0.35);
    transition: transform 0.3s cubic-bezier(0.2, 0.9, 0.3, 1);
}

.block-section.section-4 .duotone-frame,
.block-section.section-5 .duotone-frame,
.block-section.section-6 .duotone-frame {
    clip-path: polygon(0 0%, 100% 6%, 100% 100%, 0% 94%);
}

.duotone-frame:hover {
    transform: translate(2px, 2px) rotate(0.5deg);
}
.duotone-frame:hover .duotone-multiply {
    opacity: 0.95;
    filter: contrast(1.5);
}

.duotone-base {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    filter: grayscale(100%) contrast(1.2);
    transform: scale(1.1);
    transition: transform 0.8s ease-out;
}

.block-section.revealed .duotone-base {
    transform: scale(1);
}

.duotone-multiply {
    position: absolute;
    inset: 0;
    background: var(--color-sienna);
    mix-blend-mode: multiply;
    opacity: 0.85;
    transition: opacity 0.3s ease, filter 0.3s ease;
}

.duotone-screen {
    position: absolute;
    inset: 0;
    background: var(--color-parchment);
    mix-blend-mode: screen;
    opacity: 0.22;
    transition: opacity 0.3s ease;
}

.block-section.revealed .duotone-screen {
    animation: screen-emerge 800ms ease-out 0.1s both;
}

@keyframes screen-emerge {
    0%   { opacity: 0; }
    100% { opacity: 0.22; }
}

.duotone-caption {
    position: absolute;
    bottom: 12px;
    left: 18px;
    right: 18px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    color: var(--color-parchment);
    text-transform: uppercase;
    opacity: 0.85;
    z-index: 3;
    mix-blend-mode: screen;
}

/* Duotone imagery via gradient/SVG pattern (no external assets required) */
.duotone-blocks {
    background-image:
        linear-gradient(180deg, rgba(26,16,8,0.15), rgba(26,16,8,0.75)),
        repeating-linear-gradient(170deg,
            #9a8a78 0px, #9a8a78 56px,
            #5e4c3a 56px, #5e4c3a 64px,
            #b09d87 64px, #b09d87 122px,
            #3f2e20 122px, #3f2e20 128px),
        radial-gradient(ellipse at 30% 20%, #d6c3a8 0%, #3b2e1f 70%);
}

.duotone-chain {
    background-image:
        linear-gradient(180deg, rgba(26,16,8,0.25), rgba(26,16,8,0.7)),
        repeating-radial-gradient(circle at 30% 40%, #c9b79a 0 8px, #3b2a1c 8px 22px, #8d7a60 22px 36px, #1f140a 36px 50px),
        radial-gradient(circle at 70% 60%, #8d7a60 0%, #1a1008 75%);
}

.duotone-consensus {
    background-image:
        linear-gradient(180deg, rgba(26,16,8,0.2), rgba(26,16,8,0.75)),
        repeating-linear-gradient(100deg,
            #9c8a71 0 24px,
            #4a3826 24px 40px,
            #c4b094 40px 68px,
            #2a1d11 68px 84px),
        radial-gradient(ellipse at center, #c0aa8e 0%, #1f1509 80%);
}

.duotone-immutability {
    background-image:
        linear-gradient(180deg, rgba(26,16,8,0.1), rgba(26,16,8,0.7)),
        repeating-linear-gradient(88deg,
            #b59d82 0 6px,
            #705a45 6px 10px,
            #c7ad92 10px 50px,
            #5a4431 50px 56px),
        radial-gradient(circle at 40% 60%, #a98f74 0%, #1c1108 80%);
}

.duotone-decentralization {
    background-image:
        linear-gradient(180deg, rgba(26,16,8,0.2), rgba(26,16,8,0.7)),
        repeating-conic-gradient(from 20deg at 50% 50%, #a79078 0 10deg, #3a2a1d 10deg 20deg, #c9b399 20deg 40deg, #1e1209 40deg 48deg),
        radial-gradient(circle at 50% 50%, #c9b399 0%, #1a1008 70%);
}

.duotone-hash {
    background-image:
        linear-gradient(180deg, rgba(26,16,8,0.15), rgba(26,16,8,0.7)),
        repeating-linear-gradient(45deg,
            #a99176 0 12px,
            #3a2a1c 12px 16px,
            #cdb69a 16px 28px,
            #5a4331 28px 32px),
        repeating-linear-gradient(-45deg,
            rgba(26,16,8,0.25) 0 10px,
            transparent 10px 20px),
        radial-gradient(circle at 40% 40%, #d2bc9f 0%, #1a1008 80%);
}

/* =========================================================
   TERMINUS / FOOTER
   ========================================================= */
.terminus {
    position: relative;
    min-height: 100vh;
    background: var(--color-obsidian);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10vh 8vw;
    margin-top: -4vh;
    clip-path: polygon(0 8%, 100% 0%, 100% 100%, 0% 100%);
    overflow: hidden;
}

.terminus::before {
    content: "";
    position: absolute;
    width: 140%;
    height: 1px;
    top: 30%;
    left: -20%;
    background: var(--color-sienna);
    opacity: 0.2;
    transform: rotate(-4deg);
}
.terminus::after {
    content: "";
    position: absolute;
    width: 140%;
    height: 1px;
    bottom: 22%;
    left: -20%;
    background: var(--color-linen);
    opacity: 0.15;
    transform: rotate(3deg);
}

.terminus-inner {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    z-index: 2;
}

.terminus-label {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.44em;
    color: var(--color-sienna);
    opacity: 0.8;
}

.terminus-timestamp {
    font-family: var(--font-mono);
    font-size: clamp(20px, 2vw, 28px);
    color: var(--color-linen);
    letter-spacing: 0.1em;
    margin-top: 8px;
}
.terminus-timestamp .tick {
    display: inline-block;
    transition: color 150ms ease;
}
.terminus-timestamp .tick.flash {
    color: var(--color-ember);
}

.terminus-height {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.3em;
    color: var(--color-linen);
    opacity: 0.68;
    text-transform: uppercase;
    margin-top: 8px;
}

.terminus-sub {
    font-family: var(--font-body);
    font-weight: 300;
    font-size: 12px;
    letter-spacing: 0.3em;
    color: var(--color-linen);
    opacity: 0.42;
    margin-top: 36px;
    text-transform: uppercase;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 960px) {
    .section-grid,
    .block-section.section-4 .section-grid,
    .block-section.section-5 .section-grid,
    .block-section.section-6 .section-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }
    .section-text,
    .block-section.section-4 .section-text,
    .block-section.section-5 .section-text,
    .block-section.section-6 .section-text {
        order: 1;
        justify-self: start;
        max-width: 100%;
    }
    .section-visual,
    .block-section.section-4 .section-visual,
    .block-section.section-5 .section-visual,
    .block-section.section-6 .section-visual {
        order: 2;
    }
    .duotone-frame { max-width: 100%; }
    .hero-title { font-size: clamp(56px, 18vw, 110px); }
    .section-title { font-size: clamp(48px, 12vw, 96px); }
    .chain-hash { max-width: 72vw; font-size: 11px; }
    .block-section { padding: 12vh 6vw; }
    .hero { padding: 6vh 6vw; }
}

@media (max-width: 540px) {
    .hero-watermark { font-size: clamp(80px, 28vw, 160px); }
    .section-watermark { font-size: clamp(100px, 34vw, 180px); }
    .section-body { font-size: 16px; }
    .descender-label { font-size: 10px; }
    .chain-link { padding: 12px 4vw; gap: 12px; }
    .chain-bracket { font-size: 10px; }
    .chain-hash { font-size: 10px; }
}