/*
Theme Name: Madhavik Dogra Portfolio
Colors: 
blue: #99CCFF #66CCFF (#66CCEE -> #33CCEE -> #33DDDD -> * #33CCCC) #6699FF = * #33CCCC -> shade #009999 -> * #006666 -> tint #EEFFFF-cyan #F9FFFF PRIMARY ACCENT
pink: #FF99CC #FF66CC (#EE66CC -> * #EE33CC -> #DD33DD -> #CC33CC) #FF6699 = #CC33CC -> shade #990099 -> #660066  -> tint #FFEEFF-magenta #FFF9FF SECONDARY ACCENT
orange: #FFCC99 #FFCC66 (#EECC66 -> * #EECC33 -> #DDDD33 -> #CCCC33) #FF9966 = #CCCC33 -> shade #999900 -> #666600  -> tint #FFFFEE-yellow #FFFFF9 TERTIARY ACCENT && 
                                                                                                                          #EEFFEE-green #f7fff7 QUATERNARY ACCENT?
*/

:root {
    --primary: rgba(253, 248, 243, 0.25);   /* #fdf8f3 rgba(253, 248, 243, 1) Warm cream - like steamed milk foam *//* borderless rounded boxes - article link hover */
    --secondary: rgba(244, 232, 208, 0.25); /* #f4e8d0 rgba(244, 232, 208, 1) Light caramel - like café au lait *//* bordered (1px solid #8b4513) square boxes - references boxes, points boxes, about section expertise boxes */
    --tertiary: rgba(212, 165, 116, 0.25);  /* #d4a574 rgba(212, 165, 116, 1) Rich mocha - like espresso crema *//* bordered (1px solid #8b4513) rounded boxes - table of contents */
    --quaternary: rgba(139, 69, 19, 0.25); /* #8b4513 rgba(139, 69, 19, 1) Deep chocolate - like dark roast beans *//* bordered (1px solid #8b4513) rounded boxes - search bar & about section hover */
    --quaternary-opaque: rgba(139, 69, 19, 1); /* #8b4513 rgba(139, 69, 19, 1) Deep chocolate - like dark roast beans *//* bordered (1px solid #8b4513) rounded boxes - search bar & about section hover */
}

/* #faf9f5: main color used by Claude.ai */
/* #f0eee6: dark color used by Claude.ai */
/* rgba(244, 241, 234, 0.5): #f4f1ea cream color used by goodreads */
/* #617054: green accent color used by goodreads */
/* #d8d8d8: grey border color used by goodreads */

