/* ==========================================================================
   Adelaide's Catering & Sweets — Stylesheet
   Color Palette:
   - Background: #FFFFFF (Pure White) & #FAF8F4 (Soft Alabaster Tint)
   - Primary:    #3D4D16 (Deep Botanical Olive)
   - Secondary:  #9A8568 (Warm Toasted Taupe)
   - Gold:       #C5A059 / #D4AF37 (Antique & Metallic Gold Accents)
   ========================================================================== */

:root {
  --bg-white: #FFFFFF;
  --bg-ivory: #FAF8F4;
  --primary: #3D4D16;
  --primary-dark: #2B370E;
  --primary-light: #526622;
  --secondary: #9A8568;
  --secondary-light: #B8A68E;
  --secondary-pale: #EFECE6;
  --gold: #C5A059;
  --gold-bright: #D4AF37;
  --gold-light: #E8D5A7;
  --gold-gradient: linear-gradient(135deg, #B89040 0%, #D4AF37 35%, #F1DF9E 50%, #C5A059 70%, #9E7A2F 100%);
  --text-main: #2A2E1F;
  --text-muted: #5C574F;
  --header-compact-height: 84px;
  --font-serif: "Cormorant Garamond", "Playfair Display", Georgia, "Times New Roman", serif;
  --font-sans: "Montserrat", "Optima", "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif;
  --transition-smooth: 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  --shadow-soft: 0 12px 36px rgba(61, 77, 22, 0.08);
  --shadow-gold: 0 6px 24px rgba(197, 160, 89, 0.22);
}

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

html {
  scroll-behavior: smooth;
  font-size: 16px;
  background-color: var(--bg-white);
  color: var(--text-main);
}

body {
  font-family: var(--font-sans);
  background-color: var(--bg-white);
  color: var(--text-main);
  line-height: 1.75;
  overflow-x: hidden;
}

/* Accessibility Skip Link */
.skip-link {
  position: absolute;
  top: -100px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--primary);
  color: var(--bg-white);
  padding: 0.75rem 1.5rem;
  border: 1px solid var(--gold);
  z-index: 2000;
  text-decoration: none;
  font-weight: 600;
  border-radius: 0 0 6px 6px;
  transition: top 0.2s ease;
}

.skip-link:focus {
  top: 0;
}

/* ==========================================================================
   SPLASH SCREEN -> HEADER TRANSFORMATION
   Prioritizes JS functionality with a simple CSS fallback for .no-js
   ========================================================================== */

.site-header {
  background-color: var(--bg-white);
  width: 100%;
  z-index: 900;
  border-bottom: 1px solid rgba(197, 160, 89, 0.35);
  transition:
    min-height var(--transition-smooth),
    height var(--transition-smooth),
    padding var(--transition-smooth),
    box-shadow 0.45s ease,
    background-color 0.45s ease;
}

/* Simple No-JS Fallback for Header */
html.no-js .site-header {
  position: sticky;
  top: 0;
  padding: 1.5rem 1.5rem;
  background-color: rgba(255, 255, 255, 0.98);
  box-shadow: 0 4px 20px rgba(61, 77, 22, 0.06);
}

html.no-js .splash-frame,
html.no-js .scroll-cue {
  display: none;
}

html.no-js .splash-ornament {
  width: 110px;
  margin-bottom: 0.35rem;
}

/* JS-Enabled Splash State (Before First Scroll) */
html.js-enabled .site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 100vh;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 2rem 1.5rem;
  background:
    radial-gradient(circle at 50% 45%, rgba(197, 160, 89, 0.07) 0%, rgba(255, 255, 255, 0) 65%),
    var(--bg-white);
}

html.js-enabled body {
  padding-top: var(--header-compact-height);
}

/* Decorative Gold Frame inside Splash */
.splash-frame {
  position: absolute;
  inset: 22px;
  border: 1px solid rgba(197, 160, 89, 0.45);
  pointer-events: none;
  transition: opacity 0.45s ease, inset 0.6s ease;
}

