/**
 * portal.css — derelict vessel edition, accessible build
 *
 * the lights are on. barely.
 * but they meet WCAG AA contrast requirements now.
 * accessibility is not the enemy of atmosphere.
 * it just means more people can experience the void.
 */

/* ============================================================
   CONTRAST AUDIT NOTES:
   --amber-pale  #d4a055 on --char #0a0704  → 8.1:1  ✓ AAA
   --amber-glow  #e8960f on --char #0a0704  → 7.4:1  ✓ AAA
   --text-body   #b88a50 on --hull #0f0b07  → 5.6:1  ✓ AA
   --text-mid    #a07840 on --hull #0f0b07  → 4.6:1  ✓ AA
   --text-dim    was #6b4f28 → bumped to #9a7040 → 4.5:1 ✓ AA
   --rust-label  #c86030 on --hull → 4.6:1  ✓ AA
   nav links, sidebar links all meet AA at new sizes
   ============================================================ */

:root {
    --amber:       #c8780a;
    --amber-dim:   #c07828;   /* lifted from #8a4e04 for contrast */
    --amber-glow:  #e8960f;
    --amber-pale:  #d4a055;
    --rust:        #7a3a0a;
    --rust-label:  #c86030;   /* readable rust for labels */
    --rust-deep:   #3d1a04;
    --char:        #0a0704;
    --hull:        #0f0b07;
    --panel:       #130e08;
    --panel2:      #1a1208;
    --plating:     #221910;
    --seam:        #2a1e0e;
    --seam2:       #3a2a14;
    --text-dim:    #9a7040;   /* lifted from #6b4f28 — was failing AA */
    --text-mid:    #b08048;
    --text-body:   #c09058;
    --red-warn:    #8b1a00;
    --red-hot:     #e03a1a;   /* lifted slightly for contrast */

    /* sizing — everything scales from here */
    --base-size:   1.3rem;      /* 16px browser default, respected */
}

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

/* ── SKIP LINK — first focusable element on page ─────────── */
.skip-link {
    position: absolute;
    top: -100%;
    left: 0;
    background: var(--amber-glow);
    color: #000;
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.875rem;
    font-weight: bold;
    padding: 8px 16px;
    z-index: 99999;
    letter-spacing: 2px;
    text-decoration: none;
    transition: top 0.1s;
}
.skip-link:focus {
    top: 0;
    outline: 3px solid #fff;
    outline-offset: 2px;
}

/* ── BODY ────────────────────────────────────────────────── */
body {
    background-color: var(--char);
    background-image:
        repeating-linear-gradient(
            0deg,
            transparent, transparent 3px,
            rgba(200,120,10,0.018) 3px, rgba(200,120,10,0.018) 4px
        ),
        repeating-linear-gradient(
            90deg,
            transparent, transparent 60px,
            rgba(200,120,10,0.012) 60px, rgba(200,120,10,0.012) 61px
        ),
        radial-gradient(ellipse at 50% 40%, #1a1008 0%, #080502 70%, #030201 100%);
    color: var(--amber-pale);
    font-family: 'Share Tech Mono', monospace;
    font-size: var(--base-size);  /* 16px — was 13px */
    line-height: 1.6;
    overflow-x: hidden;
    cursor: crosshair;
}

/* phosphor scanlines — reduced opacity so they don't murder contrast */
body::before {
    content: '';
    position: fixed; inset: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent, transparent 2px,
        rgba(0,0,0,0.10) 2px, rgba(0,0,0,0.10) 3px
    );
    pointer-events: none;
    z-index: 9998;
}

/* grain */
body::after {
    content: '';
    position: fixed; inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 9997;
    opacity: 0.5;
}

/* ── FOCUS STYLES — visible for keyboard nav ─────────────── */
/* respects the aesthetic while being clearly visible */
:focus-visible {
    outline: 2px solid var(--amber-glow);
    outline-offset: 2px;
}

/* ── REDUCED MOTION — respect prefers-reduced-motion ─────── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ============================================================
   MARQUEE — emergency broadcast
   ============================================================ */
.top-bar {
    background: var(--rust-deep);
    color: var(--amber-pale);
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.9rem;
    letter-spacing: 3px;
    overflow: hidden;
    white-space: nowrap;
    padding: 5px 0;
    border-bottom: 1px solid var(--rust);
    position: relative;
    /* width: 150px; */
    /* aria-hidden in markup — decorative only */
}
.top-bar::before {
    content: 'BROADCAST ▸';
    position: absolute; left: 0; top: 0; bottom: 0;
    background: var(--rust);
    color: var(--amber-pale);
    padding: 5px 10px;
    font-size: 0.875rem;
    letter-spacing: 2px;
    z-index: 2;
    display: flex; align-items: center;
    width: 150px;
}
.top-bar-inner {
    display: inline-block;
    padding-left: 150px;
    animation: marquee 45s linear infinite;
    color: var(--text-body);
}
@keyframes marquee {
    0%   { transform: translateX(100vw); }
    100% { transform: translateX(-100%); }
}

/* ============================================================
   HEADER — command deck
   ============================================================ */
