/* Color Palette Variables */
:root {
    --bg-void: #151210;       /* The deep off-black from your image */
    --amber-accent: #ba5c3e;  /* The burnt orange/amber header color */
    --text-main: #d1c9b8;     /* Muted off-white/parchment for readability */
    --text-hover: #e09f7d;    /* A softer gold/amber for hovering over links */
}

/* Global Reset & Body Styles */
body {
    background-color: var(--bg-void);
    color: var(--text-main);
    font-family: 'IBM Plex Sans', sans-serif; /* Clean, utilitarian font */
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center; /* Centers content horizontally */
    align-items: center;     /* Centers content vertically */
    min-height: 100vh;       /* Ensures the page is always full screen height */
    text-align: center;
}

/* Main Content Wrapper */
.container {
    max-width: 600px;
    width: 100%;
    padding: 2rem;
}

/* Typography & Headers */
.site-title {
    font-size: 3rem;
    font-weight: 300;
    letter-spacing: 0.1em;
    color: var(--amber-accent);
    margin-bottom: 1rem;
    text-transform: lowercase;
}

/* Replicating the amber block from your image */
.accent-block {
    height: 6px;
    background-color: var(--amber-accent);
    width: 80px;
    margin: 0 auto 4rem auto; /* Centers the block and adds space below */
}

/* Vertical Navigation List */
.project-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 2rem; /* Spacing between the links */
}

.project-list a {
    color: var(--text-main);
    text-decoration: none;
    font-size: 1.25rem;
    letter-spacing: 0.08em;
    transition: all 0.3s ease; /* Smooth fade when hovering */
}

/* Hover Effect for Links */
.project-list a:hover {
    color: var(--amber-accent);
    /* Adds a very subtle "terminal glow" effect */
    text-shadow: 0 0 10px rgba(186, 92, 62, 0.4); 
}

/* Footer Signature */
footer {
    margin-top: 5rem;
    font-size: 0.85rem;
    color: var(--amber-accent);
    opacity: 0.5;
    letter-spacing: 0.1em;
}
/* Minimal Top Navigation */
.top-nav {
    margin-bottom: 3rem;
    text-align: left;
}

.back-link {
    color: var(--amber-accent);
    text-decoration: none;
    font-size: 0.9rem;
    letter-spacing: 0.1em;
    opacity: 0.7;
    transition: opacity 0.3s ease;
}

.back-link:hover {
    opacity: 1;
}

/* Image Styling */
.analog-photo {
    max-width: 100%;
    height: auto;
    /* The new crisp amber border */
    border: 1px solid var(--amber-accent); 
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); 
    margin-bottom: 2rem;
}

/* Prose/Poem Styling */
.prose-container {
    font-family: 'EB Garamond', serif; /* A beautiful serif for the poetry */
    font-size: 1.2rem;
    line-height: 1.8;
    color: var(--text-main);
    text-align: left;
    max-width: 80%;
    margin: 0 auto; /* Centers the text block beneath the image */
}

/* Audio Placeholder */
.audio-player-stub {
    font-size: 0.8rem;
    color: var(--amber-accent);
    opacity: 0.5;
    margin-top: -1rem;
    margin-bottom: 2rem;
    letter-spacing: 0.1em;
}

/* Technical Metadata Block */
.metadata {
    font-family: 'IBM Plex Sans', monospace; /* Keeps the terminal feel */
    font-size: 0.8rem;
    color: var(--amber-accent);
    opacity: 0.7;
    text-align: left;
    max-width: 80%;
    margin: 3rem auto 0 auto; /* Adds breathing room between the poem and the data */
    letter-spacing: 0.05em;
    line-height: 1.6;
}

/* Aligns the tags and slashes */
.meta-label {
    display: inline-block;
    width: 45px; 
    color: var(--text-main);
    opacity: 0.5; /* Makes the label fade back, letting the amber data pop */
}

.feed {
    margin-top: 20vh; /* Change this number. 20vh means 20% of the screen height. */
    display: flex;
    flex-direction: column;
    align-items: center;
}
nav {
    margin-bottom: 8rem; /* You can increase this to 10rem or 12rem for an even larger gap */
}

/* Individual Posts */
.vignette {
    margin-bottom: 40vh; /* Increased from 25vh. 40vh forces a massive void */
    width: 100%;
    display: block; /* Ensures the container behaves predictably */
}

/* --- FIELD LOG TERMINAL STYLE --- */
.log-container {
    width: 100%;
    margin: 2rem 0;
    overflow-x: auto;
}

.terminal-log {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Courier New', Courier, monospace; /* Or your preferred monospace */
    font-size: 0.85rem;
    color: #a0a0a0; /* Dimmed text for high-resource look */
}

.terminal-log th {
    text-align: left;
    padding: 8px;
    border-bottom: 1px solid #444;
    color: #d1d1d1; /* Brighter for headers */
    text-transform: lowercase;
}

.terminal-log td {
    padding: 8px;
    border-bottom: 1px dotted #222;
}

.terminal-log tr:hover td {
    color: #e0e0e0; /* Subtle highlight on hover */
    background-color: rgba(255, 255, 255, 0.02);
}

.tag-active { color: #ff8c00; } /* Use your amber accent color here */