/* WebCSS: site styles (hero, featured, articles, logos) */
.hero-btn-row {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 1.1em;
}

:root {
  --content-max-w: 920px;
  --content-gutter: 16px;
}
/* Buttons */

.portfolio-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-size: 1.08rem;
  font-weight: 600;
  border-radius: 1;
  padding: 0.45rem 1.3em;
  min-height: 2.2em;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border 0.2s;
  text-decoration: none;
  line-height: 1.2;
  box-sizing: border-box;
}

.portfolio-btn.cv {
  background: #111;
  color: #fff;
  border: 2px solid #111;
}
.portfolio-btn.cv:hover {
  background: #222;
}

.portfolio-btn.bookme {
  display: none !important;
}

/* CV button */
.portfolio-btn.cv {
  border-radius: 9999px;
  padding: 0.55rem 2rem;
}

/* arrow added to the right of the CV label inside the pill */
.portfolio-btn.cv::after {
  content: none; /* remove arrow from CV button */
  display: none;
}

.portfolio-btn svg {
  display: inline-block;
  vertical-align: middle;
  width: 1.25em;
  height: 1.25em;
  margin-right: 0.5em;
}

/* Add spacing between the two buttons in the hero section */
.hero-blurb .portfolio-btn {
  margin-right: 1.1em;
}
.hero-blurb .portfolio-btn:last-child {
  margin-right: 0;
}
/* Featured Works Heading Styles */
.featured-heading-section {
  text-align: center;
  background: #fff;
  padding: 18px 0 6px 0; /* tightened vertical spacing */
}
.featured-heading {
  font-size: 1.5em;
  font-weight: 900;
  letter-spacing: 2px;
  margin-bottom: 10px;
  margin-top: 0px;
  color: #000;
  position: relative;
  display: inline-block;
}
.featured-heading::after {
  content: "";
  display: block;
  margin: 12px auto 0 auto;
  width: 56px;
  height: 4px;
  border-radius: 2px;
  background: #ffd700;
  opacity: 0.95;
}

@media (max-width: 700px) {
  .featured-heading-section {
    padding: 24px 0 0 0;
  }
  .featured-heading {
    font-size: 1.2em;
    margin-bottom: 16px;
  }
  .featured-heading::after {
    width: 36px;
    height: 3px;
    margin: 8px auto 0 auto;
  }
}

/* Homepage featured works: separate, centered two-tile section that matches hero alignment */
.featured-works-container {
  max-width: var(--content-max-w); /* align with hero content width */
  margin: 8px auto 24px auto; /* reduced top/bottom spacing */
  width: 100%;
  box-sizing: border-box;
  padding: 0 var(--content-gutter); /* maintain consistent inner gutters */
}

#homeFeaturedList {
  width: 100%;
  max-width: var(--content-max-w);
  margin: 0 auto;
  box-sizing: border-box;
  padding: 0; /* avoid extra inner spacing */
}

/* Scope container centering to the homepage only so other pages keep original behavior */
.home-page .container {
  max-width: var(--content-max-w);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--content-gutter);
  padding-right: var(--content-gutter);
  box-sizing: border-box;
}

.home-page #articleList {
  width: 100%;
  max-width: var(--content-max-w);
  margin: 0 auto 18px auto;
  padding: 0;
  box-sizing: border-box;
}

.bento-grid.featured-two {
  display: grid;
  grid-template-columns: repeat(2, minmax(320px, 1fr));
  gap: 24px;
  align-items: stretch;
  justify-items: stretch;
  width: 100%;
}

/* On the homepage (desktop) hide the full article list and show the two-item featured grid.
   On small screens, show the full article list instead and hide the homepage featured two. */
.home-page #articleList {
  display: none;
}
.home-page #homeFeaturedList {
  display: block;
}

@media (max-width: 700px) {
  .home-page #articleList {
    display: none; /* keep articleList hidden on homepage (not present in index.html) */
  }
  .home-page #homeFeaturedList {
    display: block; /* ensure featured items remain visible on small screens */
  }
  .bento-grid.featured-two {
    grid-template-columns: repeat(1, minmax(200px, 1fr));
    gap: 16px;
  }
}
/* Article List Styles */
.article-link {
  text-decoration: none;
}
.article-img {
  width: 100%;
  height: 200px;
  border-radius: 8px;
  object-fit: cover;
  margin: 0px;
}
.article-title {
  margin: 8px 0 4px 0;
  color: black;
}
.article-meta {
  margin: 0 0 4px 0;
}
.article-journal {
  margin: 0 0 4px 0;
  color: #2d2564;
  font-weight: 600;
  letter-spacing: 0.5px;
}
/* Spoken At Section Styles */

