:root {
    --bg-color: #424072;
    --secondary-color: #972787;
    --secondary-color-2: #7a1c6c;
    --bold-color: #caff81;
    --bold-color-2: #9ae445be;
    --white-text: #ecf0f1;
}

/* --- TYPOGRAPHY UPGRADE: Added for accessibility and modern font sizing --- */
html {
    font-size: 120%; /* Base font size (usually 16px), allows rem units to scale with user preferences. */
}

body {
    background-color: var(--secondary-color-2);
    overflow: auto;
    margin: 0;
    padding: 0;
    height: 100%;
    flex-direction: row;
    overflow-x: hidden !important;

    /* --- TYPOGRAPHY UPGRADE: Modern font stack and improved readability --- */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "DejaVu Sans", "Roboto", "Noto Sans", "Ubuntu", "Liberation Sans", sans-serif;
    font-weight: 200;
    line-height: 1.6; /* Sets a comfortable line spacing for all text. */
    color: var(--white-text); /* Establishes a default text color. */
}

body:before {
    content: "";
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-image: url('../img/background.webp');
    background-size: cover;
    background-position: top;
    background-attachment: fixed;
    opacity: 0.8;
    z-index: -1;
}

body.contact:before {
    background-image: url('../img/contact-background.webp');
    background-size: cover;
    background-position: top;
    background-attachment: fixed;
    opacity: 0.8;
    z-index: -1;
}

strong, b {
    font-weight: 600; /* Medium */
}

em, i {
    font-style: italic;
}

h3 {
    /* Use the Medium weight for smaller headings */
    font-weight: 400;
}

h2 {
    /* Use the SemiBold weight for medium headings */
    font-weight: 600;
}

h1 {
    /* Use the Bold weight for main headings */
    font-weight: 700;
}

.banner {
    width: 100%;
    height: auto;
    max-width: 100%;
    display: block;
}

#headshot {
    float: left;
    max-width: 30%;
    max-height: 75%;
    margin: 0% 4% 2% 0%;
    object-fit: fill;
    opacity: 1;
    border-radius: 30px;
    box-shadow: 0px 0px 30px rgba(78,20,100,0.8);
}

/* Default: horizontal layout */
.menu {
    display: flex;
    align-items: stretch;
    justify-content: space-around;
    background-color: var(--secondary-color);
    padding: 0px 20px;
    list-style: none;
    margin: 0;
    /* font-family is inherited from body */
    width: 100%;
    z-index: 1;
}

.menu a {
    text-decoration: none;
    color: var(--white-text);
    font-size: 1.125rem; /* 18px */
    padding: 10px 20px;
    transition: color 0.3s ease, background-color 0.3s ease;
}

.menu a:hover {
    color: var(--secondary-color);
    background-color: var(--white-text);
    border-radius: 5px;
}

/* Mobile-first nav toggle */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--secondary-color);
    padding: 10px 60px;
    flex-wrap: wrap;
    z-index: 1;
  }

  .menu-icon {
    display: none;
    font-size: 2rem; /* 28px */
    color: var(--white-text);
    background-color: var(--secondary-color);
    cursor: pointer;
  }

  #menu-toggle {
    display: none;
  }

.home-text {
    background-color: var(--bg-color);
    color: var(--white-text);
    border-radius: 30px;
    /* font-family is inherited from body */
    font-size: 1.125rem; /* --- TYPOGRAPHY UPGRADE: 18px equivalent --- */
    margin-top: 2%;
    box-shadow: 0px 0px 30px rgba(78,20,100,0.8);
    border: 5px solid #972787;
    opacity: 1;
    position: relative;
    height: auto;
    overflow: hidden;

    /* --- TYPOGRAPHY UPGRADE: Constrain text width for readability --- */
   margin-left: 10%;
    margin-right: 10%;
}

.home-text  p > b{
    font-size: 1.5rem; /* --- TYPOGRAPHY UPGRADE: 40px equivalent --- */
    color: var(--bold-color);
}

.home-text p {
    margin-left: 2vw;
    margin-right: 2vw;
    flex-grow: 1;
}

.home-text a {
    color: var(--bold-color);
}

.home-text a:hover {
    color: var(--bold-color-2);
}

.home-text a:active {
    color: var(--bold-color-2);
}

.home-text h1 {
    color: var(--secondary-color);
    text-shadow:
        2px 2px 0 var(--white-text),
        -2px 2px 0 var(--white-text),
        -2px -2px 0 var(--white-text),
        2px -2px 0 var(--white-text);
    text-align: center;

    /* --- TYPOGRAPHY UPGRADE: Proportional sizing and spacing --- */
    font-size: 3rem; /* ~48px */
    line-height: 1.1;
    margin: 2.5rem 0 1rem 0;
}

.home-text h2 {
    color: var(--white-text);
    text-align: center;

    /* --- TYPOGRAPHY UPGRADE: Proportional sizing and spacing --- */
    font-size: 2.25rem; /* ~36px */
    line-height: 1.2;
    margin: 2rem 5% 1rem 5%;
}


.home-text h2 > b {
  display: flex;
  justify-content: center;
  color: var(--bold-color);
  text-align: center;
}

.home-text h3 {
    margin-top: 0px;
    color: var(--white-text);
    text-align: center;

    /* --- TYPOGRAPHY UPGRADE: Proportional sizing and spacing --- */
    font-size: 1.75rem; /* ~28px */
    line-height: 1.3;
    margin: 1.5rem 5% 0.5rem 5%;
}

.home-text h3 > hr {
    color: var(--secondary-color);
    background-color: var(--secondary-color);
    height: 6px;
}

.home-text ol,
.home-text ul {
    margin-left: 2vw;
    margin-right: 2vw;
}

.home-text img {
    display: block;
    margin: 0 auto;
    max-width: 90%;
    height: auto;
}

.blog-text {
    margin-left: 15%;
    margin-right: 15%;
}

/* =================================================================== */
/* --- New Styles for Figures and Figcaptions --- */
/* =================================================================== */

figure {
    /* Inherit margins from surrounding block, but allow for specific adjustments */
    margin: 2.5rem 0; /* Add vertical spacing above/below the figure */
    padding: 1rem 0 1rem 0;
    text-align: center; /* Center the image and caption */
    display: block; /* Ensure it behaves as a block element */
    border-radius: 20px; /* Consistent with other elements */
    overflow: hidden; /* Ensures borders/shadows conform to rounded corners */
    background-color: var(--bg-color); /* A subtle background to visually group */
    box-shadow: 0px 0px 25px rgba(78,20,100,0.7); /* Consistent shadow effect */
    border: 3px solid var(--secondary-color); /* Subtle border matching theme */
    max-width: 90%; /* Keep figures contained */
    margin-left: auto; /* Center the figure if it's smaller than full width */
    margin-right: auto;
}

figure img {
    display: block; /* Remove extra space below image */
    max-width: 100%; /* Ensure image scales within its container */
    height: auto;
    
    /* --- MODIFICATIONS --- */
    max-height: 90vh; /* NEW: Constrain height to 90% of viewport */
    object-fit: contain; /* UPDATED: Changed from 'cover' to 'contain' */
    /* 'contain' maintains the aspect ratio and prevents cropping,
       which matches the "auto-scale" request. */
    /* --- END MODIFICATIONS --- */

    border-bottom: 2px solid var(--secondary-color-2); /* Visual separation from caption */
    filter: brightness(0.95); /* Slightly darken images to better integrate with dark theme */
    transition: filter 0.3s ease; /* Smooth hover effect */
}

