/* ============================================================
   jill.stream — CSS
   Palette: Seapunk-Classical / Retro-Futuristic
   Fonts: Nunito 800 (display), Jost 400 (body), DM Mono 400 (meta)
   ============================================================ */

/* ── Variables ─────────────────────────────────────────────── */
:root {
    --teal:        #0BCEBC;
    --violet:      #5B2E8A;
    --ivory:       #F5EFE0;
    --abyssal:     #1A0D2E;
    --magenta:     #E040FB;
    --travertine:  #B8A99A;
    --static-white:#F0F0F0;
    --gutter:      16px;
    --nav-h:       48px;
    --font-display:'Nunito', sans-serif;
    --font-body:   'Jost', sans-serif;
    --font-mono:   'DM Mono', monospace;
}

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

html {
    scroll-behavior: smooth;
}

body {
    background: var(--abyssal);
    color: var(--ivory);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.7;
    overflow-x: hidden;
}

/* ── Navigation ─────────────────────────────────────────────── */
.nav-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--nav-h);
    background: var(--ivory);
    z-index: 1000;
    overflow: hidden;
}

.nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    padding: 0 24px;
    position: relative;
    z-index: 2;
}

/* Marble vein on nav background */
.nav-bar::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='48'%3E%3Cpath d='M0,24 Q80,8 160,30 Q240,52 320,18 Q380,4 400,24' stroke='%23B8A99A' stroke-width='0.8' fill='none' opacity='0.4'/%3E%3Cpath d='M0,36 Q60,20 140,38 Q200,52 280,22 Q340,8 400,32' stroke='%23B8A99A' stroke-width='0.5' fill='none' opacity='0.3'/%3E%3Cpath d='M50,0 Q90,48 130,12 Q170,-4 210,48' stroke='%235B2E8A' stroke-width='0.4' fill='none' opacity='0.15'/%3E%3C/svg%3E") repeat-x;
    z-index: 1;
}

.nav-domain {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 22px;
    color: var(--abyssal);
    letter-spacing: -0.02em;
    position: relative;
    z-index: 3;
}

.nav-links {
    display: flex;
    gap: 28px;
    list-style: none;
    position: relative;
    z-index: 3;
}

.nav-links a {
    font-family: var(--font-body);
    font-size: 12px;
    font-variant: small-caps;
    letter-spacing: 0.1em;
    color: var(--abyssal);
    text-decoration: none;
    text-transform: lowercase;
    transition: color 0.2s;
}

.nav-links a:hover {
    color: var(--violet);
}

/* Nav bottom glitch border */
.nav-glitch-border {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--teal);
    z-index: 10;
    animation: nav-border-glitch 6s steps(1) infinite;
}

@keyframes nav-border-glitch {
    0%   { clip-path: inset(0 0 0 0); background: var(--teal); }
    10%  { clip-path: inset(0 30% 0 20%); background: var(--magenta); transform: translateX(-2px); }
    11%  { clip-path: inset(0 0 0 0); background: var(--teal); transform: translateX(0); }
    50%  { clip-path: inset(0 0 0 0); background: var(--teal); }
    60%  { clip-path: inset(0 50% 0 10%); background: var(--teal); transform: translateX(1px); }
    61%  { clip-path: inset(0 0 0 0); background: var(--teal); transform: translateX(0); }
    100% { clip-path: inset(0 0 0 0); background: var(--teal); }
}

/* ── Section Base ───────────────────────────────────────────── */
.section {
    min-height: 100vh;
    width: 100%;
    position: relative;
    padding: var(--gutter);
    overflow: hidden;
}

.section-dark {
    background: var(--abyssal);
    color: var(--ivory);
}

.section-light {
    background: var(--ivory);
    color: var(--abyssal);
}

/* First section offset for nav */
.section-praetorium {
    padding-top: calc(var(--nav-h) + 24px);
}

/* ── Scanline Overlay ───────────────────────────────────────── */
.scanline-overlay {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        to bottom,
        transparent 0px,
        transparent 3px,
        rgba(11, 206, 188, 0.08) 3px,
        rgba(11, 206, 188, 0.08) 4px
    );
    pointer-events: none;
    z-index: 100;
}

/* ── Forum Grid ─────────────────────────────────────────────── */
.forum-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: var(--gutter);
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 2;
}

/* ── Section 1: Praetorium ──────────────────────────────────── */
.praetorium-grid {
    grid-template-columns: 3fr 1fr;
    min-height: calc(100vh - var(--nav-h) - 24px - 32px);
    align-items: stretch;
}