.spoken-section {
  text-align: center;
  margin: 0 0 0 0;
  background: #111;
  padding: 32px 0 40px 0;
}
.spoken-section h3 {
  font-size: 1.5em;
  font-weight: 900;
  letter-spacing: 2px;
  margin-bottom: 18px;
  margin-top: 0px;
  color: #fff;
  position: relative;
  display: inline-block;
}
.spoken-section h3::after {
  content: "";
  display: block;
  margin: 12px auto 0 auto;
  width: 56px;
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(90deg, #ffd700 0%, #ffb300 100%);
  opacity: 0.95;
}
.spoken-logos-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px 60px;
  align-items: center;
}
.spoken-logos-row .logo-img {
  max-height: 48px;
  filter: grayscale(1) brightness(0) invert(1); /* force white */
  transition: filter 0.2s, opacity 0.2s, transform 0.18s;
  padding: 10px 18px;
  border-radius: 10px;
}
/* Hover effect for spoken logos */
.spoken-logos-row .logo-img:hover {
  filter: grayscale(1) brightness(0) invert(1) drop-shadow(0 0 12px #ffd700);
  transform: scale(1.04);
  opacity: 0.95;
  background: rgba(255, 215, 0, 0.03);
}
/* Mobile optimization for spoken-section */
@media (max-width: 700px) {
  .spoken-section {
    padding: 36px 0 28px 0;
  }
  .spoken-section h3 {
    font-size: 1.2em;
    margin-bottom: 16px;
  }
  .spoken-section h3::after {
    width: 36px;
    height: 3px;
    margin: 8px auto 0 auto;
  }
  .spoken-logos-row {
    gap: 14px 6vw;
    padding: 0 2vw;
  }
  .spoken-logos-row .logo-img {
    max-width: 38vw;
    max-height: 28px;
    padding: 6px 4vw;
    margin-bottom: 6px;
    border-radius: 8px;
    object-fit: contain;
    filter: brightness(0) saturate(100%);
  }
}
/* Logos Section Styles */
.logos-section {
  text-align: center;
  margin: 0 0 0 0;
  background: #ffffff; /* match page background */
  padding: 32px 0 40px 0;
}
.logos-section h3 {
  font-size: 1.5em;
  font-weight: 900;
  letter-spacing: 2px;
  margin-bottom: 18px;
  margin-top: 0px;
  color: #000; /* dark heading on white background */
  position: relative;
  display: inline-block;
}
.logos-section h3::after {
  content: "";
  display: block;
  margin: 12px auto 0 auto;
  width: 56px;
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(90deg, #ffd700 0%, #ffb300 100%);
  opacity: 0.95;
}
/* Constrain the logos and speaking sections to the site's content width
   so they align with the hero and featured works sections. */
.spoken-section .spoken-logos-row,
.logos-section .logos-scroll-container {
  max-width: var(--content-max-w);
  margin: 0 auto; /* center within page */
  padding-left: var(--content-gutter);
  padding-right: var(--content-gutter);
  box-sizing: border-box;
}
.logos-scroll-container {
  position: relative;
  overflow: hidden; /* hide overflow so animation appears clean */
  display: block;
  padding: 6px 0; /* tighter vertical spacing */
}

/* Ensure the carousel's left/right edges align with the featured bento grid */
.logos-scroll-container .container {
  max-width: var(--content-max-w);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--content-gutter);
  padding-right: var(--content-gutter);
  box-sizing: border-box;
  display: block; /* override .container flex behavior for the carousel */
  width: 100%;
}

.logos-scroll {
  width: 100%;
  padding-left: 0;
  padding-right: 0;
}
.logos-scroll {
  display: flex;
  gap: 28px;
  align-items: center;
  flex-wrap: nowrap;
  will-change: transform;
  --marquee-duration: 40s;
  animation: marquee-linear var(--marquee-duration) linear infinite;
}
.logos-scroll:hover {
  animation-play-state: paused;
}
.logos-scroll .logo-img {
  flex: 0 0 auto;
  width: 140px;
  height: auto;
  max-height: 56px;
  object-fit: contain;
  filter: grayscale(1) brightness(0); /* force fully black logos */
}
.logos-scroll .logo-img:focus {
  outline: 3px solid #ffd700;
  outline-offset: 4px;
}
@keyframes marquee-back {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(var(--translate));
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes marquee-linear {
  0% {
    transform: translateX(0);
  }
  100% {
    /* Prefer an explicit --translate variable (set by JS). If not present,
       fall back to calculating the negative of --one-seq. This is
       more robust across browsers that may not reliably allow multiplication
       of CSS variables in calc(). */
    transform: translateX(var(--translate, calc(var(--one-seq, 0px) * -1)));
  }
}
@media (max-width: 700px) {
  .logos-scroll .logo-img {
    width: 90px;
    max-height: 40px;
  }
}

/* Speaking logos override when used inside the marquee container
   Keep sizes similar to the previous spoken-logos-row behaviour but
   scoped to when the row is a marquee (.logos-scroll.spoken-logos-row) */
.logos-scroll.spoken-logos-row .logo-img {
  max-height: 48px;
  width: auto;
  padding: 10px 18px;
  border-radius: 10px;
  filter: grayscale(1) brightness(0);
}
@media (max-width: 700px) {
  .logos-scroll.spoken-logos-row .logo-img {
    max-width: 38vw;
    max-height: 28px;
    padding: 6px 4vw;
    border-radius: 8px;
  }
}

/* Base styles for html and body */
html,
body {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  margin: 0px;
  padding: 0px;
  width: 100%;
}

/* Body background and font */
body {
  font-family: "Roboto", sans-serif;
  margin: 0;
  padding: 0;
  background-color: white;
}

/* Flex container for article cards */
.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 20px 20px;
  line-height: 24px;
  color: black;
  text-align: left;
  letter-spacing: 1px;
  margin-left: 11%;
  margin-right: 11%;
  margin-bottom: 16px;
  width: 75%;
}

/* Select dropdown styling */
select {
  display: flex;
  width: 75%;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin-left: 10.65%;
  margin-right: 10%;
  border: none;
  font-size: 14px;
  font-family: "Roboto", sans-serif;
}

/* Search input styling */
input[type="text"] {
  display: flex;
  width: 75%;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin-left: 10.85%;
  margin-right: 10%;
  border: none;
  font-size: 14px;
  font-family: "Roboto", sans-serif;
  margin-top: 30px;
}

/* Remove outline on input focus */
input[type="text"]:focus {
  outline: none;
}

/* Remove underline from links */
a:link {
  text-decoration: none;
}

/* Responsive styles for mobile */
@media screen and (max-width: 768px) {
  .column {
    width: 100%; /* Make columns full width on mobile */
  }
  select {
    margin-left: 10.9%;
  }
  input[type="text"] {
    margin-left: 11.3%;
  }
}

/* Filters row and columns */
.filters-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-left: 11%;
  margin-right: 11%;
  width: 75%;
  padding: 18px 0; /* vertical spacing only, no background/border */
  gap: 12px;
  font-family: "Roboto", sans-serif;
  box-sizing: border-box;
  align-items: center;
}
.filter-col {
  width: calc(33.333% - 12px);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  font-family: "Roboto", sans-serif;
  box-sizing: border-box;
  padding: 0 6px; /* small padding so inputs don't touch edges */
}
.filter-col input,
.filter-col select {
  width: 100%;
  box-sizing: border-box;
  font-size: 15px;
  font-family: "Roboto", sans-serif;
  border: 1px solid #d1d1e0;
  border-radius: 6px;
  padding: 10px 18px; /* more right padding so native down-arrow has breathing room */
  margin: 0;
  background: #fff;
  color: #222;
  transition: border 0.2s;
}
.filter-col input:focus,
.filter-col select:focus {
  border: 1.5px solid #2d2564;
  outline: none;
  background: #f0f0fa;
}

/* Booking styles removed — not used in this site build. */

@media (max-width: 700px) {
  .featured-works-note {
    font-size: 0.89rem;
    padding: 0 4vw;
    line-height: 1.5;
  }
}

