/* alth.ing — retro-futuristic basaltic senate */

:root {
    /* Coastal Blend palette */
    --basalt-ink: #0E1418;
    --basalt-ink-2: #17232A;
    --fjord-ink: #1B2A33;
    --saltfog: #EEF2F1;
    --kelp-shadow: #2F4B4A;
    --kelp-deep: #284544;
    --rift-cyan: #7EC4CF;
    --tide-pearl: #C9D5D4;
    --chrome-silver: #B7BFC4;
    --ember-sodium: #F3A65B;

    /* Type */
    --serif: 'Libre Baskerville', 'Cormorant', 'Playfair Display', Georgia, serif;
    --display: 'Cormorant Infant', 'Cormorant', 'Playfair Display', Georgia, serif;
    --mono: 'IBM Plex Mono', 'Inter', 'Space Mono', ui-monospace, monospace;

    /* Grid */
    --grid-cols: 12;
    --grid-gap: 32px;
    --outer-margin: 60px;
    --max-width: 1320px;

    /* Motion */
    --ease-out: cubic-bezier(.22, 1, .36, 1);
    --dur-fast: 240ms;
    --dur-mid: 480ms;
    --dur-slow: 620ms;
}

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

html, body {
    background: var(--saltfog);
    color: var(--fjord-ink);
    font-family: var(--serif);
    font-size: 17px;
    line-height: 1.62;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body {
    overflow-x: hidden;
    background:
        radial-gradient(circle at 20% 0%, rgba(126, 196, 207, 0.04) 0%, transparent 40%),
        radial-gradient(circle at 80% 100%, rgba(243, 166, 91, 0.025) 0%, transparent 50%),
        var(--saltfog);
    min-height: 100vh;
}

.svg-defs {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

/* ---------- Wordmark ---------- */
.wordmark {
    position: fixed;
    top: 28px;
    left: var(--outer-margin);
    z-index: 100;
    color: var(--basalt-ink);
    text-decoration: none;
    font-family: var(--serif);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.14em;
    line-height: 1;
    text-transform: uppercase;
    display: inline-flex;
    align-items: baseline;
    mix-blend-mode: normal;
}

.wordmark__lower {
    text-transform: lowercase;
    letter-spacing: 0.05em;
    margin-left: 1px;
    font-style: italic;
    font-weight: 400;
}

.wordmark__dot {
    display: inline-block;
    width: 4px;
    height: 4px;
    background: var(--basalt-ink);
    border-radius: 50%;
    margin-left: 4px;
    margin-bottom: 1px;
    transform-origin: center;
    transition: transform 360ms var(--ease-out);
}

.wordmark.is-gavel .wordmark__dot {
    animation: gavel-pulse 0.9s var(--ease-out) 1;
}

@keyframes gavel-pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.3); }
    100% { transform: scale(1); }
}

/* ---------- Menu square ---------- */
.menu-square {
    position: fixed;
    top: 22px;
    right: var(--outer-margin);
    z-index: 100;
    width: 53px;
    height: 53px;
    background: var(--basalt-ink);
    border: none;
    cursor: pointer;
    padding: 0;
    transform-origin: center;
    transition: transform 360ms var(--ease-out), width 360ms var(--ease-out), height 360ms var(--ease-out), background 360ms var(--ease-out);
    overflow: hidden;
    color: var(--saltfog);
}

.menu-square::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0%, transparent 60%),
        radial-gradient(circle at 30% 30%, rgba(126, 196, 207, 0.08) 0%, transparent 70%);
    pointer-events: none;
}

.menu-square__rule {
    position: absolute;
    left: 12px;
    right: 12px;
    height: 1px;
    background: var(--chrome-silver);
    opacity: 0.85;
    transition: opacity 360ms var(--ease-out), transform 360ms var(--ease-out);
}

.menu-square__rule:nth-child(1) { top: 17px; }
.menu-square__rule:nth-child(2) { top: 26px; }
.menu-square__rule:nth-child(3) { top: 35px; }

.menu-square.is-open {
    width: 166px;
    height: 166px;
    transform: rotate(90deg);
}

.menu-square.is-open .menu-square__rule {
    opacity: 0;
}