.splash-frame::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid rgba(154, 133, 104, 0.22);
}

.frame-corner {
  position: absolute;
  width: 18px;
  height: 18px;
  border-color: var(--gold);
  border-style: solid;
  transition: opacity 0.4s ease;
}

.frame-corner.tl {
  top: -1px;
  left: -1px;
  border-width: 2px 0 0 2px;
}

.frame-corner.tr {
  top: -1px;
  right: -1px;
  border-width: 2px 2px 0 0;
}

.frame-corner.bl {
  bottom: -1px;
  left: -1px;
  border-width: 0 0 2px 2px;
}

.frame-corner.br {
  bottom: -1px;
  right: -1px;
  border-width: 0 2px 2px 0;
}

.header-inner {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  z-index: 2;
  transition: all var(--transition-smooth);
}

.splash-ornament {
  width: 180px;
  height: auto;
  margin-bottom: 1rem;
  transition:
    opacity 0.45s ease,
    max-height 0.55s ease,
    margin 0.55s ease,
    transform 0.55s ease;
  max-height: 100px;
}

.splash-eyebrow {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--secondary);
  margin-bottom: 0.75rem;
  font-weight: 600;
  transition: opacity 0.4s ease, max-height 0.5s ease, margin 0.5s ease;
  max-height: 40px;
}

/* ==========================================================================
   THE SPLASH WORD: "ADELAIDE & CO"
   - JS Priority: Hovering any 2-letter pair (AD, EL, AI, DE, CO) hides those
     two letters and positions a square cake image directly over them.
   - Simple No-JS Fallback: Pure CSS square cake reveal over AD on hover.
   ========================================================================== */

.brand-word-wrapper {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0.25rem 0 0.75rem;
  transition: margin var(--transition-smooth);
}

.brand-word-link {
  text-decoration: none;
  color: var(--primary);
  display: inline-block;
  position: relative;
  cursor: pointer;
  padding: 0.35rem 0.5rem;
  outline: none;
}

.brand-word {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(2.4rem, 7.2vw, 6.2rem);
  letter-spacing: 0.12em;
  color: var(--primary);
  line-height: 1.08;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  position: relative;
  user-select: none;
  transition:
    font-size var(--transition-smooth),
    letter-spacing var(--transition-smooth),
    color 0.3s ease;
}