/* Responsive filter row and column adjustments */
@media screen and (max-width: 700px) {
  .filters-row {
    flex-direction: column;
    /* Use fixed 16px side gutters on mobile for pixel-consistent alignment */
    width: calc(100% - 32px);
    margin: 0 16px;
    padding: 14px 0 8px 0;
    box-sizing: border-box;
  }
  .filter-col {
    width: 100%;
    margin-bottom: 12px;
    /* remove internal padding on mobile so controls align flush with container edges */
    padding: 0;
  }
  .filter-col select {
    padding: 6px 8px;
    font-size: 14px;
  }
  input[type="text"] {
    padding: 6px 12px;
    font-size: 14px;
    margin-top: 8px;
  }

  /* Ensure filter controls fill their column on mobile and align with content width */
  .filters-row .filter-col select,
  .filters-row .filter-col input[type="text"],
  .filters-row input[type="text"],
  .filters-row select {
    width: 100%;
    margin: 0;
    box-sizing: border-box;
  }

  /* remove any global left/right margins/widths that could push controls inward */
  .filters-row .filter-col input[type="text"],
  .filters-row .filter-col select {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    padding-left: 16px; /* match the 16px gutter */
    padding-right: 16px; /* match the 16px gutter */
  }

  /* Ensure article/list containers use the same content column width so bento cards
     align horizontally with the filters on mobile */
  .container,
  .list-container {
    /* Use the same fixed gutters as filters for perfect alignment */
    width: calc(100% - 32px);
    margin: 0 16px;
    box-sizing: border-box;
    gap: 18px 18px;
  }

  /* If the bento grid has its own spacing, make sure it fills the container */
  .bento-grid {
    width: 100%;
    box-sizing: border-box;
    padding-left: 0;
    padding-right: 0;
    margin-left: 0;
    margin-right: 0;
  }
}

/* Page container layout */
.page-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* ensure footer can be pushed to bottom on short pages */
}

/* Make the main content area grow to fill available space so footer sits at bottom */
main.content,
.page-content {
  flex: 1 0 auto;
}

/* Post photo placeholder styles (used by individual post pages) */
.post-photo-wrap {
  width: 75%;
  margin-left: 11%;
  margin-right: 11%;
  margin-top: 18px;
  margin-bottom: 18px;
  box-sizing: border-box;
}
.post-photo {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
  object-fit: cover;
  box-shadow: 0 8px 20px rgba(15, 23, 36, 0.06);
  border: 1px solid rgba(15, 20, 40, 0.03);
}

@media (max-width: 700px) {
  .post-photo-wrap {
    width: calc(100% - 32px);
    margin-left: 16px;
    margin-right: 16px;
  }
}

/* Three-photo gallery: aesthetic layout with one large image + two stacked */
.post-gallery {
  width: 75%;
  margin-left: 11%;
  margin-right: 11%;
  margin-top: 18px;
  margin-bottom: 18px;
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-template-areas: "main side1" "main side2";
  gap: 16px;
  align-items: stretch;
  box-sizing: border-box;
}
.post-gallery .photo-main {
  grid-area: main;
  height: 100%;
}
.post-gallery .photo-side1 {
  grid-area: side1;
  height: 100%;
}
.post-gallery .photo-side2 {
  grid-area: side2;
  height: 100%;
}
.post-gallery .post-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 8px;
  cursor: zoom-in;
  transition: transform 0.18s ease;
}
.post-gallery .post-photo:hover {
  transform: translateY(-4px);
}

@media (max-width: 900px) {
  .post-gallery {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    grid-template-areas: "main main" "side1 side2";
  }
}

@media (max-width: 700px) {
  .post-gallery {
    display: block; /* stack images vertically on small screens */
    width: calc(100% - 32px);
    margin-left: 16px;
    margin-right: 16px;
  }
  .post-gallery .post-photo {
    margin-bottom: 12px;
    height: auto;
    width: 100%;
    cursor: zoom-in;
  }
}

/* Lightbox / full-screen image overlay */
.lightbox-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 99999;
}
.lightbox-overlay.active {
  display: flex;
}
.lightbox-overlay img {
  max-width: 92vw;
  max-height: 92vh;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.6);
  border-radius: 6px;
}
.lightbox-close {
  position: absolute;
  top: 18px;
  right: 18px;
  color: #fff;
  font-size: 28px;
  cursor: pointer;
  background: transparent;
  border: none;
}

/* Post/article typography and layout for food blog readability */
.post {
  width: 100%;
}
.post .post-body {
  max-width: 720px;
  margin-left: 11%;
  margin-right: 11%;
  font-size: 18px;
  line-height: 1.78;
  color: #222;
  margin-top: 18px;
  margin-bottom: 28px;
}
.post h1,
.post h2,
.post h3 {
  font-family: "Libre Baskerville", serif;
  color: #111;
  margin-top: 1.1em;
  margin-bottom: 0.6em;
}
.post h2 {
  font-size: 1.35rem;
}
.post p {
  margin-bottom: 1em;
}

/* Figure and caption styling for photos */
figure.post-figure {
  margin: 0 0 1rem 0;
}
figure.post-figure .post-photo {
  border-radius: 8px;
}
figcaption.post-caption {
  font-size: 0.95rem;
  color: #6a6f78;
  margin-top: 6px;
}

/* Small meta-block for recipe/posts (centered under title) */
.post-meta {
  max-width: 720px;
  margin-left: 11%;
  margin-right: 11%;
  color: #6a6f78;
  font-size: 0.95rem;
  margin-bottom: 12px;
}

/* Ensure gallery images use consistent object-position for food photos */
.post-gallery .post-photo {
  object-position: center center;
}

@media (max-width: 700px) {
  .post .post-body {
    font-size: 16px;
    line-height: 1.6;
    margin-left: 16px;
    margin-right: 16px;
  }
  .post-meta {
    margin-left: 16px;
    margin-right: 16px;
  }
}

/* Vitae PDF container */
.vitae-container {
  padding: 50px 20px;
  text-align: center;
  width: 100%;
}
.vitae-object {
  width: 80%;
  height: 800px;
  border: none;
}

/* Header styles */
.header-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: auto;
  justify-content: space-between;
  margin: 36px;
}
.header-container a {
  text-decoration: none;
  color: black;
}
.header-item {
  font-size: 22px;
  color: black;
  text-align: left;
  font-weight: 900;
  letter-spacing: 2px;
  padding-left: 18px;
}

/* Make header sticky with a persistent bottom rule */
.header-container {
  position: sticky;
  top: 0;
  margin: 0; /* remove upper spacing to tighten header */
  background: #ffffff;
  z-index: 2000;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  padding-top: 18px; /* increased vertical padding (top) */
  padding-bottom: 18px; /* increased vertical padding (bottom) */
}