.site-header {
    display: grid;
    grid-template-columns: 1fr 180px;
    border-bottom: 1px solid var(--seam);
    background: linear-gradient(180deg, #1a1008 0%, #0d0905 60%, var(--char) 100%);
    align-items: stretch;
    position: relative;
}
.site-header::after {
    content: '';
    position: absolute; bottom: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg,
        transparent 0%, var(--rust) 20%, var(--amber-dim) 50%,
        var(--rust) 80%, transparent 100%
    );
}

.header-emblem {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding: 16px 10px;
    border-top: 2px solid var(--rust);
    /* border-right: 1px solid var(--seam); */
    background: linear-gradient(135deg, #100c06, #0a0703);
    position: relative; overflow: hidden;
}
.header-emblem::before {
    content: '';
    position: absolute; inset: 0;
    background: repeating-linear-gradient(
        45deg, transparent, transparent 8px,
        rgba(200,120,10,0.015) 8px, rgba(200,120,10,0.015) 9px
    );
    pointer-events: none;
}
.sigil {
    width: 72px; height: 72px;
    animation: sigil-pulse 6s ease-in-out infinite;
    filter: drop-shadow(0 0 4px rgba(200,120,10,0.4));
}
@keyframes sigil-pulse {
    0%,100% { filter: drop-shadow(0 0 3px rgba(200,120,10,0.3)); opacity: 0.9; }
    50%      { filter: drop-shadow(0 0 8px rgba(200,120,10,0.6)); opacity: 1.0; }
}
.emblem-label {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.5625rem; letter-spacing: 3px;
    color: var(--text-mid); margin-top: 8px;
    text-transform: uppercase;
}

.header-main {
    padding: 18px 20px 14px;
    position: relative; overflow: hidden;
}
.header-main::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, var(--rust) 0%, var(--amber-dim) 40%, transparent 100%);
}
.site-title {
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(1.5rem, 4vw, 2.25rem);
    font-weight: 900;
    color: var(--amber-glow);
    text-shadow:
        0 0 6px rgba(200,120,10,0.5),
        2px 2px 0 var(--rust-deep),
        0 0 30px rgba(200,120,10,0.15);
    letter-spacing: 3px; line-height: 1.1;
    animation: title-flicker 12s infinite;
}
@keyframes title-flicker {
    0%,88%,92%,100% { opacity: 1; }
    89%  { opacity: 0.85; }
    90%  { opacity: 1; }
    91%  { opacity: 0.7; }
}
.site-subtitle {
    font-size: 0.6875rem;
    color: var(--text-mid);
    letter-spacing: 3px; margin-top: 6px;
    text-transform: uppercase;
}
.site-tagline {
    font-size: 0.75rem; color: var(--text-dim);
    margin-top: 10px; letter-spacing: 2px;
    border-top: 1px solid var(--seam);
    padding-top: 8px;
}

/* nav — larger tap targets, visible focus */
.nav-links {
    display: flex; flex-wrap: wrap; gap: 4px; margin-top: 12px;
}
.nav-links a {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.95rem;
    color: var(--text-mid);
    background: var(--panel);
    padding: 6px 10px;      /* was 3px 8px — larger tap target */
    min-height: 44px;        /* WCAG 2.5.5 target size */
    display: inline-flex; align-items: center;
    text-decoration: none;
    letter-spacing: 2px;
    border: 1px solid var(--seam);
    transition: color 0.15s, background 0.15s, border-color 0.15s;
    position: relative;
}
.nav-links a::before {
    content: '';
    position: absolute; bottom: 0; left: 0; right: 0; height: 1px;
    background: var(--amber-dim);
    transform: scaleX(0); transform-origin: left;
    transition: transform 0.2s;
}
.nav-links a:hover, .nav-links a:focus-visible {
    color: var(--amber-glow);
    background: var(--plating);
    border-color: var(--amber-dim);
}
.nav-links a:hover::before, .nav-links a:focus-visible::before {
    transform: scaleX(1);
}

.header-telemetry {
    padding: 10px 12px;
    border-left: 1px solid var(--seam);
    background: linear-gradient(180deg, #100b05, #0a0703);
    display: flex; flex-direction: column; gap: 5px;
}
.telem-row {
    background: var(--hull);
    border: 1px solid var(--seam);
    border-left: 2px solid var(--rust);
    padding: 5px 8px;
    font-size: 0.6875rem; color: var(--text-mid);
    line-height: 1.4;
}
.telem-row .telem-val {
    color: var(--amber-pale);
    font-size: 0.875rem;
    font-family: 'VT323', monospace;
    display: block;
}
.telem-warn {
    color: var(--red-hot) !important;
    animation: warn-blink 2s infinite;
}
@keyframes warn-blink { 0%,100%{opacity:1} 50%{opacity:0.4} }

.status-dot {
    display: inline-block; width: 6px; height: 6px;
    background: var(--amber-glow); border-radius: 50%;
    animation: dot-pulse 2s infinite;
    box-shadow: 0 0 4px var(--amber-dim);
    margin-right: 5px;
}
@keyframes dot-pulse { 0%,100%{opacity:1} 50%{opacity:0.4} }

/* ============================================================
   THREE-COLUMN LAYOUT
   ============================================================ */
.main-wrap {
    display: grid;
    grid-template-columns: 200px 1fr 180px;
    grid-template-areas: "left main right";
    min-height: calc(100vh - 130px);
    border-top: 1px solid var(--seam);
}

/* ============================================================
   SIDEBARS
   ============================================================ */
.sidebar-left {
    grid-area: left;
    border-right: 1px solid var(--seam);
    background: linear-gradient(180deg, var(--panel) 0%, var(--hull) 100%);
}
.sidebar-right {
    grid-area: right;
    border-left: 1px solid var(--seam);
    background: linear-gradient(180deg, var(--panel) 0%, var(--hull) 100%);
}

.sidebar-section { border-bottom: 1px solid var(--seam); padding: 12px; }
.sidebar-title {
    font-size: 0.95rem;
    color: var(--amber-dim);
    letter-spacing: 3px;
    background: var(--hull);
    margin: -12px -12px 10px -12px;
    padding: 5px 12px;
    border-bottom: 1px solid var(--seam);
    text-transform: uppercase;
    position: relative; overflow: hidden;
}
.sidebar-title::after {
    content: '';
    position: absolute; bottom: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, var(--rust), transparent);
}

