/* Metric-matched fallbacks: local system fonts re-sized/re-positioned to match
     Cormorant Garamond's and Inter's box metrics (computed via fontTools from the
     actual webfont + Gelasio/Arimo, Google's metric-compatible Georgia/Arial twins).
     This keeps the swap from the fallback to the loaded webfont from reflowing the
     page — only glyph shapes change, not text width or line height. */
  @font-face {
      font-family: 'Cormorant Garamond Fallback';
      src: local('Georgia'), local('Times New Roman');
      ascent-override: 95.25%;
      descent-override: 29.58%;
      line-gap-override: 0%;
      size-adjust: 97.01%;
  }

  @font-face {
      font-family: 'Inter Fallback';
      src: local('Arial'), local('Helvetica Neue'), local('Helvetica');
      ascent-override: 83.55%;
      descent-override: 20.8%;
      line-gap-override: 0%;
      size-adjust: 115.96%;
  }

  /* CSS Variables for consistent theming */
  :root {
      --bg-primary: rgba(26, 31, 46, 0.93);
      --text-primary: #F4F4F4;
      --text-secondary: #D1D1D1;
      --bg-section: rgba(42, 50, 75, 0.93);
      --font-heading: 'Cormorant Garamond', 'Cormorant Garamond Fallback', Georgia, serif;
      --font-body: 'Inter', 'Inter Fallback', -apple-system, sans-serif;
      --accent-1: #FF6B6B;
      --accent-2: #4ECDC4;
      --accent-3: #FFD166;
      --accent-4: #A05EB5;
      --accent-gold: #C5A059;
  }

  /* Accessibility: focus visibility */
  a:focus-visible,
  button:focus-visible,
  .gallery-item:focus-visible,
  .social-link:focus-visible,
  .language-selector a:focus-visible,
  .close-lightbox:focus-visible,
  input:focus-visible,
  textarea:focus-visible {
      outline: 2px solid var(--accent-gold);
      outline-offset: 2px;
  }

  /* Accessibility: respect reduced-motion preference.
     Targeted, not a blanket kill — infinite/decorative motion stops and
     scroll-reveals resolve to their end state instantly; interactive hover/focus
     feedback (color, background, focus ring) is left intact so it still communicates state. */
  @media (prefers-reduced-motion: reduce) {
      html {
          scroll-behavior: auto;
      }

      /* The hero reveal (.hero-name, .tagline, .tagline::after, .scroll-arrow) needs no
         override here: those rest in their visible end state and opt into motion via
         `prefers-reduced-motion: no-preference`, so this query never sees them animating. */

      /* Scroll/word reveals stay listed — they are hidden by JS-applied classes, not by
         a media query, so they still need forcing to their end state. */
      .fade-up,
      .fade-in,
      .word {
          animation: none !important;
          transition: none !important;
          opacity: 1 !important;
          transform: none !important;
      }

      /* Hover/focus lifts (translateY/scale) read as motion; keep color/shadow feedback, drop the movement */
      .gallery-item:hover,
      .gallery-item:hover img,
      .social-link:hover,
      .artist-image:hover,
      .submit-btn:hover {
          transform: none !important;
      }
  }

  /* Reset and Base Styles */
  /* Language Selector */
  .language-selector {
      position: fixed;
      top: 20px;
      right: 20px;
      z-index: 1000;
      display: flex;
      gap: 5px;
      background: rgba(26, 31, 46, 0.85);
      padding: 6px 8px;
      border-radius: 25px;
      backdrop-filter: blur(10px);
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
      border: 1px solid rgba(255, 255, 255, 0.1);
      transition: all 0.3s ease;
  }

  .language-btn {
      background: transparent;
      border: 1px solid rgba(255, 255, 255, 0.15);
      color: var(--text-secondary);
      padding: 6px 14px;
      min-height: 44px;
      border-radius: 20px;
      font-size: 14px;
      font-weight: 400;
      transition: all 0.3s ease;
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 50px;
      cursor: pointer;
      font-family: var(--font-body);
      box-sizing: border-box;
  }

  .language-btn:hover {
      background: rgba(255, 255, 255, 0.1);
      color: var(--text-primary);
      transform: translateY(-1px);
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  }

  .language-btn.active {
      background: rgba(255, 255, 255, 0.1);
      color: var(--text-primary);
      transform: translateY(-1px);
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  }

  /* Responsive adjustments */
  @media (max-width: 768px) {
      .language-selector {
          top: 15px;
          right: 15px;
          padding: 5px 6px;
      }

      .language-btn {
          padding: 5px 12px;
          font-size: 13px;
          min-width: 45px;
      }
  }

  /* Base Styles */
  body {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
  }

  html {
      scroll-behavior: smooth;
  }

  body {
      font-family: var(--font-body);
      font-weight: 300;
      line-height: 1.8;
      color: var(--text-primary);
      background-color: var(--bg-primary);
      overflow-x: hidden;
      text-rendering: optimizeLegibility;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-size-adjust: 100%;
      -webkit-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%;
      word-spacing: normal;
      letter-spacing: 0.01em;
  }

  /* Typography */
  h1,
  h2 {
      font-family: var(--font-heading);
      font-weight: 400;
      margin-bottom: 1.5rem;
  }

  h1 {
      font-size: clamp(2.5rem, 5vw, 4rem);
      text-align: center;
      margin-bottom: 1rem;
      overflow: hidden;
  }

  /* Hero name: curtain-rise reveal on load, independent of scroll-triggered fades
     since the hero is always in view at first paint.

     Fail-visible: the readable end state is the DEFAULT here, and the reveal is
     layered on top only where motion is welcome. Previously the resting state was
     `translateY(115%)` inside `h1 { overflow: hidden }`, so the name was invisible
     until an animation moved it — any engine that dropped that animation left the
     hero permanently blank. Same reasoning for .tagline and .scroll-arrow below. */
  .hero-name {
      display: inline-block;
      background: linear-gradient(90deg, var(--accent-1), var(--accent-2), var(--accent-3), var(--accent-4));
      background-size: 300% 300%;
      background-clip: text;
      -webkit-background-clip: text;
      /* Paints the glyphs on their own. Only cleared below once the gradient-on-text
         mask is known to be supported, so the name is never colourless by default. */
      color: var(--text-primary);
  }

  @supports (background-clip: text) or (-webkit-background-clip: text) {
      .hero-name {
          -webkit-text-fill-color: transparent;
      }
  }

  @media (prefers-reduced-motion: no-preference) {
      .hero-name {
          animation:
              gradient 8s ease infinite,
              heroNameIn 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both;
      }
  }

  @keyframes gradient {
      0% {
          background-position: 0% 50%;
      }

      50% {
          background-position: 100% 50%;
      }

      100% {
          background-position: 0% 50%;
      }
  }

  /* The hidden start lives in the keyframes, not on .hero-name, and the animation runs
     with fill `both` so the delay still holds it off-screen. Declaring it on the element
     instead would mean an engine that drops the animation never undoes it — the name
     would stay parked below h1's `overflow: hidden` forever. */
  @keyframes heroNameIn {
      from {
          transform: translateY(115%);
      }

      to {
          transform: translateY(0);
      }
  }

  h2 {
      font-size: clamp(2rem, 4vw, 3rem);
      color: var(--accent-gold);
      text-align: center;
      margin-bottom: 3rem;
  }

  p {
      font-size: 1.1rem;
      line-height: 1.8;
      margin-bottom: 1.5rem;
  }

  /* Container */
  .container {
      margin: 0 auto;
      padding: 0 2rem;
  }

  /* Section Spacing */
  section {
      padding: 80px 0;
  }

  /* Fixed Animation Background: sits behind literally everything (more negative
     than any other z-index in the page) so it stays put and visible under the
     semi-transparent section backgrounds while the page scrolls, the same role
     the old particle canvas filled. */
  #animation-bg {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: -2;
      pointer-events: none;
      overflow: hidden;
  }

  .site-video {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
  }

  /* Portrait phones get their own <source>: a 540×1080 centre crop of the landscape
     master. It is the same picture the browser ends up showing anyway — covering a
     ~0.46-ratio viewport scales the footage to the viewport height and keeps roughly
     that slice regardless of which file is fed in, since under `cover` the visible
     region follows the box ratio, not the source. Cropping it up front just avoids
     shipping the 7.4MB master to phones to display a fraction of it. */

  /* Hero Section */
  #hero {
      min-height: 100vh; /* fallback for browsers without small-viewport units */
      min-height: 100svh; /* actual visible viewport on mobile, excludes the area the address bar can reclaim */
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      position: relative;
      text-align: center;
      margin: 0;
      /* Override the generic `section { padding: 80px 0 }` — content here is
         already centered by flexbox, so that vertical padding just pushed the section
         taller than the viewport instead of spacing anything. The inline padding stays:
         without it the name and tagline sit flush against both screen edges on phones. */
      padding: 0 1.5rem;
      /* Transparent so the fixed background video shows through at full strength here;
         other sections tint it via the translucent --bg-primary/--bg-section colors. */
      background: transparent;
  }

  .hero-content {
      margin-top: -150px;
      position: relative;
      z-index: 2;
  }

  /* Short viewports (landscape phones, split screen): -150px on a ~390px-tall hero
     lifts the name most of the way off the top, so drop the offset and just centre. */
  @media (max-height: 520px) {
      .hero-content {
          margin-top: 0;
      }
  }

  .tagline {
      font-size: 1.4rem;
      color: var(--text-secondary);
      font-weight: 300;
      margin-top: 1.5rem;
      text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
      position: relative;
      display: inline-block;
  }

  @media (prefers-reduced-motion: no-preference) {
      .tagline {
          animation: taglineIn 0.9s cubic-bezier(0.16, 1, 0.3, 1) 1.05s both;
      }
  }

  @keyframes taglineIn {
      from {
          opacity: 0;
          transform: translateY(16px);
      }

      to {
          opacity: 1;
          transform: translateY(0);
      }
  }

  .tagline::after {
      content: '';
      position: absolute;
      width: 100%;
      height: 2px;
      bottom: -5px;
      left: 0;
      background: linear-gradient(90deg, var(--accent-1), var(--accent-4));
  }

  @media (prefers-reduced-motion: no-preference) {
      .tagline::after {
          animation: expand 2s ease-out 1.7s both;
      }
  }

  @keyframes expand {
      from {
          width: 0;
      }

      to {
          width: 100%;
      }
  }

  .scroll-arrow {
      position: absolute;
      bottom: 30px;
      left: 50%;
      transform: translateX(-50%);
      font-size: 2rem;
      color: var(--accent-gold);
      cursor: pointer;
  }

  @media (prefers-reduced-motion: no-preference) {
      .scroll-arrow {
          animation: bounce 2s infinite 2.4s, arrowIn 0.8s ease 2.4s both;
      }
  }

  @keyframes arrowIn {
      from {
          opacity: 0;
      }

      to {
          opacity: 1;
      }
  }

  @keyframes bounce {

      0%,
      20%,
      50%,
      80%,
      100% {
          transform: translateX(-50%) translateY(0);
      }

      40% {
          transform: translateX(-50%) translateY(-10px);
      }

      60% {
          transform: translateX(-50%) translateY(-5px);
      }
  }

  /* Manifesto Section */
  #manifesto {
      background-color: var(--bg-section);
      text-align: center;
      position: relative;
      z-index: 2;
  }

  .manifesto-text {
      max-width: 800px;
      margin: 0 auto;
      font-size: 1.3rem;
      line-height: 1.9;
      color: var(--text-secondary);
  }

  /* Artist Portrait Section */
  .artist-container {
      display: flex;
      align-items: center;
      gap: 60px;
      max-width: 1400px;
      margin: 0 auto;
      padding: 0 40px;
  }

  .artist-content {
      flex: 1;
      padding-right: 40px;
  }

  .artist-content h2 {
      color: white;
      margin-bottom: 30px;
      /* font-size: 2.5rem; */
      /* font-weight: 600; */
  }

  .artist-content p {
      font-size: 1.1rem;
      line-height: 1.8;
      color: var(--text-secondary);
      margin-bottom: 0;
  }

  .artist-image-container {
      flex: 1;
      position: relative;
      padding-left: 0;
  }

  .artist-image:hover {
      transform: translateY(-5px);
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
  }

  /* Responsive styles */
  @media (max-width: 992px) {
      .artist-container {
          flex-direction: column-reverse;
          padding: 0 20px;
      }

      .artist-content {
          padding-right: 0;
          margin-top: 40px;
      }

      .artist-image {
          max-width: 100%;
      }

      .artist-content {
          padding-bottom: 8rem;
      }
  }

  /* Gallery Section */
  #gallery {
      background-color: var(--bg-primary);
      position: relative;
      z-index: 2;
  }

  /* Gallery Feature Section (full-bleed break between the two watercolor grids) */
  #gallery-feature {
      background-color: var(--bg-section);
      padding: 6rem 0;
      position: relative;
      z-index: 2;
  }

  #gallery-feature .container {
      max-width: 1000px;
  }

  #digital-arts {
      background-color: var(--bg-section);
      position: relative;
      z-index: 2;
  }

  /* Gallery Grid Layout */
  .gallery-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
      gap: 20px;
      margin-top: 2rem;
      width: 100%;
  }

  .gallery-grid-2 {
      grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  }

  @media (max-width: 768px) {

      .gallery-grid,
      .gallery-grid-2 {
          grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
      }
  }

  @media (max-width: 480px) {

      .gallery-grid,
      .gallery-grid-2 {
          grid-template-columns: 1fr;
      }
  }

  .gallery-item {
      position: relative;
      overflow: hidden;
      border-radius: 8px;
      aspect-ratio: 1/1;
      /* Makes all items square */
      cursor: pointer;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      background: var(--bg-section);
  }

  .gallery-item:hover {
      transform: translateY(-5px);
      box-shadow: 0 20px 40px rgba(180, 138, 100, 0.3);
  }

  .gallery-item img {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
      transition: transform 0.5s ease, filter 0.3s ease;
      object-position: center;
  }

  .gallery-item:hover img {
      filter: brightness(1.1);
      transform: scale(1.05);
  }

  .gallery-overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.5);
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      transition: opacity 0.3s ease;
      padding: 20px;
      text-align: center;
  }

  .gallery-item:hover .gallery-overlay {
      opacity: 1;
  }

  .gallery-item--feature {
      aspect-ratio: 16 / 9;
  }

  /* Digital Arts Bento Grid */
  .gallery-grid-bento {
      grid-template-columns: repeat(4, 1fr);
      grid-auto-rows: minmax(160px, auto);
  }

  .gallery-grid-bento .gallery-item {
      aspect-ratio: 1/1;
      grid-column: span 1;
  }

  .gallery-grid-bento .gallery-item--large {
      grid-column: span 2;
      grid-row: span 2;
      aspect-ratio: 1/1;
  }

  @media (max-width: 768px) {
      .gallery-grid-bento {
          grid-template-columns: repeat(2, 1fr);
      }

      .gallery-grid-bento .gallery-item {
          grid-column: span 1;
          aspect-ratio: 1/1;
      }

      .gallery-grid-bento .gallery-item--large {
          grid-column: span 2;
          grid-row: span 1;
          aspect-ratio: 16/9;
      }
  }

  @media (max-width: 480px) {
      .gallery-grid-bento {
          grid-template-columns: 1fr;
      }

      .gallery-grid-bento .gallery-item,
      .gallery-grid-bento .gallery-item--large {
          grid-column: span 1;
          grid-row: span 1;
          aspect-ratio: 1/1;
      }
  }

  .overlay-text {
      color: white;
      font-weight: 500;
  }

  /* Artist Portrait Section */
  #artist-portrait {
      background: #010101;
      padding: 0;
      text-align: center;
      overflow: hidden;
      position: relative;
      z-index: -1;
  }

  .artist-image {
      max-width: 100%;
      width: 600px;
      height: auto;
      margin: 0 auto;
      display: block;
      border-radius: 8px;
      box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  /* About and Biography Sections */
  #about,
  #biography {
      background-color: var(--bg-section);
      text-align: center;
      padding: 4rem 0;
  }

  #biography {
      background-color: var(--bg-primary);
      position: relative;
      z-index: 2;
  }

  #biography .content-text {
      max-width: 800px;
      margin: 0 auto;
      line-height: 1.8;
      letter-spacing: 0.5px;
      word-spacing: 1px;
      font-size: 1.1rem;
      text-align: left;
      padding: 0 2rem;
      white-space: normal;
      word-break: normal;
      overflow-wrap: break-word;
  }

  #biography p {
      margin-bottom: 1.5rem;
      text-align: left;
      hyphens: none;
      word-spacing: normal;
      white-space: normal;
  }

  .content-text {
      max-width: 800px;
      margin: 0 auto;
      text-align: left;
  }

  /* Exhibitions Section */
  #exhibitions {
      background-color: var(--bg-primary);
      padding: 6rem 0;
      position: relative;
      z-index: 2;
  }

  .exhibitions-timeline {
      max-width: 800px;
      margin: 3rem auto 0;
  }

  .timeline-year-group {
      display: grid;
      grid-template-columns: 100px 1fr;
      gap: 1.5rem;
      padding: 1.5rem 0;
      border-top: 1px solid rgba(255, 255, 255, 0.1);
      margin: 0;
  }

  .timeline-year-group:first-child {
      border-top: none;
  }

  .timeline-year-group dt {
      grid-column: 1;
      grid-row: 1;
      align-self: start;
      font-family: var(--font-heading);
      font-size: 1.75rem;
      font-weight: 400;
      color: var(--accent-gold);
  }

  .timeline-year-group dd {
      grid-column: 2;
      margin: 0 0 0.75rem;
      color: var(--text-secondary);
      line-height: 1.7;
      text-align: left;
  }

  .timeline-year-group dd:last-child {
      margin-bottom: 0;
  }

  @media (max-width: 600px) {
      .timeline-year-group {
          grid-template-columns: 1fr;
          gap: 0.5rem;
      }

      .timeline-year-group dt,
      .timeline-year-group dd {
          grid-column: 1;
      }

      .timeline-year-group dt {
          grid-row: auto;
          font-size: 1.5rem;
      }
  }

  /* Contact Section */
  #contact {
      background-color: rgba(26, 31, 46, 0.465); /* --bg-primary at 50% opacity */
      text-align: center;
  }

  .contact-form {
      max-width: 600px;
      margin: 0 auto;
      text-align: left;
  }

  .form-group {
      margin-bottom: 1.5rem;
  }

  .form-group label {
      display: block;
      margin-bottom: 0.5rem;
      color: var(--text-secondary);
      font-weight: 400;
  }

  .form-group input,
  .form-group textarea {
      width: 100%;
      padding: 12px 16px;
      border: 2px solid var(--bg-section);
      background-color: rgba(255, 255, 255, 0.05);
      color: var(--text-primary);
      font-family: var(--font-body);
      font-size: 1rem;
      transition: all 0.3s ease;
      border-radius: 4px;
  }

  .form-group input:focus,
  .form-group textarea:focus {
      outline: none;
      border-color: var(--accent-gold);
      background-color: rgba(255, 255, 255, 0.1);
  }

  /* About Section */
  #about {
      padding: 8rem 0;
      outline: none;
      border-color: var(--accent-gold);
      position: relative;
      z-index: 2;
  }

  .form-group textarea {
      resize: vertical;
      height: 120px;
  }

  .submit-btn {
      background-color: var(--accent-gold);
      color: var(--bg-primary);
      border: none;
      padding: 14px 30px;
      border-radius: 6px;
      font-family: var(--font-body);
      font-size: 1rem;
      font-weight: 500;
      cursor: pointer;
      transition: background-color 0.3s ease, transform 0.2s ease;
      margin-top: 1rem;
      display: block;
      margin-left: auto;
      margin-right: auto;
  }

  .submit-btn:hover {
      background-color: #A07B5E;
      transform: translateY(-2px);
  }

  /* Social Links */
  .social-links {
      display: flex;
      flex-direction: column;
      gap: 15px;
      margin-top: 2rem;
      max-width: 300px;
      margin-left: auto;
      margin-right: auto;
  }

  .social-link {
      display: flex;
      align-items: center;
      gap: 12px;
      color: var(--text-primary);
      text-decoration: none;
      padding: 12px 20px;
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.1);
      transition: all 0.3s ease;
      backdrop-filter: blur(5px);
  }

  .social-link:hover {
      background: rgba(255, 107, 107, 0.1);
      transform: translateY(-2px);
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
      border-color: rgba(255, 107, 107, 0.3);
  }

  .social-icon {
      font-size: 1.5rem;
      transition: transform 0.3s ease;
  }

  .social-link:hover .social-icon {
      transform: scale(1.2);
  }

  .social-username {
      font-size: 1rem;
      font-weight: 400;
      color: var(--text-secondary);
      transition: color 0.3s ease;
  }

  .social-link:hover .social-username {
      color: var(--text-primary);
  }

  /* Lightbox Modal */
  .lightbox {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.9);
      z-index: 1000;
      padding: 20px;
  }

  .lightbox-content {
      position: relative;
      max-width: 90%;
      max-height: 90%;
      margin: auto;
      display: block;
      margin-top: 5%;
  }

  .lightbox img {
      width: auto;
      max-width: 100%;
      height: auto;
      max-height: 70vh;
      object-fit: contain;
      display: block;
      margin: 0 auto;
      border-radius: 8px;
  }

  .lightbox-info {
      background-color: var(--bg-section);
      color: var(--text-primary);
      padding: 20px;
      margin-top: 20px;
      border-radius: 8px;
  }

  .lightbox-info h3 {
      font-family: var(--font-heading);
      font-size: 1.5rem;
      color: var(--accent-gold);
      margin-bottom: 10px;
  }

  .close-lightbox {
      position: absolute;
      top: 20px;
      right: 35px;
      background: none;
      border: none;
      padding: 0;
      color: var(--text-primary);
      font-size: 40px;
      font-family: var(--font-body);
      font-weight: bold;
      line-height: 1;
      cursor: pointer;
      transition: color 0.3s ease;
  }

  .close-lightbox:hover {
      color: var(--accent-gold);
  }

  /* Animation Classes */
  .fade-up {
      opacity: 0;
      transform: translateY(50px);
      transition: opacity 0.8s ease, transform 0.8s ease;
  }

  .fade-up.visible {
      opacity: 1;
      transform: translateY(0);
  }

  .fade-in {
      opacity: 0;
      transition: opacity 0.8s ease;
  }

  .fade-in.visible {
      opacity: 1;
  }

  /* Word animation for manifesto */
  .word {
      display: inline-block;
      opacity: 0;
      transform: translateY(20px);
      animation: wordFadeIn 0.8s ease forwards;
  }

  @keyframes wordFadeIn {
      to {
          opacity: 1;
          transform: translateY(0);
      }
  }

  /* Responsive Design */
  @media (max-width: 768px) {
      .container {
          padding: 0 1rem;
      }

      section {
          padding: 60px 0;
      }

      h1 {
          font-size: 2.5rem;
      }

      h2 {
          font-size: 2rem;
      }

      .tagline {
          font-size: 1rem;
      }

      .manifesto-text {
          font-size: 1.1rem;
      }

      /* Artist Portrait Mobile Styles */
      #artist-portrait {
          padding: 40px 0;
      }

      .artist-image {
          width: 100%;
          max-width: 100%;
          padding: 0 15px;
          box-sizing: border-box;
      }
  }

  /* Footer Styles */
  .site-footer {
      position: relative;
      width: 100%;
      background-color: rgba(26, 31, 46, 0.6); /* --bg-primary at 60% opacity */
      color: var(--text-secondary);
      text-align: center;
      padding: 20px 0;
      font-size: 0.8rem;
      border-top: 1px solid rgba(255, 255, 255, 0.1);
      margin-top: 40px;
      z-index: 2;
      box-sizing: border-box;
  }

  .footer-content {
      width: 100%;
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 20px;
      box-sizing: border-box;
  }

  .site-footer p {
      margin: 0;
      padding: 0;
      text-align: center;
      line-height: 1.5;
      width: 100%;
  }

  .site-footer a {
      color: var(--accent-gold);
      text-decoration: none;
      border-bottom: 1px solid rgba(197, 160, 89, 0.4);
      transition: border-color 0.3s ease;
  }

  .site-footer a:hover {
      border-bottom-color: var(--accent-gold);
  }

  /* Toast Notification */
  .toast-notification {
      position: fixed;
      bottom: 30px;
      right: 30px;
      background-color: var(--bg-section);
      color: var(--text-primary);
      padding: 15px 25px;
      border-radius: 8px;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
      display: flex;
      align-items: center;
      gap: 12px;
      z-index: 2000;
      transform: translateY(100px);
      opacity: 0;
      transition: all 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
      border-left: 4px solid var(--accent-gold);
  }

  .toast-notification.show {
      transform: translateY(0);
      opacity: 1;
  }

  .toast-notification.success {
      border-left-color: #4ECDC4;
  }

  .toast-notification.error {
      border-left-color: #FF6B6B;
  }

  .toast-icon {
      font-size: 1.2rem;
  }

  @media (max-width: 768px) {
      .toast-notification {
          bottom: 20px;
          right: 20px;
          left: 20px;
          justify-content: center;
      }
  }