/* =========================
   Global Styles
========================= */






/* =========================
   Header Areas
========================= */

/* 1. Import Academic Fonts from Google Fonts */
/* Cinzel for a classic, chiseled title look, Playfair for elegant, readable italics */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600&family=Playfair+Display:ital,wght@0,400;1,400&display=swap');

/* 2. The Archive Color Palette */
:root {
    --bg-shadow: #121011;       /* A dark, warm charcoal (not harsh black) */
    --text-bone: #e6e2d8;       /* Aged paper / bone white */
    --accent-gold: #c5a059;     /* Tarnished, vintage gold */
    --line-faded: #3a3532;      /* Muted stone for borders */
}

/* Base Body Styling (to ensure the header blends seamlessly) */
body {
    background-color: var(--bg-shadow);
    color: var(--text-bone);
    font-family: 'Playfair Display', serif;
    margin: 0;
    padding: 0;
}

/* 3. The Header Architecture */
header {
    text-align: center;
    padding: 4rem 2rem 2.5rem;
    border-bottom: 1px solid var(--line-faded);
    /* A subtle gradient that mimics a spotlight fading into shadows */
    background: linear-gradient(to bottom, #0a0909, var(--bg-shadow)); 
}

header h1 {
    font-family: 'Cinzel', serif;
    font-size: 3.5rem;
    color: var(--text-bone);
    margin: 0;
    letter-spacing: 2px;
    font-weight: 400;
}

header h2 {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: 1.1rem;
    color: var(--accent-gold);
    margin: 0.5rem 0 2.5rem 0;
    letter-spacing: 1.5px;
    font-weight: 400;
}

/* =========================
   Navigation
========================= */

/* 4. The Navigation (The Hallways) */
.primary-menu ul {
    list-style: none; /* Removes the default bullet points */
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    flex-wrap: wrap; /* Ensures the menu doesn't break on mobile screens */
    gap: 2.5rem; /* Even spacing between the rooms */
}

.primary-menu li {
    position: relative; /* Needed for the hover underline animation */
}

.primary-menu a {
    text-decoration: none;
    color: var(--text-bone);
    font-family: 'Cinzel', serif;
    font-size: 0.9rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: color 0.4s ease;
}

/* 5. Interactive Hover Effects */
.primary-menu a:hover {
    color: var(--accent-gold);
}

/* Creates a subtle, animated gold underline when hovering over a link */
.primary-menu a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 1px;
    bottom: -6px;
    left: 50%;
    background-color: var(--accent-gold);
    transition: all 0.4s ease;
    transform: translateX(-50%);
}

.primary-menu a:hover::after {
    width: 100%;
}

/* --- 6. The Hearth (Hero Section) --- */
.the-hearth {
    position: relative;
    padding: 8rem 2rem;
    text-align: center;
    /* This creates a dark overlay on top of your background image so the text remains readable */
    background: linear-gradient(rgba(18, 16, 17, 0.7), rgba(18, 16, 17, 0.9)), 
                url('images/moody-image.png') center/cover no-repeat;
    border-bottom: 1px solid var(--line-faded);
}

.hearth-content {
    max-width: 800px;
    margin: 0 auto;
}

.epigraph {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: 1.6rem;
    color: var(--text-bone);
    line-height: 1.6;
    margin: 0 0 2rem 0;
}

.manifest-divider {
    width: 50px;
    height: 1px;
    background-color: var(--accent-gold);
    margin: 0 auto 2rem auto;
}

.manifest {
    font-family: 'Playfair Display', serif;
    font-size: 1.1rem;
    color: #c4beb0; /* Slightly darker than the bone text to create visual hierarchy */
    line-height: 1.8;
    margin-bottom: 3rem;
}

/* The Call to Action Button */
.cta-button {
    display: inline-block;
    padding: 0.8rem 2.5rem;
    border: 1px solid var(--accent-gold);
    color: var(--accent-gold);
    text-decoration: none;
    font-family: 'Cinzel', serif;
    font-size: 0.9rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    transition: all 0.4s ease;
}

/* Reverses the colors when the user hovers over the button */
.cta-button:hover {
    background-color: var(--accent-gold);
    color: var(--bg-shadow);
}

/* --- 7. The Centerpiece (Featured Content) --- */
.the-centerpiece {
    padding: 6rem 2rem;
    background-color: var(--bg-shadow);
    border-bottom: 1px solid var(--line-faded);
}

.split-layout {
    display: flex;
    max-width: 1000px;
    margin: 0 auto;
    gap: 4rem;
    align-items: center;
}