@font-face {
    font-family: 'ComputerModernUnicodeSerifRoman';
    src: url('/static/assets/fonts/ComputerModernUnicode/CMU-SerifRoman.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'CardoRegular';
    src: url('/static/assets/fonts/Cardo/Cardo-Regular.ttf');
}

@font-face {
    font-family: 'CardoItalic';
    src: url('/static/assets/fonts/Cardo/Cardo-Italic.ttf');
}

@font-face {
    font-family: 'CardoBold';
    src: url('/static/assets/fonts/Cardo/Cardo-Bold.ttf');
}

b {
  font-family: 'CardoBold', serif;
}

i {
  font-family: 'CardoItalic', serif;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

a {
    text-decoration: none !important;
    color: inherit !important;
}

body {
    font-family: 'CardoRegular', serif !important;
    color: black;
    /* background-color: #f0f7ff !important; */ /* PRIMARY ACCENT */
    background-color: white !important;
    margin: 0 auto !important;
}

.container {
    padding: 1rem 1rem !important; /* 4vw */
    /* background-color: rgba(244, 241, 234, 0.5) !important; */
}

/* LISTS */
ol.box-list {
    border: 1px solid var(--quaternary-opaque);
    background-color: var(--secondary); /* SECONDARY ACCENT */
    padding: 1rem 1rem 0.5rem 1rem;
    width: 100%;
    margin-bottom: 1rem;
    display: block;
    word-wrap: break-word;
    overflow-wrap: break-word;
    list-style-type: decimal !important;
    counter-reset: none !important;
    padding-left: 3rem !important;
}

ol.box-list > li {
    display: list-item !important;
    counter-increment: none !important;
    margin-bottom: 0.5rem;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

ul.box-list {
    border: 1px solid var(--quaternary-opaque);
    color: black;
    background-color: var(--secondary); /* SECONDARY ACCENT */
    padding: 1rem 1rem 0.5rem 3rem;
    width: 100%;
    margin-bottom: 1rem;
    display: block;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Standard list item styling */
li {
    margin-bottom: 0.5rem;
}

li p {
    margin-bottom: 0;
}

.site-header {
    text-align: center;
    justify-content: center;
    margin-bottom: 2rem;
    align-items: center;
    display: flex;
    flex-direction: column;
    color: black;
}

/* TABLE OF CONTENTS */
.toc-container {
    padding: 1.5rem 1rem 1rem 1rem;
    width: 100%;
    background: var(--tertiary); /* TERTIARY ACCENT */
    border: 1px solid var(--quaternary-opaque);
    border-radius: 10px;
    margin-bottom: 2rem;
}

.toc-header {
    display: flex;
    align-items: center;
    justify-content: left;
    margin-bottom: 1rem;
    font-size: 1rem;
    font-weight: bold;
    color: black;
}

.toc-header i {
    margin-right: 0.5rem;
}

.toc-toggle {
    background: none;
    border: none;
    cursor: pointer;
    color: black;
    font-size: 0.8rem;
    padding: 0.25rem;
    border-radius: 10px;
}

/* Main TOC list */
ol.toc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: toc-counter; /* Start the main counter */
}

/* Increment the main counter ONLY for direct children of the main list. */
/* This is the key fix for the 3.1, 4.2 numbering issue. */
ol.toc-list > li.toc-item {
  counter-increment: toc-counter;
}

/* All links will now be flex containers */
.toc-item a.toc-link {
  display: flex; /* Use flexbox for alignment */
  align-items: baseline; /* This is the key fix for vertical alignment */
  color: black;
  text-decoration: none;
  font-size: 1rem;
  padding: 0.25rem 0.5rem;
  border-left: 3px solid transparent;
  transition: all 0.2s ease;
  margin: 0.25rem 0;
}

.toc-list > .toc-item a.toc-link::before {
  /* Give the number a fixed-width container */
  flex-basis: 3ch; /* Adjust width as needed */
  flex-shrink: 0; /* Prevent the number column from shrinking */
  text-align: right;
  margin-right: 0.5rem; /* Space between number and text */
  font-weight: normal;
  color: black;
}

.toc-sublist > .toc-item a.toc-link::before {
  /* Give the number a fixed-width container */
  flex-basis: 5ch; /* Adjust width as needed */
  flex-shrink: 0; /* Prevent the number column from shrinking */
  text-align: right;
  margin-right: 0.5rem; /* Space between number and text */
  font-weight: normal;
  color: black;
}

/* Top-level counter content */
ol.toc-list > li.toc-item > a.toc-link::before {
  content: counter(toc-counter) ".";
}

/* Sublist styling */
.toc-sublist {
  list-style: none;
  margin: 0;
  padding-left: 1rem; /* Indent the sublist */
  counter-reset: toc-subcounter; /* Restart sub-counter for each sublist */
}

/* Sublist counter content */
.toc-sublist .toc-item a.toc-link::before {
  content: counter(toc-counter) "." counter(toc-subcounter) ".";
  counter-increment: toc-subcounter; /* Increment sub-counter on sub-items */
}

.toc-item a.toc-link {
    transition: all 0.2s ease;
}

/* Hover effect for all links */
.toc-item a.toc-link:hover {
  background-color: white;
  border-left-color: var(--quaternary-opaque); /* A saddle-brown color */
}

/* Optional: Add a slight transform for nested links on hover */
.toc-list .toc-item a.toc-link:hover, .toc-sublist .toc-item a.toc-link:hover {
  transform: translateX(5px);
}

/* MAIN */
.site-description {
    font-size: 1rem;
    color: black;
    margin: 2rem 0 0 0 !important;
}

.hero-image {
    text-align: center;
    margin-bottom: 2rem;
}

.hero-image img {
    width: 100%;
    height: auto;
}

.about-section {
    margin-top: 2rem;
    margin-bottom: 2rem;
    padding: 1rem;
    transition: all 0.2s ease;
}

.about-section:hover {
    border: 1px solid var(--quaternary-opaque);
    border-radius: 10px;
    background-color: var(--quaternary); /* QUATERNARY ACCENT */
    transform: scale(1.02);
    color: black !important;
}

.about-link {
    transition: all 0.2s ease;
}

.about-section:hover .about-link {
    transform: scale(1.02);
}

.article-preview .article-title, .article-preview .article-meta, .article-preview .article-excerpt {
    transition: all 0.2s ease;
}

.article-preview:hover .article-title, .article-preview:hover .article-meta, .article-preview:hover .article-excerpt {
    color: black;
}

.about-section .about-link, .about-section .about-title, .about-section .about-text p {
    transition: all 0.2s ease;
}

.about-section:hover .about-link, .about-section:hover .about-title, .about-section:hover .about-text p {
    color: black;
}

.about-text {
    width: 100%;
}

.about-link {
    border-top: 1px solid var(--quaternary-opaque);
}

.about-title {
    font-size: 1.25rem;
    margin-bottom: 1rem;
    font-weight: normal;
    color: black;
}

.about-content {
    display: flex;
    align-items: center;
    gap: 3em;
}

.about-text p {
    font-size: 1rem;
    color: black;
    margin: 0;
}

.author-image {
    flex: 0 0 8rem;
}

.author-image img {
    width: 100%;
    height: auto;
}

/* Blog Articles Styles */
.articles-section {
    margin-bottom: 2rem;
}

.article-preview {
    padding: 1rem;
    transition: all 0.2s ease;
}

.article-preview:hover {
    background-color: var(--primary); /* PRIMARY ACCENT */
    transform: scale(1.02);
}

.article-preview:last-child {
    border-bottom: none;
}

.article-title {
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
    text-align: left;
}

.blog-article .article-header .article-title {
    text-align: center;
    font-size: 2rem;
    margin-bottom: 1rem;
}

.article-meta {
    font-size: 0.75rem;
    text-align: left;
    color: black;
}

.blog-article .article-header .article-meta {
    text-align: center;
    font-size: 1rem;
    margin-bottom: 3rem;
}

.article-title a {
    color: black;
    text-decoration: none;
}

.article-excerpt {
    margin-bottom: 0.5rem;
    text-align: left;
    font-size: 1rem;
}

.article-meta i {
    margin-right: 0.5rem;
    margin-left: 1rem;
}

.article-meta i:first-child {
    margin-left: 0;
}

/* Pagination Styles */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin: 2rem 0;
    padding: 1rem 0;
}

.page-numbers {
    display: flex;
    gap: 0.5rem;
}

.page-link {
    color: black;
    text-decoration: none;
    padding: 0.5rem 1rem;
    border: 1px solid #777777;
}

.page-current {
    background-color: white;
    color: black;
    padding: 0.5rem 1rem;
    border: 1px solid var(--quaternary-opaque);
}

.contact-section {
    text-align: center;
    margin-bottom: 2rem;
}

.contact-title {
    font-size: 1rem;
    font-weight: normal;
    color: black;
    display: inline;
    margin-right: 1rem;
}

/* Social Links Styles */
.social-links {
    display: inline-flex;
    gap: 1rem;
    align-items: center;
}

a.social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: black;
    text-decoration: none;
    width: 40px;
    height: 40px;
    transition: all 0.2s ease;
}

.social-link i {
    font-size: 1rem;
}

section.contact-section div.social-links a.social-link:hover {
    transform: scale(1.02);
}

/* Platform specific hover colors */
section.contact-section div.social-links a.social-link:nth-child(1):hover { /* LinkedIn */
    color: #0077B5 !important;
}

section.contact-section div.social-links a.social-link:nth-child(2):hover { /* GitHub */
    color: #333333 !important;
}

section.contact-section div.social-links a.social-link:nth-child(3):hover { /* Facebook */
    color: #E4405F !important;
}

section.contact-section div.social-links a.social-link:nth-child(4):hover { /* Instagram */
    color: #1877F2 !important;
}

section.contact-section div.social-links a.social-link:nth-child(5):hover { /* X/Twitter */
    color: black !important;
}

.site-footer {
    text-align: center;
    padding-top: 2rem;
    margin-top: 2rem;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1rem;
    color: black;
}

.privacy-link {
    color: black;
    text-decoration: underline;
}

article.blog-article {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 100%;
}

cite {
    font-style: italic !important;
}

.quote {
    font-size: 1rem;
    text-align: center;
}

/* Privacy Policy Styles */
.privacy-content {
    margin: 0 auto;
    text-align: left;
}

.privacy-section {
    margin-bottom: 2rem;
}

.privacy-section h2 {
    font-size: 1.75rem;
    margin-bottom: 1rem;
    color: black;
    font-weight: normal;
}

.privacy-section p {
    margin-bottom: 1rem;
    color: black;
}

.privacy-section a {
    color: black;
    text-decoration: underline;
}

/* About Page Styles */
.about-page-content {
    margin: 0 auto;
    text-align: left;
}

.author-hero {
    display: flex;
    align-items: center;
    gap: 2rem;
    margin-bottom: 2rem;
    text-align: center;
}

.author-image-large {
    flex: 0 0 10rem;
}

.author-image-large img {
    width: 100%;
    height: auto;
}

.author-intro {
    flex: 1;
    text-align: right;
}

.author-intro h2 {
    font-size: 2rem;
    margin-bottom: 0.5rem;
    color: black;
    font-weight: normal;
}

.author-title {
    font-size: 1.2rem;
    color: black;
    margin: 0;
}

.about-details {
    margin-bottom: 2rem;
}

.about-text-content p {
    margin-bottom: 1rem;
    color: black;
    font-size: 1rem;
}

.expertise-section {
    margin-bottom: 2rem;
}

.expertise-section h3 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: black;
    font-weight: normal;
}