/* Page title block shown under the header (one-line subtitle) */
.page-hero-title {
  background: #ffffff;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
  padding-top: 20px;
  padding-bottom: 12px;
}
/* Align the title block to the article/content column (75% width with 11% margins)
   so the title lines up with the page content */
.page-hero-inner {
  width: 75%;
  margin-left: 11%;
  font-size: clamp(24px, 3.2vw + 12px, 40px);
  font-weight: 700;
}
.page-hero-inner h1 {
  margin: 0 0 12px 0;
  /* Option C modified per request: not bold, reduced size, capitalized */
  font-size: clamp(28px, 5vw, 52px);
  font-weight: 600; /* not bold */
  line-height: 1.06;
  letter-spacing: 1.2px;
  color: #0f1724;
  text-transform: capitalize; /* Title Case (capitalized words) */
  max-width: 880px;
}
.page-subtitle {
  margin: 0;
  color: #6a6f78;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.4px;
  padding-top: 8px;
  max-width: 820px;
  border-top: none; /* removed thin divider */
}

@media (max-width: 700px) {
  .page-hero-title {
    padding: 18px 16px;
  }
  .page-hero-inner {
    width: calc(100% - 32px);
    margin: 0 16px;
  }
  .page-hero-inner h1 {
    font-size: clamp(26px, 7.6vw, 40px);
  }
  .page-subtitle {
    font-size: 13px;
  }
}

/* Navigation bar styles */
.nav-item {
  font-size: 13px;
  color: #0f1724;
  text-align: center;
  font-weight: 700;
  letter-spacing: 1.2px;
  margin-right: 0; /* removed fixed right margin to allow even distribution */
  padding: 6px 4px; /* tightened vertical & horizontal padding for closer items */
  text-transform: uppercase;
  transition: background-color 0.12s, transform 0.12s, color 0.12s;
}
.nav-item a {
  padding: 4px 6px;
  color: inherit;
  text-decoration: none;
  display: inline-block;
}
.nav-item:hover {
  background-color: rgba(45, 37, 100, 0.04);
  transform: translateY(-1px);
  border-radius: 6px;
}
.nav {
  display: flex;
  flex-direction: row;
  justify-content: center; /* center nav items */
  flex: 0 0 auto; /* don't stretch; keep nav centered */
  max-width: 720px;
  gap: 28px; /* increased gap so nav items sit noticeably further apart */
}

/* Social media icon styles */
.socialmedia {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4px; /* tightened spacing between icons */
}
.media-item img {
  height: 22px;
  width: auto;
  display: block;
  transition: transform 0.12s ease, filter 0.12s ease, opacity 0.12s ease;
}
/* Header-specific: slightly larger icons for improved tap targets and visibility */
.header-container .socialmedia .media-item img {
  height: 30px; /* slightly larger for better visibility */
}
.media-item {
  margin-right: 0; /* rely on flex gap instead of per-item margins */
  padding-top: 2px;
}
.media-item:last-child {
  margin-right: 0;
  padding-right: 0;
}
.media-item img:hover,
.media-item img:focus {
  transform: scale(1.1);
  filter: drop-shadow(0 4px 12px rgba(45, 37, 100, 0.12));
  opacity: 0.95;
}
.media-item a:focus {
  outline: 3px solid #ffd700;
  outline-offset: 4px;
  border-radius: 6px;
}

/* Hide social icons inside the header for tablet and smaller screens (<=1024px) */
@media (max-width: 1024px) {
  .header-container .socialmedia {
    display: none !important;
    visibility: hidden;
    height: 0;
    overflow: hidden;
  }
}

/* Main content container */
.home-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  width: auto;
}

/* Home left item styles */
.homeitemleft {
  font-size: 32px;
  color: black;
  text-align: left;
  font-weight: bold;
  letter-spacing: 1px;
  margin-bottom: 0px;
  padding-top: 35%;
  padding-left: 20%;
}

/* Blurb styles */
.blurb-item {
  font-size: 16px;
  line-height: 28px;
  color: black;
  text-align: left;
  letter-spacing: 1px;
  margin-left: 20%;
  margin-right: 35%;
}
/* Project/half-column styles removed — not referenced by pages */

/* Contributions / row blocks removed — not referenced by active pages */

/* Footer styles */
.footer-container {
  display: flex;
  width: 100%;
  flex-direction: row;
  justify-content: center;
  margin-top: 2%;
  flex: 1;
}
.footer-item {
  font-size: 14px;
  color: black;
  text-align: center;
  letter-spacing: 2px;
  margin-top: auto;
}