.letter-pair {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.brand-word .char {
  display: inline-block;
  transition:
    opacity 0.22s ease,
    transform 0.25s ease,
    color 0.25s ease;
  position: relative;
}

.brand-word .char-space {
  display: inline-block;
  width: 0.32em;
}

.brand-word .char-amp {
  color: var(--gold);
  font-style: italic;
  font-weight: 400;
  padding: 0 0.08em;
}

/* JS-Active Pair State: Hide the two hovered letters */
html.js-enabled .letter-pair.is-hovered-pair .char {
  opacity: 0;
  transform: scale(0.88);
}

/* JS Dynamic Square Cake Overlay positioned over the active 2-letter pair */
.js-cake-square {
  position: absolute;
  top: 0;
  left: 0;
  width: 1.35em;
  height: 1.35em;
  transform: translate(-50%, -50%) scale(0.75);
  opacity: 0;
  pointer-events: none;
  border-radius: 0;
  /* Crisp square as requested */
  border: 2px solid var(--gold-bright);
  box-shadow:
    0 10px 26px rgba(61, 77, 22, 0.24),
    0 0 0 3px rgba(255, 255, 255, 0.95);
  overflow: hidden;
  background-color: var(--bg-ivory);
  z-index: 10;
  transition:
    opacity 0.2s ease,
    transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
    left 0.18s cubic-bezier(0.22, 1, 0.36, 1),
    top 0.18s cubic-bezier(0.22, 1, 0.36, 1),
    width 0.18s ease,
    height 0.18s ease;
}

.js-cake-square.is-active {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.js-cake-square img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Simple No-JS Fallback: When JS is disabled, hovering a letter-pair (or the word)
   shows the simple square cake fallback over the hovered pair */
.nojs-cake-fallback {
  display: none;
}

html.no-js .nojs-cake-fallback {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1.35em;
  height: 1.35em;
  min-width: 48px;
  min-height: 48px;
  transform: translate(-50%, -50%) scale(0.8);
  opacity: 0;
  pointer-events: none;
  border-radius: 0;
  border: 2px solid var(--gold-bright);
  box-shadow: 0 6px 18px rgba(61, 77, 22, 0.22);
  overflow: hidden;
  background: var(--bg-ivory);
  z-index: 8;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

html.no-js .nojs-cake-fallback img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

html.no-js .letter-pair:hover .char {
  opacity: 0;
}

html.no-js .letter-pair:hover .nojs-cake-fallback {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.hover-hint {
  font-size: 1.92rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--secondary);
  margin-top: 0.35rem;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  transition: opacity 0.4s ease, max-height 0.45s ease, margin 0.45s ease;
  max-height: 30px;
}

.hover-hint-dot {
  width: 6px;
  height: 6px;
  background: var(--gold);
  display: inline-block;
}

.splash-tagline {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.15rem, 2.2vw, 1.55rem);
  color: var(--secondary);
  max-width: 560px;
  margin: 0.5rem auto 1.75rem;
  transition:
    opacity 0.4s ease,
    max-height 0.55s ease,
    margin 0.55s ease;
  max-height: 120px;
}

/* Navigation inside Splash / Header */
.site-nav {
  margin-top: 0.25rem;
  transition: margin var(--transition-smooth);
}

.nav-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem 2rem;
}

.nav-link {
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--primary);
  text-decoration: none;
  padding: 0.45rem 0.2rem;
  position: relative;
  transition: color 0.3s ease;
}

.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1.5px;
  background: var(--gold-gradient);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.35s ease;
}

.nav-link:hover,
.nav-link:focus-visible,
.nav-link[aria-current="page"] {
  color: var(--secondary);
}

.nav-link:hover::after,
.nav-link:focus-visible::after,
.nav-link[aria-current="page"]::after {
  transform: scaleX(1);
}

/* Scroll Cue at Bottom of Splash */
.scroll-cue {
  position: absolute;
  bottom: 36px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  text-decoration: none;
  color: var(--secondary);
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  cursor: pointer;
  background: transparent;
  border: none;
  font-family: var(--font-sans);
  transition: opacity 0.4s ease, transform 0.4s ease;
  z-index: 5;
}

.scroll-cue:hover {
  color: var(--primary);
}

.scroll-cue-line {
  width: 1px;
  height: 36px;
  background: linear-gradient(to bottom, var(--gold), transparent);
  position: relative;
  overflow: hidden;
}

.scroll-cue-line::after {
  content: "";
  position: absolute;
  top: -100%;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--primary);
  animation: scrollPulse 2s infinite ease-in-out;
}

@keyframes scrollPulse {
  0% {
    top: -100%;
  }

  50% {
    top: 0%;
  }

  100% {
    top: 100%;
  }
}

/* ==========================================================================
   TRANSFORMED HEADER STATE (ON FIRST SCROLL DOWN OR INNER PAGES)
   ========================================================================== */

html.js-enabled body.is-header-transformed .site-header,
.site-header.site-header--compact {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--header-compact-height);
  min-height: var(--header-compact-height);
  padding: 0 2rem;
  background-color: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(12px);
  box-shadow: 0 6px 28px rgba(61, 77, 22, 0.08);
  border-bottom: 1px solid rgba(197, 160, 89, 0.55);
}

html.js-enabled body.is-header-transformed .splash-frame,
.site-header--compact .splash-frame {
  opacity: 0;
  inset: 0;
}