figure img:hover {
    filter: brightness(1.05); /* Slightly brighten on hover for interaction */
}

figcaption {
    margin-top: 1rem; /* Ample padding around the caption text */
    font-size: 0.95rem; /* Slightly smaller for captions */
    line-height: 1.4;
    color: var(--white-text); /* Standard text color */
    font-weight: 300; /* Lighter weight for non-heading text */
    text-align: center; /* Center align caption text */
}

figcaption a {
    color: var(--bold-color); /* Use accent color for links within captions */
    text-decoration: none; /* Clean link style */
    font-weight: 400; /* Slightly bolder for readability */
    transition: color 0.3s ease;
}

figcaption a:hover {
    color: var(--bold-color-2); /* Hover color for consistency */
    text-decoration: underline; /* Underline on hover for clarity */
}

/* =================================================================== */
/* --- CSS-ONLY :TARGET LIGHTBOX STYLES --- */
/* =================================================================== */

/* The Trigger Link */
figure .lightbox-trigger {
  display: block; /* Ensures it behaves like a block */
  line-height: 0; /* Prevents extra space under the image */
  cursor: pointer;
  text-decoration: none;
}

/* The Modal Overlay (Hidden by Default) */
.lightbox-overlay {
  visibility: hidden;
  opacity: 0;
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(3, 13, 34, 0.9); 
  display: flex;
  justify-content: center;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  /* Allow overlay to scroll for tall images */
  overflow-y: auto; 
  /* Align content to the top (better for tall images) */
  align-items: flex-start;
  /* Add padding to replace alignment centering */
  padding: 5vh 0; 
  /* Ensure padding box calculation is correct */
  box-sizing: border-box; 
}

/* The ":target" selector */
.lightbox-overlay:target {
  visibility: visible;
  opacity: 1;
}

/* The Modal Content Box */
.lightbox-content {
  /* This invisible container is constrained to 90% of the viewport */
  max-width: 90vw;
  /* We use flexbox to stack the image and caption */
  display: flex;
  flex-direction: column;
  /* Flexbox fix: allows flex items (the image) to shrink correctly */
  min-height: 0; 
  position: relative; 
  z-index: 1002;
  margin: 0; 
  padding: 0; 
}

/* The Image INSIDE the Modal */
.lightbox-content img {
  border-bottom: none; 
  filter: brightness(1);
  /* This rule is still crucial to override the `figure img` rule */
  max-height: none; 
  /* The image will fill the container, which is already constrained */
  max-width: 100%; 
  /* This ensures the image scales down, maintaining aspect ratio */
  object-fit: contain;
  /* Flexbox fix: allows image to shrink properly */
  min-height: 0; 
  display: block;
}

/* The Figcaption INSIDE the Modal */
.lightbox-content figcaption {
  flex-shrink: 0;
  margin-top: 0;
  padding: 0.5rem 1rem; 
  color: var(--white-text);
  text-align: center;
  text-shadow: 0 1px 3px rgba(0,0,0,0.7);
}

/* The Close Buttons (Themed) */
.lightbox-close {
  position: absolute;
  top: 0.5rem;
  right: 1.25rem;
  font-size: 3rem;
  font-weight: bold;
  color: var(--white-text);
  text-decoration: none;
  z-index: 1003;
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
  transition: color 0.2s ease;
}

.lightbox-close:hover {
  color: var(--bold-color); /* Themed hover */
}

.lightbox-bg-close {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1001; /* Behind content, above overlay */
}

/* =================================================================== */
/* --- NEW AND UPDATED STYLES FOR BLOG INDEX PAGE --- */
/* =================================================================== */

/* --- NEW AND UPDATED STYLES FOR BLOG INDEX PAGE --- */

.filter-bar {
    background-color: var(--bg-color);
    color: var(--white-text);
    border-radius: 30px;
    box-shadow: 0 0 30px rgba(78,20,100,0.8);
    border: 5px solid var(--secondary-color);
    margin: 2% 10%;
    padding: 1.5rem 2rem;
}

.filter-form { display:flex; flex-wrap:wrap; gap:1.5rem; align-items:flex-end; }
.filter-form .form-group { display:flex; flex-direction:column; gap:0.25rem; }
.filter-form .search-group { flex:2 1 300px; }
.filter-form .filter-group { flex:1 1 150px; }
.filter-form .submit-group { flex-shrink:0; }
.filter-form label { font-size:1rem; color:var(--bold-color); font-weight:500; margin-left:5px; }
.filter-form input[type="text"], .filter-form select {
    padding:12px; font-size:1rem; font-family:inherit; border:2px solid var(--secondary-color);
    color:var(--white-text); box-shadow: inset 0 0 5px rgba(0,0,0,0.3); outline:none; border-radius:1em;
    background-color:#2e2c52; transition: border-color .3s, box-shadow .3s; width:100%; box-sizing:border-box;
}
.filter-form input[type="text"]:focus, .filter-form select:focus { border-color:var(--bold-color); box-shadow:0 0 8px var(--bold-color-2); }
.filter-form input[type="submit"] {
    padding:12px 24px; background:var(--secondary-color); color:var(--white-text); border:none; border-radius:10px;
    font-size:1rem; font-weight:600; cursor:pointer; transition:background-color .3s;
}
.filter-form input[type="submit"]:hover { background:var(--secondary-color-2); }

.tags-menu { margin-top:1.5rem; padding-top:1rem; border-top:3px solid var(--secondary-color-2); flex:1 0 100%; }
.tags-menu h3 { margin:0 0 1rem 0; font-size:1rem; color:var(--white-text); font-weight:500; }
.tags-menu .tag-list { display:flex; flex-wrap:wrap; gap:8px; }

.blog-grid {
    display:grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    column-gap:25px;
    row-gap:50px;
    padding:0 10%;
    align-items:stretch;
}

/* CARD: semantic container. Phase 3: border/glow/bg are driven by CSS vars
   set in the tab-system block below; tabs may protrude above the card top
   so overflow must stay visible. */
.blog-card {
    position:relative;
    background:var(--bg-color);
    border-radius:20px;
    display:flex;
    flex-direction:column;
    color:var(--white-text);
    overflow:visible;
    min-height:420px;
    transition: transform .25s ease, box-shadow .25s ease;
}
.blog-card:hover { transform: translateY(-6px); }

.blog-card .title-link {
  text-decoration: none;
  color: inherit;
}

.blog-card-image {
    display:block;
    width:100%;
    height:220px;
    object-fit:cover;
    border-bottom:3px solid var(--image-divider);
    /* Inner radius = outer (20px) - border (3px) = 17px. Clips image to card. */
    border-top-left-radius: 17px;
    border-top-right-radius: 17px;
}

.blog-card-content {
    padding:18px;
    display:flex;
    flex-direction:column;
    gap:10px;
    flex:1 1 auto;
    /* Inner radius = outer (20px) - border (3px) = 17px. Clips content to card. */
    border-bottom-left-radius: 17px;
    border-bottom-right-radius: 17px;
}