/* New semantic site footer styling (matches reference two-column dark footer) */
.site-footer {
  background: #111;
  color: #ffffff;
  font-family: "Roboto", sans-serif;
  padding: 12px 0; /* slightly tighter desktop padding */
}
.site-footer .site-footer-inner {
  width: 75%;
  margin-left: 11%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px; /* balanced gap */
  box-sizing: border-box;
}
.site-footer .footer-left {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.site-footer .footer-logo a {
  display: none; /* hide the name/logo text per request */
}
.site-footer .footer-nav {
  color: white;
  font-size: 15px;
}
.site-footer .footer-nav a {
  color: white;
  text-decoration: none;
  margin-right: 12px; /* keep spacing but no bullet characters in HTML */
  font-size: 14px; /* match nav items */
  font-weight: 900; /* bold like nav */
  letter-spacing: 1px; /* same tracking as nav */
  text-transform: uppercase; /* match nav case */
  padding: 8px 6px; /* compact padding */
}
.site-footer .footer-nav a:hover {
  color: #ffd700; /* gold accent on hover */
}
.site-footer .footer-contact {
  display: none; /* hide the email/contact line per request */
}
.site-footer .footer-right p {
  color: #9ea3a8;
  margin: 0;
  text-align: right;
  font-size: 14px; /* match nav font-size for better alignment */
  line-height: 1.2;
  letter-spacing: 1px; /* subtle tracking to harmonize with nav */
}
.site-footer .footer-right .footer-name {
  color: #ffffff;
  font-weight: 400; /* do not bold the name */
  margin-left: 6px;
}

@media (max-width: 700px) {
  /* Keep footer on a single row on small screens, reduce spacing and font sizes so it fits */
  .site-footer {
    padding: 6px 0; /* compact vertical padding */
    border-top: 1px solid rgba(255, 255, 255, 0.04);
  }

  .site-footer .site-footer-inner {
    width: calc(100% - 24px);
    margin: 0 12px;
    flex-direction: row; /* keep in one line */
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    box-sizing: border-box;
  }

  .site-footer .footer-left,
  .site-footer .footer-right {
    width: auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
  }

  /* Compact horizontal nav */
  .site-footer .footer-nav {
    display: flex;
    flex-direction: row;
    gap: 8px;
    padding: 0;
    align-items: center;
  }

  .site-footer .footer-nav a {
    display: inline-block;
    padding: 4px 6px;
    font-size: 12px;
    color: #d6d6d6;
    white-space: nowrap;
  }

  .site-footer .footer-nav a:hover {
    color: #ffd700;
  }

  .site-footer .footer-right p {
    text-align: right;
    margin: 0;
    color: #bfc3c6;
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 48%;
  }

  .site-footer .footer-right .footer-name {
    font-weight: 400 !important;
    margin-left: 6px;
  }
}

/* Mobile-only simple rights line: show only on small screens and keep single-line */
@media (max-width: 700px) {
  .site-footer .site-footer-inner {
    display: none;
  }
  .mobile-footer-rights {
    display: block;
    text-align: center;
    color: #bfc3c6;
    /* match site footer font but allow dynamic shrinking so it fits on one line */
    font-family: inherit;
    font-weight: 400;
    font-size: clamp(12px, 3.5vw, 14px); /* scale between 12 and 14px */
    padding: 6px 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background: #111; /* match footer background */
  }
}

@media (min-width: 701px) {
  .mobile-footer-rights {
    display: none;
  }
}

/* Ensure mobile/tablet footer uses the same font/format as desktop and stays single-line
   Show the compact single-line rights element for screens up to 1024px (phones and tablets).
   This overrides the min-width:701px rule above for devices between 701px and 1024px. */
@media (max-width: 1024px) {
  /* Hide the desktop inner footer and remove the footer's own background/padding
     so we don't end up with a duplicate dark band above the compact mobile footer */
  .site-footer .site-footer-inner {
    display: none; /* hide desktop two-column footer on smaller screens */
  }

  .site-footer {
    background: transparent; /* prevent extra dark area above mobile footer */
    padding: 0; /* remove vertical padding so only the compact bar appears */
    border-top: none;
  }

  .mobile-footer-rights {
    display: block;
    text-align: center;
    color: #9ea3a8; /* same tone as desktop footer-right p */
    font-family: "Roboto", sans-serif; /* match desktop font */
    font-weight: 400;
    letter-spacing: 1px; /* match desktop tracking */
    line-height: 1; /* single-line enforcement */
    /* scale between small and desktop-ish sizes so it fits on iPad and phones */
    font-size: clamp(11px, 1.6vw, 14px);
    padding: 6px 12px;
    white-space: nowrap; /* keep single line */
    overflow: hidden;
    text-overflow: ellipsis;
    background: #111; /* match footer background */
    box-sizing: border-box;
    max-width: 100vw;
    width: 100vw; /* full-bleed across viewport */
    position: relative;
    left: 50%;
    transform: translateX(
      -50%
    ); /* center the 100vw element to remove container gutters */
  }

  .mobile-footer-rights .footer-name {
    color: #ffffff; /* keep name styling consistent with desktop */
    font-weight: 700; /* emphasize/bold the name on mobile/tablet */
    margin-left: 6px;
  }
}

/* (No body padding added) */

/* Mobile adjustments: tighten space after featured works, hide header social icons */
@media (max-width: 700px) {
  /* Reduce gap between last featured/work grid and footer */
  .featured-works-container {
    margin-bottom: 8px; /* smaller gap on mobile */
    padding-bottom: 0;
  }
  /* Ensure home featured list doesn't add extra bottom padding */
  #homeFeaturedList {
    padding-bottom: 8px;
  }

  /* Prevent social icons from appearing inside the mobile nav/header */
  .header-container .socialmedia {
    display: none !important;
    visibility: hidden;
    height: 0;
    overflow: hidden;
  }
}

/* List container for main content */
.list-container {
  display: flex;
  width: 100%;
  flex-direction: column;
  justify-content: center;
}
.list-image > img {
  width: 100vw;
  max-width: 100vw;
  height: 450px;
  object-fit: cover;
  display: block;
  border-radius: 0;
  margin: 0;
}
.list-introduction {
  font-size: 24px;
  color: black;
  text-align: left;
  font-weight: 900;
  letter-spacing: 2px;
  margin-left: 11%;
  margin-top: 2%;
  margin-bottom: 30px;
}
/* .list-items removed — not used in current pages */

/* Hide hamburger by default on wide screens; mobile helpers cleaned */
.hamburger {
  display: none;
}

/* Responsive styles for screens below 1300px */
@media (max-width: 1300px) {
  .mobilehome {
    display: flex;
  }
  .webhome {
    display: none;
  }
  .header-container {
    display: flex;
    flex-direction: column;
    width: auto;
    margin: 0;
  }
  .header-container {
    display: flex;
    flex-direction: row;
    align-items: left;
    width: auto;
    justify-content: space-between;
    padding-bottom: 18px;
    padding-top: 18px;
  }
  .header-container a {
    text-decoration: none;
    color: black;
  }
  .header-item {
    font-size: 16px;
    color: black;
    text-align: left;
    font-weight: 900;
    letter-spacing: 3px;
    padding-left: 15px;
    float: left;
  }
  .socialmedia {
    display: flex; /* keep social icons visible on narrower screens */
    gap: 10px;
  }
  .nav {
    position: absolute;
    left: -100%;
    top: 3rem;
    flex-direction: column;
    background-color: #fff;
    width: 100%;
    border-radius: 10px;
    text-align: center;
    transition: 0.3s;
    box-shadow: 0 10px 27px rgba(0, 0, 0, 0.05);
    z-index: 100000;
  }
  .nav-item {
    margin-right: 0;
  }
  .nav-item:hover {
    margin-right: 0;
  }
  .nav.active {
    left: 0;
  }
  .vitae-object {
    width: 100%;
    height: 600px;
  }
  .vitae-container {
    margin-top: 5%;
    width: 50%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    width: auto;
  }
  .vitaeresponsive {
    height: 900px;
    width: 90%;
  }
  .hamburger {
    display: block;
    cursor: pointer;
    margin-right: 15px;
  }
  .hamburger.active .bar:nth-child(2) {
    opacity: 0;
  }
  .hamburger.active .bar:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }
  .hamburger.active .bar:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }
  .bar {
    display: block;
    width: 25px;
    height: 3px;
    margin: 5px auto;
    background-color: #101010;
  }
  .list-image {
    margin: 0;
    height: 200px;
  }
  .list-image > img {
    object-fit: cover;
    height: 100%;
  }
  .project-introduction {
    margin-top: 24px;
  }
  .row {
    display: flex;
    flex-direction: column;
    padding-top: 0;
  }
  .mobilerow {
    display: flex;
    flex-direction: column;
    padding-top: 20%;
  }
  .column {
    float: left;
    width: 100%;
    text-align: left;
    padding-bottom: 10px;
    padding-top: 10px;
    padding-right: 0px;
    padding-left: 0px;
    margin: 0px;
  }
  .column-head {
    font-size: 18px;
    color: black;
    text-align: center;
    font-weight: bold;
    letter-spacing: 1px;
    margin-bottom: 0px;
    margin-top: 35px;
  }
  .column-item {
    font-size: 14px;
    line-height: 28px;
    color: black;
    text-align: center;
    letter-spacing: 1px;
    margin-top: 10px;
    margin-left: 5%;
    margin-right: 5%;
  }
  .columnicon-item img {
    height: 50px;
    width: 50px;
  }
  .columnicon-item {
    padding-top: 35px;
  }
  .halfcolumnprojecttext {
    width: 75%;
  }
  .home-container {
    margin: 0;
    width: auto;
  }
  .mobile-image {
    margin-bottom: 16px;
    display: block;
  }
  .mobile-image > img {
    width: 100%;
  }
  .body-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-left: 0px;
  }
  .list-image {
    margin: 0;
  }
  .list-introduction {
    margin-top: 20px;
    padding-top: 25px;
  }
  .introduction-item {
    font-size: 24px;
    width: 100%;
    text-align: center;
    margin-bottom: 20px;
    margin-top: 20px;
  }
  .footer-item {
    font-size: 10px;
    padding-top: 25px;
  }
}