html.js-enabled body.is-header-transformed .splash-ornament,
html.js-enabled body.is-header-transformed .splash-eyebrow,
html.js-enabled body.is-header-transformed .splash-tagline,
html.js-enabled body.is-header-transformed .hover-hint,
html.js-enabled body.is-header-transformed .scroll-cue,
.site-header--compact .splash-ornament,
.site-header--compact .splash-eyebrow,
.site-header--compact .splash-tagline,
.site-header--compact .hover-hint,
.site-header--compact .scroll-cue {
  opacity: 0;
  max-height: 0;
  margin: 0;
  overflow: hidden;
  pointer-events: none;
}

html.js-enabled body.is-header-transformed .header-inner,
.site-header--compact .header-inner {
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  height: 100%;
}

html.js-enabled body.is-header-transformed .brand-word-wrapper,
.site-header--compact .brand-word-wrapper {
  margin: 0;
}

html.js-enabled body.is-header-transformed .brand-word,
.site-header--compact .brand-word {
  font-size: clamp(1.3rem, 2.2vw, 1.75rem);
  letter-spacing: 0.1em;
}

html.js-enabled body.is-header-transformed .site-nav,
.site-header--compact .site-nav {
  margin-top: 0;
}

.mobile-nav-toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--gold);
  color: var(--primary);
  padding: 0.45rem 0.65rem;
  border-radius: 4px;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
}

/* ==========================================================================
   CENTERED MAIN CONTENT WITH DYNAMIC FLOW BETWEEN SECTIONS
   ========================================================================== */

.site-main {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: 3.5rem 1.5rem 4rem;
  text-align: center;
  position: relative;
}

.flow-section {
  position: relative;
  max-width: 780px;
  margin: 0 auto;
  padding: 3.5rem 1.25rem;
  text-align: center;
}

.flow-connector {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0.5rem auto;
  pointer-events: none;
}

.flow-connector-line {
  width: 1.5px;
  height: 68px;
  background: linear-gradient(to bottom,
      rgba(197, 160, 89, 0.15),
      var(--gold) 50%,
      rgba(197, 160, 89, 0.15));
  position: relative;
}

.flow-connector-diamond {
  width: 9px;
  height: 9px;
  background: var(--bg-white);
  border: 1.5px solid var(--gold);
  transform: rotate(45deg);
  margin: 4px 0;
}

.flow-wave-svg {
  width: 140px;
  height: 52px;
  display: block;
  margin: 0 auto;
}

/* Typography for Centered Sections */
.section-kicker {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--secondary);
  margin-bottom: 0.75rem;
  position: relative;
  padding: 0 1.25rem;
}

.section-kicker::before,
.section-kicker::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 0.75rem;
  height: 1px;
  background-color: var(--gold);
}

.section-kicker::before {
  left: 0;
}

.section-kicker::after {
  right: 0;
}

.section-title {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 4.2vw, 3.1rem);
  font-weight: 600;
  color: var(--primary);
  line-height: 1.2;
  margin-bottom: 1.35rem;
}

.section-lead {
  font-family: var(--font-serif);
  font-size: clamp(1.22rem, 2.1vw, 1.48rem);
  font-style: italic;
  color: var(--secondary);
  max-width: 680px;
  margin: 0 auto 1.5rem;
  line-height: 1.6;
}

.section-prose {
  font-size: 1.03rem;
  color: var(--text-main);
  max-width: 650px;
  margin: 0 auto 1.4rem;
  line-height: 1.85;
}

.editorial-quote {
  position: relative;
  max-width: 680px;
  margin: 2.5rem auto;
  padding: 2.25rem 2rem;
  background: var(--bg-ivory);
  border-top: 1px solid var(--gold);
  border-bottom: 1px solid var(--gold);
  font-family: var(--font-serif);
  font-size: clamp(1.3rem, 2.4vw, 1.68rem);
  font-style: italic;
  color: var(--primary);
  line-height: 1.5;
}