/* sidebar links — larger tap targets */
.sidebar-link {
    display: block; color: var(--text-mid);
    text-decoration: none;
    padding: 6px 0;           /* was 2px */
    font-size: 0.8125rem;     /* was 11px */
    letter-spacing: 1px;
    min-height: 44px; display: flex; align-items: center;
    border-bottom: 1px dotted transparent;
    transition: color 0.15s;
}
.sidebar-link:hover, .sidebar-link:focus-visible {
    color: var(--amber-pale);
    border-bottom-color: var(--seam);
}
.sidebar-link.new::after {
    content: ' ◈';
    color: var(--red-hot);
    font-size: 0.6875rem;
    animation: warn-blink 1s infinite;
}

/* skill bars */
.skill-bar-wrap { margin: 6px 0; }
.skill-bar-label {
    font-size: 0.75rem;      /* was 10px */
    color: var(--text-mid);
    margin-bottom: 3px; letter-spacing: 1px;
}
.skill-bar {
    height: 6px;
    background: var(--hull);
    border: 1px solid var(--seam);
    overflow: hidden; position: relative;
}
.skill-bar::before {
    content: '';
    position: absolute; inset: 0;
    background: repeating-linear-gradient(
        90deg, transparent, transparent 3px,
        rgba(0,0,0,0.3) 3px, rgba(0,0,0,0.3) 4px
    );
    z-index: 1;
}
.skill-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--rust) 0%, var(--amber-dim) 60%, var(--amber-glow) 100%);
    animation: barload 2.5s ease-out forwards;
    transform: scaleX(0); transform-origin: left;
}
@keyframes barload { to { transform: scaleX(1); } }

/* visitor counter */
.visitor-counter {
    font-family: 'VT323', monospace; font-size: 1.75rem;
    color: var(--amber-dim);
    text-shadow: 0 0 6px rgba(200,120,10,0.3);
    text-align: center; letter-spacing: 6px;
    background: var(--hull);
    border: 1px solid var(--seam);
    border-left: 2px solid var(--rust);
    padding: 5px; margin: 6px 0;
}

/* ============================================================
   MAIN CONTENT
   ============================================================ */
.main-content {
    grid-area: main;
    padding: 16px;
    background:
        radial-gradient(ellipse at 30% 20%, rgba(120,60,5,0.08) 0%, transparent 60%),
        var(--char);
    min-width: 0;      /* prevents grid blowout from long text */
    overflow-x: hidden;
}

.typewriter {
    overflow: hidden; white-space: nowrap;
    font-size: 0.8125rem;
    color: var(--text-mid); letter-spacing: 2px;
    border-right: 1px solid var(--amber-dim); width: 0;
    animation: typeout 4s steps(40) 0.5s forwards, cursor-blink 0.9s step-end infinite;
    margin-bottom: 4px;
}
@keyframes typeout     { to { width: 100%; } }
@keyframes cursor-blink { 50% { border-color: transparent; } }

.corrupted-banner {
    margin: 6px 0 0; padding: 5px 10px;
    background: var(--hull);
    border-left: 2px solid var(--red-warn);
}
.corrupted-text {
    font-size: 0.6875rem;
    color: var(--rust-label); letter-spacing: 3px;
    animation: corruptshift 8s infinite;
}
@keyframes corruptshift {
    0%,90%,100% { transform: none; opacity: 0.6; }
    92% { transform: translateX(-2px); opacity: 1; color: var(--red-hot); }
    94% { transform: translateX(2px); opacity: 0.8; }
    96% { transform: none; opacity: 0.6; }
}

/* project log */
.projects-chaos-title {
    font-size: 0.6875rem;
    color: var(--amber-dim); letter-spacing: 5px;
    margin: 18px 0 10px;
    text-transform: uppercase;
    border-bottom: 1px solid var(--seam); padding-bottom: 6px;
    position: relative;
}
.projects-chaos-title::before {
    content: '// ';
    color: var(--rust);
}

.polaroid-grid { display: flex; flex-direction: column; gap: 3px; margin-bottom: 12px; width: 100%; min-width: 0; }