.expertise-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
}

.expertise-item {
    padding: 1rem;
    border: 1px solid var(--quaternary-opaque);
    background-color: var(--secondary); /* SECONDARY ACCENT */
    color: black;
}

.expertise-item h4 {
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
    color: black;
    font-weight: bold;
}

.expertise-item p {
    margin: 0;
}

/* Article Image Styles */
.article-featured-image {
    margin-bottom: 1rem;
}

.article-featured-image img {
    width: 100%;
    /* max-height: 400px; */
    object-fit: cover;
}

.article-excerpt img {
    max-width: 100%;
    height: auto;
    margin: 0.5rem 0;
}

.article-excerpt p {
    margin-bottom: 1rem;
}

/* Single Article Styles */
.single-article {
    margin: 0 auto;
}

.article-header {
    margin-bottom: 0.5rem;
    text-align: center;
}

.single-article .article-title {
    font-size: 2rem;
    margin-bottom: 1rem;
    color: black;
}

.single-article .article-meta {
    color: black;
    font-size: 0.75rem;
    margin-bottom: 3rem;
}

.single-article .article-meta .article-author {
    margin-left: 1rem;
}

.single-article .article-featured-image {
    margin-bottom: 2rem;
    text-align: center;
}

.single-article .article-featured-image img {
    max-width: 100%;
    height: auto;
}