.menu-ledger {
    position: absolute;
    inset: 0;
    list-style: none;
    margin: 0;
    padding: 30px 26px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 14px;
    transform: rotate(-90deg);
    opacity: 0;
    pointer-events: none;
    transition: opacity 360ms var(--ease-out);
}

.menu-square.is-open .menu-ledger {
    opacity: 1;
    pointer-events: auto;
}

.menu-ledger li a {
    color: var(--saltfog);
    text-decoration: none;
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    display: block;
    padding: 4px 0;
    border-bottom: 1px solid rgba(183, 191, 196, 0.18);
    transition: color 240ms var(--ease-out), border-color 240ms var(--ease-out);
}

.menu-ledger li a:hover {
    color: var(--rift-cyan);
    border-color: var(--rift-cyan);
}

/* ---------- Chamber & blocks ---------- */
.chamber {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 130px var(--outer-margin) 80px;
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.block {
    display: block;
    position: relative;
    isolation: isolate;
    background: var(--basalt-ink);
    color: var(--saltfog);
    overflow: hidden;
    transition: transform 480ms var(--ease-out);
}

/* Marble substrate */
.block::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 30% 20%, rgba(201, 213, 212, 0.05) 0%, transparent 55%),
        radial-gradient(ellipse at 70% 90%, rgba(201, 213, 212, 0.04) 0%, transparent 60%),
        linear-gradient(135deg, var(--basalt-ink) 0%, var(--basalt-ink-2) 50%, var(--basalt-ink) 100%);
    z-index: -2;
}

.block::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='420' height='420'><filter id='m'><feTurbulence type='fractalNoise' baseFrequency='0.012 0.028' numOctaves='3' seed='7'/><feColorMatrix values='0 0 0 0 0.788  0 0 0 0 0.835  0 0 0 0 0.831  0 0 0 0.14 0'/></filter><rect width='100%25' height='100%25' filter='url(%23m)'/></svg>");
    background-size: 600px 600px;
    mix-blend-mode: screen;
    opacity: 0.55;
    z-index: -1;
    animation: marble-creep 180s linear infinite;
    pointer-events: none;
}

@keyframes marble-creep {
    0% { background-position: 0 0; }
    100% { background-position: -360px 320px; }
}

/* The chrome seam — central vertical rule */
.block__seam {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--chrome-silver);
    opacity: 0.18;
    transform-origin: top center;
    z-index: 5;
    pointer-events: none;
    transition: opacity 480ms var(--ease-out), background 480ms var(--ease-out);
}

.block__seam::before,
.block__seam::after {
    content: '';
    position: absolute;
    left: -1.5px;
    width: 4px;
    height: 0;
    background: var(--rift-cyan);
    opacity: 0;
    transition: opacity 480ms var(--ease-out), height 620ms var(--ease-out);
}

.block__seam::before { top: 0; }
.block__seam::after { bottom: 0; }

.block.is-visible .block__seam::before,
.block.is-visible .block__seam::after {
    height: 50%;
}

/* Block hover — seam-open */
.block .block__inner > * {
    transition: transform 480ms var(--ease-out);
}

.block:hover .block__seam {
    opacity: 0.55;
    background: var(--rift-cyan);
}

.block:hover .block__label {
    color: var(--rift-cyan);
    transform: translate(8px, -2px);
    font-size: 13px;
}

/* Block label */
.block__label {
    position: absolute;
    top: 18px;
    left: 22px;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--chrome-silver);
    opacity: 0.78;
    z-index: 6;
    transition: color 480ms var(--ease-out), transform 480ms var(--ease-out), font-size 480ms var(--ease-out);
}

.block__inner {
    position: relative;
    z-index: 2;
    padding: 64px 48px;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--grid-gap);
}

/* ---------- Stapi block ---------- */
.stapi {
    min-height: 78vh;
    display: flex;
    align-items: center;
}

.stapi__inner {
    grid-template-columns: repeat(12, 1fr);
    width: 100%;
    padding: 96px 64px;
}

.stapi__headline {
    grid-column: 1 / span 11;
    font-family: var(--serif);
    font-weight: 700;
    font-size: clamp(2.4rem, 5.2vw, 4.6rem);
    line-height: 1.08;
    letter-spacing: -0.015em;
    color: var(--saltfog);
    position: relative;
    margin-bottom: 38px;
}