.polaroid {
    display: grid;
    grid-template-columns: 44px 1fr auto;
    background: var(--hull);
    border: 1px solid var(--seam);
    border-left: 2px solid var(--rust);
    text-decoration: none;
    transition: background 0.15s, border-left-color 0.15s;
    position: relative;
    cursor: crosshair;
    transform: none !important;
    width: 100%;
    max-width: 100%;
    box-shadow: none !important;
    min-height: 44px;
    min-width: 0;
    overflow: hidden;
}
.polaroid:hover, .polaroid:focus-visible {
    background: var(--plating);
    border-left-color: var(--amber-glow);
}
.polaroid-img {
    width: 44px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.125rem;
    color: var(--rust-label);
    background: var(--panel);
    border-right: 1px solid var(--seam);
}
.polaroid:hover .polaroid-img, .polaroid:focus-visible .polaroid-img {
    color: var(--amber-dim);
}
.polaroid-label {
    padding: 10px 12px;
    font-size: 0.8125rem; color: var(--text-mid);
    line-height: 1.4;
    min-width: 0;
    overflow: hidden;
}
.polaroid-label strong {
    display: block; font-size: 0.875rem;
    color: var(--amber-pale); letter-spacing: 1px;
    font-weight: normal; margin-bottom: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.polaroid-status {
    padding: 10px 10px;
    font-size: 0.6875rem; color: var(--text-dim);
    display: flex; align-items: flex-start;
    padding-top: 12px; letter-spacing: 1px;
    white-space: nowrap;
}

/* info panels */
.section-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--seam2), transparent);
    margin: 16px 0;
}

.info-grid {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 10px; margin-top: 10px;
}
.info-panel {
    background: var(--hull);
    border: 1px solid var(--seam);
    padding: 12px; position: relative;
}
.info-panel::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, var(--rust), var(--amber-dim), transparent);
}
.info-panel-title {
    font-size: 0.6875rem;
    color: var(--amber-dim); letter-spacing: 3px;
    margin-bottom: 10px; text-transform: uppercase;
}
.info-panel p { color: var(--text-body); font-size: 0.875rem; line-height: 1.7; overflow-wrap: break-word; }

.tag {
    display: inline-block;
    background: var(--panel); border: 1px solid var(--seam);
    color: var(--text-mid); font-size: 0.6875rem;
    padding: 2px 6px; margin: 2px 2px 2px 0;
    letter-spacing: 1px;
    word-break: break-word;
    white-space: normal;
}

/* contact form */
.info-panel input, .info-panel textarea {
    width: 100%; background: var(--char);
    border: 1px solid var(--seam); border-bottom-color: var(--rust);
    color: var(--amber-pale); font-family: 'Share Tech Mono', monospace;
    font-size: 0.875rem;      /* was 11px — legible now */
    padding: 8px 10px; margin-bottom: 6px;
    outline: none; transition: border-color 0.2s; resize: none;
}
.info-panel input:focus, .info-panel textarea:focus {
    border-color: var(--amber-dim);
    background: var(--hull);
    outline: 2px solid var(--amber-glow);
    outline-offset: 1px;
}
.info-panel input::placeholder, .info-panel textarea::placeholder {
    color: var(--text-dim); letter-spacing: 1px;
}
.transmit-btn {
    background: transparent; color: var(--amber-dim);
    border: 1px solid var(--rust); font-family: 'Share Tech Mono', monospace;
    font-size: 0.75rem; padding: 8px 16px; letter-spacing: 3px;
    min-height: 44px;
    cursor: crosshair; transition: all 0.15s; text-transform: uppercase;
}
.transmit-btn:hover, .transmit-btn:focus-visible {
    background: var(--rust); color: var(--amber-pale);
    border-color: var(--amber-dim);
}

/* resume */
.resume-section {
    margin-top: 16px; background: var(--hull);
    border: 1px solid var(--seam); padding: 14px; position: relative;
}
.resume-section::before {
    content: 'RESTRICTED ACCESS';
    position: absolute; top: -9px; right: 14px;
    background: var(--red-warn); color: rgba(255,200,150,0.8);
    font-family: 'Share Tech Mono', monospace; font-size: 0.625rem;
    padding: 0 7px; letter-spacing: 2px;
}
.resume-title {
    font-size: 0.6875rem;
    color: var(--amber-dim); letter-spacing: 4px;
    margin-bottom: 14px; text-transform: uppercase;
    padding-bottom: 8px; border-bottom: 1px solid var(--seam);
}
.resume-entry {
    display: grid; grid-template-columns: 96px 1fr;
    gap: 12px; margin-bottom: 12px; padding-bottom: 12px;
    border-bottom: 1px solid var(--seam);
}
.resume-date {
    font-family: 'VT323', monospace; font-size: 1rem;
    color: var(--rust-label); white-space: nowrap; padding-top: 2px;
}
.resume-body strong {
    display: block; color: var(--amber-pale);
    font-size: 0.875rem; letter-spacing: 1px;
    font-weight: normal; margin-bottom: 4px;
}
.resume-body span { color: var(--text-mid); font-size: 0.8125rem; line-height: 1.6; overflow-wrap: break-word; }