.article-content {
    font-size: 1rem;
    margin-bottom: 2rem;
    max-width: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    flex-wrap: wrap;
}

.article-content h1, .article-content h2, .article-content h3, .article-content h4, .article-content h5, .article-content h6 {
    margin: 2rem 0 1rem 0;
    color: black;
}

.article-content p {
    text-align: left;
    min-width: 0;
}

.article-content img,  .article-content figure.media-center video, .article-content figure.media-style-side video {
    /* max-height: 400px; */
    margin: 0 0 1rem 0;
}

.article-content blockquote {
    border-left: 1px solid var(--quaternary-opaque);
    padding-left: 1rem;
    margin: 2rem 0;
    font-style: italic;
    color: black;
}

.article-content li a {
    margin-bottom: 0.5rem;
}

section.article-item header.article-header .article-title {
    font-weight: bold;
} 

.article-navigation {
    text-align: center;
    margin-bottom: 2rem;
}

.back-to-home {
    color: black;
    display: inline-block;
}

.articles-section .article-preview:last-child {
    border-bottom: none;
}

.top-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    vertical-align: middle;
    width: 100%;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--quaternary-opaque);
}

.site-title {
    flex: none;
    font-size: 2rem;
    font-weight: normal;
    color: black;
    margin-bottom: 0rem !important;
    cursor: pointer;
    transform-origin: center center;
    padding: 1rem 1rem;
    border-radius: 10px;
    border: 1px solid transparent;
    position: relative;
    transition: all 0.2s ease;
}