/* Hero blurb section for homepage */
.hero-blurb {
  margin: 24px 0 0 0;
  padding: 30px 8% 30px 8%; /* Larger, even padding */
  border-radius: 14px; /* Slightly more rounded */
  text-align: center;
  max-width: 900px; /* Prevents it from being too wide on large screens */
  margin-left: auto;
  margin-right: auto;
}
.hero-blurb h1 {
  font-size: 2.2rem; /* Slightly larger headline */
  margin-bottom: 28px; /* More space below heading */
  color: #232946; /* Professional, dark blue */
  font-weight: 800; /* Stronger weight */
  letter-spacing: 1px;
  line-height: 1.15;
}

/* Home hero: two-column layout with stacked words on the left and a square image on the right */
.home-hero {
  position: relative;
  max-width: var(
    --content-max-w
  ); /* keep hero content aligned to site column */
  margin: 32px auto; /* vertical spacing above/below */
  display: flex;
  align-items: center; /* vertically center image with the title text */
  justify-content: space-between; /* keep left/right columns spaced */
  gap: 40px; /* horizontal separation between text and image */
  padding: 22px var(--content-gutter); /* horizontal gutters match site */
  color: #0f1724;
  background: #ffffff;
}
.home-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.home-hero .home-hero-inner {
  position: relative;
  /* slightly narrower left column to free space for the image */
  width: 48%;
  margin: 0;
  z-index: 2;
  text-align: left;
}
.hero-words {
  display: flex;
  flex-direction: column;
  gap: 12px; /* slightly increased gap for clearer separation */
  margin-bottom: 12px; /* space before subtitle/button */
}
.hero-words .word {
  font-size: clamp(24px, 5.8vw, 56px);
  font-weight: 600;
  line-height: 1.04; /* balanced line-height */
  color: #0f1724;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  margin: 0;
}
.home-hero .hero-cta-row {
  margin-top: 14px;
}

/* Subtitle styling inside the hero */
.home-hero-subtitle {
  margin: 12px 0 14px 0; /* balanced gap under subtitle before CTA */
  color: #444;
  font-size: 1rem;
  line-height: 1.6;
  max-width: 56ch;
}
.home-hero-media {
  width: clamp(140px, 22vw, 300px);
  height: clamp(140px, 22vw, 300px);
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  border-radius: 8px;
  margin: 0; /* symmetric gutters handled by the centered container */
  box-shadow: 0 8px 22px rgba(15, 23, 36, 0.08); /* subtle elevation */
  border: 1px solid rgba(15, 23, 36, 0.04);
  margin-left: 36px; /* explicit separation from the left column */
  transform: none;
}

@media (max-width: 900px) {
  .home-hero .home-hero-inner {
    width: 62%;
  }
  .home-hero-media {
    width: 40vw;
    height: 40vw;
    transform: none;
  }
}

@media (max-width: 700px) {
  .home-hero {
    flex-direction: column-reverse;
    align-items: center;
    padding: 8px 8px;
  }
  .home-hero .home-hero-inner {
    width: calc(100% - 24px);
    margin: 0 12px;
    text-align: center;
  }
  .hero-words {
    align-items: center;
  }
  .home-hero-media {
    width: calc(100% - 24px);
    /* Use a stable aspect ratio on small screens so height is never zero.
       Previous calculation used 100% of the parent (which can be undefined),
       resulting in zero height on some viewports. */
    height: auto;
    aspect-ratio: 1 / 1;
    margin: 0 12px 12px 12px;
    transform: none;
  }
  .hero-words .word {
    font-size: clamp(18px, 9.6vw, 26px);
  }
  .home-hero-subtitle {
    margin: 10px 12px 14px 12px;
  }
  .home-hero .hero-cta-row {
    margin-top: 12px;
  }
}

.hero-blurb p {
  font-size: 1.15rem;
  color: #333;
  margin: 0 auto 28px auto; /* More space below blurb */
  max-width: 700px; /* Keeps text line length readable */
  line-height: 1.7;
  font-weight: 400;
  text-align: center;
  max-width: 800px;
}
.hero-blurb em {
  font-style: italic;
  color: black;
}
.hero-blurb-btn {
  display: inline-block;
  margin-top: 0;
  margin-bottom: 10px; /* Add vertical space below each button */
  margin-right: 28px; /* Slightly more horizontal gap */
  padding: 8px 28px;
  min-width: 90px;
  background: black;
  color: #fff;
  font-size: 1.07rem;
  font-weight: 600;
  border-radius: 7px;
  text-decoration: none;
  transition: background 0.2s, box-shadow 0.2s, transform 0.18s;
  box-shadow: 0 2px 10px rgba(35, 41, 70, 0.13);
  vertical-align: middle;
}
.hero-blurb-btn:last-child {
  margin-right: 0;
}
.hero-blurb-btn:hover {
  background: black;
  color: #fff;
  box-shadow: 0 4px 16px rgba(35, 41, 70, 0.12);
}