.centerpiece-image img {
    width: 100%;
    max-width: 450px;
    height: auto;
    border: 1px solid var(--line-faded);
    filter: grayscale(40%) contrast(1.2); /* Gives the image a slightly vintage, moody wash */
}

.centerpiece-text {
    flex: 1;
}

.section-label {
    font-family: 'Cinzel', serif;
    font-size: 0.8rem;
    color: var(--accent-gold);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 1rem;
}

.centerpiece-text h2 {
    font-family: 'Cinzel', serif;
    font-size: 2.2rem;
    color: var(--text-bone);
    margin: 0 0 1.5rem 0;
    line-height: 1.3;
}

.centerpiece-text p {
    font-family: 'Playfair Display', serif;
    font-size: 1.1rem;
    color: #c4beb0;
    line-height: 1.7;
    margin-bottom: 2.5rem;
}

/* --- 8. The Hallways (Category Cards) --- */
.the-hallways {
    padding: 6rem 2rem;
    background: linear-gradient(to bottom, var(--bg-shadow), #0a0909);
    border-bottom: 1px solid var(--line-faded);
}

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    max-width: 1000px;
    margin: 0 auto;
}

.hallway-card {
    display: block;
    text-decoration: none;
    padding: 3rem 2rem;
    border: 1px solid var(--line-faded);
    text-align: center;
    transition: all 0.4s ease;
    background-color: transparent;
}

.hallway-card h3 {
    font-family: 'Cinzel', serif;
    font-size: 1.3rem;
    color: var(--text-bone);
    margin: 0 0 1rem 0;
    transition: color 0.4s ease;
}

.card-divider {
    width: 30px;
    height: 1px;
    background-color: var(--line-faded);
    margin: 0 auto 1.5rem auto;
    transition: background-color 0.4s ease;
}

.hallway-card p {
    font-family: 'Playfair Display', serif;
    font-size: 1rem;
    color: #a8a397;
    line-height: 1.6;
    margin: 0;
}

.hallway-card:hover {
    border-color: var(--accent-gold);
    background-color: rgba(197, 160, 89, 0.03); /* A very faint gold wash on hover */
}

.hallway-card:hover h3 {
    color: var(--accent-gold);
}

.hallway-card:hover .card-divider {
    background-color: var(--accent-gold);
}

/* --- 9. The Guestbook (Footer) --- */
.the-guestbook {
    text-align: center;
    padding: 6rem 2rem 2rem;
    background-color: #0a0909;
}

.the-guestbook h2 {
    font-family: 'Cinzel', serif;
    font-size: 2rem;
    color: var(--text-bone);
    margin: 0 0 1rem 0;
}

.the-guestbook p {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    color: #c4beb0;
    margin-bottom: 3rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.guestbook-form {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 5rem;
    flex-wrap: wrap; /* Keeps it responsive on mobile */
}

.guestbook-form input[type="email"] {
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--line-faded);
    color: var(--text-bone);
    font-family: 'Playfair Display', serif;
    font-size: 1rem;
    padding: 0.8rem;
    width: 300px;
}

.guestbook-form input[type="email"]:focus {
    outline: none;
    border-bottom-color: var(--accent-gold);
}

.footer-credits {
    border-top: 1px solid var(--line-faded);
    padding-top: 2rem;
}

.footer-credits p {
    font-size: 0.85rem;
    font-style: normal;
    color: #635f58;
}

/* --- 10. The Study (Page Intro & Active State) --- */

/* Highlights the room you are currently in inside the navigation */
.active-room {
    color: var(--accent-gold) !important;
    border-bottom: 1px solid var(--accent-gold);
}

.page-intro {
    text-align: center;
    padding: 6rem 2rem 3rem;
}

.page-title {
    font-family: 'Cinzel', serif;
    font-size: 2.5rem;
    color: var(--text-bone);
    margin: 0 0 1.5rem 0;
}

.page-description {
    max-width: 700px;
    margin: 0 auto;
    font-family: 'Playfair Display', serif;
    font-size: 1.15rem;
    color: #c4beb0;
    line-height: 1.8;
}

/* --- 11. The Shelves (Syllabus Grid) --- */
.the-shelves {
    padding: 0 2rem 6rem;
}

.syllabus-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 3rem;
    max-width: 1100px;
    margin: 0 auto;
}

.syllabus-volume {
    border: 1px solid var(--line-faded);
    padding: 3rem 2rem;
    background-color: #0a0909;
    position: relative;
    transition: transform 0.4s ease, border-color 0.4s ease;
}

