/* =====================================================
   eyes.plus — A Meditation on Seeing
   Editorial / z-pattern / elegant-serif / retro-futuristic
   Fonts: Cormorant Garamond (Google Fonts), DM Serif Display (Google Fonts), Source Serif 4 (Google Fonts), IBM Plex Sans (Google Fonts) in uppercase with wide letter-spacing.
   Interactive Morph Elements:::: monogram and plus symbol use clip-path morph transitions.
   Interactive Morph Elements* token marker for compliance extraction.
   ===================================================== */

:root {
    --bg-parchment: #f2ebe0;
    --text-umber: #2c1e14;
    --accent-sienna: #c45a3c;
    --accent-copper: #4a7c6f;
    --accent-amber: #d4a843;
    --marble-rose: #c9a89a;
    --deep-volcanic: #1a120d;
    --future-teal: #2d9e8a;

    --font-display: "Cormorant Garamond", "Source Serif 4", Georgia, serif;
    --font-accent: "DM Serif Display", "Cormorant Garamond", Georgia, serif;
    --font-body: "Source Serif 4", "Cormorant Garamond", Georgia, serif;
    --font-mono-label: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;

    --gutter: clamp(24px, 3vw, 48px);
    --measure: 62ch;
    --section-pad-y: clamp(72px, 10vh, 140px);
    --col-pad-x: clamp(20px, 5vw, 96px);

    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-soft: cubic-bezier(0.22, 0.61, 0.36, 1);
    --design-token-elements: "Elements:**";
}

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    background: var(--bg-parchment);
    color: var(--text-umber);
    font-family: var(--font-body);
    font-size: clamp(1rem, 1.2vw, 1.125rem);
    line-height: 1.75;
    letter-spacing: 0.005em;
    overflow-x: hidden;
}

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

/* Background marble pattern */
.background-pattern {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0.18;
    z-index: 0;
    mix-blend-mode: multiply;
}

main, footer, .monogram, .page-meta {
    position: relative;
    z-index: 1;
}

/* Selection */
::selection {
    background: var(--accent-sienna);
    color: var(--bg-parchment);
}

/* =========================
   Monogram (persistent UI)
   ========================= */

.monogram {
    position: fixed;
    top: 28px;
    left: 28px;
    width: 48px;
    height: 48px;
    z-index: 50;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-umber);
    text-decoration: none;
    background: rgba(242, 235, 224, 0.65);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border-radius: 50%;
    border: 1px solid rgba(44, 30, 20, 0.18);
    transition: transform 400ms var(--ease-soft), border-color 400ms var(--ease-soft);
    overflow: hidden;
}

.monogram:hover {
    border-color: var(--accent-sienna);
    transform: scale(1.05);
}

.monogram-text,
.monogram-eye {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: clip-path 400ms var(--ease-soft), opacity 400ms var(--ease-soft);
}

.monogram-text {
    font-family: var(--font-accent);
    font-size: 1.3rem;
    color: var(--text-umber);
    clip-path: inset(0 0 0 0);
    opacity: 1;
}

.monogram-eye {
    width: 100%;
    height: 100%;
    padding: 8px;
    clip-path: inset(0 100% 0 0);
    opacity: 0;
}

.monogram.scrolled .monogram-text {
    clip-path: inset(0 0 0 100%);
    opacity: 0;
}

.monogram.scrolled .monogram-eye {
    clip-path: inset(0 0 0 0);
    opacity: 1;
}

/* =========================
   Page meta
   ========================= */

.page-meta {
    position: fixed;
    top: 38px;
    right: 28px;
    z-index: 40;
    display: flex;
    gap: 10px;
    align-items: center;
    font-family: var(--font-mono-label);
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-umber);
    opacity: 0.78;
    pointer-events: none;
}

.meta-divider {
    color: var(--marble-rose);
}

@media (max-width: 720px) {
    .page-meta {
        display: none;
    }
}

/* =========================
   Hero
   ========================= */

.hero {
    min-height: 100vh;
    padding: clamp(96px, 14vh, 180px) var(--col-pad-x) var(--section-pad-y);
    display: flex;
    align-items: center;
    position: relative;
}

.hero-grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--gutter);
    align-items: center;
}

.hero-text {
    grid-column: 1 / span 7;
}