.praetorium-block {
    position: relative;
    background: linear-gradient(135deg, #150a25 0%, #1A0D2E 40%, #0d1a1f 100%);
    border: 1px solid rgba(11, 206, 188, 0.15);
    overflow: hidden;
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Marble texture on praetorium block */
.marble-texture-overlay {
    position: absolute;
    inset: 0;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='400'%3E%3Cpath d='M0,200 Q150,120 300,200 Q450,280 600,180' stroke='%23B8A99A' stroke-width='0.6' fill='none' opacity='0.12'/%3E%3Cpath d='M0,100 Q100,60 200,120 Q300,180 400,80 Q500,20 600,100' stroke='%23B8A99A' stroke-width='0.5' fill='none' opacity='0.08'/%3E%3Cpath d='M0,320 Q120,260 240,320 Q360,380 480,300 Q540,270 600,320' stroke='%23B8A99A' stroke-width='0.5' fill='none' opacity='0.1'/%3E%3Cpath d='M100,0 Q180,100 160,200 Q140,300 200,400' stroke='%235B2E8A' stroke-width='0.5' fill='none' opacity='0.08'/%3E%3Cpath d='M400,0 Q350,80 380,200 Q410,320 360,400' stroke='%235B2E8A' stroke-width='0.4' fill='none' opacity='0.06'/%3E%3C/svg%3E") center/cover;
    opacity: 0.15;
    pointer-events: none;
}

.praetorium-svg-motif {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
}

.classical-motif {
    width: 90%;
    max-width: 600px;
    height: auto;
    opacity: 0.85;
}

/* Glitch border on praetorium block */
.praetorium-glitch-border {
    position: absolute;
    inset: 0;
    border: 2px solid var(--teal);
    pointer-events: none;
    z-index: 50;
    animation: praetorium-glitch 6s steps(1) infinite;
}

@keyframes praetorium-glitch {
    0%   { border-color: var(--teal); clip-path: none; transform: none; }
    88%  { border-color: var(--teal); clip-path: none; transform: none; }
    89%  { border-color: var(--magenta); clip-path: inset(20% 0 70% 0); transform: translateX(-3px); }
    90%  { border-color: var(--teal); clip-path: inset(60% 0 10% 0); transform: translateX(2px); }
    91%  { border-color: var(--teal); clip-path: none; transform: translateX(-1px); }
    92%  { clip-path: none; transform: none; border-color: var(--teal); }
    93%  { clip-path: inset(10% 0 80% 0); border-color: var(--violet); transform: translateX(4px); }
    94%  { clip-path: none; transform: none; border-color: var(--teal); }
    100% { border-color: var(--teal); clip-path: none; transform: none; }
}

/* Pixel sort columns */
.pixel-sort-left, .pixel-sort-right {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 16px;
    z-index: 40;
    pointer-events: none;
    overflow: hidden;
    animation: pixel-sort-anim 8s steps(1) infinite;
}

.pixel-sort-left { left: 0; }
.pixel-sort-right { right: 0; }

@keyframes pixel-sort-anim {
    0%   { opacity: 0; }
    85%  { opacity: 0; }
    86%  { opacity: 1; background: linear-gradient(to bottom, var(--teal), var(--violet), var(--magenta), var(--teal), transparent); }
    89%  { opacity: 0; }
    100% { opacity: 0; }
}

/* Praetorium Sidebar */
.praetorium-sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--gutter);
    justify-content: center;
    padding: 20px 0;
}

.praetorium-title-block {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 8px;
}

.domain-name {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(36px, 5vw, 72px);
    color: var(--ivory);
    letter-spacing: -0.02em;
    line-height: 1;
    position: relative;
}

/* Chromatic aberration on domain name */
.domain-name::before {
    content: 'jill.stream';
    position: absolute;
    left: -2px;
    top: 0;
    color: var(--teal);
    opacity: 0.4;
    z-index: -1;
    pointer-events: none;
}

.domain-name::after {
    content: 'jill.stream';
    position: absolute;
    left: 2px;
    top: 1px;
    color: var(--violet);
    opacity: 0.3;
    z-index: -1;
    pointer-events: none;
}

.domain-descriptor {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--teal);
    letter-spacing: 0.04em;
    line-height: 1.5;
    word-break: break-word;
}

/* Relief Block Stack */
.relief-stack {
    display: flex;
    flex-direction: column;
    gap: var(--gutter);
    flex: 1;
}

.relief-block {
    position: relative;
    background: var(--abyssal);
    border: 1px solid rgba(11, 206, 188, 0.3);
    padding: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    overflow: hidden;
    transition: border-color 0.3s;
    cursor: default;
}