.editorial-quote cite {
  display: block;
  margin-top: 0.9rem;
  font-family: var(--font-sans);
  font-style: normal;
  font-size: 0.75rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--secondary);
}

.medallion-trio {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin: 2.75rem auto 1rem;
  max-width: 900px;
}

.medallion-card {
  background: var(--bg-white);
  border: 1px solid rgba(154, 133, 104, 0.28);
  padding: 1.5rem 1.35rem 1.85rem;
  border-radius: 160px 160px 12px 12px;
  box-shadow: var(--shadow-soft);
  transition: transform 0.45s ease, border-color 0.45s ease, box-shadow 0.45s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.medallion-card:hover {
  transform: translateY(-6px);
  border-color: var(--gold);
  box-shadow: var(--shadow-gold);
}

.medallion-img-wrap {
  width: 100%;
  aspect-ratio: 4 / 4.6;
  border-radius: 140px 140px 8px 8px;
  overflow: hidden;
  border: 2px solid var(--gold-light);
  margin-bottom: 1.25rem;
  position: relative;
}

.medallion-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.65s ease;
}

.medallion-card:hover .medallion-img-wrap img {
  transform: scale(1.06);
}

.medallion-title {
  font-family: var(--font-serif);
  font-size: 1.45rem;
  color: var(--primary);
  margin-bottom: 0.5rem;
}

.medallion-desc {
  font-size: 0.92rem;
  color: var(--text-muted);
  line-height: 1.65;
}

/* Dynamic Flowing Story Stream */
.story-stream {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3rem;
  margin-top: 2.5rem;
}

.story-node {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  align-items: center;
  gap: 2.5rem;
  max-width: 860px;
  width: 100%;
  background: var(--bg-white);
  border: 1px solid rgba(197, 160, 89, 0.35);
  padding: 2rem;
  position: relative;
  box-shadow: var(--shadow-soft);
}

.story-node::before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid rgba(154, 133, 104, 0.18);
  pointer-events: none;
}

.story-node:nth-child(even) {
  grid-template-columns: 1.1fr 1fr;
}

.story-node:nth-child(even) .story-node-media {
  order: 2;
}

.story-node:nth-child(even) .story-node-copy {
  order: 1;
}

.story-node-media {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  border: 1.5px solid var(--gold);
  aspect-ratio: 4 / 3.4;
}

.story-node-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.story-node-copy {
  text-align: center;
  padding: 0.5rem;
}

.story-node-tag {
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
  display: block;
  margin-bottom: 0.45rem;
}

.story-node-heading {
  font-family: var(--font-serif);
  font-size: 1.85rem;
  color: var(--primary);
  margin-bottom: 0.75rem;
  line-height: 1.25;
}

.chapters-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem;
  margin: 2.5rem auto 1rem;
  max-width: 900px;
}

.chapter-card {
  background: var(--bg-ivory);
  border: 1px solid rgba(197, 160, 89, 0.45);
  padding: 2.1rem 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  text-align: center;
  position: relative;
  transition: transform 0.4s ease, box-shadow 0.4s ease, background-color 0.4s ease;
}

.chapter-card:hover {
  transform: translateY(-5px);
  background: var(--bg-white);
  box-shadow: var(--shadow-gold);
}

.chapter-number {
  font-family: var(--font-serif);
  font-size: 0.95rem;
  font-style: italic;
  color: var(--gold);
  border: 1px solid var(--gold);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
}

.chapter-title {
  font-family: var(--font-serif);
  font-size: 1.55rem;
  color: var(--primary);
  margin-bottom: 0.75rem;
}

.chapter-text {
  font-size: 0.93rem;
  color: var(--text-muted);
  margin-bottom: 1.5rem;
  line-height: 1.7;
}