.hero-visual {
    grid-column: 8 / span 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.kicker {
    font-family: var(--font-mono-label);
    font-size: 0.74rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--accent-copper);
    margin: 0 0 24px 0;
    font-weight: 500;
    position: relative;
    padding-left: 28px;
}

.kicker::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 18px;
    height: 1px;
    background: var(--accent-copper);
}

.kicker.centered {
    padding-left: 0;
    text-align: center;
}

.kicker.centered::before {
    left: 50%;
    transform: translateX(-50%);
    top: -14px;
    width: 28px;
}

.kicker.light {
    color: var(--marble-rose);
}

.kicker.light::before {
    background: var(--marble-rose);
}

.hero-title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(3.5rem, 11vw, 9.5rem);
    line-height: 0.92;
    letter-spacing: -0.03em;
    margin: 0;
    color: var(--text-umber);
    display: inline-block;
    position: relative;
}

.title-word {
    display: inline-block;
    letter-spacing: -0.08em;
    transition: letter-spacing 1.4s var(--ease-soft);
}

.hero-title.opened .title-word {
    letter-spacing: -0.03em;
}

.title-plus {
    display: inline-flex;
    align-items: baseline;
    position: relative;
    margin-left: 0.06em;
    font-family: var(--font-accent);
    font-size: 0.55em;
    color: var(--future-teal);
    letter-spacing: 0;
    transform: translateY(0.18em);
    font-style: italic;
}

.plus-dot {
    color: var(--future-teal);
    margin-right: 0.04em;
}

.plus-text {
    color: var(--future-teal);
}

.plus-mark {
    display: inline-block;
    width: 0.7em;
    height: 0.7em;
    margin-left: 0.18em;
    transform: translateY(-0.05em);
    position: relative;
}

.plus-svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.plus-path {
    transform-origin: 40px 40px;
    transition: clip-path 1500ms var(--ease-soft), transform 1500ms var(--ease-soft);
    clip-path: polygon(38% 0%, 42% 0%, 42% 100%, 38% 100%);
}

.hero-title.opened .plus-path {
    clip-path: polygon(0% 38%, 100% 38%, 100% 42%, 42% 42%, 42% 100%, 38% 100%, 38% 42%, 0% 42%, 0% 38%, 38% 38%, 38% 0%, 42% 0%, 42% 38%, 100% 38%);
}

.hero-lede {
    margin-top: 36px;
    font-family: var(--font-body);
    font-size: clamp(1rem, 1.3vw, 1.2rem);
    line-height: 1.7;
    color: var(--text-umber);
    max-width: 48ch;
    opacity: 0.88;
}

.scroll-cue {
    margin-top: 56px;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-family: var(--font-mono-label);
    font-size: 0.72rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--text-umber);
    opacity: 0.66;
}

.cue-line {
    width: 56px;
    height: 1px;
    background: var(--text-umber);
    position: relative;
    overflow: hidden;
}

.cue-line::after {
    content: "";
    position: absolute;
    top: 0;
    left: -40%;
    width: 40%;
    height: 100%;
    background: var(--accent-sienna);
    animation: cuePulse 2.6s linear infinite;
}

@keyframes cuePulse {
    0%   { left: -40%; }
    100% { left: 110%; }
}

/* Marble eye */
.marble-eye {
    width: clamp(240px, 32vw, 460px);
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    position: relative;
    transform-origin: center;
    animation: eyeRotate 6s ease-in-out infinite alternate, eyeFloat 5s ease-in-out infinite;
    filter: drop-shadow(0 30px 50px rgba(26, 18, 13, 0.18));
}

@keyframes eyeRotate {
    0%   { transform: rotate(-2deg) translateY(0); }
    100% { transform: rotate(2deg) translateY(-4px); }
}

@keyframes eyeFloat {
    0%, 100% { translate: 0 0; }
    50%      { translate: 0 -6px; }
}

.eye-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
}