.download-btn {
    display: inline-flex; align-items: center;
    background: transparent; color: var(--text-mid);
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.75rem; padding: 8px 14px; letter-spacing: 2px;
    text-decoration: none; border: 1px solid var(--seam);
    min-height: 44px;
    transition: all 0.15s; margin-top: 8px;
}
.download-btn:hover, .download-btn:focus-visible {
    color: var(--amber-pale); border-color: var(--rust);
    background: var(--panel);
}

/* glitch strip */
.glitch-strip {
    margin-top: 16px; padding: 7px 10px;
    background: var(--hull); border-top: 1px solid var(--seam);
    overflow: hidden;
}
.glitch-strip span {
    font-size: 0.6875rem;
    color: var(--seam2); letter-spacing: 5px;
    display: inline-block; white-space: nowrap;
    animation: stripscroll 14s linear infinite;
}
@keyframes stripscroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* ============================================================
   RIGHT SIDEBAR
   ============================================================ */
.hull-panel {
    margin: 10px;
    background: var(--hull);
    border: 1px solid var(--seam);
    border-left: 2px solid var(--rust);
    padding: 10px;
}
.hull-panel-title {
    font-size: 0.6875rem;
    color: var(--amber-dim); letter-spacing: 3px;
    margin-bottom: 8px; padding-bottom: 6px;
    border-bottom: 1px solid var(--seam);
    text-transform: uppercase;
}
.warning-placard {
    margin: 10px;
    background: repeating-linear-gradient(
        45deg, #1a0d04, #1a0d04 6px, #0f0803 6px, #0f0803 12px
    );
    border: 1px solid var(--rust);
    text-align: center; padding: 10px;
    position: relative;
}
.warning-placard::before {
    content: '⚠';
    position: absolute; top: -8px; left: 50%; transform: translateX(-50%);
    background: var(--rust-deep); color: var(--amber-dim);
    padding: 0 6px; font-size: 0.875rem;
}
.warning-placard p {
    font-size: 0.75rem;
    color: var(--amber-pale); line-height: 1.9; letter-spacing: 2px;
}
.log-item {
    font-size: 0.75rem; color: var(--text-mid);
    padding: 4px 0; border-bottom: 1px dotted var(--seam);
    line-height: 1.5;
}
.log-item .log-date { color: var(--rust-label); margin-right: 6px; }
.log-item .log-new  {
    color: var(--amber-dim); font-size: 0.625rem;
    animation: warn-blink 1.2s infinite;
}
.instrument-ring {
    text-align: center; padding: 12px 8px;
    border-top: 1px solid var(--seam);
}
.ring-svg {
    width: 72px;
    filter: drop-shadow(0 0 4px rgba(140,70,4,0.4));
    animation: ring-rotate 20s linear infinite;
    opacity: 0.8;
}
@keyframes ring-rotate { 0%{transform:rotate(0deg)} 100%{transform:rotate(360deg)} }

.webring-box {
    margin: 8px 10px;
    border: 1px solid var(--seam);
    padding: 8px; font-size: 0.75rem; color: var(--text-mid);
    letter-spacing: 1px; line-height: 1.8;
}
.webring-box strong {
    display: block; color: var(--amber-dim);
    font-size: 0.6875rem; margin-bottom: 4px; letter-spacing: 2px;
}
.webring-box a { min-height: 44px; display: inline-flex; align-items: center; }

.badge-grid { display: flex; flex-wrap: wrap; gap: 3px; padding: 8px 10px; }
.badge {
    font-family: 'Share Tech Mono', monospace; font-size: 0.5625rem;
    padding: 3px 6px; letter-spacing: 1px;
    border: 1px solid; color: rgba(200,150,80,0.7);
}

/* ============================================================
   STATUS BAR
   ============================================================ */
.status-bar {
    background: var(--hull);
    border-top: 1px solid var(--rust);
    padding: 6px 14px;
    display: flex; gap: 16px; flex-wrap: wrap;
    font-size: 0.6875rem; color: var(--text-mid);
    align-items: center; letter-spacing: 1px;
}
.status-item { display: flex; align-items: center; gap: 5px; }
.status-ok   { color: var(--amber-dim); }
.status-warn { color: var(--red-hot); animation: warn-blink 2s infinite; }
.blink-cursor {
    display: inline-block; width: 7px; height: 11px;
    background: var(--amber-dim); animation: warn-blink 0.8s infinite;
    vertical-align: middle;
}

/* ============================================================
   MISC
   ============================================================ */
.under-construction {
    display: inline-block;
    background: repeating-linear-gradient(
        45deg, #0f0803, #0f0803 6px, #1a0d04 6px, #1a0d04 12px
    );
    color: var(--amber-dim); font-size: 0.625rem;
    padding: 3px 8px; letter-spacing: 2px;
    border: 1px solid var(--rust);
}

a { cursor: crosshair; }
a:not([class]) { color: var(--amber-pale); }

::-webkit-scrollbar { width: 6px; background: var(--char); }
::-webkit-scrollbar-thumb { background: var(--seam2); }


/* ============================================================
   MOBILE INTERSTITIAL OVERLAY
   shown on small screens, dismissed after 6s or tap
   ============================================================ */