/* --SEARCH-- */
.site-title:hover,
.integrated-search-container:hover .site-title {
    border: 1px solid var(--quaternary-opaque);
    background-color: var(--quaternary); /* QUATERNARY ACCENT */
    color: black;
    transform: scale(1.02);
}

.integrated-search-container {
    display: flex;
    position: relative;
    align-items: center;
    margin: 0 auto;
    width: auto;
    height: auto;
}

.search-icon-trigger {
    position: absolute;
    right: -2rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    font-size: 2rem;
    color: black;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
    transition: all 0.2s ease;
}

.integrated-search-container:hover .search-icon-trigger {
    opacity: 1;
    pointer-events: auto;
}

.search-icon-trigger:hover {
    background-color: transparent;
    transform: translateY(-50%) scale(1.02);
}

.search-button-integrated {
    flex: none;
    height: 100%;
    color: black;
    cursor: pointer;
    font-size: 2rem;
    border: none !important;
    background-color: transparent;
}

.search-active-container {
    width: auto !important;
    align-items: center;
    gap: 0.25rem;
}

.search-input-integrated {
    flex: 1 1 auto;
    width: auto;
    height: 100%;
    padding: 1rem;
    border: 1px solid var(--quaternary-opaque);
    border-radius: 10px;
    font-size: 2rem;
    font-family: 'CardoRegular', serif;
    outline: none;
    color: black;
    box-sizing: border-box;
    opacity: 0;
}

.search-input-integrated:focus {
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
}

.image {
    align-items: center;
    flex-direction: column;
    display: flex;
    margin: 0 0;
}

figure {
    vertical-align: middle;
    margin: 0 auto 1rem auto !important;
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.article-content figure.media-center video, .article-content figure.media-style-side video {
    /* max-height: 400px; */
    justify-content: center;
    align-items: center;
    margin: 1rem 0 1rem 0;
}

figure img {
    margin: 1rem 0 1rem 0;
}

/* Alternating alignment for side images */
.article-content figure.media-style-side:nth-of-type(odd) {
    float: none;
    margin-bottom: 1rem;
}

.article-content figure.media-style-side:nth-of-type(even)  {
    float: none;
    margin-bottom: 1rem;
}

/* Style figcaption elements */
.article-content figcaption {
    margin-bottom: 0;
    padding: 0;
}

figcaption {
    font-size: 1rem;
    color: black;
    text-align: center;
}

/* Smaller images for side-styled (floated) images */
.article-content figure.media-style-side img {
    /* max-height: 400px; */
    width: auto;
    height: auto;
}

.image img {
    height: auto;
    max-width: 100%;
    width: auto;
    object-fit: contain;
}

/* Search Results Page Styles */
.search-results-page {
    margin: 0 auto;
}

.search-header {
    text-align: center;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--quaternary-opaque);
}