.btn-gold {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.65rem;
  font-family: var(--font-sans);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--bg-white);
  background-color: var(--primary);
  border: 1px solid var(--gold);
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.25s ease, box-shadow 0.3s ease;
  cursor: pointer;
}

.btn-gold:hover,
.btn-gold:focus-visible {
  background-color: var(--secondary);
  border-color: var(--gold-bright);
  box-shadow: var(--shadow-gold);
  transform: translateY(-2px);
}

.btn-outline-gold {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.65rem 1.4rem;
  font-family: var(--font-sans);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--primary);
  background-color: transparent;
  border: 1px solid var(--gold);
  transition: all 0.3s ease;
}

.btn-outline-gold:hover,
.btn-outline-gold:focus-visible {
  background-color: var(--primary);
  color: var(--bg-white);
}

/* Gallery Grid */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1.35rem;
  margin-top: 2rem;
}

.gallery-item {
  position: relative;
  aspect-ratio: 1 / 1.08;
  border: 1.5px solid rgba(197, 160, 89, 0.5);
  overflow: hidden;
  background: var(--bg-ivory);
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}

.gallery-item:hover img {
  transform: scale(1.06);
}

.gallery-caption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 1.25rem 0.9rem 0.85rem;
  background: linear-gradient(to top, rgba(43, 55, 14, 0.92), rgba(43, 55, 14, 0));
  color: var(--bg-white);
  font-family: var(--font-serif);
  font-size: 1.08rem;
  letter-spacing: 0.03em;
}

/* Scroll Reveal Animation */
html.js-enabled .reveal-on-scroll {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.75s ease, transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}

html.js-enabled .reveal-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Footer */
.site-footer {
  text-align: center;
  padding: 3rem 1.5rem 2.5rem;
  border-top: 1px solid rgba(197, 160, 89, 0.4);
  background: var(--bg-ivory);
  margin-top: 2rem;
}

.footer-brand {
  font-family: var(--font-serif);
  font-size: 1.65rem;
  color: var(--primary);
  letter-spacing: 0.14em;
  margin-bottom: 0.5rem;
}

.footer-meta {
  font-size: 0.85rem;
  color: var(--secondary);
  margin-bottom: 1rem;
}

/* ==========================================================================
   SIDE ARTWORK GALLERY DIV (NO BACKGROUND OR SEPARATION)
   "Move the bottom Gallery bar to be a div on the side with no background or
    separation. Have the artworks be selected from the selected works
    screenshots. link to the images on the NGA site with the information on
    the formatted similar to the shown screenshots"
   ========================================================================== */

.artwork-side-gallery {
  position: fixed;
  right: 1.15rem;
  top: calc(var(--header-compact-height) + 1rem);
  bottom: 1rem;
  width: 176px;
  background: none;
  background-color: transparent;
  border: none;
  box-shadow: none;
  z-index: 920;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.artwork-strip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
  max-height: 100%;
  overflow-y: auto;
  overflow-x: visible;
  padding: 0.5rem 0.25rem;
  scrollbar-width: none;
  pointer-events: auto;
}

.artwork-strip::-webkit-scrollbar {
  display: none;
}

.art-flip-card {
  display: block;
  width: 156px;
  height: 124px;
  perspective: 1000px;
  flex-shrink: 0;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  outline: none;
  position: relative;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), width 0.35s ease, height 0.35s ease;
}

/* Expand slightly leftward on hover so the NGA screenshot-style metadata is roomy & clear */
.art-flip-card:hover,
.art-flip-card:focus-visible,
.art-flip-card.is-flipped {
  transform: translateX(-18px) scale(1.12);
  z-index: 25;
}

.art-flip-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

.art-flip-card:hover .art-flip-inner,
.art-flip-card:focus-visible .art-flip-inner,
.art-flip-card.is-flipped .art-flip-inner {
  transform: rotateY(180deg);
}

.art-face {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
}

/* Front of Artwork Card: Clean NGA Artwork Image */
.art-face-front {
  background-color: #F4F3EF;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
}