/* Responsive adjustments for hero blurb */
@media (max-width: 700px) {
  .hero-blurb {
    padding: 24px 12% 24px 10%;
  }
  .hero-blurb h1 {
    font-size: 1.4rem;
  }
  .hero-blurb p {
    font-size: 1rem;
    text-align: left;
  }
  .hero-blurb-btn {
    width: 100%;
    font-size: 1rem;
    padding: 12px 0;
    box-sizing: border-box;
    margin-right: 0;
    min-width: unset;
  }
  .hero-blurb-btn:not(:last-child) {
    margin-bottom: 10px;
  }
}

/* Bento grid and card styles (for publications / media / scholarly lists) */

.bento-grid {
  display: grid;
  grid-template-columns: repeat(
    3,
    minmax(260px, 1fr)
  ); /* three columns with sensible min width */
  gap: 22px; /* slightly tighter, consistent spacing */
  align-items: stretch; /* make cards stretch to equal height within a row */
  grid-auto-rows: 1fr; /* ensure each grid row distributes space evenly */
  margin: 0;
  padding: 0;
  width: 100%;
}

.bento-card {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.18s ease, box-shadow 0.18s ease,
    border-color 0.12s ease;
  height: 100%; /* fill the grid row so cards in a row match heights */
  border: 1px solid rgba(15, 20, 40, 0.03); /* subtle border to define edges */
}

.bento-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
}

.card-media {
  width: 100%;
  height: 180px; /* balanced image height for title/content ratio */
  object-fit: cover;
  background: #f6f6f6;
  display: block;
}

.card-body {
  padding: 18px 16px; /* balanced padding for compactness */
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* let content flow naturally, meta block will push down */
  gap: 10px;
  flex: 1 1 auto;
  box-sizing: border-box;
  overflow: visible;
  position: relative;
}

.card-title {
  display: -webkit-box;
  -webkit-line-clamp: 3; /* concise and consistent */
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.26;
  margin: 0 0 8px 0;
  color: #111;
}

.card-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1 1 auto; /* allow the text block to grow and fill empty vertical space */
  justify-content: space-between; /* spread title and journal vertically to use space */
}

.card-journal {
  color: #0f3ba6; /* refined rich blue for emphasis */
  font-weight: 900; /* very bold to emphasize outlet */
  font-size: 15px; /* larger for prominence */
  margin-top: 0px;
  margin-bottom: 8px;
  letter-spacing: 0.6px;
  text-transform: none; /* show publication outlet names in normal case */
}

@media screen and (max-width: 1000px) {
  .bento-grid {
    grid-template-columns: repeat(2, minmax(220px, 1fr));
    gap: 18px;
  }
  .card-media {
    height: 170px;
  }
}

@media screen and (max-width: 700px) {
  /* reduce visual weight on small screens */
  .bento-grid {
    grid-template-columns: repeat(1, minmax(200px, 1fr));
    gap: 14px;
  }
  .card-media {
    height: 150px;
  }
  .card-title {
    -webkit-line-clamp: 2;
    line-clamp: 2;
    font-size: 16px;
  }
  .card-journal {
    color: #0b2a8a;
    font-size: 13px;
    font-weight: 800;
    text-transform: none;
    letter-spacing: 0.3px;
    margin-bottom: 6px;
  }
  /* use fixed gutters for article list so bentos align with filters and hero */
  #articleList {
    width: calc(100% - 32px);
    margin: 0 16px;
    box-sizing: border-box;
  }
}

.card-meta {
  color: #666;
  font-size: 13px;
}

.card-title {
  display: -webkit-box;
  -webkit-line-clamp: 3; /* keep titles concise and consistent */
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 18px; /* balanced presence */
  font-weight: 700;
  line-height: 1.28;
  margin: 0 0 6px 0;
  color: #111;
}

/* Use Roboto in the bento cards explicitly */
.bento-card {
  font-family: "Roboto", sans-serif;
}

/* Make the whole card clickable: link fills the card */
.bento-card a.card-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

/* Read more visual (span) - subtle with arrow */
.read-more {
  color: #6b6b6b;
  font-size: 0.78rem;
  font-weight: 400; /* not bold */
  align-self: flex-end;
  margin-top: 8px;
  opacity: 0.85;
}

.read-more:hover {
  text-decoration: underline;
  opacity: 1;
}

.read-more::after {
  content: "\2192"; /* right arrow */
  margin-left: 6px;
  font-weight: 400;
}

/* Normalize spacing of elements inside the card content so
   titles, journal, date, and authors have consistent margins */
.card-content > * {
  margin: 0; /* spacing controlled by .card-content gap */
}

/* Make sure media doesn't shrink on narrow layouts and keep the focal point centered */
.bento-card .card-media {
  flex-shrink: 0;
  object-position: center center;
}

/* Slightly tighten journal/date/author spacing for readability */
.card-journal {
  margin: 0 0 6px 0;
}
.card-date,
.card-authors {
  margin: 0;
  color: #6b6b6b;
}

/* Position the read-more in the bottom-right of the card body */
.read-more {
  display: none !important;
}

/* Page-specific image tuning: scholarly pages often use tall images —
   nudge object-position and give a slightly larger media area */
.page-scholarly .card-media {
  height: 240px;
  object-position: center top;
}

/* Publications and Media pages: keep images slightly smaller so text has room */
.page-publications .card-media {
  height: 210px;
  object-position: center center;
}
.page-media .card-media {
  height: 200px;
  object-position: center center;
}

/* Meta block that sits at the bottom of the card body */
.card-meta-block {
  margin-top: auto; /* pushes the meta block to the bottom */
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Highlight the date so it's easier to scan */
.card-meta-block .card-date {
  color: #2d2564; /* same accent as journal */
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.2px;
}

.card-meta-block .card-authors {
  color: #6b6b6b;
  font-size: 13px;
  font-style: italic;
}

/* Ensure article list aligns with filters (same width & margins) */
#articleList {
  display: block;
  width: 75%;
  margin-left: 11%;
  margin-right: 11%;
  padding: 0;
  box-sizing: border-box;
}

.bento-grid {
  width: 100%;
}

/* Page-specific tuning: make Creative bentos match Publications sizing and alignment */
.page-creative #articleList {
  width: 75%;
  margin-left: 11%;
  margin-right: 11%;
}
.page-creative .filters-row {
  width: 75%;
  margin-left: 11%;
  margin-right: 11%;
}
.page-creative .card-media {
  height: 210px; /* match publications image height */
  object-position: center center;
}