.search-header h1 {
    font-size: 2rem;
    margin-bottom: 0.5rem;
    color: black;
    font-weight: normal;
}

.search-query {
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
    color: black;
}

.results-count {
    font-size: 1rem;
    color: #777777;
    margin: 0;
}

.no-results {
    text-align: center;
    padding: 3rem 1rem;
}

.no-results h3 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: black;
    font-weight: normal;
}

.no-results p {
    color: #777777;
    margin-bottom: 0.5rem;
}

/* ---------------- MEDIA QUERIES ---------------- */

/* Base: narrow reading column with safe gutters */
.container {
  margin-inline: auto;
  padding-inline: 16px;
  width: min(100%, 68ch); /* typographic measure first */
}

/* Lock explicit px caps per breakpoint (reading UIs) */
@media (min-width: 480px)
{
    .container,
    .single-article,
    .top-nav,
    .search-results-page,
    .article-content figure.media-style-side img,
    .article-content figure.media-style-side,
    .article-content figure.media-center video, .article-content figure.media-style-side video {
        max-width: 560px !important;
    }
}

@media (min-width: 768px)
{
    .container,
    .single-article,
    .top-nav,
    .search-results-page,
    .article-content figure.media-style-side img,
    .article-content figure.media-style-side,
    .article-content figure.media-center video, .article-content figure.media-style-side video {
        max-width: 640px !important;
    }
    .expertise-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .container,
    .single-article,
    .top-nav,
    .search-results-page,
    .article-content figure.media-style-side img,
    .article-content figure.media-style-side,
    .article-content figure.media-center video, .article-content figure.media-style-side video {
        max-width: 680px !important;
    }
    .expertise-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1280px) {
    .container,
    .single-article,
    .top-nav,
    .search-results-page,
    .article-content figure.media-style-side img,
    .article-content figure.media-style-side,
    .article-content figure.media-center video, .article-content figure.media-style-side video {
        max-width: 720px !important;
    }
    .expertise-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1440px) {
    .container,
    .single-article,
    .top-nav,
    .search-results-page,
    .article-content figure.media-style-side img,
    .article-content figure.media-style-side,
    .article-content figure.media-center video, .article-content figure.media-style-side video {
        max-width: 768px !important;
    }
    .expertise-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1920px) {
    .container,
    .single-article,
    .top-nav,
    .search-results-page,
    .article-content figure.media-style-side img,
    .article-content figure.media-style-side,
    .article-content figure.media-center video, .article-content figure.media-style-side video {
        max-width: 840px !important;
    }
    .expertise-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* -------------------------------- */

@media (max-width: 768px) {
    .about-content {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 1rem;
    }
    
    .author-image {
        flex: 0 0 6rem;
        order: -1;
    }
    
    .footer-content {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .search-input {
        width: 250px;
    }
    
    /* Mobile search - always show search icon */
    .search-icon-trigger {
        opacity: 1 !important;
        pointer-events: auto !important;
    }
    
    .pagination {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .page-numbers {
        justify-content: center;
    }
    
    .social-links {
        gap: 1rem;
        justify-content: center;
        margin-top: 0.5rem;
        display: flex;
    }
    
    .social-link {
        font-size: 1rem;
        padding: 0.5rem 1rem;
        width: 2rem;
        height: 2rem;
    }
    
    .social-link i {
        font-size: 20px;
    }
    
    .contact-title {
        display: block;
        margin-bottom: 0.5rem;
        margin-right: 0;
    }
    
    .author-hero {
        flex-direction: column;
        text-align: center;
    }
    
    .author-image-large {
        flex: 0 0 8rem;
    }
    
    .expertise-grid {
        grid-template-columns: 1fr;
    }

    .article-content figure.media-center video, .article-content figure.media-style-side video {
        justify-content: center;
        align-items: center;
        margin: 1rem 0 1rem 0;
    }
    
    .article-content figure.media-style-side img {
        width: auto;
        height: auto;
    }
}