.art-face-front img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Back of Artwork Card: Formatted like the NGA Selected Works Screenshots */
.art-face-back {
  background-color: #FFFFFF;
  color: #111111;
  transform: rotateY(180deg);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 0.55rem 0.65rem;
  text-align: left;
  border: 1px solid rgba(154, 133, 104, 0.3);
}

.nga-title {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.72rem;
  font-weight: 700;
  color: #000000;
  line-height: 1.15;
  margin-bottom: 0.28rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.nga-date {
  font-family: var(--font-sans);
  font-size: 0.56rem;
  color: #222222;
  line-height: 1.25;
}

.nga-artist {
  font-family: var(--font-sans);
  font-size: 0.58rem;
  color: #222222;
  line-height: 1.25;
  margin-bottom: 0.3rem;
}

.nga-assoc-heading {
  font-family: var(--font-sans);
  font-size: 0.52rem;
  font-weight: 700;
  color: #000000;
  margin-bottom: 0.14rem;
}

.nga-assoc-name {
  font-family: var(--font-sans);
  font-size: 0.56rem;
  color: #111111;
  text-decoration: underline;
  text-decoration-color: var(--primary);
  text-underline-offset: 2px;
  line-height: 1.2;
}

.nga-assoc-bio {
  font-family: var(--font-sans);
  font-size: 0.5rem;
  color: #333333;
  line-height: 1.2;
}

/* ==========================================================================
   RESPONSIVE DESIGN (MOBILE & TABLET)
   ========================================================================== */

@media (max-width: 1180px) {
  .site-main {
    padding-right: 185px;
  }
}

@media (max-width: 900px) {
  .site-main {
    padding-right: 1.25rem;
  }

  .medallion-trio,
  .chapters-grid {
    grid-template-columns: 1fr;
    max-width: 460px;
  }

  .story-node,
  .story-node:nth-child(even) {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding: 1.35rem;
  }

  .story-node:nth-child(even) .story-node-media {
    order: 1;
  }

  .story-node:nth-child(even) .story-node-copy {
    order: 2;
  }

  .artwork-side-gallery {
    right: 0.45rem;
    width: 118px;
  }

  .art-flip-card {
    width: 108px;
    height: 92px;
  }

  .art-flip-card:hover,
  .art-flip-card:focus-visible,
  .art-flip-card.is-flipped {
    width: 154px;
    height: 124px;
    transform: translateX(-26px) scale(1.04);
  }
}

@media (max-width: 680px) {
  :root {
    --header-compact-height: 76px;
  }

  .splash-frame {
    inset: 10px;
  }

  .brand-word {
    font-size: clamp(1.85rem, 8.2vw, 2.8rem);
    letter-spacing: 0.08em;
  }

  html.js-enabled body.is-header-transformed .site-header,
  .site-header.site-header--compact {
    padding: 0 1rem;
    height: auto;
    min-height: var(--header-compact-height);
  }

  html.js-enabled body.is-header-transformed .header-inner,
  .site-header--compact .header-inner {
    flex-wrap: wrap;
    padding: 0.55rem 0;
    gap: 0.35rem;
  }

  html.js-enabled body.is-header-transformed .mobile-nav-toggle,
  .site-header--compact .mobile-nav-toggle {
    display: inline-block;
  }

  html.js-enabled body.is-header-transformed .site-nav,
  .site-header--compact .site-nav {
    width: 100%;
    display: none;
    padding-top: 0.4rem;
    border-top: 1px solid rgba(197, 160, 89, 0.3);
  }

  html.js-enabled body.is-header-transformed .site-nav.is-open,
  .site-header--compact .site-nav.is-open {
    display: block;
  }

  .nav-list {
    gap: 0.35rem 1rem;
  }

  .nav-link {
    font-size: 0.72rem;
    letter-spacing: 0.13em;
  }
}