.relief-block:hover {
    border-color: var(--teal);
    box-shadow: 0 0 12px rgba(11, 206, 188, 0.2);
}

.relief-noise-bg {
    position: absolute;
    inset: 0;
    opacity: 0.04;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='64' height='64' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 64px 64px;
    pointer-events: none;
}

.bitmap-ornament {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}

.relief-label {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--teal);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* ── Section 2: Inscription Hall ────────────────────────────── */
.section-inscription {
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
}

/* Marble vein overlay for light sections */
.marble-vein-overlay {
    position: absolute;
    inset: 0;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='600'%3E%3Cpath d='M0,200 Q200,80 400,200 Q600,320 800,160' stroke='%23B8A99A' stroke-width='1' fill='none' opacity='0.35'/%3E%3Cpath d='M0,80 Q150,40 300,100 Q450,160 600,60 Q700,20 800,80' stroke='%23B8A99A' stroke-width='0.7' fill='none' opacity='0.25'/%3E%3Cpath d='M0,400 Q180,340 360,400 Q540,460 720,370 Q780,340 800,400' stroke='%23B8A99A' stroke-width='0.7' fill='none' opacity='0.25'/%3E%3Cpath d='M200,0 Q280,150 260,300 Q240,450 300,600' stroke='%235B2E8A' stroke-width='0.5' fill='none' opacity='0.12'/%3E%3Cpath d='M580,0 Q520,120 560,300 Q600,480 540,600' stroke='%235B2E8A' stroke-width='0.4' fill='none' opacity='0.09'/%3E%3C/svg%3E") center/cover;
    pointer-events: none;
    z-index: 0;
}

.inscription-grid {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(3, auto);
    gap: 16px;
    padding: 60px 48px;
    position: relative;
    z-index: 2;
    align-items: center;
    justify-items: start;
}

.inscription-block {
    background: var(--ivory);
    padding: 28px 36px;
    width: 100%;
    max-width: 900px;
    border-left: 4px solid var(--travertine);
    position: relative;
}

.inscription-block::before {
    content: '';
    position: absolute;
    left: -4px;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--teal);
    opacity: 0;
    transition: opacity 0.3s;
}

.inscription-block:hover::before {
    opacity: 1;
}

.inscription-text {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(32px, 6vw, 64px);
    color: var(--abyssal);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    line-height: 1.1;
}

/* Section bottom border with chromatic aberration */
.section-bottom-border {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10;
}

.chromatic-border {
    height: 3px;
    background: var(--teal);
    position: relative;
    animation: chromatic-anim 4s steps(1) infinite;
}

@keyframes chromatic-anim {
    0%   { box-shadow: none; }
    20%  { box-shadow: -3px 0 0 var(--magenta), 3px 0 0 var(--violet); }
    21%  { box-shadow: none; }
    60%  { box-shadow: none; }
    61%  { box-shadow: 2px 0 0 var(--teal), -2px 0 0 var(--magenta); }
    62%  { box-shadow: none; }
    100% { box-shadow: none; }
}

/* ── Section 3: Stream Hall ─────────────────────────────────── */
.section-stream {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding-top: 40px;
}

.section-label-tag {
    position: relative;
    z-index: 5;
    padding: 0 var(--gutter);
    padding-top: 24px;
}

.mono-tag {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--teal);
    letter-spacing: 0.04em;
}

.stream-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: var(--gutter);
    flex: 1;
    padding: 0 var(--gutter);
    padding-bottom: var(--gutter);
}

.stream-block {
    position: relative;
    border: 1px solid var(--teal);
    background: rgba(11, 206, 188, 0.03);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 280px;
    overflow: hidden;
    transition: background 0.3s, box-shadow 0.3s;
}

.stream-block:hover {
    background: rgba(11, 206, 188, 0.06);
    box-shadow: 0 0 20px rgba(11, 206, 188, 0.12), inset 0 0 20px rgba(11, 206, 188, 0.03);
}

/* Scan line overlay inside stream blocks */
.stream-block::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        to bottom,
        transparent 0px,
        transparent 3px,
        rgba(11, 206, 188, 0.05) 3px,
        rgba(11, 206, 188, 0.05) 4px
    );
    pointer-events: none;
    z-index: 10;
}

.stream-ornament {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 5;
    opacity: 0.6;
}

.bitmap-ornament-sm {
    width: 28px;
    height: 28px;
}