.blog-card h2 {
    margin:0;
    font-size:1.35rem;
    line-height:1.25;
    font-weight:600;
}
.blog-card h2 .title-link {
    color:inherit; text-decoration:none;
    position:relative; z-index:2; /* ensure title is clickable if desired */
}
.blog-card h2 .title-link:hover { text-decoration:underline; }

.blog-card-description {
    font-size:1rem;
    font-weight:300;
    line-height:1.5;
    color:var(--white-text);
}

/* Card metadata row — published date + reads count. */
.meta-stack {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1rem;
    align-items: center;
    font-size: 0.9rem;
}
.card-reads {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: var(--card-subtitle);  /* inherits per-scheme (TBR/Medium/Substack) */
    font-variant-numeric: tabular-nums;
    opacity: 0.95;
}
.card-reads-icon {
    flex-shrink: 0;
    opacity: 0.9;
}

/* TAGS: two-line clamp by default with soft fade, expandable via checkbox */
.tag-stack {
    display:flex;
    flex-direction:column;
    gap:8px;
    margin-top:auto; /* push tags area to bottom of card */
}

.tag-rail {
    --clamp-lines: 2;
    --line-height: 28px;
    max-height: calc(var(--clamp-lines) * var(--line-height));
    overflow:hidden;
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    position:relative;
}
.tag-rail::after {
    content:"";
    position:absolute; left:0; right:0; bottom:0;
    height:28px;
    background: linear-gradient(to bottom, rgba(66,64,114,0), rgba(66,64,114,0.98) 80%);
    pointer-events:none;
}

/* show/hide control using a checkbox */
.tag-toggle { position:absolute; opacity:0; pointer-events:none; }
.tag-toggle + .tag-rail + .tag-toggle-btn { 
    align-self:flex-start;
    font-size:0.85rem;
    background:var(--secondary-color);
    color:var(--white-text);
    border:1px solid var(--secondary-color-2);
    padding:4px 10px;
    border-radius:12px;
    cursor:pointer;
    user-select:none;
}

/* expanded state */
.tag-toggle:checked + .tag-rail { max-height:none; }
.tag-toggle:checked + .tag-rail::after { display:none; }
.tag-toggle:checked + .tag-rail + .tag-toggle-btn .more { display:none; }
.tag-toggle:checked + .tag-rail + .tag-toggle-btn .less { display:inline; }

/* collapsed labels */
.tag-toggle + .tag-rail + .tag-toggle-btn .less { display:none; }

.blog-card-tags a { 
    position:relative; z-index:2;
    text-decoration:none;
}

.tag {
    display:inline-block;
    background-color:var(--secondary-color-2);
    color:var(--white-text);
    padding:5px 12px;
    border-radius:15px;
    font-size:0.8rem;
    font-weight:500;
    text-decoration:none;
    border:1px solid transparent;
    transition: all .2s ease-in-out;
}

.tag:hover {
    background-color:var(--bold-color); color:var(--bg-color); border-color:var(--bold-color-2); transform:scale(1.05);
}

.meta-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-top: 12px;
  font-size: 0.9rem;
  opacity: 0.9;
}

.meta-row time {
  white-space: nowrap;
}

.meta-row .views {
  white-space: nowrap;
}

/* =================================================================== */
/* --- END OF NEW/UPDATED BLOG STYLES --- */
/* =================================================================== */


.webrings {
    display: flex;
    justify-content: center;
}

/* ... The rest of your CSS file continues here, unmodified ... */

.now-playing-container {
    padding: 15px;
    margin-top: 20px;
}

.now-playing-header {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--bold-color);
    margin-bottom: 15px;
    text-align: center;
    border-bottom: 2px solid var(--secondary-color);
    padding-bottom: 10px;
}

.now-playing-content {
    display: flex;
    align-items: center;
    gap: 15px;
}

.now-playing-artwork {
    width: 120px;
    height: 120px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid var(--secondary-color-2);
}

.now-playing-artwork.stopped {
    filter: grayscale(100%);
    opacity: 0.6;
}

.now-playing-info {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    min-width: 0;
    text-align: left;
}

.now-playing-title {
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--white-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
}

.now-playing-artist {
    font-size: 0.95rem;
    color: #ccc;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 2px 0 0 0;
}

.now-playing-album {
    font-size: 0.85rem;
    font-style: italic;
    color: #aaa;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 2px 0 0 0;
}

.now-playing-stopped {
    color: #aaa;
    font-style: italic;
    width: 100%;
    text-align: center;
}

.recently-played-list {
    list-style: none;
    padding: 0;
    margin-top: 15px;
    font-size: 0.9rem;
}