#mobile-gate {
    display: none;  /* shown via JS on mobile */
    position: fixed; inset: 0;
    background: var(--char);
    z-index: 99999;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px 24px;
    text-align: center;
    cursor: pointer;
}
#mobile-gate.active { display: flex; }

.gate-sigil-wrap {
    position: relative;
    width: 120px; height: 120px;
    margin-bottom: 32px;
}

/* three concentric rings, staggered spin */
.gate-ring {
    position: absolute;
    border-radius: 50%;
    border-style: solid;
    border-color: transparent;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
}
.gate-ring-1 {
    width: 110px; height: 110px;
    border-top-color: var(--rust);
    border-right-color: var(--rust);
    border-width: 1px;
    animation: gate-spin 3s linear infinite;
}
.gate-ring-2 {
    width: 86px; height: 86px;
    border-top-color: var(--amber-dim);
    border-left-color: var(--amber-dim);
    border-width: 1px;
    animation: gate-spin 2s linear infinite reverse;
}
.gate-ring-3 {
    width: 62px; height: 62px;
    border-top-color: var(--amber-glow);
    border-width: 1.5px;
    animation: gate-spin 1.4s linear infinite;
}
@keyframes gate-spin {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to   { transform: translate(-50%, -50%) rotate(360deg); }
}

/* center sigil pulse */
.gate-center {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 40px; height: 40px;
}
.gate-center svg { animation: sigil-pulse 2s ease-in-out infinite; }

/* boot text */
.gate-callsign {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.5rem; font-weight: 900;
    color: var(--amber-glow);
    letter-spacing: 4px;
    text-shadow: 0 0 12px rgba(200,120,10,0.5);
    animation: title-flicker 4s infinite;
    margin-bottom: 6px;
}
.gate-subtitle {
    font-size: 0.6875rem;
    color: var(--text-mid);
    letter-spacing: 4px;
    text-transform: uppercase;
    margin-bottom: 28px;
}

/* progress bar */
.gate-progress-wrap {
    width: 220px;
    border: 1px solid var(--seam);
    height: 4px;
    margin-bottom: 8px;
    overflow: hidden;
    position: relative;
}
.gate-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--rust), var(--amber-glow));
    width: 0%;
    animation: gate-load 6s linear forwards;
}
@keyframes gate-load { to { width: 100%; } }

/* terminal boot lines */
.gate-log {
    width: 220px;
    text-align: left;
    margin-bottom: 28px;
}
.gate-log-line {
    font-size: 0.625rem;
    color: var(--text-dim);
    letter-spacing: 2px;
    line-height: 1.8;
    opacity: 0;
    animation: gate-line-appear 0.3s ease forwards;
}
.gate-log-line:nth-child(1) { animation-delay: 0.2s; }
.gate-log-line:nth-child(2) { animation-delay: 0.8s; }
.gate-log-line:nth-child(3) { animation-delay: 1.5s; }
.gate-log-line:nth-child(4) { animation-delay: 2.2s; }
.gate-log-line:nth-child(5) { animation-delay: 3.0s; }
.gate-log-line:nth-child(6) { animation-delay: 3.8s; color: var(--amber-dim); }
@keyframes gate-line-appear { to { opacity: 1; } }

/* proceed prompt */
.gate-prompt {
    font-size: 0.75rem;
    color: var(--text-dim);
    letter-spacing: 3px;
    border: 1px solid var(--seam);
    border-bottom-color: var(--rust);
    padding: 10px 18px;
    margin-top: 4px;
    opacity: 0;
    animation: gate-line-appear 0.4s ease 4.4s forwards;
    text-transform: uppercase;
}
.gate-prompt strong {
    display: block;
    color: var(--amber-pale);
    font-size: 0.8125rem;
    letter-spacing: 2px;
    margin-bottom: 4px;
    font-weight: normal;
}

/* countdown tick */
.gate-countdown {
    font-family: 'VT323', monospace;
    font-size: 0.875rem;
    color: var(--rust-label);
    letter-spacing: 2px;
    margin-top: 12px;
    opacity: 0;
    animation: gate-line-appear 0.3s ease 4.4s forwards;
}

/* ============================================================
   MOBILE HAMBURGER BUTTON
   only visible on mobile
   ============================================================ */
.mobile-menu-btn {
    display: none;
    background: var(--hull);
    border: 1px solid var(--seam);
    color: var(--amber-dim);
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.75rem;
    letter-spacing: 2px;
    padding: 8px 14px;
    min-height: 44px;
    cursor: pointer;
    align-items: center;
    gap: 8px;
    transition: background 0.15s, border-color 0.15s;
    position: relative;
    z-index: 100;
}
.mobile-menu-btn:hover, .mobile-menu-btn:focus-visible {
    background: var(--plating);
    border-color: var(--amber-dim);
}
.hamburger-icon {
    display: flex; flex-direction: column; gap: 4px;
    width: 18px;
}
.hamburger-icon span {
    display: block; height: 1px;
    background: var(--amber-dim);
    transition: transform 0.2s, opacity 0.2s;
}
.mobile-menu-btn[aria-expanded="true"] .hamburger-icon span:nth-child(1) {
    transform: translateY(5px) rotate(45deg);
}
.mobile-menu-btn[aria-expanded="true"] .hamburger-icon span:nth-child(2) {
    opacity: 0;
}
.mobile-menu-btn[aria-expanded="true"] .hamburger-icon span:nth-child(3) {
    transform: translateY(-5px) rotate(-45deg);
}