.stream-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.stream-meta {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--teal);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.stream-title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(18px, 2.5vw, 28px);
    color: var(--ivory);
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.stream-body {
    font-family: var(--font-body);
    font-size: 14px;
    color: rgba(245, 239, 224, 0.75);
    line-height: 1.7;
}

.stream-timestamp {
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid rgba(11, 206, 188, 0.2);
}

/* ── Section 4: Relief Gallery ──────────────────────────────── */
.section-relief {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 100vh;
    padding: 0;
}

.relief-left {
    background: var(--ivory);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    position: relative;
    overflow: hidden;
}

/* Marble vein on relief left */
.relief-left::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='500' height='700'%3E%3Cpath d='M0,200 Q125,80 250,200 Q375,320 500,160' stroke='%23B8A99A' stroke-width='0.8' fill='none' opacity='0.3'/%3E%3Cpath d='M0,400 Q100,340 200,380 Q300,420 400,360 Q450,340 500,380' stroke='%23B8A99A' stroke-width='0.6' fill='none' opacity='0.2'/%3E%3Cpath d='M150,0 Q200,100 180,250 Q160,400 200,600' stroke='%235B2E8A' stroke-width='0.5' fill='none' opacity='0.1'/%3E%3C/svg%3E") center/cover;
    pointer-events: none;
    opacity: 0.15;
}

.relief-motif-block {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 420px;
    opacity: 0;
    transform: translateX(-20px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.relief-motif-block.in-view {
    opacity: 1;
    transform: translateX(0);
}

.acanthus-motif {
    width: 100%;
    height: auto;
    filter: drop-shadow(0 0 8px rgba(91, 46, 138, 0.15));
}

/* Glitch effect on relief on scroll-enter */
.relief-motif-block.glitch-active .acanthus-motif {
    animation: relief-glitch-sweep 0.4s steps(1) forwards;
}

@keyframes relief-glitch-sweep {
    0%   { transform: none; filter: drop-shadow(0 0 8px rgba(91, 46, 138, 0.15)); }
    10%  { transform: translateX(-4px); filter: drop-shadow(-3px 0 0 var(--magenta)) drop-shadow(3px 0 0 var(--teal)); }
    20%  { transform: translateX(4px); filter: drop-shadow(3px 0 0 var(--violet)); }
    30%  { transform: none; filter: drop-shadow(-2px 0 0 var(--teal)); }
    40%  { transform: translateX(-2px); }
    100% { transform: none; filter: drop-shadow(0 0 8px rgba(91, 46, 138, 0.15)); }
}

.relief-right {
    background: var(--abyssal);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 40px;
    position: relative;
    overflow: hidden;
}

.margin-block-stack {
    display: flex;
    flex-direction: column;
    gap: var(--gutter);
    position: relative;
    z-index: 2;
}

.margin-block {
    background: rgba(255, 255, 255, 0.02);
    border-left: 2px solid rgba(11, 206, 188, 0.3);
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
    overflow: hidden;
}

.margin-block::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--teal);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 0.4s ease;
}

.margin-block:hover::after {
    transform: scaleY(1);
}

.margin-catalog-id {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--teal);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.margin-text {
    font-family: var(--font-body);
    font-size: 14px;
    color: rgba(245, 239, 224, 0.8);
    line-height: 1.7;
}

.margin-metadata {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.meta-line {
    display: flex;
    gap: 12px;
    align-items: baseline;
}

.mono-tag.teal {
    color: var(--teal);
}

.mono-tag.corrupted {
    color: var(--magenta);
    animation: corrupted-blink 2.5s steps(1) infinite;
}

@keyframes corrupted-blink {
    0%   { opacity: 1; }
    45%  { opacity: 1; }
    50%  { opacity: 0.3; color: var(--violet); }
    52%  { opacity: 1; color: var(--magenta); }
    100% { opacity: 1; }
}

/* ── Section 5: Cryptoporticus Terminus ─────────────────────── */
.section-terminus {
    display: flex;
    align-items: stretch;
    padding: 0;
}

.terminus-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr auto;
    width: 100%;
    min-height: 100vh;
    gap: 0;
    position: relative;
    z-index: 2;
}

.terminus-inscription {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 48px;
    border-right: 1px solid rgba(11, 206, 188, 0.15);
}

.terminus-glitch-frame {
    position: relative;
    text-align: left;
}

.terminus-heading {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(40px, 6vw, 72px);
    color: var(--ivory);
    letter-spacing: -0.02em;
    line-height: 1;
    margin-bottom: 20px;
    position: relative;
}

