/* ============================================================
       DESIGN TOKENS — single source of truth for the cream editorial system.
       Change here and the whole site updates.
       ============================================================ */
    :root {
      --paper:       #fcf8f1;
      --paper-deep:  #f3ede1;
      --ink:         #1a1612;
      --ink-deep:    #0e0b09;
      --faded:       #6b5d4d;
      --line:        #c9bfae;
      --vandyck:     #72281a;
      --amber:       #c9ad5f;
      --moss-dark:   #173116;
      --moss-icky:   #647217;
      --moss-label:  #34431d;

      --display: 'Switzer', -apple-system, BlinkMacSystemFont, sans-serif;
      --body:    'Fraunces', Georgia, serif;

      --space-xs:  8px;
      --space-sm:  16px;
      --space-md:  24px;
      --space-lg:  40px;
      --space-xl:  64px;
      --space-2xl: 96px;
      --space-3xl: 140px;

      --max-w:   1800px;
      --read-w:  680px;
    }

    /* ============================================================
       RESET + BASE
       ============================================================ */
    *,
    *::before,
    *::after { box-sizing: border-box; margin: 0; padding: 0; }

    html, body {
      background: var(--paper);
      color: var(--ink);
    }
    body {
      font-family: var(--body);
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
      line-height: 1.5;
    }
    img { max-width: 100%; height: auto; display: block; }
    a { color: inherit; }

    /* Shared utility — small uppercase section label */
    .section-label {
      font-family: var(--display);
      font-size: 12px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.24em;
      color: var(--moss-label);
      display: inline-flex;
      align-items: center;
      gap: 14px;
    }
    .section-label::before {
      content: '';
      width: 36px;
      height: 1px;
      background: linear-gradient(90deg, var(--moss-dark), var(--moss-icky));
    }
    .section-heading {
      margin: 0;
      font-family: var(--display);
      font-size: clamp(19px, 1.8vw, 31px);
      font-weight: 800;
      line-height: 1;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--moss-label);
      display: inline-flex;
      align-items: center;
      gap: 18px;
    }
    .section-heading::before {
      content: '';
      width: clamp(42px, 4vw, 76px);
      height: 2px;
      background: linear-gradient(90deg, var(--moss-dark), var(--moss-icky));
    }


    /* ============================================================
       NAV
       Sticky cream nav with blur. Keeps the brand mark + future links.
       ============================================================ */
    .site-nav {
      position: sticky;
      top: 0;
      z-index: 100;
      background: rgba(244, 239, 230, 0.85);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border-bottom: 1px solid rgba(26, 22, 18, 0.08);
    }
    .site-nav-inner {
      max-width: var(--max-w);
      margin: 0 auto;
      padding: 18px 24px;
      display: flex;
      align-items: center;
      gap: 24px;
    }
    @media (min-width: 768px) {
      .site-nav-inner { padding: 20px 32px; gap: 36px; }
    }
    .nav-brand {
      font-family: var(--display);
      font-style: normal;
      font-weight: 700;
      font-size: 16px;
      color: var(--ink);
      text-decoration: none;
    }
    .nav-links {
      display: none;
      margin-left: auto;
      gap: 22px;
      font-family: var(--display);
      font-size: 13px;
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: 0.18em;
    }
    @media (min-width: 768px) {
      .nav-links { display: flex; }
    }
    @media (min-width: 960px) {
      .nav-links { gap: 28px; }
    }
    .nav-links a {
      color: var(--faded);
      text-decoration: none;
      transition: color 0.2s ease;
    }
    .nav-links a:hover { color: var(--ink); }


    /* ============================================================
       HERO
       Full-bleed painting section (gw_1) with chunky name overlay.
       No subheader, no button — just the work and the name.
       ============================================================ */
    .hero {
      position: relative;
      min-height: 92vh;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      isolation: isolate;
    }
    .hero-bg {
      position: absolute;
      inset: 0;
      background-image: url('paintings/hero/hero-gw1.jpg');
      background-size: cover;
      background-position: center 35%;
      background-repeat: no-repeat;
      z-index: 0;
    }
    /* Vignette: creates a darker focal zone in the center for the signature to play
       against, while leaving the painting visible at the edges. Painterly, not card-like. */
    .hero::after {
      content: '';
      position: absolute;
      inset: 0;
      z-index: 1;
      pointer-events: none;
      background: radial-gradient(
        ellipse 75% 55% at center,
        rgba(10, 8, 15, 0.6) 0%,
        rgba(10, 8, 15, 0.45) 35%,
        rgba(10, 8, 15, 0.15) 70%,
        transparent 100%
      );
    }
    .hero-content {
      position: absolute;
      inset: 0;
      z-index: 2;
      padding: 32px 40px;
      display: flex;
      flex-direction: column;    /* stack signature + kicker */
      align-items: center;       /* center horizontally */
      justify-content: center;   /* center vertically */
    }
    .hero-name {
      margin: 0;
      line-height: 0;
      user-select: none;
      /* Optical-center correction: signature has heavier mass on the "Sevick" side,
         so geometric centering reads as left-leaning. Nudge ~3vw right. */
      transform: translateX(3%);
    }
    .hero-signature {
      display: block;
      width: 55vw;
      max-width: 900px;
      aspect-ratio: 4585 / 1927;
      /* Maximum-saturation cool gradient — pure cyan as the peak.
         Pushed harder now that the vignette gives the signature contrast room. */
      background: linear-gradient(115deg,
        #d4ff00 0%,    /* acid chartreuse */
        #88ff00 12%,   /* electric lime */
        #00ff44 25%,   /* electric green */
        #00ff88 38%,   /* spring green */
        #00ffcc 51%,   /* toxic aqua */
        #00ffff 64%,   /* PURE cyan — peak electric moment */
        #44ddff 77%,   /* bright electric cyan */
        #aaffe0 90%,   /* iced mint transition */
        #d4ff00 100%); /* loop back to chartreuse */
      background-size: 300% 300%;
      -webkit-mask: url('brand/signature.webp') center / contain no-repeat;
              mask: url('brand/signature.webp') center / contain no-repeat;
      /* Three-layer drop-shadow — far diffuse, medium, close glow.
         Mimics how real luminous objects radiate light. */
      filter:
        drop-shadow(0 0 60px rgba(0, 255, 200, 0.4))
        drop-shadow(0 0 28px rgba(80, 255, 240, 0.55))
        drop-shadow(0 0 10px rgba(200, 255, 250, 0.7));
      opacity: 0;
      transform: translateY(40px);
      animation:
        rise 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.3s forwards,
        holo-shift 9s ease-in-out 1.4s infinite;
    }
    /* Hero kicker — small role label under the signature, in the site's
       uppercase Switzer label idiom, tuned light for legibility over the
       painting. Orients a cold visitor: "you're looking at an artist." */
    .hero-kicker {
      margin-top: 18px;
      font-family: var(--display);
      font-size: 13px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.34em;
      text-indent: 0.34em;       /* compensate trailing letter-spacing → optical center */
      color: var(--paper);
      text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6), 0 0 14px rgba(0, 0, 0, 0.35);
      opacity: 0;
      transform: translateY(16px);
      animation: rise 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.9s forwards;
    }
    /* Desktop: the signature is ~2x larger here, so scale the kicker up to
       stay proportionate. Mobile keeps the base 13px. */
    @media (min-width: 768px) {
      .hero-kicker {
        margin-top: 22px;
        font-size: 18px;
        letter-spacing: 0.4em;
        text-indent: 0.4em;
      }
    }
    @keyframes holo-shift {
      0%, 100% { background-position: 0% 50%; }
      50%     { background-position: 100% 50%; }
    }
    @media (max-width: 767px) {
      .hero-bg {
        /* On tall, narrow screens 'cover' clips the sides. Shift right to the
           liveliest part of the canvas (green/gold foliage + orange bloom),
           which the desktop 'center' crop hides on mobile. */
        background-position: 85% 35%;
      }
      .hero-content {
        padding: 20px 24px;
      }
      .hero-name {
        transform: none;  /* skip optical correction on narrow viewports */
      }
      .hero-signature {
        /* Small screens: bump the size so the script strokes read thicker,
           tighten the light glow so it stops washing them out, and add a
           subtle dark halo so the signature separates from the busy foliage
           and survives the gradient's low-contrast green phases. */
        width: 90vw;
        filter:
          drop-shadow(0 0 16px rgba(0, 255, 200, 0.3))
          drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5))
          drop-shadow(0 0 4px rgba(0, 0, 0, 0.45));
      }
    }
    @keyframes rise {
      to { opacity: 1; transform: translateY(0); }
    }


    /* ============================================================
       WORK JUMP
       Direct path to the broader work for visitors who want the paintings first.
       ============================================================ */
    .work-jump {
      background: var(--paper);
      margin: 28px 0 72px;
      text-align: center;
    }
    .work-jump a {
      display: inline-block;
      font-family: var(--display);
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 0.12em;
      line-height: 1;
      color: var(--ink);
      text-decoration: none;
      text-transform: uppercase;
      border-bottom: 3px solid #00ffaa;
      padding-bottom: 8px;
      filter:
        drop-shadow(0 0 10px rgba(0, 255, 170, 0.4))
        drop-shadow(0 0 22px rgba(200, 255, 0, 0.22));
      transition: color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, filter 0.2s ease;
    }
    .work-jump a:hover,
    .work-jump a:focus-visible {
      color: #0f2a19;
      border-color: #00ffaa;
      filter:
        drop-shadow(0 0 12px rgba(0, 255, 170, 0.45))
        drop-shadow(0 0 28px rgba(200, 255, 0, 0.22));
      transform: translateY(-2px);
    }
    .work-jump a:focus-visible {
      outline: 2px solid var(--ink);
      outline-offset: 8px;
    }


    /* ============================================================
       ABOUT
       Calm cream section. Body type in Fraunces, italics preserved
       exactly per Mae's doc. Question stack uses <br> within a single
       paragraph so it reads as one thought, visually stacked.
       ============================================================ */
    .about {
      background: var(--paper);
      padding: var(--space-3xl) 24px var(--space-2xl);
    }
    @media (min-width: 768px) {
      .about { padding: 180px 32px 140px; }
    }
    .about-inner {
      max-width: var(--read-w);
      margin: 0 auto;
    }
    .about-label {
      margin-bottom: var(--space-lg);
    }
    .about-text p {
      font-family: var(--body);
      font-weight: 300;
      font-size: clamp(20px, 2.2vw, 26px);
      line-height: 1.55;
      letter-spacing: -0.005em;
      color: var(--ink);
      margin-bottom: 1.5em;
    }
    .about-text p:last-child { margin-bottom: 0; }
    .about-text em {
      font-style: italic;
      font-weight: 300;
    }
    .about-text .questions {
      /* Each question on its own line via <br>, but kept inside one <p>
         so the lead-in "I want to know why." reads continuous. */
    }


    /* ============================================================
       SPOTLIGHT
       Temporary feature moment embedded in the intro text.
       ============================================================ */
    .painting.spotlight-painting {
      width: min(86vw, 760px);
      margin: 58px 0 0;
      margin-left: 50%;
      transform: translateX(-50%);
    }
    .painting.spotlight-painting img {
      display: block;
      width: 100%;
    }
    @media (min-width: 960px) {
      .painting.spotlight-painting {
        width: min(42vw, 720px);
        margin-top: 84px;
      }
    }
    .spotlight-caption {
      margin-top: 20px;
      font-family: var(--body);
      font-size: 15px;
      line-height: 1.45;
      color: var(--faded);
      text-align: center;
    }
    .spotlight-caption span {
      display: block;
    }
    .spotlight-title {
      color: var(--ink);
      font-size: 18px;
    }
    .spotlight-title em {
      font-style: italic;
      font-weight: 300;
    }
    .spotlight-meta {
      font-family: var(--display);
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.14em;
      line-height: 1.65;
      text-transform: uppercase;
    }


    /* ============================================================
       GALLERY
       9 paintings in a simple 3-column editorial grid. Varied
       portrait/landscape ratios handled by intrinsic sizing.
       Lazy-loaded below the fold.
       ============================================================ */
    .gallery {
      background: var(--paper);
      padding: var(--space-2xl) 12px var(--space-3xl);
      border-top: 1px solid rgba(26, 22, 18, 0.08);
    }
    @media (min-width: 640px) {
      .gallery { padding: var(--space-2xl) 20px var(--space-3xl); }
    }
    @media (min-width: 1024px) {
      .gallery { padding: 120px 24px 180px; }
    }
    .gallery-inner {
      max-width: var(--max-w);
      margin: 0 auto;
    }
    .gallery-intro {
      max-width: var(--read-w);
      margin-bottom: var(--space-2xl);
    }
    .gallery-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 16px;
    }
    @media (min-width: 640px) {
      .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 18px;
      }
    }
    @media (min-width: 1024px) {
      .gallery-grid {
        grid-template-columns: repeat(12, 1fr);
        column-gap: 24px;
        row-gap: 0;
      }
      /* Bespoke editorial composition — each painting placed intentionally.
         HTML order matches visual top-to-bottom reading flow. */
      .gallery-grid .painting:nth-child(1) { grid-column: 1 / span 5;  grid-row: 1; }                     /* gw_2 — upper left, matches topography_1 footprint */
      .gallery-grid .painting:nth-child(2) { grid-column: 8 / span 4;  grid-row: 1; margin-top: 220px; }  /* gw_4 — upper right, staggered noticeably below gw_2 */
      .gallery-grid .painting:nth-child(3) { grid-column: 5 / span 4;  grid-row: 2; margin-top: 80px; }   /* gw_6 — centered, below */
      .gallery-grid .painting:nth-child(4) { grid-column: 1 / span 5;  grid-row: 3; margin-top: 140px; }  /* topography_1 — large left feature */
      .gallery-grid .painting:nth-child(5) { grid-column: 7 / span 6;  grid-row: 3; margin-top: 240px; }  /* topography_2 — large right, lower (diagonal pair) */
      .gallery-grid .painting:nth-child(6) { grid-column: 8 / span 4;  grid-row: 4; margin-top: 80px; }   /* es_2 — right of center */
      .gallery-grid .painting:nth-child(7) { grid-column: 1 / span 4;  grid-row: 5; margin-top: 120px; }  /* es_4 — left, lower */
      .gallery-grid .painting:nth-child(8) { grid-column: 7 / span 5;  grid-row: 5; margin-top: 200px; }  /* es_3 — right, staggered with es_4 */
    }
    .painting {
      display: block;
      position: relative;
      margin: 0;
      cursor: pointer;
    }
    .painting:focus-visible {
      outline: 2px solid var(--ink);
      outline-offset: 6px;
      border-radius: 2px;
    }
    .painting img {
      width: 100%;
      height: auto;
      filter: drop-shadow(0 12px 24px rgba(26, 22, 18, 0.18));
      transition: transform 0.4s ease, filter 0.4s ease;
    }
    .painting:hover img {
      transform: translateY(-4px);
      filter: drop-shadow(0 18px 30px rgba(26, 22, 18, 0.26));
    }


    /* ============================================================
       LIGHTBOX / SLIDESHOW VIEWER
       Modal that opens on painting click; swipe (mobile) /
       arrow keys + buttons (desktop) navigate through all paintings.
       ============================================================ */
    .lightbox {
      position: fixed;
      inset: 0;
      z-index: 100;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.24s ease, visibility 0s linear 0.24s;
      padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    }
    .lightbox.is-open {
      opacity: 1;
      visibility: visible;
      transition: opacity 0.24s ease;
    }
    .lightbox-backdrop {
      position: absolute;
      inset: 0;
      background: rgba(252, 248, 241, 0.96);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
    }
    .lightbox-stage {
      position: relative;
      z-index: 1;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .lightbox-image {
      display: block;
      max-width: 92vw;
      max-height: 86vh;
      width: auto;
      height: auto;
      filter: drop-shadow(0 24px 50px rgba(26, 22, 18, 0.28));
      transition: opacity 0.18s ease;
    }
    @media (min-width: 1024px) {
      .lightbox-image {
        max-width: 88vw;
        max-height: 94vh;
      }
      /* Feature paintings get a slightly zoomed treatment so they read
         visually larger in the lightbox. Slight overflow above/below
         viewport is intentional — gives a "leaning closer" feel. */
      .lightbox-image.is-feature {
        max-width: 92vw;
        max-height: 105vh;
      }
    }
    .lightbox-image.is-fading { opacity: 0; }
    @media (hover: hover) and (pointer: fine) {
      .lightbox-image { cursor: pointer; }
    }
    .lightbox-close,
    .lightbox-nav {
      position: absolute;
      z-index: 2;
      background: transparent;
      border: 0;
      padding: 12px;
      color: var(--ink);
      cursor: pointer;
      opacity: 0.55;
      transition: opacity 0.2s ease;
      -webkit-tap-highlight-color: transparent;
    }
    .lightbox-close:hover,
    .lightbox-nav:hover { opacity: 1; }
    .lightbox-close:focus-visible,
    .lightbox-nav:focus-visible {
      opacity: 1;
      outline: 2px solid var(--ink);
      outline-offset: 2px;
      border-radius: 2px;
    }
    .lightbox-close { top: 12px; right: 12px; }
    .lightbox-nav { top: 50%; transform: translateY(-50%); }
    .lightbox-prev { left: 8px; }
    .lightbox-next { right: 8px; }
    /* Hide arrow buttons on touch-primary devices; swipe is the gesture there */
    @media (hover: none) and (pointer: coarse) {
      .lightbox-nav { display: none; }
    }
    .lightbox-counter {
      position: absolute;
      bottom: 16px;
      left: 50%;
      transform: translateX(-50%);
      font-family: var(--body);
      font-size: 13px;
      letter-spacing: 0.04em;
      color: var(--ink);
      opacity: 0.55;
      z-index: 2;
    }
    /* Body scroll-lock helper class applied via JS */
    body.lightbox-open { overflow: hidden; }


    /* ============================================================
       VIDEO PLACEHOLDER
       Section block ready for later — currently hidden via display:none.
       Remove the .is-empty class (or its CSS) and drop a <video> /
       <iframe> in to activate.
       ============================================================ */
    .video-section {
      background: var(--paper-deep);
      padding: var(--space-3xl) 24px;
      border-top: 1px solid rgba(26, 22, 18, 0.08);
    }
    .video-section.is-empty { display: none; }
    .video-inner {
      max-width: var(--max-w);
      margin: 0 auto;
    }
    .video-frame {
      aspect-ratio: 16 / 9;
      background: var(--ink);
      width: 100%;
    }


    /* ============================================================
       FOOTER
       ============================================================ */
    .site-footer {
      background:
        radial-gradient(circle at 12% 18%, rgba(165, 255, 0, 0.14), transparent 32%),
        radial-gradient(circle at 82% 86%, rgba(0, 255, 190, 0.1), transparent 36%),
        linear-gradient(135deg, var(--moss-label) 0%, #273418 38%, #132414 72%, #0b100d 100%);
      padding: 110px 24px 44px;
      border-top: 1px solid rgba(200, 255, 0, 0.28);
      min-height: 420px;
      display: flex;
    }
    .site-footer-inner {
      max-width: var(--max-w);
      margin: 0 auto;
      width: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      gap: 72px;
    }
    .footer-signature {
      width: min(82vw, 980px);
      aspect-ratio: 4585 / 1927;
      background: linear-gradient(115deg, #dce87a 0%, #c7d638 24%, #eef6a3 48%, #a9bc22 72%, #f5ffd0 100%);
      background-size: 280% 280%;
      -webkit-mask: url('brand/signature.webp') left center / contain no-repeat;
              mask: url('brand/signature.webp') left center / contain no-repeat;
      filter:
        drop-shadow(0 0 46px rgba(220, 232, 122, 0.38))
        drop-shadow(0 0 16px rgba(245, 255, 208, 0.32));
      opacity: 0;
      transform: translateY(24px);
      animation:
        footer-emerge 1.6s cubic-bezier(0.16, 1, 0.3, 1) 0.25s forwards,
        footer-swamp-shift 12s ease-in-out 1.8s infinite,
        footer-swamp-glow 8s ease-in-out 1.8s infinite;
    }
    @keyframes footer-emerge {
      to { opacity: 1; transform: translateY(0); }
    }
    @keyframes footer-swamp-shift {
      0%, 100% { background-position: 0% 54%; }
      50%      { background-position: 100% 46%; }
    }
    @keyframes footer-swamp-glow {
      0%, 100% {
        filter:
          drop-shadow(0 0 34px rgba(220, 232, 122, 0.3))
          drop-shadow(0 0 12px rgba(245, 255, 208, 0.22));
      }
      50% {
        filter:
          drop-shadow(0 0 54px rgba(220, 232, 122, 0.48))
          drop-shadow(0 0 20px rgba(245, 255, 208, 0.38));
      }
    }
    .footer-meta {
      font-family: var(--display);
      font-size: 13px;
      text-transform: uppercase;
      letter-spacing: 0.18em;
      color: rgba(234, 255, 194, 0.62);
      font-weight: 500;
      align-self: flex-end;
    }
    .footer-meta a {
      color: rgba(234, 255, 194, 0.72);
      text-decoration: none;
      margin-left: 24px;
      transition: color 0.2s ease, text-shadow 0.2s ease;
    }
    .footer-meta a:hover {
      color: #c8ff00;
      text-shadow: 0 0 14px rgba(0, 255, 170, 0.45);
    }
    @media (min-width: 768px) {
      .site-footer {
        padding: 140px 32px 52px;
        min-height: 520px;
      }
      .footer-signature {
        width: min(62vw, 1080px);
      }
    }
    @media (max-width: 767px) {
      .site-footer {
        min-height: 360px;
      }
      .footer-meta {
        align-self: flex-start;
      }
      .footer-meta a { margin-left: 0; margin-right: 20px; }
    }
    @media (prefers-reduced-motion: reduce) {
      .footer-signature {
        animation: none;
        opacity: 1;
        transform: none;
        background-position: 50% 50%;
      }
    }