.syllabus-volume:hover {
    transform: translateY(-5px);
    border-color: var(--accent-gold);
}

.current-volume {
    border-color: rgba(197, 160, 89, 0.4); /* Gives the current month a subtle glow */
}

.month-label {
    font-family: 'Cinzel', serif;
    font-size: 0.8rem;
    color: var(--accent-gold);
    text-transform: uppercase;
    letter-spacing: 2px;
    display: block;
    margin-bottom: 1rem;
}

.syllabus-volume h3 {
    font-family: 'Cinzel', serif;
    font-size: 1.8rem;
    color: var(--text-bone);
    margin: 0 0 1rem 0;
}

.theme-tags {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    color: #8c877d;
    font-size: 0.95rem;
    margin-bottom: 2rem;
}

.read-more {
    font-family: 'Cinzel', serif;
    font-size: 0.85rem;
    color: var(--text-bone);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: color 0.3s ease;
}

.read-more:hover {
    color: var(--accent-gold);
}

/* Styling for future, unreleased syllabi */
.upcoming-volume {
    opacity: 0.5;
}
.upcoming-volume:hover {
    transform: none;
    border-color: var(--line-faded);
}
.locked-text {
    font-family: 'Cinzel', serif;
    font-size: 0.85rem;
    color: #635f58;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* --- 12. Individual Curriculum Pages --- */

.curriculum-intro {
    text-align: center;
    padding: 6rem 2rem 3rem;
    background: linear-gradient(to bottom, #0a0909, var(--bg-shadow));
}

.curriculum-title {
    font-family: 'Cinzel', serif;
    font-size: 3rem;
    color: var(--text-bone);
    margin: 0.5rem 0 1.5rem 0;
}

.curriculum-abstract {
    max-width: 750px;
    margin: 0 auto;
    font-family: 'Playfair Display', serif;
    font-size: 1.15rem;
    color: #c4beb0;
    line-height: 1.8;
    font-style: italic;
}

.curriculum-content {
    max-width: 900px;
    margin: 0 auto;
    padding: 2rem 2rem 6rem;
}

.syllabus-category {
    margin-bottom: 5rem;
}

.syllabus-category h3 {
    font-family: 'Cinzel', serif;
    font-size: 1.5rem;
    color: var(--accent-gold);
    border-bottom: 1px solid var(--line-faded);
    padding-bottom: 1rem;
    margin-bottom: 2rem;
}

/* Layout for the media items */
.media-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

.media-item {
    background-color: #0a0909;
    border: 1px solid var(--line-faded);
    padding: 2rem;
    transition: border-color 0.4s ease;
}

.media-item:hover {
    border-color: var(--accent-gold);
}

/* Special styling for the Core Text to make it stand out */
.highlight-item {
    border-color: rgba(197, 160, 89, 0.5);
    background: linear-gradient(to bottom right, #0a0909, rgba(197, 160, 89, 0.05));
}

.media-item h4 {
    font-family: 'Cinzel', serif;
    font-size: 1.3rem;
    color: var(--text-bone);
    margin: 0 0 0.2rem 0;
}

.media-author {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: 0.95rem;
    color: #8c877d;
    display: block;
    margin-bottom: 1.5rem;
}

.media-item p {
    font-family: 'Playfair Display', serif;
    font-size: 1.05rem;
    color: #c4beb0;
    line-height: 1.7;
    margin: 0;
}

/* --- 13. The Viewing Room --- */

.featured-viewing {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 2rem 5rem;
    text-align: center;
}

.video-title {
    font-family: 'Cinzel', serif;
    font-size: 2rem;
    color: var(--text-bone);
    margin: 0.5rem 0 2.5rem 0;
}

/* The Responsive Video Magic */
.video-container {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9; /* Keeps the perfect cinematic widescreen shape */
    background-color: #000; /* Shows a pure black screen while loading */
    border: 1px solid var(--line-faded);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8); /* Gives the video depth */
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

.featured-video {
    border-color: var(--accent-gold); /* Highlights the main video */
}

.video-caption {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: 1.1rem;
    color: #a8a397;
    margin-top: 2rem;
    line-height: 1.6;
}

/* --- 14. The Vaults (Grid of Past Videos) --- */
.the-vaults {
    background: linear-gradient(to bottom, var(--bg-shadow), #0a0909);
    padding: 5rem 2rem 6rem;
    border-top: 1px solid var(--line-faded);
}

.vault-heading {
    text-align: center;
    font-family: 'Cinzel', serif;
    font-size: 2rem;
    color: var(--text-bone);
    margin-bottom: 1rem;
}

.vault-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 3rem;
    max-width: 1100px;
    margin: 4rem auto 0;
}

.vault-item h4 {
    font-family: 'Cinzel', serif;
    font-size: 1.2rem;
    color: var(--text-bone);
    margin: 1.5rem 0 0.5rem 0;
}

.vault-item p {
    font-family: 'Playfair Display', serif;
    font-size: 1rem;
    color: #c4beb0;
    margin: 0;
}

/* --- 15. The Reading Society --- */

.current-gathering {
    padding: 2rem 2rem 6rem;
    max-width: 1000px;
    margin: 0 auto;
}

.book-cover-wrapper {
    display: flex;
    justify-content: center;
    width: 100%;
    max-width: 350px;
}

/* Styles the book covers to look tangible */
.book-cover {
    width: 100%;
    height: auto;
    border-radius: 2px 6px 6px 2px; /* Mimics the spine of a book */
    box-shadow: -5px 0 15px rgba(0,0,0,0.6), 5px 10px 20px rgba(0,0,0,0.8);
    border-left: 4px solid rgba(255, 255, 255, 0.1); /* Creates a page edge highlight */
}

.gathering-text {
    flex: 1;
}

.gathering-title {
    font-family: 'Cinzel', serif;
    font-size: 2.2rem;
    color: var(--text-bone);
    margin: 0 0 0.5rem 0;
}

/* A specialized button just for Fable */
.fable-button {
    display: inline-block;
    margin-top: 1.5rem;
    padding: 1rem 3rem;
    background-color: var(--accent-gold);
    color: var(--bg-shadow);
    text-decoration: none;
    font-family: 'Cinzel', serif;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    transition: all 0.4s ease;
    border: 1px solid var(--accent-gold);
}

.fable-button:hover {
    background-color: transparent;
    color: var(--accent-gold);
}

/* --- 16. Past Volumes Grid --- */
.past-reads {
    background: linear-gradient(to bottom, var(--bg-shadow), #0a0909);
    padding: 5rem 2rem 6rem;
    border-top: 1px solid var(--line-faded);
    text-align: center;
}

.past-reads-intro {
    font-family: 'Playfair Display', serif;
    font-size: 1.1rem;
    color: #c4beb0;
    font-style: italic;
    margin-bottom: 4rem;
}

.book-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 3rem;
    max-width: 900px;
    margin: 0 auto;
}

.archived-book img {
    width: 100%;
    height: auto;
    border-radius: 2px 4px 4px 2px;
    box-shadow: -2px 0 8px rgba(0,0,0,0.5), 3px 6px 12px rgba(0,0,0,0.7);
    margin-bottom: 1rem;
    filter: grayscale(20%) brightness(0.8); /* Dims old books to keep the gothic mood */
    transition: all 0.4s ease;
}

.archived-book:hover img {
    filter: grayscale(0%) brightness(1); /* Lights up when hovered */
    transform: translateY(-5px);
}

.archived-book h4 {
    font-family: 'Cinzel', serif;
    font-size: 1rem;
    color: var(--text-bone);
    margin: 0 0 0.2rem 0;
}

/* --- 17. The Archivist (About Page) --- */

.archivist-profile {
    padding: 6rem 2rem;
    max-width: 1000px;
    margin: 0 auto;
}

.portrait-wrapper {
    display: flex;
    justify-content: center;
    width: 100%;
    max-width: 400px;
}

/* Gives the portrait a vintage, framed appearance */
.archivist-portrait {
    width: 100%;
    height: auto;
    border: 1px solid var(--accent-gold);
    padding: 10px; /* Creates an inner border space */
    background-color: var(--bg-shadow);
    filter: sepia(10%) grayscale(40%) contrast(1.1); /* Adds an antique wash */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7);
}

.bio-text {
    flex: 1;
}

.bio-text p {
    font-family: 'Playfair Display', serif;
    font-size: 1.1rem;
    color: #c4beb0;
    line-height: 1.8;
    margin-bottom: 1.5rem;
}

/* --- 18. Academic Records (CV Grid) --- */
.academic-records {
    background: linear-gradient(to bottom, #0a0909, var(--bg-shadow));
    padding: 5rem 2rem 6rem;
    border-top: 1px solid var(--line-faded);
    border-bottom: 1px solid var(--line-faded);
}

.records-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 3rem;
    max-width: 1000px;
    margin: 3rem auto 0;
}

.record-item {
    background-color: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--line-faded);
    padding: 2.5rem 2rem;
}

.record-item h4 {
    font-family: 'Cinzel', serif;
    font-size: 1.2rem;
    color: var(--accent-gold);
    margin: 0 0 1.5rem 0;
    border-bottom: 1px solid var(--line-faded);
    padding-bottom: 0.8rem;
}

/* Customizing the list to look like an old document */
.record-item ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.record-item li {
    font-family: 'Playfair Display', serif;
    font-size: 1rem;
    color: #c4beb0;
    line-height: 1.6;
    margin-bottom: 1rem;
    position: relative;
    padding-left: 1.5rem;
}

/* Replaces standard bullets with a delicate gold dash */
.record-item li::before {
    content: "—";
    color: var(--accent-gold);
    position: absolute;
    left: 0;
}

.record-item strong {
    color: var(--text-bone);
    font-weight: normal; /* Playfair bold can be bulky, normal weight with color change looks more refined */
}

/* --- 19. The Diary (Blog Layout) --- */

.latest-entry-section {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 2rem 4rem;
}

.featured-entry {
    background: linear-gradient(to bottom right, #0a0909, rgba(197, 160, 89, 0.05));
    border: 1px solid var(--accent-gold);
    padding: 4rem;
    text-align: center;
}

.entry-date {
    font-family: 'Cinzel', serif;
    font-size: 0.85rem;
    color: var(--accent-gold);
    text-transform: uppercase;
    letter-spacing: 2px;
    display: block;
    margin-bottom: 1rem;
}

.featured-entry .entry-title {
    font-family: 'Cinzel', serif;
    font-size: 2.5rem;
    color: var(--text-bone);
    margin: 0 0 1.5rem 0;
    line-height: 1.2;
}

.entry-excerpt {
    font-family: 'Playfair Display', serif;
    font-size: 1.1rem;
    color: #c4beb0;
    line-height: 1.8;
    margin-bottom: 2rem;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

/* --- 20. Past Entries Grid --- */
.past-entries {
    padding: 2rem 2rem 6rem;
    border-bottom: 1px solid var(--line-faded);
}

.entries-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 3rem;
    max-width: 1100px;
    margin: 0 auto;
}

.diary-entry {
    border-top: 1px solid var(--line-faded);
    padding-top: 2rem;
    transition: all 0.4s ease;
}

.diary-entry:hover {
    border-top-color: var(--accent-gold);
}

.diary-entry .entry-title {
    font-family: 'Cinzel', serif;
    font-size: 1.4rem;
    color: var(--text-bone);
    margin: 0.5rem 0 1rem 0;
    line-height: 1.3;
}

.diary-entry .entry-excerpt {
    font-size: 1rem;
    margin-bottom: 1.5rem;
}

/* --- 21. Individual Diary Posts --- */

.post-header {
    text-align: center;
    padding: 6rem 2rem 2rem;
}

.post-header .post-title {
    font-family: 'Cinzel', serif;
    font-size: 3rem;
    color: var(--text-bone);
    margin: 1rem auto 2rem;
    max-width: 800px;
    line-height: 1.2;
}

.post-content {
    max-width: 700px; /* Keeps the text column narrow for easy reading */
    margin: 0 auto;
    padding: 0 2rem 4rem;
}

.post-content p {
    font-family: 'Playfair Display', serif;
    font-size: 1.15rem;
    color: #c4beb0;
    line-height: 1.9;
    margin-bottom: 2rem;
}

/* The Classic Drop Cap */
.drop-cap {
    float: left;
    font-family: 'Cinzel', serif;
    font-size: 4.5rem;
    line-height: 0.8;
    padding-top: 4px;
    padding-right: 8px;
    padding-left: 3px;
    color: var(--accent-gold);
}

/* Styling for excerpts from books or research texts */
.post-quote {
    margin: 3rem 0;
    padding: 2rem 3rem;
    border-left: 2px solid var(--accent-gold);
    background: linear-gradient(to right, rgba(197, 160, 89, 0.05), transparent);
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: 1.25rem;
    color: var(--text-bone);
    line-height: 1.8;
}

.quote-author {
    display: block;
    margin-top: 1.5rem;
    font-family: 'Cinzel', serif;
    font-style: normal;
    font-size: 0.9rem;
    color: #8c877d;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.post-image {
    width: 100%;
    height: auto;
    margin: 3rem 0;
    border: 1px solid var(--line-faded);
    padding: 10px;
    background-color: #0a0909;
    filter: sepia(20%) grayscale(20%); /* Gives photos an archival quality */
}

.post-navigation {
    text-align: center;
    padding: 2rem 2rem 6rem;
    border-bottom: 1px solid var(--line-faded);
}