/* Chromatic aberration on terminus heading */
.terminus-heading::before {
    content: 'ENTER THE STREAM';
    position: absolute;
    left: -3px;
    top: 0;
    color: var(--teal);
    opacity: 0.35;
    pointer-events: none;
    z-index: -1;
}

.terminus-heading::after {
    content: 'ENTER THE STREAM';
    position: absolute;
    left: 3px;
    top: 2px;
    color: var(--violet);
    opacity: 0.25;
    pointer-events: none;
    z-index: -1;
}

.terminus-sub {
    font-family: var(--font-body);
    font-size: 16px;
    color: rgba(245, 239, 224, 0.7);
    line-height: 1.7;
}

/* Contact Block */
.terminus-contact-block {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 48px;
}

.contact-block-inner {
    width: 100%;
    max-width: 480px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.contact-label {
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.contact-form-area {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.contact-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.field-label {
    font-size: 11px;
    letter-spacing: 0.06em;
    color: var(--teal);
}

.forum-input, .forum-textarea {
    background: rgba(11, 206, 188, 0.04);
    border: 1px solid rgba(11, 206, 188, 0.25);
    color: var(--ivory);
    font-family: var(--font-mono);
    font-size: 13px;
    padding: 12px 14px;
    outline: none;
    transition: border-color 0.3s, box-shadow 0.3s;
    resize: none;
}

.forum-input::placeholder, .forum-textarea::placeholder {
    color: rgba(245, 239, 224, 0.3);
}

.forum-input:focus, .forum-textarea:focus {
    border-color: var(--teal);
    box-shadow: 0 0 10px rgba(11, 206, 188, 0.15);
}

.forum-textarea {
    min-height: 100px;
}

.forum-submit {
    position: relative;
    background: transparent;
    border: 2px solid var(--teal);
    color: var(--teal);
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 14px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 14px 28px;
    cursor: pointer;
    overflow: hidden;
    transition: color 0.3s, background 0.3s;
    width: 100%;
    align-self: flex-start;
}

.forum-submit:hover {
    background: var(--teal);
    color: var(--abyssal);
}

.submit-glitch {
    position: absolute;
    left: 28px;
    top: 14px;
    color: var(--magenta);
    opacity: 0;
    pointer-events: none;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 14px;
    letter-spacing: 0.1em;
}

.forum-submit:hover .submit-glitch {
    animation: submit-glitch-anim 0.6s steps(1) forwards;
}

@keyframes submit-glitch-anim {
    0%   { opacity: 0; }
    10%  { opacity: 0.6; transform: translateX(-3px); }
    20%  { opacity: 0; }
    50%  { opacity: 0.4; transform: translateX(2px); }
    60%  { opacity: 0; }
    100% { opacity: 0; }
}

/* Terminus Footer Row */
.terminus-footer-row {
    grid-column: 1 / -1;
    grid-row: 2;
    border-top: 1px solid rgba(11, 206, 188, 0.15);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 48px;
}

.footer-domain {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.domain-footer-text {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 20px;
    color: var(--ivory);
    letter-spacing: -0.02em;
}

.footer-meta {
    font-size: 10px;
    color: rgba(245, 239, 224, 0.4);
    letter-spacing: 0.06em;
}

.footer-svg-ornament {
    width: 160px;
    height: auto;
    opacity: 0.6;
}

/* ── Block base reset for grid items ────────────────────────── */
.block {
    position: relative;
}

/* ── Utility ────────────────────────────────────────────────── */
.teal { color: var(--teal); }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 900px) {
    .praetorium-grid {
        grid-template-columns: 1fr;
    }
    .praetorium-sidebar {
        padding: var(--gutter);
    }
    .praetorium-block {
        min-height: 50vh;
    }
    .stream-grid {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(4, auto);
    }
    .section-relief {
        grid-template-columns: 1fr;
    }
    .relief-right {
        padding: 32px var(--gutter);
    }
    .terminus-grid {
        grid-template-columns: 1fr;
    }
    .terminus-inscription {
        border-right: none;
        border-bottom: 1px solid rgba(11, 206, 188, 0.15);
        padding: 40px var(--gutter);
    }
    .terminus-contact-block {
        padding: 40px var(--gutter);
    }
    .terminus-footer-row {
        padding: 20px var(--gutter);
        flex-direction: column;
        gap: 16px;
        align-items: flex-start;
    }
    .inscription-grid {
        padding: 40px var(--gutter);
    }
}

@media (max-width: 600px) {
    .nav-links {
        gap: 16px;
    }
    .inscription-text {
        font-size: clamp(24px, 8vw, 40px);
    }
    .stream-meta {
        font-size: 9px;
    }
}