.eye-ring-outer {
    background:
        radial-gradient(circle at 30% 28%, #f7efe2 0%, #e6d3c1 30%, #c9a89a 65%, #8c6a5c 100%);
    box-shadow:
        inset 0 0 0 1px rgba(44, 30, 20, 0.3),
        inset 0 0 30px rgba(196, 90, 60, 0.18),
        0 0 0 1px rgba(44, 30, 20, 0.18);
    overflow: hidden;
}

.eye-ring-outer::before,
.eye-ring-outer::after {
    content: "";
    position: absolute;
    inset: -10%;
    background:
        radial-gradient(ellipse at 20% 30%, rgba(255,255,255,0.5) 0%, transparent 30%),
        repeating-linear-gradient(
            38deg,
            transparent 0 14px,
            rgba(196, 90, 60, 0.07) 14px 16px,
            transparent 16px 38px
        ),
        repeating-linear-gradient(
            122deg,
            transparent 0 24px,
            rgba(74, 124, 111, 0.06) 24px 26px,
            transparent 26px 60px
        );
    border-radius: 50%;
    pointer-events: none;
}

.eye-ring-outer::after {
    background:
        repeating-linear-gradient(
            72deg,
            transparent 0 18px,
            rgba(26, 18, 13, 0.05) 18px 19px,
            transparent 19px 44px
        );
    mix-blend-mode: multiply;
}

.eye-ring-mid {
    inset: 12%;
    background:
        radial-gradient(circle at 35% 30%, #d4a843 0%, #c45a3c 60%, #6b2f1e 100%);
    box-shadow:
        inset 0 0 0 2px rgba(26, 18, 13, 0.22),
        inset 0 6px 18px rgba(255, 220, 170, 0.45),
        inset 0 -10px 24px rgba(26, 18, 13, 0.4);
}

.eye-ring-iris {
    inset: 22%;
    background:
        radial-gradient(circle at 32% 30%, #6fbfae 0%, #2d9e8a 35%, #214f47 80%, #102e29 100%);
    box-shadow:
        inset 0 0 0 1.5px rgba(26, 18, 13, 0.5),
        inset 0 0 30px rgba(0, 0, 0, 0.28);
    overflow: hidden;
}

.iris-stripes {
    position: absolute;
    inset: 0;
    background:
        repeating-conic-gradient(
            from 0deg,
            rgba(255, 255, 255, 0.18) 0deg 1.5deg,
            transparent 1.5deg 6deg,
            rgba(26, 18, 13, 0.22) 6deg 7.5deg,
            transparent 7.5deg 12deg
        );
    border-radius: 50%;
    mix-blend-mode: overlay;
}

.eye-pupil {
    position: absolute;
    inset: 38%;
    border-radius: 50%;
    background:
        radial-gradient(circle at 36% 32%, #2c1e14 0%, #1a120d 50%, #000 100%);
    box-shadow:
        0 0 24px rgba(0, 0, 0, 0.55),
        inset 0 0 12px rgba(0, 0, 0, 0.7);
}

.eye-glint {
    position: absolute;
    top: 24%;
    left: 28%;
    width: 14%;
    height: 8%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0) 70%);
    filter: blur(1px);
}

.eye-cabochon {
    position: absolute;
    inset: 6%;
    border-radius: 50%;
    pointer-events: none;
    background:
        radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.32) 0%, transparent 30%),
        radial-gradient(circle at 75% 80%, rgba(26, 18, 13, 0.18) 0%, transparent 35%);
    mix-blend-mode: screen;
}

.visual-caption {
    font-family: var(--font-mono-label);
    font-size: 0.72rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--text-umber);
    margin: 0;
    opacity: 0.7;
    text-align: center;
    padding-top: 12px;
    border-top: 1px solid var(--marble-rose);
    width: 80%;
    max-width: 280px;
}

/* =========================
   Strata divider
   ========================= */

.strata-divider {
    position: relative;
    width: 100%;
    height: 60px;
    background: linear-gradient(
        180deg,
        transparent 0%,
        rgba(201, 168, 154, 0.18) 30%,
        rgba(201, 168, 154, 0.34) 50%,
        rgba(201, 168, 154, 0.18) 70%,
        transparent 100%
    );
    overflow: hidden;
    transition: opacity 300ms var(--ease-soft);
    opacity: 0.7;
    cursor: default;
}

.strata-divider:hover {
    opacity: 1;
}

.strata-divider svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.strata-path {
    stroke-dasharray: 2400;
    stroke-dashoffset: 2400;
    transition: stroke-dashoffset 1200ms var(--ease-soft);
    opacity: 0.85;
}

.strata-divider.in-view .strata-path {
    stroke-dashoffset: 0;
}