/* Reduce top spacing under hero on Creative and move that spacing to the bottom */
.page-creative .page-hero-title {
  padding-top: 12px; /* slightly tighter than default */
  padding-bottom: 8px; /* reduce gap beneath hero */
}
.page-creative .home-container {
  margin-top: 0; /* remove unintended vertical gap */
}
.page-creative #articleList {
  padding-bottom: 64px; /* add breathing room at bottom instead */
}

/* Prevent creative list from being vertically centered (caused by global centering) */
.page-creative .list-container {
  justify-content: flex-start;
}

/* Page-specific tuning for the food/blog page to tighten spacing under the hero
   so filters sit closer to the hero section (matching other pages). */
.page-food #articleList {
  width: 75%;
  margin-left: 11%;
  margin-right: 11%;
}
.page-food .filters-row {
  width: 75%;
  margin-left: 11%;
  margin-right: 11%;
}
.page-food .page-hero-title {
  padding-top: 12px;
  padding-bottom: 8px; /* reduce gap beneath hero */
}
.page-food .home-container {
  margin-top: 0; /* remove unintended vertical gap */
}
.page-food .list-container {
  justify-content: flex-start;
}

@media screen and (max-width: 700px) {
  /* ensure article list and grid use the same fixed gutters */
  #articleList {
    width: calc(100% - 32px);
    margin: 0 16px;
    box-sizing: border-box;
  }
  .bento-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 14px;
    width: 100%;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
  }
  .bento-card {
    height: auto;
    min-height: 320px;
  }
  .card-media {
    height: 160px;
  }
  .card-title {
    -webkit-line-clamp: 3;
    line-clamp: 3;
    font-size: 16px;
  }

  /* Add bottom padding so the last bento card has breathing room above the footer */
  /* Keep the total visible gap between last bento and footer consistent when footer top padding changes.
      Target total gap = 32px (articleList padding-bottom + footer top padding).
      With footer top padding now 4px, articleList bottom padding should be 28px. */
  #articleList {
    padding-bottom: 28px;
  }
}

.card-title {
  font-size: 18px;
  font-weight: 700;
  color: #111;
  margin: 0 0 6px 0;
  line-height: 1.28;
}

.card-meta {
  font-size: 13px;
  color: #666;
}

.card-tags {
  margin-top: 6px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.tag {
  background: transparent;
  color: #2d2564;
  padding: 0;
  font-size: 13px;
  border-radius: 2px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  display: inline-flex;
  align-items: center;
}

.tag::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  background: #ffd700; /* gold marker */
  border-radius: 2px;
  margin-right: 6px;
}

.page-creative .card-content {
  gap: 8px; /* match publications/media spacing between title and journal */
}

.page-creative .card-content {
  min-height: 88px; /* increase so journal is pushed down like other pages */
  display: flex; /* ensure content is a flex column so justify-content works */
  flex-direction: column;
  flex: 1 1 auto;
  justify-content: space-between;
}
.page-creative .card-journal {
  margin-bottom: 8px;
}
.page-creative .card-tags {
  margin-top: 2px; /* sit closer to the date */
}

/* tighten gap between date and tags on creative cards */
.page-creative .card-meta-block {
  gap: 4px;
}

/* bottom-left tag container inside cards */
.card-tags-inline {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-left: auto; /* ensure tags sit at the far right */
}

/* layout the date and inline tags on the same row */
.card-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.card-meta-row .card-date {
  flex: 0 0 auto; /* keep date compact on the left */
}
.card-meta-row .card-tags-inline {
  flex: 0 0 auto; /* keep tags compact on the right */
}

.card-tags-inline .tag {
  background: transparent;
  padding: 0;
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  color: #2d2564;
  letter-spacing: 0.6px;
}

.page-creative .card-meta-block {
  padding-bottom: 8px; /* keep a small buffer but avoid large extra space */
}

/* Creative-specific bento formatting tweaks */
.page-creative .bento-grid {
  gap: 22px; /* match global bento grid spacing */
}
.page-creative .bento-card {
  border-radius: 10px; /* match global card radius */
}
.page-creative .card-body {
  padding: 18px 16px; /* match global card-body padding */
}
.page-creative .card-title {
  font-size: 18px; /* match global title size */
  margin-bottom: 6px;
}
.page-creative .card-journal {
  font-size: 15px; /* match global journal size */
  color: #0f3ba6;
  font-weight: 900;
  margin-bottom: 8px;
}
.page-creative .card-meta-block {
  gap: 6px; /* slightly more room between date, tags, authors */
  align-items: flex-start;
}
.page-creative .card-date {
  font-weight: 700;
  color: #2d2564;
  font-size: 13px;
}
.page-creative .card-authors {
  color: #6b6b6b;
  font-size: 13px;
  font-style: italic;
}
.page-creative .card-tags {
  margin-top: 2px;
}

@media screen and (max-width: 1000px) {
  .page-creative .card-body {
    padding: 16px 14px;
  }
  .page-creative .card-title {
    font-size: 17px;
  }
}
/* Mobile: make Creative bentos feel like Publications/Media on small viewports */
@media screen and (max-width: 700px) {
  .page-creative .card-body {
    padding: 12px 12px; /* match compact padding used elsewhere */
  }
  .page-creative .card-media {
    height: 150px; /* consistent with other pages at this breakpoint */
  }
  .page-creative .card-title {
    -webkit-line-clamp: 2;
    line-clamp: 2;
    font-size: 16px;
    margin-bottom: 6px;
  }
  .page-creative .card-content {
    min-height: 64px; /* allow space so journal is pushed down */
    gap: 8px;
    justify-content: space-between;
  }
  .page-creative .card-journal {
    font-size: 13px;
    margin-bottom: 6px;
  }
  .page-creative .card-meta-block {
    gap: 6px;
    padding-bottom: 6px;
  }
  .card-meta-row {
    gap: 10px;
  }
}
/* CTA was removed: decorative CTA icon deleted to simplify cards */

@media (max-width: 520px) {
  .bento-card {
    min-height: 260px;
  }
  .card-media {
    height: 120px;
  }
}

/* Footer alignment to match articleList width */
.footer-container {
  padding: 28px 0;
}
.footer-container .footer-item {
  width: 75%;
  margin-left: 11%;
  margin-right: 11%;
}

/* Make footer stick to bottom when content is short
   Use a column flex layout so the main content grows and pushes footer down. */
html,
body {
  height: 100%;
}
.page-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
/* The main content wrapper used across pages. Ensure it expands to fill available space. */
.page-container > .home-container {
  flex: 1 1 auto;
}