.gavel-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    background: var(--ember-sodium);
    border-radius: 50%;
    margin-left: 6px;
    vertical-align: baseline;
    transform-origin: center;
    animation: gavel-init 0.9s var(--ease-out) 1 0.4s both;
    box-shadow: 0 0 18px rgba(243, 166, 91, 0.4);
}

@keyframes gavel-init {
    0% { transform: scale(0); }
    55% { transform: scale(1.3); }
    100% { transform: scale(1); }
}

.stapi__lede {
    grid-column: 1 / span 7;
    font-size: 17px;
    line-height: 1.62;
    color: var(--tide-pearl);
    max-width: 64ch;
}

.stapi__meta {
    grid-column: 9 / span 4;
    align-self: end;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--chrome-silver);
    display: flex;
    align-items: center;
    gap: 12px;
    opacity: 0.85;
}

.stapi__blobs {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 0;
    opacity: 0.2;
    pointer-events: none;
}

.blob {
    position: absolute;
    border-radius: 42% 58% 63% 37% / 49% 53% 47% 51%;
    background: linear-gradient(180deg, rgba(126, 196, 207, 0.4) 0%, rgba(243, 166, 91, 0.12) 100%);
    filter: blur(36px);
    will-change: transform, border-radius;
}

.blob--a {
    width: 520px;
    height: 520px;
    top: -120px;
    left: -100px;
    animation: morph-a 28s ease-in-out infinite;
}

.blob--b {
    width: 360px;
    height: 360px;
    bottom: -80px;
    right: -60px;
    animation: morph-b 32s ease-in-out infinite;
}

@keyframes morph-a {
    0%, 100% { border-radius: 42% 58% 63% 37% / 49% 53% 47% 51%; transform: translate(0, 0) rotate(0deg); }
    33% { border-radius: 60% 40% 47% 53% / 38% 62% 38% 62%; transform: translate(30px, 40px) rotate(45deg); }
    66% { border-radius: 35% 65% 55% 45% / 60% 40% 60% 40%; transform: translate(-20px, 30px) rotate(-30deg); }
}

@keyframes morph-b {
    0%, 100% { border-radius: 55% 45% 38% 62% / 42% 58% 42% 58%; transform: translate(0, 0) rotate(0deg); }
    50% { border-radius: 38% 62% 60% 40% / 55% 45% 55% 45%; transform: translate(-40px, -30px) rotate(60deg); }
}

/* ---------- Column triad ---------- */
.column--triad .triad {
    grid-template-columns: repeat(12, 1fr);
}

.col {
    grid-column: span 4;
    padding: 18px 8px;
    position: relative;
}

.col__index {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--chrome-silver);
    opacity: 0.7;
    display: block;
    margin-bottom: 18px;
}

.glyph {
    width: 32px;
    height: 32px;
    color: var(--chrome-silver);
    display: block;
    margin-bottom: 22px;
    overflow: visible;
}

.glyph path,
.glyph circle {
    transition: stroke-dashoffset 420ms var(--ease-out);
}

.col:hover .glyph,
.col__h:hover ~ .glyph {
    color: var(--rift-cyan);
}

.glyph:hover {
    color: var(--rift-cyan);
}

.glyph.is-tracing path {
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    animation: glyph-trace 420ms var(--ease-out) forwards;
}

@keyframes glyph-trace {
    to { stroke-dashoffset: 0; }
}

.col__h {
    font-family: var(--serif);
    font-weight: 700;
    font-size: 1.6rem;
    line-height: 1.15;
    letter-spacing: -0.012em;
    color: var(--saltfog);
    margin-bottom: 14px;
}

.col__p {
    font-size: 16px;
    line-height: 1.62;
    color: var(--tide-pearl);
    max-width: 32ch;
}

.column--fan .col--tilt-left { transform: rotate(0.5deg); }
.column--fan .col--tilt-mid { transform: rotate(0deg); }
.column--fan .col--tilt-right { transform: rotate(-0.5deg); }

/* ---------- Rift block ---------- */
.rift__inner {
    grid-template-columns: repeat(12, 1fr);
    padding: 80px 56px;
    align-items: center;
}

.rift--left .rift__caption {
    grid-column: 1 / span 4;
    border-right: 1px solid var(--chrome-silver);
    padding-right: 28px;
}