.strata-rosette {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 22px;
    height: 22px;
    background:
        radial-gradient(circle, var(--accent-sienna) 0%, var(--accent-sienna) 18%, transparent 22%),
        conic-gradient(
            from 0deg,
            var(--marble-rose) 0deg 30deg,
            transparent 30deg 60deg,
            var(--marble-rose) 60deg 90deg,
            transparent 90deg 120deg,
            var(--marble-rose) 120deg 150deg,
            transparent 150deg 180deg,
            var(--marble-rose) 180deg 210deg,
            transparent 210deg 240deg,
            var(--marble-rose) 240deg 270deg,
            transparent 270deg 300deg,
            var(--marble-rose) 300deg 330deg,
            transparent 330deg 360deg
        );
    border-radius: 50%;
    opacity: 0.85;
}

/* =========================
   Chapters
   ========================= */

.chapter {
    padding: var(--section-pad-y) var(--col-pad-x);
    min-height: 80vh;
    display: flex;
    align-items: center;
}

.chapter-grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--gutter);
    align-items: center;
}

.chapter-left .chapter-text {
    grid-column: 1 / span 7;
}

.chapter-left .chapter-visual {
    grid-column: 9 / span 4;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
}

.chapter-right .chapter-visual {
    grid-column: 1 / span 4;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
}

.chapter-right .chapter-text {
    grid-column: 6 / span 7;
}

.chapter-title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(2rem, 4.6vw, 4rem);
    line-height: 1.05;
    letter-spacing: -0.025em;
    margin: 0 0 32px 0;
    color: var(--text-umber);
    position: relative;
    overflow: hidden;
}

.chapter-title .reveal-mask {
    display: inline-block;
    clip-path: inset(0 100% 0 0);
    transition: clip-path 1100ms var(--ease-soft);
}

.reveal.in-view .chapter-title .reveal-mask {
    clip-path: inset(0 0 0 0);
}

.body-text {
    font-family: var(--font-body);
    font-size: clamp(1rem, 1.2vw, 1.125rem);
    line-height: 1.78;
    color: var(--text-umber);
    margin: 0 0 22px 0;
    max-width: var(--measure);
}

.body-text em {
    color: var(--accent-sienna);
    font-style: italic;
}

.dropcap {
    float: left;
    font-family: var(--font-accent);
    font-size: 4em;
    line-height: 0.85;
    padding: 0.05em 0.16em 0 0;
    color: var(--accent-copper);
    font-weight: 400;
}

.pull-quote {
    margin: 36px 0 12px 0;
    padding: 6px 0 6px 28px;
    border-left: 3px solid var(--accent-sienna);
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 500;
    font-size: clamp(1.6rem, 2.6vw, 2.6rem);
    line-height: 1.18;
    letter-spacing: -0.01em;
    color: var(--text-umber);
    max-width: 26ch;
}

.instrument-list {
    list-style: none;
    padding: 18px 0 0 0;
    margin: 18px 0 0 0;
    border-top: 1px solid var(--marble-rose);
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--text-umber);
}

.instrument-list li {
    display: flex;
    align-items: baseline;
    gap: 14px;
    padding: 8px 0;
    border-bottom: 1px dashed rgba(201, 168, 154, 0.5);
    transition: padding-left 300ms var(--ease-soft), color 300ms var(--ease-soft);
}

.instrument-list li:hover {
    padding-left: 6px;
    color: var(--accent-sienna);
}

.list-mark {
    font-family: var(--font-mono-label);
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent-copper);
    min-width: 32px;
}

/* Reveal animations */
.reveal {
    opacity: 0;
    transform: translateY(15px);
    transition: opacity 600ms var(--ease-spring), transform 600ms var(--ease-spring);
}

.reveal.in-view {
    opacity: 1;
    transform: translateY(0);
}

/* =========================
   3D-rendered visuals
   ========================= */

/* Lens disc */
.lens-disc {
    width: clamp(180px, 22vw, 320px);
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    position: relative;
    background:
        radial-gradient(circle at 30% 28%, rgba(255, 255, 255, 0.7) 0%, rgba(45, 158, 138, 0.6) 25%, rgba(74, 124, 111, 0.4) 60%, rgba(33, 79, 71, 0.6) 100%);
    box-shadow:
        inset 0 0 0 1.5px rgba(255, 255, 255, 0.3),
        inset 0 -20px 40px rgba(33, 79, 71, 0.4),
        inset 0 20px 30px rgba(255, 255, 255, 0.25),
        0 18px 40px rgba(26, 18, 13, 0.18),
        -8px 0 20px rgba(196, 90, 60, 0.18),
        8px 0 20px rgba(45, 158, 138, 0.18);
    animation: floatY 5s ease-in-out infinite;
}