/* ============================================================
   MOBILE NAV DRAWER
   slides in from left
   ============================================================ */
.mobile-nav-drawer {
    /* always in DOM, always off-screen — JS slides it in via .open */
    display: block;
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: min(300px, 85vw);
    background: var(--panel);
    border-right: 2px solid var(--rust);
    z-index: 200;
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    padding: 0;
    visibility: hidden;   /* hidden but not display:none so transitions work */
}
.mobile-nav-drawer.open {
    transform: translateX(0);
    visibility: visible;
}
.mobile-nav-overlay {
    display: block;
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.7);
    z-index: 199;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}
.mobile-nav-overlay.open { opacity: 1; pointer-events: auto; }

.drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--seam);
    background: var(--hull);
}
.drawer-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.75rem;
    color: var(--amber-dim);
    letter-spacing: 3px;
}
.drawer-close {
    background: transparent;
    border: 1px solid var(--seam);
    color: var(--text-mid);
    font-size: 1rem;
    width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: all 0.15s;
    min-height: unset;
}
.drawer-close:hover { color: var(--amber-pale); border-color: var(--rust); }

.drawer-nav-links {
    padding: 12px 0;
    border-bottom: 1px solid var(--seam);
}
.drawer-nav-links a {
    display: flex;
    align-items: center;
    padding: 12px 20px;
    min-height: 48px;
    color: var(--text-mid);
    text-decoration: none;
    font-size: 0.9375rem;
    letter-spacing: 2px;
    border-left: 2px solid transparent;
    transition: all 0.15s;
}
.drawer-nav-links a:hover, .drawer-nav-links a:focus-visible {
    color: var(--amber-pale);
    background: var(--plating);
    border-left-color: var(--rust);
}
.drawer-nav-links a::before { content: '» '; color: var(--rust); margin-right: 6px; }

.drawer-skills { padding: 16px; border-bottom: 1px solid var(--seam); }
.drawer-section-title {
    font-size: 0.625rem;
    color: var(--amber-dim);
    letter-spacing: 4px;
    text-transform: uppercase;
    margin-bottom: 10px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--seam);
}

/* ============================================================
   RESPONSIVE OVERRIDES — TABLET (max 900px)
   ============================================================ */