.rift--left .rift__body {
    grid-column: 6 / span 7;
}

.rift--right .rift__body {
    grid-column: 1 / span 7;
}

.rift--right .rift__caption {
    grid-column: 9 / span 4;
    border-left: 1px solid var(--chrome-silver);
    padding-left: 28px;
}

.rift__quote {
    font-family: var(--display);
    font-style: italic;
    font-weight: 500;
    font-size: clamp(2.2rem, 5vw, 4.2rem);
    line-height: 1.08;
    letter-spacing: -0.02em;
    color: var(--rift-cyan);
    opacity: 0.88;
    margin-bottom: 16px;
}

.rift__cite {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--chrome-silver);
    opacity: 0.6;
}

.rift__body p {
    font-size: 17px;
    line-height: 1.62;
    color: var(--tide-pearl);
    max-width: 64ch;
}

/* The rift's chrome rule on offset side */
.rift--left::after,
.rift--right::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--chrome-silver);
    opacity: 0.35;
    z-index: 4;
}

.rift--left::after {
    right: 33%;
}

.rift--right::after {
    left: 33%;
}

/* ---------- Slab ---------- */
.slab {
    background: var(--saltfog);
    color: var(--basalt-ink);
}

.slab::before {
    background:
        radial-gradient(ellipse at 50% 50%, rgba(201, 213, 212, 0.3) 0%, transparent 70%),
        var(--saltfog);
}

.slab::after {
    opacity: 0.18;
    mix-blend-mode: multiply;
}

.slab .block__seam {
    background: var(--kelp-shadow);
    opacity: 0.22;
}

.slab .block__label {
    color: var(--kelp-shadow);
    opacity: 0.6;
}

.slab__inner {
    min-height: 220px;
    padding: 56px 48px;
    grid-template-columns: 1fr;
    place-items: center;
    text-align: center;
}

.slab__decree {
    font-family: var(--serif);
    font-weight: 700;
    font-size: clamp(1.8rem, 3.4vw, 2.6rem);
    line-height: 1.18;
    letter-spacing: -0.012em;
    color: var(--basalt-ink);
    text-transform: lowercase;
}

.slab__decree::first-letter {
    text-transform: uppercase;
}

.slab__rule {
    width: 64px;
    height: 1px;
    background: var(--chrome-silver);
    margin-top: 22px;
    display: block;
}

/* Closing slab */
.slab--closing .slab__inner--closing {
    flex-direction: column;
    padding: 96px 48px;
    gap: 30px;
}

.seal {
    width: 96px;
    height: 96px;
    cursor: default;
}

.seal__svg {
    width: 100%;
    height: 100%;
}

.seal__ring {
    transform-origin: center;
    transition: opacity 900ms var(--ease-out);
}

.seal.is-breath .seal__ring {
    animation: seal-breath 900ms var(--ease-out) 1;
}

@keyframes seal-breath {
    0% { opacity: 1; }
    50% { opacity: 0.74; }
    100% { opacity: 1; }
}

.seal__caption {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
    font-size: 1.05rem;
    color: var(--fjord-ink);
}

/* Footer slab */
.slab--footer .slab__inner--footer {
    padding: 28px 48px;
    min-height: 0;
}

.footer__line {
    font-family: var(--serif);
    font-style: italic;
    font-size: 11px;
    color: var(--kelp-shadow);
    letter-spacing: 0.04em;
    line-height: 1.6;
    text-align: center;
}

/* ---------- Tide block ---------- */
.tide__inner {
    grid-template-columns: repeat(12, 1fr);
    padding: 72px 48px;
    align-items: start;
}

.tide__half {
    grid-column: span 6;
    padding: 20px;
    transition: transform 600ms var(--ease-out);
    position: relative;
}

.tide__half--ebb {
    border-right: 1px solid rgba(183, 191, 196, 0.18);
    padding-right: 36px;
}

.tide__half--flow {
    padding-left: 36px;
}

.tide__h {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
    font-size: 1.4rem;
    color: var(--saltfog);
    margin-bottom: 18px;
    letter-spacing: -0.01em;
}

.tide__half p {
    font-size: 16px;
    line-height: 1.62;
    color: var(--tide-pearl);
    margin-bottom: 22px;
}

.tide__coord {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--chrome-silver);
    opacity: 0.6;
    display: block;
}