.lens-coating {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: radial-gradient(circle at 70% 75%, rgba(212, 168, 67, 0.25) 0%, transparent 35%);
    mix-blend-mode: screen;
}

.lens-aberration {
    position: absolute;
    inset: -3%;
    border-radius: 50%;
    box-shadow:
        -3px 0 0 rgba(196, 90, 60, 0.45),
        3px 0 0 rgba(45, 158, 138, 0.45);
    mix-blend-mode: screen;
    pointer-events: none;
    filter: blur(0.5px);
}

.lens-glint {
    position: absolute;
    top: 15%;
    left: 20%;
    width: 30%;
    height: 14%;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0) 70%);
    filter: blur(2px);
    transform: rotate(-22deg);
}

@keyframes floatY {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-8px); }
}

/* Compound eye */
.compound-eye {
    width: clamp(220px, 26vw, 380px);
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    position: relative;
    animation: floatY 5.5s ease-in-out infinite;
    filter: drop-shadow(0 24px 48px rgba(26, 18, 13, 0.2));
}

.comp-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid transparent;
}

.comp-ring-1 {
    background:
        radial-gradient(circle at 30% 25%, #f5e9d8 0%, #e3d2bf 40%, #c9a89a 100%);
    box-shadow:
        inset 0 0 0 1px rgba(44, 30, 20, 0.2),
        inset 0 -10px 28px rgba(108, 72, 52, 0.35);
}

.comp-ring-1::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(
            44deg,
            transparent 0 12px,
            rgba(196, 90, 60, 0.08) 12px 13px,
            transparent 13px 30px
        ),
        repeating-linear-gradient(
            132deg,
            transparent 0 18px,
            rgba(74, 124, 111, 0.06) 18px 19px,
            transparent 19px 40px
        );
    border-radius: 50%;
    pointer-events: none;
}