.recently-played-list li {
    padding: 5px 0;
    border-top: 1px solid var(--secondary-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.recently-played-list li .artist {
    color: #ccc;
}

.site-footer {
    width: 100%;
    background-color: var(--bg-color);
    color: var(--white-text);
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    padding: 20px;
    box-sizing: border-box;
    flex-wrap: wrap;
    box-shadow: 0px -2px 12px rgba(78,20,100,0.8);
    margin-top: 5vh;
}

.footer-left, .footer-right {
    flex: 1;
}

.footer-center {
    flex: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.footer-left {
    display: flex;
    justify-content: flex-start;
}

.footer-right {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-around;
    align-content: flex-end;
    align-items: flex-end;
    gap: 10px;
}
.footer-right img {
    width: 88px;
    height: 31px;
}

.site-description {
    margin-bottom: 10px;
}

.social-links {
    padding-top: 4%;
}

.social-links a {
    margin: 0 10px;
}

.social-links img {
    width: 32px;
    height: 32px;
    transition: transform 0.3s ease;
}

.social-links img:hover {
    transform: scale(1.1);
}

.copyright {
    margin-top: auto;
    font-size: 0.9rem;
}

.directory {
    display:inline-block;
    position: relative;
    justify-content:left;
    text-align: left;
    list-style-type: none;
    padding: 0;
    margin-right: 2vw;
    margin-left: 2vw;
}

.directory a {
    color: var(--bold-color);
    text-decoration: none;
}

.directory a:hover {
    color: var(--bold-color-2);
}

.post-preview {
    flex-grow: 1;
    max-width: 100%;
    max-height: 60%;
    height: auto;
    border-radius: 10px;
    object-fit: cover;
    margin-top: 25px;
    filter: url(#drop-shadow);
}

.viewcount, .description, .tags {
    margin-top: 10px;
    font-size: 1rem; /* 16px */
}

/* ============================================== */
/* --- NEW BLOCKQUOTE STYLES --- */
/* ============================================== */
blockquote {
    border-left: 5px solid var(--white-text);
    margin: 2rem 0 2rem 2rem; /* Vertical spacing. Horizontal is handled by .blog-text */
    padding: 0.5rem 1.5rem 0.5rem 0rem;
    font-style: oblique;
    font-weight: 400; /* ADDED: Set to 'UltraLight' */
    color: var(--white-text);
    line-height: 1.7; /* A bit more spacious for a quote */
    opacity: 0.95;
}

/* Handle paragraphs inside a blockquote cleanly */
blockquote p {
    margin-top: 0;
    margin-bottom: 1rem;
}

blockquote p:last-child {
    margin-bottom: 0;
}

/* ============================================== */
/* --- NEW INLINE CODE STYLES --- */
/* ============================================== */
.inline-source {
    background: #030d22;
    color: #fdfeff;
    padding: 0.15em 0.4em;
    margin: 0 0.1em; /* Add slight horizontal margin */
    border-radius: 4px;
    font-size: 0.85em; /* relative to parent */
    vertical-align: baseline;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    display: inline-block; /* Use inline-block for padding */
    line-height: 1.2; /* Prevent it from messing up parent line-height */
    white-space: nowrap;
}
/* ============================================== */
/* --- END OF NEW INLINE CODE STYLES --- */
/* ============================================== */

/* ============================================== */
/* --- CODE BLOCK STYLES --- */
/* ============================================== */
.source table {
  border-collapse: collapse;
  border-spacing: 0;
}
.source td {
  padding: 0;
  vertical-align: top;
}
.source .linenos {
  color: #ee0077;
  padding-right: 1em;
  padding-left: 1em;
  user-select: none;
  text-align: right;
  position: sticky;
  left: 0;
  background: #030d22;
  z-index: 1;
}
.source .linenos pre,
.source .code pre {
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
}
.source {
    background: #030d22;
    color: #fdfeff;
    font-size: 0.750rem;
    padding-right: 1em;
    padding-top: 1em;
    padding-bottom: 1em;
    border-radius: 8px;
    overflow-x: auto;
    position: relative;
    scrollbar-width: thin;
    scrollbar-color: #972787 #030d22;
    text-align: left;
}
/* ============================================== */
/* --- UPDATED CODE TOKEN STYLES --- */
/* ============================================== */
.source .hll,
.inline-source .hll { background-color: #310072; }
.source .c, .source .c1, .source .cm, .source .cs, .source .cp, .source .cpf,
.inline-source .c, .inline-source .c1, .inline-source .cm, .inline-source .cs, .inline-source .cp, .inline-source .cpf { color: #0098df; font-style: italic; }
.source .err, .source .gr,
.inline-source .err, .inline-source .gr { color: #9e0a52; }
.source .ge,
.inline-source .ge { font-style: italic; }
.source .gs,
.inline-source .gs { font-weight: bold; }
.source .k, .source .kp, .source .kr,
.inline-source .k, .inline-source .kp, .inline-source .kr { color: #ff2cf1; }
.source .o, .source .ow,
.inline-source .o, .inline-source .ow { color: #d786df; }
.source .m, .source .l, .source .mf, .source .mh, .source .mi, .source .mo, .source .il,
.inline-source .m, .inline-source .l, .inline-source .mf, .inline-source .mh, .inline-source .mi, .inline-source .mo, .inline-source .il { color: #ffd400; }
.source .s, .source .sa, .source .sb, .source .sc, .source .dl, .source .sd, .source .s2, .source .se, .source .sh, .source .si, .source .sx, .source .sr, .source .s1, .source .ss,
.inline-source .s, .inline-source .sa, .inline-source .sb, .inline-source .sc, .inline-source .dl, .inline-source .sd, .inline-source .s2, .inline-source .se, .inline-source .sh, .inline-source .si, .inline-source .sx, .inline-source .sr, .inline-source .s1, .inline-source .ss { color: #0ef3ff; }
.source .p,
.inline-source .p { color: #fdfeff; }
.source .n,
.inline-source .n { color: #fdfeff; }
.source .nt,
.inline-source .nt { color: #ff2e97; }
.source .na,
.inline-source .na { color: #39c0ff; }
.source .nb, .source .bp,
.inline-source .nb, .inline-source .bp { color: #40a9ff; }
.source .nf, .source .fm,
.inline-source .nf, .inline-source .fm { color: #ff2e97; }
.source .nx,
.inline-source .nx { color: #fdfeff; }
.source .nv, .source .vc, .source .vg, .source .vi, .source .vm,
.inline-source .nv, .inline-source .vc, .inline-source .vg, .inline-source .vi, .inline-source .vm { color: var(--bold-color); }
.source .kt, .source .kd,
.inline-source .kt, .inline-source .kd { color: var(--bold-color-2); font-style: italic; }
.source .nc, .source .nn,
.inline-source .nc, .inline-source .nn { color: var(--bold-color); }
/* ============================================== */
/* --- END OF CODE BLOCK STYLES --- */
/* ============================================== */

#shrines {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    padding: 20px;
}

.shrine {
    flex: 1 1 calc(30% - 20px);
    margin: 10px;
    flex-grow: 1;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    background-color: var(--secondary-color);
    color: var(--white-text);
    align-items: center;
    justify-content: center;
    text-align: center;
    margin-bottom: 40px;
}

.shrine img {
    max-width: 100%;
    height: auto;
    object-fit: cover;
    filter: url(#drop-shadow);
}

.shrine a {
    text-decoration: none;
}

.shrine a:hover > h1 {
    color: var(--bold-color);
}

.shrine a:active > h1 {
    color: var(--bold-color-2);
}

.album {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
}

.album img {
    max-width: 65%;
    height: auto;
    margin-bottom: 2%;
}

.album p {
    max-width: 65%;
}

.album h3 {
    margin-top: 1%;
}

.album iframe {
    margin-bottom: 2%;
}
.album ul {
    text-align: left;
}

.toc {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
}
.toc ol {
    text-align: left;
}
.toc ul {
    text-align: left;
}

.video‑embed {
  aspect-ratio: 16/9;
  width: 100%;
  max-width: 960px;
  border: 0;
}

.container {
    display: flex;
    justify-content: space-between;
    margin: 2% 2%;
    height: auto;
}

.container  p > b{
    font-size: 2.5rem; /* --- TYPOGRAPHY UPGRADE: 40px equivalent --- */
    color: var(--bold-color);
}
.container p {
    margin: 2%;
    flex-grow: 1;
}

.container a {
    color: var(--bold-color);
}

.container a:hover {
    color: var(--bold-color-2);
}

.container a:active {
    color: var(--bold-color-2);
}

.container h1 {
    color: var(--secondary-color);
    text-shadow:
        2px 2px 0 var(--white-text),
        -2px 2px 0 var(--white-text),
        -2px -2px 0 var(--white-text),
        2px -2px 0 var(--white-text);
    text-align: center;
    margin-right: 5%;
    margin-left: 5%;

    /* --- TYPOGRAPHY UPGRADE: Proportional sizing and spacing --- */
    font-size: 3rem; /* ~48px */
    line-height: 1.1;
    margin: 2.5rem 0 1rem 0;
}

.container h2 {
    color: var(--white-text);
    text-align: center;
    margin-right: 5%;
    margin-left: 5%;

    /* --- TYPOGRAPHY UPGRADE: Proportional sizing and spacing --- */
    font-size: 2.25rem; /* ~36px */
    line-height: 1.2;
    margin: 2rem 5% 1rem 5%;
}

.container h3 {
    margin-top: 0px;
    color: var(--white-text);
    text-align: center;

    /* --- TYPOGRAPHY UPGRADE: Proportional sizing and spacing --- */
    font-size: 1.75rem; /* ~28px */
    line-height: 1.3;
    margin: 1.5rem 5% 0.5rem 5%;
}

.container h3 > hr {
    color: var(--secondary-color);
    background-color: var(--secondary-color);
    height: 6px;
}

.button-container {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin: 20px 0;
}

.container button {
    padding: 10px 20px;
    background-color: var(--secondary-color);
    color: var(--white-text);
    border: none;
    border-radius: 5px;
    font-size: 1.125rem; /* 18px */
    cursor: pointer;
    text-align: center;
    flex-shrink: 0;
}

.container button:hover {
    background-color: var(--secondary-color-2);
    color: var(--white-text);
}

.container button:active {
    background-color: var(--bold-color-2);
    color: var(--secondary-color);
}

.left-box {
    width: 55%;
    background-color: var(--bg-color);
    color: var(--white-text);
    border-radius: 30px;
    /* font-family is inherited from body */
    font-size: 1.125rem; /* --- TYPOGRAPHY UPGRADE: 18px equivalent --- */
    box-shadow: 0px 0px 30px rgba(78, 20, 100, 0.8);
    border: 5px solid #972787;
    height: 100%;
    overflow: hidden;
}

.img-link {
    text-decoration: none;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: center;
    gap: 5%;
    text-align: center;
}

.img-link a {
    flex-basis: 40%;
}

.img-link a img {
    width: 100%;
    height: auto;
    transition: transform 0.2s ease;
}

.img-link a img:hover {
    transform: scale(1.1);
}

.right-column {
    display: flex;
    flex-direction: column;
    width: 40%;
    margin-bottom: 2.5%;
}

.right-box {
    background-color: var(--bg-color);
    color: var(--white-text);
    border-radius: 30px;
    /* font-family is inherited from body */
    font-size: 1.125rem; /* --- TYPOGRAPHY UPGRADE: 18px equivalent --- */
    box-shadow: 0px 0px 30px rgba(78, 20, 100, 0.8);
    border: 5px solid #972787;
    height: auto;
    overflow: hidden;
}

.web-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 1em;
}
.web-buttons a > img {
    margin-bottom: -7%;
    transition: transform 0.3s ease;
}

.web-buttons a > img:hover {
    transform: scale(1.1);
}

.link-row {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  text-align: center;
  gap: 12px;
}

.link-row a {
  text-decoration: none;
  font-size: 1.125rem; /* 18px */
  color: var(--bold-color-2);
  padding: 6px 12px;
  border-radius: 8px;
  transition: background-color 0.2s ease;
}

.link-row a:hover {
  background-color: var(--bold-color);
  color: var(--bg-color);
}

.link-card {
    display: flex;
    width: calc(100% - 20px);
    margin: 20px 10px;
    background-color: var(--secondary-color);
    border-radius: 20px;
    padding: 20px;
    box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
    color: var(--white-text);
    overflow: hidden;
    gap: 20px;
    box-sizing: border-box;
}

.link-card img {
    display: flex;
    max-width: 200px;
    width: 200px;
    height: 200px;
    object-fit: cover;
    border-radius: 15px;
    flex-shrink: 0;
}

.link-card-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex-grow: 1;
}

.link-card-content a {
    color: var(--bold-color);
    font-size: 1.5rem; /* 24px */
    font-weight: bold;
    text-decoration: none;
    margin-bottom: 10px;
}

.link-card-content a:hover {
    color: var(--bold-color-2);
}

.alt-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: -8px;
}

.alt-links a {
  font-size: 1.125rem; /* 18px */
  color: var(--bold-color-2);
  text-decoration: none;
  transition: color 0.3s ease;
}

.alt-links a:hover {
  color: var(--bold-color);
}

.link-card-content p {
    margin: 0;
    font-size: 1.125rem; /* 18px */
    color: var(--white-text);
}


.contact-form {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    margin: 30px auto;
    max-width: 800px;
    width: 90%;
    box-sizing: border-box;
}

.form-row {
    display: flex;
    gap: 20px;
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
}

.form-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    box-sizing: border-box;
}

.form-group.half-width {
    width: 48%;
    min-width: 240px;
}

.form-group label {
    margin-bottom: 5px;
    color: var(--bold-color);
    font-size: 1.125rem; /* 18px */
    text-align: left;
}

.contact-form input,
.contact-form textarea {
    padding: 12px;
    font-size: 1.125rem; /* 18px */
    border: 2px solid var(--secondary-color);
    color: var(--white-text);
    /* font-family is inherited from body */
    box-shadow: inset 0 0 5px rgba(0,0,0,0.3);
    outline: none;
    width: 100%;
    box-sizing: border-box;
    border-radius: 1em;
    background-color: var(--bg-color);
}

.contact-form textarea {
    min-height: 180px;
    resize: vertical;
}

.contact-form input:focus,
.contact-form textarea:focus {
    border-color: var(--bold-color);
    box-shadow: 0 0 6px var(--bold-color);
}

.contact-form button {
    padding: 12px 24px;
    background-color: var(--secondary-color);
    color: var(--white-text);
    border: none;
    border-radius: 10px;
    font-size: 1.125rem; /* 18px */
    cursor: pointer;
    transition: background-color 0.3s ease;
    /* font-family is inherited from body */
}

.contact-form button:hover {
    background-color: var(--secondary-color-2);
}

.contact-form button:active {
    background-color: var(--bold-color-2);
    color: var(--secondary-color);
}

.butterfly-wrapper {
  position: relative;
  height: 0;
}

.butterfly-link {
    position: absolute;
    top: -1950vh;
    right: 80vw;
    transform: translateX(77vw);
    z-index: 5;
    display: block;
    width: 200px;
    height: 200px;
}

.butterfly-img {
    width: 200px;
    height: 200px;
    object-fit: contain;
    transition: all 0.3s ease-in-out;
}

.butterfly-link:hover .butterfly-img {
    content: url('/img/butterfly2.webp');
}

#underground {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
}

#butterfly-return {
    font-size: 6.25rem; /* 100px */
    text-decoration: none;
    align-items: left;
    color: var(--bold-color-2);
}

#music-zine {
    width: auto;
    max-width: 60%;
}

#construction {
    display: flex;
    justify-content: center;
    width: 100%;
    padding-top: 10vh;
}

#cave {
    display: flex;
    justify-content: center;
    width: 100%;
    padding-top: 0vh;
    padding-bottom: 5vh;
}

/* Responsive design */
@media (max-width: 1335px) {

    .card {
        flex: 1 1 30%;
    }
    .shrine {
        flex: 1 1 45%;
    }
    .album iframe {
        height: 405px;
        width: 720px;
    }
    .butterfly-link {
        top: -1750vh;
        transform: translateX(80vw);
    }
}

@media (max-width: 1024px) {

    .navbar {
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }

      .menu-icon {
        display: block;
      }

      .menu {
        display: none;
        flex-direction: column;
        width: 100%;
      }

      #menu-toggle:checked + .menu-icon + .menu {
        display: flex;
      }

      .menu a {
        border-top: 1px solid var(--bg-color);
        padding: 12px;
      }

    .container {
        display: flex;
        flex-direction: column;
        border-radius: none;
    }
    .container p {
        margin: 5%;
    }

    .left-box,
    .right-column,
    .right-box {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
        margin-top: 0;
        margin-bottom: 5%;
    }

    .home-text {
        margin-top: 8px;
        margin-left: 8px;
        margin-right: 8px;
    }
    .blog-text {
        margin-left: 0%;
        margin-right: 0%;
    }
    figure {
        margin: 1.5rem auto; /* Less vertical margin on smaller screens */
        max-width: 95%; /* Take up more width */
    }
    figcaption {
        font-size: 0.85rem; /* Smaller font on mobile */
        padding: 0rem 1rem 0.75rem 1rem;
    }
    #headshot {
        max-width: 50%;
    }
    .card {
        flex: 1 1 50%;
    }
    .shrine {
        flex: 1 1 80%;
    }
    .album iframe {
        height: 304px;
        width: 540px;
    }
    .album p {
        max-width: 85%;
    }
    .butterfly-link {
        top: -1600vh;
        transform: translateX(85vw);
    }
    .butterfly-img {
        height: 150px;
        width: 150px;
    }
    #music-zine {
        max-width: 90%;
    }
    .site-footer {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .footer-left, .footer-center, .footer-right {
        width: 100%;
        justify-content: center;
        align-items: center;
        margin-bottom: 20px;
    }
    .footer-left{
        align-items: flex-start;
    }
}
@media (max-width: 650px) {
    .home-text  p > b{
        font-size: 1.125rem; /* 18px */
    }
    .home-text h1 {
        font-size: 1.875rem; /* 30px */
        text-shadow:
        1px 1px 0 var(--white-text),
        -1px 1px 0 var(--white-text),
        -1px -1px 0 var(--white-text),
        1px -1px 0 var(--white-text);
    }
    .home-text h2 {
        font-size: 1.375rem; /* 22px */
    }
    .home-text h3 {
        font-size: 1rem; /* 16px */
    }
    .home-text ol,
    .home-text ul {
        font-size: 0.875rem; /* 14px */
    }
    .toc ol,
    .toc ul {
        font-size: 1.25rem; /* 20px */
    }
    .container h1 {
        font-size: 1.875rem; /* 30px */
        text-shadow:
        1px 1px 0 var(--white-text),
        -1px 1px 0 var(--white-text),
        -1px -1px 0 var(--white-text),
        1px -1px 0 var(--white-text);
    }
    .navbar {
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }
    .menu-icon {
        display: block;
      }
    .menu {
        display: none;
        flex-direction: column;
        width: 100%;
    }
    #menu-toggle:checked + .menu-icon + .menu {
        display: flex;
    }
    .menu a {
        border-top: 1px solid var(--bg-color);
        padding: 12px;
    }
    #headshot {
        max-width: 50%;
    }
    .home-text p {
        margin-left: 5%;
        margin-right: 5%;
        font-size: 0.875rem; /* 14px */
    }
    .card {
        flex: 1 1 100%;
    }
    .shrine {
        flex: 1 1 100%;
    }
    .album iframe {
        height: auto;
        width: auto;
    }
    .link-card {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .link-card-content {
        flex-grow: 0;
    }
    .alt-links {
        justify-content: center;
    }
    .butterfly-link {
        top: -1420vh;
        transform: translateX(115vw);
    }
    .butterfly-img {
        height: 75px;
        width: 75px;
    }
    #butterfly-return {
        font-size: 3.75rem; /* 60px */
    }
}

/* === Filing-cabinet tabs (Phase 3) ======================================
   Scheme system: per-card CSS custom properties redefined by
   .blog-card:has(.tab-state--X:checked) blocks. Generic consumer rules
   read from the vars — no cascade-fighting. */

/* --- Scheme variable scaffold -------------------------------------------- */
.blog-card {
  /* Defaults = TBR scheme */
  --card-bg:               var(--bg-color);
  --card-text:             var(--white-text);
  --card-subtitle:         #cccccc;
  --card-title:            var(--white-text);
  --card-border:           var(--secondary-color);
  --card-glow:             var(--secondary-color);
  --card-pub-link:         var(--secondary-color);
  --card-disclaimer-bg:    transparent;
  --card-disclaimer-text:  transparent;
  --image-divider:         var(--secondary-color-2);
  --tab-border:            var(--card-border);
}

.blog-card:has(.tab-state--medium:checked) {
  --card-bg:               #ffffff;
  --card-text:             #000000;
  --card-subtitle:         #444444;
  --card-title:            #000000;
  --card-border:           #ffffff;
  --card-glow:             #ffffff;
  --card-pub-link:         #000000;
  --card-disclaimer-bg:    #d8d8d8;
  --card-disclaimer-text:  #000000;
  --image-divider:         #000000;
  --tab-border:            #000000;
}

.blog-card:has(.tab-state--substack:checked) {
  --card-bg:               #1a1a1a;
  --card-text:             #ffffff;
  --card-subtitle:         #c8c8c8;
  --card-title:            #ffffff;
  --card-border:           #ff6719;
  --card-glow:             #ff6719;
  --card-pub-link:         #ff6719;
  --card-disclaimer-bg:    #ff6719;
  --card-disclaimer-text:  #ffffff;
  --image-divider:         #ff6719;
  --tab-border:            #ff6719;
}

/* --- Card consumer rules (read from vars) ------------------------------- */
.blog-card {
  border: 3px solid var(--card-border);
  box-shadow: 0 0 20px rgba(78,20,100,0.0);   /* transparent at rest */
}
.blog-card:hover { box-shadow: 0 10px 35px var(--card-glow); }
.blog-card-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  background: var(--card-bg);
  color: var(--card-text);
}
.blog-card-description { color: var(--card-subtitle); }
.blog-card-title { color: var(--card-title); }
.card-publication a {
  color: var(--card-pub-link);
  text-decoration: underline;
}

/* --- Title-link visibility (only the active source's anchor is shown) --- */
.blog-card .title-link { display: none; color: var(--card-title); text-decoration: none; }
.blog-card .title-link:hover { text-decoration: underline; }
.tab-state--tbr:checked      ~ .blog-card-content .title-link--tbr,
.tab-state--medium:checked   ~ .blog-card-content .title-link--medium,
.tab-state--substack:checked ~ .blog-card-content .title-link--substack {
  display: inline;
}

/* --- Card footer + bottom-anchored disclaimers ------------------------- */
.card-footer {
  margin-top: auto;
  padding-top: 0.75rem;
  min-height: 1.5rem;
}
.card-disclaimer--medium,
.card-disclaimer--substack {
  display: none;
  background: var(--card-disclaimer-bg);
  color: var(--card-disclaimer-text);
  padding: 0.25rem 0.5rem;
  border-radius: 3px;
  font-size: 0.85rem;
}
.tab-state--medium:checked   ~ .blog-card-content .card-footer .card-disclaimer--medium,
.tab-state--substack:checked ~ .blog-card-content .card-footer .card-disclaimer--substack {
  display: inline-block;
}

/* --- Publication credit (visible only when non-TBR tab is active) ------ */
.card-publication {
  display: none;
  margin-top: 0.25rem;
  font-size: 0.85rem;
  font-style: italic;
}
.tab-state--medium:checked   ~ .blog-card-content .card-publication,
.tab-state--substack:checked ~ .blog-card-content .card-publication {
  display: block;
}

/* --- Radio inputs: sr-only (focusable, no visual) ---------------------- */
.blog-card .tab-state {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}
.tab-state--tbr:focus-visible      ~ .tab-strip .tab--tbr,
.tab-state--medium:focus-visible   ~ .tab-strip .tab--medium,
.tab-state--substack:focus-visible ~ .tab-strip .tab--substack {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}
/* --- Tab strip + tab geometry (Phase 3 hanging-folder) ----------------- */
.blog-card .tab-strip {
  position: absolute;
  bottom: 100%;                      /* sits immediately above card top */
  left: 0.75rem;
  display: flex;
  align-items: flex-end;
  gap: 0.125rem;
  z-index: 2;
}

.tab {
  width: 2.5rem;
  height: 1.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--tab-border);
  border-bottom: none;
  border-radius: 0.5rem 0.5rem 0 0;
  cursor: pointer;
  position: relative;
  z-index: 1;
  transition: transform 0.15s ease;
}
.tab:hover { transform: translateY(-3px); }
.tab img,
.tab svg {
  width: 1rem;
  height: 1rem;
  object-fit: contain;
  pointer-events: none;
  display: block;
}

/* Inactive tabs paint platform brand colors. */
.tab--tbr      { background: var(--bg-color); }
.tab--medium   { background: #ffffff; }
.tab--substack { background: #1a1a1a; }

/* Active tab: foreground + match card body color. */
.tab-state--tbr:checked      ~ .tab-strip .tab--tbr,
.tab-state--medium:checked   ~ .tab-strip .tab--medium,
.tab-state--substack:checked ~ .tab-strip .tab--substack {
  z-index: 3;
  background: var(--card-bg);
}

/* Concave flares (active tab only) — radial-gradient quarter-circles
   carved against var(--card-bg) so the tab flares into the card. */
.tab-state--tbr:checked      ~ .tab-strip .tab--tbr::before,
.tab-state--medium:checked   ~ .tab-strip .tab--medium::before,
.tab-state--substack:checked ~ .tab-strip .tab--substack::before,
.tab-state--tbr:checked      ~ .tab-strip .tab--tbr::after,
.tab-state--medium:checked   ~ .tab-strip .tab--medium::after,
.tab-state--substack:checked ~ .tab-strip .tab--substack::after {
  content: "";
  position: absolute;
  bottom: -1px;
  width: 0.4rem;
  height: 0.4rem;
  pointer-events: none;
}
.tab-state--tbr:checked      ~ .tab-strip .tab--tbr::before,
.tab-state--medium:checked   ~ .tab-strip .tab--medium::before,
.tab-state--substack:checked ~ .tab-strip .tab--substack::before {
  left: -0.4rem;
  background: radial-gradient(circle at top left, transparent 0.4rem, var(--card-bg) 0.4rem);
}
.tab-state--tbr:checked      ~ .tab-strip .tab--tbr::after,
.tab-state--medium:checked   ~ .tab-strip .tab--medium::after,
.tab-state--substack:checked ~ .tab-strip .tab--substack::after {
  right: -0.4rem;
  background: radial-gradient(circle at top right, transparent 0.4rem, var(--card-bg) 0.4rem);
}

/* --- Per-platform tab logo overrides ------------------------------------ */
.tab--tbr      img { content: url("/img/tbricon.webp"); }
.tab--medium   img { content: url("/img/mediumLogo.webp"); }
.tab--substack img { content: url("/img/substackLogo.webp"); }

/* 418 easter egg — invisible-looking period on /about. Only mouse-hover
   reveals the cursor change, rewarding bio-readers who scroll all the way. */
.teapot-easter-egg {
  color: inherit;
  text-decoration: none;
  cursor: default;
}
.teapot-easter-egg:hover {
  cursor: pointer;
  color: var(--bold-color);
}

/* === Error pages ======================================================== */
.error-page { padding: 2rem; }
.error-page .error-code {
  color: var(--bold-color);
  text-shadow:
      2px 2px 0 var(--secondary-color-2),
     -2px 2px 0 var(--secondary-color-2),
     -2px -2px 0 var(--secondary-color-2),
      2px -2px 0 var(--secondary-color-2);
  text-align: center;
  margin: 1rem 0;
}
.error-page .error-body {
  font-size: 1.15rem;
  margin: 1.5rem 5%;
  line-height: 1.6;
}
.error-page .error-backlink {
  margin: 1.5rem 5% 2rem 5%;
}
.error-page .error-backlink a {
  color: var(--bold-color);
  font-size: 1.05rem;
  text-decoration: underline;
}
.error-page h3 {
  margin: 2rem 5% 0.5rem 5%;
  color: var(--white-text);
}
.error-page .diagnostic-block {
  margin: 0.5rem 5% 2rem 5%;
  padding: 1rem;
  background: var(--secondary-color-2);
  border: 2px solid var(--secondary-color);
  border-radius: 10px;
  overflow-x: auto;
  font-family: "DejaVu Sans Mono", "Liberation Mono", "Menlo", monospace;
  font-size: 0.95rem;
  color: var(--white-text);
}
.error-page .diagnostic-block code {
  background: transparent; color: inherit; padding: 0;
}

/* === Source filter pill checkboxes ====================================== */
/* Lives inside .filter-form which is itself inside .filter-bar (10% margin).
 * No extra horizontal margin here — that would double-indent. */
.source-filter {
  border: none;
  padding: 0;
  margin: 0 0 0.5rem 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  flex-basis: 100%;
}
.source-filter legend {
  font-size: 1rem;
  color: var(--white-text);
  margin: 0 0 0.4rem 0;
  padding: 0;
  width: 100%;
  text-align: left;
}
.source-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.9rem;
  border-radius: 18px;
  border: 2px solid currentColor;
  cursor: pointer;
  user-select: none;
  font-size: 0.95rem;
  transition: background 0.15s ease, color 0.15s ease;
  position: relative;
}
.source-pill input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 1px; height: 1px;
}
/* Specificity note: `.filter-form label` (line ~449) sets color:var(--bold-color)
 * on every label inside the form. We need a more-specific selector here. */
.filter-form label.source-pill--tbr      { color: var(--bold-color);  background: var(--bg-color); border-color: var(--secondary-color-2); }
.filter-form label.source-pill--medium   { color: #000000;            background: #ffffff;         border-color: #000000; }
.filter-form label.source-pill--substack { color: var(--white-text);  background: #1a1a1a;         border-color: #ff6719; }
.filter-form label.source-pill > span    { color: inherit; font-weight: 500; }
.source-pill:has(input:checked) {
  outline: 3px solid var(--bold-color);
  outline-offset: 2px;
}
.source-pill input:focus-visible + span {
  text-decoration: underline;
}

/* === Filter QoL: result count, active filter pills, active tag ========== */
/* .result-count / .empty-state render from the %%RESULT_COUNT%% slot, now
 * the last item in .filter-form — directly under the Apply button.
 * flex:1 0 100% gives it its own full-width row; left-aligned by default. */
.result-count,
.empty-state {
  flex: 1 0 100%;
  margin: 0;
  color: var(--white-text);
  font-size: 0.95rem;
  text-align: left;
}
.empty-state a { color: var(--bold-color); }

.active-filters {
  display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center;
  margin: 0 10% 1rem 10%;
  font-size: 0.9rem;
}
.filter-pill {
  background: var(--secondary-color);
  color: var(--white-text);
  padding: 0.25rem 0.6rem;
  border-radius: 15px;
  display: inline-flex;
  gap: 0.4rem;
  align-items: baseline;
}
.filter-pill a { color: var(--white-text); text-decoration: none; font-weight: 600; }
.filter-pill a:hover { color: var(--bold-color); }
.active-filters .clear-all {
  color: var(--bold-color);
  text-decoration: underline;
  margin-left: 0.5rem;
}

/* Active tag (matches current ?tags= selection). */
.tag.tag--active {
  background: var(--bold-color);
  color: var(--bg-color);
  border-color: var(--bold-color-2);
}

/* Defeat :visited green tint on tag-menu anchors; the .tag span owns colors. */
.tags-menu a:link,
.tags-menu a:visited,
.tags-menu a:hover,
.tags-menu a:focus { color: inherit; text-decoration: none; }
.tags-menu a:focus-visible .tag {
  outline: 2px solid var(--bold-color);
  outline-offset: 2px;
}

/* === Tag filter checkboxes (multi-select via form) ===================== */
/* The tag menu is now inside the filter form. Each tag is a <label> wrapping
 * a visually-hidden checkbox and the visible .tag pill. Toggling the
 * checkbox changes the pill's appearance via :checked; submission of the
 * form sends one ?tags= param per checked box. */

.tag-checkbox {
  display: inline-block;
  position: relative;
  cursor: pointer;
  margin: 0;
}

/* Visually hidden but accessible (sr-only) — keyboard + screen-reader find it. */
.tag-checkbox input[type="checkbox"] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Checked state matches .tag.tag--active for SSR/CSR visual parity. */
.tag-checkbox input[type="checkbox"]:checked + .tag {
  background: var(--bold-color);
  color: var(--bg-color);
  border-color: var(--bold-color-2);
}

/* Keyboard focus ring on the visible pill when its hidden checkbox has focus. */
.tag-checkbox input[type="checkbox"]:focus-visible + .tag {
  outline: 2px solid var(--bold-color);
  outline-offset: 2px;
}

/* === 3-row disclosure toggle for the tag list ========================== */
/* Hidden checkbox drives expanded/collapsed state. Default: ~3 rows visible
 * with the rest clipped. When checked: full list expanded. No JavaScript;
 * same pattern as the nav menu's #menu-toggle. */

.tag-disclosure-toggle {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Clamp to roughly 3 rows of tag pills (pill height + flex gap). Tune if
 * .tag padding or .tags-menu .tag-list gap changes. */
.tag-list-collapsible {
  max-height: calc(3 * 2.4rem);
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  transition: max-height 0.2s ease;
}

.tag-disclosure-toggle:checked ~ .tag-list-collapsible {
  max-height: 60rem;
}

.tag-disclosure-label {
  display: inline-block;
  margin-top: 0.5rem;
  padding: 0.25rem 0.75rem;
  background: var(--secondary-color-2);
  color: #ffffff;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.85rem;
  user-select: none;
  transition: background 0.15s ease-in-out;
}
.tag-disclosure-label:hover { background: var(--bold-color); color: #ffffff; }
.tag-disclosure-label::after { content: "Show more tags…"; }
.tag-disclosure-toggle:checked ~ .tag-disclosure-label::after { content: "Show fewer tags"; }

/* === Remark42 comment widget — theme with TBR palette ================== */
#remark42-section {
  margin: 3rem 5% 1rem 5%;
  padding-top: 2rem;
  border-top: 2px solid var(--secondary-color);
}
#remark42-section > h2 {
  color: var(--bold-color);
  margin-bottom: 1rem;
}
.comments-noscript {
  background: var(--secondary-color-2);
  border-left: 3px solid var(--bold-color);
  padding: 1rem;
  border-radius: 6px;
}
.comments-noscript a { color: var(--bold-color); text-decoration: underline; }

/* === Remark42 theme override =============================================
 * Remark42 stores its theme tokens as RGB triplets (`rgb(var(--x))`-style),
 * not hex. So overrides MUST use comma-separated RGB to compose correctly
 * with the upstream `rgb()` / `rgba()` consumers.
 * Site palette mapping:
 *   --bold-color #caff81  = 202, 255, 129  (accent green — was teal/blue)
 *   --white-text #ecf0f1  = 236, 240, 241
 *   --bg-color   #424072  = 66, 64, 114    (page bg)
 *   #1a1a1a               = 26, 26, 26     (deep dark for comment cards)
 */
#remark42 .root .dark,
#remark42 .dark,
#remark42 [data-theme="dark"] {
  --primary-color:           202, 255, 129;
  --primary-brighter-color:  154, 228, 69;
  --primary-darker-color:    154, 228, 69;
  --primary-text-color:      236, 240, 241;
  --primary-background-color: 26, 26, 26;   /* dark gray card behind each comment */
  --secondary-text-color:    209, 213, 219;
  --secondary-darker-text-color: 187, 191, 211;
  --text-color:              236, 240, 241;
  --line-color:              151, 39, 135;  /* purple dividers */
  --line-brighter-color:     202, 255, 129; /* green hover dividers */
  --error-color:             #ff6680;
  --error-background:        rgba(255, 102, 128, 0.18);
}

/* Force dark theme for our embed regardless of system pref —
 * we already pass `theme: "dark"` to remark_config. This is a belt + braces. */
#remark42 .root { color-scheme: dark; }

/* Sort-by dropdown (Item 2) — the menu element renders OS-defaulted unless
 * we override. Use the same dark card bg + white text. */
#remark42 select,
#remark42 select option,
#remark42 .sort-by,
#remark42 .sort-by__select,
#remark42 [class*="sort-by"] select,
#remark42 [class*="dropdown"] select {
  background-color: #1a1a1a;
  color: var(--white-text);
}
#remark42 select option { padding: 0.25rem; }

/* Outer container of the embed: keep purple page bg behind the dark
 * comment cards so the cards visually pop. */
#remark42 .root {
  background-color: transparent;
}

/* === Article header metadata ============================================ */
.article-header {
  padding-top: 1.5rem;
  margin-bottom: 2rem;
}
.article-header .article-title {
  margin: 0 0 1rem 0;
}
.article-header .article-subtitle {
  margin: 0 0 1.25rem 0;
  font-size: 1.5rem;
  font-weight: 300;
  color: var(--white-text);
  opacity: 0.95;
  text-align: center;
}
.article-meta {
  font-size: 0.95rem;
  color: #bdbcd6;
  margin: 0 0 1rem 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  align-items: baseline;
  justify-content: center;
  text-align: center;
}
.article-byline,
.article-dates { display: inline-block; }
.article-meta time { color: inherit; }

/* Contact form: spam honeypot. Visually and semantically hidden, but
   positioned off-screen rather than display:none so naive form-fillers
   still see the field and trip the trap. */
.hp-field {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Contact form: secondary hint text under the message and PGP fields. */
.form-hint {
  font-size: 0.9em;
  opacity: 0.75;
  margin-top: 0.4em;
}

/* Contact page: PGP details/summary block above the form. */
.pgp-block {
  margin: 1em 0 1.5em;
  padding: 0.6em 0.9em;
  border-left: 3px solid currentColor;
  opacity: 0.9;
}
.pgp-block summary {
  cursor: pointer;
  font-weight: bold;
}
.pgp-fingerprint code {
  font-family: ui-monospace, "DejaVu Sans Mono", "SF Mono", monospace;
  font-size: 0.85em;
  letter-spacing: 0.02em;
  word-break: keep-all;
}