/* ---------- Lava block ---------- */
.lava {
    min-height: 60vh;
    overflow: hidden;
}

.lava__field {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.blob--lava {
    filter: blur(46px);
    opacity: 0.7;
}

.blob--lava-a {
    width: 560px;
    height: 560px;
    top: -100px;
    left: 8%;
    background: linear-gradient(180deg, rgba(126, 196, 207, 0.5) 0%, rgba(243, 166, 91, 0.16) 100%);
    animation: lava-drift-a 28s ease-in-out infinite;
}

.blob--lava-b {
    width: 440px;
    height: 440px;
    bottom: -80px;
    right: 12%;
    background: linear-gradient(200deg, rgba(126, 196, 207, 0.45) 0%, rgba(243, 166, 91, 0.18) 100%);
    animation: lava-drift-b 32s ease-in-out infinite;
}

.blob--lava-c {
    width: 320px;
    height: 320px;
    top: 30%;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(180deg, rgba(126, 196, 207, 0.4) 0%, rgba(243, 166, 91, 0.14) 100%);
    animation: lava-drift-c 36s ease-in-out infinite;
}

@keyframes lava-drift-a {
    0%, 100% { border-radius: 42% 58% 63% 37% / 49% 53% 47% 51%; transform: translate(0, 0) rotate(0deg); }
    33% { border-radius: 60% 40% 47% 53% / 38% 62% 38% 62%; transform: translate(80px, 60px) rotate(45deg); }
    66% { border-radius: 35% 65% 55% 45% / 60% 40% 60% 40%; transform: translate(-50px, 80px) rotate(-30deg); }
}

@keyframes lava-drift-b {
    0%, 100% { border-radius: 55% 45% 38% 62% / 42% 58% 42% 58%; transform: translate(0, 0) rotate(0deg); }
    50% { border-radius: 38% 62% 60% 40% / 55% 45% 55% 45%; transform: translate(-100px, -60px) rotate(70deg); }
}

@keyframes lava-drift-c {
    0%, 100% { border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%; transform: translateX(-50%) translateY(0) rotate(0deg); }
    50% { border-radius: 38% 62% 50% 50% / 60% 40% 50% 50%; transform: translateX(-50%) translateY(-60px) rotate(-50deg); }
}

.lava__timecode {
    position: absolute;
    bottom: 28px;
    right: 32px;
    z-index: 5;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ember-sodium);
}

.lava__timecode .swap {
    display: inline-block;
    transition: opacity 240ms var(--ease-out);
}

.lava__timecode .swap.is-fading {
    opacity: 0;
}

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
    :root {
        --outer-margin: 24px;
        --grid-gap: 16px;
    }

    html, body {
        font-size: 16px;
        line-height: 1.58;
    }

    .chamber {
        padding: 110px var(--outer-margin) 60px;
        gap: 18px;
    }

    .block__inner,
    .stapi__inner,
    .rift__inner,
    .tide__inner {
        padding: 48px 28px;
    }

    .stapi__headline { grid-column: 1 / span 12; }
    .stapi__lede { grid-column: 1 / span 12; }
    .stapi__meta { grid-column: 1 / span 12; margin-top: 24px; }

    .col { grid-column: span 12; padding: 14px 4px; }

    .rift--left .rift__caption,
    .rift--right .rift__caption,
    .rift--left .rift__body,
    .rift--right .rift__body {
        grid-column: 1 / span 12;
        border: none;
        padding: 0 0 22px 0;
    }

    .rift__inner { gap: 22px; }

    .tide__half {
        grid-column: span 12;
        border: none !important;
        padding: 14px 4px;
    }

    .menu-square { right: 18px; top: 18px; width: 44px; height: 44px; }
    .menu-square__rule:nth-child(1) { top: 14px; }
    .menu-square__rule:nth-child(2) { top: 22px; }
    .menu-square__rule:nth-child(3) { top: 30px; }
    .menu-square.is-open { width: 140px; height: 140px; }

    .wordmark { left: 22px; top: 22px; font-size: 14px; }

    .rift--left::after,
    .rift--right::after { display: none; }
}

/* Visible-state cue */
.block.is-visible {
    transform: translateY(0);
}

.block {
    transform: translateY(8px);
    opacity: 0;
    transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
}

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