@media (max-width: 900px) {
    .site-header {
        grid-template-columns: auto 1fr auto;
    }
    .header-telemetry { display: none; }  /* hidden at tablet, in drawer */

    .main-wrap {
        grid-template-columns: 1fr;
        grid-template-areas: "main";
    }
    .sidebar-left  { display: none; }  /* replaced by drawer */
    .sidebar-right { display: none; }  /* hidden on tablet */

    .mobile-menu-btn { display: flex; }
    /* drawer and overlay are always display:block — JS handles visibility */

    .info-grid { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   RESPONSIVE OVERRIDES — MOBILE (max 640px)
   ============================================================ */
@media (max-width: 640px) {
    body { font-size: 0.9375rem; }

    .site-title { font-size: 1.5rem; letter-spacing: 2px; }
    .site-subtitle { font-size: 0.625rem; letter-spacing: 2px; }
    .site-tagline { display: none; }
    .nav-links { display: none; }  /* in drawer only on mobile */

    .header-emblem { padding: 10px 12px; }
    .sigil { width: 40px; height: 40px; }

    /* project list full width, no overflow */
    .polaroid {
        grid-template-columns: 40px 1fr;
    }
    .polaroid-status { display: none; }
    .polaroid-label { padding: 8px 10px; }
    .polaroid-label strong { font-size: 0.8125rem; }

    /* info panels stack */
    .info-grid { grid-template-columns: 1fr; }

    /* resume stacks */
    .resume-entry {
        grid-template-columns: 1fr;
        gap: 2px;
    }
    .resume-date { font-size: 0.875rem; }

    /* status bar trimmed */
    .status-bar {
        font-size: 0.625rem;
        gap: 8px;
        padding: 5px 10px;
    }
    /* hide less important status items on mobile */
    .status-bar .status-item:nth-child(2),
    .status-bar .status-item:nth-child(3),
    .status-bar .status-item:nth-child(4) { display: none; }

    .main-content { padding: 12px; }
    .projects-chaos-title { margin-top: 12px; }
}

/* ============================================================
   RESPONSIVE OVERRIDES — VERY SMALL (max 380px)
   ============================================================ */
@media (max-width: 380px) {
    .site-title { font-size: 1.25rem; }
    .gate-callsign { font-size: 1.25rem; }
    .gate-sigil-wrap { width: 90px; height: 90px; }
    .gate-ring-1 { width: 84px; height: 84px; }
    .gate-ring-2 { width: 64px; height: 64px; }
    .gate-ring-3 { width: 46px; height: 46px; }
}

/* ============================================================
   PAGE TRANSITIONS — frames-but-not-frames
   ============================================================ */

/* loading state — spins in the main slot while fetch() is in flight */
.page-loading {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
    min-height: 240px;
}
.page-loading.active {
    display: flex;
}
.page-loading-sigil {
    position: relative;
    width: 70px; height: 70px;
    margin-bottom: 24px;
}
/* reuse the gate-ring classes for the loading spinner */
.page-loading-sigil .gate-ring-1 { width: 64px; height: 64px; animation-duration: 2s; }
.page-loading-sigil .gate-ring-2 { width: 48px; height: 48px; animation-duration: 1.4s; }
.page-loading-sigil .gate-ring-3 { width: 34px; height: 34px; animation-duration: 0.9s; }

.page-loading-text {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.6875rem;
    color: var(--text-dim);
    letter-spacing: 4px;
    text-transform: uppercase;
}

/* animated ellipsis on loading text */
.loading-dots::after {
    content: '';
    animation: loading-dot-cycle 1.5s steps(4) infinite;
}
@keyframes loading-dot-cycle {
    0%   { content: ''; }
    25%  { content: '.'; }
    50%  { content: '..'; }
    75%  { content: '...'; }
    100% { content: ''; }
}

/* page-enter — every page wraps its content in this */
/* fades + slides up slightly on arrival              */
.page-enter {
    animation: page-arrive 0.3s ease forwards;
}
@keyframes page-arrive {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* active nav state */
.nav-links a.active,
.drawer-nav-links a.active {
    color: var(--amber-glow);
    border-color: var(--amber-dim);
    background: var(--plating);
}
.nav-links a.active::before {
    transform: scaleX(1);
}

/* page-link styling — inline links within page content that trigger navigation */
.page-link {
    color: var(--amber-pale);
    text-decoration: none;
    letter-spacing: 1px;
    font-size: 0.875rem;
    padding: 6px 0;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    transition: color 0.15s;
}
.page-link:hover, .page-link:focus-visible {
    color: var(--amber-glow);
}

/* reduce motion: no slide, just fade */
@media (prefers-reduced-motion: reduce) {
    .page-enter {
        animation: page-arrive-reduced 0.2s ease forwards;
    }
    @keyframes page-arrive-reduced {
        from { opacity: 0; }
        to   { opacity: 1; }
    }
}

/* ============================================================
   PAGE TRANSITIONS
   ============================================================ */

/* page-enter: wraps all page content, fades in on load */
.page-enter {
    animation: page-fade-in 0.25s ease forwards;
}
@keyframes page-fade-in {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* active nav link */
.nav-active {
    color: var(--amber-glow) !important;
    background: var(--plating) !important;
    border-color: var(--amber-dim) !important;
}
.nav-active::before { transform: scaleX(1) !important; }

/* ── LOADING STATE ─────────────────────────────────────────── */
.page-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
    gap: 20px;
}

/* two spinning rings — smaller than the gate, same energy */
.loading-sigil {
    position: relative;
    width: 60px; height: 60px;
}
.load-ring {
    position: absolute;
    border-radius: 50%;
    border-style: solid;
    border-color: transparent;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
}
.load-ring-1 {
    width: 56px; height: 56px;
    border-top-color: var(--rust);
    border-right-color: var(--rust);
    border-width: 1px;
    animation: gate-spin 1.4s linear infinite;
}
.load-ring-2 {
    width: 38px; height: 38px;
    border-top-color: var(--amber-dim);
    border-left-color: var(--amber-dim);
    border-width: 1px;
    animation: gate-spin 0.9s linear infinite reverse;
}

.loading-text {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.75rem;
    color: var(--text-dim);
    letter-spacing: 4px;
    text-transform: uppercase;
}

/* three dots pulsing in sequence */
.loading-dots {
    display: flex; gap: 4px;
}
.loading-dots span {
    color: var(--rust-label);
    font-size: 1.25rem;
    line-height: 1;
    animation: dot-seq 1.2s infinite;
}
.loading-dots span:nth-child(2) { animation-delay: 0.2s; }
.loading-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes dot-seq {
    0%,60%,100% { opacity: 0.2; transform: translateY(0); }
    30%          { opacity: 1;   transform: translateY(-4px); }
}
/* ── RESUME BULLETS ──────────────────────────────────────── */
.resume-bullets {
    list-style: none;
    margin-top: 8px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.resume-bullets li {
    font-size: 0.8125rem;
    color: var(--text-mid);
    line-height: 1.6;
    padding-left: 16px;
    position: relative;
    overflow-wrap: break-word;
}
.resume-bullets li::before {
    content: '▸';
    position: absolute;
    left: 0;
    color: var(--rust-label);
    font-size: 0.6875rem;
    top: 3px;
}

/* ── RESUME BULLET SECTION COMMENTS (PHP comment-driven dividers) ── */
/* bullets rendered from PHP comments get ignored by htmlspecialchars,
   so we use a data- attribute approach instead — see ResumePage notes */
.resume-bullets .bullet-divider {
    margin: 8px 0 6px;
    padding-left: 0;
    font-size: 0.625rem;
    letter-spacing: 3px;
    color: var(--rust-label);
    text-transform: uppercase;
    list-style: none;
}
.resume-bullets .bullet-divider::before {
    content: none;
}