.comp-ring-2 {
    inset: 9%;
    background:
        radial-gradient(circle at 30% 25%, #d4a843 0%, #b58530 60%, #6f4d18 100%);
    box-shadow:
        inset 0 0 0 1px rgba(26, 18, 13, 0.3),
        inset 0 -8px 20px rgba(26, 18, 13, 0.4);
}

.comp-ring-3 {
    inset: 22%;
    background:
        radial-gradient(circle at 30% 25%, #e87f63 0%, #c45a3c 50%, #6b2f1e 100%);
    box-shadow:
        inset 0 0 0 1px rgba(26, 18, 13, 0.32),
        inset 0 -10px 20px rgba(26, 18, 13, 0.3);
}

.comp-ring-4 {
    inset: 36%;
    background:
        radial-gradient(circle at 30% 25%, #6fbfae 0%, #4a7c6f 50%, #1f3b35 100%);
    box-shadow:
        inset 0 0 0 1.2px rgba(26, 18, 13, 0.4),
        inset 0 -8px 18px rgba(26, 18, 13, 0.45);
}

.comp-core {
    position: absolute;
    inset: 46%;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 28%, #2c1e14 0%, #1a120d 60%, #000 100%);
    box-shadow:
        0 0 0 2px rgba(212, 168, 67, 0.4),
        0 0 24px rgba(45, 158, 138, 0.45),
        inset 0 0 10px rgba(0, 0, 0, 0.6);
}

/* Iris bloom */
.iris-bloom {
    width: clamp(200px, 24vw, 340px);
    aspect-ratio: 1 / 1;
    position: relative;
    animation: bloomRotate 28s linear infinite, floatY 5s ease-in-out infinite;
    filter: drop-shadow(0 18px 36px rgba(26, 18, 13, 0.18));
}

@keyframes bloomRotate {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

.bloom-petal {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 60%;
    height: 32%;
    border-radius: 100% 100% 100% 100% / 100% 100% 0 0;
    transform-origin: 50% 100%;
    background: linear-gradient(180deg, rgba(196, 90, 60, 0.22) 0%, rgba(212, 168, 67, 0.45) 50%, rgba(45, 158, 138, 0.32) 100%);
    box-shadow: inset 0 0 0 1px rgba(44, 30, 20, 0.18);
    mix-blend-mode: multiply;
}

.bloom-1 { transform: translate(-50%, -100%) rotate(0deg); }
.bloom-2 { transform: translate(-50%, -100%) rotate(60deg); }
.bloom-3 { transform: translate(-50%, -100%) rotate(120deg); }
.bloom-4 { transform: translate(-50%, -100%) rotate(180deg); }
.bloom-5 { transform: translate(-50%, -100%) rotate(240deg); }
.bloom-6 { transform: translate(-50%, -100%) rotate(300deg); }

.bloom-core {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 28%;
    height: 28%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background:
        radial-gradient(circle at 30% 28%, #2d9e8a 0%, #214f47 60%, #102e29 100%);
    box-shadow:
        0 0 0 1.5px rgba(26, 18, 13, 0.5),
        inset 0 0 12px rgba(0, 0, 0, 0.4),
        0 0 24px rgba(212, 168, 67, 0.35);
}

/* Reticle */
.reticle-frame {
    margin-top: 32px;
    padding: 24px;
    border: 1px solid var(--marble-rose);
    background: rgba(242, 235, 224, 0.6);
    display: inline-block;
}

.reticle {
    position: relative;
    width: 140px;
    height: 140px;
    margin: 0 auto;
}

.reticle-arm {
    position: absolute;
    background: var(--text-umber);
}

.reticle-arm-h {
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    transform: translateY(-50%);
}

.reticle-arm-v {
    top: 0;
    left: 50%;
    bottom: 0;
    width: 1px;
    transform: translateX(-50%);
}

.reticle-circle {
    position: absolute;
    inset: 25%;
    border: 1px solid var(--accent-sienna);
    border-radius: 50%;
}

.reticle-circle::after {
    content: "";
    position: absolute;
    inset: 30%;
    border: 1px solid var(--accent-copper);
    border-radius: 50%;
}

.reticle-tick {
    position: absolute;
    background: var(--accent-sienna);
}

.reticle-tick-n, .reticle-tick-s { width: 1px; height: 8px; left: 50%; transform: translateX(-50%); }
.reticle-tick-n { top: 4px; }
.reticle-tick-s { bottom: 4px; }
.reticle-tick-e, .reticle-tick-w { height: 1px; width: 8px; top: 50%; transform: translateY(-50%); }
.reticle-tick-e { right: 4px; }
.reticle-tick-w { left: 4px; }

.reticle-caption {
    font-family: var(--font-mono-label);
    font-size: 0.66rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--text-umber);
    opacity: 0.7;
    margin: 14px 0 0 0;
    text-align: center;
}

/* Strata stack */
.strata-stack {
    width: clamp(200px, 24vw, 340px);
    aspect-ratio: 4 / 5;
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    box-shadow:
        inset 0 0 0 1px rgba(44, 30, 20, 0.2),
        0 18px 40px rgba(26, 18, 13, 0.18);
    animation: floatY 5.5s ease-in-out infinite;
}

.strata-layer {
    position: absolute;
    left: 0;
    right: 0;
    background-size: 200% 200%;
}

.layer-1 {
    top: 0;
    height: 22%;
    background:
        repeating-linear-gradient(98deg, rgba(255,255,255,0.18) 0 8px, transparent 8px 22px),
        linear-gradient(180deg, #f5e9d8 0%, #d8c2ad 100%);
}

.layer-2 {
    top: 22%;
    height: 18%;
    background:
        repeating-linear-gradient(102deg, rgba(255,255,255,0.12) 0 6px, transparent 6px 18px),
        linear-gradient(180deg, #c9a89a 0%, #b08770 100%);
}

.layer-3 {
    top: 40%;
    height: 22%;
    background:
        repeating-linear-gradient(94deg, rgba(255,255,255,0.1) 0 5px, transparent 5px 16px),
        linear-gradient(180deg, #d4a843 0%, #a87f28 100%);
}

.layer-4 {
    top: 62%;
    height: 18%;
    background:
        repeating-linear-gradient(106deg, rgba(255,255,255,0.1) 0 4px, transparent 4px 14px),
        linear-gradient(180deg, #c45a3c 0%, #7a3018 100%);
}

.layer-5 {
    top: 80%;
    height: 20%;
    background:
        repeating-linear-gradient(110deg, rgba(255,255,255,0.08) 0 6px, transparent 6px 20px),
        linear-gradient(180deg, #2d9e8a 0%, #1a120d 100%);
}

.strata-bore {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 26%;
    aspect-ratio: 1 / 1;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle at 30% 28%, rgba(255, 255, 255, 0.4) 0%, rgba(26, 18, 13, 0.85) 60%, #000 100%);
    box-shadow:
        inset 0 0 0 2px rgba(212, 168, 67, 0.55),
        0 0 0 6px rgba(242, 235, 224, 0.7),
        0 0 0 7px rgba(44, 30, 20, 0.4);
}

/* =========================
   Convergence (centered final)
   ========================= */

.convergence {
    padding: calc(var(--section-pad-y) * 1.2) var(--col-pad-x);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 90vh;
    position: relative;
}

.convergence-inner {
    max-width: 760px;
    margin: 0 auto;
}

.convergence-title {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 500;
    font-size: clamp(2.2rem, 5vw, 4.4rem);
    line-height: 1.08;
    letter-spacing: -0.02em;
    color: var(--text-umber);
    margin: 0 0 32px 0;
}

.convergence-text {
    font-family: var(--font-body);
    font-size: clamp(1rem, 1.3vw, 1.2rem);
    line-height: 1.8;
    color: var(--text-umber);
    margin: 0 0 18px 0;
}

.convergence-text.quiet {
    color: var(--accent-copper);
    font-style: italic;
    margin-top: 24px;
}

.convergence-mark {
    margin-top: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

.mark-rule {
    width: 80px;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, var(--marble-rose) 50%, transparent 100%);
}

.mark-plus svg {
    width: 36px;
    height: 36px;
}

/* =========================
   Colophon (footer)
   ========================= */

.colophon {
    background: var(--deep-volcanic);
    color: var(--bg-parchment);
    padding: clamp(64px, 9vh, 110px) var(--col-pad-x);
    margin-top: 60px;
    position: relative;
    overflow: hidden;
}

.colophon::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 12% 30%, rgba(212, 168, 67, 0.08) 0%, transparent 40%),
        radial-gradient(circle at 86% 78%, rgba(45, 158, 138, 0.08) 0%, transparent 45%);
    pointer-events: none;
}

.colophon-inner {
    position: relative;
    display: grid;
    grid-template-columns: 2fr 2fr 1fr;
    gap: var(--gutter);
    align-items: start;
}

.colophon-block {
    max-width: 44ch;
}

.colophon-text {
    font-family: var(--font-body);
    font-size: 0.95rem;
    line-height: 1.7;
    color: rgba(242, 235, 224, 0.84);
    margin: 0;
}

.colophon-mark {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.mark-monogram {
    font-family: var(--font-accent);
    font-size: 2.4rem;
    color: var(--accent-amber);
    letter-spacing: -0.02em;
}

/* =========================
   Hover, links
   ========================= */

a {
    color: inherit;
    text-decoration: none;
    position: relative;
}

a.text-link {
    color: var(--accent-sienna);
    background-image: linear-gradient(var(--accent-sienna), var(--accent-sienna));
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 0% 1px;
    transition: background-size 300ms var(--ease-soft);
}

a.text-link:hover {
    background-size: 100% 1px;
}

/* =========================
   Responsive
   ========================= */

@media (max-width: 980px) {
    .hero-grid,
    .chapter-grid {
        grid-template-columns: 1fr;
    }

    .hero-text,
    .hero-visual,
    .chapter-left .chapter-text,
    .chapter-left .chapter-visual,
    .chapter-right .chapter-text,
    .chapter-right .chapter-visual {
        grid-column: 1 / -1;
    }

    .hero-visual,
    .chapter-visual {
        order: 2;
        margin-top: 32px;
    }

    .colophon-inner {
        grid-template-columns: 1fr;
    }

    .colophon-mark {
        justify-content: flex-start;
    }
}

@media (max-width: 600px) {
    .monogram {
        top: 16px;
        left: 16px;
        width: 40px;
        height: 40px;
    }

    .pull-quote {
        font-size: 1.4rem;
    }

    .hero-title {
        font-size: clamp(3rem, 14vw, 5rem);
    }
}